/* landing.css — Web Conectada.
   Se carga DESPUÉS de /socios/partner.css y solo añade lo que aquella no cubre:
   secciones de altura libre, el patrón de kicker, los cuatro diagramas, la tabla de
   inversión, el acordeón de dudas y el formulario. Paleta: la del sitio (monocroma)
   más un único acento bronce. */
:root{
  --bronze:#B08D57;                    /* 6,4:1 sobre #0A0A0A → AA para texto normal */
  --bronze-soft:rgba(176,141,87,.10);
  --bronze-line:rgba(176,141,87,.42);
  /* Sobreescriben a partner.css SOLO en esta página. El negro deja de ser plano (ver .atmos), así
     que el peor fondo posible ya no es #0A0A0A sino #2B2926, y ahí el gris del sitio se quedaba en
     2,7:1. Estos dos pasan AA (4,5:1) en el punto más claro de la niebla:
       --gray  #95938C → 4,72:1 sobre #2B2926 · 6,44:1 sobre #0A0A0A
       --faint #8B8983 → 4,15:1 / 5,66:1, y solo viste placeholders, nunca texto real. */
  --gray:#95938C;
  --faint:#8B8983;

  /* Superficie elevada, compartida por tarjetas, diagramas, mockups y la tabla de precios.
     Va casi OPACA (.94) a propósito, no traslúcida: si dejara pasar la niebla, el contraste del
     texto dependería de por dónde ande la capa fija y cambiaría al hacer scroll. Así el fondo bajo
     cualquier texto de una superficie es estable, y el punto más justo de toda la página —el bronce
     de .option.win— se queda en 4,73:1, medido contra el píxel realmente pintado. */
  --surface:rgba(23,23,26,.94);
  --surface-sheen:linear-gradient(158deg,rgba(248,247,244,.10),rgba(248,247,244,.032) 44%,rgba(248,247,244,.008));
  /* El borde y el halo son contraste GRATIS: separan la superficie del fondo sin tocar el color que
     hay bajo el texto. Por eso el resalte se sube aquí y no subiendo el relleno, que sí restaría
     contraste al bronce (su margen sobre estas superficies es de apenas medio punto). */
  --surface-line:rgba(248,247,244,.26);
  --surface-shadow:0 2px 0 rgba(0,0,0,.5), 0 36px 80px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5);
  --surface-inset:inset 0 1px 0 rgba(248,247,244,.20);
}

/* El cristal: el desenfoque solo se pide donde de verdad se aplica, y nunca sobre elementos fijos
   (ahí repinta en cada scroll). Con la superficie al 93 % aporta un matiz, no la legibilidad: si el
   navegador no lo soporta, no se pierde nada. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .mk-browser,.mk-panel,.mk-mini,.card,.option,.fbox,.callout{
    backdrop-filter:blur(16px) saturate(118%); -webkit-backdrop-filter:blur(16px) saturate(118%)}
}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); border:0}

/* ---------- atmósfera ----------
   El home tampoco es claro: es negro con una fotografía distinta por pantalla, y su «luz» sale de
   la niebla. Aquí esa niebla va en UNA capa fija detrás de toda la página para que el negro deje
   de ser plano. El desenfoque viene horneado en el WebP (4 KB) a propósito: un filter:blur() sobre
   un elemento fijo a pantalla completa repinta en cada scroll y se nota en móvil. */
.atmos{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.atmos img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.10;
  will-change:transform; animation:drift 72s ease-in-out infinite alternate}
/* Techo de luminancia. La capa va al 10 % y el halo más fuerte al 6 %: el punto más claro que puede
   quedar debajo de un texto es #2B2926. Ahí --ink da 15,9:1, --stone 6,5:1 y --bronze 4,69:1, todos
   AA. Subir cualquiera de esas dos opacidades tira el bronce por debajo de 4,5:1. */
.atmos .glow{position:absolute; inset:0; background:
  radial-gradient(58% 42% at 50% 16%, rgba(176,141,87,.06), transparent 70%),
  radial-gradient(46% 38% at 88% 74%, rgba(176,141,87,.04), transparent 72%),
  radial-gradient(52% 40% at 6% 56%, rgba(248,247,244,.03), transparent 70%)}
@keyframes drift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.04)}
  to{transform:translate3d(1.5%,1.2%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.atmos img{animation:none; transform:scale(1.04)}}

/* ---------- estructura ---------- */
/* partner.css fija .section{height:100vh} y un fondo opaco; las secciones de contenido denso
   crecen y se destapan para que se vea la atmósfera. */
.section.flow{height:auto; min-height:0; overflow:visible; padding:clamp(64px,12vh,128px) 0;
  background:transparent; z-index:1}
/* Costura: donde una sección de contenido sigue a una fotografía a sangre, el negro opaco de la
   foto contra la niebla deja un corte visible. Este degradado lo funde. */
.flow.seam::before{content:''; position:absolute; left:0; right:0; top:0; z-index:0;
  height:clamp(120px,20vh,240px); background:linear-gradient(#0A0A0A,rgba(10,10,10,0)); pointer-events:none}
.wrap{position:relative; z-index:1; width:100%; max-width:1320px; margin:0 auto; padding:0 clamp(28px,5vw,72px)}
.wrap.narrow{max-width:1080px}
.rule{height:1px; background:var(--line); border:0; margin:clamp(44px,6vh,72px) 0}

/* ---------- héroe partido ----------
   partner.css deja .section en 100vh con overflow:hidden. El héroe pasa a dos columnas (copy +
   mockup) y necesita crecer si el mockup no cabe, así que se destapa. */
.section.split{height:auto; min-height:100svh; overflow:visible; display:flex; align-items:center;
  padding:clamp(120px,17vh,180px) 0 clamp(56px,8vh,90px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(32px,4.5vw,72px); align-items:center}
/* En el héroe a pantalla completa el titular podía ocupar 20ch de ancho de página. Repartido en dos
   columnas, ese mismo tamaño lo parte en siete líneas: dentro del split baja de cuerpo y suelta el
   tope de medida, que ahora lo marca la propia columna. */
.section.split .title.hero{font-size:clamp(30px,3.4vw,53px); line-height:1.06; max-width:none}
.section.split .eyebrow{white-space:nowrap}
.section.split .sub{max-width:44ch}

/* ---------- mockups de interfaz ----------
   Van en HTML+CSS, no en SVG ni en imagen. El texto sigue siendo texto: lo lee un lector de
   pantalla, escala con el sistema tipográfico, no pixela en ninguna densidad y pesa 0 KB. Cuentan
   siempre EL MISMO dato (CAM-TEC-01 · 24,90 € · 3 ud.) y lo que viaja va en bronce, para que el
   ojo lo siga de una superficie a la otra sin leer una palabra. */
.mk{margin:0; min-width:0}
.mk-cap{margin:14px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gray)}
.mk-tag{display:block; margin-bottom:10px; font-family:'Inter',sans-serif; font-weight:300;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone)}

/* superficie común: deja de ser un filete de 1 px y pasa a ser un objeto con luz arriba y sombra */
.mk-browser,.mk-panel{border:1px solid var(--surface-line); border-radius:9px; overflow:hidden;
  background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset)}

/* el cromo pesa más que el lienzo: sin esta diferencia la barra y la cabecera se disolvían */
.mk-bar{display:flex; align-items:center; gap:12px; padding:10px 13px;
  border-bottom:1px solid var(--surface-line); background:rgba(248,247,244,.055)}
.mk-dots{display:flex; gap:6px; flex:none}
.mk-dots i{width:8px; height:8px; border-radius:50%; background:rgba(248,247,244,.26)}
.mk-url{flex:1; min-width:0; font-family:'Inter',sans-serif; font-weight:300; font-size:12px;
  color:var(--stone); background:rgba(8,8,10,.62); border:1px solid rgba(248,247,244,.13);
  border-radius:999px; padding:5px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.mk-body{padding:clamp(16px,1.9vw,22px)}
.mk-prod{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.7vw,20px); align-items:start}
.mk-thumb{width:clamp(68px,8vw,104px); aspect-ratio:1; border-radius:5px; border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(248,247,244,.11),rgba(248,247,244,.02));
  display:flex; align-items:center; justify-content:center; color:var(--faint)}
.mk-thumb svg{width:46%; height:46%; display:block}
.mk-name{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(15px,1.35vw,18px);
  line-height:1.25; color:var(--ink); margin:0}
.mk-sku{margin:5px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:11px;
  letter-spacing:.12em; color:var(--gray)}
.mk-price{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(19px,1.8vw,25px);
  line-height:1; margin:12px 0 0}
.mk-stock{display:flex; align-items:center; gap:8px; margin:10px 0 0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:13px; color:var(--stone)}
.mk-stock i{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.mk-buy{display:inline-block; margin-top:15px; padding:8px 17px; border-radius:999px;
  background:var(--ink); color:#0A0A0A; font-family:'Inter',sans-serif; font-size:12px}
/* el dato compartido: lo único en bronce dentro del mockup */
.mk-key{color:var(--bronze)}

.mk-phead{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--surface-line); background:rgba(248,247,244,.055);
  font-family:'Inter',sans-serif; font-weight:300; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--stone)}
.mk-rows{width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; font-weight:300; font-size:13px}
/* la fila de encabezado se separa del cuerpo con su propio fondo y un filete de verdad */
.mk-rows thead th{text-align:left; font-weight:300; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stone); padding:9px 14px; white-space:nowrap;
  background:rgba(248,247,244,.03); border-bottom:1px solid var(--surface-line)}
.mk-rows td{padding:12px 14px; border-bottom:1px solid var(--line-2); color:var(--stone); white-space:nowrap}
/* filas alternas: es lo que más ayuda a seguir una fila larga con el ojo */
.mk-rows tbody tr:nth-child(even) td{background:rgba(248,247,244,.028)}
.mk-rows tr:last-child td{border-bottom:0}
.mk-rows .on td{background:linear-gradient(var(--bronze-soft),var(--bronze-soft)),rgba(176,141,87,.06)}
.mk-rows td:last-child,.mk-rows th:last-child{text-align:right}

/* conector: la línea que dice que los dos lados son el mismo dato */
.mk-join{display:flex; align-items:center; gap:14px; padding:15px 0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze); white-space:nowrap}
.mk-join::before,.mk-join::after{content:''; flex:1; height:1px; background:var(--bronze-line)}
/* y su contrario: los dos lados que NO se hablan */
.mk-cut{--c:var(--gray); color:var(--c)}
.mk-cut::before,.mk-cut::after{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 9px)}

/* el problema: dos superficies enfrentadas que no se hablan */
.mk-split{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(14px,2vw,28px); align-items:center}
/* el corte gira a vertical entre las dos superficies. Sin writing-mode: en vertical-rl el eje
   principal del flex se invierte y el resultado depende del navegador. */
.mk-split .mk-cut{flex-direction:column; padding:0; gap:10px; text-align:center; align-self:stretch}
.mk-split .mk-cut::before,.mk-split .mk-cut::after{width:1px; height:auto; flex:1 0 26px;
  background:repeating-linear-gradient(180deg,var(--c) 0 4px,transparent 4px 9px)}
/* el pie de figura es el 4º hijo de una rejilla de 3 columnas: sin esto cae bajo la primera */
.mk-split .mk-cap{grid-column:1/-1}

/* la cadena del después */
.mk-chain{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(12px,1.6vw,20px)}
.mk-mini{border:1px solid var(--surface-line); border-radius:8px; padding:16px 18px;
  background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset)}
.mk-mini h4{margin:0; font-family:'Inter',sans-serif; font-weight:300; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze)}
.mk-mini p{margin:12px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:400;
  font-size:clamp(14px,1.3vw,17px); line-height:1.3; color:var(--ink)}
.mk-mini span{display:block; margin-top:7px; font-family:'Inter',sans-serif; font-weight:300;
  font-size:12px; color:var(--gray)}

/* ---------- dinamismo ----------
   Movimiento con función, no decorativo. Lo ÚNICO que se mueve solo es el dato viajando de la web
   al ERP, porque es el argumento entero de la página; y el conector muerto (.mk-cut) se queda
   quieto a propósito: el contraste entre una línea viva y una línea rota es el mensaje.
   Nada de esto anima opacidad de texto: bajarle la opacidad al bronce lo saca de AA. */
@keyframes flow{from{background-position:0 0} to{background-position:-200% 0}}
.inview .mk-join:not(.mk-cut)::before,
.inview .mk-join:not(.mk-cut)::after{
  background:linear-gradient(90deg,var(--bronze-line) 0 34%,rgba(176,141,87,.95) 46%,var(--bronze-line) 58% 100%);
  background-size:200% 100%; animation:flow 3.6s linear infinite}

/* reveals más secos que los de partner.css: 20 px de desenfoque y 1,4 s se leían como pereza.
   Solo en esta página; /socios y la home conservan los suyos. */
.r-fade{filter:blur(9px); transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1)}

/* respuesta al puntero: las superficies se levantan y el filete se enciende */
.card,.option,.mk-browser,.mk-panel,.mk-mini,.fbox{
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease}
@media (hover:hover) and (pointer:fine){
  .card:hover,.mk-mini:hover,.fbox:hover,.mk-browser:hover,.mk-panel:hover{
    transform:translateY(-4px); border-color:rgba(248,247,244,.28);
    box-shadow:0 38px 80px -22px rgba(0,0,0,.95),var(--surface-inset)}
  .option:hover{transform:translateY(-3px); border-color:rgba(248,247,244,.28)}
  /* la ganadora ya viene escalada: el hover suma, no sustituye */
  .option.win:hover{transform:scale(1.015) translateY(-4px); border-color:var(--bronze)}
  .faq summary:hover{color:var(--bronze)}
  .ptable tbody tr:hover td{background:rgba(248,247,244,.03)}
  .ptable tr.pick:hover td{background:rgba(176,141,87,.14)}
}
.faq summary{transition:color .25s ease}

@media (prefers-reduced-motion:reduce){
  /* el selector tiene que repetir el :not(.mk-cut): con .mk-join a secas pierde por especificidad
     (0,2,1 contra 0,3,1) y la animación seguía corriendo aunque el sistema pidiera menos movimiento */
  .inview .mk-join:not(.mk-cut)::before,
  .inview .mk-join:not(.mk-cut)::after{animation:none}
  .card,.option,.mk-browser,.mk-panel,.mk-mini,.fbox{transition:none}
  .card:hover,.mk-mini:hover,.fbox:hover,.mk-browser:hover,.mk-panel:hover,
  .option:hover,.option.win:hover{transform:none}
  .r-fade{filter:none; transform:none; transition:opacity .6s ease}
}

/* ---------- llamada a la acción repetida ----------
   Antes había un CTA arriba y otro a 11.000 px. Este bloque cierra cada argumento. */
.cta-row{display:flex; align-items:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap}
.cta-row .why{font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.5;
  color:var(--gray); margin:0; max-width:38ch}

/* ---------- patrón de sección ---------- */
.kicker{font-family:'Inter',sans-serif; font-weight:300; font-size:clamp(10px,.8vw,11px);
  letter-spacing:.28em; text-transform:uppercase; color:var(--bronze); margin:0}
.kicker::after{content:''; display:block; width:46px; height:2px; background:var(--bronze);
  margin-top:clamp(14px,1.8vh,20px)}
.kicker + *{margin-top:clamp(24px,3.2vh,36px)}

/* Escala más contrastada: antes titulares y rótulos vivían en una banda demasiado estrecha y todo
   pesaba lo mismo. Los titulares suben, el rótulo de sección baja, el cuerpo no se toca. */
.title.md{font-size:clamp(30px,4.3vw,66px); line-height:1.04; max-width:18ch; text-wrap:balance}
.title.hero{font-size:clamp(33px,4.6vw,72px); line-height:1.04; max-width:16ch; text-wrap:balance}

/* cuerpo: usa --stone (8,7:1) y no --gray (3,7:1), que no llega a AA en texto normal */
.lede{font-family:'Inter',sans-serif; font-weight:300; font-size:clamp(16px,1.2vw,18px);
  line-height:1.6; color:var(--stone); max-width:64ch; margin:0}
.body{font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.65;
  color:var(--stone); max-width:66ch; margin:0}
.small{font-size:13px; line-height:1.6; color:var(--gray); max-width:78ch; margin:0}
.hi{color:var(--ink)}
.bz{color:var(--bronze)}
.statement.bz-em{color:var(--ink)}

/* ---------- rejillas y tarjetas ---------- */
.grid{display:grid; gap:clamp(16px,1.8vw,26px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* El fondo va oscuro y no claro (antes rgba(248,247,244,.02)): sobre la atmósfera, un velo blanco
   suma luz justo donde hay texto. Un velo negro fija la superficie y el contraste deja de depender
   de por dónde pase la niebla. El filete superior claro + la sombra las convierten en objetos:
   con solo el borde de 1 px la página entera parecía un wireframe. */
.card{border:1px solid var(--surface-line); background:var(--surface-sheen),var(--surface);
  border-radius:8px; padding:clamp(22px,2.4vw,32px);
  box-shadow:var(--surface-shadow),var(--surface-inset)}
.card h3{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(17px,1.5vw,21px);
  line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px}
.card p{font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.6;
  color:var(--stone); margin:0}
.card .num{display:block; font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:34px;
  line-height:1; color:var(--bronze); margin-bottom:16px}

/* ---------- lista de una línea ----------
   Sustituye a las rejillas de tarjetas cuando la idea cabe en una frase. Seis tarjetas con párrafo
   ocupaban ~880 px de alto; las mismas seis ideas aquí ocupan ~280 px y se leen mejor, porque el
   ojo recorre una columna en vez de saltar entre cajas. */
.oneline{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); column-gap:clamp(28px,4.5vw,72px)}
.oneline li{border-top:1px solid var(--line); padding:15px 0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.55; color:var(--stone)}
.oneline li b{font-weight:400; color:var(--ink)}
.oneline.tight li{font-size:15px; padding:13px 0}

/* ---------- recuadros ---------- */
.callout{border:1px solid var(--surface-line); border-left:2px solid var(--line-2);
  background:var(--surface-sheen),var(--surface); border-radius:0 8px 8px 0;
  box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px)}
.callout p{font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.65;
  color:var(--stone); margin:0; max-width:76ch}
.callout p + p{margin-top:14px}
.callout strong{color:var(--ink); font-weight:400}
.callout.warn{border-left-color:var(--bronze)}
.callout.warn strong{color:var(--bronze)}

/* ---------- diagrama 01 · la web / tú / tu gestión ---------- */
.dgm-flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center;
  gap:clamp(10px,1.4vw,20px)}
.fbox{border:1px solid var(--surface-line); background:var(--surface-sheen),var(--surface);
  border-radius:8px; box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(20px,2.2vw,28px); text-align:center}
.fbox h3{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--stone); margin:0 0 16px}
.fbox ul{list-style:none; margin:0; padding:0}
.fbox li{font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.9; color:var(--gray)}
/* el bronce va SOBRE el velo negro, no en su lugar: si no, la caja destacada es la única que
   deja pasar la niebla y acaba siendo la menos legible de las tres */
.fbox.you{border-color:var(--bronze-line);
  background:linear-gradient(var(--bronze-soft),var(--bronze-soft)),var(--surface-sheen),var(--surface)}
.fbox.you h3{color:var(--bronze)}
.fbox.you li{color:var(--ink)}
.arrow{display:block; width:clamp(26px,3vw,44px); height:12px; color:var(--bronze)}
.arrow svg{width:100%; height:100%; display:block}

/* ---------- diagrama 02 · las tres formas ---------- */
.option{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2vw,28px); align-items:start;
  border:1px solid var(--surface-line); background:var(--surface-sheen),var(--surface);
  border-radius:8px; padding:clamp(20px,2.2vw,28px);
  box-shadow:var(--surface-shadow),var(--surface-inset)}
.option + .option{margin-top:14px}
/* la ganadora tiene que pesar más que las otras dos, no solo teñirse */
.option.win{border-color:var(--bronze-line); transform:scale(1.015);
  background:linear-gradient(var(--bronze-soft),var(--bronze-soft)),var(--surface-sheen),var(--surface);
  box-shadow:0 32px 70px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(176,141,87,.28)}
/* El disco va con fondo oscuro propio: sobre la superficie teñida de bronce de la opción ganadora,
   el ✓ en bronce se quedaba en 4,48:1 y no llegaba a AA por dos centésimas. */
.option .mark{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(8,8,10,.62); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--gray)}
.option.win .mark{border-color:var(--bronze); color:var(--bronze)}
.option h3{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(17px,1.6vw,22px);
  color:var(--ink); margin:0 0 10px}
.option p{font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.6;
  color:var(--stone); margin:0; max-width:64ch}
.option .why{margin-top:10px; color:var(--gray); font-size:15px}
.option.win .why{color:var(--bronze)}
.option .only{margin-top:14px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze)}
.option .badge{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray); white-space:nowrap; padding-top:9px}
.option.win .badge{color:var(--bronze)}

/* ---------- diagrama 03 · el vértice ---------- */
.dgm-vertex{text-align:center}
.vtop{display:inline-block; border:1px solid var(--line-2); border-radius:2px;
  padding:clamp(18px,2vw,26px) clamp(28px,4vw,56px)}
.vtop h3{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(16px,1.6vw,22px);
  letter-spacing:.12em; color:var(--ink); margin:0}
.vtop p{font-family:'Inter',sans-serif; font-weight:300; font-size:14px; color:var(--gray); margin:8px 0 0}
.vlines{display:block; width:100%; height:56px; color:var(--bronze-line)}
.vbranch{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); text-align:left}
.vbranch .card h3{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze)}
.vbranch ul{list-style:none; margin:0; padding:0}
.vbranch li{font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.95; color:var(--stone)}
.vbranch .who{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--gray)}

/* ---------- diagrama 04 · línea temporal ---------- */
.dgm-time{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,22px); position:relative}
.dgm-time::before{content:''; position:absolute; left:6px; right:6px; top:6px; height:1px; background:var(--line-2)}
.tstep{position:relative; padding-top:32px}
.tstep::before{content:''; position:absolute; top:0; left:0; width:13px; height:13px; border-radius:50%;
  background:#0A0A0A; border:1px solid var(--bronze)}
.tstep .n{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.2em;
  color:var(--bronze); display:block; margin-bottom:8px}
.tstep h3{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(15px,1.4vw,19px);
  color:var(--ink); margin:0 0 8px}
.tstep p{font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.55;
  color:var(--stone); margin:0}

/* ---------- tabla de inversión ----------
   Iba suelta sobre el fondo de la página, sin superficie: cinco filas de precios separadas solo por
   filetes de 1 px sobre negro. Ahora vive dentro del mismo objeto elevado que el resto. */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--surface-line); border-radius:10px;
  background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset)}
.ptable{width:100%; min-width:680px; border-collapse:collapse; text-align:left}
/* la cabecera se ancla arriba de la superficie y deja de flotar */
.ptable thead th{background:rgba(248,247,244,.05); border-bottom:1px solid var(--surface-line)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable th{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze); padding:15px 24px; white-space:nowrap}
.ptable td{padding:20px 24px; border-bottom:1px solid var(--line-2); vertical-align:top;
  font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.6; color:var(--stone)}
/* filas alternas, igual que en los mockups: es lo que deja seguir una fila larga con el ojo */
.ptable tbody tr:nth-child(even) td{background:rgba(248,247,244,.028)}
.ptable .svc{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:17px; color:var(--ink); white-space:nowrap}
.ptable .svc small{display:block; font-family:'Inter',sans-serif; font-weight:300; font-size:13px;
  color:var(--gray); margin-top:6px}
.ptable .inv{color:var(--ink); white-space:nowrap}
.ptable .inv small{display:block; font-size:13px; color:var(--stone); margin-top:6px; white-space:nowrap}
/* fila recomendada: sin un ancla, cinco filas de precio dejan al comprador sin punto de partida */
.ptable tr.pick td{background:var(--bronze-soft)}
.ptable tr.pick .svc{color:var(--ink)}
.ptable .pin{display:inline-block; margin-left:10px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--bronze-line); font-family:'Inter',sans-serif; font-weight:300;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze);
  white-space:nowrap; vertical-align:middle}

/* ---------- dudas razonables ---------- */
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; position:relative; min-height:44px;
  padding:20px 44px 20px 0; display:flex; align-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(16px,1.5vw,20px);
  line-height:1.35; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:8px; top:50%; width:9px; height:9px;
  margin-top:-7px; border-right:1px solid var(--bronze); border-bottom:1px solid var(--bronze);
  transform:rotate(45deg); transition:transform .25s ease}
.faq[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq .a{margin:0 0 26px; max-width:68ch; font-family:'Inter',sans-serif; font-weight:300;
  font-size:16px; line-height:1.65; color:var(--stone)}

/* ---------- formulario ---------- */
.form{max-width:760px}
.progress{display:flex; align-items:center; gap:12px; margin-bottom:clamp(28px,4vh,40px)}
.progress .bar{flex:1; height:2px; background:var(--line); position:relative; overflow:hidden}
.progress .bar i{position:absolute; inset:0 auto 0 0; background:var(--bronze); width:33.33%;
  transition:width .4s cubic-bezier(.16,1,.3,1)}
.progress .lbl{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray); white-space:nowrap}
.fstep[hidden]{display:none}
.fstep h3{font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:clamp(22px,2.4vw,34px);
  line-height:1.15; color:var(--ink); margin:0 0 clamp(22px,3vh,32px)}
.fgroup{margin-top:clamp(24px,3vh,34px)}
.fgroup > legend,.flabel{display:block; padding:0; font-family:'Inter',sans-serif; font-weight:300;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:14px}
fieldset{border:0; margin:0; padding:0}

.chips{display:grid; gap:10px}
.chip{display:flex; align-items:center; gap:14px; min-height:44px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:2px; padding:13px 18px;
  font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.4; color:var(--stone);
  transition:border-color .2s ease, background .2s ease, color .2s ease}
.chip input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.chip .dot{flex:none; width:14px; height:14px; border-radius:50%; border:1px solid var(--line-2);
  transition:border-color .2s ease, box-shadow .2s ease}
.chip:hover{border-color:var(--stone)}
.chip.on{border-color:var(--bronze); background:var(--bronze-soft); color:var(--ink)}
.chip.on .dot{border-color:var(--bronze); box-shadow:inset 0 0 0 3px var(--bronze)}
.chip:focus-within{outline:2px solid var(--bronze); outline-offset:3px}

.field{margin-top:clamp(22px,2.6vh,28px)}
.field input,.field select,.field textarea{width:100%; min-height:44px; background:transparent;
  border:0; border-bottom:1px solid var(--line-2); border-radius:0; padding:12px 0; color:var(--ink);
  font-family:'Inter',sans-serif; font-weight:300; font-size:17px; line-height:1.4;
  transition:border-color .2s ease}
.field textarea{min-height:112px; resize:vertical}
.field select{appearance:none; -webkit-appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),linear-gradient(135deg,var(--bronze) 50%,transparent 50%);
  background-position:calc(100% - 12px) 22px,calc(100% - 7px) 22px; background-size:5px 5px,5px 5px;
  background-repeat:no-repeat}
.field select option{background:#0A0A0A; color:#F8F7F4}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--bronze)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}

.check{display:flex; align-items:flex-start; gap:14px; margin-top:clamp(26px,3.2vh,34px); cursor:pointer}
.check input{flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:var(--bronze)}
.check span{font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.6; color:var(--stone)}
.check a{color:var(--bronze); text-decoration:underline; text-underline-offset:3px}

.err{display:block; margin-top:10px; font-family:'Inter',sans-serif; font-weight:300; font-size:14px;
  line-height:1.5; color:var(--bronze)}
.err:empty{display:none}
.note{margin-top:16px; border-left:2px solid var(--bronze); padding:14px 18px; background:var(--bronze-soft);
  font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.6; color:var(--stone)}
.note[hidden]{display:none}

.factions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:clamp(30px,4vh,42px)}
.btn{min-height:44px}          /* partner.css deja los botones en 42px: área táctil mínima */
/* partner.css diseñó .btn para <a>, que es transparente por defecto. En un <button> el navegador
   pone su gris de sistema y el texto claro se vuelve ilegible: pasa en «← Atrás» del formulario y
   en los botones de /reservar. */
button.btn{background:transparent; font:inherit; cursor:pointer}
button.btn-primary{background:var(--ink)}
button.btn-primary:hover{background:#fff}
.btn[disabled]{opacity:.45; pointer-events:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* foco visible, en bronce, en todo lo interactivo */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,label:focus-visible{
  outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px}

/* ---------- prueba: sitios en producción ----------
   Reutilizan el cromo de navegador de los mockups (.mk-bar/.mk-url) a propósito: donde aquellos
   ilustran, estos enlazan a algo real. La tarjeta ENTERA es el enlace, para que el área táctil sea
   la caja y no una línea de texto. */
/* 2×2 fijo: con auto-fit, a 1440 px entraban tres y la cuarta quedaba huérfana debajo. */
.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.proof-grid{grid-template-columns:1fr}}
.proof{display:flex; flex-direction:column; border:1px solid var(--surface-line); border-radius:9px;
  overflow:hidden; background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease}
.proof .mk-url{flex:none; width:100%}
.proof-body{display:block; padding:clamp(18px,2.1vw,26px)}
.proof-body b{display:block; font-family:'Space Grotesk',sans-serif; font-weight:400;
  font-size:clamp(16px,1.4vw,20px); line-height:1.25; color:var(--ink)}
.proof-body > span{display:block; margin-top:9px; font-family:'Inter',sans-serif; font-weight:300;
  font-size:15px; line-height:1.55; color:var(--stone)}
.proof-body em{display:block; margin-top:14px; font-style:normal; font-family:'Inter',sans-serif;
  font-weight:300; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze)}
@media (hover:hover) and (pointer:fine){
  .proof:hover{transform:translateY(-4px); border-color:var(--bronze-line);
    box-shadow:0 38px 80px -22px rgba(0,0,0,.95),var(--surface-inset)}
  .proof:hover .mk-url{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.proof{transition:none} .proof:hover{transform:none}}

/* ---------- sección de conversión ----------
   Dos columnas: el porqué a la izquierda, el formulario a la derecha dentro de su propia
   superficie. Antes los campos flotaban sobre el fondo de la página y no se veía dónde empezaba
   el formulario ni cuánto quedaba. */
.conv-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4.5vw,76px); align-items:start}
.conv-aside{position:sticky; top:clamp(24px,5vh,64px)}
.conv-form{border:1px solid var(--surface-line); border-radius:12px;
  background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(24px,3vw,42px)}
.conv-form .form{max-width:none}

/* los tres pasos, como línea temporal numerada en vez de tres frases sueltas */
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start;
  padding:0 0 clamp(20px,2.6vh,28px); position:relative}
.steps li:not(:last-child)::before{content:''; position:absolute; left:17px; top:38px; bottom:6px;
  width:1px; background:linear-gradient(var(--bronze-line),rgba(176,141,87,.06))}
.steps .n{width:35px; height:35px; border-radius:50%; border:1px solid var(--bronze-line);
  background:rgba(8,8,10,.62); display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:14px; color:var(--bronze); flex:none}
.steps h3{font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(16px,1.4vw,19px);
  line-height:1.3; color:var(--ink); margin:6px 0 0}
.steps p{font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.55;
  color:var(--stone); margin:7px 0 0; max-width:38ch}

.reassure{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0}
.reassure li{border:1px solid var(--line-2); border-radius:999px; padding:7px 15px;
  font-family:'Inter',sans-serif; font-weight:300; font-size:12px; letter-spacing:.06em; color:var(--stone)}

/* ayuda por paso: la queja era «cuesta entenderlo». Dice qué se pide y por qué, antes de los campos. */
.fhelp{font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.55;
  color:var(--gray); margin:-18px 0 0; max-width:46ch}
.fstep h3{margin-bottom:18px}
/* la barra de progreso deja de ser un pelo de 2 px */
.progress .bar{height:4px; border-radius:999px; background:rgba(248,247,244,.10)}
.progress .lbl{color:var(--bronze)}

/* ---------- dudas, compactas ----------
   Van debajo del contacto: quien ya está convencido no debe tropezar con nueve objeciones antes
   del formulario. Y como es material de repesca, pesa menos que el resto de la página. */
.faqbox{border:1px solid var(--surface-line); border-radius:10px;
  background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(6px,1vw,14px) clamp(18px,2.2vw,28px)}
.faqbox .faq:last-child{border-bottom:0}
.faqbox .faq summary{font-size:clamp(15px,1.25vw,17px); padding:15px 40px 15px 0; min-height:44px}
.faqbox .faq .a{margin:0 0 20px; font-size:15px}

/* ---------- pie ---------- */
.foot-grid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,2.6vw,34px);
  align-items:center}
/* height:auto es obligatorio: el atributo height="132" del HTML es una pista de presentación que
   gana a aspect-ratio, y el retrato salía ovalado (116×132) dentro de un borde circular. */
.foot-face{width:clamp(84px,9vw,116px); height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover;
  filter:grayscale(1) contrast(1.04); display:block;
  box-shadow:0 0 0 1px rgba(248,247,244,.16), 0 0 46px 6px rgba(176,141,87,.10)}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr; justify-items:start; gap:22px}
}

.lfoot{border-top:1px solid var(--line); padding-top:clamp(30px,4vh,44px); font-family:'Inter',sans-serif;
  font-weight:300; font-size:14px; line-height:1.7; color:var(--gray)}
.lfoot a{color:var(--stone); text-decoration:none}
.lfoot a:hover{color:var(--ink)}
/* la línea legal es texto real, no adorno: va en --gray (AA) y no en --faint */
.lfoot .legal{margin-top:18px; font-size:12px; color:var(--gray)}
.lfoot .legal a{color:var(--gray)}

/* ---------- utilidades de espaciado ----------
   Van al final a propósito: .lede, .body, .small y .card p declaran `margin:0`, y con la misma
   especificidad gana la última regla. Si estas subieran, no separarían nada. */
.stack-l{margin-top:clamp(44px,6vh,72px)}
.stack-m{margin-top:clamp(28px,4vh,44px)}
.stack-s{margin-top:clamp(16px,2.4vh,24px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .dgm-time{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:900px){
  /* el mockup pasa debajo del copy: en dos columnas estrechas no se lee ni una cosa ni la otra */
  .hero-grid{grid-template-columns:1fr; gap:clamp(34px,6vh,52px)}
  /* el formulario baja bajo su argumento; el sticky se quita o el aside se queda clavado */
  .conv-grid{grid-template-columns:1fr; gap:clamp(34px,5vh,48px)}
  .conv-aside{position:static}
  .section.split{min-height:0; padding:clamp(112px,15vh,150px) 0 clamp(52px,7vh,76px)}
  /* a una columna vuelve a haber ancho de página: el titular recupera cuerpo y tope de medida */
  .section.split .title.hero{font-size:clamp(31px,5.6vw,48px); max-width:18ch}
  .section.split .eyebrow{white-space:normal}
}
@media (max-width:768px){
  /* las dos superficies enfrentadas se apilan y el corte gira a horizontal */
  .mk-split{grid-template-columns:1fr}
  .mk-split .mk-cut{flex-direction:row; writing-mode:horizontal-tb; padding:4px 0}
  .mk-split .mk-cut::before,.mk-split .mk-cut::after{width:auto; height:1px; min-height:0;
    background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 9px)}
  .dgm-flow{grid-template-columns:1fr; justify-items:stretch}
  .dgm-flow .arrow{width:12px; height:26px; justify-self:center}
  .dgm-flow .arrow svg{transform:rotate(90deg); transform-origin:center}
  .option{grid-template-columns:auto 1fr}
  .option .badge{grid-column:1/-1; padding-top:0}
  .vlines{display:none}
  .vbranch{grid-template-columns:1fr}
  .vtop{display:block; margin-bottom:16px}
  .dgm-time{grid-template-columns:1fr; gap:0; padding-left:30px}
  .dgm-time::before{left:6px; right:auto; top:6px; bottom:6px; width:1px; height:auto}
  .tstep{padding:0 0 26px 0}
  .tstep::before{top:4px; left:-30px}
}
@media (max-width:480px){
  .option{grid-template-columns:1fr}
  .option .mark{margin-bottom:4px}
  /* en una sola columna el filete superior de cada línea ya separa; el respiro puede bajar */
  .oneline li{padding:13px 0}
  /* la niebla fija a pantalla completa es cara de repintar en móviles antiguos y a este tamaño
     apenas se percibe: se congela y se deja solo el halo */
  .atmos img{animation:none; transform:scale(1.04)}
}