/* ===== Tema rojo/oscuro base ===== */
:root{
  --bg:#0b0b0d;
  --panel:#141417;
  --panel-2:#191a1f;
  --text:#f3f3f4;
  --muted:#a7a9ad;
  --accent:#c71e27;          /* rojo base */

  /* VIP */
  --vip-bg:#0d0c0a;
  --vip-gold:#e7c165;
  --vip-gold-2:#b9922a;
  --vip-ink:#f6edd7;
}

/* ===== Reset y fondo ===== */
*{ box-sizing:border-box; }
body{
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.85)),
    url('img/background.avif') center center / cover no-repeat fixed;
  min-height:100dvh;
}

/* ====================================================================== */
/* UTILIDAD: borde rojo elegante                                          */
/* Se logra con doble background (contenido + borde gradiente)            */
/* Usalo en todas las “cajas” visuales para consistencia de marca         */
/* ====================================================================== */
.elegant-red-border{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box, /* se sobreescribe en cada caja */
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
  box-shadow:
    0 0 0 1px rgba(199,30,39,.10) inset,       /* línea interior muy sutil */
    0 8px 28px rgba(199,30,39,.08);            /* leve glow exterior */
}

/* ===== Contenedores ===== */
.navbar{
  background:rgba(20,20,23,.95)!important;
  border-radius:14px;
}
.navbar.elegant-red-border{
  background:
    linear-gradient(rgba(20,20,23,.95), rgba(20,20,23,.95)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}

.box{
  background:rgba(25,26,31,.95);
  border-radius:16px;
}
.box.elegant-red-border{
  background:
    linear-gradient(rgba(25,26,31,.95), rgba(25,26,31,.95)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}

.box-accent{
  border-radius:16px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(25,26,31,.95), rgba(25,26,31,.95)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}

/* Borde dorado de sección VIP + fino delineado rojo interior para coherencia */
.box-gold{
  border-radius:16px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(25,26,31,.95), rgba(25,26,31,.95)) padding-box,
    linear-gradient(90deg, rgba(231,193,101,.9), rgba(185,146,42,.5)) border-box;
  box-shadow:0 0 0 1px rgba(199,30,39,.15) inset; /* delineado rojo sutil interior */
}

/* Cards Bootstrap / grid cards */
.card{
  background:var(--panel);
  color:var(--text);
  border-radius:14px;
  border:1px solid transparent;
}
.card.elegant-red-border{
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}

.grid-card{
  position:relative;
  background:rgba(25,26,31,.9);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:100%;
  border:1px solid transparent;
}
.grid-card.elegant-red-border{
  background:
    linear-gradient(rgba(25,26,31,.9), rgba(25,26,31,.9)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}

/* Acordeón (datos útiles) */
.accordion-item{
  border-radius:12px!important;
  overflow:hidden;
  border:1px solid transparent!important;
}
.accordion-item.elegant-red-border{
  background:
    linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}
.accordion-button{
  background:transparent!important;
  color:var(--text)!important;
}
.accordion-button:not(.collapsed){ box-shadow:none!important; }

/* Imagenes seguras en ratios */
.ratio > img,
.ratio > picture > img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* Fallback si no existe la imagen */
.is-fallback{
  object-fit:contain!important;
  background:#111; padding:6px;
}

/* Si tu build de CSS no soporta 'composes', aplica manualmente: */
.navbar{ border:1px solid transparent; background:
  linear-gradient(rgba(20,20,23,.95), rgba(20,20,23,.95)) padding-box,
  linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
  box-shadow:0 0 0 1px rgba(199,30,39,.10) inset, 0 8px 28px rgba(199,30,39,.08);
}
.box{ border:1px solid transparent; background:
  linear-gradient(rgba(25,26,31,.95), rgba(25,26,31,.95)) padding-box,
  linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
  box-shadow:0 0 0 1px rgba(199,30,39,.10) inset, 0 8px 28px rgba(199,30,39,.08);
}
.card{ border:1px solid transparent; background:
  linear-gradient(var(--panel), var(--panel)) padding-box,
  linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
  box-shadow:0 0 0 1px rgba(199,30,39,.10) inset, 0 8px 28px rgba(199,30,39,.08);
}
.grid-card{ border:1px solid transparent; background:
  linear-gradient(rgba(25,26,31,.9), rgba(25,26,31,.9)) padding-box,
  linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
  box-shadow:0 0 0 1px rgba(199,30,39,.10) inset, 0 8px 28px rgba(199,30,39,.08);
}
.accordion-item{ border:1px solid transparent!important; background:
  linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)) padding-box,
  linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box!important;
  box-shadow:0 0 0 1px rgba(199,30,39,.10) inset, 0 8px 28px rgba(199,30,39,.08);
}

/* Bordecito entre imagen y contenido en cards */
.card .ratio{ border-bottom:1px solid rgba(255,255,255,.06); }
.grid-card .card-media .ratio{ border-radius:12px 12px 0 0; overflow:hidden; }

/* Chips / badges / botones */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  background:#1b1c22;
  border:1px solid rgba(199,30,39,.35);
  color:#e9eaec;
  padding:.38rem .65rem;
  border-radius:999px;
  font-size:.94rem;
  white-space:nowrap;
}
.badge-dark{ background:#202126; color:var(--muted); border-radius:999px; padding:.25rem .55rem; border:1px solid rgba(199,30,39,.35); }
.btn-red{ background:var(--accent); color:#fff; border:1px solid rgba(255,255,255,.08); }
.btn-red:hover{ opacity:.92; }
.btn-ghost{ background:transparent; color:var(--accent); border:1px solid rgba(199,30,39,.55); }
.text-muted{ color:var(--muted)!important; }
.rounded-ratio{ border-radius:12px; overflow:hidden; }
.divider{
  height:1px; border:0; margin:1rem 0 1.2rem;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* Anti-parpadeo */
.card img, img, .carousel, .carousel-item{ transition:none!important; box-shadow:none!important; }

/* ===========================================================
   CONTACTO — sección CTA
   =========================================================== */

:root{
  --wa-green-1: #25D366;
  --wa-green-2: #128C7E;
  --contact-bg: rgba(15,15,18,.7);
}

.eyebrow{
  font-size: .8rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.65);
}

.text-highlight{
  color: #f2f2f3;
  text-shadow: 0 2px 18px rgba(255,255,255,.06);
}

/* Caja principal */
.contact-cta{
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.04), rgba(0,0,0,.45) 60%), var(--contact-bg);
  border-radius: 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Detalle superior sutil */
.contact-stripe{
  position: absolute;
  top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, #b91c1c, #ef4444, #f59e0b);
  opacity: .55;
}

/* Badges/chips */
.contact-badges{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.badge-like{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #e7e7e7;
  font-weight: 600;
  font-size: .92rem;
}

/* Botón WhatsApp */
.btn-whatsapp{
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--wa-green-1), var(--wa-green-2));
  color: #fff; border: 0; border-radius: 14px;
  padding: .9rem 1.25rem;
  box-shadow: 0 10px 22px rgba(37,211,102,.25), inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37,211,102,.30), inset 0 0 0 1px rgba(255,255,255,.2);
  color: #fff;
}
.wa-dot{
  width: 11px; height: 11px; border-radius: 999px; display: inline-block;
  background: #fff; opacity: .85; box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* Tarjeta lateral */
.card-dark{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(210,34,48,.45);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.contact-list{
  margin: 0; padding-left: 0; list-style: none;
}
.contact-list li{
  position: relative;
  padding-left: 28px;
  color: #ddd;
  margin: 10px 0;
}
.contact-list li::before{
  content: "✔";
  position: absolute; left: 0; top: 0;
  color: #16a34a; /* check verdoso */
  font-weight: 900;
}


/* ===== VIP — páginas completas ===== */
.vip body{
  position:relative;
  background-color:#0d0c0a;
  background-image:
    radial-gradient(1000px 700px at 50% -10%, rgba(231,193,101,.10), transparent 60%),
    radial-gradient(800px 600px at 80% 120%, rgba(231,193,101,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23e7c165' stroke-opacity='0.08' stroke-width='2'%3E%3Cpath d='M30 18 v40 M35 18 v40 M40 18 v40 M45 18 v40'/%3E%3Cpath d='M100 20 v100' stroke-linecap='round'/%3E%3Ccircle cx='65' cy='88' r='10'/%3E%3Cpath d='M65 98 v26'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,auto,120px 120px;
  background-repeat:no-repeat,no-repeat,repeat;
  background-position:center top,right bottom,center;
  background-attachment:fixed,fixed,fixed;
}
.vip .navbar{
  background:rgba(22,20,16,.95)!important; border-radius:14px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(22,20,16,.95), rgba(22,20,16,.95)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}
.vip .box{
  background:rgba(20,18,15,.95); border-radius:16px; border:1px solid transparent;
  background:
    linear-gradient(rgba(20,18,15,.95), rgba(20,18,15,.95)) padding-box,
    linear-gradient(135deg, rgba(199,30,39,.95), rgba(199,30,39,.32)) border-box;
}
.vip .box-vip-accent{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(20,18,15,.95), rgba(20,18,15,.95)) padding-box,
    linear-gradient(90deg, rgba(231,193,101,.85), rgba(185,146,42,.55)) border-box;
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(199,30,39,.15) inset;  /* delineado rojo sutil interno */
}
.vip .btn-vip{ background:linear-gradient(90deg, var(--vip-gold), var(--vip-gold-2)); color:#201b10; border:1px solid rgba(199,30,39,.25); font-weight:700; }
.vip .btn-vip:hover{ filter:brightness(.95); }
.vip .chip{ border-color:rgba(231,193,101,.28); color:#f2e8cd; }
.vip .text-muted{ color:#cbbd9a!important; }
.vip .badge-dark{ background:rgba(231,193,101,.15); color:#e7c165; border:1px solid rgba(199,30,39,.35); }

/* ===== GALERÍA ===== */
.grid-card .card-media img{ object-fit:cover; border-bottom:1px solid rgba(255,255,255,.06); }
.grid-card .card-body{ padding:.8rem .9rem .4rem; }
.grid-card .title{ margin:0 0 .2rem; font-weight:700; font-size:1.05rem; }
.grid-card .meta{ font-size:.95rem; }
.grid-card .card-actions{ padding:.7rem .9rem .9rem; }
.grid-card:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  transform:translateY(-1px);
}

/* ===========================================================
   GALERÍA — Tarjetas con imagen que SIEMPRE llena el header
   =========================================================== */

:root{
  --card-bg: rgba(15,15,18,.75);
  --card-border-red: rgba(210,34,48,.55);
  --text-1: #f2f2f3;
  --text-2: #c2c4c7;
  --btn-red: #b91c1c;
  --btn-red-h: #dc2626;
}

/* Caja general con borde rojo elegante (no rompe otras .box) */
.box-red-outline{
  border: 1px solid var(--card-border-red) !important;
  box-shadow: 0 0 0 1px rgba(210,34,48,.15), 0 12px 30px rgba(0,0,0,.35);
}

/* Grid responsivo 1–4 columnas */
.gallery-grid{
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  .gallery-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tarjeta */
.r-card{
  position: relative;
  overflow: hidden;
  /* Usamos el mismo degradado oscuro en TODA la tarjeta */
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70));
  border: 1px solid var(--card-border-red);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.r-card:hover{
  transform: translateY(-2px);
  border-color: rgba(210,34,48,.8);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* Borde dorado automático para tarjetas VIP (usamos class tier-vip en el HTML) */
.r-card.tier-vip{
  border-color: var(--vip-gold);
}

.r-card.tier-vip:hover{
  border-color: var(--vip-gold-2);
}

/* Encabezado de imagen con relación 16:9 SIEMPRE */
.r-card .thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #000;
}
.r-card .thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* CLAVE: llena sin deformar */
  display: block;
  /* Mejora: zoom suave al hacer hover */
  transition: transform .4s ease;
}

/* Zoom al hacer hover sobre la card */
.r-card:hover .thumb img{
  transform: scale(1.06);
}

/* Degradado elegante sobre la imagen para mejor lectura */
.r-card .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 0, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
  pointer-events:none;
}

/* Cuerpo de la card con degradado para que el texto siempre se lea */
.r-card .body{
  position: relative;
  padding: 16px 18px 18px;
  /* Dejamos transparente para que use el fondo de .r-card */
  background: transparent;
}
.r-card .title{
  color: var(--text-1);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .2px;
}
.r-card .meta{
  color: var(--text-2);
  font-size: .95rem;
  margin-top: 2px;
}

/* Meta como “pastilla” solo dentro de la galería */
.gallery-grid .r-card .meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  font-size:.9rem;
}
.gallery-grid .r-card .meta::before{
  content:"●";
  font-size:.7rem;
  color:var(--accent);
}

/* Bandera VIP sólo para galería (posición y estilo base) */
.r-card .vip-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: .85rem;
  color: #1a1200;
  background: linear-gradient(180deg, #e7c365, #b88a2b);
  border: 1px solid rgba(215,180,85,.55);
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
  z-index: 2;
}
.r-card .vip-badge .star{ font-size: 1rem; line-height: 1; }

/* Brillo/latido suave en el badge VIP de la galería */
.gallery-grid .r-card .vip-badge{
  animation: vipPulse 2.6s ease-in-out infinite alternate;
}

@keyframes vipPulse{
  0%{
    box-shadow: 0 3px 14px rgba(0,0,0,.35);
    transform: translateY(0);
  }
  100%{
    box-shadow: 0 0 18px rgba(231,193,101,.75);
    transform: translateY(-1px);
  }
}

/* Botón rojo consistente con el resto del sitio */
.btn-red{
  background: var(--btn-red);
  color: #fff;
  border: 1px solid rgba(255,100,100,.55);
  border-radius: 12px;
  padding: .55rem 1rem;
}
.btn-red:hover{ background: var(--btn-red-h); color: #fff; }

/* Botón “fantasma” que ya usás */
.btn-ghost{
  background: transparent;
  color: #eee;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}


/* ===== Bandera VIP SOLO en Galería (fix para que no tape la imagen) ===== */
.gallery-page .ratio > .vip-flag{
  position:absolute;
  top:8px; left:8px;
  width:auto; height:auto;
  display:inline-block;
  pointer-events:none;
  z-index:3;
  padding:.28rem .6rem;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.2px;
  color:#1f1608;
  background:linear-gradient(135deg,var(--vip-gold),var(--vip-gold-2));
  border:1px solid rgba(0,0,0,.2);
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}
.gallery-page .vip-flag::before{ content:"★ "; opacity:.9; }

/* ===== VIP en portada (destacados) ===== */
.vip-item .vip-badge{
  background:linear-gradient(90deg, var(--vip-gold), var(--vip-gold-2));
  color:#1d1607; font-weight:800; border:none;
  padding:.25rem .6rem; border-radius:999px; font-size:.85rem;
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
}
.vip-item{
  position:relative;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(25,26,31,.95), rgba(25,26,31,.95)) padding-box,
    linear-gradient(90deg, rgba(231,193,101,.9), rgba(185,146,42,.5)) border-box;
  border-radius:14px;
  padding:.75rem;
  box-shadow:0 0 0 1px rgba(199,30,39,.15) inset;  /* delineado rojo sutil interno */
}
.vip-item::after{
  content:"★ ★ ★";
  position:absolute; right:12px; top:8px;
  color:rgba(231,193,101,.35); letter-spacing:2px; font-size:.9rem; pointer-events:none;
}

/* ===== Tipografía util ===== */
h1 span, h2 span{ color:var(--accent); }
.text-muted{ color:var(--muted)!important; }
.rounded-ratio{ border-radius:12px; overflow:hidden; }
.divider{
  height:1px; border:0; margin:1rem 0 1.2rem;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* ===== Responsivo ===== */
@media (min-width:992px){
  .kpis{ display:grid; gap:.75rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:576px){
  .chip{ font-size:.88rem; }
}

/* Fondo ligeramente dorado SOLO en las cards VIP de la galería */
.gallery-grid .r-card.tier-vip .body{
  background:
    radial-gradient(circle at 0 0, rgba(231,193,101,.20), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(185,146,42,.15), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.70));
}

/* Opcional: un poquito más de presencia en el contorno VIP */
.gallery-grid .r-card.tier-vip{
  box-shadow:
    0 8px 24px rgba(0,0,0,.55),
    0 0 0 1px rgba(231,193,101,.28);
}

/* ===== Header de galería ===== */
.gallery-header{
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:8px;
  margin-bottom:14px;
}

/* ===== MARQUESINA DE LOGOS EN FOOTER ===== */
.logos-marquee-viewport {
  overflow: hidden;
  position: relative;
}

.logos-marquee-track {
  display: flex;
  width: max-content;          /* se ajusta al contenido */
  animation: logos-marquee-scroll 28s linear infinite;
}

.logos-row {
  display: flex;
  align-items: center;
  gap: 48px;                   /* separación entre logos */
  padding: 0 24px;
}

.logo-item img {
  max-height: 40px;
  width: auto;
  display: block;
  opacity: 0.95;
}

/* Animación: la pista completa se mueve de derecha a izquierda.
   Como hay 2 filas iguales, al llegar a -50% la segunda fila
   queda exactamente donde estaba la primera y el loop sigue. */
@keyframes logos-marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ===== ANIMACIÓN DE APARICIÓN DE CARDS EN GALERÍA ===== */
.r-card{
  opacity:0;
  transform:translateY(8px);
}

.r-card.is-visible{
  opacity:1;
  transform:translateY(0);
  transition:opacity .18s ease-out, transform .38s ease-out;
}

    /* Video de presentación en la portada */
    .intro-video{
      max-width:720px;
      margin:18px auto 26px;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,.55);
      background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,1));
    }
    .intro-video-inner{
      position:relative;
      width:100%;
      padding-top:56.25%; /* 16:9 */
    }
    .intro-video-inner iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
      border-radius:inherit;
      display:block;
    }

/* Ajustes visuales de la marquesina de logos */
.logos-marquee{
  /* hace la caja un poco más grande y da aire arriba/abajo */
  padding: 1.1rem 1.8rem 1.5rem;   /* top, lados, bottom */
}

.logos-marquee-header{
  /* separa el texto de los logos */
  margin-bottom: 0.7rem;
}

.logos-title{
  /* un pelín de aire respecto al punto rojo, opcional */
  margin-left: 0.3rem;
}

/* logos centrados verticalmente en el medio de la franja */
.logos-marquee-viewport{
  min-height: 70px;          /* hace la franja más alta */
  display: flex;
  align-items: center;       /* centra la fila de logos verticalmente */
  margin-top: 0.1rem;
}