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

    :root {
      --coral:        #C8321B;
      --coral-dark:   #9C2412;
      --dark:         #1C1C1E;
      --footer-bg:    #DB812D;
      --gray:         #6B7280;
      --gray-light:   #FFFFFF;
      --gray-border:  #DCDAD3;
      --white:        #FFFFFF;
      --r:            12px;
      --r-sm:         8px;
      --r-pill:       100px;
    }

    html { font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; }

    body {
      background: #FFFFFF;
      color: var(--dark);
      max-width: 430px;
      margin: 0 auto;
      overflow-x: hidden;
      padding-bottom: 88px;
    }

    /* ——— HEADER ——— */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 60px;
      background: #FFFFFF;
      border-bottom: 1px solid var(--gray-border);
    }
    .header-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    .header-logo img {
      height: 51px;
      width: auto;
      background: transparent;
    }
    .header-search { display: none; }

    .hamburger-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      font-size: 27px;
      color: var(--dark);
      line-height: 1;
    }

    /* ——— NAV OVERLAY ——— */
    .nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0,0,0,0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }
    .nav-overlay.open { opacity: 1; pointer-events: all; }

    .nav-drawer {
      position: absolute;
      top: 0; right: 0;
      width: 280px; height: 100%;
      background: var(--white);
      padding: 20px;
      transform: translateX(100%);
      transition: transform .3s ease;
      display: flex;
      flex-direction: column;
    }
    .nav-overlay.open .nav-drawer { transform: translateX(0); }

    .nav-close {
      align-self: flex-end;
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      color: var(--dark);
      padding: 6px;
      margin-bottom: 12px;
    }
    .nav-link {
      display: block;
      padding: 14px 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--dark);
      text-decoration: none;
      border-bottom: 1px solid var(--gray-border);
    }
    .nav-link:last-child { border-bottom: none; }

    /* ——— HERO CAROUSEL ——— */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 0;
      margin-top: 0;
    }

    .hero-slides {
      display: flex;
      transition: transform .4s ease;
      will-change: transform;
    }

    .hero-slide {
      flex: 0 0 100%;
      width: 100%;
      min-height: 620px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: var(--white);
      overflow: hidden;
    }

    /* Media background (video or img) ocupa todo el fondo */
    .hero-slide-media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #000;
    }
    .hero-slide-media video,
    .hero-slide-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-slide-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(0,0,0,0)   0%,
        rgba(0,0,0,.08) 35%,
        rgba(0,0,0,.78) 100%);
      pointer-events: none;
    }

    /* Texto y CTAs encima del media */
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 20px 52px;
      text-align: center;
    }
    .hero-tagline {
      font-size: 27px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 12px;
      letter-spacing: -.3px;
    }
    .hero-subcopy {
      font-size: 16px;
      color: rgba(255,255,255,.75);
      line-height: 1.5;
      margin-bottom: 36px;
    }
    .hero-ctas { display: flex; flex-direction: column; gap: 12px; align-items: center; }

    /* Flechas de navegación */
    .hero-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,.22);
      border: 1.5px solid rgba(255,255,255,.4);
      color: #fff;
      font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .2s;
      backdrop-filter: blur(4px);
    }
    .hero-nav-btn:hover { background: rgba(255,255,255,.38); }
    .hero-prev { left: 12px; }
    .hero-next { right: 12px; }

    /* Puntos indicadores */
    .hero-dots {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 7px;
      z-index: 10;
    }
    .hero-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,.45);
      border: none;
      cursor: pointer;
      transition: background .25s, transform .25s;
      padding: 0;
    }
    .hero-dot.active { background: #fff; transform: scale(1.35); }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 48px;
      background: var(--coral);
      color: var(--white);
      font-size: 15px;
      font-weight: 700;
      border-radius: 0;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background .2s;
    }
    .btn-primary:hover { background: var(--coral-dark); }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 48px;
      background: transparent;
      color: var(--white);
      font-size: 15px;
      font-weight: 700;
      border-radius: 0;
      border: 2px solid #C8321B;
      cursor: pointer;
      text-decoration: none;
      transition: border-color .2s, background .2s;
    }
    .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.06); }

    /* ——— SECTION BASE ——— */
    section { padding: 36px 0; }

    .section-header { padding: 0 20px; margin-bottom: 20px; text-align: center; }

    .section-eyebrow {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: 4px;
    }
    .section-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.3px;
    }

    .hero { margin-bottom: 28px; }

    /* ——— BOTÓN VER TODO ——— */
    .btn-ver-todo {
      font-size: 16px;
      font-weight: 700;
      color: #C8321B;
      border: 1.5px solid #C8321B;
      border-radius: 0;
      padding: 7px 18px;
      text-decoration: none;
      white-space: nowrap;
      transition: background .2s, color .2s;
    }
    .btn-ver-todo:hover { background: #C8321B; color: #fff; }
    .ver-todo-wrap {
      display: flex;
      justify-content: center;
      padding: 12px 0 4px;
    }

    /* ——— DESTACADOS ——— */
    .destacados .section-eyebrow,
    .accesos .section-eyebrow,
    .eventos .section-eyebrow {
      display: inline-flex;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #C8321B;
      margin-bottom: 6px;
    }

    .destacados-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px 10px;
      margin-bottom: 20px;
      background: #FFFFFF;
      border-bottom: 2px solid #C8321B;
      position: relative;
    }
    .destacados-header::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 20px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #C8321B;
    }
    .destacados-texts { text-align: left; }
    .carousel-nav { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

    .carousel-btn {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--white);
      border: 1.5px solid var(--gray-border);
      box-shadow: 0 2px 8px rgba(0,0,0,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: var(--dark);
      cursor: pointer;
      transition: background .2s, color .2s, opacity .2s;
    }
    .carousel-btn:hover { background: var(--coral); color: var(--white); border-color: var(--coral); }
    .carousel-btn:disabled { opacity: .3; pointer-events: none; }

    .cards-scroll {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding: 4px 20px 12px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .cards-scroll::-webkit-scrollbar { display: none; }

    .card {
      flex: 0 0 232px;
      background: #FFFFFF;
      border-radius: 0;
      border: 1px solid #C8321B;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .card-img {
      width: 100%;
      height: 136px;
      background: var(--gray-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #CBD5E1;
      font-size: 36px;
    }
    .card-body { padding: 14px; }

    .card-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .8px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 0;
      margin-bottom: 10px;
    }
    .tag-articulo  { background: #e8f5e9; color: #6baf76; }
    .tag-lugar     { background: #fff8e1; color: #fbc119; }
    .tag-adopcion  { background: #fff0e8; color: #C8321B; }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      color: var(--dark);
      margin-bottom: 10px;
    }
    .card-meta {
      font-size: 11px;
      color: var(--gray);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .card-autor {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #fff;
      background: #e10c00;
      display: inline-block;
      padding: 3px 8px;
      border-radius: 0;
      margin-top: 4px;
    }

    /* ——— DESTACADOS: card-img necesita position:relative para el badge ——— */
    .destacados .card-img { position: relative; }

    /* Card artículo destacada con estrella */
    .card--destacada { border-color: #f5c518; box-shadow: 0 2px 14px rgba(245,197,24,.35); }
    .card-star-badge {
      position: absolute;
      top: 6px; right: 6px;
      background: #f5c518;
      color: #fff;
      width: 24px; height: 24px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px;
      z-index: 2;
      box-shadow: 0 1px 4px rgba(0,0,0,.2);
    }

    /* Tag noticias */
    .tag-noticias { background: #e8edf8; color: #3b6dc4; }

    /* Leer más dentro de las cards de Destacados */
    .card-read-more {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 700; color: #C8321B;
      text-decoration: none; margin-top: 10px; transition: gap .2s;
    }
    .card-read-more:hover { gap: 8px; }

    /* Eventos grid (mobile: columna única) */
    .eventos-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    /* Card destacada: full width en mobile */
    .evento-destacado-principal {
      width: 100%;
    }
    .evento-destacado-principal .evento-card-img {
      height: 200px;
    }
    /* Columna derecha: cinta horizontal con scroll */
    .eventos-col-derecha {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .eventos-subgrid {
      display: flex;
      flex-direction: row;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 4px;
    }
    .eventos-subgrid::-webkit-scrollbar { display: none; }
    .eventos-subgrid-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ev-sub-controls {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
    }
    .ev-sub-btn {
      flex-shrink: 0;
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1.5px solid var(--gray-border);
      background: var(--white);
      color: var(--dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; cursor: pointer;
      transition: border-color .2s, color .2s;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .ev-sub-btn:hover { border-color: var(--coral); color: var(--coral); }
    .ev-sub-btn:disabled { opacity: .3; pointer-events: none; }
    .eventos-subgrid-wrap { display: block; }
    .eventos-subgrid .evento-card {
      flex: 0 0 230px;
      width: 230px;
    }
    .eventos-subgrid .evento-card-img {
      height: 120px;
    }
    .evento-card {
      background: #FFFFFF;
      border: 1px solid #C8321B;
      border-radius: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }
    .evento-card-img {
      width: 100%; height: 160px;
      overflow: hidden; position: relative; background: var(--gray-light);
    }
    .evento-card-img img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
    }
    .evento-card-body {
      padding: 10px 14px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .evento-card-title {
      font-size: 13px; font-weight: 800;
      color: var(--dark); line-height: 1.3;
    }
    .evento-card-date {
      font-size: 11px; color: var(--gray);
      display: flex; align-items: center; gap: 5px;
    }
    .evento-card-date i { color: var(--coral); font-size: 10px; }

    /* Tag evento destacado / patrocinado */
    .evento-tag-destacado {
      display: inline-block;
      width: fit-content;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      background: #f5c518;
      color: #3a2800;
      padding: 2px 8px;
      border-radius: 0;
      margin-bottom: 4px;
    }

    /* ——— ACCESOS RÁPIDOS ——— */
    .banner-banco-wrap {
      margin: 18px 20px 24px;
    }
    .banner-banco-img {
      display: block;
      width: 100%;
      height: auto;
    }
    .banner-banco-desktop { display: none; }
    .banner-banco-mobile  { display: block; }

    .accesos { background: #FFFFFF; padding: 0 0 28px; }

    /* ——— Accesos: lista vertical en mobile ——— */
    .accesos-row-3 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 8px 20px 16px;
    }

    .acceso-btn {
      display: flex;
      flex-direction: row;
      position: relative;
      border-radius: 0;
      overflow: hidden;
      cursor: pointer;
      text-decoration: none;
      background: #FFFFFF;
      border: 1px solid var(--gray-border);
      min-height: 90px;
    }

    .acceso-btn-img {
      flex: 0 0 110px;
      width: 110px;
      position: relative;
      overflow: hidden;
    }
    .acceso-btn-img img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform .35s ease;
    }
    .acceso-btn-img::after { display: none; }

    /* Label oculto en mobile — el nombre se muestra en el panel derecho */
    .acceso-btn-label { display: none; }

    /* Detalle siempre visible en mobile, columna derecha */
    .acceso-btn-detail {
      flex: 1;
      position: static;
      transform: none;
      transition: none;
      background: #FFFFFF;
      color: var(--dark);
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
      overflow: hidden;
    }
    .acceso-detail-name {
      display: block;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      line-height: 1.2;
      margin-bottom: 6px;
      color: var(--coral);
    }
    .acceso-detail-text {
      font-size: 11px;
      line-height: 1.5;
      color: #555;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }

    /* ——— PRÓXIMOS EVENTOS ——— */
    .eventos { background: #FFFFFF; }

    .eventos-banner {
      margin: 0 20px;
      background: #FFFFFF;
      border: 1px solid #C8321B;
      border-radius: 0;
      padding: 24px 20px;
    }

    .date-pills-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    /* BIG pill */
    .date-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--white);
      border-radius: 0;
      overflow: hidden;
      border: 1px solid var(--gray-border);
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      min-width: 64px;
      cursor: pointer;
      transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
      transform-origin: bottom center;
    }
    .date-pill:hover,
    .date-pill.active {
      transform: scale(1.18);
      box-shadow: 0 8px 24px rgba(0,0,0,.14);
    }
    .date-pill-header {
      background: var(--coral);
      width: 100%;
      text-align: center;
      padding: 5px 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.5px;
      color: var(--white);
      text-transform: uppercase;
    }
    .date-pill-day {
      font-size: 34px;
      font-weight: 900;
      color: var(--dark);
      line-height: 1;
      padding: 8px 16px 4px;
    }
    .date-pill-month {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray);
      padding-bottom: 10px;
    }

    /* SMALL pills (50% smaller) */
    .date-pill-sm {
      min-width: 44px;
      border-radius: 0;
    }
    .date-pill-sm .date-pill-day {
      font-size: 20px;
      padding: 6px 10px 3px;
    }
    .date-pill-sm .date-pill-month {
      font-size: 9px;
      letter-spacing: 1px;
      padding-bottom: 7px;
    }

    .eventos-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: 4px;
    }
    .eventos-heading {
      font-size: 18px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 20px;
    }

    /* ——— SCROLL WRAPPER (flechas laterales) ——— */
    .scroll-wrapper {
      position: relative;
    }
    .scroll-prev,
    .scroll-next {
      position: absolute;
      top: 50%;
      transform: translateY(-60%);
      z-index: 10;
    }
    .scroll-prev { left: 4px; }
    .scroll-next { right: 4px; }

    /* ——— EVENTOS CARDS (mobile) ——— */
    .eventos-cards-wrap {
      display: block;
      padding: 0 16px 16px;
    }

    /* ——— AGENDA PILL BOX ——— */
    .eventos-pill-box {
      display: none;
      margin: 0 20px;
      background: #FFFFFF;
      border: 1px solid #C8321B;
      border-radius: 0;
      padding: 20px 16px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .eventos-pill-box::-webkit-scrollbar { display: none; }
    .eventos-pill-box .date-pills-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      flex-wrap: nowrap;
    }

    /* ——— NEWSLETTER ——— */
    .newsletter {
      background: #FFFFFF;
      border-top: 1px solid #C8321B;
      border-bottom: 1px solid #C8321B;
      overflow: hidden;
      padding: 0 !important;
    }
    .newsletter-layout {
      display: flex;
      align-items: stretch;
      min-height: 320px;
    }
    .newsletter-content {
      flex: 1;
      padding: 32px 20px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .newsletter-img-col {
      width: 42%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .newsletter-img-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .newsletter-img-col::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, #FFFFFF 0%, transparent 30%);
      pointer-events: none;
    }
    .newsletter-inner { text-align: center; }

    .newsletter-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--dark);
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .newsletter-sub {
      font-size: 14px;
      color: var(--gray);
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .newsletter-form { display: flex; flex-direction: column; gap: 12px; }

    .newsletter-input {
      width: 100%;
      padding: 15px 18px;
      border: 1.5px solid #C8321B;
      border-radius: 0;
      font-size: 15px;
      color: var(--dark);
      background: var(--white);
      outline: none;
      transition: border-color .2s;
    }
    .newsletter-input:focus { border-color: var(--coral); }
    .newsletter-input::placeholder { color: #B0B8C4; }

    .btn-newsletter {
      width: 100%;
      padding: 15px;
      background: var(--coral);
      color: var(--white);
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: background .2s;
    }
    .btn-newsletter:hover { background: var(--coral-dark); }

    .newsletter-legal {
      font-size: 11px;
      color: #B0B8C4;
      margin-top: 12px;
      line-height: 1.5;
    }

    /* ——— NEWSLETTER: perro corriendo tras la pelota ——— */
    .newsletter-chase {
      position: relative;
      width: 100%;
      height: 52px;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .chase-track-ball,
    .chase-track-dog {
      position: absolute;
      bottom: 4px;
      left: -12%;
      animation: chase-move 3.2s linear infinite;
    }
    .chase-track-dog { animation-delay: -.4s; bottom: 0; }
    .newsletter-ball {
      display: block;
      width: 13px; height: 13px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }
    .newsletter-dog {
      display: inline-block;
      font-size: 28px;
      color: var(--dark);
      transform-origin: bottom center;
      animation: dog-bounce .3s ease-in-out infinite alternate;
    }
    @keyframes chase-move {
      0%   { left: -12%; }
      100% { left: 108%; }
    }
    @keyframes dog-bounce {
      from { transform: translateY(0) rotate(-4deg); }
      to   { transform: translateY(-5px) rotate(4deg); }
    }
    .newsletter-legal a { color: var(--coral); text-decoration: underline; }

    /* ——— SECTION BANDS (Accesos / Eventos) ——— */
    .destacados,
    .accesos,
    .eventos { padding-top: 0; padding-bottom: 28px; }


    .accesos .section-header,
    .eventos .section-header {
      background: #fdeccc;
      border-bottom: 2px solid #C8321B;
      position: relative;
      padding: 12px 20px 10px;
      margin-bottom: 20px;
      text-align: left;
    }
    .accesos .section-header::after,
    .eventos .section-header::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 20px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #C8321B;
    }

    /* ——— FOOTER ——— */
    footer {
      background: var(--footer-bg);
      color: rgba(255,255,255,.65);
      padding: 40px 20px 28px;
    }
    .footer-logo-block { margin-bottom: 32px; }
    .footer-logo {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 3px;
      color: var(--white);
      margin-bottom: 6px;
    }
    .footer-logo img {
      height: 36px;
      width: auto;
      filter: brightness(0) invert(1);
      margin-bottom: 6px;
      display: block;
    }
    .footer-tagline {
      font-size: 15px;
      color: rgba(255,255,255,.45);
      line-height: 1.5;
    }

    .footer-links-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 10px;
      margin-bottom: 32px;
    }
    .footer-col-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 12px;
    }
    .footer-col a {
      display: block;
      font-size: 13px;
      color: rgba(255,255,255,.45);
      text-decoration: none;
      padding: 3px 0;
      line-height: 1.6;
      transition: color .2s;
    }
    .footer-col a:hover { color: var(--white); }

    .footer-social-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 14px;
    }
    .footer-social-icons {
      display: flex;
      gap: 12px;
      margin-bottom: 28px;
    }
    .footer-social-icons a {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,.6);
      font-size: 16px;
      text-decoration: none;
      transition: border-color .2s, color .2s;
    }
    .footer-social-icons a:hover { border-color: var(--coral); color: var(--coral); }

    .footer-divider {
      height: 1px;
      background: rgba(255,255,255,.1);
      margin-bottom: 20px;
    }
    .footer-legal {
      display: flex;
      gap: 16px;
      margin-bottom: 10px;
    }
    .footer-legal a {
      font-size: 13px;
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .2s;
    }
    .footer-legal a:hover { color: var(--white); }
    .footer-copyright {
      font-size: 13px;
      color: rgba(255,255,255,.28);
    }
  

    /* ——— POPUP BANNER BCI ——— */
    #popupBanner {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #popupBanner.hidden {
      display: none;
    }
    .popup-inner {
      position: relative;
      max-width: 720px;
      width: 100%;
    }
    .popup-inner img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 4px;
    }
    #popupClose {
      position: absolute;
      top: 3.5%;
      right: 1.8%;
      width: 8%;
      aspect-ratio: 1;
      background: transparent;
      border: none;
      cursor: pointer;
      border-radius: 50%;
      padding: 0;
    }

    /* ——— STICKY BANNER SUPER ZOO ——— */
    #szBanner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #D42B1E;
      z-index: 300;
      box-shadow: 0 -4px 20px rgba(0,0,0,.3);
    }
    #szBanner.hidden { display: none; }
    .sz-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px;
      max-width: 900px;
      margin: 0 auto;
    }
    .sz-logo {
      width: 96px;
      flex-shrink: 0;
      border-radius: 4px;
      object-fit: contain;
    }
    .sz-text {
      flex: 1;
      font-size: 12px;
      color: #fff;
      line-height: 1.4;
      min-width: 0;
    }
    .sz-text strong { font-weight: 700; }
    .sz-cta {
      flex-shrink: 0;
      background: #fff;
      color: #D42B1E;
      font-size: 12px;
      font-weight: 700;
      padding: 9px 18px;
      border-radius: 0;
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: .2px;
      transition: opacity .15s;
    }
    .sz-cta:hover { opacity: .85; }
    .sz-close {
      flex-shrink: 0;
      background: none;
      border: none;
      color: rgba(255,255,255,.7);
      font-size: 18px;
      cursor: pointer;
      padding: 4px 2px 4px 8px;
      line-height: 1;
    }
    .sz-close:hover { color: #fff; }
    /* En pantallas anchas la franja centra su contenido en 900px y la x
       quedaba lejos del borde: se acerca un 40% a él. */
    @media (min-width: 933px) {
      .sz-close {
        position: absolute;
        top: 50%;
        right: calc(((100vw - 900px) / 2 + 16px) * .6);
        transform: translateY(-50%);
      }
      .sz-cta { margin-right: 38px; }   /* el hueco que deja la x */
    }

    /* ——— BUSCADOR: resultado patrocinado ——— */
    .nav-search-wrap { position: relative; margin-bottom: 16px; }
    .nav-search-wrap .nav-search { margin-bottom: 0; }
    .search-drop {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: #fff;
      border: 1.5px solid var(--gray-border);
      border-top: none;
      box-shadow: 0 6px 18px rgba(0,0,0,.12);
      z-index: 10;
    }
    .search-drop.open { display: block; }
    .search-spon {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px;
      text-decoration: none;
      color: var(--dark);
    }
    .search-spon:hover { background: #fef9f5; }
    .search-spon-star { color: #F5A623; font-size: 16px; flex-shrink: 0; }
    .search-spon-name { display: block; font-size: 13px; font-weight: 700; letter-spacing: .2px; }
    .search-spon-tag  { font-size: 10px; color: #999; letter-spacing: .4px; }

    /* ——— BCI VIDEO: barra de progreso + botón Saltar ——— */
    .bci-progress-wrap {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: rgba(255,255,255,.25);
      z-index: 20;
    }
    .bci-progress-fill {
      height: 100%;
      width: 0%;
      background: #fff;
      transition: width .25s linear;
    }
    .bci-skip {
      position: absolute;
      bottom: 70px;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(0,0,0,.55);
      color: #fff;
      border: 1px solid rgba(255,255,255,.45);
      font-size: 12px;
      font-weight: 600;
      padding: 8px 14px;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s;
      z-index: 20;
      letter-spacing: .3px;
    }
    .bci-skip.visible {
      opacity: 1;
      pointer-events: auto;
    }
    .bci-skip:hover { background: rgba(0,0,0,.75); }