/* ============================================================
   MORELIA · OpenHistoricalMap
   Tema "cartografía histórica / cantera rosa"
   Display: Fraunces · Texto: Hanken Grotesk · Mono: IBM Plex Mono
   ============================================================ */

/* ---------- Fuentes locales (offline) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-wght.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-italic-wght.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('fonts/hanken-wght.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/plexmono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/plexmono-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- Paleta y variables ---------- */
:root{
  --paper:#F1E7D4;        /* pergamino cálido */
  --paper-2:#FBF5E8;      /* tarjeta clara */
  --paper-edge:#E2D2B6;
  --ink:#211B13;          /* casi negro cálido */
  --ink-soft:#574B39;
  --ink-faint:#8A7A60;

  --rosa:#BC6076;         /* cantera rosa */
  --rosa-deep:#8C384E;
  --rosa-tint:#E7CBCD;
  --teal:#2C8A7B;         /* verde OHM */
  --teal-deep:#1C5E54;
  --gold:#B5853C;         /* sepia / línea de mapa */

  --charcoal:#16120D;     /* fondo oscuro */
  --charcoal-2:#221C14;
  --paper-on-dark:#EFE5D2;

  --chrome:rgba(120,106,82,.72);
  --rule:rgba(108,90,58,.32);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --maxw:1180px;
}

/* ---------- Texturas de fondo ---------- */
.reveal-viewport{
  background-color:var(--paper);
  background-image:
    /* grano de papel */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
    /* graticule (retícula de mapa) */
    repeating-linear-gradient(0deg, transparent 0 79px, var(--rule) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--rule) 79px 80px),
    /* viñeta cálida */
    radial-gradient(120% 120% at 50% 0%, #F6EEDD 0%, var(--paper) 46%, #E9DCC2 100%);
  background-blend-mode:multiply,normal,normal,normal;
}

/* ---------- Base reveal ---------- */
.reveal{
  font-family:var(--font-body);
  font-weight:380;
  font-size:34px;
  color:var(--ink);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
.reveal .slides{ text-align:left; }
.reveal .slides section{
  height:100%;
  padding:0 70px;
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
}
.reveal .slides section>*{ width:100%; max-width:var(--maxw); }

.reveal h1,.reveal h2,.reveal h3{
  font-family:var(--font-display);
  color:var(--ink);
  text-transform:none;
  letter-spacing:-.018em;
  line-height:.98;
  margin:0 0 .35em;
  text-shadow:none;
  font-weight:560;
}
.reveal h1{ font-size:2.55em; }
.reveal h2{ font-size:1.92em; }
.reveal h3{ font-size:1.28em; font-weight:600; }
.reveal p{ line-height:1.42; margin:0 0 .7em; }
.reveal strong{ color:var(--rosa-deep); font-weight:680; }
.reveal em{ font-style:italic; }
.reveal a{ color:var(--teal-deep); text-decoration:none; border-bottom:1px solid var(--teal); }

.reveal ul,.reveal ol{ margin:.2em 0 .2em 1.1em; }
.reveal li{ line-height:1.3; margin:.3em 0; padding-left:.25em; }
.reveal li::marker{ color:var(--rosa); }

/* ---------- Cromática fija (marco de hoja de mapa) ---------- */
.deck-chrome{ position:fixed; inset:0; z-index:6; pointer-events:none; }
.deck-chrome .frame{
  position:absolute; inset:18px;
  border:1px solid var(--chrome);
  box-shadow:inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(120,106,82,.18);
}
.deck-chrome .tick{ position:absolute; width:13px; height:13px; border:1px solid var(--chrome); }
.deck-chrome .tick.tl{ left:12px; top:12px; border-right:0; border-bottom:0;}
.deck-chrome .tick.tr{ right:12px; top:12px; border-left:0; border-bottom:0;}
.deck-chrome .tick.bl{ left:12px; bottom:12px; border-right:0; border-top:0;}
.deck-chrome .tick.br{ right:12px; bottom:12px; border-left:0; border-top:0;}
.deck-chrome .meta{
  position:absolute; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--chrome);
}
.deck-chrome .meta.tl{ left:34px; top:26px; }
.deck-chrome .meta.tr{ right:34px; top:26px; }
.deck-chrome .meta.bl{ left:34px; bottom:24px; }
.deck-chrome .meta.br{ right:34px; bottom:24px; }

/* slides oscuras → cromática clara */
.reveal section.dark{ color:var(--paper-on-dark); }
.reveal section.dark h1,
.reveal section.dark h2,
.reveal section.dark h3{ color:var(--paper-on-dark); }
.reveal section.dark strong{ color:#E89BAA; }

/* fondo oscuro de slide */
.reveal .backgrounds .slide-background.dark-bg{
  background-color:var(--charcoal);
}

/* ---------- Componentes ---------- */
.kicker{
  font-family:var(--font-mono); font-size:.46em; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--rosa-deep);
  display:inline-flex; align-items:center; gap:.7em; margin-bottom:.7em;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--rosa); display:inline-block; }
.dark .kicker{ color:var(--rosa); }

.lead{ font-size:1.06em; color:var(--ink-soft); max-width:880px; }
.dark .lead{ color:#D8CBB4; }

.numeral{
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size:8.5em; line-height:.8; color:var(--rosa); opacity:.9;
  letter-spacing:-.03em;
}

.tag{
  font-family:var(--font-mono); font-size:.62em; font-weight:600;
  letter-spacing:.02em; padding:.18em .55em; border-radius:3px;
  background:var(--rosa-tint); color:var(--rosa-deep);
  border:1px solid rgba(140,56,78,.28); white-space:nowrap;
}
.tag.teal{ background:rgba(44,138,123,.16); color:var(--teal-deep); border-color:rgba(44,138,123,.35); }
.tag.ink{ background:rgba(33,27,19,.08); color:var(--ink-soft); border-color:rgba(33,27,19,.2); }

/* evita que imágenes anchas desborden las grillas (reveal escalaría la slide) */
.reveal .slides section img{ max-width:100%; height:auto; }
.two>*,.reveal figure{ min-width:0; }

/* grilla 2 columnas */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; max-width:var(--maxw); }
.two.wide-r{ grid-template-columns:.86fr 1.14fr; }
.two.wide-l{ grid-template-columns:1.14fr .86fr; }
.stack>*+*{ margin-top:.55em; }

/* figura / lámina de mapa */
figure{ margin:0; }
.plate{
  background:var(--paper-2); padding:14px;
  border:1px solid var(--paper-edge);
  box-shadow:0 18px 40px -22px rgba(33,20,8,.55), 0 2px 0 rgba(255,255,255,.5) inset;
  border-radius:2px;
}
.plate img{ display:block; width:100%; height:auto; max-height:320px; object-fit:contain; border-radius:1px; }
.plate.tint img{ filter:sepia(.12) contrast(1.02); }
.plate.big img{ max-height:440px; }
.cap{
  font-family:var(--font-mono); font-size:.5em; color:var(--ink-faint);
  letter-spacing:.04em; margin-top:.7em; line-height:1.35;
}
.dark .cap{ color:#A99B82; }
.cap b{ color:var(--rosa-deep); font-weight:600; }
.dark .cap b{ color:var(--rosa); }

/* imagen a sangre dentro de marco */
.bleed{ width:100%; height:100%; object-fit:cover; }

/* lista de rasgos con check */
.feat{ list-style:none; margin:0; padding:0; }
.feat li{ display:flex; gap:.6em; align-items:flex-start; margin:.5em 0; font-size:.92em; }
.feat li .ic{ flex:0 0 auto; color:var(--teal); font-size:1.05em; line-height:1.2; }
.feat li b{ color:var(--ink); }
.dark .feat li b{ color:#fff; }

/* tarjetas de datos */
.factgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--maxw); }
.fact{
  background:var(--paper-2); border:1px solid var(--paper-edge);
  border-top:3px solid var(--rosa); padding:20px 20px 18px; border-radius:3px;
  box-shadow:0 14px 28px -24px rgba(33,20,8,.6);
}
.fact .n{ font-family:var(--font-display); font-size:1.85em; color:var(--rosa-deep); line-height:1; }
.fact .l{ font-family:var(--font-mono); font-size:.46em; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:.5em; }
.fact p{ font-size:.62em; color:var(--ink-soft); margin:.45em 0 0; line-height:1.4; }

/* línea de tiempo horizontal */
.timeline{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; margin-top:.4em; position:relative; }
.timeline::before{ content:""; position:absolute; left:0; right:0; top:14px; height:2px; background:var(--rule); }
.tl{ position:relative; padding-top:34px; padding-right:18px; }
.tl::before{ content:""; position:absolute; top:8px; left:0; width:14px; height:14px; border-radius:50%; background:var(--rosa); box-shadow:0 0 0 4px var(--paper); }
.tl .y{ font-family:var(--font-mono); font-weight:600; color:var(--rosa-deep); font-size:.7em; }
.tl .t{ font-size:.6em; color:var(--ink-soft); line-height:1.3; margin-top:.2em; display:block; }

/* cita */
.quote{ font-family:var(--font-display); font-style:italic; font-size:1.5em; line-height:1.25; color:var(--ink); max-width:960px; }
.dark .quote{ color:#fff; }
.quote .by{ display:block; font-family:var(--font-mono); font-style:normal; font-size:.4em; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:1em; }

/* embed mapa */
.embed{
  position:relative; width:100%; max-width:880px; margin:0 auto; aspect-ratio:16/9; border:1px solid var(--paper-edge);
  background:var(--charcoal-2); border-radius:3px; overflow:hidden;
  box-shadow:0 22px 46px -26px rgba(0,0,0,.7);
}
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* QR */
.qr{ background:#fff; padding:14px; border-radius:6px; display:inline-block; box-shadow:0 14px 30px -20px rgba(0,0,0,.6); }
.qr img,.qr svg{ display:block; width:200px; height:200px; }

/* chips de enlace (cierre) */
.links{ list-style:none; margin:.4em 0 0; padding:0; display:grid; gap:.55em; }
.links li{ display:flex; gap:.7em; align-items:center; font-family:var(--font-mono); font-size:.62em; }
.links .ic{ width:1.5em; text-align:center; }
.links a{ color:var(--paper-on-dark); border-bottom-color:rgba(239,229,210,.4); }

/* utilidades */
.center{ width:100%; }
.center-x{ text-align:center; }
.center-x .pill-row,.center-x .kicker{ justify-content:center; }
.muted{ color:var(--ink-faint); }
.small{ font-size:.78em; }
.mono{ font-family:var(--font-mono); }
.rosa{ color:var(--rosa-deep); }
.divider{ height:2px; width:80px; background:var(--rosa); margin:.7em 0; }
.pill-row{ display:flex; gap:.5em; flex-wrap:wrap; align-items:center; }

/* portada */
.cover h1{ font-size:3.05em; font-weight:600; line-height:.96; }
.cover .sub{ font-size:1.02em; color:var(--ink-soft); max-width:820px; margin-top:.2em; }
.cover .by{ font-family:var(--font-mono); font-size:.62em; letter-spacing:.04em; color:var(--ink-soft); margin-top:1.1em; line-height:1.7; }
.cover .by b{ color:var(--rosa-deep); }

/* ---------- Animaciones de entrada ---------- */
@keyframes riseIn{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes clipIn{ from{opacity:0; clip-path:inset(0 100% 0 0);} to{opacity:1; clip-path:inset(0 0 0 0);} }
.reveal section.present .anim{ animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
.reveal section.present .anim.d1{ animation-delay:.08s; }
.reveal section.present .anim.d2{ animation-delay:.18s; }
.reveal section.present .anim.d3{ animation-delay:.30s; }
.reveal section.present .anim.d4{ animation-delay:.42s; }
.reveal section.present .anim.d5{ animation-delay:.54s; }
.reveal section.present .clip{ animation:clipIn .9s cubic-bezier(.2,.7,.2,1) both; }

/* progreso reveal en rosa */
.reveal .progress{ color:var(--rosa); height:4px; }
.reveal .progress span{ background:var(--rosa); }
.reveal .controls{ color:var(--rosa-deep); }

/* impresión / pdf: oculta cromática translúcida pesada si estorba */
@media print{
  .reveal-viewport{ background:var(--paper) !important; }
}