/* ═══════════════ LANDINGS SECTORIALES ═══════════════
 *
 * La estructura es la de Workable; la marca es la de QRlify.
 *
 * Lo que se toma prestado es el esqueleto: escala de 8px, jerarquia
 * tipografica con display pesado y cuerpo holgado, ritmo de secciones por
 * alternancia de superficie, sin sombras, rejillas de 2 y 3 columnas con
 * 32px de hueco, etiqueta kicker sobre cada titular.
 *
 * Lo que NO se toma es la paleta. El crema #fbfaf8 y el teal #004038 son
 * de Workable, y sobre ese crema el lima de QRlify da 1.16:1 de contraste:
 * el color de marca seria literalmente ilegible. Asi que las superficies
 * pasteles que alli dan ritmo (lavanda, melocoton, mantequilla) aqui son
 * una rotacion de grises oscuros, y el acento sigue siendo el lima.
 *
 * TINTE POR SECTOR. Cada landing declara --tinte. Se usa solo en el
 * kicker, la etiqueta del hero y los numeros: nunca en un boton. El lima
 * es el unico color de accion de toda la pagina, igual que el teal es el
 * unico de Workable. Un segundo boton de color romperia la regla que hace
 * que el primero se vea encendido.
 */

:root {
  /* Superficies: la rotacion oscura que sustituye a los pasteles */
  --bg:        #080808;
  --s1:        #101010;
  --s2:        #161616;
  --s3:        #1c1c1c;

  --border:        rgba(255,255,255,0.06);
  --border-fuerte: rgba(255,255,255,0.14);

  --text:   #F0F0F0;   /* titulares */
  --cuerpo: #B6B6B6;   /* parrafos: nunca el blanco de titular, cansa */
  --muted:  #6E6E6E;   /* kickers, pies, metadatos */

  --accent:     #BAFF29;
  --accent-dim: rgba(186,255,41,0.08);

  /* Lo redefine cada landing */
  --tinte:        #BAFF29;
  --tinte-dim:    rgba(186,255,41,0.08);
  --tinte-borde:  rgba(186,255,41,0.28);

  /* Escala de 8, de Workable */
  --e1:8px;  --e2:16px; --e3:24px; --e4:32px; --e5:40px;
  --e6:48px; --e7:64px; --e8:88px; --e9:104px;

  --ancho:        1200px;
  --hueco:        80px;   /* entre secciones */
  --pad-tarjeta:  32px;
  --radio:        14px;   /* las tarjetas respiran; los botones no */
  --radio-boton:  8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg);
  color: var(--cuerpo);
  /* 16px en monoespaciada equivale a los 18px de Workable en Proxima: la
     mono ocupa mas por caracter. El 1.65 es lo que hace que un texto
     largo en mono no parezca un bloque de codigo. */
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* ── Tipografia ────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Syne', sans-serif; color: var(--text); margin: 0; }

h1 {
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h2 {
  /* 48px arriba, no 38. El display pesado con interlineado apretado es
     LA firma de este sistema; a 38px se queda en subtitulo. */
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 var(--e2); }
p:last-child { margin-bottom: 0; }

/* El kicker de Workable: mayusculas pequenas sobre cada titular. Aqui va
   en el tinte del sector en vez de en gris, que es lo que le da identidad
   a cada pagina sin tocar la paleta. */
.kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: var(--e1);
}

.entradilla { font-size: 17px; line-height: 1.6; color: var(--cuerpo); max-width: 62ch; }

/* ── Estructura ────────────────────────────────────────────────────── */
.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e4); }

/* EL RITMO SE HACE CON TONO, NO CON LUMINANCIA.
 *
 * El primer intento uso grises escalonados (#080808, #101010, #161616) y
 * la pagina quedo plana: entre esas bandas hay 1.05 de contraste, o sea
 * nada. Lo curioso es que en Workable el salto blanco-sobre-crema tambien
 * es 1.04. Su ritmo no viene de la luminancia: viene del TONO. Lavanda
 * junto a melocoton se leen como secciones distintas aunque sean igual de
 * claras, y el contraste no mide eso.
 *
 * Asi que aqui las bandas son casi igual de oscuras pero de tonos
 * distintos. El lima se mantiene por encima de 15:1 sobre todas. */
.banda { padding: var(--hueco) 0; }
.banda--calida   { background: #1A1109; }
.banda--fria     { background: #091317; }
.banda--ciruela  { background: #150C18; }
.banda--bosque   { background: #0A1410; }
.banda--tinte    { background: var(--tinte-dim); border-block: 1px solid var(--tinte-borde); }

/* Aire. "Spacious" en Workable significa que el titular tiene sitio
   alrededor; apretarlo es lo que hace que una pagina parezca un folleto. */
/* 20ch sonaba bien y partia los titulares en cinco lineas: a 48px, 20ch
   son 480px y caben tres palabras. La medida tiene que ir en el h2 y con
   holgura; dos lineas es lo que se busca, no cinco. */
.banda__cabeza { margin-bottom: var(--e7); }
.banda__cabeza h2 { max-width: 15ch; }
.banda__cabeza .entradilla { max-width: 52ch; margin-top: var(--e3); }
@media (max-width: 860px) { .banda__cabeza h2 { max-width: none; } }

/* ── Rejillas ──────────────────────────────────────────────────────── */
.rejilla   { display: grid; gap: var(--e4); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── Tarjetas ──────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: var(--pad-tarjeta);
  /* Sin sombra, como Workable: la profundidad la da el cambio de
     superficie, no una sombra flotando sobre negro, que ademas no se ve. */
}
.banda--s2 .tarjeta { background: var(--s3); }
.tarjeta h3 { margin-bottom: var(--e1); }
.tarjeta p  { font-size: 14.5px; color: var(--cuerpo); line-height: 1.6; }

/* Seis tarjetas identicas en rejilla son seis bloques del mismo peso y
   ninguno destaca: eso es lo que se lee como "generico". En la lista de
   casos van sin caja, separadas por una linea, con el numero grande
   haciendo de ancla visual. Menos tinta, mas jerarquia. */
.casos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
.caso {
  padding: var(--e4) var(--e4) var(--e4) 0;
  border-top: 1px solid var(--border);
}
.caso:nth-child(-n+3) { border-top: 0; }
.caso__n {
  font-family:'Syne',sans-serif; font-size:32px; font-weight:800;
  color: var(--tinte); opacity:.9; line-height:1; display:block;
  margin-bottom: var(--e2);
}
.caso h3 { margin-bottom: var(--e1); }
.caso p  { font-size: 14px; color: var(--muted); line-height:1.6; }
@media (max-width: 860px) {
  .casos { grid-template-columns: minmax(0,1fr); }
  .caso  { padding: var(--e3) 0; border-top: 1px solid var(--border); }
  .caso:nth-child(-n+3) { border-top: 1px solid var(--border); }
  .caso:first-child { border-top: 0; }
}

.tarjeta__num {
  font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 800;
  color: var(--tinte);
  margin-bottom: var(--e2);
  display: block;
}

/* ── Acciones. El lima es el unico color de boton de la pagina ─────── */
.btn {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--radio-boton);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .15s;
  cursor: pointer;
}
.btn--primario { background: var(--accent); color: #000; }
.btn--primario:hover { background: #CCFF4A; }
.btn--fantasma { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--fantasma:hover { background: var(--accent-dim); }

.acciones { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e5); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { padding: var(--e9) 0 var(--hueco); }
/* Un 'fr' pelado lleva min-width:auto, asi que la columna de texto se
   niega a bajar de su contenido minimo y se come la del QR. Con un titular
   de palabras largas ("emprendedores") la derecha se quedaba en 167px.
   minmax(0,...) deja encoger el texto y el suelo protege al codigo. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.75fr); gap: var(--e7); align-items: center; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: minmax(0,1fr); gap: var(--e5); } }
.hero__tag {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte);
  border: 1px solid var(--tinte-borde);
  background: var(--tinte-dim);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: var(--e3);
}
.hero__tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tinte); display: inline-block;
}
.hero h1 { margin-bottom: var(--e3); }

.miga { font-size: 12px; color: var(--muted); margin-bottom: var(--e3); }
.miga a { color: var(--muted); text-decoration: none; }
.miga a:hover { color: var(--accent); }
.miga span { margin: 0 var(--e1); }

/* ── Listas de beneficios ──────────────────────────────────────────── */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.lista li { padding-left: var(--e3); position: relative; }
.lista li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; background: var(--tinte);
}

/* ── Pasos numerados ───────────────────────────────────────────────── */
.pasos { counter-reset: paso; display: grid; gap: var(--e3); }
.paso-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--e3); align-items: start; }
.paso-item::before {
  counter-increment: paso; content: counter(paso);
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 13px;
  color: var(--tinte);
  border: 1px solid var(--tinte-borde);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: grid; place-items: center;
}

/* ── Preguntas frecuentes ──────────────────────────────────────────── */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__p {
  width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 16px; padding: var(--e3) 0; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--e3); align-items: center;
}
.faq__p::after { content: '+'; color: var(--tinte); font-size: 20px; flex-shrink: 0; }
.faq__item.abierto .faq__p::after { content: '\2013'; }
.faq__r { display: none; padding-bottom: var(--e3); font-size: 15px; }
.faq__item.abierto .faq__r { display: block; }

/* ── Cierre ────────────────────────────────────────────────────────── */
.cierre { text-align: center; padding: var(--hueco) 0; }
.cierre h2 { margin-bottom: var(--e2); }
.cierre .acciones { justify-content: center; }

/* ── Enlaces entre landings ────────────────────────────────────────── */
.vecinas { display: flex; flex-wrap: wrap; gap: var(--e1); }
.vecinas a {
  font-size: 13px; color: var(--cuerpo); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px;
}
.vecinas a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Movil ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --hueco: 56px; --pad-tarjeta: 22px; }
  .envoltorio { padding: 0 20px; }
  .rejilla-2, .rejilla-3 { grid-template-columns: minmax(0,1fr); }
  .hero { padding: var(--e7) 0 var(--e6); }
  .acciones .btn { flex: 1 1 100%; text-align: center; }
}

/* ── Cabecera y pie ────────────────────────────────────────────────────
   Copiados de las landings que ya existen para que esto sea la misma web
   y no una pagina suelta con el mismo logo. */
/* body > nav y no nav a secas: la miga de pan tambien es un <nav> por
   accesibilidad, y con el selector suelto se volvia la barra superior. */
body > nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--e5);
  background: rgba(8,8,8,0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; text-decoration:none; color:var(--text); }
.nav-logo em { color: var(--accent); font-style: normal; }
.nav-links { display:flex; align-items:center; gap:var(--e4); }
.nav-links a { color:var(--muted); font-size:11px; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; transition:color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  background:var(--accent); color:#000; padding:10px 22px;
  font-family:'Syne',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border-radius: var(--radio-boton); transition:all .15s;
}
.nav-cta:hover { background:#CCFF4A; }

footer { background:#050505; border-top:1px solid var(--border); padding:var(--e6) var(--e5) var(--e4); }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--e5); margin-bottom:var(--e5); flex-wrap:wrap; }
.footer-logo { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; color:var(--text); text-decoration:none; display:block; margin-bottom:10px; }
.footer-logo em { color:var(--accent); font-style:normal; }
.footer-tagline { color:var(--muted); font-size:12px; line-height:1.7; max-width:260px; }
.footer-links { display:flex; gap:var(--e6); flex-wrap:wrap; }
.footer-col-title { font-family:'Syne',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; color:var(--text); }
.footer-col a { display:block; color:var(--muted); font-size:12px; text-decoration:none; margin-bottom:10px; transition:color .15s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { display:flex; justify-content:space-between; gap:var(--e3); padding-top:var(--e3); border-top:1px solid var(--border); font-size:12px; color:var(--muted); flex-wrap:wrap; }

/* La barra es fija: el hero necesita hueco o el titular nace debajo.
   Es el mismo fallo que acabamos de arreglar en la portada. */
.hero { padding-top: calc(var(--e9) + 40px); }
@media (max-width: 860px) {
  body > nav { padding: 14px 20px; flex-wrap: wrap; gap: var(--e2); }
  .nav-links { display: none; }
  footer { padding: var(--e6) 20px var(--e3); }
  .hero { padding-top: calc(var(--e7) + 40px); }
}

/* ═══════════════ APOYOS VISUALES ═══════════════
 *
 * Workable acompana cada bloque con una captura de SU producto en un
 * panel flotante. Aqui se hace igual, pero las "capturas" son maquetas en
 * HTML y CSS en vez de imagenes: pesan cero, se tinen con --tinte segun
 * el sector, y se reajustan solas en movil. Una captura PNG por landing
 * serian 36 imagenes que mantener y que se quedan desactualizadas en
 * cuanto cambie la interfaz.
 */

/* La escena: visual a un lado, tarjetas apiladas al otro. Es la
   composicion que Workable repite en toda su pagina. */
.escena { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--e4); align-items: center; }
.escena--invertida { grid-template-columns: 0.85fr 1.15fr; }
.escena--invertida .escena__visual { order: 2; }
.escena__textos { display: grid; gap: var(--e2); align-content: center; }

/* ── La QCard, fotografiada del producto ────────────────────
   Antes esto era un telefono dibujado con <div>: veinte lineas de CSS para
   fingir una pantalla que el producto ya sabe pintar, y que se quedaba
   vieja cada vez que la QCard cambiaba. Ahora es una captura real del
   constructor con su plantilla de restaurante. */
.qcard-foto { margin: 0; display: flex; justify-content: center; }
.qcard-foto img {
  width: 100%; max-width: 280px; height: auto; display: block;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.55));
}

/* ── El QR, de verdad y escaneable ─────────────────────────────────── */
.qr-marco {
  display: inline-grid; gap: var(--e2); justify-items: center;
  background: var(--s3); border: 1px solid var(--border);
  border-radius: var(--radio); padding: var(--e3);
}
/* Altura fija mas max-width:100% aplastaba el codigo en vez de encogerlo,
   y un QR deformado no siempre se escanea. Con aspect-ratio y height:auto
   se achica proporcionalmente pase lo que pase con el contenedor. */
.qr-marco img { width: 180px; max-width: 100%; height: auto; aspect-ratio: 1 / 1;
  display: block; border-radius: 6px; }
.qr-marco figcaption { font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin: 0; }

/* ── Panel de datos: lo que el dueno ve despues ────────────────────── */
.datos { background: var(--s3); border:1px solid var(--border); border-radius: var(--radio); padding: var(--pad-tarjeta); }
.datos__cifra { font-family:'Syne',sans-serif; font-size:40px; font-weight:800; color:var(--text); line-height:1; }
.datos__pie   { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:var(--e1); }
.datos__barras { display:flex; align-items:flex-end; gap:5px; height:72px; margin-top:var(--e3); }
.datos__barras i { flex:1; background: var(--tinte); opacity:.35; border-radius:2px 2px 0 0; display:block; }
.datos__barras i:nth-child(n+5) { opacity:.6; }
.datos__barras i:last-child { opacity:1; }

/* ── Comparativa antes / despues ───────────────────────────────────── */
.compara { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e4); }
.compara__lado { border:1px solid var(--border); border-radius:var(--radio); padding:var(--pad-tarjeta); background:var(--s2); }
.compara__lado--bien { border-color: var(--tinte-borde); background: var(--tinte-dim); }
.compara__etq { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--e2); }
.compara__lado--bien .compara__etq { color: var(--tinte); }

@media (max-width: 860px) {
  .escena, .escena--invertida { grid-template-columns: minmax(0,1fr); }
  .escena--invertida .escena__visual { order: 0; }
  .compara { grid-template-columns: minmax(0,1fr); }
  .qcard-foto img { max-width: 250px; }
}

/* ── Capturas de producto ──────────────────────────────────────────────
   Lo que Workable hace con sus capturas del ATS: un panel flotante con
   la esquina redondeada. Aqui la captura es del generador de verdad, no
   una ilustracion, que es la diferencia entre parecer un producto y
   parecer una plantilla. */
.captura { margin: var(--e7) 0 0; }
.captura img {
  display: block; width: 100%;
  border: 1px solid var(--border-fuerte);
  border-radius: var(--radio);
}
.captura figcaption {
  font-size: 13px; color: var(--muted);
  margin-top: var(--e2); max-width: 70ch;
}

/* ── El aviso de idioma ────────────────────────────────────────────────
   Avisa, no redirige. Una banda que te manda a otro idioma sin preguntar
   acierta a veces y molesta siempre; y el rastreador de Google, que suele
   venir de Estados Unidos, acabaria viendo solo la version inglesa. */
.otro-idioma { font-size: 12px; color: var(--muted); margin: var(--e2) 0 0; }
.otro-idioma a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid transparent; }
.otro-idioma a:hover { border-bottom-color: var(--tinte); }