/* EpubCC · diseño (propuesta del diseñador, 2026-11-03) sobre Bootstrap local.
   Todo color sale de los tokens de :root; el tema oscuro solo redefine tokens.
   Propiedades lógicas (inline/block) para RTL. Tras cambiar algo, subir
   SCRIPTS_VERSION en app/settings.py. Inter (OFL) en static/vendor/fonts/. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-400-normal.f837d382a885.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-400-normal.9159859e7aa8.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-500-normal.42b95430773b.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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-500-normal.656e8d21838c.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-600-normal.75fb76ec3559.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-600-normal.8f9364515dfc.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-700-normal.3714175d15f3.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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-700-normal.39b692b06219.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/fonts/inter-latin-800-normal.1b59c7d14ad0.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: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-800-normal.730418011423.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --el-fuente: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --el-fondo: #ffffff;
  --el-superficie: #ffffff;
  --el-tinte: #f3f1fd;          /* secciones tintadas: lavanda (línea gráfica 2026-11-04) */
  --el-tinte-2: #e8e4fb;        /* cabeceras de tabla, chip de paso */
  --el-borde: #e1e0ee;
  --el-borde-fuerte: #c9c7dc;
  --el-texto: #12143a;
  --el-texto-2: #4b4f6b;        /* secundario: 7.9:1 sobre blanco */
  --el-primario: #1d5bf0;       /* botones: blanco encima 5.3:1 */
  --el-primario-hover: #1547c4;
  --el-sobre-primario: #ffffff;
  --el-enlace: #1a56e6;
  --el-foco: #1d5bf0;
  --el-info-fondo: #eef4ff;
  --el-info-borde: #cddcfb;
  --el-aviso-fondo: #fff7e8;
  --el-aviso-borde: #f2d7a2;
  --el-aviso-texto: #6a4600;
  --el-aviso-icono: #b76e00;
  --el-error-fondo: #fdeeee;
  --el-error-borde: #f2c4c4;
  --el-error: #b42318;
  --el-ok: #18794e;
  --el-ok-fondo: #e8f6ee;
  --el-pdf: #d92d20;
  --el-radio: 18px;
  --el-radio-s: 10px;
  --el-sombra: 0 1px 2px rgba(30, 24, 90, .04), 0 8px 24px rgba(30, 24, 90, .07);
  --el-ancho: 1160px;
  /* Línea gráfica 2026-11-04 (portada del diseñador): violeta de acento, noche para
     las bandas oscuras y el pie, pasteles por tarjeta. El azul sigue siendo la acción. */
  --el-acento: #5b3fd6;         /* cejas «SEE THE DIFFERENCE»: 7.1:1 sobre blanco */
  --el-acento-suave: #ece6ff;
  --el-noche: #1c1d45;
  --el-noche-2: #262863;
  --el-sobre-noche: #ffffff;
  --el-sobre-noche-2: #c9cbec;
  --el-menta: #eaf7f1; --el-menta-borde: #cfeedd;
  --el-lila: #f2eefd; --el-lila-borde: #e0d8fb;
  --el-melocoton: #fdf1ea; --el-melocoton-borde: #f8dccb;
  --el-crema: #fdf6e3;
  --el-subrayado: #f5b82e;
  --el-sombra-alta: 0 2px 6px rgba(30, 24, 90, .05), 0 18px 48px rgba(30, 24, 90, .10);

  /* Bootstrap lee estos: así sus utilidades siguen el tema. */
  --bs-body-font-family: var(--el-fuente);
  --bs-body-bg: var(--el-fondo);
  --bs-body-color: var(--el-texto);
  --bs-emphasis-color: var(--el-texto);
  --bs-secondary-color: var(--el-texto-2);
  --bs-border-color: var(--el-borde);
  --bs-tertiary-bg: var(--el-tinte);
  --bs-link-color: var(--el-enlace);
  --bs-link-hover-color: var(--el-primario-hover);
  --bs-primary: var(--el-primario);
}

/* Tema oscuro derivado (el diseño solo trae el claro). Contrastes WCAG medidos
   (2026-11-03): texto 15.9:1, secundario 8.9:1, enlace 8.8:1 sobre --el-fondo;
   blanco sobre el botón 5.3:1; aviso 11.5:1, error 7.5:1. Claro: texto 18.4:1,
   secundario 7.6:1, enlace 6.0:1, botón 5.5:1. Todo AA. */
@media (prefers-color-scheme: dark) {
  :root {
    --el-fondo: #0d0f1e;
    --el-superficie: #15172b;
    --el-tinte: #131530;
    --el-tinte-2: #1e2142;
    --el-borde: #283244;
    --el-borde-fuerte: #3a4760;
    --el-texto: #e8ecf3;
    --el-texto-2: #a9b3c4;
    --el-primario: #2f63e0;
    --el-primario-hover: #4677ec;
    --el-enlace: #8cb0ff;
    --el-foco: #8cb0ff;
    --el-info-fondo: #13213a;
    --el-info-borde: #27406b;
    --el-aviso-fondo: #2a2111;
    --el-aviso-borde: #5a4418;
    --el-aviso-texto: #f3d9a4;
    --el-aviso-icono: #f0b44c;
    --el-error-fondo: #2c1517;
    --el-error-borde: #5e2a2d;
    --el-error: #ff8a80;
    --el-ok: #5fd39a;
    --el-ok-fondo: #12281e;
    --el-pdf: #ff7a70;
    --el-sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --el-sombra-alta: 0 2px 8px rgba(0, 0, 0, .45);
    --el-acento: #b9a6ff;
    --el-acento-suave: #2a2452;
    --el-noche: #171936;
    --el-noche-2: #22244f;
    --el-menta: #13261e; --el-menta-borde: #24463a;
    --el-lila: #1d1a36; --el-lila-borde: #353062;
    --el-melocoton: #2a1d17; --el-melocoton-borde: #4f3427;
    --el-crema: #262113;
    --el-subrayado: #d9a02a;
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body { background: var(--el-fondo); color: var(--el-texto); font-family: var(--el-fuente); font-size: 1rem; line-height: 1.55;
       -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { color: var(--el-texto); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h1, .el-h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2, .el-h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); margin-block-end: .5rem; }
h3 { font-size: 1.15rem; font-weight: 700; }
a { color: var(--el-enlace); text-underline-offset: .15em; }
a:hover { color: var(--el-primario-hover); }
:focus-visible { outline: 3px solid var(--el-foco); outline-offset: 2px; border-radius: 4px; }
.lead { font-size: 1.15rem; color: var(--el-texto-2); font-weight: 400; }
.text-body-secondary, .el-suave { color: var(--el-texto-2) !important; }
.el-contenedor { max-width: var(--el-ancho); margin-inline: auto; padding-inline: 1.25rem; }
.el-estrecho { max-width: 860px; margin-inline: auto; padding-inline: 1.25rem; }
.el-seccion { padding-block: 2.5rem; }
.el-tinta { background: var(--el-tinte); }
img { max-width: 100%; height: auto; }

/* Iconos: SVG en línea ({% icono %}, app/iconos.py) en vez de la fuente
   bootstrap-icons. 1em de lado, así las reglas `font-size` de cada pieza siguen
   dando el tamaño, y el color sale de `currentColor`. */
svg.bi { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; }

/* ── Botones (sobre los de Bootstrap) ──────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--el-radio-s); padding: .6rem 1.25rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: .3rem .75rem; font-size: .85rem; }
.btn-primary { --bs-btn-bg: var(--el-primario); --bs-btn-border-color: var(--el-primario); --bs-btn-color: var(--el-sobre-primario);
  --bs-btn-hover-bg: var(--el-primario-hover); --bs-btn-hover-border-color: var(--el-primario-hover); --bs-btn-hover-color: var(--el-sobre-primario);
  --bs-btn-active-bg: var(--el-primario-hover); --bs-btn-active-border-color: var(--el-primario-hover);
  --bs-btn-disabled-bg: var(--el-primario); --bs-btn-disabled-border-color: var(--el-primario); }
.btn-outline-primary { --bs-btn-color: var(--el-enlace); --bs-btn-border-color: var(--el-primario); --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--el-primario); --bs-btn-hover-border-color: var(--el-primario); --bs-btn-hover-color: var(--el-sobre-primario);
  --bs-btn-active-bg: var(--el-primario-hover); --bs-btn-active-color: var(--el-sobre-primario); border-width: 1.5px; }
.btn-outline-secondary { --bs-btn-color: var(--el-texto); --bs-btn-border-color: var(--el-borde-fuerte); --bs-btn-hover-bg: var(--el-tinte);
  --bs-btn-hover-color: var(--el-texto); --bs-btn-hover-border-color: var(--el-borde-fuerte); --bs-btn-disabled-color: var(--el-texto-2);
  --bs-btn-disabled-border-color: var(--el-borde); }
.btn-success { --bs-btn-bg: var(--el-primario); --bs-btn-border-color: var(--el-primario); --bs-btn-hover-bg: var(--el-primario-hover);
  --bs-btn-hover-border-color: var(--el-primario-hover); }

/* ── Cabecera y pie ─────────────────────────────────────────────────────── */
/* position+z-index: el `.row` de Bootstrap que abre muchas páginas tiene margen superior
   negativo (gutter) y se montaba encima de la cabecera, dejando sus enlaces sin clic. */
.el-cabecera { position: relative; z-index: 20; border-block-end: 1px solid var(--el-borde); background: var(--el-fondo); }
.el-idioma { display: inline-flex; align-items: center; gap: .3rem; }
.el-cabecera .el-contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.el-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.3rem; color: var(--el-texto);
  text-decoration: none; letter-spacing: -.02em; }
.el-logo:hover { color: var(--el-texto); }
.el-logo-img { border-radius: 6px; flex: none; }
.el-nav { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 2.4rem); margin: 0; padding: 0; list-style: none; }
.el-nav a, .el-nav button { color: var(--el-texto); text-decoration: none; font-weight: 500; background: none; border: 0; padding: 0; font: inherit; }
.el-nav a:hover, .el-nav button:hover { color: var(--el-enlace); }
.el-nav a[aria-current="page"] { color: var(--el-enlace); font-weight: 600; }
.el-nav .el-entrar { color: var(--el-enlace); font-weight: 700; white-space: nowrap; }
@media (max-width: 575.98px) { .el-nav .el-solo-ancho { display: none; } }

.el-pie { border-block-start: 1px solid var(--el-borde); margin-block-start: 3rem; padding-block: 1.25rem 1.5rem; font-size: .92rem; }
.el-pie .el-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.el-pie .el-logo { font-size: 1.1rem; }
.el-pie nav ul { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.el-pie nav a { color: var(--el-texto-2); text-decoration: none; }
.el-pie nav a:hover { color: var(--el-enlace); text-decoration: underline; }
.el-pie .el-contenido { border-block-end: 1px solid var(--el-borde); padding-block-end: 1rem; margin-block-end: 1rem; }
.el-pie .el-contenido ul { gap: .3rem 1.25rem; font-size: .88rem; }

/* ── Piezas ─────────────────────────────────────────────────────────────── */
.el-etiqueta { display: inline-block; background: var(--el-tinte-2); color: var(--el-enlace); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: .3rem .7rem; margin-block-end: 1rem; }
.el-etiqueta--suave { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.el-migas { font-size: .95rem; margin-block: 1.25rem .5rem; }
.el-migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.el-migas li + li::before { content: "/"; color: var(--el-texto-2); margin-inline-end: .4rem; }
.el-migas [aria-current] { color: var(--el-texto-2); }
.el-actualizada { font-size: .88rem; color: var(--el-texto-2); }

.el-tarjeta { background: var(--el-superficie); border: 1px solid var(--el-borde); border-radius: var(--el-radio); padding: 1.5rem;
  box-shadow: var(--el-sombra); }
.el-tarjeta--plana { box-shadow: none; }
.el-tarjeta--tinta { background: var(--el-tinte); }

/* Zona de subida con borde discontinuo */
.el-subida { border: 2px dashed var(--el-primario); border-radius: var(--el-radio); padding: 1.75rem 1.5rem; text-align: center;
  background: var(--el-superficie); }
.el-subida h2 { font-size: 1.35rem; margin-block: .5rem .25rem; }
.el-subida input[type="file"] { max-width: 340px; margin-inline: auto; }
.el-subida .el-nota { font-size: .85rem; color: var(--el-texto-2); margin: .75rem 0 0; }
.el-icono-pdf { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 44px; height: 54px;
  border: 2px solid var(--el-texto); border-radius: 4px 14px 4px 4px; padding-block-end: 8px; font-size: .62rem; font-weight: 800;
  color: var(--el-pdf); letter-spacing: .02em; }
.el-icono-pdf--s { width: 34px; height: 42px; font-size: .5rem; padding-block-end: 5px; }
.el-privado { font-size: .88rem; color: var(--el-texto-2); text-align: center; margin-block-start: .75rem; }

/* Pasos numerados */
.el-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 1.25rem 0;
  border-block: 1px solid var(--el-borde); counter-reset: paso; }
.el-pasos li { display: flex; align-items: flex-start; gap: .75rem; justify-content: center; counter-increment: paso; font-weight: 500; }
.el-pasos li::before { content: counter(paso); flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--el-tinte-2);
  color: var(--el-enlace); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.el-pasos small { display: block; color: var(--el-texto-2); font-weight: 400; }
.el-pasos--izq li { justify-content: flex-start; }
@media (max-width: 767.98px) {
  .el-pasos { grid-template-columns: 1fr; border-block: 0; padding: 0; gap: 0; }
  .el-pasos li { justify-content: flex-start; padding-block: .8rem; border-block-end: 1px solid var(--el-borde); align-items: center; }
}
/* Pasador (subida → muestra → libro) */
.el-pasador { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; list-style: none; padding: 0;
  margin: 1rem 0 1.5rem; counter-reset: paso; }
.el-pasador li { display: flex; align-items: center; gap: .5rem; counter-increment: paso; color: var(--el-texto-2); }
.el-pasador li::before { content: counter(paso); width: 2rem; height: 2rem; border-radius: 50%; background: var(--el-tinte-2);
  color: var(--el-enlace); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.el-pasador li[aria-current="step"] { color: var(--el-texto); font-weight: 600; }
.el-pasador li[aria-current="step"]::before { background: var(--el-primario); color: var(--el-sobre-primario); }
.el-pasador li + li::after { content: none; }
.el-pasador .el-flecha { color: var(--el-texto-2); }

/* Comparación original / EPUB con evidencia real */
.el-comparacion { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; margin: 0; }
.el-comparacion > .el-flecha { align-self: center; }
.el-panel { background: var(--el-superficie); border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); overflow: hidden; margin: 0; }
.el-panel > figcaption, .el-panel > .el-panel-cab { background: var(--el-tinte); border-block-end: 1px solid var(--el-borde); padding: .45rem 1rem;
  font-weight: 600; font-size: .95rem; }
.el-panel--epub > figcaption, .el-panel--epub > .el-panel-cab { background: var(--el-tinte-2); }
.el-panel img { display: block; width: 100%; max-height: 380px; object-fit: cover; object-position: top; background: #fff; }
.el-panel--alto img { max-height: 620px; }
.el-panel picture { display: block; }
.el-comparacion .el-flecha { color: var(--el-texto-2); font-size: 1.4rem; }
.el-pie-figura { text-align: center; font-size: .88rem; color: var(--el-texto-2); margin-block-start: .75rem; }
@media (max-width: 767.98px) {
  .el-comparacion { grid-template-columns: 1fr; }
  .el-comparacion .el-flecha { transform: rotate(90deg); justify-self: center; }
  .el-panel img { max-height: 280px; }
}

/* Fila de rasgos */
.el-rasgos { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 1.5rem 0; }
.el-rasgos li { display: flex; align-items: center; justify-content: center; gap: .9rem; font-weight: 600; font-size: 1.05rem; padding-inline: 1rem; }
.el-rasgos li + li { border-inline-start: 1px solid var(--el-borde); }
.el-rasgos .bi { font-size: 1.7rem; color: var(--el-primario); }
@media (max-width: 767.98px) { .el-rasgos { grid-template-columns: 1fr; gap: .8rem; } .el-rasgos li { justify-content: flex-start; }
  .el-rasgos li + li { border: 0; } }

/* Planes */
.el-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.el-plan { display: flex; flex-direction: column; gap: .35rem; background: var(--el-superficie); border: 1px solid var(--el-borde);
  border-radius: var(--el-radio); padding: 1.4rem; box-shadow: var(--el-sombra); }
.el-plan--destacado { border-color: var(--el-primario); box-shadow: 0 0 0 1px var(--el-primario); }
.el-plan h3 { font-size: 1.2rem; margin: 0; }
.el-plan .el-precio { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.el-plan .el-precio small { font-size: 1.1rem; font-weight: 700; }
.el-plan ul { list-style: none; padding: 0; margin: .75rem 0 1rem; flex-grow: 1; }
.el-plan li { display: flex; gap: .5rem; padding-block: .25rem; }
.el-plan li .bi { color: var(--el-primario); }
.el-plan .btn { margin-block-start: auto; }
@media (max-width: 767.98px) { .el-planes { grid-template-columns: 1fr; } }

/* FAQ con <details> nativo: el texto está en el HTML sin JS */
.el-faq { display: grid; gap: .6rem; }
.el-faq details { border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); background: var(--el-superficie); }
.el-faq details[open] { background: var(--el-info-fondo); border-color: var(--el-info-borde); }
.el-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.1rem; font-weight: 600; }
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor; transform: rotate(45deg); margin-block-start: -.25rem; transition: transform .15s; }
.el-faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: .25rem; }
.el-faq details > div { padding: 0 1.1rem .9rem; color: var(--el-texto); }
.el-faq details > div p { margin: 0; }

/* Avisos */
.el-aviso { display: flex; gap: .85rem; align-items: flex-start; border: 1px solid var(--el-info-borde); background: var(--el-info-fondo);
  border-radius: var(--el-radio); padding: 1rem 1.2rem; }
.el-aviso > .bi { font-size: 1.25rem; color: var(--el-enlace); line-height: 1.3; }
.el-aviso > svg.bi { margin-top: .15rem; }
.el-aviso p { margin: 0; }
.el-aviso--atencion { background: var(--el-aviso-fondo); border-color: var(--el-aviso-borde); color: var(--el-aviso-texto); }
.el-aviso--atencion > .bi { color: var(--el-aviso-icono); }
.el-aviso--atencion strong, .el-aviso--atencion h2, .el-aviso--atencion h3 { color: var(--el-aviso-texto); }
.el-aviso--ok { background: var(--el-ok-fondo); border-color: color-mix(in srgb, var(--el-ok) 35%, transparent); }
.el-pasos--lista { grid-template-columns: 1fr; border: 0; padding: 0; gap: .9rem; }
.el-pasos--lista li { justify-content: flex-start; border: 0; padding: 0; align-items: flex-start; }
.el-aviso--error { background: var(--el-error-fondo); border-color: var(--el-error-borde); }
.el-aviso--error > .bi { color: var(--el-error); }
.alert { border-radius: var(--el-radio-s); }
.alert-info { --bs-alert-bg: var(--el-info-fondo); --bs-alert-border-color: var(--el-info-borde); --bs-alert-color: var(--el-texto); }
.alert-warning { --bs-alert-bg: var(--el-aviso-fondo); --bs-alert-border-color: var(--el-aviso-borde); --bs-alert-color: var(--el-aviso-texto); }
.alert-danger, .alert-error { --bs-alert-bg: var(--el-error-fondo); --bs-alert-border-color: var(--el-error-borde); --bs-alert-color: var(--el-texto); }
.alert-success { --bs-alert-bg: var(--el-ok-fondo); --bs-alert-border-color: var(--el-ok); --bs-alert-color: var(--el-texto); }

/* Insignias */
.el-insignia { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .7rem; font-size: .82rem;
  font-weight: 600; background: var(--el-tinte-2); color: var(--el-texto); white-space: nowrap; }
.el-insignia--ok { background: var(--el-ok-fondo); color: var(--el-ok); }
.el-insignia--atencion { background: var(--el-aviso-fondo); color: var(--el-aviso-texto); border: 1px solid var(--el-aviso-borde); }
.el-insignia--error { background: var(--el-error-fondo); color: var(--el-error); }

/* Tablas */
.el-tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--el-borde); border-radius: var(--el-radio-s);
  overflow: hidden; background: var(--el-superficie); font-size: .95rem; }
.el-tabla th, .el-tabla td { padding: .6rem .9rem; border-block-end: 1px solid var(--el-borde); vertical-align: middle; text-align: start; }
.el-tabla tr:last-child > * { border-block-end: 0; }
.el-tabla thead th { background: var(--el-tinte-2); font-weight: 700; }
.el-tabla tbody th { font-weight: 500; }
.el-tabla .el-num { text-align: end; font-variant-numeric: tabular-nums; }
.el-tabla .el-centro { text-align: center; }
.el-tabla .el-nuestro > * { background: var(--el-info-fondo); font-weight: 600; }
.el-tabla .el-mejor { font-weight: 800; }
.el-tabla caption { caption-side: bottom; font-size: .85rem; color: var(--el-texto-2); padding-block-start: .6rem; }
.el-tabla--compacta { font-size: .85rem; }
.el-tabla--compacta th, .el-tabla--compacta td { padding: .45rem .6rem; }
.el-desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.el-desplazable > .el-tabla { min-width: 640px; }
.el-desplazable > .el-tabla--libre { min-width: 0; }
.el-tabla .bi-check2 { color: var(--el-primario); font-size: 1.15rem; }

/* Progreso indeterminado (sin porcentaje inventado) */
.el-progreso { position: relative; height: 10px; border-radius: 999px; background: var(--el-tinte-2); overflow: hidden; margin-block: .9rem; }
.el-progreso::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%; width: 40%; border-radius: inherit;
  background: var(--el-primario); animation: el-ir 1.4s ease-in-out infinite; }
@keyframes el-ir { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .el-progreso::before { animation: none; inset-inline-start: 0; width: 100%; opacity: .35; } }
.el-barra { height: 8px; border-radius: 999px; background: var(--el-tinte-2); overflow: hidden; }
.el-barra > span { display: block; height: 100%; background: var(--el-primario); border-radius: inherit; }

/* Estados reales del trabajo */
.el-estados { list-style: none; padding: 0; margin: 1.25rem auto; max-width: 420px; }
.el-estados li { position: relative; display: flex; align-items: center; gap: .9rem; padding-block: .45rem; color: var(--el-texto-2); }
.el-estados li::before { content: ""; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--el-borde-fuerte);
  background: var(--el-fondo); }
.el-estados li.el-hecho { color: var(--el-texto); }
.el-estados li.el-hecho::before { background: var(--el-primario); border-color: var(--el-primario);
  box-shadow: inset 0 0 0 4px var(--el-primario), inset 0 0 0 6px var(--el-sobre-primario); }
.el-estados li.el-actual { color: var(--el-texto); font-weight: 600; }
.el-estados li.el-actual::before { border-color: var(--el-primario); box-shadow: inset 0 0 0 4px var(--el-fondo), inset 0 0 0 10px var(--el-primario); }

/* Vista previa */
.el-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.el-vista iframe { width: 100%; height: 560px; border: 0; background: #fff; display: block; }
.el-vista .el-pagina-original img { max-height: 560px; width: 100%; object-fit: contain; background: #fff; }
.el-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-block-start: 1px solid var(--el-borde);
  padding-block-start: 1rem; margin-block-start: 1rem; }
.el-grupo { display: inline-flex; }
.el-grupo .btn { border-radius: 0; }
.el-grupo .btn:first-child { border-start-start-radius: var(--el-radio-s); border-end-start-radius: var(--el-radio-s); }
.el-grupo .btn:last-child { border-start-end-radius: var(--el-radio-s); border-end-end-radius: var(--el-radio-s); margin-inline-start: -1px; }
.el-js .el-paginas-original > li:not(.el-visible) { display: none; }
.el-paginas-original { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (max-width: 767.98px) { .el-vista { grid-template-columns: 1fr; } .el-vista iframe { height: 440px; } }

/* Resumen en filas etiqueta / valor */
.el-resumen { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; }
.el-resumen dt { font-weight: 400; color: var(--el-texto-2); }
.el-resumen dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.el-archivo { display: flex; align-items: center; gap: .9rem; }
.el-archivo strong { display: block; font-size: 1.1rem; word-break: break-all; }

/* Formularios */
.form-control, .form-select { background-color: var(--el-superficie); color: var(--el-texto); border-color: var(--el-borde-fuerte);
  border-radius: var(--el-radio-s); }
.form-control:focus { border-color: var(--el-primario); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--el-primario) 25%, transparent);
  background-color: var(--el-superficie); color: var(--el-texto); }
.form-label { font-weight: 600; }
.form-text { color: var(--el-texto-2); }

/* Selector de idioma */
.el-idiomas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0; }
.el-idiomas a { display: block; text-align: center; padding: .55rem .5rem; border: 1px solid var(--el-borde-fuerte); border-radius: var(--el-radio-s);
  color: var(--el-texto); text-decoration: none; font-weight: 500; background: var(--el-superficie); }
.el-idiomas a:hover { border-color: var(--el-primario); color: var(--el-enlace); }
.el-idiomas a[aria-current="true"] { background: var(--el-primario); border-color: var(--el-primario); color: var(--el-sobre-primario); }
.el-idiomas small { display: block; color: var(--el-texto-2); font-weight: 400; }
.el-idiomas a[aria-current="true"] small { color: inherit; }
.el-idiomas li[hidden], [data-idiomas-sugeridos][hidden] { display: none; }
.el-nombre-idioma { overflow-wrap: anywhere; }
.el-buscar-idioma { position: relative; display: block; max-width: 420px; }
.el-buscar-idioma .bi { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--el-texto-2); pointer-events: none; }
.el-buscar-idioma input { padding-inline-start: 40px; }
/* Barra «Read this page in…» (OpenZPL .oz-suggest). Fija abajo: aparece tras
   cargar (el JS lee el idioma del navegador) y arriba empujaba la página (CLS). */
.el-sugerencia { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; background: var(--el-info-fondo);
  border-block-start: 1px solid var(--el-info-borde); box-shadow: 0 -4px 12px rgba(15, 23, 42, .08); font-size: .92rem; }
.el-sugerencia[hidden] { display: none; }
.el-sugerencia__op { color: var(--el-enlace); font-weight: 600; text-decoration: none; }
.el-sugerencia__op:hover { text-decoration: underline; }

/* Recuperación: tabla de errores */
.el-errores { list-style: none; margin: 0; padding: 0; border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); background: var(--el-superficie); }
.el-errores li { display: grid; grid-template-columns: 1.5rem minmax(9rem, 14rem) 1fr auto; gap: .75rem; align-items: center; padding: .65rem 1rem;
  border-block-end: 1px solid var(--el-borde); font-size: .92rem; }
.el-errores li:last-child { border-block-end: 0; }
.el-errores .bi { color: var(--el-error); }
.el-errores strong { font-weight: 600; }
.el-errores .el-actual-error { background: var(--el-error-fondo); }
@media (max-width: 767.98px) { .el-errores li { grid-template-columns: 1.5rem 1fr; } .el-errores li > :nth-child(n+3) { grid-column: 2; } }

/* Prosa de páginas de contenido */
.el-prosa { max-width: 760px; }
.el-prosa h2 { margin-block-start: 2rem; }
.el-prosa ul { padding-inline-start: 1.25rem; }
.el-prosa li { margin-block-end: .35rem; }
.el-citable { font-size: 1.15rem; color: var(--el-texto-2); max-width: 46rem; }

/* Relacionados */
.el-relacionados { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 1.5rem;
  border-block-start: 1px solid var(--el-borde); padding-block-start: 1.25rem; margin-block-start: 2.5rem; }
.el-relacionados h2 { font-size: 1.15rem; margin: 0; }
.el-relacionados ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; margin: 0; padding: 0; flex: 1; }

/* Lista de beneficios con icono (alta de cuenta) */
.el-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.el-beneficios li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; }
.el-beneficios .bi { font-size: 1.4rem; color: var(--el-primario); }
.el-beneficios strong { display: block; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--el-texto-2); --bs-breadcrumb-item-active-color: var(--el-texto-2); }
.visually-hidden-focusable:focus { background: var(--el-superficie) !important; color: var(--el-texto); z-index: 10; }

/* Subida: la etiqueta hace de botón; con JS el envío es automático */
.el-input-pdf:focus-visible + .el-nombre-archivo, .el-subida:focus-within .el-elegir { outline: 3px solid var(--el-foco); outline-offset: 2px; }

/* Subida por trozos */
.el-solo-js { display: none; }
.el-js .el-solo-js { display: block; }
.el-error { color: var(--el-error); font-weight: 600; }
.el-cuenta-atras { font-variant-numeric: tabular-nums; }

/* Aprender: glosario, referencia de EPUBCheck, enlaces automáticos */
.el-glosario { margin: 0; }
.el-glosario dt { font-weight: 600; margin-block-start: .9rem; }
.el-glosario dd { margin: .2rem 0 0; color: var(--el-texto-2); }
.el-lista-enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.el-termino { text-decoration-style: dotted; text-underline-offset: .2em; }

/* Pie en columnas */
.el-pie-columnas nav ul { display: grid; gap: .35rem; }
.el-pie-columnas h2 { font-size: .9rem; margin-block-end: .6rem; }
.el-pie-legal { border-block-start: 1px solid var(--el-borde); margin-block-start: 1.5rem; padding-block-start: 1rem; }

/* Compartir */
.el-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-block: 1.5rem; }
.el-compartir__etiqueta { color: var(--el-texto-2); font-size: .9rem; margin-inline-end: .25rem; }

/* Segunda fila del menú, solo en móvil */
.el-nav-movil { display: none; }
@media (max-width: 575.98px) {
  .el-nav-movil { display: block; border-block-start: 1px solid var(--el-borde); }
  .el-nav-movil ul { display: flex; justify-content: space-around; gap: .5rem; list-style: none; margin: 0; padding: .45rem 1rem; font-size: .92rem; }
  .el-nav-movil a { color: var(--el-texto-2); text-decoration: none; display: inline-block; padding-block: .55rem; }
}

/* Arrastrar y soltar (subida.js): la zona se marca mientras hay un archivo encima. */
.el-subida--encima { background: var(--el-tinta, rgba(29, 91, 240, .06)); border-style: solid; }
/* Las .row con gutter (g-5 = 3rem) sobresalen 4 px del contenedor de 20 px de
   relleno y la página se movía de lado en el móvil (auditoría 2026-11-04). */
main { overflow-x: clip; }

/* ── Muestra lista (diseño 2026-11-04) ───────────────────────────────────── */
.el-listo-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.25rem; padding-block: .5rem .25rem; }
.el-listo-cab h1 { margin-block: .2rem; }
.el-estado-ok { color: var(--el-ok); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.el-listo-descarga { text-align: end; }
.el-listo-descarga .btn { display: inline-flex; align-items: center; gap: .5rem; }
.el-barra-vista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem;
  background: var(--el-superficie); border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); padding: .55rem .75rem; margin-block-end: 1rem; }
.el-barra-vista .btn { display: inline-flex; align-items: center; gap: .25rem; }
.el-barra-vista .btn:disabled { opacity: .45; }
.el-pagina-actual { min-width: 9.5rem; text-align: center; }
.el-vista-caja .el-vista iframe, .el-vista-caja .el-desplazable-v { height: 520px; }
.el-desplazable-v { overflow-y: auto; overscroll-behavior: contain; }
.el-vista-caja .el-pagina-original img { max-height: none; height: auto; }
.el-plegable { border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); background: var(--el-superficie); }
.el-plegable > summary { list-style: none; cursor: pointer; padding: .9rem 1rem .9rem 2.4rem; position: relative; }
.el-plegable > summary::-webkit-details-marker { display: none; }
.el-plegable > summary::before { content: ""; position: absolute; inset-inline-start: 1rem; top: 1.25rem; width: .5rem; height: .5rem;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.el-plegable[open] > summary::before { transform: rotate(45deg); }
.el-plegable-cuerpo { padding: 0 1rem 1rem 2.4rem; }
.el-retencion { border-inline: 0; border-radius: 0; background: transparent; }
.el-libro-completo .btn { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; }
.el-nota-plan { display: flex; gap: .5rem; align-items: flex-start; color: var(--el-texto-2); }
.el-nota-plan svg { color: var(--el-primario); margin-top: .2rem; flex: none; }
@media (max-width: 767.98px) {
  .el-listo-descarga { text-align: start; width: 100%; }
  .el-listo-descarga .btn { width: 100%; justify-content: center; }
  .el-vista-caja .el-vista iframe, .el-vista-caja .el-desplazable-v { height: 420px; }
  .el-pagina-actual { min-width: 0; }
}

/* Pestañas Original / EPUB de la vista previa (solo móvil; vista.js las enciende). */
.el-pestanas-vista { display: flex; gap: .25rem; margin-block-end: .75rem; border-block-end: 1px solid var(--el-borde); }
.el-pestanas-vista[hidden] { display: none; }
.el-pestanas-vista button { flex: 1; background: none; border: 0; border-block-end: 2px solid transparent; padding: .6rem .5rem;
  font-weight: 600; color: var(--el-texto-2); }
.el-pestanas-vista button[aria-selected="true"] { color: var(--el-texto); border-block-end-color: var(--el-primario); }
.el-pestanas-vista button:focus-visible { outline: 2px solid var(--el-primario); outline-offset: 2px; }
.el-vista .el-panel[hidden] { display: none; }

/* Portada: herramienta primero, centrada (revisión 2026-11-04). */
.el-hero h1 { max-width: 18ch; margin-inline: auto; }
.el-hero .lead { max-width: 52ch; margin-inline: auto; }
.el-hero-subida { max-width: 760px; margin-inline: auto; text-align: start; }
.el-subida--grande { padding: 2.5rem 1.5rem 2rem; background: var(--el-tinte-2); }
.el-subida--grande .el-elegir { font-size: 1.15rem; padding: .9rem 2.25rem; }
.el-hero-texto { max-width: 70ch; margin: 1.5rem auto 0; text-align: center; }
.el-restricciones { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem .9rem; font-size: .88rem; color: var(--el-texto-2); }
.el-restricciones li { display: inline-flex; align-items: center; gap: .3rem; }
.el-restricciones svg { color: var(--el-ok, #1a7f37); }
.el-restricciones .el-no svg { color: var(--el-texto-2); }

/* ══ Línea gráfica 2026-11-04 («Calm premium», portada del diseñador) ══════════
   Se aplica a todo el sitio: cabecera, botones, tarjetas, subida, cejas, pie. Las
   piezas solo de la portada (banda noche, antes/después, pasteles, precios) son
   reutilizables en otras páginas. */
h1, .el-h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -.035em; line-height: 1.08; }
.el-hero h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 3.9rem); line-height: 1.02; }
h2, .el-h2 { letter-spacing: -.03em; }
.btn { border-radius: var(--el-radio-s); }
.btn-lg { padding: .8rem 1.6rem; }
.btn-outline-secondary { --bs-btn-border-color: var(--el-texto); --bs-btn-hover-border-color: var(--el-texto); border-width: 1.5px; }
.el-tarjeta { border-color: var(--el-borde); }

/* Ceja (eyebrow): «SEE THE DIFFERENCE». También .el-etiqueta, en todas las páginas. */
.el-ceja, .el-etiqueta { display: inline-block; background: none; padding: 0; border-radius: 0; color: var(--el-acento); font-size: .8rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-block-end: .6rem; }
.el-ceja--noche { color: #c8b8ff; }

/* Cabecera */
.el-cabecera { border-block-end: 1px solid transparent; background: var(--el-fondo); }
.el-cabecera .el-contenedor { min-height: 72px; }
.el-logo { font-size: 1.45rem; }
.el-logo-img { border-radius: 8px; }
.el-nav { gap: clamp(.75rem, 2.2vw, 2.2rem); }
.el-nav a:not(.btn), .el-menu > summary { font-weight: 500; }
.el-nav .btn { font-size: .92rem; padding: .45rem .95rem; }
.el-nav .el-desarrolladores { color: var(--el-sobre-primario); display: inline-flex; align-items: center; gap: .4rem; }
.el-nav .el-desarrolladores:hover { color: var(--el-sobre-primario); }
.el-nav .el-entrar { color: var(--el-texto); font-weight: 600; }
.el-nav .el-entrar:hover { color: var(--el-texto); }
.el-menu { position: relative; }
.el-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.el-menu > summary::-webkit-details-marker { display: none; }
.el-menu > summary svg { font-size: .75rem; transition: transform .15s; }
.el-menu[open] > summary svg { transform: rotate(180deg); }
.el-menu > ul { position: absolute; inset-inline-start: -1rem; top: calc(100% + .75rem); min-width: 250px; list-style: none; margin: 0;
  padding: .5rem; background: var(--el-superficie); border: 1px solid var(--el-borde); border-radius: 14px; box-shadow: var(--el-sombra-alta); z-index: 30; }
.el-menu > ul a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--el-texto); text-decoration: none; }
.el-menu > ul a:hover { background: var(--el-tinte); color: var(--el-texto); }
@media (max-width: 575.98px) { .el-nav .el-desarrolladores { padding: .45rem .6rem; } }

/* Portada: banda lavanda con la subida */
.el-hero-banda { background: radial-gradient(1200px 380px at 50% 0, var(--el-tinte-2), transparent 70%), var(--el-tinte); padding-block: 3.5rem 4rem; }
.el-hero { padding-block: 0; }
.el-hero h1 { max-width: 15ch; margin: 0 auto .5rem; }
.el-hero .lead { font-size: 1.25rem; color: var(--el-texto); margin-block-end: 2rem; }
.el-hero-subida { position: relative; max-width: 640px; margin-inline: auto; }
.el-hero-ilustracion { position: absolute; inset-inline-start: calc(100% + 1.5rem); bottom: -1.5rem; width: 220px; pointer-events: none; }
@media (max-width: 1199.98px) { .el-hero-ilustracion { display: none; } }

/* Subida: tarjeta blanca con borde discontinuo por dentro (todas las páginas) */
.el-subida { border: 0; background: var(--el-superficie); border-radius: 22px; padding: 1rem; box-shadow: var(--el-sombra-alta); }
.el-subida-dentro { border: 2px dashed var(--el-borde-fuerte); border-radius: 16px; padding: 1.75rem 1.25rem 1.25rem; text-align: center; }
.el-subida--grande .el-subida-dentro { padding: 2rem 1.5rem 1.25rem; }
.el-subida--encima .el-subida-dentro { border-color: var(--el-primario); background: var(--el-tinte); }
.el-subida .el-elegir { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.15rem; padding: .85rem 2.4rem; }
.el-subida:focus-within .el-elegir { outline: 3px solid var(--el-foco); outline-offset: 3px; }
.el-doc-pdf { position: relative; display: inline-block; width: 56px; height: 68px; margin-block-end: 1rem; background: var(--el-superficie);
  border: 1.5px solid var(--el-borde-fuerte); border-radius: 8px 20px 8px 8px; box-shadow: var(--el-sombra); }
.el-doc-pdf span { position: absolute; inset-inline: -8px; bottom: 12px; background: var(--el-pdf); color: #fff; font-weight: 800;
  font-size: .78rem; border-radius: 5px; padding: .15rem 0; letter-spacing: .03em; }
.el-restricciones { display: block; margin: 1.25rem 0 0; font-size: .85rem; color: var(--el-texto-2); }

/* Banda oscura de desarrolladores */
.el-banda-noche { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-block: 3.5rem;
  padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: 24px; background: var(--el-noche); color: var(--el-sobre-noche-2); }
.el-banda-noche h2 { color: var(--el-sobre-noche); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.08; }
.el-banda-noche p { font-size: 1.1rem; margin-block-end: 1.5rem; }
.el-btn-lila { --bs-btn-bg: #e4dafe; --bs-btn-color: #1c1d45; --bs-btn-hover-bg: #d4c6fd; --bs-btn-hover-color: #1c1d45;
  --bs-btn-active-bg: #d4c6fd; display: inline-flex; align-items: center; gap: .5rem; }
.el-banda-noche .btn-outline-light { border-width: 1.5px; }
.el-codigo { margin: 0; background: #14153a; border: 1px solid #3a3c78; border-radius: 16px; overflow: hidden; min-width: 0; }
.el-codigo figcaption { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-block-end: 1px solid #3a3c78;
  color: #fff; font-weight: 600; font-size: .9rem; }
.el-semaforo { display: inline-flex; gap: .4rem; }
.el-semaforo i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.el-semaforo i:nth-child(2) { background: #febc2e; } .el-semaforo i:nth-child(3) { background: #28c840; }
.el-codigo pre { margin: 0; padding: 1rem 1.25rem; color: #e6e7ff; font-size: .84rem; line-height: 1.7; overflow-x: auto; }
.el-codigo .el-c { color: #9ad7a5; }
@media (max-width: 991.98px) { .el-banda-noche { grid-template-columns: 1fr; } }

/* Antes / después: papel → lector, con la evidencia REAL de un caso */
.el-diferencia { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: center; margin-block: 3.5rem; }
.el-diferencia h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; }
.el-diferencia .lead { margin-block-end: 1.5rem; }
.el-diferencia .btn { display: inline-flex; align-items: center; gap: .5rem; }
.el-antes-despues { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; }
.el-antes-despues .el-pie-figura { grid-column: 1 / -1; }
.el-papel, .el-lector { position: relative; overflow: hidden; }
.el-papel { background: #fff; border: 1px solid var(--el-borde); border-radius: 14px; padding: 2.5rem .9rem .9rem; box-shadow: var(--el-sombra-alta); }
.el-lector { background: #2b2c4d; border-radius: 22px; padding: 2.75rem .75rem .9rem; box-shadow: var(--el-sombra-alta); }
.el-lector img { border-radius: 10px; background: #fffdf8; }
.el-papel img, .el-lector img { display: block; width: 100%; max-height: 330px; object-fit: cover; object-position: top; }
.el-chip { position: absolute; top: .8rem; inset-inline-start: .9rem; font-size: .75rem; font-weight: 600; background: var(--el-tinte);
  color: var(--el-texto); border-radius: 999px; padding: .15rem .6rem; }
.el-chip--ok { background: #dff3e7; color: #14532d; }
.el-flecha-circulo { width: 44px; height: 44px; border-radius: 50%; background: var(--el-acento-suave); color: var(--el-acento);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.el-diferencia-ilustracion { width: 100%; }
@media (max-width: 991.98px) { .el-diferencia { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 575.98px) { .el-antes-despues { grid-template-columns: 1fr; } .el-flecha-circulo { justify-self: center; transform: rotate(90deg); } }

/* Cabecera de sección con texto a la derecha */
.el-cab-seccion { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: end; margin-block-end: 1.75rem; }
.el-cab-seccion h2 { margin: 0; }
.el-cab-seccion p { margin: 0; }
@media (max-width: 767.98px) { .el-cab-seccion { grid-template-columns: 1fr; gap: .75rem; } }

/* Tarjetas pastel */
.el-pasteles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.el-pastel { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 20px; border: 1px solid; }
.el-pastel img { width: 112px; flex: none; }
.el-pastel h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.el-pastel h3 a { color: var(--el-texto); text-decoration: none; }
.el-pastel h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.el-pastel:hover { box-shadow: var(--el-sombra-alta); }
.el-pastel:focus-within { outline: 3px solid var(--el-foco); outline-offset: 2px; }
.el-pastel p { margin: 0; font-size: .92rem; color: var(--el-texto-2); }
.el-pastel--menta { background: var(--el-menta); border-color: var(--el-menta-borde); }
.el-pastel--lila { background: var(--el-lila); border-color: var(--el-lila-borde); }
.el-pastel--melocoton { background: var(--el-melocoton); border-color: var(--el-melocoton-borde); }
@media (max-width: 991.98px) { .el-pasteles { grid-template-columns: 1fr; } }

/* Banda de precios crema */
.el-banda-precios { display: grid; grid-template-columns: 1fr 2.6fr; gap: 2rem; align-items: center; margin-block: 3rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 24px; background: var(--el-crema); }
.el-banda-precios h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); line-height: 1.08; margin: 0; }
.el-subrayado { background: linear-gradient(transparent 82%, var(--el-subrayado) 82%, var(--el-subrayado) 94%, transparent 94%); }
.el-planes-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.el-planes-mini a { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1.25rem 1.4rem; border-radius: 16px;
  background: var(--el-superficie); color: var(--el-texto); text-decoration: none; border: 2px solid transparent; box-shadow: var(--el-sombra); }
.el-planes-mini a:hover { box-shadow: var(--el-sombra-alta); color: var(--el-texto); }
.el-planes-mini .el-destacado a { border-color: var(--el-acento); background: var(--el-lila); }
.el-planes-mini strong { font-size: 1.3rem; font-weight: 800; }
.el-precio-mini { font-size: 1.15rem; font-weight: 700; } .el-precio-mini small { font-weight: 400; color: var(--el-texto-2); }
@media (max-width: 991.98px) { .el-banda-precios { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .el-planes-mini { grid-template-columns: 1fr; } }

/* Pie noche (todas las páginas) */
.el-pie { background: var(--el-noche); color: var(--el-sobre-noche-2); border: 0; margin-block-start: 4rem; padding-block: 2.5rem 1.5rem; }
.el-pie .el-logo, .el-pie .el-logo:hover, .el-pie h2 { color: var(--el-sobre-noche); }
.el-pie nav a, .el-pie a { color: var(--el-sobre-noche-2); }
.el-pie nav a:hover, .el-pie a:hover { color: var(--el-sobre-noche); }
.el-pie .el-suave { color: var(--el-sobre-noche-2) !important; }
.el-pie-legal { border-color: rgba(255, 255, 255, .14); }

/* Páginas de herramienta e intención: la misma banda lavanda arriba */
.el-pagina-banda { background: var(--el-tinte); padding-block: .25rem 2.5rem; margin-block-end: 1.5rem; }
/* `.el-nav a` (más específico que `.btn`) les quitaba fondo, borde y relleno. */
.el-nav a.btn { background-color: var(--bs-btn-bg); border: 1.5px solid var(--bs-btn-border-color); padding: .45rem .95rem;
  border-radius: var(--el-radio-s); font-weight: 600; line-height: 1.3; }
.el-nav a.btn-primary, .el-nav a.btn-primary:hover { color: var(--el-sobre-primario); }
.el-nav a.btn-primary:hover { background-color: var(--el-primario-hover); }
.el-nav a.btn-outline-secondary { --bs-btn-bg: transparent; color: var(--el-texto); }
.el-nav a.btn-outline-secondary:hover { background-color: var(--el-tinte); color: var(--el-texto); }
.el-pagina-banda--precios { padding-block-end: 5rem; margin-block-end: 0; }
.el-planes--sobre-banda { margin-block-start: -4rem; }
.el-plan { border-radius: 20px; box-shadow: var(--el-sombra-alta); }
.el-plan--destacado { border-color: var(--el-acento); box-shadow: 0 0 0 1px var(--el-acento), var(--el-sombra-alta); }
/* Móvil: ninguna rejilla de la portada puede ensanchar la página (el código largo de
   la banda noche ensanchaba su columna y la página se movía de lado). */
.el-banda-noche > *, .el-diferencia > *, .el-antes-despues > *, .el-cab-seccion > *, .el-pasteles > *,
.el-banda-precios > *, .el-planes-mini > * { min-width: 0; }
.el-hero-subida { width: 100%; }
@media (max-width: 575.98px) {
  .el-cabecera .el-contenedor { gap: .5rem; }
  .el-nav { gap: .6rem; }
  .el-nav .el-texto-boton { display: none; }
  .el-nav a.btn { padding: .4rem .7rem; }
  .el-hero-banda { padding-block: 2.25rem 2.75rem; }
  .el-subida { padding: .6rem; }
  .el-subida .el-elegir { padding: .8rem 1.5rem; }
  .el-banda-noche { margin-block: 2.5rem; border-radius: 20px; }
  .el-codigo pre { font-size: .76rem; }
}

/* Resto de vistas (2026-11-04): la misma banda lavanda arriba en TODAS las páginas,
   como degradado que se funde con el fondo (no depende de la altura de cada
   cabecera). Las páginas con banda propia (portada, herramientas, precios) la tapan. */
main { background: linear-gradient(to bottom, var(--el-tinte) 0, var(--el-tinte) 140px, var(--el-fondo) 460px) no-repeat; }
.el-migas { margin-block-start: 1.5rem; }
.el-migas a { color: var(--el-texto-2); }
.el-migas a:hover { color: var(--el-texto); }
.el-aviso { border-radius: 14px; }
.el-plegable { border-radius: 14px; }
/* Tarjetas-enlace de los hubs (Answers, Learn, Cases): toda la tarjeta es el enlace. */
.el-tarjeta-enlace { position: relative; padding: 1.15rem 3rem 1.15rem 1.35rem; box-shadow: var(--el-sombra); transition: box-shadow .15s, transform .15s; }
.el-tarjeta-enlace > a:first-child { color: var(--el-texto); text-decoration: none; font-size: 1.08rem; font-weight: 700; }
.el-tarjeta-enlace > a:first-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.el-tarjeta-enlace::before { content: "→"; position: absolute; inset-inline-end: 1.25rem; top: 1.1rem; color: var(--el-acento); font-weight: 700; }
.el-tarjeta-enlace:hover { box-shadow: var(--el-sombra-alta); transform: translateY(-2px); }
.el-tarjeta-enlace:focus-within { outline: 3px solid var(--el-foco); outline-offset: 2px; }
.el-tarjeta-enlace:has(> span.fw-semibold)::before { content: none; }

/* Herramientas encima del pie (2026-11-04, como iLovePDF): tarjetas con icono de color. */
.el-herramientas { background: var(--el-tinte); padding-block: 3rem; margin-block-start: 4rem; }
.el-herramientas + .el-pie { margin-block-start: 0; }
.el-herramientas h2 { margin-block-end: .25rem; }
.el-herramientas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; list-style: none;
  margin: 1.5rem 0 0; padding: 0; }
.el-herramientas-lista a { display: flex; align-items: flex-start; gap: .9rem; height: 100%; padding: 1.1rem 1.15rem; border-radius: 16px;
  background: var(--el-superficie); border: 1px solid var(--el-borde); color: var(--el-texto); text-decoration: none;
  box-shadow: var(--el-sombra); transition: box-shadow .15s, transform .15s; }
.el-herramientas-lista a:hover { box-shadow: var(--el-sombra-alta); transform: translateY(-2px); color: var(--el-texto); }
.el-herramientas-lista a[aria-current="page"] { border-color: var(--el-acento); }
.el-herramientas-lista strong { display: block; font-weight: 700; margin-block-end: .15rem; }
.el-herramientas-lista strong + span { display: block; font-size: .88rem; color: var(--el-texto-2); line-height: 1.4; }
.el-herramienta-icono { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.3rem; color: #fff; }
.el-tono--azul { background: #1d5bf0; } .el-tono--violeta { background: #6d4ae0; } .el-tono--verde { background: #18794e; }
.el-tono--menta { background: #2f9e6e; } .el-tono--lila { background: #8b6cf0; } .el-tono--melocoton { background: #e07a45; }
.el-tono--rosa { background: #d6457a; } .el-tono--noche { background: #262863; }
@media (min-width: 992px) { .el-herramientas-lista { grid-template-columns: repeat(3, 1fr); } }

/* Claves de API (2026-11-05): bloque de código que se puede copiar sin desbordar. */
.el-clave { background: var(--el-tinte); border: 1px solid var(--el-borde); border-radius: .5rem; padding: .6rem .8rem; margin: 0;
  white-space: pre-wrap; word-break: break-all; font-size: .85rem; }

/* Cifras grandes del cara a cara del benchmark (2026-11-05). */
.el-cifras { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.el-cifras li { background: var(--el-tinte); border: 1px solid var(--el-borde); border-radius: .75rem; padding: .75rem 1rem; }
.el-cifras strong { font-size: 1.25rem; }
.el-cifras span { display: block; color: var(--el-texto-suave, inherit); font-size: .9rem; }