@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;600&display=swap');

/* ═══════════════════════════════════════════════════
   TOKENS — Manual de marca oficial
   Azul #126493 | Gris #59595B | Blanco #FFFFFF
═══════════════════════════════════════════════════ */
:root {

  /* ── Escala tipografica ───────────────────────────────────────────────
     SEIS tamanos. Ni uno mas.

     Antes habia 31 valores distintos repartidos entre las dos hojas, con
     ocho apinados entre .82rem y 1rem. Una diferencia de 0,5 px no se lee
     como jerarquia: se lee como que nadie decidio. Referencia medida: los
     sitios que se ven resueltos usan seis o menos.

     Para cambiar la tipografia de las 66 paginas, tocar aqui.            */
  --t1: clamp(2.1rem, 5.2vw, 3.75rem);  /* 60 px · titular de portada    */
  --t2: clamp(1.5rem, 3vw, 1.875rem);   /* 30 px · titulo de seccion     */
  --t3: 1.25rem;                        /* 20 px · titulo de tarjeta     */
  --t4: 1rem;                           /* 16 px · cuerpo                */
  --t5: .875rem;                        /* 14 px · secundario            */
  --t6: .6875rem;                       /* 11 px · etiquetas y epigrafes */

  --azul:       #126493;
  --azul-osc:   #0E4F75;
  --azul-prof:  #0A3A57;
  --azul-noche: #061F30;
  --azul-cl:    #E8F3FA;
  --azul-mid:   #1A8AC4;
  /* Variante del azul medio para TEXTO. El #1A8AC4 se queda en 3.83:1 sobre
     blanco y no llega al 4.5:1 de la WCAG AA. Este da 5.95:1 y sigue siendo
     mas claro que el azul institucional, asi que la jerarquia de color no se
     mueve. Usar SOLO en texto; para degradados, puntos, lineas, fondos y
     anillos de foco hay que seguir usando --azul-mid. */
  --azul-mid-txt: #136A96;
  /* Azul claro para TEXTO SOBRE FONDO OSCURO (pie de pagina, tarjetas .cc).
     Ahi el problema se invierte: #1A8AC4 da 3.80:1 y oscurecerlo lo empeora
     (#136A96 = 2.42:1). Este da 5.11:1 sobre la tarjeta del pie. */
  --azul-claro-txt: #6FC3E8;
  --gris:       #59595B;
  --gris-osc:   #1A1A1B;
  --gris-med:   #6E6E70;
  --gris-f:     #F5F7F9;
  --blanco:     #FFFFFF;
  --linea:      rgba(18,100,147,.12);

  --fh: 'Montserrat', system-ui, sans-serif;
  --fb: 'Open Sans', system-ui, sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --sh1: 0 1px 4px rgba(6,31,48,.07);
  --sh2: 0 4px 20px rgba(6,31,48,.10);
  --sh3: 0 12px 48px rgba(6,31,48,.14);
  --sh4: 0 24px 72px rgba(6,31,48,.18);

  /* — Relieve de tarjetas ——————————————————————————
     Las tarjetas (.card, .pc, .eq) tenian box-shadow:none en reposo — solo
     ganaban sombra al pasar el raton. Sobre fondo blanco eso las deja planas:
     el borde de 1px es lo unico que las separa del fondo, y a simple vista
     casi no se nota.

     Esto anade relieve real, siguiendo el mismo principio que un objeto fisico
     bajo luz cenital: una linea de luz en el borde superior (donde pega la
     luz), una sombra tenue en el inferior (donde la tarjeta se aleja del
     fondo), y dos sombras proyectadas -una corta y marcada, otra larga y
     difusa- que dan la profundidad. El color de las sombras es el mismo azul
     noche del sitio (--azul-noche / #061F30 en rgba), no un gris generico.  */
  --relieve:       0 1px 0 0 rgba(255,255,255,.9) inset,
                    0 -1px 0 0 rgba(6,31,48,.05) inset,
                    0 1px 2px -1px rgba(6,31,48,.09),
                    0 12px 26px -14px rgba(6,31,48,.18);
  --relieve-hover:  0 1px 0 0 rgba(255,255,255,.9) inset,
                    0 -1px 0 0 rgba(6,31,48,.05) inset,
                    0 4px 10px -4px rgba(6,31,48,.13),
                    0 28px 52px -22px rgba(6,31,48,.26),
                    0 0 0 1px rgba(18,100,147,.16);
}

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:var(--t4); scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--fb);
  color: var(--gris);
  background: var(--blanco);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img { max-width:100%; height:auto; display:block }
a { color:var(--azul); text-decoration:none; transition:color .18s var(--ease) }
a:hover { color:var(--azul-osc) }
strong { font-weight:700; color:var(--gris-osc) }
p { margin-bottom:1rem; font-size:var(--t4)}
ul,ol { margin:0 0 1rem 1.25rem }
li { margin-bottom:.4rem }

/* ── TIPOGRAFÍA ────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family:var(--fh); line-height:1.15; font-weight:700 }
h1 { font-size:var(--t1); letter-spacing:-.025em }
h2 { font-size:var(--t2); letter-spacing:-.015em; color:var(--gris-osc) }
h3 { font-size:var(--t3); color:var(--azul-prof) }
h4 { font-size:var(--t4); font-weight:600; color:var(--azul-prof) }

/* ── LAYOUT ─────────────────────────────────────────── */
.wrap    { max-width:1080px; margin:0 auto; padding:0 32px }
.wrap-sm { max-width:760px;  margin:0 auto; padding:0 32px }

/* ── ANIMACIONES ────────────────────────────────────── */
@keyframes up    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes line  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes grid  { from{background-position:0 0} to{background-position:56px 56px} }
@keyframes dots  { 0%{transform:translateY(0)} 100%{transform:translateY(-14px)} }
@keyframes scan  { 0%{top:8%;opacity:0} 10%{opacity:.3} 90%{opacity:.3} 100%{top:92%;opacity:0} }
@keyframes wap   { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.5)} 50%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 14px rgba(37,211,102,.08)} }
@keyframes blink { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:.8;transform:scaleY(1.5)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Scroll reveal */
.rv { opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s} .rv.d4{transition-delay:.32s}
.rv.d5{transition-delay:.40s}
.rv.on { opacity:1; transform:none }

/* ── HEADER ─────────────────────────────────────────── */
.site-header {
  position: sticky; top:0; z-index:1000;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  box-shadow: var(--sh1);
  transition: box-shadow .3s var(--ease);
}
.site-header.up { box-shadow: var(--sh2) }
.hdr {
  max-width:1080px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; height:68px; gap:32px;
}
.hdr-logo { flex-shrink:0 }
.hdr-logo img { height:44px; width:auto }
.hdr-logo a { display:block }

/* Nav */
.hdr-nav { flex:1 }
.nav-list {
  list-style:none; display:flex; align-items:center; gap:2px;
}
.nav-list > li { position:relative }
.nav-list > li > a {
  display:block; padding:8px 14px;
  font-family:var(--fh); font-weight:600; font-size:var(--t5);
  color:var(--gris-osc); letter-spacing:.02em;
  border-radius:6px;
  transition:all .18s var(--ease);
  position:relative;
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a { color:var(--azul); background:var(--azul-cl) }

/* Dropdown */
.nav-list .sub-menu {
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:210px;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:10px;
  box-shadow:var(--sh3);
  list-style:none; padding:6px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:all .22s var(--ease);
  z-index:200;
}
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu,
.nav-list .sub-menu li:hover > .sub-menu,
.nav-list .sub-menu li:focus-within > .sub-menu {
  opacity:1; visibility:visible; transform:none;
}
.nav-list .sub-menu a {
  display:block; padding:9px 12px;
  font-size:var(--t5); color:var(--gris-osc);
  border-radius:6px;
  transition:all .15s var(--ease);
}
.nav-list .sub-menu a:hover { color:var(--azul); background:var(--azul-cl); padding-left:16px }
.nav-list .sub-menu .sub-menu { top:0; left:100%; margin-top:-6px }
/* El boton de acordeon (.submenu-toggle) es solo para mobile; en desktop el
   hover ya abre los submenus, asi que se oculta por defecto. */
.submenu-toggle { display:none }

/* CTA header */
.hdr-cta { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.hdr-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--azul); color:var(--blanco);
  padding:9px 16px; border-radius:8px;
  font-family:var(--fh); font-weight:700; font-size:var(--t5);
  box-shadow:0 2px 10px rgba(18,100,147,.3);
  transition:all .2s var(--ease); white-space:nowrap;
}
.hdr-wa:hover { background:var(--azul-osc); color:var(--blanco); transform:translateY(-1px); box-shadow:0 4px 16px rgba(18,100,147,.4) }

/* Hamburguesa */
.hdr-toggle {
  display:none; background:none; border:1px solid var(--linea);
  width:40px; height:40px; border-radius:8px;
  cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  transition:all .18s var(--ease);
}
.hdr-toggle:hover { background:var(--azul-cl); border-color:var(--azul) }
.hdr-toggle span {
  display:block; width:18px; height:1.5px;
  background:var(--gris-osc); border-radius:2px;
  transition:all .22s var(--ease); transform-origin:center;
}
.hdr-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hdr-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hdr-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.skip-link {
  position:absolute; top:-60px; left:16px; z-index:9999;
  background:var(--azul); color:var(--blanco);
  padding:8px 16px; border-radius:8px; font-family:var(--fh); font-weight:700;
  transition:top .2s; font-size:var(--t5);
}
.skip-link:focus { top:8px }

/* ── HERO ───────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  background:var(--azul-noche);
  min-height:92vh; display:flex; align-items:center;
  padding:96px 32px 80px;
}

/* Grid de coordenadas */
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(18,100,147,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,100,147,.07) 1px,transparent 1px);
  background-size:60px 60px;
  animation:grid 36s linear infinite;
}

/* Luz atmosférica */
.hero-light {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 65% 55% at 72% 42%, rgba(18,100,147,.32) 0%,transparent 65%),
    radial-gradient(ellipse 35% 35% at 15% 75%, rgba(26,138,196,.14) 0%,transparent 60%),
    linear-gradient(155deg, var(--azul-noche) 0%, var(--azul-prof) 50%, var(--azul-noche) 100%);
}

/* Puntos GNSS flotantes */
.hero-dots {
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.hero-dots::before {
  content:''; position:absolute;
  width:4px; height:4px; background:var(--azul-mid); border-radius:50%;
  box-shadow:
    110px 70px 0 rgba(26,138,196,.7),  260px 180px 0 rgba(18,100,147,.5),
    420px 110px 0 rgba(26,138,196,.6), 580px 280px 0 rgba(18,100,147,.4),
    740px 160px 0 rgba(26,138,196,.7), 880px 75px  0 rgba(18,100,147,.5),
    1000px 200px 0 rgba(26,138,196,.4),150px 330px 0 rgba(18,100,147,.6),
    320px 400px 0 rgba(26,138,196,.5), 500px 360px 0 rgba(18,100,147,.4),
    680px 420px 0 rgba(26,138,196,.6), 840px 340px 0 rgba(18,100,147,.5),
    1100px 300px 0 rgba(26,138,196,.3),60px 460px  0 rgba(18,100,147,.4);
  animation:dots 9s ease-in-out infinite alternate;
}

/* Línea de escáner */
.hero-scan {
  position:absolute; z-index:2; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--azul-mid) 25%,rgba(26,138,196,.9) 50%,var(--azul-mid) 75%,transparent);
  animation:scan 7s ease-in-out infinite; opacity:.3;
}

/* Borde inferior luminoso */
.hero-line {
  position:absolute; bottom:0; left:0; right:0; z-index:3; height:1px;
  background:linear-gradient(90deg,transparent,var(--azul) 25%,var(--azul-mid) 50%,var(--azul) 75%,transparent);
}

/* Coordenadas decorativas
   EXCEPCION DE CONTRASTE DELIBERADA (decidida el 2026-08-08).
   Blanco al 13% da 1.47:1, por debajo del 4.5:1 de la WCAG AA. Para cumplir
   habria que subirlo a ~.5, casi cuatro veces mas visible, y eso rompe el aire
   del hero. Es un detalle ambiental, no informacion que el usuario necesite:
   se deja como esta a proposito. NO lo "arregles" en una auditoria futura. */
.hero-geo {
  position:absolute; right:32px; bottom:24px; z-index:3;
  font-family:var(--fh); font-size:var(--t6); font-weight:600;
  color:rgba(255,255,255,.13); letter-spacing:.14em; pointer-events:none;
}

.hero-inner { position:relative; z-index:4; max-width:1080px; margin:0 auto; width:100% }

/* Textos hero */
.hero h1 { color:var(--blanco); margin-bottom:20px; max-width:720px }
.hero h1 em { font-style:italic; color:rgba(255,255,255,.6); font-weight:400 }
.hero-bar {
  display:block; width:52px; height:2px;
  background:linear-gradient(90deg,var(--azul-mid),var(--azul));
  margin-bottom:24px; transform-origin:left;
  animation:line .7s .9s var(--ease) both;
}
.hero-lead {
  font-size:var(--t4); font-weight:300; line-height:1.85;
  color:rgba(255,255,255,.6); max-width:500px; margin-bottom:40px;
}
.hero-scroll {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px;
}
/* EXCEPCION DE CONTRASTE DELIBERADA (misma decision que .hero-geo).
   Blanco al 20% da 1.88:1. Es el "Explorar" del indicador de scroll, que va
   acompanado de la linea vertical animada: el gesto se entiende sin leer la
   palabra. Se deja tenue a proposito para no cargar el hero. */
.hero-scroll span {
  font-family:var(--fh); font-size:var(--t6); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.2);
}
.hero-scroll-line {
  width:1px; height:36px;
  background:linear-gradient(var(--azul-mid),transparent);
  animation:blink 2.2s ease-in-out infinite;
}

/* Hero animaciones orquestadas */
.hero .eyebrow { animation:up .6s .1s var(--ease) both }
.hero .w1 { display:inline-block; animation:up .7s .28s var(--ease) both }
.hero .w2 { display:inline-block; animation:up .7s .42s var(--ease) both }
.hero .w3 { display:inline-block; animation:up .7s .56s var(--ease) both }
.hero .w4 { display:inline-block; animation:up .7s .70s var(--ease) both }
.hero .hero-lead  { animation:up .7s .92s var(--ease) both }
.hero .btn-row    { animation:up .7s 1.08s var(--ease) both }
.hero-scroll      { animation:up .7s 1.3s var(--ease) both }

/* ── EYEBROW ─────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--azul-mid-txt);
  margin-bottom:14px;
}
.eyebrow::before { content:''; width:20px; height:1.5px; background:var(--azul-mid); flex-shrink:0 }
.dark .eyebrow, .night .eyebrow, .hero .eyebrow, .cta .eyebrow { color:rgba(255,255,255,.75) }
.dark .eyebrow::before, .night .eyebrow::before, .hero .eyebrow::before, .cta .eyebrow::before { background:rgba(255,255,255,.4) }

/* Numero de seccion en el eyebrow — solo en la portada, solo donde hay una
   secuencia real de secciones que recorrer (no en el eyebrow del hero, que
   es un tagline de ubicacion, no un paso de la secuencia). Monoespaciada de
   sistema a proposito: no vale la pena cargar una fuente nueva por dos
   digitos, y ui-monospace ya viene en cualquier navegador. */
/* El numero va en color propio, NO en opacity. Con opacity heredaba el azul
   de la etiqueta y al 55% daba 2.36:1 — ilegible. Y subirlo a 0.9 para pasar
   el 4.5:1 lo dejaba practicamente igual de oscuro que la etiqueta, o sea que
   perdia el sentido de ser un dato secundario.
   Con un gris neutro se resuelven las dos cosas a la vez: contrasta de sobra
   (4.74:1 sobre el fondo alterno, 5.09:1 sobre blanco) y se lee como
   secundario por el cambio de tono, no por estar desvaido. */
.eyebrow .n {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-weight: 500; letter-spacing: .03em; margin-left: 2px;
  color: var(--gris-med);
}
.eyebrow .n::before { content: '\00b7\0020' }
/* Sobre fondo oscuro el gris no llega (3.31:1): ahi va blanco al 60%, que da
   6.75:1 y mantiene la misma jerarquia visual. */
.dark .eyebrow .n, .night .eyebrow .n, .hero .eyebrow .n, .cta .eyebrow .n { color: rgba(255,255,255,.6) }

/* Rule */
.rule {
  display:block; width:38px; height:2px;
  background:linear-gradient(90deg,var(--azul),var(--azul-mid));
  border-radius:1px; margin-top:14px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s .2s var(--ease);
}
.rule.c { margin:14px auto 0 }
.rule.on { transform:scaleX(1) }

/* ── BOTONES ─────────────────────────────────────────── */
.btn-row { display:flex; flex-wrap:wrap; gap:12px }
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fh); font-weight:700; font-size:var(--t5);
  padding:13px 26px; border-radius:8px;
  border:2px solid transparent; cursor:pointer;
  min-height:48px; letter-spacing:.01em; white-space:nowrap;
  transition:all .22s var(--ease); text-decoration:none!important;
}
.btn:hover { transform:translateY(-2px) }
.btn:active { transform:none }
.btn:focus-visible { outline:3px solid var(--azul-mid); outline-offset:3px }

.btn-p { background:var(--azul); color:var(--blanco); border-color:var(--azul); box-shadow:0 4px 14px rgba(18,100,147,.3) }
.btn-p:hover { background:var(--azul-osc); border-color:var(--azul-osc); color:var(--blanco); box-shadow:0 8px 24px rgba(18,100,147,.4) }
.btn-wa { background:#25D366; color:#08301A; border-color:#25D366; box-shadow:0 4px 14px rgba(37,211,102,.28) }
.btn-wa:hover { background:#1db954; border-color:#1db954; color:var(--blanco) }
.btn-gh { background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.35) }
.btn-gh:hover { background:rgba(255,255,255,.09); color:var(--blanco); border-color:rgba(255,255,255,.7) }
.btn-ol { background:transparent; color:var(--azul); border-color:var(--linea) }
.btn-ol:hover { border-color:var(--azul); background:var(--azul-cl) }

/* ── SECCIONES ───────────────────────────────────────── */
.sec   { padding:88px 32px }
.alt   { padding:88px 32px; background:var(--gris-f) }
.dark  { padding:88px 32px; background:var(--azul-prof) }
.night { padding:88px 32px; background:var(--azul-noche) }
.dark h2,.night h2 { color:var(--blanco) }
.dark p,.night p { color:rgba(255,255,255,.65) }
.sh { margin-bottom:56px }
.sh.c { text-align:center }
.sh.c .rule { margin:14px auto 0 }

/* ── CARDS ───────────────────────────────────────────── */
.g3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px }
.g2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px }

.card {
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:32px 28px;
  position:relative; overflow:hidden;
  box-shadow:var(--relieve);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
/* Línea superior animada */
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--azul),var(--azul-mid));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
/* Brillo de hover */
.card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 38%,rgba(26,138,196,.05) 50%,transparent 62%);
  transform:translateX(-100%); transition:transform .5s var(--ease);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--relieve-hover); border-color:rgba(18,100,147,.2) }
.card:hover::before { transform:scaleX(1) }
.card:hover::after  { transform:translateX(100%) }

.card-ico {
  width:48px; height:48px; background:var(--azul-cl);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:var(--t3); margin-bottom:18px;
  transition:transform .25s var(--spring);
}
.card:hover .card-ico { transform:scale(1.12) rotate(-5deg) }

/* Las estrellas de una reseña. Antes reutilizaban .card-ico, que es una caja
   FIJA de 48x48 para un solo emoji: cinco estrellas piden 66 px y en el
   telefono se recortaban, de modo que la seccion de opiniones —la que existe
   para dar confianza— enseñaba menos de cinco estrellas. Esta caja se ajusta
   a lo que lleve dentro, asi que sirve igual para tres que para cinco. */
.card-estrellas {
  display:inline-flex; align-items:center; gap:1px;
  min-height:48px; padding:0 14px; background:var(--azul-cl);
  border-radius:10px; font-size:var(--t3); line-height:1;
  margin-bottom:18px; transition:transform .25s var(--spring);
}
.card:hover .card-estrellas { transform:scale(1.06) rotate(-2deg) }
.card h4 { margin-bottom:8px }
.card p  { font-size:var(--t5); color:var(--gris); margin-bottom:16px; line-height:1.65 }
/* min-height de 44px: medido en movil daba 25px de alto, por debajo del
   minimo tactil. Se agranda el area sin mover el texto — el padding vertical
   iria empujando la maqueta de la tarjeta, asi que se usa min-height mas
   align-items, que crece el objetivo hacia abajo sin desplazar nada. */
.card-lnk {
  font-size:var(--t5); font-weight:700; color:var(--azul);
  display:inline-flex; align-items:center; gap:6px; font-family:var(--fh);
  min-height:44px;
  transition:gap .16s var(--ease),color .16s var(--ease);
}
.card-lnk:hover { gap:12px; color:var(--azul-osc) }

/* ── ESCENARIOS ──────────────────────────────────────── */
.esc-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:40px }
.esc {
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:28px;
  position:relative; overflow:hidden;
  transition:all .25s var(--ease);
}
.esc::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--azul),var(--azul-mid));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .28s var(--ease);
}
.esc:hover { transform:translateY(-4px); box-shadow:var(--sh2) }
.esc:hover::before { transform:scaleY(1) }
.esc-tag {
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-mid-txt); margin-bottom:10px;
}
.esc h4 { font-size:var(--t4); margin-bottom:8px; color:var(--gris-osc) }
.esc p  { font-size:var(--t5); margin-bottom:10px }
.esc-srv { font-family:var(--fh); font-size:var(--t6); font-weight:600; color:var(--gris-med) }

/* ── STATS ───────────────────────────────────────────── */
.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px; background:rgba(255,255,255,.07);
  border-radius:14px; overflow:hidden; margin-top:64px;
}
.stat { background:rgba(255,255,255,.04); padding:36px 20px; text-align:center; transition:background .18s var(--ease) }
.stat:hover { background:rgba(255,255,255,.1) }
.stat-n {
  font-family:var(--fh); font-size:var(--t1); font-weight:800;
  color:var(--blanco); line-height:1; margin-bottom:8px;
  transition:transform .25s var(--spring);
}
.stat:hover .stat-n { transform:scale(1.1) }
.stat-l {
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7);
}

/* ── STEPS ───────────────────────────────────────────── */
.steps { list-style:none; counter-reset:step }
.step {
  counter-increment:step; display:grid;
  grid-template-columns:56px 1fr; gap:22px;
  margin-bottom:40px; align-items:flex-start; position:relative;
}
.step:not(:last-child)::after {
  content:''; position:absolute; top:56px; left:27px;
  bottom:calc(-40px + 4px); width:2px;
  background:linear-gradient(var(--azul-cl),transparent);
}
.step-n {
  width:56px; height:56px; background:var(--azul);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:var(--t3); font-weight:800;
  color:var(--blanco); flex-shrink:0;
  box-shadow:0 4px 16px rgba(18,100,147,.35);
  transition:transform .25s var(--spring),box-shadow .25s var(--ease);
}
.step-n::after { content:counter(step) }
.step:hover .step-n { transform:scale(1.1); box-shadow:0 8px 28px rgba(18,100,147,.45) }
.step-b h4 { padding-top:14px; margin-bottom:6px; font-size:var(--t4)}
.step-b p  { font-size:var(--t5); margin:0 }

/* ── FAQ ─────────────────────────────────────────────── */
.faqs { border-top:1px solid var(--linea) }
.faq  { border-bottom:1px solid var(--linea) }
.faq summary {
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:22px 0; cursor:pointer;
  font-family:var(--fh); font-weight:600; font-size:var(--t4);
  color:var(--gris-osc); list-style:none;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display:none }
.faq summary:hover { color:var(--azul) }
.faq summary::after {
  content:'+'; font-size:var(--t2); font-weight:300; color:var(--azul);
  flex-shrink:0; transition:transform .22s var(--ease); line-height:1;
}
.faq[open] summary::after { transform:rotate(45deg); color:var(--azul-osc) }
.faq[open] summary { color:var(--azul) }
.faq-body { padding:0 0 22px; font-size:var(--t4); animation:up .28s var(--ease) }

/* ── NOTA ────────────────────────────────────────────── */
.nota {
  background:var(--azul-cl); border-left:3px solid var(--azul);
  border-radius:0 8px 8px 0; padding:14px 20px;
  font-size:var(--t5); margin:20px 0; color:var(--azul-prof);
}
.warn {
  background:#fff8e6; border-left:3px solid #d97706;
  border-radius:0 8px 8px 0; padding:14px 20px;
  font-size:var(--t5); margin:20px 0;
}

/* ── TABLA ───────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; margin:20px 0; font-size:var(--t5); border-radius:12px; overflow:hidden; box-shadow:var(--sh1) }
.tbl th { background:var(--azul-prof); color:var(--blanco); font-family:var(--fh); font-weight:700; padding:12px 16px; text-align:left }
.tbl td { padding:10px 16px; border-bottom:1px solid var(--linea) }
.tbl tr:nth-child(even) td { background:var(--gris-f) }
.tbl tr:last-child td { border-bottom:none }

/* ── ENTREGABLES ─────────────────────────────────────── */
.dl { list-style:none; margin:0; padding:0 }
.dl-item { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--linea) }
.dl-item:last-child { border-bottom:none }
.dl-ico { font-size:var(--t3); flex-shrink:0; margin-top:2px }
.dl-lbl { font-weight:700; font-size:var(--t5); color:var(--gris-osc); font-family:var(--fh) }
.dl-desc { font-size:var(--t5); color:var(--gris-med); margin-top:2px }

/* ── USOS ────────────────────────────────────────────── */
.uso-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:28px }
.uso {
  background:var(--blanco); border:1px solid var(--linea);
  border-left:3px solid var(--azul);
  border-radius:0 12px 12px 0; padding:20px;
  transition:all .22s var(--ease);
}
.uso:hover { transform:translateX(4px); box-shadow:var(--sh1) }
.uso-ico { font-size:var(--t3); margin-bottom:8px }
.uso h4  { font-size:var(--t5); margin-bottom:5px }
.uso p   { font-size:var(--t5); margin:0 }

/* ── TEAM BOX ────────────────────────────────────────── */
.team {
  display:grid; grid-template-columns:auto 1fr; gap:32px;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:36px;
  box-shadow:var(--sh2); align-items:start;
  transition:box-shadow .25s var(--ease);
}
.team:hover { box-shadow:var(--sh3) }
.team-logo {
  width:72px; height:72px; background:var(--azul-cl);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  color:var(--azul); letter-spacing:.08em;
  border:1px solid rgba(18,100,147,.2); text-align:center; line-height:1.4;
}
.team-badge {
  display:inline-block; font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul-mid-txt); background:var(--azul-cl);
  border:1px solid rgba(18,100,147,.2);
  padding:3px 10px; border-radius:20px; margin-bottom:8px;
}
.ck { list-style:none; margin:12px 0 0; padding:0 }
.ck li { display:flex; gap:10px; align-items:flex-start; font-size:var(--t5); padding:5px 0 }
.ck li::before { content:'✓'; color:var(--azul); font-weight:800; flex-shrink:0; margin-top:1px; font-size:var(--t5)}

/* ── CTA FINAL ───────────────────────────────────────── */
.cta {
  padding:96px 32px; background:var(--azul-noche);
  text-align:center; position:relative; overflow:hidden;
}
.cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 55% at 50% 100%,rgba(18,100,147,.35) 0%,transparent 70%);
}
.cta::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--azul) 30%,var(--azul-mid) 50%,var(--azul) 70%,transparent);
}
.cta > * { position:relative; z-index:1 }
.cta h2 { color:var(--blanco); margin-bottom:14px }
.cta p  { color:rgba(255,255,255,.55); max-width:460px; margin:0 auto 36px }

/* ── WA FLOAT ────────────────────────────────────────── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  width:58px; height:58px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.5);
  transition:transform .25s var(--spring),box-shadow .25s var(--ease);
  animation:wap 3s ease-in-out infinite;
  text-decoration:none!important;
}
.wa-float:hover { transform:scale(1.13); box-shadow:0 8px 32px rgba(37,211,102,.65); animation:none }
.wa-float svg { width:28px; height:28px; fill:white }

/* ── MAPA ────────────────────────────────────────────── */
.mapa { border-radius:14px; overflow:hidden; box-shadow:var(--sh2) }
.mapa iframe { display:block; width:100%; height:320px; border:0 }
/* Salvavidas: un iframe embebido en el contenido (modelos 3D, visores, videos)
   con ancho fijo en HTML no debe desbordar en movil.
   OJO: no poner height:auto aqui. Los iframes son elementos reemplazados y con
   height:auto adoptan el alto por defecto de 150px, ignorando su atributo
   height. Eso dejo el visor de la parcela 316-A en 150px en vez de 650px. */
#main iframe { max-width:100% }

/* ── CONTACT CARDS ───────────────────────────────────── */
.cc-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px }
.cc {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:24px;
  transition:background .18s var(--ease);
}
.cc:hover { background:rgba(255,255,255,.12) }
.cc-ico { font-size:var(--t2); margin-bottom:10px }
.cc h4  { color:var(--blanco); font-size:var(--t5); margin-bottom:5px }
.cc a   { color:var(--azul-claro-txt); font-size:var(--t5)}
.cc p   { color:rgba(255,255,255,.75); font-size:var(--t5); margin:0 }

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer { background:var(--azul-noche); border-top:1px solid rgba(255,255,255,.07) }
.ftr { max-width:1080px; margin:0 auto; padding:0 32px }
.ftr-g {
  display:grid; grid-template-columns:1.6fr repeat(3,1fr);
  gap:64px; padding:72px 0 56px;
}
.ftr-logo { max-height:38px; width:auto; margin-bottom:20px }
.ftr-desc { font-size:var(--t5); color:rgba(255,255,255,.6); line-height:1.75; margin-bottom:20px }
.ftr-social { display:flex; gap:8px }
.ftr-social a {
  width:36px; height:36px; background:rgba(255,255,255,.07);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); transition:all .18s var(--ease);
}
.ftr-social a:hover { background:var(--azul); color:var(--blanco) }
.ftr-h {
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:20px;
}
/* Mismo tratamiento que .eyebrow .n de la portada, adaptado al fondo oscuro
   del pie. Las tres columnas del footer son una secuencia real (igual que
   las secciones de la portada), asi que numerarlas encoding lo mismo que ahi:
   el orden en que se leen. Aparece en las 66 paginas porque el pie es
   compartido — es el unico numerado que no es exclusivo de la portada. */
/* .32 daba 2.4:1 sobre el azul noche del pie. A .60 sube a 6.75:1 y sigue
   leyendose como dato secundario frente al titulo de la columna. */
.ftr-h .n {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-weight: 500; letter-spacing: .03em; color: rgba(255,255,255,.6);
}
.ftr-h .n::before { content: '\00b7\0020' }
.ftr-links { list-style:none; margin:0; padding:0 }
.ftr-links li { margin-bottom:10px }
.ftr-links a {
  font-size:var(--t5); color:rgba(255,255,255,.55);
  transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.ftr-links a:hover { color:var(--blanco); padding-left:4px }
.ftr-contact { list-style:none; margin:0; padding:0 }
.ftr-contact li { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:var(--t5); color:rgba(255,255,255,.55) }
.ftr-contact svg { flex-shrink:0; margin-top:2px; opacity:.45 }
/* El telefono y el correo del pie son enlaces de accion (marcar, escribir),
   no texto corrido: necesitan area tactil. Daban 25px de alto. */
.ftr-contact a { color:rgba(255,255,255,.55); transition:color .18s var(--ease); display:inline-flex; align-items:center; min-height:44px }
.ftr-contact a:hover { color:var(--blanco) }
.ftr-bot {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; padding:20px 0;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:var(--t5); color:rgba(255,255,255,.55);
}
.ftr-bot a { color:rgba(255,255,255,.7); transition:color .18s var(--ease) }
.ftr-bot a:hover { color:var(--blanco) }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1024px) {
  .ftr-g { grid-template-columns:1fr 1fr; gap:40px }
  .ftr-col-brand { grid-column:1/-1 }
}
/* Area tactil de los enlaces del pie, solo en pantallas tactiles. Median 19 a
   22px de alto con 0 a 6px de separacion entre ellos: por debajo de los 24x24
   que pide la WCAG 2.5.8, y sin el aire que permitiria la excepcion. Al dedo
   eso es pulsar "Politica de cookies" queriendo "Contacto". Movil es el 55%
   de las impresiones del sitio.
   Es el mismo criterio que ya se aplico al telefono y al correo del pie
   (.ftr-contact a, min-height:44px). En escritorio no se toca nada: alli se
   apunta con un raton y el pie mide lo que siempre midio. */
@media(max-width:768px) {
  .ftr-links a, .ftr-bot a { display:inline-flex; align-items:center; min-height:44px }
  .ftr-links li { margin-bottom:0 }
  .ftr-bot { gap:4px }
}
@media(max-width:768px) {
  .hero { padding:72px 20px 64px; min-height:auto; text-align:center }
  .hero h1,.hero .hero-lead { margin-left:auto; margin-right:auto }
  .hero-scroll { display:none }
  .btn-row { justify-content:center; flex-direction:column; align-items:center }
  .btn { width:100%; justify-content:center }
  .sec,.alt,.dark,.night,.cta { padding:64px 20px }
  .wrap,.wrap-sm { padding:0 20px }
  .team { grid-template-columns:1fr }
  .step { grid-template-columns:44px 1fr; gap:16px }
  .step-n { width:44px; height:44px; font-size:var(--t4)}
  .step:not(:last-child)::after { left:21px }
  /* Header móvil */
  .hdr-nav {
    position:fixed; top:68px; left:0; right:0; z-index:999;
    background:var(--blanco); border-bottom:1px solid var(--linea);
    box-shadow:var(--sh3); padding:16px 20px 28px;
    transform:translateY(-100%); opacity:0;
    transition:all .25s var(--ease); pointer-events:none;
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  .hdr-nav.open { transform:none; opacity:1; pointer-events:all }
  .nav-list { flex-direction:column; gap:0 }
  .nav-list > li { position:relative }
  .nav-list > li > a { padding:14px 0; font-size:var(--t4); border-bottom:1px solid var(--linea); border-radius:0; display:block }
  .nav-list > li > a:hover { background:none; padding-left:4px }
  /* Submenus: colapsados por defecto en movil, se abren con el boton .submenu-toggle */
  .nav-list .sub-menu {
    position:static; transform:none; box-shadow:none; border:none; border-radius:0;
    padding:0 0 0 16px; opacity:1; visibility:visible;
    max-height:0; overflow:hidden;
    transition:max-height .3s var(--ease);
  }
  .nav-list > li.sub-open > .sub-menu { max-height:1400px; padding-top:4px; padding-bottom:4px }
  .nav-list .sub-menu a { padding:10px 0; font-size:var(--t5); border-bottom:none }
  /* Entrada "Ver [seccion]" que el JS inyecta en movil para llegar a la
     pagina del padre, ya que ahi el primer toque despliega en vez de
     navegar. Va en azul y semibold para leerse como acceso, no como un
     hijo mas de la lista. */
  .nav-list .sub-menu .menu-item-ver-padre > a { color:var(--azul); font-weight:600 }
  .submenu-toggle {
    position:absolute; top:2px; right:0; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--gris-osc); cursor:pointer;
  }
  .submenu-toggle svg { transition:transform .2s var(--ease) }
  .nav-list > li.sub-open > .submenu-toggle svg { transform:rotate(180deg) }
  .hdr-toggle { display:flex }
  .hdr-wa span { display:none }
  .hdr-wa { padding:9px 12px }
  /* Footer móvil */
  .ftr-g { grid-template-columns:1fr; gap:36px }
  .ftr-bot { flex-direction:column; text-align:center }
}
@media(max-width:480px) {
  .stats { grid-template-columns:repeat(2,1fr) }
  .wa-float { bottom:16px; right:16px; width:52px; height:52px }
  .wa-float svg { width:24px; height:24px }
  .hdr { padding:0 16px; gap:12px }
}

/* ── ACCESIBILIDAD ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
  .rv { opacity:1!important; transform:none!important }
}
:focus-visible { outline:3px solid var(--azul-mid); outline-offset:3px }
.skip-link { position:absolute; top:-60px; left:16px; z-index:9999; background:var(--azul); color:var(--blanco); padding:8px 16px; border-radius:8px; font-family:var(--fh); font-weight:700; font-size:var(--t5); transition:top .2s }
.skip-link:focus { top:8px }

/* ═══════════════════════════════════════════════════
   HERO MEJORADO — Instrumento decorativo + parallax
═══════════════════════════════════════════════════ */

/* Instrumento decorativo (teodolito SVG) */
.hero-instrument {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: min(280px, 38vw);
  z-index: 3;
  opacity: .55;
  transform: translateY(8px);
  transition: transform .1s linear, opacity .3s;
  pointer-events: none;
  filter: drop-shadow(0 0 32px rgba(26,138,196,.25));
}

/* Capas de parallax para el mouse */
.hero-bg    { will-change: transform }
.hero-light { will-change: transform }
.hero-dots  { will-change: transform }
.hero-instrument { will-change: transform }

/* Hero más alto en desktop */
@media(min-width:769px) {
  .hero {
    min-height: 96vh;
    padding: 100px 32px 80px;
    text-align: left;
    align-items: center;
  }
  .hero-inner {
    max-width: 580px;
  }
  .hero .hero-lead {
    margin-left: 0;
    margin-right: 0;
  }
  .btn-row {
    justify-content: flex-start;
  }
  .hero h1 {
    font-size:var(--t1);
  }
}

/* Línea de mira animada en el hero */
.hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,138,196,.0) 20%,
    rgba(26,138,196,.15) 50%,
    rgba(26,138,196,.0) 80%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Punto de mira en el centro del hero */
.hero::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: rgba(26,138,196,.4);
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(26,138,196,.08),
    0 0 0 24px rgba(26,138,196,.04);
  z-index: 2;
  pointer-events: none;
  animation: crosshair 4s ease-in-out infinite;
}
@keyframes crosshair {
  0%,100% { opacity:.4; transform:scale(1) }
  50%      { opacity:.8; transform:scale(1.3) }
}

/* Cursor personalizado en el hero */
.hero { cursor: crosshair }
.hero .btn-wa,
.hero .btn-gh { cursor: pointer }

/* Efecto de brillo en hover sobre el hero */
.hero-light {
  transition: transform .08s linear;
}

/* Texto hero mejorado */
.hero h1 {
  text-shadow: 0 2px 32px rgba(6,31,48,.6);
}
.hero .hero-lead {
  text-shadow: 0 1px 8px rgba(6,31,48,.4);
}

/* ═══════════════════════════════════════════════════
   UNIFICACION DE LAS PAGINAS INTERNAS CON LA HOME
   Las paginas traen su propio CSS embebido (clases .ps/.pc/.pey...). Su
   <style> va en el body, asi que gana por orden a este archivo: para poder
   sobreescribirlas hay que subir la especificidad con .agr-page-content.
═══════════════════════════════════════════════════ */

/* El ritmo y la escala de titulos ya vienen unificados en paginas.css, que es
   ahora la unica fuente de los estilos de pagina. No duplicarlos aqui: ese
   archivo se carga despues y ganaria por orden. */

/* Las paginas animaban .pc y .pstep con "animation ... both", que se dispara al
   CARGAR y no al llegar el usuario. Se anula: el estado por defecto pasa a ser
   VISIBLE, que es justo lo que queremos si el JS no llega a correr. El reveal
   progresivo lo aplica main-v2.js. */
.agr-page-content .pc,
.agr-page-content .pstep { animation:none !important }

/* Reveal por scroll. La clase .agr-rv la anade SOLO el JS, de modo que sin JS
   no se oculta nada. Ver la nota de seguridad en main-v2.js. */
.agr-rv {
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.agr-rv.on { opacity:1; transform:none }
@media (prefers-reduced-motion: reduce) {
  .agr-rv { opacity:1 !important; transform:none !important; transition:none !important }
}

/* ═══════════════════════════════════════════════════
   CALCULADORA — panel con plano catastral que se dibuja
   solo, y tarjeta de estado del expediente.

   La animacion de trazado no necesita JS propio: el panel
   lleva las mismas clases .rv que el resto del sitio, asi
   que cuando el observer existente le anade .on, estas
   reglas se disparan solas.
═══════════════════════════════════════════════════ */
.calc-teaser { overflow:hidden }
.calc-teaser-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.calc-teaser-copy h2 { margin:14px 0 16px }
.calc-teaser-copy p { color:var(--gris); margin-bottom:24px; max-width:46ch }

.mock { position:relative }
.panel {
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--relieve); overflow:hidden;
}
.panel-top {
  display:flex; align-items:center; gap:8px; padding:11px 15px;
  border-bottom:1px solid var(--linea); background:linear-gradient(#fff,#fbfcfd);
}
.panel-top .dot { width:9px; height:9px; border-radius:50%; background:#e2e6ea; display:inline-block }
.panel-top .t {
  margin-left:6px; font-size:var(--t6); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gris-med); font-family:var(--fh); font-weight:700;
}
.plano { display:block; width:100%; height:auto; background:#fcfdfe }

.traza { stroke-dasharray:1400; stroke-dashoffset:1400 }
.mock.on .traza { animation:trazar 2s var(--spring) .2s forwards }
@keyframes trazar { to{ stroke-dashoffset:0 } }
.vert { opacity:0 }
.mock.on .vert { animation:aparecerPt .4s ease forwards }
.mock.on .vert:nth-of-type(1){animation-delay:1.1s} .mock.on .vert:nth-of-type(2){animation-delay:1.25s}
.mock.on .vert:nth-of-type(3){animation-delay:1.4s} .mock.on .vert:nth-of-type(4){animation-delay:1.55s}
.mock.on .vert:nth-of-type(5){animation-delay:1.7s}
@keyframes aparecerPt { to{ opacity:1 } }
.cota { opacity:0 } .mock.on .cota { animation:aparecerPt .5s ease 1.85s forwards }

.expo {
  position:absolute; right:-14px; bottom:-26px; width:250px; background:#fff;
  border:1px solid var(--linea); border-radius:14px; box-shadow:var(--relieve-hover);
  padding:15px 17px;
}
.expo .lbl {
  font-size:var(--t6); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gris-med); font-family:var(--fh); font-weight:700;
}
.expo .paso { display:flex; align-items:center; gap:10px; margin-top:11px; font-size:var(--t5) }
.expo .tic { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; flex:0 0 18px }
.expo .tic.ok { background:#2E7D5B }
.expo .tic.now { background:var(--azul); box-shadow:0 0 0 0 rgba(18,100,147,.45); animation:latir 2s infinite }
.expo .tic.wait { background:#fff; border:1.5px solid #dfe4e8 }
@keyframes latir { 70%{ box-shadow:0 0 0 9px rgba(18,100,147,0) } 100%{ box-shadow:0 0 0 0 rgba(18,100,147,0) } }
.expo .paso.wait span { color:var(--gris-med) }

/* ═══════════════════════════════════════════════════
   ANTES / DESPUÉS — comparador de constancia anotada vs
   certificado de título. Las dos caras van a la MISMA
   altura de fila y centradas: es lo que permite que, al
   mover el control, cada linea se transforme en su
   equivalente en vez de cortar una frase a la mitad.
═══════════════════════════════════════════════════ */
.slider {
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--linea);
  box-shadow:var(--relieve); user-select:none; touch-action:none; background:#fff;
}
.slider .cara { display:grid; grid-template-columns:1fr }
.slider .lado {
  grid-area:1/1; padding:36px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.slider .lado.b { background:#fff; clip-path:inset(0 0 0 50%) }
.slider .lado.a { background:linear-gradient(150deg,#f7f4f2,#f1eeec) }
.slider .lado h4 { min-height:2.5em; display:flex; align-items:center; margin-bottom:4px }
.slider .et {
  font-size:var(--t6); letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  font-family:var(--fh); margin-bottom:10px; display:block;
}
/* #a8756b daba 3.44:1 sobre el fondo claro del lado "antes" — no llegaba al
   4.5:1 y esto no es ornamento, es la etiqueta que dice cual de las dos caras
   se esta viendo. #8d5744 da 5.22:1 y mantiene el mismo tono terroso que
   distingue el lado "antes" del azul del "despues". */
.slider .lado.a .et { color:#8d5744 } .slider .lado.b .et { color:var(--azul) }
.slider .lado ul { margin:16px 0 0; padding:0; list-style:none; width:100% }
.slider .lado li {
  font-size:var(--t5); height:50px; display:flex; align-items:center; justify-content:center;
  gap:9px; border-top:1px solid rgba(6,31,48,.06);
}
.slider .lado li:first-child { border-top:0 }
.slider .lado li::before { font-size:13px; flex:0 0 auto }
.slider .lado.a li::before { content:'✕'; color:#c08a80 }
.slider .lado.b li::before { content:'✓'; color:#2E7D5B; font-weight:700 }

.tirador {
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--azul);
  z-index:3; transform:translateX(-1px); cursor:ew-resize;
}
.tirador::after {
  content:'⇄'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--azul); color:#fff;
  display:grid; place-items:center; font-size:17px;
  box-shadow:0 3px 10px rgba(6,31,48,.3), 0 0 0 5px rgba(18,100,147,.14);
}
.tirador:focus-visible::after { outline:2px solid #fff; outline-offset:2px }
.pista { text-align:center; font-size:var(--t5); color:var(--gris-med); margin-top:16px }

@media (max-width:860px) {
  .calc-teaser-grid { grid-template-columns:1fr; gap:48px }
  .expo { right:8px; bottom:-20px; width:224px }
  .slider .lado { padding:26px 18px }
}
@media (prefers-reduced-motion: reduce) {
  .traza { stroke-dashoffset:0 !important } .vert,.cota { opacity:1 !important }
  .expo .tic.now { animation:none !important }
}

/* Origen y fecha de cada reseña. Va debajo del texto, en el tamaño de
   etiqueta, para que se lea como procedencia y no compita con la reseña. */
.resena-fuente {
  display:inline-block; margin-top:12px;
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--gris-med);
}

/* Salto entre versiones de idioma (2026-08-14).
   Discreto a proposito: es una salida para quien la necesita, no una llamada a
   la accion que compita con el telefono. Altura minima 44px porque en movil se
   toca con el dedo. */
.hdr-idioma {
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  font-family:'Montserrat',sans-serif; font-size:var(--t5); font-weight:600;
  color:var(--gris); text-decoration:none; border-radius:8px;
  transition:color .18s ease, background .18s ease;
}
.hdr-idioma:hover { color:var(--azul); background:#E8F3FA }
@media (max-width:900px){ .hdr-idioma { padding:0 10px } }

/* ── ALIADOS (2026-08-31) ──────────────────────────────────────────────
   Sección de la portada que nombra al estudio jurídico aliado. Reusa la
   misma retícula de dos columnas de .calc-teaser-grid y el mismo relieve
   de tarjeta que .card: no es un componente nuevo, es el mismo lenguaje.

   La tarjeta NO es un .card porque .card lleva ::before/::after animados
   y un hover que la levanta 6 px. Aquí no hay nada que "abrir": es una
   ficha de referencia, no un enlace a otra página del sitio.           */
.ali-grid {
  display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
}
.ali-copy h2 { margin:14px 0 0 }
.ali-copy .rule { margin:14px 0 20px }
.ali-copy p { color:var(--gris); max-width:52ch }
.ali-copy p:last-child { margin-bottom:0 }

.ali-card {
  background:var(--blanco); border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--relieve); padding:32px 30px;
  border-top:3px solid var(--azul);
}
.ali-et {
  display:block; margin-bottom:10px;
  font-family:var(--fh); font-size:var(--t6); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gris-med);
}
.ali-card h3 { margin-bottom:16px; color:var(--azul-prof) }
.ali-lista { list-style:none; margin:0 0 18px; padding:0 }
.ali-lista li {
  font-size:var(--t5); color:var(--gris); margin-bottom:0;
  padding:9px 0 9px 20px; border-top:1px solid rgba(6,31,48,.06); position:relative;
}
.ali-lista li:first-child { border-top:0 }
/* El punto va en ::before y no como marcador de lista: así queda alineado
   con la primera línea aunque el texto envuelva a dos renglones. */
.ali-lista li::before {
  content:''; position:absolute; left:2px; top:1.15em;
  width:6px; height:6px; border-radius:50%; background:var(--azul-mid);
}
.ali-lugar {
  font-size:var(--t5); color:var(--gris-med); margin-bottom:20px;
}

@media (max-width:860px) {
  .ali-grid { grid-template-columns:1fr; gap:40px }
}