/* =========================================================================
   VANTO · Hoja de estilos del sitio
   Solo tokens semanticos (--color-*). Los unicos valores crudos de aqui
   abajo son transparencias de decoracion.
   ========================================================================= */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,p,figure,dl,dd{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
img,svg,video,canvas{display:block; max-width:100%;}
button,input,select,textarea{font:inherit; color:inherit;}
a{color:inherit;}

::selection{background:var(--color-primary); color:var(--color-on-primary);}

:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

@supports (scrollbar-color: red blue){
  html{scrollbar-color:var(--color-rule-strong) transparent; scrollbar-width:thin;}
}

.skip{
  position:absolute; left:var(--space-4); top:-100px; z-index:400;
  background:var(--color-primary); color:var(--color-on-primary);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius);
  font-weight:600; text-decoration:none; transition:top var(--dur) var(--ease);
}
.skip:focus{top:var(--space-4);}

/* ---------- Layout ---------- */
.wrap{
  width:100%; max-width:var(--page);
  margin-inline:auto; padding-inline:var(--gutter);
}

/* El ritmo ya no alterna papel y tinta: alterna PROFUNDIDAD. Tres peldanos
   sobre la misma escalera de negros, cada uno con su papel. */
.section{
  background:var(--color-bg);
  padding-block:clamp(64px, 9vw, 118px);
  position:relative;
  scroll-margin-top:calc(var(--h-cabecera) + 4px);
  perspective:var(--perspectiva);   /* punto de fuga comun para los hijos 3D */
}
.section--tight{padding-block:clamp(44px, 5vw, 68px);}
.section--alt{background:var(--color-bg-alt);}
.section--deep{background:var(--color-bg-deep);}
/* Seccion enmarcada. No todo va a sangre completa: dos bloques van dentro de
   un panel con el fondo de pagina alrededor, y eso le da a la pagina un ritmo
   de "borde a borde" contra "enmarcado" que no tiene una plantilla. */
.section--inset{background:var(--color-bg); padding-block:clamp(28px,4vw,56px);}
.section--inset > .wrap{
  background:var(--color-bg-alt); border:1px solid var(--color-rule);
  border-radius:var(--radius-xl);
  padding-block:clamp(44px, 6vw, 88px);
  padding-inline:clamp(24px, 4vw, 64px);
}
.section--inset .section-edge{display:none;}

/* Grano. Sin esto el negro se ve plano y digital; con esto agarra cuerpo. */
.section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.section > *{position:relative; z-index:1;}

/* Filo de seccion. Antes era una barra naranja a todo el ancho: justo donde
   la ficha del hero se superpone, eso se leia como una costura mal hecha en
   vez de como una decision. Ahora el divisor es una hairline discreta que
   ademas NO va a sangre completa -se detiene en el ancho del contenido, asi
   que el borde entre secciones deja de ser una linea recta de lado a lado- y
   el naranja se reduce a un segmento corto que crece: una marca, no un corte. */
.section-edge{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  width:min(var(--page) - 2 * var(--gutter), 100% - 2 * var(--gutter));
  height:1px; background:var(--color-rule);
}
.section-edge::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--color-primary);
  transition:width 900ms var(--ease-expo);
}
.section-edge.is-in::after{width:88px;}

/* ---------- Tipografia ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--color-primary);
  display:flex; align-items:center; gap:var(--space-3);
}
.eyebrow::before{content:""; width:22px; height:2px; flex:none; background:var(--color-primary);}

.display{
  font-family:var(--font-display); font-weight:800;
  letter-spacing:-.035em; line-height:1.02; text-wrap:balance;
}
.h-hero{font-size:var(--text-5xl); letter-spacing:-.045em;}
/* El titular del hero llega a 106px. Un h2 de seccion a 73px competia con
   el y no dejaba jerarquia; ademas se partia en cuatro lineas y dejaba el
   parrafo de al lado descolgado. A 54px la escalera se lee sola. */
.h-1{font-size:clamp(1.9rem, 1.32rem + 2.6vw, 3.35rem);}
.h-2{font-size:var(--text-3xl);}
.h-3{font-size:var(--text-2xl); letter-spacing:-.025em;}
.h-4{font-size:var(--text-xl); letter-spacing:-.02em; font-weight:700;}

.lead{
  font-size:var(--text-lg); color:var(--color-text-soft);
  max-width:52ch; line-height:1.62; text-wrap:pretty;
}

.section-head{
  display:flex; flex-direction:column; gap:var(--space-4);
  max-width:62ch; margin-bottom:clamp(36px, 5vw, 64px);
}
@media (min-width:900px){
  .section-head{
    display:grid; max-width:none;
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    column-gap:clamp(40px, 5vw, 80px); row-gap:var(--space-4);
    align-items:end;
  }
  .section-head .eyebrow{grid-column:1 / -1;}
  .section-head .lead{max-width:44ch; padding-bottom:.35em;}
}

/* ---------- Botones ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:0 var(--space-5);
  border:1px solid transparent; border-radius:var(--radius);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  /* El desplazamiento magnetico lo escribe el JS en --imx/--imy. */
  transform:translate3d(var(--imx,0px), var(--imy,0px), 0);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform 220ms var(--ease-expo);
}
.btn:active{transform:translate3d(var(--imx,0px), calc(var(--imy,0px) + 1px), 0);}

.btn-primary{
  background:var(--color-primary); color:var(--color-on-primary);
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 8px 24px -10px var(--color-primary);
}
.btn-primary:hover{
  background:var(--color-primary-hover);
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 14px 36px -12px var(--color-primary);
}
/* Barrido de luz al pasar el puntero. */
.btn-primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{animation:barrido 720ms var(--ease-expo);}
@keyframes barrido{ to{transform:translateX(120%);} }

.btn-ghost{background:transparent; color:var(--color-text); border-color:var(--color-border-control);}
.btn-ghost:hover{border-color:var(--color-text); background:var(--color-surface);}

.btn-lg{min-height:56px; padding:0 var(--space-6); font-size:var(--text-base);}
.btn-block{width:100%;}
.btn-arrow svg{transition:transform var(--dur) var(--ease);}
.btn-arrow:hover svg{transform:translateX(4px);}

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--color-bg-deep);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  @supports (background: color-mix(in srgb, red 50%, transparent)){
    .site-header{
      background:color-mix(in srgb, var(--color-bg-deep) 78%, transparent);
      backdrop-filter:blur(16px) saturate(150%);
      -webkit-backdrop-filter:blur(16px) saturate(150%);
    }
  }
}
.site-header.is-stuck{border-bottom-color:var(--color-rule);}

.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--color-primary); z-index:3;
  box-shadow:0 0 12px 0 var(--color-primary);
}

.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:var(--h-cabecera);}
.brand{display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none; flex:none; min-height:44px;}
.brand svg{width:32px; height:32px; transition:transform var(--dur) var(--ease-back);}
.brand:hover svg{transform:translateY(-2px) rotate(-4deg);}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:1.32rem; letter-spacing:-.04em; text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:var(--space-6);}
.nav-links a{
  text-decoration:none; font-size:var(--text-sm); font-weight:500;
  color:var(--color-text-muted); position:relative; padding-block:var(--space-2);
  transition:color var(--dur-fast) var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--color-primary); transition:width var(--dur) var(--ease);
}
.nav-links a:hover{color:var(--color-text);}
.nav-links a:hover::after{width:100%;}
.nav-links a.is-active{color:var(--color-text);}
.nav-links a.is-active::after{width:100%;}

.nav-actions{display:flex; align-items:center; gap:var(--space-3);}
.icon-btn{
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--color-border-control);
  border-radius:var(--radius); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.icon-btn:hover{border-color:var(--color-text); background:var(--color-surface);}
.icon-btn svg{width:19px; height:19px;}
.nav-toggle{display:none;}

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:var(--h-cabecera) 0 auto; z-index:99;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-bg-deep); border-bottom:1px solid var(--color-rule);
    padding:var(--space-4) var(--gutter) var(--space-6);
    max-height:calc(100dvh - var(--h-cabecera)); overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav-links.is-open{transform:none; opacity:1; pointer-events:auto;}
  .nav-links a{padding-block:var(--space-4); font-size:var(--text-lg); border-bottom:1px solid var(--color-rule);}
  .nav-links a::after{display:none;}
  .nav-toggle{display:grid;}
  .nav-cta{display:none;}
}
body.menu-abierto{overflow:hidden;}

/* ---------- Secuencia de entrada ----------
   Se dibuja el galon y se abre la cortina. Dura menos de un segundo, se salta
   con cualquier tecla o clic, y solo aparece una vez por sesion: la segunda
   visita en la misma pestana entra directo. El contenido esta en el DOM desde
   el principio; la cortina solo lo tapa. */
.intro{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:var(--color-bg-deep);
  transition:opacity 620ms var(--ease-expo), visibility 620ms;
}
.intro[hidden]{display:none;}
.intro.is-out{opacity:0; visibility:hidden;}
.intro svg{width:88px; height:88px; overflow:visible;}
.intro .galon{
  fill:none; stroke:var(--blanco); stroke-width:8; stroke-linejoin:miter;
  /* La longitud del trazo no se adivina: dos segmentos de raiz(13^2+20^2)
     = 23.85 cada uno, o sea 47.7. Redondeado a 48 el galon se dibuja entero
     y sin sobrante. */
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:trazar 700ms var(--ease-expo) forwards;
}
.intro .cuadro{
  fill:var(--ember-500); opacity:0; transform-box:fill-box; transform-origin:center;
  animation:aterrizar 420ms var(--ease-back) 470ms forwards;
}
.intro-barra{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--color-primary); transform-origin:0 50%; transform:scaleX(0);
  animation:cargar 900ms var(--ease) forwards;
}
@keyframes trazar{ to{stroke-dashoffset:0;} }
@keyframes aterrizar{ from{opacity:0; transform:translateY(-14px) scale(.6);} to{opacity:1; transform:none;} }
@keyframes cargar{ to{transform:scaleX(1);} }

/* ---------- Hero ----------
   Composicion de documento, no de plantilla. El titular NO vive en una
   columna: ocupa el ancho entero, y por eso puede ir al doble de tamano que
   en el reparto tipico de "texto a la izquierda, tarjeta a la derecha".
   Debajo, asimetrico: texto y botones a la izquierda, la ficha a la derecha
   desbordando hacia la seccion siguiente para romper el limite entre bandas. */
.hero{padding-block:clamp(40px, 5vw, 64px) 0; overflow:visible;}
.hero-fondo{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
/* El patron se atenua en la franja superior: ahi vive el membrete, con texto
   de 10px que peleaba con los galones encendidos. Abajo, donde solo hay
   titular grande, el campo va a plena intensidad. */
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.28) 0, #000 20%, #000 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.28) 0, #000 20%, #000 100%);
}
.hero-glow{
  position:absolute; display:block;
  width:min(900px, 96vw); aspect-ratio:1; right:-18%; top:-40%;
  background:radial-gradient(circle, rgba(255,106,43,.20), transparent 62%);
}
.hero .wrap{position:relative; z-index:1;}

/* El titular a todo el ancho. Medido: la linea mas larga ocupa 7.1 veces el
   cuerpo de la fuente, y aqui dispone de los 1120px completos del contenedor
   en vez de los 517px de una columna. */
.hero-statement{
  font-size:clamp(2.35rem, 0.9rem + 7.4vw, 6.6rem);
  letter-spacing:-.05em; line-height:.98; margin-bottom:clamp(32px, 4.5vw, 56px);
}
.hero-statement .accent{color:var(--color-primary);}

/* Alineado ARRIBA, no abajo. Con "end" la columna de texto se empujaba hasta
   el pie de una ficha mucho mas alta y dejaba 173px de vacio entre el titular
   y el parrafo: un hueco que se lee como error, no como aire. Alineando arriba,
   texto y ficha arrancan juntos -ahi es donde la simetria si tiene que estar-
   y el desnivel queda abajo, que es justo donde la ficha desborda a proposito. */
.hero-tail{
  display:grid; grid-template-columns:1fr; gap:clamp(32px, 4vw, 56px);
  align-items:start;
}
/* Cuatro columnas iguales, las mismas del membrete. La ficha arranca en la
   columna 3, o sea exactamente sobre la division central del membrete: la
   tarjeta no esta "puesta ahi", esta alineada a la rejilla, y por eso el
   solapamiento se lee como decision y no como accidente. */
@media (min-width:980px){
  .hero-tail{grid-template-columns:repeat(4, 1fr); column-gap:0;}
  .hero-dicho{grid-column:1 / 3; padding-right:clamp(24px, 4vw, 64px);}
  .hero-ficha{grid-column:3 / -1;}
}
.hero-dicho{display:flex; flex-direction:column; gap:var(--space-5);}
.hero-actions{display:flex; gap:var(--space-3); flex-wrap:wrap;}

/* La ficha desborda hacia abajo: el borde entre secciones deja de ser una
   linea recta y la pagina deja de leerse como bandas apiladas.

   El margen negativo encoge el hero, asi que la ficha sobresale por debajo;
   la seccion siguiente compensa con mas espacio arriba para que el indice no
   se le meta encima. Antes esto no funcionaba porque .hero-tail llevaba un
   padding inferior que cancelaba exactamente el margen negativo. */
.hero-ficha{position:relative; z-index:2; margin-bottom:clamp(-140px, -10vw, -80px);}
/* El hero tiene que pintar POR ENCIMA de la seccion siguiente: son hermanos,
   y sin esto el que va despues tapa la parte que sobresale. */
.hero{z-index:3;}
.hero + .section{padding-top:clamp(124px, 15vw, 196px);}

/* ---------- Ficha de propuesta · con inclinacion 3D ----------
   No pide nada al visitante: ensena en cinco lineas como se ve la propuesta
   que recibe. La inclinacion la escribe el JS en --rx/--ry, solo con raton. */
.ficha{
  background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden; position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 420ms var(--ease-expo), box-shadow 420ms var(--ease);
}
.ficha.is-tilting{transition:transform 90ms linear; box-shadow:var(--shadow-lg), var(--glow);}
/* Reflejo especular que se mueve con la inclinacion. */
.ficha::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:0; transition:opacity 300ms var(--ease);
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),
             rgba(255,255,255,.10), transparent 62%);
}
.ficha.is-tilting::after{opacity:1;}

.ficha-top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--color-rule); background:var(--color-surface-2);
}
.ficha-tag{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.15em;
  text-transform:uppercase; color:var(--color-primary);}
.ficha-sello{display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em; color:var(--color-text-muted);}
.ficha-sello svg{width:15px; height:15px; color:var(--color-primary);}
.ficha-body{padding:var(--space-6);}
.ficha-titulo{font-family:var(--font-display); font-weight:700; font-size:var(--text-xl);
  letter-spacing:-.025em; margin-bottom:var(--space-5);}
.ficha-rows{display:flex; flex-direction:column;}
.ficha-rows > div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:var(--space-4);
  padding-block:var(--space-3); border-top:1px solid var(--color-rule); align-items:baseline;
}
.ficha-rows dt{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-text-muted);}
.ficha-rows dd{font-size:var(--text-sm); line-height:1.5;}
.ficha-precio{font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl);
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1;}
.ficha-precio span{font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  letter-spacing:0; color:var(--color-text-muted); margin-left:var(--space-2);}
.ficha-foot{padding:var(--space-4) var(--space-6); border-top:1px solid var(--color-rule);
  background:var(--color-surface-2); font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.5;}

/* ---------- Membrete ----------
   El hero abre como un documento: una regla, cuatro datos duros en versalitas
   y otra regla. Antes eso era una banda entera de "cifras" mas abajo; aqui
   cumple la misma funcion sin gastar una seccion, y de paso le dice al
   visitante en dos segundos que este estudio trata en compromisos escritos. */
.membrete{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-block:1px solid var(--color-rule);
  margin-bottom:clamp(40px, 6vw, 78px);
}
@media (min-width:760px){ .membrete{grid-template-columns:repeat(4,1fr);} }
.membrete > div{
  padding-block:var(--space-4); padding-right:var(--space-5);
  border-right:1px solid var(--color-rule);
}
/* Aire DESPUES del divisor. Sin esto, el texto de cada celda arrancaba pegado
   a la linea de la celda anterior -medido: 0px de separacion- y el membrete se
   leia apretado. La primera celda no lleva sangria a proposito: su borde
   izquierdo tiene que coincidir con el del titular. */
.membrete > div + div{padding-left:var(--space-5);}
.membrete > div:last-child{border-right:0; padding-right:0;}
@media (max-width:759px){
  .membrete > div:nth-child(2n){border-right:0; padding-right:0;}
  .membrete > div:nth-child(-n+2){border-bottom:1px solid var(--color-rule);}
  .membrete > div:nth-child(2n+1){padding-left:0;}
}
.membrete dt{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-2);
}
.membrete dd{
  font-family:var(--font-display); font-weight:800; font-size:var(--text-lg);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}

/* ---------- Indice de servicios ----------
   Cuatro filas a todo el ancho que se despliegan, no cuatro tarjetas en una
   rejilla. Es la forma de un indice o una carta, no la de un panel de SaaS,
   y deja que el nombre del servicio se lea a tamano de titular. Va sobre
   <details> nativo: funciona sin JavaScript y con teclado. */
.indice{border-top:1px solid var(--color-rule);}
.indice details{border-bottom:1px solid var(--color-rule); position:relative;}
.indice details::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--color-primary-soft); pointer-events:none;
  transition:width 420ms var(--ease-expo);
}
.indice details:hover::before,
.indice details[open]::before{width:100%;}

.indice summary{
  position:relative; z-index:1; list-style:none; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:var(--space-3) var(--space-5); align-items:center;
  padding-block:clamp(18px, 2.4vw, 30px);
}
.indice summary::-webkit-details-marker{display:none;}
.indice-n{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
  color:var(--color-text-muted); transition:color var(--dur) var(--ease);
}
.indice-t{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.45rem, 3.1vw, 2.5rem); letter-spacing:-.035em; line-height:1.05;
  transition:transform 420ms var(--ease-expo);
}
.indice-p{
  font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.04em;
  color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.indice details:hover .indice-n,
.indice details[open] .indice-n{color:var(--color-primary);}
.indice details:hover .indice-p,
.indice details[open] .indice-p{color:var(--color-text);}
.indice details:hover .indice-t{transform:translateX(10px);}
.indice details[open] .indice-t{color:var(--color-primary);}

.indice-cuerpo{position:relative; z-index:1; overflow:hidden;}
.indice details[open] .indice-cuerpo{animation:abrirRespuesta 340ms var(--ease);}
.indice-detalle{
  display:grid; gap:var(--space-5); padding-bottom:clamp(24px,3vw,40px);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .indice-detalle{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-7);} }
.indice-detalle p{color:var(--color-text-soft); line-height:1.62; max-width:52ch;}
.indice-detalle ul{display:flex; flex-direction:column; gap:var(--space-3);}
.indice-detalle li{
  display:flex; gap:var(--space-3); font-size:var(--text-sm); color:var(--color-text-muted);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--color-rule);
}
.indice-detalle li::before{content:"+"; color:var(--color-primary); font-weight:700; flex:none;}
@media (max-width:519px){
  .indice summary{grid-template-columns:auto 1fr; }
  .indice-p{grid-column:2; text-align:left;}
}

/* ---------- Linea de tiempo ----------
   El proceso ES un calendario, asi que se dibuja como un calendario y no como
   cuatro columnas de texto. El riel se rellena al entrar en pantalla. */
.linea{position:relative; display:grid; gap:var(--space-7);}
.hito{position:relative;}
.hito-cuando{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-3);
}
.hito h3{
  font-family:var(--font-display); font-size:var(--text-xl); font-weight:700;
  letter-spacing:-.025em; margin-bottom:var(--space-3);
}
.hito p{font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.62; text-wrap:pretty;}

/* Movil: riel vertical a la izquierda. */
@media (max-width:859px){
  .linea{padding-left:var(--space-6);}
  .linea::before{
    content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
    background:var(--color-rule);
  }
  .hito::before{
    content:""; position:absolute; left:calc(-1 * var(--space-6)); top:4px;
    width:16px; height:16px; border-radius:50%;
    background:var(--color-bg); border:2px solid var(--color-rule);
    transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
}
/* Escritorio: riel horizontal, hitos colgando debajo. */
@media (min-width:860px){
  .linea{grid-template-columns:repeat(4,1fr); gap:var(--space-6); padding-top:52px;}
  .linea::before{
    content:""; position:absolute; left:8px; right:8px; top:8px; height:2px;
    background:var(--color-rule);
  }
  .linea::after{
    content:""; position:absolute; left:8px; top:8px; height:2px; width:0;
    background:var(--color-primary);
    transition:width 1.9s var(--ease-expo);
  }
  .linea.is-in::after{width:calc(100% - 16px);}
  .hito{padding-right:var(--space-5);}
  .hito::before{
    content:""; position:absolute; left:0; top:-52px;
    width:18px; height:18px; border-radius:50%;
    background:var(--color-bg); border:2px solid var(--color-rule);
    transition:background 420ms var(--ease) var(--hito-delay,0ms),
               border-color 420ms var(--ease) var(--hito-delay,0ms);
  }
}
.hito.is-in::before{background:var(--color-primary); border-color:var(--color-primary);}

/* ---------- Foco de luz que sigue al puntero ---------- */
.spot{position:relative; isolation:isolate;}
.spot::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; opacity:0; transition:opacity var(--dur) var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--color-primary-soft), transparent 70%);
}
.spot:hover::after{opacity:1;}

/* ---------- Comparativa ---------- */
.compare{
  display:flex; flex-direction:column; gap:1px; background:var(--color-rule);
  border:1px solid var(--color-rule); border-radius:var(--radius-lg); overflow:hidden;
}
.compare-head{display:none;}
.compare-row{display:grid; grid-template-columns:1fr; gap:1px; background:var(--color-rule);}
.compare-topic{
  background:var(--color-surface-2); padding:var(--space-3) var(--space-5);
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text); display:flex; align-items:center;
}
.compare-cell{background:var(--color-surface); padding:var(--space-4) var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2); justify-content:center;}
.compare-who{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted);}
.compare-us .compare-who{color:var(--color-primary);}
.compare-mark{display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-sm); line-height:1.55;}
.compare-mark svg{width:18px; height:18px; flex:none; margin-top:2px;}
.compare-them{color:var(--color-text-muted);}
.compare-them svg{color:var(--color-text-muted);}
.compare-us svg{color:var(--color-primary);}
.compare-us strong{font-weight:600;}
@media (min-width:760px){
  .compare-row,.compare-head{
    display:grid; gap:1px; background:var(--color-rule);
    grid-template-columns:minmax(0,.78fr) minmax(0,1.11fr) minmax(0,1.11fr);
  }
  .compare-head span{
    background:var(--color-surface-2); padding:var(--space-4) var(--space-5);
    font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
    text-transform:uppercase; color:var(--color-text-muted);
  }
  .compare-head span:last-child{color:var(--color-primary);}
  .compare-topic{background:var(--color-surface); padding:var(--space-4) var(--space-5);}
  .compare-who{display:none;}
}

/* ---------- Esta pagina como muestra ----------
   Sin portafolio todavia, la prueba mas honesta de lo que sabemos hacer es el
   sitio en el que esta parado el visitante. Numeros medidos, no adjetivos. */
.muestra{display:grid; grid-template-columns:repeat(auto-fit, minmax(215px,1fr)); gap:var(--space-5);}
.metrica{
  background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-lg); padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-3);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.metrica:hover{transform:translateY(-5px); border-color:var(--color-primary);}
.metrica-n{
  font-family:var(--font-display); font-weight:800; font-size:var(--text-3xl);
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:var(--space-2); color:var(--color-primary);
}
.metrica-n small{font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500;
  letter-spacing:.08em; color:var(--color-text-muted);}
.metrica h3{font-family:var(--font-display); font-size:var(--text-base); font-weight:700; letter-spacing:-.01em;}
.metrica p{font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.55; text-wrap:pretty;}
.metrica-barra{height:4px; border-radius:2px; background:var(--color-rule); overflow:hidden;}
.metrica-barra i{
  display:block; height:100%; width:0; border-radius:2px; background:var(--color-primary);
  transition:width 1.1s var(--ease-expo) var(--barra-delay,0ms);
}
.metrica.is-in .metrica-barra i{width:var(--barra,100%);}

/* ---------- Para quien no somos ---------- */
.nope{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:var(--space-5);}
.nope article{
  border:1px solid var(--color-rule); border-left:3px solid var(--color-rule-strong);
  border-radius:0 var(--radius) var(--radius) 0; padding:var(--space-5) var(--space-6);
  background:var(--color-surface); transition:border-left-color var(--dur) var(--ease);
}
.nope article:hover{border-left-color:var(--color-primary);}
.nope h3{font-family:var(--font-display); font-size:var(--text-lg); font-weight:700;
  letter-spacing:-.02em; margin-bottom:var(--space-3);}
.nope p{font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.6; text-wrap:pretty;}

/* ---------- Precios ---------- */
/* Asimetrico a proposito: el plan destacado ocupa las dos filas de la
   izquierda y los otros dos se apilan a la derecha. Tres tarjetas iguales en
   fila es la forma de precios mas repetida que existe. */
.price-grid{display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:start;}
@media (min-width:900px){
  .price-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); align-items:stretch;}
  .plan--featured{grid-row:1 / span 2;}
}
.plan{
  display:flex; flex-direction:column; gap:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-lg); padding:var(--space-6); position:relative;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan:hover{transform:translateY(-6px); border-color:var(--color-rule-strong);}
.plan--featured{border-color:var(--color-primary); border-width:2px; box-shadow:var(--glow);}
.plan--featured:hover{border-color:var(--color-primary);}
.plan-flag{
  position:absolute; top:0; right:var(--space-5); transform:translateY(-50%);
  background:var(--color-primary); color:var(--color-on-primary);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm);
}
.plan-name{font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; letter-spacing:-.025em;}
.plan-price{font-family:var(--font-display); font-weight:800; font-size:var(--text-3xl);
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;}
.plan-price small{font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted);
  letter-spacing:0; display:block; margin-top:var(--space-2); font-family:var(--font-body);}
.plan-desc{font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.6; text-wrap:pretty;}
.plan-feats{display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-5); border-top:1px solid var(--color-rule);}
.plan-feats li{display:flex; gap:var(--space-3); font-size:var(--text-sm); line-height:1.5;}
.plan-feats svg{width:17px; height:17px; flex:none; color:var(--color-primary); margin-top:3px;}
/* flex:none. Dentro de una tarjeta en columna, el boton es un flex item y
   flex-shrink lo comprimia por debajo de su min-height: medido 46px contra
   los 48 que manda la regla. */
.plan .btn{margin-top:auto; flex:none;}
.plan-extra{
  margin-top:var(--space-6); padding:var(--space-5) var(--space-6);
  border:1px solid var(--color-rule); border-left:3px solid var(--color-primary);
  border-radius:var(--radius); background:var(--color-surface);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap;
}
.plan-extra p{font-size:var(--text-base); color:var(--color-text-soft); max-width:62ch;}
.plan-extra strong{color:var(--color-text); font-weight:600;}

/* ---------- Cotizador ---------- */
.quote-band{
  display:grid; grid-template-columns:1fr; gap:clamp(32px, 4vw, 64px); align-items:center;
  margin-top:clamp(40px, 5vw, 72px); padding-top:clamp(40px, 5vw, 72px);
  border-top:1px solid var(--color-rule);
}
@media (min-width:900px){ .quote-band{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);} }
.quote-why{display:flex; flex-direction:column; gap:var(--space-4);}
.quote-why ul{display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2);}
.quote-why li{display:flex; gap:var(--space-3); font-size:var(--text-base); line-height:1.55;}
.quote-why svg{width:19px; height:19px; flex:none; color:var(--color-primary); margin-top:4px;}

.quoter{
  background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:var(--space-5);
}
.quoter-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);}
.quoter-head h3{font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; letter-spacing:-.025em;}
.quoter-step{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted);}
.field{display:flex; flex-direction:column; gap:var(--space-3);}
.field-label{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted);}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-2);}
.chip{
  min-height:44px; padding:var(--space-2) var(--space-4);
  background:transparent; color:var(--color-text-muted);
  border:1px solid var(--color-border-control); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:500; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-back);
}
.chip:hover{border-color:var(--color-text); color:var(--color-text);}
.chip[aria-pressed="true"]{
  background:var(--color-primary); color:var(--color-on-primary);
  border-color:var(--color-primary); font-weight:600; transform:translateY(-1px);
}
.quote-out{display:grid; grid-template-columns:1fr auto; gap:var(--space-4); align-items:end;
  padding-top:var(--space-5); border-top:1px dashed var(--color-rule-strong);}
.quote-price{
  font-family:var(--font-display); font-weight:800; font-size:var(--text-3xl);
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--color-text); display:flex; align-items:flex-end; white-space:nowrap;
}
.quote-price .cur{font-size:.44em; color:var(--color-text-muted); margin-left:var(--space-2);
  letter-spacing:0; font-weight:600;}
/* Cada digito es una columna que rueda hasta su cifra.
   Las columnas llevan los diez numeros dentro, asi que para un lector de
   pantalla el precio seria "$01234567890123456789...". Por eso el bloque
   animado va marcado como decorativo y el valor real vive en .sr-only. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* inline-BLOCK, no inline-flex. Con flex, la columna de diez digitos se
   convierte en flex item y "align-items:stretch" la aplasta a la altura del
   contenedor: los diez numeros quedaban comprimidos en 1em, el desplazamiento
   no caia en ninguna cifra y dos rodillos se iban a una segunda linea. En
   bloque, la columna toma su altura natural de 10em y el recorte funciona. */
.rodillo{display:inline-block; overflow:hidden; height:1em; line-height:1; vertical-align:bottom;}
.rodillo i{
  display:block; font-style:normal; line-height:1;
  transition:transform 560ms var(--ease-expo) var(--d,0ms);
}
.rodillo i span{display:block; height:1em; line-height:1;}
.quote-meta{text-align:right; font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.4;}
.quote-meta b{display:block; color:var(--color-text); font-weight:600; font-variant-numeric:tabular-nums;}
.quote-note{font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.5;}
.quote-note a{color:var(--color-primary);}

/* ---------- Preguntas ---------- */
.faq{display:flex; flex-direction:column; border-top:1px solid var(--color-rule);}
.faq details{border-bottom:1px solid var(--color-rule);}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding-block:var(--space-5); cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:700;
  letter-spacing:-.02em; transition:color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--color-primary);}
.faq-sign{width:26px; height:26px; flex:none; position:relative;
  border:1px solid var(--color-border-control); border-radius:var(--radius-sm);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);}
.faq summary:hover .faq-sign{border-color:var(--color-primary);}
.faq-sign::before,.faq-sign::after{
  content:""; position:absolute; inset:50% 6px auto; height:2px;
  background:currentColor; transform:translateY(-50%);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-sign::after{transform:translateY(-50%) rotate(90deg);}
.faq details[open] .faq-sign{transform:rotate(180deg);}
.faq details[open] .faq-sign::after{transform:translateY(-50%) rotate(0deg); opacity:0;}
.faq details[open] summary{color:var(--color-primary);}
/* La apertura la controla <details> nativo y la anima el CSS. Sin maquina de
   estados en JavaScript: el cierre es instantaneo y el control nunca se traba. */
.faq-body{overflow:hidden;}
.faq details[open] .faq-body{animation:abrirRespuesta 300ms var(--ease);}
@keyframes abrirRespuesta{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }
.faq-a{padding-bottom:var(--space-5); max-width:64ch; color:var(--color-text-muted);
  font-size:var(--text-base); line-height:1.65; text-wrap:pretty;}

/* ---------- Contacto ---------- */
/* Columnas iguales. Aqui NO se rompe la simetria: es el cierre de la pagina y
   un formulario, y dos columnas de 439 contra 516 se leen como descuadre, no
   como decision. La asimetria vive en el hero y en el indice, no aqui. */
.contact-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(40px, 5vw, 72px); align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-ways{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-6);}
.way{
  display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4); text-decoration:none;
  border:1px solid var(--color-border-control); border-radius:var(--radius);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.way:hover{border-color:var(--color-primary); background:var(--color-surface); transform:translateX(5px);}
.way-icon{width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:var(--radius); background:var(--color-primary-soft); color:var(--color-primary);}
.way-icon svg{width:20px; height:20px;}
.way b{display:block; font-size:var(--text-sm); font-weight:600;}
.way span{font-size:var(--text-sm); color:var(--color-text-muted);}

.form{background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-5);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.form label{display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-sm); font-weight:600;}
.form input,.form select,.form textarea{
  min-height:48px; padding:var(--space-3) var(--space-4);
  background:var(--color-bg); color:var(--color-text);
  border:1px solid var(--color-border-control); border-radius:var(--radius);
  font-size:var(--text-base); font-weight:400; font-family:var(--font-body);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form textarea{min-height:118px; resize:vertical;}
.form ::placeholder{color:var(--color-text-muted); opacity:1;}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft);
}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:var(--color-alert);}
.form-hint{font-size:var(--text-xs); color:var(--color-text-muted); font-weight:400;}
.form-note{font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.55;}
.form-note a{color:var(--color-primary);}
.form-status{font-size:var(--text-sm); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius); border:1px solid var(--color-ok); color:var(--color-ok);}
.form-status.is-error{border-color:var(--color-alert); color:var(--color-alert);}
.form-status[hidden]{display:none;}
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; pointer-events:none;}

/* ---------- Pie ---------- */
.site-footer{background:var(--color-bg-deep); padding-block:var(--space-8) var(--space-6);
  border-top:1px solid var(--color-rule); position:relative;}
.footer-top{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2, minmax(0,1fr));
  gap:var(--space-7); padding-bottom:var(--space-7); border-bottom:1px solid var(--color-rule);}
@media (max-width:760px){ .footer-top{grid-template-columns:1fr 1fr;} }
.footer-brand{grid-column:1 / -1;}
@media (min-width:761px){ .footer-brand{grid-column:auto;} }
.footer-brand p{margin-top:var(--space-4); font-size:var(--text-sm);
  color:var(--color-text-muted); max-width:36ch; line-height:1.6;}
.footer-col h4{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-4);}
.footer-col li + li{margin-top:var(--space-3);}
.footer-col a{font-size:var(--text-sm); color:var(--color-text-soft); text-decoration:none;
  position:relative; transition:color var(--dur-fast) var(--ease);}
.footer-col a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--color-primary); transition:width var(--dur) var(--ease);}
.footer-col a:hover{color:var(--color-primary);}
.footer-col a:hover::after{width:100%;}
.footer-bot{display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  padding-top:var(--space-5); font-size:var(--text-xs); color:var(--color-text-muted);}

/* ---------- Aparicion al hacer scroll ----------
   El estado oculto cuelga de .js-anim. Si el script del <head> no corrio,
   estos elementos -o sea casi toda la pagina- se ven desde el primer momento
   en vez de esperar a un observador que nunca va a llegar. */
.rv{transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay:var(--rv-delay, 0ms);}
.js-anim .rv{opacity:0; transform:translateY(20px);}
.js-anim .rv.is-in{opacity:1; transform:none;}

/* Entrada 3D. La perspectiva la pone .section, asi que todas las piezas de la
   pagina comparten el mismo punto de fuga y parecen del mismo espacio. */
.d3{transition:opacity .75s var(--ease-expo), transform .95s var(--ease-expo);
  transition-delay:var(--rv-delay, 0ms);}
.js-anim .d3{opacity:0; transform:rotateX(16deg) translateY(46px) translateZ(-120px);}
.js-anim .d3.is-in{opacity:1; transform:none;}

/* ---------- Texto largo · avisos legales ---------- */
.prose{max-width:70ch;}
.prose h2{font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700;
  letter-spacing:-.025em; margin-top:var(--space-8); margin-bottom:var(--space-4);}
.prose h2:first-of-type{margin-top:var(--space-6);}
.prose p{margin-bottom:var(--space-4); color:var(--color-text-soft); line-height:1.7; text-wrap:pretty;}
.prose ul{margin:0 0 var(--space-4); display:flex; flex-direction:column; gap:var(--space-2);}
.prose li{padding-left:var(--space-5); position:relative; color:var(--color-text-soft); line-height:1.65;}
.prose li::before{content:""; position:absolute; left:0; top:.65em; width:7px; height:7px;
  background:var(--color-primary); border-radius:1px;}
.prose a{color:var(--color-primary); text-underline-offset:3px;}
.aviso-legal{border:1px solid var(--color-primary); border-left-width:4px; border-radius:var(--radius);
  padding:var(--space-5); margin-bottom:var(--space-7); background:var(--color-primary-soft);}
.aviso-legal p{color:var(--color-text); margin-bottom:0;}
.aviso-legal strong{font-weight:600;}

/* ---------- Telefono ----------
   Aqui es donde entra la mayoria del trafico en Mexico, asi que no son
   retoques sueltos: el objetivo es que el primer boton se vea antes de un
   scroll completo y que el hero no se coma dos pantallas. */
@media (max-width:600px){
  /* La cabecera baja de 70 a 60: en una pantalla de 815px, 10px son medio
     renglon de titular recuperado en cada scroll. */
  :root{--h-cabecera:60px;}

  .section{padding-block:clamp(48px, 11vw, 72px);}
  .section--tight{padding-block:36px;}
  .section--inset{padding-block:16px;}
  .section--inset > .wrap{padding-inline:var(--space-5); border-radius:var(--radius-lg);}

  /* HERO. El titular y el membrete son lo que empujaba el CTA fuera de la
     primera pantalla; se comprimen los dos sin tocar su tamano de letra. */
  .hero{padding-block:var(--space-5) 0;}
  .membrete{margin-bottom:var(--space-5);}
  .membrete > div{padding-block:var(--space-3);}
  .membrete dt{font-size:11px; margin-bottom:6px;}   /* 10px no se lee en un telefono */
  .membrete dd{font-size:var(--text-base);}
  .hero-statement{margin-bottom:var(--space-5); line-height:1.02;}
  /* 16px en vez de 18: en una columna de 335px un parrafo de cinco renglones
     se lee mejor a 16, y de paso acerca el boton a la primera pantalla. */
  .hero-dicho .lead{font-size:var(--text-base);}
  .hero-tail{gap:var(--space-6);}
  .hero-dicho{gap:var(--space-4);}
  /* Sin desborde: la ficha ocupa el ancho completo, asi que sobresalir no se
     nota y solo roba espacio. El desborde es un gesto de escritorio. */
  .hero-ficha{margin-bottom:0;}
  .hero + .section{padding-top:clamp(48px, 11vw, 72px);}

  /* FICHA. Etiqueta arriba y valor abajo: en dos columnas el valor se quedaba
     con 165px y "6 paginas, panel para editarlo tu..." caia en seis renglones. */
  .ficha-body{padding:var(--space-5);}
  .ficha-top,.ficha-foot{padding:var(--space-3) var(--space-5);}
  .ficha-rows > div{grid-template-columns:1fr; gap:var(--space-1); padding-block:var(--space-3);}
  .ficha-titulo{margin-bottom:var(--space-4);}

  .quoter{padding:var(--space-5); border-radius:var(--radius);}
  .quote-out{grid-template-columns:1fr; gap:var(--space-3); align-items:start;}
  .quote-meta{text-align:left;}
  .chip{padding:var(--space-2) var(--space-3); font-size:.83rem;}

  .plan,.form,.metrica{padding:var(--space-5);}
  .nope article{padding:var(--space-5);}
  .work-result{gap:var(--space-4);}

  /* INDICE. La fila se parte en dos renglones: numero + nombre arriba, precio
     debajo alineado a la izquierda, que es como se lee una carta. */
  .indice summary{padding-block:var(--space-4); gap:var(--space-2) var(--space-4);}
  .indice-detalle{gap:var(--space-4); padding-bottom:var(--space-5);}

  .faq summary{font-size:var(--text-base); gap:var(--space-4); padding-block:var(--space-4);}
  .faq-a{font-size:var(--text-sm);}

  .plan-extra{padding:var(--space-5); flex-direction:column; align-items:flex-start; gap:var(--space-4);}
  .plan-extra .btn{width:100%;}
  .quote-band{margin-top:var(--space-6); padding-top:var(--space-6);}

  .footer-top{gap:var(--space-6); padding-bottom:var(--space-6);}
  .contact-ways{margin-top:var(--space-5);}
  .intro svg{width:64px; height:64px;}
}

@media (max-width:480px){
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%;}
  /* Las tarjetas de contacto a lo ancho completo y con mas altura: son el
     ultimo objetivo tactil de la pagina y el mas importante. */
  .way{padding:var(--space-4) var(--space-5);}
}

@media (max-width:380px){
  .brand svg{width:26px; height:26px;}
  .brand-name{font-size:1.1rem;}
  .membrete dd{font-size:var(--text-sm);}
}

/* Sin el destello azul de Android al tocar: lo sustituyen los estados propios
   de cada control, que ya estan definidos. */
@media (hover:none){
  *{-webkit-tap-highlight-color:transparent;}
}

/* En tactil no hay puntero que seguir: se apagan los efectos que dependen de
   el, para no dejar estados pegados despues de un toque. */
@media (hover:none){
  .spot::after{display:none;}
  .ficha{transform:none !important;}
  .ficha::after{display:none;}
  .btn{transform:none !important;}
}

/* ---------- Preferencias del sistema ---------- */
@media (prefers-reduced-motion:reduce){
  .rv,.d3{opacity:1 !important; transform:none !important; transition:none !important;}
  .line > span{transform:none !important; opacity:1 !important; transition:none !important;}
  .step::after,.section-edge::after,.metrica-barra i{transition:none;}
  .btn,.svc,.work,.chip,.way,.plan,.stat,.brand svg,.svc-icon,.work-thumb img,.metrica{transition:none;}
  .spot::after,.ficha::after{display:none;}
  .ficha{transform:none !important; transition:none;}
  .faq details[open] .faq-body{animation:none;}
  .btn-primary:hover::after{animation:none;}
  .intro{display:none !important;}
  .rodillo i{transition:none;}
}

@media (prefers-contrast:more){
  :root{--color-text-muted:var(--color-text-soft);}
  .svc,.work,.plan,.form,.quoter,.way,.metrica,.nope article{border-width:2px;}
  .nav-links a{color:var(--color-text);}
}

/* ---------- Impresion ---------- */
@media print{
  :root{
    --color-bg:#FFF; --color-bg-deep:#FFF; --color-bg-alt:#FFF; --color-surface:#FFF;
    --color-surface-2:#FFF; --color-text:#000; --color-text-soft:#222; --color-text-muted:#444;
    --color-rule:#BBB; --color-rule-strong:#888; --color-border-control:#888;
    --color-primary:#000; --color-on-primary:#FFF;
  }
  .section::before,.hero-canvas,.hero-glow,.progress,.site-header,
  .nav-toggle,.spot::after,.intro{display:none !important;}
  body{background:#FFF; color:#000;}
  .rv,.d3,.line > span{opacity:1 !important; transform:none !important;}
  .section{padding-block:24px; break-inside:avoid;}
  .plan,.svc,.work,.step,.metrica,.nope article{break-inside:avoid;}
  .faq details{break-inside:avoid;}
  .faq-body{overflow:visible !important;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:10px; color:#555;}
}