/* ============================================================================
   "Estilo @nicoaldetips · Medieval" (2026-10-11) — ver el encabezado de estiloNicoMedieval.js (qué dibuja y cómo es exclusivo por datos).
   Todo scopeado a `.crsl-slide.nmd` (la clase la pone el JS SOLO con el tema activo y la cuenta habilitada): no toca a ningún otro estilo.
   REGLA DE ORO: lo que se ve tiene que salir igual con el respaldo html2canvas 1.4.1 (cero box-shadow / filter / mask / clip-path /
   blend / gradientes repetidos; los dibujos son SVG dentro de un div).
   Variables por lámina (las pone el JS): --nmd-fuera/tx/tinta/perg/perg2/rojo/oro/oroclaro/azul/marfil/noche.
   ============================================================================ */

.crsl-slide.nmd{
  --nmd-titulo:'Cinzel','Trajan Pro',Georgia,serif;
  --nmd-deco:'Cinzel Decorative','Cinzel',Georgia,serif;
  --nmd-gotica:'Pirata One','UnifrakturCook','Cinzel Decorative',Georgia,serif; /* gótica legible (Pirata One): la Unifraktur se confundía en letras sueltas */
  --nmd-texto:'EB Garamond','IM Fell English','Palatino Linotype',Georgia,serif; /* cifras y letras claras, sin la cursiva floreada de IM Fell */
  background:var(--nmd-fuera);
}

/* ---------- lienzo ---------- */
.crsl-slide.nmd .crsl-card{inset:0; border:0; border-radius:0; box-shadow:none; background:transparent; padding:0;}
.crsl-slide.nmd .crsl-card::before, .crsl-slide.nmd .crsl-card::after{display:none;}
.crsl-slide.nmd .crsl-progress-track, .crsl-slide.nmd .crsl-counter, .crsl-slide.nmd .crsl-footer-handle{display:none !important;}
.crsl-slide.nmd:not(.nmd-portada) .crsl-handle{display:none !important;}
.crsl-slide.nmd .crsl-underline, .crsl-slide.nmd .crsl-step-underline{display:none;}
.crsl-slide.nmd .crsl-center-wrap{position:relative; z-index:2; padding:190px 110px 170px; align-items:center; justify-content:center; text-align:center;}
.crslx-decor.nmd-p{line-height:1;}
.crsl-card > .crslx-decor.nmd-bajo{z-index:1;}
/* el marco, el castillo/la lámina de abajo y los estandartes no se agarran con el mouse: en el editor un arrastre sin querer corría el
   marco entero 100 px (pasó en la lámina del dragón) */
.crslx-decor.nmd-p.nmd-bajo{pointer-events:none;}

/* ---------- piezas ---------- */
.nmd-escudo{position:relative; width:110px; height:128px; text-align:center;}
.nmd-escudo b{position:absolute; left:0; right:0; top:42px; display:block; font-family:var(--nmd-titulo); font-weight:900; font-size:27px; line-height:1; letter-spacing:.02em;}
.nmd-pie{display:flex; flex-direction:column; align-items:center; gap:8px; height:100%;}
.nmd-pie-fila{display:flex; align-items:center; gap:18px; width:100%;}
.nmd-pie-fila i{display:block; flex:1; height:3px;}
.nmd-pie-fila svg{flex:none; width:86px !important; height:34px !important;} /* el editor estira todo svg de una pieza al ancho de la caja: acá la espada va a su tamaño */
.nmd-pie-txt{font-family:var(--nmd-titulo); font-weight:700; font-size:24px; letter-spacing:.14em; text-transform:uppercase; line-height:1; white-space:nowrap;}
.nmd-pie-txt b{font-weight:900;}

/* ---------- tipografía ---------- */
.crsl-slide.nmd .crsl-step-title, .crsl-slide.nmd .crsl-quote, .crsl-slide.nmd .crsl-ff-title, .crsl-slide.nmd .crsl-photo-title, .crsl-slide.nmd .crsl-meme-title, .crsl-slide.nmd .crsl-feature-title{
  font-family:var(--nmd-gotica); font-weight:400; font-style:normal; text-transform:none; letter-spacing:0; text-shadow:none; -webkit-text-stroke:0; color:var(--nmd-tx);
  font-size:108px; line-height:1.0; letter-spacing:.012em; margin:0; max-width:100%;}
.crsl-slide.nmd .crsl-step-title.nmd-l2{font-size:96px;}
.crsl-slide.nmd .crsl-step-title.nmd-l3{font-size:84px;}
.nmd-fleur{display:block; margin:22px auto 0; line-height:0; text-align:center;}
.nmd-fleur svg{display:inline-block;}
.crsl-slide.nmd .crsl-step-title.o{color:var(--nmd-tx);}
.crsl-slide.nmd .crsl-step-sub, .crsl-slide.nmd .crsl-box, .crsl-slide.nmd .crsl-check-list, .crsl-slide.nmd .crsl-feature-desc, .crsl-slide.nmd .crsl-body-txt{
  font-family:var(--nmd-texto); font-style:normal; font-weight:400; text-transform:none; letter-spacing:0;}
.nmd-ac{color:var(--nmd-rojo);}
.nmd-clave{display:inline-block; margin-top:18px; padding:8px 32px 12px; border:5px double var(--nmd-oroclaro); border-radius:4px; background:var(--nmd-rojo); color:var(--nmd-marfil);
  font-family:var(--nmd-titulo); font-weight:900; font-size:66px; letter-spacing:.04em; text-transform:uppercase;}

/* ---------- categoría: cinta roja arriba a la izquierda ---------- */
.crsl-slide.nmd .crsl-badge, .crsl-slide.nmd .crsl-badge.o{position:absolute; left:108px; top:92px; right:auto; z-index:3; display:inline-flex; align-items:center; margin:0; transform:none; box-shadow:none; max-width:700px;
  border:3px solid var(--nmd-oro); border-radius:3px; background:var(--nmd-rojo); color:var(--nmd-marfil); padding:12px 26px 13px;
  font-family:var(--nmd-titulo); font-weight:700; font-size:25px; letter-spacing:.14em; text-transform:uppercase; line-height:1.05;}
.crsl-slide.nmd .crsl-badge{max-width:380px;}
.crsl-slide.nmd .crsl-badge svg{display:none;}

/* ---------- portada de noche ---------- */
.crsl-slide.nmd-portada .crsl-portada-body{position:absolute; left:0; right:0; top:632px; bottom:262px; padding:0 96px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; z-index:2;}
.crsl-slide.nmd-portada .crsl-handle{position:absolute; left:108px; top:92px; margin:0; padding:12px 26px; border:3px solid var(--nmd-oro); border-radius:3px; background:var(--nmd-rojo); color:var(--nmd-marfil); z-index:3;
  font-family:var(--nmd-titulo); font-weight:700; font-size:25px; letter-spacing:.1em; text-transform:none; gap:0;}
.crsl-slide.nmd-portada .crsl-handle .crsl-dot{display:none;}
/* el @ va UNA sola vez por lámina (en el pie): en la portada se saca la etiqueta de arriba */
.crsl-slide.nmd-portada .crsl-handle{display:none !important;}
.crsl-slide.nmd-portada .crsl-headline{font-family:var(--nmd-gotica); font-weight:400; font-style:normal; font-size:118px; line-height:1.0; letter-spacing:0; text-transform:none; text-shadow:none; color:var(--nmd-marfil); padding:0; margin:0; max-width:900px;}
.crsl-slide.nmd-portada .crsl-headline.nmd-l2{font-size:102px;}
.crsl-slide.nmd-portada .crsl-headline.nmd-l3{font-size:86px;}
.crsl-slide.nmd-portada .crsl-headline .o{color:var(--nmd-marfil);}
.crsl-slide.nmd-portada .crsl-headline .y{display:inline; color:var(--nmd-oroclaro); font-style:normal;}
.crsl-slide.nmd-portada .crsl-headline .y::after{display:none;}
.crsl-slide.nmd-portada .crsl-body-txt{margin:26px 0 0; padding:0; border:0; max-width:820px; font-family:var(--nmd-texto); font-style:normal; font-weight:500; font-size:40px; line-height:1.28; color:var(--nmd-marfil);}
.crsl-slide.nmd-portada .crsl-cta-pill{position:absolute; left:0; right:0; bottom:176px; margin:0 auto; width:max-content; z-index:3; padding:12px 34px 14px; border:3px solid var(--nmd-oroclaro); border-radius:3px; background:transparent; box-shadow:none; transform:none;
  font-family:var(--nmd-titulo); font-weight:700; font-size:30px; letter-spacing:.16em; text-transform:uppercase; color:var(--nmd-oroclaro);}

/* ---------- FLUJO PAREJO (todas las láminas menos la portada) ----------
   Una sola regla de espacio: una columna entre las cintas de arriba (y = 200) y el pie (y ≈ 1164), con el MISMO espacio entre bloques
   (--nmd-gap). La imagen de abajo (dragón, viñeta de margen, caballero) se agranda o achica para llenar lo que sobra; la lámina del
   gatito, que no lleva imagen aparte, reparte lo que sobra parejo entre bloques y bordes (space-evenly). Nada de «más aire en un lugar
   que en otro». El título y su filete son UN bloque (.nmd-tit). */
.crsl-slide.nmd:not(.nmd-portada) .crsl-center-wrap{--nmd-gap:36px; display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start !important; gap:var(--nmd-gap); padding:186px 110px 196px !important; text-align:center;} /* 186 = 150 (cintas de arriba) + gap; 196 = 1350 - 1190 (pie) + gap: el borde de arriba y el de abajo valen lo mismo que el espacio entre bloques */
.crsl-slide.nmd:not(.nmd-portada) .crsl-center-wrap > *{margin:0 !important; flex:none;}
.crsl-slide.nmd.nmd-t-gif .crsl-center-wrap{justify-content:space-evenly !important; gap:0 !important; padding:150px 110px 160px !important;} /* sin imagen que llene: el aire sobrante se reparte en partes iguales entre bordes y bloques */
.nmd-tit{display:flex; flex-direction:column; align-items:center; width:100%;}
.nmd-tit .nmd-fleur{margin:18px auto 0;}
.nmd-plato{flex:1 1 0 !important; min-height:0; width:100%; display:flex; align-items:center; justify-content:center;}
.nmd-plato img{height:100%; width:auto; max-width:100%;}

/* ---------- Paso simple ---------- */
.crsl-slide.nmd .crsl-step-icon-big, .crsl-slide.nmd .crsl-step-icon-big.o{display:none;}
.crsl-slide.nmd .crsl-step-sub{font-style:normal; font-weight:500; font-size:44px; line-height:1.26; color:var(--nmd-tx); max-width:860px;}
.crsl-slide.nmd .crsl-box, .crsl-slide.nmd .crsl-box.o{box-sizing:border-box; width:100%; padding:30px 42px 34px; border:5px double var(--nmd-tinta); border-radius:4px; background:var(--nmd-perg2); box-shadow:none; color:var(--nmd-tinta);
  font-size:44px; font-weight:500; line-height:1.26; text-align:center;}

/* letra capital iluminada (primer letra del recuadro de texto): pan de oro real del Bestiario de Aberdeen, borde doble de tinta */
.nmd-capital{float:left; width:92px; height:92px; box-sizing:border-box; margin:4px 20px 4px 2px; border:5px double var(--nmd-tinta);
  background:#C9A24A url(/lib/medieval/oro-pan.jpg) center/cover; color:var(--nmd-rojo);
  font-family:var(--nmd-gotica); font-weight:400; font-size:78px; line-height:84px; text-align:center; text-transform:uppercase;}
.crsl-slide.nmd .crsl-box.nmd-con-capital{text-align:left;}

/* ---------- Checklist ---------- */
.crsl-slide.nmd .crsl-check-list{width:100%; box-sizing:border-box; padding:12px 38px; background:var(--nmd-perg2); border:5px double var(--nmd-tinta); border-radius:4px; text-align:left; font-size:42px; font-weight:500; line-height:1.16; color:var(--nmd-tinta);}
.crsl-slide.nmd .crsl-check-row{background:none; border:0; border-radius:0; padding:18px 0; margin:0; gap:22px; align-items:flex-start; box-shadow:none; color:var(--nmd-tinta); border-bottom:2px solid rgba(42,26,14,.28);}
.crsl-slide.nmd .crsl-check-row:last-child{border-bottom:0;}
.crsl-slide.nmd .crsl-check-icon{flex:none; width:44px; height:44px; margin-top:3px; border-radius:50%; background:var(--nmd-rojo); border:3px solid var(--nmd-oro); box-shadow:none;}
.crsl-slide.nmd .crsl-check-icon svg{width:25px; height:25px;}
.crsl-slide.nmd .crsl-check-icon svg *{stroke:var(--nmd-marfil);}

/* tamaños iguales en todas las láminas: la lámina GIF y el cierre traen estilos en línea (64px / 33px…) que hay que pisar con !important */
.crsl-slide.nmd .crsl-box, .crsl-slide.nmd .crsl-box.o{font-size:44px !important; padding:30px 42px 34px !important; margin:0 !important;}
.crsl-slide.nmd.nmd-t-gif .crsl-step-title, .crsl-slide.nmd.nmd-t-cta_final .crsl-step-title{margin:0 !important; line-height:1.02 !important;}
.crsl-slide.nmd.nmd-t-gif .crsl-step-title{font-size:108px !important;}
.crsl-slide.nmd.nmd-t-gif .crsl-step-title.nmd-l2{font-size:96px !important;}
.crsl-slide.nmd.nmd-t-gif .crsl-step-title.nmd-l3{font-size:84px !important;}

/* ---------- GIF: el gatito en un cuadro de manuscrito ---------- */
.crsl-slide.nmd .crsl-gif-frame{width:748px; height:561px; border:10px double var(--nmd-oro); border-radius:4px; background:var(--nmd-perg2); box-sizing:border-box;}
.crsl-slide.nmd .crsl-gif-img{width:100%; height:100%; object-fit:contain;}

/* ---------- Cierre: [recuadro + «guardalo»] a la izquierda, el caballero con el sello de lacre a la derecha ---------- */
.crsl-slide.nmd.nmd-t-cta_final .crsl-step-title{font-size:104px !important; line-height:1.04 !important;}
.crsl-slide.nmd.nmd-t-cta_final .crsl-step-sub{font-family:var(--nmd-texto) !important; font-weight:500 !important; font-style:normal; font-size:44px !important; color:var(--nmd-tx) !important;}
.nmd-fila{display:flex; gap:36px; width:100%; flex:1 1 0 !important; min-height:0; align-items:stretch; text-align:left;}
.nmd-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:space-evenly; gap:var(--nmd-gap,36px);}
.nmd-col .crsl-box{width:100%;}
.nmd-col .crsl-save-hint{align-self:flex-start; margin:0; font-family:var(--nmd-titulo); font-weight:700; font-size:30px; letter-spacing:.16em; text-transform:uppercase; color:var(--nmd-rojo);}
.nmd-caballero{position:relative; flex:0 0 auto; height:100%; display:flex;}
.nmd-caballero img{display:block; height:100%; width:auto;}
.nmd-sello{position:absolute; left:-74px; bottom:-30px; width:150px; transform:rotate(8deg); z-index:3; line-height:0;}

/* ---------- resto de láminas (features, flujo, antes/después…): piel de pergamino ---------- */
.crsl-slide.nmd .crsl-feature-box{background:var(--nmd-perg2); border:4px double var(--nmd-tinta); border-radius:4px; box-shadow:none;}
.crsl-slide.nmd .crsl-feature-icon, .crsl-slide.nmd .crsl-flow-icon{background:var(--nmd-rojo); border:3px solid var(--nmd-oro); box-shadow:none; border-radius:50%;}
.crsl-slide.nmd .crsl-feature-icon svg *, .crsl-slide.nmd .crsl-flow-icon svg *{stroke:var(--nmd-marfil);}
.crsl-slide.nmd .crsl-feature-title, .crsl-slide.nmd .crsl-feature-desc, .crsl-slide.nmd .crsl-flow-label{color:var(--nmd-tinta);}
.crsl-slide.nmd .crsl-flow-label{font-family:var(--nmd-titulo); font-weight:700;}
.crsl-slide.nmd .crsl-flow-arrow svg *{stroke:var(--nmd-rojo);}