/* ============================================================
   contacto.css
   Solo la pagina de contacto: los tres pasos y los datos.
   Parte de la hoja del sitio. Ver README para el orden de carga.
   ============================================================ */

/* ---------- LOS TRES PASOS PARA RESERVAR ----------
   Bloque de fondo azul con los pasos 01, 02 y 03. Antes era una
   página aparte; hoy vive dentro de la página de contacto.
   ----------------------------------------------- */
.how{ background:var(--azul-deep); color:var(--paper-light); padding:88px 0; }
.how-head{ max-width:560px; }
.how-head .eyebrow{ color:var(--rosa-pale); }
.how-head h2{ color:var(--paper-light); font-size:clamp(2rem,4vw,2.6rem); margin-top:10px; }
.steps{ margin-top:48px; display:grid; gap:0; grid-template-columns:1fr; }
@media(min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ padding:26px 24px 26px 0; border-top:1px solid rgba(247,250,253,0.2); position:relative; }
@media(min-width:820px){
  .step{ border-top:none; border-left:1px solid rgba(247,250,253,0.2); padding:4px 28px; }
  .step:first-child{ border-left:none; padding-left:0; }
}
.step-num{ font-family:'IBM Plex Mono',monospace; color:var(--rosa-pale); font-size:13px; letter-spacing:.08em; }
.step h3{ color:var(--paper-light); font-size:19px; margin-top:10px; }
.step p{ margin-top:10px; font-size:15px; opacity:.82; }

/* ---------- DATOS DE CONTACTO ----------
   La tarjeta con WhatsApp, correo y punto de encuentro, junto
   al dibujo del pin de ubicación. Va debajo de los tres pasos.
   ------------------------------------ */
.contact-section{ background:var(--paper); padding:88px 0 96px; }
.contact-head{ max-width:600px; margin-bottom:48px; }
.contact-head .eyebrow{ color:var(--rosa-dark); }
.contact-head h2{ font-size:clamp(2rem,4vw,2.6rem); margin-top:10px; }
.contact-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
@media(min-width:820px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-card{
  background:#fff; border-radius:16px; padding:30px 28px;
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(17,33,46,0.04), 0 18px 30px -24px rgba(17,33,46,0.4);
}
.contact-card h3{ font-size:19px; }
.contact-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:16px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; }
.contact-list .ci{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--azul-soft); color:var(--azul-deep); display:flex; align-items:center; justify-content:center; }
.contact-list .ci svg{ width:19px; height:19px; }
.contact-list a{ text-decoration:none; font-weight:700; }
.contact-list a:hover{ text-decoration:underline; }
.contact-hours{ font-family:'IBM Plex Mono',monospace; font-size:13px; opacity:.7; }
.pin-art{ display:flex; align-items:center; justify-content:center; background:var(--azul-deep); border-radius:16px; padding:30px; }
/* Foto que ocupa la columna de al lado de los datos de contacto. Sustituyó al
   dibujo del pin de ubicación. min-height evita que quede una tira aplastada
   cuando la tarjeta de contacto es corta. */
.contact-photo{
  display:flex; overflow:hidden;
  border-radius:16px; background:var(--azul-deep);
}
.contact-photo img{
  width:100%; height:100%; min-height:340px;
  object-fit:cover; display:block;
}