/* Sistema heredado del CRM. La vitrina no es una isla de marca: quien entra
   por aquí tiene que aterrizar en el mismo producto sin sentir que cambió de
   empresa.

   Pares de contraste, medidos y no negociables:
     slate-950 sobre amber-500 → 9.39 ✅  (el par fuerte de la marca)
     blanco    sobre amber-500 → 2.15 ❌  (nunca)
   El mínimo del texto secundario CAMBIA con la superficie: en fondo claro es
   slate-500; sobre slate-900/950 es slate-400. El par se invierte, y usar el
   mismo en las dos reprueba en una de ellas. */
:root{
  --t:#020617;        /* slate-950 — texto en claro, y fondo de las bandas oscuras */
  --t2:#334155;       /* slate-700 */
  --t3:#64748b;       /* slate-500 — mínimo sobre fondo CLARO */
  --claro:#94a3b8;    /* slate-400 — mínimo sobre fondo OSCURO */
  --linea:#e2e8f0;
  --papel:#f8fafc;
  --am:#f59e0b;       /* amber-500 — marca */
  --am1:#fffbeb;
  --am4:#fbbf24;      /* amber-400 — el acento sobre oscuro */
  --am7:#b45309;      /* amber-700 — el acento sobre claro */
  --em:#059669;
  --em4:#34d399;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Sin tipografía web a propósito. El link llega por WhatsApp y se abre con
   datos móviles: una familia descargada cuesta entre 40 y 90 KB y un salto de
   texto al cargar, justo en los segundos que deciden si se queda. */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--t);background:#fff;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* `height:auto` NO es opcional. Los atributos `width`/`height` del `<img>`
   valen como CSS: `max-width:100%` encoge el ancho y la altura se queda
   clavada en el atributo, así que la imagen sale ESTIRADA. El tablero del
   héroe salía a 951×627 cuando le tocaban 951×335 — casi el doble de alto—, y
   la comparación de temas, a más del triple.
   `width:100%` en los marcos es aparte: sin él la imagen se queda en el ancho
   de su atributo y deja el marco a medio llenar. */
img{max-width:100%;height:auto;display:block}
.ventana img,.tel img,.marco img{width:100%}
.w{max-width:1160px;margin:0 auto;padding:0 24px}

/* ── Ritmo de contraste ──────────────────────────────────────────────────
   Lo que le faltaba a la primera versión: era blanca de arriba abajo. Las
   bandas alternan para que el ojo tenga dónde descansar y dónde despertar. */
.banda{padding-block:82px}
.papel{background:var(--papel);border-block:1px solid var(--linea)}
.osc{background:var(--t);color:#fff}
.osc h2{color:#fff}
.osc .dice,.osc .enc p{color:var(--claro)}

/* ── Tipografía ───────────────────────────────────────────────────────── */
h1{font-size:clamp(35px,4.8vw,56px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800;max-width:16ch}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
/* El acento de color en parte del titular: es lo que hace que se lea como
   página de venta y no como documento. */
h1 em,h2 em{font-style:normal;color:var(--am7)}
.osc h1 em,.osc h2 em{color:var(--am4)}
.entrada{margin-top:20px;font-size:clamp(17px,1.9vw,20px);line-height:1.55;max-width:46ch}
.dice{font-size:17px;line-height:1.55;color:var(--t2);max-width:62ch}
.enc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:end}
.enc p{font-size:19px;line-height:1.5;color:var(--t2);max-width:42ch;padding-bottom:5px}

/* La etiqueta chica sobre el titular: dice de qué va esto antes de que el ojo
   llegue al titular. */
.rotulo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--am7);
  background:var(--am1);border:1px solid #fde68a;border-radius:999px;padding:7px 14px}
.osc .rotulo{background:rgba(245,158,11,.14);border-color:rgba(251,191,36,.4);color:var(--am4)}

/* ── Un solo botón, repetido ─────────────────────────────────────────────
   Dos llamadas que compiten no duplican el contacto: lo parten. */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--am);color:var(--t);
  font-weight:700;font-size:17px;padding:16px 28px;border-radius:11px;text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(245,158,11,.9)}
.btn:hover{background:var(--am4)}
.btn2{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:17px;
  padding:16px 24px;border-radius:11px;text-decoration:none;color:var(--t);
  border:1px solid var(--linea);background:#fff}
.osc .btn2{background:transparent;border-color:#334155;color:#fff}
.fila{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* La fila de pruebas: ocupa el lugar de los sellos y los logos de clientes que
   aquí no existen todavía, sin inventar ninguno. */
.pruebas{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:var(--t2)}
.osc .pruebas{color:var(--claro)}
.pruebas span{display:inline-flex;align-items:center;gap:8px}
.pruebas b{width:7px;height:7px;border-radius:50%;background:var(--em);flex:none}
.osc .pruebas b{background:var(--em4)}

/* ── Marco de ventana ────────────────────────────────────────────────────
   La captura deja de verse como una imagen pegada y se lee como una pantalla.
   Es el recurso más barato de todos los que usa el mercado. */
.ventana{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--linea);
  box-shadow:0 40px 80px -40px rgba(2,6,23,.45),0 8px 24px -12px rgba(2,6,23,.18)}
.ventana .barra{display:flex;align-items:center;gap:8px;padding:11px 15px;background:var(--papel);
  border-bottom:1px solid var(--linea)}
.ventana .luz{width:11px;height:11px;border-radius:50%}
.ventana .titulo{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--t3);margin-right:44px}
.osc .ventana{border-color:#1e293b;box-shadow:0 50px 90px -40px rgba(0,0,0,.85)}
.osc .ventana .barra{background:#0f172a;border-bottom-color:#1e293b}
.osc .ventana .titulo{color:var(--claro)}

.tel{width:100%;max-width:290px;background:var(--t);border-radius:32px;padding:9px;
  box-shadow:0 34px 64px -26px rgba(2,6,23,.5)}
.tel img{border-radius:25px}
.osc .tel{box-shadow:0 40px 70px -28px rgba(0,0,0,.9);outline:1px solid #1e293b}
.marco{border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -28px rgba(2,6,23,.42)}

/* ── Navegación ─────────────────────────────────────────────────────────── */
nav{display:flex;justify-content:space-between;align-items:center;padding-block:18px;gap:16px}
.marca{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.02em;color:#fff}
.chispa{width:13px;height:13px;background:var(--am);border-radius:50% 50% 50% 3px;transform:rotate(-20deg);flex:none}
.nav-sec{color:var(--claro);text-decoration:none;font-weight:600;font-size:15px}

/* ── Recorte de una captura larga ────────────────────────────────────────
   Se desvanece con el color del fondo que la rodea: en blanco sobre una
   captura oscura se ve como neblina. */
.recorte{position:relative;overflow:hidden;--vela:#fff}
.papel .recorte{--vela:var(--papel)}
.recorte::after{content:'';position:absolute;left:0;right:0;bottom:0;height:80px;
  background:linear-gradient(transparent,var(--vela))}

/* ── Cierre y pie ───────────────────────────────────────────────────────── */
.cierre{text-align:center}
.cierre h2{margin:0 auto;max-width:20ch}
.cierre .entrada{margin:18px auto 0;color:var(--claro);max-width:48ch}
.cierre .fila{justify-content:center}
footer{padding-block:26px;border-top:1px solid #1e293b;color:var(--claro);font-size:14.5px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* El pie ya trae cuatro ligas. Dos cosas hacen falta y ninguna es cosmética:
   que se envuelvan en un teléfono en vez de salirse, y que cada una mida sus
   24px de alto — WCAG 2.2 `target-size`, que reprobó en 390 con las ligas
   pegadas en un solo renglón. */
footer a{color:var(--claro);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:5px}
footer a:hover{color:#fff}
footer span:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:0 7px}

@media(max-width:860px){
  body{font-size:16px}
  .banda{padding-block:56px}
  .enc{grid-template-columns:1fr;gap:14px}
  .enc p{padding-bottom:0}
}

/* ── Disposición de las secciones de esta página ─────────────────────────── */

/* Héroe: banda oscura, y el tablero colgando del borde derecho. Colgar, y no
   caber, es lo que dice "hay más pantalla". */
/* El héroe ahora lleva FOTO DEL TALLER de fondo, que es el recurso que usan
   todas las páginas del mercado y el único que no se podía fabricar. La foto
   es del taller de un cliente real.

   El velo no es decoración: sin él, el titular blanco cae sobre un pegboard
   lleno de herramientas naranjas y no se lee. Va más opaco a la izquierda,
   que es donde vive el texto, y se abre a la derecha para que el taller se
   vea. */
.hero{position:relative;overflow:hidden;background:#020617}
.hero .foto{position:absolute;inset:0;z-index:0}
.hero .foto img{width:100%;height:100%;object-fit:cover;object-position:38% 42%}
.hero .velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(2,6,23,.96) 0%,rgba(2,6,23,.93) 38%,rgba(2,6,23,.72) 66%,rgba(2,6,23,.55) 100%)}
.hero .w{position:relative;z-index:2}
.hero .reja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;
  align-items:center;padding-block:34px 76px}
.hero .rotulo{margin-bottom:22px}
.hero h1{max-width:15ch}
.hero .escena{margin-right:-30vw}

.par{margin-top:38px;display:grid;grid-template-columns:1fr 330px;gap:56px;align-items:center}
.par-inv{grid-template-columns:330px 1fr}
/* La columna de 330 es para un teléfono. Una captura de escritorio ahí sale
   ilegible, así que las dos mitades pesan casi igual. */
.par-ancho{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center}

/* Un segundo encabezado dentro de la misma banda: el mismo tema —el dinero—
   contado en dos tiempos, sin partirlo en dos bandas oscuras seguidas. */
.enc-2{margin-top:72px;padding-top:48px;border-top:1px solid rgba(148,163,184,.18)}

/* Lista de puntos con el primer fragmento en negritas. Sin viñeta de disco:
   la raya corta pesa menos y no compite con el texto. */
.lista{margin-top:20px;padding:0;list-style:none;display:grid;gap:12px}
.lista li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.5;color:var(--t2)}
.lista li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;
  border-radius:2px;background:var(--am)}
.lista li b{color:var(--t)}
.osc .lista li{color:var(--claro)}
.osc .lista li b{color:#fff}
.lista-3{margin-top:26px;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
/* En el cierre la lista va antes de los botones y centrada como el resto del
   bloque, así que necesita su propio aire y un tope de ancho. */
.lista-cierre{margin:30px auto 34px;max-width:920px;text-align:left}

/* Rubros: tres tableros del mismo producto con el trabajo de tres oficios. */
.rubros{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rubros figure{min-width:0}
.rubros figcaption{margin-top:12px;font-size:15px;font-weight:700}
.rubros figcaption span{display:block;font-weight:500;color:var(--t3);font-size:14px;margin-top:3px}
.osc .rubros figcaption span{color:var(--claro)}
.chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:9px}
.chips li{list-style:none;border:1px solid var(--linea);border-radius:999px;padding:8px 15px;
  font-size:15.5px;font-weight:600;color:var(--t2);background:#fff}
.osc .chips li{border-color:#1e293b;color:#e2e8f0;background:#0f172a}

/* Servicios y refacciones: dos teléfonos lado a lado, porque lo que hay que
   entender es que el desglose que captura el taller es EL MISMO que ve el
   cliente. Uno solo no lo diría. */
.dos-tel{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  max-width:760px}
/* Los dos teléfonos no miden lo mismo —una pestaña trae más renglones que la
   otra—, así que sin esto cada pie cae a una altura distinta y la pareja se
   lee desalineada. `margin-top:auto` los baja a la misma línea. */
.dos-tel figure{display:flex;flex-direction:column}
.dos-tel figcaption{margin-top:auto;padding-top:12px;font-size:15px;font-weight:700}
.dos-tel figcaption span{display:block;font-weight:500;color:var(--t3);font-size:14px;margin-top:3px}
.osc .dos-tel figcaption span{color:var(--claro)}

/* La foto del producto usándose de verdad. Es la única del mundo donde se ve
   el CRM en la mano de alguien, en un taller, con órdenes reales. */
.enuso{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.enuso .marco{border-color:#1e293b}
/* Sobre banda oscura el marco claro se ve como un halo alrededor de la
   captura. Mismo trato que ya tenía `.enuso`. */
.osc .marco{border-color:#1e293b;background:#0f172a}

/* Precios: los planes del catálogo del producto, no números inventados. */
.planes{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
/* Cuatro planes no caben legibles en una laptop de 13": a partir de aquí van
   en dos filas de dos antes de apilarse del todo en el teléfono. */
@media(max-width:1100px){.planes{grid-template-columns:repeat(2,1fr);gap:20px}}
.plan{border:1px solid var(--linea);border-radius:16px;padding:22px;background:#fff}
.plan.elegido{border-color:var(--am);box-shadow:0 20px 44px -24px rgba(245,158,11,.7);position:relative}
.plan .cinta{position:absolute;top:-13px;left:26px;background:var(--am);color:var(--t);
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:5px 12px}
.plan .precio{margin-top:14px;font-size:38px;font-weight:800;letter-spacing:-.03em}
.plan .precio small{font-size:16px;font-weight:600;color:var(--t3);letter-spacing:0}
.plan p{margin-top:8px;color:var(--t2);font-size:15.5px;line-height:1.5}
.plan ul{margin-top:18px;list-style:none;font-size:15.5px;color:var(--t2);line-height:1.5}
.plan li{padding-left:22px;position:relative;margin-top:9px}
.plan li::before{content:'';position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--em)}
.plan .btn,.plan .btn2{margin-top:22px;width:100%;justify-content:center}
.nota-precio{margin-top:22px;font-size:15px;color:var(--t3)}

.temas{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.temas figcaption{margin-top:10px;font-size:14.5px;color:var(--t3)}
.osc .temas figcaption{color:var(--claro)}

@media(max-width:860px){
  .hero .reja{grid-template-columns:1fr;gap:26px;padding-block:16px 42px}
  /* Los dos botones no caben en una fila y se apilan, y entre eso y las tres
     pruebas el producto se sale del primer vistazo. El secundario sólo hace
     scroll a la sección de abajo: hacer scroll ya hace eso. */
  .hero .btn2{display:none}
  .hero .fila{margin-top:24px}
  .hero .pruebas{margin-top:18px;gap:7px 16px;font-size:14.5px}
  .hero .escena{margin-right:-16px}
  .par,.par-inv{grid-template-columns:1fr;gap:28px}
  .par .tel,.par-inv .tel{margin-inline:auto}
  .rubros{grid-template-columns:1fr;gap:26px}
  .dos-tel{grid-template-columns:1fr 1fr;gap:14px}
  .dos-tel figcaption{font-size:13.5px}
  .dos-tel figcaption span{display:none}
  .par-ancho{grid-template-columns:1fr;gap:26px}
  .enc-2{margin-top:44px;padding-top:30px}
  .lista-3{grid-template-columns:1fr;gap:14px}
  .enuso{grid-template-columns:1fr;gap:26px}
  .planes{grid-template-columns:1fr}
  .temas{grid-template-columns:1fr}
}