/* ═══════════════════════════════════════════════════════════════════════
   MyTurn — hoja de estilos COMPARTIDA por las 6 páginas de la landing
   (index, product, how-it-works, pricing, contact, demo).

   🔑 Es el único lugar donde vive el lenguaje visual. Antes cada página
   llevaba su propio <style> inline y con 6 páginas eso se desincroniza
   sin remedio. Si tocás un color o un radio, tocalo ACÁ.

   demo.html añade encima un <style> propio SOLO con lo del formulario
   (.head, .grid, .why, .wfeat, .formcard, .field, .alt). Su lista de
   ventajas usa .wfeat y NO .feat a propósito: .feat de acá es el bloque
   numerado 01-07 de product.html, con cuadrado rojo, y pisaría los
   diamantes ◆ del formulario.
   ═══════════════════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0A0A0A; color:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
/* 🔴 EJES SEPARADOS, NUNCA EL SHORTHAND `padding`.
   .wrap pone el aire HORIZONTAL; section/.hero/.phead ponen el VERTICAL, y
   los mismos elementos llevan las dos clases (<section class="wrap">).
   Con shorthand el que gana por especificidad —o por venir después— pone a
   CERO el eje que no le importa, en silencio:
     · `.wrap{padding:0 24px}` (0,1,0) ganaba a `section{padding:96px 0}`
       (0,0,1) → TODA sección quedó con 0 de padding vertical, y la última
       card de cada página quedaba pegada al CTA (medido: 0px).
     · `.hero{padding:88px 0 56px}` viene DESPUÉS de `.wrap` y con la misma
       especificidad → ganaba y dejaba el h1 a 0px del borde en móvil.
   Longhand por eje: cada regla toca solo lo suyo y no hay orden que valga. */
.wrap { max-width:1060px; margin:0 auto; padding-left:24px; padding-right:24px; }
.label { font-size:12px; font-weight:900; letter-spacing:.35em; text-transform:uppercase; color:#d4af37; }
.label-red { color:#c8102e; }
h1,h2 { font-weight:900; letter-spacing:-.02em; }
.btn { display:inline-block; padding:14px 26px; border-radius:14px; font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.btn-red { background:linear-gradient(165deg,#e0142f,#7d0a1d); border:1px solid #d4af37; color:#fff; box-shadow:0 0 26px rgba(200,16,46,.35); }
.btn-ghost { background:#131313; border:1.5px solid #242424; color:#e5e5e5; }
.card { background:#131313; border:1.5px solid #242424; border-radius:20px; }
section { padding-top:96px; padding-bottom:96px; }

/* medios reales de la app */
.shot { width:100%; display:block; border-radius:16px; border:1px solid #242424; }
.vwide { width:100%; display:block; border-radius:20px; border:1px solid #242424; background:#000; }
.vphone { width:100%; max-width:270px; display:block; margin:0 auto; border-radius:22px; border:1px solid #242424; background:#000; }

/* ── NAV ── */
nav { display:flex; align-items:center; flex-wrap:wrap; gap:28px; row-gap:12px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.logo { display:flex; align-items:center; }
/* El nav muestra el LOCKUP completo (pin + MYTURN + tagline), no el isotipo:
   el logo ES el nombre del sitio, por eso no lleva texto al lado. Se dimensiona
   por ANCHO como .brandlogo del footer, no por alto — el asset es apaisado
   (480x203) y fijar el alto deja el ancho a merced del ratio.
   160px = 3.00x de densidad sobre los 480 nativos (holgado para 2x DPR) y deja
   "MYTURN" con 15.3px de cap height, contra los ~13px del texto que reemplaza.
   Por debajo de ~136px el wordmark queda MAS CHICO que el texto que reemplaza
   y el cambio pierde sentido. */
.logo img { width:160px; height:auto; }
.brandlogo { width:230px; max-width:100%; display:block; }
nav .links { display:flex; flex-wrap:wrap; gap:18px; margin-left:auto; font-size:14px; font-weight:700; color:#9a9a9a; }
nav .links a:hover { color:#fff; }
/* página actual: la marca es el subrayado rojo, no solo el color — el gris
   sobre negro no da contraste suficiente para que el estado se lea solo. */
nav .links a.active { color:#fff; }
nav .links a.active::after { content:''; display:block; height:2px; margin-top:5px; border-radius:2px; background:#c8102e; }
nav .btn { padding:10px 18px; font-size:12px; }

/* ── HERO (index) ── */
.hero { text-align:center; padding-top:88px; padding-bottom:56px; }
.hero h1 { font-size:clamp(34px,6vw,58px); margin:18px 0 20px; }
.hero h1 em { font-style:normal; color:#c8102e; }
.hero p { color:#9a9a9a; font-size:17px; max-width:560px; margin:0 auto 32px; }
.hero .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-video { max-width:1100px; margin:56px auto 0; box-shadow:0 0 60px rgba(200,16,46,.12); border-radius:20px; }

/* ── CABECERA de las páginas interiores ── */
.phead { padding-top:72px; padding-bottom:8px; }
.phead h1 { font-size:clamp(30px,5vw,46px); margin:14px 0 0; }

/* ── STATS ── */
.stats { display:flex; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); padding:36px 0; }
.stat { flex:1 1 180px; text-align:center; }
.stat .n { font-size:44px; font-weight:900; color:#c8102e; font-variant-numeric:tabular-nums; }
.stat .t { font-size:12px; font-weight:900; letter-spacing:.25em; color:#8a8a8a; text-transform:uppercase; margin-top:4px; }

/* ── TIPOGRAFÍA DE CONTENIDO ── */
.sec-head h2 { font-size:clamp(26px,4vw,38px); margin:14px 0 10px; }
.sec-head p { color:#9a9a9a; max-width:560px; }
.lead { color:#c9c9c9; font-size:17px; line-height:1.65; max-width:720px; margin-top:18px; }
h3.sub { font-size:19px; font-weight:900; margin:48px 0 4px; }
.prose p { color:#9a9a9a; font-size:15px; line-height:1.7; max-width:720px; margin-top:12px; }

/* ── RESUMEN DE SECCIONES (index) ── */
.sumgrid { display:flex; flex-wrap:wrap; gap:24px; margin-top:34px; }
.sumgrid .card { flex:1 1 440px; padding:32px 28px; display:flex; flex-direction:column; align-items:flex-start; }
.sumgrid h3 { font-size:22px; font-weight:900; margin:12px 0 10px; }
.sumgrid p { color:#9a9a9a; font-size:15px; line-height:1.65; margin-bottom:22px; }
.more { margin-top:auto; color:#c8102e; font-weight:900; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.more:hover { color:#fff; }

/* ── HOW IT WORKS (filas alternadas con medios reales) ── */
.srow { display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; margin-top:72px; }
.srow .smedia { flex:1.4 1 340px; }
.srow .stext { flex:1 1 240px; padding-top:12px; }
.srow .num { color:#c8102e; font-weight:900; font-size:13px; letter-spacing:.2em; margin-bottom:6px; }
.srow h3 { font-size:22px; font-weight:900; }
.srow p { color:#9a9a9a; font-size:15px; margin-top:10px; line-height:1.7; }

/* ── FEATURES NUMERADOS (product) ── */
.feat { display:flex; gap:16px; margin-top:30px; align-items:flex-start; }
.feat .d { flex:0 0 38px; height:38px; display:flex; align-items:center; justify-content:center;
           background:#1c1c1c; border:1px solid #242424; border-radius:11px;
           color:#c8102e; font-weight:900; font-size:13px; letter-spacing:.06em; }
.feat h4 { font-size:17px; font-weight:900; }
.feat p { color:#9a9a9a; font-size:14px; margin-top:3px; line-height:1.6; }
.featgrid { display:flex; flex-wrap:wrap; gap:0 40px; }
.featgrid .feat { flex:1 1 400px; }

/* ── TARJETAS DE CONTENIDO (pricing, product) ── */
/* 🔑 gap y margin-top con el MISMO valor a propósito: `gap` separa las
   cards dentro de un grupo y `margin-top` separa un grupo del siguiente.
   Con 18 y 26 el ojo veía dos ritmos alternados en una sola columna cuando
   las cards se apilan en móvil (18-26-18-26, medido en /pricing @390px). */
.grid2 { display:flex; flex-wrap:wrap; gap:24px; margin-top:24px; }
.grid2 .card { flex:1 1 300px; padding:28px 26px; }
.grid2 .card h4 { font-size:15px; font-weight:900; letter-spacing:.01em; }
.grid2 .card p { color:#9a9a9a; font-size:14px; line-height:1.65; margin-top:10px; }
.ticks { list-style:none; margin-top:12px; }
.ticks li { position:relative; padding-left:18px; margin-top:9px; color:#9a9a9a; font-size:14px; line-height:1.6; }
.ticks li::before { content:'\2014'; position:absolute; left:0; color:#c8102e; font-weight:900; }
.pricebig { font-size:clamp(30px,5vw,44px); font-weight:900; letter-spacing:-.02em; margin:14px 0 8px; }

/* ── WALKTHROUGH ── */
.walk { text-align:center; }
.walk video { max-width:900px; margin:36px auto 0; }

/* ── DUO / CONTACT ── */
.duo { display:flex; gap:24px; flex-wrap:wrap; }
.duo .card { flex:1 1 320px; padding:36px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.duo .card .btn { margin-top:auto; }
.duo h2 { font-size:26px; margin:12px 0 12px; }
.duo p { color:#9a9a9a; font-size:15px; line-height:1.6; margin-bottom:24px; }
.orgbox { margin-top:24px; padding:26px; }
.orgbox h4 { font-size:15px; font-weight:900; }
.orgbox .line { color:#9a9a9a; font-size:14px; margin-top:7px; }
.orgbox a { color:#9a9a9a; }
.orgbox a:hover { color:#fff; }

/* ── CTA DE CIERRE (todas las páginas) ── */
.ctaband { text-align:center; padding:56px 30px; margin:0 0 96px; }
.ctaband h2 { font-size:clamp(24px,3.6vw,32px); }
.ctaband p { color:#9a9a9a; font-size:15px; line-height:1.6; max-width:520px; margin:12px auto 26px; }

/* ── FOOTER ── */
footer { border-top:1px solid rgba(255,255,255,.06); padding:48px 0 32px; }
.foot { display:flex; gap:48px; flex-wrap:wrap; }
.foot .brand { flex:2 1 240px; }
.foot .col { flex:1 1 140px; }
.foot h5 { font-size:12px; font-weight:900; letter-spacing:.25em; color:#8a8a8a; text-transform:uppercase; margin-bottom:12px; }
.foot a, .foot .line { display:block; color:#9a9a9a; font-size:14px; margin-bottom:10px; }
.foot a:hover { color:#fff; }
.copy { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#8a8a8a; font-size:12px; margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); }

/* ── CAMBIADOR DE IDIOMA ──
   Discreto a propósito: mismo tamaño que los links del nav pero más apagado,
   separado por una línea fina. NO es un botón — compite con "Request a demo",
   que es el CTA real de la barra.
   🔑 Cada página apunta a SU equivalente traducida, no al home: el mapa vive
   en el generador de las páginas (ver el comentario de cabecera de index.html). */
nav .links a.lang { color:#6f6f6f; font-size:12px; letter-spacing:.14em; padding-left:16px; border-left:1px solid rgba(255,255,255,.10); }
nav .links a.lang:hover { color:#d4af37; }

/* ── BLOQUE DE INTERFAZ (product) ──
   Cada una de las 4 interfaces: cabecera numerada reusando .feat, bajada y
   lista de capacidades. Las viñetas van DENTRO de la columna de texto del
   .feat —no como hermanas— para que queden alineadas con el título y no
   contra el borde izquierdo, saltándose la sangría del cuadrado numerado.
   🔑 El bloque 04 (admin) es visiblemente más largo que los otros tres y eso
   es deliberado: el panel del dueño hace más. No "equilibrarlo" recortándolo. */
.iface { margin-top:46px; }
.iface .feat { margin-top:0; }
.iface .feat > div:last-child { max-width:760px; }
.iface .feat h4 { font-size:19px; }
.iface .who { color:#8a8a8a; font-weight:700; font-size:15px; }
.iface .feat p { font-size:15px; line-height:1.7; margin-top:10px; }
.iface .ticks { margin-top:12px; }
.iface .ticks li { font-size:15px; }

/* ── METAS (product · "Where we're going" / "Hacia dónde vamos") ──
   🔴 La píldora dorada NO es decorativa: es lo que hace imposible confundir
   esta sección con features entregadas. Quien escanea la página no registra
   el tiempo verbal ("we're working toward"), pero sí ve la etiqueta.
   ⚠️ Si una meta se cumple, el bloque SUBE a las secciones de arriba y la
   píldora se va con él. NUNCA "aprobar" una meta borrándole la etiqueta y
   dejándola donde está: eso convierte una promesa en una afirmación falsa. */
.goal { margin-top:24px; padding:28px 26px; }
.goal .tag { display:inline-block; font-size:10px; font-weight:900; letter-spacing:.2em;
             text-transform:uppercase; color:#d4af37; border:1px solid rgba(212,175,55,.35);
             border-radius:999px; padding:4px 11px; }
.goal h4 { font-size:17px; font-weight:900; margin-top:12px; }
.goal p { color:#9a9a9a; font-size:15px; line-height:1.7; margin-top:12px; max-width:720px; }

/* ── TIRA DE CAPTURAS (product) ──
   🔑 Cada bloque muestra capturas SUYAS. Meter una del kiosko en el bloque del
   barbero diría que el producto se ve distinto de como se ve. Hoy: bloque 01
   Kiosko (4), bloque 02 App del cliente (2), bloque 03 Panel del barbero (3).
   El bloque 04 (panel del dueño) sigue sin capturas a propósito, hasta que
   existan suyas y utilizables. */
.shotstrip { display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.shotstrip figure { flex:1 1 320px; margin:0; }
.shotstrip img { width:100%; display:block; border-radius:12px; border:1px solid #242424; }
.shotstrip figcaption { color:#6f6f6f; font-size:12px; margin-top:8px; }

/* 🔴 NO UNIFICAR ESTA REGLA CON LA DE ARRIBA. Tres en una fila y cuatro en 2x2
   son EXCLUYENTES con una sola flex-basis, no es cuestión de afinar el número.
   El contenedor mide 760px y el gap 14, así que entran n figuras si
   n·base + (n-1)·14 <= 760. Meter 3 en una fila exige base <= 244; pero esa
   MISMA desigualdad es la que decide si entran 3 de las 4, así que cualquier
   base que ponga 3 en fila parte el strip de 4 en 3+1, con la cuarta sola
   estirándose a 760 — el defecto que se le quitó al de 3 se le traslada al
   de 4. Con base 320: el de 4 va 2+2 y el de 2 va en una fila, los dos bien;
   solo el de 3 quedaba 2+1. Por eso la excepción va por clase y no global.
   ⚠️ Si algún día el bloque 03 pasa a tener 4 capturas, SACAR `trio` del
   HTML — si no, queda 3+1. */
.shotstrip.trio figure { flex:1 1 220px; }

/* ── RECORRIDOS (how-it-works) ──
   La página muestra DOS caminos por la misma cola: primera visita (8 pasos) y
   cliente que vuelve (5). El contraste visual entre los dos —7 capturas contra
   4— es parte del argumento: se VE que volver cuesta menos. Por eso el
   recorrido B repite las mismas 4 capturas en vez de quedarse sin imagen.
   🔑 Si se agrega o se quita un paso, renumerar los .num del recorrido
   afectado A MANO: no hay contador automático, son literales en el HTML. */
.track { padding-top:56px; margin-top:88px; border-top:1px solid rgba(255,255,255,.07); }
.track-first { padding-top:0; margin-top:0; border-top:0; }
.track .cnt { color:#d4af37; font-weight:900; font-size:12px; letter-spacing:.2em;
              text-transform:uppercase; margin-top:12px; }
.track h2 { font-size:clamp(24px,3.6vw,34px); margin:14px 0 0; }

/* Paso SIN captura. Hoy son exactamente dos: el ÚLTIMO paso de cada recorrido,
   que es el único que NO pasa en la tablet sino en el teléfono del cliente.
   🔑 Quedan sin imagen a propósito, no por falta de material: la única captura
   disponible del clientDash dice "Not in Queue", que contradice de plano el
   texto del paso ("tu posición en la fila"). Mejor sin imagen que con una que
   desmiente lo que se afirma al lado. Si algún día hay una captura del
   clientDash CON posición real, esta clase se saca de esas dos filas.
   ⚠️ Esa misma captura salía de un video que mostraba el nombre de un cliente
   real de Elite; el archivo se borró de Storage el 2026-09-01. No reponerlo.
   Sin esta regla el texto se estiraría a los 1060px del .wrap y perdería el
   ritmo de lectura de las filas que sí tienen media. */
.srow.noshot .stext { flex:1 1 100%; max-width:720px; padding-top:0; }