/* FDE — ritmo vertical del sitio (29/09/2026)

   Tres medidas, iguales en todas las paginas:
     --fde-sec    entre una seccion y la siguiente (y antes del footer)
     --fde-head   entre el titulo de una seccion y su contenido
     --fde-first  entre el header y el primer bloque, en paginas sin portada
   Se cambian aca y aplican a todo el sitio.

   Por que existe este archivo:
   La separacion salia de muchos lugares que se pisaban entre si:
   - la clase global de Elementor "container_full_width" ponia 5rem arriba y,
     en tablet y celular, 5rem abajo; tambien en contenedores anidados y en
     el header (por eso el contenido arrancaba 80px mas abajo en tablet y
     celular, y la portada de la home lo compensaba con -80px),
   - clases locales con 4rem, 7rem, 8rem y hasta 15rem sin version mobile,
   - valores por breakpoint del panel de Elementor,
   - y paddings internos de los widgets HTML.
   Resultado medido antes de esto, en celular: huecos de 48 a 383px.

   Importante para editar en Elementor:
   el margen de ARRIBA/ABAJO de las secciones de primer nivel y de los
   bloques de titulo listados abajo ya no se toma del panel (estas reglas
   ganan por especificidad). El resto del espaciado interno sigue
   editandose en Elementor como siempre. */

:root { --fde-sec: 120px; --fde-head: 48px; --fde-first: 64px; }
@media (max-width: 1024px) { :root { --fde-sec: 80px; --fde-head: 40px; --fde-first: 48px; } }
@media (max-width: 767px)  { :root { --fde-sec: 72px; --fde-head: 40px; --fde-first: 40px; } }


/* ---------- 1. Entre secciones ---------- */

body .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"], [data-elementor-type="product"]) > .elementor-element.elementor-element {
  margin-block-end: 0;
}

body .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"], [data-elementor-type="product"]) > .elementor-element.elementor-element + .elementor-element {
  margin-block-start: var(--fde-sec);
}

body .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"], [data-elementor-type="product"]) > .elementor-element.elementor-element:last-child {
  margin-block-end: var(--fde-sec);
}

/* La clase global no tiene que separar contenedores anidados ni el header:
   la separacion la da la regla de arriba. */
body .elementor .e-con .container_full_width.container_full_width { margin-block: 0; }
body .elementor-location-header .container_full_width.container_full_width { margin-block-end: 0; }


/* ---------- 2. Header -> primer bloque ---------- */

/* Home y catalogo arrancan con una portada pegada al header. */
body:is(.home, .page-id-1119) .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .elementor-element.elementor-element:first-child {
  margin-block-start: 0;
}

body:not(.home):not(.page-id-1119) .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"], [data-elementor-type="product"]) > .elementor-element.elementor-element:first-child {
  margin-block-start: var(--fde-first);
}

/* Paginas de WooCommerce sin Elementor (Mi cuenta): antes quedaban 80px
   mas abajo por el margen del header; sin el, se pegaban. */
body.woocommerce-account .site-main {
  max-width: var(--fde-ancho, 1300px);
  margin-inline: auto;
  padding: var(--fde-first) var(--fde-gutter, 24px) var(--fde-sec);
  box-sizing: border-box;
}

/* Checkout: misma medida que el resto. */
body .co-page-wrapper { padding-top: var(--fde-first); }
body .co-layout { padding-bottom: var(--fde-sec); }


/* ---------- 3. Titulo -> contenido ---------- */

/* Explora por seccion y Destacados: el bloque de titulo tenia 4rem abajo y
   la seccion sumaba 60px de separacion propia (124px en celular). Va por
   margen y no por gap porque en escritorio estas secciones son display:block
   y el gap no aplica. */
body .elementor .elementor-element-33f730a.elementor-element-33f730a,
body .elementor .elementor-element-1267cdc.elementor-element-1267cdc { row-gap: 0; }
body .elementor .elementor-element-ff4ae9e.elementor-element-ff4ae9e,
body .elementor .elementor-element-dec6a18.elementor-element-dec6a18 { margin-block-end: var(--fde-head); }

/* Reseñas y Simple y Rapido. */
body .elementor .elementor-element-15f831dd h2.title { margin-bottom: var(--fde-head); }
body .elementor .elementor-element-3fff7fac > .e-con-inner > .e-con { margin-block-start: var(--fde-head); }


/* ---------- 4. Espacio interno que sobraba ---------- */

/* Los componentes de codigo traian su propio padding arriba y abajo, que se
   sumaba a la separacion entre secciones. */
.elementor .fde-brands-wrap, .elementor .fde-trust-wrap, .elementor .fde-needs-wrap,
.elementor .deals-section, .elementor .fde-cc, .elementor .fde-svc,
body #fde-receta-sec, .elementor .fde-wl-page__empty { padding-block: 0; }

/* Preguntas frecuentes de Promociones: 80px propios abajo, antes del footer. */
.elementor .fde-faq { margin-bottom: 0; }

/* Catalogo: padding inferior de la grilla, sumado al margen antes del footer. */
body #fde-catalog { padding-bottom: 0; }

/* Banners de la home: 8rem abajo en tablet y escritorio. */
body .elementor .elementor-element-2aaed9a.elementor-element-2aaed9a { margin-block-end: 0; }

/* Aprovechalos hoy: 15rem arriba en celular dentro de la seccion. */
@media (max-width: 600px) {
  body .elementor .e-167eadf0-61056bc.e-167eadf0-61056bc { margin-block-start: 0; }
}

/* Aprovechalos hoy: el titulo va montado sobre el borde de la caja y
   sobresale ~20px (35 en escritorio). Se suma para que la distancia
   visible hasta el titulo sea la misma que en el resto. */
body .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .elementor-element.elementor-element-157a039e.elementor-element-157a039e.elementor-element-157a039e {
  margin-block-start: calc(var(--fde-sec) + 20px);
}
@media (min-width: 1025px) {
  body .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .elementor-element.elementor-element-157a039e.elementor-element-157a039e.elementor-element-157a039e {
    margin-block-start: calc(var(--fde-sec) + 35px);
  }
}

/* Explora por seccion: la grilla de categorias tenia -20px arriba solo en
   tablet y se pegaba al titulo. */
body .elementor .elementor-element-33f730a .elementor-element-91763d2.elementor-element-91763d2 { margin-block-start: 0; }


/* ---------- 5. Desbordes ---------- */

/* Envianos tu receta: la grilla de una columna era "1fr", que no puede
   achicarse por debajo del contenido mas ancho; en celular medía 487px en
   una pantalla de 390 y el texto se cortaba a la derecha. */
@media (max-width: 1120px) {
  body #fde-receta-sec .rc-card { grid-template-columns: minmax(0, 1fr); }
}

/* Envianos tu receta en celular: el papel de fondo arrancaba 46px afuera de
   la tarjeta y quedaba cortado contra el borde, y en la linea de "datos
   protegidos" el icono quedaba pegado a la izquierda y el texto centrado. */
@media (max-width: 540px) {
  body #fde-receta-sec .rc-paper { left: 8px; width: 170px; }
  body #fde-receta-sec .rc-note { display: flex; justify-content: center; align-items: flex-start; gap: 8px; text-align: left; }
  body #fde-receta-sec .rc-note > * { width: auto; flex: 0 1 auto; }
}

/* ---------- 5. Footer al fondo en paginas cortas ---------- */

/* Favoritos vacio, 404, carrito vacio: el contenido no llenaba la pantalla y
   quedaba una franja blanca debajo del footer. El body pasa a columna y el
   footer se empuja al final. Los hijos directos mantienen su ancho (sin esto,
   un bloque centrado con margin auto se achicaria al ancho de su contenido). */
body:not(.elementor-editor-active) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body:not(.elementor-editor-active) > :not(script):not(style):not([style*="position"]) { flex-shrink: 0; }
body:not(.elementor-editor-active) > .site-main,
body:not(.elementor-editor-active) > main { width: 100%; }
body:not(.elementor-editor-active) > .elementor-location-footer { margin-top: auto; }


/* Campos sin zoom en celulares (29/09/2026).
   Safari de iOS agranda la pagina al enfocar un campo con letra menor a
   16px (el buscador del catalogo tenia 15px, el orden 13px). En pantallas
   tactiles todos los campos usan 16px. No se bloquea el zoom con los dedos. */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  html body input:not([type]),
  html body input[type=text], html body input[type=search], html body input[type=email],
  html body input[type=tel], html body input[type=number], html body input[type=password],
  html body input[type=url], html body input[type=date],
  html body select, html body textarea {
    font-size: 16px !important;
  }
}


/* Titulos de seccion (29/09/2026).
   Una sola escala en todo el sitio, la de los titulos de Elementor:
   24px en celulares y 35px desde 768px, Nunito 700. Varios titulos armados
   a mano no la seguian (promos bancarias y receta con 34px fijos, tambien
   en celulares; sucursal 26px; coberturas 30px; promociones 26-28px). */
html body .elementor-element-6ac6f3a5 h2,
html body #fde-receta-sec h2.rc-title,
html body .fde-suc .fde-suc__title,
html body .elementor .fde-cobp__h2,
html body .fde-promosec-h2,
html body .fde-howto-h2,
html body .fde-faq-h2 {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em !important;
}
@media (min-width: 768px) {
  html body .elementor-element-6ac6f3a5 h2,
  html body #fde-receta-sec h2.rc-title,
  html body .fde-suc .fde-suc__title,
  html body .elementor .fde-cobp__h2,
  html body .fde-promosec-h2,
  html body .fde-howto-h2,
  html body .fde-faq-h2 {
    font-size: 35px !important;
    line-height: 1.15;
  }
}

/* Nombres de las categorias elegidas: en celulares eran mas grandes (25px)
   que el titulo de la seccion. */
@media (max-width: 767px) {
  html body .elementor-10 :is([data-id="1dcfd2a"], [data-id="49179bd"], [data-id="3a58a29"], [data-id="4982980"], [data-id="3c010a2"], [data-id="9b5f04f"]) {
    font-size: 20px;
  }
}

/* Sin zoom por doble toque (29/09/2026): al tocar seguido una flecha o el
   + / - de cantidad, Safari y Chrome del celular lo tomaban como doble toque
   y agrandaban la pagina. "manipulation" solo desactiva eso: el zoom con
   dos dedos sigue funcionando. */
html, body,
button, a, input, select, textarea, label, summary,
[role="button"], .elementor-swiper-button, .swiper-pagination-bullet {
  touch-action: manipulation;
}