/* =========================================================
   OutBox Producciones — estilos base
   Paleta extraída del sitio original (tema Blocksy)
   ========================================================= */

:root{
  /* Paleta: acento cambiado de morado a rojo */
  --color-1: #ff2e2e;   /* acento rojo */
  --color-2: #d40000;   /* acento rojo hover */
  --color-3: #898989;   /* texto tenue */
  --color-4: #ffffff;   /* blanco */
  --color-5: #303030;
  --color-6: #292929;
  --color-7: #070707;   /* fondo principal */
  --color-8: #1f1f1f;   /* fondo secundario */

  --text-color: #c8c8c8;
  --headings-color: var(--color-4);

  --container-max: 1290px;
  --container-pad: 30px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --header-height: 80px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-stack);
  font-size:16px;
  line-height:1.65;
  color:var(--text-color);
  background:var(--color-7);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .2s ease; }
h1,h2,h3{ color:var(--headings-color); margin:0; line-height:1.2; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--color-1); color:#fff; padding:10px 18px;
}
.skip-link:focus{ left:0; }

.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
}
.center{ text-align:center; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(7,7,7,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header-inner{
  height:var(--header-height);
  display:flex; align-items:center; gap:32px;
}
.logo{
  font-size:24px; font-weight:800; letter-spacing:.12em;
  color:var(--color-4); white-space:nowrap;
}
.logo:hover{ color:var(--color-1); }

/* el nav se eliminó: las acciones empujan solas hacia la derecha */
.header-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }

/* Botón "liquid glass" con el mismo haz de luz recorriendo el borde:
   el cónico gira detrás (::before), el cristal translúcido (::after) tapa el
   interior y deja ver la luz solo en el borde, y el texto (.btn-label) va encima. */
.btn-ghost{
  position:relative;
  display:inline-block;
  padding:2px;                 /* grosor del borde de luz */
  border-radius:999px;
  border:none;
  background:transparent;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-ghost::before{            /* haz giratorio (mismo cometa que los videos) */
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:250%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 205deg,
    hsl(0 100% 60% / 0) 235deg,
    hsl(0 100% 62% / 1) 296deg,
    #ffffff 320deg,
    hsl(0 100% 62% / 1) 344deg,
    hsl(0 100% 60% / 0) 360deg);
  animation:glow-spin 8s linear infinite;   /* su propio ritmo, distinto a los videos */
}
.btn-ghost::after{            /* cristal interior */
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  /* El haz es un cónico que ocupa TODO el disco de atrás: su cuña brillante va
     del centro hacia afuera, así que iluminaba el centro del botón. La base de
     este cristal es casi opaca a propósito para tapar esa cuña: la luz solo se
     ve en el borde de 2px que este cristal no cubre → parece recorrer la línea.
     Encima, un velo claro en diagonal + brillo superior dan el aspecto de vidrio. */
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(255,255,255,0)),
    rgba(9,9,11,.92);
  /* lo vidrioso lo da el backdrop-filter, NO la transparencia del color: por eso
     la base puede ser casi opaca (.92) y aun así lee como cristal. */
  -webkit-backdrop-filter:blur(12px) saturate(150%);
          backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.4);
  z-index:1;
  pointer-events:none;
}
.btn-label{
  position:relative;
  z-index:2;                   /* el texto por encima del cristal */
  display:block;
  padding:10px 26px;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
}
.btn-ghost:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}

/* =========================================================
   HERO
   ========================================================= */
/* ya no hay contenido en el flujo del hero: los iconos van posicionados,
   así que sobra el centrado flex y el padding para el header */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg video,
.hero-bg iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                        /* cubre el viewport sin deformar */
  border:0; pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
              rgba(7,7,7,.55) 0%,
              rgba(7,7,7,.45) 50%,
              rgba(7,7,7,.85) 100%);
}
/* Marca sobre el video. top:22% coincide con la altura marcada en la referencia;
   centrado horizontal con translate para que no dependa del ancho del texto. */
.hero-logo{
  position:absolute;
  top:22%;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  margin:0;
  /* zona de hover de tamaño FIJO (ancho y alto): al revolver, la fuente se
     achica pero la caja no, así el cursor no cae fuera por el cambio de tamaño
     y el glitch no se queda pegado. El texto va centrado dentro de la caja. */
  width:min(94vw, 760px);
  min-height:clamp(52px, 8.5vw, 104px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(38px, 6.5vw, 84px);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-4);
  white-space:nowrap;
  text-shadow:0 2px 28px rgba(0,0,0,.65);
  cursor:pointer;
}
/* Tamaño reducido con el texto largo Y durante todo el glitch: así los bloques
   de píxel (más anchos que las letras) nunca desbordan la zona de hover. */
.hero-logo.expanded,
.hero-logo.glitch{ font-size:clamp(20px, 3.4vw, 44px); }

.hero-logo-text{ display:inline-block; }
/* cada píxel ocupa el ancho de una letra (no más), para que el texto no crezca
   ni se corra al revolver; algo más pequeño = cuadrados chicos */
.hero-logo-text .dud{
  display:inline-block;
  width:0.62em;
  text-align:center;
  font-size:0.82em;
  color:#fff;
}
.hero-logo-text .dud.red{ color:var(--color-1); }   /* toques rojos al glitchear */
/* glitch: aberración cromática rojo/cian + micro-temblor + resplandor rojo */
.hero-logo-text.is-glitching{
  animation:title-glitch .18s steps(2,end) infinite;
  text-shadow:
    2px 0 rgba(255,30,50,.85),
    -2px 0 rgba(0,220,255,.55),
    0 0 14px rgba(255,40,40,.55);
}
@keyframes title-glitch{
  0%  { transform:translate(0,0); }
  25% { transform:translate(-2px,1px); }
  50% { transform:translate(2px,-1px); }
  75% { transform:translate(-1px,-1px); }
  100%{ transform:translate(1px,1px); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo-text.is-glitching{ animation:none; text-shadow:none; }
}

.social-list{ display:flex; align-items:center; gap:18px; }
.social-list a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  color:var(--color-4);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.social-list a:hover{
  background:var(--color-1); border-color:var(--color-1); color:#fff;
}

/* iconos anclados a la esquina inferior derecha del video */
.hero-social{
  position:absolute;
  right:40px;
  bottom:40px;
  z-index:2;
}
/* debe ir DESPUÉS de .social-list a: misma especificidad, gana la última.
   Contorno y fondo reforzados: sobre video oscuro un borde al 25% no se ve. */
.hero-social a{
  width:48px; height:48px;
  border-color:rgba(255,255,255,.7);
  background:rgba(7,7,7,.4);
  backdrop-filter:blur(4px);
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-social a:hover{
  background:var(--color-1);
  border-color:var(--color-1);
}

/* =========================================================
   PÁGINA DE CONTACTO
   ========================================================= */
.contact-main{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  /* compacto: cabe en pantalla sin scroll. El header es fijo, así que dejo
     su alto arriba y el resto centrado verticalmente. */
  padding:calc(var(--header-height) + 24px) 0 40px;
  background:
    radial-gradient(1100px 620px at 50% 0%, rgba(255,46,46,.10), transparent 62%),
    var(--color-7);
}
/* resplandor rojo suave detrás del título (misma familia que la galería) */
.contact-fx{
  position:absolute; left:50%; top:-14%;
  width:min(120vw, 1200px); aspect-ratio:1;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(212,0,0,.16) 0%, rgba(212,0,0,.04) 40%, transparent 70%);
  filter:blur(8px);
}
.contact-inner{ position:relative; z-index:1; text-align:center; }

.contact-title{
  font-size:clamp(32px, 5.4vw, 62px); font-weight:800; letter-spacing:.005em;
  color:#fff; line-height:1.05; margin:0 0 40px;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  max-width:680px;
  margin:0 auto;
}
/* La tarjeta ES una glow-card (variante cursor): el borde se enciende cerca del
   puntero. Al pasar por encima, además, se ilumina el borde COMPLETO (anillo
   rojo + halo) con el box-shadow del hover. Encima, cristal translúcido. */
/* Doble clase (.contact-card.glow-card): estas reglas van ANTES de .glow-card
   en el archivo, así que necesitan más especificidad para ganarle el display,
   el radio y el matiz del brillo. */
.contact-card.glow-card{
  --glow-radius:16;
  /* el brillo del borde que sigue al cursor va en tono DORADO (no rojo), para
     que combine con la iluminación completa del hover */
  --glow-base:38;                 /* ámbar/dorado en vez de rojo (0) */
  --glow-spread:14;               /* poco recorrido de matiz: se mantiene dorado */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:190px;
  padding:32px 24px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -20px rgba(0,0,0,.8);
  text-align:center;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.contact-card.glow-card:hover{
  transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  /* borde completo encendido en DORADO (mismo tono que el brillo del cursor):
     anillo interior + resplandor alrededor */
  box-shadow:
    inset 0 0 0 1px hsl(44 100% 55% / .8),
    0 0 26px hsl(44 100% 55% / .3),
    0 22px 46px -20px rgba(0,0,0,.85);
}
.cc-icon{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;   /* ícono centrado dentro del círculo */
  color:var(--color-1);               /* ícono rojo (acento del sitio) */
  background:radial-gradient(circle at 50% 32%, rgba(255,46,46,.32), rgba(255,46,46,.06));
  border:1px solid rgba(255,46,46,.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover .cc-icon{
  transform:scale(1.06);
  box-shadow:0 0 22px rgba(255,46,46,.35);
}
.cc-value{
  color:#fff; font-size:15px; font-weight:600;
  word-break:break-word;
  transition:color .2s ease;
}
a.cc-link{ display:block; }
a.cc-link:hover{ color:hsl(44 100% 62%); }        /* el correo apuntado vira a dorado */

.contact-social{
  margin-top:36px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.cs-label{
  text-transform:uppercase; letter-spacing:.34em; font-size:11px;
  color:var(--color-3);
}

@media (max-width:640px){
  .contact-grid{ grid-template-columns:1fr; max-width:420px; }
  .contact-card.glow-card{ min-height:0; padding:26px 22px; }
}

/* =========================================================
   SECCIONES
   ========================================================= */
.section{ padding:100px 0; }

.section-title{
  font-size:clamp(30px, 4vw, 46px);
  font-weight:800;
  text-align:center;
  margin-bottom:56px;
}

/* botón principal */
.btn-primary{
  display:inline-block;
  padding:14px 40px;
  font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  background:var(--color-1);
  border-radius:3px;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{ background:var(--color-2); transform:translateY(-2px); color:#fff; }

/* ---------- Grilla de videos ---------- */
.experiencias{ background:var(--color-7); }

.video-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  margin-bottom:56px;
}
.video-card{ text-align:center; }

/* ---------- Marco spotlight (efecto glow) ----------
   Esqueleto compartido: un anillo revelado con máscara (border-box menos
   padding-box). Dos variantes cambian el relleno:
     · --cursor : el brillo sigue al puntero        (partners, título)
     · --beam   : un haz recorre el marco solo,      (videos throwbacks)
                  siempre visible
   glow.js escribe la posición del puntero en :root y las tarjetas la heredan. */
.glow-card{
  --glow-radius: 6;
  --glow-border: 2;                /* grosor del anillo */
  --glow-bsz: calc(var(--glow-border) * 1px);
  position: relative;
  display: block;
  border-radius: calc(var(--glow-radius) * 1px);
}
.glow-card::before,
.glow-card::after{
  content: "";
  pointer-events: none;
  position: absolute;
  inset: calc(var(--glow-bsz) * -1);
  border: var(--glow-bsz) solid transparent;
  border-radius: calc((var(--glow-radius) + var(--glow-border)) * 1px);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;     /* Safari/WebKit */
          mask-composite: exclude;  /* estándar: deja solo el anillo del borde */
}

/* -- variante cursor: el brillo sigue al puntero (partners) -- */
.glow-card--cursor{
  --glow-base: 0;                  /* matiz rojo, a tono con el sitio */
  --glow-spread: 50;               /* cuánto vira el matiz según la posición X */
  --glow-size: 240;                /* diámetro del foco */
  --glow-spot: calc(var(--glow-size) * 1px);
  --glow-hue: calc(var(--glow-base) + (var(--glow-xp, 0) * var(--glow-spread)));
}
.glow-card--cursor::before,
.glow-card--cursor::after{
  background-attachment: fixed;    /* ancla el foco al viewport, no a la tarjeta */
  background-size: calc(100% + (2 * var(--glow-bsz))) calc(100% + (2 * var(--glow-bsz)));
}
.glow-card--cursor::before{
  background-image: radial-gradient(
    calc(var(--glow-spot) * 0.8) calc(var(--glow-spot) * 0.8) at
    calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px),
    hsl(var(--glow-hue, 0) 100% 55% / 0.9), transparent 100%);
  filter: brightness(1.5);
}
.glow-card--cursor::after{
  background-image: radial-gradient(
    calc(var(--glow-spot) * 0.5) calc(var(--glow-spot) * 0.5) at
    calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px),
    hsl(0 0% 100% / 0.85), transparent 100%);
}

/* El haz de los videos es un efecto pedido explícitamente y se mantiene siempre.
   Solo se desactivan los brillos que siguen al cursor con movimiento reducido. */
@media (prefers-reduced-motion: reduce){
  .glow-card--cursor::before,
  .glow-card--cursor::after{ display: none; }
  /* el giro automático del anillo lo apaga circular-gallery.js */
}

/* ---------- Haz de luz que recorre el marco de los videos ----------
   Marco invisible: solo la luz recorriendo el borde, siempre en movimiento
   (independiente del cursor). Técnica: un cónico grande que gira con
   transform:rotate por detrás del thumb; el thumb tapa el interior y deja ver
   la luz solo en el borde. Se usa transform (no una @property) porque repinta
   en cada frame de forma fiable, sin necesitar hover para actualizarse. */
.glow-beam{
  position: relative;
  padding: 3px;                 /* grosor del borde de luz (más angosto) */
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}
.glow-beam::before,
.glow-beam::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  /* cometa: cola roja que sube a una cabeza blanca; ocupa ~125° del giro
     para que una buena parte del marco quede iluminada y en movimiento */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 205deg,
    hsl(0 100% 60% / 0) 235deg,
    hsl(0 100% 62% / 1) 296deg,
    #ffffff 320deg,
    hsl(0 100% 62% / 1) 344deg,
    hsl(0 100% 60% / 0) 360deg);
  animation: glow-spin 7s linear infinite;   /* MISMA velocidad en las 3 tarjetas */
}
/* copia desenfocada: da el halo, hace el haz más grueso y luminoso */
.glow-beam::after{
  filter: blur(6px) brightness(1.2);
  opacity: 1;
}
.glow-beam > .video-thumb{
  position: relative;
  z-index: 1;                   /* tapa el interior, deja ver solo el borde */
  border-radius: 5px;
}
@keyframes glow-spin{
  to{ transform: translate(-50%, -50%) rotate(360deg); }
}
/* Misma duración (7s) en las 3; solo cambia el punto de partida con separaciones
   DESIGUALES. Al ir todas a la misma velocidad, el desfase es constante para
   siempre → nunca se alcanzan ni se topan, pero el conjunto se ve asimétrico.
   Tarjeta 1 arranca en 0; las otras dos, adelantadas de forma despareja. */
.video-card:nth-of-type(2) .glow-beam::before,
.video-card:nth-of-type(2) .glow-beam::after{
  animation-delay: -2.3s;    /* ~33% del ciclo */
}
.video-card:nth-of-type(3) .glow-beam::before,
.video-card:nth-of-type(3) .glow-beam::after{
  animation-delay: -4.9s;    /* ~70% del ciclo */
}

/* formato vertical, como en el sitio original (videos tipo reel) */
.video-thumb{
  position:relative; display:block;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:4px;
  background:var(--color-8);
}
.video-thumb img,
.video-thumb video{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform .45s ease, filter .45s ease;
}
.video-thumb::after{
  content:""; position:absolute; inset:0;
  background:rgba(7,7,7,.12);              /* velo muy leve: el video se ve claro */
  transition:background .3s ease;
  pointer-events:none;
}
.video-thumb:hover img,
.video-thumb:hover video{ transform:scale(1.06); }
.video-thumb:hover::after{ background:rgba(7,7,7,0); }

.play-btn{
  position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:68px; height:68px; border-radius:50%;
  background:rgba(255,46,46,.9);
  color:#fff;
  padding-left:4px;
  transition:background .25s ease, transform .25s ease;
}
.video-thumb:hover .play-btn{
  background:var(--color-2);
  transform:translate(-50%,-50%) scale(1.1);
}

.video-title{
  margin:20px 0 6px;
  font-size:19px; font-weight:700;
}
.video-date{
  margin:0;
  font-size:14px; letter-spacing:.05em;
  color:var(--color-3);
}

/* Subrayado con brillo bajo "Throwbacks": mismo foco que sigue al cursor,
   pero recortado a una línea fina bajo el título (width:fit-content lo ciñe
   al texto para que el subrayado no se extienda de más). */
.throwbacks-title{
  position:relative;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
.throwbacks-title::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-12px;
  height:3px;
  border-radius:3px;
  /* sin línea base: el subrayado solo aparece donde llega la luz del cursor */
  background-image:radial-gradient(
    220px 60px at calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px),
    hsl(0 100% 55% / 0.95), transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
@media (prefers-reduced-motion: reduce){
  .throwbacks-title::after{ background-image:none; }
}

/* ---------- Partners ---------- */
/* La foto se ajusta a la sección (cover), no la sección a la foto:
   el alto lo define el contenido y la imagen recorta lo que sobre. */
.partners{
  position:relative;
  background-image:url('../assets/partners-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:80px 0;
}
/* velo oscuro: sin él los logos y el título se pierden sobre la foto */
.partners::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(7,7,7,.7);
}

.partners-inner{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  gap:70px;
}

.partners-title{
  flex:0 0 auto;
  margin:0;
  font-size:clamp(30px, 3.6vw, 48px);
  font-weight:800;
  line-height:1.1;
}

.partner-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  align-items:center;
}
.partner-item{ text-align:center; }

/* Cada logo es una ficha cuadrada que además hace de glow-card (variante cursor).
   El <a> se ajusta a la ficha (170px) y el radio del anillo coincide (14px). */
.partner-item .glow-card{
  --glow-radius: 14;
  display:inline-block;
  width:170px;
  max-width:100%;
  aspect-ratio:1/1;
}
.partner-item img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

/* ---------- Galería circular 3D ----------
   Cierre de la página: fondo negro y un anillo de fotos en 3D. Cada tarjeta se
   coloca con rotateY(ángulo) translateZ(radio); el anillo entero gira con
   rotateY. Gira solo en reposo y se arrastra con mouse o dedo. La lógica está
   en circular-gallery.js. */
.galeria{
  position:relative;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  background:#000;              /* negro pleno: es el final de la página */
  display:flex;
  align-items:center;
  justify-content:center;
  --g-w:300px;                  /* tamaño de tarjeta (lo lee el script) */
  --g-h:400px;
}
/* halo rojo muy tenue detrás del anillo, para que no flote sobre negro plano */
.galeria::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(120vh, 1100px); aspect-ratio:1;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,46,46,.10) 0%, rgba(255,46,46,.03) 42%, transparent 70%);
}

/* --- el escenario 3D --- */
.galeria-3d{
  width:100%; height:100%;
  perspective:2000px;
  cursor:grab;
  touch-action:pan-y;          /* el dedo puede seguir scrolleando la página */
}
.galeria-3d.arrastrando{ cursor:grabbing; }
.galeria-anillo{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}
.g-card{
  position:absolute; left:50%; top:50%;
  width:var(--g-w); height:var(--g-h);
  margin-left:calc(var(--g-w) / -2);
  margin-top:calc(var(--g-h) / -2);
  border-radius:12px;
  overflow:hidden;
  border:1px solid #2a2a2a;
  background:rgba(20,20,20,.35);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.65);
  will-change:transform, opacity;
}
.g-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
/* velo por tarjeta: el script lo sube según cuán girada esté, así las del
   fondo del anillo (foto espejada) quedan como siluetas oscuras */
.g-card::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:#06060a;
  opacity:var(--g-velo, 0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .section{ padding:80px 0; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  /* 3 partners: se mantiene la fila para no dejar uno huérfano */
  .partner-grid{ gap:28px; }
  .partners-inner{ gap:40px; }
}

@media (max-width:767px){
  :root{ --container-pad:20px; --header-height:66px; }

  .section{ padding:64px 0; }
  .section-title{ margin-bottom:38px; }

  .video-grid{ grid-template-columns:1fr; gap:34px; }

  /* en móvil el título vuelve arriba: en fila quedaría sin ancho útil */
  .partners{ padding:56px 0; }
  .partners-inner{ flex-direction:column; gap:32px; text-align:center; }
  .partners-title{ font-size:30px; }
  .partner-grid{ width:100%; gap:16px; }
  .partner-item .glow-card{ width:120px; --glow-radius:10; }
  .partner-item img{ border-radius:10px; }

  /* tarjetas más chicas y menos perspectiva en móvil */
  .galeria{ --g-w:190px; --g-h:256px; }
  .galeria-3d{ perspective:1400px; }

  .hero-social{ right:20px; bottom:24px; gap:14px; }
  .hero-social a{ width:42px; height:42px; }
}