/* ============================================================
   design-system.css
   Refinamientos globales del sistema Miranda Lopez.
   No define nav ni hero; esos viven en nav.css y hero.css.
   ============================================================ */

body {
  background: var(--marfil);
  color: var(--texto);
  font-weight: 400;
}

::selection {
  background: var(--dorado);
  color: var(--carbon);
}

.btn-primary,
.form-submit {
  background: var(--dorado);
  color: var(--blanco);
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(179, 138, 74, .18);
}

.btn-primary:hover,
.form-submit:hover {
  background: #9f7632;
  color: var(--blanco);
  transform: translateY(-2px);
}

.btn-secondary {
  border-color: rgba(245, 241, 234, .42);
  color: var(--marfil);
}

.btn-secondary:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

.section-eyebrow,
.contacto-item-text span {
  color: var(--dorado);
  font-weight: 600;
}

.section-title {
  color: var(--carbon);
  font-weight: 600;
}

.section-title span {
  color: var(--beige-arena);
  font-style: italic;
  font-weight: 400;
}

.section-line {
  background: var(--dorado);
}

.placeholder-text {
  color: rgba(245, 241, 234, .72);
  font-weight: 500;
}

#servicios,
#porque {
  background: var(--marfil);
}

.servicios-grid {
  gap: 1px;
  box-shadow: var(--shadow-soft);
}

.servicio-card {
  background: var(--carbon);
  border: 1px solid rgba(217, 199, 182, .1);
}

.servicio-card::before {
  background: var(--dorado);
}

.servicio-num {
  color: rgba(217, 199, 182, .16);
}

.servicio-icon,
.razon-icon,
.contacto-item-icon,
.footer-contact-list .icon {
  color: var(--dorado);
}

.servicio-title,
.zona-name,
.form-title,
.footer-logo,
.footer-nav-col h4,
.footer-contact-col h4 {
  color: var(--marfil);
}

.servicio-desc,
.zona-desc,
.footer-tagline,
.footer-nav-list a,
.footer-contact-list li {
  color: rgba(245, 241, 234, .72);
}

#zonas,
#contacto,
#footer {
  background: var(--carbon);
}

#zonas::before {
  color: rgba(217, 199, 182, .045);
}

.zona-card,
.form-card {
  background: rgba(245, 241, 234, .045);
  border-color: rgba(217, 199, 182, .22);
  border-radius: var(--radius-lg);
}

.zona-card:hover {
  border-color: var(--dorado);
  background: rgba(217, 199, 182, .08);
}

.zona-badge {
  background: rgba(179, 138, 74, .14);
  border-color: rgba(179, 138, 74, .34);
  color: var(--dorado);
  border-radius: 999px;
}

.porque-copy,
.razon-text p {
  color: var(--texto-suave);
}

.razon-icon {
  background: var(--carbon);
  border-radius: var(--radius-md);
}

.razon-text strong {
  color: var(--carbon);
}

.porque-img {
  background: linear-gradient(160deg, rgba(245, 241, 234, .08), rgba(5, 5, 5, .92)), #050505;
  border: 1px solid rgba(217, 199, 182, .3);
  box-shadow: var(--shadow-strong);
}

.porque-img::before {
  content: '';
  width: 118px;
  height: 82px;
  background: url('../assets/logo_ML_t_bg.png') center / contain no-repeat;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .22));
}

.porque-name-card {
  background: var(--dorado);
  box-shadow: var(--shadow-soft);
}

.porque-name-card strong {
  color: var(--carbon);
}

.porque-name-card span {
  color: rgba(31, 31, 33, .68);
}

.contacto-title,
.zonas-title {
  color: var(--marfil);
}

.contacto-item-icon {
  border-color: rgba(217, 199, 182, .32);
}

.contacto-item-text strong {
  color: var(--marfil);
}

.form-group label {
  color: rgba(245, 241, 234, .7);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(245, 241, 234, .07);
  border-color: rgba(217, 199, 182, .24);
  color: var(--marfil);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--dorado);
}

.form-group select option {
  background: var(--carbon);
}

.footer-logo-img {
  width: 120px;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 1rem;
  background: transparent;
  border: 0;
}

.footer-nav-list a::before {
  color: var(--dorado);
}

.footer-copy,
.footer-made {
  color: rgba(245, 241, 234, .36);
}

.whatsapp-float {
  background: var(--dorado);
  box-shadow: 0 10px 28px rgba(179, 138, 74, .32);
}

.whatsapp-float:hover {
  box-shadow: 0 12px 32px rgba(179, 138, 74, .42);
}

.btn-wa i {
  margin-right: .45rem;
}