/* ===== Extras para páginas de apoyo (contacto, primera visita, gracias, servicios) ===== */
/* Reutiliza variables y clases de styles.css y pages.css. No duplica colores. */

/* ---------- Formulario de contacto ---------- */
.contact-form{display:grid;gap:1rem;margin-top:.5rem}
.contact-form .field{display:grid;gap:.4rem}
.contact-form label{font-size:.9rem;font-weight:600;color:var(--ink)}
.contact-form input,
.contact-form textarea{
  width:100%;
  font:400 1rem/1.5 var(--font-body);
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  padding:.8rem 1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .btn{justify-content:center}
.form-note{font-size:.85rem;color:var(--ink-3);line-height:1.55;margin-top:.25rem}

/* Caja "mejor por WhatsApp/teléfono" sobre el formulario o en su lugar */
.contact-quick{
  background:var(--accent-wash);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  padding:1.5rem 1.6rem;
}
.contact-quick h3{font-size:1.15rem;margin-bottom:.4rem}
.contact-quick p{color:var(--ink-2);font-size:.97rem;line-height:1.6;margin-bottom:1rem}
.contact-quick__actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* Horario de atención (lista clara dentro de la columna de contacto) */
.hours-list{display:grid;gap:.35rem;margin:.25rem 0 0}
.hours-list li{display:flex;justify-content:space-between;gap:1.5rem;color:var(--ink-2);font-size:.97rem;border-bottom:1px dashed var(--border-2);padding:.45rem 0}
.hours-list li:last-child{border-bottom:0}
.hours-list strong{color:var(--ink);font-weight:600}

/* ---------- Rejilla de pasos a 4 columnas (primera visita) ---------- */
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--4::before{left:12%;right:12%}
@media (max-width:980px){.steps--4{grid-template-columns:repeat(2,1fr)}.steps--4::before{display:none}}
@media (max-width:540px){.steps--4{grid-template-columns:1fr}}

/* ---------- Bloque de tranquilidad / checklist destacado ---------- */
.assurance{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(1.75rem,4vw,2.5rem);
}
.assurance .feature-list{margin-top:0}

/* ---------- Hero de confirmación (gracias) ---------- */
.confirm-hero{background:linear-gradient(150deg,var(--accent-wash) 0%,var(--cream) 60%);text-align:center;border-bottom:1px solid var(--border)}
.confirm-hero__inner{max-width:680px;margin:0 auto;padding:clamp(3rem,7vw,5rem) 6% clamp(2.5rem,5vw,3.5rem)}
.confirm-badge{
  width:84px;height:84px;margin:0 auto 1.5rem;
  border-radius:50%;
  background:var(--deep);
  color:#fff;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(42,87,80,.65);
}
.confirm-badge svg{width:42px;height:42px}
.confirm-hero h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;margin-bottom:.7rem}
.confirm-hero__lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);max-width:52ch;margin:0 auto 1.75rem}
.confirm-hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}

/* ---------- Hub de servicios: rejilla de tarjetas-enlace ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:1.9rem 1.75rem;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--border-2)}
.service-card__ic{
  width:54px;height:54px;border-radius:14px;
  background:var(--accent-wash);color:var(--accent-strong);
  display:grid;place-items:center;margin-bottom:1.15rem;
}
.service-card__ic svg{width:28px;height:28px}
.service-card h3{font-size:1.25rem;margin-bottom:.45rem}
.service-card p{color:var(--ink-2);font-size:.97rem;line-height:1.6;flex:1}
.service-card__more{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1.1rem;font-weight:600;font-size:.95rem;color:var(--accent-strong);
}
.service-card__more::after{content:"→";transition:transform .2s ease}
.service-card:hover .service-card__more::after{transform:translateX(5px)}
@media (max-width:900px){.service-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.service-grid{grid-template-columns:1fr}}

/* Encabezado de grupo dentro de la FAQ */
.faq-group{max-width:780px;margin:0 auto}
.faq-group + .faq-group{margin-top:2.5rem}
.faq-group__title{font-family:var(--font-head);font-size:1.3rem;font-weight:600;color:var(--deep);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.faq-group__title svg{width:22px;height:22px;color:var(--accent-strong);flex:none}