/* Página pública de Twiglet: presentación, textos legales y soporte.
   Misma dirección botánica que la app (docs/DESIGN_SYSTEM.md): papel
   sólido, tinta verde, terracota como acento, Fraunces + Plus Jakarta Sans.
   Los colores son los de lib/core/theme.dart, con el mismo contraste
   verificado (≥ 4,5:1 para texto). */

:root {
  --papel: #F6F1E4;
  --tarjeta: #FFFDF7;
  --tinta: #24402C;
  --texto: #1F3B29;
  --texto-suave: #566A56;
  --terracota: #A9452B;
  --linea: #CBDBBE;
  --sello: #3B6644;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0F1A13;
    --tarjeta: #17251C;
    --tinta: #DCE9D5;
    --texto: #E8F0E0;
    --texto-suave: #93A891;
    --terracota: #E27D5C;
    --linea: #35523F;
    --sello: #8FD19A;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 400 17px/1.65 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--terracota); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: 6px; }

.contenedor { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Encabezado */
.encabezado { border-bottom: 1px solid var(--linea); }
.encabezado .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 68px; flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta); text-decoration: none;
  font: 600 22px/1 "Fraunces", Georgia, serif;
}
.marca img { width: 36px; height: 36px; border-radius: 9px; }
.idiomas { display: flex; gap: 4px; font-size: 14px; }
.idiomas a, .idiomas span {
  padding: 4px 10px; border-radius: 999px; text-decoration: none; color: var(--texto-suave);
}
.idiomas span { background: var(--tarjeta); color: var(--tinta); font-weight: 600; border: 1px solid var(--linea); }

/* Tipografía */
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; color: var(--tinta); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(30px, 6vw, 44px); margin: 40px 0 12px; }
h2 { font-size: 24px; margin: 36px 0 8px; }
h3 { font-size: 19px; margin: 24px 0 6px; }
p, li { max-width: 68ch; }
.bajada { font-size: 19px; color: var(--texto-suave); margin-top: 0; }
.fecha { font-size: 14px; color: var(--texto-suave); }
ul { padding-left: 22px; }
li { margin: 4px 0; }

/* Tablas (datos que se tratan) */
.tabla { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
th { color: var(--tinta); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* Tarjetas y avisos */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 20px;
  padding: 20px 22px; margin: 16px 0;
}
.aviso { border-left: 4px solid var(--terracota); }

/* Portada */
.portada { text-align: center; padding: 24px 0 8px; }
.portada .icono { width: 112px; height: 112px; border-radius: 26px; margin-top: 32px; box-shadow: 0 8px 24px rgba(36, 64, 44, .18); }
.portada h1 { margin-top: 20px; }
.portada .bajada { margin: 0 auto; }
.tiendas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 8px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; text-decoration: none;
  background: var(--tinta); color: var(--papel);
}
.boton.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.boton[aria-disabled="true"] { opacity: .75; cursor: default; }
.nota { font-size: 14px; color: var(--texto-suave); }

.funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 32px 0; }
.funciones .tarjeta { margin: 0; }
.funciones h3 { margin-top: 0; }
.funciones p { margin: 0; font-size: 16px; color: var(--texto-suave); }

/* Pie */
.pie { border-top: 1px solid var(--linea); margin-top: 56px; padding: 24px 0 40px; font-size: 14px; color: var(--texto-suave); }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .encabezado .contenedor { padding-top: 10px; padding-bottom: 10px; }
}