/* ===========================================================
   ALVARO ARAMAYO CHAIN — Desarrollo web
   Dirección de diseño: ÍNDICE

   El negocio vende una sola cosa que nadie más ofrece: los precios
   están publicados. El diseño existe para que eso se vea antes de
   leerlo. De ahí sale todo el sistema:

   · TINTA Y LATÓN. Carbón cálido de base, texto hueso (nunca blanco
     puro: el blanco puro sobre negro es la firma de la plantilla) y
     un solo acento de latón. El latón dice valor, moneda, oficio.
   · DOS FAMILIAS. Serif old-style para titulares y nombres de plan;
     Jost geométrica para interfaz y para TODOS los números. El
     contraste entre las dos es la identidad, no un adorno.
   · RIEL AL MARGEN. Los rótulos numerados salen de la columna de
     texto y viven en un margen propio. Composición editorial
     asimétrica, no bloques centrados.
   · REGLA GRADUADA. Cada sección abre con una barra de latón y
     marcas de medición. Es el motivo de la casa y significa algo:
     medido, publicado, sin adivinanzas.
   · FILETES DE 1px COMO MATERIAL. Radio de 2px. Sin vidrio, sin
     glows, sin manchas de degradado. Es un índice, no una burbuja.
   =========================================================== */

/* ---------- TIPOGRAFÍA AUTOALOJADA ----------
   Jost va primero, antes que Century Gothic: es la única forma de que
   todos vean lo mismo. Un archivo variable de 27 KB, sin recursos
   externos: el sitio no depende de nadie. */
@font-face{
  font-family:'Jost';
  src:url('assets/fonts/jost-var.woff2') format('woff2-variations'),
      url('assets/fonts/jost-var.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  /* superficies: carbón cálido en capas. La profundidad sale del
     valor, nunca de un degradado decorativo */
  --ink:       #0B0B0A;
  --ink-2:     #101010;   /* banda apenas levantada */
  --ink-3:     #060605;   /* banda hundida */
  --surface:   #151514;   /* panel */
  --surface-2: #1E1E1C;   /* panel en estado activo */

  /* texto: hueso, no blanco. Es la decisión de color más importante
     del sitio y la que más lo aleja de una plantilla */
  --bone:      #F4EFE6;
  --bone-2:    #BDB6A8;
  --bone-3:    #948D80;   /* rótulos */

  /* filetes: hueso a baja opacidad. Son el material del sitio */
  --line:      rgba(244,239,230,.13);
  --line-2:    rgba(244,239,230,.26);
  --line-3:    rgba(244,239,230,.46);
  --line-full: rgba(244,239,230,.88);

  /* latón: aparece poco y siempre informa. Nunca rellena una sección */
  --brass:     #C2913C;
  --brass-hi:  #E7C179;   /* sobre tinta, para texto chico */
  --brass-dp:  #7E5C1F;
  --brass-wash:rgba(194,145,60,.075);
  --on-brass:  #0B0B0A;   /* el botón primario lleva texto de tinta */

  /* estados */
  --ok:        #6E9C63;
  --warn:      #C09140;

  /* dos familias y nada más.
     Serif old-style: Iowan y Palatino cubren Mac y Windows, Georgia
     cubre el resto. Todas son de proporción humanista y ninguna
     necesita descargarse. */
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',
          Georgia,'Times New Roman',serif;
  --sans:'Jost','Century Gothic','URW Gothic',system-ui,-apple-system,
         'Segoe UI',sans-serif;
  /* tercera familia, de uso unico: la columna de codigo del hero. El codigo
     escrito en una geometrica no se lee como codigo y no alinea. */
  --mono:ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono',Consolas,
         'Liberation Mono',Menlo,monospace;

  /* ritmo vertical */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --s9:104px; --s10:140px;

  --r:2px;
  --pad:28px;
  --maxw:1240px;
  --rail:168px;           /* el margen numerado */

  --t-fast:.16s;
  --t-mid:.34s;
  --t-slow:.7s;
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;scroll-padding-top:96px;
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--ink);color:var(--bone-2);
  font-family:var(--sans);
  font-size:16px;line-height:1.65;font-weight:400;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0;font-weight:400;color:var(--bone);}
p{margin:0;}
ul,ol,dl,dd{margin:0;padding:0;}
li{list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
fieldset{border:0;margin:0;padding:0;min-width:0;}
::selection{background:var(--brass);color:var(--on-brass);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--brass);color:var(--on-brass);
  padding:13px 20px;font-weight:500;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
}
.skip:focus{left:8px;top:8px;}

/* ===========================================================
   ESCALA TIPOGRÁFICA
   Los titulares son serif: es lo primero que separa este sitio de
   una landing armada con componentes. Los números son geométricos
   y tabulares, porque los números acá son el producto.
   =========================================================== */
.display,.display-2{
  font-family:var(--serif);
  font-weight:400;color:var(--bone);
  text-wrap:balance;
}
.display{
  font-size:clamp(35px,5.9vw,72px);
  line-height:1.05;letter-spacing:-.019em;
}
.display-2{
  font-size:clamp(26px,3.7vw,45px);
  line-height:1.12;letter-spacing:-.014em;
}
.lead{
  font-weight:300;
  font-size:clamp(16.5px,1.35vw,19.5px);
  line-height:1.62;letter-spacing:.004em;
  color:var(--bone-2);
}

/* rótulo de índice: versalitas espaciadas en la geométrica. Etiqueta,
   nunca decora. Es la voz técnica que equilibra los titulares serif */
.eyebrow,.sec-idx,.ficha-cap,.quote-cap,.work-kind,.qbar-t{
  font-family:var(--sans);
  font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-3);
}

.num,.opt-p,.quote-total,.quote-usd,.row dd,.ficha-list b,.plan-meta b{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ---------- HILO DE PROGRESO ----------
   2px de latón arriba. Información de posición, no adorno. */
.rule-top{position:fixed;inset:0 0 auto;height:2px;z-index:90;pointer-events:none;}
.rule-top span{display:block;height:100%;width:0;background:var(--brass);}

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--ink) 84%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease),background var(--t-mid);
}
@supports not (backdrop-filter:blur(1px)){ .nav{background:var(--ink);} }
.nav.is-stuck{
  border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--ink) 97%,transparent);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:var(--s7);
}

/* el logotipo: nombre en serif, oficio en versalitas, separados por
   un filete. Un lockup, no un texto suelto */
.brand{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--serif);
  font-size:17.5px;font-weight:400;letter-spacing:-.005em;color:var(--bone);
  white-space:nowrap;
}
/* La marca es el cardón: un archivo SVG, no una forma dibujada en CSS.
   Va la variante sólida del kit y no el isotipo completo, porque el isotipo
   tiene trazo fino y un </> en la base que a este tamaño se vuelven ruido;
   el propio manual pide 48px mínimos para esa versión.
   El amarillo del logo se respeta tal cual: es la marca, y la paleta del
   sitio no se toca. Por eso el hover no le cambia el color, sólo lo levanta
   apenas, que es lo que se puede hacer sin adulterar el gradiente. */
.brand-mark{
  width:28px;height:28px;flex:none;display:block;
  transition:transform var(--t-mid) var(--ease),filter var(--t-mid);
}
.brand:hover .brand-mark{filter:brightness(1.08);transform:translateY(-1px);}
.brand-thin{
  font-family:var(--sans);font-weight:500;
  font-size:9.5px;letter-spacing:.185em;text-transform:uppercase;
  color:var(--bone-3);
  border-left:1px solid var(--line-2);
  padding-left:12px;margin-left:2px;
  transition:color var(--t-fast);
}
.brand:hover .brand-thin{color:var(--bone-2);}

.nav-end{display:flex;align-items:center;gap:var(--s5);margin-left:var(--s5);}
.link-out{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-3);transition:color var(--t-fast);
}
.link-out svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-mid) var(--ease);}
.link-out:hover{color:var(--bone);}
.link-out:hover svg{transform:translate(2px,-2px);}

/* ---------- IDIOMA ---------- */
.lang{display:inline-flex;align-items:center;gap:7px;}
.lang-b{
  font-size:10.5px;font-weight:500;letter-spacing:.15em;
  color:var(--bone-3);padding:5px 1px;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.lang-b:hover{color:var(--bone);}
.lang-b.on{color:var(--bone);border-bottom-color:var(--brass);}
.lang-sep{color:var(--line-3);font-size:10px;}

/* ===========================================================
   MENÚ PRINCIPAL
   Seis destinos en una sola fila, sin desplegables. Versalitas
   espaciadas y un filete de latón que se dibuja al pasar el mouse; la
   página actual lo lleva puesto. No hay nada que abrir ni cerrar: cada
   elemento del menú es un destino real, y se llega en un clic.
   =========================================================== */
.menu{display:flex;align-items:center;gap:var(--s6);margin-left:auto;}
.menu-b{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bone-2);
  padding:12px 0;white-space:nowrap;position:relative;
  transition:color var(--t-fast);
}
.menu-b::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--ease);
}
.menu-b:hover,.menu-link.is-active{color:var(--bone);}
.menu-b:hover::after,.menu-link.is-active::after{
  transform:scaleX(1);transform-origin:left;
}

/* botón de menú angosto: dos filetes, no un ícono genérico */
.nav-toggle{display:none;width:34px;height:34px;position:relative;margin-left:auto;}
.nav-toggle span{
  position:absolute;left:6px;width:22px;height:1.5px;background:var(--bone);
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast);
}
.nav-toggle span:first-child{top:13px;}
.nav-toggle span:last-child{top:20px;}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

/* ===========================================================
   BOTONES
   Versalitas espaciadas, radio de 2px. El movimiento es de color y
   de relleno, nunca de escala: escalar un botón al pasar el mouse es
   el gesto que delata una plantilla.
   =========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 26px;border-radius:var(--r);
  font-family:var(--sans);
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  border:1px solid transparent;position:relative;isolation:isolate;
  transition:background var(--t-mid) var(--ease),color var(--t-fast),
             border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.btn-sm{padding:10px 16px;font-size:10.5px;letter-spacing:.13em;}
.btn-full{width:100%;}

/* primario: latón lleno con texto de tinta. Es el único elemento
   completamente relleno del sitio, y por eso se ve desde lejos */
.btn-gold{background:var(--brass);color:var(--on-brass);border-color:var(--brass);}
.btn-gold:hover{
  background:var(--brass-hi);border-color:var(--brass-hi);
  box-shadow:0 12px 34px -18px var(--brass);
}
/* secundario: sólo filete. El relleno entra desde abajo */
.btn-line{border-color:var(--line-3);color:var(--bone);overflow:hidden;}
.btn-line::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(244,239,230,.06);
  transform:translateY(101%);
  transition:transform var(--t-mid) var(--ease-out);
}
.btn-line:hover{border-color:var(--bone-3);}
.btn-line:hover::before{transform:none;}
/* el de la nav: latón chico, siempre presente pero sin gritar */
.btn-solid{background:var(--brass);color:var(--on-brass);border-color:var(--brass);}
.btn-solid:hover{background:var(--brass-hi);border-color:var(--brass-hi);}

.ico-down,.ico-out{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-mid) var(--ease);}
.btn:hover .ico-down{transform:translateY(3px);}
.btn:hover .ico-out{transform:translateX(3px);}

/* ===========================================================
   LA REGLA GRADUADA
   El motivo de la casa. Cada sección abre con una barra de latón
   corta seguida de marcas de medición que se apagan. No es un
   adorno: dice medido, publicado, sin adivinanzas. Se traza al
   entrar en pantalla y se queda quieta.
   =========================================================== */
.band,.close,.shot,.page-head{position:relative;}

.band::before,.close::before,.shot::before,.page-head::before{
  content:"";position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);
  width:min(100% - var(--pad) * 2,var(--maxw) - var(--pad) * 2);
  height:2px;pointer-events:none;z-index:2;
  background:var(--brass);
  clip-path:inset(0 calc(100% - 76px) 0 0);
  transition:clip-path 1.05s var(--ease-out);
}
/* sin JS la barra ya está trazada; con JS arranca en cero y se dibuja */
.js .band::before,.js .close::before,.js .shot::before,.js .page-head::before{
  clip-path:inset(0 100% 0 0);
}
.js .band.is-seen::before,.js .close.is-seen::before,
.js .shot.is-seen::before,.js .page-head.is-seen::before{
  clip-path:inset(0 calc(100% - 76px) 0 0);
}

/* las marcas de medición continúan la barra y se desvanecen.
   .shot usa su ::after para el escrito sobre la foto, así que no las lleva */
.band::after,.close::after,.page-head::after{
  content:"";position:absolute;top:3px;left:50%;
  transform:translateX(-50%);
  width:min(100% - var(--pad) * 2,var(--maxw) - var(--pad) * 2);
  height:6px;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 84px,#000 94px,transparent 330px);
  mask-image:linear-gradient(90deg,transparent 0 84px,#000 94px,transparent 330px);
  transition:opacity .85s var(--ease-out) .35s;
}
.js .band::after,.js .close::after,.js .page-head::after{opacity:0;}
.js .band.is-seen::after,.js .close.is-seen::after,.js .page-head.is-seen::after{opacity:1;}

/* ===========================================================
   HERO
   Titular serif grande contra mucho aire, y el rótulo de estado
   corrido al margen. La primera pantalla no explica: afirma.
   =========================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(44px,5vw,72px);
}
/* la columna de contenido sigue midiendo lo mismo que el resto del sitio;
   lo que cambia es que la seccion ahora va a ancho completo para que la
   foto sangre de borde a borde */
.hero-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;}
.hero-bg{position:absolute;inset:0;z-index:-2;}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:brightness(.95) contrast(1.02) saturate(.88) hue-rotate(-4deg);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* la foto emerge desde la nav y se apaga al pie, en vez de arrancar
       y cortarse con dos costuras horizontales */
    linear-gradient(180deg,var(--ink) 0%,rgba(11,11,10,.58) 11%,
                    rgba(11,11,10,0) 32%,rgba(11,11,10,0) 60%,
                    rgba(11,11,10,.52) 100%),
    /* placa en diagonal: el titular vive arriba a la izquierda y la
       diagonal dorada de la foto entra por abajo a la derecha, asi que
       casi no se pisan */
    linear-gradient(112deg,rgba(11,11,10,.93) 0%,rgba(11,11,10,.74) 38%,
                    rgba(11,11,10,.30) 66%,rgba(11,11,10,.10) 100%);
}
.hero-say{position:relative;}
/* flex y no inline-flex: en inline-flex la caja se dimensiona a su contenido,
   y el texto largo del rotulo estiraba el documento mas alla de la pantalla
   del celular. Como flex queda atada al ancho del contenedor y el texto parte. */
.eyebrow{display:flex;align-items:flex-start;gap:11px;margin-bottom:var(--s5);}

/* ---------- COLUMNA DE CÓDIGO ----------
   Ocupa el margen del hero, donde antes iba el rótulo de estado: es "el
   costado izquierdo del titular". Se escribe y se borra sola.
   Es la única animación en bucle del sitio, y va en contra de la regla de
   la casa a pedido expreso. Para que no cheapee el conjunto se la mantiene
   chica, en tono bajo y en el margen: acompaña al titular, no le compite.
   Con prefers-reduced-motion queda un bloque fijo, sin movimiento. */
.hero-code{
  font-family:var(--mono);
  font-size:10px;line-height:2.05;letter-spacing:0;
  color:var(--bone-3);
  white-space:pre;
  margin-bottom:var(--s5);
}
/* la caja reserva sus cuatro filas: al escribirse y borrarse no empuja
   al titular ni un pixel */
.js .hero-code{min-height:calc(4 * 2.05em);}
.hero-code .cl{display:block;min-height:1em;opacity:.6;}
.hero-code .cl.activa{opacity:1;color:var(--bone-2);}
.hero-code .cl.activa::after{
  content:"";display:inline-block;
  width:.5em;height:1.05em;vertical-align:-.2em;margin-left:1px;
  background:var(--brass);
  animation:cursor 1.05s steps(1) infinite;
}
@keyframes cursor{50%{opacity:0;}}
.hero .display{max-width:20ch;}
.lead{margin-top:var(--s5);max-width:49ch;}
.hero-actions{margin-top:var(--s7);display:flex;gap:var(--s3);flex-wrap:wrap;}

/* ---------- FRANJA DE GARANTÍAS ----------
   Una tabla de especificación numerada, no tres columnas con íconos.
   Los números salen de un contador: no hay texto de más en el HTML. */
.hero-band{
  position:relative;
  margin-top:clamp(52px,7vw,88px);
  padding-top:var(--s3);
  border-top:1px solid var(--line-2);
  counter-reset:hb;
  display:grid;grid-template-columns:1fr;
}
.hero-band::before{
  content:"";position:absolute;top:2px;left:0;width:100%;height:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 250px);
  mask-image:linear-gradient(90deg,#000,transparent 250px);
}
.hero-band li{
  counter-increment:hb;position:relative;
  padding:16px 0 16px 34px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;letter-spacing:.012em;color:var(--bone-2);
}
.hero-band li::before{
  content:counter(hb,decimal-leading-zero);
  position:absolute;left:0;top:18px;
  font-family:var(--sans);
  font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--brass);
}
@media (min-width:860px){
  .hero-band{grid-template-columns:repeat(4,1fr);column-gap:var(--s6);}
  .hero-band li{padding:22px 0 0;border-bottom:0;}
  .hero-band li::before{position:static;display:block;margin-bottom:10px;}
}

/* ---------- EL RIEL: rótulos numerados al margen ----------
   A partir de 1024 los rótulos salen de la columna de texto y viven
   en un margen propio. Es lo que da la asimetría editorial: ningún
   generador de sitios compone así. */
@media (min-width:1024px){
  .hero-say{
    display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--s7);
  }
  .hero-say > .hero-code{
    grid-column:1;grid-row:1;
    margin:0;padding-top:.9em;
  }
  .hero-say > .display{grid-column:2;grid-row:1;}
  .hero-say > .lead{grid-column:2;grid-row:2;}
  .hero-say > .hero-actions{grid-column:2;grid-row:3;}
}

/* ===========================================================
   SECCIONES CON IMAGEN A PANTALLA COMPLETA
   Las fotos pasan por un duotono cálido para que pertenezcan a la
   paleta en vez de pelearse con ella. El escrito está para que el
   texto se lea, no de adorno.
   =========================================================== */
.shot{
  position:relative;isolation:isolate;
  min-height:min(84vh,720px);
  display:flex;align-items:center;
  padding:clamp(80px,10vw,136px) 0;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.shot-bg{position:absolute;inset:0;z-index:-2;}
.shot-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center right;display:block;
  /* Las fotos ya vienen en dorado sobre negro, casi la paleta del sitio: no
     hace falta convertirlas a duotono. Solo se bajan de brillo para que el
     texto mande, y se desatura el amarillo hacia el laton. Ojo: la version
     anterior usaba brightness(1.85) porque las imagenes eran wireframes casi
     negros; con una foto normal eso quema las altas luces. */
  filter:brightness(.95) contrast(1.02) saturate(.88) hue-rotate(-4deg);
}
.shot::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* placa opaca bajo la columna de texto, que se abre hacia el lado
       donde vive el motivo de la foto */
    linear-gradient(90deg,var(--ink) 0%,rgba(11,11,10,.97) 28%,
                    rgba(11,11,10,.68) 48%,rgba(11,11,10,.06) 72%,
                    rgba(11,11,10,.20) 100%),
    /* vinetas arriba y abajo: las diagonales doradas de las fotos llegan
       hasta el borde y chocaban con el filete que separa las secciones */
    linear-gradient(180deg,rgba(11,11,10,.40) 0%,rgba(11,11,10,0) 22%,
                    rgba(11,11,10,0) 78%,rgba(11,11,10,.40) 100%);
}
.shot-alt .shot-bg img{object-position:center left;}
.shot-alt::after{
  background:
    linear-gradient(270deg,var(--ink) 0%,rgba(11,11,10,.97) 28%,
                    rgba(11,11,10,.68) 48%,rgba(11,11,10,.06) 72%,
                    rgba(11,11,10,.20) 100%),
    linear-gradient(180deg,rgba(11,11,10,.40) 0%,rgba(11,11,10,0) 22%,
                    rgba(11,11,10,0) 78%,rgba(11,11,10,.40) 100%);
}
.shot-in{position:relative;width:100%;}
.shot-alt .shot-in{display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.shot .display-2{max-width:16ch;}
/* acá el rótulo no va al margen: lleva su propio tramo de latón.
   Que no todas las secciones se compongan igual es a propósito. */
.shot .sec-idx{
  display:flex;align-items:center;gap:15px;
  margin-bottom:var(--s5);color:var(--brass-hi);
}
.shot .sec-idx::after{content:"";width:54px;height:2px;background:var(--brass);flex:none;}
.shot-alt .sec-idx{flex-direction:row-reverse;}
.shot-note{
  margin-top:var(--s5);max-width:52ch;
  font-size:16.5px;font-weight:300;line-height:1.68;color:var(--bone-2);
}
.shot-cta{margin-top:var(--s7);}

/* ===========================================================
   CABECERA DE PÁGINA INTERNA
   Misma gramática que el hero: rótulo al margen, titular serif.
   =========================================================== */
.page-head{padding:clamp(64px,8vw,116px) 0 clamp(52px,6vw,84px);}
.page-head .display{max-width:16ch;}
.page-head .lead{max-width:56ch;}
.page-head .hero-actions{margin-top:var(--s7);}
.page-head .rate-note{margin-top:var(--s5);}
.rate-note{font-size:11px;line-height:1.55;color:var(--bone-3);opacity:.85;}

@media (min-width:1024px){
  .page-head > .wrap{
    display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--s7);
  }
  .page-head .eyebrow{
    grid-column:1;grid-row:1;
    display:block;margin:0;padding-top:.9em;
    font-size:10px;line-height:1.95;letter-spacing:.115em;
  }
  .page-head .eyebrow::after{
    content:"";display:block;width:28px;height:2px;background:var(--brass);margin-top:14px;
  }
  .page-head .display{grid-column:2;grid-row:1;}
  .page-head .lead{grid-column:2;grid-row:2;}
  .page-head .hero-actions{grid-column:2;grid-row:3;}
  .page-head .rate-note{grid-column:2;grid-row:4;}
}

/* ===========================================================
   BANDAS Y CABECERAS DE SECCIÓN
   =========================================================== */
.band{padding:clamp(80px,9vw,132px) 0;border-top:1px solid var(--line);}
/* la primera sección de una página interna no repite el filete de la nav */
.band-first{border-top:0;}
.band-soft{background:var(--ink-2);}
.band-dark{background:var(--ink-3);}

.sec{margin-bottom:clamp(44px,5vw,68px);}
.sec-tight{margin-bottom:0;}
.sec .display-2{max-width:21ch;}
.sec .sec-note{max-width:52ch;}
.sec-note{margin-top:var(--s5);color:var(--bone-2);font-size:16px;font-weight:300;line-height:1.66;}
.sec-cta{margin-top:var(--s6);}

/* rótulo con un tramo de filete que lo cierra */
.sec-idx{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4);}
.sec-idx::after{content:"";flex:1;max-width:110px;height:1px;background:var(--line-2);}

@media (min-width:1024px){
  .sec{
    display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--s7);align-items:start;
  }
  .sec > .sec-idx{
    grid-column:1;grid-row:1;
    display:block;margin:0;padding-top:.6em;
  }
  .sec > .sec-idx::after{
    display:block;width:28px;max-width:none;height:2px;
    background:var(--brass);margin-top:14px;flex:none;
  }
  .sec > .display,.sec > .display-2{grid-column:2;grid-row:1;}
  .sec > .sec-note{grid-column:2;grid-row:2;}
  .sec > .sec-cta{grid-column:2;grid-row:3;justify-self:start;}

  /* la variante ancha abre en tres columnas: margen, titular y nota.
     Es la portada de sección del índice. */
  .sec-wide{
    grid-template-columns:var(--rail) minmax(0,1.15fr) minmax(0,.74fr);
    align-items:end;
  }
  .sec-wide > div{display:contents;}
  .sec-wide > div > .sec-idx{
    grid-column:1;grid-row:1;align-self:start;
    display:block;margin:0;padding-top:.6em;
  }
  .sec-wide > div > .sec-idx::after{
    content:"";display:block;width:28px;max-width:none;height:2px;
    background:var(--brass);margin-top:14px;flex:none;
  }
  .sec-wide > div > h1,.sec-wide > div > h2{grid-column:2;grid-row:1;align-self:end;}
  .sec-wide > .sec-note{grid-column:3;grid-row:1;align-self:end;margin-top:0;padding-bottom:8px;}
  .sec-wide .display-2{max-width:20ch;}

  /* en la columna angosta de "despues de publicar" no hay lugar para el
     riel: el rotulo vuelve a su filete horizontal y el titular respira */
  .split .sec{display:block;}
  .split .sec > .sec-idx{
    display:flex;align-items:center;gap:14px;
    margin-bottom:var(--s4);padding-top:0;
  }
  .split .sec > .sec-idx::after{
    width:auto;flex:1;max-width:110px;height:1px;
    background:var(--line-2);margin-top:0;
  }
}

/* ===========================================================
   EL ÍNDICE DE PRECIOS
   El corazón del sitio. Cada fila cruza las dos familias: el nombre
   del plan en serif, el precio en geométrica tabular. Esa tensión
   es la que hace que el precio se lea como un dato duro y el plan
   como una propuesta.
   =========================================================== */
.ledger{border-top:1px solid var(--line-2);}
.plan{border-bottom:1px solid var(--line);position:relative;}
/* al abrir, el borde izquierdo se enciende: la fila queda señalada
   sin moverse de lugar */
.plan::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brass);transform:scaleY(0);transform-origin:top;
  transition:transform var(--t-mid) var(--ease);
}
.plan:has(.plan-bar[aria-expanded="true"])::before{transform:none;}
.plan-bar{
  width:100%;display:grid;align-items:center;
  grid-template-columns:auto 1fr auto 34px;
  gap:var(--s5);padding:var(--s5) 0;text-align:left;
  transition:padding-left var(--t-mid) var(--ease),background var(--t-mid);
}
.plan-bar:hover{padding-left:var(--s4);background:rgba(244,239,230,.026);}
.plan-bar[aria-expanded="true"]{padding-left:var(--s4);background:rgba(244,239,230,.018);}
.plan-n{
  font-family:var(--sans);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;color:var(--line-3);
  transition:color var(--t-mid);align-self:start;padding-top:.55em;
}
.plan-bar:hover .plan-n,.plan-bar[aria-expanded="true"] .plan-n{color:var(--brass);}
.plan-name{
  font-family:var(--serif);
  font-size:clamp(21px,2.3vw,30px);font-weight:400;letter-spacing:-.008em;
  color:var(--bone);display:block;line-height:1.18;
}
/* la etiqueta del plan más pedido: filete de latón, no una píldora
   de color. Informa, no grita */
.pick{
  font-family:var(--sans);
  font-style:normal;font-weight:500;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-hi);border:1px solid var(--brass-dp);
  border-radius:var(--r);padding:4px 9px;margin-left:13px;
  vertical-align:middle;white-space:nowrap;
}
.plan-sub{
  display:block;font-size:13px;color:var(--bone-3);margin-top:7px;
  font-weight:300;letter-spacing:.015em;
}
.plan-p{display:grid;justify-items:end;gap:3px;}
.plan-p .num{
  font-size:clamp(23px,3vw,38px);font-weight:300;
  letter-spacing:-.03em;color:var(--bone);line-height:1.05;
  transition:color var(--t-mid);
}
.plan-bar:hover .plan-p .num{color:#fff;}
.usd{
  display:block;font-size:11px;font-weight:300;
  color:var(--bone-3);white-space:nowrap;letter-spacing:.03em;
}

/* el conmutador es una cruz de filete, del grosor de las líneas del índice */
.plan-x{justify-self:end;width:26px;height:26px;position:relative;}
.plan-x::before,.plan-x::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--bone-3);
  transition:transform var(--t-mid) var(--ease),background var(--t-mid);
}
.plan-x::before{width:14px;height:1px;transform:translate(-50%,-50%);}
.plan-x::after{width:1px;height:14px;transform:translate(-50%,-50%);}
.plan-bar:hover .plan-x::before,.plan-bar:hover .plan-x::after{background:var(--bone);}
.plan-bar[aria-expanded="true"] .plan-x::before{background:var(--brass);}
.plan-bar[aria-expanded="true"] .plan-x::after{
  transform:translate(-50%,-50%) rotate(90deg);background:var(--brass);
}

.plan-drop{overflow:hidden;}
/* colapsado sólo si hay JavaScript para volver a abrirlo, y aplicado
   antes del primer pintado para que no se vea abrirse y cerrarse */
.js .plan-drop{height:0;}
.plan-in{display:grid;gap:var(--s6);padding:0 0 var(--s7);grid-template-columns:1fr;}
@media (min-width:780px){
  .plan-in{grid-template-columns:minmax(0,1fr) minmax(0,.66fr);gap:var(--s8);padding-left:56px;}
}
.plan-lead{
  font-size:15.5px;line-height:1.66;color:var(--bone-2);font-weight:300;
  margin-bottom:var(--s5);max-width:54ch;
}
.ticks li{
  position:relative;padding-left:22px;margin-bottom:11px;
  font-size:14.5px;color:var(--bone-2);
}
/* marca de verificación dibujada con filete, del mismo grosor que el resto */
.ticks li::before{
  content:"";position:absolute;left:0;top:7px;
  width:5px;height:9px;border:solid var(--brass);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.plan-side{display:grid;align-content:start;gap:var(--s4);}
.plan-for{
  font-size:14px;color:var(--bone-2);line-height:1.6;font-weight:300;
  border-top:2px solid var(--brass-dp);padding-top:var(--s4);
}
.plan-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:10.5px;color:var(--bone-3);letter-spacing:.14em;text-transform:uppercase;
}
.plan-meta b{
  font-weight:500;font-size:13px;color:var(--bone);white-space:nowrap;
  letter-spacing:.01em;text-transform:none;
}
.plan-cta{
  display:inline-flex;align-items:center;gap:10px;justify-self:start;
  font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-hi);
  border-bottom:1px solid var(--brass-dp);padding-bottom:6px;
  transition:gap var(--t-mid) var(--ease),color var(--t-fast),border-color var(--t-fast);
}
.plan-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.plan-cta:hover{gap:15px;color:var(--bone);border-color:var(--brass);}

/* el plan destacado se marca con material, no con un fondo de color */
.is-pick{background:var(--brass-wash);}
.is-pick .plan-bar{box-shadow:inset 2px 0 0 var(--brass-dp);}
.is-pick .plan-bar[aria-expanded="true"]{box-shadow:none;}

/* ===========================================================
   TRABAJOS — fichas de proyecto en columnas del índice
   =========================================================== */
.works{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line-2);}
@media (min-width:840px){.works{grid-template-columns:repeat(3,minmax(0,1fr));}}
.work{
  padding:var(--s5) 0 var(--s6);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s3);
  position:relative;
}
@media (min-width:840px){
  .work{border-bottom:0;padding:var(--s5) var(--s7) var(--s5) 0;}
  .work:last-child{padding-right:0;}
}
.work-kind{color:var(--brass-hi);}
.work-name{
  font-family:var(--serif);
  font-size:clamp(21px,2.2vw,27px);font-weight:400;
  letter-spacing:-.008em;line-height:1.18;color:var(--bone);
}
.work-desc{font-size:14.5px;color:var(--bone-2);line-height:1.66;font-weight:300;}
.work-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.work-tags li{
  font-family:var(--sans);
  font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-3);border:1px solid var(--line-2);
  padding:5px 9px;border-radius:var(--r);
}
.work-state{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:var(--s5);
  font-family:var(--sans);
  font-size:10px;color:var(--bone-3);letter-spacing:.14em;text-transform:uppercase;
}
.work-dot{width:6px;height:6px;flex:none;background:var(--line-3);}
.work-dot.is-done{background:var(--ok);}
.work-dot.is-wip{background:var(--warn);}
.work-dot.is-tpl{background:var(--bone-3);}
.work-shot{margin-top:var(--s2);border:1px solid var(--line);background:var(--surface);}
.work-shot img{display:block;width:100%;height:auto;}
.works-foot{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line-2);
}

/* ===========================================================
   COTIZADOR
   A la izquierda, un formulario que se lee como una lista de
   partidas. A la derecha, el único panel con sombra del sitio:
   ahí aterriza el número, y por eso está solo.
   =========================================================== */
.quote{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start;}
@media (min-width:1000px){
  .quote{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:var(--s8);}
  .quote-out{position:sticky;top:110px;}
}
.qgroup{margin-bottom:var(--s8);}
.qgroup:last-child{margin-bottom:0;}
.qgroup legend{
  display:flex;align-items:center;gap:14px;width:100%;
  font-family:var(--sans);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);
  padding-bottom:var(--s3);margin-bottom:0;
  border-bottom:1px solid var(--line-2);
}
.qn{
  width:22px;height:22px;flex:none;display:grid;place-items:center;
  border:1px solid var(--brass-dp);background:var(--brass-wash);
  color:var(--brass-hi);font-size:10.5px;font-weight:500;
  letter-spacing:0;border-radius:var(--r);
}
.qopts{display:grid;gap:0;}
.qhint{
  margin-top:var(--s4);font-size:12.5px;color:var(--bone-3);
  font-weight:300;line-height:1.6;max-width:52ch;
}

/* cada opción es una partida del presupuesto: filete abajo, precio
   alineado a la derecha en tabular */
.opt{
  position:relative;
  display:grid;grid-template-columns:16px 1fr auto;align-items:center;
  gap:var(--s4);padding:15px 14px 15px 12px;cursor:pointer;
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast);
}
.opt:hover{background:rgba(244,239,230,.03);}
.opt input{position:absolute;width:16px;height:16px;margin:0;opacity:0;cursor:pointer;}
.opt .box{
  width:15px;height:15px;border:1px solid var(--line-3);border-radius:var(--r);
  position:relative;transition:border-color var(--t-fast),background var(--t-fast);
}
.opt .box.round{border-radius:50%;}
.opt .box::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:5px;height:5px;background:var(--on-brass);border-radius:1px;
  transform:scale(0);transition:transform var(--t-fast) var(--ease);
}
.opt .box.round::after{border-radius:50%;}
.opt input:checked ~ .box{background:var(--brass);border-color:var(--brass);}
.opt input:checked ~ .box::after{transform:scale(1);}
.opt input:focus-visible ~ .box{outline:2px solid var(--brass-hi);outline-offset:3px;}
.opt-t{font-size:14.5px;line-height:1.4;color:var(--bone);}
.opt-t small{display:block;font-size:12.5px;color:var(--bone-3);margin-top:4px;font-weight:300;}
.opt-p{font-size:13.5px;color:var(--bone-2);white-space:nowrap;letter-spacing:-.005em;}
.opt.is-in{opacity:.5;cursor:default;}
.opt.is-in:hover{background:none;}
.opt.is-in .opt-p{
  color:var(--brass-hi);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
/* seleccionada: se marca con un filete de latón al costado */
.opt.is-on{background:var(--brass-wash);box-shadow:inset 2px 0 0 var(--brass);}

/* el panel del total. Filete de latón arriba, como la carátula de
   un pliego, y la única sombra del sitio */
.quote-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:2px solid var(--brass);
  border-radius:0 0 var(--r) var(--r);
  padding:var(--s6) var(--s6) var(--s5);
  position:relative;overflow:hidden;
  box-shadow:0 28px 70px -44px #000;
}
.quote-cap{margin-bottom:var(--s4);color:var(--brass-hi);}
.quote-total{
  font-size:clamp(34px,4.6vw,50px);font-weight:300;line-height:1;
  color:var(--bone);letter-spacing:-.038em;
}
.quote-cur{font-size:14px;color:var(--bone-3);letter-spacing:.12em;font-weight:400;}
.quote-usd{font-size:13.5px;color:var(--bone-3);margin-top:10px;font-weight:300;}
.quote-split{
  font-size:12.5px;color:var(--bone-3);margin-top:12px;font-weight:300;
  padding-bottom:var(--s5);border-bottom:1px solid var(--line);
}
.quote-empty{display:grid;justify-items:center;text-align:center;padding:var(--s6) 0 var(--s3);}
.quote-empty p{font-size:12.5px;color:var(--bone-3);max-width:27ch;line-height:1.6;font-weight:300;}
.quote-card.is-filled .quote-empty{display:none;}
/* la marca del estado vacío es una cota, dibujada una vez y quieta */
.quote-mark{
  width:126px;height:100px;overflow:visible;margin-bottom:var(--s4);
  fill:none;stroke:var(--brass-hi);stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
}
.quote-mark .qm-axis{stroke:var(--line-3);}
.quote-mark .qm-tag path{fill:var(--brass);stroke:none;}
.quote-mark .qm-tag circle{fill:var(--surface);stroke:none;}

.quote-lines{margin:var(--s5) 0 0;}
.quote-lines li{
  display:flex;justify-content:space-between;gap:var(--s4);
  font-size:13px;padding:10px 0;color:var(--bone-2);
  border-bottom:1px solid var(--line);
}
.quote-lines li span:last-child{color:var(--bone);white-space:nowrap;letter-spacing:-.005em;}
.quote-lines li.is-free span:last-child{
  color:var(--brass-hi);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.quote-month{margin-top:var(--s4);font-size:12.5px;color:var(--brass-hi);font-weight:300;}
.quote-card .btn{margin-top:var(--s5);}
.quote-legal{
  margin-top:var(--s4);font-size:11px;color:var(--bone-3);
  text-align:center;line-height:1.55;font-weight:300;
}
.quote-rate{margin-top:7px;opacity:.75;}
.qhint-noscript{border-top:2px solid var(--brass-dp);padding-top:var(--s4);margin-top:0;}
.qhint-noscript a{color:var(--brass-hi);text-decoration:underline;}

/* ---------- BARRA FIJA DE CELULAR ---------- */
.qbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:2px solid var(--brass);
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .4s var(--ease-out);
}
@supports not (backdrop-filter:blur(1px)){ .qbar{background:var(--surface);} }
.qbar.on{transform:none;}
.qbar-in{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.qbar-t{color:var(--bone-3);line-height:1.3;}
.qbar-t span{
  display:block;font-family:var(--sans);
  font-size:21px;font-weight:300;letter-spacing:-.032em;
  color:var(--bone);text-transform:none;margin-top:5px;
}
@media (min-width:1000px){.qbar{display:none;}}
/* la barra fija tapa el final del documento: el pie reserva su altura.
   El combinador ~ hace que esto valga sólo en la página que tiene barra. */
@media (max-width:999px){
  .qbar ~ footer{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
}

/* ---------- FICHA DE PRECIOS (resumen compacto) ---------- */
.ficha{
  background:var(--surface);
  border:1px solid var(--line);border-top:2px solid var(--brass);
  border-radius:0 0 var(--r) var(--r);
  padding:var(--s5) var(--s5) var(--s4);
}
.ficha-cap{margin-bottom:var(--s4);color:var(--brass-hi);}
.ficha-list > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:13px 0;border-bottom:1px solid var(--line);
}
.ficha-list > div:last-child{border-bottom:0;}
.ficha-list dt{font-size:14.5px;color:var(--bone-2);}
.ficha-list dd{font-size:12px;color:var(--bone-3);white-space:nowrap;letter-spacing:.03em;}
.ficha-list b{font-weight:400;font-size:15.5px;color:var(--bone);letter-spacing:-.015em;}
.ficha-foot{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--bone-3);line-height:1.55;
}

/* ===========================================================
   DESPUÉS DE PUBLICAR — filas de tarifa
   =========================================================== */
.split{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start;}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s8);}
}
.rows{border-top:1px solid var(--line-2);}
.row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line);
  transition:padding-left var(--t-mid) var(--ease),background var(--t-mid);
}
.row:hover{padding-left:var(--s4);background:rgba(244,239,230,.026);}
.row dt{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--bone);letter-spacing:-.005em;}
.row dt span{
  display:block;font-family:var(--sans);
  font-size:13px;font-weight:300;color:var(--bone-3);margin-top:7px;letter-spacing:.012em;
}
.row dd{
  font-size:18px;font-weight:300;color:var(--bone);
  white-space:nowrap;text-align:right;letter-spacing:-.02em;
}
.row dd i{
  display:block;font-style:normal;font-size:10px;color:var(--bone-3);
  margin-top:6px;letter-spacing:.14em;text-transform:uppercase;
}
.row dd .usd{text-align:right;}

/* ===========================================================
   PREGUNTAS
   Mismo mecanismo que el índice de precios, en tono menor.
   =========================================================== */
.faq .plan-bar{grid-template-columns:1fr 26px;gap:var(--s4);padding:var(--s4) 0;}
.faq .plan-name{
  font-family:var(--serif);
  font-size:clamp(17px,1.65vw,20px);line-height:1.45;letter-spacing:-.004em;
}
/* la respuesta se corre para no apoyarse sobre la barra de latón
   que marca la pregunta abierta */
.faq-in{display:block;padding:0 0 var(--s7) var(--s5);max-width:74ch;}
.faq-in p{font-size:15.5px;line-height:1.72;color:var(--bone-2);font-weight:300;}
.faq-foot{margin-top:var(--s8);font-size:14.5px;color:var(--bone-3);font-weight:300;}
.faq-foot a{
  color:var(--brass-hi);font-weight:400;
  border-bottom:1px solid var(--brass-dp);padding-bottom:2px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.faq-foot a:hover{color:var(--bone);border-color:var(--brass);}

/* ===========================================================
   CIERRE
   =========================================================== */
.close{
  background:var(--ink-3);
  padding:clamp(84px,10vw,148px) 0;
  border-top:1px solid var(--line);
}
/* .close-in no lleva reglas propias a proposito: hereda la columna de .wrap.
   Antes la anulaba con max-width:none y el cierre quedaba contra el borde
   de la ventana, desalineado de todas las secciones de arriba. */
.close .display-2{max-width:19ch;}
.close-note{margin-top:var(--s5);font-size:17px;color:var(--bone-2);font-weight:300;max-width:56ch;line-height:1.66;}
.close-actions{margin-top:var(--s7);display:flex;gap:var(--s3);flex-wrap:wrap;}

/* ===========================================================
   PIE
   =========================================================== */
footer{
  background:var(--ink-3);color:var(--bone-3);
  padding:var(--s8) 0;border-top:1px solid var(--line);
}
.foot-in{display:grid;gap:var(--s6);}
.foot-name{
  font-family:var(--serif);
  font-size:19px;font-weight:400;color:var(--bone);letter-spacing:-.005em;
}
.foot-name span{
  display:block;font-family:var(--sans);font-weight:500;
  font-size:9.5px;color:var(--bone-3);margin-top:8px;
  letter-spacing:.185em;text-transform:uppercase;
}
.foot-links{
  display:flex;gap:var(--s5) var(--s6);flex-wrap:wrap;
  font-family:var(--sans);
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding-top:var(--s5);border-top:1px solid var(--line);
}
.foot-links a{position:relative;padding-bottom:4px;color:var(--bone-3);transition:color var(--t-fast);}
.foot-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-mid) var(--ease);
}
.foot-links a:hover{color:var(--bone);}
.foot-links a:hover::after{transform:scaleX(1);transform-origin:left;}
.foot-legal{font-size:11.5px;max-width:66ch;line-height:1.65;font-weight:300;opacity:.8;}

/* El pie cierra con dos datos de distinto peso: a la izquierda la letra chica
   comercial, a la derecha quien esta detras de la marca. Misma estructura que
   .foot-name (nombre + rol) pero un escalon mas abajo en tamano y color, para
   que identifique sin competir con Desarrollo Cardon. */
.foot-end{
  display:grid;gap:var(--s5);
  padding-top:var(--s5);border-top:1px solid var(--line);
}
.foot-by{
  font-family:var(--serif);
  font-size:14.5px;font-weight:400;letter-spacing:-.004em;line-height:1.35;
  color:var(--bone-2);
}
.foot-by span{
  display:block;font-family:var(--sans);font-weight:500;
  font-size:9px;letter-spacing:.185em;text-transform:uppercase;
  color:var(--bone-3);margin-top:7px;
}
@media (min-width:820px){
  .foot-end{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:var(--s8);align-items:end;
  }
  .foot-by{text-align:right;white-space:nowrap;}
}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wafab{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:inline-flex;align-items:center;gap:0;
  padding:14px;border-radius:var(--r);
  background:var(--surface);color:var(--bone);
  border:1px solid var(--line-2);
  box-shadow:0 16px 38px -20px #000;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
             border-color var(--t-fast),background var(--t-fast);
}
.wafab.on{opacity:1;transform:none;pointer-events:auto;}
.wafab.is-hidden,.wafab.is-quiet{opacity:0;transform:translateY(12px);pointer-events:none;}
.wafab svg{width:22px;height:22px;fill:var(--brass);flex:none;transition:fill var(--t-fast);}
.wafab span{display:none;}
.wafab:hover{background:var(--surface-2);border-color:var(--brass-dp);}
.wafab:hover svg{fill:var(--brass-hi);}
@media (min-width:900px){
  .wafab{right:28px;bottom:28px;}
  .wafab span{
    display:block;font-family:var(--sans);
    font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    max-width:0;padding:0;margin-left:0;
    overflow:hidden;white-space:nowrap;
    transition:max-width var(--t-mid) var(--ease-out),
               margin-left var(--t-mid) var(--ease-out),
               padding-right var(--t-mid) var(--ease-out);
  }
  .wafab:hover span,.wafab:focus-visible span{max-width:118px;margin-left:11px;padding-right:5px;}
}

/* ---------- PÁGINA 404 ----------
   Lleva la misma nav y el mismo pie que el resto del sitio: es la pagina que
   ve alguien que llego con un enlace roto, y dejarla huerfana era regalar la
   unica impresion que le queda. */
.oops{
  display:flex;align-items:center;
  min-height:clamp(400px,58vh,620px);
  padding:clamp(64px,9vw,116px) 0;
}
.oops-in{width:100%;}
.oops .code{
  font-family:var(--sans);
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-hi);margin-bottom:var(--s5);
  display:flex;align-items:center;gap:15px;
}
.oops .code::after{content:"";width:54px;height:2px;background:var(--brass);}
.oops .display{max-width:15ch;}
.oops-note{
  margin-top:var(--s5);color:var(--bone-2);
  font-size:17px;font-weight:300;max-width:52ch;line-height:1.66;
}
.oops .close-actions{margin-top:var(--s7);}

/* ===========================================================
   MOVIMIENTO
   Tres gestos, y nada más. Todos detrás de .js: si el JavaScript
   no corre, el contenido está visible igual.

   1. Titulares: se descubren por línea, con máscara.
   2. Texto de apoyo: un solo desplazamiento corto.
   3. Grupos de filas: el filete se traza en latón y las filas
      entran detrás. Es la misma regla graduada de las secciones.
   =========================================================== */

/* 1. titulares */
.js [data-reveal="mask"] .ln{display:block;overflow:hidden;}
.js [data-reveal="mask"] .ln > span{
  display:block;transform:translateY(104%);
  transition:transform .95s var(--ease-out);
  transition-delay:calc(var(--i,0) * 72ms);
}
.js [data-reveal="mask"].on .ln > span{transform:none;}

/* 2. texto de apoyo */
.js [data-reveal="rise"]{
  opacity:0;transform:translateY(10px);
  transition:opacity .68s var(--ease-out),transform .68s var(--ease-out);
  transition-delay:calc(var(--d,0) * 78ms);
}
.js [data-reveal="rise"].on{opacity:1;transform:none;}

/* 3. la ficha se descubre de arriba hacia abajo, recta y sin rotaciones.
   Va con máscara y no con clip-path a propósito: clip-path deja el
   rectángulo de intersección vacío y el observador nunca la ve entrar. */
@property --rev{syntax:'<percentage>';inherits:false;initial-value:0%;}
.js [data-reveal="ficha"]{
  --rev:0%;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--rev),transparent var(--rev));
  mask-image:linear-gradient(180deg,#000 var(--rev),transparent var(--rev));
  transition:--rev 1s var(--ease-out);
}
.js [data-reveal="ficha"].on{--rev:100%;}

/* 4. grupos de filas: el filete arranca en latón y sigue en hueso,
   igual que la cabecera de sección */
.js [data-stagger]{
  background-image:linear-gradient(90deg,var(--brass) 0 76px,var(--line-2) 76px);
  background-repeat:no-repeat;background-position:0 0;
  background-size:var(--draw,0) 2px;
  transition:background-size 1.1s var(--ease-out);
}
.js [data-stagger].on{--draw:100%;}
.js .ledger,.js .rows,.js .works{border-top-color:transparent;}
.js [data-stagger] .plan,
.js [data-stagger] .row,
.js [data-stagger] .work{
  clip-path:inset(0 0 0 0);
  opacity:0;transform:translateY(10px);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  transition-delay:calc(190ms + var(--i,0) * 88ms);
}
.js [data-stagger].on .plan,
.js [data-stagger].on .row,
.js [data-stagger].on .work{opacity:1;transform:none;}

/* red de seguridad: si script.js no llegó a correr, todo visible */
.motion-off [data-reveal],
.motion-off [data-stagger] .plan,
.motion-off [data-stagger] .row,
.motion-off [data-stagger] .work{opacity:1 !important;transform:none !important;}
.motion-off [data-reveal="mask"] .ln > span{transform:none !important;}
.motion-off [data-reveal="ficha"]{-webkit-mask-image:none !important;mask-image:none !important;}
.motion-off [data-stagger]{--draw:100%;}
.motion-off .plan-drop{height:auto;}
.motion-off .band::before,.motion-off .close::before,
.motion-off .shot::before,.motion-off .page-head::before{
  clip-path:inset(0 calc(100% - 76px) 0 0) !important;
}
.motion-off .band::after,.motion-off .close::after,.motion-off .page-head::after{opacity:1 !important;}

/* ---------- FOCO ---------- */
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:var(--r);}

/* ---------- MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],[data-stagger] .plan,[data-stagger] .row,[data-stagger] .work{
    opacity:1 !important;transform:none !important;
  }
  [data-reveal="mask"] .ln > span{transform:none !important;}
  [data-reveal="ficha"]{-webkit-mask-image:none !important;mask-image:none !important;}
  [data-stagger]{--draw:100%;}
  .band::before,.close::before,.shot::before,.page-head::before{
    clip-path:inset(0 calc(100% - 76px) 0 0) !important;
  }
  .band::after,.close::after,.page-head::after{opacity:1 !important;}
}

/* ===========================================================
   ADAPTACIÓN A PANTALLAS
   El riel al margen desaparece por debajo de 1024 y el contenido
   vuelve a una sola columna. No se achica: se recompone.
   =========================================================== */

/* ---------- MENÚ EN PANTALLAS ANGOSTAS ----------
   El menú se guarda detrás del botón y baja como una hoja a lo ancho.
   El umbral es 1119 y no 1023 como el del riel: con seis destinos, más
   la marca, el idioma y el botón, la barra recién respira a partir de
   1120. Antes de eso se apretaba y a 1024 se desbordaba 47px. */
@media (max-width:1119px){
  .nav-toggle{display:block;}
  .brand-thin{display:none;}
  .nav,.nav.is-stuck{
    background:var(--ink);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .nav-inner{gap:var(--s4);}
  .nav-end{order:2;margin-left:0;gap:var(--s4);}
  .nav-toggle{order:3;margin-left:var(--s2);}

  .menu{
    order:4;flex:0 0 100%;display:none;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    border-top:1px solid var(--line-2);
  }
  .menu-abierto .menu{display:flex;}
  .menu-abierto .nav-inner{flex-wrap:wrap;padding-bottom:var(--s4);}

  /* apilado, un destino por fila. Sin subrayado: la pagina actual se
     marca con el color del acento, que en una lista se lee mejor */
  .menu-b{
    width:100%;padding:17px 0;font-size:12px;letter-spacing:.16em;
    color:var(--bone);border-bottom:1px solid var(--line);
  }
  .menu-b:last-child{border-bottom:0;}
  .menu-b::after{display:none;}
  .menu-link.is-active{color:var(--brass-hi);}
}

/* el riel se angosta antes que la barra: son dos ajustes independientes */
@media (min-width:1024px) and (max-width:1320px){
  :root{--rail:140px;}
}
@media (min-width:1120px) and (max-width:1320px){
  .menu{gap:var(--s5);}
  .menu-b{font-size:10.5px;letter-spacing:.12em;}
  .nav-end{gap:var(--s4);margin-left:var(--s5);}
}

@media (max-width:1023px){
  /* sin riel, la columna de código va arriba del titular */
  .hero-code{font-size:10.5px;}
}

@media (max-width:899px){
  .hero{padding-top:var(--s7);}
  .band.is-seen::before,.close.is-seen::before,
  .shot.is-seen::before,.page-head.is-seen::before{
    clip-path:inset(0 calc(100% - 56px) 0 0);
  }
  .motion-off .band::before,.motion-off .close::before,
  .motion-off .shot::before,.motion-off .page-head::before{
    clip-path:inset(0 calc(100% - 56px) 0 0) !important;
  }
  .band::after,.close::after,.page-head::after{
    -webkit-mask-image:linear-gradient(90deg,transparent 0 64px,#000 74px,transparent 220px);
    mask-image:linear-gradient(90deg,transparent 0 64px,#000 74px,transparent 220px);
  }
  .shot-alt .shot-in{align-items:flex-start;text-align:left;}
  .shot-alt .sec-idx{flex-direction:row;}
  /* En vertical la caja es tan angosta que solo entra un 30% del ancho de la
     foto. Centrada, ese 30% caia en el vacio de las tres imagenes. Asi que la
     composicion de celular es otra: banda de foto arriba, texto abajo sobre
     placa. Y el recorte se elige a mano por seccion para que cada foto
     muestre su motivo y no un hueco. */
  /* La foto del hero es 16:9 en una caja alta: solo entra una cuarta parte
     del ancho. Centrada caia en la zona plana y la diagonal dorada quedaba
     recortada, o sea que la imagen no aportaba nada. Corrida a la derecha,
     la diagonal entra al pie del hero. */
  .hero-bg img{object-position:82% center;}
  .hero::after{
    background:
      linear-gradient(180deg,var(--ink) 0%,rgba(11,11,10,.60) 9%,
                      rgba(11,11,10,.10) 26%,rgba(11,11,10,.10) 68%,
                      rgba(11,11,10,.34) 100%),
      linear-gradient(150deg,rgba(11,11,10,.90) 0%,rgba(11,11,10,.66) 44%,
                      rgba(11,11,10,.20) 78%,rgba(11,11,10,.06) 100%);
  }

  .shot{align-items:flex-end;}
  .shot-bg img,.shot-alt .shot-bg img{object-position:center;}
  #sitios-info  .shot-bg img{object-position:74% center;}  /* el laptop */
  #apps-info    .shot-bg img{object-position:26% center;}  /* la pantalla de codigo */
  #hosting-info .shot-bg img{object-position:66% center;}  /* el haz y la malla */
  .shot::after,.shot-alt::after{
    background:
      linear-gradient(180deg,rgba(11,11,10,.18) 0%,rgba(11,11,10,.28) 30%,
                      rgba(11,11,10,.86) 52%,rgba(11,11,10,.95) 72%,
                      rgba(11,11,10,.98) 100%);
  }
}

@media (max-width:600px){
  .nav-end .link-out{display:none;}
  .plan-bar{grid-template-columns:auto 1fr 26px;row-gap:10px;padding:var(--s4) 0;gap:var(--s4);}
  .plan-t{grid-column:2;}
  .plan-p{grid-column:2;grid-row:2;justify-items:start;}
  .plan-x{grid-column:3;grid-row:1;}
  .plan-n{padding-top:.4em;}
  .plan-in{padding-left:var(--s4);}
  /* las preguntas tienen dos columnas, no tres: sin esto el .plan-t
     heredaba grid-column:2 y caia en la columna de 26px del conmutador,
     creando una columna implicita que desbordaba la pantalla */
  .faq .plan-bar{grid-template-columns:1fr 26px;}
  .faq .plan-t{grid-column:1;grid-row:1;}
  .faq .plan-x{grid-column:2;grid-row:1;}
  .faq-in{padding-left:var(--s4);}
  .row{flex-direction:column;gap:10px;}
  .row dd{text-align:left;}
  .row dd .usd{text-align:left;}
  .hero-actions .btn,.close-actions .btn,.works-foot .btn{flex:1 1 auto;}
  .quote-card{padding:var(--s5) var(--s5) var(--s4);}
  .ficha{padding:var(--s4);}
  .foot-links{gap:var(--s4) var(--s5);}
}

/* ---------- PANTALLAS MUY ANGOSTAS (320px) ----------
   En la barra conviven marca, idioma, boton y menu. A 320 no entran a
   su tamano normal: en vez de esconder ninguna de las cuatro cosas, se
   aprieta el lockup y se achica el boton. Todo sigue accesible. */
@media (max-width:360px){
  .nav-inner{padding-left:10px;padding-right:10px;gap:5px;}
  /* el cardon ocupa mas ancho que la forma que habia antes, asi que a 320
     hay que recuperar esos pixeles del resto de la barra */
  .brand{font-size:12.5px;gap:5px;}
  .brand-mark{width:18px;height:18px;}
  .nav-end{gap:6px;margin-left:auto;}
  .lang{gap:3px;}
  .lang-b{font-size:9px;letter-spacing:.04em;padding:5px 0;}
  .lang-sep{font-size:8.5px;}
  .nav-end .btn-sm{padding:7px 8px;font-size:8.5px;letter-spacing:.05em;}
  .nav-toggle{width:26px;margin-left:0;}
  .nav-toggle span{left:2px;width:20px;}
}

@media (max-width:420px){
  /* el margen se ajusta en el token, no caja por caja: así el texto,
     las reglas y la barra fija siguen alineados sobre la misma columna */
  :root{--pad:20px;}
  .nav-inner{padding-left:18px;padding-right:18px;gap:10px;}
  .nav-end{gap:12px;margin-left:auto;}
  .btn{padding:15px 20px;}
  .btn-sm{padding:9px 13px;font-size:10px;}
  .brand{font-size:16px;gap:10px;}
  .hero-in{padding-left:var(--pad);padding-right:var(--pad);}
}