/* =========================================================
   Versión móvil publicada (Móvil 2B, 02/11/2026) · sobre la V11C-1B
   Solo dos cambios, y solo en móvil (hasta 899 px); el escritorio no cambia:
   1 portada con la foto de Rocío casi a pantalla completa y el titular encima
   2 la frase de «Sobre mí» sobre la segunda foto de Rocío
   Y la barra inferior de cita de la Prueba Móvil 1 (pedida por Javi). El resto de bloques, como en la versión OK.
   ========================================================= */

.cita-bar { display: none; }

@media (max-width: 899px) {

  /* 0 · Barra inferior de cita (como en la Prueba Móvil 1): sustituye al botón flotante de WhatsApp en móvil */
  .wa-float { display: none; }
  .cita-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(250,247,242,.9); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 -1px 0 var(--line);
    /* oculta: fuera de la pantalla del todo (también la zona segura del iPhone), invisible y sin toques */
    transform: translateY(calc(100% + 8px)); visibility: hidden; pointer-events: none;
    transition: transform 320ms var(--ease-drawer), visibility 0s 320ms;
  }
  .cita-bar.show { transform: none; visibility: visible; pointer-events: auto; transition: transform 320ms var(--ease-drawer), visibility 0s; }
  .cita-bar .btn { flex: 1; min-height: 48px; }
  .cita-bar-wa {
    flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sage-ink); color: #fff; transition: transform 160ms var(--ease-out);
  }
  .cita-bar-wa:active { transform: scale(.94); }
  .cita-bar-wa svg { width: 24px; height: 24px; fill: currentColor; }
  .site-footer, body:has(.wa-float) .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }


  /* 1 · Portada: foto casi a pantalla completa con titular y botones encima */
  .hero { padding: var(--header-h) 0 clamp(40px, 9vw, 64px); }
  .hero-grid {
    width: 100%; gap: 0; align-items: stretch;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    grid-template-rows: 1fr auto auto auto auto auto;
  }
  .hero-copy, .hero-visual { display: contents; }
  .hero-visual .portrait {
    --r-lg: 0px; /* el recorte de entrada termina en esquinas rectas */
    grid-column: 1 / -1; grid-row: 1 / 5; position: relative;
    max-width: none; margin: 0; border-radius: 0; aspect-ratio: auto;
    height: calc(100svh - var(--header-h) - 64px); min-height: 500px; max-height: 920px;
  }
  /* la foto sube un poco (Javi): la cara queda más arriba y con aire respecto al titular */
  .hero-visual .portrait img { object-position: 50% 22%; height: calc(100% + 64px); margin-top: -64px; }
  .hero-visual .portrait::after {
    content: ""; position: absolute; inset: 30% 0 0; pointer-events: none;
    background: linear-gradient(to top, rgba(36,34,43,.82) 0%, rgba(36,34,43,.55) 42%, rgba(36,34,43,0) 100%);
  }
  /* sin la etiqueta flotante del logo y la dirección: con la foto grande sobraba */
  .hero-caption { display: none; }
  .hero .eyebrow, .hero-title, .hero-actions { grid-column: 2; z-index: 2; position: relative; }
  .hero .eyebrow { grid-row: 2; color: var(--mint-100); margin-bottom: .9rem; line-height: 1.5; }
  .hero-title { grid-row: 3; color: var(--paper); font-size: clamp(2.45rem, 11.4vw, 3.6rem); line-height: 1; margin-bottom: 1.4rem; }
  .hero-title em { color: var(--mint-300); }
  .hero-actions { grid-row: 4; margin: 0 0 28px; gap: 10px; flex-wrap: nowrap; }
  .hero-actions .btn-ink { --bg: var(--mint-300); --fg: var(--ink); --bd: var(--mint-300); }
  /* el teléfono, como botón redondo junto al principal: así todo cabe en una fila */
  .hero-actions .btn-line { --fg: var(--paper); --bd: rgba(250,247,242,.55); flex: none; width: 50px; padding: 0; font-size: 0; gap: 0; }
  .hero-actions .btn-line svg { width: 20px; height: 20px; }
  /* datos de colegiada justo debajo de la foto, en una franja */
  .hero-facts {
    grid-column: 1 / -1; grid-row: 5; display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 0; padding: 18px 12px; border: 0; background: var(--white); box-shadow: 0 1px 0 var(--line);
    text-align: center;
  }
  .hero-facts div { padding: 0 6px; margin: 0; border-right: 1px solid var(--line); }
  .hero-facts div:last-child { border: 0; padding: 0 6px; }
  .hero-facts dt { font-size: .66rem; letter-spacing: .12em; }
  .hero-facts dd { font-size: 1.12rem; }
  .hero-lead { grid-column: 2; grid-row: 6; margin: 28px 0 0; font-size: 1.02em; }

  /* 2 · Sobre mí: la frase va sobre la segunda foto de Rocío (el resto del bloque, igual) */
  /* la foto a todo el ancho, como en la Prueba Móvil 1 */
  .about { padding-top: 0; }
  .about-grid { gap: 36px; }
  .about .portrait-soft { --r-lg: 0px; position: relative; max-width: none; border-radius: 0; aspect-ratio: 4 / 4.6; }
  .about .portrait-soft img { object-position: 50% 30%; }
  .about .portrait-soft::after {
    content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
    background: linear-gradient(to top, rgba(36,34,43,.78), rgba(36,34,43,0));
  }
  .about-visual { position: relative; margin-inline: calc(50% - 50vw); }
  .about-pull {
    position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 1; margin: 0; max-width: 28ch;
    color: var(--paper); font-size: 1.22rem; text-shadow: 0 1px 12px rgba(36,34,43,.35);
  }
  .js .about-pull.reveal { transition-delay: 300ms; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .cita-bar { transition: none; } }

/* =========================================================
   Versión final (02/11/2026, Javi): menos hueco antes de «Modalidades de consulta»
   ========================================================= */
@media (max-width: 899px) {
  #tarifas { padding-bottom: 24px; }
  #modalidades { padding-top: 48px; }
  /* al ir desde el menú, el título queda a 40 px de la cabecera, como en las demás secciones
     (el ajuste general resta el relleno grande de sección; aquí el relleno es menor) */
  #modalidades { scroll-margin-top: calc(28px - 48px); }
  /* Sobre mí empieza con la foto (sin relleno arriba): que no quede tapada por la cabecera */
  #sobre-mi { scroll-margin-top: 0px; }
}

/* Versión B: el botón del teléfono de la portada muestra el icono y el número */
@media (max-width: 899px) {
  .tel-visible .hero-actions .btn-line { width: auto; padding: 0 18px; font-size: 1rem; gap: 8px; white-space: nowrap; }
  .tel-visible .hero-actions .btn-ink { white-space: nowrap; }
}
@media (max-width: 359px) {
  .tel-visible .hero-actions .btn-line, .tel-visible .hero-actions .btn-ink { padding-inline: 14px; font-size: .95rem; }
}