/* La portada de faltao.com (index.html, #portada) y las páginas sueltas como /privacidad. Usa los colores, letras y
   espacios de estilos.css. Quien ya usa la app en este dispositivo no la ve (arranque.js pone .con-app) */
.con-app .portada { display: none; }
.portada { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--tinta); }
.portada-cabecera, .portada-contenido, .portada-pie { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: max(var(--e4), env(safe-area-inset-left)) max(var(--e4), env(safe-area-inset-right)); }
.portada-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 64px; padding-top: env(safe-area-inset-top); }
.portada-marca, .entrada .portada-marca { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; font: 700 1.375rem/1 var(--letra); letter-spacing: -.02em; color: var(--tinta); text-decoration: none; }
.portada-marca img { border-radius: 8px; }
.portada-contenido { flex: 1; padding-bottom: 0; }

/* lo primero: qué es, los dos botones y el móvil */
.portada-hero { display: grid; gap: var(--e6); align-items: center; padding-block: var(--e5) var(--e7); }
.portada-antetitulo { margin: 0 0 var(--e2); font: 700 .875rem/1.3 var(--letra); letter-spacing: .02em; color: var(--acento-texto); text-wrap: balance; }
.portada h1 { margin: 0; font: 700 clamp(2rem, 1.3rem + 3.2vw, 3.5rem)/1.08 var(--letra); letter-spacing: -.025em; text-wrap: balance; }
.portada-sub { margin: var(--e4) 0 0; font: 400 1.125rem/1.55 var(--letra); color: var(--tinta-2); max-width: 38em; text-wrap: pretty; }
.portada-botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.portada-botones button { min-height: 48px; padding-inline: var(--e5); }
.portada-botones .boton-texto { padding-inline: var(--e2); }
.portada-nota { margin: var(--e3) 0 0; font: var(--t-detalle); color: var(--tinta-2); }
.portada-supers { margin: var(--e2) 0 0; font: var(--t-detalle); color: var(--tinta-2); max-width: 38em; }
.portada-movil { justify-self: center; width: min(280px, 76vw); }
.portada-movil img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .14)); }

/* lo que hace, cómo funciona, las preguntas */
.portada-bloque { padding-block: var(--e6); border-top: 1px solid var(--linea); }
.portada h2 { margin: 0 0 var(--e5); font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.2 var(--letra); letter-spacing: -.015em; }
.portada h3 { margin: 0 0 var(--e1); font: var(--t-nombre); }
.portada-ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.portada-ventajas li { padding: var(--e4) var(--e5) var(--e5); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.portada-ventajas .i { width: 28px; height: 28px; margin-bottom: var(--e2); color: var(--acento-texto); }
.portada-ventajas p, .portada-pasos li, .portada-preguntas p { margin: 0; font: 400 1rem/1.5 var(--letra); color: var(--tinta-2); }
.portada-texto { margin: 0 0 var(--e4); max-width: 42em; font: 400 1.0625rem/1.6 var(--letra); color: var(--tinta-2); }
.portada-bloque > .boton-secundario { min-height: 48px; padding-inline: var(--e5); }
.portada-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: var(--e4); }
.portada-pasos li { counter-increment: paso; position: relative; min-height: 40px; padding: var(--e2) 0 0 52px; }
.portada-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font: 700 1.125rem/1 var(--letra); }
.portada-pasos strong { color: var(--tinta); }
.portada-preguntas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); max-width: 46em; }
.portada-preguntas details { border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--sombra-1); }
.portada-preguntas summary { overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 52px; padding: var(--e3) var(--e4); font: var(--t-nombre); cursor: pointer; list-style: none; }
.portada-preguntas summary::-webkit-details-marker { display: none; }
.portada-preguntas summary::after { content: "+" / ""; font: 400 1.5rem/1 var(--letra); color: var(--tinta-2); }
.portada-preguntas details[open] summary::after { content: "−" / ""; }
.portada-preguntas details p { padding: 0 var(--e4) var(--e4); }
.portada-final { padding-block: var(--e7); border-top: 1px solid var(--linea); text-align: center; }
.portada-final h2 { margin-bottom: var(--e4); }
.portada-final button { min-height: 48px; padding-inline: var(--e6); }
.portada-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e5); padding-block: var(--e5) calc(var(--e5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); font: var(--t-detalle); color: var(--tinta-2); }
.portada-pie p { margin: 0; }
.portada-enlaces { display: flex; gap: var(--e4); }
.portada-enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
.portada a:not([class]) { color: var(--acento-texto); }

/* en el móvil, el botón principal a lo ancho; desde una tableta, el texto a la izquierda y el móvil a la derecha */
@media (max-width: 479px) {
  .portada-botones :is(.boton-principal, .boton-texto) { flex: 1 1 100%; }
  .portada-botones .boton-texto { justify-content: center; }
  .portada-nota { text-align: center; }
}
@media (min-width: 720px) {
  .portada-hero { grid-template-columns: 1fr 260px; padding-block: var(--e6) var(--e7); }
  .portada-movil { width: 260px; }
}
@media (min-width: 1000px) {
  .portada-hero { grid-template-columns: 1.15fr .85fr; }
  .portada-movil { width: 300px; }
  .portada-pasos { grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
  .portada-pasos li { padding: 52px 0 0; }
}

/* las páginas sueltas (privacidad): una columna de texto */
.pagina { flex: 1; width: 100%; box-sizing: border-box; max-width: 46em; margin: 0 auto; padding: 0 var(--e4) var(--e7); font: 400 1rem/1.6 var(--letra); color: var(--tinta); }
.pagina h1 { font: 700 clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem)/1.15 var(--letra); letter-spacing: -.02em; margin: var(--e5) 0 var(--e4); }
.pagina h2 { font: 700 1.25rem/1.3 var(--letra); margin: var(--e6) 0 var(--e2); }
.pagina p, .pagina li { color: var(--tinta-2); }
.pagina a:not([class]) { color: var(--acento-texto); }
.pagina ul { padding-left: var(--e5); }
.pagina .boton-principal { display: inline-flex; align-items: center; text-decoration: none; }
.portada [aria-busy="true"] { opacity: .6; cursor: progress; } /* (tocado antes de que llegue app.js: arranque.js) */
.pagina :is(p, ul) + :is(p, ul) { margin-top: var(--e3); }
.pagina li + li { margin-top: var(--e2); }
.boton-borde { box-shadow: inset 0 0 0 1px var(--borde-control); }
/* en las páginas sueltas, la cabecera con la columna del texto */
.portada-cabecera:has(~ .pagina) { max-width: calc(46em + 2 * var(--e4)); }
.portada-enlaces a[aria-current="page"] { color: var(--tinta); font-weight: 600; text-decoration: none; }