/* ============================================================
   UJP · Home v3 STAGING · webproX · 20-oct-2026
   Sólo lo carga page-home-v3.php. No afecta la home publicada.
   1. Tipografía más grande (todo el sitio de la propuesta, menú incluido)
   2. Hero sobrio
   3. Oferta sin fotos
   4. Instagram 1350x1080
   5. AUSJAL 4 columnas
   6. Radio flotante
   7. Accesibilidad
   ============================================================ */

/* ─── 1 · TEXTOS MÁS GRANDES ──────────────────────────────── */
.ujp-home.v3 .home-title{ font-size:clamp(2rem,4.2vw,3rem); }
.ujp-home.v3 .home-text{ font-size:1.22rem; line-height:1.75; }
.ujp-home.v3 .ujp-btn-wine{ font-size:1.15rem; }
.ujp-home.v3 .home-band{ padding-block:5.5rem; }

/* botonera */
.ujp-home.v3 .botonera-ujp .boton__titulo{ font-size:16.5px; max-width:168px; line-height:1.25; }
@media (min-width:1280px){ .ujp-home.v3 .botonera-ujp .boton__titulo{ font-size:18px; } }
@media (max-width:767px){ .ujp-home.v3 .botonera-ujp .boton__titulo{ font-size:15.5px; max-width:none; } }

/* shorts */
.ujp-home.v3 .ujp-shorts__title{ font-size:clamp(2rem,4.2vw,3rem) !important; }
.ujp-home.v3 .ujp-shorts__lead{ font-size:1.22rem !important; }
.ujp-home.v3 .ujp-shorts__caption{ font-size:1.02rem !important; }
.ujp-home.v3 .ujp-shorts__cta,.ujp-home.v3 .ujp-shorts__link{ font-size:1.02rem !important; }

/* widgets Elfsight: sólo el texto */
.ujp-home.v3 .eapps-instagram-feed-posts-item-text{ font-size:17px !important; line-height:1.5 !important; }
.ujp-home.v3 .eapps-instagram-feed-posts-item-user-name{ font-size:16px !important; }
.ujp-home.v3 .eapps-instagram-feed-posts-item-date,
.ujp-home.v3 .eapps-instagram-feed-posts-item-counters{ font-size:14px !important; }
.ujp-home.v3 .es-review-content-text-container{ font-size:19px !important; line-height:1.55 !important; }
.ujp-home.v3 .es-review-author-name-container{ font-size:18px !important; }
.ujp-home.v3 .es-review-info-date-container{ font-size:14px !important; }

/* MENÚ (header nav v2 que inyecta wpx-chrome-ujp; aquí sólo se agranda) */
body.ujp-home-v3 .ujp-chrome .wpxc-v2 .wpxc-accesos a,
body.ujp-home-v3 .ujp-chrome .wpxc-v2 .wpxc-acc-off{ font-size:15.5px; }
@media (min-width:861px){
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .ch-nav>a,
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .ch-nav-item>a,
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .ch-nav>.wpxc-off{ font-size:19.5px; padding:0 14px; }
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .wpxc-sub a,
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .wpxc-sub .wpxc-off{ font-size:17px !important; }
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .wpxc-sub-ancho a,
  body.ujp-home-v3 .ujp-chrome .wpxc-loyola .wpxc-sub-cols a{ font-size:16px !important; }
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .wpxc-grupo-t{ font-size:12.5px; }
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .ch-logo img{ height:62px; }
}
@media (max-width:860px){
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .ch-nav a{ font-size:20px !important; }
  body.ujp-home-v3 .ujp-chrome .wpxc-v2 .ch-nav .wpxc-sub a{ font-size:18px !important; }
}
/* footer */
body.ujp-home-v3 .ujp-home .ch-ft-col h4{ font-size:1.75rem; }
body.ujp-home-v3 .ujp-home .ch-ft-col a,
body.ujp-home-v3 .ujp-home .ch-contact .row{ font-size:1.35rem; }
body.ujp-home-v3 .ujp-home .ch-ft-brand p{ font-size:1.1rem; }
body.ujp-home-v3 .ujp-home .ch-bottom{ font-size:1.1rem; }
body.ujp-home-v3 .ujp-home .ch-map h4{ font-size:1.35rem; }

/* ─── 2 · HERO SOBRIO + LUPI ──────────────────────────────────
   Fondo LISO #420F1B (--ujp-wine-deep). Es el color con el que se compuso el
   video de Lupi: su fondo viene precompensado por formato para que, ya
   decodificado, quede a ±1 nivel de este en Chrome y Safari. Por eso acá no
   va ningún degradado: cualquier variación de fondo dejaría ver la caja. */
.v3-hero{
  --cream:#FBF8F4; --gold:#D9C08A; --hero-bg:#420F1B;
  position:relative; color:var(--cream);
  background:var(--hero-bg);
  font-family:var(--ujp-font-body);
  overflow:hidden;
}
.v3-hero::after{   /* filete dorado inferior */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,192,138,.55),transparent);
}
.v3-hero__in{
  max-width:1240px; margin:0 auto;
  padding:clamp(3.5rem,7vw,6rem) clamp(1.25rem,4vw,2.5rem) 0;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.5rem,4vw,4rem); align-items:end;
}
.v3-hero__copy{ padding-bottom:clamp(2.5rem,5vw,4.5rem); }
.v3-eyebrow{
  margin:0 0 1.6rem; display:flex; align-items:center; gap:14px;
  font-size:.95rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.v3-eyebrow::before{ content:""; width:44px; height:1px; background:var(--gold); flex:none; }
.v3-hero h1{
  margin:0 0 1.6rem; font-family:var(--ujp-font-display); font-weight:400;
  font-size:clamp(2.5rem,5vw,4.4rem); line-height:1.06; letter-spacing:-.012em; color:var(--cream);
  text-wrap:balance;
}
.v3-hero__lead{ margin:0 0 2rem; max-width:34em; font-size:1.3rem; line-height:1.6; color:rgba(251,248,244,.82); }
.v3-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.v3-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.8rem; border-radius:999px; text-decoration:none !important;
  font-weight:600; font-size:1.1rem; transition:transform .2s ease, background .2s ease;
}
.v3-btn--cream{ background:var(--cream); color:#4A1220 !important; }
.v3-btn--cream:hover{ transform:translateY(-2px); background:#fff; }
.v3-btn:focus-visible,.v3-link-light:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.v3-link-light{
  color:var(--cream) !important; font-size:1.1rem; font-weight:500; text-decoration:none;
  border-bottom:1px solid rgba(217,192,138,.6); padding-bottom:2px;
}
.v3-link-light:hover{ border-bottom-color:var(--cream); }

/* Lupi SIN FONDO: el video trae transparencia. Sin caja, sombra ni halo; sólo
   un fundido abajo, donde el cuadro corta a la cintura. */
.v3-lupi{
  position:relative; justify-self:center; align-self:end;
  height:clamp(440px,64vh,620px); aspect-ratio:9/16; max-width:100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
  pointer-events:none; user-select:none;
}
.v3-lupi__poster,.v3-lupi__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  background:transparent;
}
/* Sin transiciones de opacidad: dos capas transparentes a medio fundir dejarían
   ver a Lupi duplicado. El primer cuadro de cada video es idéntico al anterior,
   así que el cambio es instantáneo e invisible. Mientras no reproduce, el video
   queda oculto: si el navegador bloquea el autoplay (iPhone en ahorro de
   batería) se ve el póster limpio, sin ícono de play. */
.v3-lupi__video{ visibility:hidden; }
.v3-lupi.is-intro .v3-lupi__intro{ visibility:visible; }
.v3-lupi.is-intro .v3-lupi__poster{ visibility:hidden; }
/* terminado: si el video llegó al final queda detenido en su último cuadro;
   si no, sólo la imagen fija del pulgar */
.v3-lupi.is-done:not(.is-ended) .v3-lupi__intro{ display:none; }
.v3-lupi.is-ended .v3-lupi__intro{ visibility:visible; }
.v3-lupi.is-ended .v3-lupi__poster{ visibility:hidden; }
.v3-lupi__video::-webkit-media-controls,
.v3-lupi__video::-webkit-media-controls-start-playback-button,
.v3-lupi__video::-webkit-media-controls-overlay-play-button{ display:none !important; -webkit-appearance:none; }

/* Convocatoria · botón orbital del sistema (componentes.css + luz de home.js) */
.ujp-home.v3 .v3-cta-orbit{ padding:18px 40px; font-size:1.1rem; background:rgba(255,255,255,.08); border-color:rgba(230,212,168,.6); }
.ujp-home.v3 .v3-cta-orbit span{ display:inline-flex; align-items:center; gap:.6rem; }
.ujp-home.v3 .v3-cta-orbit svg{ width:20px; height:20px; flex:none; }
.ujp-home.v3 .v3-cta-orbit b{ font-weight:400; }
.ujp-home.v3 .v3-cta-orbit:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
@media (max-width:480px){ .ujp-home.v3 .v3-cta-orbit{ padding:15px 28px; font-size:1rem; } }
html.a11y-motion .ujp-glass-dot{ display:none; }
@media (prefers-reduced-motion:reduce){ .ujp-glass-dot{ display:none; } }
/* Hero · 28-10-2026: el orbital dice «Inscribite aquí →» y lleva a /inscripcion/; «Ver oferta académica» es el secundario de la página
   de estilo para fondo oscuro (.ujp-pill.is-outline.on-dark, componentes.css); debajo, la línea chica de la convocatoria. */
.ujp-home.v3 .v3-cta-sec:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.ujp-home.v3 .v3-hero__conv{ margin:1.15rem 0 0; }
.ujp-home.v3 .v3-hero__conv .v3-link-light{ font-size:.95rem; }
@media (max-width:480px){ .ujp-home.v3 .v3-hero__conv .v3-link-light{ font-size:.88rem; } }

.v3-hero__stats{
  position:relative; z-index:1;
  max-width:1240px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem) clamp(2.5rem,4vw,3.5rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.v3-stat{ display:flex; flex-direction:column; gap:.35rem; padding-top:1.2rem; border-top:1px solid rgba(251,248,244,.16); }
.v3-stat__n{ font-family:var(--ujp-font-display); font-size:clamp(2.2rem,3.4vw,2.9rem); line-height:1; color:var(--cream); }
.v3-stat__l{ font-size:1.2rem; line-height:1.4; color:rgba(251,248,244,.7); }

/* tablet: Lupi más chico, sigue a la derecha */
@media (max-width:1100px){
  .v3-hero__in{ grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); }
  .v3-lupi{ height:clamp(380px,52vh,520px); }
}
/* celular: titular y botón primero, Lupi debajo (nunca tapa texto) */
@media (max-width:640px){
  .v3-hero__in{ grid-template-columns:1fr; gap:0; padding-top:2.2rem; }
  .v3-hero__copy{ padding-bottom:1.2rem; }
  .v3-eyebrow{ margin-bottom:1rem; }
  .v3-hero h1{ margin-bottom:1rem; font-size:clamp(2.1rem,9vw,2.6rem); }
  .v3-hero__lead{ font-size:1.12rem; margin-bottom:1.4rem; }
  .v3-lupi{ height:min(92vw,400px); }
}
@media (max-width:600px){
  .v3-hero__stats{ grid-template-columns:1fr; gap:0; }
  .v3-stat{ flex-direction:row; align-items:baseline; gap:1rem; padding:1rem 0; }
  .v3-stat__n{ min-width:4.2ch; }
  .v3-eyebrow{ font-size:.8rem; letter-spacing:.18em; }
}

/* ─── 3 · OFERTA · tarjetas protagonistas (a la altura de las de fotos, sin fotos)
   Cada tarjeta: degradé profundo de la marca (un tono por tipo), trama fina y
   luz alta, el ícono del tipo en grande como marca de agua, sello de vidrio
   esmerilado, título grande en blanco, filete dorado y píldora "Ver programas".
   Entran escalonadas al aparecer (home-v3.js · .is-in). Hover con mouse;
   en táctil el realce sale sólo al tocar (.is-pressed). */
/* el fondo de la banda de Oferta es .wpx-oferta-banda, en assets/oferta-tarjetas.css (compartido con /oferta-academica/, 24-10-2026) */
/* Las tarjetas de Oferta (.v3-oa*) viven en assets/oferta-tarjetas.css, compartidas con /oferta-academica/ (24-10-2026). */
@keyframes v3-ring-once{ 0%{ opacity:.7; transform:scale(1); } 100%{ opacity:0; transform:scale(1.5); } }

/* ─── 3b · BOTONERA EN PANTALLAS TÁCTILES ──────────────────────
   home.css (compartido con la home publicada, no se toca) usa :hover con un
   anillo que late sin parar y :active. En táctil los dos se disparan al pasar
   el dedo deslizando, no sólo al presionar. Acá, sólo en la propuesta v3 y sólo
   en pantallas sin hover: se neutralizan y el efecto pasa a la clase
   .is-pressed, que home-v3.js pone únicamente con un toque real (click). */
@media (hover:none){
  .ujp-home.v3 .botonera-ujp .boton:hover,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover,
  .ujp-home.v3 .botonera-ujp .boton:active,.ujp-home.v3 .botonera-ujp .boton-dropdown:active{ transform:none; }
  .ujp-home.v3 .botonera-ujp .boton:hover .boton__icono,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover .boton__icono,
  .ujp-home.v3 .botonera-ujp .boton:active .boton__icono,.ujp-home.v3 .botonera-ujp .boton-dropdown:active .boton__icono{
    background:radial-gradient(125% 95% at 30% 18%, #ffffff 0%, #fdf4f6 55%, #f7e6ec 100%);
    border-color:rgba(189,36,83,.28);
    box-shadow:0 6px 18px rgba(189,36,83,.12), inset 0 1px 2px rgba(255,255,255,.95);
    transform:none;
  }
  .ujp-home.v3 .botonera-ujp .boton:hover .boton__icono::before,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover .boton__icono::before{
    background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, transparent 100%);
  }
  .ujp-home.v3 .botonera-ujp .boton:hover .boton__icono::after,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover .boton__icono::after{
    opacity:0; transform:scale(.8); animation:none;
  }
  .ujp-home.v3 .botonera-ujp .boton:hover .boton__icono svg,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover .boton__icono svg,
  .ujp-home.v3 .botonera-ujp .boton:hover .boton__icono svg *,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover .boton__icono svg *,
  .ujp-home.v3 .botonera-ujp .boton:active .boton__icono svg,.ujp-home.v3 .botonera-ujp .boton:active .boton__icono svg *{
    color:#BD2453 !important; stroke:#BD2453 !important; transform:none; filter:none;
  }
  .ujp-home.v3 .botonera-ujp .boton:hover .boton__titulo,.ujp-home.v3 .botonera-ujp .boton-dropdown:hover .boton__titulo,
  .ujp-home.v3 .botonera-ujp .boton:active .boton__titulo{ color:#6B1B31 !important; }
  .ujp-home.v3 .botonera-ujp .boton:hover .external-badge{ opacity:0; transform:scale(.5); }
}
/* efecto al presionar (todas las pantallas; en mouse ya lo da el hover).
   Selectores con .boton/.boton-dropdown + .is-pressed: misma especificidad que
   la neutralización de arriba y declarados después, así ganan sobre el :hover
   "pegado" que deja el toque en táctil. */
.ujp-home.v3 .botonera-ujp .boton.is-pressed .boton__icono,
.ujp-home.v3 .botonera-ujp .boton-dropdown.is-pressed .boton__icono{
  background:linear-gradient(135deg,#BD2453 0%,#8a1d3f 100%) !important; border-color:transparent !important;
  box-shadow:0 14px 34px rgba(189,36,83,.45) !important; transform:scale(1.08) rotate(4deg) !important;
}
.ujp-home.v3 .botonera-ujp .boton.is-pressed .boton__icono::after,
.ujp-home.v3 .botonera-ujp .boton-dropdown.is-pressed .boton__icono::after{ animation:v3-ring-once .7s ease-out 1 !important; }
.ujp-home.v3 .botonera-ujp .boton.is-pressed .boton__icono svg,.ujp-home.v3 .botonera-ujp .boton.is-pressed .boton__icono svg *,
.ujp-home.v3 .botonera-ujp .boton-dropdown.is-pressed .boton__icono svg,.ujp-home.v3 .botonera-ujp .boton-dropdown.is-pressed .boton__icono svg *{ color:#fff !important; stroke:#fff !important; }
.ujp-home.v3 .botonera-ujp .boton.is-pressed .boton__titulo,
.ujp-home.v3 .botonera-ujp .boton-dropdown.is-pressed .boton__titulo{ color:#BD2453 !important; }

/* ─── 4 · INSTAGRAM · recuadro vertical 4:5 (1080 x 1350) ────
   Formato vertical de Instagram y de los flyers UJP. La imagen se ve ENTERA:
   las 4:5 llenan el recuadro; cualquier otra proporción va encajada completa
   (contain) sobre fondo neutro. Nunca se recorta. */
.ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-item-image-wrapper{
  padding-top:125% !important;            /* 1350/1080 */
  background:#F2ECE3 !important;
}
.ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-item-image{
  top:0 !important; left:0 !important; transform:none !important;
  width:100% !important; height:100% !important; min-width:0 !important; max-width:none !important;
  object-fit:contain !important; object-position:center !important; aspect-ratio:auto !important;
}

/* ─── 5 · AUSJAL · 4 COLUMNAS ─────────────────────────────── */
.v3-aus__head{ max-width:820px; margin:0 auto 2.6rem; text-align:center; }
.v3-aus__head .home-title{ margin-bottom:1rem !important; }
.v3-aus__lead{ margin:0; font-size:1.22rem; line-height:1.65; color:var(--ujp-muted); }
.v3-aus__grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.v3-aus__card{
  position:relative; display:flex; flex-direction:column;
  padding:0 1.5rem 1.5rem; border-radius:16px; background:#fff;
  border:1px solid var(--ujp-line); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
/* imagen arriba: 16:9 a todo el ancho de la tarjeta, recorte centrado. Con
   padding-top y no aspect-ratio: WebKit no respeta aspect-ratio en un ítem flex
   en columna. */
.v3-aus__media{
  position:relative; flex:none; height:0;
  padding-top:calc(56.25% + 1.6875rem);   /* 9/16 del ancho real (incluye los 1,5rem x 2 del margen negativo) */
  margin:0 -1.5rem 1.3rem; overflow:hidden;
  background:#F2ECE3;
}
.v3-aus__media img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* sin imagen: bloque neutro en tonos de la marca, sin logo */
.v3-aus__media.is-empty{ background:linear-gradient(135deg,#5E1626 0%,#420F1B 100%); }
.v3-aus__card:hover{ transform:translateY(-4px); box-shadow:var(--ujp-shadow-hover); }
.v3-aus__date{ font-size:.9rem; font-weight:600; letter-spacing:.06em; color:#8a7d80; margin-bottom:.7rem; }
.v3-aus__t{ margin:0 0 .7rem; font-size:1.22rem; line-height:1.3; font-weight:700; }
.v3-aus__t a{ color:var(--ujp-ink) !important; text-decoration:none !important; }
.v3-aus__t a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }   /* tarjeta entera clickeable */
.v3-aus__card:hover .v3-aus__t a{ color:var(--ujp-wine) !important; }
.v3-aus__t a:focus-visible{ outline:none; }
.v3-aus__card:focus-within{ outline:2px solid var(--ujp-wine); outline-offset:3px; }
.v3-aus__x{
  margin:0; font-size:1.08rem; line-height:1.6; color:var(--ujp-muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;   /* 3 líneas, con … */
}
.v3-aus__more{ margin-top:auto; padding-top:1.1rem; font-size:.95rem; font-weight:600; color:var(--ujp-magenta); }
.v3-aus__foot{ text-align:center; margin-top:2.6rem; }
.v3-aus__empty{ text-align:center; color:var(--ujp-muted); font-size:1.1rem; }
@media (max-width:1100px){ .v3-aus__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .v3-aus__grid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 20px 28px; margin:0 -1.2rem -12px; scroll-padding-left:20px; }
  .v3-aus__grid::-webkit-scrollbar{ display:none; }
  .v3-aus__card{ flex:0 0 82%; scroll-snap-align:start; }
  .v3-aus__card:hover{ transform:none; }
}

/* ─── 6 y 7 · FLOTANTES y ACCESIBILIDAD: desde el 24-10-2026 viven en
   assets/herramientas/herramientas.css, que carga todo el sitio (la portada incluida). ─── */

/* carril libre en el hero de escritorio (contenido desde x ≥ 96) */
@media (min-width:861px){
  .v3-hero__in,.v3-hero__stats{
    padding-left:max(clamp(1.25rem,4vw,2.5rem), calc(96px - max(0px,(100vw - 1240px)/2)));
    padding-right:max(clamp(1.25rem,4vw,2.5rem), calc(96px - max(0px,(100vw - 1240px)/2)));
  }
}


/* cinta de staging */
.v3-staging-flag{
  position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:99999;
  background:#FFB800; color:#1A1418; font:700 12px/1 system-ui,sans-serif; letter-spacing:.06em;
  padding:6px 14px; border-radius:0 0 8px 8px; pointer-events:none;
}

@media (max-width:860px){ .v3-staging-flag{ position:absolute; top:67px; bottom:auto; left:0; right:0; transform:none; border-radius:0; font-size:10px; padding:3px 0; text-align:center; white-space:nowrap; opacity:.92; } }

/* ═══ CALIDAD · auditoría UX 22-oct (grupo A) ═══════════════════════════════ */

/* A1 · con texto grande, el hero de celular no se corta y el orbital no desborda */
@media (max-width:860px){
  .v3-hero__in{ grid-template-columns:minmax(0,1fr); }
  .ujp-home.v3 .v3-cta-orbit{ max-width:100%; white-space:normal; text-align:left; padding-inline:24px; }
  .ujp-home.v3 .v3-cta-orbit span{ display:flex; flex-wrap:nowrap; line-height:1.3; }
}

/* A2 · alto contraste: la botonera sigue legible al pasar o tocar */
html.a11y-contrast .ujp-home.v3 .botonera-ujp :is(.boton,.boton-dropdown,.boton:hover,.boton:active,.boton.is-pressed,.boton-dropdown:hover,.boton-dropdown.is-pressed) .boton__titulo{ color:#fff !important; }
html.a11y-contrast .ujp-home.v3 .botonera-ujp :is(.boton,.boton-dropdown,.boton:hover,.boton:active,.boton.is-pressed,.boton-dropdown:hover,.boton-dropdown.is-pressed) .boton__icono :is(svg,svg *){ stroke:#FFE600 !important; color:#FFE600 !important; }
html.a11y-contrast .ujp-home.v3 .botonera-ujp :is(.boton,.boton-dropdown,.boton.is-pressed,.boton-dropdown.is-pressed) .boton__icono{ background:#000 !important; border:2px solid #FFE600 !important; box-shadow:none !important; }
html.a11y-contrast .ujp-home.v3 .botonera-ujp .boton__icono::before,html.a11y-contrast .ujp-home.v3 .botonera-ujp .boton__icono::after{ display:none !important; }


/* A6 · textos chicos con contraste ≥4,5:1 */
.v3-aus__date{ color:#6A5F62; }                                                   /* 6,1:1 */
.ujp-home.v3 .es-review-info-date,.ujp-home.v3 .es-review-info-date-container,.ujp-home.v3 .es-header-rating-reviews-count{ color:#5f5f5f !important; }   /* 6,0:1 */

/* H3 · "Ver oferta académica": zona de toque de 44 px sin cambiar el aspecto */
.v3-link-light{ position:relative; }
.v3-link-light::after{ content:""; position:absolute; inset:-8px -6px; }

/* C1 · los botones borgoña largos no se cortan en celular ni tablet */
.ujp-home.v3 .ujp-btn-wine{ max-width:100%; white-space:normal; text-align:center; line-height:1.25; text-wrap:balance; }
@media (max-width:480px){ .ujp-home.v3 .ujp-btn-wine{ padding-inline:1.4rem; } }

/* C3 · celular: menos aire entre secciones (176 → 112 px) */
@media (max-width:760px){ .ujp-home.v3 .home-band,.ujp-home.v3 .ujp-shorts{ padding-block:3.5rem; } }

/* C4 · Instagram: el texto se corta en 3 líneas completas con "…"; flechas dentro de la pantalla */
.ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-item-text{ max-height:none !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:3 !important; line-clamp:3; overflow:hidden !important; }
.ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-item-text .eapps-instagram-feed-posts-item-text{ display:inline !important; max-height:none !important; }
@media (max-width:767px){
  .ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-slider-prev,.ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-slider-next{ width:44px !important; height:44px !important; background:rgba(66,15,27,.85) !important; box-shadow:0 2px 10px rgba(0,0,0,.35) !important; }
  .ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-slider-prev{ left:8px !important; right:auto !important; }
  .ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-slider-next{ right:8px !important; left:auto !important; }
}

/* C5 · Universidades asociadas: los logos se desvanecen en los bordes en vez de cortarse */
.ujp-home.v3 .v3-asoc .home-embed{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }

/* C7 · puntos de posición en los carruseles de celular (los crea home-v3.js) */
.v3-dots{ display:flex; gap:8px; justify-content:center; margin:6px 0 0; position:relative; z-index:1; }
.v3-dots i{ width:8px; height:8px; border-radius:4px; background:#A88593; transition:width .25s, background-color .25s; }
.v3-dots i.on{ width:22px; background:#A02654; }
html.a11y-motion .v3-dots i{ transition:none; }
@media (prefers-reduced-motion:reduce){ .v3-dots i{ transition:none; } }

/* C8 · el desplegable de Becas no se sale de la pantalla; "Ver programas" en una línea */
@media (max-width:767px){
  .ujp-home.v3 .botonera-ujp .boton-dropdown .dropdown-menu{ left:0; right:auto; transform:translateY(-5px); max-width:calc(100vw - 32px); z-index:10050; }
  .ujp-home.v3 .botonera-ujp .boton-dropdown .dropdown-menu.open{ transform:translateY(5px); }
  .ujp-home.v3 .botonera-ujp .boton-dropdown .dropdown-menu::before{ left:54px; }
}

/* C10 · celular: los textos largos de UJP / IAJU / Conocé más alineados a la izquierda */
@media (max-width:760px){
  .ujp-home.v3 .home-2col,.ujp-home.v3 .home-2col .col-text,.ujp-home.v3 .home-2col .home-title,
  .ujp-home.v3 .home-2col .home-text,.ujp-home.v3 .home-2col .home-cta{ text-align:left; }
  .ujp-home.v3 .home-2col .home-title::after{ margin-left:0; margin-right:auto; }
}


/* P7 · luz orbital del CTA: la mueve home-v3.js con transform (sin layout por cuadro) */
.v3-cta-orbit > .v3-dot{ left:0; top:0; will-change:transform; }

/* ═══ ESTRUCTURA POR CONFIANZA · 22-oct ════════════════════════════════════ */

/* F4 · hero de escritorio: titular en ≤3 líneas y cifras sin scroll en 1280–1536 */
.v3-hero h1{ font-size:clamp(2.5rem,4.6vw,4rem); max-width:13.5em; }
@media (min-width:1101px){ .v3-hero__in{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); } }
@media (min-width:861px) and (max-height:920px){
  .v3-hero__in{ padding-top:clamp(2rem,5vh,3.5rem); }
  .v3-hero__copy{ padding-bottom:2.25rem; }
  .v3-eyebrow{ margin-bottom:1.1rem; }
  .v3-hero h1{ margin-bottom:1.2rem; }
  .v3-lupi{ height:clamp(400px,58vh,560px); }
  .v3-hero__stats{ padding-bottom:2rem; }
}
@media (min-width:861px) and (max-height:720px){ .v3-hero__in{ padding-top:1.5rem; } .v3-lupi{ height:clamp(360px,54vh,520px); } }

/* H1 · tablet (641–860): texto a la izquierda y Lupi a la derecha */
@media (min-width:641px) and (max-width:860px){
  .v3-hero__in{ grid-template-columns:minmax(0,1fr) clamp(200px,28vw,230px); gap:1rem; padding-top:2.5rem; }
  .v3-hero__copy{ padding-bottom:1.5rem; }
  .v3-eyebrow{ margin-bottom:1rem; font-size:.8rem; letter-spacing:.16em; }
  .v3-hero h1{ margin-bottom:1rem; font-size:clamp(2.4rem,6vw,3rem); }
  .v3-hero__lead{ font-size:1.12rem; margin-bottom:1.4rem; }
  .v3-lupi{ height:min(410px,72vh); }
}

/* H2 · celular: el lema en latín en una sola línea, alineado con el titular */
@media (max-width:600px){
  .v3-eyebrow{ white-space:nowrap; letter-spacing:.14em; font-size:clamp(.7rem, calc((100vw - 40px) / 26), .8rem); }
  .v3-eyebrow::before{ display:none; }
}

/* C2 · fondos alternados (orden nuevo): botonera blanco · oferta crema · asociadas
   blanco · voces crema · instagram blanco · conocé crema · UJP blanco · IAJU crema ·
   AUSJAL blanco · hermanas crema · valoraciones blanco */
.ujp-home.v3 .ujp-shorts{ background:#FBF8F4; }
.ujp-home.v3 .v3-ig .eapps-instagram-feed-posts-item{ box-shadow:0 10px 30px -18px rgba(66,15,27,.35) !important; border-radius:12px !important; overflow:hidden !important; border-color:rgba(66,15,27,.08) !important; }

/* 4 · Universidades asociadas compacta: una sola franja de logos */
.ujp-home.v3 .v3-asoc{ padding-block:2.4rem; }
.ujp-home.v3 .v3-asoc .home-title{ font-family:var(--ujp-font-body); font-size:.95rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#6A5F62; margin-bottom:1rem; }
.ujp-home.v3 .v3-asoc [class*="WidgetBackground__Wrapper"]{ padding-block:8px !important; }

/* C12 · Voces de la UJP con el encabezado v3 y un solo botón principal */
.ujp-home.v3 .ujp-shorts__head{ text-align:center; max-width:820px; margin:0 auto 2.6rem !important; }
.ujp-home.v3 .ujp-shorts__title{ color:var(--ujp-wine,#5E1626) !important; margin-bottom:1rem !important; }
.ujp-home.v3 .ujp-shorts__lead{ margin-inline:auto !important; }
.ujp-home.v3 .v3-shorts-more{ text-align:center; margin-top:2.2rem; }
.ujp-home.v3 .ujp-shorts__cta{ background:none !important; border:0 !important; box-shadow:none !important; color:var(--ujp-wine,#5E1626) !important; font-size:1.15rem !important; font-weight:600; padding:.6rem 0 !important; min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(94,22,38,.35); }
.ujp-home.v3 .ujp-shorts__cta:hover,.ujp-home.v3 .ujp-shorts__cta:focus-visible{ text-decoration-color:currentColor; }
.ujp-home.v3 .ujp-shorts__link{ display:inline-flex; align-items:center; min-height:44px; }

/* C13 · widget de YouTube ("Conocé más"): sin los rótulos en inglés (views/likes/comments) */
.ujp-home.v3 .yottie-widget-video-info-properties{ display:none !important; }
.ujp-home.v3 .yottie-widget-video-info-title{ text-overflow:ellipsis; overflow:hidden; }

/* C14 · valoraciones con la marca */
.ujp-home.v3 .v3-reviews .es-header-write-review-button{ background:var(--ujp-wine,#5E1626) !important; color:#fff !important; border-radius:999px !important; font-weight:700 !important; font-size:16px !important; min-height:44px; }
.ujp-home.v3 .v3-reviews .es-header-write-review-button:hover{ filter:brightness(1.15); }
.ujp-home.v3 .v3-reviews .es-header-write-review-button:focus-visible{ outline:3px solid var(--ujp-wine,#5E1626); outline-offset:3px; }
.ujp-home.v3 .v3-reviews .es-review-background-container,.ujp-home.v3 .v3-reviews .es-header-container{ background:#fff !important; border:1px solid var(--ujp-line,#E4DACE) !important; border-radius:16px !important; }
.ujp-home.v3 .v3-reviews .es-tabs-container{ background:transparent !important; }
.ujp-home.v3 .v3-reviews [class*="ArrowControlContainer"]{ position:relative; }
.ujp-home.v3 .v3-reviews [class*="ArrowControlContainer"]::after{ content:""; position:absolute; inset:-6px; }

/* 11 · debajo de las reseñas, los dos botones del hero */
.v3-reviews__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.8rem; margin-top:2.8rem; }
.v3-link-dark{ position:relative; color:var(--ujp-wine,#5E1626) !important; font-size:1.15rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(94,22,38,.35); }
.v3-link-dark:hover,.v3-link-dark:focus-visible{ text-decoration-color:currentColor; }
.v3-link-dark::after{ content:""; position:absolute; inset:-10px -6px; }

/* puntos de carrusel: ocultos fuera de celular (el atributo hidden pierde contra display:flex) */
.v3-dots[hidden]{ display:none !important; }
/* encabezado de Voces centrado (el shortcode lo arma en grilla) */
.ujp-home.v3 .ujp-shorts__head{ display:block !important; }
.ujp-home.v3 .ujp-shorts__title,.ujp-home.v3 .ujp-shorts__lead{ text-align:center !important; }

/* ═══ FLUIDEZ · 22-oct ═══════════════════════════════════════════════════════ */
/* luz orbital: empieza apagada; home-v3.js la enciende para su vuelta */
.v3-cta-orbit > .v3-dot{ opacity:0; }
/* lugares reservados de los widgets: alto aproximado para que la página no salte */
.v3-elf{ min-height:120px; }
.v3-ig .v3-elf{ min-height:560px; }
.v3-reviews .v3-elf{ min-height:420px; }
.v3-conoce .v3-elf{ min-height:360px; }
.v3-asoc .v3-elf{ min-height:110px; }
.v3-elf[data-elf-on]{ min-height:0; }
/* secciones lejos de la pantalla: el navegador no las dibuja hasta que hacen falta */
.ujp-home.v3 > section.home-band:not(.v3-oferta),.ujp-home.v3 > .ujp-shorts{
  content-visibility:auto; contain-intrinsic-size:auto 900px;
}

/* ═══ HERO EN CELULAR · primera pantalla (22-oct) ════════════════════════════
   A 390x844 el titular, el botón principal y Lupi entran enteros sin scroll:
   menos aire entre bloques y Lupi del alto que queda (cuadro recortado a la
   cintura, donde el video ya se desvanece). */
@media (max-width:640px){
  .v3-hero__in{ padding-top:1.35rem; }
  .v3-eyebrow{ margin-bottom:.7rem; }
  .v3-hero h1{ margin-bottom:.7rem; line-height:1.04; }
  .v3-hero__lead{ font-size:1.05rem; line-height:1.5; margin-bottom:1rem; }
  .v3-hero__cta{ gap:.55rem 1.4rem; }
  .v3-hero__copy{ padding-bottom:.4rem; }
  .v3-lupi{
    height:clamp(230px, calc(100svh - 498px), 340px); aspect-ratio:9/14;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);
  }
}

/* ═══ LUPI · variante D (aprobada el 24-10-2026) ═══════════════════════════
   Desde 641 px la caja de Lupi se estira al alto de la fila (el del texto) y
   el póster/video mide 1/.866 (≈1,155) veces ese alto, apoyado abajo: así las
   orejas, que empiezan al 13,4 % del cuadro 720x1280 (de ahí el .866), quedan
   en el borde de arriba de la caja, a la altura del lema UTILITAS. Si la
   columna es angosta, max-width lo frena y contain lo achica sin deformarlo.
   Desde 861 px la caja usa además el margen derecho del hero. Celular
   (≤640 px) no cambia. Es el CSS exacto de la vista previa aprobada: va al
   final y con !important para ganarles a las reglas de .v3-hero__in, .v3-lupi
   y .v3-lupi__poster/__video de más arriba.
   Deshacer: borrar desde este comentario hasta el final del archivo. */
@media (min-width:641px){
  .v3-hero__in{ align-items:stretch !important; }
  .v3-lupi{ align-self:stretch !important; justify-self:stretch !important; height:auto !important; aspect-ratio:auto !important; width:100% !important; max-width:none !important; }
  .v3-lupi__poster,.v3-lupi__video{ top:auto !important; right:auto !important; left:50% !important; bottom:0 !important; transform:translateX(-50%);
    height:calc(100% / .866) !important; width:auto !important; max-width:100% !important; aspect-ratio:9/16; object-fit:contain !important; object-position:center bottom !important; }
}@media (min-width:861px){ .v3-lupi{ width:calc(100% + clamp(1.25rem,4vw,2.5rem)) !important; margin-right:calc(-1 * clamp(1.25rem,4vw,2.5rem)); } }