:root{
      --color-fondo:#fdfaf2;
      --color-texto:#181D27;
      --color-blanco:#fff;
      --color-acento-principal:#B7245C;  /* magenta */
      --color-acento-secundario:#FF8C42; /* naranja */
      --color-oscuro:#12161e;
      --fuente:'Poppins',sans-serif;
    }
    html,body{scroll-behavior:smooth}
    body{font-family:var(--fuente); background:var(--color-fondo); color:var(--color-texto)}
    .auto-container{max-width:1200px; margin:0 auto; padding:0 20px}
    .section-padding{padding:72px 0}
/* === HERO: asegurar cobertura real en mobile y iOS === */
.hero{
  position: relative;
  /* altura flexible; evitamos inline */
  min-height: clamp(520px, 80svh, 92svh);
  padding: 96px 0 48px;
  overflow: hidden;
  isolation: isolate;
}
@supports (min-height: 100dvh){
  .hero{ min-height: clamp(520px, 82dvh, 92dvh); }
}

/* Capa con el video */
.hero__video-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* no tapa clics */
  background: #000 url('inc/img/inicio_fondovideo.jpg') center/cover no-repeat; /* fallback/poster */
}
.hero__video-bg iframe{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Base: llenar por ancho */
  width: 100vw;
  height: 56.25vw;       /* 9/16 de width */
  /* Si el contenedor es más alto, agrandamos por alto */
  min-width: 177.78svh;  /* 16/9 de height viewport */
  min-height: 100svh;
}
@supports (height: 100dvh){
  .hero__video-bg iframe{
    min-width: 177.78dvh;
    min-height: 100dvh;
  }
}

/* Overlay para legibilidad */
.hero__overlay{
  background: linear-gradient(180deg,
              rgba(0,0,0,.45) 0%,
              rgba(0,0,0,.55) 50%,
              rgba(0,0,0,.65) 100%);
}

/* Contenido */
.hero__content{ position: relative; z-index: 3; text-align:center;}

/* Ahorro de datos o usuarios con menor animación */
@media (max-width: 480px), (prefers-reduced-motion: reduce){
  .hero__video-bg iframe{ display:none; }
  .hero__video-bg{ background-image: url('inc/img/inicio_fondovideo.jpg'); }
}

/* Overline */
.hero__overline{
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 8px;
  color:#fff !important;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.95;
}

/* Título principal (color de marca + sombra para “volumen”) */
.hero__title{
  font-family:"Poppins", sans-serif !important;
  font-weight:800;  /* o 900 si querés aún más cuerpo */
  color:#fff !important;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.2;
  margin: 12px 0 14px !important;
  text-align:center;
  position:relative;
  z-index:2;
  /* doble contorno + sombra */
  text-shadow:
    0 2px 4px rgba(0,0,0,.6),
    0 0 6px rgba(0,0,0,.55),
    0 0 20px rgba(0,0,0,.45);
}
.hero__title::after{
  content:"";
  display:block;
  width:min(220px, 38%);
  height:6px;
  margin:10px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--color-acento-principal), var(--color-acento-secundario));
  box-shadow: 0 6px 18px rgba(183,36,92,.35);
}

/* Subtítulo */
.hero__sub{
  font-family:"Poppins", sans-serif !important;
  font-weight:600;
  color:#fff !important;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  margin-bottom:1rem;
  text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ===== Botones principales del hero ===== */
.hero-cta-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}

.hero-cta{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:.75rem;
  padding:16px 18px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff !important;
  background: linear-gradient(135deg, var(--color-acento-principal), var(--color-acento-secundario));
  border: 0;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow:hidden;
}

/* Borde superior sutil con gradiente comunidad */
.hero-cta::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  opacity:.8;
}


/* Icono fijo a la izquierda, no afecta el centrado del texto */
.hero-cta i{
  font-size:1.15rem;
  line-height:1;
  padding:.55rem;
  border-radius:12px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
/* Variantes sobrias de color */
.hero-cta--farmacias{
  background:linear-gradient(180deg,#1f4f4a,#163c38); /* verde petróleo */
}
.hero-cta--agenda{
  background:linear-gradient(180deg,#9b3b2f,#7e2e25); /* burdeos + naranja quemado */
}
.hero-cta--transporte{
  background:linear-gradient(180deg,#2b4b5c,#203843); /* azul petróleo */
}
.hero-cta--cultura{
  background:linear-gradient(180deg,#4b2f5d,#3a244a); /* púrpura profundo */
}
/* Hover: aclara y satura ligeramente sin volverse chillón */
.hero-cta:hover,
.hero-cta:focus{
  filter:brightness(1.08) saturate(1.05);
}


/* Hover/Focus: levanta y brilla un poco más */
.hero-cta:hover,
.hero-cta:focus{
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.24) inset;
  outline: none;
}

/* Active: pequeña presión */
.hero-cta:active{
  transform: translateY(0);
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.18) inset;
}

/* Accesibilidad: focus visible para teclado */
.hero-cta:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.75),
    0 0 0 6px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.34);
}

/* Responsive finos */
@media (max-width: 575px){
  .hero-cta{ padding:14px 16px; border-radius:14px; }
  .hero-cta i{ font-size:1.05rem; padding:.5rem; border-radius:10px; }
}
.scroll-hint {
  margin-top: 30px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

.scroll-arrow {
  display: block;
  font-size: 1.2rem;
  animation: bounce 1.5s infinite;
  opacity: 0.8;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}
   
/* Ajuste opcional para contraste extra sobre video con escenas claras */
@media (prefers-contrast: more){
  .hero__overlay{ background-color: rgba(0,0,0,0.72); }
}

    @media (max-width: 991px){
      .hero{height:auto; padding:72px 0 48px}
      .hero__actions{grid-template-columns:repeat(2,1fr); max-width:560px}
    }
    @media (max-width: 480px){
      .hero__actions{grid-template-columns:1fr}
    }

    /* ====== BLOQUES RESUMEN ====== */
    .bloque{
      background:#fff; border:1px solid #eee; border-radius:16px; padding:28px;
      box-shadow:0 8px 28px rgba(0,0,0,.06)
    }
    .bloque__head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px}
    .bloque__title{margin:0; font-weight:800; font-size:clamp(20px,2.4vw,28px)}
    .bloque__cta{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700; color:#fff; background:var(--color-acento-secundario)}
    .bloque__cta:hover{background:#E67E3A;color:#fff}
    .subtle{color:#666; font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.85rem}

    /* Farmacias de Turno */
    .farmacias-list{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
    .farmacias-card{background:#f8fffC; border:1px solid #dff4e9; border-radius:12px; padding:14px}
    .farmacias-card strong{color:#0f5132}
    .farmacias-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
    .chip{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:8px 12px; text-decoration:none; font-weight:600; border:1px solid #e5e7eb; color:#374151; background:#fff}
    .chip:hover{border-color:#d1d5db}

    @media (max-width: 767px){
      .farmacias-list{grid-template-columns:1fr}
    }

    /* Agenda Cultural previa (tarjetas compactas) */
    .mini-agenda{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .evento{
      background:#1a202c; color:#a9b3c1; border:1px solid #2d3748; border-radius:14px; overflow:hidden
    }
    .evento__img{height:140px; background:#0b0f16}
    .evento__img img{width:100%; height:100%; object-fit:cover; display:block}
    .evento__body{padding:14px}
    .evento__titulo{color:#fff; font-weight:700; font-size:1rem; margin:0 0 6px}
    .evento__meta{font-size:.9rem}
    .tag{display:inline-block; padding:4px 10px; font-size:.75rem; border-radius:999px; background:#ff8c42; color:#fff; font-weight:700}

    @media (max-width: 991px){
      .mini-agenda{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 575px){
      .mini-agenda{grid-template-columns:1fr}
    }

    /* Cursos y Talleres (teaser) */
    .talleres-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .taller{
      background:#fff7f2; border:1px solid #ffe4d1; border-radius:14px; padding:16px
    }
    .taller h4{margin:0 0 6px; font-weight:700}
    .taller p{margin:0; color:#7a5a4a}

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

    /* Explorar Pacheco (mosaico) */
    .explorar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .explorar-card{
      position:relative; height:220px; border-radius:16px; overflow:hidden; color:#fff; text-decoration:none; display:block
    }
    .explorar-card__bg{position:absolute; inset:0; background:#000}
    .explorar-card__bg img{width:100%; height:100%; object-fit:cover; opacity:.85}
    .explorar-card__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55))}
    .explorar-card__title{position:absolute; left:16px; bottom:14px; font-weight:800; font-size:1.3rem}
	.explorar-card:hover .explorar-card__title {
  color: #F7F4CB;
  transition: color .25s ease; /* suavecito */
}
    @media (max-width: 991px){
      .explorar-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 575px){
      .explorar-grid{grid-template-columns:1fr}
    }

    /* Guía Comercial (teaser) */
    .guia-teaser{
      background:linear-gradient(180deg,#651332,#7b1b40);
      border-radius:16px; padding:28px; color:#fff
    }
    .guia-teaser h3{font-weight:800; margin:0 0 6px}
    .guia-teaser p{opacity:.9; margin:0 0 12px}
    .guia-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
	.guia-chip:hover{color:#fff;}
    .guia-chip{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff}
    .guia-chip:hover{background:rgba(255,255,255,.2)}

    /* Decorativos */
    .subtitulo{color:var(--color-acento-principal); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem}
 
 @media (prefers-reduced-motion: reduce){
  .hero__video-bg{ display:none; }
  .hero{ background: url('inc/img/inicio_fondovideo.jpg') center/cover no-repeat; }
}
/* Hover magenta solo para los chips de Cultura */
.text-center.mt-3 .chip:hover {
  background: var(--color-acento-principal, #B7245C) !important;
  border-color: var(--color-acento-principal, #B7245C) !important;
  color: #fff !important;
}

/* === FIX 1: NUNCA ocultar el iframe de video por ancho de pantalla === */

/* === HERO — versión consolidada (cubre en mobile) === */
.hero{
  position: relative;
  min-height: clamp(520px, 86svh, 92svh);
  padding: 96px 0 48px;
  overflow: hidden;
  isolation: isolate;
}
@supports not (min-height: 100svh){
  .hero{ min-height: clamp(520px, 86vh, 92vh); }
}

.hero__video-bg{
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: #000 url('inc/img/inicio_fondovideo.jpg') center/cover no-repeat; /* poster */
}

/* Truco “cover” para iframe 16:9 (Vimeo) */
.hero__video-bg iframe{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);

  /* llena por ancho */
  width: 100vw;
  height: 56.25vw;             /* 9/16 de width */

  /* y si el contenedor es más alto, crece por alto */
  min-width: 177.78svh;         /* 16/9 de la altura del viewport “seguro” */
  min-height: 100svh;
}
@supports not (height: 100svh){
  .hero__video-bg iframe{
    min-width: 177.78vh;
    min-height: 100vh;
  }
}

.hero__overlay{
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.65) 100%);
}

.hero__content{ position: relative; z-index: 3; text-align:center; }


.hero__overline{
  color:#fff !important; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.95;
}
.hero__title{
  font-family:"Poppins", sans-serif !important;
  font-weight:800; color:#fff !important;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.2; margin:12px 0 14px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 6px rgba(0,0,0,.55), 0 0 20px rgba(0,0,0,.45);
}
.hero__sub{
  font-weight:600; color:#fff !important;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}


/* Si .bloque__head tiene un único hijo, centramos */
.bloque__head > :only-child{
  margin-inline:auto;
  text-align:center;
}

/* Opcional: si el título vive dentro de ese único <div>, centramos subtítulo/título también */
.bloque__head > :only-child .subtitulo,
.bloque__head > :only-child .bloque__title{
  text-align:center;
}


/* ===== Noticias Breves del AMBA ===== */
.news-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;                 /* 1 col — mobile */
}
@media (min-width: 768px){
  .news-grid{ grid-template-columns: repeat(2, 1fr); }  /* 2 col — tablet */
}
@media (min-width: 1200px){
  .news-grid{ grid-template-columns: repeat(3, 1fr); }  /* 3 col — desktop */
}

.news-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card__img{
  width: 100%;
  aspect-ratio: 16 / 9;     /* Área fija para que todas queden parejas */
  background: #f3f4f6;
}
.news-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* La imagen se adapta al contenedor */
  display: block;
}

.news-card__body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-card__title{
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #0f1420;
  margin: 0;
}
.news-card__excerpt{
  color: #667085;           /* gris similar al de los copetes de la guía */
  font-size: .95rem;
  line-height: 1.45;
  margin: 0;
}