body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #fff;
  color: #333;
}

header {
  background: #f4f4f4;
  padding: 20px;
}

.logo {
  max-width: 260px;
}

.hero {
  background: linear-gradient(135deg, #004aad, #00a2ff);
  color: #fff;
  padding: 40px 20px;
}

.btn-wsp {
  display: inline-flex;
  align-items: center;
  gap: 10px
  margin-top: 20px;
  background: #25d366;
  color: white;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}

.icon-wsp {
    font-size: 1.25rem; 
    color: #fff; 
    line-height: 1;
}

.servicios {
  padding: 40px 20px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card {
  width: 280px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ccc;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

footer {
  background: #222;
  color: #fff;
  padding: 15px;
  margin-top: 30px;
}

footer a {
  color: hsl(219, 70%, 49%);
  text-decoration: none;
}
.formulario { padding: 40px 20px; }
.form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 900px;
  margin: 0 auto 16px;
  text-align: left;
}
.form-grid label { display: flex; flex-direction: column; font-weight: 600; gap: 6px; }
.form-grid input, 
.form-grid select {
  padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-weight: 400;
}
.btn-enviar {
  margin-top: 20px; background: #004aad; color:#fff; border:0; padding: 12px 24px; border-radius: 5px;
  font-weight:700; cursor:pointer;
}
.btn-enviar:hover { opacity: .9; }

/* Placeholders más suaves */
input::placeholder,
textarea::placeholder {
  color: #9aa3af;    /* gris tenue */
  opacity: 1;        /* que se vea igual en Safari/Firefox */
}

/* Select y Date cuando no tienen valor (tono gris tenue) */
.form-grid select:invalid,
.form-grid input[type="date"]:required:invalid {
  color: #9aa3af;
}

/* Cuando ya hay valor, texto normal */
.form-grid select:valid,
.form-grid input[type="date"]:required:valid {
  color: #111827;
}

/* Ancho base compartido para CTAs */
:root { --cta-width: 290px; }   /* ajusta si tu botón de WhatsApp es más ancho */

.btn-wsp,
.btn-enviar {
  display: inline-block;
  min-width: var(--cta-width);
  text-align: center;
}

/* --- Mobile por defecto: apilado y centrado --- */
/* Base móvil: apilado centrado */
.site-header { background:#f4f4f4; }
.header-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.logo{ max-width:180px; height:auto; }
.site-title{
  margin:0;
  line-height:1.2;
  text-align:center;
  font-size:clamp(22px, 2.5vw + 10px, 36px);
}

/* Tablet (>=768px): dos columnas, logo izq / título centro en su columna */
@media (min-width: 768px){
  .header-wrap{
    display:grid;                    /* cambiamos a grid */
    grid-template-columns: 260px 1fr;/* ancho guía: izq 260px, der ocupa resto */
    column-gap:24px;
    align-items:center;              /* centra verticalmente ambos */
    padding:20px 28px;
  }
  .logo{
    max-width:220px;                 /* ajusta al gusto */
    justify-self:start;              /* pegado a la izquierda */
  }
  .site-title{
    text-align:center;               /* centrado dentro de su columna */
    justify-self:center;             /* centrado horizontalmente en la col der */
    margin:0;
    font-size:clamp(28px, 2vw + 16px, 44px);
  }
}

/* Desktop amplio (>=1200px): un poco más de aire */
@media (min-width: 1200px){
  .header-wrap{ grid-template-columns: 300px 1fr; }
  .logo{ max-width:240px; }
}

/* --- Header base --- */
.site-header { background:#f4f4f4; }
.header-wrap{
  max-width:1200px; margin:0 auto; padding:16px 20px;
  display:grid;
  grid-template-columns: 260px 1fr;     /* logo izquierda / contenido derecha */
  column-gap:24px; align-items:center;
}
.logo{ max-width:220px; height:auto; }

/* Bloque de texto (título + subtítulo + CTAs) */
.header-text{ display:flex; flex-direction:column; gap:12px; }
.site-title{
  margin:0; line-height:1.2; font-weight:800;
  color:#1f2937;                        /* mismo color que el contenido */
  font-size: clamp(28px, 2vw + 16px, 44px);
}
.site-subtitle{
  margin:0; color:#1f2937; font-weight:700;
  font-size: clamp(16px, 1vw + 12px, 20px);
}

/* Dos columnas para los CTAs de sucursales */
.branch-cta{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;       /* Los Mochis | Culiacán */
  align-items:start;
}
.branch address{
  margin-top:8px; font-style:normal; color:#374151; line-height:1.4;
  font-size: 0.95rem;
}

/* Botones iguales que el CTA de WhatsApp global */
:root{ --cta-width: 260px; }            /* ajusta si lo quieres más ancho */
.btn-wsp{ display:inline-flex; align-items:center; gap:10px;
  background:#25d366; color:#fff; text-decoration:none; font-weight:700;
  padding:12px 24px; border-radius:8px; min-width:var(--cta-width);
  justify-content:center;
}
.btn-wsp:hover{ opacity:.92; }
.icon-wsp{ font-size:1.25rem; color:#fff; line-height:1; }

/* Responsivo: en móvil todo apilado */
@media (max-width: 767.98px){
  .header-wrap{ grid-template-columns: 1fr; text-align:center; }
  .logo{ justify-self:center; max-width:180px; }
  .branch-cta{ grid-template-columns: 1fr; }
  .site-title, .site-subtitle{ text-align:center; }
}

/* Forzar direcciones en blanco dentro del hero */
.hero .branch-cta .branch address,
.hero .branch-cta .branch address strong,
.hero .branch-cta .branch address a {
  color: #fff !important;
}

/* Opcional: subrayado suave y mejor legibilidad sobre el gradiente */
.hero .branch-cta .branch address a {
  text-decoration: underline;
}

.hero .branch-cta .branch address {
  text-shadow: 0 1px 2px rgba(0,0,0,.25); /* mejora contraste */
}

/* --- Footer --- */

footer.footer {
  background-color: #1a1a1a; /* 90% negro */
  text-align: center;
  padding: 20px;
  color: white;
}

footer.footer a {
  color: #ffffff;
  text-decoration: none;
}

footer.footer .social-icons {
  margin-top: 10px;
}

footer.footer .social-icons a {
  margin: 0 10px;
  display: inline-block;
}

footer.footer .social-icons img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1); /* convierte los íconos a blanco */
  vertical-align: middle;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

footer.footer .social-icons img:hover {
  transform: scale(1.1);
  opacity: 0.8;
}