/* =====================================================================
   Portada versión 5: escenario rojo, manifiesto y atajos.
   El escenario es un estudio fotográfico rojo: luz con forma de gota sobre la
   pared, piso con sombra, el lema enorme detrás del equipo y la mascota de pie
   junto a ellos, en la misma luz y el mismo piso.
   ===================================================================== */

/* ---------- Escenario ---------- */
.hero.hero-v5 {
  position: relative; margin-top: calc(-1 * var(--enc5-alto)); padding: 10px 10px 0;
  overflow: visible; border: 0; background: none;
  view-timeline: --escena block;
}
.hero-v5 .escena {
  position: relative; overflow: hidden; height: max(660px, calc(100svh - 10px)); max-height: 1060px;
  border-radius: var(--radio-xl); color: #fff;
  background:
    radial-gradient(46% 60% at 64% 44%, rgba(255, 118, 118, .5), rgba(255, 118, 118, 0) 72%),
    radial-gradient(95% 55% at 50% 115%, rgba(92, 0, 8, .5), rgba(92, 0, 8, 0) 72%),
    radial-gradient(60% 80% at -8% 0%, rgba(92, 0, 8, .32), rgba(92, 0, 8, 0) 62%),
    var(--rojo);
}
.escena-fondo { position: absolute; inset: 0; pointer-events: none; }
/* Grano de película, muy sutil, para que el rojo tenga textura y no parezca un relleno plano */
.escena-fondo::after {
  content: ""; position: absolute; inset: 0; background-image: var(--grano); background-size: 120px;
  opacity: .14; mix-blend-mode: soft-light;
}
/* La gota es luz: un proyector dibuja la gota de la marca sobre la pared roja.
   La máscara ya trae el borde difuminado (img/v5/gota-difusa.png): sin filtro de desenfoque al pintar. */
.escena-luz { position: absolute; left: 66%; top: 50%; width: 57%; aspect-ratio: 260 / 320; transform: translate(-50%, -47%); }
.escena-luz::before {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("../img/v5/gota-difusa.png") center / 100% 100% no-repeat; mask: url("../img/v5/gota-difusa.png") center / 100% 100% no-repeat;
  /* El foco apunta a los rostros: la luz cae arriba y se apaga hacia el piso */
  background: radial-gradient(54% 40% at 50% 42%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .16) 62%, rgba(255, 255, 255, 0) 92%);
}
/* El contorno nítido de la gota, apenas visible: la forma se reconoce sin dibujarla */
.escena-contorno {
  position: absolute; left: 66%; top: 50%; width: 41%; aspect-ratio: 100 / 130; transform: translate(-50%, -45%);
  -webkit-mask: url("../img/marca/gota.svg") center / 100% 100% no-repeat; mask: url("../img/marca/gota.svg") center / 100% 100% no-repeat;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 70%);
}
.escena-piso { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(92, 0, 8, 0), rgba(92, 0, 8, .3)); }

/* El lema enorme, detrás del equipo: se desvanece hacia abajo para que el equipo pase por delante */
.escena-marca {
  position: absolute; left: 0; right: 0; top: clamp(78px, 10.5%, 132px); z-index: 1; margin: 0;
  text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font: 800 min(19.6vw, 33svh)/.8 var(--fuente); letter-spacing: -.068em;
}
.escena-marca-mascara { display: inline-block; overflow: hidden; padding: .04em .06em .12em; margin-right: -.068em; }
.escena-marca-texto {
  display: inline-block; color: transparent;
  background: linear-gradient(180deg, #fff 0%, #fff 38%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .08) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* Reparto: el equipo real y la mascota comparten piso y luz */
.escena-reparto { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.escena-equipo { position: absolute; left: 65%; bottom: 4.5%; height: 75%; margin: 0; transform: translateX(-50%); }
.escena-equipo picture, .escena-equipo img { display: block; height: 100%; width: auto; }
/* Sombra del equipo sobre la pared: un degradado (barato) en lugar de un filtro sobre la foto grande */
.escena-equipo::before {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 2%; top: 14%; bottom: -2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 0, 6, .3), rgba(60, 0, 6, 0)); transform: translate(5%, 3%);
}
.escena-sombra {
  position: absolute; left: 50%; bottom: 3.2%; width: 48%; height: 7%; transform: translateX(-34%);
  background: radial-gradient(closest-side, rgba(60, 0, 6, .5), rgba(60, 0, 6, .18) 55%, rgba(60, 0, 6, 0));
}
.hero-v5 .hero-mascota { position: absolute; z-index: 3; left: 39%; bottom: 4.5%; height: 45%; transform: translateX(-50%); }
.hero-v5 .hero-mascota img { filter: drop-shadow(0 20px 22px rgba(70, 0, 6, .32)); }

/* Texto, por delante de todo */
/* Ancho contenido: los botones nunca pasan por detrás de la mascota */
.escena-texto { position: absolute; z-index: 4; left: clamp(22px, 4.2%, 72px); bottom: clamp(28px, 6.5%, 72px); width: clamp(300px, 34vw - 60px, 560px); }
.escena-lema { margin: 0; font: 700 clamp(2.4rem, .9rem + 3.4vw, 4.6rem)/.92 var(--fuente); letter-spacing: -.055em; }
.escena-lema .acento { display: block; margin-top: .06em; font-size: 1.12em; line-height: .9; letter-spacing: -.035em; }
.hero.hero-v5 h1 {
  max-width: 34ch; margin: clamp(.9rem, .6rem + .6vw, 1.35rem) 0 0;
  font: 500 clamp(1rem, .9rem + .3vw, 1.2rem)/1.42 var(--fuente); letter-spacing: -.012em; color: rgba(255, 255, 255, .88);
}
.hero.hero-v5 h1 em { font-weight: 600; color: #fff; }
.hero-v5 .hero-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin: clamp(1.2rem, .8rem + .8vw, 1.8rem) 0 0; }

/* Sello giratorio: #ConAmor alrededor de un botón que invita a bajar */
.escena-sello {
  position: absolute; z-index: 4; right: clamp(20px, 3.2%, 60px); bottom: clamp(24px, 5.5%, 64px);
  display: grid; place-items: center; width: clamp(108px, 7.8vw, 138px); aspect-ratio: 1;
  border-radius: 50%; color: #fff; text-decoration: none;
}
.escena-sello svg.sello-texto { position: absolute; inset: 0; width: 100%; height: 100%; animation: selloGira 24s linear infinite; }
.sello-texto text { font: 600 10.4px/1 var(--fuente); letter-spacing: 2.6px; fill: #fff; text-transform: uppercase; }
.sello-centro {
  display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--rojo); box-shadow: 0 14px 30px -14px rgba(70, 0, 6, .7);
  transition: transform .5s var(--curva-5);
}
.sello-centro .icono { width: 20px; height: 20px; transform: rotate(90deg); }
.escena-sello:hover .sello-centro { transform: scale(1.08); }
.escena-sello:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes selloGira { to { transform: rotate(360deg); } }

/* Bienvenida de la mascota: tarjeta fina junto a su cabeza (una vez por sesión) */
/* Va arriba a la izquierda de la cabeza de la mascota: nunca sobre los rostros del equipo */
.hero-v5 .burbuja {
  position: absolute; z-index: 5; left: auto; right: calc(61% + 10px); bottom: 50%; width: min(290px, 22vw); margin: 0;
  padding: .9rem 1rem .95rem; border: 0; border-radius: 22px 22px 6px 22px;
  background: rgba(255, 255, 255, .97); color: var(--tinta);
  box-shadow: 0 30px 60px -30px rgba(60, 0, 6, .65);
}
.hero-v5 .burbuja::after { display: none; }
.hero-v5 .burbuja-titulo { margin: 0 1.8rem .25rem 0; font: 700 1.02rem/1.15 var(--fuente); letter-spacing: -.02em; color: var(--tinta); text-transform: none; }
.hero-v5 .burbuja-texto { margin: 0 0 .6rem; font-size: .85rem; color: var(--tinta-suave); }
/* Los accesos de la bienvenida en una sola fila que se desliza: la tarjeta queda baja y no tapa el lema */
.hero-v5 .burbuja-accesos {
  flex-wrap: nowrap; gap: .3rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask: linear-gradient(90deg, #000 82%, transparent); mask: linear-gradient(90deg, #000 82%, transparent);
}
.hero-v5 .burbuja-accesos::-webkit-scrollbar { display: none; }
.hero-v5 .burbuja-accesos li { flex: none; }
.hero-v5 .burbuja-accesos a { padding: .26rem .55rem; border-radius: 999px; background: var(--porcelana); font: 500 .74rem/1.2 var(--fuente); color: var(--tinta); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-v5 .burbuja { animation: e5Texto .8s var(--curva-5) 2.4s both; }
}
.hero-v5 .burbuja-accesos a:hover { background: var(--rojo); color: #fff; }

/* ---------- Entrada (al cargar): solo transformaciones en la foto, sin ocultarla ---------- */
@media (prefers-reduced-motion: no-preference) {
  .escena-marca-texto { animation: e5Sube 1.2s var(--curva-5) .1s both; }
  .escena-equipo img { animation: e5Equipo 1.4s var(--curva-5) both; }
  .escena-luz { animation: e5Luz 2s var(--curva-5) both; }
  .escena-texto > * { animation: e5Texto 1s var(--curva-5) both; }
  .escena-texto > :nth-child(1) { animation-delay: .3s; }
  .escena-texto > :nth-child(2) { animation-delay: .42s; }
  .escena-texto > :nth-child(3) { animation-delay: .54s; }
  .escena-sello { animation: e5Texto 1s var(--curva-5) .7s both; }
}
@keyframes e5Sube { from { transform: translateY(104%); } }
@keyframes e5Equipo { from { transform: translateY(5%) scale(.97); } }
@keyframes e5Luz { from { opacity: 0; transform: translate(-50%, -40%) scale(.8); } }
@keyframes e5Texto { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Profundidad al bajar (scroll): cada capa a su velocidad, sin fijar la página ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .hero-v5 .escena { animation: e5Escena linear both; animation-timeline: --escena; animation-range: exit 0% exit 100%; }
    .escena-fondo { animation: e5Fondo linear both; animation-timeline: --escena; animation-range: exit 0% exit 100%; }
    .escena-marca { animation: e5Marca linear both; animation-timeline: --escena; animation-range: exit 0% exit 100%; }
    .escena-texto { animation: e5Frente linear both; animation-timeline: --escena; animation-range: exit 0% exit 70%; }
  }
}
@keyframes e5Escena { to { transform: scale(.94); border-radius: calc(var(--radio-xl) * 1.5); } }
@keyframes e5Fondo { to { transform: translateY(16%); } }
@keyframes e5Marca { to { transform: translateY(26%); opacity: .35; } }
@keyframes e5Frente { to { transform: translateY(-18%); opacity: 0; } }

/* Portátiles pequeños y tabletas horizontales: el reparto se corre a la derecha para dejar aire a los botones */
@media (min-width: 900px) and (max-width: 1199px) {
  .escena-equipo { left: 70%; height: 70%; }
  .hero-v5 .hero-mascota { left: 45%; height: 40%; }
  .escena-luz, .escena-contorno { left: 70%; }
  .hero-v5 .burbuja { right: calc(55% + 10px); width: min(270px, 28vw); }
}

/* ---------- Escenario en pantallas medianas y celular: todo apilado ---------- */
@media (max-width: 899px) {
  .hero-v5 .escena { display: flex; flex-direction: column; height: auto; min-height: calc(100svh - 10px); max-height: none; padding: 84px 0 22px; }
  .escena-marca { position: relative; top: auto; order: 1; font-size: 21.4vw; }
  .escena-reparto { position: relative; inset: auto; order: 2; height: min(54svh, 116vw); margin-top: -7vw; }
  .escena-equipo { left: 60%; bottom: 0; height: 100%; }
  .escena-sombra { bottom: -2%; }
  .hero-v5 .hero-mascota { left: 18%; bottom: 0; height: 52%; }
  .escena-luz { left: 60%; top: 52%; width: 117%; }
  .escena-contorno { left: 60%; top: 52%; width: 84%; }
  .escena-texto { position: relative; left: auto; bottom: auto; order: 3; width: auto; padding: 1.6rem 20px 0; }
  .escena-lema { font-size: clamp(2.5rem, 1.2rem + 6vw, 3.6rem); }
  .escena-sello { display: none; }
  /* En el celular la bienvenida va en el flujo, bajo los botones: no tapa a nadie */
  .hero-v5 .burbuja { position: relative; order: 4; left: auto; right: auto; bottom: auto; width: auto; margin: 1.2rem 20px 0; }
}
@media (max-width: 599px) {
  .hero-v5 .hero-acciones .btn-5 { flex: 1 1 100%; justify-content: space-between; }
  .hero-v5 .hero-acciones .btn-5-vidrio { justify-content: flex-start; }
}

/* =====================================================================
   Manifiesto: la frase de la portada como pieza editorial, con fotos dentro
   del texto; las palabras se iluminan a medida que se lee (scroll).
   ===================================================================== */
.manifiesto { position: relative; padding: clamp(5rem, 3rem + 7vw, 10rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.manifiesto-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: start; }
.manifiesto-etiqueta { margin: .7rem 0 0; font: 600 .82rem/1.5 var(--fuente); letter-spacing: .02em; color: var(--tinta-suave); }
.manifiesto-etiqueta strong { display: block; font-size: 1rem; color: var(--rojo); letter-spacing: -.01em; }
.manifiesto-texto {
  margin: 0; max-width: 23ch; font: 600 clamp(1.95rem, .8rem + 3.6vw, 4.5rem)/1.08 var(--fuente); letter-spacing: -.045em; color: var(--tinta);
}
.m-palabra { display: inline-block; }
.m-foto {
  display: inline-block; width: 1.95em; height: .86em; margin: 0 .08em; vertical-align: -.06em;
  border-radius: 999px; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(29, 27, 28, .5);
}
.m-foto picture, .m-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.manifiesto-sellos { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: clamp(2rem, 1.5rem + 2vw, 3.2rem) 0 0; padding: 0; font: 500 .95rem/1.3 var(--fuente); color: var(--tinta-suave); }
.manifiesto-sellos li { display: inline-flex; align-items: center; gap: .5rem; }
.manifiesto-sellos .icono { width: 18px; height: 18px; color: var(--rojo); stroke-width: 1.6; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-palabra, .m-foto { animation: e5Palabra linear both; animation-timeline: view(); animation-range: cover 8% cover 34%; }
  }
}
@keyframes e5Palabra { from { opacity: .14; } }
@media (max-width: 899px) {
  .manifiesto-rejilla { grid-template-columns: 1fr; gap: .9rem; }
  .manifiesto-etiqueta strong { display: inline; margin-right: .4rem; }
}

/* =====================================================================
   Atajos: mosaico de módulos de distinto tamaño (no una fila de cajitas)
   ===================================================================== */
.atajos { position: relative; padding: clamp(1rem, .5rem + 2vw, 2.5rem) 0 clamp(4rem, 3rem + 4vw, 7rem); }
.atajos-cabecera { position: relative; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.6rem); }
.atajos-cabecera h2 { margin: 0; font-size: var(--t-titulo); line-height: .95; letter-spacing: -.05em; color: var(--tinta); }
.atajos-cabecera h2 .acento { color: var(--rojo); letter-spacing: -.03em; }
.atajos-cabecera p { max-width: 36ch; margin: 0; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); color: var(--tinta-suave); }
/* La mascota se para sobre el borde del mosaico, en el hueco entre el título y el texto */
.accesos-ancla { position: absolute; left: 54%; bottom: calc(-1 * clamp(1.5rem, 1rem + 1.6vw, 2.6rem)); height: 210px; aspect-ratio: .48; }

.atajos-rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 10.5vw, 196px); gap: clamp(10px, .4rem + .5vw, 16px);
}
.atajo-gh { grid-column: 1 / 7; grid-row: 1 / 3; }
.atajo-pagos { grid-column: 7 / 10; grid-row: 1; }
.atajo-pqrs { grid-column: 10 / 13; grid-row: 1; }
.atajo-encuesta { grid-column: 7 / 13; grid-row: 2; }

.atajo-enlace {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  height: 100%; padding: clamp(1.1rem, .8rem + 1vw, 1.75rem); overflow: hidden; border-radius: var(--radio-l);
  color: var(--tinta); text-decoration: none; background: #fff; box-shadow: var(--sombra-5);
  transition: transform .5s var(--curva-5), box-shadow .5s var(--curva-5);
}
.atajo-enlace:hover { color: var(--tinta); transform: translateY(-4px); box-shadow: var(--sombra-5-alta); }
.atajo-enlace:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; }
/* Luz que sigue al cursor (la posición la pone sitio.js) */
.atajo-enlace::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .18), transparent 46%);
}
.atajo-enlace:hover::after { opacity: 1; }
.atajo-etiqueta { position: relative; z-index: 2; font: 600 .78rem/1.2 var(--fuente); letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.atajo-titulo { position: relative; z-index: 2; display: block; font: 700 clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem)/1 var(--fuente); letter-spacing: -.045em; }
.atajo-texto { position: relative; z-index: 2; max-width: 34ch; font-size: .95rem; line-height: 1.45; opacity: .78; }
.atajo-icono { position: absolute; z-index: 2; left: clamp(1.1rem, .8rem + 1vw, 1.75rem); top: clamp(1.1rem, .8rem + 1vw, 1.75rem); color: currentColor; }
.atajo-icono .icono { width: 30px; height: 30px; stroke-width: 1.4; }
.atajo-flecha {
  position: absolute; z-index: 2; right: clamp(.9rem, .6rem + .8vw, 1.4rem); top: clamp(.9rem, .6rem + .8vw, 1.4rem);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--porcelana); color: var(--tinta); transition: transform .5s var(--curva-5), background .35s, color .35s;
}
.atajo-flecha .icono { width: 18px; height: 18px; transform: rotate(-45deg); transition: transform .5s var(--curva-5); }
.atajo-enlace:hover .atajo-flecha { background: var(--rojo); color: #fff; }
.atajo-enlace:hover .atajo-flecha .icono { transform: rotate(0); }

/* Gestión Humana: el módulo grande, fotografía a sangre con el texto sobre un velo */
.atajo-foto .atajo-enlace { color: #fff; background: var(--tinta); }
.atajo-foto .atajo-enlace:hover { color: #fff; }
.atajo-foto picture { position: absolute; inset: 0; z-index: 0; }
.atajo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva-5); }
.atajo-foto .atajo-enlace::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(29, 27, 28, 0) 38%, rgba(29, 27, 28, .82) 100%); }
.atajo-foto .atajo-enlace:hover img { transform: scale(1.06); }
.atajo-gh img { object-position: 50% 22%; }
.atajo-gh .atajo-titulo { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem); }
.atajo-gh .atajo-texto { font-size: 1rem; }

/* Pagos en rojo; PQRS en blanco; Encuesta en el gris de la marca con la mascota feliz */
.atajo-pagos .atajo-enlace { color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, .16), transparent 55%), var(--rojo); }
.atajo-pagos .atajo-enlace:hover { color: #fff; }
.atajo-pagos .atajo-flecha { background: rgba(255, 255, 255, .16); color: #fff; }
.atajo-pagos .atajo-enlace:hover .atajo-flecha { background: #fff; color: var(--rojo); }
.atajo-pqrs .atajo-icono, .atajo-encuesta .atajo-icono { color: var(--rojo); }
.atajo-encuesta .atajo-enlace { padding-right: 34%; background: linear-gradient(120deg, #e9eaeb, var(--gris-institucional)); }
.atajo-mascota { position: absolute; z-index: 1; right: 6%; bottom: -14%; height: 128%; transition: transform .7s var(--curva-5); }
.atajo-mascota picture, .atajo-mascota img { height: 100%; width: auto; }
.atajo-encuesta .atajo-enlace:hover .atajo-mascota { transform: translateY(-5%) rotate(-3deg); }

@media (max-width: 1099px) {
  .accesos-ancla { display: none; }
  .atajos-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .atajo-gh { grid-column: 1 / -1; grid-row: span 2; }
  .atajo-pagos { grid-column: 1 / 4; grid-row: span 1; }
  .atajo-pqrs { grid-column: 4 / 7; grid-row: span 1; }
  .atajo-encuesta { grid-column: 1 / -1; grid-row: span 1; }
}
@media (max-width: 599px) {
  .atajos-rejilla { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .atajo-gh { grid-column: 1 / -1; grid-row: span 2; }
  .atajo-pagos, .atajo-pqrs { grid-column: span 1; }
  .atajo-encuesta { grid-column: 1 / -1; }
  .atajo-texto { font-size: .86rem; }
  .atajo-pagos .atajo-texto, .atajo-pqrs .atajo-texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .escena-sello svg.sello-texto { animation: none; }
  .atajo-enlace, .atajo-foto img, .atajo-mascota, .atajo-flecha, .atajo-flecha .icono { transition: none; }
}

/* =====================================================================
   Resto de la portada: cada sección con su propia lógica dentro del sistema
   ===================================================================== */

/* ---------- Cabeceras de sección ---------- */
.cabecera-v5 { position: relative; max-width: 980px; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
.cabecera-v5 h2 { margin: 0; font-size: var(--t-titulo); line-height: .96; letter-spacing: -.052em; color: var(--tinta); }
.cabecera-v5 h2 .acento { color: var(--rojo); }
.cabecera-v5-texto { max-width: 52ch; margin: 1.1rem 0 0; font-size: clamp(1.02rem, .97rem + .25vw, 1.18rem); line-height: 1.55; color: var(--tinta-suave); }
.cabecera-v5-fila { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem 3rem; }
.cabecera-v5-lado { display: grid; gap: 1.1rem; justify-items: start; max-width: 40ch; }
.cabecera-v5-lado p { margin: 0; line-height: 1.55; color: var(--tinta-suave); }
.indice-v5 { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.2rem; font: 600 .85rem/1 var(--fuente); letter-spacing: .01em; color: var(--tinta-suave); }
.indice-v5 span { display: inline-flex; align-items: center; gap: .75rem; color: var(--rojo); font-weight: 700; font-variant-numeric: tabular-nums; }
.indice-v5 span::after { content: ""; width: 30px; height: 1.5px; background: currentColor; opacity: .55; }
.indice-v5-claro { color: rgba(255, 255, 255, .82); }
.indice-v5-claro span { color: #fff; }
.enlace-v5 {
  display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .2rem; border-bottom: 1.5px solid currentColor;
  font-weight: 600; color: var(--tinta); text-decoration: none; transition: color .3s;
}
.enlace-v5 .icono { width: 18px; height: 18px; transition: transform .4s var(--curva-5); }
.enlace-v5:hover { color: var(--rojo); }
.enlace-v5:hover .icono { transform: translateX(4px); }

/* ---------- Cifras: escenario en tinta, números enormes ---------- */
.cifras-v5 { padding: clamp(1rem, .5rem + 2vw, 2.5rem) 10px 0; }
.cifras-v5-escena {
  position: relative; overflow: hidden; padding: clamp(3.5rem, 2.5rem + 5vw, 7.5rem) 0; border-radius: var(--radio-xl); color: #fff;
  background:
    radial-gradient(55% 75% at 100% 100%, rgba(222, 31, 38, .5), rgba(222, 31, 38, 0) 62%),
    radial-gradient(40% 60% at 0% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%),
    var(--tinta);
}
.cifras-v5-escena::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); background-size: 120px; opacity: .1; mix-blend-mode: soft-light; }
.cifras-v5-rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 5vw, 7rem); align-items: end; }
.cifras-v5-intro h2 { margin: 0; max-width: 11ch; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.3rem); line-height: .98; letter-spacing: -.05em; color: #fff; }
.cifras-v5-intro h2 .acento { color: var(--rojo); }
.cifras-v5-anio { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; }
.cifras-v5-anio-num {
  display: block; margin-left: -.04em; font: 800 clamp(6rem, 2.5rem + 12vw, 15rem)/.8 var(--fuente); letter-spacing: -.075em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .38);
}
.cifras-v5-anio-texto { display: block; margin-top: 1rem; color: rgba(255, 255, 255, .72); }
.cifras-v5-anio-texto strong { color: #fff; }
.cifras-v5-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.cifra-v5 { display: grid; gap: .7rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.cifra-v5 strong { display: flex; align-items: flex-start; font: 800 clamp(3.8rem, 2rem + 5.4vw, 7.4rem)/.84 var(--fuente); letter-spacing: -.065em; color: #fff; font-variant-numeric: tabular-nums; }
.cifra-v5 .mas { margin-right: .03em; font-size: .56em; line-height: 1; color: var(--rojo); }
.cifra-v5 .cifra-texto { max-width: 24ch; font-size: .98rem; line-height: 1.45; color: rgba(255, 255, 255, .72); }

/* ---------- Quiénes somos: pieza editorial con collage fijo ---------- */
.nosotros-v5 { padding-block: clamp(5rem, 3rem + 7vw, 10rem) clamp(3rem, 2rem + 4vw, 6rem); }
.nosotros-v5 .cabecera-v5 { max-width: none; }
.nosotros-v5 .cabecera-v5 h2 { max-width: 13ch; font-size: clamp(2.7rem, 1.1rem + 5.4vw, 6.8rem); line-height: .92; }
.nosotros-v5-rejilla { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 1rem + 5vw, 7rem); align-items: start; }
.nosotros-v5-fijo { position: sticky; top: 110px; padding-bottom: 8%; }
.nosotros-v5-foto { width: 80%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio-xl); box-shadow: var(--sombra-5-alta); }
.nosotros-v5-foto picture, .nosotros-v5-foto img, .nosotros-v5-foto-aviso picture, .nosotros-v5-foto-aviso img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nosotros-v5-foto-aviso {
  position: absolute; right: 0; bottom: 0; width: 48%; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border: 8px solid var(--porcelana); border-radius: var(--radio-l); box-shadow: var(--sombra-5-alta);
}
.nosotros-v5-sello {
  position: absolute; left: calc(80% - 64px); top: 7%; display: grid; place-content: center; gap: .3rem; width: 128px; aspect-ratio: 1; margin: 0;
  border-radius: 50%; background: var(--rojo); color: #fff; text-align: center; box-shadow: 0 18px 36px -16px rgba(222, 31, 38, .8);
}
.nosotros-v5-sello strong { font: 800 2.1rem/1 var(--fuente); letter-spacing: -.05em; }
.nosotros-v5-sello span { font: 600 .72rem/1.15 var(--fuente); letter-spacing: .04em; }
.nosotros-v5-lead { margin: 0; font: 500 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.45 var(--fuente); letter-spacing: -.02em; color: var(--tinta); }
.nosotros-v5-lead::first-letter { float: left; margin: .04em .1em 0 -.02em; font: italic 400 3.7em/.8 var(--fuente-acento); color: var(--rojo); }
.mision-v5 {
  position: relative; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5);
}
.mision-v5::before { content: "\201C"; position: absolute; top: -.28em; left: .18em; font: italic 400 7.5rem/1 var(--fuente-acento); color: var(--rojo); }
.mision-v5 blockquote { margin: 0; }
.mision-v5 p { margin: 0; font: italic 400 clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem)/1.3 var(--fuente-acento); letter-spacing: -.02em; color: var(--tinta); }
.mision-v5 figcaption { margin-top: 1.2rem; font: 600 .78rem/1 var(--fuente); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.vision-v5 { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); padding-top: 2rem; border-top: 1px solid var(--linea); }
.vision-v5 h3 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.vision-v5 p { margin: 0; line-height: 1.65; color: var(--tinta-suave); }
.nosotros-v5 .video-v3 { position: relative; margin-top: 2rem; }
/* El video se queda en su lugar dentro de la sección: la regla general .video-marco de sitio.css
   (position: absolute; inset: 0) lo mandaba al comienzo de la página, detrás del encabezado y de la mascota. */
.nosotros-v5 .video-v3 .video-marco { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radio-l); box-shadow: var(--sombra-5); }
/* Mientras el video está en pantalla, la mascota 3D y su globo se apartan para no taparlo (sitio.js).
   No aplica durante «Explora conmigo», donde la mascota guía el recorrido. */
html.con-mascota3d .mascota3d-capa { transition: opacity .35s ease, visibility 0s linear 0s; }
html.video-en-pantalla:not(.mascota3d-recorrido) .mascota3d-capa,
html.video-en-pantalla:not(.mascota3d-recorrido) .mascota3d-globo,
html.video-en-pantalla:not(.mascota3d-recorrido) .mascota3d-minimizar { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
@media (prefers-reduced-motion: reduce) {
  html.con-mascota3d .mascota3d-capa, html.video-en-pantalla .mascota3d-capa { transition: none; }
}

/* ---------- Valores: paneles que se abren (el primero, en rojo, mientras nadie elige) ---------- */
.valores-v5 { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.valores-v5-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; height: clamp(400px, 31vw, 480px); }
.valor-v5 {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem;
  padding: clamp(1.2rem, 1rem + 1vw, 2rem); overflow: hidden; border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5);
  transition: flex-grow .8s var(--curva-5), background-color .5s, color .5s;
}
.valor-v5-num {
  position: absolute; top: clamp(1.1rem, .9rem + .8vw, 1.8rem); left: clamp(1.2rem, 1rem + 1vw, 2rem);
  font: 800 clamp(3rem, 2rem + 3vw, 5.6rem)/.8 var(--fuente); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px var(--rojo);
  transition: -webkit-text-stroke-color .5s;
}
/* Tamaño pensado para que «Responsabilidad» quepa entero en un panel cerrado */
.valor-v5 h3 { margin: 0; font-size: clamp(1.05rem, .8rem + .5vw, 1.5rem); line-height: 1.04; letter-spacing: -.035em; color: inherit; }
.valor-v5 p { margin: 0; max-width: 30ch; font-size: .95rem; line-height: 1.5; color: var(--tinta-suave); transition: color .5s; }
.valor-v5:hover, .valores-v5-lista:not(:hover) .valor-v5:first-child { flex-grow: 1.85; color: #fff; background-color: var(--rojo); }
.valor-v5:hover h3, .valores-v5-lista:not(:hover) .valor-v5:first-child h3 { font-size: clamp(1.3rem, 1rem + .9vw, 2rem); }
.valor-v5:hover .valor-v5-num, .valores-v5-lista:not(:hover) .valor-v5:first-child .valor-v5-num { -webkit-text-stroke-color: rgba(255, 255, 255, .7); }
.valor-v5:hover p, .valores-v5-lista:not(:hover) .valor-v5:first-child p { color: rgba(255, 255, 255, .9); }

/* ---------- Servicios: tarjetas que se apilan al bajar (sin fijar la página) ---------- */
.servicios-v5 { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
/* Cabecera apilada: la esquina derecha queda libre para la mascota y su globo */
.servicios-v5 .cabecera-v5-fila { display: block; max-width: none; margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.servicios-v5 .cabecera-v5-lado { max-width: 62ch; margin-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.servicios-v5 .cabecera-v5-lado p { max-width: 46ch; }
.servicios-v5-pila { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.servicio-v5 {
  position: sticky; top: 76px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(74vh, 620px);
  overflow: hidden; border-radius: var(--radio-xl); background: #fff;
  box-shadow: 0 -18px 50px -30px rgba(29, 27, 28, .45), var(--sombra-5);
}
.servicio-v5:nth-child(2) { top: 94px; }
.servicio-v5-media { position: relative; margin: 0; min-height: 280px; }
.servicio-v5-media picture, .servicio-v5-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.servicio-v5-cuerpo { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.05rem; padding: clamp(1.75rem, 1.2rem + 2.6vw, 4rem); }
.servicio-v5-num { margin: 0; font: 600 .85rem/1 var(--fuente); letter-spacing: .03em; color: var(--rojo); }
.servicio-v5-num span { color: var(--tinta-suave); }
.servicio-v5 h3 { margin: 0; max-width: 14ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.7rem); line-height: .96; letter-spacing: -.05em; color: inherit; }
.servicio-v5-cuerpo > p:not(.servicio-v5-num) { margin: 0; max-width: 46ch; font-size: 1.05rem; line-height: 1.6; color: var(--tinta-suave); }
.servicio-v5-corporativo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--tinta); color: #fff; }
.servicio-v5-corporativo .servicio-v5-media { order: 2; }
.servicio-v5-corporativo .servicio-v5-num span, .servicio-v5-corporativo .servicio-v5-cuerpo > p:not(.servicio-v5-num) { color: rgba(255, 255, 255, .74); }
.servicio-v5-corporativo .enlace-v5 { color: #fff; }
.servicio-v5-corporativo .enlace-v5:hover { color: #ff8a8e; }

/* ---------- Equipo: emocional, foto a sangre que se abre al llegar ---------- */
.equipo-v5 { padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(4rem, 3rem + 4vw, 7rem); }
.equipo-v5-escena { position: relative; margin: 0 10px; height: clamp(520px, 86vh, 880px); overflow: hidden; border-radius: var(--radio-xl); color: #fff; background: var(--tinta); }
.equipo-v5-foto { position: absolute; inset: 0; margin: 0; }
.equipo-v5-foto picture, .equipo-v5-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.equipo-v5-escena::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(29, 27, 28, 0) 35%, rgba(29, 27, 28, .82) 100%), linear-gradient(90deg, rgba(29, 27, 28, .45), rgba(29, 27, 28, 0) 62%);
}
.equipo-v5-titulo { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 1rem + 4vw, 5rem); z-index: 1; }
.equipo-v5-titulo h2 { margin: 0; max-width: 13ch; font-size: clamp(2.7rem, 1.1rem + 5.6vw, 7.2rem); line-height: .9; letter-spacing: -.058em; color: #fff; }
.equipo-v5-titulo h2 .acento { color: #fff; }
.equipo-v5-cinta { overflow: hidden; margin: clamp(2rem, 1.2rem + 2.5vw, 3.5rem) 0; }
.equipo-v5-cinta-pista { display: flex; width: max-content; animation: e5Cinta 38s linear infinite; }
.equipo-v5-cinta span {
  display: inline-flex; align-items: center; gap: .55em; padding-right: .55em;
  font: 800 clamp(2.4rem, 1.4rem + 4vw, 5.6rem)/1.05 var(--fuente); letter-spacing: -.055em; color: var(--tinta); white-space: nowrap;
}
.equipo-v5-cinta span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--tinta); }
.equipo-v5-cinta span::after { content: ""; width: .26em; height: .26em; border-radius: 50%; background: var(--rojo); }
@keyframes e5Cinta { to { transform: translateX(-50%); } }
.equipo-v5-rejilla { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.equipo-v5-texto { position: relative; }
.equipo-v5-lead { margin: 0; font: 500 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.45 var(--fuente); letter-spacing: -.02em; }
.equipo-v5-lead strong { color: var(--rojo); }
.equipo-v5-afiche { width: min(300px, 56%); margin: 2.2rem 0 0; overflow: hidden; border-radius: var(--radio-l); transform: rotate(-3deg); box-shadow: var(--sombra-5-alta); }
.equipo-v5-afiche picture, .equipo-v5-afiche img { display: block; width: 100%; height: auto; }
.fila-v5 {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding: 1.3rem .4rem;
  border-bottom: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: padding .45s var(--curva-5), color .3s;
}
.fila-v5:first-child { border-top: 1px solid var(--linea); }
.fila-v5 > .icono { width: 26px; height: 26px; color: var(--rojo); stroke-width: 1.5; }
.fila-v5 strong { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.fila-v5 span span { display: block; margin-top: .15rem; font-size: .9rem; color: var(--tinta-suave); }
.fila-v5-flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-5); transition: background .3s, color .3s; }
.fila-v5-flecha .icono { width: 18px; height: 18px; transform: rotate(-45deg); transition: transform .45s var(--curva-5); }
.fila-v5:hover { padding-left: 1rem; color: var(--rojo); }
.fila-v5:hover .fila-v5-flecha { background: var(--rojo); color: #fff; }
.fila-v5:hover .fila-v5-flecha .icono { transform: rotate(0); }

/* ---------- Calidad ---------- */
.calidad-v5 { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.calidad-v5-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: end; }
.calidad-v5-intro .cabecera-v5 { margin-bottom: 0; }
.calidad-v5-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 2rem; }
.calidad-v5-sellos-caja { position: relative; }
.calidad-v5-sellos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.calidad-v5-sellos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem 1.2rem; padding: 1.25rem 1.5rem;
  border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5);
}
.calidad-v5-sellos li:first-child { color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(222, 31, 38, .45), rgba(222, 31, 38, 0) 60%), var(--tinta); }
.sello-v5-icono { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rojo); color: #fff; }
.sello-v5-icono .icono { width: 24px; height: 24px; stroke-width: 1.6; }
.calidad-v5-sellos strong { font-size: 1.22rem; letter-spacing: -.025em; }
.calidad-v5-sellos li > span:last-child { font-size: .92rem; line-height: 1.4; color: var(--tinta-suave); }
.calidad-v5-sellos li:first-child > span:last-child { color: rgba(255, 255, 255, .74); }
.calidad-v5-diferenciadores {
  list-style: none; margin: clamp(3.5rem, 2rem + 4vw, 6rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 2.5vw, 3.5rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.calidad-v5-diferenciadores li { display: grid; align-content: start; gap: .65rem; }
.diferenciador-v5-icono .icono { width: 34px; height: 34px; color: var(--rojo); stroke-width: 1.4; }
.calidad-v5-diferenciadores h3 { margin: 0; font-size: 1.32rem; letter-spacing: -.03em; color: var(--tinta); }
.calidad-v5-diferenciadores p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--tinta-suave); }
.calidad-v5-mapa { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); padding: clamp(1.25rem, 1rem + 2vw, 2.75rem); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5); }

/* ---------- Clientes ---------- */
.clientes.clientes-v5 { padding-block: clamp(2rem, 1rem + 3vw, 4rem); border: 0; background: none; }
.clientes-v5-rejilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; gap: 2rem; }
.clientes-v5 .clientes-titulo { max-width: 16ch; margin: 0; font: 600 1.2rem/1.25 var(--fuente); letter-spacing: -.02em; text-transform: none; color: var(--tinta); }
.clientes-v5 .clientes-titulo .acento { color: var(--rojo); }
.clientes-v5 .carrusel-logos { -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.clientes-v5 .carrusel-pista img { filter: grayscale(1); opacity: .62; transition: filter .4s, opacity .4s; }
.clientes-v5 .carrusel-pista div:hover img { filter: none; opacity: 1; }

/* ---------- Portafolio: mosaico con filtros discretos ---------- */
.portafolio-v5 { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.filtros-v5 { display: flex; flex-wrap: wrap; gap: .25rem; }
.filtros-v5 .filtro { padding: .65rem 1rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font: 600 .95rem/1 var(--fuente); color: var(--tinta-suave); }
.filtros-v5 .filtro:hover { background: rgba(29, 27, 28, .06); color: var(--tinta); }
.filtros-v5 .filtro[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.portafolio.portafolio-v5-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 15vw, 260px); gap: 12px; }
.portafolio-v5-rejilla .plato { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: var(--radio-l); background: var(--arena); cursor: zoom-in; }
.portafolio-v5-rejilla .plato.destacado { grid-column: span 2; grid-row: span 2; }
.portafolio-v5-rejilla .plato.ancho { grid-column: span 2; }
.portafolio-v5-rejilla .plato picture, .portafolio-v5-rejilla .plato img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva-5); }
.portafolio-v5-rejilla .plato:hover img { transform: scale(1.06); }
.portafolio-v5-rejilla .plato-info {
  position: absolute; left: 12px; bottom: 12px; display: grid; gap: .1rem; padding: .6rem .85rem; border-radius: 16px;
  background: rgba(255, 255, 255, .92); color: var(--tinta); text-align: left; box-shadow: var(--sombra-5);
}
.portafolio-v5-rejilla .plato-info strong { font-size: .95rem; letter-spacing: -.01em; }
.portafolio-v5-rejilla .plato-info span { font-size: .78rem; color: var(--tinta-suave); }

/* ---------- Sedes: índice numerado y foto protagonista ---------- */
.sedes-v5 { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.explorador.explorador-v5 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; padding: 0; border: 0; background: none; box-shadow: none; }
.explorador-v5 .explorador-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: none; border: 0; }
.explorador-v5 [role="tab"] {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem;
  border: 0; border-radius: 18px; background: transparent; text-align: left; color: var(--tinta); cursor: pointer; transition: background .3s, color .3s;
}
.explorador-v5 [role="tab"] .num { font: 700 .9rem/1 var(--fuente); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.explorador-v5 [role="tab"] strong { display: block; font-size: 1.1rem; letter-spacing: -.02em; }
.explorador-v5 [role="tab"] small { display: block; margin-top: .15rem; font-size: .86rem; color: var(--tinta-suave); }
.explorador-v5 [role="tab"] > .icono { width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--curva-5); }
.explorador-v5 [role="tab"]:hover { background: rgba(29, 27, 28, .05); }
.explorador-v5 [role="tab"][aria-selected="true"] { background: var(--tinta); color: #fff; }
.explorador-v5 [role="tab"][aria-selected="true"] .num, .explorador-v5 [role="tab"][aria-selected="true"] small { color: rgba(255, 255, 255, .7); }
.explorador-v5 [role="tab"][aria-selected="true"] > .icono { opacity: 1; transform: none; color: #ff8a8e; }
.explorador-v5 .explorador-paneles { position: sticky; top: 100px; }
.explorador-v5 .explorador-panel { position: relative; min-height: clamp(420px, 38vw, 560px); overflow: hidden; border: 0; border-radius: var(--radio-xl); background: var(--tinta); color: #fff; box-shadow: var(--sombra-5-alta); }
.explorador-v5 .explorador-panel[hidden] { display: none; }
.explorador-v5 .sede-foto { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; }
.explorador-v5 .sede-foto picture, .explorador-v5 .sede-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.explorador-v5 .sede-sin-foto { position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 30%, rgba(255, 140, 140, .45), rgba(255, 140, 140, 0) 65%), var(--rojo); }
.explorador-v5 .explorador-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(29, 27, 28, 0) 30%, rgba(29, 27, 28, .85) 100%); }
.explorador-v5 .sede-cuerpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .8rem; padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); background: none; }
.sede-tipo { font: 600 .78rem/1 var(--fuente); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.explorador-v5 .sede-cuerpo h3 { margin: 0; font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.9rem); line-height: 1; letter-spacing: -.045em; color: #fff; }
.explorador-v5 .sede-dato { display: flex; align-items: flex-start; gap: .55rem; margin: 0; color: rgba(255, 255, 255, .86); }
.explorador-v5 .sede-dato .icono { flex: none; width: 18px; height: 18px; margin-top: .2rem; color: #ff8a8e; }
.explorador-v5 .sede-cuerpo .fila { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.sedes-v5 .mapa-sedes { margin-top: 1.5rem; border-radius: var(--radio-l); }

/* ---------- Novedades ---------- */
.novedades-v5 { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.vacio-v5 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem); border-radius: var(--radio-xl); box-shadow: var(--sombra-5);
  background: radial-gradient(60% 120% at 0% 100%, rgba(222, 31, 38, .12), rgba(222, 31, 38, 0) 60%), #fff;
}
.vacio-v5-img { width: clamp(120px, 14vw, 200px); height: auto; }
.vacio-v5 h3 { max-width: 22ch; margin: 0 0 .7rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.02; letter-spacing: -.045em; }
.vacio-v5 p { max-width: 52ch; margin: 0 0 1.5rem; line-height: 1.6; color: var(--tinta-suave); }
.novedades-v5-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.novedades-v5-rejilla .novedad { overflow: hidden; border: 0; border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5); }
/* Fotos de cualquier proporción (también verticales de celular): recorte 16:9, un poco hacia arriba para no cortar caras */
.novedades-v5-rejilla .novedad img { display: block; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.novedades-v5-rejilla .novedad-cuerpo { display: flex; flex-direction: column; gap: .45rem; padding: clamp(1.2rem, 1rem + .8vw, 1.7rem); }
.novedades-v5-rejilla .novedad time { font: 600 .82rem/1 var(--fuente); letter-spacing: 0; text-transform: none; color: var(--rojo); }
.novedades-v5-rejilla .novedad h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); line-height: 1.12; letter-spacing: -.035em; text-transform: none; color: var(--tinta); }
.novedades-v5-rejilla .novedad p { margin: 0; line-height: 1.6; }
/* Sin foto: tarjeta en arena con el texto abajo, para que no quede un hueco blanco junto a las que tienen foto */
.novedades-v5-rejilla .novedad.sin-foto { justify-content: flex-end; background: radial-gradient(90% 70% at 100% 0%, rgba(222, 31, 38, .1), rgba(222, 31, 38, 0) 60%), var(--arena); }
@media (max-width: 1099px) {
  .novedades-v5-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .novedades-v5-rejilla .novedad:first-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .novedades-v5-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Preguntas frecuentes ---------- */
.preguntas-v5 { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.preguntas-v5-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.preguntas-v5-rejilla .cabecera-v5 { position: sticky; top: 110px; }
.faq.faq-v5 { display: block; border: 0; }
.faq-v5 details { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: none; box-shadow: none; }
.faq-v5 details:first-child { border-top: 1px solid var(--linea); }
.faq-v5 summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem .2rem; list-style: none; cursor: pointer;
  font: 600 clamp(1.08rem, 1rem + .45vw, 1.38rem)/1.3 var(--fuente); letter-spacing: -.02em; color: var(--tinta);
}
.faq-v5 summary::-webkit-details-marker { display: none; }
.faq-v5 summary .icono {
  flex: none; width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-5); color: var(--tinta);
  transition: transform .5s var(--curva-5), background .3s, color .3s;
}
.faq-v5 details[open] summary .icono { transform: rotate(45deg); background: var(--rojo); color: #fff; }
.faq-v5 summary:hover { color: var(--rojo); }
.faq-v5 .respuesta { padding: 0 3.6rem 1.7rem .2rem; line-height: 1.7; color: var(--tinta-suave); }
.faq-v5 .respuesta p { margin: 0; }

/* ---------- Contacto: limpio y elegante ---------- */
.contacto-v5 { padding-block: clamp(4rem, 3rem + 5vw, 8rem) clamp(5rem, 3rem + 6vw, 9rem); }
.contacto-v5-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.contacto-v5 .cabecera-v5 h2 { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.6rem); line-height: .92; }
.contacto-v5 .datos-contacto { display: grid; gap: 0; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tinta); }
.contacto-v5 .dato { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--linea); }
.contacto-v5 .dato .acceso-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-5); color: var(--rojo); }
.contacto-v5 .dato .acceso-icono .icono { width: 20px; height: 20px; color: var(--rojo); }
.contacto-v5 .dato h3 { margin: 0 0 .25rem; font: 600 .76rem/1.2 var(--fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.contacto-v5 .dato p, .contacto-v5 .dato a { margin: 0; font-size: 1.05rem; color: var(--tinta); }
.contacto-v5 .dato a:hover { color: var(--rojo); }
.contacto-v5 .redes .red { background: #fff; color: var(--tinta); box-shadow: var(--sombra-5); }
.contacto-v5 .redes .red:hover { background: var(--rojo); color: #fff; }
.contacto-v5-form { position: relative; margin-top: clamp(0px, 9vw, 170px); }
.contacto-v5 .form-contacto { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border: 0; border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5-alta); }

/* ---------- Anclas de la mascota (dónde se para en cada sección; solo pantallas amplias) ----------
   Cajas invisibles: la 3D se para encima; sin 3D se ve la imagen 2D de respaldo que llevan dentro. */
.mascota-ancla { display: block; pointer-events: none; }
.mascota-ancla picture, .mascota-ancla img { height: 100%; width: auto; }
html.con-mascota3d .mascota-ancla { visibility: hidden; }
.ancla-nosotros, .ancla-servicios, .ancla-equipo, .ancla-calidad, .ancla-sedes, .ancla-contacto, .ancla-portafolio { display: none; }
@media (min-width: 1100px) {
  .ancla-nosotros { display: block; position: absolute; left: -5%; bottom: 0; height: 44%; aspect-ratio: .48; }
  /* Servicios: en la esquina derecha, sobre el borde de la primera tarjeta; la columna lateral le deja el hueco */
  .ancla-servicios { display: block; position: absolute; right: 0; bottom: calc(-1 * clamp(2.5rem, 1.5rem + 2.5vw, 4rem)); height: 170px; aspect-ratio: .48; }
  .ancla-equipo { display: block; position: absolute; left: calc(min(300px, 56%) + 2.5rem); bottom: 0; height: 220px; aspect-ratio: .48; }
  .ancla-calidad { display: block; position: absolute; right: 7%; bottom: calc(100% - 4px); height: 190px; aspect-ratio: .48; }
  .ancla-sedes { display: block; position: absolute; left: 61.5%; bottom: calc(-1 * clamp(2rem, 1.4rem + 2.4vw, 3.6rem)); height: 180px; aspect-ratio: .48; }
  /* Portafolio: entre el título y los filtros, sobre el borde del mosaico */
  .ancla-portafolio { display: block; position: absolute; left: 53%; bottom: calc(-1 * clamp(2rem, 1.4rem + 2.4vw, 3.6rem)); height: 180px; aspect-ratio: .48; }
  .ancla-contacto { display: block; position: absolute; right: 9%; bottom: calc(100% - 4px); height: 200px; aspect-ratio: .48; }
}

/* ---------- Movimiento ligado al scroll (navegadores que lo soportan) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .equipo-v5-escena { animation: e5Abre linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .equipo-v5-foto img { animation: e5Paralaje linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .cifras-v5-anio-num { animation: e5Desliza linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes e5Abre { from { clip-path: inset(7% 6% round 64px); } to { clip-path: inset(0 0 round 48px); } }
@keyframes e5Paralaje { from { transform: scale(1.14) translateY(-4%); } to { transform: scale(1.14) translateY(4%); } }
@keyframes e5Desliza { from { transform: translateX(-12%); opacity: .2; } }

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1099px) {
  .cifras-v5-rejilla, .nosotros-v5-rejilla, .calidad-v5-intro, .preguntas-v5-rejilla, .contacto-v5-rejilla, .equipo-v5-rejilla { grid-template-columns: 1fr; }
  .nosotros-v5-fijo { position: relative; top: auto; max-width: 620px; }
  .preguntas-v5-rejilla .cabecera-v5 { position: static; }
  .contacto-v5-form { margin-top: 0; }
  .calidad-v5-diferenciadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valores-v5-lista { flex-wrap: wrap; height: auto; }
  .valor-v5 { flex: 1 1 calc(50% - 6px); min-height: 230px; padding-top: 5.5rem; }
  .valor-v5:hover, .valores-v5-lista:not(:hover) .valor-v5:first-child { flex-grow: 1; }
  .valor-v5:first-child { flex-basis: 100%; }
  .explorador.explorador-v5 { grid-template-columns: 1fr; }
  .explorador-v5 .explorador-paneles { position: static; order: -1; }
}
@media (max-width: 899px) {
  /* minmax(0, 1fr): la proporción de la foto no puede ensanchar la tarjeta */
  .servicio-v5, .servicio-v5:nth-child(n) { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .servicio-v5-corporativo .servicio-v5-media { order: 0; }
  .servicio-v5-media { min-height: 0; aspect-ratio: 16 / 10; }
  .portafolio.portafolio-v5-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .clientes-v5-rejilla { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 599px) {
  .cifras-v5-lista { gap: 2rem 1.25rem; }
  .cifra-v5 strong { font-size: clamp(3rem, 2rem + 6vw, 4rem); }
  .valor-v5 { flex-basis: 100%; min-height: 0; padding-top: 5rem; }
  .calidad-v5-diferenciadores { grid-template-columns: 1fr; }
  .nosotros-v5-foto { width: 86%; }
  .nosotros-v5-sello { width: 104px; left: auto; right: 0; top: 4%; }
  .vision-v5 { grid-template-columns: 1fr; gap: .5rem; }
  .vacio-v5 { grid-template-columns: 1fr; }
  .faq-v5 .respuesta { padding-right: .2rem; }
  .equipo-v5-escena { height: 78vh; }
}
@media (prefers-reduced-motion: reduce) {
  .equipo-v5-cinta-pista { animation: none; }
  .valor-v5, .fila-v5, .portafolio-v5-rejilla .plato img { transition: none; }
}