/* ============================================================
   Alvanta Technologies · sitio de Vladimir Alvarado
   Paleta tomada del logo: azul marino #011C3F, azul #015ABC y gris #5B5D61.
   Sin íconos ni degradados. Plus Jakarta Sans con tracking por tamaño.
   Movimiento: ease-out fuerte, resortes en JS para lo que se toca.
   ============================================================ */

:root {
  --marino: #011c3f;
  --azul: #015abc;
  --gris-marca: #5b5d61;

  --fondo: #f4f6fa;
  --fondo-2: #e9eef5;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --tinta: #0c1830;
  --tinta-2: #45516a;
  --tinta-3: #7a8599;
  --linea: rgba(1, 28, 63, .1);
  --linea-2: rgba(1, 28, 63, .18);

  --acento: var(--azul);
  --acento-boton: var(--azul);
  --acento-boton-hover: #014a9b;
  --acento-tinte: rgba(1, 90, 188, .09);
  --ok: #1f8a4c;
  --error: #c4352b;

  /* Bandas oscuras (proyectos, siguiente proyecto y pie): el marino de la marca */
  --banda: var(--marino);
  --banda-superficie: #0a2a55;
  --banda-tinta: #eef3fb;
  --banda-tinta-2: #9fb1cc;
  --banda-linea: rgba(255, 255, 255, .12);
  --banda-acento: #6fa6ff;

  --barra-fondo: rgba(244, 246, 250, .8);
  --ventana-barra: #eef1f6;
  --sombra-1: 0 1px 2px rgba(1, 28, 63, .05), 0 8px 24px rgba(1, 28, 63, .07);
  --sombra-2: 0 2px 6px rgba(1, 28, 63, .07), 0 28px 64px rgba(1, 28, 63, .18);

  --radio-sm: 8px;
  --radio: 12px;
  --radio-lg: 18px;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
  --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}

[data-theme="dark"] {
  --fondo: #07101f;
  --fondo-2: #0c1729;
  --superficie: #0f1c33;
  --superficie-2: #13223c;
  --tinta: #edf2fa;
  --tinta-2: #a9b5c9;
  --tinta-3: #74819a;
  --linea: rgba(255, 255, 255, .08);
  --linea-2: rgba(255, 255, 255, .16);

  --acento: #5b97ff;
  --acento-boton: #0e63d4;
  --acento-boton-hover: #1d72e3;
  --acento-tinte: rgba(91, 151, 255, .14);
  --ok: #41b36f;
  --error: #ef6a5f;

  --banda: #030a17;
  --banda-superficie: #0c1a31;

  --barra-fondo: rgba(7, 16, 31, .76);
  --ventana-barra: #16233b;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
html.cambiando-tema body,
html.cambiando-tema body * {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--acento); color: #fff; }
[hidden] { display: none !important; }

.envoltura { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--tinta); color: var(--fondo); padding: 10px 14px; border-radius: var(--radio-sm); font-weight: 600; transition: top .2s var(--ease-out); }
.saltar:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 14px;
}
/* El trazo corto que acompaña a TECHNOLOGIES en el logo */
.kicker::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.titulo-seccion {
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.6rem);
  line-height: 1.04; letter-spacing: -.034em; font-weight: 750; text-wrap: balance;
}
h3 { letter-spacing: -.012em; line-height: 1.25; }
p { text-wrap: pretty; }
/* Párrafos de lectura justificados, también en celular, sin dividir palabras con guion */
.portada-lead, .proyectos-lado p, .servicio p, .paso p, .sobre-texto p, .contacto-intro p, .enviado p:not(.kicker),
.caso-resumen, .caso-bloque p, .caso-puntos li p, .caso-movil-texto p:not(.kicker) { text-align: justify; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--radio);
  font-size: .95rem; font-weight: 650; letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid transparent; user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-chico { height: 38px; padding: 0 16px; font-size: .875rem; border-radius: 10px; }
.btn-acento { background: var(--acento-boton); color: #fff; }
.btn-borde { border-color: var(--linea-2); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .btn-acento:hover { background: var(--acento-boton-hover); }
  .btn-borde:hover { background: var(--fondo-2); border-color: var(--tinta-3); }
}
.btn[disabled] { opacity: .55; pointer-events: none; }

.btn-control {
  height: 38px; padding: 0 14px; border-radius: 10px; font-size: .85rem; font-weight: 600;
  border: 1px solid currentColor; border-color: var(--linea-2);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, opacity 200ms ease;
}
.btn-control:active { transform: scale(.96); }
.btn-control:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .btn-control:not(:disabled):hover { background: var(--fondo-2); } }
.contador { font-size: .85rem; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.contador b { color: var(--tinta); font-weight: 700; }
.controles { display: flex; align-items: center; gap: 8px; }
.controles .contador { margin-right: 8px; }

/* ---------- Barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: var(--barra-fondo);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.barra.con-borde { border-bottom-color: var(--linea); }
.barra-in {
  max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding: 0 var(--margen);
  height: 64px; display: flex; align-items: center; gap: 24px;
}
.marca { display: flex; align-items: center; flex: none; }
.marca img { height: 30px; width: auto; }
.marca-oscura { display: none; }
[data-theme="dark"] .marca-clara { display: none; }
[data-theme="dark"] .marca-oscura { display: block; }
.barra-nav { position: relative; display: flex; gap: 4px; margin-inline: auto; }
.barra-nav a {
  position: relative; padding: 8px 12px; font-size: .9rem; font-weight: 550; color: var(--tinta-2);
  border-radius: 8px; transition: color .2s ease;
}
.barra-nav a.activo, .barra-nav a:hover { color: var(--tinta); }
.barra-indicador {
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 10px; border-radius: 2px;
  background: var(--acento); opacity: 0; transform-origin: left;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s ease;
}
.barra-acciones { display: flex; align-items: center; gap: 10px; }
.tema {
  height: 38px; padding: 0 12px; border-radius: 10px; font-size: .85rem; font-weight: 600; color: var(--tinta-2);
  transition: background-color .2s ease, color .2s ease, transform 160ms var(--ease-out);
}
.tema:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .tema:hover { background: var(--fondo-2); color: var(--tinta); } }
.tema-a-claro { display: none; }
[data-theme="dark"] .tema-a-claro { display: inline; }
[data-theme="dark"] .tema-a-oscuro { display: none; }
/* Dos trazos que se cruzan en una X: al abrir primero se juntan y luego giran; al cerrar, al revés. */
.menu-btn {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; border-radius: 12px;
  transition: background-color .2s ease, transform 160ms var(--ease-out);
}
.menu-btn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: var(--fondo-2); } }
.menu-linea {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta);
  transition: translate .2s var(--ease-out) .14s, rotate .2s var(--ease-out);
}
.menu-linea:first-child { top: 17px; }
.menu-linea:last-child { top: 25px; }
.menu-abierto .menu-linea { transition: translate .2s var(--ease-out), rotate .3s var(--ease-out) .12s; }
.menu-abierto .menu-linea:first-child { translate: 0 4px; rotate: 45deg; }
.menu-abierto .menu-linea:last-child { translate: 0 -4px; rotate: -45deg; }

/* La hoja baja como cortina; los enlaces suben uno tras otro (--i) y su línea se dibuja de izquierda
   a derecha. Al cerrar se van todos juntos y más rápido. */
.hoja-menu {
  position: fixed; inset: 64px 0 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo);
  padding: 12px var(--margen) calc(24px + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .34s var(--ease-cajon) .06s, visibility 0s linear .4s;
}
.menu-abierto .hoja-menu { clip-path: inset(0); visibility: visible; transition: clip-path .5s var(--ease-cajon), visibility 0s; }
.hoja-menu nav { display: grid; }
.hoja-menu nav a { position: relative; font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; padding: 12px 0; }
.hoja-menu nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.hoja-menu nav a, .hoja-pie { opacity: 0; transform: translateY(16px); transition: opacity .15s ease, transform .2s var(--ease-out); }
.menu-abierto .hoja-menu nav a, .menu-abierto .hoja-pie {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease-out) calc(var(--i) * 45ms + 90ms), transform .6s var(--ease-out) calc(var(--i) * 45ms + 90ms);
}
.menu-abierto .hoja-menu nav a::after { transform: none; transition: transform .7s var(--ease-out) calc(var(--i) * 45ms + 160ms); }
.hoja-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: .9rem; color: var(--tinta-2); }
.hoja-pie a { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .barra-nav, .barra-acciones > .tema { display: none; }
  .barra-acciones { margin-left: auto; }
  .menu-btn { display: block; }
}
@media (max-width: 420px) { .barra-cta { display: none; } }

/* ---------- Entradas al cargar ---------- */
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { transform: translateY(105%); } to { transform: none; } }
.entra { animation: entrar .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }

/* Aparecer al bajar (solo con JS, para no esconder nada si falla) */
.js [data-revela] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-revela].visible { opacity: 1; transform: none; }

/* ---------- Portada ---------- */
.portada { padding-top: clamp(104px, 11vw, 136px); overflow-x: clip; }
.estado { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--tinta-2); margin-bottom: 22px; }
.estado-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(31, 138, 76, .14); }
.portada-titulo {
  font-size: clamp(2.6rem, 1.3rem + 5vw, 5.75rem);
  line-height: .98; letter-spacing: -.045em; font-weight: 780;
  max-width: 12.5em;
}
.portada-titulo .p { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.portada-titulo .p > span { display: inline-block; animation: subir .95s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
.portada-titulo .acento { color: var(--acento); }
.portada-lead { max-width: 36em; margin-top: 24px; font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem); color: var(--tinta-2); line-height: 1.55; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.portada-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 5vw, 64px); border-top: 1px solid var(--linea); }
.portada-datos > div { padding: 18px 20px 0 0; }
.portada-datos > div + div { padding-left: 20px; border-left: 1px solid var(--linea); }
.portada-datos dt { font-weight: 700; letter-spacing: -.01em; }
.portada-datos dd { font-size: .9rem; color: var(--tinta-3); }

/* Escena 3D */
.escena {
  position: relative; height: clamp(300px, 54vw, 760px); margin-top: clamp(36px, 5vw, 64px);
  perspective: 2000px; perspective-origin: 50% 20%;
  animation: entrar 1.2s var(--ease-out) both; animation-delay: .45s;
}
.mundo { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(22deg) translateY(40px); will-change: transform; --p: 0; }
.mundo .v3d { position: absolute; margin: 0; backface-visibility: hidden; }
.ventana {
  background: var(--superficie); border: 1px solid var(--linea-2); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra-2);
}
.ventana-barra {
  display: flex; align-items: center; justify-content: center; height: 26px;
  background: var(--ventana-barra); border-bottom: 1px solid var(--linea);
}
.ventana-barra > span {
  font-size: .66rem; font-weight: 600; color: var(--tinta-3); letter-spacing: .01em;
  padding: 2px 14px; border-radius: 6px; background: var(--superficie); max-width: 70%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ventana img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--fondo-2); }

.telefono {
  position: relative; aspect-ratio: 9 / 19.5; background: #0d0d0d; border-radius: 15% / 7%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, var(--sombra-2);
}
/* El bisel se mide contra el propio teléfono (un padding en % usaría el ancho del padre). */
.telefono img {
  position: absolute; left: 3.6%; top: 1.7%; width: 92.8%; height: 96.6%;
  object-fit: cover; object-position: top; border-radius: 12% / 5.6%; background: #1a1a1a;
}

.v-centro { left: 19%; width: 62%; top: 4%; z-index: 3; transform: translateZ(calc(30px * var(--p))); }
.v-izq { left: 0; width: 42%; top: 16%; transform: translateX(calc(14% - 14% * var(--p))) translateZ(-200px) rotateY(calc(24deg - 10deg * var(--p))); }
.v-der { right: 0; width: 42%; top: 16%; transform: translateX(calc(-14% + 14% * var(--p))) translateZ(-200px) rotateY(calc(-24deg + 10deg * var(--p))); }
.t-izq { left: 14.5%; width: 12%; top: 40%; transform: translateY(calc(18% - 18% * var(--p))) translateZ(140px) rotateY(12deg); }
.t-der { right: 13%; width: 12%; top: 33%; transform: translateY(calc(26% - 26% * var(--p))) translateZ(170px) rotateY(-12deg); }

@media (max-width: 700px) {
  .escena { height: 76vw; perspective: 1200px; }
  .v-izq, .v-der { display: none; }
  .v-centro { left: 4%; width: 92%; top: 6%; }
  .t-izq { display: none; }
  .t-der { right: 7%; width: 26%; top: 34%; transform: translateY(calc(16% - 16% * var(--p))) translateZ(50px) rotateY(-10deg); }
  .portada-datos { grid-template-columns: 1fr; margin-top: 40px; }
  .portada-datos > div, .portada-datos > div + div { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--linea); }
}

/* ---------- Manifiesto ---------- */
.manifiesto { padding-block: clamp(96px, 16vw, 200px); }
.manifiesto-texto {
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem); line-height: 1.18; letter-spacing: -.03em; font-weight: 700;
  max-width: 22em;
}
.js .manifiesto-texto .w { opacity: .16; transition: opacity .35s ease; }
.js .manifiesto-texto .w.on { opacity: 1; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(88px, 12vw, 160px); }
.cabeza-seccion { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }

/* ---------- Proyectos (banda oscura + carrusel) ---------- */
.banda { background: var(--banda); color: var(--banda-tinta); padding-block: clamp(80px, 9vw, 128px); border-block: 1px solid var(--banda-linea); }
.banda .kicker { color: var(--banda-acento); }
.banda .contador { color: var(--banda-tinta-2); }
.banda .contador b { color: var(--banda-tinta); }
.banda .btn-control { border-color: rgba(255, 255, 255, .22); color: var(--banda-tinta); }
@media (hover: hover) and (pointer: fine) { .banda .btn-control:not(:disabled):hover { background: rgba(255, 255, 255, .08); } }
.proyectos-cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.proyectos-lado p { color: var(--banda-tinta-2); max-width: 30em; margin-bottom: 20px; }
@media (max-width: 860px) { .proyectos-cabeza { grid-template-columns: 1fr; } }

.carrusel { position: relative; overflow: hidden; touch-action: pan-y; outline: none; cursor: grab; user-select: none; -webkit-user-select: none; perspective: 1600px; }
.carrusel.arrastrando { cursor: grabbing; }
.carrusel:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 4px; }
.pista { display: flex; gap: clamp(16px, 2.2vw, 28px); padding-inline: var(--carrusel-inicio, var(--margen)); will-change: transform; transform-style: preserve-3d; }
.no-js .carrusel, html:not(.js) .carrusel { overflow-x: auto; }

.tarjeta { flex: 0 0 auto; width: min(58vw, 800px); transform-style: preserve-3d; }
.tarjeta-enlace { display: block; -webkit-user-drag: none; }
.tarjeta-media {
  position: relative; border-radius: var(--radio-lg); background: var(--banda-superficie);
  border: 1px solid var(--banda-linea); padding: clamp(10px, 1.4vw, 18px);
  transform-origin: center; transition: border-color .3s ease;
}
.tarjeta-media .ventana { border-color: rgba(255, 255, 255, .08); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.tarjeta-telefono {
  position: absolute; right: 5%; bottom: -7%; width: 17%;
  transition: transform .5s var(--ease-out);
}
.tarjeta-logo { display: grid; place-items: center; aspect-ratio: 16 / 10.4; background: #f2f3f7; border-radius: var(--radio); }
.tarjeta-logo img { width: 38%; filter: drop-shadow(0 16px 30px rgba(20, 30, 70, .16)); }
.tarjeta-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 24px 4px 4px; }
.tarjeta-cat { font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--banda-tinta-2); }
.tarjeta-info h3 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 750; letter-spacing: -.03em; margin-top: 4px; }
.tarjeta-titulo { color: var(--banda-tinta-2); margin-top: 2px; }
.tarjeta-ver {
  align-self: center; font-size: .88rem; font-weight: 650; padding: 9px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2); white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-enlace:hover .tarjeta-media { border-color: rgba(255, 255, 255, .2); }
  .tarjeta-enlace:hover .tarjeta-telefono { transform: translateY(-10px); }
  .tarjeta-enlace:hover .tarjeta-ver { background: var(--banda-tinta); color: var(--banda); border-color: var(--banda-tinta); }
}
@media (max-width: 700px) {
  .tarjeta { width: 86vw; }
  .tarjeta-info { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 20px; }
  .tarjeta-ver { display: none; }
  .tarjeta-telefono { width: 22%; bottom: -10%; }
}

.progreso { position: relative; height: 2px; margin-top: clamp(40px, 5vw, 64px); background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.progreso span { position: absolute; inset: 0; background: var(--banda-tinta); transform-origin: left; transform: scaleX(0); }

/* ---------- Servicios ---------- */
.servicios { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.servicio { position: relative; padding-top: 22px; border-top: 1px solid var(--linea-2); }
.servicio::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--acento);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.servicio.visible::before { transform: scaleX(.18); transition-delay: calc(var(--i, 0) * 70ms + .3s); }
@media (hover: hover) and (pointer: fine) { .servicio:hover::before { transform: scaleX(1); transition-delay: 0s; } }
.servicio h3 { font-size: 1.28rem; font-weight: 720; margin: 4px 0 10px; }
.servicio p { color: var(--tinta-2); font-size: .98rem; }
@media (max-width: 980px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; } }
@media (max-width: 560px) { .servicios { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Proceso ---------- */
.proceso { background: var(--fondo-2); }
.proceso-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px 80px; }
.proceso-fijo { position: sticky; top: 120px; align-self: start; }
.proceso-numero { display: flex; align-items: baseline; gap: 10px; margin-top: 44px; font-variant-numeric: tabular-nums; }
.proceso-actual { display: inline-block; font-size: clamp(5rem, 3rem + 7vw, 9.5rem); font-weight: 780; letter-spacing: -.06em; line-height: .9; color: var(--tinta); }
.proceso-actual.cambia { animation: numero .45s var(--ease-out); }
@keyframes numero { from { opacity: 0; transform: translateY(24%); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.proceso-de { font-size: 1.1rem; font-weight: 650; color: var(--tinta-3); }
.proceso-barra { height: 2px; max-width: 320px; margin-top: 24px; background: var(--linea-2); border-radius: 2px; overflow: hidden; }
.proceso-barra span { display: block; height: 100%; background: var(--acento); transform-origin: left; transform: scaleX(.25); transition: transform .6s var(--ease-out); }
.proceso-pasos { list-style: none; }
.paso { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; border-bottom: 1px solid var(--linea); opacity: .3; transition: opacity .5s ease; }
.paso:last-child { border-bottom: 0; }
.paso.activo { opacity: 1; }
.paso-num { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.paso h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; margin: 10px 0 12px; }
.paso p { color: var(--tinta-2); max-width: 30em; font-size: 1.06rem; }
@media (max-width: 860px) {
  .proceso-grid { grid-template-columns: 1fr; }
  .proceso-fijo { position: static; }
  .proceso-numero, .proceso-barra { display: none; }
  .paso { min-height: 0; opacity: 1; padding: 28px 0; }
}

/* ---------- Sobre mí ---------- */
.sobre-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px 88px; align-items: center; }
.sobre-texto p { color: var(--tinta-2); margin-top: 18px; max-width: 34em; }
.sobre-texto .titulo-seccion + p { margin-top: 24px; }
.sobre-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.credencial-escena { perspective: 1400px; display: grid; place-items: center; }
.credencial {
  position: relative; width: min(100%, 360px); aspect-ratio: 5 / 7.8; transform-style: preserve-3d;
  cursor: pointer; border-radius: 22px; will-change: transform;
}
.credencial:focus-visible { outline-offset: 8px; border-radius: 22px; }
.cred-cara {
  position: absolute; inset: 0; border-radius: 22px; display: flex; flex-direction: column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  border: 1px solid var(--linea-2); box-shadow: var(--sombra-2);
}
.cred-frente { background: var(--superficie); }
.cred-dorso { background: var(--marino); color: #eef3fb; transform: rotateY(180deg); border-color: rgba(255, 255, 255, .12); padding: 30px 24px 22px; }
.js .cred-dorso, .credencial.ver-dorso .cred-frente { visibility: hidden; }
.credencial.ver-dorso .cred-dorso { visibility: visible; }
/* La foto ya trae el marino de la marca y la "A" de fondo; aquí solo se encuadra por abajo */
.cred-foto { position: relative; flex: none; aspect-ratio: 760 / 664; overflow: hidden; background: var(--marino); }
.cred-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; -webkit-user-drag: none; }
.cred-foto > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em; color: #fff; }
.cred-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 22px; }
.cred-datos b { display: block; font-size: 1.32rem; font-weight: 780; letter-spacing: -.03em; line-height: 1.15; }
.cred-datos span { display: block; color: var(--tinta-2); font-size: .86rem; margin-top: 3px; line-height: 1.35; }
.cred-datos .cred-empresa { margin-top: 2px; color: var(--acento); font-weight: 700; }
.cred-filas { margin-top: auto; display: grid; gap: 8px; }
.cred-filas > div { display: grid; gap: 1px; padding-top: 8px; border-top: 1px solid var(--linea); }
.cred-filas dt { font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.cred-filas dd { font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }
.cred-logo { width: 64%; height: auto; margin: 0 auto; -webkit-user-drag: none; }
.cred-dorso .cred-filas > div { border-color: rgba(255, 255, 255, .14); }
.cred-dorso .cred-filas dt { color: #8fa2c0; }
.cred-pista { margin-top: 12px; font-size: .72rem; color: var(--tinta-3); }
.cred-dorso .cred-pista { color: #8fa2c0; }

.herramientas { margin-top: clamp(72px, 10vw, 120px); }
.herramientas-titulo { font-size: 1.1rem; font-weight: 720; margin-bottom: 16px; }
.herramientas-lista { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.herramientas-lista li { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--linea); }
.herramientas-lista li span:first-child { font-weight: 650; }
.herramientas-lista li span:last-child { color: var(--tinta-3); font-size: .9rem; text-align: right; }
@media (max-width: 980px) { .herramientas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sobre-grid { grid-template-columns: 1fr; } .credencial { width: min(100%, 340px); } }
@media (max-width: 600px) { .herramientas-lista { grid-template-columns: 1fr; } }

/* ---------- Contacto ---------- */
.contacto { border-top: 1px solid var(--linea); }
.contacto-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 48px 64px; align-items: start; }
.contacto-intro p { color: var(--tinta-2); margin-top: 20px; max-width: 26em; }
.contacto-datos { margin-top: 36px; display: grid; gap: 14px; }
.contacto-datos > div { padding-top: 14px; border-top: 1px solid var(--linea); }
.contacto-datos dt { font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.contacto-datos dd { font-weight: 600; overflow-wrap: anywhere; }
.contacto-datos a { color: var(--acento); }
@media (hover: hover) and (pointer: fine) { .contacto-datos a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1100px) { .contacto-grid { grid-template-columns: 1fr; } }

.formulario { background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; box-shadow: var(--sombra-1); overflow: hidden; }
.asistente-cabeza { padding: 22px clamp(18px, 3vw, 32px) 0; }
.indicador { list-style: none; display: flex; gap: 22px; font-size: .88rem; font-weight: 600; color: var(--tinta-3); }
.indicador li { display: flex; align-items: center; gap: 8px; transition: color .25s ease; }
.indicador li span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--linea-2); font-size: .75rem; font-variant-numeric: tabular-nums;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.indicador li.activo { color: var(--tinta); }
.indicador li.activo span { border-color: var(--tinta); }
.indicador li.hecho span { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.asistente-avance { height: 2px; background: var(--linea); margin-top: 18px; border-radius: 2px; overflow: hidden; }
.asistente-avance span { display: block; height: 100%; background: var(--acento); transform-origin: left; transform: scaleX(.3333); transition: transform .5s var(--ease-out); }

.asistente-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 240px; }
/* Los campos se acomodan al ancho del formulario, no al de la pantalla: en escritorio el resumen le quita espacio. */
.pasos-form { display: grid; padding: 28px clamp(18px, 3vw, 32px) 28px; min-width: 0; container-type: inline-size; }
.paso-form {
  grid-area: 1 / 1; border: 0; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(28px);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;
}
.paso-form.antes { transform: translateX(-28px); }
.paso-form.activo { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out) .06s, transform .5s var(--ease-out), visibility 0s; }
.paso-form legend { font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; margin-bottom: 18px; }

.opciones--tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcion { position: relative; display: block; }
.opcion input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-caja {
  display: block; height: 100%; padding: 14px 16px; border-radius: var(--radio); border: 1px solid var(--linea-2);
  background: var(--superficie); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform 160ms var(--ease-out);
}
.opcion-caja b { display: block; font-weight: 680; font-size: .98rem; }
.opcion-caja small { display: block; color: var(--tinta-3); font-size: .85rem; margin-top: 2px; }
.opcion:active .opcion-caja { transform: scale(.98); }
.opcion input:checked + .opcion-caja { border-color: var(--acento); background: var(--acento-tinte); box-shadow: 0 0 0 1px var(--acento) inset; }
.opcion input:focus-visible + .opcion-caja { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .opcion:hover .opcion-caja { border-color: var(--tinta-3); } }
.opciones--tarjetas .opcion:last-child:nth-child(odd) { grid-column: 1 / -1; }

.grupo { margin-bottom: 20px; }
.grupo-titulo { font-size: .9rem; font-weight: 650; margin-bottom: 10px; }
.grupo-titulo span { font-weight: 500; color: var(--tinta-3); }
.campo label span { font-size: .88em; }
.opciones--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--linea-2); font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform 160ms var(--ease-out);
}
.chip:active span { transform: scale(.96); }
.chip input:checked + span { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip:hover input:not(:checked) + span { border-color: var(--tinta-3); } }

.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 14px; }
@container (min-width: 500px) { .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { position: relative; }
.campo input, .campo textarea {
  width: 100%; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--superficie);
  padding: 24px 14px 8px; font-size: 1rem; line-height: 1.4; outline: none; resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo input { height: 58px; }
.campo textarea { min-height: 128px; padding-top: 28px; }
.campo label {
  position: absolute; left: 15px; top: 18px; font-size: 1rem; color: var(--tinta-3); pointer-events: none;
  max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: left top; transition: transform .2s var(--ease-out), color .2s ease;
}
.campo input:focus, .campo textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tinte); }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.78); }
.campo input:focus + label, .campo textarea:focus + label { color: var(--acento); }
/* El mensaje va en una caja con franja superior propia: al desplazarse, el texto pasa por debajo
   de la etiqueta y del contador, no encima de ellos. */
.area-caja {
  position: relative; padding-top: 28px; border: 1px solid var(--linea-2); border-radius: var(--radio);
  background: var(--superficie); transition: border-color .2s ease, box-shadow .2s ease;
}
.campo .area-caja textarea, .campo .area-caja textarea:focus {
  display: block; min-height: 100px; padding: 0 14px 10px; border: 0; border-radius: 0 0 var(--radio) var(--radio);
  background: transparent; box-shadow: none;
}
.area-caja label { left: 14px; top: 17px; }
.area-caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tinte); }
.con-error .area-caja { border-color: var(--error); }
.con-error .area-caja:focus-within { box-shadow: 0 0 0 3px rgba(196, 53, 43, .15); }
.contador-campo { position: absolute; right: 12px; top: 10px; font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.error { font-size: .82rem; color: var(--error); min-height: 0; margin-top: 6px; }
.error:empty { display: none; }
.con-error input, .con-error textarea { border-color: var(--error); }
.con-error input:focus, .con-error textarea:focus { box-shadow: 0 0 0 3px rgba(196, 53, 43, .15); }
.sacude { animation: sacude .4s var(--ease-out); }
@keyframes sacude { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.resumen { border-left: 1px solid var(--linea); background: var(--superficie-2); padding: 28px 22px; }
.resumen-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 14px; }
.resumen dl { display: grid; gap: 12px; }
.resumen dt { font-size: .78rem; color: var(--tinta-3); }
.resumen dd { font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; transition: color .2s ease; }
.resumen dd.vacio { color: var(--tinta-3); font-weight: 500; }
.resumen dd.recien { animation: recien .5s var(--ease-out); }
@keyframes recien { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.resumen-nota { margin-top: 20px; font-size: .78rem; color: var(--tinta-3); }

.form-alerta { margin: 0 clamp(18px, 3vw, 32px); font-size: .9rem; border-radius: var(--radio-sm); }
.form-alerta:empty { display: none; }
.form-alerta.mal { padding: 12px 14px; margin-block: 0 16px; background: rgba(196, 53, 43, .08); color: var(--error); }
.asistente-pie {
  display: flex; align-items: center; gap: 12px; padding: 18px clamp(18px, 3vw, 32px) 22px;
  border-top: 1px solid var(--linea);
}
.asistente-nota { margin-right: auto; font-size: .85rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
[data-anterior]:not([hidden]) + .asistente-nota { margin-left: 4px; }
.btn .girando { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: gira .6s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.enviado { padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 44px); animation: entrar .6s var(--ease-out) both; outline: none; }
.enviado h3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 780; letter-spacing: -.035em; }
.enviado p:not(.kicker) { color: var(--tinta-2); margin: 12px 0 28px; max-width: 30em; }

@media (max-width: 760px) {
  .asistente-cuerpo { grid-template-columns: 1fr; }
  .resumen { border-left: 0; border-top: 1px solid var(--linea); padding: 18px clamp(18px, 3vw, 32px); }
  .resumen dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen-nota { display: none; }
}
@media (max-width: 520px) {
  .opciones--tarjetas { grid-template-columns: 1fr; }
  .indicador { gap: 14px; font-size: .8rem; }
  .asistente-nota { display: none; }
  .asistente-pie .btn { flex: 1; }
}

/* ---------- Pie ---------- */
.pie { background: var(--banda); color: var(--banda-tinta); padding-top: clamp(72px, 10vw, 120px); }
.pie-logo { width: clamp(150px, 16vw, 190px); height: auto; margin-bottom: clamp(36px, 5vw, 56px); }
.pie-pregunta { color: var(--banda-tinta-2); font-size: 1.05rem; }
.pie-correo {
  display: inline-block; margin-top: 10px; font-size: clamp(1.2rem, .4rem + 4.4vw, 3.6rem); font-weight: 760;
  letter-spacing: -.04em; line-height: 1.1; overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pie-correo:hover { background-size: 100% 2px; } }
.pie-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(56px, 8vw, 96px); padding-top: 32px; border-top: 1px solid var(--banda-linea); }
.pie-cols h2 { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--banda-tinta-2); margin-bottom: 14px; }
.pie-cols a, .pie-cols p { display: block; padding: 4px 0; color: var(--banda-tinta); font-size: .95rem; }
.pie-cols a { width: fit-content; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .pie-cols a:hover { color: var(--banda-acento); } }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid var(--banda-linea); font-size: .82rem; color: var(--banda-tinta-2); }
@media (max-width: 640px) { .pie-cols { grid-template-columns: 1fr 1fr; } .pie-cols > div:last-child { grid-column: 1 / -1; } }

/* ============================================================
   Página de proyecto
   ============================================================ */
.caso-cabeza { padding-top: clamp(112px, 14vw, 160px); }
.migas { display: flex; gap: 10px; font-size: .88rem; color: var(--tinta-3); margin-bottom: 30px; }
.migas a { color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .migas a:hover { color: var(--acento); } }
.caso-titulo { font-size: clamp(2.8rem, 1.4rem + 6vw, 6.4rem); font-weight: 790; letter-spacing: -.05em; line-height: .96; }
.caso-sub { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 650; letter-spacing: -.02em; color: var(--tinta-2); margin-top: 14px; }
.caso-resumen { font-size: 1.12rem; color: var(--tinta-2); max-width: 40em; margin-top: 22px; }
.caso-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.caso-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 52px; border-top: 1px solid var(--linea); }
.caso-meta > div { padding: 16px 18px 0 0; }
.caso-meta > div + div { padding-left: 18px; border-left: 1px solid var(--linea); }
.caso-meta dt { font-size: .76rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.caso-meta dd { font-weight: 650; margin-top: 2px; }
@media (max-width: 760px) {
  .caso-meta { grid-template-columns: 1fr 1fr; }
  .caso-meta > div, .caso-meta > div + div { padding: 14px 12px 14px 0; border-left: 0; border-bottom: 1px solid var(--linea); }
}

.galeria { padding-top: clamp(56px, 8vw, 96px); }
.carrusel--galeria .pista { align-items: flex-start; }
.galeria-diapo { flex: 0 0 auto; width: min(88vw, 1100px); transform-style: preserve-3d; }
.ventana--boton { display: block; width: 100%; padding: 0; text-align: inherit; cursor: zoom-in; }
.ventana--boton .ventana-barra { height: 30px; }
.galeria-diapo figcaption { padding: 18px 4px 0; font-size: .98rem; color: var(--tinta-2); }
.carrusel.arrastrando .ventana--boton { cursor: grabbing; }
.galeria-pie { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.miniaturas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-left: auto; padding: 4px; max-width: 62%; }
.miniaturas::-webkit-scrollbar { display: none; }
.miniatura {
  flex: 0 0 auto; width: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--linea-2); opacity: .5;
  transition: opacity .25s ease, border-color .25s ease, transform 160ms var(--ease-out);
}
.miniatura img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.miniatura:active { transform: scale(.95); }
.miniatura.activa { opacity: 1; border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
@media (hover: hover) and (pointer: fine) { .miniatura:hover { opacity: .85; } }
@media (max-width: 760px) {
  .galeria-pie { flex-direction: column; align-items: stretch; gap: 16px; }
  .miniaturas { max-width: none; margin-left: 0; }
  .galeria-diapo { width: 90vw; }
}

.caso-logo { display: grid; justify-items: center; gap: 22px; padding-top: clamp(56px, 8vw, 96px); text-align: center; }
.caso-logo img { width: min(60vw, 300px); border-radius: 22%; }
.caso-logo p { color: var(--tinta-2); }

.caso-historia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; padding-block: clamp(80px, 11vw, 140px); }
.caso-bloque h2 { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-bottom: 14px; }
.caso-bloque p { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.45; letter-spacing: -.015em; font-weight: 550; }
@media (max-width: 760px) { .caso-historia { grid-template-columns: 1fr; } }

.caso-puntos { padding-bottom: clamp(80px, 11vw, 140px); }
.caso-puntos ol { list-style: none; margin-top: 36px; }
.caso-puntos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 22px 0; border-top: 1px solid var(--linea); }
.caso-puntos li::before { content: ""; width: 18px; height: 2px; margin-top: .78em; border-radius: 2px; background: var(--acento); }
.caso-puntos li p { font-size: 1.12rem; font-weight: 550; letter-spacing: -.01em; max-width: 44em; }

.caso-movil { background: var(--fondo-2); padding-block: clamp(80px, 11vw, 140px); overflow: hidden; }
.caso-movil-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.caso-movil-texto p:not(.kicker) { color: var(--tinta-2); margin-top: 18px; max-width: 26em; }
.telefonos { display: flex; justify-content: center; gap: clamp(16px, 3vw, 36px); perspective: 1400px; }
.telefono-fig { width: min(40%, 250px); margin: 0; }
.telefono-fig:nth-child(2) { margin-top: 48px; }
.telefono-fig figcaption { text-align: center; font-size: .85rem; color: var(--tinta-3); margin-top: 14px; }

@media (max-width: 760px) { .caso-movil-in { grid-template-columns: 1fr; } .telefono-fig { width: min(46%, 220px); } }

.caso-stack { padding-block: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 24px; align-items: start; }
.caso-stack h2 { font-size: 1.1rem; font-weight: 720; }
.caso-stack ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.caso-stack li { padding: 8px 14px; border: 1px solid var(--linea-2); border-radius: 10px; font-size: .92rem; font-weight: 600; }
@media (max-width: 640px) { .caso-stack { grid-template-columns: 1fr; } }

.siguiente { display: block; background: var(--banda); color: var(--banda-tinta); padding-block: clamp(72px, 10vw, 128px); }
.siguiente-in { display: block; }
.siguiente .kicker { color: var(--banda-acento); }
.siguiente-nombre {
  display: block; font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); font-weight: 790; letter-spacing: -.05em; line-height: 1;
  transition: transform .6s var(--ease-out);
}
.siguiente-titulo { display: block; color: var(--banda-tinta-2); margin-top: 12px; font-size: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .siguiente:hover .siguiente-nombre { transform: translateX(14px); } }

/* Visor de capturas */
.visor { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.visor-fondo { position: absolute; inset: 0; background: rgba(1, 12, 30, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.visor-caja {
  position: relative; width: min(100%, 1500px); color: #f2f0ec; display: grid; gap: 14px;
  opacity: 0; transform: scale(.96); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.visor.abierto .visor-fondo { opacity: 1; }
.visor.abierto .visor-caja { opacity: 1; transform: none; }
.visor-arriba, .visor-abajo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.visor img { width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: var(--radio); background: #111; }
.visor .btn-control { color: #f2f0ec; border-color: rgba(255, 255, 255, .25); }
.visor .contador, .visor .contador b { color: #f2f0ec; }
.visor-abajo p { font-size: .95rem; color: #c9c5be; }
.visor-nav { display: flex; gap: 8px; flex: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .entra, .portada-titulo .p > span, .escena, .enviado { animation-duration: .01s !important; animation-delay: 0s !important; }
  .js [data-revela] { transform: none; transition: opacity .3s ease; }
  .mundo { transform: rotateX(8deg) !important; }
  .paso-form, .paso-form.antes { transform: none; }
  .proceso-actual.cambia { animation: none; }
  .hoja-menu { clip-path: none; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .menu-abierto .hoja-menu { opacity: 1; transition: opacity .2s ease, visibility 0s; }
  .hoja-menu nav a, .hoja-pie, .hoja-menu nav a::after { transform: none; }
  .menu-abierto .hoja-menu nav a, .menu-abierto .hoja-pie { transition: opacity .2s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .barra { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Verificación de Cloudflare (solo en el sitio estático) ---------- */
.verificacion { margin-top: 16px; }

/* ---------- Página no encontrada ---------- */
.no-encontrada { min-height: 70vh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 80px; }
.no-encontrada p:not(.kicker) { color: var(--tinta-2); max-width: 32em; margin-top: 18px; }
.no-encontrada .portada-acciones { margin-top: 28px; }