/* Tema global: fondo amarillo, texto negro, contenedores blancos */

:root {
  /* Amarillo principal solicitado */
  --app-bg-yellow: #ffffff;
}

html {
  background-color: var(--app-bg-yellow);
  color: #000;
  min-height: 100vh;
}

/* Anular gradientes de Tailwind (usar fondo plano amarillo) */
[class*="bg-gradient-to-"] {
  background-image: none !important;
}

/* Asegurar contenedores blancos para contraste */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300,
.hover\:bg-gray-50:hover {
  background-color: #fff !important;
}

/* Texto negro consistente en grises de Tailwind */
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900 {
  color: #000 !important;
}

/* Inputs y selects en blanco con texto negro */
input,
select,
textarea {
  color: #000;
  background-color: #fff;
  caret-color: #000;
}

/* Placeholders visibles en negro */
input::placeholder,
textarea::placeholder {
  color: #000;
  opacity: 1; /* asegurar que no se atenúe */
}

/* Bordes suaves para mantener legibilidad en blanco */
.border-gray-200,
.border-gray-300 {
  border-color: #e5e7eb !important; /* Tailwind gray-200 */
}

/* Modales: contenido blanco ya definido en app.js; overlay se mantiene oscuro */
/* Header negro con borde inferior diagonal (más alto a la derecha) */
.header-diagonal {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
@media (min-width: 640px) {
  .header-diagonal {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
}

/* Footer negro con borde superior diagonal (invertido respecto al header) */
.footer-diagonal {
  -webkit-clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 640px) {
  .footer-diagonal {
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }
}

/* Texto con mezcla por diferencia: se invierte según el fondo */
.mix-difference {
  mix-blend-mode: difference;
}

/* Tarjeta informativa “Quiénes somos” (estilo profesional) */
.about-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 12px;
}

.about-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937; /* gray-800 */
  letter-spacing: 0.02em;
}

.about-body p {
  font-size: 0.85rem;
  color: #4b5563; /* gray-600 */
  line-height: 1.55;
  margin-top: 6px;
}

.about-body .time {
  color: #b45309; /* amber-700 */
  font-weight: 600;
}

/* Iconos en crema claro en el formulario */
i.text-amber-600 {
  color: #DCC9A6 !important;
}

.seasonal-fire-title {
  background: linear-gradient(90deg, #ff9800, #ff5722, #f44336);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fireGradient 3s linear infinite, fireGlow 1.6s ease-in-out infinite;
}

@keyframes fireGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fireGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(255,132,0,0.6), 0 0 12px rgba(255,68,0,0.4); }
  50% { text-shadow: 0 0 12px rgba(255,132,0,0.9), 0 0 24px rgba(255,68,0,0.7); }
}

.fire-flicker {
  animation: flameFlicker 1.3s infinite;
}

@keyframes flameFlicker {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; filter: drop-shadow(0 0 3px rgba(255,154,0,0.6)); }
  50% { transform: translateY(-1px) scale(1.04); opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255,94,0,0.8)); }
}

.seasonal-text-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff7eb 0%, #ffe9cc 100%);
  border: 1px solid #ffcc80;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.seasonal-badge-v {
  font-weight: 800;
  color: #b91c1c;
  letter-spacing: 0.02em;
}

.seasonal-white-title {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.65), 0 0 12px rgba(255,255,255,0.35);
}