/* tengouna.app — estilos */

/* ---------- Fuentes locales ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --fondo:#F6F5EF; --papel:#FFFFFF; --gris:#EDEBE3;
  --tinta:#121212; --texto:#2A2A2A; --suave:#4A4A4A; --claro:#D9D7CF;
  --acento:#C6F432; --azul:#2B44D6;
  --f-titulo:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-texto:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --borde:2px solid var(--tinta);
  --radio:16px;
  --alto-cab:77px;   /* altura fija de la cabecera: sirve para que la portada llene justo la pantalla */
}
@media (max-width:640px){:root{--alto-cab:64px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:18px;line-height:1.55}
h1,h2,h3{font-family:var(--f-titulo);margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:var(--tinta)}
a:hover{color:var(--azul)}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
img{max-width:100%;height:auto}
input,textarea,button{font:inherit}

.contenedor{max-width:1200px;margin:0 auto;padding-inline:24px}
.saltar{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--fondo);padding:10px 16px;border-radius:8px;z-index:10}
.saltar:focus{left:8px}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.titulo-seccion{font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em}
.mono{font-family:var(--f-mono)}
.codigo{font-family:var(--f-mono);font-size:.84em;background:var(--gris);padding:0 6px;border-radius:6px}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:16px 26px;border:var(--borde);border-radius:12px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.boton:hover{transform:translate(-2px,-2px)}
.boton-negro{background:var(--tinta);color:var(--fondo)}
.boton-negro:hover{color:var(--fondo)}
.boton-blanco{background:var(--papel);color:var(--tinta)}
.boton-sombra{box-shadow:5px 5px 0 var(--acento)}
.boton-sm{padding:10px 18px;min-height:44px}

/* ---------- Cabecera ---------- */
.cabecera{background:var(--fondo)}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;min-height:var(--alto-cab)}
.logo{display:inline-flex;align-items:center;gap:0;text-decoration:none;font-family:var(--f-titulo);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--tinta)}
.logo:hover{color:var(--tinta)}
.logo .marca{flex:none;margin-right:10px}
.logo-una{color:var(--azul)}
.logo-app{margin-left:6px;background:var(--acento);border:var(--borde);border-radius:8px;padding:0 8px;font-size:22px;box-shadow:2px 2px 0 var(--tinta)}
.nav-enlaces{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-weight:500;font-size:16px}
.nav-enlaces a{text-decoration:none}
/* Móvil en vertical: solo el logo, sin menú ni botón */
@media (max-width:640px){.nav-enlaces{display:none}.nav{padding-block:12px}}

/* ---------- Portada: cabecera + hero + franja = una pantalla completa ---------- */
.portada{display:flex;flex-direction:column;
  min-height:min(calc(100vh - var(--alto-cab)),1200px);
  min-height:min(calc(100svh - var(--alto-cab)),1200px)}
.portada .hero{flex:1;width:100%;align-content:center}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding-block:clamp(24px,4vh,48px)}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.hero-texto{display:flex;flex-direction:column;gap:20px}
@media (max-width:640px){.hero{padding-block:20px 40px;gap:36px}}
.etiqueta{align-self:flex-start;font-family:var(--f-mono);font-size:14px;border:var(--borde);border-radius:999px;padding:6px 14px;background:var(--papel)}
.hero h1{font-weight:800;font-size:clamp(42px,min(5.4vw,9.2vh),78px);line-height:.98;letter-spacing:-.035em}
.resaltado{background:var(--acento);padding:0 10px;border-radius:12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.entradilla{font-size:20px;max-width:46ch;color:var(--texto)}
.acciones{display:flex;flex-wrap:wrap;gap:14px}
.nota{font-size:15px;color:var(--suave)}

.navegador-wrap{position:relative;padding:12px 12px 28px 0}
.navegador{background:var(--papel);border:var(--borde);border-radius:18px;box-shadow:10px 10px 0 var(--tinta);overflow:hidden}
.navegador-barra{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:var(--borde);background:var(--gris)}
.puntos{display:flex;gap:6px}
.puntos span{width:12px;height:12px;border-radius:50%;border:var(--borde)}
.url{flex:1;display:flex;align-items:center;gap:8px;background:var(--papel);border:var(--borde);border-radius:999px;padding:6px 14px;font-family:var(--f-mono);font-size:14px;min-width:0}
.url span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pasos-demo{list-style:none;margin:0;padding:28px;display:flex;flex-direction:column;gap:14px}
.pasos-demo .titulo-demo{font-family:var(--f-mono);font-size:13px;color:var(--suave);margin-bottom:6px}
.paso-demo{display:flex;align-items:center;gap:14px;padding:14px 16px;border:var(--borde);border-radius:12px;font-weight:500}
.paso-demo .ok{flex:none;width:28px;height:28px;border-radius:50%;background:var(--acento);border:var(--borde);display:flex;align-items:center;justify-content:center}
.paso-demo.final{background:var(--tinta);color:var(--fondo);font-weight:600}
.paso-demo.final .ok{background:var(--azul);border-color:var(--fondo)}
.sello{position:absolute;right:-8px;bottom:0;transform:rotate(-4deg);background:var(--acento);border:var(--borde);border-radius:10px;padding:8px 14px;font-family:var(--f-titulo);font-weight:800;font-size:20px}

/* ---------- Franja de tecnologías ---------- */
.franja{background:var(--tinta);color:var(--fondo);border-block:var(--borde)}
.franja .contenedor{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-block:18px}
.franja h2{font-family:var(--f-mono);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:14px}
.chips li{border:1.5px solid var(--fondo);border-radius:999px;padding:5px 12px}

/* ---------- Secciones ---------- */
.seccion{padding-block:96px;display:flex;flex-direction:column;gap:40px}
.seccion-blanca{background:var(--papel);border-block:var(--borde)}
/* «Cómo funciona» (#como) enseña juntos el problema y los tres pasos: bloques compactos */
.sec-dolor{padding-block:40px 0;gap:24px}
.sec-pasos{padding-block:36px 72px;gap:24px}
.sec-dolor .titulo-seccion,.sec-pasos .titulo-seccion{font-size:clamp(30px,3.6vw,46px)}
.sec-dolor .cita{padding:20px 24px;gap:8px}
.sec-dolor .cita blockquote{font-size:21px}
.sec-dolor .cita figcaption{font-size:15px}
.sec-pasos .paso{padding:22px 26px;gap:8px}
.sec-pasos .paso-num{font-size:44px}
.sec-pasos .paso h3{font-size:23px}
.sec-pasos .paso p{font-size:16px}
.cabeza-seccion{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.cabeza-seccion p{max-width:40ch;color:var(--texto)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}

.cita{margin:0;background:var(--papel);border:var(--borde);border-radius:var(--radio);padding:28px;display:flex;flex-direction:column;gap:14px}
.cita blockquote{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:24px;line-height:1.2}
.cita figcaption{font-size:16px;color:var(--suave)}

.pasos{list-style:none;margin:0;padding:0}
.paso{background:var(--papel);border:var(--borde);border-radius:var(--radio);padding:32px;display:flex;flex-direction:column;gap:14px;box-shadow:6px 6px 0 var(--tinta)}
.paso-num{font-family:var(--f-titulo);font-weight:800;font-size:64px;line-height:1;color:var(--azul)}
.paso h3{font-size:26px}
.paso p{color:var(--texto)}
.paso.destacado{background:var(--acento)}
.paso.destacado .paso-num,.paso.destacado p{color:var(--tinta)}

.ventajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:2px;background:var(--tinta);border:var(--borde);border-radius:var(--radio);overflow:hidden;list-style:none;margin:0;padding:0}
.ventajas li{background:var(--fondo);padding:30px;display:flex;flex-direction:column;gap:10px}
.ventajas h3{font-size:22px}
.ventajas p{font-size:16px;color:var(--texto)}

/* ---------- Preguntas (details/summary nativo, sin JS) ---------- */
.faq{max-width:900px;margin:0 auto}
.faq-lista{border-top:var(--borde)}
.faq details{border-bottom:var(--borde)}
.faq summary{list-style:none;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;font-family:var(--f-titulo);font-weight:700;font-size:22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:36px;height:36px;border:var(--borde);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:20px;background:var(--papel)}
.faq details[open] summary::after{content:"−";background:var(--acento)}
.faq details p{padding:0 56px 24px 4px;color:var(--texto)}

/* ---------- Llamada final + formulario ---------- */
.cta{background:var(--azul);color:#fff;border-block:var(--borde)}
.cta .contenedor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:start;padding-block:104px}
.cta-texto{display:flex;flex-direction:column;gap:20px}
.cta h2{font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:.98;letter-spacing:-.035em}
.cta-texto p{font-size:20px;max-width:34ch}
.cta a{color:#fff}

.formulario{background:var(--fondo);color:var(--tinta);border:var(--borde);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:10px 10px 0 var(--tinta)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;font-size:16px}
.campo input,.campo textarea{min-height:48px;padding:10px 14px;border:var(--borde);border-radius:10px;background:var(--papel);color:var(--tinta)}
.campo textarea{resize:vertical}
.campo small{font-size:14px;color:var(--suave)}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.casilla input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--tinta)}
.casilla a{color:var(--tinta)}
.trampa{position:absolute;left:-9999px}
.formulario .boton{min-height:56px;font-size:18px;width:100%}
.aviso{border:var(--borde);border-radius:10px;padding:12px 16px;font-size:16px}
.aviso-error{background:#FFE3DC}
.aviso-ok{background:var(--acento)}

/* ---------- Páginas de texto ---------- */
.legal{max-width:760px;margin:0 auto;padding:72px 24px 96px}
.legal h1{font-weight:800;font-size:clamp(36px,5vw,56px);line-height:1.05;margin-bottom:28px}
.legal h2{font-size:26px;margin:36px 0 12px}
.legal p,.legal li{color:var(--texto);margin-bottom:12px}

/* ---------- Pie ---------- */
.pie{background:var(--tinta);color:var(--fondo)}
.pie-fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:48px;font-size:15px}
.pie-logo{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);font-weight:800;font-size:22px}
.pie-logo span span{color:var(--acento)}
.pie-autor{color:var(--claro)}
.pie a{color:var(--fondo)}
.pie a:hover{color:var(--acento)}
.pie-legal{display:flex;flex-wrap:wrap;gap:20px}