/* FDE — botones, puntos de paginacion y verdes (29/09/2026)

   Criterio (skill UI/UX, estilo "Accesible y confiable" para salud):
   - hover = cambio de color sutil, sin saltos (nada de subir 2px ni
     agrandar 5-8%: eso mueve el contenido y se siente inestable),
   - presionar = achicar apenas (scale .98 / .94 en iconos),
   - transiciones de 200ms con curva estandar,
   - anillo de foco visible para teclado,
   - si el usuario pidio reducir animaciones, no hay movimiento.

   Tres familias:
     PRINCIPAL   verde lleno  -> hover verde 600, presionado verde 700
     SECUNDARIO  verde suave  -> hover se llena de verde
                 contorno     -> hover fondo verde suave + borde verde
     ICONO       circulo blanco -> hover borde y icono verdes

   Los selectores van dentro de :is() junto a un ID inexistente: eso le da
   a la regla especificidad de ID y gana a los estilos originales (algunos
   con ID, otros de Elementor) sin usar !important. */

:root {
  --fde-green: #4caf50;
  --fde-green-600: #43a047;
  --fde-green-700: #388e3c;
  --fde-green-100: #c8e6c9;
  --fde-green-50: #e8f5e9;
  --fde-ink: #1a1a2e;
  --fde-line: #d8d8dc;
  --fde-ease: cubic-bezier(.4, 0, .2, 1);
  --fde-dur: 200ms;
}


/* ---------- Transicion comun ---------- */

html body :is(
  .fde-h-search-submit, .fcat__btn, .fde-slide-btn, #fde-receta-sec .rc-cta,
  .fde-wl-page__cta, .s02-cta-cart, .woocommerce-form-login__submit,
  .elementor-widget-button .elementor-button,
  .fde-pc__add, .fde-add, .fde-needs-helpcta, .s02-cta-wa, .s02-icon-btn, .fde-chip,
  .fde-arrow, .fde-cc-nav, .fde-prev, .fde-next, .promo-arrow, .s06-arrow,
  .fdehc-btn, .fde-wl-head__btn, .fde-h-mobile-btn, .fde-modal__close,
  .fde-h-drawer-close, .fdehc-so-back, .fde-fav, .s02-fav,
  .elementor-widget-loop-carousel .elementor-swiper-button,
  #fde-no-existe
) {
  cursor: pointer;
  transition:
    background-color var(--fde-dur) var(--fde-ease),
    color var(--fde-dur) var(--fde-ease),
    border-color var(--fde-dur) var(--fde-ease),
    box-shadow var(--fde-dur) var(--fde-ease),
    scale 120ms var(--fde-ease);
}


/* ---------- PRINCIPAL ---------- */

/* Dos botones que salian con el estilo por defecto de WooCommerce: el de
   la ficha de producto en violeta (#7f54b3) y el de Mi cuenta en gris. */
html body :is(.s02-cta-cart, .woocommerce-form-login__submit, #fde-no-existe) {
  background-color: var(--fde-green);
  color: #fff;
  border: 0;
  border-radius: 999px;
}
html body :is(.woocommerce-form-login__submit, #fde-no-existe) {
  padding: 12px 28px;
  font-weight: 700;
}

html body :is(
  .fde-h-search-submit:hover, .fcat__btn:hover, .fde-slide-btn:hover, #fde-receta-sec .rc-cta:hover,
  .fde-wl-page__cta:hover, .s02-cta-cart:hover, .woocommerce-form-login__submit:hover,
  .elementor-widget-button:not(.cta-whatsapp) .elementor-button:hover,
  .elementor-10 .elementor-element.elementor-element-36ee0bcf .elementor-button:hover,
  .elementor-10 .elementor-element.elementor-element-63ff8b0d .elementor-button:hover,
  #fde-no-existe
) {
  background-color: var(--fde-green-600);
  color: #fff;
  transform: none;
}

html body :is(
  .fde-h-search-submit:active, .fcat__btn:active, .fde-slide-btn:active, #fde-receta-sec .rc-cta:active,
  .fde-wl-page__cta:active, .s02-cta-cart:active, .woocommerce-form-login__submit:active,
  .elementor-widget-button:not(.cta-whatsapp) .elementor-button:active,
  #fde-no-existe
) {
  background-color: var(--fde-green-700);
  scale: .98;
}

/* La flecha del boton del slider se corria 3px al pasar el mouse. */
html body :is(.fde-slide-btn:hover svg, #fde-no-existe) { transform: none; }


/* ---------- SECUNDARIO ---------- */

/* Verde suave: al pasar el mouse se llena (patron de "Agregar al carrito"). */
html body :is(.fde-pc__add:hover, .fde-add:hover, .fde-needs-helpcta:hover, #fde-no-existe) {
  background-color: var(--fde-green);
  border-color: var(--fde-green);
  color: #fff;
  transform: none;
}

/* Contorno: al pasar el mouse toma fondo verde suave y borde verde. */
html body :is(.s02-cta-wa, .s02-icon-btn, .cta-whatsapp .elementor-button, #fde-no-existe) {
  border: 1px solid var(--fde-line);
}
html body :is(.cta-whatsapp .elementor-button, #fde-no-existe) {
  background-color: #fff;
  color: var(--fde-green-600);
  border-color: var(--fde-green);
}
html body :is(
  .s02-cta-wa:hover, .s02-icon-btn:hover, .cta-whatsapp .elementor-button:hover,
  .fde-chip:not(.active):hover, #fde-no-existe
) {
  background-color: var(--fde-green-50);
  border-color: var(--fde-green);
  color: var(--fde-green-600);
  transform: none;
}

html body :is(
  .fde-pc__add:active, .fde-add:active, .fde-needs-helpcta:active,
  .s02-cta-wa:active, .s02-icon-btn:active, .cta-whatsapp .elementor-button:active, .fde-chip:active,
  #fde-no-existe
) {
  scale: .98;
}


/* ---------- ICONO (circulos) ---------- */

/* Flechas de carruseles: mismo circulo en todas (44px, el minimo tactil). */
html body :is(
  .fde-arrow, .fde-cc-nav, .fde-prev, .fde-next, .promo-arrow, .s06-arrow,
  .elementor-widget-loop-carousel .elementor-swiper-button, #fde-no-existe
) {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid var(--fde-line);
  color: var(--fde-ink);
}

html body :is(
  .fde-arrow:hover, .fde-cc-nav:hover, .fde-prev:hover, .fde-next:hover, .promo-arrow:hover, .s06-arrow:hover,
  .elementor-widget-loop-carousel .elementor-swiper-button:hover,
  .fdehc-btn:hover, .fde-wl-head__btn:hover, .fde-h-mobile-btn:hover, .fde-modal__close:hover,
  .fde-h-drawer-close:hover, .fdehc-so-back:hover, .fde-fav:hover, .s02-fav:hover,
  #fde-no-existe
) {
  background-color: #fff;
  border-color: var(--fde-green);
  color: var(--fde-green-600);
  box-shadow: var(--fde-sh-btn-h, 0 4px 14px rgba(26, 26, 46, .22));
}

/* Las flechas del hero se agrandaban 5% y el corazon 8%: sin saltos. Las
   que estan centradas con translateY lo conservan. */
html body :is(.fde-arrow:hover, .s06-arrow:hover, #fde-no-existe) { transform: translateY(-50%); }
html body :is(.fde-fav:hover, .fde-pc .fde-fav:hover, .s02-fav:hover, #fde-no-existe) { transform: none; }

/* El corazon mantiene el rojo al pasar el mouse: es el color de "favorito". */
html body :is(.fde-fav:hover, .fde-pc .fde-fav:hover, .s02-fav:hover, #fde-no-existe) {
  color: var(--pc-danger, #e05b5b);
  border-color: var(--pc-danger, #e05b5b);
}

html body :is(
  .fde-arrow:active, .fde-cc-nav:active, .fde-prev:active, .fde-next:active, .promo-arrow:active, .s06-arrow:active,
  .elementor-widget-loop-carousel .elementor-swiper-button:active,
  .fdehc-btn:active, .fde-wl-head__btn:active, .fde-h-mobile-btn:active, .fde-modal__close:active,
  .fde-h-drawer-close:active, .fdehc-so-back:active, .fde-fav:active, .s02-fav:active,
  #fde-no-existe
) {
  scale: .94;
}


/* ---------- Foco de teclado ---------- */

html body :is(
  .fde-h-search-submit, .fcat__btn, .fde-slide-btn, #fde-receta-sec .rc-cta,
  .fde-wl-page__cta, .s02-cta-cart, .woocommerce-form-login__submit,
  .elementor-widget-button .elementor-button,
  .fde-pc__add, .fde-add, .fde-needs-helpcta, .s02-cta-wa, .s02-icon-btn, .fde-chip,
  .fde-arrow, .fde-cc-nav, .fde-prev, .fde-next, .promo-arrow, .s06-arrow,
  .fdehc-btn, .fde-wl-head__btn, .fde-h-mobile-btn, .fde-modal__close,
  .fde-h-drawer-close, .fdehc-so-back, .fde-fav, .s02-fav,
  .elementor-widget-loop-carousel .elementor-swiper-button,
  .fde-dot, .promo-dot, .swiper-pagination-bullet,
  #fde-no-existe
):focus-visible {
  outline: 3px solid rgba(76, 175, 80, .45);
  outline-offset: 2px;
}


/* ---------- Puntos de paginacion ---------- */

/* Habia tres diseños (gris con pastilla verde, gris con punto grande, todos
   verde claro). Queda uno: puntos de 8px verde suave y el activo como
   pastilla verde de 24px. */
html body :is(
  #fde-hero-pagination .fde-dot, .fde-dots .fde-dot, .promo-dots .promo-dot,
  .elementor-widget-loop-carousel .swiper-pagination-bullet, #fde-no-existe
) {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fde-green-100);
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: width var(--fde-dur) var(--fde-ease), background-color var(--fde-dur) var(--fde-ease);
}

html body :is(
  #fde-hero-pagination .fde-dot.active, .fde-dots .fde-dot.active, .promo-dots .promo-dot[aria-current="true"],
  .elementor-widget-loop-carousel .swiper-pagination-bullet-active, #fde-no-existe
) {
  width: 24px;
  background: var(--fde-green);
}

html body :is(
  #fde-hero-pagination .fde-dot:not(.active):hover, .fde-dots .fde-dot:not(.active):hover,
  .promo-dots .promo-dot:not([aria-current="true"]):hover,
  .elementor-widget-loop-carousel .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover,
  #fde-no-existe
) {
  background: #a5d6a7;
}


/* ---------- Subtitulos verdes ---------- */

/* "Explora por seccion", "Destacados", "Coberturas" y "Simple y Rapido" ya
   usaban #4caf50; "Lo que dicen..." tenia otro verde (#46c85c). */


/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html body :is(
    .fde-h-search-submit, .fcat__btn, .fde-slide-btn, #fde-receta-sec .rc-cta,
    .fde-wl-page__cta, .s02-cta-cart, .woocommerce-form-login__submit,
    .elementor-widget-button .elementor-button,
    .fde-pc__add, .fde-add, .fde-needs-helpcta, .s02-cta-wa, .s02-icon-btn, .fde-chip,
    .fde-arrow, .fde-cc-nav, .fde-prev, .fde-next, .promo-arrow, .s06-arrow,
    .fdehc-btn, .fde-wl-head__btn, .fde-h-mobile-btn, .fde-modal__close,
    .fde-h-drawer-close, .fdehc-so-back, .fde-fav, .s02-fav,
    .elementor-widget-loop-carousel .elementor-swiper-button,
    .fde-dot, .promo-dot, .swiper-pagination-bullet,
    #fde-no-existe
  ) {
    transition: none;
    scale: none;
  }
}


/* ---------- Textos verdes accesibles (29/09/2026) ---------- */

/* #4caf50 y #43a047 sobre blanco dan 2,8:1 y 3,3:1: no alcanzan el 4,5:1
   que pide WCAG AA para texto. #2e7d32 da 5,1:1 sobre blanco y 4,6:1 sobre
   el verde claro de fondo (#e8f5e9). Los fondos y botones siguen en #4caf50. */
:root { --fde-green-text: #2e7d32; }

html body .elementor h2.title-2 { color: var(--fde-green-text); }

html body :is(
  .fde-pc__cat, .fde-h-drawer-phone-label, .rc-eyebrow, .fde-promosec-eb, .fde-howto-eb,
  .fde-step-num, .fde-faq-eb, .fde-eyebrow, .fde-brand-cta, .fde-needtile-cta,
  .s02-cat-badge, .s02-stock, .fde-rv__avatar, .fde-card-num,
  .fde-pc__add, .fde-add, .fde-needs-helpcta, .cta-whatsapp .elementor-button,
  h2.card-link, .step-number, .step-number p,
  #fde-no-existe
) {
  color: var(--fde-green-text);
}

/* En los hovers de botones con fondo verde claro el texto tambien va en el
   tono accesible. */
html body :is(
  .s02-cta-wa:hover, .s02-icon-btn:hover, .cta-whatsapp .elementor-button:hover,
  .fde-chip:not(.active):hover, #fde-no-existe
) {
  color: var(--fde-green-text);
}


/* ---------- Desbordes horizontales ---------- */

/* Reseñas: el clip-path recorta solo lo visual; las diapositivas clonadas
   seguian ocupando lugar y la pagina medía 3492px de ancho en escritorio y
   1988px en celular. El contenedor del widget recorta de verdad (clip no
   crea barra de scroll) y deja el aire justo para la sombra. */
body .elementor .elementor-widget-loop-carousel.elementor-widget-loop-carousel:has(.elementor-487) {
  overflow-x: clip;
}

/* Catalogo: entre 768 y 960px la barra (buscador, filtros, orden y cantidad
   de resultados) necesitaba 929px en una sola fila. La cantidad pasa a una
   segunda linea; el boton de filtros y el ancho del buscador no cambian. */
@media (min-width: 768px) and (max-width: 960px) {
  body #fde-bar-top { flex-wrap: wrap; row-gap: 10px; }
  body #fde-bar-top #fde-result-count { flex: 1 0 100%; }
}

/* La regla de arriba le gana al hover por orden: los botones que se llenan
   de verde vuelven a tener texto blanco al pasar el mouse. */
html body :is(.fde-pc__add:hover, .fde-add:hover, .fde-needs-helpcta:hover, #fde-no-existe) { color: #fff; }

/* Casos que tenian mas especificidad o no estaban en la lista. */
html body :is(#fde-receta-sec .rc-eyebrow, .fde-brands-allcta, .elementor-element-91763d2 a.e-con h2, .promo-header > span, #fde-no-existe) { color: var(--fde-green-text); }


/* toques-30092026 */
/* Toque inmediato: sin esto el navegador del celular espera a ver si es un
   doble toque para hacer zoom y, si se toca rapido, el primer toque se pierde
   ("hay que tocar varias veces"). No cambia el scroll ni el zoom con dos dedos. */
html body :is(a, button, input, select, textarea, label, summary, [role="button"], .swiper-pagination-bullet) {
  touch-action: manipulation;
}

/* Puntos de los carruseles: se ven de 8px, pero el area que toma el dedo es
   mas grande (36px de alto y hasta la mitad del espacio con el vecino). Antes
   era facil tocar entre dos puntos, o el de al lado. */
html body :is(#fde-hero-pagination .fde-dot, .fde-dots .fde-dot, .elementor-widget-loop-carousel .swiper-pagination-bullet) {
  position: relative;
}
html body :is(#fde-hero-pagination .fde-dot, .fde-dots .fde-dot, .elementor-widget-loop-carousel .swiper-pagination-bullet)::after {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -4px;
  right: -4px;
}

/* "Agregar al carrito" sin el "+": con el icono el texto se partia en dos
   lineas en las tarjetas angostas. */
html body :is(.fde-pc__add, .fde-add) > svg { display: none; }
html body :is(.fde-pc__add, .fde-add) { white-space: nowrap; }

/* resaltado-puntos-01102026 */
/* En el carrusel de reseñas (Swiper) el toque lo escucha la fila de puntos
   entera, y el celular pintaba su resaltado de toque sobre toda la fila: se
   veia una franja tapando los puntos. Sin resaltado en puntos ni flechas; el
   punto que se activa ya muestra que se toco. */
html body :is(.swiper-pagination, .swiper-pagination-bullet, .fde-dots, .fde-dot, #fde-hero-pagination, .promo-dots, .promo-dot, .fde-navrow, .elementor-swiper-button) {
  -webkit-tap-highlight-color: transparent;
}

/* Puntos de promos: su area tactil era de 44x44 centrada y se pisaba con
   la del vecino (se tocaba el de al lado). Igual que los demas puntos. */
html body .promo-dots .promo-dot { position: relative; }
html body .promo-dots .promo-dot::after {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -4px;
  right: -4px;
  width: auto;
  height: auto;
  transform: none;
}