/* Fuentes de la app, servidas desde su propia carpeta. Archivo y Atkinson Hyperlegible: licencia SIL Open Font License. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100% 106%;
  font-display: swap;
  src: url(app/fuentes/archivo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(app/fuentes/atkinson.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(app/fuentes/atkinson.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(app/fuentes/atkinson.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(app/fuentes/atkinson-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(app/fuentes/atkinson-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Akaza Benitez · página de presentación */
:root {
  /* Libro mayor canadiense: papel claro, tinta marino y un solo acento rojo. El símbolo de la marca ordena la página:
     la media hoja de arce en la portada, las columnas que suben en los tres libros, la raya roja del margen en la glosa. */
  --papel: #f1f4f8; --hoja: #ffffff; --tinta: #10233f; --tinta-2: #5b6676; --regla: #d5dce6;
  --marca: #d0202b; --marca-t: #c11c27; --foco: #1c4bb5;
  --boton: #d0202b; --boton-h: #b51822; --sobre-boton: #ffffff; --velo: rgba(16, 35, 63, .07);
  --panel: #10233f; --sobre-panel: #ffffff; --sobre-panel-2: #c3cddd; --velo-panel: rgba(255, 255, 255, .12); --claro: #ffffff; --claro-h: #e3e9f2; --sobre-claro: #10233f;
  --marco: #10233f; --sombra: rgba(16, 35, 63, .3); --col: rgba(16, 35, 63, .1);
  --f-t: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --f-c: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-m: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0a1424; --hoja: #101d33; --tinta: #e8edf5; --tinta-2: #a3b0c4; --regla: #26364f;
    --marca: #e8313c; --marca-t: #ff8f85; --foco: #9dbcff;
    --boton: #d0202b; --boton-h: #e8313c; --sobre-boton: #ffffff; --velo: rgba(232, 237, 245, .09);
    --panel: #14284c; --sobre-panel: #ffffff; --sobre-panel-2: #c3cddd; --velo-panel: rgba(255, 255, 255, .12); --claro: #ffffff; --claro-h: #e3e9f2; --sobre-claro: #10233f;
    --marco: #33466a; --sombra: rgba(0, 0, 0, .55); --col: rgba(232, 237, 245, .1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0a1424; --hoja: #101d33; --tinta: #e8edf5; --tinta-2: #a3b0c4; --regla: #26364f;
  --marca: #e8313c; --marca-t: #ff8f85; --foco: #9dbcff;
  --boton: #d0202b; --boton-h: #e8313c; --sobre-boton: #ffffff; --velo: rgba(232, 237, 245, .09);
  --panel: #14284c; --sobre-panel: #ffffff; --sobre-panel-2: #c3cddd; --velo-panel: rgba(255, 255, 255, .12); --claro: #ffffff; --claro-h: #e3e9f2; --sobre-claro: #10233f;
  --marco: #33466a; --sombra: rgba(0, 0, 0, .55); --col: rgba(232, 237, 245, .1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.55 var(--f-c); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
.ancho { width: min(100% - 40px, 1120px); margin-inline: auto; }

.salto { position: absolute; left: 12px; top: -80px; z-index: 30; background: var(--tinta); color: var(--papel); padding: 10px 14px; font-weight: 700; border-radius: 2px; }
.salto:focus { top: 10px; }
.vista { background: var(--tinta); color: var(--papel); font-size: .9rem; line-height: 1.4; padding: 9px 20px; text-align: center; }

/* ---------- encabezado ---------- */
.tope { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--regla); }
.tope-f { display: flex; align-items: center; gap: 10px 22px; min-height: 60px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.logo { height: 30px; width: auto; flex: none; }
.lg-c { fill: var(--tinta); }
.lg-h { fill: var(--marca); }
.marca-n { display: none; font: 800 1.02rem/1 var(--f-t); font-stretch: 106%; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.menu { display: none; gap: 26px; font-weight: 600; font-size: .98rem; }
.menu a { text-decoration: none; padding: 10px 0 8px; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--marca); }
.tope-d { display: flex; align-items: center; gap: 4px 12px; }
.idioma { font: 600 .95rem/1 var(--f-c); color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; background: none; border: 0; padding: 14px 6px; cursor: pointer; }
.idioma:hover { text-decoration-color: var(--marca); }

/* ---------- botones ---------- */
.b { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--tinta); border-radius: 3px; background: transparent; color: var(--tinta); font: 700 1rem/1.15 var(--f-c); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; }
.b:hover { background: var(--velo); }
.b:active { transform: translateY(1px); }
.b.p { background: var(--boton); border-color: var(--boton); color: var(--sobre-boton); }
.b.p:hover { background: var(--boton-h); border-color: var(--boton-h); }
.b.g { min-height: 54px; padding: 0 24px; font-size: 1.06rem; }
.b.ch { min-height: 40px; padding: 0 14px; font-size: .95rem; }
.b.claro { background: var(--claro); border-color: var(--claro); color: var(--sobre-claro); }
.b.claro:hover { background: var(--claro-h); border-color: var(--claro-h); }
.b.linea { border-color: var(--sobre-panel); color: var(--sobre-panel); }
.b.linea:hover { background: var(--velo-panel); }

/* ---------- portada ---------- */
.hero { padding: 34px 0 0; overflow: hidden; border-bottom: 1px solid var(--regla); }
.hero-f { display: grid; gap: 30px; }
.ceja { font: 600 .78rem/1.35 var(--f-m); letter-spacing: .09em; text-transform: uppercase; color: var(--marca-t); }
h1 { font: 800 clamp(2.2rem, 7.6vw + .35rem, 4.25rem)/1.02 var(--f-t); font-stretch: 106%; letter-spacing: -.02em; text-wrap: balance; margin-top: 14px; }
.bajada { font-size: clamp(1.1rem, .8vw + .95rem, 1.26rem); line-height: 1.5; margin-top: 18px; max-width: 35em; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.datos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-weight: 600; font-size: .98rem; }
.datos li { display: flex; align-items: center; gap: 8px; }
.datos svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--marca); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* en teléfono, el aparato asoma desde el borde de la portada; en pantallas anchas se ve entero */
.escena { position: relative; display: grid; justify-items: center; align-items: start; height: 430px; padding-top: 22px; overflow: hidden; }
.simbolo { position: absolute; left: 50%; top: 50%; width: min(128%, 540px); max-width: none; transform: translate(-50%, -52%); }
.simbolo .lg-c { fill: var(--col); }
.tel { position: relative; width: min(272px, 72vw); border: 9px solid var(--marco); border-radius: 36px; overflow: hidden; background: var(--hoja); box-shadow: 0 34px 60px -30px var(--sombra); }
.tel img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .simbolo .lg-c { transform-box: fill-box; transform-origin: 50% 100%; animation: sube .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .simbolo .c2 { animation-delay: .07s; }
  .simbolo .c3 { animation-delay: .14s; }
  .simbolo .c4 { animation-delay: .21s; }
  .simbolo .lg-h { transform-box: fill-box; transform-origin: 0% 100%; animation: brota .8s .2s cubic-bezier(.2, .7, .2, 1) backwards; }
}
@keyframes sube { from { transform: scaleY(.3); } }
@keyframes brota { from { transform: scale(.9); opacity: .35; } }

/* ---------- secciones ---------- */
.sec { padding: 54px 0; }
.sec-c { max-width: 44rem; }
h2 { font: 800 clamp(1.65rem, 3.2vw + .7rem, 2.5rem)/1.08 var(--f-t); font-stretch: 106%; letter-spacing: -.015em; text-wrap: balance; }
h3 { text-wrap: balance; }
.sec-p { margin-top: 12px; font-size: 1.12rem; color: var(--tinta-2); max-width: 40rem; }

/* la glosa: término oficial a la izquierda, significado a la derecha, como dos columnas de un libro mayor */
.glosa { background: var(--hoja); border-bottom: 1px solid var(--regla); }
.mayor-c { display: none; }
.mayor { margin-top: 28px; border-top: 2px solid var(--tinta); }
.fila { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--regla); }
.fila dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.cod { font: 600 .95rem/1 var(--f-m); border: 1.5px solid var(--tinta); padding: 4px 7px 3px; border-radius: 2px; white-space: nowrap; }
.ofi { font-weight: 700; }
.fila dd { max-width: 62ch; }
.trad { display: block; color: var(--tinta-2); font-size: .96rem; margin-top: 5px; }
.mayor-pie { margin-top: 18px; color: var(--tinta-2); max-width: 60ch; }

/* los tres libros: columnas que suben, como en el símbolo */
.cols { display: grid; gap: 16px; margin-top: 30px; }
.col-l { background: var(--hoja); border: 1px solid var(--regla); border-top: 6px solid var(--tinta); border-radius: 2px; padding: 18px 20px 22px; }
.forma { display: flex; align-items: baseline; gap: 10px; }
.forma-e { font: 600 .74rem/1 var(--f-m); letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-2); }
.forma-c { font: 800 2.1rem/1 var(--f-t); font-stretch: 106%; letter-spacing: -.01em; }
.col-l h3 { font: 800 1.3rem/1.15 var(--f-t); font-stretch: 106%; margin-top: 16px; }
.q { color: var(--tinta-2); margin-top: 4px; }
.pts { display: grid; gap: 9px; margin-top: 14px; }
.pts li { position: relative; padding-left: 18px; }
.pts li::before { content: ''; position: absolute; left: 0; top: .68em; width: 9px; height: 2px; background: var(--marca); }

/* qué trae: el índice de la app y dos pantallas */
.adentro { background: var(--hoja); border-top: 1px solid var(--regla); }
.adentro-f { display: grid; gap: 30px; }
.adentro-f > * { min-width: 0; }
.secs { margin-top: 26px; border-top: 2px solid var(--tinta); }
.secs > div { display: grid; gap: 2px 20px; padding: 13px 0; border-bottom: 1px solid var(--regla); }
.secs dt { font: 800 1.02rem/1.3 var(--f-t); font-stretch: 106%; }
.secs dd { color: var(--tinta-2); }
.fotos { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 16px; scroll-snap-type: x proximity; }
.tel-f { flex: none; width: min(236px, 62vw); scroll-snap-align: center; }
.tel-f .tel { width: 100%; border-width: 7px; border-radius: 28px; }
figcaption { margin-top: 12px; font-size: .92rem; line-height: 1.4; color: var(--tinta-2); }

/* instalar: el único bloque sobre marino */
.panel { background: var(--panel); color: var(--sobre-panel); }
.panel .sec-p, .redes { color: var(--sobre-panel-2); }
.panel :focus-visible { outline-color: var(--sobre-panel); }
.inst-f { display: grid; gap: 30px; }
.inst-f > * { min-width: 0; }
.redes { margin-top: 18px; font-size: .96rem; max-width: 46ch; }
.estado-i { margin-top: 14px; font-weight: 700; }
.estado-i:empty { display: none; }
.plat { background: var(--hoja); color: var(--tinta); border-radius: 3px; padding: 6px 18px 20px; }
.plat :focus-visible { outline-color: var(--foco); }
.plat-t { display: flex; gap: 2px; margin: 0 -18px; padding: 0 12px; border-bottom: 2px solid var(--tinta); overflow-x: auto; overflow-y: hidden; }
.plat-t button { flex: none; min-height: 50px; padding: 0 12px; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; background: none; color: var(--tinta-2); font: 700 1rem/1 var(--f-c); cursor: pointer; }
.plat-t button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--marca); }
.plat-t button:focus-visible { outline-offset: -4px; }
.plat-p { padding-top: 16px; }
.plat-p + .plat-p { margin-top: 10px; border-top: 1px solid var(--regla); }
.plat-p h3 { font: 800 1.15rem/1.2 var(--f-t); font-stretch: 106%; }
.con-tabs .plat-p { border-top: 0; margin-top: 0; }
.con-tabs .plat-p h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pasos { counter-reset: paso; display: grid; gap: 14px; margin-top: 12px; }
.con-tabs .pasos { margin-top: 4px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.pasos li::before { content: counter(paso); font: 800 1.5rem/1.1 var(--f-t); font-stretch: 106%; color: var(--marca-t); }
.nota, .nota-s { padding: 12px 14px; border-left: 4px solid var(--marca); }
.nota { margin-top: 16px; background: var(--papel); font-size: .98rem; }
.qr { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--regla); }
.qr-c { width: 128px; flex: none; border: 1px solid var(--regla); }
.qr-c svg { width: 100%; height: auto; }
.qr p { font-weight: 600; max-width: 22ch; }

/* privacidad */
.cuatro { display: grid; gap: 22px 28px; margin-top: 28px; }
.cuatro li { border-top: 2px solid var(--tinta); padding-top: 12px; }
.cuatro h3 { font: 800 1.12rem/1.2 var(--f-t); font-stretch: 106%; }
.cuatro p { margin-top: 6px; color: var(--tinta-2); }
.nota-s { margin-top: 26px; max-width: 62ch; background: var(--hoja); }

/* preguntas */
.preg { background: var(--hoja); border-top: 1px solid var(--regla); }
.preg-f { display: grid; gap: 22px; }
.preg-f > * { min-width: 0; }
.faq { border-top: 2px solid var(--tinta); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--regla); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; font-weight: 700; font-size: 1.06rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 600 1.5rem/1 var(--f-m); color: var(--marca-t); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { padding: 0 0 16px; color: var(--tinta-2); max-width: 60ch; }

/* pie */
.pie { border-top: 1px solid var(--regla); padding: 34px 0 44px; }
.pie-f { display: grid; gap: 18px; }
.pie-m { display: flex; align-items: center; gap: 12px; }
.pie-m .logo { height: 40px; }
.pie-n { font: 800 1.1rem/1 var(--f-t); font-stretch: 106%; text-transform: uppercase; letter-spacing: .02em; }
.pie-l { font: 600 .72rem/1.3 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-top: 6px; }
.pie-l2 { font-size: .8rem; color: var(--tinta-2); margin-top: 2px; }
.pie-a { color: var(--tinta-2); font-size: .92rem; max-width: 74ch; }
.pie-d { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; font-size: .95rem; color: var(--tinta-2); }
.pie-e { color: var(--tinta); font-weight: 600; text-underline-offset: 4px; padding: 14px 0; }
.pie-d .idioma { padding-left: 0; padding-right: 0; }

/* ---------- pantallas más anchas ---------- */
@media (min-width: 440px) { .marca-n { display: block; } }
@media (min-width: 560px) {
  .secs > div { grid-template-columns: 12.5rem minmax(0, 1fr); align-items: baseline; }
  .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .ancho { width: min(100% - 64px, 1120px); }
  .sec { padding: 72px 0; }
}
@media (min-width: 820px) {
  .mayor-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 30px; padding-bottom: 10px; font: 600 .78rem/1 var(--f-m); letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-2); }
  .mayor-c span + span { padding-left: 26px; }
  .mayor { margin-top: 0; }
  .fila { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; align-items: stretch; }
  .fila dt, .fila dd { padding: 18px 0; }
  .fila dt { padding-right: 24px; align-content: start; }
  /* la raya roja del margen, continua de arriba abajo */
  .fila dd { border-left: 2px solid var(--marca); padding-left: 24px; max-width: none; }
}
@media (min-width: 900px) {
  .marca { margin-right: 14px; }
  .menu { display: flex; margin-right: auto; }
  .hero { padding: 60px 0 0; }
  .hero-f { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; }
  .hero-t { padding-bottom: 60px; }
  .escena { height: auto; overflow: visible; padding: 8px 0 52px; align-items: center; }
  .simbolo { width: min(126%, 600px); transform: translate(-50%, -54%); }
  .tel { width: 292px; }
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .col-l:nth-child(1) { margin-top: 72px; }
  .col-l:nth-child(2) { margin-top: 36px; }
  .inst-f { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .plat { padding: 8px 24px 24px; }
  .plat-t { margin: 0 -24px; padding: 0 16px; }
}
@media (min-width: 980px) {
  .cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preg-f { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
}
@media (min-width: 1040px) {
  .adentro-f { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: start; }
  .fotos { overflow: visible; padding: 0; gap: 22px; }
  .tel-f { width: 228px; }
  .tel-f:nth-child(2) { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .b { transition: none; }
}