/* Tarjetas de «Oferta académica» · FUENTE ÚNICA (24-10-2026)
   Las usan la portada v3 (se carga ANTES de home-v3.css, así el orden respecto de lo demás no cambia)
   y /oferta-academica/. Movidas tal cual desde home-v3.css. Marcado: home-parts/oferta-tarjetas.php */
.v3-oa{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}
.v3-oa__card{
  --c1:#7E1A3A; --c2:#3d0e18;
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:440px; padding:28px 26px 26px; border-radius:24px; overflow:hidden; isolation:isolate;
  color:#fff !important; text-decoration:none !important;
  background:
    radial-gradient(120% 70% at 90% -10%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 60% at -10% 110%, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(155deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow:0 24px 50px -22px rgba(66,15,27,.65), 0 2px 6px -2px rgba(66,15,27,.25), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.v3-oa__card--2{ --c1:#5E1626; --c2:#22070d; }
.v3-oa__card--3{ --c1:#BD2453; --c2:#5E1626; }
.v3-oa__card--4{ --c1:#8a1d3f; --c2:#2A0610; }
.v3-oa__card--5{ --c1:#A02654; --c2:#3d0e18; }
/* trama fina dorada, sólo arriba a la derecha */
.v3-oa__card::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(230,212,168,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(230,212,168,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(85% 60% at 100% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(85% 60% at 100% 0%, #000 0%, transparent 75%);
}
/* borde de luz */
.v3-oa__card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
/* el ícono del tipo, grande y tenue, como marca de agua */
.v3-oa__mark{
  position:absolute; right:-34px; bottom:96px; width:200px; height:200px; z-index:-1; pointer-events:none;
  /* trazo opaco y la transparencia en el ícono entero: con el trazo semitransparente, donde dos
     líneas se cruzan o se tocan las puntas se sumaba el color y se notaban las uniones */
  fill:none; stroke:#fff; opacity:.09; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
  transform:rotate(-8deg); transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
/* destello que cruza al activar */
.v3-oa__shine{
  position:absolute; top:-30%; bottom:-30%; left:-70%; width:50%; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(0) skewX(-14deg); opacity:0;
}
/* sello de vidrio esmerilado */
.v3-oa__ico{
  position:relative; z-index:2; width:60px; height:60px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .45s cubic-bezier(.175,.885,.32,1.275), background .4s ease;
}
.v3-oa__ico svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.v3-oa__meta{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; }
.v3-oa__meta::before{ content:''; width:40px; height:3px; border-radius:3px; background:#E6D4A8; margin-bottom:16px; transition:width .5s ease; }
.v3-oa__name{ font-family:var(--ujp-font-display); font-weight:700; font-size:2rem; line-height:1.08; letter-spacing:-.01em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.25); }
.v3-oa__desc{ margin-top:.6rem; font-size:1.02rem; line-height:1.45; color:rgba(255,255,255,.80); }
/* «Ver programas» es el botón ORBITAL de la página de estilo (.ujp-btn-orbit, componentes.css),
   en tamaño chico. Acá sólo se acomoda: el vidrio, el brillo y el resplandor son los del sistema. */
.v3-oa__cta.ujp-btn-orbit{ margin-top:1.3rem; padding:11px 24px; font-size:.86rem; }
.v3-oa__cta i{ display:inline-block; font-style:normal; transition:transform .35s ease; }
.v3-oa__card:focus-visible{ outline:3px solid #E6D4A8; outline-offset:4px; }

/* estado activo · hover con mouse / .is-pressed al tocar */
.v3-oa__card.is-pressed{ transform:translateY(-6px); box-shadow:0 34px 60px -22px rgba(189,36,83,.65), 0 0 0 1px rgba(255,255,255,.10); }
.v3-oa__card.is-pressed .v3-oa__shine{ animation:v3-shine 1s ease-out 1; }
.v3-oa__card.is-pressed .v3-oa__cta.ujp-btn-orbit::after{ opacity:1; filter:blur(8px); }
@media (hover:hover) and (pointer:fine){
  .v3-oa__card:hover{ transform:translateY(-10px); box-shadow:0 40px 70px -24px rgba(189,36,83,.70), 0 0 0 1px rgba(255,255,255,.10); }
  .v3-oa__card:hover .v3-oa__shine{ animation:v3-shine 1.1s ease-out 1; }
  .v3-oa__card:hover .v3-oa__mark{ transform:rotate(-2deg) scale(1.08); opacity:.15; }
  .v3-oa__card:hover .v3-oa__ico{ transform:scale(1.08); background:rgba(255,255,255,.22); }
  .v3-oa__card:hover .v3-oa__meta::before{ width:64px; }
  /* pasar por la tarjeta enciende el botón como si se pasara por él (mismos valores que .ujp-btn-orbit:hover) */
  .v3-oa__card:hover .v3-oa__cta.ujp-btn-orbit{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.16), 0 0 0 3px rgba(255,255,255,.10), 0 0 22px 2px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 40px rgba(255,255,255,.05); }
  .v3-oa__card:hover .v3-oa__cta.ujp-btn-orbit::after{ opacity:1; filter:blur(8px); }
  .v3-oa__card:hover .v3-oa__cta i{ transform:translateX(4px); }
}
@keyframes v3-shine{ 0%{ opacity:0; transform:translateX(0) skewX(-14deg); } 20%{ opacity:1; } 100%{ opacity:0; transform:translateX(480%) skewX(-14deg); } }

/* entrada escalonada (la clase .js-reveal la pone home-v3.js; sin JS se ven igual) */
.v3-oa.js-reveal .v3-oa__card{ opacity:0; transform:translateY(26px); }
.v3-oa.js-reveal.is-in .v3-oa__card{ opacity:1; transform:none; transition:opacity .7s ease var(--d), transform .8s cubic-bezier(.2,.8,.2,1) var(--d), box-shadow .5s ease; }
@media (prefers-reduced-motion:reduce){
  .v3-oa.js-reveal .v3-oa__card{ opacity:1; transform:none; }
  .v3-oa__shine,.v3-oa__mark{ animation:none !important; transition:none !important; }
}
html.a11y-motion .v3-oa.js-reveal .v3-oa__card{ opacity:1; transform:none; }
html.a11y-motion .v3-oa__shine{ animation:none !important; }

@media (max-width:1240px){ .v3-oa{ grid-template-columns:repeat(3,1fr); } .v3-oa__card{ min-height:400px; } }
@media (max-width:860px){ .v3-oa{ grid-template-columns:repeat(2,1fr); } .v3-oa__card:nth-child(5){ grid-column:1/-1; min-height:300px; } }
/* celular: carrusel deslizable, como el de fotos (≈1,2 tarjetas a la vista) */
@media (max-width:600px){
  .v3-oa{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:6px 20px 48px; margin:0 -1.2rem -22px; scroll-padding-left:20px;
  }
  /* el scroll horizontal recorta también en vertical: sombra más corta, que entre en el aire de abajo */
  .v3-oa__card{ box-shadow:0 16px 28px -18px rgba(66,15,27,.6), inset 0 1px 0 rgba(255,255,255,.14); }
  .v3-oa::-webkit-scrollbar{ display:none; }
  .v3-oa__card,.v3-oa__card:nth-child(5){ flex:0 0 80%; min-height:380px; scroll-snap-align:start; grid-column:auto; }
  .v3-oa__name{ font-size:1.9rem; }
}

.v3-oa__cta{ white-space:nowrap; }

/* ── Sección «Oferta académica» completa (wpx_oferta_seccion_html): igual en la portada y en /oferta-academica/ ── */
/* fondo de la banda (venía de home-v3.css): crema con dos brillos de tamaño fijo, que se desvanecen
   antes de tocar los bordes de la sección, así no marcan una línea contra la sección vecina */
.wpx-oferta-banda{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(520px 260px at 8% 38%, rgba(189,36,83,.10) 0%, rgba(189,36,83,0) 70%),
    radial-gradient(520px 260px at 92% 66%, rgba(200,162,75,.14) 0%, rgba(200,162,75,0) 70%),
    #FBF8F4;
}
@media (max-width:600px){ .wpx-oferta-banda{ background:#FBF8F4; } }
/* título + bajada: las medidas del encabezado de AUSJAL en la portada (.v3-aus__head), también en la página */
.wpx-oferta__head{ max-width:820px; margin:0 auto 2.6rem; text-align:center; }
.wpx-oferta__head .wpx-oferta__titulo{ font-family:var(--ujp-font-display); font-size:clamp(2rem,4.2vw,3rem); font-weight:var(--ujp-fw-bold,700); color:var(--ujp-wine,#5E1626); line-height:1.15; letter-spacing:normal; text-align:center; max-width:none; margin:0 0 1rem; }
.wpx-oferta__head .wpx-oferta__bajada{ margin:0; font-size:1.22rem; line-height:1.65; color:var(--ujp-muted,#6A5F62); text-wrap:balance; }
/* catálogo: el PDF de la propia web, con un botón que lo descarga */
.wpxoa-cat{ max-width:1320px; margin:40px auto 0; }
.wpxoa-cat .wpxoa-cat__in{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid rgba(94,22,38,.12); border-radius:20px; padding:22px 26px; box-shadow:0 12px 30px -20px rgba(66,15,27,.45); }
.wpxoa-cat .wpxoa-cat__ico{ flex:none; width:56px; height:56px; border-radius:14px; background:rgba(160,38,84,.09); color:var(--ujp-wine,#5E1626); display:grid; place-items:center; }
.wpxoa-cat .wpxoa-cat__ico svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wpxoa-cat .wpxoa-cat__txt{ flex:1; min-width:0; text-align:left; }
.wpxoa-cat .wpxoa-cat__t{ margin:0 0 4px; font-family:var(--ujp-font-body,inherit); font-size:20px; line-height:1.3; font-weight:700; letter-spacing:normal; color:var(--ujp-wine,#5E1626); }
.wpxoa-cat .wpxoa-cat__d{ margin:0; font-size:16px; line-height:1.5; color:var(--ujp-muted,#6A5F62); }
.wpxoa-cat .wpxoa-cat__acc{ flex:none; display:flex; align-items:center; gap:18px; }
.wpxoa-cat .wpxoa-cat__peso{ color:var(--ujp-muted,#6A5F62); font-size:14px; font-weight:500; letter-spacing:.01em; white-space:nowrap; }
/* tablet (641-820 px): la fila no entra; el texto arriba y el botón con el peso abajo, a su ancho */
@media (max-width:820px){ .wpxoa-cat .wpxoa-cat__in{ flex-direction:column; align-items:flex-start; } }
@media (max-width:640px){
  .wpxoa-cat .wpxoa-cat__in{ flex-direction:column; align-items:flex-start; padding:20px; }
  .wpxoa-cat .wpxoa-cat__acc{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .wpxoa-cat .wpxoa-cat__acc .ujp-btn-wine{ width:100%; text-align:center; }
  .wpxoa-cat .wpxoa-cat__peso{ text-align:center; }
}
/* los botones como en la portada (home.css: .ujp-home .ujp-btn-orbit span · home-v3.css: .ujp-home.v3 .ujp-btn-wine),
   también en /oferta-academica/, así la sección mide igual en los dos lados */
.wpx-oferta-banda .ujp-btn-orbit span{ display:inline-flex; align-items:center; gap:.7rem; }
.wpx-oferta-banda .ujp-btn-wine{ font-size:1.15rem; max-width:100%; white-space:normal; text-align:center; line-height:1.25; text-wrap:balance; }
@media (max-width:480px){ .wpx-oferta-banda .ujp-btn-wine{ padding-inline:1.4rem; } }