/* INSUCONTROL — paleta y ajustes. Se carga ÚLTIMO.
   Colores tomados de la referencia: #0f2744 primario, #1a3a5c medio, #0f35a6 acento. */

:root, body, .shopify-section, .color-background-1, .color-background-2,
.color-accent-1, .color-accent-2, .color-scheme-1, .color-scheme-2, .gradient {
  --color-base-accent-1: 15, 39, 68 !important;
  --color-base-accent-2: 10, 22, 40 !important;
  --accent-color: 15, 39, 68 !important;
  --accent-2-color: 10, 22, 40 !important;
  --color-link: 3, 105, 161 !important;
  --text-accent-color: 15, 39, 68 !important;
  --color-badge-background: 15, 39, 68 !important;
  --ins-navy: #0f2744; --ins-deep: #0a1628; --ins-mid: #1a3a5c;
  --ins-elec: #0f35a6; --ins-grn: #22c55e; --ins-tint: #f0f4f8;
}

/* Cualquier resto de bordó del esqueleto -> azul marino */
[style*="139, 34, 51"], [style*="139,34,51"],
[style*="#8B2233"], [style*="#8b2233"] { color: #0f2744 !important; }

/* Las animaciones de aparición dependían de JS que no viaja: todo visible */
.scroll-trigger, .animate--hidden, .scroll-trigger.animate--slide-in,
[class*="animate--"], [data-cascade],
.deos-journey__week, [data-lp-fade], [data-lp-reveal], [data-aos] {
  opacity: 1 !important; transform: none !important;
  visibility: visible !important; animation: none !important; filter: none !important;
}

.header__heading-logo, .header__heading-logo-wrapper img {
  max-height: 46px !important; width: auto !important; object-fit: contain !important;
}

.main-product-atc, .atc-button, .product-form__submit,
button[name="add"], .button--full-width {
  background: #0f2744 !important; color: #fff !important; border-color: #0f2744 !important;
}
.main-product-atc:hover, .atc-button:hover, .product-form__submit:hover { background: #0a1628 !important; }
a, .link, .deos-faq__question { color: inherit; }

/* ---- Galería limpia (la arma insucontrol.js) ---- */
.product__media-list, .product-media-modal, .thumbnail-list,
.product__media-toggle, .product__media-icon { display: none !important; }
.ins-gallery { display: flex; flex-direction: column; gap: 14px; }
.ins-main { width: 100%; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden;
  background: #f0f4f8; box-shadow: 0 6px 24px rgba(15,39,68,.12); }
.ins-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ins-thumb { width: 74px; height: 74px; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #f0f4f8; flex: 0 0 auto; transition: border-color .15s; }
.ins-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-thumb.is-active { border-color: #0f2744; }
@media (min-width: 750px) { .ins-thumb { width: 84px; height: 84px; } }

.shopify-section:empty { display: none !important; }
.shopify-payment-button, .shopify-payment-button__button,
[data-shopify="payment-button"], .shopify-digital-wallet,
.payment-badges-block, .list-payment { display: none !important; }

/* ---- Aviso de seguridad (suplemento, no reemplaza tratamiento) ---- */
.ins-safety { margin: 14px 0 4px; padding: 12px 14px; border-left: 4px solid #0f2744;
  background: #f0f4f8; border-radius: 8px; font-size: 13.5px; line-height: 1.55; color: #374151; }
.ins-safety b { color: #0f2744; }

/* ---- Bloque "cómo funciona el pedido" (3 pasos) ---- */
.ins-how { background: linear-gradient(135deg,#0f2744 0%,#1a3a5c 100%); color: #fff; padding: 62px 20px; }
.ins-how__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.ins-how__h { font-size: clamp(26px,4vw,40px); font-weight: 700; margin: 0 0 12px; }
.ins-how__sub { opacity: .88; max-width: 720px; margin: 0 auto 40px; line-height: 1.6; }
.ins-how__steps { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ins-how__steps { grid-template-columns: repeat(3,1fr); } }
.ins-how__step { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 26px 20px; }
.ins-how__n { width: 46px; height: 46px; border-radius: 50%; background: #22c55e;
  color: #0a1628; font-weight: 700; font-size: 20px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 14px; }
.ins-how__st { font-weight: 700; font-size: 19px; margin-bottom: 7px; }
.ins-how__sx { opacity: .85; font-size: 15px; line-height: 1.55; }
.ins-how__note { margin-top: 30px; font-size: 14px; opacity: .9;
  background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4);
  border-radius: 10px; padding: 13px 16px; display: inline-block; }

/* ---- Testimonio destacado ---- */
.ins-story { padding: 62px 20px; background: #f0f4f8; }
.ins-story__inner { max-width: 940px; margin: 0 auto; text-align: center; }
.ins-story__eyebrow { letter-spacing: .18em; font-size: 12.5px; font-weight: 700;
  color: #0369a1; margin-bottom: 12px; }
.ins-story__h { font-size: clamp(26px,4vw,38px); font-weight: 700; color: #0f2744; margin: 0 0 14px; }
.ins-story__sub { color: #4b5563; line-height: 1.65; max-width: 700px; margin: 0 auto 26px; }
.ins-story__quote { background: #fff; border-radius: 18px; padding: 30px 26px;
  box-shadow: 0 8px 30px rgba(15,39,68,.10); font-size: 18px; line-height: 1.6; color: #1f2937; }
.ins-story__who { margin-top: 16px; font-weight: 700; color: #0f2744; }
.ins-story__foot { margin-top: 16px; font-size: 13px; color: #6b7280; }

/* ---- Cobertura ---- */
.ins-cov { padding: 46px 20px; background: #fff; text-align: center; }
.ins-cov__h { font-size: 22px; font-weight: 700; color: #0f2744; margin-bottom: 16px; }
.ins-cov__list { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  max-width: 900px; margin: 0 auto; }
.ins-cov__i { background: #f0f4f8; color: #0f2744; border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 600; }

/* La fórmula es de UN solo ingrediente: se centra la grilla de 3 tarjetas */
@media (min-width: 768px) {
  .deos-ingredients__list { grid-template-columns: repeat(3,1fr); max-width: 1040px;
    margin-left: auto; margin-right: auto; }
}

/* ================= AJUSTES DE LA REVISIÓN VISUAL ================= */

/* -- Jerarquía: el azul es la marca, el verde es la acción. Sólo los botones que
      llevan a comprar son verdes; el resto del cromo queda azul marino. -- */
.atc-button, .product-form__submit, .main-product-atc, .sticky-atc__add_button,
button[name="add"], .deos-stats__cta, .deos-journey__cta,
.deos-risk-free__cta, .deos-text-reviews__cta, .ins-cta-buy {
  background: #16a34a !important; border-color: #16a34a !important;
  color: #fff !important; font-weight: 700 !important;
}
.atc-button:hover, .product-form__submit:hover, .main-product-atc:hover,
.sticky-atc__add_button:hover, .deos-stats__cta:hover,
.deos-journey__cta:hover, .deos-risk-free__cta:hover,
.deos-text-reviews__cta:hover { background: #15803d !important; border-color: #15803d !important; }

/* Los botones del tema NO se pintan con su propio background: el relleno lo dibuja
   ::after (verificado: getComputedStyle(btn,'::after').backgroundColor = azul marino,
   tapando el verde). Hay que apagar el pseudo o el botón se ve azul igual. */
.atc-button::after, .product-form__submit::after, .main-product-atc::after,
.sticky-atc__add_button::after, button[name="add"]::after {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
}
.atc-button::before, .product-form__submit::before, .main-product-atc::before,
.sticky-atc__add_button::before { box-shadow: none !important; }

/* -- La barra pegajosa se anclaba a mitad de página y tapaba el hero -- */
sticky-atc, .sticky-atc {
  position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important;
  z-index: 60; box-shadow: 0 -4px 18px rgba(15,39,68,.16);
  background: #fff !important; border-top: 1px solid #e5eaf0;
}
/* El <sticky-atc> del tema es un custom element cuyo JS no viaja en un export
   estático: customElements.get('sticky-atc') era undefined y la barra quedaba
   trasladada 88 px hacia abajo para siempre. La manejamos nosotros (insucontrol.js). */
sticky-atc, .sticky-atc { transform: translateY(115%) !important;
  transition: transform .22s ease !important; }
sticky-atc.ins-on, .sticky-atc.ins-on { transform: translateY(0) !important; }
.sticky-atc__title { font-size: 15px; line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
body { padding-bottom: 92px; }
@media (min-width: 990px) { body { padding-bottom: 84px; } }

/* En mobile la barra medía 309 px de alto sobre un viewport de 844: el título
   ocupaba seis renglones. Se deja precio + botón, que es lo único accionable. */
@media (max-width: 749px) {
  .sticky-atc__title, .sticky-atc .rating-stars-and-text { display: none !important; }
  .sticky-atc-container { display: flex !important; align-items: center; gap: 12px;
    padding: 10px 14px !important; }
  .sticky-atc__left { flex: 0 0 auto; }
  /* el wrapper del botón venía con flex:0 0 auto y ancho fijo de 308 px: sumado a los
     96 px del precio se pasaba 14 px del viewport y el texto quedaba cortado */
  .sticky-atc__right, .sticky-atc__button, .sticky-atc form {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
    margin: 0 !important; }
  .sticky-atc__add_button { width: 100% !important; padding: 13px 10px !important;
    font-size: 14px !important; line-height: 1.2 !important; white-space: nowrap; }
  body { padding-bottom: 76px; }
}
/* el contenedor se desbordaba a la derecha y cortaba el texto del botón */
.sticky-atc-container { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.sticky-atc__right, .sticky-atc form, .sticky-atc__left { min-width: 0; }
.sticky-atc__price { white-space: nowrap; font-weight: 700; }

/* -- La galería la rearma insucontrol.js y deduplica por URL: 4 fotos. La paginación
      original seguía pintando 16 puntitos (las entradas repetidas del media list). -- */
.slider__dots, .slider-buttons--dots, .slider-counter__link--dots { display: none !important; }

/* -- Las "fotos" del carrusel de reseñas eran renders del producto repetidos
      (incluida la tabla nutricional) puestos donde el lector espera fotos de
      clientes. Sin fotos reales, no se simulan: las reseñas quedan en texto. -- */
.deos-reviews__photos, .deos-reviews__photo, .deos-reviews__gallery,
.deos-reviews__media, .deos-reviews__slider-photos { display: none !important; }

/* -- Contraste legible en cuerpos de texto (venían en gris muy claro) -- */
.deos-trust__subheading, .deos-trust__point-desc, .deos-stats__subheading,
.deos-journey__subheading, .deos-ingredients__subheading,
.deos-reviews__subheading, .deos-faq__subheading { color: #4b5563 !important; }
.deos-journey__point { color: #374151 !important; }

/* -- Encabezados sobre fondo oscuro: blancos, no del color de marca -- */
.ins-how__h, .ins-how__sub, .deos-stats__heading, .deos-stats__subheading,
.deos-stats .deos-stats__number { color: #fff !important; }
.deos-stats__subheading { opacity: .9; }
/* La encuesta quedó con DOS datos, no tres (se sacó el que insinuaba un resultado
   clínico). La grilla del esqueleto tenía tres columnas fijas, así que las dos
   tarjetas quedaban pegadas a la izquierda con un hueco de 347 px a la derecha.
   Con auto-fit la fila se reparte entre las tarjetas que realmente existan. */
.deos-stats__list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }

/* -- Tarjetas de ingredientes: el fondo rosado pasó a celeste de marca -- */
.deos-ingredients__card { background: #f0f4f8 !important; border-color: #d6e2f0 !important; }
.deos-ingredients__card-image { display: none !important; }
.ins-ing-ico { width: 64px; height: 64px; margin: 0 auto 14px; display: block; }

/* -- Filas de FAQ: mismo criterio -- */
.deos-faq-full__item, .deos-faq__item { background: #f0f4f8 !important; }

/* -- Los bullets del hero: el emoji quedaba centrado vertical contra un párrafo de
      cuatro renglones, flotando a media altura. Va arriba, con el primer renglón. -- */
.emoji-benefits-container > p { display: flex; align-items: flex-start; gap: 10px; }
.emoji-benefits-container > p > span:first-child { flex: 0 0 auto; padding-top: 1px; }

/* -- Footer: el descargo legal quedaba azul opaco sobre azul marino -- */
.ins-foot-note { font-size: 13px; line-height: 1.65; color: #c7d5e6 !important; opacity: 1; }
footer .footer-block__details-content a, footer .list-menu__item--link { color: #dbe6f2 !important; }
footer .footer-block__details-content a:hover { color: #fff !important; }