/* ─────────────────────────────────────────────────────────────
   MASAKALI SWEETS — Brand overrides
   Cargado después de main.css para sobrescribir los tokens
   del tema base (Masakali verde → Sweets negro/dorado).
   NO sincronizar; es exclusivo de esta app.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paleta Sweets — negro cálido + dorado artesanal */
  --color-brand:        #1a1512;
  --color-brand-dark:   #0f0d0b;
  --color-brand-light:  #2d2519;
  --color-gold:         #c8973a;
  --color-gold-light:   #e4b95c;
  --color-gold-muted:   #8a6525;
  --color-accent-yellow: #c8973a;

  --color-black:        #0f0d0b;
  --color-text:         #f5f0e8;
  --color-text-muted:   #9e8e7a;
  --color-text-dark:    #1a1512;
  --color-white:        #ffffff;
  --color-surface:      #f9f6f0;
  --color-glass:        rgba(15, 13, 11, 0.88);

  --shadow-gold: 0 4px 24px rgba(200, 151, 58, 0.25);
}

body {
  background: var(--color-brand);
  color: var(--color-text);
}

/* ─── LOGO HEADER ───────────────────────────────────────────── */
.site-logo img {
  height: 60px;
  max-width: min(64vw, 240px);
  object-fit: contain;
  object-position: left center;
}

/* ─── HERO OVERLAY más oscuro ────────────────────────────────── */
.home-hero__scrim {
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.94) 0%,
    rgba(10, 8, 6, 0.55) 40%,
    rgba(10, 8, 6, 0.28) 100%
  );
}

.home-hero__carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.22);
  pointer-events: none;
  z-index: 1;
}

/* ─── AUTOFILL FIX ───────────────────────────────────────────── */
@keyframes sweets-autofill-start {
  from { opacity: 1; }
  to   { opacity: 1; }
}

#contact-form input:-webkit-autofill,
#contact-form input:-webkit-autofill:hover,
#contact-form input:-webkit-autofill:focus,
#contact-form input:-webkit-autofill:active,
#contact-form textarea:-webkit-autofill,
#empleo-form input:-webkit-autofill,
#empleo-form input:-webkit-autofill:hover,
#empleo-form input:-webkit-autofill:focus,
#empleo-form input:-webkit-autofill:active {
  animation-name: sweets-autofill-start;
  animation-duration: 50000s;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #1a1512 !important;
  caret-color: #1a1512 !important;
  background-color: #fff !important;
  transition: background-color 99999s ease-out 0s !important;
}

/* ─── EMPLEO: legibilidad en panel blanco (sin pisar tabs) ─── */
.page-empleo .empleo-form-panel {
  max-width: 700px;
  margin-inline: auto;
}

.page-empleo .empleo-form-panel label,
.page-empleo .empleo-form-panel legend,
.page-empleo .empleo-form-panel .form-fieldset__legend,
.page-empleo .empleo-form-panel .form-hint,
.page-empleo .empleo-form-panel .empleo-form-panel__rgpd-title,
.page-empleo .empleo-form-panel .empleo-form-panel__rgpd-text,
.page-empleo .empleo-form-panel .empleo-form-panel__alt {
  color: #1a1512;
}

.page-empleo .empleo-form-panel input,
.page-empleo .empleo-form-panel select,
.page-empleo .empleo-form-panel textarea {
  color: #1a1512;
  background: #fafafa;
  border-color: #ddd;
}

.page-empleo .empleo-form-panel input:focus,
.page-empleo .empleo-form-panel select:focus,
.page-empleo .empleo-form-panel textarea:focus {
  border-color: var(--color-gold);
  background: #fff;
}

.page-empleo .empleo-form-panel input::placeholder,
.page-empleo .empleo-form-panel textarea::placeholder {
  color: #9e9990;
}

.page-empleo .empleo-form-panel__actions {
  padding-top: var(--space-md);
  border-top: 1px solid #f0eeec;
  margin-top: var(--space-sm);
}

.page-empleo .empleo-form-panel .btn--yellow,
.page-empleo .empleo-form-panel .btn--brand {
  background: var(--color-gold);
  color: var(--color-brand);
  border: none;
}

.page-empleo .empleo-form-panel .btn--yellow:hover,
.page-empleo .empleo-form-panel .btn--brand:hover {
  background: var(--color-gold-light);
}

.page-empleo .form-group.is-invalid input,
.page-empleo .form-group.is-invalid select,
.page-empleo .form-group.is-invalid textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}

.page-empleo .form-group__error {
  color: #c0392b;
}