/* === VARIABLES Y RESET BÁSICO === */
:root {
  --bg-main: #000000;
  --bg-alt: #1d1d1f;
  --bg-card: #000000;
  --text-primary: #ffffff;
  --text-secondary: #6f6e72;
  --accent: #efb83c; /* Dorado/amarillo de los botones */
  --radius-md: 12px;
  --radius-lg: 20px;
  --spacing-section: 48px 20px;
}

/* Todos los elementos heredan Roboto SemiBold (600) sin excepción */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Limitador para que en pantallas grandes se vea como prototipo móvil centrado */
main, .top-nav, .footer {
  max-width: 600px;
  margin: 0 auto;
}

/* === TIPOGRAFÍA === */
h1 {
  font-size: 2.2rem;
  line-height: 1.15;
  margin-bottom: 24px;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 12px;
}

h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.eyebrow {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.body-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

strong {
  color: var(--text-primary);
  font-weight: 600;
}

.link-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.play-icon svg {
  width: 10px;
  height: 10px;
  fill: var(--accent);
  margin-left: 1px;
}

/* === BOTONES === */
.btn {
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-light {
  background-color: #ffffff;
  color: #000000;
}

.btn-accent {
  background-color: var(--accent);
  color: #000000;
}

/* === LAYOUT, SECCIONES Y FILETES === */
.section {
  padding: var(--spacing-section);
}

.bg-alt {
  background-color: var(--bg-alt);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--text-secondary);
  margin: 0 20px;
  opacity: 0.4;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
}

/* === HERO CON SECUENCIA DE FONDO === */
.hero {
  position: relative;
  text-align: center;
  padding: 36px 20px 48px;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--bg-main);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#hero-canvas {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125%;
  height: auto;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* === PLACEHOLDERS DE IMÁGENES RESTANTES === */
.img-placeholder {
  background-color: #262626;
  border: 1px dashed #444;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}

.hero-img {
  height: 280px;
  margin-top: 16px;
}

.tall-img {
  height: 320px;
  margin-top: 16px;
}

.mini-img {
  height: 60px;
  margin: 10px 0;
  font-size: 0.75rem;
}

/* === BARRA DE COMPRA === */
.sticky-buy-bar, .bottom-buy-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}

/* === SECCIÓN 4: CARRUSEL DE FUNCIONALIDADES === */
.section-carousel {
  padding-left: 0;
  padding-right: 0;
}

.section-carousel .section-header {
  padding: 0 20px;
}

.carousel-track {
  display: flex;
  align-items: stretch;
  gap: 5%;
  padding: 0 5%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.card {
  background-color: var(--bg-main);
  border-radius: var(--radius-lg);
  border: 1px solid #262626;
}

.feature-card {
  flex: 0 0 80%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
}

.card-text-wrapper {
  padding: 24px 20px 18px;
  text-align: center;
}

/* Titular con el formato que tenía antes el texto (blanco, 1.1rem, interlínea 1.25) */
.feature-card .card-title {
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.feature-card .card-text {
  font-size: 0.85rem; /* Si lo prefieres un punto más grande como .body-text, pon 0.95rem */
  line-height: 1.3;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.card-img-bleed {
  position: relative;
  width: 100%;
  aspect-ratio: 801 / 745;
  margin-top: auto;
  overflow: hidden;
}

.card-img-bleed img {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 131.21%;
  height: auto;
  display: block;
}

/* === INDICADOR CÁPSULA (3 puntos + 1 raya) === */
.carousel-indicators-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.dots-pill {
  background-color: #262629;
  padding: 12px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dot {
  border: none;
  padding: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: width 0.25s linear, background-color 0.25s ease;
}

.dot.active {
  width: 22px;
  border-radius: 3px;
  background-color: var(--accent);
}

/* === SECCIÓN 6: ANIMACIÓN ESTABILIDAD === */
.stability-anim-wrapper {
  width: 100%;
  margin: 16px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#stability-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 1000;
  display: block;
}

/* === SECCIÓN 7: DISEÑO ESTRATÉGICO (CARRUSEL CON CANVAS DE FONDO) === */
.section-strategic {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden; /* Evita scroll horizontal por las flechas que asoman en los bordes */
}

.section-strategic .section-header {
  padding: 0 28px;
  margin-bottom: 16px;
}

.strategic-stage {
  position: relative;
  padding: 0 28px; /* Deja margen lateral para que asomen los círculos de las flechas */
}

.strategic-card {
  position: relative;
  background-color: #000000;
  border-radius: 26px;
  border: none;
  height: 470px; /* Altura de la pastilla negra vertical */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.strategic-canvas-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

#strategic-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%; /* Ocupa el 100% del alto de la pastilla negra contenedora */
  width: auto;  /* Mantiene proporción cuadrada 970x970 centrada */
  display: block;
  opacity: 1;
  transition: opacity 0.22s ease; /* Fundido a negro suave al arrastrar o pulsar flecha */
}

#strategic-canvas.is-fading-out {
  opacity: 0;
}

/* Pista horizontal invisible que desplaza solo las pastillas grises */
.strategic-text-track {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 22px;
}

.strategic-text-track::-webkit-scrollbar {
  display: none;
}

/* Cada slide mide el 100% de la pastilla negra para que quede siempre 100% centrado */
.strategic-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* Pastilla gris de texto superpuesta */
.strategic-slide .floating-info-box {
  width: 100%;
  background-color: rgba(29, 29, 31, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #3a3a3c;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 0;
}

.strategic-slide .floating-info-box strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 5px;
}

/* Texto gris reducido al ~70% con interlínea compacta para no tapar la imagen */
.strategic-slide .floating-info-box p {
  font-size: 0.65rem;
  line-height: 1.25;
  color: var(--text-secondary);
  margin: 0;
}

/* Flechas circulares a izquierda y derecha a la altura de la pastilla gris */
.strategic-arrow {
  position: absolute;
  bottom: 34px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(29, 29, 31, 0.78);
  border: 1px solid #3a3a3c;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.strategic-arrow.prev {
  left: -10px; /* Asoma ligeramente desde el borde izquierdo como en tu diseño */
}

.strategic-arrow.next {
  right: -10px; /* Asoma ligeramente desde el borde derecho como en tu diseño */
}

.strategic-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strategic-arrow:active {
  color: var(--text-primary);
  transform: scale(0.95);
}

.strategic-arrow.is-disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* === ESPECIFICACIONES === */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.spec-value {
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  margin-top: 4px;
}

.spec-value small {
  font-size: 1.1rem;
  color: var(--text-secondary);
}



/* === BENTO GRID (Sección Tranquilidad) === */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr; /* Garantiza que los 6 bentos midan exactamente lo mismo de alto */
  gap: 14px;
  margin-top: 24px;
}

.bento-item {
  background-color: var(--bg-main);
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.22;
  color: var(--text-secondary);
  overflow: hidden; /* Recorta la imagen a sangre del Bento 4 respetando las esquinas */
}

/* Zona de texto con altura unificada (3 líneas) para clavar la 1ª línea entre columnas */
.bento-copy {
  min-height: 3.66em; /* 3 líneas x 1.22 line-height */
  display: flex;
  align-items: flex-start; /* Ancla siempre la 1ª línea de texto arriba del bloque */
  justify-content: center;
  width: 100%;
}

.bento-copy p {
  color: var(--text-secondary);
  margin: 0;
}

.bento-copy strong {
  color: var(--text-primary);
}

/* Zona visual que ocupa el espacio restante por igual en cada pareja */
.bento-visual {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Separación entre imagen y texto según el orden de la fila */
.bento-top-media .bento-visual {
  margin-bottom: 12px;
}

.bento-bottom-media .bento-visual {
  margin-top: 8px;
}

/* Centrado en punto medio (23€, Bandera de España y Kit de púas/cejilla) */
.bento-visual-center {
  justify-content: center;
}

/* Fotos 1 (ensayo) y 6 (casa): proporción 3/2 recortando arriba y abajo de los 300x300px */
.bento-photo-crop {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
}

.bento-photo-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Recorta por igual la parte superior e inferior */
  display: block;
}

/* Bento 2: 23€ más grande y centrado en el área superior */
.big-number {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--text-primary);
}

/* Bento 3: Bandera de España (300x233px) centrada en el punto medio inferior */
.bento-img-flag {
  width: 62%;
  max-width: 105px;
  aspect-ratio: 300 / 233;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Bento 4: Imagen de goma (233x300px) pegada a sangre al borde inferior sin tocar el texto */
.bento-bleed-bottom {
  padding-bottom: 0; /* Elimina el margen inferior para que la foto toque el borde del bento */
}

.bento-visual-bottom {
  justify-content: flex-end; /* Clava la imagen abajo del todo */
}

.bento-img-bleed {
  width: 68%;
  max-width: 115px;
  max-height: 120px; /* Evita que crezca demasiado y llegue a tocar el texto superior */
  aspect-ratio: 233 / 300;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* Bento 5: Imagen del kit (300x193px) centrada en el punto medio superior */
.bento-img-kit {
  width: 88%;
  max-width: 145px;
  aspect-ratio: 300 / 193;
  height: auto;
  object-fit: contain;
  display: block;
}



/* === FOOTER === */
.footer {
  padding: 40px 20px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid #222;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.footer-cols strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.footer-link,
.footer-link-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color 0.2s ease;
}

.footer-link:hover,
.footer-link-btn:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #1a1a1a;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.social-links a:hover {
  opacity: 1;
}

.social-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* === MODALES LEGALES === */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.legal-modal.is-open {
  display: flex;
}

.legal-modal-content {
  background-color: var(--bg-alt);
  border: 1px solid #333;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 24px 20px 20px;
}

.legal-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #2c2c2e;
  border: none;
  color: var(--text-primary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.legal-modal-content h3 {
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-right: 36px;
}

.legal-modal-body {
  overflow-y: auto;
  padding-right: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.legal-modal-body p {
  margin-bottom: 14px;
}

.legal-modal-body::-webkit-scrollbar {
  width: 5px;
}
.legal-modal-body::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 10px;
}




/* === SECCIÓN 9: CARRUSEL PANORÁMICO DE COMPATIBILIDAD === */
.section-compatibility {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.section-compatibility .section-header {
  padding: 0 28px;
}

/* Centramos las flechas a mitad de altura de la pastilla como en tu prototipo */
.compatibility-stage .strategic-arrow {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.compatibility-stage .strategic-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.compatibility-card {
  display: block; /* Sobrescribe el flex de strategic-card para alojar el scroll panorámico */
}

/* Pista de scroll horizontal con imán obligatorio */
.compat-scroll-track {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.compat-scroll-track::-webkit-scrollbar {
  display: none;
}

/* Contenedor del ancho exacto de la imagen panorámica escalada a 470px de alto */
.compat-panorama {
  position: relative;
  height: 100%;
  width: max-content;
}

/* 1. En .compat-panorama img añadimos la transición suave del filtro */
.compat-panorama img {
  height: 100%; /* 470px de alto */
  width: auto;  /* Escala proporcionalmente los 4852x1024px */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: filter 0.35s ease; /* Transición suave al entrar o salir de las incompatibles */
}

/* Cuando el icono inferior pasa a ser .is-invalid (las 3 últimas guitarras), 
   se apaga toda la imagen panorámica a la vez sin ningún corte */
.section-compatibility:has(.compat-status-icon.is-invalid) .compat-panorama img {
  filter: grayscale(80%) brightness(0.7);
}

/* Puntos magnéticos invisibles en el centro exacto de cada guitarra */
.compat-snap-point {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  pointer-events: none;
}



/* === DESCRIPCIÓN INFERIOR DE 1 LÍNEA CON FUNDIDO A NEGRO === */
.compat-caption-wrapper {
  padding: 18px 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.compat-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.16s ease; /* Fundido a negro ágil al cambiar de guitarra */
}

.compat-caption.is-fading-out {
  opacity: 0; /* Se funde con el fondo negro (#000000) de la sección */
}

.compat-caption-text {
  color: var(--text-secondary); /* Texto en gris como pediste */
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

.compat-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;  /* Tamaño del círculo de fondo */
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.16s ease;
}

.compat-status-icon svg {
  width: 16px;  /* Mismo tamaño original para el Check y la X */
  height: 16px;
  fill: none;
  stroke: #ffffff; /* Ambos iconos en blanco */
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Círculo amarillo detrás del Check blanco (6 primeras) */
.compat-status-icon.is-valid {
  background-color: var(--accent);
}

/* Círculo rojo #e05a53 detrás de la X blanca (3 últimas) */
.compat-status-icon.is-invalid {
  background-color: #e05a53;
}





/* === SECCIÓN 11: CIERRE / CTA FINAL CON SECUENCIA === */
.section-final-cta {
  position: relative;
  overflow: hidden; /* Corta el exceso lateral del 125% del canvas sin crear scroll horizontal */
  background-color: var(--bg-main);
}

.final-cta-content {
  position: relative;
  z-index: 2; /* Asegura que los textos de arriba y abajo queden siempre por encima de los márgenes negros del vídeo */
}

.final-anim-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Proporción de la zona central útil (600px de ancho x 580px de alto) */
  aspect-ratio: 600 / 580;
  margin: 8px 0 16px; /* Si quieres acercar o alejar los textos del soporte, ajusta estos dos márgenes */
  pointer-events: none;
}

#final-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Mismo escalado del 125% que en el Hero para que los 600px centrales llenen la pantalla */
  width: 125%;
  height: auto;
  display: block;
}





/* === BOTÓN DISPARADOR Y MODAL DE VÍDEO VERTICAL (SHORTS 9:16) === */
.video-trigger-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.video-modal-content {
  position: relative;
  width: 100%;
  max-width: 340px; /* Ancho ideal en móvil para que quede margen alrededor y se vea la X */
  background-color: #000000;
  border: 1px solid #333;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
}

/* Mantiene la proporción exacta 9:16 de un YouTube Short */
.video-aspect-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #000000;
}

.video-aspect-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.video-modal-close {
  z-index: 10;
  top: 12px;
  right: 12px;
  background-color: rgba(20, 20, 22, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}