/* =====================================================================
   Páginas internas con el lenguaje «Rojo vivo» (versión 5)
   Se carga después de v5.css en todas las páginas públicas salvo el inicio
   (y en mantenimiento.html).
   - Cada página abre con un escenario de esquinas redondeadas que empieza bajo
     el encabezado flotante, como el de la portada. Su tono dice en qué parte
     del sitio se está: servicios en rojo, empresa en tinta, atención y
     utilidades en claro.
   - Debajo, cada página tiene su propia composición con las piezas del
     sistema: titulares grandes en minúscula con acento en cursiva, módulos
     sin borde con sombra suave y el círculo con flecha que gira.
   - En los trámites (pagos, encuesta, PQRS) manda la claridad: cabecera baja
     y efectos discretos. Todo respeta «reducir movimiento».
   ===================================================================== */

:root { --enc-interior: var(--enc5-alto); }
@media (max-width: 1080px) { :root { --enc-interior: 80px; } }

/* =====================================================================
   1. Escenario de página (cabecera)
   ===================================================================== */
.escenario-v5 { position: relative; margin-top: calc(-1 * var(--enc-interior)); padding: 10px 10px 0; }
.escenario-v5-marco {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: clamp(380px, 52vh, 540px);
  padding: calc(var(--enc-interior) + clamp(.75rem, .4rem + 1.2vw, 2rem)) 0 clamp(2.25rem, 1.5rem + 2.6vw, 4.25rem);
  border-radius: var(--radio-xl); color: #fff; background-color: var(--rojo);
}
.escenario-v5.con-foto .escenario-v5-marco, .escenario-v5.con-recorte .escenario-v5-marco, .escenario-v5.con-platos .escenario-v5-marco { min-height: clamp(560px, 76vh, 800px); }
.escenario-v5.es-compacta .escenario-v5-marco { min-height: clamp(340px, 44vh, 460px); }
.escenario-v5.es-compacta.con-foto .escenario-v5-marco { min-height: clamp(440px, 58vh, 580px); }

/* Fondo: luz con forma de gota, el contorno de la gota apenas visible y grano de película */
.escenario-v5-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.escenario-v5-fondo::before {
  content: ""; position: absolute; left: 80%; top: 56%; width: min(32%, 460px); aspect-ratio: 100 / 130; transform: translate(-50%, -50%);
  -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%);
}
.escenario-v5-fondo::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); background-size: 120px; opacity: .13; mix-blend-mode: soft-light; }
.escenario-v5-luz {
  position: absolute; left: 80%; top: 54%; width: min(48%, 680px); aspect-ratio: 260 / 320; transform: translate(-50%, -50%);
  -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;
  background: radial-gradient(54% 40% at 50% 42%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 62%, rgba(255, 255, 255, 0) 92%);
}

/* Tonos */
.escenario-v5.es-rojo .escenario-v5-marco {
  background:
    radial-gradient(46% 70% at 82% 40%, rgba(255, 118, 118, .42), rgba(255, 118, 118, 0) 70%),
    radial-gradient(90% 60% at 30% 125%, rgba(92, 0, 8, .45), rgba(92, 0, 8, 0) 70%),
    radial-gradient(60% 90% at -8% -5%, rgba(92, 0, 8, .3), rgba(92, 0, 8, 0) 62%),
    var(--rojo);
}
.escenario-v5.es-tinta .escenario-v5-marco {
  background:
    radial-gradient(52% 85% at 86% 26%, rgba(222, 31, 38, .5), rgba(222, 31, 38, 0) 64%),
    radial-gradient(60% 80% at 0% 108%, rgba(222, 31, 38, .2), rgba(222, 31, 38, 0) 62%),
    radial-gradient(40% 50% at 28% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%),
    var(--tinta);
}
.escenario-v5.es-tinta .escenario-v5-luz { background: radial-gradient(54% 42% at 50% 42%, rgba(255, 70, 70, .7), rgba(222, 31, 38, .3) 60%, rgba(222, 31, 38, 0) 92%); }
.escenario-v5.es-tinta .escenario-v5-fondo::before { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .01) 70%); }
.escenario-v5.es-claro .escenario-v5-marco {
  color: var(--tinta); box-shadow: var(--sombra-5);
  background:
    radial-gradient(50% 90% at 100% 0%, rgba(222, 31, 38, .15), rgba(222, 31, 38, 0) 64%),
    radial-gradient(45% 70% at 72% 125%, rgba(222, 31, 38, .07), rgba(222, 31, 38, 0) 60%),
    #fff;
}
.escenario-v5.es-claro .escenario-v5-luz, .envio-v5 .escenario-v5-luz { background: radial-gradient(54% 42% at 50% 42%, rgba(222, 31, 38, .24), rgba(222, 31, 38, .08) 60%, rgba(222, 31, 38, 0) 92%); }
.escenario-v5.es-claro .escenario-v5-fondo::before, .envio-v5 .escenario-v5-fondo::before { background: linear-gradient(180deg, rgba(222, 31, 38, .11), rgba(222, 31, 38, 0) 72%); }
.escenario-v5.es-claro .escenario-v5-fondo::after, .envio-v5 .escenario-v5-fondo::after { opacity: .05; mix-blend-mode: multiply; }

/* Contenido: migas arriba, título abajo (composición de cartel) */
.escenario-v5-rejilla {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2.25rem, 1rem + 4.5vw, 6rem);
  width: min(100% - 2 * max(var(--margen) - 10px, 20px), var(--ancho-amplio)); margin-inline: auto;
}
.migas-v5 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; margin: 0; padding: 0; list-style: none; font: 500 .9rem/1.3 var(--fuente); letter-spacing: -.005em; }
.migas-v5 li { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.migas-v5 li + li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.migas-v5 a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.migas-v5 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.migas-v5 [aria-current] { font-weight: 700; }
.escenario-v5 a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.escenario-v5.es-claro .migas-v5 { color: var(--tinta-suave); }
.escenario-v5.es-claro .migas-v5 [aria-current] { color: var(--tinta); }

.escenario-v5-texto { max-width: 1040px; }
.escenario-v5-ante { margin: 0 0 1rem; font: 600 .95rem/1.2 var(--fuente); letter-spacing: -.01em; }
.escenario-v5 h1 {
  margin: 0; max-width: 15ch; font-size: clamp(2.8rem, 1.1rem + 5.2vw, 6.6rem); line-height: .9; letter-spacing: -.058em;
  font-weight: 700; text-transform: none; color: inherit; text-wrap: balance;
}
.escenario-v5 h1 em { font-family: var(--fuente-acento); font-size: 1.06em; font-style: italic; font-weight: 400; letter-spacing: -.03em; color: inherit; }
.escenario-v5.es-tinta h1 em, .escenario-v5.es-claro h1 em { color: var(--rojo); }
.escenario-v5.es-compacta h1 { font-size: clamp(2.5rem, 1.2rem + 3.9vw, 5.3rem); }
.escenario-v5-sub { max-width: 44ch; margin: clamp(1rem, .7rem + .8vw, 1.6rem) 0 0; font: 500 clamp(1.04rem, .96rem + .32vw, 1.25rem)/1.5 var(--fuente); letter-spacing: -.012em; color: #fff; }
.escenario-v5.es-tinta .escenario-v5-sub { color: rgba(255, 255, 255, .8); }
.escenario-v5.es-claro .escenario-v5-sub { color: var(--tinta-suave); }

/* Foto: una ventana grande de esquinas redondeadas a la derecha del escenario */
.escenario-v5-foto {
  position: absolute; z-index: 1; top: 10px; right: 10px; bottom: 10px; width: min(42%, 840px); margin: 0; overflow: hidden;
  border-radius: max(calc(var(--radio-xl) - 10px), 18px); background: rgba(29, 27, 28, .2);
  box-shadow: 0 30px 70px -40px rgba(40, 0, 4, .7);
}
.escenario-v5-foto picture, .escenario-v5-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.escenario-v5.es-rojo .escenario-v5-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(222, 31, 38, .28), rgba(222, 31, 38, 0) 28%);
}
.escenario-v5.con-foto .escenario-v5-texto { max-width: 54%; }
/* La luz asoma por el borde izquierdo de la foto: el escenario no se ve plano */
.escenario-v5.con-foto .escenario-v5-luz { left: 58%; top: 50%; width: min(40%, 560px); }
.escenario-v5.con-foto .escenario-v5-fondo::before { display: none; }

/* Recorte: el equipo se para en el piso del escenario, delante de una luz con forma de gota */
.escenario-v5-reparto { position: absolute; z-index: 1; top: 0; right: 3%; bottom: 0; width: 44%; pointer-events: none; }
.escenario-v5-gota {
  position: absolute; left: 50%; top: 55%; width: 96%; aspect-ratio: 260 / 320; transform: translate(-50%, -50%);
  -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;
  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%);
}
.escenario-v5.es-tinta .escenario-v5-gota { background: radial-gradient(52% 42% at 50% 40%, rgba(255, 74, 74, .95), rgba(222, 31, 38, .45) 58%, rgba(222, 31, 38, 0) 92%); }
.escenario-v5-sombra { position: absolute; left: 50%; bottom: 3%; width: 62%; height: 7%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0)); }
/* Alto limitado para que las cabezas nunca queden bajo el encabezado flotante en pantallas bajas */
.escenario-v5-recorte { position: absolute; left: 50%; bottom: 4.5%; height: min(84%, calc(95.5% - var(--enc-interior) - 14px)); margin: 0; transform: translateX(-50%); }
.escenario-v5-recorte picture, .escenario-v5-recorte img { display: block; height: 100%; width: auto; max-width: none; }
.escenario-v5.con-recorte .escenario-v5-texto { max-width: 54%; }
.escenario-v5.con-recorte .escenario-v5-luz, .escenario-v5.con-recorte .escenario-v5-fondo::before { display: none; }

/* Platos (la carta): fotos en círculos con borde blanco, servidos sobre el escenario rojo */
.escenario-v5-platos { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none; }
.escenario-v5-plato {
  position: absolute; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: clamp(6px, .3rem + .3vw, 11px) solid #fff;
  background: #fff; box-shadow: 0 40px 70px -32px rgba(60, 0, 6, .75);
}
.escenario-v5-plato picture, .escenario-v5-plato img { display: block; width: 100%; height: 100%; object-fit: cover; }
.escenario-v5-plato.plato-1 { width: 60%; right: 15%; top: 50%; translate: 0 -42%; rotate: -6deg; }
.escenario-v5-plato.plato-2 { width: 30%; right: 3%; top: 15%; rotate: 9deg; }
.escenario-v5-plato.plato-3 { width: 28%; right: 60%; bottom: 7%; rotate: -4deg; }
.escenario-v5.con-platos .escenario-v5-texto { max-width: 52%; }
.escenario-v5.con-platos .escenario-v5-fondo::before { display: none; }

/* =====================================================================
   2. Piezas comunes
   ===================================================================== */
.seccion-v5 { padding-block: clamp(3.5rem, 2.4rem + 4.6vw, 7.5rem); }

/* Titular de sección (como las cabeceras de la portada) */
.titular-v5 { position: relative; max-width: 980px; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
.titular-v5 h2 { margin: 0; font-size: clamp(2.1rem, 1.25rem + 3.1vw, 4.4rem); line-height: .96; letter-spacing: -.052em; text-transform: none; color: var(--tinta); }
.titular-v5 h2 em, .titular-v5 h2 .acento, .equipo-gh-v5 h2 em, .direccion-v5 h2 em {
  font-family: var(--fuente-acento); font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--rojo);
}
.titular-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); }
.numeral-v5 { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.2rem; font: 600 .88rem/1.2 var(--fuente); letter-spacing: -.005em; color: var(--tinta-suave); }
.numeral-v5-num { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; color: var(--rojo); font-variant-numeric: tabular-nums; }
.numeral-v5-num::after { content: ""; width: 30px; height: 1.5px; background: currentColor; opacity: .55; }
.numeral-v5 .icono { width: 22px; height: 22px; color: var(--tinta-suave); stroke-width: 1.6; }

/* Círculo con flecha (el de los atajos de la portada): gira al pasar el cursor */
.flecha-v5 {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--porcelana); color: var(--tinta); transition: background .35s, color .35s;
}
.flecha-v5 .icono { width: 18px; height: 18px; transform: rotate(-45deg); transition: transform .5s var(--curva-5); }
.flecha-v5.es-externo .icono { transform: none; }
a:hover .flecha-v5 { background: var(--rojo); color: #fff; }
a:hover .flecha-v5:not(.es-externo) .icono { transform: rotate(0); }

/* Aviso informativo: tinta sobre arena, sin borde */
.aviso-v5 { display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 1.1rem 1.35rem; border-radius: var(--radio-l); background: var(--arena); color: var(--tinta); font-size: .98rem; line-height: 1.55; }
.aviso-v5 > .icono { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #fff; color: var(--rojo); box-shadow: var(--sombra-5); }
.aviso-v5 p { margin: .45rem 0 0; }
.aviso-v5 a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(222, 31, 38, .55); text-underline-offset: 3px; }
.aviso-v5 a:hover { color: var(--rojo); }

/* Botones: variantes que faltaban para superficies claras (sin círculo con flecha: relleno parejo).
   Solo se aplican a botones de estas páginas; los del encabezado, la banda de contacto y el pie no cambian. */
.btn-5-linea > .icono, .btn-5-sm > .icono, .error-v5 .btn-5 > .icono, .envio-v5 .btn-5 > .icono { width: 18px; height: 18px; }
.btn-5-linea { --b5-fondo: transparent; --b5-color: var(--tinta); padding: .55rem 1.45rem; box-shadow: inset 0 0 0 1.5px rgba(29, 27, 28, .2); }
.btn-5-linea:hover { --b5-fondo: var(--tinta); --b5-color: #fff; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn-5.btn-5-sm { min-height: 44px; gap: .5rem; padding: .45rem 1.1rem; font-size: .92rem; }
.acciones-v5 { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: clamp(1.4rem, 1rem + 1vw, 2rem); }
.vinculo-v5 {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}
.vinculo-v5 .icono { width: 18px; height: 18px; transition: transform .4s var(--curva-5); }
.vinculo-v5:hover { color: var(--rojo); }
.vinculo-v5:hover .icono { transform: translateX(4px); }

/* Buscador redondo (biblioteca, buscador y error 404) */
.buscador-v5 { position: relative; display: block; flex: 1; min-width: 0; }
.buscador-v5 > .icono { position: absolute; left: 1.2rem; top: 50%; z-index: 1; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tinta-suave); pointer-events: none; }
.buscador-v5 .control {
  width: 100%; min-height: 56px; padding: .8rem 1.25rem .8rem 3.2rem; border: 0; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(29, 27, 28, .1), var(--sombra-5); font: 500 1rem/1.3 var(--fuente); color: var(--tinta);
}
.buscador-v5 .control::placeholder { color: #716b6d; }
.buscador-v5 .control:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rojo), 0 0 0 5px rgba(222, 31, 38, .16); }
.vacio-docs-v5 { padding: 2.5rem 1.5rem; border-radius: var(--radio-l); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--linea); text-align: center; color: var(--tinta-suave); }
.vacio-docs-v5 a { color: var(--tinta); font-weight: 600; }

/* =====================================================================
   3. Portal de servicios: un capítulo por público, título fijo y lista de módulos
   ===================================================================== */
.portal-v5 { padding-block: clamp(3.5rem, 2.4rem + 4.6vw, 7.5rem); }
.portal-capitulo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.portal-capitulo + .portal-capitulo { margin-top: clamp(4rem, 2.5rem + 5vw, 8rem); }
.portal-cabeza { position: sticky; top: 112px; }
.portal-cabeza h2 { margin: 0; max-width: 12ch; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.9rem); line-height: .96; letter-spacing: -.052em; text-transform: none; color: var(--tinta); }
.portal-cabeza-texto { max-width: 40ch; margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--tinta-suave); }
.portal-cabeza-foto { width: min(100%, 440px); margin: clamp(1.5rem, 1rem + 1.5vw, 2.4rem) 0 0; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--radio-l); box-shadow: var(--sombra-5-alta); }
.portal-cabeza-foto picture, .portal-cabeza-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portal-capitulo-3 .portal-cabeza-foto img { object-position: 50% 24%; }
.portal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.portal-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  padding: clamp(1.15rem, .9rem + .9vw, 1.75rem); border-radius: var(--radio-l); background: #fff; color: var(--tinta); text-decoration: none;
  box-shadow: var(--sombra-5); transition: opacity .7s ease, transform .5s var(--curva-5), box-shadow .5s var(--curva-5);
}
a.portal-item:hover { color: var(--tinta); transform: translateY(-3px); box-shadow: var(--sombra-5-alta); }
a.portal-item:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; }
.portal-item-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--porcelana); color: var(--rojo); transition: background .35s, color .35s; }
a.portal-item:not(.es-destacado):hover .portal-item-icono { background: var(--rojo); color: #fff; }
.portal-item-icono .icono { width: 26px; height: 26px; stroke-width: 1.6; }
.portal-item h3 { margin: 0; font-size: clamp(1.2rem, 1.05rem + .55vw, 1.55rem); line-height: 1.1; letter-spacing: -.03em; text-transform: none; color: inherit; }
.portal-item p { margin: .35rem 0 0; max-width: 52ch; font-size: .96rem; line-height: 1.5; color: var(--tinta-suave); }
.portal-item-accion { display: inline-flex; align-items: center; gap: .9rem; font: 600 .92rem/1.2 var(--fuente); letter-spacing: -.01em; white-space: nowrap; }
.portal-item.es-destacado { color: #fff; background: radial-gradient(70% 130% at 100% 100%, rgba(222, 31, 38, .55), rgba(222, 31, 38, 0) 62%), radial-gradient(50% 70% at 0% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%), var(--tinta); }
.portal-item.es-destacado:hover { color: #fff; }
.portal-item.es-destacado .portal-item-icono { background: rgba(255, 255, 255, .1); color: #fff; }
.portal-item.es-destacado p { color: rgba(255, 255, 255, .76); }
.portal-item.es-destacado .flecha-v5 { background: var(--rojo); color: #fff; }
.portal-item.es-destacado:hover .flecha-v5 { background: #fff; color: var(--rojo); }
.portal-item.is-pendiente { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px var(--linea); }
.portal-item.is-pendiente .portal-item-accion { color: var(--tinta-suave); font-weight: 500; }

/* =====================================================================
   4. Gestión Humana: trámites con sus ilustraciones y el equipo «5C»
   ===================================================================== */
.tramites-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, .4rem + .5vw, 16px); }
.tramite-v5 {
  position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; min-height: 310px;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem); border-radius: var(--radio-l); background: #fff; color: var(--tinta); text-decoration: none;
  box-shadow: var(--sombra-5); transition: opacity .7s ease, transform .5s var(--curva-5), box-shadow .5s var(--curva-5);
}
a.tramite-v5:hover { color: var(--tinta); transform: translateY(-4px); box-shadow: var(--sombra-5-alta); }
a.tramite-v5:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; }
.tramite-v5-ilustracion { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 26px; background: var(--porcelana); }
.tramite-v5-ilustracion img { width: 64px; height: 64px; }
.tramite-v5 .flecha-v5 { position: absolute; top: clamp(1rem, .8rem + .6vw, 1.5rem); right: clamp(1rem, .8rem + .6vw, 1.5rem); }
.tramite-v5 h3 { margin: auto 0 0; padding-top: 1.5rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); line-height: 1.06; letter-spacing: -.035em; text-transform: none; color: inherit; }
.tramite-v5 p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--tinta-suave); }
.tramite-v5-estado { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; font: 600 .92rem/1.2 var(--fuente); letter-spacing: -.01em; color: var(--rojo); }
.tramite-v5-estado .icono { width: 17px; height: 17px; }
.tramite-v5.is-pendiente { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1.5px var(--linea); }
.tramite-v5.is-pendiente .tramite-v5-estado { color: var(--tinta-suave); font-weight: 500; }
.tramites-aviso { margin-top: clamp(1rem, .7rem + 1vw, 1.75rem); }

.equipo-gh-v5 { padding-top: 0; }
.equipo-gh-v5-modulo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; overflow: hidden; border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5); }
.equipo-gh-v5-foto { position: relative; min-height: 440px; margin: 0; overflow: hidden; background: var(--arena); transition: opacity .7s ease; }
.equipo-gh-v5-foto picture, .equipo-gh-v5-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.equipo-gh-v5-foto.revelar { transform: none; }
.equipo-gh-v5-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(29, 27, 28, 0) 45%, rgba(29, 27, 28, .55) 100%); pointer-events: none; }
.equipo-gh-v5-5c {
  position: absolute; z-index: 1; left: clamp(1.25rem, .8rem + 1.6vw, 2.5rem); bottom: clamp(.6rem, .3rem + 1vw, 1.5rem);
  font: italic 400 clamp(4.5rem, 2.6rem + 6vw, 9.5rem)/.85 var(--fuente-acento); letter-spacing: -.04em; color: #fff;
}
.equipo-gh-v5-texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2rem, 1.2rem + 3.4vw, 5rem); }
.equipo-gh-v5-texto h2 { margin: 0; max-width: 13ch; font-size: clamp(2.1rem, 1.25rem + 3vw, 4.2rem); line-height: .96; letter-spacing: -.052em; text-transform: none; color: var(--tinta); }
.equipo-gh-v5-lead { max-width: 44ch; margin: 1.2rem 0 0; font: 500 clamp(1.06rem, .98rem + .4vw, 1.3rem)/1.5 var(--fuente); letter-spacing: -.015em; color: var(--tinta-suave); }

/* =====================================================================
   5. PQRS: cómo funciona a la izquierda, el formulario como protagonista
   ===================================================================== */
.pqrs-v5-rejilla {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; grid-template-areas: "pasos form" "tipos form";
  gap: clamp(2rem, 1.4rem + 2vw, 3.25rem) clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: start;
}
.pqrs-v5-pasos { grid-area: pasos; }
.pqrs-v5-formulario { grid-area: form; min-width: 0; }
.pqrs-v5-tipos { grid-area: tipos; }
.pqrs-v5-pasos h2, .pqrs-v5-tipos h2 { margin: 0 0 1.2rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1; letter-spacing: -.045em; text-transform: none; color: var(--tinta); }
.pasos-v5 { list-style: none; counter-reset: paso-v5; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasos-v5 li {
  counter-increment: paso-v5; position: relative; min-height: 76px; padding: 1.05rem 1.25rem 1.1rem 4.5rem;
  border-radius: 20px; background: #fff; box-shadow: var(--sombra-5); font-size: .97rem; line-height: 1.5; color: var(--tinta-suave);
}
.pasos-v5 li::before {
  content: counter(paso-v5); position: absolute; left: 1.05rem; top: 1rem; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--rojo); color: #fff; font: 700 1rem/1 var(--fuente); box-shadow: 0 10px 20px -10px rgba(222, 31, 38, .8);
}
.pasos-v5 strong { font-weight: 650; color: var(--tinta); }
.pqrs-v5-marco { padding: clamp(.75rem, .5rem + .8vw, 1.25rem); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5-alta); }
.pqrs-v5-marco-cabeza { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; padding: .6rem .6rem 1.1rem; }
.pqrs-v5-marco-cabeza h2 { margin: 0; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.8rem); line-height: 1.1; letter-spacing: -.035em; text-transform: none; color: var(--tinta); }
.pqrs-v5-marco .marco-formulario { display: block; width: 100%; border: 0; border-radius: max(calc(var(--radio-xl) - 14px), 14px); background: var(--porcelana); }
.pqrs-v5-nota { margin: 1rem .6rem .35rem; font-size: .88rem; line-height: 1.5; color: var(--tinta-suave); }
.tipos-v5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tipos-v5 li { padding: 1rem 1.1rem 1.1rem; border-radius: 18px; background: var(--arena); font-size: .92rem; line-height: 1.45; color: var(--tinta-suave); }
.tipos-v5 strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinta); }
.pqrs-v5-canal { display: flex; gap: .85rem; align-items: flex-start; margin: 1.5rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--tinta-suave); }
.pqrs-v5-canal > .icono { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #fff; color: var(--rojo); box-shadow: var(--sombra-5); }
.pqrs-v5-canal span { padding-top: .45rem; }
.pqrs-v5-canal a { color: var(--tinta); font-weight: 600; text-decoration-color: rgba(222, 31, 38, .55); text-underline-offset: 3px; }
.pqrs-v5-canal a:hover { color: var(--rojo); }

/* =====================================================================
   6. Mejoramiento continuo: sistema de gestión, misión, mapa y biblioteca
   ===================================================================== */
.gestion-v5-rejilla { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(12px, .5rem + 1vw, 1.75rem); align-items: stretch; }
.gestion-v5-mapa { padding: clamp(1rem, .8rem + 1vw, 1.75rem); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5); }
/* El mapa de procesos (parcial compartido) con la tipografía y las formas nuevas, solo en esta página */
.gestion-v5 .mapa-gestion { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 12px; padding: 0 0 2rem; border: 0; border-radius: 0; background: none; }
.gestion-v5 .mg-extremo { border-radius: 18px; font: 600 .76rem/1.2 var(--fuente); letter-spacing: .12em; background: var(--rojo); color: #fff; }
.gestion-v5 .mg-extremo.salida { background: var(--tinta); }
.gestion-v5 .mg-centro { gap: 12px; }
.gestion-v5 .mg-capa { border-radius: 22px; padding: 1.15rem 1.2rem 1.2rem; }
.gestion-v5 .mg-capa h3 { margin: 0 0 .85rem; font: 700 1rem/1.2 var(--fuente); letter-spacing: -.02em; text-transform: none; }
.gestion-v5 .mg-capa h3::before { width: 8px; height: 8px; border-radius: 50%; }
.gestion-v5 .mg-capa ul, .gestion-v5 .mg-capa ol { gap: 8px; }
.gestion-v5 .mg-capa li { padding: .8rem .9rem; border-radius: 14px; font: 600 .9rem/1.3 var(--fuente); letter-spacing: -.01em; box-shadow: none; }
.gestion-v5 .mg-gerencial { background: var(--arena); color: var(--tinta); }
.gestion-v5 .mg-gerencial li { background: #fff; color: var(--tinta); }
.gestion-v5 .mg-misional { color: #fff; background: radial-gradient(70% 120% at 100% 0%, rgba(255, 118, 118, .45), rgba(255, 118, 118, 0) 60%), var(--rojo); }
.gestion-v5 .mg-misional li { padding-left: 2.5rem; background: #fff; color: var(--tinta); }
.gestion-v5 .mg-misional li::before { background: var(--rojo); font: 700 .7rem/1 var(--fuente); }
.gestion-v5 .mg-nutricional { margin-top: .75rem; padding: .6rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 600 .78rem/1 var(--fuente); letter-spacing: .1em; color: #fff; }
.gestion-v5 .mg-soporte { background: var(--tinta); color: #fff; }
.gestion-v5 .mg-soporte li { background: rgba(255, 255, 255, .09); color: #fff; }
.gestion-v5 .mg-retro { bottom: 0; padding: .55rem 1rem; border: 0; box-shadow: var(--sombra-5); font: 600 .82rem/1 var(--fuente); color: var(--tinta); }
.gestion-v5-sellos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.gestion-v5-sellos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem 1.1rem; padding: 1.3rem 1.4rem;
  border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5);
}
.gestion-v5-sellos li:first-child { color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(222, 31, 38, .5), rgba(222, 31, 38, 0) 60%), var(--tinta); }
.gestion-v5-sello-icono { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--rojo); color: #fff; }
.gestion-v5-sello-icono .icono { width: 24px; height: 24px; stroke-width: 1.6; }
.gestion-v5-sellos strong { font-size: 1.2rem; line-height: 1.15; letter-spacing: -.025em; }
.gestion-v5-sellos li > span:last-child { font-size: .9rem; line-height: 1.45; color: var(--tinta-suave); }
.gestion-v5-sellos li:first-child > span:last-child { color: rgba(255, 255, 255, .76); }

/* Misión y visión: losa arena con la misión como pieza editorial */
.direccion-v5 { padding: 0 10px; }
.direccion-v5-escena {
  position: relative; overflow: hidden; padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); border-radius: var(--radio-xl);
  background: radial-gradient(55% 80% at 100% 0%, rgba(222, 31, 38, .09), rgba(222, 31, 38, 0) 60%), var(--arena);
}
.direccion-v5-rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 5rem); align-items: start; }
.direccion-v5-cabeza { grid-row: span 2; margin: 0; }
.direccion-v5-cita { margin: 0; }
.direccion-v5-cita p { margin: 0; max-width: 26ch; font: italic 400 clamp(1.8rem, 1rem + 2.8vw, 3.7rem)/1.1 var(--fuente-acento); letter-spacing: -.025em; color: var(--tinta); }
.direccion-v5-cita cite { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font: 600 .9rem/1 var(--fuente); font-style: normal; color: var(--rojo); }
.direccion-v5-cita cite::before { content: ""; width: 30px; height: 1.5px; background: currentColor; opacity: .7; }
.direccion-v5-vision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; max-width: 860px; padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5); }
.direccion-v5-vision-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--porcelana); color: var(--rojo); }
.direccion-v5-vision-icono .icono { width: 24px; height: 24px; stroke-width: 1.6; }
.direccion-v5-vision h3 { margin: .2rem 0 .45rem; font-size: 1.35rem; letter-spacing: -.03em; text-transform: none; color: var(--tinta); }
.direccion-v5-vision p { margin: 0; line-height: 1.65; color: var(--tinta-suave); }

/* Mapa de procesos: la imagen oficial en un módulo blanco que se amplía */
.procesos-v5-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 1rem + 3vw, 5rem); align-items: center; }
.procesos-v5-rejilla .titular-v5 { margin-bottom: 0; }
.procesos-v5-figura { margin: 0; padding: clamp(.75rem, .5rem + 1vw, 1.4rem); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5-alta); }
.procesos-v5-imagen { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: max(calc(var(--radio-xl) - 16px), 14px); background: #fff; cursor: zoom-in; }
.procesos-v5-imagen picture, .procesos-v5-imagen img { display: block; width: 100%; height: auto; transition: transform .9s var(--curva-5); }
.procesos-v5-imagen:hover img { transform: scale(1.025); }
.procesos-v5-imagen:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; }
.procesos-v5-lupa {
  position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--tinta); color: #fff; box-shadow: var(--sombra-5); transition: background .3s, transform .5s var(--curva-5);
}
.procesos-v5-lupa .icono { width: 22px; height: 22px; }
.procesos-v5-imagen:hover .procesos-v5-lupa { background: var(--rojo); transform: scale(1.06); }
.procesos-v5-pie { margin: .9rem .5rem .2rem; font-size: .88rem; color: var(--tinta-suave); text-align: center; }
dialog.visor .btn { min-height: 44px; border-radius: 999px; padding-inline: 1.1rem; font: 600 .9rem/1 var(--fuente); }

/* Biblioteca documental */
.biblioteca-v5-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.biblioteca-v5-barra .buscador-v5 { flex: 1 1 320px; max-width: 520px; }
.filtros-doc-v5 { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 30px; background: #fff; box-shadow: var(--sombra-5); }
.filtro-v5 {
  min-height: 44px; padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 .92rem/1 var(--fuente); letter-spacing: -.01em; color: var(--tinta-suave); transition: background .3s, color .3s;
}
.filtro-v5:hover { background: rgba(29, 27, 28, .06); color: var(--tinta); }
.filtro-v5[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.filtro-v5:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.biblioteca-v5-conteo { margin: 0 0 1.1rem; font-size: .9rem; color: var(--tinta-suave); }
.documentos-v5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.doc-v5 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; padding: clamp(1.2rem, 1rem + .8vw, 1.75rem);
  border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5); transition: transform .5s var(--curva-5), box-shadow .5s var(--curva-5);
}
.doc-v5:hover { transform: translateY(-3px); box-shadow: var(--sombra-5-alta); }
.doc-v5-icono {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 56px; height: 66px;
  border-radius: 14px 22px 14px 14px; background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%), var(--rojo); color: #fff;
}
.doc-v5-icono .icono { width: 22px; height: 22px; }
.doc-v5-icono span { font: 700 .62rem/1 var(--fuente); letter-spacing: .1em; }
.doc-v5-categoria { margin: 0 0 .3rem; font: 600 .8rem/1.2 var(--fuente); letter-spacing: .01em; color: var(--rojo); }
.doc-v5 h3 { margin: 0; font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); line-height: 1.22; letter-spacing: -.025em; text-transform: none; color: var(--tinta); }
.doc-v5-meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .55rem 0 0; font-size: .84rem; color: var(--tinta-suave); }
.doc-v5-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.doc-v5-nota { margin: .9rem 0 0; font-size: .88rem; color: var(--tinta-suave); }

/* =====================================================================
   7. Carta: la barra de secciones flota sobre el borde del escenario y cada
      menú es una pieza propia (la carta de la tarde ligera va en tinta)
   ===================================================================== */
.carta-nav {
  position: sticky; top: calc(var(--enc-interior) + 6px); z-index: 20; margin-top: -32px; padding: 0 10px;
  border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: top .5s var(--curva-5);
}
body:has(.encabezado.is-oculto) .carta-nav { top: 12px; }
.carta-nav .contenedor {
  display: flex; gap: 4px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 6px; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(29, 27, 28, .05), 0 18px 40px -20px rgba(29, 27, 28, .45);
}
.carta-nav .contenedor::-webkit-scrollbar { display: none; }
.carta-nav a {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .6rem 1.15rem; border-radius: 999px; background: transparent;
  font: 600 .95rem/1 var(--fuente); font-stretch: normal; letter-spacing: -.01em; text-transform: none; color: var(--tinta); text-decoration: none;
  transition: background .3s, color .3s;
}
.carta-nav a .icono { width: 18px; height: 18px; color: var(--rojo); }
.carta-nav a:hover { background: rgba(29, 27, 28, .06); color: var(--tinta); }
.carta-nav a.is-activo { background: var(--tinta); color: #fff; }
.carta-nav a.is-activo .icono { color: #ff8a8e; }
.carta-nav a:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

.carta-v5 { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) clamp(3.5rem, 2.4rem + 4.6vw, 7.5rem); }
.carta-v5-seccion {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 1rem + 3vw, 5rem); align-items: start;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.75rem); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-5);
}
.carta-seccion.carta-v5-seccion { scroll-margin-top: 170px; }
.carta-v5-seccion + .carta-v5-seccion { margin-top: clamp(12px, .5rem + .6vw, 20px); }
.carta-v5-cabeza { position: sticky; top: 180px; }
.carta-v5-cabeza h2 { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.3rem); line-height: .94; letter-spacing: -.055em; text-transform: none; color: inherit; }
.carta-v5-horario { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font: 600 .95rem/1.3 var(--fuente); color: var(--tinta-suave); }
.carta-v5-horario .icono { width: 18px; height: 18px; color: var(--rojo); }
/* Grupos en dos columnas equilibradas (como una carta impresa), sin huecos entre grupos de distinto alto */
.carta-v5-grupos { columns: 2; column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); margin-bottom: calc(-1 * clamp(1.75rem, 1rem + 2vw, 2.75rem)); }
.carta-v5-grupos.es-unico { margin-bottom: 0; }
.carta-v5-grupo { break-inside: avoid; padding-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.carta-v5-grupos.es-unico { columns: 1; }
.carta-v5-grupos.es-unico .carta-v5-grupo { padding-bottom: 0; }
.carta-v5-grupo h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height: 1.1; letter-spacing: -.03em; text-transform: none; color: inherit; }
.carta-v5-nota { margin: .45rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--tinta-suave); }
.carta-v5-platos { list-style: none; margin: .9rem 0 0; padding: 0; }
.carta-v5-grupos.es-unico .carta-v5-platos { columns: 2; column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.carta-v5-platos li { display: grid; grid-template-columns: auto minmax(1.25rem, 1fr) auto; align-items: baseline; column-gap: .55rem; padding: .6rem 0; break-inside: avoid; }
.carta-v5-platos .nombre { font-size: 1.02rem; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.carta-v5-guia { height: 2px; border-bottom: 2px dotted rgba(29, 27, 28, .22); }
.carta-v5-platos .precio { font: 700 1.05rem/1.35 var(--fuente); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rojo); }
.carta-v5-platos .detalle { grid-column: 1 / -1; margin-top: .15rem; font-size: .9rem; line-height: 1.45; color: var(--tinta-suave); }
.carta-v5-manana { background: radial-gradient(55% 70% at 100% 0%, rgba(222, 31, 38, .07), rgba(222, 31, 38, 0) 60%), #fff; }
.carta-v5-ligero { color: #fff; background: radial-gradient(60% 90% at 100% 0%, rgba(222, 31, 38, .45), rgba(222, 31, 38, 0) 62%), radial-gradient(50% 60% at 0% 100%, rgba(222, 31, 38, .14), rgba(222, 31, 38, 0) 60%), var(--tinta); }
.carta-v5-ligero .carta-v5-horario, .carta-v5-ligero .carta-v5-nota, .carta-v5-ligero .detalle, .carta-v5-ligero .numeral-v5, .carta-v5-ligero .numeral-v5 .icono { color: rgba(255, 255, 255, .74); }
.carta-v5-ligero .numeral-v5-num, .carta-v5-ligero .carta-v5-horario .icono { color: #ff8a8e; }
.carta-v5-ligero .precio { color: #fff; }
.carta-v5-ligero .carta-v5-guia { border-bottom-color: rgba(255, 255, 255, .28); }
.carta-v5-snacks { background: radial-gradient(55% 80% at 0% 100%, rgba(222, 31, 38, .07), rgba(222, 31, 38, 0) 60%), #fff; }
.carta-v5-aviso { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* =====================================================================
   8. Encuesta: una sola columna enfocada, progreso fijo y caritas grandes
   ===================================================================== */
.encuesta-v5 { padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 4rem) clamp(3.5rem, 2.4rem + 4.6vw, 7.5rem); }
.encuesta-v5-contenedor { width: min(100% - 2 * var(--margen), 880px); margin-inline: auto; }
.pasos.encuesta-v5-progreso {
  position: sticky; top: calc(var(--enc-interior) + 8px); z-index: 5; display: flex; gap: 6px; width: min(100%, 420px); margin: 0 auto 1.5rem; padding: 9px;
  border-radius: 999px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(29, 27, 28, .05), 0 14px 30px -18px rgba(29, 27, 28, .4); transition: top .5s var(--curva-5);
}
body:has(.encabezado.is-oculto) .pasos.encuesta-v5-progreso { top: 12px; }
.encuesta-v5-progreso .paso { flex: 1; height: 8px; border-radius: 99px; background: rgba(29, 27, 28, .1); transition: background .4s; }
.encuesta-v5-progreso .paso.is-hecho { background: var(--rojo); }
.pregunta-v5 { min-width: 0; margin: 0 0 14px; padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); border: 0; border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5); }
.pregunta-v5 legend { float: left; width: 100%; margin: 0 0 1.25rem; padding: 0; font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.2 var(--fuente); letter-spacing: -.03em; color: var(--tinta); }
.pregunta-v5 legend + * { clear: both; }
.pregunta-v5-num { margin-right: .1em; font-family: var(--fuente-acento); font-style: italic; font-weight: 400; color: var(--rojo); }
.pregunta-v5 .opcional { font-size: .8em; font-weight: 500; letter-spacing: -.01em; color: var(--tinta-suave); }
.pregunta-v5-ayuda { margin: 0 0 1.1rem; font-size: .92rem; color: var(--tinta-suave); }
.sedes-encuesta-v5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opcion-v5, .cara-v5 { position: relative; }
.opcion-v5 input, .cara-v5 input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.opcion-v5 label {
  position: relative; display: flex; align-items: center; gap: .7rem; height: 100%; min-height: 64px; padding: .85rem 2.6rem .85rem 1rem;
  border-radius: 18px; background: var(--porcelana); font: 600 .98rem/1.25 var(--fuente); letter-spacing: -.015em; color: var(--tinta);
  cursor: pointer; transition: background .3s, box-shadow .3s;
}
.opcion-v5 label > .icono { flex: none; width: 20px; height: 20px; color: var(--rojo); }
.opcion-v5 label:hover { background: var(--arena); }
.opcion-v5-marca {
  position: absolute; right: .8rem; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: var(--rojo); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--curva-5);
}
.opcion-v5-marca .icono { width: 14px; height: 14px; stroke-width: 3; }
.opcion-v5 input:checked + label { background: #fff; box-shadow: inset 0 0 0 2px var(--rojo), 0 14px 30px -18px rgba(222, 31, 38, .6); }
.opcion-v5 input:checked + label .opcion-v5-marca { opacity: 1; transform: none; }
.escala-v5 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cara-v5 label {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1rem .5rem .95rem; border-radius: 20px;
  background: var(--porcelana); font: 600 .95rem/1.2 var(--fuente); letter-spacing: -.01em; color: var(--tinta); cursor: pointer;
  transition: background .3s, box-shadow .3s, color .3s;
}
.cara-v5 img { width: 74px; height: 74px; object-fit: contain; transition: transform .45s var(--curva-5); }
.cara-v5 label:hover { background: var(--arena); }
.cara-v5 label:hover img { transform: translateY(-3px) scale(1.06); }
.cara-v5 input:checked + label { background: #fff; color: var(--rojo); box-shadow: inset 0 0 0 2px var(--rojo), 0 16px 34px -20px rgba(222, 31, 38, .65); }
.cara-v5 input:checked + label img { transform: scale(1.14); }
.opcion-v5 input:focus-visible + label, .cara-v5 input:focus-visible + label { outline: 3px solid var(--rojo); outline-offset: 3px; }
.encuesta-v5 .control {
  min-height: 52px; padding: .85rem 1.1rem; border: 0; border-radius: 16px; background: var(--porcelana);
  box-shadow: inset 0 0 0 1.5px rgba(29, 27, 28, .08); font: 400 1rem/1.45 var(--fuente); color: var(--tinta); transition: box-shadow .3s, background .3s;
}
.encuesta-v5 .control::placeholder { color: #716b6d; }
.encuesta-v5 .control:hover { box-shadow: inset 0 0 0 1.5px rgba(29, 27, 28, .2); }
.encuesta-v5 .control:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--rojo), 0 0 0 5px rgba(222, 31, 38, .14); }
.encuesta-v5 .control[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
.encuesta-v5 textarea.control { margin-top: 1rem; min-height: 96px; resize: vertical; }
.encuesta-v5 .rejilla-form { gap: 0 12px; }
.encuesta-v5 .campo > label { font: 600 .9rem/1.3 var(--fuente); color: var(--tinta); }
.encuesta-v5 .casilla { margin-top: .4rem; font-size: .92rem; line-height: 1.5; color: var(--tinta-suave); }
.encuesta-v5 .casilla a { color: var(--tinta); font-weight: 600; }
.btn.encuesta-v5-enviar {
  margin-top: .75rem; min-height: 62px; border: 0; border-radius: 999px; font: 600 1.06rem/1 var(--fuente); letter-spacing: -.01em;
  box-shadow: 0 22px 44px -22px rgba(222, 31, 38, .85);
}
.btn.encuesta-v5-enviar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.exito-v5 {
  display: grid; justify-items: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem); border-radius: var(--radio-xl); text-align: center;
  background: radial-gradient(60% 90% at 50% 0%, rgba(222, 31, 38, .1), rgba(222, 31, 38, 0) 60%), #fff; box-shadow: var(--sombra-5);
}
.exito-v5:focus { outline: none; }
.exito-v5-mascota img { width: auto; height: 220px; }
.exito-v5 h2 { margin: 1rem 0 0; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1; letter-spacing: -.05em; text-transform: none; color: var(--tinta); }
.exito-v5 p { max-width: 46ch; margin: .7rem 0 1.5rem; line-height: 1.6; color: var(--tinta-suave); }

/* =====================================================================
   9. Pagos Tenaris: productos claros a la izquierda, resumen como recibo en tinta
   ===================================================================== */
.pagos-v5-rejilla { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); align-items: start; }
.pagos-v5-cabeza { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.pagos-v5-logo { flex: none; display: grid; place-items: center; padding: 10px 14px; border-radius: 22px; background: #fff; box-shadow: var(--sombra-5); }
.pagos-v5-logo .logo-cliente { width: 118px; height: auto; border: 0; border-radius: 8px; }
.pagos-v5-cabeza h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1; letter-spacing: -.05em; text-transform: none; color: var(--tinta); }
.pagos-v5-cabeza p { margin: .4rem 0 0; color: var(--tinta-suave); }
.pagos-v5 .pagos-pasos { list-style: none; counter-reset: pp; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding: 0; }
.pagos-v5 .pagos-pasos li {
  counter-increment: pp; position: relative; display: grid; align-content: start; gap: .65rem;
  font: 600 .95rem/1.3 var(--fuente); font-stretch: normal; letter-spacing: -.01em; text-transform: none; color: var(--tinta);
}
.pagos-v5 .pagos-pasos li::before {
  content: counter(pp); position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rojo); color: #fff; font: 700 1rem/1 var(--fuente); box-shadow: 0 0 0 6px var(--porcelana), 0 12px 22px -10px rgba(222, 31, 38, .8);
}
.pagos-v5 .pagos-pasos li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 52px; right: -.75rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(222, 31, 38, .55), rgba(222, 31, 38, .1)); }
.productos-v5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.producto-v5 {
  position: relative; display: flex; flex-direction: column; gap: .35rem; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); border-radius: var(--radio-l);
  background: #fff; box-shadow: var(--sombra-5); transition: box-shadow .4s, transform .4s var(--curva-5);
}
.producto-v5 h3 { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-transform: none; color: var(--tinta-suave); }
.producto-v5 .precio { font: 700 clamp(2rem, 1.5rem + 1.5vw, 2.8rem)/1 var(--fuente); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.producto-v5 .cantidad { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1.1rem; padding: 5px; border-radius: 999px; background: var(--porcelana); }
.producto-v5 .cantidad button {
  display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--tinta);
  box-shadow: var(--sombra-5); cursor: pointer; transition: background .3s, color .3s;
}
.producto-v5 .cantidad button:hover:not([disabled]) { background: var(--rojo); color: #fff; }
.producto-v5 .cantidad button[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.producto-v5 .cantidad button:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.producto-v5 .cantidad .icono { width: 18px; height: 18px; }
.producto-v5 .cantidad output { min-width: 2ch; font: 700 1.25rem/1 var(--fuente); text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta); }
.producto-v5.is-seleccionado { box-shadow: inset 0 0 0 2px var(--rojo), 0 24px 48px -26px rgba(222, 31, 38, .6); }
.producto-v5.is-seleccionado::after { content: ""; position: absolute; top: 1.2rem; right: 1.2rem; width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 5px rgba(222, 31, 38, .16); }
.resumen-v5 {
  position: sticky; top: 112px; padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); border-radius: var(--radio-xl); color: #fff;
  background: radial-gradient(80% 70% at 100% 0%, rgba(222, 31, 38, .5), rgba(222, 31, 38, 0) 62%), var(--tinta); box-shadow: var(--sombra-5-alta);
}
.resumen-v5 h2 { margin: 0 0 1.25rem; font-size: 1.5rem; letter-spacing: -.035em; text-transform: none; color: #fff; }
.resumen-v5 dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .8rem 0; margin: 0 0 1.5rem; }
.resumen-v5 dt { padding-right: 1rem; font-size: .95rem; color: rgba(255, 255, 255, .74); }
.resumen-v5 dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.resumen-v5 dt:nth-of-type(2), .resumen-v5 dd.total { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.resumen-v5 dd.total { font: 700 clamp(2.1rem, 1.6rem + 1.5vw, 2.9rem)/1 var(--fuente); letter-spacing: -.05em; color: #fff; }
.resumen-v5 .btn { min-height: 58px; border: 0; border-radius: 999px; font: 600 1.02rem/1 var(--fuente); letter-spacing: -.01em; box-shadow: 0 18px 36px -18px rgba(222, 31, 38, .9); }
.resumen-v5 .btn[disabled] { --btn-bg: rgba(255, 255, 255, .12); --btn-color: rgba(255, 255, 255, .62); opacity: 1; box-shadow: none; }
.resumen-v5 .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.resumen-v5-nota { margin: .9rem 0 0; font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.resumen-v5-seguro { display: flex; gap: .6rem; align-items: flex-start; margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.resumen-v5-seguro .icono { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: #ff8a8e; }
dialog.dialogo-v5 { width: min(520px, calc(100% - 2rem)); overflow: hidden; border-radius: var(--radio-xl); box-shadow: var(--sombra-5-alta); }
.dialogo-v5 .dialogo-cuerpo { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.dialogo-v5 h2 { margin: 0 0 .8rem; font-size: 1.65rem; letter-spacing: -.04em; text-transform: none; color: var(--tinta); }
.dialogo-v5-total strong { font-size: 1.5rem; letter-spacing: -.03em; color: var(--tinta); }
.dialogo-v5 .alerta { padding: 1rem 1.15rem; border: 0; border-radius: 18px; background: var(--arena); color: var(--tinta); line-height: 1.5; }
.dialogo-v5 .alerta > .icono { color: var(--rojo); }
.dialogo-v5 .dialogo-pie { gap: .6rem; padding: 1rem clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 0; background: var(--porcelana); }
.dialogo-v5 .btn { min-height: 50px; padding-inline: 1.35rem; border-radius: 999px; font: 600 .95rem/1 var(--fuente); }

/* =====================================================================
   10. Novedades
   ===================================================================== */
.vacio-pagina-v5 {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 1rem + 3vw, 5rem);
  padding: clamp(2rem, 1.4rem + 3vw, 4.5rem) clamp(1.75rem, 1.2rem + 3vw, 5rem) 0; overflow: hidden; border-radius: var(--radio-xl);
  background: radial-gradient(60% 120% at 0% 100%, rgba(222, 31, 38, .13), rgba(222, 31, 38, 0) 60%), #fff; box-shadow: var(--sombra-5);
}
.vacio-pagina-v5-mascota img { display: block; width: clamp(120px, 14vw, 210px); height: auto; }
.vacio-pagina-v5-texto { align-self: center; padding-bottom: clamp(2rem, 1.4rem + 3vw, 4.5rem); }
.vacio-pagina-v5 h2 { margin: 0 0 .8rem; max-width: 18ch; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: .98; letter-spacing: -.05em; text-transform: none; color: var(--tinta); }
.vacio-pagina-v5 p { max-width: 50ch; margin: 0 0 1.6rem; line-height: 1.6; color: var(--tinta-suave); }
.noticias-v5-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.noticia-v5 { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5); }
.noticia-v5:first-child { grid-column: span 2; grid-row: span 2; }
.noticia-v5:first-child .noticia-v5-foto { flex: 1; min-height: 260px; aspect-ratio: auto; }
/* La foto no aporta su alto: llena el marco (16:9, o el espacio de la destacada) aunque sea vertical */
.noticia-v5-foto { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--arena); }
.noticia-v5-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Sin foto: arena con el texto abajo (la destacada sin foto no queda como un gran recuadro blanco) */
.noticia-v5.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); }
.noticia-v5-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.noticia-v5 time { font: 600 .82rem/1 var(--fuente); color: var(--rojo); }
.noticia-v5 h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.7rem); line-height: 1.1; letter-spacing: -.035em; text-transform: none; color: var(--tinta); }
.noticia-v5:first-child h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }
.noticia-v5 p { margin: 0; line-height: 1.6; color: var(--tinta-suave); white-space: pre-line; }

/* =====================================================================
   11. Preguntas frecuentes: acordeón grande y ayuda en rojo
   ===================================================================== */
.faq-pagina-v5-rejilla { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.acordeon-v5 details { border-bottom: 1px solid var(--linea); }
.acordeon-v5 details:first-child { border-top: 1px solid var(--linea); }
.acordeon-v5 summary {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.4rem .2rem; list-style: none; cursor: pointer;
  font: 600 clamp(1.08rem, 1rem + .45vw, 1.4rem)/1.3 var(--fuente); letter-spacing: -.02em; color: var(--tinta); transition: color .3s;
}
.acordeon-v5 summary::-webkit-details-marker { display: none; }
.acordeon-v5-num { font: 700 .85rem/1 var(--fuente); letter-spacing: 0; color: var(--rojo); font-variant-numeric: tabular-nums; }
.acordeon-v5 summary .icono {
  width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: #fff; color: var(--tinta); box-shadow: var(--sombra-5);
  transition: transform .5s var(--curva-5), background .3s, color .3s;
}
.acordeon-v5 details[open] summary .icono { transform: rotate(45deg); background: var(--rojo); color: #fff; }
.acordeon-v5 summary:hover { color: var(--rojo); }
.acordeon-v5 summary:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; border-radius: 12px; }
.acordeon-v5 .respuesta { padding: 0 4.5rem 1.6rem 3.4rem; line-height: 1.7; color: var(--tinta-suave); }
.acordeon-v5 .respuesta p { margin: 0; }
.faq-pagina-v5-lado { position: sticky; top: 112px; }
.ayuda-v5 {
  position: relative; overflow: hidden; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); border-radius: var(--radio-xl); color: #fff;
  background: radial-gradient(70% 60% at 100% 0%, rgba(255, 140, 140, .32), rgba(255, 140, 140, 0) 60%), radial-gradient(70% 70% at 0% 100%, rgba(92, 0, 8, .38), rgba(92, 0, 8, 0) 65%), var(--rojo);
  box-shadow: 0 30px 60px -34px rgba(222, 31, 38, .75);
}
.ayuda-v5::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); background-size: 120px; opacity: .12; mix-blend-mode: soft-light; pointer-events: none; }
.ayuda-v5-icono { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.4rem; border-radius: 50%; background: #fff; color: var(--rojo); }
.ayuda-v5-icono .icono { width: 24px; height: 24px; }
.ayuda-v5 p { position: relative; z-index: 1; margin: 0; font: 500 1.15rem/1.6 var(--fuente); letter-spacing: -.01em; color: #fff; }
.ayuda-v5 strong { display: block; margin-bottom: .6rem; font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.02 var(--fuente); letter-spacing: -.045em; }
.ayuda-v5 a { display: inline-block; padding-block: .55rem; font-weight: 700; color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ayuda-v5 a:hover { text-decoration-color: rgba(255, 255, 255, .55); }
.ayuda-v5 a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
   12. Buscar: una barra protagonista y resultados como módulos
   ===================================================================== */
.buscar-v5 { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) clamp(3.5rem, 2.4rem + 4.6vw, 7.5rem); }
.buscar-v5-contenedor { width: min(100% - 2 * var(--margen), 920px); margin-inline: auto; }
.buscar-v5-barra { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; background: #fff; box-shadow: var(--sombra-5-alta); transition: box-shadow .3s; }
.buscar-v5-barra:focus-within { box-shadow: 0 0 0 3px var(--rojo), var(--sombra-5-alta); }
.buscar-v5-barra .buscador-v5 .control { min-height: 58px; background: transparent; box-shadow: none; font-size: 1.1rem; }
.buscar-v5-barra .buscador-v5 .control:focus { box-shadow: none; }
.buscar-v5-sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.75rem; }
.buscar-v5-sugerencias p { margin: 0; font: 600 .95rem/1 var(--fuente); color: var(--tinta-suave); }
.buscar-v5-sugerencias ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.buscar-v5-sugerencias a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1.05rem; border-radius: 999px; background: #fff;
  box-shadow: var(--sombra-5); font: 600 .95rem/1 var(--fuente); color: var(--tinta); text-decoration: none; transition: background .3s, color .3s;
}
.buscar-v5-sugerencias a .icono { width: 16px; height: 16px; color: var(--rojo); transform: rotate(-45deg); transition: transform .45s var(--curva-5), color .3s; }
.buscar-v5-sugerencias a:hover { background: var(--tinta); color: #fff; }
.buscar-v5-sugerencias a:hover .icono { color: #fff; transform: none; }
.buscar-v5-conteo { margin: 2rem 0 1rem; font: 600 .95rem/1.3 var(--fuente); color: var(--tinta-suave); }
.buscar-v5 .vacio-docs-v5 { margin-top: 2rem; }
.resultados-v5 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.resultados-v5 a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-5); color: var(--tinta); text-decoration: none;
  transition: transform .5s var(--curva-5), box-shadow .5s var(--curva-5);
}
.resultados-v5 a:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: var(--sombra-5-alta); }
.resultados-v5 a:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; }
.resultados-v5-cuerpo { display: grid; gap: .3rem; min-width: 0; }
.resultados-v5-tipo { font: 600 .76rem/1.2 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); }
.resultados-v5 strong { font-size: clamp(1.12rem, 1.04rem + .4vw, 1.4rem); line-height: 1.2; letter-spacing: -.03em; }
.resultados-v5-texto { font-size: .95rem; line-height: 1.5; color: var(--tinta-suave); }

/* =====================================================================
   13. Tratamiento de datos: lectura cómoda, números de sección en rojo
   ===================================================================== */
.legal-v5 { padding-block: clamp(3rem, 2rem + 4vw, 6.5rem); }
.legal-v5-texto { counter-reset: legal; max-width: 760px; margin-inline: auto; font-size: 1.05rem; line-height: 1.75; color: var(--tinta-suave); }
.legal-v5-lead { margin: 0 0 1rem; font: 500 clamp(1.2rem, 1.05rem + .6vw, 1.55rem)/1.55 var(--fuente); letter-spacing: -.02em; color: var(--tinta); }
.legal-v5-texto h2 {
  counter-increment: legal; position: relative; margin: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0 1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.1; letter-spacing: -.04em; text-transform: none; color: var(--tinta);
}
.legal-v5-texto h2::before {
  content: counter(legal, decimal-leading-zero); content: counter(legal, decimal-leading-zero) / "";
  display: block; margin-bottom: .65rem; font: 700 .85rem/1 var(--fuente); letter-spacing: 0; color: var(--rojo);
}
.legal-v5-texto ul { list-style: none; display: grid; gap: .65rem; margin: 0 0 1.25rem; padding: 0; }
.legal-v5-texto li { position: relative; padding-left: 1.6rem; }
.legal-v5-texto li::before { content: ""; position: absolute; left: .25rem; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); }
.legal-v5-texto strong { font-weight: 650; color: var(--tinta); }
.legal-v5-texto a { font-weight: 600; color: var(--tinta); text-decoration-color: rgba(222, 31, 38, .55); text-underline-offset: 3px; }
.legal-v5-texto a:hover { color: var(--rojo); }
.legal-v5-nota { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linea); color: var(--tinta-suave); }
@media (min-width: 1100px) {
  .legal-v5-texto h2::before { position: absolute; left: -4.75rem; top: .5em; margin: 0; }
}

/* =====================================================================
   14. Error 404 y resultado de un envío
   ===================================================================== */
.error-v5 { margin-top: calc(-1 * var(--enc-interior)); padding: 10px; }
.error-v5-escena {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(660px, calc(100svh - 20px)); max-height: 1040px;
  padding: calc(var(--enc-interior) + 2rem) clamp(1.5rem, 1rem + 4vw, 5.5rem) clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  border-radius: var(--radio-xl); color: #fff;
  background:
    radial-gradient(46% 60% at 68% 44%, rgba(255, 118, 118, .45), 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);
}
.error-v5 .escenario-v5-luz { left: 72%; top: 50%; width: min(52%, 720px); }
.error-v5 .escenario-v5-fondo::before { left: 72%; top: 52%; width: min(36%, 500px); }
.error-v5-numero {
  position: absolute; z-index: 0; left: 0; right: 0; top: clamp(76px, 11%, 140px); margin: 0; text-align: center; white-space: nowrap;
  pointer-events: none; user-select: none; font: 800 min(36vw, 50svh)/.8 var(--fuente); letter-spacing: -.07em;
}
.error-v5-numero span {
  display: inline-block; padding: .04em .06em .1em; color: transparent;
  background: linear-gradient(180deg, #fff 0%, #fff 30%, rgba(255, 255, 255, .5) 64%, rgba(255, 255, 255, .05) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.error-v5-mascota { position: absolute; z-index: 1; right: clamp(1.5rem, 12vw, 15rem); bottom: 0; height: min(64%, 600px); }
.error-v5-mascota picture, .error-v5-mascota img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 22px 24px rgba(70, 0, 6, .35)); }
.error-v5-texto { position: relative; z-index: 2; max-width: 660px; }
.error-v5-ante { margin: 0 0 1rem; font: 600 .95rem/1.2 var(--fuente); }
.error-v5 h1 { margin: 0; max-width: 12ch; font-size: clamp(2.6rem, 1.3rem + 4vw, 5.4rem); line-height: .92; letter-spacing: -.055em; text-transform: none; color: #fff; }
.error-v5-sub { max-width: 44ch; margin: 1.2rem 0 0; font: 500 clamp(1.02rem, .96rem + .3vw, 1.2rem)/1.5 var(--fuente); color: #fff; }
.error-v5-buscar { display: flex; align-items: center; gap: 6px; max-width: 580px; margin-top: 1.75rem; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.error-v5-buscar .buscador-v5 .control { min-height: 54px; box-shadow: none; }
.error-v5-buscar .buscador-v5 .control:focus { box-shadow: inset 0 0 0 2px var(--tinta); }
.error-v5 .acciones-v5 { margin-top: 1rem; }
/* Vidrio oscuro sobre el rojo: el texto blanco conserva el contraste AA */
.error-v5 .btn-5-vidrio, .mantenimiento-v5 .btn-5-vidrio { --b5-fondo: rgba(29, 27, 28, .18); padding: .55rem 1.35rem; }
.error-v5 .btn-5-vidrio:hover, .mantenimiento-v5 .btn-5-vidrio:hover { --b5-fondo: rgba(29, 27, 28, .32); }

.envio-v5 { margin-top: calc(-1 * var(--enc-interior)); padding: 10px 10px 0; }
.envio-v5-escena {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(540px, 76vh, 780px);
  padding: calc(var(--enc-interior) + 2rem) 1.25rem 3rem; border-radius: var(--radio-xl); box-shadow: var(--sombra-5);
  background: radial-gradient(50% 90% at 100% 0%, rgba(222, 31, 38, .15), rgba(222, 31, 38, 0) 64%), radial-gradient(45% 70% at 0% 110%, rgba(222, 31, 38, .07), rgba(222, 31, 38, 0) 60%), #fff;
}
.envio-v5 .escenario-v5-luz { left: 50%; }
.envio-v5 .escenario-v5-fondo::before { left: 50%; }
.envio-v5-modulo {
  position: relative; z-index: 1; display: grid; justify-items: center; width: min(100%, 620px); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--radio-xl); text-align: center; background: #fff; box-shadow: var(--sombra-5-alta);
}
.envio-v5-icono { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 1.2rem; border-radius: 50%; background: var(--rojo); color: #fff; box-shadow: 0 18px 36px -16px rgba(222, 31, 38, .8); }
.envio-v5.es-error .envio-v5-icono { background: var(--tinta); box-shadow: 0 18px 36px -16px rgba(29, 27, 28, .7); }
.envio-v5-icono .icono { width: 32px; height: 32px; }
.envio-v5 h1 { margin: 0; font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.8rem); line-height: .95; letter-spacing: -.055em; text-transform: none; color: var(--tinta); }
.envio-v5-modulo > p { max-width: 44ch; margin: .9rem 0 1.6rem; line-height: 1.6; color: var(--tinta-suave); }
.envio-v5 .btn-5 { padding: .55rem 1.45rem .55rem 1.2rem; }

/* =====================================================================
   15. Mantenimiento (página estática)
   ===================================================================== */
body.mantenimiento-v5 { min-height: 100vh; min-height: 100svh; margin: 0; padding: 10px; background: var(--porcelana); }
.mantenimiento-v5-escena {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - 20px); min-height: calc(100svh - 20px);
  padding: 20px clamp(1.25rem, .8rem + 4vw, 5.5rem) 0; border-radius: var(--radio-xl); color: #fff;
  background:
    radial-gradient(46% 60% at 30% 52%, rgba(255, 118, 118, .45), 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 108% 0%, rgba(92, 0, 8, .3), rgba(92, 0, 8, 0) 62%),
    var(--rojo);
}
.mantenimiento-v5 .escenario-v5-luz { left: 26%; top: 56%; width: min(46%, 640px); }
.mantenimiento-v5 .escenario-v5-fondo::before { left: 26%; top: 58%; width: min(32%, 440px); }
.mantenimiento-v5-marca {
  align-self: flex-start; display: inline-flex; align-items: center; height: 64px; padding: 0 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .965); box-shadow: 0 12px 34px -18px rgba(29, 27, 28, .35);
}
.mantenimiento-v5-marca .marca-logo { width: clamp(132px, 112px + 1.6vw, 156px); height: auto; }
.mantenimiento-v5-contenido { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: clamp(1.5rem, 1rem + 4vw, 6rem); }
.mantenimiento-v5-mascota { display: block; justify-self: center; align-self: end; }
.mantenimiento-v5-mascota img { display: block; width: auto; height: min(64vh, 600px); max-width: none; filter: drop-shadow(0 22px 24px rgba(70, 0, 6, .35)); }
.mantenimiento-v5-texto { align-self: center; max-width: 640px; padding-block: 2rem; }
.mantenimiento-v5 h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4vw, 5.6rem); line-height: .92; letter-spacing: -.055em; text-transform: none; color: #fff; }
.mantenimiento-v5-texto p { max-width: 46ch; margin: 1.2rem 0 0; font: 500 clamp(1.04rem, .96rem + .32vw, 1.25rem)/1.5 var(--fuente); color: #fff; }

/* =====================================================================
   16. Movimiento con control (solo si la persona no pidió reducirlo)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .escenario-v5-migas, .escenario-v5-texto > *, .error-v5-texto > *, .mantenimiento-v5-texto > * { animation: i5Sube .9s var(--curva-5) both; }
  .escenario-v5-texto > :nth-child(2), .error-v5-texto > :nth-child(2), .mantenimiento-v5-texto > :nth-child(2) { animation-delay: .08s; }
  .escenario-v5-texto > :nth-child(3), .error-v5-texto > :nth-child(3), .mantenimiento-v5-texto > :nth-child(3) { animation-delay: .16s; }
  .error-v5-texto > :nth-child(n+4) { animation-delay: .24s; }
  .escenario-v5-foto picture { animation: i5Foto 1.6s var(--curva-5) both; }
  .escenario-v5-recorte img, .error-v5-mascota img, .mantenimiento-v5-mascota img { animation: i5Reparto 1.3s var(--curva-5) both; }
  .escenario-v5-plato { animation: i5Plato 1.2s var(--curva-5) both; }
  .escenario-v5-plato.plato-2 { animation-delay: .12s; }
  .escenario-v5-plato.plato-3 { animation-delay: .24s; }
  .escenario-v5-luz, .escenario-v5-gota { animation: i5Luz 2s var(--curva-5) both; }
  .error-v5-numero span { animation: i5Numero 1.2s var(--curva-5) .05s both; }
}
@keyframes i5Sube { from { opacity: 0; translate: 0 18px; } }
@keyframes i5Foto { from { scale: 1.08; } }
@keyframes i5Reparto { from { translate: 0 5%; scale: .97; } }
@keyframes i5Plato { from { opacity: 0; scale: .86; } }
@keyframes i5Luz { from { opacity: 0; scale: .8; } }
@keyframes i5Numero { from { translate: 0 30%; opacity: 0; } }
/* Profundidad al bajar (navegadores con animaciones ligadas al scroll): la foto se mueve más lento que la página */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .escenario-v5:not(.es-compacta) { view-timeline: --cabecera block; }
    .escenario-v5:not(.es-compacta) .escenario-v5-foto img, .escenario-v5:not(.es-compacta) .escenario-v5-recorte picture {
      animation: i5Paralaje linear both; animation-timeline: --cabecera; animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes i5Paralaje { to { translate: 0 7%; } }

/* =====================================================================
   17. Pantallas medianas y celular
   ===================================================================== */
@media (max-width: 1199px) and (min-width: 900px) {
  .escenario-v5-foto { width: 40%; }
  .escenario-v5.con-foto .escenario-v5-texto, .escenario-v5.con-recorte .escenario-v5-texto, .escenario-v5.con-platos .escenario-v5-texto { max-width: 56%; }
  .escenario-v5 h1 { font-size: clamp(2.6rem, 1rem + 4.6vw, 5rem); }
  .tramites-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .portal-capitulo, .pqrs-v5-rejilla, .gestion-v5-rejilla, .direccion-v5-rejilla, .procesos-v5-rejilla, .faq-pagina-v5-rejilla, .pagos-v5-rejilla, .carta-v5-seccion, .equipo-gh-v5-modulo { grid-template-columns: minmax(0, 1fr); }
  .pqrs-v5-rejilla { grid-template-rows: auto; grid-template-areas: "pasos" "form" "tipos"; }
  .portal-cabeza, .carta-v5-cabeza, .faq-pagina-v5-lado, .resumen-v5 { position: static; }
  .portal-cabeza-foto { display: none; }
  .direccion-v5-cabeza { grid-row: auto; }
  .gestion-v5-sellos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gestion-v5-sellos li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .gestion-v5-sello-icono { grid-row: auto; margin-bottom: .5rem; }
  .equipo-gh-v5-foto { min-height: 0; aspect-ratio: 16 / 10; }
  .noticias-v5-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .escenario-v5-marco, .escenario-v5.con-foto .escenario-v5-marco, .escenario-v5.con-recorte .escenario-v5-marco, .escenario-v5.con-platos .escenario-v5-marco,
  .escenario-v5.es-compacta .escenario-v5-marco, .escenario-v5.es-compacta.con-foto .escenario-v5-marco { min-height: 0; }
  .escenario-v5-marco { padding-bottom: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); }
  .escenario-v5-rejilla { gap: clamp(1.75rem, 1rem + 6vw, 3rem); }
  .escenario-v5.con-foto .escenario-v5-texto, .escenario-v5.con-recorte .escenario-v5-texto, .escenario-v5.con-platos .escenario-v5-texto { max-width: none; }
  .escenario-v5:not(.sin-foto) .escenario-v5-luz { top: 72%; left: 60%; width: 110%; }
  .escenario-v5-fondo::before { left: 64%; top: 72%; width: 70%; }
  .escenario-v5.con-foto:not(.es-compacta) .escenario-v5-marco { padding-bottom: 10px; }
  .escenario-v5-foto { position: relative; top: auto; right: auto; bottom: auto; width: auto; margin: 1.75rem 10px 0; aspect-ratio: 4 / 3; }
  .escenario-v5.es-compacta .escenario-v5-foto { display: none; }
  .escenario-v5.con-recorte .escenario-v5-marco, .escenario-v5.con-platos .escenario-v5-marco { padding-bottom: 0; }
  .escenario-v5-reparto { position: relative; top: auto; right: auto; bottom: auto; width: auto; height: min(92vw, 380px); margin-top: .5rem; }
  .escenario-v5-recorte { height: 92%; bottom: 2%; }
  .escenario-v5-platos { position: relative; top: auto; right: auto; bottom: auto; width: auto; height: min(84vw, 380px); margin-top: .5rem; }
  .escenario-v5-plato.plato-1 { width: min(62vw, 300px); right: auto; left: 50%; top: 46%; translate: -50% -50%; }
  .escenario-v5-plato.plato-2 { width: min(30vw, 150px); right: 4%; top: 2%; }
  .escenario-v5-plato.plato-3 { width: min(28vw, 140px); right: auto; left: 4%; bottom: 4%; }
  .portal-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tramites-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tramite-v5 { min-height: 0; }
  .carta-v5-grupos, .carta-v5-grupos.es-unico .carta-v5-platos { columns: 1; }
  .sedes-encuesta-v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacio-pagina-v5 { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .vacio-pagina-v5-mascota { order: 2; justify-self: center; }
  .vacio-pagina-v5-texto { padding-bottom: 0; }
  .error-v5-escena { min-height: 0; max-height: none; padding-top: calc(var(--enc-interior) + 1rem); }
  .error-v5-numero { position: relative; top: auto; font-size: 40vw; }
  .error-v5-mascota { position: relative; right: auto; align-self: center; height: 230px; margin-top: -16vw; }
  .error-v5-texto { margin-top: 1.25rem; }
  .mantenimiento-v5-contenido { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
  .mantenimiento-v5-texto { order: 1; padding-block: 2.5rem 1rem; }
  .mantenimiento-v5-mascota { order: 2; }
  .mantenimiento-v5-mascota img { height: min(48vh, 340px); }
}
@media (max-width: 599px) {
  .portal-item { gap: .9rem; padding: 1.05rem; }
  .portal-item-icono { width: 46px; height: 46px; border-radius: 15px; }
  .portal-item-icono .icono { width: 22px; height: 22px; }
  .portal-item-accion-texto { display: none; }
  .portal-item p { font-size: .92rem; }
  .tramites-lista, .productos-v5, .documentos-v5, .noticias-v5-rejilla, .tipos-v5, .gestion-v5-sellos { grid-template-columns: minmax(0, 1fr); }
  .noticia-v5:first-child { grid-column: auto; grid-row: auto; }
  .tramite-v5-ilustracion { width: 72px; height: 72px; border-radius: 22px; }
  .tramite-v5-ilustracion img { width: 52px; height: 52px; }
  .tramite-v5 h3 { padding-top: .9rem; }
  .gestion-v5-sellos li { grid-template-columns: auto minmax(0, 1fr); }
  .gestion-v5-sello-icono { grid-row: span 2; margin-bottom: 0; }
  .gestion-v5 .mapa-gestion { grid-template-columns: minmax(0, 1fr); padding-bottom: 2.4rem; }
  .gestion-v5 .mg-extremo { writing-mode: horizontal-tb; transform: none; padding: .7rem 1rem; }
  .gestion-v5 .mg-capa ul, .gestion-v5 .mg-capa ol { grid-template-columns: minmax(0, 1fr); }
  .doc-v5 { grid-template-columns: minmax(0, 1fr); }
  .pagos-v5 .pagos-pasos { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .pagos-v5 .pagos-pasos li { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; }
  .pagos-v5 .pagos-pasos li:not(:last-child)::after { display: none; }
  .pagos-v5-cabeza { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .escala-v5 { gap: 6px; }
  .cara-v5 label { padding: .85rem .25rem .8rem; font-size: .86rem; }
  .cara-v5 img { width: 52px; height: 52px; }
  .sedes-encuesta-v5 { grid-template-columns: minmax(0, 1fr); }
  .acordeon-v5 summary { grid-template-columns: minmax(0, 1fr) auto; }
  .acordeon-v5-num { display: none; }
  .acordeon-v5 .respuesta { padding: 0 .2rem 1.4rem; }
  .buscar-v5-barra { border-radius: 30px; }
  .buscar-v5-barra .btn-5 { padding-left: 1.1rem; }
  .error-v5-buscar { flex-direction: column; align-items: stretch; border-radius: 30px; }
  .error-v5-buscar .btn-5 { justify-content: space-between; }
  .direccion-v5 { padding-inline: 6px; }
  .legal-v5-texto { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-item, .tramite-v5, .doc-v5, .producto-v5, .resultados-v5 a, .flecha-v5, .flecha-v5 .icono, .procesos-v5-imagen img,
  .acordeon-v5 summary .icono, .carta-nav, .encuesta-v5-progreso, .cara-v5 img, .opcion-v5-marca { transition: none; }
}