/* =============================================================================================================
   PORTADA EN MÓVIL — todo lo que hay debajo del carril de la tienda (30-oct-2026)
   Jorge: «queda sucio, cutre, poco profesional, mucho texto, mucho scroll». Solo pantallas de 768 px o menos y solo en index.html
   (el <link> lleva media="(max-width: 768px)": el escritorio ni lo descarga). No hay ningún texto nuevo: se reordena, se pliega y se
   resume con frases que ya estaban; lo plegado sigue en el HTML (clases pm-resto / pm-sr, «Leer más» y «Ver todas» en js/main.js).

   UN SOLO SISTEMA: tarjeta = fondo blanco, borde de 1 px, radio de 14 px, sombra suave y relleno de 14 px. Separación entre tarjetas de
   12 px. Títulos de sección todos del mismo tamaño (--pm-h2). Botones de 48 px. Etiquetas de ficha en Montserrat 600; títulos de
   sección en Cormorant. Los carriles que se deslizan (servicios, artículos, categorías) sangran hasta el borde de la pantalla.
   ============================================================================================================= */
@media (max-width: 768px) {
  :root {
    --pm-gap: 12px;
    --pm-pad: 14px;
    --pm-r: 14px;
    --pm-h2: 1.55rem;
    --pm-linea: 1px solid var(--c-linea);
    --pm-sombra: 0 1px 2px rgba(31,42,36,.05), 0 8px 18px -14px rgba(31,42,36,.24);
    --pm-menta: rgba(201,221,201,.6);
  }

  /* ---------- Piezas comunes ---------- */
  .pm-resto, .pm-punto { display: none; }
  .pm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Tarjeta */
  .trust-block__grid, .maria__inner, .pm-orto, .pm-ademas, .pm-stock, .cat,
  .services-grid > .service, .articles > .article, .guia-tema, #faq .faq-list, .visita__hours {
    background: #fff; border: var(--pm-linea); border-radius: var(--pm-r); box-shadow: var(--pm-sombra);
  }

  /* Ritmo vertical: todas las secciones con el mismo aire */
  .trust-block, .section, .section--tight { padding-block: 14px; }
  .trust-block { padding-bottom: 4px; }

  /* Etiquetas de sección: una sola línea, mismo tamaño */
  .trust-block .eyebrow, .section .eyebrow { font-size: .66rem !important; letter-spacing: .15em; line-height: 1.3; }
  .trust-block .eyebrow::before, .section .eyebrow::before { width: 16px; margin-right: 9px; }
  .consejo { background: var(--bg); }

  /* Títulos de sección, todos iguales */
  .trust-block__intro h2, .services-head__title h2, .maria__copy h2, .cats-head h2, .consejo .guias-head h3,
  .online-band__texto h2, .visita__data h2 {
    font-size: var(--pm-h2) !important; line-height: 1.06 !important; margin: 6px 0 0 !important; letter-spacing: -.012em;
  }
  .services-head { display: block; margin-bottom: 12px; }
  /* Entradillas de cabecera: la primera frase queda en el HTML (pm-1); a la vista, solo etiqueta y título en todas las secciones */
  .services-head .lead { display: none; }

  /* Botones: 48 px, mismo estilo */
  .trust-block__cta .btn, .online-band__texto > p[style] .btn, .visita__data > .btn, .pm-mas--btn {
    min-height: 48px; padding: 6px 16px; font-size: .9rem; line-height: 1.2; border-radius: 999px; justify-content: center;
  }

  /* «Leer más» (js/main.js) */
  html.js-on .pm-plegado { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .pm-mas { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; min-height: 36px; margin: 0; display: inline-flex; align-items: center;
    font: 600 .84rem var(--ff-ui); color: var(--c-verde-botanico); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .pm-mas[hidden] { display: none; }
  .pm-mas--btn { display: flex; justify-content: center; width: 100%; min-height: 48px; margin: var(--pm-gap) 0 0; padding: 8px 16px; font-size: .9rem; border-radius: 999px; background: transparent; border: 1.5px solid var(--c-linea-strong); text-decoration: none; }

  /* Enlaces de pie de bloque con forma de botón fantasma */
  .consejo .guias-head > a.link-arrow {
    display: flex; justify-content: center; width: 100%; min-height: 48px; padding: 8px 16px; border: 1.5px solid var(--c-linea-strong); border-radius: 999px;
    font-size: .9rem; background: transparent;
  }

  /* ---------- 1 · Una farmacia de verdad, en Iturrama ---------- */
  .trust-block__grid { display: block; margin-inline: var(--gut); padding: 16px var(--pm-pad) var(--pm-pad); }
  .trust-block__intro h2 { margin-top: 6px !important; }
  .trust-block__intro .lead { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
  .trust-block__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pm-gap); margin-top: 10px; }
  .trust-block__cta .btn { width: 100%; padding: 6px 12px; font-size: .82rem; line-height: 1.2; }
  .trust-block__cta .btn--ghost { padding-inline: 14px; white-space: nowrap; }

  /* ---------- 2 · Servicios: una tira de fichas pequeñas ---------- */
  .services-grid { gap: var(--pm-gap); padding: 2px var(--gut) 8px; }
  .services-grid > .service {
    flex: 0 0 148px; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px var(--pm-pad) 12px; overflow: visible; transform: none !important;
  }
  .services-grid > .service:hover { box-shadow: var(--pm-sombra); }
  .services-grid > .service .service__media, .services-grid > .service p { display: none; }
  .services-grid > .service .service__body { padding: 0 !important; display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: space-between; }
  .service__icon { width: 32px; height: 32px; margin: 0; background: var(--pm-menta); }
  .service h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.12; letter-spacing: -.005em; margin: 0; color: var(--c-grafito); text-wrap: pretty; }
  /* toda la ficha es el enlace; la flecha queda arriba a la derecha */
  .service .link-arrow { position: static; border: 0; padding: 0; min-height: 0; margin: 0; }
  .service .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: var(--pm-r); }
  .service .link-arrow .lucide { position: absolute; top: 12px; right: 11px; width: 16px; height: 16px; color: var(--c-verde-salvia); }

  /* ---------- 3 · Ortopedia básica y «Y además» ---------- */
  .pm-orto {
    position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ico tit" "ico txt"; column-gap: 12px; align-items: center;
    margin: var(--pm-gap) 0 0 !important; padding: 12px 40px 12px var(--pm-pad); max-width: none !important; text-align: left !important; line-height: 1.4 !important;
  }
  .pm-orto .pm-ico { display: grid; grid-area: ico; align-self: start; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--pm-menta); color: var(--c-verde-botanico); }
  .pm-orto strong { grid-area: tit; font: 600 1.15rem/1.1 var(--ff-display); color: var(--c-grafito); }
  .pm-orto .pm-1 { grid-area: txt; margin-top: 4px; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
  .pm-orto a.link-arrow { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: flex-end; padding: 0 14px 0 0; border: 0; min-height: 0; border-radius: var(--pm-r); }
  .pm-orto a.link-arrow .lucide { width: 16px; height: 16px; color: var(--c-verde-salvia); }

  .pm-ademas { margin: var(--pm-gap) 0 0 !important; padding: 12px var(--pm-pad) 8px; }
  .pm-ademas .chip-links__nota { margin: 0 0 8px; text-align: left; font-size: .64rem; letter-spacing: .16em; }
  .pm-ademas .chip-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; justify-content: stretch; }
  .pm-ademas .chip-links li { min-width: 0; }
  .pm-ademas .chip-link {
    flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; gap: 10px; width: 100%; min-height: 44px;
    padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: .78rem; font-weight: 500; line-height: 1.2;
  }
  .pm-ademas .chip-link--sin-n { padding-right: 0; }
  .pm-ademas .chip-link > svg, .pm-ademas .chip-link > i { display: block; flex: 0 0 auto; width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border-radius: 50%; background: var(--pm-menta); color: var(--c-verde-botanico); }

  /* ---------- 4 · María ---------- */
  .maria { padding-block: 14px; }
  .maria__inner {
    display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center;
    margin-inline: var(--gut); padding: 16px var(--pm-pad) var(--pm-pad) !important;
  }
  .maria__copy { display: contents; }
  .maria__copy .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .maria__copy h2 { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 14px !important; }
  .maria__inner > div:first-child { grid-column: 1; grid-row: 3 / span 2; }
  .maria__photo { width: 78px !important; aspect-ratio: 1; border-radius: 50% !important; border: 0; }
  .maria__sign { grid-column: 2; grid-row: 3; align-self: end; display: block; margin: 0 !important; }
  .maria__sign b { display: block; font-size: 1.3rem; line-height: 1.1; }
  .maria__sign > span { display: block; margin-top: 3px; font-size: .74rem; line-height: 1.35; color: var(--ink-soft); }
  .maria__copy > a.link-arrow { grid-column: 2; grid-row: 4; justify-self: start; align-self: start; min-height: 36px; margin-top: 4px; padding: 6px 0 2px; font-size: .86rem; }
  .maria__copy .lead { grid-column: 1 / -1; grid-row: 5; margin: 10px 0 0 !important; max-width: none !important; font-size: .86rem; line-height: 1.5; }
  .maria__copy .pm-mas { grid-column: 1 / -1; grid-row: 6; justify-self: start; }
  .maria__creds { grid-column: 1 / -1; grid-row: 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: var(--pm-linea); }
  .maria__cred { text-align: center; font-size: .68rem; line-height: 1.3; }
  .maria__cred b { margin-bottom: 4px; font-size: 1.3rem; white-space: nowrap; }

  /* ---------- 5 · Categorías destacadas (el carril no se toca; solo márgenes y el mismo borde) ---------- */
  .cats-head { margin-bottom: 10px; }
  .cats-head .link-arrow { min-height: 36px; padding: 4px 0 2px; font-size: .86rem; }
  .cats-grid { gap: var(--pm-gap); }
  .cat { padding: var(--pm-pad) 12px 12px; }

  /* ---------- 6 · Recuento por categoría ---------- */
  .pm-stock { margin: var(--pm-gap) 0 0 !important; padding: 12px var(--pm-pad) 4px; }
  .pm-stock .chip-links__nota { margin: 0 0 6px; text-align: left; text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 500; line-height: 1.35; color: var(--ink-soft); }
  .pm-stock .chip-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .pm-stock .chip-links li { min-width: 0; }
  .pm-stock .chip-link {
    width: 100%; min-height: 38px; padding: 4px 0; border: 0; border-top: var(--pm-linea); border-radius: 0; background: transparent; box-shadow: none;
    font-size: .82rem; font-weight: 500; line-height: 1.2; gap: 8px;
  }
  .pm-stock .chip-link__n { min-width: 0; padding: 0; background: none; border-radius: 0; font-size: .78rem; font-weight: 600; color: var(--c-verde-botanico); }

  /* ---------- 7 · Consejo farmacéutico: artículos en fichas iguales ---------- */
  .articles { gap: var(--pm-gap); padding: 2px var(--gut) 8px; align-items: stretch; }
  .articles > .article { flex: 0 0 236px; position: relative; padding: var(--pm-pad); }
  .article__media, .article--lead .article__media { aspect-ratio: 16 / 9; margin: 0 0 10px; border-radius: 10px; }
  .article__cat { margin: 0 0 6px; font-size: .62rem !important; letter-spacing: .14em; }
  .article h3, .article--lead h3 { margin: 0; font-size: 1.14rem; line-height: 1.16; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .article h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--pm-r); }
  .article p { display: none; }
  .article__meta { margin-top: auto !important; padding-top: 8px; font-size: .72rem !important; color: var(--ink-soft); }

  /* ---------- 8 · Más consejos de farmacia: fichas 2 × N ---------- */
  .consejo > .wrap-x { display: flex; flex-direction: column; }
  .consejo .guias-head { display: contents !important; }
  .consejo .guias-head > div { margin-top: 12px; }
  .consejo .guias-head > a.link-arrow { order: 9; margin-top: var(--pm-gap); min-height: 46px; padding-block: 6px; }
  .guias-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-gap); margin-top: 12px; align-items: stretch; }
  .guia-tema { padding: 0 var(--pm-pad); }
  .guia-tema > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-content: center; align-items: center; min-height: 44px; padding: 5px 0; gap: 0 6px; }
  .guia-tema[open] > summary { padding-bottom: 10px; }
  .guia-tema__txt { display: contents; }
  .guia-tema__titulo { grid-column: 1 / -1; grid-row: 1; font-size: 1.04rem; font-weight: 600; line-height: 1.12; letter-spacing: -.005em; }
  .guia-tema__n { grid-column: 1; grid-row: 2; margin-top: 3px; font-size: .58rem; letter-spacing: .12em; }
  .guia-tema__chev { grid-column: 2; grid-row: 2; width: 16px; height: 16px; color: var(--c-verde-salvia); }

  /* ---------- 9 · La tienda online ya está abierta ---------- */
  .online-band { border-radius: var(--pm-r); gap: 0; }
  .online-band--foto .online-band__texto { padding: 16px var(--pm-pad) var(--pm-pad); }
  .online-band__features { gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
  .online-band__feature { align-items: center; font-size: .86rem; line-height: 1.3; }
  .online-band__feature .lucide { margin-top: 0; }
  .online-band__texto > p[style] { margin-top: 14px !important; gap: var(--pm-gap) !important; }
  .online-band__texto > p[style] .btn { flex: 1 1 100%; border: 1.5px solid transparent; }
  .online-band__texto > p[style] .btn--ghost { border-color: rgba(255,255,255,.6); }

  /* ---------- 10 · Preguntas frecuentes ---------- */
  #faq .services-head .lead { display: none; }
  #faq .faq-list { max-width: none !important; margin-top: 0 !important; padding: 0 var(--pm-pad); }
  #faq .faq-item { border-bottom: var(--pm-linea) !important; }
  #faq .faq-item:last-child, #faq .faq-list.pm-corta .faq-item:nth-child(4) { border-bottom: 0 !important; }
  #faq .faq-item > summary { min-height: 52px; font-size: 1.08rem !important; line-height: 1.2; }
  #faq .faq-list.pm-corta .faq-item:nth-child(n+5) { display: none; }

  /* ---------- 11 · Visítanos ---------- */
  .visita__inner { gap: 14px; margin-inline: 0; }
  .visita__map { aspect-ratio: 2.2 / 1; border: var(--pm-linea); border-radius: var(--pm-r); box-shadow: var(--pm-sombra); }
  .visita__hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 12px 0 !important; padding: 11px var(--pm-pad); font-size: .86rem; line-height: 1.3; }
  .visita__hours dd { text-align: right; }
  .visita__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-gap); margin: 0 0 var(--pm-gap) !important; }
  .visita__contact a {
    min-height: 48px; padding: 6px 12px; justify-content: center; text-align: center; gap: 8px; border: 1.5px solid var(--c-linea-strong); border-radius: 999px;
    font-size: .82rem; font-weight: 600; line-height: 1.2; color: var(--c-verde-botanico); background: transparent;
  }
  .visita__contact a:nth-child(3) { grid-column: 1 / -1; }
  .visita__data > .btn { display: flex; width: 100%; }
}

@media (max-width: 380px) {
  .trust-block .eyebrow, .section .eyebrow { letter-spacing: .1em; }
  .maria__cred b { font-size: 1.12rem; }
}