:root{
  --yellow:#f1c40f;
  --yellow-dark:#d8ab00;
  --white:#ffffff;
  --offwhite:#f7f4ea;
  --light:#fffbea;
  --text:#4a4a4a;
  --text-soft:#6a6a6a;
  --border:#eadfbd;
  --shadow:0 12px 30px rgba(0,0,0,0.08);
  --radius:22px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'DM Sans', sans-serif;
  color:var(--text);
  background:var(--offwhite);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

button{
  font:inherit;
}

.container{
  width:min(1200px, 92%);
  margin:0 auto;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  background:var(--yellow);
  color:#fff;
  padding:12px 0;
  font-size:14px;
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.divider{
  opacity:.7;
}

/* =========================
   NAVBAR
========================= */
.navbar{
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,0.04);
  position:sticky;
  top:0;
  z-index:50;
}

.navbar-inner{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand-title{
  font-family:'Amatic SC', cursive;
  font-size:52px;
  line-height:1;
  color:var(--yellow-dark);
  font-weight:700;
  letter-spacing:1px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
}

.nav-links a{
  font-weight:700;
  color:var(--text);
  position:relative;
}

.nav-links a.active,
.nav-links a:hover{
  color:var(--yellow-dark);
}

/* =========================
   BOTONES
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  border-radius:14px;
  font-weight:800;
  transition:.25s ease;
  border:2px solid transparent;
  cursor:pointer;
}

.btn-primary{
  background:var(--yellow);
  color:#fff;
  box-shadow:0 10px 24px rgba(241,196,15,.28);
}

.btn-primary:hover{
  transform:translateY(-2px);
  background:var(--yellow-dark);
}

.btn-light{
  background:#fff;
  color:var(--yellow-dark);
  border:2px solid rgba(216,171,0,.25);
}

.btn-outline{
  background:transparent;
  color:var(--yellow-dark);
  border:2px solid rgba(216,171,0,.4);
}

.btn-outline:hover,
.btn-light:hover{
  transform:translateY(-2px);
}

/* =========================
   HERO ANTIGUO / PAGE HERO
========================= */
.hero,
.page-hero{
  position:relative;
  overflow:hidden;
}

.hero{
  min-height:calc(100vh - 140px);
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg, rgba(74,74,74,.68) 0%, rgba(74,74,74,.40) 45%, rgba(74,74,74,.18) 100%),
    url('../img/hero.jpg') center/cover no-repeat;
}

.hero-overlay,
.page-hero-overlay{
  position:absolute;
  inset:0;
}

.hero-content,
.page-hero-content{
  position:relative;
  z-index:2;
}

.hero-content{
  max-width:720px;
  padding:90px 0;
  color:#fff;
}

.eyebrow{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-weight:700;
  margin-bottom:18px;
}

.hero h1,
.page-hero h1{
  font-size:clamp(42px, 6vw, 78px);
  line-height:0.95;
  margin-bottom:18px;
  font-weight:800;
}

.hero p,
.page-hero p{
  font-size:18px;
  max-width:620px;
  color:rgba(255,255,255,.92);
}

.hero-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px;
}

.page-hero{
  min-height:420px;
  display:flex;
  align-items:center;
}

.page-hero-stories{
  background:
    linear-gradient(90deg, rgba(74,74,74,.72) 0%, rgba(74,74,74,.38) 55%, rgba(74,74,74,.18) 100%),
    url('../img/story-michael.jpg') center/cover no-repeat;
}

.page-hero-help{
  background:
    linear-gradient(90deg, rgba(74,74,74,.72) 0%, rgba(74,74,74,.38) 55%, rgba(74,74,74,.18) 100%),
    url('../img/story-renata.jpg') center/cover no-repeat;
}

.page-hero-content{
  padding:90px 0;
  color:#fff;
  max-width:760px;
}

/* =========================
   HERO VIDEO
========================= */
.hero-video{
  position:relative;
  height:calc(100vh - 88px);
  min-height:720px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-video video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hero-video .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.52) 45%,
    rgba(0,0,0,0.68) 100%
  );
}

.hero-video .hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:900px;
  height:100%;
  padding:60px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
}

.hero-video .eyebrow{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-weight:700;
  margin-bottom:18px;
}

.hero-video .hero-content h1{
  font-size:clamp(48px, 6vw, 82px);
  line-height:.95;
  margin-bottom:18px;
  font-weight:800;
}

.hero-video .hero-content p{
  font-size:18px;
  line-height:1.65;
  max-width:720px;
  color:rgba(255,255,255,.92);
  margin:0 auto 28px;
}

.hero-video .hero-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:10px;
}

/* =========================
   SECTIONS
========================= */
.section{
  padding:90px 0;
}

.section-light{
  background:var(--light);
}

.section-white{
  background:#fff;
}

.section-tag{
  display:inline-block;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--yellow-dark);
  margin-bottom:14px;
}

.section h2{
  font-size:clamp(30px, 4vw, 52px);
  line-height:1.05;
  margin-bottom:18px;
  color:#454545;
}

.section-heading{
  margin-bottom:42px;
}

.section-heading.center{
  text-align:center;
  max-width:760px;
  margin:0 auto 42px;
}

.section-heading p{
  color:var(--text-soft);
  font-size:18px;
}

/* =========================
   ABOUT
========================= */
.about-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:start;
}

.highlight-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.highlight-card h3{
  margin-bottom:14px;
  font-size:24px;
}

.highlight-card ul{
  list-style:none;
}

.highlight-card li{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.highlight-card li:last-child{
  border-bottom:none;
}

/* =========================
   CARDS
========================= */
.cards-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.info-card{
  background:var(--light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
}

.info-card h3{
  font-size:24px;
  margin-bottom:12px;
  color:#4a4a4a;
}

.info-card p{
  color:var(--text-soft);
}

.help-card{
  min-height:250px;
}

/* =========================
   STORIES PREVIEW
========================= */
.stories-preview{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.story-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.story-image{
  height:240px;
  background-size:cover;
  background-position:center;
}

.story-body{
  padding:24px;
}

.story-body h3{
  margin-bottom:10px;
  font-size:24px;
}

.story-body p{
  color:var(--text-soft);
}

.text-link{
  display:inline-block;
  margin-top:14px;
  color:var(--yellow-dark);
  font-weight:800;
}

/* =========================
   FEATURE STORIES
========================= */
.story-list{
  display:grid;
  gap:28px;
}

.story-feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  align-items:center;
  background:var(--light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.story-feature.reverse .story-feature-image{
  order:2;
}

.story-feature.reverse .story-feature-content{
  order:1;
}

.story-feature-image{
  min-height:360px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
}

.story-feature-content h3{
  font-size:34px;
  margin-bottom:12px;
}

.story-feature-content p{
  color:var(--text-soft);
  margin-bottom:18px;
}

/* =========================
   SUPPORT
========================= */
.support-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:34px;
  background:var(--light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.support-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   CTA
========================= */
.cta-section{
  background:
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,251,234,.92)),
    url('../img/cta-bg.jpg') center/cover no-repeat;
}

.cta-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:36px;
  border-radius:28px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(234,223,189,.9);
  box-shadow:var(--shadow);
}

/* =========================
   DIRECTORIO
========================= */
.directorio-section{
  padding:90px 0;
  background:var(--offwhite);
}

.directorio-wrapper{
  position:relative;
}

.directorio-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:10px 56px;
  scrollbar-width:none;
}

.directorio-slider::-webkit-scrollbar{
  display:none;
}

.directorio-card{
  min-width:280px;
  max-width:280px;
  flex-shrink:0;
  background:#fff;
  border-radius:20px;
  padding:20px;
  scroll-snap-align:start;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  text-align:center;
  transition:.3s ease;
}

.directorio-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.directorio-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:15px;
  margin-bottom:15px;
}

.directorio-card h3{
  font-size:20px;
  margin-bottom:5px;
}

.directorio-card span{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--yellow);
  margin-bottom:10px;
}

.directorio-card p{
  font-size:14px;
  color:#666;
}

.dir-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:var(--yellow);
  color:#fff;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  z-index:5;
  transition:.25s ease;
}

.dir-btn:hover{
  transform:translateY(-50%) scale(1.08);
  background:var(--yellow-dark);
}

.dir-prev{
  left:0;
}

.dir-next{
  right:0;
}

/* =========================
   FOOTER
========================= */
.footer{
  background:#5a5a5a;
  color:#fff;
  padding:56px 0;
}

.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:30px;
}

.footer h3,
.footer h4{
  margin-bottom:14px;
}

.footer p,
.footer li,
.footer a{
  color:rgba(255,255,255,.86);
}

.footer ul{
  list-style:none;
}

/* =========================
   IMAGE HELPERS
========================= */
.story-image-1{
  background-image:url('../img/story-michael.jpg');
}

.story-image-2{
  background-image:url('../img/story-renata.jpg');
}

.story-image-3{
  background-image:url('../img/story-david.jpg');
}

/* =========================
   VIDEO MODAL
========================= */
.video-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.3s ease;
}

.video-modal.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.video-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.82);
}

.video-box{
  position:relative;
  z-index:2;
  width:min(900px, 100%);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  background:#000;
}

.video-box video{
  width:100%;
  display:block;
  background:#000;
}

.video-close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:var(--yellow);
  color:#fff;
  font-size:28px;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}

body.modal-open{
  overflow:hidden;
}

/* =========================
   RESPONSIVE GENERAL
========================= */
@media (max-width: 991px){
  .navbar-inner,
  .support-box,
  .cta-box,
  .about-grid,
  .story-feature,
  .footer-inner{
    grid-template-columns:1fr;
    display:grid;
  }

  .cards-3,
  .stories-preview{
    grid-template-columns:1fr;
  }

  .nav-links{
    display:none;
  }

  .brand-title{
    font-size:42px;
  }

  .story-feature.reverse .story-feature-image,
  .story-feature.reverse .story-feature-content{
    order:unset;
  }

  .hero-video{
    height:calc(92vh - 88px);
    min-height:680px;
  }

  .hero-video video{
    object-position:center center;
  }

  .hero-video .hero-content{
    padding:70px 20px 50px;
  }

  .hero-video .hero-content h1{
    font-size:clamp(40px, 7vw, 58px);
  }

  .hero-video .hero-content p{
    font-size:17px;
    max-width:88%;
  }
}

@media (max-width: 768px){
  .hero-video{
    height:calc(86vh - 88px);
    min-height:620px;
  }

  .hero-video video{
    object-position:60% center;
  }

  .hero-video .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.65) 50%,
      rgba(0,0,0,0.75) 100%
    );
  }

  .hero-video .hero-content{
    padding:90px 20px 40px;
  }

  .hero-video .eyebrow{
    font-size:13px;
    padding:7px 12px;
    margin-bottom:14px;
  }

  .hero-video .hero-content h1{
    font-size:clamp(32px, 9vw, 44px);
    line-height:1;
    margin-bottom:14px;
  }

  .hero-video .hero-content p{
    font-size:15px;
    max-width:95%;
    margin:0 auto 20px;
  }

  .hero-video .hero-buttons{
    flex-direction:column;
    width:100%;
    align-items:center;
  }

  .hero-video .hero-buttons .btn{
    width:100%;
    max-width:320px;
    margin:0 auto;
  }

  .dir-btn{
    display:none;
  }
}

@media (max-width: 640px){
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .navbar-inner{
    min-height:auto;
    padding:18px 0;
  }

  .brand-title{
    font-size:34px;
  }

  .hero,
  .page-hero{
    min-height:auto;
  }

  .hero-content,
  .page-hero-content{
    padding:70px 0;
  }

  .hero p,
  .page-hero p,
  .section-heading p{
    font-size:16px;
  }

  .btn{
    width:100%;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .directorio-slider{
    padding:10px 0;
  }
}

@media (max-width: 480px){
  .hero-video{
    height:calc(80vh - 88px);
    min-height:560px;
  }

  .hero-video video{
    object-position:65% center;
  }

  .hero-video .hero-content{
    padding:80px 18px 34px;
  }

  .hero-video .hero-content h1{
    font-size:clamp(30px, 10vw, 40px);
  }

  .hero-video .hero-content p{
    font-size:14px;
  }

  .hero-video .hero-buttons .btn{
    max-width:100%;
  }

  .video-modal{
    padding:14px;
  }

  .video-close{
    width:38px;
    height:38px;
    font-size:24px;
  }
}



/* =========================
   TRANSPARENCIA
========================= */

.transparencia-hero{
  background:
    linear-gradient(90deg, rgba(74,74,74,.72) 0%, rgba(74,74,74,.38) 55%, rgba(74,74,74,.18) 100%),
    url('../img/transparencia-hero.jpg') center/cover no-repeat;
}

.transparencia-card{
  min-height: 220px;
}

.transparencia-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

.stat-box{
  background:var(--light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.stat-label{
  display:block;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--yellow-dark);
  margin-bottom:10px;
}

.stat-box h3{
  font-size:34px;
  line-height:1.05;
  color:#454545;
  margin-bottom:10px;
}

.stat-box p{
  color:var(--text-soft);
}

.uso-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}

.uso-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
}

.uso-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}

.uso-top h3{
  font-size:22px;
  color:#454545;
}

.uso-top span{
  font-weight:800;
  color:var(--yellow-dark);
}

.bar{
  width:100%;
  height:12px;
  border-radius:999px;
  background:#f2ead1;
  overflow:hidden;
  margin-bottom:14px;
}

.bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-dark));
  border-radius:999px;
}

.uso-card p{
  color:var(--text-soft);
}

.rendicion-list{
  display:grid;
  gap:22px;
}

.rendicion-item{
  background:var(--light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1.2fr .9fr auto;
  gap:20px;
  align-items:center;
}

.rendicion-info h3{
  font-size:28px;
  margin-bottom:8px;
  color:#454545;
}

.rendicion-info p{
  color:var(--text-soft);
}

.rendicion-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rendicion-meta span{
  font-weight:700;
  color:#5a5a5a;
}

.rendicion-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.docs-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.doc-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.doc-card h3{
  font-size:24px;
  margin-bottom:10px;
  color:#454545;
}

.doc-card p{
  color:var(--text-soft);
  margin-bottom:12px;
}

@media (max-width: 991px){
  .transparencia-stats{
    grid-template-columns:repeat(2, 1fr);
  }

  .uso-grid{
    grid-template-columns:1fr;
  }

  .rendicion-item{
    grid-template-columns:1fr;
  }

  .rendicion-actions{
    justify-content:flex-start;
  }

  .docs-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .transparencia-stats{
    grid-template-columns:1fr;
  }

  .stat-box h3{
    font-size:28px;
  }

  .uso-top{
    flex-direction:column;
    align-items:flex-start;
  }
}