/* ===================================================================
   MICROPIGMENTALIA — Capa móvil (mobile-first de verdad)
   Solo actúa en <=991px. El escritorio queda EXACTAMENTE igual.
   Convención de prefijo: mm- (micropigmentalia mobile).
   Los elementos mm-* los inyecta js/mobile.js (progressive enhancement:
   sin JS la web queda como estaba, nada se oculta ni se rompe).
   Paleta marca web: #674327 (marrón) · Fahkwang títulos.
   =================================================================== */

@media (max-width: 991px) {

  /* =================================================================
     1. TIPOGRAFÍA Y RITMO — letra de app, no de PDF
     ================================================================= */
  body { font-size: 16px; }

  .esNosotros p,
  .esTratamientos p,
  .b-beneficio p,
  article p {
    font-size: 15.5px !important;
    line-height: 1.68 !important;
    margin-bottom: 14px;
  }

  .nosotros-titulo {
    font-size: 21px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
  }

  h1.unTitulo {
    font-size: 25px !important;
    margin: 8px 0 22px !important;
  }

  /* Cabecera de página interna (h1 + breadcrumb): compacta */
  #section-header { padding: 26px 20px 22px !important; }
  #section-header h1 { font-size: 27px !important; line-height: 1.2 !important; }
  #section-header .bc { font-size: 12px !important; }

  /* Bloques de texto: aire lateral consistente */
  .padding-4em { padding: 28px 20px 20px !important; }

  /* =================================================================
     2. BARRA CTA FIJA INFERIOR — Llamar / Reservar al alcance del pulgar
        (la inyecta mobile.js con los textos del idioma de la página)
     ================================================================= */
  body.mm-has-ctabar { padding-bottom: 76px; }

  .mm-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 99990;
    display: flex;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(103, 67, 39, 0.12);
    box-shadow: 0 -6px 24px rgba(103, 67, 39, 0.10);
  }
  .mm-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 12px;
    font-family: 'Gotham Book', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: transform 0.15s ease;
  }
  .mm-cta-bar a:active { transform: scale(0.96); }
  .mm-cta-bar a i { font-size: 15px; }
  .mm-cta-call {
    color: #674327;
    border: 1.5px solid #674327;
    background: #fff;
  }
  .mm-cta-book {
    color: #fff;
    background: #674327;
    border: 1.5px solid #674327;
  }

  /* el banner de cookies no debe chocar con la barra CTA */
  .cc-window.cc-banner { bottom: 76px !important; }

  /* =================================================================
     3. HERO HOME — que no quede un churrito panorámico aplastado
     ================================================================= */
  .mp-hero-wrap img,
  img[src*="new-slider"] {
    min-height: 300px;
    max-height: 56vh;
    object-fit: cover;
    object-position: center 30%;
  }

  /* =================================================================
     4. PROCESO / TECNOLOGÍA — el vídeo abre la página, el texto en
        acordeones (los monta mobile.js a partir de h4.procesoTitulo)
     ================================================================= */

  /* el vídeo pasa arriba del todo (flex order, sin tocar el DOM) */
  .article-micro .container-fluid > .row {
    display: flex;
    flex-direction: column;
  }
  .article-micro .row > .imgMicroAntes,
  .article-micro .row > .imgMicroTech { order: -1; }

  /* vídeo de página interna: panorámico suave, no medio pantallón */
  .imgMicroAntes video, .imgMicroTech video { aspect-ratio: 4 / 3; }

  /* --- acordeones --- */
  .mm-acc { margin-top: 4px; }

  .mm-acc-item {
    background: #fff;
    border: 1px solid #e9e0d5;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(103, 67, 39, 0.05);
  }

  .mm-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 17px 18px;
    background: none;
    border: none;
    text-align: left;
    font-family: 'Fahkwang', sans-serif;
    font-size: 16.5px;
    font-weight: 500;
    color: #674327;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mm-acc-head::after {
    content: "";
    flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid #a9885f;
    border-bottom: 2px solid #a9885f;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-top: -4px;
  }
  .mm-acc-item.mm-open > .mm-acc-head::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  .mm-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 18px;
  }
  .mm-acc-item.mm-open > .mm-acc-body {
    max-height: 4000px;
    padding-bottom: 18px;
  }
  .mm-acc-body p:last-child { margin-bottom: 0; }

  /* imágenes dentro de acordeones: full-bleed con esquinas suaves */
  .mm-acc-body img.imagenDentro {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 14px 0;
  }
  /* en móvil mostramos también las marcadas hidden-lg (eran solo desktop) */
  .mm-acc-body img.imagenDentro.hidden-lg { display: block !important; }

  /* el bloque de texto pierde el fondo gris dentro de acordeones (ya lo da la tarjeta) */
  .elProceso.mm-accordionized {
    background: transparent !important;
    padding: 22px 16px 10px !important;
  }
  .elProceso.mm-accordionized .nosotros-titulo {
    text-align: center;
    font-size: 20px !important;
  }

  /* =================================================================
     5. HOME — tratamientos en grid 2 columnas con etiqueta visible
        (mobile.js convierte cada flip-card en enlace directo)
     ================================================================= */
  .rowTratamientos { display: flex; flex-wrap: wrap; }
  .rowTratamientos > .col-md-12 { width: 100%; flex: 0 0 100%; }
  .rowTratamientos > .col-md-1 { display: none; }
  .rowTratamientos > .col-md-2 {
    width: 50%;
    flex: 0 0 50%;
    padding: 6px !important;
    margin: 0 !important;
  }
  /* tarjeta-enlace que monta mobile.js sobre la flip-card */
  .mm-treat-card {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(103, 67, 39, 0.10);
  }
  .mm-treat-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .mm-treat-card .mm-treat-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 12px 10px;
    background: linear-gradient(transparent, rgba(40, 25, 12, 0.78));
    color: #fff;
    font-family: 'Fahkwang', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.4px;
  }
  .mm-treat-card:active { transform: scale(0.97); }

  /* la flip-card original se oculta cuando mobile.js ya creó la tarjeta */
  .rowTratamientos .col-md-2.mm-carded .flip-container { display: none; }

  /* =================================================================
     6. "QUÉ ES?" — beneficios como tarjetas
     ================================================================= */
  .box-beneficios { padding: 0 14px; }
  .box-beneficios .col-md-4 { padding: 0 !important; }
  .b-beneficio {
    background: #fff;
    border: 1px solid #e9e0d5;
    border-radius: 14px;
    padding: 20px 18px !important;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(103, 67, 39, 0.05);
  }
  .b-beneficio h4 {
    font-family: 'Fahkwang', sans-serif;
    color: #674327;
    font-size: 16px;
    margin-bottom: 8px;
  }

  /* =================================================================
     7. TESTIMONIOS Y BLOG — aire y tamaño
     ================================================================= */
  .rowTestimonios { padding: 10px 8px !important; }
  .testimonialText { font-size: 14.5px !important; line-height: 1.6 !important; }
  .blogList h2 { font-size: 17px !important; line-height: 1.4 !important; }

  /* =================================================================
     8. FOOTER — compacto, centrado
     ================================================================= */
  footer { padding: 26px 0 18px !important; text-align: center; }
  footer .copy, footer .copyMobile { font-size: 12px; }
  #social-footer { float: none !important; display: flex; justify-content: center; gap: 18px; margin: 10px 0; }
}

/* Respeto a quien pide menos movimiento */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .mm-acc-body { transition: none !important; }
  .mm-acc-head::after { transition: none !important; }
}