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

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

html, body {
  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;
}