:root{
  /* Marca — tonos tierra / dorado (más oscuros y con mayor contraste) */
  --grad-1: rgba(10,44,35,0.98); /* verde profundo más oscuro */
  --grad-2: rgba(38,26,20,0.98); /* marrón muy oscuro */
  --gold: rgba(168,134,46,0.98); /* dorado algo más apagado y profundo */
  --ink: rgba(8,8,8,0.98); /* texto principal más oscuro */
  --muted: rgba(95,92,80,0.92); /* secundario más sobrio */
  --card: rgba(246,241,232,0.95); /* tarjeta crema ligeramente más cálida y menos luminosa */
  --soft: rgba(241,237,228,0.97); /* fondo suave, más tenue */
  --line: rgba(210,200,185,0.92); /* líneas más contrastadas */
  --stroke: #000; /* líneas del esquema en negro */

  /* Nodos (NO tocar): colores del esquema se mantienen idénticos a los originales */
  --violet: rgba(200,160,255,0.95); /* A,B,C,D — morado (sin cambios) */
  --lime: rgba(190,210,186,0.94);   /* E,F,G,H — verde (sin cambios) */
  --sun:   rgba(236,213,170,0.93);  /* I (amarillo) — (sin cambios) */
  --lav:   rgba(214,196,214,0.94);  /* J — lavanda (sin cambios) */
  --red:   rgba(230,188,174,0.94);  /* banda baja — rosa (sin cambios) */
}

/* Scope plugin styles to avoid theme collisions and prevent text overflow */
.cn-root{display:block}
.cn-root *{box-sizing:border-box}
.cn-root{word-wrap:break-word;overflow-wrap:break-word}
.cn-root h1,.cn-root h2,.cn-root p,.cn-root .lead,.cn-root .numCard p,.cn-root .mTitle,.cn-root .mapListHeader{word-break:break-word;overflow-wrap:break-word;white-space:normal}
/* Allow flex children to shrink properly (prevents overflowing long words/inputs inside flex containers) */
.cn-root .field{min-width:0}
.cn-root .main3 .numCard{min-width:0}


/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--soft);color:var(--ink)}

/* Hero (arregla la pérdida de fondo) */
.hero{
	background-color:#f6f1e8f2;
  /*background:linear-gradient(270deg,var(--grad-1) 0%, var(--grad-2) 74%);*/
  color:#fff;
  padding:56px 20px 36px;
  min-height:190px; /* asegura visibilidad del gradiente */
}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
h1{font-weight:800;letter-spacing:.2px;margin:0 0 8px;font-size:clamp(26px,4vw,40px)}
.lead{opacity:.9;margin:0 0 20px}

/* Formulario */
/* Formulario */
.form{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.field{
  position:relative;
  flex:1 1 340px;
}

.field-date{
  max-width:260px;
}

/* Inputs (blanco + texto negro) */
.field input{
  width:100%;
  height:48px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  color:#111;
  padding:0 14px;
  outline:none;
}

/* Placeholder gris */
.field input::placeholder{
  color:#6b7280;
  opacity:1;
}

/* Date: en muchos navegadores no usa placeholder real */
.field input[type="date"]{
  color:#6b7280; /* gris cuando está vacío */
}

.field input[type="date"]:focus,
.field input[type="date"]:valid{
  color:#111; /* negro cuando eliges fecha */
}

/* Chrome/Safari: texto interno del date */
.field input[type="date"]::-webkit-datetime-edit{
  color:#6b7280;
}
.field input[type="date"]:focus::-webkit-datetime-edit,
.field input[type="date"]:valid::-webkit-datetime-edit{
  color:#111;
}

/* Botones */
.btn{
  height:48px;
  border-radius:10px;
  border:0;
  padding:0 20px;
  font-weight:600;
  cursor:pointer;
}

.btn-primary{
  background:#1f2937;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}

.btn-ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}

.btn i{
  font-style:normal;
  margin-right:8px;
}


/* Tarjetas y secciones */
section{margin:28px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 28px rgba(17,24,39,.08)}
.pad{padding:16px}
.title-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.title-row h2{margin:0;font-size:20px}

.hidden{display:none !important}

/* Intro */
.introBox{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px}
.introTitle{font-weight:700;font-size:20px}

/* 3 principales */
.main3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px}
.numCard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px}
.numCard .big{font-size:48px;font-weight:800;color:#1f2937;line-height:1}
.numCard .subtitle{font-weight:700;margin-top:6px}
.numCard p{margin:8px 0 0;color:var(--muted);font-size:14px}
.numCard.active{box-shadow:0 0 0 2px var(--gold) inset}

/* 7 principales */
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px}
.chip{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:12px;cursor:pointer;display:flex;gap:8px;align-items:center}
.chip .v{font-weight:800}
.chip.active{box-shadow:0 0 0 2px var(--gold) inset}
details{border-top:1px dashed var(--line)}
summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
details[open] summary{background:#FFF7E6}
.desc{padding:0 16px 16px 16px;color:#374151}

/* MAPA */
#pinaculoSvg{margin-left: -58px;overflow: initial;}
/* Fix when embedded in other themes: remove negative offset and force responsive centering inside plugin scope */
.cn-root #pinaculoSvg{margin-left:0 !important;overflow:visible !important;max-width:100%;display:block;height:auto;margin-left:auto;margin-right:auto}
.cn-root .canvasWrap{overflow:visible}
.cn-root .canvasWrap > svg{width:100%;height:auto;display:block;pointer-events:auto}
.cn-root .canvasWrap{overflow:visible;position:relative}
.cn-root .canvasWrap > svg{width:100%;height:auto;display:block;pointer-events:auto;position:relative;z-index:2}
/* watermark shouldn't capture clicks that should go to the svg */
.cn-root .canvasWrap .watermark{pointer-events:none;z-index:0}
/* ensure fullscreen controls remain clickable above svg */
.cn-root .canvasWrap .fs-bar{position:relative;z-index:3;pointer-events:auto}

/* Fullscreen: ensure SVG scales to viewport and remains centered */
.cn-root #mapGrid:-webkit-full-screen .canvasWrap > svg,
.cn-root #mapGrid:fullscreen .canvasWrap > svg{ width:100%; height:100vh; max-height:100vh; object-fit:contain }
.cn-root #mapGrid:-webkit-full-screen,
.cn-root #mapGrid:fullscreen{ display:grid; grid-template-columns: 1fr 380px; gap:16px; align-items:start; padding:12px; height:100vh }

.cn-root #mapGrid:-webkit-full-screen .canvasWrap > svg,
.cn-root #mapGrid:fullscreen .canvasWrap > svg{ width:auto; height:calc(100vh - 48px); max-height:calc(100vh - 48px); max-width:calc(100vw - 420px); object-fit:contain }

/* Ensure the list remains scrollable in fullscreen */
.cn-root #mapGrid:-webkit-full-screen .mapListScroller,
.cn-root #mapGrid:fullscreen .mapListScroller{ max-height:calc(100vh - 80px); overflow:auto }
/* Slightly lighter stroke for node outlines to match the brighter violet fill */
#pinaculoSvg circle{stroke:#7C3AED;stroke-width:2.5}
.mapGrid{display:grid;grid-template-columns:1fr 380px;gap:16px;padding:12px}
.canvasWrap{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.watermark{position:absolute;top:14px;left:14px;opacity:.18}
.legend{padding:12px 0 0 0;color:#6b7280;font-size:12px}
.fs-bar{display:flex;justify-content:flex-end;padding:6px 6px 12px}
.fs-btn{font-size:12px;border:1px solid var(--line);background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer}
.mapList{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.mapListHeader{padding:12px 14px;font-weight:800;color:#374151;border-bottom:1px solid var(--line)}
.mapListScroller{height:940px;overflow:auto}
.mItem{display:flex;gap:10px;padding:12px 14px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
.mItem:hover{background:#F7FAFF}
.mItem.active{background:#FFF7E6;box-shadow:inset 0 0 0 2px var(--gold)}
.mTag{min-width:28px;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:800;border:2px solid var(--gold);color:#1f2937;line-height:1;overflow:hidden;text-align:center}
.mTitle{font-weight:700}
.mVal{margin-left:auto;color:#6b7280}
.node{cursor:pointer;transition:transform .2s ease}
.node:hover{transform:scale(1.04)}
.pulse{animation:pulse 1.2s ease-out 1}
@keyframes pulse{0%{filter:drop-shadow(0 0 0 rgba(212,175,55,.0))}40%{filter:drop-shadow(0 0 10px rgba(212,175,55,.7))}100%{filter:drop-shadow(0 0 0 rgba(212,175,55,.0))}}

/* Etapas */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px}
.stage{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.stage .big{font-size:40px;font-weight:800}
.stage.active{box-shadow:0 0 0 2px var(--gold) inset}
.ctaBar{display:flex;gap:10px;justify-content:flex-end;padding:0 16px 16px}
.btn-sec{border:1px solid var(--line);background:#fff;height:40px;padding:0 14px;border-radius:10px;cursor:pointer}
.btn-yellow{background:#FDE68A;border:1px solid #F59E0B;height:40px;padding:0 14px;border-radius:10px;cursor:pointer}

/* Responsive */
@media (max-width: 1020px){
  .main3{grid-template-columns:repeat(2,1fr)}
  .mapGrid{grid-template-columns:1fr}
  .mapListScroller{height:auto;max-height:520px}
}
@media (max-width: 680px){
  .main3{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .field{flex:1 1 100%}
  .field-date{max-width:none}
}

/* Narrow mobile tweaks — do not affect desktop */
@media (max-width: 420px){
  /* Hero: reduce vertical padding so content fits a single mobile viewport */
  .hero{padding:20px 14px 16px;min-height:120px}
  h1{font-size:20px}
  .lead{font-size:13px;margin-bottom:12px}

  /* Form: stack and make controls touch-friendly */
  .form{flex-direction:column;align-items:stretch;gap:10px}
  .field{flex:1 1 auto}
  .field input{height:48px;font-size:15px;padding:0 12px}
  .field-date{max-width:none}

  /* Buttons: full width and larger tap area */
  .btn{width:100%;height:52px;border-radius:12px;padding:0 16px;display:flex;align-items:center;justify-content:center}
  .btn i{margin-right:6px}

  /* Hide watermark to save vertical space and reduce visual clutter */
  .watermark{display:none}

  /* Map layout: make canvas take priority; list becomes collapsible (scroll limited) */
  .mapGrid{grid-template-columns:1fr;gap:12px}
  .mapList{max-height:36vh;overflow:auto}
  .mapListScroller{height:auto;max-height:36vh}

  /* Remove fullscreen control on narrow screens */
  .fs-bar{display:none}

  /* Center the pináculo SVG on narrow screens (override left offset) */
  #pinaculoSvg{margin-left:0;display:block;margin:0 auto;max-width:100%}
  /* Ensure canvas content centers visually */
  .canvasWrap{display:block;text-align:center}
  .canvasWrap > svg{max-width:100%;height:auto;display:inline-block}

  /* Reduce paddings / margins on cards to fit */
  .card{border-radius:12px}
  .pad{padding:12px}
  .title-row{padding:10px 12px}
  .main3{gap:12px;padding:12px}
  .numCard{padding:16px}

  /* Stages: stack and slightly smaller */
  .stages{grid-template-columns:1fr;gap:10px;padding:12px}
  .stage .big{font-size:34px}

  /* Ensure node description is readable without taking too much space */
  #nodeDesc{position:relative;font-size:13px;padding:10px}

  /* Tap targets for list items */
  .mItem{padding:12px 10px;min-height:48px}

  /* Keep print styles untouched by these tweaks */
}

/* Impresión */
@media print{
  /* Best-effort: request browsers not to print their native headers/footers (where the site URL appears).
     Note: some browsers may ignore margin box rules — this is a best-effort CSS approach. */
  @page{
    size:A4;
    margin:18mm 14mm;
    @top-left { content: none; }
    @top-right { content: none; }
    @bottom-left { content: none; }
    @bottom-right { content: none; }
  }
  body{background:#fff}
  header.hero, .audio-btn, .fs-bar, .ctaBar{display:none !important}
  .wrap{max-width:none}
  .card{box-shadow:none;border-color:#ddd}
  .mapListScroller{height:auto;overflow:visible}
  .mapGrid{grid-template-columns:1fr 1fr}
  .legend{color:#777}
  .print-header, .print-footer{display:flex !important}
  .page-break{break-after:page}
}

/* Encabezado / pie impresión */
.print-header, .print-footer{display:none}
.print-header{align-items:center;gap:16px;border-bottom:1px solid #e5e7eb;padding:8px 0;margin:8px 0 16px}
.print-header img{height:38px}
.ph-title{font-size:18px;font-weight:800}
.ph-meta{font-size:14px}
.print-footer{justify-content:center;color:#6b7280;border-top:1px solid #e5e7eb;padding-top:8px;margin-top:16px}


/* === Navbar v2: verde oscuro, links claros, dorado hover/active === */
.site-nav{
  background:linear-gradient(180deg,var(--grad-1),rgba(0,0,0,0)) !important;
  border-bottom:1px solid rgba(122,90,42,0.12);
  box-shadow: 0 2px 12px rgba(30,30,30,.08);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 20px; }
.brand img{ height:52px; width:auto; display:block; }

.nav-menu{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav-menu a{
  display:block; padding:10px 14px; border-radius:10px;
  text-decoration:none; font-weight:400; letter-spacing:.2px;
  color:#fff; transition: color .15s ease, background .15s ease, border-color .15s ease;
  border-bottom:2px solid transparent;
}
.nav-menu a:hover,
.nav-menu a:focus{
  color:#C4A43E; background:rgba(255,255,255,0.06);
  border-bottom-color:#C4A43E;
}
.nav-menu a.active{ color:#C4A43E; border-bottom-color:#C4A43E; }

.nav-toggle{
  display:none; border:1px solid #333; color:#fff; background:#000;
  border-radius:10px; padding:8px 12px; cursor:pointer; font-size:16px;
}
.nav-toggle:hover{ color:#C4A43E; border-color:#555; }

@media (max-width: 760px){
  .brand img{ height:44px; }
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute; right:16px; top:68px; background:#000; border:1px solid #222; border-radius:12px;
    padding:8px; display:none; flex-direction:column; min-width:220px; box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .nav-menu.open{ display:flex; }
  .nav-menu a{ color:#fff; }
  .nav-menu a:hover{ color:#C4A43E; background:rgba(255,255,255,0.06); }
}