/* ============================================
   1. VARIABLES BASE Y SKINS (Mapeo para Tailwind)
   ============================================ */
:root {
  /* Colores de Marca */
  --color-brandBlue: #3498DB;
  --color-brandBlueDark: #2980B9;
  --color-brandOrange: #F39C12;
  --color-brandOrangeDark: #E67E22;
  --color-brandDark: #2C3E50;
  --color-brandLight: #F8FAFC;

  /* Colores Tailwind Base */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  --color-rose-100: #FFE4E6;
  --color-rose-500: #F43F5E;
  --color-rose-600: #E11D48;
  --color-blue-100: #DBEAFE;
  --color-blue-500: #3B82F6;
  --color-amber-100: #FEF3C7;
  --color-amber-500: #F59E0B;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
}

/* Scroll suave */
html {
  scroll-behavior: smooth;
}

/* --- SKINS --- */
body.skin-navidad {
  --color-brandBlue: #B71C1C;
  --color-brandBlueDark: #7F0000;
  --color-brandOrange: #1B5E20;
  --color-brandOrangeDark: #003300;
  --color-brandLight: #FFEBEE;
  --color-slate-100: #FCE4EC;
  --color-slate-200: #F8BBD0;
}

body.skin-anio-nuevo {
  --color-brandBlue: #0D47A1;
  --color-brandBlueDark: #002171;
  --color-brandOrange: #F9A825;
  --color-brandOrangeDark: #F57F17;
  --color-brandLight: #E3F2FD;
  --color-slate-100: #E3F2FD;
  --color-slate-200: #BBDEFB;
}

body.skin-carnaval {
  --color-brandBlue: #6A1B9A;
  --color-brandBlueDark: #4527A0;
  --color-brandOrange: #D81B60;
  --color-brandOrangeDark: #AD1457;
  --color-brandLight: #F3E5F5;
  --color-slate-100: #F3E5F5;
  --color-slate-200: #E1BEE7;
}

body.skin-primavera {
  --color-brandBlue: #388E3C;
  --color-brandBlueDark: #2E7D32;
  --color-brandOrange: #F48FB1;
  --color-brandOrangeDark: #F06292;
  --color-brandLight: #E8F5E9;
  --color-slate-100: #E8F5E9;
  --color-slate-200: #C8E6C9;
}

body.skin-verano {
  --color-brandBlue: #0277BD;
  --color-brandBlueDark: #01579B;
  --color-brandOrange: #F57F17;
  --color-brandOrangeDark: #E65100;
  --color-brandLight: #E1F5FE;
  --color-slate-100: #E1F5FE;
  --color-slate-200: #B3E5FC;
}

body.skin-otono {
  --color-brandBlue: #E65100;
  --color-brandBlueDark: #BF360C;
  --color-brandOrange: #827717;
  --color-brandOrangeDark: #684F1D;
  --color-brandLight: #FFF3E0;
  --color-slate-100: #FFF3E0;
  --color-slate-200: #FFE0B2;
}

body.skin-invierno {
  --color-brandBlue: #37474F;
  --color-brandBlueDark: #263238;
  --color-brandOrange: #546E7A;
  --color-brandOrangeDark: #455A64;
  --color-brandLight: #ECEFF1;
  --color-slate-100: #ECEFF1;
  --color-slate-200: #CFD8DC;
}

/* ============================================
   2. UTILIDADES Y COMPONENTES BASE
   ============================================ */
.font-title { font-family: 'Montserrat', sans-serif; }
.font-body { font-family: 'Open Sans', sans-serif; }
.orange-shadow { box-shadow: 0 10px 25px -5px rgba(243, 156, 18, 0.3); }

/* Banner de Temporada */
.aviso-temporada {
  display: none;
  background-color: var(--color-brandLight);
  color: var(--color-brandBlue);
  text-align: center;
  padding: 12px;
  font-weight: bold;
  font-size: 1rem;
  border-bottom: 2px solid var(--color-brandOrange);
}

body[class*="skin-"] .aviso-temporada {
  display: block;
  animation: fadeIn 0.5s ease-in;
}

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

/* Botón Provisional de Skins */
#btn-probar-skin {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  padding: 12px 20px;
  border-radius: 50px;
  border: 2px solid #333;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

#btn-probar-skin:hover {
  transform: scale(1.05);
}

/* FAQ Accordion */
.faq-item {
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-question {
  transition: all 0.3s ease;
}

.faq-question i {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

.faq-item.active .faq-answer {
  display: block;
  animation: slideDown 0.3s ease;
}

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

/* ============================================
   SECCIÓN ¿QUIÉN SOY? - IMÁGENES
   ============================================ */

/* Contenedor de la imagen principal */
.quien-soy-imagen-principal {
  max-width: 400px;
  max-height: 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Contenedor de las imágenes pequeñas */
.quien-soy-imagen-pequena {
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .quien-soy-imagen-principal {
    max-width: 100%;
    max-height: 400px;
  }
  
  .quien-soy-imagen-pequena {
    max-width: 150px;
    max-height: 150px;
  }
}

/* ============================================
   3. DECORACIONES ESTACIONALES
   ============================================ */

/* --- 1. NAVIDAD (Guirnaldas) --- */
.navidad-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 50;
  display: none;
}

body.skin-navidad .navidad-decoraciones {
  display: block;
}

.guirnalda {
  position: absolute;
  top: 0;
  width: 200px;
  height: 60px;
  overflow: visible;
}

.guirnalda-izquierda {
  left: 0;
  transform: rotate(-5deg);
}

.guirnalda-derecha {
  right: 0;
  transform: rotate(5deg);
}

.guirnalda-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.luz-navidad {
  animation: parpadeo-navidad 2s ease-in-out infinite;
}

.luz-navidad:nth-child(2) {
  animation-delay: 0s;
}

.luz-navidad:nth-child(3) {
  animation-delay: 0.4s;
}

.luz-navidad:nth-child(4) {
  animation-delay: 0.8s;
}

.luz-navidad:nth-child(5) {
  animation-delay: 1.2s;
}

.luz-navidad:nth-child(6) {
  animation-delay: 1.6s;
}

@keyframes parpadeo-navidad {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

body.skin-navidad header {
  padding-top: 30px;
}

/* --- 2. AÑO NUEVO (Destellos) --- */
.anio-nuevo-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  display: none;
}

body.skin-anio-nuevo .anio-nuevo-decoraciones {
  display: block;
}

.destello {
  position: absolute;
  background-color: #F9A825;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity: 0;
  animation: flotar-arriba 4s ease-in-out infinite;
}

.destello-1 {
  left: 10%;
  width: 15px;
  height: 15px;
  bottom: -20px;
  animation-duration: 5s;
  animation-delay: 0s;
}

.destello-2 {
  left: 30%;
  width: 10px;
  height: 10px;
  bottom: -20px;
  animation-duration: 6s;
  animation-delay: 1s;
}

.destello-3 {
  left: 50%;
  width: 20px;
  height: 20px;
  bottom: -20px;
  animation-duration: 4.5s;
  animation-delay: 2s;
}

.destello-4 {
  left: 70%;
  width: 12px;
  height: 12px;
  bottom: -20px;
  animation-duration: 5.5s;
  animation-delay: 0.5s;
}

.destello-5 {
  left: 90%;
  width: 18px;
  height: 18px;
  bottom: -20px;
  animation-duration: 6.5s;
  animation-delay: 1.5s;
}

.destello-6 {
  left: 20%;
  width: 14px;
  height: 14px;
  bottom: -20px;
  animation-duration: 5.2s;
  animation-delay: 2.5s;
}

@keyframes flotar-arriba {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1.2);
    opacity: 0;
  }
}

/* --- 3. CARNAVAL (Confeti) --- */
.carnaval-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  display: none;
}

body.skin-carnaval .carnaval-decoraciones {
  display: block;
}

.confeti {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  opacity: 0.8;
  animation: caer-carnaval 4s linear infinite;
}

.confeti-1 {
  left: 5%;
  background-color: #6A1B9A;
  animation-duration: 3.5s;
  animation-delay: 0s;
  border-radius: 50%;
}

.confeti-2 {
  left: 15%;
  background-color: #D81B60;
  animation-duration: 4.2s;
  animation-delay: 1s;
  transform: rotate(45deg);
}

.confeti-3 {
  left: 85%;
  background-color: #F9A825;
  animation-duration: 3.8s;
  animation-delay: 0.5s;
  border-radius: 50%;
}

.confeti-4 {
  left: 95%;
  background-color: #6A1B9A;
  animation-duration: 4.5s;
  animation-delay: 2s;
  transform: rotate(45deg);
}

.confeti-5 {
  left: 2%;
  background-color: #D81B60;
  animation-duration: 3.2s;
  animation-delay: 1.5s;
}

.confeti-6 {
  left: 98%;
  background-color: #F9A825;
  animation-duration: 4.0s;
  animation-delay: 0.2s;
  border-radius: 50%;
}

.confeti-7 {
  left: 10%;
  background-color: #F9A825;
  animation-duration: 4.8s;
  animation-delay: 2.5s;
  transform: rotate(45deg);
}

.confeti-8 {
  left: 90%;
  background-color: #D81B60;
  animation-duration: 3.6s;
  animation-delay: 1.2s;
  border-radius: 50%;
}

@keyframes caer-carnaval {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* --- 4. PRIMAVERA (Pétalos) --- */
.primavera-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  display: none;
}

body.skin-primavera .primavera-decoraciones {
  display: block;
}

.petalo {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #F48FB1 0%, #F8BBD0 100%);
  border-radius: 100% 0 100% 0;
  opacity: 0.7;
  animation: flotar-primavera 8s ease-in-out infinite;
}

.petalo-1 {
  left: 10%;
  top: 20%;
  animation-duration: 7s;
  animation-delay: 0s;
}

.petalo-2 {
  left: 25%;
  top: 40%;
  animation-duration: 9s;
  animation-delay: 1s;
  transform: scale(0.8);
}

.petalo-3 {
  left: 45%;
  top: 15%;
  animation-duration: 8s;
  animation-delay: 2s;
}

.petalo-4 {
  left: 65%;
  top: 35%;
  animation-duration: 10s;
  animation-delay: 0.5s;
  transform: scale(1.2);
}

.petalo-5 {
  left: 85%;
  top: 25%;
  animation-duration: 7s;
  animation-delay: 1.5s;
}

.petalo-6 {
  left: 15%;
  top: 60%;
  animation-duration: 9s;
  animation-delay: 2.5s;
}

@keyframes flotar-primavera {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  25% {
    transform: translateY(-20px) translateX(30px) rotate(90deg);
  }
  50% {
    transform: translateY(10px) translateX(-20px) rotate(180deg);
  }
  75% {
    transform: translateY(-10px) translateX(40px) rotate(270deg);
  }
  100% {
    transform: translateY(0) translateX(60px) rotate(360deg);
    opacity: 0;
  }
}

/* --- 5. VERANO (Burbujas) --- */
.verano-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  display: none;
}

body.skin-verano .verano-decoraciones {
  display: block;
}

.burbuja {
  position: absolute;
  bottom: -50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation: flotar-arriba-burbuja 6s ease-in infinite;
}

.burbuja-1 {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-duration: 5s;
  animation-delay: 0s;
}

.burbuja-2 {
  left: 30%;
  width: 30px;
  height: 30px;
  animation-duration: 7s;
  animation-delay: 1s;
}

.burbuja-3 {
  left: 50%;
  width: 15px;
  height: 15px;
  animation-duration: 4.5s;
  animation-delay: 2s;
}

.burbuja-4 {
  left: 70%;
  width: 25px;
  height: 25px;
  animation-duration: 6s;
  animation-delay: 0.5s;
}

.burbuja-5 {
  left: 90%;
  width: 35px;
  height: 35px;
  animation-duration: 8s;
  animation-delay: 1.5s;
}

.burbuja-6 {
  left: 20%;
  width: 18px;
  height: 18px;
  animation-duration: 5.5s;
  animation-delay: 2.5s;
}

@keyframes flotar-arriba-burbuja {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100vh) translateX(30px);
    opacity: 0;
  }
}

/* --- 6. OTOÑO (Hojas) --- */
.otono-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  display: none;
}

body.skin-otono .otono-decoraciones {
  display: block;
}

.hoja {
  position: absolute;
  top: -30px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #E65100 0%, #BF360C 100%);
  border-radius: 0 100% 0 100%;
  opacity: 0.9;
  animation: viento-otono 5s linear infinite;
}

.hoja-1 {
  right: 10%;
  animation-duration: 4s;
  animation-delay: 0s;
}

.hoja-2 {
  right: 25%;
  animation-duration: 5s;
  animation-delay: 1s;
  transform: scale(0.9);
}

.hoja-3 {
  right: 45%;
  animation-duration: 4.5s;
  animation-delay: 2s;
}

.hoja-4 {
  right: 65%;
  animation-duration: 6s;
  animation-delay: 0.5s;
  transform: scale(1.1);
}

.hoja-5 {
  right: 85%;
  animation-duration: 4.2s;
  animation-delay: 1.5s;
}

.hoja-6 {
  right: 15%;
  animation-duration: 5.5s;
  animation-delay: 2.5s;
}

@keyframes viento-otono {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(-120vw) translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* --- 7. INVIERNO (Ramas + Copos) --- */
.invierno-decoraciones {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  display: none;
}

body.skin-invierno .invierno-decoraciones {
  display: block;
}

.rama-escarcha {
  position: absolute;
  top: 0;
  width: 150px;
  height: 150px;
  pointer-events: none;
}

.rama-izquierda {
  left: 0;
}

.rama-derecha {
  right: 0;
  transform: scaleX(-1);
}

.rama-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(84, 110, 122, 0.3));
}

.copo {
  position: absolute;
  top: -20px;
  background-color: #B0C4DE;
  border-radius: 50%;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(176, 196, 222, 0.8));
  animation: caer-nieve 6s linear infinite;
}

.copo-1 {
  left: 8%;
  width: 8px;
  height: 8px;
  animation-duration: 5s;
  animation-delay: 0s;
}

.copo-2 {
  left: 18%;
  width: 6px;
  height: 6px;
  animation-duration: 7s;
  animation-delay: 2s;
}

.copo-3 {
  left: 28%;
  width: 10px;
  height: 10px;
  animation-duration: 6s;
  animation-delay: 4s;
}

.copo-4 {
  left: 38%;
  width: 7px;
  height: 7px;
  animation-duration: 8s;
  animation-delay: 1s;
}

.copo-5 {
  left: 48%;
  width: 9px;
  height: 9px;
  animation-duration: 5.5s;
  animation-delay: 3s;
}

.copo-6 {
  left: 58%;
  width: 6px;
  height: 6px;
  animation-duration: 7.5s;
  animation-delay: 5s;
}

.copo-7 {
  left: 68%;
  width: 11px;
  height: 11px;
  animation-duration: 6.5s;
  animation-delay: 0.5s;
}

.copo-8 {
  left: 78%;
  width: 7px;
  height: 7px;
  animation-duration: 8.5s;
  animation-delay: 2.5s;
}

@keyframes caer-nieve {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(100vh) translateX(30px);
    opacity: 0;
  }
}