/*
   Theme Name: Child Theme Hello
        Version: 1.0
   Author: Joaquín
   Author URI: www.joaquingarcia.com.ar
   Template: hello-elementor
*/

/* ============================================================
   Tempora — Animacion botanica hero (shop-2) v6
   Tecnica: SWAY solamente
   Requiere: flora-fix.js en runtime para doble-wrapper SVG
   Autor: ANT Digital — 2026-05-13
   ============================================================ */

.ct-hero-flora .ct-plant {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ctSway var(--sway-dur, 8s) ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
  will-change: transform;
}

@keyframes ctSway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2.5deg); }
}

.ct-hero-flora .ct-plant--1 { --sway-dur: 7s;   --sway-delay: -0.5s; }
.ct-hero-flora .ct-plant--2 { --sway-dur: 9s;   --sway-delay: -2s;   }
.ct-hero-flora .ct-plant--3 { --sway-dur: 6.5s; --sway-delay: -3.5s; }
.ct-hero-flora .ct-plant--4 { --sway-dur: 10s;  --sway-delay: -1.2s; }
.ct-hero-flora .ct-plant--5 { --sway-dur: 8.5s; --sway-delay: -4s;   }
.ct-hero-flora .ct-plant--6 { --sway-dur: 7.5s; --sway-delay: -2.8s; }

@media (prefers-reduced-motion: reduce) {
  .ct-hero-flora .ct-plant { animation: none; }
}


/* ============================================================
   POLEN — se mantiene intacto
   ============================================================ */

@keyframes ctFloat {
  0%   { transform: translateY(0)     translateX(0);    opacity: 0.75; }
  25%  { transform: translateY(-15px) translateX(6px);               }
  50%  { transform: translateY(-32px) translateX(-5px); opacity: 1;   }
  75%  { transform: translateY(-48px) translateX(4px);                }
  100% { transform: translateY(-65px) translateX(-3px); opacity: 0;   }
}

@keyframes ctPollenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ct-hero-flora .ct-pollen {
  opacity: 0;
  animation:
    ctPollenFadeIn 1.2s ease-out 3.2s forwards,
    ctFloat        14s ease-in-out 3.2s infinite;
}

.ct-hero-flora .ct-pollen--1 {
  animation-duration: 1.2s, 13s;
  animation-delay: 3.2s, 3.2s;
}

.ct-hero-flora .ct-pollen--2 {
  animation-duration: 1.2s, 17s;
  animation-delay: 3.5s, 3.5s;
}

.ct-hero-flora .ct-pollen--3 {
  animation-duration: 1.2s, 15s;
  animation-delay: 3.8s, 3.8s;
}

.ct-hero-flora .ct-pollen--4 {
  animation-duration: 1.2s, 19s;
  animation-delay: 4.1s, 4.1s;
}

.ct-hero-flora .ct-pollen--5 {
  animation-duration: 1.2s, 21s;
  animation-delay: 4.4s, 4.4s;
}


/* ============================================================
   CABEZA HERO — foto con sway brisa (shop-2)
   Imagen inyectada via head-photo.js
   Autor: ANT Digital — 2026-05-25
   ============================================================ */

.ct-head-photo {
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 30%;
  max-width: 520px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: ctHeadSway 9s ease-in-out infinite;
}

@keyframes ctHeadSway {
  0%, 100% { transform: rotate(-.8deg); }
  50%      { transform: rotate(.9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-head-photo { animation: none; }
}

/* ============================================================
   Modificaciones home v2 — Punto 1
   "DERMO CAPILAR" de outline/transparente a color solido blanco
   Selector: .at-text-ghost (usado en el titulo del hero)
   Afecta: desktop + mobile
   ============================================================ */

.at-text-ghost {
  color: #ffffff !important;
}

/* ============================================================
   Modificaciones home v2 — Punto 2
   Legibilidad del bloque de texto del hero /shop-2/.

   DECISIÓN FINAL DEL CLIENTE (2026-06-05):
   - Mobile (≤767px):  SIN ningún backdrop ni sombra detrás del texto.
   - Desktop (≥768px): backdrop SOLO detrás del párrafo .at-hero-desc,
                        NO detrás del título "CIENCIA DERMO CAPILAR".

   IMPLEMENTACIÓN:
   - .at-hero-content::before (overlay de todo el bloque) queda
     desactivado en AMBOS breakpoints via display:none en mobile y
     eliminando su efecto en desktop redirigiendo a .at-hero-desc.
   - En desktop, .at-hero-desc recibe text-shadow multicapa para
     legibilidad sin necesidad de un pseudo-elemento posicionado.
   - En mobile, sin ninguna sombra (el fondo oscuro del hero es
     suficiente contraste).
   ============================================================ */

/* Asegura que el contenedor de texto tenga position para el pseudo */
.at-hero-content {
  position: relative;
  z-index: 3;
}

/* Backdrop del bloque completo: DESACTIVADO en mobile */
@media (max-width: 767px) {
  .at-hero-content::before { display: none !important; }
}

/* Backdrop del bloque completo: DESACTIVADO también en desktop.
   Reemplazado por text-shadow específico en .at-hero-desc (párrafo). */
@media (min-width: 768px) {
  .at-hero-content::before { display: none !important; }
}

/* Párrafo hero desktop: text-shadow multicapa para legibilidad
   sin afectar el título "CIENCIA DERMO CAPILAR".
   Solo aplica en desktop (en mobile no hay sombra alguna). */
@media (min-width: 768px) {
  .at-hero-desc {
    text-shadow:
      0 0 12px rgba(0, 0, 0, 0.90),
      0 0 24px rgba(0, 0, 0, 0.70),
      0 2px 6px  rgba(0, 0, 0, 0.95),
      0 0 40px  rgba(0, 0, 0, 0.50) !important;
  }
}

/* ============================================================
   Modificaciones home v2 — Punto 3 (actualizado: glassmorphism)
   Botón secundario .at-btn-outline sobre imágenes con alto contraste.
   Anterior: borde lima + fondo lima 12% → texto lima sobre flores = ilegible.
   Nuevo: glassmorphism oscuro — fondo #303E48 70% + blur(6px) + borde
   blanco + texto blanco → legible sobre cualquier imagen de fondo.
   .at-btn-primary no se toca (es el CTA primario lima sólido).
   Alcance: cualquier .at-btn-outline del sitio (actualmente solo el
   botón "Tratamientos" en /shop-2/ y la CTA final dark de la PDP).
   ============================================================ */
.at-btn-outline {
  background-color: rgba(48, 62, 72, 0.70) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}

.at-btn-outline:hover {
  background-color: rgba(48, 62, 72, 0.88) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   Modificaciones home v2 — Punto 4
   Hero mobile: reducir espacio superior, compactar above the fold
   El hero desktop tiene padding: 160px 0 100px 0.
   En mobile reducimos el padding top para eliminar el aire y
   que el contenido quede above the fold en viewport de ~667px.
   Breakpoint Elementor mobile: max-width 767px
   Afecta: solo mobile
   ============================================================ */

@media (max-width: 767px) {
  .at-hero-section {
    padding: 32px 0 60px 0 !important;
    min-height: unset !important;
  }
}

/* Tablet (768-1024): el hero heredaba el padding-top 160px de desktop
   y dejaba demasiado aire. Se reduce. (post review 29-may) */
@media (min-width: 768px) and (max-width: 1024px) {
  .at-hero-section {
    padding: 80px 0 80px 0 !important;
  }
}

/* ============================================================
   Modificaciones home v2 — Punto 5
   Ocultar en mobile el carrusel de producto del hero y el
   badge "ISHRS Accredited" que lo acompana.
   Selectores: .at-hero-media y .at-cert-floating-card
   Afecta: solo mobile
   ============================================================ */

@media (max-width: 767px) {
  .at-hero-media,
  .at-cert-floating-card {
    display: none !important;
  }
  /* La foto de cabeza (ct-head-photo) se mostraba oculta.
     2026-06-06: se muestra en mobile INVERTIDA VERTICALMENTE (flip)
     para que la cabeza quede arriba (pegada al header) y las flores
     cuelguen hacia abajo. Ver bloque "Punto 5b" más abajo. */
}

/* ============================================================
   Modificaciones home v2 — Punto 5b
   FLIP VERTICAL + IMAGEN AL TOPE de la foto de cabeza en MÓVIL (/shop-2/)
   ------------------------------------------------------------
   DECISIÓN CLIENTE (2026-06-06 v2):
   La imagen volteada (cráneo arriba, flores abajo) debe llegar
   hasta el tope de la pantalla, DETRÁS del header. El header
   (.smart-header) es position:fixed con z-index:990 y fondo
   TRANSPARENTE — la imagen se ve a través de él.

   CAUSA DEL OFFSET ANTERIOR:
   El contenedor Elementor padre (.elementor-element-51043ba,
   clase e-parent) tiene padding-top:120px en BD, lo que empuja
   el .at-hero-section a top:120px del viewport. Se anula solo
   en .page-id-2280 (body class de /shop-2/) para no afectar
   otras páginas.

   IMPLEMENTACIÓN:
   - .page-id-2280 .elementor-element-51043ba → padding-top:0
     Esto sube el hero hasta top:0 del <main> (que a su vez
     empieza en top:0 del viewport porque el header fijo no
     ocupa espacio en flujo en el <main>).
   - .ct-head-photo: position:absolute (NO fixed — fixed causaría que
     la imagen quede pegada al viewport al scrollear, asomando sobre
     secciones de abajo). Con absolute + top:0, la imagen se ancla al
     .at-hero-section (position:relative) y se mueve con el scroll.
     Como el hero arranca en top:0 del viewport (padding-top del
     contenedor padre anulado), top:0 absoluto = borde superior de
     pantalla. El header fixed (z:990) se superpone automáticamente.
     scaleY(-1) con transform-origin:50% 50%.
   - .at-hero-section: padding-top suficiente para que el texto
     quede debajo de la imagen (~280px imagen + header 120px).
   - Scopeado estrictamente a .page-id-2280 en mobile ≤767px.
   - Sin cambios en desktop (≥768px).
   ============================================================ */

/* Anular el padding-top:120px del contenedor padre en /shop-2/ mobile */
@media (max-width: 767px) {
  .page-id-2280 .elementor-element-51043ba,
  .page-id-6886 .elementor-element-51043ba {
    padding-top: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Imagen: position:absolute, anclada a .at-hero-section (position:relative).
     El hero arranca en top:0 del viewport → top:0 absoluto = borde superior.
     El header fixed (z:990) se superpone automáticamente.

     PROBLEMA A — escalado en todo el rango móvil:
     Con width:80% max-width:320px la imagen quedaba chica en 480-767px.
     Solución: width:90vw max-width:600px → escala con el viewport en todo
     el rango. La imagen recortada es 1100×664 (ratio 0.6036:1), así que
     su altura renderizada = 90vw × 0.6036 ≈ 54.3vw (max ~362px a 600px).

     PROBLEMA B — zona transparente vacía (fondo de la foto):
     La imagen original cabeza_hero.webp (1100×1100) tiene los primeros
     296px completamente transparentes (fondo vacío sobre el cráneo). Con
     scaleY(-1) esa zona transparente quedaba en la parte inferior del render,
     mostrando el fondo oscuro del hero como "espacio muerto" entre flores y
     texto. Solución: versión recortada cabeza_hero_mobile.webp (1100×664,
     y=296-960 del original) → contenido limpio sin fondo vacío. Se inyecta
     via content:url() que reemplaza el src de <img> solo en mobile.
     El archivo original cabeza_hero.webp no se toca (lo usa desktop). */
  .page-id-2280 .ct-head-photo,
  .page-id-6886 .ct-head-photo {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) scaleY(-1) !important;
    transform-origin: 50% 50% !important;
    width: 90vw !important;
    max-width: 600px !important;
    height: auto !important;
    animation: none !important;
    z-index: 10 !important;
    /* Reemplaza la imagen original (1100×1100 con 296px vacíos arriba)
       por la versión recortada (1100×664, sin márgenes vacíos) */
    content: url('/wp-content/uploads/cabeza_hero_mobile.webp') !important;
  }
  /* padding-top del hero: la imagen recortada tiene ratio 664/1100 = 0.6036.
     A 90vw de ancho → altura = 90vw × 0.6036 ≈ 54.3vw.
     Se agrega 20px de margen → padding ≈ calc(54.3vw + 20px).
     Se clampa con min() para que no exceda cuando 90vw > 600px (max-width):
     a 667px de vw la imagen llega al max-width 600px → altura máx 362px. */
  .page-id-2280 .at-hero-section,
  .page-id-6886 .at-hero-section {
    padding-top: min(calc(54.3vw + 20px), 382px) !important;
  }
}

/* ============================================================
   Modificaciones home v2 — Punto 6b
   Seccion Doctora: mostrar foto en mobile
   El widget ya referencia la imagen (doctora.jpg, o el nuevo
   JESUS-1_00000000-1.jpg tras el swap). En mobile el grid pasa
   a columna unica y .sd-col-image tiene order:2, lo que la
   coloca debajo del texto: eso es correcto y visible.
   El problema potencial es que .sd-photo usa aspect-ratio 4/4.6
   sin altura explicita en mobile, lo que puede colapsar si la
   imagen no carga antes del paint. Forzamos dimensiones minimas
   y display block sobre la imagen para garantizar visibilidad.
   Afecta: mobile (max-width 767px)
   ============================================================ */

@media (max-width: 767px) {
  .sd-col-image {
    display: block !important;
    width: 100% !important;
  }

  .sd-photo {
    display: block !important;
    width: 100% !important;
    max-width: min(420px, calc(100vw - 32px)) !important;
    margin: 0 auto !important;
    /* Fallback de altura si aspect-ratio no aplica en browser viejo */
    min-height: 260px;
  }

  .sd-photo__frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px;
    overflow: hidden !important;
    background: #303e48;
  }

  .sd-photo__frame img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 260px;
  }
}

/* Encuadre de la foto doctora: la imagen es cuadrada (700x700) y el
   frame es mas alto -> con cover el default 50% 50% podia cortar la
   cabeza. Se fija el foco hacia el rostro. Desktop + mobile. */
.sd-photo__frame img,
.sd-photo img {
  object-position: 50% 22% !important;
}

/* ============================================================
   Modificaciones home v2 — Punto 7
   Fotos de productos siempre en color (quitar grayscale default)

   CAUSA REAL DEL B&N (verificado por ANT Digital 2026-05-29):
   El grid del catalogo "TIENDA ESPECIALIZADA" (filtro TODOS/SHAMPOO)
   lo genera el shortcode [tienda_dinamica_tempora] (snippet WP Code
   id=40 del otro dev). Su CSS inline aplica:
       .at-card-image-wrap img { filter: grayscale(100%); }
       .at-product-card:hover ... img { filter: grayscale(0%); }
   ESE es el blanco y negro que reclama el cliente (cards del grid).
   No se edita el snippet (territorio del otro dev); se hace override
   desde el child theme con !important (gana aunque el <style> inline
   del snippet vaya despues en el DOM, porque !important > normal).

   Los selectores .pd-image-frame img / .at-hero-slide del widget
   NO tenian grayscale por defecto (solo en :hover), por eso se
   cubren igual por robustez pero el fix critico es .at-card-image-wrap.
   Afecta: desktop + mobile (en mobile no hay hover -> critico)
   ============================================================ */

/* Grid catalogo dinamico (snippet 40) — FIX PRINCIPAL */
.at-card-image-wrap img {
  filter: none !important;
  -webkit-filter: none !important;
}

/* En hover mantener el zoom suave pero sin reintroducir grayscale */
.at-product-card:hover .at-card-image-wrap img {
  filter: none !important;
  -webkit-filter: none !important;
  transform: scale(1.05);
}

/* Producto destacado + carrusel hero (robustez, sin grayscale default) */
.pd-image-frame img,
.at-hero-slide,
.at-hero-media img {
  filter: none !important;
  -webkit-filter: none !important;
}

.pd-image-frame:hover img,
.at-hero-media:hover .at-hero-slide.active {
  filter: brightness(1.04) !important;
  -webkit-filter: brightness(1.04) !important;
}

/* ============================================================
   PDP postop-v2 — franja: igualar tamaño de la cita al de la
   descripcion del producto (15px). El plugin la define en 13.5px
   (.specialist-quote). Override 2-clases + !important.
   Aplicado VPS 2026-06-05, versionado aquí 2026-06-05.
   ============================================================ */
.tempora-pdp-v2-content .specialist-quote { font-size: 15px !important; }

/* ============================================================
   FIXES sincronizados desde VPS (estaban server-only,
   pisados por deploy de style.css — versionados aquí 2026-06-05).
   El fix [1] (at-hero-desc::before mobile) fue reemplazado por la
   regla más amplia en "Punto 2" arriba (.at-hero-content::before
   display:none en mobile), que cubre toda la sombra del hero.
   ============================================================ */

/* [2] Producto destacado mobile: imagen debajo del título.
       Reordena las celdas del .pd-main-grid usando display:contents
       en la columna de texto para aplanar el grid y usar order. */
@media (max-width: 767px) {
  .pd-main-grid { row-gap: 16px; }
  .pd-content-column { display: contents; }
  .pd-status-pill      { order: 1; }
  .pd-main-title       { order: 2; }
  .pd-visual-column    { order: 3; }
  .pd-main-description { order: 4; }
  .pd-metrics-row      { order: 5; }
  .pd-commerce-row     { order: 6; }
}

/* [3] Sección Doctora desktop: imagen llena el frame (sin aire) */
@media (min-width: 768px) {
  .sd-photo, .sd-photo__frame { height: 100% !important; }
  .sd-photo__frame { overflow: hidden !important; }
  .sd-photo__frame img,
  .sd-photo img { height: 100% !important; width: 100% !important; max-height: none !important; object-fit: cover !important; }
}

/* [4] Sección Doctora mobile: subir el sello de acreditación */
@media (max-width: 767px) {
  .sd-photo__chip { top: 8px !important; }
}

/* [5] PDP desktop: más aire header → contenido */
@media (min-width: 768px) {
  .tempora-pdp-v2-content .product-hero { padding-top: 110px !important; }
}

/* [6] PDP mobile: título no quede detrás del menú */
@media (max-width: 767px) {
  .tempora-pdp-v2-content .product-hero { padding-top: 112px !important; }
}

/* [7] PDP mobile: reducir gap franja → tabs */
@media (max-width: 767px) {
  .tempora-pdp-v2-content .product-hero { padding-bottom: 12px !important; }
  .tempora-pdp-v2-content .detail-tabs  { padding-top: 10px !important; }
}

/* [8] PDP franja: centrar verticalmente ícono + texto en specialist-note */
.tempora-pdp-v2-content .trust-specialist-strip .specialist-note { align-items: center !important; }

/* ============================================================
   PDP postop-v2 — disminuir espacio precio -> beneficios.
   .info-col es flex con gap:32px y hay un .short-desc VACIO que
   ocupa un slot -> el gap se duplica (64px). Se oculta solo si
   esta vacio (:empty) para no afectar productos con descripcion.
   VPS 2026-06-05.
   ============================================================ */
.tempora-pdp-v2-content .short-desc:empty { display: none !important; }

/* ============================================================
   Header Elementor — movil chico: que el carrito no caiga a 2da fila.
   El contenedor .elementor-element-0f3fc56 (logo+nav+carrito) tenia
   flex-wrap:wrap y los items se pasaban ~6px -> el carrito (.tdc-hct)
   envolvia. Se fuerza nowrap y se reduce el logo a 150px en <=480px
   para que todo entre en una fila. VPS 2026-06-05.
   ============================================================ */
@media (max-width: 480px) {
  .elementor-element-0f3fc56 { flex-wrap: nowrap !important; gap: 8px !important; align-items: center !important; }
  .elementor-element-ea35ff0 { flex: 0 1 auto !important; }
  .elementor-element-ea35ff0 img { width: 150px !important; max-width: 150px !important; }
}

/* ============================================================
   Flora sway hero /shop-2/ — OCULTAR EN MÓVIL
   ------------------------------------------------------------
   DECISIÓN CLIENTE (2026-06-06): tras varios intentos de extender
   la flora decorativa (.ct-hero-flora) a edge-to-edge en móvil,
   el cliente prefiere ocultarla directamente. Los botones CTA
   (EXPLORAR CATÁLOGO / TRATAMIENTOS) quedan limpios sobre el
   fondo dark del hero, sin briznas detrás.

   Historial de intentos anteriores (commits 8baec71, 6e4c12c):
   - 8baec71: extendió el contenedor a 100vw con left:50%+translateX
   - 6e4c12c: ajustó el viewBox del SVG en flora-fix.js (92 0 1321 280)
   Ambos revertidos funcionalmente por este display:none.
   flora-fix.js queda inerte en móvil (no causa daño).

   Scope: SOLO móvil ≤767px y SOLO /shop-2/ (.page-id-2280).
   Desktop: flora sway intacta.
   ============================================================ */
@media (max-width: 767px) {
  .page-id-2280 .ct-hero-flora,
  .page-id-6886 .ct-hero-flora {
    display: none !important;
  }
}

/* ============================================================
   Tanda espaciados móvil /shop-2/ — 3 secciones (2026-06-06)
   Reduce aire vertical en: Producto Destacado, Doctora, Stats.
   Solo móvil ≤767px. Desktop intacto.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SECCIÓN 1 — Producto Destacado / POST-OP BALANCE
   Causa del aire:
   - .pd-featured-showcase: padding-top/bottom 40px
   - .pd-main-grid (flex-column): gap 26px entre imagen y demás
   - .pd-status-pill: margin-bottom 16px
   - .pd-main-title: margin-bottom 18px
   - .pd-main-description: margin-bottom 24px
   - .pd-metrics-row: padding-top/bottom 18px + margin-bottom 24px
   Jerarquía visual mantenida, solo reducción de espacios.
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pd-featured-showcase {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .pd-main-grid {
    gap: 14px !important;
    row-gap: 14px !important;
  }
  .pd-status-pill {
    margin-bottom: 8px !important;
  }
  .pd-main-title {
    margin-bottom: 10px !important;
  }
  .pd-main-description {
    margin-bottom: 12px !important;
  }
  .pd-metrics-row {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   SECCIÓN 2 — Doctora (widget HTML sd-doctor-section)
   Causa del aire:
   - .sd-grid (CSS inline en widget): row-gap 20px entre las
     áreas grid "text-top" → "image" → "text-bottom"
   - .sd-lead: margin-bottom 22px (espacio entre párrafo de
     credenciales y el badge ISHRS + foto)
   Override desde child-theme con !important cubre el CSS
   inline del widget sin tocar BD.
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sd-grid {
    gap: 10px !important;
    row-gap: 10px !important;
  }
  .sd-lead {
    margin-bottom: 10px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   SECCIÓN 3 — Stats (Experiencia / Resultados / Satisfacción)
   Causa del aire:
   - .at-stats-container (grid): gap 60px entre los 3
     .at-stat-item → 189px de distancia entre items
   - .at-stats-section: padding-top/bottom 54px
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .at-stats-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .at-stats-container {
    gap: 28px !important;
    row-gap: 28px !important;
  }
}

/* ============================================================
   Sección Protocolo Post-Implante /shop-2/ — espaciado título→párrafo
   SOLO MÓVIL ≤767px (2026-06-06)
   ------------------------------------------------------------
   CAUSA DEL AIRE (3 fuentes acumuladas):
   1. h2.at-guia-title: margin-bottom ~20px (valor browser por defecto
      para h2: 0.83em × 24px)
   2. p.at-guia-desc: margin-top 16px (definido en CSS del snippet)
   3. El <p class="at-guia-desc"> abre con un <br> vacío en el HTML
      del snippet (BD) → agrega ~29px de línea en blanco antes del
      texto real. Se neutraliza con first-line o apuntando al <br>
      dentro del párrafo (line-height:0 en el br).
   Total de aire: ~65px entre fondo del título y primera línea de texto.

   FIX: recortar margin-bottom del título y margin-top del párrafo,
   y colapsar el <br> inicial para que no ocupe espacio visible.
   Atacable 100% desde child-theme con !important — sin tocar BD.
   Desktop: sin cambios (media query solo ≤767px).
   ============================================================ */
@media (max-width: 767px) {
  .at-guia-title {
    margin-bottom: 6px !important;
  }
  .at-guia-desc {
    margin-top: 0px !important;
  }
  /* Colapsar el <br> vacío al inicio del párrafo que agrega
     una línea en blanco antes del texto del snippet */
  .at-guia-desc br:first-child {
    display: none !important;
  }
}

/* ============================================================
   Hero /shop-2/ → Trust bar (marquee) — reducir aire en MÓVIL
   ------------------------------------------------------------
   CAUSA (2026-06-06): espacio acumulado de ~91px entre el botón
   TRATAMIENTOS (bottom:667) y el texto del marquee (top:758):

   1. .at-hero-section padding-bottom: 60px  ← principal
      (seteado en "Punto 4" como padding: 32px 0 60px 0)
   2. .elementor-element-51043ba padding-bottom: 15px
      (contenedor Elementor del hero widget, en BD)
   3. .at-marquee-container padding-top: 15px
      (CSS inline del widget HTML trust bar)

   FIX: sobreescribir desde child-theme los 3 valores.
   Scopeado a .page-id-2280 + max-width:767px.
   Desktop y padding-top del hero: sin cambios.
   ============================================================ */
@media (max-width: 767px) {
  /* [1] Hero: bajar padding-bottom de 60px a 20px */
  .page-id-2280 .at-hero-section,
  .page-id-6886 .at-hero-section {
    padding-bottom: 20px !important;
  }
  /* [2] Contenedor Elementor del hero widget: padding-bottom 15→0px */
  .page-id-2280 .elementor-element-51043ba,
  .page-id-6886 .elementor-element-51043ba {
    padding-bottom: 0px !important;
  }
  /* [3] Trust bar marquee: padding-top 15→6px */
  .page-id-2280 .at-marquee-container,
  .page-id-6886 .at-marquee-container {
    padding-top: 6px !important;
  }
}

/* ============================================================
   Auditoría de espaciado UX — /shop-2/ (2026-06-06)
   Re-medido con Playwright antes de aplicar. Items ya corregidos
   en commits previos se indican como "YA OK". Item #1 excluido.
   Escala de ritmo: secciones 32px mobile / 64px desktop;
   elementos internos 16-24px mobile / 24-32px desktop.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   MÓVIL ≤767px
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* #2 Stats — padding 32→24px (medido: 32px), gap 28→24px (medido: 28px) */
  .at-stats-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .at-stats-container {
    gap: 24px !important;
    row-gap: 24px !important;
  }

  /* #7 Card guía médica — padding 40→24px todos lados (medido: 40px) */
  .at-guia-card {
    padding: 24px !important;
  }

  /* #11 Catálogo store header — margin-bottom 32→24px (medido: 32px) */
  .at-store-header {
    margin-bottom: 24px !important;
  }

  /* #12 Hero descripción — margin-bottom 40→24px (medido: 40px) */
  .at-hero-desc {
    margin-bottom: 24px !important;
  }

  /* #14 Doctora eyebrow — margin-bottom 18→12px (medido: 18px, baja prioridad) */
  .sd-eyebrow {
    margin-bottom: 12px !important;
  }

  /* #8 Footer sección superior — padding-top 50→24px (medido: 50px) */
  [data-id="0141e2d"] {
    padding-top: 24px !important;
  }

  /* #13 Footer e-con-inner — padding-bottom 50→32px (medido: 50px) */
  [data-id="91485de"] .e-con-inner {
    padding-bottom: 32px !important;
  }

  /* #3 at-testimonials-section — h:0 en mobile (elemento ausente/oculto),
     se aplica igualmente por si aparece en otro contexto */
  .at-testimonials-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   DESKTOP ≥768px
   ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* #4 Hero — padding 160/100 → 120/72px (medido: 160px/100px) */
  .at-hero-section {
    padding-top: 120px !important;
    padding-bottom: 72px !important;
  }

  /* #5 Stats — padding 100/100 → 64/64px (medido: 100px/100px) */
  .at-stats-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* #6 at-testimonials-section — h:0 en desktop (ausente/oculto en /shop-2/),
     se aplica por si aparece en otro contexto */
  .at-testimonials-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* #9 Producto destacado — padding 60/60 → 40/40px (medido: 60px/60px) */
  .pd-featured-showcase {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* #10 Doctora — padding 60/60 → 40/40px (medido: 60px/60px) */
  .sd-doctor-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* #8 Footer sección superior — padding-top 50→24px (medido: 50px) */
  [data-id="0141e2d"] {
    padding-top: 24px !important;
  }

  /* #13 Footer e-con-inner — padding-bottom 50→32px (medido: 50px) */
  [data-id="91485de"] .e-con-inner {
    padding-bottom: 32px !important;
  }
}