/* Páginas interiores y guías en el móvil (ola 3, 29-oct-2026).
   Solo toca el móvil (hasta 880 px): el escritorio queda como estaba. Lo que se pliega o se mueve sigue entero en el HTML.
   Se carga la última, después de pages.css y compra-guias.css; js/movil-paginas.js abre los plegables en escritorio y arma las fichas. */

/* ───────── Plegables <details data-pleg> ─────────
   .pleg = «Leer más» (el texto de dentro se despliega)       .acc = acordeón cuyo título es un encabezado (h2/h3)
   Móvil: cerrados salvo los que traen «open». Escritorio: siempre abiertos y sin la pestaña. */
details[data-pleg] > summary { list-style: none; }
details[data-pleg] > summary::-webkit-details-marker { display: none; }
.article-content > details.acc { margin-top: 0; }
.article-content details.acc > summary { display: block; }
.article-content details.acc > summary ~ * { margin-top: 1.1em; }
.article-content details.pleg > summary ~ * { margin-top: 1.1em; }
.article-content details.pleg > summary + * { margin-top: 0; }
.pleg__menos { display: none; }
.article-content .tabla-scroll { margin-top: 0 !important; }
@media (min-width: 881px) {
  details[data-pleg]::details-content { content-visibility: visible; }
  details.pleg > summary { display: none; }
  details.acc > summary { cursor: default; pointer-events: none; }
  details.acc > summary::after { display: none; }
  .solo-movil { display: none !important; }
}

@media (max-width: 880px) {
  .solo-movil { display: block; }
  .btn.solo-movil { display: inline-flex; }

  /* «Leer más» */
  details.pleg > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
    color: var(--c-verde-botanico); font: 600 .9rem/1.2 var(--ff-ui); letter-spacing: .01em; -webkit-tap-highlight-color: transparent; }
  details.pleg > summary::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: rotate(45deg); transition: transform .2s ease; }
  details.pleg[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
  details.pleg[open] .pleg__mas { display: none; }
  details.pleg[open] .pleg__menos { display: inline; }
  details.pleg > summary:focus-visible, details.acc > summary:focus-visible, .ficha__ver:focus-visible { outline: 3px solid var(--c-verde-botanico); outline-offset: 3px; border-radius: 8px; }

  /* Acordeón con encabezado */
  details.acc { border-bottom: 1px solid var(--c-linea-strong); }
  .article-content details.acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px;
    padding: 10px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  details.acc > summary > :is(h2, h3) { margin: 0 !important; font-size: 1.25rem; line-height: 1.22; }
  details.acc > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border: solid var(--c-verde-botanico); border-width: 0 2px 2px 0;
    transform: rotate(45deg); transition: transform .2s ease; }
  details.acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .article-content details.acc > summary ~ * { margin-top: .9em; }
  .article-content details.acc[open] { padding-bottom: 18px; }
  .article-content details.acc[open] > summary { padding-bottom: 4px; }
}

/* ───────── Tablas de las guías ─────────
   (los botones «Ver datos» solo existen en el móvil) */
.ficha__ver { display: none; }
/* ───────── Tablas de las guías (detalle) ─────────
   1) Tablas de producto (js/movil-paginas.js les pone .ficha): cada fila es una ficha; «Ver datos» abre el resto de columnas.
   2) Las demás: se leen enteras, sin partir palabras, deslizando con la primera columna fija. */
@media (max-width: 880px) {
  .article-content table.ficha { display: block; width: 100% !important; min-width: 0 !important; margin: 10px 0 0 !important; font-size: .95rem !important; border: 0; }
  .article-content table.ficha caption { display: block; }
  .ficha > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ficha thead, .ficha tbody, .ficha tr, .ficha th, .ficha td { display: block; }
  .article-content table.ficha th, .article-content table.ficha td { padding: 0 !important; border: 0 !important; background: none; box-shadow: none !important;
    position: static !important; min-width: 0 !important; width: auto !important; font-weight: inherit; text-align: left; }
  .ficha tbody tr { padding: 12px 0; border-bottom: 1px solid var(--c-linea); }
  .ficha tbody tr:last-child { border-bottom: 0; }
  .article-content table.ficha tr.ficha-grupo { padding: 0; margin-top: 16px; border: 0; }
  .article-content table.ficha tr.ficha-grupo:first-child, .article-content table.ficha thead + tbody > tr.ficha-grupo:first-child { margin-top: 4px; }
  .article-content table.ficha tr.ficha-grupo th { padding: 9px 12px !important; border-radius: 10px; background: var(--c-crema);
    font: 700 .74rem/1.3 var(--ff-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-verde-botanico); }
  .ficha td.ficha-cab { font-size: .95rem; line-height: 1.4; color: var(--c-grafito-soft); }
  .ficha td.ficha-cab > a, .ficha td.ficha-cab .mc-celda__txt > a { font-weight: 600; font-size: 1rem; color: var(--c-grafito); text-decoration: none; }
  .ficha td:not(.ficha-cab) { display: none; margin-top: 10px; padding-left: 12px !important; border-left: 3px solid var(--c-verde-mint) !important;
    font-size: .9rem; line-height: 1.55; color: var(--c-grafito); }
  .ficha tr.is-abierta td:not(.ficha-cab) { display: block; }
  .ficha td.ficha-nota { display: block; margin-top: 6px; }
  .ficha td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font: 700 .64rem/1.3 var(--ff-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c-verde-botanico); }
  .ficha__ver { display: flex; width: max-content; align-items: center; gap: 8px; min-height: 40px; margin: 2px 0 -6px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--c-verde-botanico); font: 600 .86rem/1 var(--ff-ui); -webkit-tap-highlight-color: transparent; }
  .ficha__ver::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
  .ficha tr.is-abierta .ficha__ver::after { transform: rotate(-135deg); margin-top: 3px; }
  /* Con la tabla ya en fichas no hace falta el aviso de deslizar */
  .mc-desliza:has(+ div > table.ficha), .mc-desliza:has(+ table.ficha) { display: none; }

  /* La ficha cuando la guía pinta foto, precio y «+» en la celda del producto (variante D de compra-guias.js) */
  .ficha .mc-celda { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "foto txt precio" "foto txt add"; column-gap: 12px; row-gap: 4px; align-items: start; }
  .ficha .mc-celda__fila, .ficha .mc-celda__foto { display: contents; }
  .ficha .mc-celda .mc-peana { grid-area: foto; width: 58px; align-self: start; }
  .ficha .mc-celda__txt { grid-area: txt; min-width: 0; }
  .ficha .mc-celda .mc-precio { grid-area: precio; justify-self: end; font-size: 1.25rem; padding-bottom: 0; }
  .ficha .mc-celda .mc-agotado { grid-area: precio; justify-self: end; }
  .ficha .mc-celda .mc-add { grid-area: add; position: static; justify-self: end; width: 44px; height: 44px; box-shadow: none; }
  .ficha .mc-celda .mc-add::before { display: none; }
  .ficha .mc-celda .mc-add .mc-i { width: 20px; height: 20px; }

  /* Tablas que no son de producto: sin palabras partidas, columna de cabecera fija y pistas de que se desliza */
  .article-content table:not(.ficha) { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual; }
  .article-content table:not(.ficha) th, .article-content table:not(.ficha) td { overflow-wrap: normal !important; word-break: normal !important; }
  :is(.tabla-scroll, .article-content div[style*="overflow-x:auto"]) > table:not(.ficha) > thead th:first-child,
  :is(.tabla-scroll, .article-content div[style*="overflow-x:auto"]) > table:not(.ficha) > tbody > tr > :first-child {
    position: sticky; left: 0; z-index: 1; background: var(--bg, #FAF7F3); box-shadow: inset -1px 0 0 var(--c-linea); }
  :is(.tabla-scroll, .article-content div[style*="overflow-x:auto"]) > table:not(.ficha) > thead th:first-child { background: var(--c-crema); }
  :is(.tabla-scroll, .article-content div[style*="overflow-x:auto"]) > table:not(.ficha) > tbody > tr > th[colspan] { position: static; box-shadow: none; }
  .tabla-scroll, .article-content div[style*="overflow-x:auto"] {
    background: linear-gradient(90deg, var(--bg, #FAF7F3) 30%, rgba(250,247,243,0)) left center / 28px 100% no-repeat local,
                linear-gradient(270deg, var(--bg, #FAF7F3) 30%, rgba(250,247,243,0)) right center / 28px 100% no-repeat local,
                linear-gradient(90deg, rgba(31,42,36,.16), rgba(31,42,36,0)) left center / 10px 100% no-repeat scroll,
                linear-gradient(270deg, rgba(31,42,36,.16), rgba(31,42,36,0)) right center / 10px 100% no-repeat scroll;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tabla-scroll { overflow-x: auto; }
}

/* ───────── Guía de lágrimas artificiales (blog/lagrimas-artificiales.html) ─────────
   Encabezado en móvil: primero «En 30 segundos» y el botón de la tienda; la introducción larga, plegada debajo. */
@media (max-width: 880px) {
  .subhero__inner > .subhero__tienda { order: 1; margin-top: 4px !important; }
  .subhero__inner > .quick-answer { order: 2; margin-top: 8px !important; }
  .subhero__inner > .pleg--intro { order: 3; }
  .subhero__inner > .subhero__firma { order: 4; }
  .subhero__tienda .btn.solo-movil { display: flex; justify-content: center; width: 100%; margin-top: 14px; padding: 16px 24px; font-size: 1rem; box-shadow: 0 14px 30px -18px rgba(39,107,69,.7); }
  .subhero__tienda .btn.solo-movil, .subhero__tienda .btn.solo-movil:hover { color: var(--c-blanco); text-decoration: none; }
}

@media (max-width: 880px) {
  .article-content details.pleg + h2, .article-content details.pleg + h3 { margin-top: .8em; }
  .article-content details.acc + ul.chip-links, .article-content details.acc + p { margin-top: 14px !important; }
}

/* ───────── Guías: botón de tienda y «Sigue leyendo» ───────── */
@media (max-width: 880px) {
  .subhero__tienda.solo-movil { margin: 6px 0 0; }
  .subhero__tienda.solo-movil .btn, .guia-tienda.solo-movil .btn { display: flex; justify-content: center; width: 100%; padding: 16px 24px; font-size: 1rem; box-shadow: 0 14px 30px -18px rgba(39,107,69,.7); }
  .guia-tienda.solo-movil { display: grid; gap: 10px; margin: -4px 0 0; }
  .subhero__tienda .btn.btn--primary, .guia-tienda .btn.btn--primary { color: var(--c-blanco); text-decoration: none; }
  .guia-tienda .btn.btn--ghost { color: var(--c-verde-botanico); text-decoration: none; }
  /* «Sigue leyendo» en una tira que se desliza */
  .article-grid { display: flex; gap: 14px; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut); overscroll-behavior-x: contain; scrollbar-width: thin; }
  .article-grid > .article-card { flex: 0 0 min(76%, 290px); scroll-snap-align: start; }
}

/* ───────── Servicios (servicios.html) ─────────
   Índice de 6 tarjetas → fichas en una tira que se desliza; «Más cosas» → 7 filas desplegables; fotos en banda baja; botón de la tienda.
   En escritorio las filas siguen siendo las mismas tarjetas, siempre abiertas. */
details.fc-acc.feature-card { display: block; }
details.fc-acc > summary { list-style: none; display: flex; flex-direction: column; gap: 12px; }
details.fc-acc > summary::-webkit-details-marker { display: none; }
details.fc-acc > summary > h3 { margin: 0; }
.fc-acc > .fc-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
@media (min-width: 881px) {
  details.fc-acc > summary { cursor: default; pointer-events: none; }
}
@media (max-width: 880px) {
  .page-section[id], details.fc-acc[id] { scroll-margin-top: 96px; }
  /* Índice: tira de fichas */
  .card-grid.indice-chips { display: flex; gap: 8px; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); overscroll-behavior-x: contain; scrollbar-width: none; }
  .card-grid.indice-chips::-webkit-scrollbar { display: none; }
  .card-grid.indice-chips > a.feature-card[href] { flex: 0 0 auto; max-width: 236px; flex-direction: row; align-items: center; gap: 10px; min-height: 56px;
    padding: 8px 16px 8px 8px; border-radius: 999px; scroll-snap-align: start; }
  .indice-chips .feature-card__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; }
  .indice-chips .feature-card h3 { font: 600 .9rem/1.2 var(--ff-ui); letter-spacing: 0; }
  .indice-chips .feature-card p { display: none; }
  .servicios-tienda.solo-movil { margin: 0 0 14px; }
  .servicios-tienda .btn { display: flex; justify-content: center; width: 100%; padding: 16px 24px; font-size: 1rem; color: var(--c-blanco); text-decoration: none;
    box-shadow: 0 14px 30px -18px rgba(39,107,69,.7); }

  /* «Más cosas»: filas que se despliegan */
  .card-grid.fc-lista { gap: 8px; }
  details.fc-acc.feature-card { padding: 0 16px; gap: 0; }
  details.fc-acc > summary { flex-direction: row; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  details.fc-acc > summary:focus-visible { outline: 3px solid var(--c-verde-botanico); outline-offset: 3px; border-radius: 8px; }
  details.fc-acc .feature-card__icon { flex: none; width: 40px; height: 40px; }
  details.fc-acc > summary > h3 { flex: 1; min-width: 0; font-size: 1.1rem; }
  details.fc-acc > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border: solid var(--c-verde-botanico); border-width: 0 2px 2px 0;
    transform: rotate(45deg); transition: transform .2s ease; }
  details.fc-acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .fc-acc > .fc-body { margin-top: 0; padding: 0 0 18px; }
  .fc-acc > .fc-body > p, .fc-acc > .fc-body > a { margin-top: 0 !important; margin-bottom: 0 !important; }
  .fc-acc > .fc-body > a { align-self: flex-start; }

  /* Fotos de los apartados: banda baja en vez de 263 px */
  .serv-det .two-col > .imgph, .foto-banda .two-col > .imgph { aspect-ratio: auto !important; height: 120px; }
}

/* ───────── Tarjetas en filas compactas (.cards-fila, solo en las páginas que la usan) ─────────
   Cada tarjeta pasa de 250-350 px a una fila de 100-170 px: icono y título en una línea y el texto debajo, a todo el ancho. Todo el texto sigue visible. */
@media (max-width: 880px) {
  .card-grid.cards-fila { gap: 10px; }
  .card-grid.cards-fila > .feature-card, .card-grid.cards-fila > a.feature-card[href] { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 8px;
    align-items: center; align-content: start; padding: 14px 16px; }
  .cards-fila > .feature-card > .feature-card__icon { grid-column: 1; grid-row: 1; width: 38px; height: 38px; border-radius: 10px; }
  .cards-fila > .feature-card > h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.15rem; line-height: 1.2; }
  .cards-fila > .feature-card > :not(.feature-card__icon):not(h3) { grid-column: 1 / -1; margin: 0 !important; }
  .cards-fila > .feature-card > p { font-size: .94rem; line-height: 1.5; }
  .cards-fila > .feature-card > p[style*="font-size:.92rem"] { font-size: .86rem !important; }
}

/* ───────── María Aguirre (maria-aguirre.html) ─────────
   La foto, la tarjeta de la titular y los botones suben encima del texto; el texto largo va en acordeones; las 6 tarjetas pasan a fichas de dos columnas. */
@media (max-width: 880px) {
  .two-col > .ma-lateral { order: -1; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px 18px; align-items: center; }
  .ma-lateral > .imgph { width: 104px; margin: 0; }
  .ma-lateral > .author-card { margin: 0 !important; padding: 0; background: none; border: 0; gap: 0; }
  .ma-lateral .author-card__avatar { display: none; }
  .ma-lateral .author-card__name { font-size: 1.15rem; line-height: 1.2; }
  .ma-lateral .author-card__bio { margin-top: 6px; font-size: .9rem; line-height: 1.45; }
  .ma-lateral > .ma-botones { grid-column: 1 / -1; margin-top: 2px !important; }
  .ma-botones > .btn.solo-movil { display: flex; padding: 16px 24px; font-size: 1rem; color: var(--c-blanco); box-shadow: 0 14px 30px -18px rgba(39,107,69,.7); }
  .card-grid.cards-mosaico { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .card-grid.cards-mosaico > a.feature-card[href] { flex-direction: row; align-items: center; gap: 8px; min-height: 60px; padding: 10px; border-radius: 14px; }
  .cards-mosaico .feature-card__icon { flex: none; width: 30px; height: 30px; border-radius: 9px; }
  .cards-mosaico .feature-card h3 { min-width: 0; font-size: .95rem; line-height: 1.15; overflow-wrap: normal; hyphens: manual; }
  .cards-mosaico .feature-card p { display: none; }
}

/* ───────── Iturrama y contacto: mapa bajo petición, datos sin repetir y lista de contacto compacta ───────── */
@media (max-width: 880px) {
  .solo-escritorio { display: none !important; }
  .mapa-caja { display: none; }
  .mapa-caja.mapa-abierto { display: block; }
  .btn[data-mapa] { cursor: pointer; }
  .contact-info { gap: 0; }
  .contact-info__block { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-linea); }
  .contact-info__block:first-child { padding-top: 0; }
  .contact-info__value { display: block; font-size: .94rem; }
  .contact-info__value > .lucide, .contact-info__value > svg { display: none; }
}
@media (max-width: 380px) {
  .contact-info__block { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Farmacia online: en pantallas de 380 px o menos las tablas de precios y plazos caben enteras (antes la columna «Gratis» se salía por la derecha) */
@media (max-width: 380px) {
  #modalidades .article-content table, #recogida-y-resto .article-content table { font-size: .84rem !important; }
  #modalidades .article-content table :is(th, td), #recogida-y-resto .article-content table :is(th, td) { padding-inline: 5px !important; }
}