/* ============================================================================
   GUANTAP · SISTEMA DE PRESENTACIONES  ·  system.css
   Modo: Editorial Corporativo Sobrio · Dual-tema invertible (Crema / Cacao)
   Naranja = acento puntual. New Kansas protagonista. 1920×1080.
   --------------------------------------------------------------------------
   Este archivo define: fuentes, tokens, los dos temas, el reset, la base de
   slide, el chrome sobrio, los slots (texto / imagen / lista) y las
   primitivas tipográficas reutilizables. Los layouts por plantilla viven en
   templates.css. El contrato de slots para el builder está en BUILDER_GUIDE.md.
   ============================================================================ */

/* ---------- FUENTES ---------- */
@font-face{ font-family:"New Kansas"; src:url("fonts/NewKansas-Light.otf")   format("opentype"); font-weight:300; font-style:normal; font-display:block; }
@font-face{ font-family:"New Kansas"; src:url("fonts/NewKansas-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:block; }
@font-face{ font-family:"New Kansas"; src:url("fonts/NewKansas-Medium.otf")  format("opentype"); font-weight:500; font-style:normal; font-display:block; }
@font-face{ font-family:"New Kansas"; src:url("fonts/NewKansas-Bold.otf")    format("opentype"); font-weight:700; font-style:normal; font-display:block; }
@font-face{ font-family:"New Kansas"; src:url("fonts/NewKansas-Heavy.otf")   format("opentype"); font-weight:800; font-style:normal; font-display:block; }
@font-face{ font-family:"New Kansas"; src:url("fonts/NewKansas-Black.otf")   format("opentype"); font-weight:900; font-style:normal; font-display:block; }
@font-face{ font-family:"Thearopy Script"; src:url("fonts/ThearopyScript.ttf") format("truetype"); font-display:block; }
@font-face{ font-family:"Caroline Everett"; src:url("fonts/CarolineEverett.otf") format("opentype"); font-display:block; }

/* ---------- TOKENS GLOBALES ---------- */
:root{
  /* ADN cromático (constante en ambos temas) */
  --naranja:#F15A22;
  --naranja-hi:#FF6A30;          /* highlight sutil */
  --naranja-deep:#C8460F;        /* para texto naranja sobre crema, +contraste */
  --crema:#F6EEDD;
  --cacao:#211A15;

  /* Familias */
  --ff:"New Kansas","Inter",system-ui,sans-serif;
  --ff-script:"Thearopy Script","Caroline Everett",cursive;

  /* Lienzo */
  --W:1920px; --H:1080px;

  /* Escala tipográfica sobria (px @1920) */
  --fs-display:200px;   /* portada tipográfica pura */
  --fs-xl:128px;        /* número de sección, hero corto */
  --fs-h1:84px;
  --fs-h2:54px;
  --fs-h3:33px;
  --fs-h4:24px;
  --fs-lead:29px;
  --fs-body:21px;
  --fs-cap:17px;
  --fs-small:15px;
  --fs-eyebrow:14px;

  /* Métrica / aire (sobrio = generoso) */
  --mx:120px;           /* margen lateral */
  --my:92px;            /* margen vertical */
  --gap:40px;
  --radius:0px;         /* sobrio: esquinas rectas. Tiles usan --radius-tile */
  --radius-tile:12px;   /* leve redondeo en todas las imágenes/tiles */

  /* Tracking */
  --track-eyebrow:.22em;
  --track-tight:-.022em;
  --track-display:-.03em;
}

/* ---------- LOS DOS TEMAS ----------
   Se aplican con  data-theme="crema" | "cacao"  sobre cada .slide.
   Cada token de color se resuelve aquí; el resto del CSS sólo usa las vars. */
[data-theme="crema"]{
  --bg:#F6EEDD;
  --bg-2:#FAF6EA;             /* panel apenas más claro */
  --fg:#211A15;
  --fg-soft:rgba(33,26,21,.60);
  --fg-faint:rgba(33,26,21,.34);
  --hair:rgba(33,26,21,.15);
  --hair-2:rgba(33,26,21,.30);
  --tile:#ECE1C9;            /* tile de imagen / card */
  --tile-2:#E4D8BC;
  --tile-line:rgba(33,26,21,.16);
  --accent:#F15A22;
  --accent-txt:#C8460F;      /* naranja como TEXTO sobre crema (legibilidad) */
  --on-accent:#F6EEDD;
  --shadow:0 18px 40px -24px rgba(33,26,21,.45);
  --grain-blend:multiply;
  --grain-op:.05;
}
[data-theme="cacao"]{
  --bg:#211A15;
  --bg-2:#2A211A;
  --fg:#F6EEDD;
  --fg-soft:rgba(246,238,221,.62);
  --fg-faint:rgba(246,238,221,.34);
  --hair:rgba(246,238,221,.16);
  --hair-2:rgba(246,238,221,.32);
  --tile:#2C231C;
  --tile-2:#352A22;
  --tile-line:rgba(246,238,221,.16);
  --accent:#F15A22;
  --accent-txt:#FF6A30;      /* naranja como texto sobre cacao */
  --on-accent:#F6EEDD;
  --shadow:0 22px 50px -26px rgba(0,0,0,.6);
  --grain-blend:soft-light;
  --grain-op:.07;
}

/* Forzar un tema a TODO el deck (lo usa render.py para los contact sheets) */
body.force-crema .slide{ --bg:#F6EEDD;--bg-2:#FAF6EA;--fg:#211A15;--fg-soft:rgba(33,26,21,.60);--fg-faint:rgba(33,26,21,.34);--hair:rgba(33,26,21,.15);--hair-2:rgba(33,26,21,.30);--tile:#ECE1C9;--tile-2:#E4D8BC;--tile-line:rgba(33,26,21,.16);--accent-txt:#C8460F;--shadow:0 18px 40px -24px rgba(33,26,21,.45);--grain-blend:multiply;--grain-op:.05; }
body.force-cacao .slide{ --bg:#211A15;--bg-2:#2A211A;--fg:#F6EEDD;--fg-soft:rgba(246,238,221,.62);--fg-faint:rgba(246,238,221,.34);--hair:rgba(246,238,221,.16);--hair-2:rgba(246,238,221,.32);--tile:#2C231C;--tile-2:#352A22;--tile-line:rgba(246,238,221,.16);--accent-txt:#FF6A30;--shadow:0 22px 50px -26px rgba(0,0,0,.6);--grain-blend:soft-light;--grain-op:.07; }

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:#14100c; }
body{ font-family:var(--ff); color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
img,svg{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
@page{ size:1920px 1080px; margin:0; }

/* ============================================================================
   BASE DE SLIDE
   ============================================================================ */
.slide{
  position:relative;
  width:var(--W); height:var(--H);
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
  isolation:isolate;
}
/* área de contenido con márgenes (las plantillas la usan o sangran a gusto) */
.slide__pad{
  position:absolute; inset:0;
  padding:var(--my) var(--mx);
  display:flex; flex-direction:column;
}

/* grano muy sutil — calidez de papel sin ensuciar */
.slide::after{
  content:""; position:absolute; inset:0; z-index:40; pointer-events:none;
  background:url("img/noise.png") repeat;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
}
.slide.no-grain::after{ display:none; }

/* ============================================================================
   CHROME SOBRIO  —  footer minimal + eyebrow de sección
   ============================================================================ */
.chrome{
  position:absolute; left:var(--mx); right:var(--mx); bottom:46px; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-soft); font-weight:500;
}
.chrome::before{   /* hairline sobre el footer */
  content:""; position:absolute; left:0; right:0; top:-22px; height:1px; background:var(--hair);
}
.chrome__brand{ display:flex; align-items:center; gap:14px; }
.chrome__mark{ width:13px; height:21px; color:var(--fg); opacity:.85; }
.chrome__mark use{ fill:currentColor; }
.chrome__brand b{ font-weight:600; letter-spacing:.18em; }
.chrome__page{ color:var(--fg-faint); font-variant-numeric:tabular-nums; }
.chrome__page b{ color:var(--fg); font-weight:600; }

/* eyebrow de sección, arriba a la izquierda (opcional) */
.flag{
  position:absolute; top:var(--my); left:var(--mx); z-index:30;
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-eyebrow); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; font-weight:600; color:var(--fg-soft);
}
.flag__dot{ width:8px; height:8px; background:var(--accent); border-radius:50%; }

/* ============================================================================
   PRIMITIVAS TIPOGRÁFICAS
   ============================================================================ */
.eyebrow{
  font-size:var(--fs-eyebrow); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; font-weight:600; color:var(--fg-soft);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow--accent{ color:var(--accent-txt); }
.eyebrow__line{ width:48px; height:1px; background:currentColor; opacity:.5; }

.display{ font-weight:900; font-size:var(--fs-display); line-height:.92; letter-spacing:var(--track-display); }
.h1{ font-weight:900; font-size:var(--fs-h1); line-height:.98; letter-spacing:var(--track-tight); }
.h2{ font-weight:800; font-size:var(--fs-h2); line-height:1.02; letter-spacing:var(--track-tight); }
.h3{ font-weight:700; font-size:var(--fs-h3); line-height:1.1; letter-spacing:var(--track-tight); }
.h4{ font-weight:600; font-size:var(--fs-h4); line-height:1.15; }
.lead{ font-weight:300; font-size:var(--fs-lead); line-height:1.42; color:var(--fg); max-width:30ch; }
.body{ font-weight:400; font-size:var(--fs-body); line-height:1.55; color:var(--fg-soft); max-width:46ch; }
.cap{ font-size:var(--fs-cap); line-height:1.4; color:var(--fg-soft); }
.small{ font-size:var(--fs-small); color:var(--fg-faint); }

/* el ÚNICO recurso caligráfico — usar como máximo 1 acento por presentación */
.script{ font-family:var(--ff-script); font-weight:400; letter-spacing:0; color:var(--accent-txt); line-height:.9; }

/* naranja como resalte de una palabra/dato dentro de un título */
.hl{ color:var(--accent-txt); }
em.hl{ font-style:normal; }

/* número/dato grande de impacto (sobrio: New Kansas, no Green Ocha) */
.stat-num{ font-weight:900; font-size:120px; line-height:.86; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.stat-num sup{ font-size:.34em; font-weight:700; vertical-align:super; }
.stat-num.is-accent{ color:var(--accent-txt); }

/* ============================================================================
   COMPONENTES REUTILIZABLES
   ============================================================================ */
/* línea fina */
.hairline{ height:1px; background:var(--hair); width:100%; }
.rule-accent{ width:64px; height:3px; background:var(--accent); }

/* chip de atributo */
.chip{
  display:inline-flex; align-items:center;
  font-size:var(--fs-small); letter-spacing:.04em; font-weight:500;
  color:var(--fg-soft); border:1px solid var(--hair-2);
  padding:7px 14px; border-radius:999px; white-space:nowrap;
}

/* lista de metadatos (dt/dd) */
.meta{ display:flex; flex-wrap:wrap; gap:20px 56px; }
.meta>div{ display:flex; flex-direction:column; gap:4px; }
.meta dt{ font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); font-weight:600; }
.meta dd{ font-size:var(--fs-h4); font-weight:600; }

/* ---------- SLOT DE IMAGEN ----------
   .imgslot                → packshot por defecto (producto sobre tile neutro)
   .imgslot[data-mode=bleed] → lifestyle a sangre (cover, sin marco)
   Placeholder elegante visible hasta que el builder inyecta <img>. */
.imgslot{
  position:relative; overflow:hidden;
  background:var(--tile); border:1px solid var(--tile-line);
  border-radius:var(--radius-tile);
  display:grid; place-items:center;
}
.imgslot[data-mode="packshot"]{ box-shadow:var(--shadow); }
.imgslot[data-mode="bleed"]{ border:0; border-radius:var(--radius-tile); box-shadow:none; background:var(--tile-2); }
/* fondos full-bleed reales (portada/concepto a sangre): sin redondeo, llegan al borde */
.t-portada-img .imgslot, .t-concepto-fb .imgslot{ border-radius:0; }
.imgslot>img{ width:100%; height:100%; }
.imgslot[data-mode="packshot"]>img{ object-fit:contain; padding:9%; }
.imgslot[data-mode="bleed"]>img{ object-fit:cover; }
.imgslot:has(>img) .imgslot__ph{ display:none; }

/* placeholder (CSS puro, sin doodles) */
.imgslot__ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; color:var(--fg-faint);
}
.imgslot__ph svg{ width:46px; height:46px; opacity:.7; }
.imgslot__ph span{ font-size:var(--fs-small); letter-spacing:.18em; text-transform:uppercase; }
.imgslot[data-mode="bleed"] .imgslot__ph{ color:var(--fg-soft); }

/* marco de imagen a sangre con velo para texto encima */
.scrim{ position:absolute; inset:0; z-index:1; }
.scrim--bottom{ background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 38%, transparent 64%); }
.scrim--left{ background:linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 42%, transparent 66%); }

/* logo recoloreable por máscara (toma --fg o el color que se le pase) */
.logo-mark,.logo-word,.logo-full{ display:block; color:var(--fg); fill:currentColor; }
.logo-mark use,.logo-word use,.logo-full use{ fill:currentColor; }
.logo-accent{ color:var(--accent); }

/* ============================================================================
   DECK / PREVIEW  (no afecta el export; sólo para revisar en navegador)
   ============================================================================ */
.deck{ }
.slide{ margin:0 auto; }
@media screen{
  body.preview{ background:#14100c; padding:40px 0; }
  body.preview .slide{ margin:0 auto 40px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); }
}
/* utilidades de alineación usadas por varias plantillas */
.col{ display:flex; flex-direction:column; }
.row{ display:flex; }
.grow{ flex:1; min-height:0; min-width:0; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.end{ align-items:flex-end; }
.mt-auto{ margin-top:auto; }