/* ============================================================
   BRUNORONDINI.COM — Estilos
   Estética: cine oscuro, luz de tungsteno, grano de película.
   Índice:
     1. Variables            6. Cabecera y menú
     2. Reset                7. Hero
     3. Base                 8. Secciones (showreel → contacto)
     4. Utilidades           9. Pie
     5. Capas de cine       10. Revelados y reduced-motion
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
  /* Fondos */
  --negro-profundo: #0A0A0C;
  --negro-carbon:   #121216;
  --gris-panel:     #1A1A21;
  --linea:          #2A2A33;
  /* Texto */
  --crema:      #F2EDE4;
  --gris-texto: #A8A49B;
  /* Acentos */
  --ambar:       #E8B34B;
  --ambar-claro: #F5CE7E;
  --rojo-tally:  #E5484D;
  --verde-ok:    #46A758;
  /* Tipografías */
  --fuente-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --fuente-texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  /* Escala fluida */
  --fs-h1:      clamp(3.4rem, 11vw, 6.9rem);
  --fs-h2:      clamp(2.4rem, 6vw, 4.2rem);
  --fs-metrica: clamp(3rem, 6.5vw, 4.8rem);
  /* Layout */
  --ancho-max: 1140px;
  --radio: 12px;
  --transicion: 220ms ease;
  --alto-cabecera: 4.5rem;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea { font: inherit; color: inherit; }
ul[class] { list-style: none; padding: 0; }

/* ---------- 3. Base ---------- */
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
}
body {
  background: var(--negro-profundo);
  color: var(--crema);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.sin-scroll { overflow: hidden; }

h1, h2, h3 { line-height: 1.05; font-weight: 700; text-wrap: balance; }
h2 {
  font-family: var(--fuente-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
h3 { font-size: 1.15rem; margin-bottom: .5rem; }
p + p { margin-top: 1em; }
strong { color: var(--crema); }

::selection { background: var(--ambar); color: var(--negro-profundo); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 2px; }

a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--ambar-claro); }

/* ---------- 4. Utilidades ---------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}
.etiqueta-rodaje {
  font-family: var(--fuente-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 1rem;
}
.etiqueta-rodaje::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--ambar);
  vertical-align: middle;
  margin-right: .7rem;
}
.boton {
  display: inline-block;
  background: var(--ambar);
  color: var(--negro-profundo);
  font-weight: 700;
  padding: .85rem 1.7rem;
  border: 1px solid var(--ambar);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
  min-height: 44px;
}
.boton:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); color: var(--negro-profundo); transform: translateY(-2px); }
.boton--fantasma { background: transparent; color: var(--crema); border-color: var(--linea); }
.boton--fantasma:hover { background: transparent; color: var(--crema); border-color: var(--gris-texto); }
.boton--chico { padding: .55rem 1.2rem; font-size: .92rem; }
.enlace { font-weight: 500; white-space: nowrap; }
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.salto-contenido {
  position: fixed;
  top: .6rem; left: .6rem;
  z-index: 100;
  background: var(--ambar);
  color: var(--negro-profundo);
  font-weight: 700;
  padding: .6rem 1rem;
  border-radius: 6px;
  transform: translateY(-300%);
}
.salto-contenido:focus-visible { transform: none; color: var(--negro-profundo); }
.nota-chica { display: block; font-size: .82rem; color: var(--gris-texto); margin-top: .35rem; }

/* ---------- 5. Capas de cine (grano + viñeta) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 6. Cabecera y menú ---------- */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background var(--transicion), border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
.cabecera.con-fondo {
  background: rgba(10, 10, 12, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--linea);
}
.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--alto-cabecera);
}
.cabecera__logo {
  font-family: var(--fuente-display);
  font-size: 1.45rem;
  letter-spacing: .08em;
  color: var(--crema);
}
.cabecera__logo:hover { color: var(--ambar); }
.cabecera__lista {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.cabecera__lista a:not(.boton) {
  color: var(--gris-texto);
  font-size: .95rem;
  font-weight: 500;
  padding: .5rem 0;
}
.cabecera__lista a:not(.boton):hover { color: var(--crema); }

.cabecera__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.cabecera__hamburguesa span {
  display: block;
  height: 2px;
  background: var(--crema);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}

/* Crédito de la agencia en la barra (isotipo original de Nodo) */
.cabecera__nodo {
  display: inline-flex;
  align-items: center;
  opacity: .75;
  transition: opacity var(--transicion);
}
.cabecera__nodo:hover { opacity: 1; }
.cabecera__nodo img { display: block; width: 22px; height: 22px; }

@media (min-width: 900px) {
  /* El margen auto absorbe el espacio libre: logo a la izquierda, nav+Nodo a la derecha */
  .cabecera__nav { margin-left: auto; }
  .cabecera__nodo {
    margin-left: 1.6rem;
    padding-left: 1.6rem;
    border-left: 1px solid var(--linea);
  }
}

@media (max-width: 899px) {
  .cabecera__hamburguesa { display: flex; }
  .cabecera__nav {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto 0;
    background: rgba(10, 10, 12, .97);
    border-bottom: 1px solid var(--linea);
    padding: 1rem 1.25rem 2rem;
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform 280ms ease, visibility 0s 280ms;
  }
  .cabecera--abierta .cabecera__nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform 280ms ease;
  }
  .cabecera--abierta { background: rgba(10, 10, 12, .97); border-bottom-color: var(--linea); }
  .cabecera--abierta .cabecera__hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cabecera--abierta .cabecera__hamburguesa span:nth-child(2) { opacity: 0; }
  .cabecera--abierta .cabecera__hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cabecera__lista {
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    text-align: center;
  }
  .cabecera__lista a:not(.boton) { display: block; padding: .8rem 0; font-size: 1.05rem; }
  .cabecera__lista .boton { margin-top: .8rem; }
  /* En la barra móvil el isotipo va entre el nombre y la hamburguesa */
  .cabecera__nodo { order: 2; margin-left: auto; margin-right: .9rem; }
  .cabecera__hamburguesa { order: 3; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--alto-cabecera) + 2rem) 0 4rem;
  background:
    radial-gradient(ellipse 60% 45% at 78% 12%, rgba(232, 179, 75, .13), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(232, 179, 75, .05), transparent 60%),
    var(--negro-profundo);
}
.hero__interior {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero__titulo {
  font-family: var(--fuente-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: .2rem 0 1.4rem;
}
.hero__titulo .acento { color: var(--ambar); }
.hero__bajada {
  max-width: 34rem;
  color: var(--gris-texto);
  font-size: 1.13rem;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.6rem;
}
/* Métricas del hero: mismo tratamiento que la sección Números, con logo de plataforma.
   Siempre en una sola fila de tres columnas, también en móvil. */
.hero__metricas {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1rem 2.4rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.hero__metrica {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.hero__metrica-icono {
  width: 21px;
  height: 21px;
  color: var(--ambar);
  filter: drop-shadow(0 0 12px rgba(232, 179, 75, .45));
}
.hero__metrica-cifra {
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1;
  color: var(--ambar);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.hero__metrica-etiqueta {
  font-size: .85rem;
  color: var(--gris-texto);
}
@media (max-width: 639px) {
  .hero__metricas { gap: 1rem 1.4rem; }
  .hero__metrica-etiqueta { font-size: .72rem; line-height: 1.35; }
}

/* Kicker: una línea en desktop; en móvil "Actor · Guionista" baja entero */
.kicker-grupo { white-space: nowrap; }
@media (max-width: 639px) {
  .hero .kicker-separador { display: none; }
  .hero .kicker-grupo { display: block; }
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  display: flex;
  justify-content: center;
}
.hero__scroll span {
  width: 3px; height: 9px;
  margin-top: 7px;
  background: var(--ambar);
  border-radius: 2px;
  animation: rueda 1.8s ease-in-out infinite;
}
@keyframes rueda {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(12px); opacity: 0; }
}

/* Marco de foto con esquinas de encuadre */
.marco {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--negro-carbon);
}
.marco img { width: 100%; height: 100%; object-fit: cover; }
.marco::before, .marco::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--ambar);
  z-index: 3;
}
.marco::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.marco::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.marco__rec {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--crema);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.marco__rec i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rojo-tally);
  box-shadow: 0 0 8px rgba(229, 72, 77, .8);
  animation: parpadeo 1.4s steps(2, start) infinite;
}
.marco__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1rem .7rem;
  background: linear-gradient(transparent, rgba(10, 10, 12, .85));
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-align: center;
  color: var(--gris-texto);
}
.marco--hero { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; }
.marco--hero img { object-position: 62% 20%; }
.marco--retrato { aspect-ratio: 4 / 5; }
.marco--paisaje { aspect-ratio: 3 / 2; }
.marco--paisaje img { object-position: 50% 30%; }

/* ---------- 8. Secciones ---------- */
.seccion { padding: 5.5rem 0; }
.seccion--alterna { background: var(--negro-carbon); }
.seccion__intro { max-width: 40rem; color: var(--gris-texto); font-size: 1.1rem; }
.seccion__nota { margin-top: 2.5rem; color: var(--gris-texto); }
.seccion__nota .boton--chico { vertical-align: middle; }

/* --- Showreel --- */
.cinemascope {
  position: relative;
  aspect-ratio: 2.39 / 1;
  margin-top: 2.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(232, 179, 75, .09), transparent 65%),
    linear-gradient(160deg, #17171d, #0C0C0F 60%);
  overflow: hidden;
}
.cinemascope::before, .cinemascope::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid rgba(242, 237, 228, .35);
}
.cinemascope::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.cinemascope::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.cinemascope video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cinemascope__rec {
  position: absolute;
  top: 14px; right: 16px;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gris-texto);
}
.cinemascope__rec i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rojo-tally);
  animation: parpadeo 1.4s steps(2, start) infinite;
}
@keyframes parpadeo { to { visibility: hidden; } }
.cinemascope__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 9vw, 84px);
  aspect-ratio: 1;
  border: 2px solid var(--ambar);
  border-radius: 50%;
}
.cinemascope__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  border-left: clamp(16px, 2.6vw, 24px) solid var(--ambar);
  border-block: clamp(10px, 1.6vw, 15px) solid transparent;
}
.cinemascope__leyenda {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .24em;
  white-space: nowrap;
  color: var(--gris-texto);
}

.grilla-videos {
  display: grid;
  gap: 1.4rem;
  margin-top: 2rem;
}
.tarjeta-video { display: block; color: var(--crema); }
.tarjeta-video__marco {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion);
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%, rgba(232, 179, 75, .12), transparent 60%),
    linear-gradient(165deg, #1a1a22, #0d0d10 70%);
}
.tarjeta-video:nth-child(2) .tarjeta-video__marco {
  background:
    radial-gradient(ellipse 80% 60% at 20% 90%, rgba(229, 72, 77, .1), transparent 60%),
    linear-gradient(200deg, #1b171d, #0d0d10 70%);
}
.tarjeta-video:nth-child(3) .tarjeta-video__marco {
  background:
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(232, 179, 75, .09), transparent 60%),
    linear-gradient(150deg, #17191f, #0d0d10 70%);
}
.tarjeta-video__miniatura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0; /* el título del gancho suele estar arriba */
}
.tarjeta-video__miniatura--abajo { object-position: 50% 100%; }
/* Veladura sobre la portada para que el play se lea; desaparece al reproducir */
.tarjeta-video__marco::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(10, 10, 12, .05), rgba(10, 10, 12, .45));
}
.tarjeta-video__marco--reproduciendo::after { display: none; }
.tarjeta-video__play {
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  aspect-ratio: 1;
  border: 2px solid rgba(242, 237, 228, .8);
  border-radius: 50%;
  transition: border-color var(--transicion), transform var(--transicion);
}
.tarjeta-video__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 15px solid rgba(242, 237, 228, .8);
  border-block: 9px solid transparent;
}
.tarjeta-video__marco--reproduciendo { aspect-ratio: 9 / 16; background: #000; }
.tarjeta-video__marco--reproduciendo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tarjeta-video:hover .tarjeta-video__marco { border-color: var(--ambar); transform: translateY(-4px); }
.tarjeta-video:hover .tarjeta-video__marco--reproduciendo { transform: none; }
.tarjeta-video:hover .tarjeta-video__play { border-color: var(--ambar); transform: translate(-50%, -50%) scale(1.08); }
.tarjeta-video__titulo { display: block; margin-top: .8rem; font-weight: 700; }
.tarjeta-video__dato { display: block; font-size: .85rem; color: var(--gris-texto); margin-top: .15rem; }

/* --- Sobre Bruno --- */
.seccion-partida {
  display: grid;
  gap: 3rem;
  align-items: start;
}
.seccion-partida__visual { max-width: 420px; margin-inline: auto; width: 100%; }
.seccion-partida__visual--ancha { max-width: 620px; align-self: center; }

/* --- Cine y series --- */
.cita {
  border-left: 2px solid var(--ambar);
  padding: .3rem 0 .3rem 1.2rem;
  margin-top: 1.8rem;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.5;
}
.cita cite {
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  font-style: normal;
}
.cita cite a { color: var(--gris-texto); }
.cita cite a:hover { color: var(--ambar); }
.prensa-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin-top: 1.8rem;
}
.prensa-lista span,
.prensa-lista a {
  font-family: var(--fuente-mono);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.prensa-lista a:hover { color: var(--ambar); }
.prensa-lista__titulo { color: var(--ambar); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.chips li {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gris-texto);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .35rem .9rem;
}

/* --- El diferencial --- */
.grilla-tarjetas {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.tarjeta {
  background: var(--gris-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  transition: border-color var(--transicion), transform var(--transicion);
}
.tarjeta:hover { border-color: var(--ambar); transform: translateY(-4px); }
.tarjeta__icono {
  width: 42px; height: 42px;
  color: var(--ambar);
  margin-bottom: 1.1rem;
}
.tarjeta p { color: var(--gris-texto); font-size: .97rem; }

/* --- Números --- */
.grilla-metricas {
  display: grid;
  gap: 2.4rem 1.5rem;
  margin-top: 2.5rem;
}
.metrica__valor {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--fs-metrica);
  line-height: 1;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.metrica__nombre { display: block; font-weight: 700; margin-top: .4rem; }
.metrica__nota { display: block; font-size: .85rem; color: var(--gris-texto); margin-top: .2rem; }

/* --- Marcas --- */
.grilla-marcas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.grilla-marcas li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  transition: border-color var(--transicion);
}
.grilla-marcas li:hover { border-color: var(--gris-texto); }
.marca-wordmark {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--gris-texto);
  transition: color var(--transicion);
  text-align: center;
}
a.marca-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
}
/* Señal de click: etiqueta "ver campaña" bajo cada logo enlazado */
.grilla-marcas a.marca-logo,
.grilla-marcas a.marca-wordmark {
  flex-direction: column;
  gap: .5rem;
}
.grilla-marcas a.marca-logo::after,
.grilla-marcas a.marca-wordmark::after {
  content: "▶ ver campaña";
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
  opacity: .8;
  transition: opacity var(--transicion);
}
.grilla-marcas li:hover a.marca-logo::after,
.grilla-marcas li:hover a.marca-wordmark::after { opacity: 1; }
.grilla-marcas li:has(a):hover { border-color: var(--ambar); }
.grilla-marcas li:hover .marca-wordmark { color: var(--crema); }
.marca-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
}
.logo-marca {
  max-height: 40px;
  max-width: 72%;
  width: auto;
  opacity: .72;
  transition: opacity var(--transicion), transform var(--transicion);
}
.grilla-marcas li:hover .logo-marca { opacity: 1; transform: translateY(-2px); }
.grilla-marcas__cta { border-style: dashed; grid-column: 1 / -1; }
.grilla-marcas__cta a { font-weight: 700; }

/* --- Casos --- */
.grilla-casos {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.caso {
  display: flex;
  flex-direction: column;
  background: var(--gris-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  transition: border-color var(--transicion), transform var(--transicion);
}
.caso:hover { border-color: var(--ambar); transform: translateY(-4px); }
.caso__marca {
  font-family: var(--fuente-mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.caso__cifra {
  font-family: var(--fuente-display);
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--ambar);
  margin-top: .8rem;
}
.caso__medida { font-weight: 700; margin-top: .2rem; }
.caso__datos { margin: 1.1rem 0 1.4rem; flex-grow: 1; }
.caso__datos li {
  color: var(--gris-texto);
  font-size: .93rem;
  padding: .45rem 0;
  border-top: 1px solid var(--linea);
}
.caso__datos li:last-child { border-bottom: 1px solid var(--linea); }

/* --- Formatos --- */
.grilla-formatos {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.formato {
  display: block;
  color: inherit;
  background: var(--gris-panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  transition: border-color var(--transicion), transform var(--transicion);
}
.formato:hover { color: inherit; border-color: var(--ambar); transform: translateY(-3px); }
/* Señal de click: cada formato abre WhatsApp con su leyenda */
a.formato::after {
  content: "→ consultar por WhatsApp";
  display: block;
  margin-top: 1.1rem;
  font-family: var(--fuente-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
  opacity: .8;
  transition: opacity var(--transicion);
}
a.formato:hover::after { opacity: 1; }
.formato p { color: var(--gris-texto); font-size: .97rem; }
.formato ul { margin-top: 1rem; }
.formato ul li {
  color: var(--gris-texto);
  font-size: .93rem;
  padding-left: 1.2rem;
  position: relative;
  margin-top: .4rem;
}
.formato ul li::before { content: "→"; position: absolute; left: 0; color: var(--ambar); }
.formato--estrella { border-color: var(--ambar); }
.formato--estrella:hover { border-color: var(--ambar-claro); }
.formato__badge {
  display: inline-block;
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--negro-profundo);
  background: var(--ambar);
  border-radius: 4px;
  padding: .25rem .6rem;
  margin-bottom: 1rem;
}

/* --- Contacto --- */
.contacto {
  display: grid;
  gap: 3rem;
  margin-top: 2.5rem;
}
.campo { margin-bottom: 1.2rem; }
.campo label {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gris-texto);
  margin-bottom: .4rem;
}
.campo label span { color: var(--ambar); }
.campo input, .campo textarea {
  width: 100%;
  background: var(--negro-profundo);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: .8rem 1rem;
  color: var(--crema);
  transition: border-color var(--transicion);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ambar); }
.campo textarea { resize: vertical; min-height: 8rem; }
.contacto__enviar { width: 100%; }
.contacto__enviar[disabled] { opacity: .6; cursor: wait; transform: none; }
.contacto__estado { margin-top: 1rem; font-weight: 500; min-height: 1.6em; }
.contacto__estado.es-exito { color: var(--verde-ok); }
.contacto__estado.es-error { color: var(--rojo-tally); }
.contacto__texto {
  font-family: var(--fuente-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin: 2rem 0 .9rem;
}
.contacto__directo .contacto__texto:first-child { margin-top: 0; }
.boton-contacto {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .95rem 1.2rem;
  color: var(--crema);
  font-weight: 500;
  margin-bottom: .8rem;
  transition: border-color var(--transicion), transform var(--transicion);
}
.boton-contacto:hover { border-color: var(--ambar); color: var(--crema); transform: translateY(-2px); }
.boton-contacto svg { width: 22px; height: 22px; color: var(--ambar); flex-shrink: 0; }
.redes { display: flex; gap: .8rem; }
.redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--gris-texto);
  transition: border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.redes a:hover { border-color: var(--ambar); color: var(--ambar); transform: translateY(-2px); }
.redes svg { width: 20px; height: 20px; }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.whatsapp-flotante:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 18px rgba(37, 211, 102, .35);
}
.whatsapp-flotante svg { width: 30px; height: 30px; }

@media (min-width: 900px) {
  .whatsapp-flotante { right: 1.6rem; bottom: 1.6rem; }
}

/* ---------- 9. Pie ---------- */
.pie {
  border-top: 1px solid var(--linea);
  padding: 2.2rem 0;
}
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.pie__wordmark { font-family: var(--fuente-display); font-size: 1.2rem; letter-spacing: .08em; }
.pie__lema { color: var(--gris-texto); font-size: 1.05rem; }
.pie__datos { color: var(--gris-texto); font-size: .88rem; }
.pie__credito {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--gris-texto);
  font-size: .82rem;
  transition: color var(--transicion);
}
.pie__credito:hover { color: var(--crema); }
.pie__credito-nombre {
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  letter-spacing: .12em;
}
.pie__credito-logo { height: 20px; width: auto; opacity: .8; }
.pie__credito:hover .pie__credito-logo { opacity: 1; }

/* ---------- 10. Revelados y reduced-motion ---------- */
html.tiene-js .revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 650ms ease, transform 650ms ease;
}
html.tiene-js .revelar.visible { opacity: 1; transform: none; }
/* Escalonado dentro de grillas */
html.tiene-js .revelar > .tarjeta:nth-child(2),
html.tiene-js .revelar > .caso:nth-child(2),
html.tiene-js .revelar > .tarjeta-video:nth-child(2) { transition-delay: 90ms; }
html.tiene-js .revelar > .tarjeta:nth-child(3),
html.tiene-js .revelar > .caso:nth-child(3),
html.tiene-js .revelar > .tarjeta-video:nth-child(3) { transition-delay: 180ms; }
html.tiene-js .revelar > .tarjeta:nth-child(4) { transition-delay: 270ms; }
html.tiene-js .revelar .tarjeta,
html.tiene-js .revelar .caso,
html.tiene-js .revelar .tarjeta-video {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease, border-color var(--transicion);
}
html.tiene-js .revelar.visible .tarjeta,
html.tiene-js .revelar.visible .caso,
html.tiene-js .revelar.visible .tarjeta-video { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.tiene-js .revelar,
  html.tiene-js .revelar .tarjeta,
  html.tiene-js .revelar .caso,
  html.tiene-js .revelar .tarjeta-video { opacity: 1; transform: none; }
  .cinemascope__rec i { animation: none; }
  .marco__rec i { animation: none; }
  .hero__scroll span { animation: none; }
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .grilla-videos { grid-template-columns: repeat(3, 1fr); }
  .grilla-tarjetas { grid-template-columns: repeat(2, 1fr); }
  .grilla-metricas { grid-template-columns: repeat(2, 1fr); }
  .grilla-marcas { grid-template-columns: repeat(3, 1fr); }
  .grilla-formatos { grid-template-columns: repeat(2, 1fr); }
  .formato--estrella { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .hero__interior { grid-template-columns: 1.15fr .85fr; }
  .marco--hero { margin-inline: 0 auto; }
  .seccion { padding: 7rem 0; }
  .seccion-partida { grid-template-columns: 1.1fr .9fr; gap: 4rem; }
  .grilla-tarjetas { grid-template-columns: repeat(4, 1fr); }
  .grilla-metricas { grid-template-columns: repeat(3, 1fr); }
  .grilla-casos { grid-template-columns: repeat(3, 1fr); }
  .grilla-formatos { grid-template-columns: repeat(4, 1fr); }
  .formato--estrella { grid-column: span 2; grid-row: span 2; }
  .contacto { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
  .grilla-marcas { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
  .seccion { padding: 8rem 0; }
}