/* ========================================
   PREVENIR CONSUMO - ESTILOS PRINCIPALES
   OPTIMIZADO PARA TODOS LOS DISPOSITIVOS
   ======================================== */

/* ===== VARIABLES ===== */
:root{
  --paper:#F5F7FA;
  --paper-warm:#E8EDF2;
  --ink:#1A2332;
  --ink-soft:#3D4A5C;
  --blue-deep:#0A2B5C;
  --blue-dark:#1A3D7A;
  --blue-mid:#2A5FA8;
  --blue-light:#4A8FD4;
  --blue-pale:#D6E6F5;
  --gold:#C68A2E;
  --gold-soft:#E4BE7F;
  --line:rgba(26,35,50,0.10);
  --line-light:rgba(26,35,50,0.06);
  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 8px 24px rgba(10,43,92,0.10);
  --shadow-hover: 0 16px 40px rgba(10,43,92,0.16);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-serif:'Fraunces', serif;
  --font-sans:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

/* ===== RESET Y BASE ===== */
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:clamp(17px, 1.6vw, 18.5px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{
  font-family:var(--font-serif);
  color:var(--blue-deep);
  margin:0;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{
  max-width:100%;
  height:auto;
  display:block;
  image-rendering:auto;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ===== UTILITIES ===== */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}
.bg-pale{background:var(--blue-pale); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.mono{font-family:var(--font-mono); letter-spacing:0.02em;}

/* ===== ANIMACIONES ===== */
.fade-section{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-section.visible{
  opacity:1;
  transform:translateY(0);
}
.datos-grid .dato-card,
.drogas-grid .droga-card{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-section.visible .datos-grid .dato-card,
.fade-section.visible .drogas-grid .droga-card{
  opacity:1;
  transform:translateY(0);
}
.datos-grid .dato-card:nth-child(1){transition-delay:0.05s;}
.datos-grid .dato-card:nth-child(2){transition-delay:0.15s;}
.datos-grid .dato-card:nth-child(3){transition-delay:0.25s;}
.drogas-grid .droga-card:nth-child(1){transition-delay:0.03s;}
.drogas-grid .droga-card:nth-child(2){transition-delay:0.09s;}
.drogas-grid .droga-card:nth-child(3){transition-delay:0.15s;}
.drogas-grid .droga-card:nth-child(4){transition-delay:0.21s;}
.drogas-grid .droga-card:nth-child(5){transition-delay:0.27s;}
.drogas-grid .droga-card:nth-child(6){transition-delay:0.33s;}
.drogas-grid .droga-card:nth-child(7){transition-delay:0.39s;}

/* ===== WOVEN DIVIDER ===== */
.weave{
  height:14px;
  width:100%;
  background-image: repeating-linear-gradient(115deg, var(--blue-deep) 0 6px, transparent 6px 12px),
                     repeating-linear-gradient(65deg, var(--gold) 0 6px, transparent 6px 12px);
  background-size: 24px 14px, 24px 14px;
  background-position: 0 0, 0 0;
  opacity:0.85;
}

/* ============================================================
   INTRO — PANTALLA COMPLETA CON PARALLAX
   ============================================================ */
.intro{
  position:relative;
  width:100%;
  height:100vh;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--blue-deep);
}
.intro-bg{
  position:absolute;
  top:-12%;
  left:-12%;
  width:124%;
  height:124%;
  background-image: url('../img/fondo-prevencion.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform;
  transform:scale(1.06);
  z-index:0;
  filter:brightness(0.55) saturate(0.85);
}
.intro-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(10,43,92,0.45) 0%, rgba(10,43,92,0.12) 100%);
  z-index:1;
}
.intro-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:20px;
  max-width:800px;
  color:#fff;
  width:100%;
}
.intro-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:clamp(0.7rem, 1.2vw, 0.8rem);
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--gold-soft);
  border:1px solid rgba(255,255,255,0.15);
  padding:6px 20px;
  border-radius:30px;
  margin-bottom:24px;
  background:rgba(0,0,0,0.2);
}
.intro-title{
  font-family:var(--font-serif);
  font-size:clamp(2.5rem, 8vw, 5.5rem);
  font-weight:700;
  color:#fff;
  line-height:1.05;
  margin-bottom:16px;
  text-shadow:0 4px 40px rgba(0,0,0,0.3);
  letter-spacing:-0.02em;
}
.intro-desc{
  font-size:clamp(0.95rem, 1.2vw, 1.2rem);
  color:rgba(255,255,255,0.85);
  max-width:560px;
  margin:0 auto 32px;
  line-height:1.7;
  font-weight:400;
  text-shadow:0 2px 20px rgba(0,0,0,0.2);
}
.btn-intro{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:clamp(12px, 1.5vw, 14px) clamp(28px, 3vw, 36px);
  background:var(--gold);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(0.9rem, 1vw, 1rem);
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  box-shadow:0 4px 24px rgba(198,138,46,0.3);
}
.btn-intro:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 40px rgba(198,138,46,0.4);
  background:var(--gold-soft);
}
.btn-arrow{
  display:inline-block;
  transition:transform 0.3s ease;
  font-size:1.2rem;
}
.btn-intro:hover .btn-arrow{
  transform:translateY(4px);
}
.intro-scroll{
  display:block;
  margin-top:32px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.4;}
  50%{opacity:0.9;}
}

/* ============================================================
   HEADER — STICKY
   ============================================================ */
header.top{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
  transition:box-shadow 0.3s ease;
}
header.top.scrolled{
  box-shadow:0 2px 20px rgba(0,0,0,0.06);
}
.scroll-progress{
  position:absolute;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--gold) 0%, var(--blue-mid) 100%);
  z-index:60;
  transition:width 0.1s linear;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:10px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.seal{
  width:clamp(32px, 4vw, 40px);
  height:clamp(32px, 4vw, 40px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex:none;
  overflow:hidden;
  background:white;
  border:2px solid var(--blue-deep);
}
.seal img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand-name{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(0.85rem, 1.2vw, 1rem);
  color:var(--ink);
  line-height:1.1;
}
.brand-sub{
  font-size:clamp(0.55rem, 0.7vw, 0.65rem);
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.08em;
  display:block;
}
nav.primary{
  display:flex;
  gap:clamp(12px, 2vw, 24px);
  align-items:center;
  flex-wrap:wrap;
}
nav.primary a{
  font-size:clamp(0.85rem, 0.95vw, 0.95rem);
  font-weight:500;
  color:var(--ink-soft);
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:var(--transition);
  white-space:nowrap;
}
nav.primary a:hover, nav.primary a:focus{
  color:var(--blue-deep);
  border-bottom-color:var(--gold);
}
nav.primary a.active{
  color:var(--blue-deep);
  border-bottom-color:var(--blue-mid);
  font-weight:600;
}
.nav-cta{
  background:var(--blue-deep);
  color:var(--paper) !important;
  padding:8px 18px !important;
  border-radius:30px;
  border-bottom:none !important;
}
.nav-cta:hover{background:var(--gold); color:var(--ink) !important;}

/* ===== NAV DROPDOWN "RECURSOS" ===== */
.nav-dropdown{position:relative;}
.nav-dropdown-btn{
  background:none;
  border:none;
  font-family:var(--font-sans);
  font-size:clamp(0.85rem, 0.95vw, 0.95rem);
  font-weight:500;
  color:var(--ink-soft);
  padding:4px 0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  transition:var(--transition);
}
.nav-dropdown-btn:hover{color:var(--blue-deep);}
.nav-caret{font-size:0.7em; transition:transform 0.25s ease;}
.nav-dropdown.open .nav-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-hover);
  padding:8px;
  min-width:190px;
  flex-direction:column;
  gap:2px;
  z-index:55;
  opacity:0;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.nav-dropdown.open .nav-dropdown-menu{
  display:flex;
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  padding:9px 12px !important;
  border-radius:10px;
  border-bottom:none !important;
  white-space:nowrap;
}
.nav-dropdown-menu a:hover{background:var(--blue-pale);}
.nav-toggle{display:none;}
@media (max-width: 820px){
  nav.primary{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:8px 28px 18px;
    max-height:80vh;
    overflow-y:auto;
  }
  nav.primary.open{display:flex;}
  nav.primary a{padding:14px 0; font-size:1.05rem; border-bottom:1px solid var(--line); white-space:normal;}
  .nav-cta{
    border-radius:var(--radius) !important;
    text-align:center;
    margin-top:8px;
    border-bottom:none !important;
  }
  .nav-dropdown{width:100%; border-bottom:1px solid var(--line);}
  .nav-dropdown-btn{
    width:100%;
    padding:14px 0;
    justify-content:space-between;
    font-size:1.05rem;
  }
  .nav-dropdown-menu{
    position:static;
    display:none;
    transform:none;
    box-shadow:none;
    border:none;
    background:var(--paper-warm);
    border-radius:10px;
    padding:4px 8px;
    margin-bottom:8px;
    opacity:1;
    min-width:0;
  }
  .nav-dropdown.open .nav-dropdown-menu{display:flex; transform:none;}
  .nav-dropdown-menu a{border-bottom:1px solid var(--line-light) !important;}
  .nav-dropdown-menu a:last-child{border-bottom:none !important;}
  .nav-toggle{
    display:block;
    background:none;
    border:1px solid var(--ink);
    border-radius:var(--radius);
    padding:6px 14px;
    font-family:var(--font-mono);
    font-size:clamp(0.7rem, 1.5vw, 0.8rem);
    cursor:pointer;
    transition:var(--transition);
  }
  .nav-toggle:hover{background:var(--ink); color:var(--paper);}
}

/* ===== BREADCRUMB ===== */
.breadcrumb{
  font-size:clamp(0.7rem, 0.8vw, 0.78rem);
  color:var(--ink-soft);
  padding:10px 0 4px;
  font-family:var(--font-mono);
}
.breadcrumb a{color:var(--blue-deep);}
.breadcrumb a:hover{text-decoration:underline;}

/* ===== SECTION SHELL ===== */
section{padding:clamp(40px, 6vw, 60px) 0;}
.section-head{
  margin-bottom:clamp(24px, 3vw, 32px);
}
.section-head h2{
  font-size:clamp(1.5rem, 3vw, 2.3rem);
  font-weight:600;
  margin-bottom:8px;
  color:var(--blue-deep);
}
.section-head .section-desc{
  color:var(--ink-soft);
  max-width:60ch;
  font-size:clamp(1rem, 1.1vw, 1.1rem);
}
.section-num{
  font-family:var(--font-mono);
  color:var(--blue-mid);
  font-size:clamp(0.7rem, 0.8vw, 0.78rem);
  text-transform:uppercase;
  letter-spacing:0.06em;
  display:block;
  margin-bottom:6px;
}

/* ===== RESUMEN ===== */
.resumen-box{
  background:var(--blue-pale);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px, 4vw, 44px);
  margin-top:10px;
}
.resumen-box p{
  font-size:clamp(1.05rem, 1.2vw, 1.2rem);
  line-height:1.75;
  color:var(--ink);
  margin:0;
}
.resumen-box p strong{color:var(--blue-deep);}

/* ===== DATOS CLAVE ===== */
.datos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px, 2vw, 24px);
}
@media (max-width:700px){ .datos-grid{grid-template-columns:1fr;} }
.dato-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(18px, 2.5vw, 28px);
  text-align:center;
  transition:var(--transition);
}
.dato-card:hover{box-shadow:var(--shadow-hover); transform:translateY(-6px) scale(1.03);}
.dato-card .numero{
  font-family:var(--font-serif);
  font-size:clamp(2.2rem, 3.4vw, 2.8rem);
  font-weight:700;
  color:var(--blue-deep);
  display:block;
}
.dato-card .label{
  font-size:clamp(0.8rem, 0.9vw, 0.9rem);
  color:var(--ink-soft);
  margin-top:4px;
}

/* ============================================================
   PREVENCIÓN DE ADICCIONES - CON CÍRCULOS
   ============================================================ */
.hoja-informativa{
  background:var(--blue-deep);
  color:var(--paper);
  padding:clamp(40px, 6vw, 60px) 0;
  position:relative;
  overflow:hidden;
}
.hoja-informativa .circle{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:0.2;
  z-index:0;
}
.hoja-informativa .circle-1{width:320px;height:320px;background:#FF6B6B;top:-80px;right:-80px;opacity:0.15;}
.hoja-informativa .circle-2{width:200px;height:200px;background:#4ECDC4;bottom:-60px;left:-60px;opacity:0.2;}
.hoja-informativa .circle-3{width:180px;height:180px;background:#FFE66D;top:15%;left:5%;opacity:0.18;}
.hoja-informativa .circle-4{width:150px;height:150px;background:#A8E6CF;bottom:20%;right:10%;opacity:0.16;}
.hoja-informativa .circle-5{width:250px;height:250px;background:#FF8A5C;top:40%;left:20%;opacity:0.12;}
.hoja-informativa .circle-6{width:120px;height:120px;background:#74B9FF;top:70%;right:25%;opacity:0.2;}
.hoja-informativa .circle-7{width:100px;height:100px;background:#FD79A8;top:20%;right:40%;opacity:0.16;}
.hoja-informativa .circle-8{width:280px;height:280px;background:#55EFC4;bottom:5%;left:30%;opacity:0.1;}
.hoja-informativa .circle-9{width:160px;height:160px;background:#FDCB6E;top:50%;right:5%;opacity:0.14;}
.hoja-informativa .circle-10{width:90px;height:90px;background:#E17055;top:80%;left:10%;opacity:0.2;}
.hoja-informativa .circle-11{width:220px;height:220px;background:#00CEC9;top:10%;left:40%;opacity:0.1;}
.hoja-informativa .circle-12{width:130px;height:130px;background:#6C5CE7;bottom:30%;left:55%;opacity:0.14;}
.hoja-informativa h2{color:var(--paper); position:relative; z-index:1;}
.hoja-informativa .section-desc{color:rgba(246,241,227,0.75); position:relative; z-index:1;}
.hoja-informativa .section-num{color:var(--gold-soft); position:relative; z-index:1;}

.cartilla-images{
  display:flex;
  flex-direction:column;
  gap:clamp(16px, 2.4vw, 24px);
  margin-top:24px;
  position:relative;
  z-index:1;
}
.cartilla-img{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  border:1px solid rgba(246,241,227,0.15);
  transition:var(--transition);
}
.cartilla-img:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 16px 44px rgba(0,0,0,0.32);
}
.cartilla-img img{
  width:100%;
  height:auto;
  aspect-ratio:3300/2550;
  object-fit:cover;
  display:block;
}
.hoja-footer{
  margin-top:24px;
  padding:clamp(14px, 1.8vw, 20px);
  background:rgba(246,241,227,0.06);
  border-radius:var(--radius);
  border:1px solid rgba(246,241,227,0.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  position:relative;
  z-index:1;
}
.hoja-footer .autor{
  font-family:var(--font-mono);
  font-size:clamp(0.7rem, 0.8vw, 0.78rem);
  color:rgba(246,241,227,0.7);
}
.hoja-footer .autor strong{color:var(--gold-soft);}
.hoja-footer .btn-descargar{
  background:var(--gold);
  color:var(--ink);
  padding:clamp(6px, 0.8vw, 8px) clamp(14px, 2vw, 20px);
  border-radius:var(--radius);
  font-weight:600;
  font-size:clamp(0.78rem, 0.85vw, 0.85rem);
  transition:var(--transition);
  white-space:nowrap;
}
.hoja-footer .btn-descargar:hover{
  background:var(--gold-soft);
  transform:translateY(-2px);
}

/* ============================================================
   DROGAS - TARJETAS CON IMAGEN
   ============================================================ */
.drogas-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:10px;
}
@media (max-width:700px){ .drogas-grid{grid-template-columns:1fr;} }
.droga-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.droga-card:hover{
  box-shadow:var(--shadow-hover);
  border-color:var(--blue-mid);
  transform:translateY(-4px) scale(1.015);
}
.droga-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px);
  background:var(--blue-pale);
  transition:var(--transition);
  user-select:none;
}
.droga-card:hover .droga-header{background:var(--blue-deep);}
.droga-card:hover .droga-nombre{color:var(--paper);}
.droga-nombre{
  font-weight:600;
  color:var(--blue-deep);
  font-size:clamp(1.05rem, 1.2vw, 1.2rem);
  transition:var(--transition);
}
.droga-toggle{
  font-size:1.2rem;
  font-weight:300;
  color:var(--blue-mid);
  transition:var(--transition);
}
.droga-card:hover .droga-toggle{color:var(--gold-soft);}
.droga-info{display:none; padding:0; background:var(--paper); animation:slideDown 0.3s ease forwards;}
.droga-info .droga-imagen{width:100%; height:clamp(140px, 20vw, 180px); overflow:hidden;}
.droga-info .droga-imagen img{width:100%; height:100%; object-fit:cover; display:block;}
.droga-info .droga-texto{padding:clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px); border-top:1px solid var(--line-light);}
.droga-info p{margin:10px 0 0 0; font-size:clamp(0.95rem, 1.05vw, 1.05rem); color:var(--ink-soft); line-height:1.65;}
.droga-info p:first-child{margin-top:0;}
.droga-info p:last-child{margin-bottom:0;}
.droga-info strong{color:var(--blue-deep);}
@keyframes slideDown{
  from{opacity:0; transform:translateY(-8px);}
  to{opacity:1; transform:translateY(0);}
}
.droga-card.open .droga-info{display:block;}
.droga-card.open .droga-toggle{transform:rotate(45deg);}
.droga-card.open .droga-header{background:var(--blue-deep);}
.droga-card.open .droga-nombre{color:var(--paper);}
.droga-card.open .droga-toggle{color:var(--gold-soft);}

/* ============================================================
   GALERÍA CON EFECTO SCROLLING
   ============================================================ */
.galeria-scroll{
  overflow:hidden;
  position:relative;
  width:100%;
  padding:clamp(12px, 2vw, 20px) 0;
}
.galeria-track{
  display:flex;
  gap:clamp(12px, 2vw, 20px);
  width:max-content;
  animation:scrollGaleria 25s linear infinite;
  animation-fill-mode:none;
}
.galeria-track:hover{animation-play-state:paused;}
.galeria-item{
  flex:0 0 clamp(180px, 28vw, 280px);
  height:clamp(150px, 22vw, 220px);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.galeria-item:hover{
  transform:scale(1.04);
  box-shadow:var(--shadow-hover);
}
.galeria-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@keyframes scrollGaleria{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (max-width:600px){
  .galeria-track{
    animation-duration:55s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    gap:12px;
  }
  .galeria-item{
    flex:0 0 72vw;
    height:48vw;
  }
}

/* ============================================================
   POSTER
   ============================================================ */
.poster-container{
  max-width:min(800px, 100%);
  margin:0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.poster-container:hover{
  box-shadow:var(--shadow-hover);
  transform:scale(1.01);
}
.poster-container img{width:100%; height:auto; display:block;}

/* ============================================================
   CONSTANCIAS - ACORDEÓN
   ============================================================ */
.constancias-grid{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.accordion-year{
  background:var(--blue-deep);
  color:var(--paper);
  padding:clamp(12px, 1.6vw, 16px) clamp(16px, 2.4vw, 24px);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:var(--transition);
  border-bottom:1px solid rgba(246,241,227,0.15);
  user-select:none;
  font-family:var(--font-serif);
  font-size:clamp(1rem, 1.2vw, 1.15rem);
  font-weight:600;
}
.accordion-year:hover{background:var(--blue-mid);}
.accordion-year .year-badge{
  background:var(--gold);
  color:var(--ink);
  padding:2px 14px;
  border-radius:20px;
  font-family:var(--font-mono);
  font-size:clamp(0.65rem, 0.75vw, 0.75rem);
  font-weight:500;
}
.accordion-year .arrow{
  transition:transform 0.3s ease;
  font-size:1.2rem;
}
.accordion-year.active .arrow{transform:rotate(180deg);}
.accordion-content{display:none; background:var(--paper);}
.accordion-content.open{display:block;}

.constancia-item{
  display:grid;
  grid-template-columns:clamp(100px, 13vw, 130px) 1.2fr 1.8fr clamp(100px, 12vw, 140px);
  gap:clamp(8px, 1.6vw, 16px);
  padding:clamp(10px, 1.4vw, 14px) clamp(14px, 2vw, 24px);
  border-bottom:1px solid var(--line);
  align-items:center;
  background:var(--paper);
  transition:var(--transition);
}
.constancia-item:last-child{border-bottom:none;}
.constancia-item:nth-child(even){background:var(--blue-pale);}
.constancia-item:hover{background:var(--gold-soft); opacity:0.8;}
.constancia-fecha{
  font-family:var(--font-mono);
  font-size:clamp(0.65rem, 0.75vw, 0.75rem);
  color:var(--rust);
}
.constancia-municipio{
  font-weight:600;
  color:var(--blue-deep);
  font-size:clamp(0.82rem, 0.9vw, 0.92rem);
}
.constancia-institucion{
  color:var(--ink-soft);
  font-size:clamp(0.78rem, 0.85vw, 0.92rem);
}
.constancia-enlace a{
  font-family:var(--font-mono);
  font-size:clamp(0.65rem, 0.75vw, 0.78rem);
  color:var(--blue-deep);
  border-bottom:1px solid transparent;
  transition:var(--transition);
}
.constancia-enlace a:hover{border-bottom-color:var(--blue-deep);}
.constancias-nota{
  margin-top:24px;
  padding:clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px);
  background:var(--paper-warm);
  border-radius:var(--radius);
  font-size:clamp(0.8rem, 0.9vw, 0.9rem);
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.constancias-total{
  font-family:var(--font-mono);
  font-size:clamp(0.7rem, 0.8vw, 0.78rem);
  color:var(--gold);
}

@media (max-width:700px){
  .constancia-item{
    grid-template-columns:1fr;
    gap:4px;
    padding:14px 18px;
  }
  .constancia-item .constancia-enlace{margin-top:6px;}
  .accordion-year{
    font-size:1rem;
    padding:14px 18px;
  }
}

/* ============================================================
   BIBLIOGRAFÍA
   ============================================================ */
.bibliografia-grid{
  display:flex;
  flex-direction:column;
  gap:clamp(16px, 2.4vw, 24px);
  margin-top:10px;
}
.referencia-item{
  display:grid;
  grid-template-columns:clamp(36px, 4vw, 48px) 1fr;
  gap:clamp(12px, 2vw, 20px);
  background:var(--blue-pale);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(16px, 2.4vw, 24px) clamp(18px, 2.8vw, 28px);
  transition:var(--transition);
  align-items:start;
}
.referencia-item:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
  border-color:var(--blue-mid);
}
.ref-icono{font-size:clamp(1.5rem, 2vw, 1.8rem); line-height:1; text-align:center; opacity:0.7; margin-top:4px;}
.ref-contenido{display:flex; flex-direction:column; gap:6px;}
.ref-contenido h3{font-size:clamp(0.95rem, 1.05vw, 1.05rem); font-weight:600; color:var(--blue-deep); margin:0; line-height:1.3;}
.ref-autor{font-size:clamp(0.78rem, 0.85vw, 0.85rem); color:var(--blue-mid); font-weight:500; margin:0;}
.ref-resumen{font-size:clamp(0.82rem, 0.9vw, 0.92rem); color:var(--ink-soft); margin:4px 0 0 0; line-height:1.5;}
.ref-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(10px, 1.6vw, 16px);
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid var(--line-light);
}
.ref-fecha, .ref-paginas{
  font-family:var(--font-mono);
  font-size:clamp(0.65rem, 0.7vw, 0.72rem);
  color:var(--ink-soft);
}
.btn-descargar-ref{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--blue-deep);
  color:var(--paper);
  padding:clamp(4px, 0.6vw, 6px) clamp(12px, 1.6vw, 16px);
  border-radius:20px;
  font-size:clamp(0.7rem, 0.78vw, 0.78rem);
  font-weight:500;
  font-family:var(--font-sans);
  transition:var(--transition);
  border:none;
  cursor:pointer;
  margin-left:auto;
}
.btn-descargar-ref:hover{
  background:var(--blue-mid);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.descarga-icono{font-size:0.9rem; line-height:1;}
.bibliografia-nota{
  margin-top:28px;
  padding:clamp(12px, 1.6vw, 16px) clamp(16px, 2.4vw, 24px);
  background:var(--paper-warm);
  border-radius:var(--radius);
  border-left:3px solid var(--gold);
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:clamp(0.82rem, 0.9vw, 0.9rem);
  color:var(--ink-soft);
}
.bibliografia-nota .nota-icono{font-size:1.2rem; flex-shrink:0; margin-top:1px;}
.bibliografia-nota p{margin:0; line-height:1.5;}
.bibliografia-nota strong{color:var(--blue-deep);}
@media (max-width:700px){
  .referencia-item{grid-template-columns:1fr; gap:8px; padding:20px;}
  .ref-icono{text-align:left; font-size:1.5rem;}
  .ref-meta{flex-direction:column; align-items:flex-start; gap:10px;}
  .btn-descargar-ref{margin-left:0; width:100%; justify-content:center;}
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{background:var(--blue-deep); color:var(--paper);}
.contact h2{color:var(--paper);}
.contact .section-desc{color:rgba(246,241,227,0.75);}
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(30px, 5vw, 50px);
}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-list{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.contact-list li{display:flex; gap:12px; align-items:flex-start; font-size:clamp(0.85rem, 0.92vw, 0.92rem);}
.contact-list svg{width:clamp(16px, 1.8vw, 18px); height:clamp(16px, 1.8vw, 18px); flex:none; margin-top:2px; color:var(--gold-soft);}
.social-links{
  display:flex;
  gap:clamp(8px, 1.2vw, 12px);
  margin-top:14px;
  flex-wrap:wrap;
}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:clamp(4px, 0.6vw, 6px) clamp(10px, 1.4vw, 14px);
  border:1px solid rgba(246,241,227,0.25);
  border-radius:30px;
  color:rgba(246,241,227,0.8);
  transition:var(--transition);
  font-size:clamp(0.72rem, 0.8vw, 0.8rem);
}
.social-link:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.social-link svg{width:clamp(14px, 1.6vw, 18px); height:clamp(14px, 1.6vw, 18px);}

/* ===== FORMULARIO ===== */
form.report-form{
  background:rgba(246,241,227,0.06);
  border:1px solid rgba(246,241,227,0.2);
  border-radius:var(--radius);
  padding:clamp(18px, 2.4vw, 24px);
}
form.report-form label{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(0.6rem, 0.7vw, 0.7rem);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:4px;
  color:var(--gold-soft);
}
form.report-form .field{margin-bottom:clamp(10px, 1.4vw, 14px);}
form.report-form input, form.report-form textarea{
  width:100%;
  padding:clamp(8px, 1vw, 10px) clamp(10px, 1.2vw, 12px);
  border-radius:2px;
  border:1px solid rgba(246,241,227,0.25);
  background:rgba(246,241,227,0.06);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:clamp(0.82rem, 0.9vw, 0.9rem);
  transition:var(--transition);
}
form.report-form input:focus, form.report-form textarea:focus{
  outline:2px solid var(--gold);
  border-color:var(--gold);
}
form.report-form textarea{resize:vertical; min-height:clamp(60px, 7vw, 70px);}
form.report-form ::placeholder{color:rgba(246,241,227,0.4);}
form.report-form .btn-primary{
  background:var(--gold);
  color:var(--ink);
  padding:clamp(8px, 1vw, 10px) clamp(16px, 2vw, 20px);
  border:none;
  border-radius:var(--radius);
  font-weight:600;
  font-size:clamp(0.82rem, 0.9vw, 0.9rem);
  width:100%;
  cursor:pointer;
  transition:var(--transition);
}
form.report-form .btn-primary:hover{background:var(--gold-soft);}
.form-note{
  font-size:clamp(0.65rem, 0.72vw, 0.72rem);
  color:rgba(246,241,227,0.5);
  margin-top:10px;
}
.form-note strong{color:var(--gold-soft);}
.form-success{
  display:none;
  padding:clamp(10px, 1.2vw, 12px);
  background:rgba(37,211,102,0.12);
  border:1px solid rgba(37,211,102,0.25);
  border-radius:var(--radius);
  margin-top:10px;
  color:var(--gold-soft);
  text-align:center;
}
.form-success.show{display:block;}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.whatsapp-float{
  position:fixed;
  bottom:clamp(16px, 2.4vw, 24px);
  right:clamp(16px, 2.4vw, 24px);
  background:#25D366;
  color:white;
  width:clamp(48px, 5.4vw, 54px);
  height:clamp(48px, 5.4vw, 54px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(37,211,102,0.4);
  transition:var(--transition);
  z-index:100;
}
.whatsapp-float:hover{transform:scale(1.08) translateY(-3px);}
.whatsapp-float svg{width:clamp(24px, 2.8vw, 28px); height:clamp(24px, 2.8vw, 28px); fill:white;}
.whatsapp-float .tooltip{
  position:absolute;
  right:calc(100% + 12px);
  background:var(--ink);
  color:var(--paper);
  padding:4px 12px;
  border-radius:20px;
  font-size:clamp(0.65rem, 0.72vw, 0.72rem);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:var(--transition);
}
.whatsapp-float:hover .tooltip{opacity:1;}

/* ===== VOLVER ARRIBA ===== */
.back-to-top{
  position:fixed;
  bottom:clamp(16px, 2.4vw, 24px);
  right:clamp(76px, 8vw, 88px);
  background:var(--blue-deep);
  color:var(--paper);
  width:clamp(44px, 5vw, 48px);
  height:clamp(44px, 5vw, 48px);
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(10,43,92,0.3);
  transition:var(--transition);
  z-index:100;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-to-top:hover{background:var(--gold); color:var(--ink); transform:translateY(-3px) scale(1.06);}
.back-to-top svg{width:20px; height:20px;}
@media (max-width:480px){
  .back-to-top{right:clamp(16px, 2.4vw, 24px); bottom:clamp(76px, 12vw, 88px);}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--blue-dark);
  color:rgba(246,241,227,0.7);
  padding:clamp(20px, 2.8vw, 28px) 0;
  font-size:clamp(0.72rem, 0.8vw, 0.8rem);
}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
footer a{color:rgba(246,241,227,0.8); transition:var(--transition);}
footer a:hover{color:var(--gold-soft); text-decoration:underline;}

/* ============================================================
   MEJORAS PARA TV Y PANTALLAS GRANDES
   ============================================================ */
@media (min-width: 1400px){
  .wrap{max-width:1200px;}
  section{padding:80px 0;}
  .hero h1{font-size:3.6rem;}
}

/* ============================================================
   MEJORAS PARA CONSOLAS (controles táctiles)
   ============================================================ */
@media (hover: none) and (pointer: coarse){
  .galeria-track{animation-duration:45s; animation-iteration-count:infinite;}
  .galeria-item:hover{transform:none;}
  .accordion-year:hover{background:var(--blue-deep);}
}

/* ============================================================
   MEJORAS PARA IMPRESIÓN
   ============================================================ */
@media print{
  .intro{height:auto; min-height:auto; padding:40px 0;}
  .intro-bg{filter:none; position:relative;}
  .intro-overlay{display:none;}
  .whatsapp-float{display:none;}
  .back-to-top{display:none;}
  .scroll-progress{display:none;}
  .weave{display:none;}
  .galeria-scroll{display:none;}
}