/* ============================================================
   HOME-MOBILE.CSS — CAPA MÓVIL DEL HOME (teléfono, ≤734px).

   👉 EDITABLE EN PINEGROW. Aquí vive TODA la vista móvil del home.
   Se carga DESPUÉS del <style> inline de home.html (link al final del
   <head>) → gana la cascada, así que estas reglas mandan sobre el
   desktop/base. Para cambios de móvil edita AQUÍ, dentro del
   @media(max-width:734px).

   Reglas de oro al editar en Pinegrow:
   • Trabaja en el breakpoint 734px (Pinegrow lo detecta solo de este
     archivo). Editar estilos dentro de él = cambios SOLO-móvil; el
     desktop no se toca.
   • Pon este archivo como "stylesheet activo" para que tus cambios
     caigan aquí.
   • NO muevas/borres/agregues ELEMENTOS (eso cambia el HTML para TODOS
     los tamaños). Solo estilos.
   ============================================================ */

@media (max-width:734px){

  /* ---- EYEBROW PLANO en TODA la página (consistente con el hero): solo el
     texto/etiqueta, sin la píldora con caja ni punto. ---- */
  .eyebrow,.eyebrow.on-navy,#s4 .eyebrow{background:none;padding:0;border-radius:0;}

  /* ---- HERO (#s1) · TYPE-FIRST en móvil: SIN foto; ornamento de marca sutil de
     fondo (washes radiales cian + lavanda). Estructura = eyebrow + título +
     subtítulo del sitio + un solo CTA (hug). Sin credencial, sin chips. ---- */
  #s1{background:var(--page);min-height:60svh;justify-content:center;}
  #s1 .s1-bg{display:none;}                       /* type-first: sin foto */
  /* ornamento CON SENTIDO: anillos de "foco" abajo-derecha (evoca encontrar lo
     que importa) + wash lavanda arriba-izq. Detrás del copy (.fs__in z-index:2). */
  #s1::before{content:"";position:absolute;right:-10rem;bottom:-8rem;width:42rem;height:42rem;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at center, rgba(0,174,239,.10), transparent 58%),
      repeating-radial-gradient(circle at center, transparent 0 3.6rem, rgba(0,174,239,.07) 3.6rem 3.72rem);
    -webkit-mask-image:radial-gradient(circle at center,#000 40%,transparent 72%);
            mask-image:radial-gradient(circle at center,#000 40%,transparent 72%);}
  #s1::after{content:"";position:absolute;left:-14rem;top:-6rem;width:30rem;height:30rem;border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(circle,rgba(201,206,242,.4),transparent 66%);}
  #s1 .fs__in{min-height:0;align-items:flex-start;padding-block:var(--sp-9);}
  #s1 .hero__copy{max-width:100%;}
  /* título un paso más grande en móvil (siguiente token de la escala, sin hardcode) */
  #s1 .hero__copy .display{font-size:var(--fs-display-xl);}
  #s1 .hero__copy .cred{display:none;}            /* credencial fuera (se usa el subtítulo) */
  /* CTAs: los DOS como pill (estética de desktop), pero apilados uno encima del
     otro en móvil, ancho hug. */
  #s1 .hero__copy .btn-row{align-items:flex-start;gap:var(--sp-4);}
  #s1 .hero__copy .btn-row .btn{width:auto;}
  #s1 .scroll-cue{display:none;}

  /* ---- CAMINOS (#caminos) · las 3 cards pasan a BOTONES horizontales
     (icono + etiqueta + título, sin descripción/flecha), toda la card
     tappable. Estilo tipo Auna. ---- */
  #caminos .paths{gap:var(--sp-5);margin-top:var(--sp-7);}
  #caminos .path{position:relative;display:grid;grid-template-columns:auto 1fr auto;
    column-gap:var(--sp-5);row-gap:0.5rem;align-items:center;padding:var(--sp-6) var(--sp-6);}
    /* sombra: se conserva la base de .path (Estéfano la quería de vuelta en móvil) */
  #caminos .path h3{line-height:1.2;}
  #caminos .path .icon-box{grid-row:1 / span 2;align-self:center;margin:0;}
  #caminos .path .pk{grid-column:2;}
  #caminos .path h3{grid-column:2;font-size:var(--fs-h3);}
  #caminos .path p{display:none;}                 /* sin descripción en el botón */
  /* chevron = botón circular claro (affordance de "entrar"), no un signo suelto */
  #caminos .path::after{content:"›";grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end;
    display:flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;
    border-radius:50%;border:.1rem solid var(--line-strong);color:var(--cyan-deep);
    font-family:var(--font-display);font-weight:500;font-size:2rem;line-height:1;padding-bottom:.2rem;}
  #caminos .path.dark::after{border-color:rgba(255,255,255,.28);color:#fff;}
  /* la flecha-link se estira sobre TODA la card = un solo tap target */
  #caminos .path .arrow-link{position:absolute;inset:0;margin:0;overflow:hidden;text-indent:-999rem;}

  /* ---- SERVICIOS (#s3) · las 3 svc-card pasan a CARRUSEL horizontal (swipe)
     con edge-bleed hasta el borde de pantalla + snap, como los tiles de Auna y
     el carrusel de doctores. Colapsa el alto (de ~1680px a una tarjeta) y
     conserva la foto de cada estudio. ---- */
  #s3 .svc-grid{display:flex;grid-template-columns:none;gap:var(--sp-5);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);scrollbar-width:none;}
  #s3 .svc-grid::-webkit-scrollbar{display:none;}
  #s3 .svc-card{flex:0 0 82%;scroll-snap-align:start;}  /* conserva su box-shadow base (--shadow-1) */
  /* padding del cuerpo IGUAL al de las fichas de servicios.html (lateral=gutter,
     abajo=sp-8) para que ambas cajas se sientan iguales. Arriba sp-8 = despeje del ícono. */
  #s3 .svc-card__body{padding:var(--sp-8) var(--gutter) var(--sp-8);}
  /* ícono alineado al MISMO borde que el texto (gutter, ya no sp-7) y un poco más grande */
  #s3 .svc-card__icon{left:var(--gutter);width:6.2rem;height:6.2rem;}
  #s3 .svc-card__icon svg{width:3.8rem;height:3.8rem;}
  /* encabezado a la IZQUIERDA (editorial, en línea con el hero) */
  #s3 .svc-head{flex-direction:column;align-items:flex-start;text-align:left;margin-bottom:var(--sp-7);}
  #s3 .svc-head .arrow-link{display:none;}         /* "Ver todos" fuera en móvil */
  /* puntos indicadores (tipo Auna): dot activo alargado */
  #s3 .svc-dots{display:flex;justify-content:center;gap:.8rem;margin-top:var(--sp-6);}
  #s3 .svc-dot{width:.8rem;height:.8rem;padding:0;border:0;border-radius:999px;
    background:var(--line-strong);cursor:pointer;transition:width .2s,background .2s;}
  #s3 .svc-dot.is-active{width:2.4rem;background:var(--cyan);}

  /* ---- DIRECCIÓN MÉDICA (#s2) · versión móvil elegida (propuesta A):
     texto/beneficios primero; la foto del Dr. baja como apoyo visual a todo el
     ancho y la cita queda centrada, superpuesta al pie. Solo móvil. ---- */
  #s2 .s2e-grid{display:flex;flex-direction:column;}
  #s2 .s2e-body{order:1;padding:0 var(--gutter);}
  #s2 .s2e-figure{order:2;padding:var(--sp-8) 0 0;}
  #s2 .s2e-mediawrap{position:static;aspect-ratio:auto;max-height:none;
    width:100%;max-width:none;margin:0;display:flex;flex-direction:column;}
  #s2 .s2e-media{position:relative;aspect-ratio:auto;height:30rem;inset:auto;
    border-radius:0;box-shadow:none;}
  #s2 .s2e-media img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 20%;filter:saturate(.96) brightness(1.04);}
  #s2 .s2e-quote{position:static;right:auto;bottom:auto;max-width:100%;
    width:calc(100% - var(--sp-8));margin:-5.2rem auto 0;z-index:2;text-align:center;
    border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-7);box-shadow:0 1.8rem 5rem rgba(12,22,56,.14);}
  #s2 .s2e-quote .qm{font-size:3.6rem;margin-bottom:0;}
  #s2 .s2e-quote blockquote{margin-top:var(--sp-3);font-size:var(--fs-body);line-height:1.5;text-wrap:pretty;}
  #s2 .s2e-quote figcaption{margin-top:var(--sp-4);}

  /* ---- ¿POR QUÉ IO? (#s4) · responsive real del desktop:
     mismos elementos y copy, solo reflow. Desktop = intro/métrica + testimonios
     en 2 columnas + logos abajo. Móvil = esa misma jerarquía en vertical, sin
     inventar proof-cards ni cambiar copy. ---- */
  #s4 .fs__in{padding-inline:var(--gutter);}
  #s4 .trust__grid{display:flex;flex-direction:column;gap:var(--sp-8);align-items:stretch;}
  #s4 .trust__intro{max-width:100%;}
  #s4 .trust__intro .h2{max-width:100%;font-size:var(--fs-h2);line-height:1.04;}
  #s4 .trust__lead{font-size:var(--fs-lead);line-height:1.55;max-width:100%;}
  #s4 .trust__metrics{margin-top:var(--sp-8);}
  #s4 .trust__big{padding:var(--sp-7) 0;border-top:.1rem solid rgba(255,255,255,.14);
    border-bottom:.1rem solid rgba(255,255,255,.14);}
  #s4 .trust__big .n{font-size:clamp(5.4rem,16vw,7.2rem);line-height:.9;letter-spacing:-.03em;white-space:nowrap;}
  #s4 .trust__big .l{margin-top:var(--sp-4);font-size:var(--fs-sm);line-height:1.5;}
  #s4 .trust__quotes{margin-top:0;}
  #s4 .s7-prooftag{margin-bottom:var(--sp-4);}
  #s4 .s7-proof{display:flex;flex-direction:column;}
  #s4 .s7-q{padding:var(--sp-6) 0;}
  #s4 .s7-q p{font-size:var(--fs-sm);line-height:1.5;}
  #s4 .s7-q figcaption{font-size:var(--fs-2xs);}
  #s4 .iologos--one{margin:var(--sp-8) calc(-1 * var(--gutter)) 0;padding-top:var(--sp-6);
    border-top:.1rem solid rgba(255,255,255,.12);}
  #s4 .iologos__lbl{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
    line-height:1.35;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.68);
    margin-inline:var(--gutter);}
  /* espaciado móvil por margin-right (NO gap): el gap descuadraba el translateX(-50%) del
     marquee y saltaba medio gap por vuelta. margin-right mantiene el período = mitad del track. */
  #s4 .iologos img{height:2.6rem;max-width:12rem;opacity:.5;margin-right:var(--sp-7);}

  /* ---- Fondos SÓLIDOS por sección (sin el crossfade por scroll, que
     lavaba las secciones altas en flujo natural). ---- */
  #fs-bg{display:none;}
  #caminos{background:var(--page);}
  #s3,#s2{background:#fff;}
  #s4{background:var(--navy-900);}

  /* ---- MAPA de contacto · las 3 tarjetas flotantes (que amontonaban el mapa
     en móvil) se FUSIONAN en UNA sola tarjeta al pie: foto del edificio +
     "Busca este edificio" arriba y la dirección debajo. Fuera la pill de
     estacionamiento y el botón "Cómo llegar" (ya está en el bento). ---- */
  #contacto .mapbig{height:min(70vh,56rem);}                 /* mapa MUCHO más alto */
  /* zoom vuelve a la esquina sup-izq (ya no hay chip ahí) */
  #contacto .mapbig .leaflet-top.leaflet-left{top:1.2rem;}
  #contacto .map-card{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;z-index:600;
    display:flex;flex-direction:column;overflow:hidden;border-radius:1.6rem;
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem);
    box-shadow:0 1.4rem 3.2rem rgba(7,13,33,.28);}
  #contacto .map-card .fachada-chip{position:static;inset:auto;left:auto;top:auto;
    border-radius:0;box-shadow:none;background:transparent;padding:1.2rem;gap:1.3rem;
    border-bottom:.1rem solid var(--line);}
  #contacto .map-card .fachada-chip img{width:5.6rem;height:6.8rem;}
  #contacto .map-card .mapfoot{order:1;position:static;inset:auto;left:auto;right:auto;bottom:auto;
    border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:1.2rem;justify-content:flex-start;}
  #contacto .map-card .mapfoot a{display:none;}              /* botón redundante fuera */
  /* estacionamiento gratuito = renglón al pie de la MISMA tarjeta (recicla el sticker) */
  #contacto .map-card .map-sticker{order:2;position:static;inset:auto;right:auto;top:auto;
    display:flex;width:100%;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-radius:0;box-shadow:none;padding:1.1rem 1.2rem;gap:1rem;
    border-top:.1rem solid var(--line);font-size:var(--fs-xs);}
  #contacto .map-card .map-sticker .cic{width:2.4rem;height:2.4rem;}
  #contacto .map-card .map-sticker .cic svg{width:1.5rem;height:1.5rem;}
}
