/* VerboSAAC — web
   Concepto: la página como un tablero de comunicación. Una banda verde (el fondo del icono) para la portada y el pie,
   casillas de pictograma con borde de color según su tipo de palabra (clave Fitzgerald de la app) y capturas reales
   dentro de un marco de móvil. El ámbar del icono solo para lo que se pulsa y para destacar. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/bricolage-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/bricolage-800.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/atkinson-700.woff2") format("woff2"); }

:root {
  /* color: los del icono de la app */
  --banda: #0f3830;          /* verde profundo: portada y pie */
  --banda-2: #12463c;        /* verde de las superficies sobre la banda */
  --ambar: #e5a32b;          /* acento: botones y destacados */
  --salvia: #8cc0a8;         /* bordes y texto suave sobre la banda */
  --papel: #fffdf9;          /* fondo de los pictogramas */
  --fondo: #f3f7f4;          /* fondo de la página (gris verdoso muy claro) */
  --superficie: #ffffff;
  --tinta: #0f3830;
  --tinta-suave: #3f5f57;
  --borde: #cfe0d7;
  --sobre-banda: #fffdf9;
  --sobre-banda-suave: #b9d6c8;
  --sobre-ambar: #0f3830;
  --sombra: 0 1px 2px rgb(15 56 48 / .06), 0 8px 24px rgb(15 56 48 / .08);

  /* las capturas: la app en su tema oscuro (el azul) */
  --pantalla: #0B1624;       /* fondo de la app en tema oscuro */
  --marco: #060b12;          /* marco del móvil */
  --marco-borde: #2a3d57;    /* filo del marco */

  /* clave Fitzgerald (los colores de las casillas de la app) */
  --f-persona-b: #D4A814; --f-persona-f: #FBF1CC;
  --f-verbo-b: #2E9A4F;   --f-verbo-f: #DCF1E2;
  --f-adjetivo-b: #2F6FC4; --f-adjetivo-f: #DCE7F7;
  --f-cosa-b: #E07B1A;    --f-cosa-f: #FDE8D2;
  --f-social-b: #D6407F;  --f-social-f: #FBE0EC;
  --f-otro-b: #8A9097;    --f-otro-f: #FFFFFF;
  --f-categoria-b: #8B5A2B; --f-categoria-f: #F1E3D3;
  --f-urgente-b: #C62828; --f-urgente-f: #FDE3E3;
  --f-tinta: #16232B;      /* el texto sobre las casillas no cambia de color en oscuro, como en la app */

  /* tipografía */
  --letra-titulo: "Bricolage Grotesque", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --letra-texto: "Atkinson Hyperlegible", "Verdana", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .875rem; --t-s: 1rem; --t-m: 1.125rem; --t-l: 1.375rem; --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --t-xxl: clamp(2.75rem, 1.6rem + 5.6vw, 5rem);

  --ancho: 72rem;
  --radio: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --banda: #0f3830; --banda-2: #12463c; --ambar: #e5a32b; --salvia: #8cc0a8; --papel: #fffdf9;
    --fondo: #0a2621; --superficie: #12463c; --tinta: #f1f6f2; --tinta-suave: #b4d0c3; --borde: #275c50;
    --sobre-banda: #fffdf9; --sobre-banda-suave: #b9d6c8; --sobre-ambar: #0f3830;
    --sombra: 0 1px 2px rgb(0 0 0 / .25), 0 10px 28px rgb(0 0 0 / .28);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --banda: #0f3830; --banda-2: #12463c; --ambar: #e5a32b; --salvia: #8cc0a8; --papel: #fffdf9;
  --fondo: #0a2621; --superficie: #12463c; --tinta: #f1f6f2; --tinta-suave: #b4d0c3; --borde: #275c50;
  --sobre-banda: #fffdf9; --sobre-banda-suave: #b9d6c8; --sobre-ambar: #0f3830;
  --sombra: 0 1px 2px rgb(0 0 0 / .25), 0 10px 28px rgb(0 0 0 / .28);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--letra-texto); font-size: var(--t-m); line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--letra-titulo); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); font-weight: 800; }
h3 { font-size: var(--t-l); font-weight: 700; }
p { margin: 0; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--ambar); color: var(--sobre-ambar); padding: .6rem 1rem; font-weight: 700; z-index: 20; }
.saltar:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: calc(8px + env(safe-area-inset-top, 0px)); }

/* contenedor con el margen lateral (y el de la barra del sistema en móviles) */
.envoltura {
  width: 100%; max-width: calc(var(--ancho) + 2 * 24px); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .envoltura { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}

/* ---------- cabecera ---------- */
.cabecera { background: var(--banda); color: var(--sobre-banda); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .9rem; }
.marca { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: var(--letra-titulo); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
.marca img { width: 40px; height: 40px; border-radius: 10px; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: var(--t-s); }
.menu a { text-decoration: none; color: var(--sobre-banda-suave); padding: .25rem 0; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--sobre-banda); text-decoration: underline; }
@media (max-width: 560px) { .menu { gap: .25rem 1rem; font-size: .95rem; } }

/* ---------- portada ---------- */
.portada { background: var(--banda); color: var(--sobre-banda); }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.portada .texto { min-width: 0; display: grid; gap: 1.4rem; }
.antetitulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--salvia); }
.portada h1 { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.portada h1 .saac { color: var(--ambar); }
.entradilla { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.5; color: var(--sobre-banda-suave); max-width: 34ch; }
.entradilla strong { color: var(--sobre-banda); font-weight: 700; }
.disponible { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.etiqueta-pronto { display: inline-flex; align-items: center; gap: .5rem; background: var(--banda-2); border: 1px solid #2d6b5c; color: var(--sobre-banda); border-radius: 999px; padding: .45rem 1rem; font-size: var(--t-s); }
.etiqueta-pronto::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ambar); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .65rem 1.25rem; border-radius: 14px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.boton-ambar { background: var(--ambar); color: var(--sobre-ambar); }
.boton-ambar:hover { filter: brightness(1.06); }

/* la barra de la frase, como en la app */
.frase { display: grid; gap: .6rem; margin: 0; min-width: 0; }
.frase-barra { display: flex; align-items: stretch; gap: .6rem; background: var(--banda-2); border: 1px solid #2d6b5c; border-radius: 22px; padding: .7rem; width: fit-content; max-width: 100%; }
.frase-altavoz { display: grid; place-items: center; width: 3.2rem; border-right: 1px solid #2d6b5c; padding-right: .6rem; color: var(--ambar); }
.frase-altavoz svg { width: 2rem; height: 2rem; }
.frase-nota { font-size: var(--t-s); color: var(--sobre-banda-suave); max-width: 40ch; }

.casilla { --c-b: var(--f-otro-b); --c-f: var(--f-otro-f);
  display: grid; justify-items: center; gap: .15rem; width: 5.6rem; padding: .4rem .35rem .35rem; border-radius: 14px;
  background: var(--c-f); border: 3px solid var(--c-b); color: var(--f-tinta); font-weight: 700; font-size: .95rem; line-height: 1.1; text-align: center; }
.casilla img { width: 4.2rem; height: 4.2rem; object-fit: contain; }
@media (max-width: 420px) { .casilla { width: 4.6rem; font-size: .85rem; } .casilla img { width: 3.4rem; height: 3.4rem; } .frase-altavoz { width: 2.4rem; } .frase-altavoz svg { width: 1.6rem; } }
.t-persona { --c-b: var(--f-persona-b); --c-f: var(--f-persona-f); }
.t-verbo { --c-b: var(--f-verbo-b); --c-f: var(--f-verbo-f); }
.t-adjetivo { --c-b: var(--f-adjetivo-b); --c-f: var(--f-adjetivo-f); }
.t-cosa { --c-b: var(--f-cosa-b); --c-f: var(--f-cosa-f); }
.t-social { --c-b: var(--f-social-b); --c-f: var(--f-social-f); }
.t-otro { --c-b: var(--f-otro-b); --c-f: var(--f-otro-f); }
.t-categoria { --c-b: var(--f-categoria-b); --c-f: var(--f-categoria-f); }
.t-urgente { --c-b: var(--f-urgente-b); --c-f: var(--f-urgente-f); }

/* marco de móvil para las capturas */
.movil { position: relative; width: 100%; max-width: 300px; margin-inline: auto; border-radius: 38px; padding: 10px; background: var(--marco); box-shadow: 0 0 0 1px var(--marco-borde), 0 24px 48px rgb(0 0 0 / .28); }
.movil img { width: 100%; aspect-ratio: 600 / 1252; object-fit: cover; object-position: top; border-radius: 29px; background: var(--pantalla); }
.portada .movil { max-width: 320px; transform: rotate(2deg); }
@media (max-width: 760px) {
  .portada .envoltura { grid-template-columns: minmax(0, 1fr); }
  .portada .movil { max-width: 270px; transform: none; }
}

/* ---------- secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 8vw, 6rem); }
.seccion + .seccion { padding-top: 0; }
.cabeza { display: grid; gap: .75rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cabeza p { color: var(--tinta-suave); }

.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .tres { grid-template-columns: minmax(0, 1fr); max-width: 34rem; } }
.modo { display: grid; grid-template-rows: auto auto 1fr; gap: 1.1rem; min-width: 0; align-content: start; }
/* un trozo de la pantalla de la app, sin marco de móvil */
.ventana { border-radius: 20px; overflow: hidden; background: var(--pantalla); box-shadow: 0 0 0 1px var(--marco-borde), var(--sombra); }
.ventana img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 587; }
.modo h3 { display: flex; align-items: center; gap: .6rem; }
.modo p { color: var(--tinta-suave); }
.modo .ejemplo { margin-top: .25rem; font-size: var(--t-s); color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: .6rem .8rem; }
.modo .ejemplo s { text-decoration: none; color: var(--tinta-suave); }

/* del texto a los pictogramas */
.conversion { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.6fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.nota { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem 1.6rem; box-shadow: var(--sombra); min-width: 0; }
.nota .antetitulo { color: var(--tinta-suave); }
.nota blockquote { margin: .6rem 0 0; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height: 1.45; font-weight: 700; }
.flecha { color: var(--ambar); display: grid; place-items: center; }
.flecha svg { width: 3rem; height: 3rem; }
.lamina { background: var(--pantalla); border-radius: var(--radio); padding: clamp(.75rem, 2vw, 1.25rem); box-shadow: 0 0 0 1px var(--marco-borde), var(--sombra); min-width: 0; }
.lamina img { border-radius: 10px; }
.pie-foto { margin-top: .9rem; font-size: var(--t-s); color: var(--tinta-suave); }
@media (max-width: 820px) { .conversion { grid-template-columns: minmax(0, 1fr); } .flecha svg { transform: rotate(90deg); } }

/* y además */
.cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 1000px) { .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cuatro { grid-template-columns: minmax(0, 1fr); } }
.extra { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.extra .movil { max-width: 220px; margin-inline: 0; border-radius: 30px; padding: 8px; }
.extra .movil img { border-radius: 23px; }
.extra p { color: var(--tinta-suave); font-size: var(--t-s); }
@media (max-width: 520px) { .extra { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); column-gap: 1rem; align-items: start; } .extra .movil { grid-row: span 2; border-radius: 20px; padding: 5px; } .extra .movil img { border-radius: 16px; } }

.datos { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: .75rem 2rem; font-weight: 700; }
.datos li { display: inline-flex; align-items: center; gap: .55rem; }
.datos li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--ambar); flex: none; }

/* clave de colores */
.clave { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 860px) { .clave { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clave li { list-style: none; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; row-gap: .1rem; align-content: center; align-items: center; padding: .7rem .9rem; border-radius: 14px; background: var(--c-f); border: 3px solid var(--c-b); color: var(--f-tinta); min-width: 0; }
.clave img { grid-row: 1 / span 2; width: 3.5rem; height: 3.5rem; object-fit: contain; }
.clave b { align-self: end; }
.clave span { align-self: start; }
@media (max-width: 520px) { .clave { grid-template-columns: minmax(0, 1fr); gap: .6rem; } .clave li { grid-template-columns: 2.9rem minmax(0, 1fr); padding: .55rem .8rem; } .clave img { width: 2.9rem; height: 2.9rem; } }
.clave { padding: 0; margin: 0; }
.clave b { font-size: var(--t-m); }
.clave span { font-size: var(--t-s); }

/* para quién */
.quien { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding: 0; margin: 0; }
@media (max-width: 980px) { .quien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .quien { grid-template-columns: minmax(0, 1fr); } }
.quien li { list-style: none; display: grid; gap: .5rem; align-content: start; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.3rem 1.3rem 1.4rem; min-width: 0; }
.quien img { width: 4.5rem; height: 4.5rem; object-fit: contain; background: var(--papel); border-radius: 12px; padding: .25rem; border: 1px solid var(--borde); }
.quien p { color: var(--tinta-suave); font-size: var(--t-s); }

/* privacidad (resumen) */
.privado { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.privado img { width: clamp(5rem, 10vw, 7.5rem); height: auto; background: var(--papel); border-radius: 16px; padding: .4rem; }
.privado .texto { display: grid; gap: .8rem; min-width: 0; }
.privado p { color: var(--tinta-suave); max-width: 60ch; }
@media (max-width: 560px) { .privado { grid-template-columns: minmax(0, 1fr); } }

/* contacto */
.contacto { background: var(--banda); color: var(--sobre-banda); }
.contacto .envoltura { display: grid; gap: 1.2rem; justify-items: start; padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.contacto h2 { color: var(--sobre-banda); }
.contacto p { color: var(--sobre-banda-suave); max-width: 52ch; }
.correo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.correo a { font-family: var(--letra-titulo); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2vw, 2.1rem); color: var(--sobre-banda); text-decoration-color: var(--ambar); overflow-wrap: anywhere; }
.boton-copiar { background: transparent; color: var(--sobre-banda); border: 1px solid #2d6b5c; min-height: 44px; border-radius: 12px; padding: .5rem .9rem; font: inherit; font-size: var(--t-s); cursor: pointer; }
.boton-copiar:hover { border-color: var(--salvia); }

/* pie */
.pie { background: var(--banda); color: var(--sobre-banda-suave); border-top: 1px solid #23594c; font-size: var(--t-s); }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1.4rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.pie a { color: var(--sobre-banda-suave); }
.pie a:hover { color: var(--sobre-banda); }

/* ---------- páginas de texto (privacidad, créditos) ---------- */
.titular { background: var(--banda); color: var(--sobre-banda); }
.titular .envoltura { display: grid; gap: .6rem; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.titular h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.25rem); font-weight: 800; }
.titular p { color: var(--sobre-banda-suave); max-width: 60ch; }
.texto-legal { padding-block: clamp(2.5rem, 6vw, 4rem); }
.texto-legal .columna { max-width: 44rem; display: grid; gap: 1.1rem; }
.texto-legal h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); margin-top: 1.4rem; }
.texto-legal h3 { font-size: var(--t-m); margin-top: .4rem; }
.texto-legal ul { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
.texto-legal .resumen { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem 1.4rem; display: grid; gap: .6rem; }
.texto-legal .resumen ul { list-style: none; padding: 0; }
.texto-legal .resumen li { padding-left: 1.4rem; position: relative; }
.texto-legal .resumen li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; border-radius: 3px; background: var(--ambar); }
.texto-legal .fecha { color: var(--tinta-suave); font-size: var(--t-s); }
.creditos { display: grid; gap: 1rem; padding: 0; margin: 0; }
.creditos li { list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 1rem 1.2rem; display: grid; gap: .25rem; min-width: 0; }
.creditos .que { font-weight: 700; }
.creditos .lic { font-size: var(--t-s); color: var(--tinta-suave); overflow-wrap: anywhere; }