/*
Theme Name: MiraAlmeria Theme
Theme URI: http://landingmiraalmeria.42web.io/
Author: Jesús García Ortega JS Digital Studio
Description: Tema personalizado para la landing de Grupo MiraAlmeria
Version: 1.0
Text Domain: miraalmeria-theme
*/

/* Paleta base */
:root {
  --color-primary: #005B8C;
  --color-primary-dark: #004A7A;
  --color-accent: #F47B20;
  --color-text: #555555;
  --color-bg-light: #F5F6F8;
  --color-white: #FFFFFF;
}

/* Barra legal superior */
.barra-legal {
  width: 100%;
  background-color: var(--color-primary-dark);
  padding: 6px 0;
}

.barra-legal__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.barra-legal__nav a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.barra-legal__nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.barra-legal__separador {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

/* Barra legal inferior del footer */
.barra-legal-footer {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 0;
  text-align: center;
}

.barra-legal-footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.barra-legal-footer__nav a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.barra-legal-footer__nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.barra-legal-footer__separador {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
}

/* Reset sencillo */
#landing-ferias {
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--color-text);
  line-height: 1.6;
}

#landing-ferias h1,
#landing-ferias h2,
#landing-ferias h3 {
  font-family: "Montserrat", "Poppins", sans-serif;
  color: var(--color-primary-dark);
}

#landing-ferias .container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Hero: container más amplio → banner, carrusel y vídeo más grandes y centrados */
#landing-ferias .hero .container {
  max-width: 1340px;
  width: 94%;
}

section {
  padding: 60px 0;
}

.section-intro {
  max-width: 700px;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 15px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* HERO */
.hero {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 15px;
}

.hero-subtitle {
  font-size: 18px;
  margin-bottom: 20px;
}

.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.hero-bullets li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 20px;
}

.hero-bullets li::before {
  content: "•";
  color: var(--color-accent);
  position: absolute;
  left: 0;
}

.hero-ctas .btn {
  margin-right: 10px;
  margin-bottom: 10px;
}

.hero-media {
  text-align: center;
}

.hero-image {
  background: var(--color-bg-light);
  border-radius: 8px;
  padding: 25px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-banner-wrap {
  width: 100%;
  margin-bottom: 14px;
  line-height: 0;
}

.hero-banner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* sin radio: el wrap ocupa todo el ancho de la sección */
}

.hero-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  margin: 0 0 28px 0;
}

.hero-logo-btn,
.hero-sublogo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d9dfe5;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-primary-dark);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.hero-logo-btn:hover,
.hero-logo-btn:focus-visible,
.hero-sublogo-btn:hover,
.hero-sublogo-btn:focus-visible {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(0, 91, 140, 0.30);
  color: var(--color-primary);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(0, 91, 140, 0.08),
    0 0 18px rgba(0, 91, 140, 0.12);
  outline: none;
}

.hero-logo-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}

.hero-logo-dropdown:hover .hero-submenu,
.hero-logo-dropdown:focus-within .hero-submenu {
  display: flex;
}

.hero-logo-dropdown:hover .hero-logo-btn-parent,
.hero-logo-dropdown:focus-within .hero-logo-btn-parent {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(0, 91, 140, 0.30);
  color: var(--color-primary);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(0, 91, 140, 0.08),
    0 0 18px rgba(0, 91, 140, 0.12);
}

.hero-sublogo-btn {
  min-width: 170px;
  min-height: 42px;
  font-size: 14px;
}

.hero-logo-dropdown:last-child .hero-logo-btn-parent {
  min-width: 230px;
}

@media (max-width: 768px) {
  .hero-logos {
    gap: 10px;
    margin: 0 0 24px 0;
  }

  .hero-logo-btn,
  .hero-sublogo-btn {
    font-size: 14px;
    padding: 0 16px;
  }

  .hero-logo-dropdown {
    flex-direction: column;
  }

  .hero-logo-dropdown:last-child .hero-logo-btn-parent {
    min-width: auto;
  }

  .hero-submenu {
    display: flex;
    position: static;
    transform: none;
    margin-top: 8px;
  }
}

/* BENEFICIOS */
.beneficios {
  background: var(--color-white);
}

/* Margen lateral propio del bloque — un pelín más que el container global */
.beneficios .container {
  width: 86%;
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.beneficio-item {
  background: var(--color-bg-light);
  padding: 15px;
  border-radius: 6px;
  font-size: 14px;

  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
}

/* Hover elegante */
.beneficio-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

/* Separación del botón respecto a los recuadros */
.beneficios .btn {
  margin-top: 28px;
  display: inline-block;
}

/* COMO FUNCIONA */
.como-funciona {
  background: var(--color-bg-light);
}

.como-funciona .steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.como-funciona .step-item {
  position: relative;
  background: var(--color-white);
  padding: 24px 22px 22px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.como-funciona .step-item:hover {
  transform: translateY(-6px);
  border-color: rgba(15, 76, 129, 0.14);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
}

.como-funciona .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff9a3d 0%, #f58220 100%);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
  box-shadow: 0 8px 18px rgba(245, 130, 32, 0.20);
}

.como-funciona .step-item h3 {
  margin: 0 0 14px;
  color: #0f4c81;
  line-height: 1.45;
  font-size: clamp(1.2rem, 1.05rem + 0.35vw, 1.55rem);
}

.como-funciona .step-item p {
  margin: 0;
  color: #3f3f46;
  line-height: 1.75;
  font-size: 1rem;
}

/* MICROCOPY MÁS POTENTE */
.como-funciona .section-microcopy {
  margin-top: 30px;
  font-style: normal;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #0b3557;
  max-width: 820px;
}

/* CTA MÁS PROTAGONISTA */
.como-funciona .section-cta {
  margin-top: 22px;
}

.como-funciona .section-cta .btn {
  min-width: 280px;
  padding: 16px 26px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(15, 76, 129, 0.18);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.como-funciona .section-cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 34px rgba(15, 76, 129, 0.24);
  filter: brightness(1.03);
}

/* Si quieres que destaque todavía más el cierre visual */
.como-funciona .section-cta::before {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f4c81 0%, #1f7ab8 100%);
}

@media (max-width: 1200px) {
  .como-funciona .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .como-funciona .steps-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .como-funciona .step-item {
    padding: 22px 20px;
    border-radius: 14px;
  }

  .como-funciona .section-microcopy {
    font-size: 1rem;
  }

  .como-funciona .section-cta .btn {
    width: 100%;
    min-width: 0;
  }
}

/* MULTIPLATAFORMA */
.multiplataforma {
  background: var(--color-white);
}

.multiplataforma .cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.multiplataforma .cards-grid .card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.multiplataforma .cards-grid .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(14, 116, 144, 0.10), transparent 42%),
    radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.08), transparent 38%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.multiplataforma .cards-grid .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 58px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f4c81 0%, #1f7ab8 100%);
  opacity: 0.9;
  transition: width 0.35s ease;
}

.multiplataforma .cards-grid .card h3 {
  position: relative;
  margin: 0 0 16px;
  color: #0f4c81;
  transition: color 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

.multiplataforma .cards-grid .card p {
  position: relative;
  margin: 0;
  line-height: 1.7;
  color: #3f3f46;
  transition: color 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

.multiplataforma .cards-grid .card:hover {
  transform: translateY(-8px);
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fc 100%);
  border-color: rgba(15, 76, 129, 0.18);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

.multiplataforma .cards-grid .card:hover::before {
  opacity: 1;
}

.multiplataforma .cards-grid .card:hover::after {
  width: calc(100% - 48px);
}

.multiplataforma .cards-grid .card:hover h3 {
  color: #0b3557;
  transform: translateY(-2px);
}

.multiplataforma .cards-grid .card:hover p {
  color: #1f2937;
  transform: translateY(-1px);
}

@media (max-width: 992px) {
  .multiplataforma .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .multiplataforma .cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .multiplataforma .cards-grid .card {
    padding: 24px 20px;
    border-radius: 14px;
  }

  .multiplataforma .cards-grid .card::after {
    left: 20px;
  }

  .multiplataforma .cards-grid .card:hover::after {
    width: calc(100% - 40px);
  }
}

/* EFECTO FOCO DE SECCIÓN (nivel premium) */

/* Cuando entras en la zona, todas bajan intensidad */
.multiplataforma .cards-grid:hover .card {
  opacity: 0.65;
  transform: scale(0.99);
  filter: blur(0.5px) saturate(0.8);
}

/* La tarjeta activa rompe ese efecto y destaca */
.multiplataforma .cards-grid .card:hover {
  opacity: 1;
  transform: translateY(-8px) scale(1.02);
  filter: saturate(1);
  z-index: 2;
}

/* PRUEBA SOCIAL */
.prueba-social {
  background: var(--color-bg-light);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-item {
  background: var(--color-white);
  padding: 18px;
  border-radius: 6px;
  min-width: 200px;
}

.stat-number {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.testimonios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonio {
  background: var(--color-white);
  padding: 18px;
  border-radius: 6px;
  font-size: 14px;
}

.testimonio-author {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #777;
}

/* FERIA DESTACADA */
.feria-destacada {
  background: var(--color-white);
}

.feria-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
}

/* PACKS */
.packs {
  background: var(--color-bg-light);
  padding-bottom: 32px;
}

.packs .packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
  align-items: stretch;
}

.packs .pack {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(249,250,252,1) 100%);
  padding: 28px 24px 24px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

/* Luz suave interior */
.packs .pack::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(14, 116, 144, 0.08), transparent 42%),
    radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Línea superior elegante */
.packs .pack::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 58px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f4c81 0%, #1f7ab8 100%);
  opacity: 0.9;
  transition: width 0.35s ease;
}

.packs .pack h3 {
  position: relative;
  margin: 0 0 16px;
  color: #0f4c81;
  line-height: 1.3;
  font-size: clamp(1.28rem, 1.1rem + 0.38vw, 1.7rem);
  z-index: 1;
}

.packs .pack .pack-desc {
  position: relative;
  margin: 0 0 18px;
  color: #3f3f46;
  line-height: 1.75;
  font-size: 1rem;
  z-index: 1;
}

.packs .pack ul {
  position: relative;
  padding-left: 20px;
  margin: 0 0 24px;
  color: #27272a;
  line-height: 1.8;
  z-index: 1;
}

.packs .pack ul li + li {
  margin-top: 6px;
}

.packs .pack .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Hover general */
.packs .pack:hover {
  transform: translateY(-10px);
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  border-color: rgba(15, 76, 129, 0.16);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.packs .pack:hover::before {
  opacity: 1;
}

.packs .pack:hover::after {
  width: calc(100% - 48px);
}

/* Pack destacado */
.packs .pack-destacado {
  border: 1px solid rgba(245, 130, 32, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
  box-shadow: 0 18px 42px rgba(245, 130, 32, 0.10);
  transform: translateY(-10px) scale(1.02);
}

.packs .pack-destacado::after {
  background: linear-gradient(90deg, #f58220 0%, #ffb15f 100%);
  width: 84px;
}

/* Etiqueta recomendada */
.packs .pack-destacado h3::before {
  content: "RECOMENDADO";
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245, 130, 32, 0.12);
  color: #c96b13;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Hover del destacado */
.packs .pack-destacado:hover {
  transform: translateY(-14px) scale(1.03);
  border-color: rgba(245, 130, 32, 0.7);
  box-shadow: 0 28px 56px rgba(245, 130, 32, 0.16);
}

/* Microcopy */
.packs .section-microcopy {
  margin-top: 30px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #4b5563;
}

/* Foco de sección: todas bajan un poco y la activa destaca */
.packs .packs-grid:hover .pack {
  opacity: 0.7;
  transform: scale(0.985);
  filter: saturate(0.85);
}

.packs .packs-grid:hover .pack.pack-destacado {
  transform: translateY(-10px) scale(1.01);
}

.packs .packs-grid .pack:hover {
  opacity: 1;
  filter: saturate(1);
  z-index: 2;
}

.packs .packs-grid .pack.pack-destacado:hover {
  opacity: 1;
  z-index: 3;
}

/* ANIMACIÓN DE ENTRADA — estado inicial solo cuando JS está listo */
.js-ready .reveal-pack {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-pack.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Escalonado */
.packs .packs-grid .pack:nth-child(1) {
  transition-delay: 0.04s;
}

.packs .packs-grid .pack:nth-child(2) {
  transition-delay: 0.14s;
}

.packs .packs-grid .pack:nth-child(3) {
  transition-delay: 0.24s;
}

/* Responsive */
@media (max-width: 1100px) {
  .packs .packs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .packs .pack,
  .packs .pack-destacado {
    transform: none;
  }

  .packs .packs-grid:hover .pack,
  .packs .packs-grid:hover .pack.pack-destacado {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .packs .pack:hover,
  .packs .pack-destacado:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 768px) {
  .packs .pack {
    padding: 24px 20px 22px;
    border-radius: 16px;
  }

  .packs .pack::after {
    left: 20px;
  }

  .packs .pack:hover::after {
    width: calc(100% - 40px);
  }

  .packs .pack .btn {
    width: 100%;
    align-self: stretch;
    text-align: center;
  }

  .packs .section-microcopy {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal-pack {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .packs .pack,
  .packs .pack:hover,
  .packs .pack-destacado,
  .packs .pack-destacado:hover {
    transition: none;
    transform: none;
  }
}

/* FORMULARIO */
/* ── Formulario: bloque de conversión premium, fondo claro ───────── */
.formulario {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #FFFFFF;
}

/* Resplandor radial muy suave — profundidad sin oscurecer */
.formulario::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 960px; height: 680px;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(0, 91, 140, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Borde superior: transición desde packs (#F5F6F8 → #FFFFFF) */
.formulario-edge--top {
  position: relative;
  height: 48px;
  background: linear-gradient(to bottom, #F5F6F8 0%, #FFFFFF 100%);
  z-index: 2;
  pointer-events: none;
}

/* Ornamento superior oculto */
.formulario-edge--top .faq-ornament { display: none; }

/* Borde inferior: transición hacia FAQ (#FFFFFF → #F5F6F8 para enlazar con faq-edge--top) */
.formulario-edge--bottom {
  position: relative;
  height: 40px;
  background: linear-gradient(to bottom, #FFFFFF 0%, #F5F6F8 100%);
  z-index: 2;
  pointer-events: none;
}
/* Ornamento inferior oculto */
.formulario-edge--bottom .faq-ornament { display: none; }

/* Contenido del formulario */
.formulario-content {
  position: relative;
  z-index: 1;
  padding: 12px 0 56px;
  text-align: center;
}

/* Etiqueta superior llamativa */
.formulario-eyebrow {
  display: inline-block;
  background: rgba(244, 123, 32, 0.09);
  color: #F47B20;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 100px;
  border: 1px solid rgba(244, 123, 32, 0.28);
  margin: 0 auto 20px;
}

.formulario-content h2 {
  color: var(--color-primary-dark);
  text-align: center;
  font-size: clamp(1.55rem, 3.5vw, 2.2rem);
  margin-bottom: 12px;
  line-height: 1.25;
  text-shadow: none;
}

.formulario-content h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: #F47B20;
  box-shadow: none;
  border-radius: 2px;
  margin: 14px auto 0;
}

.formulario-content .section-intro {
  color: #506273;
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Tarjeta del formulario: blanca elevada con acento de marca */
.formulario-content .formulario-cf7 {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 44px 40px 36px;
  border-top: 4px solid var(--color-primary);
  box-shadow:
    0 2px 0 0 rgba(244, 123, 32, 0.55),
    0 20px 56px rgba(0, 91, 140, 0.13),
    0 6px 20px rgba(0, 0, 0, 0.06);
  border-left: 1px solid rgba(0, 91, 140, 0.08);
  border-right: 1px solid rgba(0, 91, 140, 0.08);
  border-bottom: 1px solid rgba(0, 91, 140, 0.08);
}

@media (max-width: 600px) {
  .formulario-content .formulario-cf7 {
    padding: 28px 20px 24px;
    border-radius: 14px;
  }
}

.lead-form {
  background: var(--color-bg-light);
  padding: 25px;
  border-radius: 6px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group-full {
  flex: 1 1 100%;
}

label {
  font-size: 14px;
  margin-bottom: 4px;
}

input,
select,
textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
}

.form-row-bottom {
  align-items: center;
  justify-content: space-between;
}

.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form-note {
  margin-top: 10px;
  font-size: 13px;
}

/* FAQ */
/* ================================================================
   FAQ — PARALLAX BACKGROUND + ACCORDION GLASSMORPHISM
   ================================================================ */

.faq {
  position: relative;
  padding: 0;
  overflow: hidden;   /* la imagen queda ESTRICTAMENTE dentro de este bloque */
}

/* Imagen ESTRICTAMENTE contenida: scroll (no fixed) garantiza que no se filtra
   fuera del bloque FAQ en ningún navegador. overflow:hidden del padre la recorta. */
.faq-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  z-index: 0;
}

.faq-overlay {
  position: absolute;
  inset: 0;
  /* overlay más claro para ver la foto */
  background: linear-gradient(
    135deg,
    rgba(3, 14, 36, 0.72) 0%,
    rgba(0, 42, 72, 0.60) 50%,
    rgba(3, 14, 36, 0.72) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Bordes con degradado (fusión suave con las secciones adyacentes) ─ */
/* Arriba: #F5F6F8 (prueba-social) → transparente */
.faq-edge--top {
  position: relative;
  height: 96px;
  background: linear-gradient(to bottom, #F5F6F8 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Abajo: transparente → #FFFFFF (cierre-autoridad) */
.faq-edge--bottom {
  position: relative;
  height: 96px;
  background: linear-gradient(to top, #FFFFFF 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Ornamento en la línea de transición ─────────────────────────── */
.faq-ornament {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.faq-edge--top    .faq-ornament { bottom: -1px; }
.faq-edge--bottom .faq-ornament { top: -1px; }

/* Líneas que irradian desde el ornamento */
.faq-ornament-line {
  display: block;
  width: 90px;
  height: 1px;
}
.faq-edge--top .faq-ornament-line:first-of-type,
.faq-edge--bottom .faq-ornament-line:first-of-type {
  background: linear-gradient(to left, rgba(0, 91, 140, 0.55), transparent);
}
.faq-edge--top .faq-ornament-line:last-of-type,
.faq-edge--bottom .faq-ornament-line:last-of-type {
  background: linear-gradient(to right, rgba(0, 91, 140, 0.55), transparent);
}

/* Punto exterior */
.faq-ornament-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 91, 140, 0.45);
  flex-shrink: 0;
}

/* Rombo central */
.faq-ornament-diamond {
  width: 9px;
  height: 9px;
  background: var(--color-primary, #005B8C);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.80;
}

/* Puntos pequeños flanqueando el rombo */
.faq-ornament-pip {
  width: 4px;
  height: 4px;
  background: rgba(0, 91, 140, 0.50);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── Bloque de contenido interior ────────────────────────────────── */
.faq-content {
  position: relative;
  z-index: 1;
  padding: 36px 0 48px;
}

.faq-content .container {
  position: relative;
}

.faq-titulo {
  color: #5DD4F8;
  text-align: center;
  margin-bottom: 48px;
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  line-height: 1.35;
  /* Efecto neón: brillo luminoso en capas */
  text-shadow:
    0 0 6px  rgba(93, 212, 248, 0.95),
    0 0 14px rgba(93, 212, 248, 0.80),
    0 0 28px rgba(93, 212, 248, 0.55),
    0 0 56px rgba(17, 171, 227, 0.35),
    0 0 90px rgba(17, 171, 227, 0.18);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

.faq-item.open {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(100, 190, 255, 0.38);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  transform: none;
}

/* Botón pregunta */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #ffffff;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.25s;
}

.faq-question:hover { color: #b5d9f9; }
.faq-item.open .faq-question { color: #7dd4ff; }

/* Icono circular + / × */
.faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  position: relative;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              background  0.3s ease,
              border-color 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.faq-icon::before { width: 14px; height: 2px;  transform: translate(-50%, -50%); }
.faq-icon::after  { width: 2px;  height: 14px; transform: translate(-50%, -50%); }

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--color-primary, #005B8C);
  border-color: var(--color-primary, #005B8C);
}

/* Respuesta colapsable */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.52s cubic-bezier(0.4, 0, 0.2, 1),
              opacity     0.38s ease;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
}

.faq-answer p {
  margin: 0;
  padding: 14px 24px 22px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  line-height: 1.75;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* CIERRE AUTORIDAD */
.cierre-autoridad {
  background: var(--color-white);
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .hero-inner,
  .beneficios-grid,
  .steps-grid,
  .cards-grid,
  .testimonios,
  .feria-grid,
  .packs-grid,
  .form-row {
    grid-template-columns: 1fr !important;
    display: block;
  }

  .hero-inner,
  .feria-grid {
    display: block;
  }

  .beneficios-grid,
  .steps-grid,
  .cards-grid,
  .testimonios,
  .packs-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .form-row {
    display: block;
  }

  .form-group {
    margin-bottom: 10px;
  }
 }
    
  /* =========================================================
   FORMULARIO CONTACT FORM 7 — ESTILO PREMIUM MIRAALMERIA
   Pegar al final de style.css
========================================================= */

.formulario-cf7 {
  margin-top: 32px;
}

.formulario-cf7 .wpcf7 {
  width: 100%;
}

.formulario-cf7 .wpcf7 form {
  margin: 0;
}

.formulario-cf7 .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
  align-items: start;
}

.formulario-cf7 .form-grid > p {
  margin: 0;
}

.formulario-cf7 label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #153e67;
  letter-spacing: 0.01em;
}

.formulario-cf7 input[type="text"],
.formulario-cf7 input[type="email"],
.formulario-cf7 input[type="tel"],
.formulario-cf7 select,
.formulario-cf7 textarea {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(21, 62, 103, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #16324f;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.45;
  box-sizing: border-box;
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 6px 20px rgba(15, 54, 87, 0.04);
}

.formulario-cf7 input[type="text"]::placeholder,
.formulario-cf7 input[type="email"]::placeholder,
.formulario-cf7 input[type="tel"]::placeholder,
.formulario-cf7 textarea::placeholder {
  color: #7b8ea3;
  opacity: 1;
}

.formulario-cf7 select {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #1a527f 50%),
    linear-gradient(135deg, #1a527f 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 46px;
}

.formulario-cf7 textarea {
  min-height: 170px;
  resize: vertical;
}

/* Hover elegante */
.formulario-cf7 input[type="text"]:hover,
.formulario-cf7 input[type="email"]:hover,
.formulario-cf7 input[type="tel"]:hover,
.formulario-cf7 select:hover,
.formulario-cf7 textarea:hover {
  border-color: rgba(13, 86, 138, 0.34);
  box-shadow:
    0 4px 18px rgba(15, 54, 87, 0.08),
    0 0 0 4px rgba(27, 99, 155, 0.05);
}

/* Focus premium */
.formulario-cf7 input[type="text"]:focus,
.formulario-cf7 input[type="email"]:focus,
.formulario-cf7 input[type="tel"]:focus,
.formulario-cf7 select:focus,
.formulario-cf7 textarea:focus {
  border-color: #1e669f;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(30, 102, 159, 0.12),
    0 10px 26px rgba(18, 58, 90, 0.10);
  transform: translateY(-1px);
}

/* Campo ocupando ancho completo */
.formulario-cf7 .full-width,
.formulario-cf7 .full-width label,
.formulario-cf7 .wpcf7-form-control-wrap:has(textarea),
.formulario-cf7 label:has(textarea) {
  grid-column: 1 / -1;
}

/* Si el navegador no soporta :has, el textarea seguirá viéndose bien */
.formulario-cf7 textarea {
  display: block;
}

/* Checkbox premium */
.formulario-cf7 .checkbox,
.formulario-cf7 .acceptance,
.formulario-cf7 .wpcf7-acceptance {
  grid-column: 1 / -1;
}

.formulario-cf7 .checkbox {
  display: block;
}

.formulario-cf7 .wpcf7-acceptance {
  display: block;
  margin-top: 2px;
}

.formulario-cf7 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.formulario-cf7 .wpcf7-acceptance .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #264b6a;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

/* Ocultamos checkbox nativo visualmente pero sigue accesible */
.formulario-cf7 .wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.formulario-cf7 .wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
  border: 1px solid rgba(21, 62, 103, 0.22);
  background:
    linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 12px rgba(15, 54, 87, 0.08);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  box-sizing: border-box;
}

.formulario-cf7 .wpcf7-acceptance .wpcf7-list-item-label:hover::before {
  border-color: #1e669f;
  box-shadow:
    0 0 0 4px rgba(30, 102, 159, 0.08),
    0 6px 18px rgba(18, 58, 90, 0.10);
  transform: translateY(-1px);
}

.formulario-cf7 .wpcf7-acceptance input[type="checkbox"]:focus + .wpcf7-list-item-label::before,
.formulario-cf7 .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  border-color: #1e669f;
  background:
    radial-gradient(circle at center, #ffffff 18%, transparent 19%),
    linear-gradient(180deg, #1f6ea8 0%, #174f7d 100%);
  box-shadow:
    0 0 0 4px rgba(30, 102, 159, 0.13),
    0 8px 20px rgba(18, 58, 90, 0.16);
}

/* Marca interna del checkbox */
.formulario-cf7 .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  content: "✓";
  position: absolute;
  margin-left: 6px;
  margin-top: 1px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  pointer-events: none;
}

/* Botón premium */
.formulario-cf7 input[type="submit"],
.formulario-cf7 .wpcf7-submit {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 15px 24px;
  min-height: 54px;
  background: linear-gradient(135deg, #0f5f96 0%, #174a72 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(15, 95, 150, 0.22),
    0 4px 10px rgba(13, 41, 61, 0.12);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.formulario-cf7 input[type="submit"]:hover,
.formulario-cf7 .wpcf7-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 34px rgba(15, 95, 150, 0.28),
    0 6px 14px rgba(13, 41, 61, 0.14);
}

.formulario-cf7 input[type="submit"]:active,
.formulario-cf7 .wpcf7-submit:active {
  transform: translateY(0);
}

.formulario-cf7 input[type="submit"]:focus,
.formulario-cf7 .wpcf7-submit:focus {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(30, 102, 159, 0.14),
    0 16px 34px rgba(15, 95, 150, 0.28);
}

/* Mensajes de envío */
.formulario-cf7 .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 12px;
  font-size: 0.96rem;
  line-height: 1.5;
  border-width: 1px !important;
}

.formulario-cf7 .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #b42318;
}

.formulario-cf7 .wpcf7 form.invalid input,
.formulario-cf7 .wpcf7 form.invalid select,
.formulario-cf7 .wpcf7 form.invalid textarea {
  border-color: rgba(180, 35, 24, 0.42);
}

/* Espaciado botón */
.formulario-cf7 .wpcf7-submit {
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 767px) {
  .formulario-cf7 .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .formulario-cf7 label,
  .formulario-cf7 .checkbox,
  .formulario-cf7 .acceptance,
  .formulario-cf7 .wpcf7-acceptance {
    grid-column: 1 / -1;
  }

  .formulario-cf7 input[type="text"],
  .formulario-cf7 input[type="email"],
  .formulario-cf7 input[type="tel"],
  .formulario-cf7 select,
  .formulario-cf7 textarea {
    font-size: 16px; /* evita zoom en móvil */
  }

  .formulario-cf7 input[type="submit"],
  .formulario-cf7 .wpcf7-submit {
    width: 100%;
  }
}

/* =========================================================
   AJUSTE FINO FORMULARIO CF7 — CHECKBOX + MENSAJE + BOTÓN
   Pegar al final del style.css, fuera de cualquier @media
========================================================= */

.formulario .wpcf7 .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;  /* reducido de 22px para acercar botón y checkbox a los campos */
  align-items: start;
}

.formulario .wpcf7 .campo {
  min-width: 0;
}

.formulario .wpcf7 .campo.full-width {
  grid-column: 1 / -1;
}

.formulario .wpcf7 .campo.full-width textarea {
  min-height: 190px;
}

.formulario .wpcf7 .campo.legal {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
}

.formulario .wpcf7 .campo.accion {
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.formulario .wpcf7 .checkbox-linea {
  width: 100%;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-form-control-wrap {
  display: block;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-acceptance {
  display: block;
  margin: 0;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-list-item {
  margin: 0;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: #153e67;
  line-height: 1.5;
  cursor: pointer;
}

/* Mostrar checkbox real y anular el decorativo anterior */
.formulario .wpcf7 .checkbox-linea input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  accent-color: #0f5f96;
  flex: 0 0 auto;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-list-item-label {
  display: inline !important;
  color: #153e67;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-list-item-label::before,
.formulario .wpcf7 .checkbox-linea .wpcf7-list-item-label::after {
  content: none !important;
  display: none !important;
}

/* Botón alineado con la línea legal */
.formulario .wpcf7 .campo.accion .wpcf7-submit {
  margin-top: 0;
  min-width: 230px;
}

/* En móvil: todo a una columna */
@media (max-width: 767px) {
  .formulario .wpcf7 .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .formulario .wpcf7 .campo.full-width,
  .formulario .wpcf7 .campo.legal,
  .formulario .wpcf7 .campo.accion {
    grid-column: 1 / -1;
  }

  .formulario .wpcf7 .campo.accion .wpcf7-submit {
    width: 100%;
    min-width: 0;
  }
}

.formulario .wpcf7 .campo.accion .wpcf7-submit {
  margin-right: 0;
}

/* 🔥 FIX DEFINITIVO BOTÓN DERECHA */

.formulario .wpcf7 .campo.accion {
  padding-right: 0;
}

/* CLAVE: eliminar wrapper invisible de CF7 */
.formulario .wpcf7 .campo.accion .wpcf7-form-control-wrap {
  display: contents;
}

/* asegurar alineación limpia */
.formulario .wpcf7 .campo.accion .wpcf7-submit {
  margin: 0 !important;
  display: inline-flex;
}

/* 🔥 FIX ALINEACIÓN IZQUIERDA CHECKBOX */

.formulario .wpcf7 .campo.legal {
  padding-left: 0;
}

.formulario .wpcf7 .checkbox-linea {
  padding-left: 0;
  margin: 0;
}

.formulario .wpcf7 .checkbox-linea .wpcf7-list-item {
  margin: 0;
}

.formulario .wpcf7 .checkbox-linea label {
  margin: 0;
}

/* Regla anterior con 3 clases se sustituye por una con 4 clases (mayor especificidad)
   para anular cualquier conflicto con otras reglas del fichero */
.formulario .wpcf7 .form-grid .campo.accion {
  display: block !important;  /* abandona flex — enfoque más simple y fiable */
  text-align: center;         /* centra botón e hijos inline en la columna derecha */
}

/* Botón: centrado horizontal con margin auto (sobrescribe cualquier !important anterior) */
.formulario .wpcf7 .form-grid .campo.accion .wpcf7-submit {
  display: inline-flex !important;
  margin: 0 auto !important;
}

/* Nota bajo el botón: centrada, sin tocar su contenido */
.formulario .wpcf7 .form-grid .campo.accion .form-note {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto;
}

/* Casilla de verificación: alineada al inicio del row para quedar a la altura del botón */
.formulario .wpcf7 .form-grid .campo.legal {
  align-self: start;
  display: flex;
  align-items: center;
}

/* =========================================================
   BLOQUE VIDEO ALMERÍA — IMPACTO VISUAL
========================================================= */

.video-almeria {
  background: var(--color-bg-light);
}

/* Contenedor responsive perfecto */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  margin-top: 28px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* Vídeo del hero: misma anchura máxima que el vídeo de Toyo Ferial (container estándar 1100px) */
.hero .video-wrapper {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Iframe adaptado */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Nota legal elegante */
.video-disclaimer {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}

/* =========================================================
   CAPA PREMIUM EXTRA — MOVIMIENTO, IMAGENES Y FLUIDEZ
   Pegar AL FINAL de style.css
========================================================= */

/* Variables nuevas, compatibles con tu paleta actual */
:root {
  --fx-shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.08);
  --fx-shadow-strong: 0 24px 60px rgba(15, 23, 42, 0.14);
  --fx-border-soft: 1px solid rgba(15, 23, 42, 0.08);
  --fx-glow-blue: 0 0 0 1px rgba(17, 171, 227, 0.10), 0 0 30px rgba(17, 171, 227, 0.08);
  --fx-glow-orange: 0 0 0 1px rgba(245, 157, 10, 0.12), 0 0 28px rgba(245, 157, 10, 0.10);
  --radius-premium: 20px;
}

/* Animación general de entrada por scroll — estado inicial solo cuando JS está listo */
.js-ready .reveal-soft {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-soft.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes */
.js-ready .reveal-left {
  opacity: 0;
  transform: translateX(-26px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js-ready .reveal-right {
  opacity: 0;
  transform: translateX(26px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hero: luz ambiental sutil */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.55;
}

.hero::before {
  width: 280px;
  height: 280px;
  top: -80px;
  left: -60px;
  background: rgba(17, 171, 227, 0.12);
}

.hero::after {
  width: 260px;
  height: 260px;
  right: -40px;
  bottom: -80px;
  background: rgba(245, 157, 10, 0.10);
}

/* Banner hero con un poco más de presencia */
/* box-shadow en el wrap (no en img) para no ser recortado por overflow:hidden */
.hero-banner-wrap {
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  transition: box-shadow 0.55s ease;
}
.hero-banner-wrap:hover {
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}
.hero-banner {
  transition: filter 0.55s ease;
}
.hero-banner:hover {
  filter: saturate(1.04);
}

/* CTA del hero más premium */
.hero-ctas .btn {
  position: relative;
  overflow: hidden;
}

.hero-ctas .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s ease;
}

.hero-ctas .btn:hover::after {
  left: 140%;
}

/* Beneficios: un pelín más de vida */
.beneficio-item {
  position: relative;
  overflow: hidden;
  border: var(--fx-border-soft);
}

.beneficio-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(17, 171, 227, 0.08), transparent 36%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.beneficio-item:hover::before {
  opacity: 1;
}

/* Como funciona: línea superior activa en hover */
.como-funciona .step-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f4c81 0%, #11abe3 100%);
  transition: width 0.35s ease, opacity 0.35s ease;
  opacity: 0.9;
}

.como-funciona .step-item:hover::before {
  width: calc(100% - 44px);
}

/* Prueba social: mejorar tarjetas */
.stat-item,
.testimonio {
  position: relative;
  overflow: hidden;
  border: var(--fx-border-soft);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.stat-item:hover,
.testimonio:hover {
  transform: translateY(-6px);
  box-shadow: var(--fx-shadow-soft);
  border-color: rgba(15, 76, 129, 0.16);
  background: #ffffff;
}

.testimonio::before {
  content: "“";
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(15, 76, 129, 0.08);
  font-family: Georgia, serif;
}

/* Feria destacada: bloque visual principal */
.feria-destacada .feria-grid {
  align-items: center;
}

.media-showcase {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  min-height: 360px;
}

.media-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(17, 171, 227, 0.10), transparent 34%),
    radial-gradient(circle at bottom right, rgba(245, 157, 10, 0.10), transparent 34%);
  pointer-events: none;
}

.media-showcase img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease, filter 0.7s ease;
}

.media-showcase:hover img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* Placeholder visible para cuando aún no haya imagen */
.media-placeholder {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 30px;
  text-align: center;
  color: #35536f;
  background:
    linear-gradient(180deg, #f9fbfd 0%, #eef4fa 100%);
}

.media-placeholder strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: #0f4c81;
}

.media-placeholder span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Carrusel estático preparado */
.media-carousel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

.media-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

.media-carousel-item img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* FAQ móvil */
@media (max-width: 768px) {
  .faq {
    padding: 0; /* sin padding extra: faq-edge--top ya gestiona la transición visual */
    background-attachment: scroll;
  }
  .faq-question { font-size: 15px; padding: 16px 18px; }
  .faq-answer p { padding: 12px 18px 18px; }
}

/* Cierre final con más presencia */
.cierre-autoridad {
  position: relative;
  overflow: hidden;
}

.cierre-autoridad::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top center, rgba(17, 171, 227, 0.08), transparent 34%);
  pointer-events: none;
}

/* ── Tío Vivo: carrusel de logos clientes ───────────────────────────── */
.tiov-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary, #005B8C);
  opacity: 0.65;
  margin: 36px 0 14px;
  text-align: center;
}

/* Full-bleed: rompe el container para ocupar todo el ancho de sección */
.tiov-wrap {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 22px 0 26px;
  margin-bottom: 40px;
  /* Fade lateral para efecto de profundidad */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.tiov-track {
  display: flex;
  align-items: center;
  gap: 20px;
  will-change: transform;
  /* evita salto al resetear el offset */
  backface-visibility: hidden;
}

.tiov-item {
  flex-shrink: 0;
  width: 164px;
  height: 96px;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  transform-origin: center center;
  will-change: transform, opacity;
  /* transición suave en el box-shadow al pasar por el centro */
  transition: box-shadow 0.15s ease;
}

.tiov-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Tío Vivo: sin restricción de movimiento — el carrusel siempre está activo */

/* Bloques de imagen auxiliar dentro de secciones */
.section-visual-gap {
  margin-top: 30px;
}

.section-visual-box {
  position: relative;
  border-radius: var(--radius-premium);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
}

.section-visual-box img {
  width: 100%;
  height: auto;
  display: block;
}

.section-visual-note {
  padding: 14px 18px;
  font-size: 0.94rem;
  color: #506273;
  background: rgba(255,255,255,0.88);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal-soft,
  .js-ready .reveal-left,
  .js-ready .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-banner,
  .hero-ctas .btn::after,
  .beneficio-item,
  .stat-item,
  .testimonio,
  .media-showcase img,
  .faq-item {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .media-showcase,
  .media-placeholder,
  .media-showcase img {
    min-height: 260px;
  }

  .media-carousel-item img {
    height: 280px;
  }
}

/* ================================================================
   EFECTOS VISUALES AVANZADOS
   Ken Burns · Blur · Rotate · Flip · Blinds · Stack · Shimmer · Carousel
   ================================================================ */

/* --- @keyframes ------------------------------------------------- */

@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0%,     0%);   }
  33%  { transform: scale(1.06) translate(-1.5%,  0.5%); }
  66%  { transform: scale(1.08) translate(1%,    -0.5%); }
  100% { transform: scale(1.04) translate(-0.5%,  1%);   }
}

/* --- KEN BURNS: banner del hero --------------------------------- */
/* La animación y el @keyframes van inline en hero.php (bypasa WP Fastest Cache) */

/* --- BLUR-IN reveal (efecto Blur) ------------------------------- */

.js-ready .reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.75s ease, filter 0.75s ease, transform 0.75s ease;
}
.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* --- ROTATE-IN reveal (efecto Rotate) --------------------------- */

.js-ready .reveal-rotate {
  opacity: 0;
  transform: rotate(-5deg) scale(0.93);
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-rotate.is-visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* --- FLIP reveal (efecto Flip) ---------------------------------- */

.js-ready .reveal-flip {
  opacity: 0;
  transform: perspective(700px) rotateY(35deg);
  transition: opacity 0.65s ease,
              transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-flip.is-visible {
  opacity: 1;
  transform: perspective(700px) rotateY(0deg);
}

/* --- BLINDS reveal (efecto Blinds) ------------------------------ */

.js-ready .reveal-blinds {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path 0.75s cubic-bezier(0.77, 0, 0.18, 1),
              opacity 0.75s ease;
}
.reveal-blinds.is-visible {
  clip-path: inset(0 0% 0 0);
  opacity: 1;
}

/* --- STACK visual en testimonios (efecto Stack) ----------------- */

.testimonio {
  position: relative;
  z-index: 1;
}
.testimonio::before,
.testimonio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  border: 1px solid rgba(0, 91, 140, 0.10);
}
.testimonio::before {
  background: rgba(0, 91, 140, 0.05);
  transform: rotate(-1.5deg) translate(-4px, 7px);
}
.testimonio::after {
  background: rgba(0, 91, 140, 0.03);
  transform: rotate(1deg) translate(4px, 12px);
}

/* --- SHIMMER en botones fuera del hero (efecto Blast/Shine) ----- */

.feria-destacada .btn,
.como-funciona .btn,
.beneficios .btn,
.multiplataforma .btn,
.packs .btn,
.cierre-autoridad .btn {
  position: relative;
  overflow: hidden;
}
.feria-destacada .btn::after,
.como-funciona .btn::after,
.beneficios .btn::after,
.multiplataforma .btn::after,
.packs .btn::after,
.cierre-autoridad .btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0s;
  pointer-events: none;
}
.feria-destacada .btn:hover::after,
.como-funciona .btn:hover::after,
.beneficios .btn:hover::after,
.multiplataforma .btn:hover::after,
.packs .btn:hover::after,
.cierre-autoridad .btn:hover::after {
  left: 140%;
  transition: left 0.65s ease;
}

/* --- CARRUSEL FERIA DESTACADA ----------------------------------- */

.feria-carousel-wrap,
.multiplataforma-carousel-wrap {
  margin-top: 36px;
}

/* Vídeo en feria-destacada: reduce margen superior porque viene tras el H2 */
.feria-video {
  margin-top: 24px;
  margin-bottom: 0;
}

.carousel-mode-selector {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.carousel-mode-btn {
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid rgba(0, 91, 140, 0.25);
  background: transparent;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.carousel-mode-btn:hover,
.carousel-mode-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.feria-carousel {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0f2a3f;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

/* Modo Slide (Basic Linear) */
.feria-carousel-track {
  display: flex;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);
}

.feria-carousel-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
}
.feria-carousel-slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* Ken Burns activo en el slide visible */
.feria-carousel-slide.is-active img {
  animation: kenBurns 10s ease-in-out infinite alternate;
}

/* Overlay degradado */
.feria-carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 40, 70, 0.48) 0%, transparent 55%);
  pointer-events: none;
}

/* Modo Fade */
.feria-carousel--fade .feria-carousel-track {
  transition: none;
}
.feria-carousel--fade .feria-carousel-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.85s ease;
  pointer-events: none;
}
.feria-carousel--fade .feria-carousel-slide.is-active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

/* Controles prev/next */
.feria-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.88);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #004a7a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 1;
  padding: 0;
}
.feria-carousel-btn:hover {
  background: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,0.24);
  transform: translateY(-50%) scale(1.1);
}
.feria-carousel-btn--prev { left: 14px; }
.feria-carousel-btn--next { right: 14px; }

/* Dots */
.feria-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 8px;
}
.feria-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0, 91, 140, 0.20);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.feria-carousel-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.45);
}

/* Responsive carrusel */
@media (max-width: 768px) {
  .feria-carousel-slide img {
    height: 240px;
  }
  .feria-carousel-btn {
    width: 36px; height: 36px;
    font-size: 16px;
  }
}

/* --- HERO LOGO COVERFLOW 3D --------------------------------------- */

.logo-coverflow-wrap {
  position: relative;
  margin: 36px 0 48px;
  height: 176px;         /* +28px para el nombre debajo del logo */
  /* fade suave en los bordes */
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.logo-coverflow {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 800px;
  perspective-origin: 50% 50%;
}

.logo-coverflow-item {
  position: absolute;
  width: 168px;
  top: 50%;
  left: 50%;
  margin-top: -53px;   /* centra la imagen (106px / 2) */
  margin-left: -84px;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
              opacity   0.55s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Contenedor de la imagen — aquí va el clip y la sombra */
.logo-coverflow-img-wrap {
  width: 168px;
  height: 106px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10);
  transition: box-shadow 0.55s ease;
}

.logo-coverflow-item.is-center .logo-coverflow-img-wrap {
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
}

/* Nombre de la marca debajo del logo */
.logo-coverflow-name {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: rgba(30, 42, 60, 0.40);
  transition: color 0.55s ease, opacity 0.55s ease;
  pointer-events: none;
  line-height: 1;
}

.logo-coverflow-item.is-center .logo-coverflow-name {
  color: var(--color-primary);
  opacity: 1;
}

/* Logos con ícono: zoom ×3 para mostrar solo el símbolo central */
.logo-coverflow-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 48%;
  transform: scale(3);
  display: block;
  pointer-events: none;
}

/* Marca principal (--full): muestra el logo completo sin recorte */
.logo-coverflow-item--full img {
  transform: scale(1);
  transform-origin: 50% 50%;
  object-fit: contain;
  padding: 6px;
}

/* Botones de navegación */
.logo-coverflow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  color: var(--color-primary-dark, #0F172A);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: background 0.2s, box-shadow 0.2s;
}
.logo-coverflow-btn:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.logo-coverflow-btn--prev { left: 0; }
.logo-coverflow-btn--next { right: 0; }

@media (max-width: 768px) {
  .logo-coverflow-wrap {
    height: 148px;        /* +28px para el nombre */
    margin: 28px 0 38px;
  }
  .logo-coverflow-item {
    width: 134px;
    margin-top: -42px;   /* centra la imagen (84px / 2) */
    margin-left: -67px;
  }
  .logo-coverflow-img-wrap {
    width: 134px;
    height: 84px;
  }
  .logo-coverflow-name {
    font-size: 9px;
    margin-top: 7px;
  }
  .logo-coverflow-btn { display: none; }
}

/* Respeto a reducción de movimiento (nuevos efectos) */
@media (prefers-reduced-motion: reduce) {
  .hero-banner,
  .feria-carousel-slide.is-active img {
    animation: none !important;
  }
  .js-ready .reveal-blur,
  .js-ready .reveal-rotate,
  .js-ready .reveal-flip,
  .js-ready .reveal-blinds {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .feria-carousel-track {
    transition: none !important;
  }
  .feria-carousel--fade .feria-carousel-slide {
    transition: none !important;
  }
}

/* =====================================================
   RESPONSIVE MÓVIL Y TABLET — MEJORAS COMPLETAS
   ===================================================== */

/* ── TABLET GRANDE (≤ 1024px) ─────────────────────── */
@media (max-width: 1024px) {
  section {
    padding: 50px 0;
  }
}

/* ── TABLET (≤ 960px): correcciones de rejilla ─────── */
@media (max-width: 960px) {
  /* Beneficios: 2 columnas en tablet (mejor que 1 sola) */
  .beneficios-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }

  /* Testimonios: 2 columnas en tablet */
  .testimonios {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Padding de secciones algo más contenido */
  section {
    padding: 46px 0;
  }

  /* H2 escalado para tablet */
  #landing-ferias h2 {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
  }
}

/* ── MÓVIL (≤ 767px) ───────────────────────────────── */
@media (max-width: 767px) {
  /* Padding de secciones reducido */
  section {
    padding: 38px 0;
  }

  /* Tipografía hero escalada */
  .hero h1 {
    font-size: clamp(1.45rem, 6vw, 2rem);
    line-height: 1.3;
  }

  /* Titulares de sección */
  #landing-ferias h2 {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    line-height: 1.35;
  }

  /* Subtítulo hero */
  .hero-subtitle {
    font-size: 16px;
  }

  /* Intro de sección: sin límite de anchura en móvil */
  .section-intro {
    max-width: 100%;
  }

  /* Hero CTAs: apilados y a ancho completo */
  .hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero-ctas .btn {
    width: 100%;
    text-align: center;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* Beneficios: 1 columna en móvil */
  .beneficios-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Stats: apiladas en columna */
  .stats {
    flex-direction: column;
    gap: 14px;
  }

  .stat-item {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Testimonios: 1 columna en móvil */
  .testimonios {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* Feria destacada: botón a ancho completo */
  .feria-destacada-text .btn,
  .feria-benefits + a.btn {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* FAQ: padding y tipografía más compactos */
  .faq-item {
    padding: 14px 16px;
  }

  .faq-item h3 {
    font-size: 0.95rem;
    margin: 0 0 8px;
    line-height: 1.4;
  }

  .faq-item p {
    font-size: 0.9rem;
  }

  /* Cierre autoridad: botón centrado */
  .cierre-autoridad .btn {
    display: block;
    max-width: 360px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Formulario estático: ancho completo */
  .formulario-cf7-static {
    max-width: 100%;
  }

  /* Sección cómo funciona: línea decorativa centrada */
  .como-funciona .section-cta::before {
    margin: 0 auto 18px;
  }

  /* Prueba social: números más grandes y legibles */
  .stat-number {
    font-size: 26px;
  }

  .stat-label {
    font-size: 13px;
  }

  /* Beneficios sección: botón a ancho completo */
  .section-cta .btn,
  .beneficios .btn {
    display: block;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ── MÓVIL PEQUEÑO (≤ 480px) ─────────────────────── */
@media (max-width: 480px) {
  section {
    padding: 28px 0;
  }

  .hero h1 {
    font-size: 1.4rem;
  }

  #landing-ferias h2 {
    font-size: 1.2rem;
  }

  /* Botones más compactos */
  .btn {
    font-size: 14px;
    padding: 11px 18px;
  }

  /* Beneficio items más compactos */
  .beneficio-item {
    font-size: 13px;
    padding: 12px;
  }

  /* Carrusel más bajo en pantallas muy pequeñas */
  .feria-carousel-slide img {
    height: 200px;
  }

  /* Botones del carrusel más pequeños y pegados al borde */
  .feria-carousel-btn--prev { left: 8px; }
  .feria-carousel-btn--next { right: 8px; }

  /* Hero logos: reducidos */
  .hero-logo-btn,
  .hero-sublogo-btn {
    font-size: 13px;
    padding: 0 12px;
    min-height: 40px;
  }

  /* Tarjetas de pack en pantalla pequeña */
  .packs .pack {
    padding: 20px 16px 18px;
  }

  /* FAQs: tipografía mínima */
  .faq-item h3 {
    font-size: 0.9rem;
  }
}
/* ── FOOTER: aviso legal de autoría ──────────────────────────────── */
.site-footer {
  background: #030E24;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 0 0;
}

.site-footer .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer__copy {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.50);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0;
}

.site-footer__copy strong {
  color: rgba(255, 255, 255, 0.80);
  font-weight: 600;
}

.site-footer__sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.25);
}

.site-footer__dev {
  color: rgba(93, 212, 248, 0.70);
  font-weight: 500;
}

@media (max-width: 480px) {
  .site-footer__copy {
    font-size: 0.74rem;
  }
}