@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap");

/* ===========================
   SISTEMA DE TEMAS ESTACIONALES
   Cada tema se activa con body.[theme-name]
   =========================== */

/* 1. Comportamiento base cuando hay algún tema activo */
body[class*='-theme'] .bg-brand {
  background-color: var(--theme-cta-bg) !important;
}
body[class*='-theme'] .bg-brand:hover {
  background-color: var(--theme-cta-bg-hover) !important;
}
body[class*='-theme'] .text-brand {
  color: var(--theme-primary) !important;
}

/* Hero decorativo genérico (colores se definen por tema) */
body[class*='-theme'] .hero-bg::before,
body[class*='-theme'] .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[class*='-theme'] .hero-bg::before {
  background:
    radial-gradient(circle at 10% 20%, var(--hero-deco-color-1) 0, transparent 55%),
    radial-gradient(circle at 80% 30%, var(--hero-deco-color-2) 0, transparent 60%),
    radial-gradient(circle at 20% 80%, var(--hero-deco-color-3) 0, transparent 55%);
  opacity: var(--hero-deco-opacity);
  mix-blend-mode: screen;
  animation: seasonal-float-1 28s linear infinite;
}

body[class*='-theme'] .hero-bg::after {
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.12) 0, transparent 50%),
    radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.08) 0, transparent 55%);
  opacity: calc(var(--hero-deco-opacity) * 0.8);
  mix-blend-mode: soft-light;
  animation: seasonal-float-2 36s linear infinite;
}

@keyframes seasonal-float-1 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes seasonal-float-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, 10px, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Hero: refuerzo de legibilidad con tema activo */
body[class*='-theme'] .hero-title,
body[class*='-theme'] .hero-mobile,
body[class*='-theme'] .hero-desktop {
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.65);
}

/* ===========================
   2. TEMAS ESPECÍFICOS
   =========================== */

/* VALENTINE – tonos vino/rosa, corazones suaves */
body.valentine-theme {

  --hero-bg-image: url("../images/themes/valentine/valentine.png");

}

body.valentine-theme .bg-brand-black {
  background-color: #af696b !important;
}

body.valentine-theme #logo-dinamico {
  content: url('../images/themes/logo-gold.png');
}

/* Cuando el body tiene la clase valentines, cambia el logo */
body.valentine-theme #mobile-logo {
    content: url('../images/themes/logo-gold.png');
    position: relative;
    top: -12px;    /* Mueve arriba (-) o abajo (+) */
    left: -170px;   /* Mueve izquierda (-) o derecha (+) */
}

body.valentine-theme #mobile-menu.opacity-0 {
    visibility: hidden;
    background-color: transparent;
    box-shadow: none;
    border: none;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
}

body.valentine-theme nav.bg-white {
  background-color: #46131c !important;
}


/* VALENTINE – borde dorado metálico navbar */
body.valentine-theme #main-nav {
  background-color: #46131c !important;
  backdrop-filter: blur(12px);
  color: white;

 /* 👇 AUMENTA TAMAÑO DEL CONTAINER */
  padding: 14px 32px;      /* altura + ancho */
  min-height: 34px;        /* altura mínima */
  border-radius: 999px;    /* mantiene forma cápsula */
  
  border: 1.5px solid transparent; /* base necesaria */

  /* borde metálico */
  background-image:
    linear-gradient(#46131c, #46131c), /* fondo */
    linear-gradient(
      135deg,
      #fff6c9,
      #f4d97a,
      #d4af37,
      #b8962e,
      #fff3b0,
      #d4af37
    );

  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Reemplazar el botón de texto con la imagen del corazón */
body.valentine-theme #nav-quote {
  /* Ocultar el texto */
  font-size: 1;
  color: transparent;
  text-decoration: none;
  
  /* Mostrar la imagen */
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url('../images/themes/valentine/get-quote-corazon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* Independiente del layout - no empuja otros elementos */
  position: absolute;
  vertical-align: middle;

  /* Ajusta estos valores para posicionarlo donde quieras */
  top: 50%;
  right: -120px;
  translate: 0 -50%;

  /* Que aparezca encima de otros elementos */
  z-index: 999;
  
  /* Quitar estilos heredados del botón */
  border: none;
  padding: 0;
  
  /* Quitar estilos de Tailwind */
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Efecto hover que crece SIN afectar el layout */
#nav-quote:hover {
  transform: scale(1.15);
  font-size: 0;
  background-color: transparent !important;
  filter: drop-shadow(0 0 4px #b8860b);
}

/* Asegura que la transición también esté en el estado normal */
#nav-quote {
  transition: transform 0.3s ease;
}

body.valentine-theme #lang-btn {
  background-color: #46131c !important; /* color vino */
  backdrop-filter: blur(12px);
  border-color: #46131c !important;
  color: white;
}

#nodealerships {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background-color: #46131c !important;
  color: #D4AF37 !important;
}

body.valentine-theme #nodealerships::before {
  content: "";
  position: absolute;
  inset: -80px -90px; /* margen extra para que se vea el corazón completo */
  background-image: url("../images/themes/valentine/no-dealerships-corazon.png");
  left: -250px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -2; /* detrás del texto, delante del fondo del hero */
}

/* Subtitle debajo del H1 (solo Valentine) */
body.valentine-theme .hero-title::after {
  content: attr(data-valentine-hero);
  display: block;
  margin-top: 14px;
  font-size: 50px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #af696b;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* VALENTINE CTA BUTTONS */
body.valentine-theme {
  --valentine-cta-primary-start: #46131c;
  --valentine-cta-primary-mid: #46131c;
  --valentine-cta-primary-end: #46131c;
  --valentine-cta-primary-text: #e9c36b;
  --valentine-cta-gold-1: #7a5410;
  --valentine-cta-gold-2: #bd8d2f;
  --valentine-cta-gold-3: #e9c36b;
  --valentine-cta-gold-4: #fff0b8;
  --valentine-cta-gold-text: #7c1326;
}

body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-brand {
  position: relative;
  background-image: linear-gradient(135deg, var(--valentine-cta-primary-start) 0%, var(--valentine-cta-primary-mid) 50%, var(--valentine-cta-primary-end) 100%);
  color: var(--valentine-cta-primary-text);

  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  overflow: hidden;
}

/* Borde dorado metálico — solo borde */
body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-brand {

  border: 1.5px solid transparent;

  background-image:
    linear-gradient(
      135deg,
      var(--valentine-cta-primary-start) 0%,
      var(--valentine-cta-primary-mid) 50%,
      var(--valentine-cta-primary-end) 100%
    ),
    linear-gradient(
      135deg,
      #fff6c9,
      #f4d97a,
      #d4af37,
      #b8962e,
      #fff3b0,
      #d4af37
    );

  background-origin: border-box;
  background-clip: padding-box, border-box;
}

body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-white {
  position: relative;
  color: var(--valentine-cta-gold-text);
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(135deg, var(--valentine-cta-gold-1) 0%, var(--valentine-cta-gold-2) 35%, var(--valentine-cta-gold-3) 68%, var(--valentine-cta-gold-4) 100%);
  border: 1px solid rgba(153, 110, 22, 0.45);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(123, 86, 19, 0.28),
    0 12px 26px rgba(168, 124, 38, 0.36),
    0 0 18px rgba(255, 208, 116, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  overflow: hidden;
}

body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-white:hover {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.03);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(123, 86, 19, 0.35),
    0 16px 30px rgba(168, 124, 38, 0.44),
    0 0 24px rgba(255, 208, 116, 0.42);
}

body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-white::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.72) 45%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.8s ease;
  pointer-events: none;
}

body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-white:hover::before {
  left: 125%;
}

body.valentine-theme #inicio .flex.flex-col.md\:flex-row.gap-4 > a.bg-white .fa-phone-alt {
  color: #664000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}




/* =====================================
   VALENTINE TAPIZ SOBRE FONDOS BLANCOS
===================================== */

body.valentine-theme .bg-white,
body.valentine-theme .bg-gray-50,
body.valentine-theme section.bg-white {

  position: relative;
  background-color: #ffffff !important;
  overflow: hidden;
}

/* capa del tapiz */
body.valentine-theme .bg-white::before,
body.valentine-theme .bg-gray-50::before,
body.valentine-theme section.bg-white::before {

  content: "";
  position: absolute;
  inset: 0;

  background-image: url("../images/themes/valentine/tapiz-valentine-2.png");
  background-repeat: repeat;
  background-size: 600px auto;
  background-position: center;

  opacity: 1;

  z-index: 0;
  pointer-events: none;
}

/* contenido encima del tapiz */
body.valentine-theme .bg-white > *,
body.valentine-theme .bg-gray-50 > *,
body.valentine-theme section.bg-white > * {
  position: relative;
  z-index: 1;
}

/* =====================================
   EXCLUIR NAVBAR DEL TAPIZ
===================================== */

body.valentine-theme nav.bg-white::before {
  display: none !important;
}

/* Ocultar header vacío en Valentine theme */
body.valentine-theme section > 
.flex.flex-col.md\:flex-row.justify-between.items-end.mb-10 {
  display: none !important;
}

/* Cambiar color del card azul en tema Valentine */
body.valentine-theme #card-azul {
  background-color: #46131c !important;
}

/* CONTENEDOR */
body.valentine-theme .valentine-hearts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* CORAZONES */
.valentine-hearts span {
  position: absolute;
  display: block;
  color: #ff4d6d;
  font-size: 20px;
  animation: fall linear infinite;
  opacity: 0.8;
}

/* ANIMACION */
@keyframes fall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

/* POSICIONES Y TIEMPOS DIFERENTES */
.valentine-hearts span:nth-child(1){left:10%;animation-duration:7s;animation-delay:0s;}
.valentine-hearts span:nth-child(2){left:20%;animation-duration:9s;animation-delay:1s;}
.valentine-hearts span:nth-child(3){left:30%;animation-duration:6s;animation-delay:2s;}
.valentine-hearts span:nth-child(4){left:40%;animation-duration:8s;animation-delay:0s;}
.valentine-hearts span:nth-child(5){left:50%;animation-duration:10s;animation-delay:3s;}
.valentine-hearts span:nth-child(6){left:60%;animation-duration:7s;animation-delay:1s;}
.valentine-hearts span:nth-child(7){left:70%;animation-duration:9s;animation-delay:2s;}
.valentine-hearts span:nth-child(8){left:80%;animation-duration:6s;animation-delay:0s;}
.valentine-hearts span:nth-child(9){left:90%;animation-duration:8s;animation-delay:3s;}
.valentine-hearts span:nth-child(10){left:95%;animation-duration:7s;animation-delay:1s;}

/* Oculta el texto del título */
body.valentine-theme h2[data-i18n="Pre_catalog_title"] {
    color: transparent;
    position: relative;
}

/* Reemplaza con imagen usando pseudo-elemento */
body.valentine-theme h2[data-i18n="Pre_catalog_title"]::after {
    content: url('../images/themes/valentine/catalog-preview.png'); /* Cambia por tu imagen */
    position: absolute;
    top: -60px;    /* Mueve arriba (-) o abajo (+) */
    left: 510px;   /* Mueve izquierda (-) o derecha (+) */
    width: -200px;   /* Ancho de la imagen */
    height: -100px;   /* Alto de la imagen */
    transform: scale(0.24); /* 1 = tamaño original, 0.5 = mitad, 0.3 = 30% */
    transform-origin: top left; /* Punto desde donde escala */
}

    /* Mobile */
@media (max-width: 768px) {
    body.valentine-theme h2[data-i18n="Pre_catalog_title"]::after {
        content: url('../images/themes/valentine/catalog-preview.png');
        position: absolute;
        top: -65px;    /* Ajusta para mobile */
        left: -150px;   /* Ajusta para mobile */
        transform: scale(0.24);
        transform-origin: top left;
    }
}

body.valentine-theme p[data-i18n="Pre_catalog_subtitle"] {
    visibility: hidden;
    position: relative;
}

body.valentine-theme p[data-i18n="Pre_catalog_subtitle"]::after {
    content: attr(data-valentine-text);
    visibility: visible;
    position: absolute;
    left: 600px;
    top: 20px;
    white-space: nowrap;
}

/* Importa la fuente cursiva */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Oculta los textos originales del h2 */
body.valentine-theme span[data-i18n="offers_title"],
body.valentine-theme span[data-i18n="offers_title_mobile"] {
    color: transparent;
    position: relative;
}

/* Texto Valentine Desktop */
body.valentine-theme span[data-i18n="offers_title"]::after {
    content: attr(data-valentine-offers);
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif, "cursive";
    font-size: 52px;
    font-weight: 400;
    color: #7b1c2e;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
}

/* Texto Valentine Mobile */
body.valentine-theme span[data-i18n="offers_title_mobile"]::after {
    content: attr(data-valentine-offers);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-family: "Great Vibes", cursive;
    font-size: 38px;
    font-weight: 400;
    color: #7b1c2e;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
}

/* EASTER – pasteles, verdes suaves y dorado claro */
body.easter-theme {
  --hero-bg-image: url("../images/themes/easter/easter.png");
}

/* SUMMER – turquesa, dorado cálido, sensación de playa */
body.summer-theme {
  --hero-bg-image: url("../images/themes/summer/summer.png");
}

/* HALLOWEEN – verdes oscuros + naranjas, ambiente “spooky” */
body.halloween-theme {
  --hero-bg-image: url("../images/themes/halloween/halloween.png");
}

/* CHRISTMAS – rojos y verdes, luces cálidas */
body.christmas-theme {
  --hero-bg-image: url("../images/themes/christmas/christmas.png");
}

/* BIRTHDAY – colores festivos, confetti, ambiente de celebración */
body.birthday-theme {
  --hero-bg-image: url("../images/themes/birthday/birthday.png");
}

/* NEW YEAR – negro + dorado, fuegos artificiales */
body.newyear-theme {
  --hero-bg-image: url("../images/themes/newyear/newyear.png");
}