/* ================================
   VARIABLES Y RESET
   ================================ */
:root {
  --negro:          #0D0D0D;
  --negro-suave:    #161616;
  --negro-card:     #111111;
  --acento:         #5BBF3A;
  --acento-claro:   #72D44E;
  --acento-texto:   #0D0D0D;
  --neon-verde:     #5BBF3A;
  --blanco:         #F5F5F5;
  --gris:           #888888;
  --gris-suave:     #2A2A2A;
  --fuente-titulo:  'Bebas Neue', sans-serif;
  --fuente-cuerpo:  'Inter', sans-serif;
  --radio:          3px;
  --transicion:     0.3s ease;
  --sombra:         0 8px 32px rgba(0, 0, 0, 0.5);
  --max-ancho:      1200px;
  --padding-lateral: 2rem;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 124px;
}

body {
  background-color: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }


/* ================================
   UTILIDADES GLOBALES
   ================================ */
.seccion__etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.875rem;
}

.seccion__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--blanco);
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.55);
}

/* Palabra de acento dentro de un título de sección (familia del hero) */
.seccion__titulo-acento,
.seccion__titulo-acento .char {
  /* Relleno sólido oscuro (igual que el acento del hero) en vez de transparente:
     evita que el vídeo/imagen del fondo se transparente por dentro de las letras
     y se vea sucio, especialmente en móvil. */
  color: var(--acento-texto);
  -webkit-text-stroke: 1.5px var(--acento);
  /* Sin la sombra negra del título: con relleno oscuro, esa sombra se fundía con
     la letra y creaba un manchón oscuro alrededor del acento. El glow verde
     (drop-shadow) ya da separación. */
  text-shadow: none;
}
.seccion__titulo-acento {
  filter: drop-shadow(0 0 7px rgba(91, 191, 58, 0.32));
}

.boton {
  display: inline-block;
  padding: 1rem 2.75rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
  border-radius: var(--radio);
}

.boton--principal {
  background-color: var(--acento);
  color: var(--negro);
}

.boton--principal:hover {
  background-color: var(--acento-claro);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(91, 191, 58, 0.35);
}

.boton--ancho {
  width: 100%;
  text-align: center;
}


/* ================================
   FONDO ROTANTE (slideshow de imágenes)
   ================================ */
.bg-rotante {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-rotante__capa {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.bg-rotante__capa.activa {
  opacity: 1;
}


/* ================================
   ANIMACIONES DE SCROLL
   ================================ */
/* ── Grain texture global ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── Animaciones de scroll ── */
.revelar {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.2, 1, 0.4, 1),
              transform 0.85s cubic-bezier(0.2, 1, 0.4, 1);
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

/* ── Splitting.js — Hero título ── */
.hero__titulo .char {
  display: inline-block;
  animation: charEntrada 0.7s cubic-bezier(0.2, 1, 0.4, 1) both;
  animation-delay: calc(var(--char-index) * 0.028s + 0.25s);
}

@keyframes charEntrada {
  from {
    opacity: 0;
    transform: translateY(0.55em);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ── Splitting.js — Títulos de sección on scroll ── */
.revelar .seccion__titulo .char,
.revelar .metodo__intro-titulo .char,
.revelar .metodo__titulo .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.55s cubic-bezier(0.2, 1, 0.4, 1),
              transform 0.55s cubic-bezier(0.2, 1, 0.4, 1);
  transition-delay: calc(var(--char-index) * 0.022s + 0.1s);
}

.revelar.visible .seccion__titulo .char,
.revelar.visible .metodo__intro-titulo .char,
.revelar.visible .metodo__titulo .char {
  opacity: 1;
  transform: none;
}

/* ── VanillaTilt — Asegurar que el transform no interfiere con otros efectos ── */
.metodo__paso[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}


/* ================================
   NAVEGACIÓN
   ================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 0;
  transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.nav.scrolleado {
  background-color: rgba(13, 13, 13, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav__contenedor {
  width: 100%;
  padding: 0 4%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--blanco);
  transition: color var(--transicion);
  gap: 1px;
}

.nav__logo:hover { color: var(--acento); }

.nav__logo-img {
  height: 64px;
  width: auto;
  display: block;
}

.nav__logo-fran {
  font-family: var(--fuente-titulo);
  font-size: 1.65rem;
  display: block;
}

.nav__logo-apellido {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--acento-texto);
  display: block;
  transition: color var(--transicion);
}

.nav__logo:hover .nav__logo-apellido {
  color: var(--blanco);
  -webkit-text-stroke: 0.15px var(--neon-verde);
}

.nav__menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 5%;
}

.nav__link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--transicion);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--acento);
  transition: width var(--transicion);
}

.nav__link:hover { color: var(--blanco); }
.nav__link:hover::after { width: 100%; }

.nav__link--cta {
  background-color: var(--acento);
  color: var(--negro) !important;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radio);
  font-weight: 600;
}

.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background-color: var(--acento-claro); }

.nav__hamburguesa {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}

.nav__hamburguesa span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--blanco);
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 1px;
}

.nav__hamburguesa.activo span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburguesa.activo span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburguesa.activo span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* ================================
   HERO
   ================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--negro);
  overflow: hidden;
}

.hero__video-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vídeo vertical 9:16: en PC se recorta arriba/abajo, encuadramos al sujeto (centro) */
  object-position: center 45%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    125deg,
    rgba(13, 13, 13, 0.82) 0%,
    rgba(13, 13, 13, 0.5) 55%,
    rgba(13, 13, 13, 0.72) 100%
  );
}

.hero__contenido {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  padding: 7rem 4% 6rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 100vh;
}

.hero__texto {
  max-width: 420px;
}

/* Caja contenedora (solo activa en móvil via media query) */
.hero__caja {
  display: contents; /* en desktop no existe visualmente */
}

/* Desktop: figura en el tercio izquierdo del hero */
.hero__figura {
  position: absolute;
  bottom: 0;
  left: 15%;
  right: auto;
  z-index: 2;
  pointer-events: none;
  transform: none;
}

.hero__figura-img {
  height: 106vh;
  max-height: 920px;
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(-12px 0 32px rgba(91, 191, 58, 0.1));
  user-select: none;
  display: block;
}

.hero__etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.5rem;
  animation: desvanecer-arriba 0.8s ease 0.2s both;
}

.hero__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.93;
  letter-spacing: 0.02em;
  color: var(--blanco);
  margin-bottom: 1.75rem;
  max-width: 750px;
  animation: desvanecer-arriba 0.8s ease 0.4s both;
}

.hero__subtitulo {
  display: inline-block;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 400;
  color: rgba(245, 245, 245, 0.92);
  max-width: 480px;
  margin-bottom: 2.75rem;
  line-height: 1.8;
  animation: desvanecer-arriba 0.8s ease 0.6s both;
  background: rgba(13, 13, 13, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 3px solid var(--acento);
  padding: 0.875rem 1.25rem;
  border-radius: 0 var(--radio) var(--radio) 0;
}

.hero__titulo-principal {
  display: block;
  font-size: 0.78em;
}

.hero__titulo-acento {
  display: block;
  color: var(--acento-texto);
  -webkit-text-stroke: 1px var(--neon-verde);
  margin-top: 0.5rem;
}

.hero__contenido .boton {
  animation: desvanecer-arriba 0.8s ease 0.8s both;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero__scroll-linea {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--acento), transparent);
  animation: pulso-linea 2.2s ease-in-out infinite;
}

@keyframes desvanecer-arriba {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulso-linea {
  0%, 100% { opacity: 0.3; transform: scaleY(0.9); }
  50%       { opacity: 1;   transform: scaleY(1); }
}


/* ================================
   PRESENTACIÓN — VÍDEO DIRECTO DE FRAN
   Móvil: tarjeta de vídeo vertical suelta.
   Escritorio: el mismo vídeo (propio, mp4 alojado) dentro de un
   iPhone 17 Pro Max (PNG real, marco transparente).
   Al ser vídeo propio (no YouTube) el object-fit:cover funciona de
   verdad: sin bandas negras y sin ninguna interfaz ajena que se
   pueda cortar — el único control es el botón de sonido propio.
   ================================ */
.presentacion {
  position: relative;
  background: var(--negro);
  padding: 7rem 0;
  overflow: hidden;
}

.presentacion__contenedor {
  position: relative;
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.presentacion__texto { max-width: 460px; }

.presentacion__sub {
  color: rgba(245, 245, 245, 0.72);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 2.25rem;
}

.presentacion__media {
  display: flex;
  justify-content: center;
}

/* ── Marco del iPhone 17 Pro Max (PNG real, transparente) ──
   Pantalla encajada según el hueco medido en el propio archivo
   (389×800px): inset horizontal ~4.1-4.4%, vertical ~1.6-1.75%. */
.presentacion__telefono {
  position: relative;
  width: clamp(270px, 24vw, 350px);
  aspect-ratio: 389 / 800;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 34px rgba(91, 191, 58, 0.08));
}

.presentacion__marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.presentacion__pantalla {
  position: absolute;
  top: 1.75%;
  bottom: 1.625%;
  left: 4.37%;
  right: 4.11%;
  border-radius: 13% / 6%;
  overflow: hidden;
  background: var(--negro-card);
  /* Fondo difuminado (versión borrosa del propio vídeo) detrás del
     hueco que deja el "contain": en vez de una banda negra a secas,
     es una continuación de la propia imagen — el mismo truco que usa
     Instagram/YouTube para vídeo vertical que no encaja en la pantalla. */
  background-image: url("../img/presentacion-fran-fondo.jpg");
  background-size: cover;
  background-position: center;
}

.presentacion__video {
  width: 100%;
  height: 100%;
  /* "contain", sin recortar: el vídeo tiene tarjetas de B-roll pegadas
     al borde derecho Y subtítulos que llegan a ambos bordes en
     distintos momentos — cualquier recorte (lo sesgues hacia donde
     lo sesgues) acaba cortando tarjetas o palabras en algún punto de
     los 2 minutos. Con "contain" se ve el fotograma completo siempre;
     el hueco sobrante arriba/abajo queda del mismo negro que la
     pantalla, así que apenas se nota. */
  object-fit: contain;
  background: transparent;
  display: block;
}

/* ── Botón de play (estado antes de reproducir) ──
   Una vez arrancado el vídeo se queda oculto para siempre (hasta que
   termine), para no taparle los controles nativos al usuario. */
.presentacion__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  transition: opacity var(--transicion);
}

.presentacion__pantalla.is-playing .presentacion__play {
  opacity: 0;
  pointer-events: none;
}

.presentacion__play-icono {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.55);
  border: 1.5px solid rgba(245, 245, 245, 0.4);
  border-radius: 50%;
  color: var(--blanco);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: transform var(--transicion), background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.presentacion__play-icono svg { margin-left: 3px; }

.presentacion__play:hover .presentacion__play-icono {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--acento);
  border-color: var(--acento);
  color: var(--negro);
}

@media (max-width: 900px) {
  .presentacion__contenedor { gap: 2.5rem; }
}

@media (max-width: 768px) {
  .presentacion { padding: 5rem 0; }

  .presentacion__contenedor {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .presentacion__texto { max-width: 100%; }

  .presentacion__texto .boton { margin: 0 auto; }

  /* En móvil no hace falta el marco de "teléfono": el vídeo vertical
     ya funciona de forma nativa, así que se muestra como tarjeta suelta. */
  .presentacion__telefono {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 9 / 16;
    filter: none;
    box-shadow: var(--sombra);
    border-radius: 1.25rem;
  }

  .presentacion__marco { display: none; }

  .presentacion__pantalla {
    inset: 0;
    border-radius: 1.25rem;
  }
}


/* ================================
   MÉTODO CÚSPIDE
   ================================ */
.metodo {
  background: var(--negro);
  overflow: hidden;
}

.metodo__intro {
  position: relative;
  height: 80vh;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  text-align: left;
  padding-left: clamp(2rem, 6vw, 7rem);
}

.metodo__intro-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.metodo__intro-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Foto vertical de Fran de espaldas: la mostramos a la derecha (su cuerpo),
     dejando el lado izquierdo —mar/cielo— para el texto. */
  object-position: right 42%;
  display: block;
}

.metodo__intro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,13,13,0.65) 0%,
    rgba(13,13,13,0.72) 50%,
    rgba(13,13,13,0.92) 100%
  );
}

.metodo__intro-contenido {
  position: relative;
  z-index: 2;
  max-width: 60%;
}

.metodo__intro-titulo {
  display: flex;
  flex-direction: column;
  line-height: 1.0;
  margin: 0.75rem 0 1.25rem;
}

.metodo__intro-linea1 {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--blanco);
  letter-spacing: 0.25em;
  opacity: 0.55;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.metodo__intro-linea2 {
  font-family: var(--fuente-titulo);
  font-size: clamp(5rem, 14vw, 12rem);
  color: var(--blanco);
  letter-spacing: 0.04em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
  /* margen proporcional para compensar la tilde de É */
  margin-top: 0.07em;
}

.metodo__intro-linea3 {
  font-family: var(--fuente-titulo);
  font-size: clamp(5rem, 14vw, 12rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--acento);
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 8px rgba(91, 191, 58, 0.35));
  /* margen extra para que Ú no se solape con É de la línea anterior */
  margin-top: 0.09em;
}

.metodo__intro-sub {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(245, 245, 245, 0.88);
  line-height: 1.7;
  margin-top: 1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.metodo__intro-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

@media (max-width: 768px) {
  .metodo__intro {
    height: 70vh;
    min-height: 440px;
  }

  .metodo__intro-linea2,
  .metodo__intro-linea3 {
    font-size: clamp(4rem, 18vw, 7rem);
  }

  /* En móvil los márgenes em se escalan con la fuente — se mantienen proporcionales */
  .metodo__intro-linea2 { margin-top: 0.06em; }
  .metodo__intro-linea3 { margin-top: 0.08em; }
}

/* Bloques de pasos */
.metodo__pasos {
  position: relative;
}

.metodo__paso {
  position: relative;
  height: 52vh;
  min-height: 300px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 100%);
  margin-bottom: -25px;
}

.metodo__paso-fondo {
  position: absolute;
  inset: 0;
}

.metodo__paso-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.metodo__paso-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.68);
}

/* Contenido de cada paso — escalonado hacia la derecha */
.metodo__paso-contenido {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 2rem;
  margin-left: 5%;
}

.metodo__paso--medio .metodo__paso-contenido {
  margin-left: 33%;
}

.metodo__paso--final .metodo__paso-contenido {
  margin-left: 61%;
}

.metodo__numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(4rem, 7vw, 6rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acento);
  line-height: 1;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 6px rgba(91, 191, 58, 0.4));
}

.metodo__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--blanco);
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0.2rem 0 0.5rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

.metodo__texto {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(245, 245, 245, 0.92);
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  max-width: 340px;
}

/* Fondo compartido: cima + servicios */
.zona-showcase {
  position: relative;
  overflow: hidden;
}

/* Vídeo de fondo de la zona showcase */
.zona-showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  filter: blur(3px);
  transform: scale(1.03);
}

.zona-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(13, 13, 13, 0.74);
  pointer-events: none;
}

/* Bloque final — TU CÚSPIDE */
.metodo__cima {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem var(--padding-lateral) 4rem;
  position: relative;
  z-index: 2;
}

.metodo__cima-tu {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  color: rgba(245, 245, 245, 0.55);
  letter-spacing: 0.6em;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.metodo__cima-nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(5rem, 12vw, 10rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--acento);
  letter-spacing: 0.04em;
  line-height: 1.0;
  margin-bottom: 0.5rem;
  display: block;
  filter: drop-shadow(0 0 12px rgba(91, 191, 58, 0.3));
}

.sobre-mi__credenciales {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gris-suave);
  flex-wrap: wrap;
}

.credencial {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.credencial__numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--acento-texto);
  -webkit-text-stroke: 0.2px var(--neon-verde);
  line-height: 1;
  letter-spacing: 0.02em;
}

.credencial__texto {
  font-size: 0.72rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  max-width: 110px;
  line-height: 1.4;
}


/* ================================
   SERVICIOS
   ================================ */
.servicios {
  padding: 4.5rem 0;
  position: relative;
  z-index: 2;
}

.servicios__contenedor {
  position: relative;
  z-index: 1;
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
}

.servicios__cabecera {
  text-align: center;
  margin-bottom: 2.75rem;
}

/* Items de servicios */
.servicios__items {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gris-suave);
  border-radius: var(--radio);
  overflow: hidden;
}

.servicio-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 1.1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--blanco);
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* scan-line en hover */
.servicio-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(91, 191, 58, 0.07), transparent);
  pointer-events: none;
}

.servicio-item:hover::after {
  animation: barridoItem 0.55s ease forwards;
}

@keyframes barridoItem {
  from { left: -60%; }
  to   { left: 160%; }
}

.servicio-item:hover {
  background-color: rgba(91, 191, 58, 0.04);
}

.servicio-item__sep {
  width: 1px;
  background: var(--gris-suave);
  flex-shrink: 0;
}

.servicio-item__num {
  font-family: var(--fuente-titulo);
  font-size: 0.85rem;
  color: var(--gris);
  letter-spacing: 0.3em;
}

.servicio-item__icono {
  width: 48px;
  height: 48px;
  color: var(--acento);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.servicio-item__icono svg {
  width: 100%;
  height: 100%;
}

.servicio-item:hover .servicio-item__icono {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(91, 191, 58, 0.55));
}

.servicio-item__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  letter-spacing: 0.04em;
  color: var(--blanco);
  line-height: 1.1;
}

.servicio-item__flecha {
  font-size: 1rem;
  color: var(--acento);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.servicio-item:hover .servicio-item__flecha {
  opacity: 1;
  transform: translateY(0);
}

.servicio-item--estrella {
  background-color: rgba(91, 191, 58, 0.03);
}

.servicio-item--estrella::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--acento);
}

.servicio-item__badge-inline {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid rgba(91, 191, 58, 0.4);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}

/* ================================
   MODAL DE SERVICIOS
   ================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.activo {
  opacity: 1;
  pointer-events: all;
}

.modal-servicio {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  z-index: 1101;
  width: min(720px, 92vw);
  max-height: none;
  height: auto;
  border: 1px solid rgba(91, 191, 58, 0.35);
  /* El modal NO scrollea; scrollea su cuerpo. Así la X (fuera del cuerpo) queda
     siempre visible y no se pierde al desplazar el contenido. */
  display: flex;
  flex-direction: column;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(91, 191, 58, 0.08);
  text-align: center;
}

.modal-servicio[hidden] { display: flex; } /* hidden gestionado por opacity/pointer-events */

/* Cuerpo desplazable: aquí va el padding y el scroll; la X queda fuera y fija */
.modal-servicio__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding: 3.5rem 2.75rem 3rem;
}

.modal-servicio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--acento), transparent);
}

.modal-servicio.activo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}

.modal-servicio__cerrar {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2; /* siempre por encima del cuerpo desplazable */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--gris-suave);
  color: var(--gris);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), transform var(--transicion);
}

.modal-servicio__cerrar svg { width: 14px; height: 14px; }

.modal-servicio__cerrar:hover {
  border-color: var(--acento);
  color: var(--acento);
  transform: rotate(90deg);
}

.modal-servicio__num {
  font-family: var(--fuente-titulo);
  font-size: 0.78rem;
  color: rgba(91, 191, 58, 0.7);
  letter-spacing: 0.4em;
  margin-bottom: 1.5rem;
}

.modal-servicio__icono {
  width: 64px;
  height: 64px;
  color: var(--acento);
  margin: 0 auto 1.75rem;
  filter: drop-shadow(0 0 14px rgba(91, 191, 58, 0.45));
}

.modal-servicio__icono svg {
  width: 100%;
  height: 100%;
}

.modal-servicio__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--blanco);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.modal-servicio__texto {
  font-size: 0.95rem;
  color: rgba(245, 245, 245, 0.7);
  line-height: 1.85;
  max-width: 380px;
  margin: 0 auto 2.25rem;
}

/* Subtítulo del servicio (p. ej. "Método Cúspide") */
.modal-servicio__subtitulo {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.45rem;
  letter-spacing: 0.1em;
  /* Verde de marca: antes era --acento-texto (#0D0D0D, casi negro) y quedaba
     invisible sobre el fondo oscuro del modal. */
  color: var(--acento);
  margin-bottom: 1.1rem;
}

/* Lista de prestaciones del servicio */
.modal-servicio__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.modal-servicio__lista li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: rgba(245, 245, 245, 0.78);
  line-height: 1.5;
}

.modal-servicio__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento);
}

/* Párrafo simple (servicios sin lista) */
.modal-servicio__parrafo {
  margin: 0;
}

.modal-servicio__cta {
  display: inline-block;
}

/* Modal como bottom-sheet en móvil */
@media (max-width: 640px) {
  .modal-servicio {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(110%);
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .modal-servicio__cuerpo {
    padding: 2.5rem 1.5rem 2.5rem;
  }

  .modal-servicio.activo {
    transform: translateY(0);
  }
}



/* ================================
   EVOLUCIÓN — TIMELINE VERTICAL
   ================================ */
/* ══════════════════════════════════════════
   EVOLUCIÓN — Cronología horizontal
   ══════════════════════════════════════════ */
.evolucion {
  background: #131313;
  padding: 7rem 0 5.5rem;
  overflow: hidden;
}

.evolucion__cabecera {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}

.evolucion__intro {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* ══════════════════════════════════════════════
   CRONOLOGÍA — TORRE DE PESOS
   Foto protagonista · texto · torre (controlador)
   Cada año = una placa. El pin marca el año activo
   y se "levanta" el bloque acumulado hasta él.
══════════════════════════════════════════════ */
.crono-torre {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  max-width: 1140px;
  margin: 0 auto;
}

/* ── Foto protagonista ── */
.crono-torre__foto-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0;
  justify-self: end;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;             /* contiene el blend del grado de color */
  background: #0c0c0c;            /* fondo bajo la foto durante el barrido */
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(91, 191, 58, 0.05);
}

/* Velo inferior (para el badge) + viñeta perimetral */
.crono-torre__foto-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10, 12, 10, 0.85) 0%, transparent 30%),
    radial-gradient(130% 108% at 50% 36%, transparent 52%, rgba(5, 11, 6, 0.55) 100%);
}

/* Filo de acento inferior */
.crono-torre__foto-wrap::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--acento);
  z-index: 3;
}

.crono-torre__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* grado base: un punto más de contraste y color para igualar fotos dispares */
  filter: contrast(1.06) saturate(1.08) brightness(1.01);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 1, 0.4, 1);
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: clip-path;
}

/* Fallback sin GSAP */
.crono-torre__img.saliendo {
  opacity: 0;
  transform: scale(1.04);
}

/* Grado de color de marca (tinte cohesivo) sobre la foto */
.crono-torre__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
  background: linear-gradient(150deg,
    rgba(120, 210, 90, 0.55) 0%,
    rgba(30, 60, 45, 0.15) 42%,
    rgba(0, 28, 40, 0.55) 100%);
}

/* Barrido de luz verde en la transición de foto */
.crono-torre__barrido {
  position: absolute;
  top: -4%;
  bottom: -4%;
  left: 0;
  width: 16%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 191, 58, 0.0) 28%,
    rgba(150, 255, 100, 0.6) 50%,
    rgba(91, 191, 58, 0.0) 72%,
    transparent 100%);
  filter: blur(1px);
}

.crono-torre__badge-wrap {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
}

.crono-torre__badge {
  display: inline-block;
  background: var(--acento);
  color: var(--negro);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(91, 191, 58, 0.35);
}

/* ── Columna de texto ── */
.crono-torre__detalle {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.crono-torre__chip {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(3.4rem, 6vw, 5rem);
  color: var(--acento);
  line-height: 0.9;
  display: block;
  letter-spacing: 0.01em;
}

.crono-torre__titulo {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: #fff;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0.25rem 0 0;
}

.crono-torre__linea {
  width: 44px;
  height: 2px;
  background: var(--acento);
  margin: 0.75rem 0 0.25rem;
  border-radius: 2px;
}

.crono-torre__texto {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
  max-width: 36ch;
}

/* Botones de navegación ↑ ↓ */
.crono-torre__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.crono-torre__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.crono-torre__btn:hover { background: var(--acento); border-color: var(--acento); color: var(--negro); }
.crono-torre__btn:disabled { opacity: 0.2; pointer-events: none; }

/* ══════════════════════════════════════════════
   LA MÁQUINA (bastidor SVG + pila de placas)
   Fondo (guías) detrás · placas en medio · marco delante
══════════════════════════════════════════════ */
.crono-torre__maquina {
  --placa-ancho: 150px;
  --placa-alto: 46px;
  --lift: 38px;
  position: relative;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5));
}

/* Bastidor vectorial (dos capas que envuelven la pila) */
.crono-torre__bastidor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--placa-ancho);
  height: 512px;
  pointer-events: none;
}
.crono-torre__bastidor--fondo  { z-index: 0; }  /* guías, detrás de las placas */
.crono-torre__bastidor--frente { z-index: 3; }  /* travesaño y base, delante */

/* Pila de placas — capa central; deja eje arriba (travesaño) y hueco abajo (base) */
.crono-torre__stack {
  position: relative;
  z-index: 2;
  margin: 60px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Cada placa = un año — hierro fundido con relieve */
.crono-torre__placa {
  position: relative;
  width: var(--placa-ancho);
  height: var(--placa-alto);
  border: 1px solid #0e0e0e;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 14%),
    linear-gradient(180deg, #343434 0%, #272727 46%, #1c1c1c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 2px rgba(0, 0, 0, 0.55),
    0 3px 5px rgba(0, 0, 0, 0.5);              /* sombra de contacto entre placas */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  cursor: pointer;
  /* el movimiento (y/x) lo controla GSAP; aquí solo material */
  transition: box-shadow 0.3s, background 0.3s;
}

/* Fallback sin GSAP: las placas cargadas se levantan en bloque */
.crono-torre__placa.cargada {
  transform: translateY(calc(-1 * var(--lift)));
}

/* La placa activa: borde verde + más luz + glow */
.crono-torre__placa.es-activa {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 16%),
    linear-gradient(180deg, #3e3e3e 0%, #2c2c2c 50%, #202020 100%);
  box-shadow:
    inset 0 0 0 1px rgba(91, 191, 58, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 20px rgba(91, 191, 58, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.55);
}

.crono-torre__placa:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 16%),
    linear-gradient(180deg, #3a3a3a, #242424);
}

/* Capa que recorta el barrido de luz dentro de la placa */
.crono-torre__placa-luz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}
.crono-torre__placa-sheen {
  position: absolute;
  inset: -4px;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.25) 49%,
    rgba(180, 255, 150, 0.18) 51%,
    transparent 62%);
}

/* Envoltorio interno (animación de montaje, separada del lift) */
.crono-torre__placa-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

/* Año grabado (hueco) en la placa */
.crono-torre__placa-anio {
  font-family: 'Bebas Neue', cursive;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: rgba(91, 191, 58, 0.38);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);     /* grabado */
  transition: color 0.3s, text-shadow 0.3s;
}
.crono-torre__placa.cargada .crono-torre__placa-anio { color: rgba(91, 191, 58, 0.72); }
.crono-torre__placa.es-activa .crono-torre__placa-anio {
  color: var(--acento);
  text-shadow: 0 0 10px rgba(91, 191, 58, 0.6);
}

/* Agujeros del selector: una columna por el centro de cada placa */
.crono-torre__placa-hueco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #060606 0%, #1a1a1a 100%);
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.85),
              0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 2;
}

/* El pin selector — esfera metálica verde clavada en el centro de la placa
   (GSAP controla scale/opacity) */
.crono-torre__placa-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -11px 0 0 -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #d4ffb0 0%, #8fe85f 28%, var(--acento) 60%, #2e7a18 100%);
  box-shadow:
    0 0 14px rgba(91, 191, 58, 0.6),
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 -3px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
/* Brillo especular del pin */
.crono-torre__placa-pin::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  filter: blur(0.4px);
}
/* Fallback sin GSAP: mostrar el pin de la placa activa */
.crono-torre__placa.es-activa .crono-torre__placa-pin { opacity: 1; }

/* ── Arrastrar el pin para elegir año ── */
.crono-torre__placa.es-activa .crono-torre__placa-pin {
  pointer-events: auto;
  cursor: grab;
}
.crono-torre__maquina.arrastrando,
.crono-torre__maquina.arrastrando .crono-torre__placa.es-activa .crono-torre__placa-pin {
  cursor: grabbing;
}
/* Pin fantasma que sigue al cursor durante el arrastre */
.crono-torre__pin-fantasma {
  top: 0;
  margin-top: 0;
  transform: translateY(-50%);
  display: none;
  opacity: 1;
  z-index: 6;
  pointer-events: none;
}
/* Durante el arrastre, atenúa la activa anterior para que solo destaque el preview */
.crono-torre__maquina.arrastrando .crono-torre__placa.es-activa:not(.preview) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              inset 0 -2px 2px rgba(0, 0, 0, 0.55),
              0 3px 5px rgba(0, 0, 0, 0.5);
}
.crono-torre__maquina.arrastrando .crono-torre__placa.es-activa:not(.preview) .crono-torre__placa-anio {
  color: rgba(91, 191, 58, 0.72);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* Placa resaltada bajo el cursor mientras arrastras */
.crono-torre__placa.preview {
  box-shadow: inset 0 0 0 1px rgba(91, 191, 58, 0.55),
              0 0 14px rgba(91, 191, 58, 0.18);
}
.crono-torre__placa.preview .crono-torre__placa-anio { color: var(--acento); }

/* Montaje placa a placa al entrar en la sección */
@keyframes montajePlaca {
  0%   { opacity: 0; transform: translateY(-20px); }
  70%  { transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.crono-torre.revelar.visible .crono-torre__placa-inner {
  animation: montajePlaca 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 0.07s + 0.15s);
}

/* ══════════════════════════════════════════════
   RUEDA DE AÑOS — controlador compacto (SOLO MÓVIL)
   En escritorio manda la torre de poleas y la rueda
   está oculta; en móvil se invierte (ver media query).
══════════════════════════════════════════════ */
.crono-torre__chevron--h { display: none; }   /* escritorio: flechas verticales */

.crono-circ__anillo-wrap {
  display: none;                 /* escritorio: oculto */
  position: relative;
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  --radio: 72px;
  opacity: 0.9;
}

/* Marcador fijo de posición activa (6 en punto) */
.crono-circ__anillo-wrap::after {
  content: '';
  position: absolute;
  bottom: calc(50% - var(--radio) - 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  box-shadow: 0 0 12px rgba(91, 191, 58, 0.5);
  pointer-events: none;
  z-index: 3;
}

.crono-circ__anillo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cada año como punto en el anillo */
.crono-circ__hito {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--radio)));
}

.crono-circ__hito-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  top: -3.5px;
  left: -3.5px;
  transition: all 0.3s;
}

.crono-circ__hito.activo .crono-circ__hito-dot {
  border-color: var(--acento);
  background: var(--acento);
  width: 9px;
  height: 9px;
  top: -4.5px;
  left: -4.5px;
  box-shadow: 0 0 11px rgba(91, 191, 58, 0.55);
}

/* Año como etiqueta radial (se contrarota para quedar erguido) */
.crono-circ__hito-label {
  position: absolute;
  font-family: 'Bebas Neue', cursive;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.22);
  white-space: nowrap;
  transform: translateX(-50%) translateY(-18px) rotate(var(--counter, 0deg));
  transition: color 0.3s;
  pointer-events: none;
}

.crono-circ__hito.activo .crono-circ__hito-label { color: var(--acento); }

/* Dots de paginación */
.crono-circ__dots {
  display: none;                 /* escritorio: oculto */
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.crono-circ__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.25s, transform 0.25s;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.crono-circ__dot.activo {
  background: var(--acento);
  transform: scale(1.6);
}

/* ══════════════════════════════════════════════
   EVOLUCIÓN EN MÓVIL / TABLET
   La máquina de poleas (perfecta en PC) se sustituye
   por la rueda de años, más cómoda en pantalla táctil.
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .crono-torre {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 0 1.25rem;
    justify-items: center;
  }

  .crono-torre__foto-wrap {
    order: 1;
    max-width: 360px;
    justify-self: center;
  }

  .crono-torre__detalle {
    order: 2;
    align-items: center;
    text-align: center;
    max-width: 420px;
  }
  .crono-torre__linea { margin-left: auto; margin-right: auto; }
  .crono-torre__texto { max-width: 44ch; }

  /* La torre de poleas se oculta en móvil; manda la rueda */
  .crono-torre__maquina { display: none; }

  /* Nav = flecha · rueda · flecha, centrado */
  .crono-torre__nav {
    order: 3;
    margin-top: 0.5rem;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
  }
  .crono-torre__chevron--v { display: none; }
  .crono-torre__chevron--h { display: block; }

  .crono-circ__anillo-wrap {
    display: block;
    --radio: 64px;
    width: 150px;
    height: 150px;
  }

  .crono-circ__dots {
    order: 4;
    display: flex;
    margin-top: 0.25rem;
  }
}

/* ── Cierre ── */
.evolucion__cierre {
  text-align: center;
  padding-top: 3.5rem;
  max-width: 600px;
  margin: 0 auto;
  padding-left: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
}
.evolucion__frase {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.75rem;
}


/* ══════════════════════════════════════════════
   GALERÍA MISTER ESPAÑA 2025 — carrusel horizontal
   Filmstrip premium con scroll-snap + drag (escritorio)
   y swipe nativo (móvil). Acabado superior al resto.
══════════════════════════════════════════════ */
.galeria-mister {
  max-width: var(--max-ancho);
  margin: 5rem auto 0;
  padding: 0 var(--padding-lateral);
}

.galeria-mister__cabecera {
  text-align: center;
  margin-bottom: 2.25rem;
}
.galeria-mister__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-top: 0.4rem;
}

.galeria-mister__carrusel {
  /* Full-bleed: ocupa todo el ancho de la ventana aunque el contenedor esté centrado */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;         /* suave: no "pelea" con el ratón/rueda */
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;     /* swipe fluido en iOS */
  cursor: grab;
}
.galeria-mister__carrusel::-webkit-scrollbar { display: none; }
.galeria-mister__carrusel.arrastrando { cursor: grabbing; scroll-snap-type: none; }
/* En táctil sí queremos el snap firme al deslizar */
@media (hover: none) and (pointer: coarse) {
  .galeria-mister__carrusel { scroll-snap-type: x mandatory; }
}

.galeria-mister__pista {
  display: flex;
  gap: 1.25rem;
  padding: 0.5rem 0;                      /* el padding lateral lo fija el JS para centrar 1ª/última */
  width: max-content;
}

.galeria-mister__item {
  position: relative;
  flex: 0 0 auto;
  height: clamp(420px, 58vh, 600px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  scroll-snap-align: center;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.4, 1), box-shadow 0.5s, border-color 0.4s;
}
.galeria-mister__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.galeria-mister__item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 8, 0.82) 0%, transparent 38%);
}
.galeria-mister__item:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 191, 58, 0.4);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(91, 191, 58, 0.12);
}
.galeria-mister__item--destacado { border-color: rgba(91, 191, 58, 0.45); }

.galeria-mister__cap {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.galeria-mister__cap::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--acento);
  vertical-align: middle;
  margin-right: 0.5rem;
}

.galeria-mister__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 1.75rem;
}
.galeria-mister__flecha {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.galeria-mister__flecha:hover { background: var(--acento); border-color: var(--acento); color: #0d0d0d; }

/* Tarjeta de vídeo (botón) + botón de play */
button.galeria-mister__item {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.galeria-mister__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  color: #0d0d0d;
  background: var(--acento);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(91, 191, 58, 0.18);
  transition: transform 0.35s cubic-bezier(0.2, 1, 0.4, 1), box-shadow 0.35s;
}
.galeria-mister__item--video:hover .galeria-mister__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 12px rgba(91, 191, 58, 0.22);
}

/* Lightbox de vídeo */
.lightbox-video {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 8, 6, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox-video[hidden] { display: flex; }   /* visibilidad gestionada por opacity */
.lightbox-video.activo { opacity: 1; pointer-events: auto; }
.lightbox-video__marco {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(91, 191, 58, 0.12);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.2, 1, 0.4, 1);
}
.lightbox-video.activo .lightbox-video__marco { transform: scale(1); }
.lightbox-video__el { width: 100%; height: 100%; display: block; }
.lightbox-video__cerrar {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lightbox-video__cerrar svg { width: 18px; height: 18px; }
.lightbox-video__cerrar:hover { background: var(--acento); border-color: var(--acento); color: #0d0d0d; }

@media (max-width: 768px) {
  .galeria-mister { margin-top: 3.5rem; padding: 0; }
  .galeria-mister__cabecera { padding: 0 var(--padding-lateral); }
  .galeria-mister__pista {
    gap: 4vw;
    padding: 0.5rem 0;
  }
  .galeria-mister__item {
    height: auto;
    width: 78vw;
  }
  .galeria-mister__cap { font-size: 0.95rem; }
}


/* ══════════════════════════════════════════════
   AVAL · MISTER ESPAÑA 2025
   Franja editorial sobria: clímax del recorrido.
   Foto oficial tratada + credencial. Un detalle,
   con peso, dentro del lenguaje del sitio.
══════════════════════════════════════════════ */
.aval {
  max-width: 940px;
  margin: 3rem auto 0;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Figura recortada (cutout) que emerge del negro */
.aval__figura {
  position: relative;
  margin: 0;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}
.aval__cutout-wrap {
  position: relative;
  z-index: 2;
  height: 480px;
  display: flex;
  justify-content: flex-start;
  /* Corte a medio muslo + fundido a negro: la figura se disuelve en el fondo */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 94%);
}
.aval__cutout {
  height: 620px;
  width: auto;
  filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.55));
  transition: transform 0.8s ease;
}
.aval:hover .aval__cutout { transform: translateY(-5px); }
/* Foco de luz neutro tras el torso (luz de escenario, no mancha) */
.aval__spot {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 50% at 34% 34%, rgba(245, 245, 245, 0.11), rgba(245, 245, 245, 0) 60%),
    radial-gradient(ellipse 40% 30% at 34% 88%, rgba(91, 191, 58, 0.10), rgba(91, 191, 58, 0) 70%);
}

/* Medalla Nº1 — emblema con texto curvado */
.aval__medalla {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: 2%;
  width: 126px;
  height: 126px;
}
.aval__medalla-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.65));
}
.aval__medalla-ring-out {
  fill: #121212;
  stroke: rgba(91, 191, 58, 0.65);
  stroke-width: 1.4;
}
.aval__medalla-ring-in {
  fill: none;
  stroke: rgba(245, 245, 245, 0.16);
  stroke-width: 1;
}
.aval__medalla-arc {
  fill: rgba(245, 245, 245, 0.8);
  font-family: var(--fuente-cuerpo);
  font-size: 6.6px;
  font-weight: 600;
  letter-spacing: 1.1px;
}
.aval__medalla-arc textPath { text-anchor: middle; }
.aval__medalla-n {
  fill: var(--acento);
  font-family: var(--fuente-titulo);
  font-size: 30px;
  letter-spacing: 0.5px;
  text-anchor: middle;
  filter: drop-shadow(0 0 5px rgba(91, 191, 58, 0.4));
}
.aval__medalla-star {
  fill: rgba(245, 245, 245, 0.45);
  font-size: 7px;
  letter-spacing: 1.5px;
  text-anchor: middle;
}

.aval__etiqueta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1rem;
}
.aval__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.4rem, 5.6vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--blanco);
}
.aval__titulo-acc {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--acento);
  filter: drop-shadow(0 0 7px rgba(91, 191, 58, 0.30));
}
.aval__linea {
  display: block;
  width: 54px;
  height: 2px;
  background: var(--acento);
  margin: 1.1rem 0;
}
.aval__sub {
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.78);
  margin-bottom: 1.1rem;
}
.aval__cuerpo {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 42ch;
  margin-bottom: 1.6rem;
}
.aval__medios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.aval__medios-label {
  color: rgba(245, 245, 245, 0.5);
  position: relative;
}
.aval__medios-label::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--gris-suave);
  vertical-align: middle;
  margin-left: 0.7rem;
}
.aval__medios-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  color: var(--gris);
}
.aval__medios-lista li:not(:last-child)::after {
  content: "·";
  margin-left: 0.9rem;
  color: var(--gris-suave);
}


/* ================================
   TESTIMONIOS — MOSAICO DE VOCES
   Bento de testimonios reales en formatos mixtos
   (vídeo / chat / audio). Data real, sin relleno.
   ================================ */
.testimonios {
  background: var(--negro);
  padding: 7rem 0 7.5rem;
}
.testimonios__cabecera {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.25rem;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.testimonios__intro {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* Rejilla bento */
.testimonios__mosaico {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "video chat chat"
    "video aud1 aud2"
    "video cta  cta";
  gap: 1.15rem;
}
.testimonios__mosaico > :nth-child(1) { grid-area: video; }
.testimonios__mosaico > :nth-child(2) { grid-area: chat; }
.testimonios__mosaico > :nth-child(3) { grid-area: aud1; }
.testimonios__mosaico > :nth-child(4) { grid-area: aud2; }
.testimonios__mosaico > :nth-child(5) { grid-area: cta; }

/* Tarjeta base */
.tm-card {
  background: #131313;
  border: 1px solid rgba(245, 245, 245, 0.06);
  border-radius: 12px;
  padding: 1.5rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.tm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 191, 58, 0.32);
}
.tm-card__estrellas {
  color: var(--acento);
  font-size: 0.82rem;
  letter-spacing: 3px;
}
.tm-card__pie {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
}
.tm-card__pie--cab { margin-top: 0; }
.tm-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2a2a, #151515);
  border: 1px solid rgba(91, 191, 58, 0.4);
  display: grid;
  place-items: center;
  color: var(--acento);
  font-family: var(--fuente-titulo);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.tm-card__nombre {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--blanco);
}
.tm-card__meta {
  font-size: 0.7rem;
  color: var(--gris);
  letter-spacing: 0.04em;
}

/* Chat */
.tm-card--chat { gap: 0.7rem; }
.tm-card__chat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tm-burbuja {
  max-width: 90%;
  padding: 0.5rem 0.78rem;
  border-radius: 13px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.tm-burbuja--in {
  align-self: flex-start;
  background: #232323;
  color: rgba(245, 245, 245, 0.92);
  border-bottom-left-radius: 3px;
}
.tm-burbuja--out {
  align-self: flex-end;
  background: rgba(91, 191, 58, 0.92);
  color: #0d0d0d;
  font-weight: 500;
  border-bottom-right-radius: 3px;
}

/* Vídeo */
.tm-card--video { padding: 0; overflow: hidden; }
.tm-card--video .tm-card__pie { padding: 0 1.3rem 1.25rem; }
.tm-video {
  position: relative;
  flex: 1;
  min-height: 300px;
  background: #000;
}
.tm-video__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tm-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-left: 3px;
  color: #0d0d0d;
  background: rgba(91, 191, 58, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.tm-video__play:hover { transform: scale(1.08); }
.tm-video__etq {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.25rem 0.55rem;
  border-radius: 100px;
  transition: opacity 0.25s ease;
}
.tm-video.is-playing .tm-video__play,
.tm-video.is-playing .tm-video__etq {
  opacity: 0;
  pointer-events: none;
}

/* Audio */
.tm-card--audio { justify-content: space-between; }
.tm-audio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tm-audio__play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-left: 2px;
  color: #0d0d0d;
  background: rgba(91, 191, 58, 0.94);
  transition: transform 0.2s ease;
}
.tm-audio__play:hover { transform: scale(1.08); }
.tm-audio__play.is-playing { padding-left: 0; }
.tm-audio__wave {
  position: relative;
  flex: 1;
  height: 38px;
  overflow: hidden;
}
.tm-audio__wave img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tm-audio__fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #131313;
  opacity: 0.62;
  transition: left 0.12s linear;
}
.tm-audio__time {
  font-size: 0.72rem;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* CTA */
.tm-card--cta {
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(135deg, #16210f, #0f0f0f);
  border-color: rgba(91, 191, 58, 0.22);
}
.tm-cta__txt {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--blanco);
}
.tm-cta__acc {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--acento);
}
.tm-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--acento);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.tm-cta__link svg { transition: transform 0.25s ease; }
.tm-card--cta:hover .tm-cta__link svg { transform: translateX(4px); }

@media (max-width: 820px) {
  .testimonios { padding: 5rem 0 5.5rem; }
  .testimonios__mosaico {
    grid-template-columns: 1fr;
    grid-template-areas: "video" "chat" "aud1" "aud2" "cta";
    max-width: 460px;
  }
  .tm-card--video { grid-row: auto; }
  .tm-video { min-height: 0; aspect-ratio: 3 / 4; }
}


/* ================================
   CONTACTO
   ================================ */
.contacto {
  position: relative;
  padding: 8rem 0;
}

.contacto__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(13, 13, 13, 0.9);
}

.contacto__contenedor {
  position: relative;
  z-index: 2;
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}

.contacto__descripcion {
  color: rgba(245, 245, 245, 0.7);
  font-size: 0.98rem;
  line-height: 1.85;
  margin-bottom: 2rem;
}

.contacto__garantias {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.garantia {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(245, 245, 245, 0.65);
}

.garantia__icono {
  color: var(--acento);
  font-weight: 700;
  flex-shrink: 0;
}

.contacto__formulario {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: rgba(22, 22, 22, 0.85);
  padding: 2.5rem;
  border-radius: var(--radio);
  border: 1px solid var(--gris-suave);
  backdrop-filter: blur(8px);
}

/* Estilo para título de sección del formulario */
.formulario__seccion-titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--acento);
  margin-bottom: 2rem;
  text-align: center;
  letter-spacing: 0.05em;
}

/* Color verde para opciones seleccionadas en selects */
.campo__input--select option:checked {
  background-color: var(--acento) !important;
  color: var(--acento-texto) !important;
}

.campo__input--select option:hover,
.campo__input--select option:focus {
  background-color: var(--acento) !important;
  color: var(--acento-texto) !important;
}

.campo {
  margin-bottom: 1.75rem;
}

.campo:last-child {
  margin-bottom: 0;
}

.campo__etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.5rem;
}

.campo__input {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gris-suave);
  border-radius: var(--radio);
  padding: 0.875rem 1rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.9rem;
  color: var(--blanco);
  transition: border-color var(--transicion), background-color var(--transicion);
  outline: none;
}

.campo__input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.campo__input:focus {
  border-color: var(--acento);
  background-color: rgba(255, 255, 255, 0.08);
}

.campo__input--textarea {
  resize: vertical;
  min-height: 110px;
}

/* Quitar flechas de los inputs numéricos */
.campo__input[type="number"] {
  -moz-appearance: textfield;
}
.campo__input[type="number"]::-webkit-outer-spin-button,
.campo__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Fila de campos físicos (edad / peso / altura) */
.campo__fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.campo__columna {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Etiqueta opcional */
.campo__opcional {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Slider de compromiso */
.campo__slider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.campo__range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--gris-suave);
  outline: none;
  cursor: pointer;
}

.campo__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--acento);
  border: none;
  cursor: pointer;
}

.campo__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--acento);
  border: none;
  cursor: pointer;
}

.campo__range:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
}

.campo__slider-valor {
  min-width: 3rem;
  text-align: center;
  color: var(--acento);
  font-weight: 600;
  font-size: 1rem;
}

.formulario__confirmacion {
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2rem;
}

.formulario__confirmacion--exito { color: #4ade80; }
.formulario__confirmacion--error { color: #f87171; }


/* ================================
   FOOTER
   ================================ */
.footer {
  background-color: var(--negro-suave);
  border-top: 1px solid var(--gris-suave);
  padding: 1.25rem 0;
}

.footer__contenedor {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer__logo-enlace {
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity var(--transicion);
}
.footer__logo-enlace:hover { opacity: 1; }

.footer__logo-img {
  height: 44px;
  width: auto;
  display: block;
}

.footer__centro {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.footer__tagline {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.footer__social { margin: 0; }

.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gris);
  font-size: 0.8rem;
  transition: color var(--transicion);
  white-space: nowrap;
}

.footer__social-link:hover { color: var(--acento); }

.footer__copy {
  font-size: 0.68rem;
  color: #888888;
  white-space: nowrap;
  margin-left: auto;
}

.footer__copy a {
  color: var(--acento);
  transition: color var(--transicion);
}

.footer__copy a:hover { color: var(--acento-claro); }


/* ================================
   RESPONSIVE — TABLET MEDIA (pasos escalonados)
   ================================ */
@media (max-width: 960px) and (min-width: 769px) {
  .metodo__paso--medio .metodo__paso-contenido {
    margin-left: 22%;
  }
  .metodo__paso--final .metodo__paso-contenido {
    margin-left: 44%;
  }
}

/* ================================
   RESPONSIVE — TABLET
   ================================ */
@media (max-width: 960px) {
  .sobre-mi__contenedor {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .sobre-mi__imagen {
    height: 420px;
  }

  .sobre-mi__imagen-wrap::before {
    display: none;
  }

  .servicios__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .contacto__contenedor {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
}

/* Timeline — móvil/tablet (bloque heredado de sección anterior, sin uso activo) */
@media (max-width: 768px) {
  .hito-legacy {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.1rem;
    padding-left: 44px;
    margin-bottom: 4rem;
  }

  .hito__punto {
    top: 6px;
    left: 13px;
    transform: translateX(-50%);
  }

  .hito--izq .hito__media,
  .hito--der .hito__media {
    grid-column: 1;
    justify-self: start;
    max-width: 250px;
  }

  .hito--izq .hito__info,
  .hito--der .hito__info {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }

  .hito--der .hito__info .hito__texto {
    margin-left: 0;
  }

  .hito--izq .hito__anio-fondo,
  .hito--der .hito__anio-fondo {
    left: auto;
    right: 0.4rem;
  }
}


/* ================================
   RESPONSIVE — MÓVIL
   ================================ */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 88px;
  }

  :root {
    --padding-lateral: 1.25rem;
  }

  .nav__menu {
    display: none;
    position: fixed;
    inset: 0;
    top: 0;
    background-color: rgba(13, 13, 13, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    padding: 0;
    z-index: 999;
  }

  .nav__menu.activo {
    display: flex;
  }

  .nav__link {
    font-size: 1rem;
    color: var(--blanco);
    padding: 0.25rem 0;
  }

  .nav__link--cta {
    padding: 0.875rem 3rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  .nav__logo-img {
    height: 48px;
  }

  .nav__hamburguesa {
    display: flex;
    margin-left: auto;
  }

  /* Móvil: figura en flujo, justo encima del botón */
  .hero__figura {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    z-index: auto;
    pointer-events: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0;
  }

  .hero__figura-img {
    height: 38vh;
    max-height: 320px;
    width: auto;
    display: block;
    margin: 0 auto;
    opacity: 1;
    filter: none;
    object-position: bottom center;
    image-rendering: -webkit-optimize-contrast;
  }

  /* El vídeo ahora es vertical 9:16: encaja perfecto en móvil, así que se muestra */
  .hero__video-fondo {
    display: block;
  }

  .hero__video {
    /* En vertical apenas se recorta; centramos al sujeto un pelín por encima */
    object-position: center 40%;
  }

  .hero {
    min-height: 100svh;
    /* hero.jpg queda como fallback por si el vídeo no carga */
    background-image: url('../img/hero.jpg');
    background-size: cover;
    background-position: 65% center;
  }

  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(13, 13, 13, 0.64) 0%,
      rgba(13, 13, 13, 0.36) 45%,
      rgba(13, 13, 13, 0.72) 100%
    );
  }

  .hero__contenido {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 8rem var(--padding-lateral) 3rem;
    min-height: 100svh;
  }

  .hero__texto {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    padding-bottom: 0.5rem;
  }

  .hero__titulo {
    margin-bottom: 0;
  }

  .hero__titulo-principal {
    margin-bottom: 0.6em;
  }

  .hero__subtitulo {
    margin-bottom: 0;
    text-align: center;
  }

  .hero__caja {
    margin-top: 1.5rem;
    width: 100%;
  }

  /* Caja semitransparente en móvil */
  .hero__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .hero__figura {
    margin-bottom: 0;
    width: 100%;
  }

  .hero__texto .boton {
    margin-top: 0;
    width: calc(100% - 2rem);
    margin: 0 1rem 1.25rem;
    text-align: center;
  }

  .sobre-mi,
  .servicios,
  .contacto {
    padding: 5.5rem 0;
  }

  /* Showcase más compacta en móvil (sin afectar a sobre-mi ni contacto) */
  .servicios {
    padding: 3.5rem 0;
  }

  /* Cronología (torre de pesos) en móvil pequeño */
  .evolucion { padding: 5rem 0 3.5rem; }
  .evolucion__cabecera { margin-bottom: 2.5rem; }

  /* Aval Mister España — apilado */
  .aval {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 3.5rem;
    max-width: 380px;
    text-align: center;
  }
  .aval__figura { min-height: 400px; justify-content: center; }
  .aval__cutout-wrap { height: 400px; justify-content: center; }
  .aval__cutout { height: 520px; }
  .aval__spot { background:
    radial-gradient(ellipse 50% 46% at 50% 32%, rgba(245, 245, 245, 0.10), rgba(245, 245, 245, 0) 62%),
    radial-gradient(ellipse 44% 26% at 50% 86%, rgba(91, 191, 58, 0.10), rgba(91, 191, 58, 0) 70%); }
  .aval__medalla {
    width: 104px;
    height: 104px;
    right: 4%;
    bottom: 3%;
  }
  .aval__linea { margin-left: auto; margin-right: auto; }
  .aval__cuerpo { margin-left: auto; margin-right: auto; }
  .aval__medios { justify-content: center; }

  .crono-torre__foto-wrap { max-width: 320px; }
  .crono-torre__chip { font-size: clamp(3rem, 14vw, 4rem); }

  /* Placas un poco más estrechas en pantallas pequeñas */
  .crono-torre__maquina {
    --placa-ancho: 140px;
    --placa-alto: 44px;
  }

  /* Items de servicio en móvil — filas horizontales apiladas */
  .servicios__items {
    flex-direction: column;
  }

  .servicio-item__sep {
    width: 100%;
    height: 1px;
  }

  .servicio-item {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 1.25rem var(--padding-lateral);
    gap: 1rem;
  }

  .servicio-item__num {
    min-width: 2rem;
    font-size: 0.75rem;
  }

  .servicio-item__icono {
    width: 32px;
    height: 32px;
  }

  .servicio-item__nombre {
    flex: 1;
    font-size: 1.3rem;
  }

  .servicio-item__badge-inline {
    display: none;
  }

  .servicio-item__flecha {
    opacity: 1;
    transform: none;
    margin-left: auto;
  }

  .servicio-item--estrella::before {
    top: 0; left: 0; bottom: 0; right: auto;
    width: 2px;
    height: auto;
  }

  .metodo__intro {
    padding: 5rem var(--padding-lateral) 3rem;
  }

  .metodo__paso {
    height: 68vw;
    min-height: 310px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    margin-bottom: -14px;
  }

  .metodo__paso-contenido,
  .metodo__paso--medio .metodo__paso-contenido,
  .metodo__paso--final .metodo__paso-contenido {
    margin-left: 0;
    padding: 0 var(--padding-lateral);
    justify-content: flex-end;
    padding-bottom: 3.75rem;
  }

  .metodo__texto {
    max-width: 100%;
  }

  .metodo__cima {
    padding: 2.75rem var(--padding-lateral) 2.75rem;
  }

  .contacto__formulario {
    padding: 1.75rem 1.25rem;
  }

  .sobre-mi__credenciales {
    gap: 1.75rem;
  }

  .footer {
    padding: 2.5rem 0 2rem;
  }

  .footer__contenedor {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }

  .footer__logo-img {
    height: 52px;
  }

  .footer__centro {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }

  .footer__copy {
    margin-left: 0;
    text-align: center;
    margin-top: 0.25rem;
  }
}

@media (max-width: 420px) {
  .hero__titulo {
    font-size: clamp(3.2rem, 14vw, 4.5rem);
  }

  .credencial__numero {
    font-size: 2rem;
  }
}
/* ================================
   ESTILOS PARA SELECTS DEL FORMULARIO
   ================================ */

.campo__input--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235BBF3A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.campo__input--select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px rgba(91, 191, 58, 0.2);
}

.campo__input--select option {
  background-color: var(--negro);
  color: var(--blanco);
  padding: 0.5rem;
}

.campo__input--select option:hover,
.campo__input--select option:focus {
  background-color: var(--acento);
  color: var(--acento-texto);
}

/* Estilo para el select cuando está enfocado */
.campo__input--select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}


/* ================================
   ESTILOS PARA WIZARD DEL FORMULARIO
   ================================ */

.formulario__paso {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.formulario__navegacion {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  justify-content: space-between;
}

.formulario__navegacion .boton {
  flex: 1;
}

.formulario__navegacion .boton--secundario {
  background: transparent;
  border: 1px solid var(--gris-suave);
  color: var(--blanco);
}

.formulario__navegacion .boton--secundario:hover {
  border-color: var(--acento);
  color: var(--acento);
}

/* Grupos de campos */
.campo__grupo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.campo__grupo-alimentacion {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.grupo-alimentacion {
  background: var(--negro-card);
  padding: 1.5rem;
  border-radius: var(--radio);
  border: 1px solid var(--gris-suave);
}

.grupo-alimentacion strong {
  display: block;
  color: var(--acento);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.grupo-alimentacion .campo__input {
  margin-bottom: 0.5rem;
}

/* Error en campos */
.campo__input--error {
  border-color: #ff4444 !important;
  box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .formulario__navegacion {
    flex-direction: column;
  }
}

/* ================================
   ESTILOS PARA CHOICES.JS (SELECTS PERSONALIZADOS)
   ================================ */

/* Contenedor principal */
.choices {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* El input que se muestra (reemplaza el select) */
.choices__inner {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gris-suave);
  border-radius: var(--radio);
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.9rem;
  color: var(--blanco);
  min-height: auto;
}

.choices__inner:hover {
  border-color: var(--acento);
}

.choices.is-focused .choices__inner {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px rgba(91, 191, 58, 0.2);
}

/* Texto del item seleccionado */
.choices__item--selectable {
  color: var(--blanco);
}

/* Lista desplegable */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: #1a1a1a !important;
  border: 1px solid var(--gris-suave) !important;
  border-radius: var(--radio);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Opciones individuales en el dropdown */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  padding: 0.75rem 1rem;
  color: var(--blanco) !important;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background-color: transparent !important;
}

/* Opción al pasar el ratón - VERDE */
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable:hover,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--acento) !important;
  color: var(--acento-texto) !important;
}

/* Opción seleccionada - VERDE */
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
  background-color: var(--acento) !important;
  color: var(--acento-texto) !important;
}

/* Flecha del dropdown */
.choices[data-type*=select-one]::after {
  border-color: var(--acento) transparent transparent;
  right: 1rem;
}

.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent var(--acento);
}

/* Ocultar el input de búsqueda interno */
.choices__input--cloned {
  display: none;
}

/* Ocultar el placeholder cuando hay selección */
.choices__placeholder {
  opacity: 0.5;
}

/* Asegurar que el select original esté oculto */
.choices__input {
  display: none;
}
/* ================================
   BANNER DE COOKIES
   ================================ */
.cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--negro-card);
  border-top: 1px solid rgba(91, 191, 58, 0.25);
  padding: 1.25rem var(--padding-lateral);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cookies-banner[hidden] {
  display: none;
}

.cookies-banner.activo {
  opacity: 1;
  transform: translateY(0);
}

.cookies-banner__contenido {
  max-width: var(--max-ancho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookies-banner__texto {
  font-size: 0.9rem;
  color: rgba(245, 245, 245, 0.75);
  line-height: 1.5;
  flex: 1 1 auto;
  margin: 0;
}

.cookies-banner__link {
  color: var(--acento);
  text-decoration: underline;
  transition: color var(--transicion);
}

.cookies-banner__link:hover {
  color: var(--acento-claro);
}

.cookies-banner__botones {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookies-banner__btn {
  padding: 0.6rem 1.4rem;
  font-size: 0.85rem;
  min-width: auto;
}

@media (max-width: 640px) {
  .cookies-banner__contenido {
    flex-direction: column;
    text-align: center;
  }
  
  .cookies-banner__botones {
    width: 100%;
    justify-content: center;
  }
}


/* ================================
   CONFIRMACIÓN DEL FORMULARIO
   ================================ */
.formulario__confirmacion {
  display: none;
  padding: 1rem 1.5rem;
  border-radius: var(--radio);
  margin-top: 1.5rem;
  font-size: 0.95rem;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.formulario__confirmacion--exito {
  background: rgba(91, 191, 58, 0.15);
  border: 1px solid var(--acento);
  color: var(--acento);
}

.formulario__confirmacion--error {
  background: rgba(255, 80, 80, 0.15);
  border: 1px solid #ff5050;
  color: #ff8080;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}