/* landing.css — la portada. La PALETA no se define aqui: vive en tema.css, que
 * es la unica del producto y la que hace que claro, oscuro y automatico
 * funcionen igual en la portada, el portal y la documentacion. */
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.env{max-width:1080px;margin:0 auto;padding:0 1.2rem}
a{color:var(--acc-tx)}
h1,h2,h3{letter-spacing:-.02em;margin:0 0 .5rem}

/* La cabecera NO se estiliza aqui: viene del fichero unico y sus estilos
 * estan en tema.css. Tener copia propia fue lo que hizo que el logotipo
 * midiera 34 px aqui y 54 en las otras dos paginas. */
.hd .env{max-width:1080px;margin:0 auto;padding-left:1.2rem;padding-right:1.2rem}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* La cabecera comun (tema.css) deja 24 px por debajo, que en el portal son
 * aire necesario. Aqui NO: el degradado calido del hero tiene que arrancar
 * justo en la linea de separacion del menu, o se ve una banda blanca entre la
 * raya y el color. Solo afecta a la portada: nadie mas carga landing.css. */
header.hd{margin-bottom:0}

.hero{padding:3.2rem 0 2.4rem;text-align:center;overflow:hidden;
  background:radial-gradient(1000px 420px at 50% -8%,
             color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%)}
.hero-img{width:min(760px,100%);height:auto;margin-bottom:1.6rem}
/* El hero va SIN fondo: el dibujo se apoya en el de la pagina. Como el logotipo
 * cambia de color entre temas, hay dos ficheros y se elige por CSS.
 * Mismas tres reglas que tema.css: claro por defecto, oscuro si el sistema lo
 * pide y no se ha forzado claro, y oscuro si se ha forzado. */
.hero-img.oscuro{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="light"]) .hero-img.claro{display:none}
  :root:not([data-tema="light"]) .hero-img.oscuro{display:inline-block}
}
:root[data-tema="dark"] .hero-img.claro{display:none}
:root[data-tema="dark"] .hero-img.oscuro{display:inline-block}
/* ⚠ El ancho va en `ch`, que es relativo a la fuente del PROPIO elemento: si el
 * limite se pone en el envoltorio -que hereda el tipo del body- 19ch son ~150 px
 * y el titular sale a una palabra por linea. Por eso el tamaño de letra baja al
 * envoltorio y el h1 lo hereda.
 * `--onda-x` es cuanto sobresale la onda respecto al titular; aqui 3 veces. El
 * resto de la onda vive en tema.css, que la comparten todas las paginas. */
.titular{font-size:clamp(1.7rem,4.2vw,2.7rem);position:relative;
  max-width:19ch;margin-inline:auto;--onda-x:3;
  /* La portada NO quiere el aire que tema.css pone debajo: aqui el hero ya
     tiene su propio ritmo y el `lede` va justo detras. */
  margin-bottom:0}
/* ⚠ Con `--onda-x:3` la onda sobresale medio ancho por cada lado, y es `.hero`
 * quien lo recorta (overflow:hidden). Sin eso, ensancha el documento y sale
 * barra horizontal en movil. */
.hero h1{font-size:inherit;margin-inline:auto;position:relative}

/* Barrido de brillo sobre el titular. Mismo mecanismo que en riosa.com y
 * mare-nostrum.net: un gradiente recortado al texto que se desplaza.
 *
 * ⚠ El color base NO es el naranja, es la tinta: un titular entero en naranja
 * pierde contraste sobre el fondo claro. El naranja es el DESTELLO que pasa por
 * encima, que es justo lo que se quiere ver. Y como los dos colores salen de
 * tema.css, funciona igual en claro y en oscuro sin escribirlos dos veces.
 *
 * 20 s, como riosa. mare-nostrum va a 6 y para un titular de tres lineas
 * distrae mas que adorna.
 */
/* EN RESERVA. El titular llevo este destello hasta el 15-sep-2026; ahora lo
   lleva la onda. Para devolverselo basta con anadir class="brillo" al h1. */
.brillo{
  /* Paradas ESTRECHAS, como las de riosa: el destello ocupa un 3 %, no un 14.
     Con bandas anchas no se ve un brillo pasando, se ven trozos de titular
     pintados de naranja. */
  background:linear-gradient(105deg,
    var(--tinta) 0%,  var(--tinta) 22%, var(--acc) 25%, var(--tinta) 28%,
    var(--tinta) 47%, var(--acc)  50%,  var(--tinta) 53%,
    var(--tinta) 72%, var(--acc)  75%,  var(--tinta) 78%, var(--tinta) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;-webkit-text-fill-color:transparent;
  animation:brillo-uttera 20s linear infinite;
}
/* Los fotogramas `brillo-uttera` estan en tema.css: los usa la onda, que la
   comparten todas las paginas. `.brillo` los encuentra igual. */
/* Quien pide menos movimiento no ve ninguno, y el titular se queda en tinta
   plana en vez de transparente, que es como se quedaria sin el gradiente. */
@media(prefers-reduced-motion:reduce){
  .brillo{animation:none;background:none;color:var(--tinta)!important;
    -webkit-text-fill-color:var(--tinta)}
}

.lede{font-size:clamp(1rem,2vw,1.18rem);color:var(--gris);max-width:58ch;
  margin:.9rem auto 0}
.cta{margin:1.6rem 0 0;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--acc);color:var(--btn-tx);text-decoration:none;
  font-weight:600;padding:.72rem 1.4rem;border-radius:10px;border:0;cursor:pointer;
  font-size:.98rem;font-family:inherit;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 40%,transparent)}
.btn2{display:inline-block;padding:.72rem 1.3rem;border-radius:10px;text-decoration:none;
  border:1px solid var(--borde2);color:var(--tinta);font-size:.98rem}
.btn2:hover{border-color:var(--acc)}
.sello{margin-top:1.5rem;font-size:.84rem;color:var(--gris2)}
/* La linea de la ley va sola y un poco mas pegada a la de arriba: son dos
 * afirmaciones distintas, no una lista de cuatro que se ha desbordado. */
.sello-ley{margin-top:.35rem}
.sello-ley b{color:var(--gris);font-weight:600}

/* ── secciones ────────────────────────────────────────────────────────── */
.sec{padding:3.4rem 0;border-top:1px solid var(--borde2)}
.sec.alt{background:var(--sup)}
.sec h2{font-size:clamp(1.3rem,2.6vw,1.8rem);text-align:center}
.sub{text-align:center;color:var(--gris);max-width:60ch;margin:0 auto 1.8rem}
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
/* Cuatro tarjetas piden DOS columnas, no tres: con tres queda una sola abajo y
 * la fila coja se lee como si sobrara. */
.rejilla.cuatro{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.tj{background:var(--tarjeta);border:1px solid var(--borde2);border-radius:13px;
  padding:1.2rem 1.25rem}
/* Iconos de linea, monocromos, en el naranja de marca. El color va aqui y no
 * en cada SVG -usan currentColor- para que se defina una sola vez. */
.tj .ic{display:block;width:30px;height:30px;color:var(--acc);margin-bottom:.55rem}
.tj h3{font-size:1.02rem}
.tj p{margin:0 0 .6rem;color:var(--gris);font-size:.92rem}
.tj code{font-size:.76rem;background:var(--sup);border:1px solid var(--borde2);
  padding:.18rem .45rem;border-radius:6px;color:var(--tinta2);
  font-family:ui-monospace,monospace;display:inline-block}
.tj.destaca{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent)}
.sec.alt .tj{background:var(--fondo)}

.dos{display:grid;gap:2rem;grid-template-columns:1fr 1fr;align-items:center}
.dos h2{text-align:left}
.dos p{color:var(--gris)}
.dos pre{background:var(--sup);border:1px solid var(--borde2);border-radius:12px;
  padding:1.1rem 1.2rem;overflow-x:auto;font-size:.84rem;line-height:1.6;margin:0}
.dos code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinta)}
.dos .c{color:var(--acc-tx)} .dos .s{color:#3a7d44}
.mas{font-weight:600;text-decoration:none}
.mas:hover{text-decoration:underline}
.mas-c{text-align:center;margin-top:1.4rem}

.repos{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.repos a{display:block;padding:.9rem 1rem;background:var(--tarjeta);
  border:1px solid var(--borde2);border-radius:11px;text-decoration:none;color:var(--tinta)}
.repos a:hover{border-color:var(--acc)}
.repos b{font-family:ui-monospace,monospace;font-size:.88rem;display:block}
.repos span{display:block;font-size:.8rem;color:var(--gris);margin-top:.2rem}

.cierre{text-align:center;border-top:1px solid var(--borde2)}

/* ── demo ─────────────────────────────────────────────────────────────── */
.demo{max-width:760px;margin:0 auto;background:var(--tarjeta);
  border:1px solid var(--borde2);border-radius:15px;padding:1.2rem}
.tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.tab{flex:1;padding:.6rem;border-radius:9px;border:1px solid var(--borde2);
  background:transparent;color:var(--gris);cursor:pointer;font-size:.92rem;
  font-family:inherit}
.tab.act{background:var(--acc);color:var(--btn-tx);border-color:var(--acc);font-weight:600}
.panel.oculto{display:none}
#d-texto{width:100%;padding:.8rem;border-radius:10px;border:1px solid var(--borde2);
  background:var(--sup);color:var(--tinta);font-family:inherit;font-size:.95rem;resize:vertical}
.fila{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem;gap:.8rem}
.cuenta{font-size:.82rem;color:var(--gris2)}
.suelta{display:block;text-align:center;padding:2rem 1rem;border-radius:12px;
  border:2px dashed var(--borde2);cursor:pointer;transition:border-color .15s,background .15s}
.suelta:hover,.suelta.encima{border-color:var(--acc);background:var(--sup)}
.suelta b{display:block;font-size:1rem}
.suelta span{display:block;font-size:.82rem;color:var(--gris2);margin-top:.3rem}
.suelta input{display:none}
.salida{margin-top:1rem;font-size:.92rem}
.salida audio{width:100%;margin-bottom:.6rem}
.salida pre{background:var(--sup);border:1px solid var(--borde2);border-radius:10px;
  padding:.8rem 1rem;white-space:pre-wrap;margin:0;font-family:inherit;font-size:.92rem}
.salida .err{color:var(--avi-tx)}
.salida .nota{color:var(--gris2);font-size:.82rem;margin-top:.5rem}
.cargando{display:flex;align-items:center;gap:.6rem;color:var(--gris)}
.punto{width:9px;height:9px;border-radius:50%;background:var(--acc);
  animation:late 1s ease-in-out infinite}
@keyframes late{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.pie-demo{text-align:center;font-size:.83rem;color:var(--gris2);margin-top:1rem}

/* El pie NO se estiliza aqui: viene del fichero unico y sus estilos
 * (footer, .seg, .about, .copyright) estan en tema.css, que esta pagina
 * ya carga. Tener una copia propia era garantizar que se separaran. */

@media(max-width:820px){
  .dos{grid-template-columns:1fr}
  .dos h2{text-align:center}
  .mn a:not(.btn-sm){display:none}
}