/* Páginas públicas 2026 (todas menos la portada). Se carga DESPUÉS de landing-2026.css
   y hace de puente: las piezas antiguas (.cole-*, variables --cole-*) toman la letra,
   los colores y el modo noche de la portada, sin reescribir cada página. */

/* 1 · Las variables antiguas apuntan a la paleta de la portada (claro y noche a la vez). */
body.p26{
  --cole-font-family:var(--font);
  --cole-primary:var(--blue);--cole-primary-dark:#1E3F9A;--cole-primary-light:color-mix(in oklab,var(--blue) 14%,var(--paper));
  --cole-primary-bg:color-mix(in oklab,var(--blue) 10%,var(--paper));
  --cole-accent:var(--yellow);--cole-secondary:var(--formica);
  --cole-bg:var(--wall);--cole-bg-body:var(--wall);--cole-bg-primary:var(--paper);--cole-bg-secondary:var(--card);
  --cole-bg-tertiary:var(--wall-2);--cole-bg-surface:var(--paper);--cole-bg-card:var(--paper);--cole-card-bg:var(--paper);
  --cole-bg-elevated:var(--paper);--cole-bg-input:var(--paper);--cole-bg-hover:var(--wall-2);--cole-bg-surface-hover:var(--wall-2);
  --cole-surface:var(--paper);--cole-surface-hover:var(--wall-2);
  --cole-text:var(--ink);--cole-text-primary:var(--ink);--cole-text-secondary:var(--ink-2);--cole-text-muted:var(--ink-2);
  --cole-text-link:var(--blue);--cole-text-inverse:#fff;
  --cole-border:var(--line);--cole-border-light:var(--line);--cole-border-strong:var(--ink-2);--cole-border-focus:var(--focus);
  --cole-radius-md:12px;--cole-radius-lg:16px;--cole-radius-xl:20px;
  --cole-shadow-sm:none;--cole-shadow-md:0 1px 0 var(--line);--cole-shadow-lg:0 2px 0 var(--line);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#101A26;}:root:not([data-theme="light"]) body.p26{--cole-primary:#7FA2F5;--cole-text-link:#9CB8FF;--cole-primary-dark:#9CB8FF}}
:root[data-theme="dark"]{--paper:#101A26}
:root[data-theme="dark"] body.p26{--cole-primary:#7FA2F5;--cole-text-link:#9CB8FF;--cole-primary-dark:#9CB8FF}

/* 2 · Contenido: títulos a escala de página (los de la portada son de cartel). */
.p26 main,.p26 .pub-main{display:block}
:where(.p26 .pub-main) h1{font-size:clamp(2rem,4.2vw,3.2rem)}
:where(.p26 .pub-main) h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.15}
:where(.p26 .pub-main) h3{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.25}
:where(.p26 .pub-main) p{margin:0 0 1em}
/* :where() no tiene peso y el «.p26 h1» de cartel de la portada (80 px) ganaba en las páginas de
   estructura antigua (artículo del blog, /legal/). Aquí con peso real (18-10-2026). */
.p26 .cole-page h1{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.02em}
.p26 .cole-prose h2{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2}
.p26 .cole-prose h3{font-size:clamp(1.15rem,1.7vw,1.3rem);line-height:1.25}
/* Tabla más ancha que el móvil: se desliza ella sola, no la página entera. !important porque hay
   contenido con overflow:hidden en su style, que escondía la última columna (18-10-2026). */
.p26 :is(.cole-prose,.lesson-public__content) table{display:block;max-width:100%;overflow-x:auto !important;-webkit-overflow-scrolling:touch}
/* Palabras sin espacios (nombres de fichero, enlaces): se parten antes que salirse de la pantalla. */
.p26 :is(.cole-prose,.lesson-public__content){overflow-wrap:break-word}
/* Texto justificado del contenido: en móvil deja huecos enormes entre palabras; ahí va a la izquierda. */
@media (max-width:640px){.p26 :is(.cole-prose,.lesson-public__content) [style*="justify"]{text-align:left !important}}
/* Etiquetas redondeadas del contenido («Productores» → «Consumidores»): enteras, nunca partidas en dos líneas (18-10-2026). */
.p26 :is(.cole-prose,.lesson-public__content) span[style*="border-radius"]{display:inline-block;max-width:100%}
.p26 .pub-main :is(p,li,td,dd) a:not(.btn):not([class*="btn"]){color:var(--cole-text-link)}
.p26 .pub-main :is(input,select,textarea,button){font-family:var(--font)}
.cole-container{width:min(1180px,100% - 32px);margin-inline:auto}
.p26 .cole-landing{min-height:0}

/* 3 · Botones, campos, tarjetas, avisos y etiquetas antiguos con el aspecto de la portada. */
.p26 .cole-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:14px;
  font:700 1rem var(--font);text-decoration:none;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background-color .2s ease}
/* El texto del botón en una línea: el botón crece («Volver al blog» salía en tres). */
.p26 .cole-btn{white-space:nowrap}
/* Iconos {% icon %}: icons.css no se carga en las páginas públicas y salían a 140-700 px. */
.p26 .cole-icon{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p26 .cole-icon--sm{width:16px;height:16px}
.p26 .cole-icon--md{width:20px;height:20px}
.p26 .cole-icon--lg{width:24px;height:24px}
.p26 .cole-icon--xl{width:32px;height:32px}
.p26 .cole-icon--2xl{width:48px;height:48px}
.p26 .cole-btn-primary{background:var(--yellow);color:#13202B !important;border-color:#13202B;box-shadow:0 4px 0 #13202B}
.p26 .cole-btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #13202B}
.p26 .cole-btn-ghost,.p26 .cole-btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.p26 .cole-btn-sm{min-height:36px;padding:0 12px;font-size:.92rem}
.p26 .cole-btn-lg{min-height:52px;font-size:1.05rem}
@media (hover:hover) and (pointer:fine){
  .p26 .cole-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 #13202B}
  .p26 .cole-btn-ghost:hover,.p26 .cole-btn-secondary:hover{background:var(--wall-2)}
}
.p26 :is(.cole-input,.cole-select,.cole-textarea){width:100%;box-sizing:border-box;min-height:48px;padding:10px 14px;
  border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:400 1rem var(--font)}
.p26 :is(.cole-input,.cole-select,.cole-textarea):focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 30%,transparent)}
.p26 .cole-input-error{border-color:var(--red)}
.p26 .cole-label{display:block;margin-bottom:6px;font-weight:600;color:var(--ink)}
.p26 .cole-form-group{margin-bottom:16px}
.p26 .cole-form-error{display:block;margin-top:6px;color:var(--red);font-size:.9rem;font-weight:500}
.p26 .cole-card{background:var(--paper);border:2px solid var(--line);border-radius:18px;color:var(--ink)}
.p26 .cole-badge{border-radius:999px;font-weight:600}
.p26 .cole-alert{display:flex;gap:8px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.p26 .cole-alert-error{border-color:var(--red);background:color-mix(in oklab,var(--red) 10%,var(--paper))}
.p26 .cole-alert-success{border-color:var(--formica);background:color-mix(in oklab,var(--formica) 12%,var(--paper))}
.p26 .cole-alert-info{border-color:var(--blue);background:color-mix(in oklab,var(--blue) 10%,var(--paper))}
.p26 input[type="checkbox"],.p26 input[type="radio"]{accent-color:var(--blue)}

/* 4 · Entrar, crear cuenta, recuperar contraseña…: una tarjeta de papel sobre la pared. */
.p26 .cole-auth{min-height:0;display:flex;justify-content:center;padding:28px 16px 72px;background:transparent}
.p26 .cole-auth__card{width:100%;max-width:460px;box-sizing:border-box;background:var(--paper);border:2px solid var(--ink);
  border-radius:22px;padding:32px 28px;box-shadow:0 6px 0 var(--ink)}
.p26 .cole-auth__card--wide{max-width:600px}
.p26 .cole-auth__logo{display:none}
.p26 .cole-auth__title{font-size:clamp(1.8rem,3.4vw,2.4rem) !important;text-align:left;margin:0 0 8px}
.p26 .cole-auth__subtitle{text-align:left;color:var(--ink-2);margin:0 0 24px !important;font-size:1rem}
.p26 .cole-auth__footer{text-align:center;margin-top:20px;color:var(--ink-2)}
.p26 .cole-auth__footer a,.p26 .cole-auth a:not([class*="cole-btn"]){color:var(--cole-text-link);font-weight:600}
.p26 .cole-auth .cole-btn-primary{width:100%;justify-content:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .p26 .cole-auth__card{border-color:var(--line);box-shadow:0 6px 0 #05090E}}
:root[data-theme="dark"] .p26 .cole-auth__card{border-color:var(--line);box-shadow:0 6px 0 #05090E}
@media (max-width:520px){.p26 .cole-auth__card{padding:24px 18px;border-radius:18px}}

/* 5 · Avisos de mensajes (los que antes ponía la plantilla privada). */
.pub-mensajes{width:min(600px,100% - 32px);margin:8px auto 0;display:grid;gap:8px}

/* 6 · Visita en ventanita (embed): sin cabecera ni pie, sin huecos. */
.p26.lp--embed .cole-auth{padding-top:16px}

/* 7 · Piezas de las páginas Quiz, Flashcards y Carnet (antes en landing2-r5.css, que
   forzaba el modo claro). Sus variables propias siguen a la paleta de la portada. */
body.p26{
  --navy:var(--ink);--navy-soft:var(--ink-2);
  --primary:#9A6A00;--primary-dark:#8A5E00;--primary-light:var(--yellow);
  --primary-soft:color-mix(in oklab,var(--yellow) 22%,var(--paper));--primary-border:color-mix(in oklab,var(--yellow) 55%,var(--paper));
  --bg:var(--wall);--bg-alt:var(--wall-2);--bg-card:var(--paper);
  --text:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-2);
  --border:var(--line);--shadow-sm:none;--shadow-md:0 2px 0 var(--line);--shadow-lg:0 4px 0 var(--line);
  --radius:18px;--radius-pill:999px;--ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.p26{--primary:var(--yellow);--primary-dark:var(--yellow)}}
:root[data-theme="dark"] body.p26{--primary:var(--yellow);--primary-dark:var(--yellow)}
.lp-container{width:min(1180px,100% - 32px);margin-inline:auto}
.p26 .lp-section{padding:64px 0;position:relative}
.p26 .lp-section--alt{background:var(--wall-2)}
.p26 .lp-section__header{text-align:center;max-width:680px;margin:0 auto 32px}
.p26 .lp-section__badge{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--yellow);color:#13202B;
  border:2px solid #13202B;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.p26 .lp-section__title{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 14px;color:var(--ink)}
.p26 .lp-section__subtitle{font-size:1.1rem;color:var(--ink-2);line-height:1.6}
.p26 .lp-cta{position:relative;overflow:hidden;text-align:center;padding:72px 16px;background:var(--formica);color:#fff}
.p26 .lp-cta__bg{display:none}
.p26 .lp-cta__content{position:relative;max-width:680px;margin:0 auto}
.p26 .lp-cta__title,.p26 .lp-cta h2{font-size:clamp(2rem,4vw,3rem);color:#fff;margin:0 0 14px}
.p26 .lp-cta__subtitle{color:rgba(255,255,255,.92);font-size:1.1rem;margin:0 0 28px}
.p26 .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:14px;
  font:700 1rem var(--font);text-decoration:none;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background-color .2s ease}
.p26 .lp-btn--primary,.p26 .lp-btn--white{background:var(--yellow);color:#13202B;border-color:#13202B;box-shadow:0 4px 0 #13202B}
.p26 .lp-btn--secondary,.p26 .lp-btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.p26 .lp-btn--lg{min-height:52px;padding:0 28px;font-size:1.05rem}
.p26 .lp-btn--sm{min-height:38px;padding:0 14px;font-size:.92rem}
.p26 .lp-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #13202B}
@media (hover:hover) and (pointer:fine){
  .p26 .lp-btn--primary:hover,.p26 .lp-btn--white:hover{transform:translateY(-2px);box-shadow:0 6px 0 #13202B}
  .p26 .lp-btn--secondary:hover,.p26 .lp-btn--ghost:hover{background:var(--wall-2)}
}

/* 8 · El logo animado de la cabecera y el pie (copiado de landing-2026-piezas.css, que solo
   carga la portada; sin esto el libro salía negro en el resto de páginas). */
.logo{display:block;flex:none}
.logo .lg-e{stroke-dasharray:100}
.logo .lg-wig{transform-box:view-box;transform-origin:41px 41px}
@media (prefers-reduced-motion:no-preference){
  .js .logo .lg-e{animation:lgDraw 1.15s cubic-bezier(.65,0,.35,1) .15s both}
  .js .logo .lg-pen{animation:lgIn .5s cubic-bezier(.3,1.4,.5,1) 1.1s both}
  .js .logo .lg-wig{animation:lgTap 4s ease-in-out 2.2s infinite}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.brand:hover .lg-wig{animation:lgScrib .5s ease-in-out 2}}
@keyframes lgDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes lgIn{from{transform:translate(8px,8px);opacity:0}}
@keyframes lgTap{0%,82%,100%{transform:none}87%{transform:rotate(-9deg)}92%{transform:rotate(4deg)}}
@keyframes lgScrib{25%{transform:translate(-2px,1px) rotate(-8deg)}50%{transform:translate(1px,-1px) rotate(5deg)}75%{transform:translate(-1px,1px) rotate(-5deg)}}