/* ==========================================================================
   MILLÁN CHICLANA - Millán Servicios e Interiorismo S.L.
   Hoja de Estilos Principal (Light Mode Exclusivo, Mobile-First & Alto Contraste)
   Paleta Corporativa: Negro, Gris y Blanco
   ========================================================================== */

:root {
  --color-bg-main: #F9FAFB;
  --color-bg-stone: #F1F5F9;
  --color-bg-card: #FFFFFF;
  --color-green-primary: #111111;
  --color-green-secondary: #27272A;
  --color-green-light: #F1F5F9;
  --color-wood-primary: #334155;
  --color-wood-secondary: #1E293B;
  --color-wood-light: #E2E8F0;
  --color-text-dark: #18181B;
  --color-text-muted: #52525B;
  --color-border: #CBD5E1;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-main);
  color: var(--color-text-dark);
  color-scheme: light only;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg-main);
  color: var(--color-text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ==========================================================================
   PRELOADER CORPORATIVO
   ========================================================================== */
#site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #F9FAFB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#site-preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-spinner-ring {
  position: relative;
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-spinner-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 3px solid #E5E7EB;
  border-top-color: #111111;
  border-right-color: #71717A;
  animation: millanSpin 1.15s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.preloader-logo-mark {
  animation: millanPulseRotate 2.4s ease-in-out infinite;
}

@keyframes millanSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes millanPulseRotate {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.06) rotate(8deg);
  }
}

/* ==========================================================================
   MICRO-INTERACCIONES, TARJETAS Y BOTONES
   ========================================================================== */
.card-hover {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px -10px rgba(17, 17, 17, 0.16), 0 8px 16px -6px rgba(51, 65, 85, 0.12);
  border-color: #111111;
}

.btn-primary-green {
  background-color: #111111;
  color: #FFFFFF;
  border: 1px solid #27272A;
  transition: all 0.25s ease;
}

.btn-primary-green:hover {
  background-color: #27272A;
  border-color: #3F3F46;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -5px rgba(17, 17, 17, 0.35);
}

.btn-primary-wood {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
}

.btn-primary-wood:hover {
  background: linear-gradient(135deg, #334155 0%, #1E293B 100%);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -5px rgba(51, 65, 85, 0.4);
}

/* ==========================================================================
   HERO SLIDER & CARRUSELES
   ========================================================================== */
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.hero-slide-bg {
  transform: scale(1.06);
}

.hero-slide.active .hero-slide-bg {
  animation: heroKenBurns 5s ease-out forwards;
}

@keyframes heroKenBurns {
  0% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   VISOR INTERACTIVO DE CATÁLOGOS PDF Y MODAL DE PRESUPUESTO POR MARCA
   ========================================================================== */
#catalog-modal,
#brand-quote-modal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-hidden,
#catalog-modal.modal-hidden,
#brand-quote-modal.modal-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-visible,
#catalog-modal.modal-visible,
#brand-quote-modal.modal-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.flipbook-frame-wrapper {
  background: radial-gradient(circle at center, #27272A 0%, #09090B 100%);
  position: relative;
}

/* Efecto sutil de pliegue de catálogo abierto en escritorio */
@media (min-width: 1024px) {
  .flipbook-frame-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 24px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 48%, rgba(255,255,255,0.08) 52%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 5;
  }
}

/* ==========================================================================
   ACORDEÓN FAQ
   ========================================================================== */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-content {
  max-height: 500px;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
  background-color: #111111;
  color: #FFFFFF;
}

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP (SECUNDARIO Y DISCRETO)
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 40;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  opacity: 0.9;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.03);
  opacity: 1;
}

/* ==========================================================================
   SCROLLBAR PERSONALIZADO Y UTILIDADES DE ACCESIBILIDAD
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
  background: #A1A1AA;
  border-radius: 5px;
  border: 2px solid #F3F4F6;
}

::-webkit-scrollbar-thumb:hover {
  background: #3F3F46;
}

:focus-visible {
  outline: 3px solid #52525B;
  outline-offset: 2px;
}

/* ==========================================================================
   PROTECCIÓN GLOBAL DE IMÁGENES (BLOQUEO DE DESCARGA Y ARRASTRE) Y LIGHTBOX
   ========================================================================== */
img,
svg {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.js-lightbox-trigger {
  cursor: zoom-in;
}

/* ==========================================================================
   COREOGRAFÍA DE SCROLL ESTILO APPLE (REVEAL 3D, ESCALA PROGRESIVA Y PARALAJE)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .apple-reveal {
    opacity: 0;
    will-change: transform, opacity, filter;
    transition:
      opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--apple-delay, 0ms);
  }

  .apple-reveal-up {
    transform: translate3d(0, 44px, 0) scale(0.94);
    filter: blur(4px);
  }

  .apple-reveal-left {
    transform: translate3d(-52px, 22px, 0) scale(0.95);
    filter: blur(4px);
  }

  .apple-reveal-right {
    transform: translate3d(52px, 22px, 0) scale(0.95);
    filter: blur(4px);
  }

  .apple-reveal-zoom {
    transform: translate3d(0, 36px, 0) scale(0.9);
    filter: blur(6px);
  }

  .apple-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }

  .apple-scroll-stage {
    will-change: transform, opacity;
    transform-origin: center top;
  }
}

/* ==========================================================================
   CENTRADO AUTOMÁTICO DE ÚLTIMA FILA EN GRIDS DE TARJETAS Y CATÁLOGOS
   (Cuando la última fila tiene 1 o 2 elementos en lugar de 3, quedan centrados
   manteniendo exactamente el mismo ancho de columna)
   ========================================================================== */
.grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6,
.grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6 > *,
.grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > * {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > * {
    width: calc((100% - 1.5rem - 0.5px) / 2);
    flex: 0 0 calc((100% - 1.5rem - 0.5px) / 2);
    max-width: calc((100% - 1.5rem - 0.5px) / 2);
  }
}

@media (min-width: 768px) {
  .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6 > * {
    width: calc((100% - 1.5rem - 0.5px) / 2);
    flex: 0 0 calc((100% - 1.5rem - 0.5px) / 2);
    max-width: calc((100% - 1.5rem - 0.5px) / 2);
  }
}

@media (min-width: 1024px) {
  .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6 > *,
  .grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > * {
    width: calc((100% - 3rem - 0.5px) / 3);
    flex: 0 0 calc((100% - 3rem - 0.5px) / 3);
    max-width: calc((100% - 3rem - 0.5px) / 3);
  }
}

/* ==========================================================================
   SISTEMA AVANZADO DE ANIMACIONES Y MICRO-INTERACCIONES CORPORATIVAS
   ========================================================================== */

/* 1. Vibración discreta única de llamada en el icono de teléfono al entrar */
@keyframes millanPhoneVibrationOnce {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  12% {
    transform: rotate(-15deg) scale(1.1);
  }
  24% {
    transform: rotate(14deg) scale(1.12);
  }
  36% {
    transform: rotate(-14deg) scale(1.12);
  }
  48% {
    transform: rotate(12deg) scale(1.1);
  }
  60% {
    transform: rotate(-10deg) scale(1.06);
  }
  72% {
    transform: rotate(8deg) scale(1.04);
  }
  84% {
    transform: rotate(-5deg) scale(1.02);
  }
}

.phone-vibrate-once {
  display: inline-block;
  transform-origin: center center;
  animation: millanPhoneVibrationOnce 0.95s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1 both;
}

/* 2. Pulso discreto único al entrar en la web para WhatsApp y CTA Llamar Ahora */
@keyframes millanEntryAttentionOnce {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.45);
  }
  45% {
    transform: scale(1.035);
    box-shadow: 0 0 0 10px rgba(17, 17, 17, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(17, 17, 17, 0);
  }
}

@keyframes millanWhatsappAttentionOnce {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  }
  50% {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 0 12px rgba(74, 222, 128, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

.cta-entry-pulse-once {
  animation: millanEntryAttentionOnce 1.15s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

.whatsapp-entry-pulse-once {
  animation: millanWhatsappAttentionOnce 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

/* 3. Entrada secuencial del contenido de texto en cada Slide del Hero */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide .max-w-3xl > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hero-slide.active .max-w-3xl > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .hero-slide.active .max-w-3xl > *:nth-child(1) {
    transition-delay: 80ms;
  }
  .hero-slide.active .max-w-3xl > *:nth-child(2) {
    transition-delay: 170ms;
  }
  .hero-slide.active .max-w-3xl > *:nth-child(3) {
    transition-delay: 260ms;
  }
  .hero-slide.active .max-w-3xl > *:nth-child(4) {
    transition-delay: 350ms;
  }
  .hero-slide.active .max-w-3xl > *:nth-child(5) {
    transition-delay: 430ms;
  }
}

/* 4. Barra de progreso integrada en el punto activo del Hero Slider */
[data-hero-dot] {
  position: relative;
  overflow: hidden;
}

.hero-dot-progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #52525B 0%, #111111 100%);
  border-radius: 9999px;
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

[data-hero-dot].is-active-dot {
  background-color: rgba(255, 255, 255, 0.38) !important;
}

[data-hero-dot].is-active-dot .hero-dot-progress {
  background: #FFFFFF;
  animation: millanHeroDotFill 6s linear forwards;
}

[data-hero-dot].is-active-dot.is-paused-dot .hero-dot-progress {
  animation-play-state: paused;
}

@keyframes millanHeroDotFill {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* 5. Cabecera Sticky inteligente al hacer scroll + Subrayado animado en enlaces */
header.sticky {
  transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

header.sticky.header-scrolled {
  background-color: rgba(249, 250, 251, 0.98);
  box-shadow: 0 10px 28px -12px rgba(17, 17, 17, 0.14);
  border-bottom-color: #CBD5E1;
}

header nav[aria-label="Navegación principal"] a {
  position: relative;
}

header nav[aria-label="Navegación principal"] a:not(.border-b-2)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #111111;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

header nav[aria-label="Navegación principal"] a:not(.border-b-2):hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* 6. Micro-interacciones en Tarjetas (.card-hover), Imágenes y Flechas */
.card-hover img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-hover:hover img {
  transform: scale(1.055);
}

.card-hover a svg:last-child,
.btn-primary-green svg:last-child,
.btn-primary-wood svg:last-child,
.btn-secondary-quote svg:first-child,
[data-open-brand-quote] svg:first-child {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-hover a:hover svg:last-child {
  transform: translateX(4px);
}

/* 7. Movimiento de elevación y efecto destello diagonal (Shine) en botones principales y en Pedir Presupuesto */
.btn-secondary-quote,
[data-open-brand-quote] {
  background-color: #F9FAFB;
  color: #18181B;
  border: 1px solid #D1D5DB;
  transition: all 0.25s ease;
}

.btn-secondary-quote:hover,
[data-open-brand-quote]:hover {
  background-color: #18181B !important;
  color: #FFFFFF !important;
  border-color: #111111 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -5px rgba(17, 17, 17, 0.28);
}

.btn-secondary-quote:hover svg,
[data-open-brand-quote]:hover svg {
  color: #FFFFFF !important;
  transform: translateY(-1px) scale(1.06);
}

.btn-primary-green,
.btn-primary-wood,
.btn-secondary-quote,
[data-open-brand-quote] {
  position: relative;
  overflow: hidden;
}

.btn-primary-green::after,
.btn-primary-wood::after,
.btn-secondary-quote::after,
[data-open-brand-quote]::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 42%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.btn-primary-green:hover::after,
.btn-primary-wood:hover::after,
.btn-secondary-quote:hover::after,
[data-open-brand-quote]:hover::after {
  left: 125%;
}

/* 7B. Destello dorado único para la estrella (★) en botones de "Dejar reseña" al aparecer */
@keyframes millanStarSparkleOnce {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0));
  }
  20% {
    transform: scale(1.45) rotate(-18deg);
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.95)) brightness(1.35);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.95), 0 0 22px rgba(245, 158, 11, 0.75);
  }
  45% {
    transform: scale(1.22) rotate(16deg);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.75)) brightness(1.2);
  }
  70% {
    transform: scale(1.38) rotate(-8deg);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.95)) brightness(1.35);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.9);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0));
    text-shadow: none;
  }
}

.star-sparkle-once {
  display: inline-block;
  transform-origin: center center;
  animation: millanStarSparkleOnce 1.15s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

/* 7C. Odómetro vertical sincronizado para contadores numéricos */
.counter-odometer-window {
  display: inline-flex;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15em;
  vertical-align: bottom;
  position: relative;
}

.counter-odometer-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.counter-odometer-track > span {
  height: 1.15em;
  line-height: 1.15em;
  display: block;
}

/* 7D. Animación en el botón de Enviar mensaje: el icono de email se desliza desde donde está hasta el final del cuadro del botón y luego aparece el mensaje por defecto */
@keyframes millanMailSlideToEnd {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  14% {
    transform: translate3d(-4px, 0, 0) scale(1.08) rotate(-4deg);
    opacity: 1;
  }
  84% {
    transform: translate3d(var(--mail-slide-x, 165px), 0, 0) scale(1.12) rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(var(--mail-slide-x, 165px) + 20px), 0, 0) scale(0.9) rotate(8deg);
    opacity: 0;
  }
}

@keyframes millanBtnDefaultMsgReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#contact-submit-btn.is-sliding-mail,
#brand-quote-submit-btn.is-sliding-mail {
  pointer-events: none;
}

#contact-submit-btn.is-sliding-mail .btn-mail-icon,
#brand-quote-submit-btn.is-sliding-mail .btn-mail-icon {
  position: relative;
  z-index: 2;
  animation: millanMailSlideToEnd 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  filter: drop-shadow(-8px 0 6px rgba(255, 255, 255, 0.38));
}

#contact-submit-btn.is-sliding-mail .btn-mail-label,
#brand-quote-submit-btn.is-sliding-mail .btn-mail-label {
  opacity: 0;
  transform: translate3d(10px, 0, 0);
  transition: opacity 0.16s ease, transform 0.2s ease;
}

#contact-submit-btn.is-revealing-msg .btn-mail-label,
#contact-submit-btn.is-revealing-msg .btn-mail-icon,
#contact-submit-btn.is-revealing-msg #contact-btn-spinner,
#brand-quote-submit-btn.is-revealing-msg .btn-mail-label,
#brand-quote-submit-btn.is-revealing-msg .btn-mail-icon {
  animation: millanBtnDefaultMsgReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 7E. Animación del icono de ubicación (Pin) en botones "Cómo llegar": cae dentro del cuadro del botón y rebota hasta su sitio */
@keyframes millanPinDropBounce {
  0% {
    transform: translate3d(-12px, -36px, 0) scale(0.85, 1.15) rotate(-14deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  34% {
    transform: translate3d(-5px, 3px, 0) scale(1.2, 0.8) rotate(5deg);
    opacity: 1;
  }
  54% {
    transform: translate3d(-2px, -14px, 0) scale(0.92, 1.08) rotate(-4deg);
  }
  72% {
    transform: translate3d(0, 2px, 0) scale(1.12, 0.88) rotate(2deg);
  }
  86% {
    transform: translate3d(0, -6px, 0) scale(0.97, 1.04) rotate(-1deg);
  }
  94% {
    transform: translate3d(0, 1px, 0) scale(1.03, 0.97) rotate(0deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg);
    opacity: 1;
  }
}

.map-pin-drop-bounce {
  display: inline-block;
  transform-origin: center bottom;
  animation: millanPinDropBounce 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 1 both !important;
}

/* 7F. Cursor parpadeante de teclado para la numeración de la tarjeta CaixaBank */
@keyframes millanCardCaretBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.card-typing-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  background-color: rgba(255, 255, 255, 0.92);
  margin-left: 3px;
  vertical-align: middle;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
  animation: millanCardCaretBlink 0.75s infinite;
}

/* 7G. Animación de llama viva (fuego en movimiento) en la diapositiva de Chimeneas y en iconos de botones del carrusel */
@keyframes millanFireFlicker {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg);
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.7));
  }
  20% {
    transform: translate3d(-0.5px, -1.5px, 0) scale(0.95, 1.14) rotate(-5deg);
    filter: drop-shadow(0 0 9px rgba(251, 146, 60, 0.95)) brightness(1.15);
  }
  42% {
    transform: translate3d(1px, -0.5px, 0) scale(1.08, 0.94) rotate(4deg);
    filter: drop-shadow(0 0 5px rgba(234, 88, 12, 0.85));
  }
  65% {
    transform: translate3d(-0.5px, -2px, 0) scale(0.96, 1.18) rotate(-3deg);
    filter: drop-shadow(0 0 11px rgba(253, 186, 116, 1)) brightness(1.22);
  }
  84% {
    transform: translate3d(0.5px, -1px, 0) scale(1.05, 1.04) rotate(5deg);
    filter: drop-shadow(0 0 7px rgba(249, 115, 22, 0.9));
  }
}

@keyframes millanFireBurstOnce {
  0% {
    transform: translate3d(0, 6px, 0) scale(0.7, 0.7) rotate(-10deg);
    filter: drop-shadow(0 0 0 rgba(249, 115, 22, 0));
  }
  35% {
    transform: translate3d(0, -4px, 0) scale(1.28, 1.35) rotate(8deg);
    filter: drop-shadow(0 0 14px rgba(251, 146, 60, 1)) brightness(1.3);
  }
  65% {
    transform: translate3d(0, -1px, 0) scale(0.94, 1.16) rotate(-6deg);
    filter: drop-shadow(0 0 9px rgba(249, 115, 22, 0.9));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg);
    filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.75));
  }
}

.hero-fire-emoji,
.hero-fire-icon {
  display: inline-block;
  transform-origin: center bottom;
}

.hero-slide.active .hero-fire-emoji,
.hero-slide.active .hero-fire-icon {
  animation: millanFireFlicker 1.35s ease-in-out infinite !important;
}

.hero-fire-icon {
  color: #FDBA74;
}

.hero-fire-burst {
  animation: millanFireBurstOnce 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1 both !important;
}

@keyframes millanHeroMailPop {
  0% {
    transform: translate3d(-10px, 0, 0) scale(0.88) rotate(-8deg);
    opacity: 0.4;
  }
  45% {
    transform: translate3d(4px, -2px, 0) scale(1.18) rotate(6deg);
    opacity: 1;
  }
  75% {
    transform: translate3d(-2px, 0, 0) scale(0.97) rotate(-2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.hero-mail-pop-once {
  animation: millanHeroMailPop 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1 both !important;
}

/* 8. Animación limpia al filtrar tarjetas de marcas, galería o reseñas */
@keyframes millanFilterCardIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.filter-animate-in {
  animation: millanFilterCardIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 9. Resplandor cálido sutil para las píldoras temáticas de Chimeneas */
.chimney-pill-glow {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.chimney-pill-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -3px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(251, 191, 36, 0.45);
}

/* 10. Tarjeta interactiva 3D de Financiación CaixaBank */
.caixabank-card-3d {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .phone-vibrate-once,
  .cta-entry-pulse-once,
  .whatsapp-entry-pulse-once,
  .filter-animate-in,
  [data-hero-dot].is-active-dot .hero-dot-progress {
    animation: none !important;
  }
}