/* 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 */
}

/* ---------- 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,select{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{position:relative;display:grid;grid-template-columns:auto 1fr auto auto auto auto auto auto;align-items:center;column-gap:10px;row-gap:10px;padding-block:14px;min-height:var(--alto-cab)}
/* Logotipo: [marca] 12px [tengouna] 12px [.app]. La ventana de la marca y la etiqueta .app miden igual: 76 × 38 px.
   El texto de .app tiene el mismo tamaño que «tengouna» (26 px). */
.logo{grid-column:1;grid-row:1;margin-right:6px;display:inline-flex;align-items:center;gap:16px;text-decoration:none;font-family:var(--f-titulo);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--tinta)}
.logo:hover{color:var(--tinta)}
.marca{overflow:visible}
.logo .marca{flex:none;display:block}
.logo-texto{display:block;margin-right:calc(-.02em)}  /* compensa el espaciado de letras que se añade tras la última letra */
.logo-una{color:var(--azul)}
.logo-app{flex:none;box-sizing:border-box;width:88px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--acento);border:var(--borde);border-radius:8px;font-size:inherit;box-shadow:2px 2px 0 var(--tinta)}
/* Menú: cuatro marcos negros redondeados, de la misma altura que la etiqueta .app (44 px); el último («Publicar mi app») va relleno de negro. */
.nav-enlaces{display:contents;font-weight:500;font-size:16px}   /* los enlaces y las banderas son celdas de la rejilla de .nav: así pueden saltar de fila uno a uno */
.nav-enlaces a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;padding:0 18px;border:var(--borde);border-radius:8px;background:transparent;color:var(--tinta);text-decoration:none;white-space:nowrap}
.nav-enlaces a:hover{background:var(--papel)}
.nav-enlaces a.boton-negro{background:var(--tinta);color:var(--fondo);font-weight:600}
.nav-enlaces a.boton-negro:hover{background:var(--tinta);color:var(--fondo)}
/* Selector de idioma: solo banderas en SVG (el nombre del idioma va en aria-label/title). El idioma activo va resaltado. */
.idiomas{display:contents}
.idioma{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;padding:0 11px;border:var(--borde);border-radius:8px;background:var(--papel);color:var(--tinta);text-decoration:none}
.idioma:hover{background:var(--gris)}
.idioma.activo{background:var(--acento);box-shadow:2px 2px 0 var(--tinta)}
/* Botón flotante de idioma: un cuadrado como los de flecha, con la bandera del OTRO idioma, justo encima de ellas.
   Se ve cuando las banderas del menú no están a la vista (≤785 px, o al hacer scroll más allá de la cabecera: flechas.js pone .ver).
   --flechas-alto lo pone flechas.js: alto de las flechas visibles + 10 px (0 si no hay ninguna) */
.idioma-flotante{position:fixed;right:16px;bottom:calc(16px + var(--flechas-alto,0px));z-index:50;box-sizing:border-box;width:52px;height:52px;display:none;align-items:center;justify-content:center;
  background:var(--papel);border:var(--borde);border-radius:12px;box-shadow:4px 4px 0 var(--tinta);transition:bottom .15s}
.idioma-flotante.ver{display:flex}
.idioma-flotante:hover{background:var(--gris)}
.idioma-flotante:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.idioma-flotante{transition:none}}
.idioma:focus-visible,.nav-enlaces a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.bandera{display:block;flex:none;width:26px;height:18px;border:1.5px solid var(--tinta);border-radius:3px}
/* Fases al estrechar la ventana (los anchos salen de medir el logo, los enlaces y las banderas en ES y EN):
   A) todo en una fila: logo · Cómo funciona · Qué incluye · Preguntas · Publicar mi app · ES · EN
   B) la bandera inglesa y «Publicar mi app» saltan a la 2.ª fila, alineados a la derecha
   C) «Preguntas» salta también, con su borde izquierdo alineado con el de «Cómo funciona»; las banderas siguen a la derecha
   D) las banderas pasan a botones cuadrados (uno por idioma, como los de flecha) fijos justo encima de las flechas
   E) desaparece el menú y queda solo el logo */
.nav-enlaces a:nth-of-type(1){grid-column:3;grid-row:1}
.nav-enlaces a:nth-of-type(2){grid-column:4;grid-row:1}
.nav-enlaces a:nth-of-type(3){grid-column:5;grid-row:1}
.nav-enlaces a:nth-of-type(4){grid-column:6;grid-row:1}
.idiomas .idioma:nth-of-type(1){grid-column:7;grid-row:1;margin-left:6px}
.idiomas .idioma:nth-of-type(2){grid-column:8;grid-row:1}
@media (max-width:1146px){
  .nav{grid-template-columns:auto 1fr auto auto auto auto;align-items:center}
  .logo{align-self:start}
  .nav-enlaces a:nth-of-type(4){grid-column:3 / 6;grid-row:2;justify-self:end}
  .idiomas .idioma:nth-of-type(1){grid-column:6;grid-row:1;margin-left:0}
  .idiomas .idioma:nth-of-type(2){grid-column:6;grid-row:2}
  :root{--alto-cab:131px}
}
@media (max-width:905px){
  .nav{grid-template-columns:auto 1fr auto auto auto}
  .nav-enlaces a:nth-of-type(3){grid-column:3;grid-row:2;justify-self:start}
  .nav-enlaces a:nth-of-type(4){grid-column:3 / 5;grid-row:2;justify-self:end}
  .idiomas .idioma:nth-of-type(1){grid-column:5;grid-row:1}
  .idiomas .idioma:nth-of-type(2){grid-column:5;grid-row:2}
}
/* D) ya no caben las banderas del menú: se ocultan y sale el botón flotante (.idioma-flotante) */
@media (max-width:785px){
  .nav{grid-template-columns:auto 1fr}
  .idiomas{display:none}
  .idioma-flotante{display:flex}
}
@media (max-width:725px){
  .nav{column-gap:16px}
  .nav-enlaces{display:none}
  .logo{align-self:center;margin-right:0}
  :root{--alto-cab:77px}
}
@media (max-width:640px){
  .nav{padding-block:12px}
  :root{--alto-cab:73px}
  .idioma-flotante{right:12px;bottom:calc(12px + var(--flechas-alto,0px));width:48px;height:48px}
}


/* ---------- 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(40px,min(5vw,8vh),72px);line-height:1.2;letter-spacing:-.035em}  /* 1,2 = alto del área de contenido de la tipografía: las cajas verdes no pisan la línea de arriba */
.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, en inglés #how) 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,.campo select{min-height:48px;padding:10px 14px;border:var(--borde);border-radius:10px;background:var(--papel);color:var(--tinta)}
.campo textarea{resize:vertical}
.campo select{appearance:auto}
.formulario-contacto{margin-top:32px}
.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)}
.aviso-etiqueta{display:inline-block;margin-bottom:24px}
.ancho-18{max-width:18ch}
.ancho-20{max-width:20ch}
.texto-15{font-size:15px}
.normal{font-weight:400}

/* ---------- 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:14px;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}

/* ---------- Flechas flotantes subir/bajar ---------- */
.flechas{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:10px}
.flechas[hidden],.flechas button[hidden]{display:none}
.flechas button{width:52px;height:52px;padding:0;display:grid;place-items:center;cursor:pointer;
  background:var(--acento);color:var(--tinta);border:var(--borde);border-radius:12px;box-shadow:4px 4px 0 var(--tinta);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,box-shadow .12s}
.flechas button:hover{background:var(--fondo)}
.flechas button:active,.flechas button.pulsando{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta);background:var(--azul);color:var(--fondo)}
.flechas svg{width:26px;height:26px;display:block;pointer-events:none}
@media (max-width:640px){.flechas{right:12px;bottom:12px}.flechas button{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.flechas button{transition:none}}

/* Con la cabecera de varias filas (menú saltado, entre 460 y 1146 px) la portada empieza justo debajo de ella, sin centrarse en vertical */
@media (min-width:726px) and (max-width:1146px){.portada .hero{align-content:start;padding-top:16px}}