/* ===== Self-hosted fonts (no external requests) ===== */
/* Inter variable font covers all weights used by the page (400-800) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
/* bootstrap-icons subset: only U+F23E (cart) and U+F26A (check) are used */
@font-face {
  font-family: "bootstrap-icons";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url("../fonts/bootstrap-icons-subset.woff2") format("woff2");
}

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Evitar scroll horizontal por elementos full-bleed.
   Solo en <html>: el navegador lo propaga a la ventana. Antes iba tambien
   en <body> junto con height:100%, y eso convertia al <body> en el
   contenedor de scroll (window.scrollY siempre 0). Eso rompe scripts que
   bloquean/restauran el scroll de la ventana, como la "experiencia
   fullscreen" del player de VTurb. Ahora quien hace scroll es la ventana. */
html {
  overflow-x: hidden;
}
body {
  background: #fff;
  color: #000;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Asegurar que header y nav no se colapsen */
.topbar,
.horizontal-nav {
  flex-shrink: 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Más padding en móviles para evitar elementos pegados a los lados */
@media (max-width: 767px) {
  .container {
    padding: 0 20px !important;
  }

  .topbar .container {
    padding: 0 20px !important;
  }

  /* Navegación horizontal */
  .nav-container {
    padding: 0 20px !important;
  }

  /* Elementos específicos del topbar */
  .brand {
    margin-left: 0 !important;
  }

  .right-section {
    margin-right: 0 !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px !important;
  }

  .topbar .container {
    padding: 0 16px !important;
  }

  /* Navegación horizontal */
  .nav-container {
    padding: 0 16px !important;
  }

  /* Elementos específicos del topbar */
  .brand {
    margin-left: 0 !important;
  }

  .right-section {
    margin-right: 0 !important;
  }
}

/* Topbar */
.topbar {
  position: static;
  background: #fff;
  border-bottom: 2px solid #000;
}
.topbar .container {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 52px;
  max-width: 100%;
  padding: 0 24px;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 10px);
  min-width: 0;
  flex-shrink: 0;
}
.brand .cnn-logo {
  height: clamp(22px, 5.2vw, 30px);
  width: auto;
  display: block;
}
/* Nombre del medio en texto (sustituye al logo de CNN, 27 sep 2026) */

/* Separador vertical entre el logo y la palabra "Health" */
.brand .brand-divider {
  width: 1px;
  align-self: stretch;
  margin: 7px 0;
  background: #d0d0d0;
  flex-shrink: 0;
}
.brand .section {
  color: #000;
  font-weight: 700;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Pantallas muy angostas: se compacta el lockup, nunca se rompe */
@media (max-width: 380px) {
  .brand {
    gap: 6px;
  }
  .brand .cnn-logo {
    height: 20px;
  }
  .brand .brand-divider {
    margin: 5px 0;
  }
  .brand .section {
    font-size: 14px;
  }
  .topbar .container {
    gap: 10px;
  }
  .right-section {
    gap: 12px;
  }
  .mobile-live-tv {
    font-size: 14px;
  }
  .signin {
    font-size: 13px;
    padding: 3px 7px;
  }
}

.nav {
  display: none;
  gap: 28px;
}
.nav span {
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  border-bottom: 2px solid transparent;
}
.nav span:hover {
  border-bottom: 2px solid #000;
}

.utilities {
  display: none;
  align-items: center;
  gap: 28px;
}

.util {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  cursor: default;
}

.util:hover {
  color: #000;
}

.dot-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d30000;
  display: inline-block;
}

.icon-btn {
  background: transparent;
  border: none;
  color: #000;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.icon-btn:hover {
  opacity: 0.7;
}

.desktop-search {
  display: none;
}

.mobile-live-tv {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  cursor: default;
}

.mobile-live-tv:hover {
  color: #000;
}

.signin {
  color: #000;
  border: 1px solid #000;
  padding: 3px 9px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  transition: all 0.2s;
}

/* Header completo de escritorio (menu + utilidades + buscador).
   Antes arrancaba en 1024px, pero a ese ancho el conjunto mide ~1135px y
   el boton "Sign In" se salia por la derecha (iPad horizontal, portatiles
   de 1024-1152). Se sube el corte al ancho en el que realmente cabe; por
   debajo se usa el header compacto (logo + Live TV + Sign In). */
@media (min-width: 1160px) {
  .nav {
    display: flex;
  }
  .utilities {
    display: flex;
  }
  .desktop-search {
    display: grid;
  }
  .mobile-live-tv {
    display: none;
  }
}

/* Franja 1160-1319px: se aprietan un poco las separaciones para que el
   header respire sin llegar a desbordarse. */
@media (min-width: 1160px) and (max-width: 1319px) {
  .topbar .container {
    gap: 20px;
  }
  .nav {
    gap: 18px;
  }
  .nav span {
    font-size: 15px;
  }
  .utilities {
    gap: 18px;
  }
  .util {
    font-size: 15px;
  }
  .right-section {
    gap: 16px;
  }
}

/* Navegación horizontal deslizable */
.horizontal-nav {
  background: #fff;
  border-bottom: 1px solid #000;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  touch-action: pan-x;
}

.horizontal-nav::-webkit-scrollbar {
  display: none;
}

.nav-container {
  display: flex;
  gap: 0;
  padding: 0 24px;
  min-width: max-content;
}

.nav-item {
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  padding: 20px 24px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.nav-item:hover {
  border-bottom: 2px solid #000;
  background: rgba(255, 255, 255, 0.05);
}

.nav-item:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Ocultar navegación horizontal en desktop */
@media (min-width: 1024px) {
  .horizontal-nav {
    display: none;
  }
}

/* Compactar la barra en móviles */
@media (max-width: 767px) {
  .horizontal-nav .nav-container {
    padding: 0 8px;
  }
  .horizontal-nav .nav-item {
    font-size: 14px;
    padding: 2px 15px;
    min-height: 10px;
  }
}

/* Página */
.page {
  padding: 24px 0 64px;
  flex: 1;
}

.video-and-title {
  max-width: 800px;
  margin: 0 auto;
}

/* El video va al ancho del titular (un poco mas ancho) y alineado a la
   izquierda, para que titular y video formen un bloque parejo. En movil
   ocupa todo el ancho (ver la regla de vturb-smartplayer). */
.video-and-title .vsl-wrap {
  /* Ancho del video en escritorio: un poco mas ancho que el titular (800px).
     16:9, asi que mas ancho = mas alto. Se centra aunque sea mas ancho que la
     columna del titular, SIN transform (para no romper el fullscreen de VTurb).
     En pantallas mas estrechas, sigue el ancho de la ventana. */
  --vsl-w: min(875px, 100vw - 24px);
  width: var(--vsl-w);
  max-width: none;
  margin-left: calc((100% - var(--vsl-w)) / 2);
  margin-right: 0;
}

/* VSL vertical 4:5 (27 sep 2026, player 6ab978f2e0de3524548841cf): el ancho
   lo fija la regla "REPRODUCTOR VTURB" (400px movil, min(620px, 62vh)
   escritorio) para que el video quepa entero. Antes, con el video 16:9, aqui
   se forzaba width/max-width 100% !important y el vertical salia a 875px. */
.vsl-wrap vturb-smartplayer {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.vsl-wrap vturb-smartplayer .vturb-player-placeholder {
  width: 100% !important;
}
@media (max-width: 767px) {
  .video-and-title .vsl-wrap {
    --vsl-w: min(1010px, 100vw - 4px);    /* casi todo el ancho en movil: ~2px de margen a cada lado */
  }
}

/* Al revelarse la oferta, usar más ancho en desktop/tablet */
/* Disabled: width expansion on offer reveal */
/* @media (min-width: 768px) {
  body.offer-revealed .video-and-title {
    max-width: 1100px;
    transition: max-width 0.3s ease;
  }
} */

/* Article Meta */
.article-meta {
  background: #fff;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.meta-category {
  color: #4a4a4a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-separator {
  color: #9a9a9a;
  font-weight: 400;
}

.meta-read-time {
  color: #9a9a9a;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 767px) {
  .article-meta {
    padding: 10px 0;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .article-meta {
    padding: 8px 0;
    font-size: 0.75rem;
  }
}

/* Article Author Info */
.article-author-info {
  background: #fff;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.article-updated {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #9a9a9a;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.article-updated svg {
  color: #9a9a9a;
  cursor: pointer;
  width: 13px;
  height: 13px;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a;
  font-weight: 400;
}

.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e2e2e2;
}

/* Nombre + credencial del autor, apilados a la derecha de la foto */
.author-byline {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.author-name {
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
}

.author-credential {
  color: #666;
  font-size: 0.82em;
  font-weight: 400;
}

.author-name:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .article-author-info {
    padding: 12px 0;
    font-size: 0.8rem;
  }
  
  .author-avatar {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 480px) {
  .article-author-info {
    padding: 10px 0;
    font-size: 0.75rem;
  }
  
  .author-avatar {
    width: 40px;
    height: 40px;
  }
}

/* =====================================================================
   TITULAR PRINCIPAL
   Estructura:  h1.headline > span.headline-body   +   p.subheadline
   Titular en negro con filete rojo a la izquierda y, debajo, el subtitulo
   en gris alineado con el texto del titular (mismo retranqueo que el
   filete + padding). Tipografia fluida con clamp() para que el titular
   -que es largo- respire igual en un movil de 320px que en escritorio.
   (.headline-hook sigue disponible por si se quiere una primera linea en
   rojo, como en la version anterior.)
   ===================================================================== */
/* Palabras clave del titular en el rojo de la cabecera */
.headline-em {
  font-style: normal;   /* <em> sin italica: solo color y la herencia de peso del h1 */
  color: #d30000;
}

.headline {
  margin: 16px 0 14px;
  font-size: clamp(22px, 1.6vw + 9px, 30px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: #111;
  border-left: 10px solid #d30000;
  padding-left: 18px;
  padding-right: 12px;      /* margen de respiro a la derecha, no pega al borde */
  width: 100%;
  max-width: 800px;         /* usa todo el ancho de la columna: menos lineas, mas compacto */
  box-sizing: border-box;   /* el padding/borde no empuja la caja fuera del contenedor */
  text-wrap: pretty;        /* deja que las lineas llenen el ancho en vez de quedar cortas */
  overflow-wrap: break-word;
  hyphens: none;
}

/* Subtitulo: gris, letra de cuerpo, alineado con el texto del titular */
.subheadline {
  margin: 0 0 8px;
  padding-left: 28px;       /* filete (10) + padding del titular (18) */
  max-width: 62ch;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(16px, 0.45vw + 14px, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: #3d3d3d;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.subheadline .nb {
  white-space: nowrap;
}

/* Gancho: primera linea, en el rojo del filete lateral */

/* Titular en tres pisos: entradilla pequena en negro, frase central
   grande y remate mediano */
.headline-kicker {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.74em;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: #000;
}

.headline .headline-body {
  font-size: 1.12em;
  line-height: 1.06;
}

.headline-tail {
  display: block;
  margin-top: 0.45em;
  font-size: 0.74em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #000;
}

/* Cuerpo del titular */
.headline-body {
  display: block;
  color: #111;
}

/* Fragmentos que nunca deben partirse a mitad ("$35,000-A-Year", etc.) */
.headline .nb {
  white-space: nowrap;
}

/* ---- Tablet / movil grande ---- */
@media (max-width: 900px) {
  .headline {
    max-width: 100%;   /* aprovecha todo el ancho disponible, menos lineas */
  }
}

@media (max-width: 767px) {
  .headline {
    margin: 0 8px 12px 0;
    padding-left: 14px !important;
    border-left-width: 8px;
    font-size: clamp(23px, 4.6vw + 6px, 30px);
    line-height: 1.14;
    letter-spacing: -0.018em;
    max-width: none;
  }
  
  .subheadline {
    padding-left: 22px;     /* filete (8) + padding (14) */
    margin: 0 8px 6px 0;
    max-width: none;
    font-size: 16px;
    line-height: 1.5;
  }
}

/* ---- Movil ---- */
@media (max-width: 480px) {
  .headline {
    margin: 0 0 10px;
    padding-left: 12px !important;
    border-left-width: 7px;
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.16;
    letter-spacing: -0.015em;
  }
  .subheadline {
    padding-left: 19px;     /* filete (7) + padding (12) */
    margin: 0 0 4px;
    font-size: 15.5px;
    line-height: 1.5;
  }
  /* En pantallas estrechas los fragmentos del subtitulo pueden partirse */
  .subheadline .nb {
    white-space: normal;
  }
  /* En pantallas estrechas se deja que "Clint Eastwood, 95," pueda partir
     antes que provocar desbordamiento horizontal. */
  
}

/* ---- Movil muy estrecho (iPhone SE y similares) ---- */
@media (max-width: 360px) {
  .headline {
    padding-left: 10px !important;
    border-left-width: 6px;
    font-size: 21px;
    line-height: 1.18;
  }
  .subheadline {
    padding-left: 16px;     /* filete (6) + padding (10) */
    font-size: 15px;
  }
}

.share-row {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  color: #000;
}

/* Más espacio para elementos de compartir en móviles */
@media (max-width: 767px) {
  .share-row {
    margin-left: 20px !important;
    margin-right: 20px !important;
    gap: 8px;
  }

  /* Iconos de compartir más pequeños en mobile */
  .share {
    width: 28px;
    height: 28px;
  }
  .share svg {
    width: 14px;
    height: 14px;
  }

  .video-and-title {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Centrar mejor las tarjetas de precios */
  .mx-auto.px-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (max-width: 480px) {
  .share-row {
    margin-left: 16px !important;
    margin-right: 16px !important;
    gap: 6px;
  }

  /* Aún más compacto en móviles muy pequeños */
  .share {
    width: 22px;
    height: 22px;
  }
  .share svg {
    width: 20px;
    height: 20px;
  }

  .video-and-title {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Centrar mejor las tarjetas de precios */
  .mx-auto.px-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}
.share {
  color: #000;
  width: 36px;
  height: 36px;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
}

/* =======================================================================
   PIE DEL VIDEO (.video-caption)
   Sinopsis + iconos de compartir + aviso de caducidad. Es texto de apoyo,
   no titular: tipografia Inter, gris medio y una linea fina arriba que lo
   separa del reproductor y agrupa los tres elementos como un bloque.
   ===================================================================== */
.video-caption {
  max-width: 62ch;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ec;
}

.description {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: #475467;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Unico enfasis de la frase: el gancho, sin gritar */
.description-em {
  font-weight: 600;
  color: #1d2939;
}

/* Los iconos se alinean con el texto de la sinopsis y bajan de peso:
   el circulo negro competia con el titular */
.video-caption .share-row {
  margin-top: 14px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.video-caption .share {
  width: 32px;
  height: 32px;
  border-color: #d0d5dd;
  color: #667085;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.video-caption .share:hover {
  border-color: #98a2b3;
  color: #1d2939;
}

.video-caption .share svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 600px) {
  .video-caption {
    margin-top: 16px;
    padding-top: 14px;
  }
  .description {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .video-caption .share {
    width: 30px;
    height: 30px;
  }
  .video-caption .share svg {
    width: 16px;
    height: 16px;
  }
}
.meta {
  margin: 8px 0;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

/* Footer */
.footer {
  background: rgb(245, 245, 245);
  color: #000;
  padding: 20px 0 20px;
  flex-shrink: 0;
}

.footer .container {
  padding-top: 20px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.footer-link {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  cursor: default;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-copyright {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.footer-copyright p {
  color: #000;
  font-size: 12px;
  margin: 0;
}

@media (max-width: 768px) {
  .footer .container {
    padding-top: 20px;
  }

  

  

  

  .footer-links {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .footer .container {
    padding-top: 20px;
  }
  
  .footer-bottom {
    align-items: center;
  }
  
  .footer-links {
    justify-content: center;
    align-items: center;
  }
  
  .footer-copyright {
    text-align: center;
  }
}

/* Overrides mobile para maquetar como la referencia */
@media (max-width: 768px) {
  
  
  
  
  
  
  .footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .footer-bottom {
    align-items: center;
  }
  .footer-link {
    font-size: 12px;
  }
  .footer-copyright {
    text-align: center;
  }
}

/*  OFERTA */

/* CSS Variables (Tailwind equivalents) */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --contrast-color: #fbbf24;
}

/* Special Offer Banner */

/* Badge verde con pico diagonal */

@media (max-width: 480px) {
  
  
  
  
  
  
  
  
  
  
  
  
}

/* Utility Classes */

.bg-gray-100 {
  background-color: rgb(243 244 246);
}

.bg-white {
  background-color: rgb(255 255 255);
}

.text-gray-600 {
  color: rgb(75 85 99);
}

.text-gray-700 {
  color: rgb(55 65 81);
}

.text-gray-800 {
  color: rgb(31 41 55);
}

.text-gray-900 {
  color: rgb(17 24 39);
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-3 {
  padding: 0.75rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.max-w-lg {
  max-width: 32rem;
}

.md\:max-w-xs {
  max-width: 20rem;
}

.md\:max-w-md {
  max-width: 28rem;
}

@media (min-width: 768px) {
  .md\:max-w-xs {
    max-width: 20rem;
  }

  .md\:max-w-md {
    max-width: 28rem;
  }
}

@media (min-width: 1024px) {
  

  
}

.max-w-4xl {
  max-width: 56rem;
}

.w-full {
  width: 100%;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-x-6 {
  column-gap: 1.5rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.underline {
  text-decoration-line: underline;
}

.italic {
  font-style: italic;
}

.break-inside-avoid-column {
  break-inside: avoid-column;
}

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.object-contain {
  object-fit: contain;
}

/* =============================================== */
/* RESPONSIVE DESIGN COMPLETO */
/* =============================================== */

/* =============================================== */
/* RESPONSIVE GENERAL - MOBILE FIRST */
/* =============================================== */

@media (max-width: 480px) {
  /* Video section para móviles muy pequeños */
  

  /* Títulos principales */
  

  .sm\:text-4xl,
  .md\:text-5xl {
    font-size: 1.7rem !important;
    line-height: 1.9rem !important;
  }

  

  .md\:text-2xl {
    font-size: 1.1rem !important;
    line-height: 1.5rem !important;
  }

  /* Espaciado general optimizado */
  .py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  

  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .mb-8 {
    margin-bottom: 1.5rem !important;
  }

  

  /* Header y marquee */
  .text-sm {
    font-size: 0.8rem !important;
  }

  

  /* Carrusel AS SEEN ON optimizado SOLO para móviles */
  

  

  

  /* View count */
  

  /* Contenedores principales */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Más espacio lateral en móviles para todos los contenedores */
  @media (max-width: 767px) {
    .container {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    .mx-auto.px-4 {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    /* Banner y elementos específicos */
    .banner-container .container {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    .full-width-banner .text-center {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
  }

  @media (max-width: 480px) {
    .container {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    .mx-auto.px-4 {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    /* Banner y elementos específicos */
    .banner-container .container {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    .full-width-banner .text-center {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }
  }

  /* Más espacio lateral para el bloque de autor en el header */
  

  .max-w-4xl {
    max-width: 100% !important;
    padding: 0 0.5rem;
  }

  /* Espacio lateral para Referencias científicas */
  #references-container {
    margin-left: 0.9rem !important;
    margin-right: 0.9rem !important;
    width: 100% !important;
    max-width: calc(100% - 1.8rem) !important;
  }
  #references-content {
    padding-right: 0.25rem;
  }

  /* VSL styles removed - no containers now */
}

/* Tablets pequeñas */
@media (min-width: 481px) and (max-width: 640px) {
  

  

  /* VSL styles removed - no containers now */
}

/* Tablets */
@media (min-width: 640px) {
  

  

  
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:w-24 {
    width: 6rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 1rem;
  }
}

/* Custom Animations */

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

/* Button Styles */

/* Marquee Container */

/* Hide class for V-Turb integration */

/* Hover effects */
.hover\:text-white:hover {
  color: rgb(255 255 255);
}

.hover\:text-gray-700:hover {
  color: rgb(55 65 81);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

/* Max height utilities */

/* Background gradients */

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-white {
  --tw-gradient-from: rgb(255 255 255);
  --tw-gradient-to: rgb(255 255 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent {
  --tw-gradient-to: transparent;
}

/* Ring utilities for focus states */
.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-green-500\/50:hover {
  --tw-ring-color: rgb(34 197 94 / 0.5);
}

/* Rotation utility */

/* =============================================== */
/* PRICING PACKAGES SECTION - BASADO EN REFERENCIA */
/* =============================================== */

/* Variables CSS como en la referencia */
:root {
  --primary-color: #1e1d3f;
  --secondary-color: #60a7dc;
  --third-color: #1e1d3f;
  --fourth-color: #60a7dc;
  --primary-color-light: #2f2d62;
  --primary-color-dark: black;
  --secondary-color-light: #8abee5;
  --secondary-color-dark: #2775af;
  --contrast-color: #fff490;
  --text-color: #000000;
  --light-color: #f1f1f1;
}

/* Grid layout para los productos */

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
}

/* Responsive para pricing cards */
@media (max-width: 480px) {
  .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    padding: 0 0.5rem;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2em;
  }
}

/* Ordenamiento en móviles - BEST VALUE primero */
@media (max-width: 767px) {
  .best-value-package {
    order: 1;
  }
  .basic-package {
    order: 2;
  }
  .popular-package {
    order: 3;
  }
}

/* Ordenamiento en desktop como en la referencia */
@media (min-width: 768px) {
  .best-value-package {
    order: 2;
  }
  .popular-package {
    order: 3;
  }
  .basic-package {
    order: 1;
  }
}

/* Estilos base de las tarjetas */
.pricing-card {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: var(--text-color);
  background-color: white;
  border-radius: 1em;
  overflow: hidden;
  border: 2px solid var(--secondary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.pricing-card:hover {
  transform: scale(1.025);
}

/* Headers de los paquetes */
.package-header {
  padding: 8px 20px !important;
  background-color: var(--secondary-color);
  font-weight: 700;
  color: white;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1 !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

/* Resetear márgenes del h3 dentro del header */
.package-header .package-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Contenido del paquete */
.package-content {
  padding: 1.5em 1.2em;
}

/* Cantidad de botellas */
.package-quantity {
  padding: 1em 0.5em;
  text-align: center;
  line-height: 1;
  text-transform: uppercase;
}

.quantity-number {
  display: block;
  font-size: 1.65em;
  font-weight: 800;
  margin: 0 0 0.05em 0;
  color: var(--text-color);
  line-height: 0.95;
}

.supply-text {
  font-size: 1em;
  color: var(--text-color);
  margin: 0;
  font-weight: 500;
  line-height: 1;
}

/* Palabra FREE del título del pack ("3 + 3 FREE" / "2 + 1 FREE") */
.offer-block .free-accent {
  color: #d30000; /* rojo cinta FREE sobre tarjetas claras */
}
/* En la tarjeta oscura (pack 3 + 3) el acento pasa a dorado */
.offer-block .best-value-content .free-accent {
  color: #ffd24a;
}

/* Imágenes del producto */
.product-image {
  margin: 1em 0;
  display: flex;
  justify-content: center;
}

.product-img {
  max-height: 340px;
  width: auto;
  object-fit: contain;
}

/* Precios */
.price-display {
  display: flex;
  text-align: start;
  gap: 0.25em;
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  line-height: 1;
}

.price-symbol {
  font-size: 1.5em;
  font-weight: 900;
  color: var(--text-color);
}

.price-amount {
  font-size: 3.35em;
  font-weight: 900;
  text-align: center;
  color: var(--text-color);
}

.price-per {
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1;
}

/* Badges de ahorro */
.savings-badge,
.guarantee-badge,
.discount-badge {
  font-size: 0.7em;
  font-weight: 800;
  padding: 0.6em;
  margin: 0.2em 0;
  align-items: center;
  justify-content: center;
  background-color: var(--light-color);
  border-radius: 0.5em;
  display: flex; /* centra vertical y horizontalmente el contenido */
  color: var(--primary-color);
}

/* Mantener espaciado original solo en Best Value */
.best-value-content .savings-badge,
.best-value-content .guarantee-badge,
.best-value-content .discount-badge {
  margin: 0.5em 0;
}

.savings-badge span,
.guarantee-badge span,
.discount-badge span {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  line-height: 1;
}

.checkmark::before {
  content: "\f26a";
  font-family: "bootstrap-icons";
  font-size: 1em;
  font-weight: normal;
  margin-right: 0.25em;
}

/* Botones de compra (ahora enlaces) */
.buy-button {
  background-image: linear-gradient(to top, #dadada 50%, #e0e0e0 51%);
  color: var(--text-color) !important;
  border: 2px solid #bfbfbf !important;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 1.25em;
  border-radius: 14px !important; /* más cuadrado */
  line-height: 1;
  padding: 0.5em 1.5em;
  text-decoration: none !important;
  margin: 0.5em auto;
  width: 100%;
  display: grid; /* grid para centrar correctamente el subtítulo */
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 0.5em;
  row-gap: 0.25em;
  cursor: pointer;
  transition: 0.2s;
  box-sizing: border-box;
}

/* Texto a dos líneas para los CTAs */
.buy-button .btn-text {
  display: contents; /* permite colocar strong y small en la grilla del botón */
}
.buy-button .btn-text strong {
  font-weight: 900;
  letter-spacing: 0.02em;
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;   /* "ADD TO CART" siempre en una sola linea */
}
.buy-button .btn-text small {
  font-weight: 500;
  font-size: 0.6em;
  margin-top: 0.1em;
  color: #4b5563; /* gris para variantes grises */
  grid-column: 1 / span 2; /* ocupar todo el ancho del botón */
  grid-row: 2;
  justify-self: center;
  text-align: center;
}

.buy-button:hover {
  background-image: linear-gradient(to bottom, #dadada 50%, #e0e0e0 51%);
}

.shopping-cart-icon::before {
  content: "\f23e";
  font-family: "bootstrap-icons";
  font-weight: normal;
  display: inline-block;
  vertical-align: baseline; /* alinear con texto */
  margin: 0 0.1em 0 0;
  font-size: 1.05em;
}

/* Alineación del contenedor del ícono dentro del botón */
.shopping-cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  grid-column: 1;
  grid-row: 1;
}

/* Iconos de tarjetas */

/* Totales */
.total-pricing {
  font-size: 1.1em;
  text-align: center;
  margin-top: 1em;
}

.totals {
  font-size: 1.2em;
  margin-bottom: 0.1em;
  line-height: 1;
}

.final-price {
  color: #000000;
  font-weight: 700;
  font-size: 1.1em;
}

/* Precios para Best Value (fondo oscuro) */
.best-value-content .final-price {
  color: white;
}

.shipping {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1em;
  line-height: 1;
  margin-top: 0;
}

/* FREE shipping para Best Value (tarjeta del medio) */

/* FREE shipping para Most Popular (tarjeta de la derecha) */

/* PAQUETE BEST VALUE - Estilo especial como PROMO */
.best-value-package {
  color: white;
  background: radial-gradient(
    ellipse at center,
    #bfefff 30%,
    /* centro más claro */ #69cfff 65%,
    #4ab7e6 100% /* bordes más oscuros */
  );
  border-radius: 10px;
}

.best-value-package .package-content {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: radial-gradient(
      ellipse at center,
      rgba(13, 111, 150, 0.8) 0%,
      /* centro más claro */ rgba(15, 102, 150, 0.92) 55%,
      rgba(9, 60, 102, 0.98) 85%,
      rgba(7, 38, 64, 1) 100% /* bordes más oscuros */
    ),
    linear-gradient(180deg, #0b3d5f 0%, #0f6ea2 100%);
  color: white;
}

/* Badge BEST VALUE - contenedor pequeño separado */
.best-value-badge {
  background: #ffffff;
  color: #354476;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: none;
  text-align: center;
  text-transform: uppercase;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* Contenido del paquete Best Value */
.best-value-content .quantity-number,
.best-value-content .supply-text,
.best-value-content .price-symbol,
.best-value-content .price-amount,
.best-value-content .price-per {
  color: white;
}

.best-value-content .product-img {
  max-height: 380px;
}

/* Badges del Best Value */
.best-value-content .savings-badge,
.best-value-content .discount-badge,
.best-value-content .guarantee-badge {
  color: var(--text-color);
  background: #f5f5f5;
  text-shadow: none;
}

/* Botón del Best Value */
.best-value-buy {
  color: #111827 !important; /* texto oscuro para buen contraste */
  background-image: linear-gradient(
    to top,
    #ffd14a 50%,
    #ffe062 51%
  ) !important; /* botón amarillo */
  border: 2px solid #e3b700 !important;
  text-shadow: none;
}

.best-value-buy:hover {
  background-image: linear-gradient(
    to bottom,
    #ffd14a 50%,
    #ffe062 51%
  ) !important;
}

/* Responsive */
@media (max-width: 767px) {
  html {
    overflow-x: hidden !important;
  }
  html,
  body {
    overscroll-behavior-x: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bg-gray-100,
  .container,
  .max-w-sm,
  .max-w-4xl,
  .max-w-7xl,
  .marquee-container,
  .pricing-card,
  .guarantee-content,
  .faq-container {
    overflow-x: hidden !important;
    width: 100% !important; /* evitar 100vw que causa desbordes por el scrollbar */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Espaciado vertical para el aviso superior en móviles */
  

  /* Carousel removed: #logo-carousel styles deleted */

  /* VSL player: a todo el ancho en movil. Sin !important: el player
     escribe estilos en linea al expandirse (experiencia fullscreen) y
     un !important aqui los pisaria. */
  vturb-smartplayer {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  body {
    touch-action: pan-y !important;
  }
}

/* =============================================== */
/* GUARANTEE SECTION */
/* =============================================== */

.bg-primary-dark {
  /* Reemplaza el azul por un blanco suave para resaltar la imagen */
  background-color: #f3f4f6; /* light gray (no 100% blanco) */
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem; /* separa de las tarjetas superiores */
}

/* Fondo con elementos decorativos como en la imagen */
.bg-primary-dark::before {
  /* Sin decoraciones azules para un fondo limpio */
  content: none;
}

/* Garantía como imagen única */

/* CTA Section */

/* Clases adicionales necesarias */

.md\:p-12 {
  padding: 3rem;
}

@media (min-width: 768px) {
  .md\:p-12 {
    padding: 3rem;
  }
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

/* =============================================== */
/* RESPONSIVE GUARANTEE & CTA SECTIONS */
/* =============================================== */

/* Móviles muy pequeños */
@media (max-width: 480px) {
  /* Contenedor garantía: centrar vertical y horizontalmente */
  .bg-primary-dark .container {
    min-height: 260px; /* alto razonable para centrar el contenido */
    display: flex;
    align-items: center; /* centra vertical */
    justify-content: center; /* centra horizontal */
  }

  

  

  
  /* Reducir espacio superior de la sección - selector más específico */
  .bg-primary-dark[style*="padding-top: 8rem"] {
    padding-top: 0.5rem !important;
    margin-top: 0rem !important;
  }

  

  /* Forzar con ID si es necesario */
  div[style*="padding-top: 8rem"][style*="margin-top: 4rem"] {
    padding-top: 0.5rem !important;
    margin-top: 0rem !important;
  }

  

  

  

  

  

  

  

  

  
}

/* Móviles medianos */
@media (min-width: 481px) and (max-width: 767px) {
  /* Centrado en vertical también para medianos */
  .bg-primary-dark .container {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  
  /* Reducir espacio superior - selectores específicos */
  .bg-primary-dark[style*="padding-top: 8rem"] {
    padding-top: 1rem !important;
    margin-top: 0rem !important;
  }

  div[style*="padding-top: 8rem"][style*="margin-top: 4rem"] {
    padding-top: 1rem !important;
    margin-top: 0rem !important;
  }

  

  

  

  

  

  

  

  

  
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  

  

  

  

  

  

  

  
}

/* =============================================== */
/* FAQ SECTION */
/* =============================================== */

/* Clases adicionales necesarias */

/* =============================================== */
/* RESPONSIVE FAQ SECTION */
/* =============================================== */

/* Móviles muy pequeños */
@media (max-width: 480px) {
  

  

  

  

  

  

  
}

/* Móviles medianos */
@media (min-width: 481px) and (max-width: 767px) {
  

  

  

  

  
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  

  

  

  
}

/* =============================================== */
/* CTA COUNTDOWN BANNER STYLES */
/* =============================================== */

/* Full width banner styles - En flujo normal */

/* Padding interno solo para el contenido */

@media (max-width: 768px) {
  
}

/* Contenedor del banner - Sin padding superior */
.banner-container {
  position: relative;
  padding-top: 0 !important; /* Sin espacio superior */
  width: 100vw; /* Usar 100% del viewport width */
  margin-left: calc(
    -50vw + 50%
  ); /* Centrar el contenido que se extiende más allá del contenedor padre */
  margin-right: calc(
    -50vw + 50%
  ); /* Centrar el contenido que se extiende más allá del contenedor padre */
}
/* Reducir espacio cuando se eliminó carrusel/fotos */

.references {
  padding-top: 1.5rem; /* reducir separación superior */
  padding-bottom: 1.5rem; /* opcional: más compacto */
}

@media (max-width: 768px) {
  
  .references {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Espacio para el banner de shipping después del strip */

/* Acercar el bloque de tarjetas al banner (justo debajo del shipping banner) */
.banner-container > .container {
  margin-top: 20px !important; /* Espacio después del shipping banner */
}

@media (max-width: 768px) {
  

  .banner-container > .container {
    margin-top: 15px !important;
  }
}

/*--------------------strip3------------------*/

@media (max-width: 991px) {
  
}

@media (max-width: 991px) {
  
}

/* Estilos para móviles medianos */
@media (min-width: 481px) and (max-width: 767px) {
  

  
}

@media (max-width: 991px) {
  

  
}

/* Estilos específicos para móviles muy pequeños */
@media (max-width: 480px) {
  

  

  /* Hacer el texto más grande pero ajustado */
  
}

@keyframes fade {
  0% {
    opacity: 100%;
  }

  50% {
    opacity: 30%;
  }

  70% {
    opacity: 100%;
  }

  100% {
    opacity: 100%;
  }
}

.countdown {
  display: inline-block;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}

@media (max-width: 991px) {
  .countdown {
    display: inline-block;
    font-size: 18px; /* Más grande que el original de 14px */
    line-height: 24px;
  }
}

/* Contador más grande en móviles pequeños */
@media (max-width: 480px) {
  .countdown {
    font-size: 16px; /* Más grande que el original */
    line-height: 20px;
  }
}

@media (max-width: 991px) {
  
}

.timer {
  color: var(--contrast-color) !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-family: "Courier New", monospace !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
  margin: 0.25rem 0 1rem 0 !important; /* Espacio inferior para separar de la barra */
}

/* Mensaje cuando el timer expira */
.timer-expired-message {
  color: var(
    --contrast-color
  ) !important; /* Mismo amarillo que "With Our Special Time-Limited Offer!" */
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 0 #00000042 !important; /* Misma sombra que el subtítulo */
  margin: 0.5rem 0 1rem 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: glow-fade 2s ease-in-out infinite;
}

@keyframes glow-fade {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.6);
  }
  100% {
    filter: brightness(1);
  }
}

@media (max-width: 991px) {
  .timer {
    font-size: 2.5rem !important;
  }

  .timer-expired-message {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .timer {
    font-size: 2rem !important;
  }

  .timer-expired-message {
    font-size: 1rem !important;
  }
}

/* Estilos para el texto "Only Until" */

@media (max-width: 991px) {
  
}

@media (max-width: 767px) {
  
}

/* =============================================== */
/* RESPONSIVE COMPLETO PARA PRICING CARDS */
/* =============================================== */

/* Móviles muy pequeños (hasta 480px) */
@media (max-width: 480px) {
  /* Tarjetas de precios */
  .pricing-card {
    max-width: 100% !important;
    margin-bottom: 1.5em;
    border-radius: 0.9rem;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .best-value-package {
    border-radius: 10px;
    margin-bottom: 1.5em;
    transform: none !important;
  }

  .package-header {
    padding: 6px 15px !important;
    font-size: 16px !important;
  }

  .best-value-badge {
    padding: 6px 15px;
    font-size: 16px;
  }

  /* SEPARAR: SOLO Basic y Popular (NO Best Value) */
  .basic-package .package-content:not(.best-value-content),
  .popular-package .package-content:not(.best-value-content) {
    padding: 1em 0.75em !important;
    display: grid !important;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto 1fr auto auto auto; /* filas con altura específica */
    column-gap: 0.75rem;
    row-gap: 0.3rem;
    align-items: center; /* centrado vertical */
  }

  /* SEPARAR: Best Value independiente */
  .best-value-content {
    padding: 1em 0.75em !important;
    display: grid !important;
    grid-template-columns: 1.1fr 1fr;
    grid-auto-rows: min-content;
    column-gap: 0.6rem;
    row-gap: 0.4rem; /* más juntos en Y */
    align-items: start; /* mantiene su estilo original */
  }

  .package-quantity {
    grid-column: 1;
    grid-row: 1;
    text-align: center !important;
    justify-self: center;
    width: 100%;
    padding: 0.25em 0 !important;
  }
  .package-quantity .quantity-number,
  .package-quantity .supply-text {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .quantity-number {
    font-size: 1.6em !important;
  }

  .supply-text {
    font-size: 0.8em !important;
  }

  .price-display {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .price-symbol {
    font-size: 1.35em !important; /* un poco más grande */
  }

  .price-amount {
    font-size: 2.8em !important; /* un poco más grande */
    letter-spacing: -0.08em;
  }

  .price-per {
    font-size: 0.6em !important;
  }

  .product-image {
    grid-column: 1;
    grid-row: 2 / span 4; /* ocupa filas 2-5 */
    align-self: start;
    margin: 0.2em 0 0 0 !important;
  }

  .product-img {
    max-height: 150px !important; /* mockups mas grandes en mobile pequeno */
  }

  /* Badges en filas 2, 3 y 4 de la columna derecha */
  .savings-badge {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: 220px;
    margin: 0.2em 0 !important;
    padding: 0.5em !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .discount-badge {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    max-width: 220px;
    margin: 0.2em 0 !important;
    padding: 0.5em !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .guarantee-badge {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    max-width: 220px;
    margin: 0.2em 0 !important;
    padding: 0.5em !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Override para centrar verticalmente SOLO Basic y Popular */
  .basic-package .package-content .savings-badge,
  .basic-package .package-content .guarantee-badge,
  .popular-package .package-content .savings-badge,
  .popular-package .package-content .guarantee-badge {
    place-self: center end !important;
    grid-row: 2 !important;
  }
  .basic-package .package-content .guarantee-badge,
  .popular-package .package-content .guarantee-badge {
    grid-row: 3 !important;
  }

  /* Contenedor de badges para centrado conjunto */
  .badges-group {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important; /* ocupa filas 2 y 3 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* centrado vertical del grupo */
    align-items: end !important; /* alineado a la derecha */
    gap: 0.4rem !important; /* un poquito más de espacio */
  }

  /* Best Value con 3 badges necesita más espacio vertical */
  .best-value-content .badges-group {
    grid-row: 2 / span 3 !important; /* ocupa filas 2, 3 y 4 */
    gap: 0.3rem !important; /* menos gap porque son 3 badges */
  }

  /* Resetear grid positioning de badges individuales */
  .basic-package .badges-group .savings-badge,
  .basic-package .badges-group .guarantee-badge,
  .popular-package .badges-group .savings-badge,
  .popular-package .badges-group .guarantee-badge {
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 250px !important; /* un poco menos ancho */
    padding: 0.7em 1em !important; /* menos padding */
  }

  /* Badges de Best Value también ajustados */
  .best-value-content .badges-group .savings-badge,
  .best-value-content .badges-group .discount-badge,
  .best-value-content .badges-group .guarantee-badge {
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 250px !important; /* un poco menos ancho */
    padding: 0.7em 1em !important; /* menos padding */
  }

  /* Totales en la fila 5, arriba del botón */
  .total-pricing {
    grid-column: 2;
    grid-row: 5;
    text-align: left !important;
    margin-top: 0.25em !important;
    font-size: 0.96em;
  }

  /* Botón al final ocupando las dos columnas */
  .buy-button {
    grid-column: 1 / -1;
    grid-row: 6;
    font-size: 1.2em !important; /* letra más grande */
    padding: 0.8em 1.2em !important; /* más altura */
    margin: 0.8em auto !important;
  }

  /* Separar icono del carrito en mobile */
  .buy-button .shopping-cart-icon::before {
    margin-right: 0.4em !important;
  }
  /* Juntar badges en Basic/Popular (móvil pequeño) */
  .basic-package .package-content,
  .popular-package .package-content {
    row-gap: 0.3rem !important;
  }
  .basic-package .savings-badge,
  .basic-package .guarantee-badge,
  .popular-package .savings-badge,
  .popular-package .guarantee-badge {
    margin: 0.1em 0 !important;
    place-self: center end !important;
  }
  /* Si no hay discount, guarantee inmediatamente debajo de savings */
  .basic-package .guarantee-badge,
  .popular-package .guarantee-badge {
    grid-row: 3 !important;
  }

  /* Ocultar íconos de pago en mobile para evitar filas extra */
  

  .savings-badge,
  .guarantee-badge,
  .discount-badge {
    font-size: 0.65em !important;
    padding: 0.5em !important;
    margin: 0.8em 0 !important;
  }

  /* Juntar badges en Basic/Popular (móvil mediano) */
  .basic-package .package-content,
  .popular-package .package-content {
    row-gap: 0.35rem !important;
  }
  .basic-package .savings-badge,
  .basic-package .guarantee-badge,
  .popular-package .savings-badge,
  .popular-package .guarantee-badge {
    margin: 0.1em 0 !important;
    place-self: center end !important;
  }
  .basic-package .guarantee-badge,
  .popular-package .guarantee-badge {
    grid-row: 3 !important;
  }

  .totals {
    font-size: 1em !important;
  }

  .shipping {
    font-size: 0.9em !important;
  }

  .final-price {
    font-size: 1em !important;
  }

  

  /* Espaciado general */
  

  

  .pb-16 {
    padding-bottom: 1rem !important;
  }

  /* Sección de referencias científicas */
  .py-12 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Orden en mobile: 6→3→2 botellas */
  
  .best-value-package {
    order: 1;
  }
  .popular-package {
    order: 2;
  }
  .basic-package {
    order: 3;
  }
}

/* Móviles medianos (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .pricing-card {
    max-width: 100%;
    margin-bottom: 1.2em;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .best-value-package {
    padding: 3px;
    margin-bottom: 1.2em;
    transform: scale(1.02) !important;
  }

  .package-header {
    padding: 7px 18px !important;
  }

  .quantity-number {
    font-size: 1.8em;
  }

  .supply-text {
    font-size: 0.9em;
  }

  /* SEPARAR: SOLO Basic y Popular (NO Best Value) (mobile mediano) */
  .basic-package .package-content:not(.best-value-content),
  .popular-package .package-content:not(.best-value-content) {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto 1fr auto auto auto; /* filas con altura específica */
    column-gap: 0.8rem;
    row-gap: 0.35rem;
    align-items: center; /* centrado vertical */
    padding: 1em 0.9em !important;
  }

  /* SEPARAR: Best Value independiente (mobile mediano) */
  .best-value-content {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr;
    grid-auto-rows: min-content;
    column-gap: 0.8rem;
    row-gap: 0.5rem; /* más juntos en Y */
    align-items: start; /* mantiene su estilo original */
    padding: 1em 0.9em !important;
  }

  .package-quantity {
    grid-column: 1;
    grid-row: 1;
    text-align: center !important;
    justify-self: center;
    width: 100%;
  }
  .package-quantity .quantity-number,
  .package-quantity .supply-text {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .price-display {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .product-image {
    grid-column: 1;
    grid-row: 2 / span 4;
    align-self: start;
    margin-top: 0.2em !important;
  }
  .product-img {
    max-height: 205px !important; /* mockups mas grandes en mobile mediano */
  }
  .savings-badge {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: 240px;
    margin: 0.8em 0 !important;
    padding: 0.5em !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .discount-badge {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    max-width: 240px;
    margin: 0.8em 0 !important;
    padding: 0.5em !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .guarantee-badge {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    max-width: 240px;
    margin: 0.8em 0 !important;
    padding: 0.5em !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Override para centrar verticalmente SOLO Basic y Popular (mobile mediano) */
  .basic-package .package-content .savings-badge,
  .basic-package .package-content .guarantee-badge,
  .popular-package .package-content .savings-badge,
  .popular-package .package-content .guarantee-badge {
    place-self: center end !important;
    grid-row: 2 !important;
  }
  .basic-package .package-content .guarantee-badge,
  .popular-package .package-content .guarantee-badge {
    grid-row: 3 !important;
  }

  /* Contenedor de badges para centrado conjunto aplicado globalmente */

  /* Resetear grid positioning de badges individuales (mobile mediano) */
  .basic-package .badges-group .savings-badge,
  .basic-package .badges-group .guarantee-badge,
  .popular-package .badges-group .savings-badge,
  .popular-package .badges-group .guarantee-badge {
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 260px !important; /* un poco menos ancho */
    padding: 0.7em 1em !important; /* menos padding */
  }

  /* Badges de Best Value también ajustados (mobile mediano) */
  .best-value-content .badges-group .savings-badge,
  .best-value-content .badges-group .discount-badge,
  .best-value-content .badges-group .guarantee-badge {
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 260px !important; /* un poco menos ancho */
    padding: 0.7em 1em !important; /* menos padding */
  }
  .total-pricing {
    grid-column: 2;
    grid-row: 5;
    text-align: left !important;
  }
  .buy-button {
    grid-column: 1 / -1;
    grid-row: 6;
  }
  

  .price-symbol {
    font-size: 1.55em;
  }
  .price-amount {
    font-size: 3em;
    letter-spacing: -0.06em;
  }
  .price-per {
    font-size: 0.7em;
  }

  .buy-button {
    font-size: 1.3em; /* letra más grande */
    padding: 0.8em 1.2em !important; /* más altura */
  }

  /* Separar icono del carrito en mobile mediano */
  .buy-button .shopping-cart-icon::before {
    margin-right: 0.4em !important;
  }

  .totals {
    font-size: 1.1em;
  }

  .shipping {
    font-size: 1em;
  }

  

  /* Espaciado optimizado para móviles medianos */
  

  .pb-16 {
    padding-bottom: 1.5rem !important;
  }

  .py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Espacio lateral para Referencias científicas (móviles medianos) */
  #references-container {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
    width: 100% !important;
    max-width: calc(100% - 2.5rem) !important;
  }

  /* Orden en mobile mediano: 6→3→2 botellas */
  
  .best-value-package {
    order: 1;
  }
  .popular-package {
    order: 2;
  }
  .basic-package {
    order: 3;
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pricing-card {
    margin-bottom: 0;
  }

  .package-content {
    padding: 1.2em 1em !important;
  }

  /* Desktop (>=1024px) - Reducir levemente el tamaño de las tarjetas */
  @media (min-width: 1024px) {
    .pricing-card {
      font-size: 0.95em;
    }
    .package-content {
      padding: 1.3em 1.1em !important;
    }
    .product-img {
      max-height: 230px;
    }
    .best-value-content .product-img {
      max-height: 265px;
    }
    .buy-button {
      font-size: 1.15em;
      padding: 0.6em 1.2em !important;
    }
  }

  .best-value-content {
    padding: 1.2em 1em !important;
  }

  .quantity-number {
    font-size: 2em;
  }

  .price-amount {
    font-size: 3.5em;
  }

  .price-symbol {
    font-size: 1.6em;
  }

  .price-per {
    font-size: 0.7em;
  }

  .buy-button {
    font-size: 1.35em; /* letra más grande */
    padding: 0.8em 1.2em !important; /* más altura */
  }

  /* Separar icono del carrito en tablets */
  .buy-button .shopping-cart-icon::before {
    margin-right: 0.4em !important;
  }
}

/* =============================================== */
/* COMENTARIOS SECTION STYLES - EXACT DESIGN MATCH */
/* =============================================== */

/* Profile image styles */
.w-10.h-10.rounded-full img,
.w-16.h-16.rounded-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* Specific profile avatar styles */
img[alt*="Angela S."],
img[alt*="Robert T."],
img[alt*="Maria L."],
img[alt*="James P."],
img[alt*="Sophie H."] {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

/* Helpful button styles */
.helpful-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.helpful-button.helpful-clicked {
  background-color: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #16a34a !important;
}

.helpful-button.helpful-clicked:hover {
  background-color: #dcfce7 !important;
}

.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

/* ============================================ */
/* RESPONSIVE COMMENTS SECTION */
/* ============================================ */

/* Desktop - Solo para PC (min-width: 1024px) */
@media (min-width: 1024px) {
  /* Espacio entre estrellas y texto del título */
  .py-16.bg-white .text-orange-400.md\:mr-2 {
    margin-right: 1rem !important;
  }
}

/* Tablets y dispositivos medianos (768px - 1023px) */
@media (max-width: 1023px) {
  /* Comentarios Section - Container */
  .py-16.bg-white .max-w-4xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Comentarios Section - Títulos */
  

  .py-16.bg-white .text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  

  /* Review Cards - Imagen del medio más pequeña */
  
}

/* Móviles (max-width: 767px) */
@media (max-width: 767px) {
  /* Comentarios Section - Padding vertical reducido */
  .py-16.bg-white {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Container */
  .py-16.bg-white .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Títulos más pequeños */
  

  .py-16.bg-white .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  

  /* Review Cards - Padding reducido */
  .py-16.bg-white .bg-gray-100.rounded-lg {
    padding: 0.75rem !important;
  }

  /* Avatar de perfil más pequeño */
  .py-16.bg-white .w-8.h-8.rounded-full {
    width: 2rem !important;
    height: 2rem !important;
  }

  /* Nombre y ubicación */
  .py-16.bg-white .font-bold.text-gray-900 {
    font-size: 0.875rem !important;
  }

  /* Estrellas más pequeñas */
  .py-16.bg-white .text-orange-400 {
    font-size: 0.875rem !important;
  }

  /* Imagen del medio - tamaño mejorado para móvil */
  

  /* Texto de review más pequeño */
  .py-16.bg-white .text-sm {
    font-size: 0.8rem !important;
  }

  /* Botones más pequeños */
  .py-16.bg-white .helpful-button,
  .py-16.bg-white button {
    font-size: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }

  /* Espaciado entre botones */
  .py-16.bg-white .space-x-6 > * + * {
    margin-left: 1rem !important;
  }

  /* Iconos de botones */
  .py-16.bg-white .w-4.h-4 {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Margenes reducidos */
  .py-16.bg-white .mb-8 {
    margin-bottom: 1.5rem !important;
  }

  

  .py-16.bg-white .mb-3 {
    margin-bottom: 0.5rem !important;
  }

  .py-16.bg-white .mb-2 {
    margin-bottom: 0.375rem !important;
  }

  /* Espaciado entre review cards */
  .py-16.bg-white .space-y-4 > * + * {
    margin-top: 0.75rem !important;
  }

  /* En móvil, colocar "Verified Purchase" debajo del texto de compra */
  .py-16.bg-white .mb-2.text-sm.text-gray-700 .flex.items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .py-16.bg-white
    .mb-2.text-sm.text-gray-700
    .flex.items-center
    .mx-2.text-gray-400 {
    display: none !important; /* ocultar el separador | */
  }
  
}

/* Móviles muy pequeños (max-width: 480px) */
@media (max-width: 480px) {
  /* Títulos aún más pequeños */
  

  .py-16.bg-white .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }

  

  /* Review Cards - Padding mínimo */
  .py-16.bg-white .bg-gray-100.rounded-lg {
    padding: 0.5rem !important;
  }

  /* Imagen del medio - tamaño apropiado para móviles pequeños */
  

  /* Avatar perfil más pequeño */
  .py-16.bg-white .w-8.h-8.rounded-full {
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin-right: 0.5rem !important;
  }

  /* Texto más compacto */
  .py-16.bg-white .text-sm {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
  }

  /* Botones compactos */
  .py-16.bg-white .helpful-button,
  .py-16.bg-white button {
    font-size: 0.7rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}

.text-orange-400 {
  color: #fb923c;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.w-24 {
  width: 6rem;
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

.w-8 {
  width: 3rem;
}

.h-8 {
  height: 3rem;
}

.h-20 {
  height: 5rem;
}

.w-24 {
  width: 6rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.rounded {
  border-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.bg-gray-200 {
  background-color: #e5e7eb;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-900 {
  color: #111827;
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1.5rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}

.bg-transparent {
  background-color: transparent;
}

.border-none {
  border-style: none;
}

.p-0 {
  padding: 0;
}

.hover\:bg-gray-300:hover {
  background-color: #d1d5db;
}

.hover\:text-gray-800:hover {
  color: #1f2937;
}

.hover\:text-gray-600:hover {
  color: #4b5563;
}

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Responsive para comentarios */
@media (max-width: 768px) {
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  

  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  

  .mb-8 {
    margin-bottom: 1.5rem !important;
  }

  

  

  .text-gray-700 {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .text-sm {
    font-size: 0.85rem;
  }

  .w-24 {
    width: 4rem !important;
  }

  

  .text-2xl {
    font-size: 1.25rem !important;
  }
}

/* ======================================================================= */
/* ========== INICIO ESTILOS REFERENCIAS CIENTÍFICAS - CSS ============= */
/* ======================================================================= */

/* Scientific References Section */
.scientific-references {
  background: #fff;
  padding: 48px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 767px) {
  .scientific-references {
    padding: 32px 20px;
  }

  

  

  

  

  

  

  
}

@media (max-width: 480px) {
  .scientific-references {
    padding: 24px 16px;
  }

  

  

  
}

/* Estilos adicionales para referencias científicas con Tailwind */
.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

@media (min-width: 768px) {
  .md\:w-16 {
    width: 4rem;
  }

  .md\:h-16 {
    height: 4rem;
  }
}

.hover\:text-gray-700:hover {
  color: #374151;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.object-contain {
  object-fit: contain;
}

/* =====================================================================
   OFERTA — PAQUETES
   Estructura de cada seccion .offer-block:

     .offer-live            barra de venta en vivo (fecha, contador, stock)
     .special-offer-promo   banner de envio gratis
     .pricing-grid          las tres tarjetas (.pricing-card)

   Las tarjetas reutilizan el sistema que ya vive mas arriba en esta hoja
   (.pricing-card, .package-header, .price-display, .buy-button, etc.).
   Aqui solo va: la rejilla, la barra en vivo y la capa de color de la
   marca FlushPril. Todo queda dentro de .offer-block para no tocar
   ningun otro modulo de la pagina.
   ===================================================================== */

.offer-block {
  /* Paleta de la marca anterior (etiqueta: banda indigo casi
     negra y vidrio ambar). Opaca, oscura y elegante, sin brillos. */
  --nr-ink: #14122E;          /* tipografia y cifras */
  --nr-blue: #34315F;         /* indigo opaco: acento, cinta, marco y boton */
  --nr-blue-deep: #1E1B45;    /* extremo oscuro del degradado; texto pequeno sobre blanco */
  --nr-blue-soft: #C7C5D6;    /* bordes de pastillas y botones claros */
  --nr-mist: #F6F5F9;         /* gris lavanda apenas perceptible: fondos */
  --nr-line: #E3E2EA;         /* bordes de tarjetas normales */
  --nr-hot: #cf7a3e;          /* inicio de la barra de stock (naranja apagado que pasa a rojo) */
  --nr-green: #0f7a4a;        /* "sale is live": 5.5:1 sobre blanco (AA) */
  --nr-red: #b3362b;          /* urgencia (contador, stock, tachado, "+ Shipping"): ladrillo */

  /* La oferta (stock + paquetes) es el eje central: va un poco mas ancha que
     el titular (800px), centrada, sin transform. */
  --offer-w: min(1080px, 100vw - 16px);
  width: var(--offer-w);
  max-width: none;
  margin-left: calc((100% - var(--offer-w)) / 2);
  margin-right: 0;
  box-sizing: border-box;
  padding: 2.5rem 1.25rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------
   1. FRANJA DE VENTA EN VIVO
   Sin caja ni borde: el encabezado va suelto sobre el blanco de la
   pagina y los datos en vivo (reserva + stock) se agrupan en una franja
   tenue de ancho completo. Un filete rojo arriba es lo unico que "grita";
   el resto es tipografia.
   ------------------------------------------------------------------ */
.offer-live {
  max-width: 1180px;
  margin: 0 auto 2rem;
  text-align: center;
}

.offer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nr-red);
}

/* Filetes cortos a los lados del rotulo: marcan seccion sin dibujar caja */
.offer-eyebrow::before,
.offer-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: 0.45;
}

.offer-title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.5rem, 1.3vw + 1.15rem, 2.125rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #101828;
  text-wrap: balance;
}

.offer-title em {
  font-style: normal;
  color: var(--nr-blue-deep);
}

.offer-deadline {
  margin: 0 0 1.35rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #475467;
}

.offer-deadline .current-date {
  font-weight: 700;
  color: #101828;
  white-space: nowrap;
}

/* --- La franja propiamente dicha ---
   Una sola fila blanca con filete arena: a la izquierda la reserva con su
   reloj, a la derecha el estado del stock. Sin texto de apoyo: la urgencia
   la ponen el contador, el numero rojo y la barra que encoge. La barra
   fija de urgencia (#vc-bar) es una copia compacta de esta franja. */
.offer-live-grid {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: 0 1.75rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--nr-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 32px -26px rgba(16, 40, 58, 0.5);
  text-align: left;
}

/* Separador fino entre los dos datos */
.offer-live-grid::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 100%;
  min-height: 40px;
  background: var(--nr-line);
  align-self: stretch;
}

/* Los dos paneles pierden su caja: solo tipografia */
.offer-hold,
.offer-stock {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Reserva: reloj (dibujado en CSS) + rotulo + contador */
.offer-hold {
  grid-column: 1;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: center;
  text-align: left;
  white-space: nowrap;
}

.offer-hold::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--nr-blue);
  background:
    linear-gradient(var(--nr-blue), var(--nr-blue)) 14px 6px / 2px 10px no-repeat,
    linear-gradient(var(--nr-blue), var(--nr-blue)) 15px 14px / 8px 2px no-repeat;
}

.offer-hold-label {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  color: #667085; /* 4.8:1 sobre blanco (AA) */
  /* tamano y tracking: los fija la capa de legibilidad, mas abajo */
}

/* Especificidad alta: vence a las reglas !important del template */
.offer-live .timer.offer-timer {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  color: var(--nr-ink) !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.2rem) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  text-shadow: none !important;
  transition: color 0.3s ease;
}

/* Menos de 5 minutos (body.vc-timer-urgent lo pone la barra fija) */
body.vc-timer-urgent .offer-live .timer.offer-timer {
  color: var(--nr-red) !important;
}

.offer-live .timer-expired-message.offer-expired {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  color: var(--nr-red) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  text-shadow: none !important;
  animation: none !important;
  white-space: normal;
  /* Acotado: sin esto la columna auto crece hasta ~560px y a 900-985px
     empuja la fila del stock fuera de la tarjeta. */
  max-width: 18rem;
}

/* Stock: etiqueta en vivo + kits restantes y, debajo, la barra */
.offer-stock {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
}

.offer-stock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

.offer-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nr-green);
  white-space: nowrap;
}

.offer-live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nr-green);
  flex-shrink: 0;
}

.offer-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--nr-green);
  opacity: 0.5;
  animation: offer-live-pulse 2s ease-out infinite;
}

@keyframes offer-live-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-live-dot::after { animation: none; }
}

.offer-stock-left {
  color: #475467;
  white-space: nowrap;
}

.offer-stock-left .countdown {
  font-weight: 800;
  font-size: 1.15em;
  color: var(--nr-red);
  font-variant-numeric: tabular-nums;
}

.offer-stock-track {
  border-radius: 999px;
  background: #e3ebef;
  overflow: hidden;
}

.offer-stock-fill {
  display: block;
  height: 100%;
  width: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nr-hot), var(--nr-red));
  transition: width 0.6s ease;
}

/* El texto de apoyo sobra en la version minimalista */
.offer-stock-note {
  display: none;
}

/* ------------------------------------------------------------------
   2. REJILLA DE LAS TRES TARJETAS
   Escritorio: 2 | 6 | 3, con la del medio destacada.
   Movil: se apilan y la de 6 botellas sube al primer puesto.
   ------------------------------------------------------------------ */
.pricing-grid {
  display: grid;
  /* Columnas desiguales: 2(basic) | 6(best value, la principal, mas ancha) |
     3(good value). La del medio es la mas ancha; las laterales, mas angostas
     (la de 3 un poco mas que la de 2). En movil se apilan (ver mas abajo). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
}

.offer-block .basic-package      { order: 1; }
.offer-block .best-value-package { order: 2; }
.offer-block .popular-package    { order: 3; }

/* ------------------------------------------------------------------
   3. CAPA DE COLOR — MARCA ANTERIOR (sustituida por la capa Synaptril del 8 oct 2026)
   Paleta tomada del gotero: ambar, etiqueta blanca y banda indigo.
   Tarjetas blancas, borde lavanda muy claro, y la tarjeta destacada
   en indigo profundo con marco violeta.
   ------------------------------------------------------------------ */
.offer-block .pricing-card {
  border-color: var(--nr-line);
  box-shadow: 0 10px 28px -20px rgba(16, 40, 58, 0.35);
}

/* Cabeceras de las dos tarjetas laterales: sin caja oscura. Rotulo en
   mayusculas espaciadas sobre fondo claro, con un filete debajo. La
   jerarquia va en tres intensidades del mismo azul:
     Most Popular  cinta y boton rellenos
     Good Value    cabecera y boton tintados en claro
     Basic         cabecera en linea y boton solo con borde */
.offer-block .package-header {
  background: transparent;
  color: var(--nr-blue-deep);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  padding: 14px 20px 12px !important;
  border-bottom: 1px solid var(--nr-line);
}

.offer-block .popular-package .package-header {
  background: linear-gradient(180deg, #EFEDF4 0%, #E5E3EC 100%);
  border-bottom-color: var(--nr-blue-soft);
}

.offer-block .basic-package .package-header {
  color: #55566B;
}

/* El borde de la tarjeta sigue la misma escala */
.offer-block .popular-package {
  border-color: var(--nr-blue-soft);
}

/* Tarjeta destacada: acabado "premium" minimalista.
   - Blanco con luz suave desde arriba y halo azul tenue tras los botes.
   - Marco interior de linea fina (::before), como una caja de producto.
   - Sombra de pedestal bajo los botes (product-image::before).
   - Cabecera azul satinada. */
.offer-block .best-value-package {
  color: var(--nr-ink);
  background: #ffffff;
  border-color: var(--nr-blue);
  box-shadow:
    0 30px 60px -30px rgba(10, 63, 92, 0.55),
    0 12px 28px -22px rgba(16, 40, 58, 0.25);
}

.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  position: relative;
  color: var(--nr-ink);
  background:
    /* luz cenital */
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    /* halo azul muy tenue tras los frascos */
    radial-gradient(ellipse 58% 30% at 50% 36%, rgba(14, 96, 137, 0.09) 0%, rgba(14, 96, 137, 0) 100%),
    /* blanco -> bruma azulada apenas perceptible */
    linear-gradient(180deg, #ffffff 0%, #f8fbfc 60%, #eef4f7 100%);
}

/* Marco interior: linea fina azul, separada 10px del borde */
.offer-block .best-value-content::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(14, 96, 137, 0.30);
  border-radius: 10px;
  pointer-events: none;
}

/* Pedestal: sombra elíptica bajo los botes */
.offer-block .best-value-content .product-image {
  position: relative;
}

.offer-block .best-value-content .product-image::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 64%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16, 40, 58, 0.14) 0%, rgba(16, 40, 58, 0) 72%);
}

.offer-block .best-value-content .product-img {
  position: relative;
  z-index: 1;
}

/* Cabecera azul plana: sin satinado, mas tracking y menos peso */
.offer-block .best-value-badge {
  background: linear-gradient(180deg, var(--nr-blue) 0%, var(--nr-blue-deep) 100%);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: none;
}

.offer-block .best-value-content .quantity-number,
.offer-block .best-value-content .supply-text,
.offer-block .best-value-content .price-symbol,
.offer-block .best-value-content .price-amount,
.offer-block .best-value-content .price-per,
.offer-block .best-value-content .final-price,
.offer-block .best-value-content .total-pricing {
  color: var(--nr-ink);
}

/* Pastillas de beneficio: bruma sobre blanco, azul claro sobre la destacada */
.offer-block .savings-badge,
.offer-block .guarantee-badge,
.offer-block .discount-badge {
  background: var(--nr-mist);
  color: var(--nr-ink);
  border: 1px solid var(--nr-line);
}

.offer-block .best-value-content .savings-badge,
.offer-block .best-value-content .discount-badge,
.offer-block .best-value-content .guarantee-badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--nr-ink);
  border: 1px solid rgba(14, 96, 137, 0.2);
  box-shadow: none;
  text-shadow: none;
}

/* "Biggest discount" en la destacada: verde pastel claro, se lee como un
   descuento real y no se confunde con las otras dos pastillas (6.7:1) */
.offer-block .best-value-content .discount-badge {
  background: #e6f5ea;
  color: #14603a;
  border-color: #b9e0c6;
}

.offer-block .best-value-content .discount-badge .checkmark::before {
  color: var(--nr-green);
}

.offer-block .checkmark::before {
  color: var(--nr-blue-deep);
}

/* Etiqueta "Free Shipping" */

/* Precio tachado */
.offer-block .pricing__was,
.offer-block .best-value-content .pricing__was {
  color: var(--nr-red);
  text-decoration-color: var(--nr-red);
  text-decoration-thickness: 2px;
  font-weight: 500;
  margin-right: 0.35em;
}

/* Boton de la tarjeta destacada: azul con texto blanco */
.offer-block .best-value-buy {
  color: #ffffff !important;
  background-image: linear-gradient(to top, var(--nr-blue-deep) 50%, var(--nr-blue) 51%) !important;
  border: 2px solid var(--nr-blue-deep) !important;
  text-shadow: none;
}

.offer-block .best-value-buy:hover {
  background-image: linear-gradient(to bottom, var(--nr-blue-deep) 50%, var(--nr-blue) 51%) !important;
}

.offer-block .best-value-buy .btn-text small {
  color: rgba(255, 255, 255, 0.88);
}

/* Latido del boton destacado. Tres senales suaves y sincronizadas:
     1. el boton "respira": sube 1px y crece un 2% cada 2.4 s
     2. un anillo azul se expande y se desvanece a la vez
     3. un destello claro recorre el boton en diagonal cada 4.8 s
   Sombra de reposo debajo para que se lea en relieve. Al pasar el raton
   el latido para, el boton se eleva y la sombra crece; al pulsar se
   hunde un pelo. */
@keyframes vc-cta-pulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 22px -12px rgba(10, 63, 92, 0.55), 0 0 0 0 rgba(14, 96, 137, 0.55);
  }
  42% {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 30px -12px rgba(10, 63, 92, 0.7), 0 0 0 18px rgba(14, 96, 137, 0);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 22px -12px rgba(10, 63, 92, 0.55), 0 0 0 0 rgba(14, 96, 137, 0);
  }
}

@keyframes vc-cta-sheen {
  0%, 55% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  60%     { opacity: 1; }
  100%    { transform: translateX(740%) skewX(-20deg); opacity: 0; }
}

.offer-block .best-value-buy {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 22px -12px rgba(10, 63, 92, 0.55);
  animation: vc-cta-pulse 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}

/* Destello: una franja clara inclinada que cruza el boton */
.offer-block .best-value-buy::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -30%;
  width: 22%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  animation: vc-cta-sheen 4.8s ease-in-out infinite;
}

.offer-block .best-value-buy:hover,
.offer-block .best-value-buy:focus-visible {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(10, 63, 92, 0.8);
}

.offer-block .best-value-buy:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 6px 14px -10px rgba(10, 63, 92, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .offer-block .best-value-buy,
  .offer-block .best-value-buy::after {
    animation: none;
  }
}

/* Botones de las dos tarjetas laterales. Los dos llevan borde verde
   azulado de 2px para que se lean como botones; se diferencian por el
   relleno: Good Value tintado en claro, Basic solo con borde. */
.offer-block .popular-buy {
  color: var(--nr-blue-deep) !important;
  background-image: linear-gradient(to top, #E0DFE8 50%, #ECEBF1 51%) !important;
  border: 2px solid var(--nr-blue) !important;
  box-shadow: 0 8px 16px -12px rgba(20, 18, 46, 0.6);
}

.offer-block .basic-buy {
  color: var(--nr-blue-deep) !important;
  background-image: linear-gradient(to top, #F5F5F8 50%, #ffffff 51%) !important;
  border: 2px solid var(--nr-blue) !important;
  box-shadow: 0 8px 16px -12px rgba(20, 18, 46, 0.45);
}

.offer-block .popular-buy:hover,
.offer-block .basic-buy:hover {
  background-image: linear-gradient(to bottom, #E0DFE8 50%, #ECEBF1 51%) !important;
  border-color: var(--nr-blue-deep) !important;
}

.offer-block .basic-buy .btn-text small,
.offer-block .popular-buy .btn-text small {
  color: var(--nr-blue-deep);
}

/* Las imagenes de los packs vienen con fondo transparente */
.offer-block .product-img {
  max-height: 225px;
  max-width: 100%;
}

.offer-block .best-value-content .product-img {
  max-height: 245px;
  max-width: 100%;
}

/* ------------------------------------------------------------------
   4. RESPONSIVE
   ------------------------------------------------------------------ */

/* Tablet apaisada: 3 columnas mas apretadas */
@media (min-width: 900px) and (max-width: 1023px) {
  .pricing-grid {
    gap: 0.875rem;
  }
  .offer-block .product-img {
    max-height: 225px;
  }
  .offer-block .best-value-content .product-img {
    max-height: 245px;
  }
  .offer-block .package-content {
    padding: 1.2em 0.75em;
  }
  .offer-block .quantity-number {
    font-size: 1.8em;
  }
  .offer-block .price-amount {
    font-size: 3.2em;
  }
}

/* Movil y tablet en vertical: una columna, la de 6 botellas primero.
   El corte esta en 899px y no en 767px porque a 768px las tres columnas
   dejan tarjetas de ~190px: los botes se ven diminutos y el boton aprieta.
   Apiladas se leen mucho mejor en iPad vertical. */
@media (max-width: 899.98px) {
  .offer-block {
    padding: 2rem 1rem;
  }

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 480px;
  }

  .offer-block .best-value-package { order: 1; }
  .offer-block .popular-package    { order: 2; }
  .offer-block .basic-package      { order: 3; }

  .offer-block .product-img,
  .offer-block .best-value-content .product-img {
    max-height: 220px;
  }
  .offer-block .package-content {
    padding: 1.5em 1.2em;
  }
  .offer-block .quantity-number {
    font-size: 2.2em;
  }
  .offer-block .price-amount {
    font-size: 4em;
  }

  /* La franja se apila: una sola columna y el separador vertical pasa a
     ser una linea horizontal entre los dos datos. */
  .offer-live {
    padding: 0;
  }
  .offer-live-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0.85rem 1rem 1rem;
    text-align: left;
  }
  .offer-live-grid::after {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 1px;
    min-height: 0;
    margin: 0.8rem 0;
    align-self: auto;
  }
  /* Reserva en una sola linea: reloj | rotulo | contador a la derecha */
  .offer-hold {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: 0.7rem;
  }
  .offer-hold::before {
    grid-row: 1;
    width: 30px;
    height: 30px;
    background:
      linear-gradient(var(--nr-blue), var(--nr-blue)) 12px 5px / 2px 9px no-repeat,
      linear-gradient(var(--nr-blue), var(--nr-blue)) 13px 12px / 7px 2px no-repeat;
  }
  .offer-hold-label {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
    line-height: 1.25;
  }
  .offer-live .timer.offer-timer {
    grid-column: 3;
    grid-row: 1;
    font-size: 1.65rem !important;
  }
  .offer-live .timer-expired-message.offer-expired {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 0.35rem !important;
  }
  .offer-stock {
    grid-column: 1;
    grid-row: 3;
    gap: 0.5rem;
  }
  .offer-stock-top {
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    flex-wrap: nowrap;
  }
}

@media (max-width: 480px) {
  .offer-block {
    padding: 1.75rem 0.85rem;
  }
  .offer-live {
    padding: 0;
  }
  .offer-stock-top {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .offer-block .package-content {
    padding: 1.25em 0.9em;
  }
  .offer-block .quantity-number {
    font-size: 1.95em;
  }
  .offer-block .price-amount {
    font-size: 3.5em;
  }
  .offer-block .buy-button {
    font-size: 1.1em;
  }
}

/* ---------------------------------------------------------------------
   Anulacion de la rejilla compacta de movil del template.

   Mas arriba en esta hoja, el template convierte .package-content en una
   rejilla de dos columnas por debajo de 768px (cantidad a la izquierda,
   precio a la derecha). A 320px eso parte "6 BOTTLES" en dos lineas y
   aprieta el bloque. Como aqui las tarjetas ya van apiladas y disponen de
   hasta 480px de ancho, se vuelve al flujo vertical: mismo aspecto que en
   escritorio, solo que mas estrecho.
   --------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .offer-block .package-content,
  .offer-block .best-value-content,
  .offer-block .basic-package .package-content:not(.best-value-content),
  .offer-block .popular-package .package-content:not(.best-value-content) {
    /* display: block retirado (26 sep): ahora las 3 tarjetas usan la rejilla
       de dos columnas en movil, ver bloque "Las TRES tarjetas en dos columnas". */
    padding: 1.15em 1em 1.2em !important;
  }

  .offer-block .package-quantity,
  .offer-block .product-image,
  .offer-block .price-display,
  .offer-block .badges-group,
  .offer-block .buy-button,
  .offer-block .payment-icons,
  .offer-block .total-pricing {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
  }

  .offer-block .package-quantity {
    padding: 0.5em 0.5em 0.3em !important;
    text-align: center !important;
  }

  .offer-block .quantity-number {
    font-size: 2.1em !important;
  }

  .offer-block .supply-text {
    font-size: 1em !important;
  }

  .offer-block .price-display {
    margin: 0 auto !important;
    width: fit-content !important;
  }

  .offer-block .price-symbol {
    font-size: 1.8em !important;
  }

  .offer-block .price-amount {
    font-size: 3.8em !important;
    letter-spacing: normal !important;
  }

  .offer-block .product-img,
  .offer-block .best-value-content .product-img {
    max-height: 220px !important;
    max-width: 100% !important;
    margin: 0 auto;
  }

  /* El template alineaba el grupo de pastillas a la derecha
     (align-items: end) y el total a la izquierda: aqui todo vuelve al
     centro, en una sola columna, con el mismo ancho para las tres
     pastillas. */
  .offer-block .product-image {
    display: flex !important;
    justify-content: center !important;
    align-self: auto !important;
    margin: 0.4em auto 0.3em !important;
  }

  .offer-block .badges-group,
  .offer-block .best-value-content .badges-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0.3em auto 0.5em !important;
    gap: 0.4rem !important;
  }

  .offer-block .package-content .badges-group .savings-badge,
  .offer-block .package-content .badges-group .discount-badge,
  .offer-block .package-content .badges-group .guarantee-badge,
  .offer-block .best-value-content .badges-group .savings-badge,
  .offer-block .best-value-content .badges-group .discount-badge,
  .offer-block .best-value-content .badges-group .guarantee-badge {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 0.58em 1em !important;
    font-size: 0.9375rem !important;
  }

  .offer-block .buy-button {
    margin: 0.45em auto !important;
  }

  .offer-block .total-pricing,
  .offer-block .best-value-content .total-pricing {
    text-align: center !important;
    margin: 0.8em auto 0 !important;
  }
}

@media (max-width: 480px) {
  .offer-block .quantity-number {
    font-size: 1.95em !important;
  }
  .offer-block .price-amount {
    font-size: 3.4em !important;
  }
  .offer-block .package-content,
  .offer-block .best-value-content,
  .offer-block .basic-package .package-content:not(.best-value-content),
  .offer-block .popular-package .package-content:not(.best-value-content) {
    padding: 1.05em 0.85em 1.1em !important;
  }
}

/* =======================================================================
   5. BARRA FIJA DE URGENCIA (#vc-bar)
   Marcado: primera linea del <body> de index.html.
   Comportamiento: script "BARRA FIJA" al final del <body>.
   Copia compacta de la franja .offer-live-grid: reloj + estado del stock
   + boton. Entra deslizandose desde arriba cuando la franja original sale
   de pantalla. main.js la mantiene al dia (#min3/#seg3, .countdown,
   [data-stock-bar]). Las variables se repiten aqui porque la barra vive
   fuera de .offer-block.
   ===================================================================== */
.vc-bar {
  --nr-ink: #10283a;
  --nr-blue: #0e6089;
  --nr-blue-deep: #0a3f5c;
  --nr-hot: #cf7a3e;
  --nr-line: #d9e6ed;
  --nr-green: #0f7a4a;
  --nr-red: #b3362b;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding-top: env(safe-area-inset-top, 0px);
  /* Blanco solido, SIN backdrop-filter: el blur obligaba al navegador a
     recomponer la barra en cada frame de scroll (con el video debajo) y
     la barra parpadeaba en desktop. Fondo opaco = cero titileo. */
  background: #ffffff;
  border-bottom: 1px solid var(--nr-line);
  box-shadow: 0 10px 28px -20px rgba(16, 40, 58, 0.45);
  color: var(--nr-ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  transform: translateY(-110%);
  /* visibility con retardo: el enlace sale del orden de tabulacion al
     ocultarse, pero la animacion de salida se sigue viendo. */
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s;
  will-change: transform;
}

.vc-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.vc-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
}

/* --- Reserva --- */
.vc-bar-hold {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
}

.vc-bar-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #667085; /* 4.8:1 sobre blanco (AA) */
}

.vc-bar-timer {
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--nr-ink);
  transition: color 0.3s ease;
}

body.vc-timer-urgent .vc-bar-timer {
  color: var(--nr-red);
}

.vc-bar-expired {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nr-red);
}

.vc-bar-timer[hidden],
.vc-bar-expired[hidden] {
  display: none;
}

/* --- Stock --- */
.vc-bar-stock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.35rem;
  min-width: 0;
}

.vc-bar-live {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nr-green);
  white-space: nowrap;
}

.vc-bar-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nr-green);
  flex-shrink: 0;
}

.vc-bar-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--nr-green);
  opacity: 0.5;
  animation: offer-live-pulse 2s ease-out infinite;
}

.vc-bar-left {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 1rem;
  color: #475467;
  white-space: nowrap;
}

.vc-bar-left .countdown {
  font-weight: 800;
  font-size: 1.1em;
  color: var(--nr-red);
  font-variant-numeric: tabular-nums;
}

.vc-bar-track {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e3ebef;
  overflow: hidden;
}

.vc-bar-fill {
  display: block;
  height: 100%;
  width: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nr-hot), var(--nr-red));
  transition: width 0.6s ease;
}

/* --- Boton --- */

/* --- Movil: una sola linea de ~52px --- */
@media (max-width: 899.98px) {
  .vc-bar-inner {
    padding: 0.45rem 0.8rem;
    gap: 0.8rem;
  }
  /* La etiqueta sigue en el arbol de accesibilidad, solo deja de verse */
  .vc-bar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .vc-bar-hold {
    position: relative;
    align-items: center;
  }
  /* Reloj pequeno para que "20:00" tenga contexto visual */
  .vc-bar-hold::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--nr-blue);
    background:
      linear-gradient(var(--nr-blue), var(--nr-blue)) 6px 2px / 2px 5px no-repeat,
      linear-gradient(var(--nr-blue), var(--nr-blue)) 7px 6px / 4px 2px no-repeat;
  }
  .vc-bar-timer {
    font-size: 1.2rem;
  }
  .vc-bar-stock {
    column-gap: 0.5rem;
    row-gap: 0.28rem;
  }
  .vc-bar-track {
    height: 4px;
  }
  .vc-bar-live-text {
    display: none;
  }
  .vc-bar-left {
    justify-self: start;
    font-size: 0.82rem;
  }
  
}

@media (max-width: 480px) {
  
  
  
  .vc-bar-inner {
    gap: 0.6rem;
    padding: 0.42rem 0.7rem;
  }
  
  .vc-bar-timer {
    font-size: 1.15rem;
  }
  /* Estado expirado: "Last chance" es mas ancho que el reloj */
  .vc-bar-expired {
    font-size: 0.85rem;
  }
  /* Red de seguridad: antes que pisar el boton, se recorta con puntos */
  .vc-bar-left {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .vc-bar-inner {
    gap: 0.45rem;
  }
  .vc-bar-hold::before {
    display: none;
  }
  .vc-bar-dot {
    display: none;
  }
  .vc-bar-left {
    font-size: 0.8rem;
  }
  .vc-bar-timer {
    font-size: 1.15rem;
  }
  .vc-bar-expired {
    font-size: 0.8rem;
  }
  /* La fila "SALE IS LIVE / Only N kits left" de la franja no cabe en
     una linea a 320px: se deja partir. */
  .offer-stock-top {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
}

/* Con la barra fija arriba, el scroll por foco (Tab) y por ancla deja
   sitio para no quedar debajo de ella. Va en html y body porque el
   template hace del body el contenedor de scroll. */
html,
body {
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  .vc-bar {
    transition: none;
  }
  .vc-bar-dot::after {
    animation: none;
  }
}

/* =======================================================================
   GARANTIA — sin marco, sello al lado, alineada con la tarjeta de oferta
   ===================================================================== */
.gtee {
  /* Antes 620px: en un portatil quedaba una columna estrecha y perdida en
     medio de la pantalla. Ahora acompana el ancho de las tarjetas. */
  max-width: 1040px;
  margin: 0 auto;
  padding: 3rem 1.25rem 3.25rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.gtee-main {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.gtee-seal {
  flex: 0 0 auto;
  width: clamp(122px, 13vw, 180px);
  height: auto;
}

.gtee-body {
  min-width: 0;
}

.gtee-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b42318;
}

.gtee-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 1.5vw + 1.05rem, 2.375rem);   /* hasta 38px */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #101828;
  text-wrap: balance;
}

.gtee-copy {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #475467;
  max-width: 62ch;
}

/* Bloque de sellos de calidad */
.gtee-certs-block {
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid #eaecf0;
  text-align: center;
}

.gtee-certs-label {
  margin: 0 0 1.15rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #98a2b3;
}

.gtee-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.875rem clamp(0.75rem, 2.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gtee-certs li {
  flex: 0 0 auto;
  line-height: 0;
}

.gtee-certs img {
  display: block;
  width: clamp(58px, 11vw, 92px);
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
  .gtee {
    padding: 2rem 1rem 2.25rem;
  }
  .gtee-main {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }
  .gtee-seal {
    width: 96px;
  }
  .gtee-copy {
    font-size: 0.9rem;
  }
  .gtee-certs-block {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
  .gtee-certs-label {
    margin-bottom: 0.875rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
  .gtee-certs {
    gap: 0.75rem 0.625rem;
  }
}

/* =======================================================================
   CABECERA DE LA SECCION DE RESENAS
   Sustituye el titulo azul (text-4xl text-blue-600) por la misma tipografia
   y paleta que el resto de la pagina, alineada con la tarjeta de oferta.
   ===================================================================== */
.reviews-section .reviews-col {
  max-width: 620px !important;
  margin-left: auto;
  margin-right: auto;
}

.reviews-head {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eaecf0;
  text-align: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.reviews-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b42318;
}

.reviews-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.375rem, 1.2vw + 1.05rem, 1.875rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #101828;
  text-wrap: balance;
}

.reviews-sub {
  margin: 0;
  font-size: clamp(0.9375rem, 0.3vw + 0.87rem, 1.0625rem);
  font-weight: 500;
  line-height: 1.5;
  color: #475467;
}

.reviews-subhead {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #101828;
  text-align: left;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

@media (max-width: 600px) {
  .reviews-head {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
  .reviews-subhead {
    font-size: 0.9rem;
  }
}

/* =======================================================================
   TARJETAS DE RESENA
   Solo estilo: se conserva el markup y la logica del boton "Helpful"
   (public/main.js sigue usando .helpful-button y .helpful-clicked).
   ===================================================================== */
.reviews-col .review-card {
  padding: 1.125rem 1.25rem 1rem !important;
  background: #fff !important;
  border: 1px solid #eaecf0;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.reviews-col .review-head {
  gap: 0;
  margin-bottom: 0.625rem !important;
}

.reviews-col .review-avatar {
  width: 34px !important;
  height: 34px !important;
  margin-right: 0.625rem !important;
  border: 1px solid #eaecf0;
}

.reviews-col .review-author {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #101828;
}

.reviews-col .review-stars {
  color: #f79009;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.reviews-col .review-title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #101828;
}

/* Linea de fecha / compra / verificado */
.reviews-col .review-meta {
  margin-bottom: 0.625rem !important;
  font-size: 0.75rem !important;
  line-height: 1.5;
  color: #667085 !important;
}

.reviews-col .review-meta > div {
  flex-wrap: wrap;
  gap: 0 0.25rem;
}

/* Sello de compra verificada: discreto, sin naranja chillon */
.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #067647;
  white-space: nowrap;
}

.review-verified-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

/* Texto de la resena */
.reviews-col .review-card .text-gray-900.leading-relaxed {
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  color: #344054 !important;
}

.reviews-col .review-helpful-count {
  font-size: 0.75rem !important;
  color: #98a2b3 !important;
}

/* Acciones */
.reviews-col .review-card .helpful-button {
  padding: 0.3rem 0.75rem !important;
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #344054 !important;
}

.reviews-col .review-card .helpful-button:hover {
  background: #f9fafb !important;
  border-color: #98a2b3 !important;
}

.reviews-col .review-card .space-x-6 > button:last-child,
.reviews-col .review-card .text-gray-600 {
  font-size: 0.75rem !important;
  color: #667085 !important;
}

@media (max-width: 600px) {
  .reviews-col .review-card {
    padding: 1rem 1rem 0.875rem !important;
  }
  .reviews-col .review-title {
    font-size: 0.9rem;
  }
}

/* =======================================================================
   SECCION DE COMENTARIOS (ESTILO FACEBOOK)
   Va encima de las referencias cientificas. Usa la pila de fuentes del
   sistema (no Inter) para que se lea como un embed real de Facebook.
   ===================================================================== */
.fb-comments {
  padding: 2rem 1.25rem 2.5rem;
}

.fbc-panel {
  max-width: 620px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
}

.fbc-count {
  margin: 0 0 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #65676b;
  text-align: center;
}

/* --- Comentario --- */
.fbc-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1.125rem;
}

.fbc-item:last-of-type {
  margin-bottom: 1.25rem;
}

.fbc-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 50%;
  object-fit: cover;
  background: #e4e6eb;
}

.fbc-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Burbuja gris del comentario */
.fbc-bubble {
  padding: 0.5rem 0.75rem 0.625rem;
  background: #f0f2f5;
  border-radius: 18px;
}

.fbc-name {
  display: inline-block;
  margin-bottom: 0.15rem;
  color: #387898;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.fbc-name:hover {
  text-decoration: underline;
}

.fbc-text {
  margin: 0;
  color: #050505;
  font-size: 0.875rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Fila de acciones: Like · Reply · tiempo + pastilla de reacciones */
.fbc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.3rem;
  padding: 0 0.75rem;
}

.fbc-links {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #65676b;
}

.fbc-links a {
  color: #65676b;
  font-weight: 700;
  text-decoration: none;
}

.fbc-links a:hover {
  text-decoration: underline;
}

.fbc-dot {
  color: #8a8d91;
}

.fbc-time {
  color: #65676b;
}

/* Pastilla blanca con el icono de like + corazon. Sube al borde inferior de la
   burbuja gris (como en Facebook) sin descolocar la fila (transform, no margin). */
.fbc-reactions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  padding: 0.1rem 0.4rem 0.1rem 0.25rem;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
  transform: translateY(-0.95rem);
}

.fbc-reactions img {
  display: block;
  width: 34px;
  height: auto;
}

.fbc-reaction-count {
  font-size: 0.75rem;
  color: #65676b;
}

.fbc-closed {
  margin: 0;
  padding-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #65676b;
  text-align: center;
}

@media (max-width: 600px) {
  .fb-comments {
    padding: 1.5rem 0.5rem 2rem;   /* menos margen lateral: los comentarios aprovechan mas ancho */
  }
  .fbc-panel {
    max-width: none;               /* que ocupe todo el ancho disponible en movil */
    padding: 1rem 0.6rem 1.25rem;  /* padding interno menor */
  }
  .fbc-avatar {
    width: 34px;
    height: 34px;
  }
  .fbc-item {
    gap: 0.45rem;
  }
  .fbc-actions {
    padding: 0 0.5rem;
    gap: 0.5rem;
  }
  .fbc-text {
    font-size: 0.84375rem;
  }
}

/* =======================================================================
   AVISO DE DISPONIBILIDAD DEL VIDEO
   Sustituye a "02:52 · Source: NEWS". La fecha la escribe main.js.
   ===================================================================== */
.video-expiry {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.875rem 0 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #475467;
}

.video-expiry-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  transform: translateY(2px);
  color: #b42318;
  opacity: 0.75;
}

/* La fecha es lo unico en rojo: destaca sin endurecer la frase */
.video-expiry .current-date {
  font-weight: 600;
  color: #b42318;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .video-expiry {
    font-size: 0.8125rem;
  }
}

/* =======================================================================
   100% QUALITY ASSURANCE
   Bloque de confianza en rojo profundo, justo antes del ultimo CTA.
   Contenido a 620px como el resto de la pagina, no a sangre completa.
   ===================================================================== */
.quality-assurance {
  padding: 2.5rem 1.25rem 3rem;
}

.qa-card {
  /* Antes 620px: en un PC quedaba una tarjeta estrecha con mucho aire
     muerto a los lados. Ahora acompana el ancho de la garantia. */
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(2rem, 3.2vw, 3.25rem) clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, #8f2c26 0%, #7e2621 100%);
  border-radius: 16px;
  box-shadow: 0 12px 32px -14px rgba(127, 38, 33, 0.55);
  text-align: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Estrellas */
.qa-stars {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.qa-stars svg {
  width: clamp(22px, 2.2vw, 30px);
  height: clamp(22px, 2.2vw, 30px);
  fill: #f7c948;
}

.qa-title {
  margin: 0 0 1.15rem;
  font-size: clamp(1.5rem, 1.5vw + 1.05rem, 2.375rem);   /* hasta 38px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.qa-copy {
  /* Medida en ch: la linea no pasa de ~66 caracteres por ancha que sea
     la tarjeta, que es lo comodo de leer. */
  max-width: 66ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #f3d9d6;
  text-align: left;
}

.qa-copy strong {
  font-weight: 700;
  color: #fff;
}

/* Filas de sellos */
.qa-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qa-badges li {
  flex: 0 0 auto;
  line-height: 0;
}

.qa-badges--wide {
  gap: 0.75rem clamp(0.625rem, 1.6vw, 1.25rem);
  margin-top: 2rem;
}

.qa-badge-wide {
  display: block;
  height: clamp(38px, 5.2vw, 62px);
  width: auto;
  border-radius: 4px;
}

.qa-badges--round {
  gap: 0.75rem clamp(0.5rem, 2vw, 1.375rem);
  margin-top: 1.25rem;
}

.qa-badge-round {
  display: block;
  width: clamp(52px, 7.5vw, 86px);
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
  .quality-assurance {
    padding: 1.5rem 1rem 2rem;
  }
  .qa-card {
    padding: 1.5rem 1.125rem 1.375rem;
    border-radius: 14px;
  }
  .qa-stars svg {
    width: 19px;
    height: 19px;
  }
  .qa-copy {
    font-size: 0.875rem;
  }
  .qa-badges--wide {
    gap: 0.5rem;
    margin-top: 1.25rem;
  }
}

/* =======================================================================
   REPRODUCTOR VTURB (vturb-smartplayer)
   Marcado: <vturb-smartplayer> bajo el titular, en index.html.
   Tamano en reposo: 400px de ancho como maximo en movil/tablet y mas
   grande en escritorio (tope de 620px o el 62% del alto de la ventana,
   lo que sea menor, para que el video 4:5 quepa entero en pantalla).
   El player.js de VTurb escribe en linea
       max-width: var(--player-vertical-width, 400px)
   asi que el ancho se fija con ESA variable (es la via oficial); la
   max-width de aqui es solo respaldo hasta que el script arranca.
   Selectores de tipo, sin !important: cualquier clase o estilo en linea
   que el player anada al expandirse (experiencia fullscreen, activada en
   el panel de VTurb) gana sobre estas reglas.
   ===================================================================== */
vturb-smartplayer {
  --player-vertical-width: 400px;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: var(--player-vertical-width);
}

@media (min-width: 768px) {
  vturb-smartplayer {
    --player-vertical-width: min(620px, 62vh);
  }
}

/* Nada mas: el modo expandido del player (experiencia fullscreen) se
   dibuja con z-index 9999999 dentro del propio componente, por encima
   de la barra fija de urgencia (z-index 9000). La pagina no anade ni
   detecta nada sobre el player mientras reproduce. */

/* =======================================================================
   INTERCAMBIO DE SECCIONES AL REVELARSE LA OFERTA
   Antes del revelado se ven los comentarios de Facebook y las referencias
   cientificas. Cuando el boton de VTurb abre #esconder, el script anade
   .offer-revealed al <body> y esas dos secciones se retiran, para no
   alargar la pagina y dejar el foco en la oferta.
   ===================================================================== */
body.offer-revealed .pre-offer-only {
  display: none !important;
}

/* =====================================================================
   CAPA DE LEGIBILIDAD
   Objetivo: que la pagina se lea comoda a los 80 anos.

   Va al final de la hoja a proposito: es la ultima palabra del cascade.
   Muchas reglas del template llevan !important, asi que aqui tambien se
   usa donde hace falta pisarlas.

   Minimos que respeta:
     - texto corrido ............ 17px  (antes 15-16)
     - letra pequena / pies ..... 15px  (antes 11-13)
     - etiquetas en mayusculas .. 13px  (van espaciadas, se leen mayores)
     - interlineado del cuerpo .. 1.6 o mas
   ===================================================================== */

/* --- 1. Cabecera del articulo ------------------------------------- */
.article-meta {
  font-size: 0.9375rem;   /* 15px */
}
.article-author-info {
  font-size: 1rem;        /* 16px */
}
.author-name {
  font-size: 1rem;
}
.signin {
  font-size: 0.9375rem;
}

/* --- 2. Barra de venta en vivo ------------------------------------ */
.offer-eyebrow {
  font-size: 0.8125rem;   /* 13px, en mayusculas */
  letter-spacing: 0.12em;
}
.offer-deadline {
  font-size: 1.125rem;    /* 18px */
  line-height: 1.6;
}
.offer-hold-label {
  font-size: 0.8125rem;   /* 13px */
  letter-spacing: 0.08em;
}
.offer-stock-top {
  font-size: 1rem;        /* 16px */
}
.offer-live-tag {
  font-size: 0.9375rem;   /* 15px */
}
.offer-stock-left {
  font-size: 1rem;
}
.offer-stock-note {
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.5;
}
.offer-stock-track {
  height: 8px;            /* barra algo mas gruesa, se ve mejor */
}
.offer-live .timer-expired-message.offer-expired {
  font-size: 1.0625rem !important;  /* 17px */
  line-height: 1.5 !important;
}

/* --- 3. Tarjetas de precio ---------------------------------------- */
.offer-block .package-header {
  font-size: 13px;
  letter-spacing: 0.14em;
}
.offer-block .supply-text {
  font-size: 0.82em !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #6b7480 !important;
  letter-spacing: 0.01em;
}
.offer-block .price-per {
  font-size: 0.8em;
  gap: 0.18em;
  font-weight: 600;
  color: #8a929b;             /* "PER BOTTLE" en gris suave, no negro */
  letter-spacing: 0.08em;
}

/* Coste por dia bajo "PER BOTTLE": un dato mas en la misma altura de fila,
   en peso normal y gris suave para que quede sutil (4.8:1 sobre blanco) */
.offer-block .price-day {
  font-size: 0.86em;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #9aa1a9;             /* "$2.63 a day" aun mas tenue */
  white-space: nowrap;
}
.offer-block .best-value-content .price-day {
  color: #586d80;
}

/* Las pastillas de beneficios eran 0.7em (~11px): el punto mas ilegible
   de la tarjeta. Suben a ~15px y ganan aire vertical. */
.offer-block .savings-badge,
.offer-block .guarantee-badge,
.offer-block .discount-badge {
  font-size: 0.85em;
  padding: 0.66em 0.6em;
  border-radius: 0.6em;
}

.offer-block .buy-button {
  font-size: 1.4em;
  padding: 0.6em 1.2em;
}
.offer-block .buy-button .btn-text small {
  font-size: 0.55em;
}

.offer-block .total-pricing {
  font-size: 1.08em;
}
.offer-block .shipping {
  font-size: 1.05em;
}

/* --- 3b. Pie del video y aviso de caducidad ------------------------ */
.video-caption .description {
  font-size: 1.0625rem;   /* 17px, antes 15 */
  line-height: 1.6;
}
.video-expiry {
  font-size: 1rem;
}

/* --- 4. Garantia --------------------------------------------------- */
.gtee-eyebrow,
.gtee-certs-label {
  font-size: 0.8125rem;   /* 13px */
  letter-spacing: 0.1em;
}
.gtee-copy {
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.65;
}

/* --- 5. Calidad / fabricacion -------------------------------------- */
.qa-copy {
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* --- 6. Resenas ---------------------------------------------------- */
.reviews-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
}
.reviews-sub {
  font-size: 1.1875rem;   /* 19px */
}
.reviews-subhead {
  font-size: 1.0625rem;   /* 17px */
}
.reviews-col .review-title,
.reviews-col .review-author {
  font-size: 1.0625rem !important;
  line-height: 1.4 !important;
}
/* Cuerpo de la resena: era 12px */
.reviews-col .review-card .text-gray-900.leading-relaxed {
  font-size: 1.0625rem !important;  /* 17px */
  line-height: 1.6 !important;
}
.reviews-col .review-meta,
.reviews-col .review-meta > div,
.reviews-col .review-card .text-gray-600 {
  font-size: 0.9375rem !important;  /* 15px */
  line-height: 1.5 !important;
}
.review-verified {
  font-size: 0.9375rem !important;
}
.reviews-col .review-card .helpful-button {
  font-size: 0.9375rem !important;
  padding: 0.45em 0.9em;
}
.reviews-col .review-helpful-count {
  font-size: 0.9375rem !important;
}

/* --- 7. Comentarios de Facebook ------------------------------------ */
.fbc-name {
  font-size: 1rem;
}
.fbc-text {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.fbc-time,
.fbc-dot,
.fbc-reaction-count,
.fbc-count,
.fbc-closed,
.fbc-links {
  font-size: 0.9375rem;
}

/* --- 8. Referencias cientificas ------------------------------------ */
/* Iban a 12px (text-xs) y en dos columnas: lo peor para leer. */
#references-content {
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.55;
}
#references-content .font-semibold,
#references-content .italic {
  font-size: inherit;
}

/* --- 9. Pie -------------------------------------------------------- */
.footer-link,
.footer-copyright p {
  font-size: 0.9375rem;
}

/* =====================================================================
   MOVIL — mismos minimos, sin encoger la letra pequena
   El template reducia varios de estos tamanos por debajo de 768px; aqui
   se mantienen para que el texto siga siendo legible en el telefono.
   ===================================================================== */
@media (max-width: 899.98px) {
  .article-meta {
    font-size: 0.875rem;
  }
  .article-author-info {
    font-size: 0.9375rem;
  }

  .offer-deadline {
    font-size: 1.0625rem;   /* 17px */
  }
  .offer-stock-note {
    font-size: 0.9375rem;
  }

  .offer-block .supply-text {
    font-size: 1.1em !important;
  }
  .offer-block .savings-badge,
  .offer-block .guarantee-badge,
  .offer-block .discount-badge {
    font-size: 0.9375rem !important;   /* 15px: en em quedaban en 10px */
  }
  .offer-block .buy-button {
    font-size: 1.3em;
  }
  .offer-block .total-pricing {
    font-size: 1.2em;
  }

  .gtee-copy,
  .qa-copy {
    font-size: 1.0625rem;
  }

  .reviews-col .review-card .text-gray-900.leading-relaxed,
  .fbc-text {
    font-size: 1.0625rem !important;
  }

  /* Una sola columna de referencias: en dos, a 15px, no hay quien lea */
  #references-content {
    column-count: 1 !important;
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {
  .offer-block .buy-button {
    font-size: 1.2em;
  }
  .offer-block .savings-badge,
  .offer-block .guarantee-badge,
  .offer-block .discount-badge {
    font-size: 0.9rem !important;
  }
}

/* --- 10. Ultimos focos de letra pequena ---------------------------
   Detectados midiendo la pagina renderizada: eran los seis puntos que
   seguian por debajo del minimo tras la primera pasada. --------------- */

/* Subtitulo del boton de compra ("Basic", "Best Offer!"). Iba en em
   sobre un boton en em, y se quedaba en 12px. Se fija en rem. */
.offer-block .buy-button .btn-text small {
  font-size: 0.9375rem !important;   /* 15px */
  line-height: 1.3;
}

/* Estrellas de las resenas */
.reviews-col .review-stars {
  font-size: 1.125rem !important;    /* 18px */
}

/* Enlaces de accion de la resena ("Share"). Es un <button> con utilidades
   tipo Tailwind; hace falta nombrar la etiqueta para ganar especificidad. */
/* El rival es «.reviews-col .review-card .space-x-6 > button:last-child»,
   con mas especificidad que un simple button.text-sm. Se repite tal cual
   para igualarlo y, al ir despues en la hoja, ganar. */
.reviews-col .review-card button.text-sm,
.reviews-col .review-card .space-x-6 > button,
.reviews-col .review-card .space-x-6 > button:last-child {
  font-size: 0.9375rem !important;
}

/* Aviso de caducidad bajo el video */
.video-expiry {
  font-size: 1rem;
  line-height: 1.55;
}
.video-expiry .current-date {
  font-size: inherit;
}

/* Boton "Show More" de las referencias */
#references-toggle,
#toggle-text {
  font-size: 1.0625rem;              /* 17px */
}
#references-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 899.98px) {
  .offer-block .buy-button .btn-text small {
    font-size: 0.875rem !important;  /* 14px */
  }
  .video-expiry {
    font-size: 0.9375rem;
  }
}

/* --- 11. Movil: focos que el template encogia a 10-12px -------------
   Medido en un iframe de 390px. Eran los peores puntos de toda la
   pagina para una vista cansada. --------------------------------------- */
@media (max-width: 899.98px) {
  /* Pastillas de beneficio: el <span> interior bajaba a 10px */
  .offer-block .badges-group span,
  .offer-block .savings-badge span,
  .offer-block .guarantee-badge span,
  .offer-block .discount-badge span {
    font-size: 0.9375rem !important;   /* 15px */
    line-height: 1.3 !important;
  }

  /* "PER / BOTTLE" junto al precio */
  .offer-block .price-per,
  .offer-block .price-per span {
    font-size: 0.72rem !important;     /* ~11.5px: sutil */
    line-height: 1.22 !important;
  }
  .offer-block .price-per .price-day {
    font-size: 0.68rem !important;     /* "a day" un punto mas pequeno */
  }

  /* Cabecera de cada resena */
  .reviews-col .review-card .review-author,
  .reviews-col .review-card .review-title,
  .reviews-col .review-card .font-bold.text-gray-900 {
    font-size: 1.0625rem !important;   /* 17px */
    line-height: 1.4 !important;
  }

  .reviews-col .review-card .review-stars,
  .reviews-col .review-card .flex.text-orange-400 {
    font-size: 1.125rem !important;    /* 18px */
  }

  /* Fecha de la resena y contador de "helpful" */
  .reviews-col .review-card p,
  .reviews-col .review-card .review-helpful-count,
  .reviews-col .review-card .text-sm.text-gray-700 {
    font-size: 0.9375rem !important;   /* 15px */
    line-height: 1.5 !important;
  }

  /* El cuerpo de la resena manda sobre la regla generica de arriba */
  .reviews-col .review-card p.text-gray-900.leading-relaxed {
    font-size: 1.0625rem !important;   /* 17px */
    line-height: 1.6 !important;
  }
}

/* =====================================================================
   ESCRITORIO — un punto mas de cuerpo en todo el texto
   Solo a partir de 1024px: en movil y tablet se mantienen los tamanos
   de la capa de legibilidad. Texto corrido a 19px, letra pequena a 16,
   etiquetas en mayusculas a 14, subtitulos y pies un punto mayores,
   interlineados de 1.6 a 1.65.
   ===================================================================== */
@media (min-width: 1024px) {
  /* Cabecera y titular */
  .nav-item { font-size: 1.0625rem; }
  .article-meta { font-size: 1rem; }
  .article-author-info,
  .author-name { font-size: 1.0625rem; }
  .headline { font-size: clamp(27px, 1.3vw + 13px, 34px); letter-spacing: -0.018em; }
  .subheadline { font-size: 1.3125rem; line-height: 1.5; }

  /* Pie del video */
  .video-caption .description { font-size: 1.1875rem; line-height: 1.6; }
  .video-expiry { font-size: 1.0625rem; }

  /* Franja de venta en vivo */
  .offer-eyebrow,
  .offer-hold-label { font-size: 0.875rem; }
  .offer-title { font-size: clamp(1.75rem, 1.3vw + 1.25rem, 2.375rem); }
  .offer-deadline { font-size: 1.25rem; }
  .offer-live-tag { font-size: 1rem; }
  .offer-stock-top,
  .offer-stock-left { font-size: 1.0625rem; }

  /* Tarjetas de precio */
  .offer-block .package-header { font-size: 13px; }
  .offer-block .supply-text { font-size: 0.88em !important; }
  .offer-block .price-per { font-size: 1em; }
  .offer-block .savings-badge,
  .offer-block .guarantee-badge,
  .offer-block .discount-badge { font-size: 1.02em; }
  .offer-block .buy-button .btn-text small { font-size: 0.7em; }
  .offer-block .total-pricing { font-size: 1.12em; }

  /* Garantia y calidad */
  .gtee-eyebrow,
  .gtee-certs-label,
  .reviews-eyebrow { font-size: 0.875rem; }
  .gtee-copy,
  .qa-copy { font-size: 1.1875rem; line-height: 1.65; }

  /* Resenas */
  .reviews-sub { font-size: 1.25rem; }
  .reviews-subhead { font-size: 1.125rem; }
  .reviews-col .review-title,
  .reviews-col .review-author { font-size: 1.125rem !important; }
  .reviews-col .review-card .text-gray-900.leading-relaxed { font-size: 1.15rem !important; line-height: 1.65 !important; }
  .reviews-col .review-meta,
  .reviews-col .review-meta > div,
  .reviews-col .review-card .text-gray-600,
  .review-verified,
  .reviews-col .review-card .helpful-button,
  .reviews-col .review-helpful-count { font-size: 1rem !important; }

  /* Comentarios de Facebook */
  .fbc-name { font-size: 1.0625rem; }
  .fbc-text { font-size: 1.15rem; line-height: 1.6; }
  .fbc-time,
  .fbc-dot,
  .fbc-reaction-count,
  .fbc-count,
  .fbc-closed,
  .fbc-links { font-size: 1rem; }

  /* Referencias y pie */
  .scientific-references h2 { font-size: 1.75rem; }
  #references-content { font-size: 1.0625rem; line-height: 1.6; }
  .footer-link,
  .footer-copyright p { font-size: 1rem; }

  /* Barra fija */
  .vc-bar-label { font-size: 0.875rem; }
  .vc-bar-left { font-size: 1.0625rem; }
}

/* =====================================================================
   TARJETAS MAS COMPACTAS EN TRES COLUMNAS (>= 900px)
   La seccion de packs media 1250px de alto: no cabia una tarjeta entera
   en un portatil. Aqui se recorta relleno y margenes, los frascos y el
   precio van un poco mas contenidos y las pastillas apiladas con menos
   aire. Nada cambia de sitio; solo hay menos espacio vertical.
   (Se probo poner las pastillas en dos columnas: con 341px utiles por
   tarjeta, "60 days guarantee" no cabe sin recortar texto.)
   ===================================================================== */
@media (min-width: 900px) {
  .offer-block {
    padding: 2rem 1.25rem 2.25rem;
  }
  .offer-live {
    margin-bottom: 1.4rem;
  }
  .offer-eyebrow {
    margin-bottom: 0.5rem;
  }
  .offer-title {
    margin-bottom: 0.3rem;
  }
  .offer-deadline {
    margin-bottom: 0.9rem;
  }
  .offer-live-grid {
    padding: 0.75rem 1.5rem;
  }
  .offer-block .package-content,
  .offer-block .best-value-content {
    padding: 1.05em 1.1em 1.2em;
  }
  .offer-block .package-quantity {
    padding: 0.5em 0.5em 0.3em;
  }
  .offer-block .product-image {
    margin: 0.45em 0 0.3em;
  }
  .offer-block .product-img {
    max-height: 225px;
  }
  .offer-block .best-value-content .product-img {
    max-height: 245px;
  }
  .offer-block .price-amount {
    font-size: 3.6em;
  }
  .offer-block .badges-group,
  .offer-block .best-value-content .badges-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35em !important;
    margin: 0.4em 0 0.5em !important;
  }
  .offer-block .badges-group .savings-badge,
  .offer-block .badges-group .guarantee-badge,
  .offer-block .badges-group .discount-badge {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.5em 0.6em;
  }
  .offer-block .buy-button {
    padding: 0.45em 1.1em;
    margin: 0.4em auto;
  }
  /* Sin iconos de pago: el total va justo debajo del boton, con un hueco leve */
  .offer-block .total-pricing {
    margin-top: 0.8em;
  }
}

/* =====================================================================
   ENVIO BAJO EL TOTAL — etiqueta minimalista
   6 y 3 frascos: pastilla fina con camion, "Free US shipping" en el
   azul de la marca: se lee como un beneficio del pack.
   2 frascos: "+ Shipping" en rojo, solo texto.
   ===================================================================== */
.offer-block .shipping {
  display: flex;
  justify-content: center;
  margin-top: 0.45em;
  font-size: 1em;
  text-transform: none;
}

.offer-block .ship-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.7rem;         /* ~11px, mas discreto */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.offer-block .ship-tag--free {
  padding: 0.5em 0.95em 0.5em 0.8em;
  border-radius: 999px;
  color: var(--nr-blue-deep);
  background: var(--nr-mist);
  border: 1px solid var(--nr-blue-soft);
}

/* En la destacada la pastilla va un punto mas presente */
.offer-block .best-value-content .ship-tag--free {
  background: #e5eff4;
  border-color: var(--nr-blue);
}

.offer-block .ship-ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* Envio de pago (tarjeta de 2): "+$19.99 Shipping" en gris claro, fino
   y sin mayusculas, para que informe sin competir con el precio.
   inline-block: con inline-flex el gap separaria "+" de la cifra. */
.offer-block .ship-tag--paid {
  display: inline-block;
  padding: 0.5em 0;
  font-size: 0.78rem;        /* ~12.5px */
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #647482;            /* 4.8:1 sobre blanco (AA) */
}

.offer-block .ship-tag--paid .ship-cost {
  font-weight: 600;
  color: #4f6475;
}

@media (min-width: 1024px) {
  .offer-block .ship-tag {
    font-size: 0.875rem;     /* 14px */
  }
}

/* =====================================================================
   PASTILLAS SIN CAJA (10 sep 2026)
   "You save" y "60 days guarantee" van como lineas de texto con check,
   sin fondo, borde ni sombra. La unica caja que queda es "Biggest
   discount" en la tarjeta destacada (verde pastel), en tercer lugar.
   ===================================================================== */
.offer-block .badges-group .savings-badge,
.offer-block .badges-group .guarantee-badge,
.offer-block .best-value-content .badges-group .savings-badge,
.offer-block .best-value-content .badges-group .guarantee-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  .offer-block .badges-group .savings-badge,
  .offer-block .badges-group .guarantee-badge {
    padding: 0.3em 0.6em;
  }
}

@media (max-width: 899.98px) {
  .offer-block .package-content .badges-group .savings-badge,
  .offer-block .package-content .badges-group .guarantee-badge,
  .offer-block .best-value-content .badges-group .savings-badge,
  .offer-block .best-value-content .badges-group .guarantee-badge {
    padding: 0.35em 1em !important;
  }
}

/* =====================================================================
   NOMBRE DE MARCA EN LOS TITULOS (16 sep 2026)
   "FlushPril" en rojo, tomado del rotulo "FLUSH" del frasco, para
   que destaque sobre el titulo casi negro. Solo en titulos grandes:
   .offer-title em (las dos ofertas) y .reviews-brand. 4:1 sobre blanco,
   de sobra para texto grande en negrita (AA pide 3:1).
   ===================================================================== */
.offer-title em,
.reviews-title .reviews-brand {
  color: #37346B;              /* respaldo si el navegador no recorta el fondo al texto */
}

/* Degradado de izquierda a derecha: granate -> rojo -> destello
   rojo claro -> granate, como un reflejo de luz sobre el rotulo. El punto
   mas claro (#1a82b5) queda en 4.3:1 sobre blanco (AA texto grande). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .offer-title em,
  .reviews-title .reviews-brand {
    background-image: linear-gradient(100deg, #232049 0%, #37346B 30%, #4E4C75 52%, #37346B 74%, #232049 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* =====================================================================
   TARJETA DE 6 BOTELLAS — ACABADO EXCLUSIVO (16 sep 2026)
   Mismo lenguaje sobrio, tres detalles mas:
   1. Marco en degradado petroleo -> cian -> petroleo y un halo muy tenue
      alrededor, como un anillo de luz.
   2. Cinta "Most Popular" con un brillo cian en diagonal, filete claro
      arriba y dos lineas finas a los lados (el mismo motivo que
      "— LIMITED AVAILABILITY —").
   3. Marco interior y halo tras los frascos en cian, un punto mas vivos.
   ===================================================================== */
.offer-block .best-value-package {
  border: 2px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(160deg, var(--nr-blue-deep) 0%, #1b86bb 45%, #61b3dc 55%, var(--nr-blue-deep) 100%) border-box;
  box-shadow:
    0 0 0 6px rgba(26, 130, 181, 0.07),
    0 30px 60px -30px rgba(10, 63, 92, 0.6),
    0 12px 28px -22px rgba(16, 40, 58, 0.25);
}

.offer-block .best-value-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  background:
    linear-gradient(115deg, rgba(97, 179, 220, 0) 30%, rgba(97, 179, 220, 0.22) 50%, rgba(97, 179, 220, 0) 70%),
    linear-gradient(180deg, var(--nr-blue) 0%, var(--nr-blue-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.offer-block .best-value-badge::before,
.offer-block .best-value-badge::after {
  content: "";
  flex: none;
  width: 1.4em;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.offer-block .best-value-content::before {
  border-color: rgba(26, 130, 181, 0.32);
}

.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 58% 30% at 50% 36%, rgba(26, 130, 181, 0.12) 0%, rgba(26, 130, 181, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfc 60%, #eef4f7 100%);
}

/* =====================================================================
   GARANTIA MAS GRANDE EN ESCRITORIO (10 sep 2026)
   El sello sube de 180 a 230px (la imagen original es de 250px, no
   conviene ir mas alla) y el texto un punto: rotulo 15px, titulo hasta
   44px y cuerpo 21px. Movil y tablet no cambian.
   ===================================================================== */
@media (min-width: 1024px) {
  .gtee-main {
    gap: 3rem;
  }
  .gtee-seal {
    width: 230px;
  }
  .gtee-eyebrow {
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.6rem;
  }
  .gtee-title {
    font-size: clamp(2rem, 1.6vw + 1.2rem, 2.75rem);
    margin-bottom: 0.9rem;
  }
  .gtee-copy {
    font-size: 1.3125rem;
    line-height: 1.6;
    max-width: 64ch;
  }
}

/* Si el JS fallara y el boton de la barra saltara por ancla, #offer deja
   sitio para la propia barra */
#offer {
  scroll-margin-top: 84px;
}

/* =====================================================================
   REFINAMIENTO PREMIUM DE LAS TARJETAS (FlushPril)
   6 botellas (best value): acabado mas lujoso y calido en la paleta roja.
   3 botellas (good value): un escalon por debajo, con fondo tenue y filete
   interior muy sutil. Basic se queda sencilla, sin cambios.
   ===================================================================== */

/* --- 6 BOTELLAS: fondo interior mas rico + doble filete elegante --- */
.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  background:
    radial-gradient(ellipse 82% 46% at 50% -4%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(ellipse 60% 34% at 50% 34%, rgba(14, 96, 137, 0.11) 0%, rgba(14, 96, 137, 0) 72%),
    linear-gradient(180deg, #fdfeff 0%, #f5fafd 55%, #e6f0f5 100%);
}

.offer-block .best-value-content::before {
  inset: 9px;
  border: 1px solid rgba(14, 96, 137, 0.26);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),          /* reflejo claro junto al filete */
    inset 0 14px 34px -20px rgba(14, 96, 137, 0.20);   /* vineta calida desde arriba */
}

/* --- 3 BOTELLAS (good value): fondo tenue + filete interior sutil --- */
.offer-block .popular-package .package-content {
  position: relative;
  background:
    radial-gradient(ellipse 72% 40% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #fdfeff 0%, #f7fbfd 68%, #eef5f9 100%);
}

.offer-block .popular-package .package-content::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(14, 96, 137, 0.13);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* El contenido (imagen, precio, botones) por encima del filete */
.offer-block .popular-package .package-content > * {
  position: relative;
  z-index: 1;
}

/* Subtitulo del boton destacado (Best Value): un pelin mas presente que
   el de Basic/Good Value, pero mas fino que antes. */
.offer-block .best-value-buy .btn-text small {
  font-weight: 600;
}

/* El pack de 6 (best value) un punto mas grande que los otros en movil */
@media (max-width: 899.98px) {
  .offer-block .best-value-content .product-img {
    max-height: 235px !important;
  }
}

/* =====================================================================
   TAMANO DE IMAGEN POR TARJETA (jerarquia 6 > 3 > 2)
   2 botellas (basic): la mas pequena
   3 botellas (good value / popular): intermedia
   6 botellas (best value): la mayor, pero un punto mas pequena que antes
   ===================================================================== */
@media (min-width: 900px) {
  .offer-block .basic-package .product-img      { max-height: 190px; }
  .offer-block .popular-package .product-img    { max-height: 220px; }
  .offer-block .best-value-content .product-img { max-height: 245px; }
}
@media (max-width: 899.98px) {
  .offer-block .basic-package .product-img      { max-height: 180px !important; }
  .offer-block .popular-package .product-img    { max-height: 210px !important; }
  .offer-block .best-value-content .product-img { max-height: 235px !important; }
}

/* =====================================================================
   REFERENCIAS CIENTIFICAS EN MOVIL (26 sep 2026)
   Una sola columna (en escritorio siguen 2), texto mas pequeno y sutil,
   y titulo/logos mas contenidos: en movil se veian demasiado grandes.
   ===================================================================== */
@media (max-width: 767px) {
  .scientific-references h2 {
    font-size: 1.15rem !important;
    margin-bottom: 1rem !important;
  }
  .scientific-references .grid.grid-cols-4 {
    gap: 0.5rem 1rem !important;
    margin-bottom: 1.25rem !important;
  }
  #references-content {
    grid-template-columns: 1fr !important;   /* una sola columna en movil */
    gap: 0.4rem !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #8a929b;                          /* mas tenue/sutil */
  }
  #references-content .font-semibold.text-gray-800 {
    font-weight: 600 !important;
  }
}

/* =====================================================================
   REFERENCIAS: TONO MAS TENUE Y FINO (desktop + movil)
   El titulo de cada referencia venia en negrita fuerte y gris oscuro
   (font-semibold text-gray-800), resaltaba demasiado. Se baja a peso 500
   y grises mas suaves para que la seccion sea discreta.
   ===================================================================== */
#references-content .font-semibold.text-gray-800 {
  font-weight: 500 !important;
  color: #6b7480 !important;
}
#references-content .italic {
  color: #a1a7af !important;
}
#references-content {
  color: #8b929b;
}

/* =====================================================================
   6 BOTELLAS: FONDO PREMIUM MAS PROFUNDO (26 sep 2026)
   Para que la tarjeta principal resalte mucho mas: fondo en degradado rosa
   mas profundo (mantiene texto oscuro legible), borde/sombra reforzados.
   ===================================================================== */
.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  background:
    radial-gradient(ellipse 88% 42% at 50% -8%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #e0eff7 0%, #c8e1ed 48%, #aecfe0 100%) !important;
}
.offer-block .best-value-package {
  box-shadow:
    0 0 0 6px rgba(14, 96, 137, 0.10),
    0 34px 66px -26px rgba(10, 63, 92, 0.72),
    0 14px 30px -22px rgba(16, 40, 58, 0.3) !important;
}
/* El filete interior un punto mas marcado sobre el fondo profundo */
.offer-block .best-value-content::before {
  border-color: rgba(10, 63, 92, 0.35) !important;
}

/* =====================================================================
   MOVIL: TARJETAS MAS CONDENSADAS (26 sep 2026)
   Menos hueco entre tarjetas y menos padding interno, para que se vean
   mas compactas y aprovechen mejor el espacio.
   ===================================================================== */
@media (max-width: 899.98px) {
  .pricing-grid {
    gap: 1rem !important;
    max-width: 520px !important;
  }
  .offer-block .package-content,
  .offer-block .best-value-content {
    padding: 0.9em 0.9em 1em !important;
  }
  .offer-block .package-quantity {
    padding: 0.3em 0.4em 0.2em !important;
  }
}

/* =====================================================================
   6 BOTELLAS: TARJETA PREMIUM OSCURA / METALICA + BOTON AMARILLO
   (26 sep 2026) — inspirada en la referencia del cliente.
   Fondo granate oscuro con brillo metalico, texto blanco, acentos
   dorados (You save / Free shipping / checks) y CTA amarillo.
   ===================================================================== */
.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  background:
    /* brillo metalico diagonal */
    linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.26) 100%),
    /* luz cenital */
    radial-gradient(ellipse 105% 60% at 50% -12%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
    /* rojo lujoso profundo con mas cuerpo */
    linear-gradient(180deg, #265166 0%, #1e4052 40%, #17323f 72%, #11242e 100%) !important;
}

/* Texto en blanco */
.offer-block .best-value-content .quantity-number,
.offer-block .best-value-content .price-symbol,
.offer-block .best-value-content .price-amount,
.offer-block .best-value-content .final-price,
.offer-block .best-value-content .total-pricing,
.offer-block .best-value-content .total-pricing span,
.offer-block .best-value-content .guarantee-badge,
.offer-block .best-value-content .guarantee-badge span {
  color: #ffffff !important;
}
.offer-block .best-value-content .supply-text { color: #CFCEDA !important; }
.offer-block .best-value-content .price-per,
.offer-block .best-value-content .price-per span { color: #CFCEDA !important; }
.offer-block .best-value-content .price-day { color: #CFCEDA !important; }
.offer-block .best-value-content .pricing__was { color: rgba(207, 206, 218, 0.6) !important; }

/* Acentos dorados: "You save" y los checks */
.offer-block .best-value-content .savings-badge,
.offer-block .best-value-content .savings-badge span { color: #ffd24a !important; }
.offer-block .best-value-content .checkmark::before { color: #ffd24a !important; }

/* Pastillas sin caja (You save / 60 days) */
.offer-block .best-value-content .savings-badge,
.offer-block .best-value-content .guarantee-badge {
  background: transparent !important;
  border-color: transparent !important;
}
/* "Biggest discount": pastilla VERDE CLARO translucida (lee como beneficio) */
.offer-block .best-value-content .discount-badge {
  background: rgba(122, 230, 160, 0.15) !important;
  border: 1px solid rgba(122, 230, 160, 0.45) !important;
}
.offer-block .best-value-content .discount-badge,
.offer-block .best-value-content .discount-badge span,
.offer-block .best-value-content .discount-badge .checkmark::before { color: #86efac !important; }

/* Marco interior claro sobre el fondo oscuro */
.offer-block .best-value-content::before {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 16px 36px -20px rgba(0, 0, 0, 0.45) !important;
}

/* "Free US shipping": pastilla translucida dorada */
.offer-block .best-value-content .ship-tag--free {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 210, 74, 0.45) !important;
  color: #ffd24a !important;
}

/* BOTON AMARILLO (BUY NOW) */
.offer-block .best-value-buy {
  color: #10283a !important;
  background-image: linear-gradient(180deg, #ffdf5b 0%, #f3c11d 100%) !important;
  border: 2px solid #d9a400 !important;
  text-shadow: none !important;
}
.offer-block .best-value-buy:hover {
  background-image: linear-gradient(180deg, #f3c11d 0%, #ffdf5b 100%) !important;
}
.offer-block .best-value-buy .btn-text small { color: rgba(16, 40, 58, 0.78) !important; }

/* =====================================================================
   MOST POPULAR: CINTA BLANCA METALIZADA LUXURY (26 sep 2026)
   Antes iba en granate; ahora blanco/plata con brillo sutil y el texto en
   granate, como la cabecera "BEST VALUE!" de la referencia.
   ===================================================================== */
.offer-block .best-value-badge {
  /* "MOST POPULAR": barra BLANCA limpia, texto navy casi negro Synaptril. */
  color: #14122E !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f7 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.10) !important;
  text-shadow: none !important;
}
.offer-block .best-value-badge::before,
.offer-block .best-value-badge::after {
  background: rgba(20, 18, 46, 0.45) !important;   /* guiones indigo */
}
.offer-block .best-value-badge::before,
.offer-block .best-value-badge::after {
  background: rgba(20, 18, 46, 0.45) !important;   /* guiones indigo a los lados */
}

/* =====================================================================
   6 BOTELLAS EN MOVIL: LAYOUT DE DOS COLUMNAS (26 sep 2026)
   Imagen a la izquierda, precio arriba a la derecha con el checklist
   debajo, y Total + Free shipping + boton a lo ancho en la parte inferior.
   Solo la tarjeta destacada; las de 2 y 3 siguen apiladas normal.
   ===================================================================== */
@media (max-width: 899.98px) {
  /* Las TRES tarjetas en dos columnas: izquierda = titulo + imagen; derecha =
     precio + checklist juntos y centrados verticalmente (.pc-right). */
  .offer-block .package-content {
    display: grid !important;
    grid-template-columns: 0.82fr 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: none !important;
    align-items: start !important;
    column-gap: 0.6rem !important;
    row-gap: 0.25rem !important;
    padding: 0.9em 0.95em 1em !important;
  }
  .offer-block .package-content .package-quantity {
    grid-column: 1 !important; grid-row: 1 !important;
    margin: 0 !important; padding: 0 !important;
    text-align: left !important; place-self: center start !important;
  }
  .offer-block .package-content .product-image {
    grid-column: 1 !important; grid-row: 2 !important;
    margin: 0 !important; place-self: start center !important;
  }
  .offer-block .package-content .product-img {
    max-height: 132px !important; width: 100% !important;
  }
  /* Columna derecha: precio + checklist pegados y centrados, leve separacion */
  .offer-block .package-content .pc-right {
    grid-column: 2 !important; grid-row: 1 / span 2 !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important; align-items: flex-start !important;
    gap: 0.4rem !important; align-self: stretch !important; margin: 0 !important;
  }
  .offer-block .package-content .pc-right .price-display {
    margin: 0 !important; justify-content: flex-start !important; align-self: flex-start !important;
  }
  .offer-block .package-content .pc-right .badges-group {
    margin: 0 !important; align-items: flex-start !important; align-self: flex-start !important;
  }
  /* checklist compacto y a la izquierda */
  .offer-block .package-content .badges-group .savings-badge,
  .offer-block .package-content .badges-group .guarantee-badge,
  .offer-block .package-content .badges-group .discount-badge {
    grid-column: unset !important; grid-row: unset !important; place-self: auto !important;
    justify-content: flex-start !important;
    width: auto !important; max-width: none !important;
    margin: 0.05em 0 !important; text-align: left !important;
  }
  .offer-block .package-content .buy-button {
    grid-column: 1 / -1 !important; grid-row: 3 !important;
    width: 100% !important; margin: 0.5em 0 0.25em !important;
    font-size: 1.5em !important; padding: 0.65em 1em !important; place-self: auto !important;
  }
  .offer-block .package-content .total-pricing {
    grid-column: 1 / -1 !important; grid-row: 4 !important; margin: 0 !important; place-self: auto !important;
  }
  /* Precio grande y ADAPTABLE al ancho */
  .offer-block .package-content .price-amount {
    font-size: clamp(3.1rem, 15vw, 4.4rem) !important; line-height: 0.88 !important;
  }
  .offer-block .package-content .price-symbol {
    font-size: clamp(1.2rem, 5.4vw, 1.75rem) !important;
  }
  /* "6 BOTTLES" mas negrito y mas pequeno; "180 DAY SUPPLY" mas grande */
  .offer-block .package-content .quantity-number {
    font-size: clamp(1.05rem, 4.8vw, 1.45rem) !important; font-weight: 700 !important;
  }
  .offer-block .package-content .supply-text {
    font-size: clamp(0.74rem, 3.1vw, 0.98rem) !important;
  }
  .offer-block .package-content .price-per,
  .offer-block .package-content .price-per span { font-size: 0.6rem !important; }
}

/* =====================================================================
   6 BOTELLAS: BORDE SIMPLE (26 sep 2026)
   Fuera el borde en degradado con bandas rojas claras y el anillo de glow
   rojo: solo un delineado limpio y una sombra sutil en la parte inferior.
   Tambien se quita el marco interior (::before).
   ===================================================================== */
.offer-block .best-value-package {
  border: 2px solid #5A5380 !important;
  background: none !important;
  box-shadow: 0 12px 32px rgba(13, 11, 40, 0.35) !important;
}
.offer-block .best-value-content::before {
  display: none !important;
}

/* =====================================================================
   AJUSTES FINOS TARJETAS (26 sep 2026)
   - Free US shipping sin borde (se lee como beneficio, mas estetico).
   - Fuera el "$X a day" (poco legible).
   - "PER BOTTLE" apilado: PER arriba, BOTTLE abajo.
   - 6 botellas: titulo/precio un punto mas pequenos y fondo mas lujoso.
   Aplica a 2 y 3 tambien (per-day fuera + PER/BOTTLE apilado).
   ===================================================================== */

/* Quitar el coste por dia en todas las tarjetas */
.offer-block .price-day { display: none !important; }

/* "PER BOTTLE" -> PER / BOTTLE (apilado) */
.offer-block .price-per > span:first-child {
  display: block !important;
  max-width: 3.6em !important;
  white-space: normal !important;
  line-height: 1.0 !important;
}

/* Free US shipping: SIN caja/borde, solo texto + camion */
.offer-block .ship-tag--free {
  background: transparent !important;
  border: 0 !important;
  padding: 0.2em 0 !important;
}

/* Fondo 6 botellas: rojo metalizado tipo pintura metalica. Brillo central
   suave (la luz que rebota en el metal) + profundidad en los extremos. */
.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  /* Fondo Synaptril: RADIAL de claro a oscuro — centro palido tenue,
     bordes en el indigo casi negro que ya quedo aprobado. */
  background:
    radial-gradient(ellipse 100% 78% at 50% 42%,
      #665F8D 0%,
      #494370 32%,
      #2A2549 60%,
      #16122F 80%,
      #0C0A26 100%) !important;
}

/* =====================================================================
   CHECKLIST MOVIL: compacto, centrado y mas limpio (26 sep 2026)
   - Badges mas juntos verticalmente.
   - Columna derecha (precio + checklist) centrada en su eje.
   - "You save" y "60 days" mas delgados; "Biggest discount" verde oscuro.
   - Sin sombra en los circulos.
   ===================================================================== */
@media (max-width: 899.98px) {

  .offer-block .package-content .badges-group {
    gap: 0.1rem !important;
    row-gap: 0.1rem !important;
  }
  .offer-block .package-content .badges-group .savings-badge,
  .offer-block .package-content .badges-group .guarantee-badge,
  .offer-block .package-content .badges-group .discount-badge {
    margin: 0.05em 0 !important;
    padding: 0.12em 0 !important;
  }
  /* "You save" y "60 days" mas delgaditos */
  .offer-block .package-content .savings-badge,
  .offer-block .package-content .savings-badge span,
  .offer-block .package-content .guarantee-badge,
  .offer-block .package-content .guarantee-badge span {
    font-weight: 500 !important;
  }

  /* Sin sombra en los circulos/badges */
  .offer-block .package-content .checkmark::before,
  .offer-block .package-content .savings-badge,
  .offer-block .package-content .guarantee-badge,
  .offer-block .package-content .discount-badge {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* "Biggest discount": verde mas oscuro/saturado, pastilla con algo de padding */
  .offer-block .best-value-content .discount-badge {
    background: rgba(34, 197, 94, 0.16) !important;
    border: 1px solid rgba(34, 197, 94, 0.5) !important;
    padding: 0.22em 0.7em !important;
  }
  .offer-block .best-value-content .discount-badge,
  .offer-block .best-value-content .discount-badge span,
  .offer-block .best-value-content .discount-badge .checkmark::before {
    color: #22c55e !important;
  }
}

/* =====================================================================
   "Biggest discount": verde claro, SIN borde/caja, alineado a la izquierda
   en ambos dispositivos (26 sep 2026).
   ===================================================================== */
.offer-block .best-value-content .discount-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.1em 0 !important;
  justify-content: flex-start !important;
}
.offer-block .best-value-content .discount-badge,
.offer-block .best-value-content .discount-badge span,
.offer-block .best-value-content .discount-badge .checkmark::before {
  color: #86efac !important;
}

/* DESKTOP (stock): los tres beneficios alineados a la izquierda entre si
   (checks en linea), pero el bloque centrado en la tarjeta. Se centra via el
   contenedor .pc-right (align-items:center) porque margin:auto lo pisaba otra regla. */
@media (min-width: 900px) {
  .offer-block .pc-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.55rem !important;          /* leve espacio entre el precio y los beneficios */
    margin-bottom: 1rem !important;   /* leve espacio entre los beneficios y el boton */
  }
  .offer-block .badges-group {
    width: fit-content !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    margin: 0.2em 0 0 !important;
  }
  .offer-block .badges-group .savings-badge,
  .offer-block .badges-group .guarantee-badge,
  .offer-block .badges-group .discount-badge {
    justify-content: flex-start !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: none !important;
    margin: 0.12em 0 !important;
    padding: 0 !important;   /* mismo padding en los tres: los checks quedan en linea */
  }
}

/* =====================================================================
   HOVER: tono un poco mas oscuro en los botones de las 3 tarjetas
   (movil y desktop). Tambien en :active para el toque en movil.
   ===================================================================== */
.offer-block .buy-button:hover,
.offer-block .buy-button:active {
  filter: brightness(0.92);
}

/* =====================================================================
   Boton "ADD TO CART" de la tarjeta de 3 botellas (Good Value): un poco mas
   oscuro que el Basic, para marcar jerarquia (movil y desktop). El Basic se
   queda claro/normal. (26 sep 2026)
   ===================================================================== */
.offer-block .popular-buy {
  color: #2E2A55 !important;
  background-image: linear-gradient(to top, #E0DFE8 50%, #ECEBF1 51%) !important;
}
.offer-block .popular-buy:hover {
  background-image: linear-gradient(to bottom, #E0DFE8 50%, #ECEBF1 51%) !important;
}
.offer-block .popular-buy .btn-text small { color: #2E2A55 !important; }

/* =====================================================================
   6 BOTELLAS EN MOVIL: un poco mas grande en vertical, para que resalte y
   llame mas la atencion (26 sep 2026).
   ===================================================================== */
@media (max-width: 899.98px) {
  /* Jerarquia de espacio vertical: 6 (mas grande) > 3 (regular) > 2 (compacto). */

  /* Basic (2 botellas): mas compacto, menos margen */
  .offer-block .basic-package .package-content {
    padding-top: 0.75em !important;
    padding-bottom: 0.85em !important;
  }

  /* Good Value (3 botellas): espacios regulares */
  .offer-block .popular-package .package-content {
    padding-top: 1.2em !important;
    padding-bottom: 1.3em !important;
  }

  /* Best value (6 botellas): mas grande, con mas margenes */
  .offer-block .best-value-package {
    margin-top: 0.9rem !important;
    margin-bottom: 0.9rem !important;
  }
  .offer-block .best-value-content {
    padding-top: 2.5em !important;
    padding-bottom: 2.65em !important;
    row-gap: 0.85rem !important;
  }
  .offer-block .best-value-content .pc-right { gap: 0.8rem !important; }
}

/* =====================================================================
   OCULTAR LA BARRA DE DESPLAZAMIENTO (26 sep 2026)
   El scroll sigue funcionando; solo se oculta la barra visual.
   ===================================================================== */
html {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge antiguo */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;     /* Chrome, Safari, Edge */
}

/* =====================================================================
   6 BOTELLAS EN MOVIL: checklist y precio un poco mas grandes y ADAPTABLES
   (clamp + vw) — es la tarjeta que mas llama la atencion. (26 sep 2026)
   ===================================================================== */
@media (max-width: 899.98px) {
  /* Checklist ("You save" / "60 days" / "Biggest discount") */
  .offer-block .best-value-content .badges-group .savings-badge,
  .offer-block .best-value-content .badges-group .savings-badge span,
  .offer-block .best-value-content .badges-group .guarantee-badge,
  .offer-block .best-value-content .badges-group .guarantee-badge span,
  .offer-block .best-value-content .badges-group .discount-badge,
  .offer-block .best-value-content .badges-group .discount-badge span {
    font-size: clamp(0.92rem, 4vw, 1.18rem) !important;
  }
  /* Precio $49 mas grande y adaptable */
  .offer-block .best-value-content .price-amount {
    font-size: clamp(3.5rem, 16.5vw, 4.9rem) !important;
    line-height: 0.86 !important;
  }
  .offer-block .best-value-content .price-symbol {
    font-size: clamp(1.3rem, 6vw, 1.9rem) !important;
  }
}

/* "100% Quality Assurance": mucho mas grande en desktop (26 sep 2026) */
@media (min-width: 900px) {
  .qa-title {
    font-size: clamp(2.7rem, 2.6vw + 1.6rem, 3.75rem) !important;
    margin-bottom: 1.4rem !important;
  }
}

/* =====================================================================
   "Choose your FlushPril package": mas grande y mejor organizado en movil.
   (26 sep 2026)
   ===================================================================== */
@media (max-width: 899.98px) {
  .offer-title {
    font-size: clamp(1.8rem, 6.6vw, 2.4rem) !important;
    line-height: 1.18 !important;
    margin: 0.25rem 0 0.6rem !important;
  }
  .offer-eyebrow {
    margin-bottom: 0.6rem !important;
  }
  .offer-deadline {
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
  }
}

/* =====================================================================
   GARANTIA: titulo y texto mas grandes en movil (26 sep 2026)
   "100% Satisfaction or Your Money Back" + su parrafo.
   ===================================================================== */
@media (max-width: 899.98px) {
  .gtee-eyebrow {
    font-size: 0.9rem !important;
    margin-bottom: 0.55rem !important;
  }
  .gtee-title {
    font-size: clamp(2rem, 7vw, 2.7rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin-bottom: 0.9rem !important;
  }
  .gtee-copy {
    font-size: 1.1875rem !important;   /* ~19px, antes 17px */
    line-height: 1.6 !important;
  }
}

/* =====================================================================
   "100% Quality Assurance": titulo y texto mas grandes en movil (26 sep)
   ===================================================================== */
@media (max-width: 899.98px) {
  .qa-title {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 1.05rem !important;
  }
  .qa-copy {
    font-size: 1.15rem !important;
    line-height: 1.62 !important;
  }
}

/* "60-day guarantee" (eyebrow de la garantia): mucho mas grande y grueso,
   es un mensaje importante. (26 sep 2026) */
.gtee-eyebrow {
  font-size: clamp(1.15rem, 2.2vw + 0.6rem, 1.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.6rem !important;
}

/* Texto de "Quality Assurance" mas delgado y limpio (ambos dispositivos):
   las partes en negrita bajan a semibold para que no se vea tan pesado. */
.qa-copy { font-weight: 400 !important; }
.qa-copy strong { font-weight: 500 !important; }

/* =====================================================================
   GARANTIA EN MOVIL: titulares mas grandes y lujosos (26 sep 2026)
   - "60-day guarantee": oro metalico (a juego con el sello), grande.
   - Titulo mayor y sello mas grande. Todo centrado y bien espaciado.
   ===================================================================== */
@media (max-width: 899.98px) {
  .gtee-main {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.1rem !important;
  }
  .gtee-seal {
    width: 132px !important;
  }
  .gtee-eyebrow {
    font-size: clamp(1.35rem, 5.4vw, 1.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.7rem !important;
    /* Oro metalico */
    background: linear-gradient(92deg, #9c6a16 0%, #e0b352 42%, #f6dd93 54%, #b47f1e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #b8860b;   /* respaldo si no hay clip de texto */
  }
  .gtee-title {
    font-size: clamp(2.15rem, 7.4vw, 2.85rem) !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    margin-bottom: 0.95rem !important;
  }
}

/* Titulos de secciones mas grandes en movil: reseñas y oferta (26 sep 2026) */
@media (max-width: 899.98px) {
  .reviews-title {
    font-size: clamp(1.9rem, 6.8vw, 2.5rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 0.6rem !important;
  }
  .offer-title {
    font-size: clamp(2rem, 7vw, 2.6rem) !important;
  }
}

/* Subtitulo de reseñas: claramente mas pequeño y sutil que el titular
   (jerarquia clara en desktop y movil). (26 sep 2026) */
.reviews-sub {
  font-size: clamp(0.88rem, 2vw, 1.05rem) !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  line-height: 1.45 !important;
}

/* =====================================================================
   "60-day guarantee": ORO OSCURO, mismo color en movil y desktop.
   (26 sep 2026) — un dorado antiguo mas profundo/lujoso.
   ===================================================================== */
.gtee-eyebrow {
  /* Degradado simetrico desde el CENTRO hacia afuera: oro brillante al medio,
     oscureciendo hacia los bordes (se ve centrado en cualquier ancho). */
  background: linear-gradient(90deg, #4a2f07 0%, #7f5814 24%, #c6a43c 50%, #7f5814 76%, #4a2f07 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #7a5310 !important;   /* respaldo si no hay clip de texto */
}
/* En desktop: "60-DAY GUARANTEE" grande (que el dorado luzca como en movil)
   y MAS GRANDE que la frase que le sigue ("100% Satisfaction..."). */
@media (min-width: 900px) {
  .gtee-eyebrow {
    font-size: 2.5rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1.1 !important;
    margin-bottom: 0.6rem !important;
  }
  .gtee-title {
    font-size: 2rem !important;
  }
}

/* MOVIL: misma logica que desktop — "60-DAY GUARANTEE" mas grande que la
   frase que le sigue ("100% Satisfaction..."). (26 sep 2026) */
@media (max-width: 899.98px) {
  .gtee-eyebrow {
    font-size: clamp(2.1rem, 8vw, 2.9rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.03em !important;
  }
  .gtee-title {
    font-size: clamp(1.65rem, 6vw, 2.15rem) !important;
    line-height: 1.16 !important;
  }
}

/* =====================================================================
   TARJETAS LATERALES CON TINTE DE PRODUCTO (2 oct 2026)
   Las tarjetas de 2 y 3 botellas se veian demasiado grises/blancas.
   Lavado suave de la paleta de la marca anterior (banda indigo:
   violeta #6247C4, glow #8C77C0, lav-bg #F5F4FB) — sustituido por el
   lavado azul Synaptril de la capa del 8 oct 2026, sin llegar a
   colores vivos: fondo blanco -> lavanda tenue, bordes violeta suave y
   cabeceras tintadas. Jerarquia en dos pasos: Good Value un punto mas
   presente que Basic. La tarjeta oscura de 6 botellas y los botones de
   compra NO se tocan.
   ===================================================================== */

/* Fondo de las dos tarjetas laterales: blanco -> lavanda apenas visible */
.offer-block .basic-package,
.offer-block .popular-package {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F7FC 45%, #F1EFF9 100%);
  border-color: #CFC9E6;
}

/* Good Value: un escalon mas de presencia (borde y sombra violeta suave) */
.offer-block .popular-package {
  border-color: #B9AEE0;
  box-shadow: 0 10px 28px -18px rgba(41, 27, 143, 0.30);
}
.offer-block .basic-package {
  box-shadow: 0 10px 28px -20px rgba(41, 27, 143, 0.22);
}

/* Cabeceras tintadas: lavanda suave con texto indigo profundo */
.offer-block .basic-package .package-header {
  background: linear-gradient(180deg, #F0EDF8 0%, #E8E4F4 100%);
  color: #37346B;
  border-bottom: 1px solid #CFC9E6;
}
.offer-block .popular-package .package-header {
  background: linear-gradient(180deg, #E9E4F7 0%, #DDD6F1 100%);
  color: #2E2566;
  border-bottom: 1px solid #B9AEE0;
}

/* Contenido de Basic: mantiene el lavado de la tarjeta (sin fondo propio) */
.offer-block .basic-package .package-content {
  background: transparent;
}

/* Contenido de Good Value: sustituye el resto azul-verdoso viejo por el
   mismo lavado lavanda, con el filete interior en violeta muy tenue */
.offer-block .popular-package .package-content {
  background:
    radial-gradient(ellipse 72% 40% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #FDFCFE 0%, #F6F4FB 68%, #EFEBF8 100%);
}
.offer-block .popular-package .package-content::before {
  border: 1px solid rgba(98, 71, 196, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   CAPA DE ADAPTACIÓN — SYNAPTRIL (8 oct 2026)
   Producto: SYNAPTRIL — frascos blancos de 30 cápsulas, etiqueta
   navy/azul acero (muestreada con PIL de img/packs/synaptril-*.webp:
   navy #143264, azul royal #1F4E8C, azul acero #3D7EBF, blanco #F6F7F8).
   Revisión (mismo día, a petición del dueño): stops del radial con más
   profundidad, marco interior nítido, cabeceras laterales con filete
   clínico superior (Good Value un escalón más), sombras con más aire.
   Botones de compra, CTAs, acentos dorados/verdes y todo lo demás: igual.
   ===================================================================== */

/* a) Variables de marca Synaptril (sustituyen la paleta indigo) */
.offer-block {
  --nr-ink: #143264;          /* navy de la etiqueta: tipografia y cifras */
  --nr-blue: #1F4E8C;         /* azul royal opaco: acento, cinta, marco y boton */
  --nr-blue-deep: #0F2749;    /* extremo oscuro; texto pequeno sobre blanco */
  --nr-blue-soft: #B9CCE3;    /* bordes de pastillas y botones claros */
  --nr-mist: #F4F7FB;         /* gris azul apenas perceptible: fondos */
  --nr-line: #DFE6EF;         /* bordes de tarjetas normales */
}

/* b) Destacada (3+3 FREE): radial azul claro→oscuro (mismos roles de
      stop que la capa indigo; centro tenue, borde casi negro) */
.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  background:
    radial-gradient(ellipse 100% 78% at 50% 42%,
      #41689C 0%,
      #2E5185 30%,
      #1A3A67 58%,
      #0E2649 80%,
      #071636 100%) !important;
}
/* Marco interior: línea clara nítida + profundidad inferior sutil */
.offer-block .best-value-content::before {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 18px 40px -24px rgba(0, 0, 0, 0.50) !important;
}

/* Texto pequeño de la destacada: gris azul claro (>= 4.5:1 sobre el radial) */
.offer-block .best-value-content .supply-text { color: #D3DEED !important; }
.offer-block .best-value-content .price-per,
.offer-block .best-value-content .price-per span { color: #D3DEED !important; }
.offer-block .best-value-content .price-day { color: #D3DEED !important; }
.offer-block .best-value-content .pricing__was { color: rgba(211, 222, 237, 0.65) !important; }

/* Cinta MOST POPULAR: texto navy Synaptril + guiones azules */
.offer-block .best-value-badge { color: #143264 !important; }
.offer-block .best-value-badge::before,
.offer-block .best-value-badge::after { background: rgba(20, 50, 100, 0.45) !important; }

/* c) Laterales: lavado SUTIL azul (Good Value un escalón más presente) */
.offer-block .basic-package,
.offer-block .popular-package {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFD 45%, #EDF3FA 100%);
  border-color: #C9D8EA;
}
.offer-block .popular-package {
  border-color: #AFC7E2;
  box-shadow: 0 14px 34px -20px rgba(20, 50, 100, 0.32);
}
.offer-block .basic-package {
  box-shadow: 0 12px 30px -22px rgba(20, 50, 100, 0.24);
}
.offer-block .basic-package .package-header {
  background: linear-gradient(180deg, #F1F6FB 0%, #E5EEF8 100%);
  color: #1F4E8C;
  border-bottom: 1px solid #C9D8EA;
  box-shadow: inset 0 3px 0 #1F4E8C;   /* filete clínico: estructura médica */
}
.offer-block .popular-package .package-header {
  background: linear-gradient(180deg, #E7F0FA 0%, #D4E5F6 100%);
  color: #143264;
  border-bottom: 1px solid #AFC7E2;
  box-shadow: inset 0 3px 0 #143264;   /* Good Value: filete navy, un escalón más */
}
.offer-block .popular-package .package-content {
  background:
    radial-gradient(ellipse 72% 40% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #FDFEFF 0%, #F5F9FD 68%, #ECF3FA 100%);
}
.offer-block .popular-package .package-content::before {
  border: 1px solid rgba(31, 78, 140, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   TESTIMONIOS SYNAPTRIL — "SEE MORE"/"SEE LESS" TOGGLE (9 oct 2026, v2)
   Cerrado por defecto: 3 renglones legibles + el 4º asomando a medias
   tras el degradado. El botón alterna See more / See less (no desaparece).
   ===================================================================== */
.reviews-col .review-card .review-clamp {
  display: -webkit-box;
  -webkit-line-clamp: var(--clamp-lines, 4);
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
/* v2 (9 oct): el fade arranca 15% dentro de la línea 3 y cubre 1.85
   líneas — la 3ª se mantiene nítida (solo suaviza el pie), la 4ª se ve
   a medias ("borrosito") y desaparece antes de llegar al botón. Curva
   larga y delicada sobre el fondo BLANCO real de la tarjeta. */
.reviews-col .review-card .review-clamp:not(.opened)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(1.85 * 1.65em);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.10) 42%,
    rgba(255, 255, 255, 0.50) 56%,
    rgba(255, 255, 255, 0.88) 78%,
    #FFFFFF                  100%);
  pointer-events: none;
}
.reviews-col .review-card .review-clamp.opened {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.reviews-col .review-card .review-more-btn {
  background: none;
  border: none;
  padding: 0.2rem 0 0;
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1F4E8C;
  cursor: pointer;
}
.reviews-col .review-card .review-more-btn:hover { text-decoration: underline; }

/* =====================================================================
   BOTÓN "SEE MORE REVIEWS" (8 oct 2026): píldora clara, fuera del grid
   ===================================================================== */
.load-more-btn {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  padding: 0.65em 1.9em;
  font-size: 1rem;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.load-more-btn:hover {
  background: #f9fafb;
  box-shadow: 0 2px 6px rgba(16,24,40,0.10);
}

/* =====================================================================
   DEGRADADO DEL NOMBRE DEL PRODUCTO — PALETA SYNAPTRIL (8 oct 2026)
   El degradado grande del nombre (.offer-title em / .reviews-brand)
   seguia en la paleta granate del producto viejo. Se pasa a los colores
   navy de la tarjeta de 6 botellas: navy -> royal -> destello -> royal
   -> navy, como un reflejo de luz sobre el rotulo.
   Destello #4E7AB8 = 4.38:1 sobre blanco (AA texto grande, igual que
   el 4.3:1 del original). Respaldo sin clip: royal #1F4E8C (8.31:1).
   ===================================================================== */
.offer-title em,
.reviews-title .reviews-brand {
  color: #1F4E8C;              /* respaldo si el navegador no recorta */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .offer-title em,
  .reviews-title .reviews-brand {
    background-image: linear-gradient(100deg,
      #143264 0%,
      #1F4E8C 30%,
      #4E7AB8 52%,
      #1F4E8C 74%,
      #143264 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* =====================================================================
   VSL 16:9 HORIZONTAL — Lead 02 TB04 (8 oct 2026)
   El player nuevo (6ac74a6070a7736cd8a1d506) es 16:9. Las reglas de
   "REPRODUCTOR VTURB" de arriba se hicieron para el vertical 4:5
   (max-width 400px / min(620px,62vh)). Para el horizontal se libera el
   ancho por la via oficial: la variable --player-vertical-width que el
   player.js de VTurb escribe en linea (max-width: var(...)). Con 'none'
   el video ocupa el ancho de .vsl-wrap (875px escritorio, casi todo en
   movil), que es el diseño original 16:9 de esta pagina.
   ===================================================================== */
vturb-smartplayer {
  --player-vertical-width: none;
}

/* =====================================================================
   AVISO CIERRE COMENTARIOS FB + FOTO DE CLIENTE EN RESEÑAS (8 oct 2026)
   - .fbc-closed: letrero final del panel de comentarios (mensaje simple,
     natural, centrado, discreto como el resto del embed).
   - .review-photo: foto "customer image" dentro de la tarjeta de reseña,
     integrada al diseño estilo reseñas de e-commerce (no es una reseña
     real de ninguna plataforma): proporción 4:3, borde suave, esquinas
     redondeadas, ancho contenido en móvil.
   ===================================================================== */
.fbc-closed {
  margin: 1.5rem 0 0;
  padding: 0.65rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #65676b;
  text-align: center;
  border-top: 1px solid #e4e6eb;
}

.review-photo-wrap {
  margin: 0 0 0.75rem;
}

.review-photo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  cursor: zoom-in;
}

.review-photo-caption {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #65676b;
}

@media (max-width: 640px) {
  .review-photo {
    max-width: 100%;
  }
}


/* =====================================================================
   BOTÓN "LOAD MORE REVIEWS" v2 (8 oct 2026, petición del dueño):
   más grande y prominente en móvil, con símbolo de carga (spinner) y
   flecha. Se añade como capa nueva; la píldora original queda debajo.
   ===================================================================== */
.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: 1.06rem;
  font-weight: 700;
  color: #ffffff;
  background: #1F4E8C;                 /* navy Synaptril */
  border: 1px solid #17406f;
  border-radius: 999px;
  padding: 0.85em 2.1em;
  box-shadow: 0 2px 8px rgba(16,24,40,0.18);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.load-more-btn:hover {
  background: #17406f;
  box-shadow: 0 4px 12px rgba(16,24,40,0.26);
}
.load-more-btn:active { transform: translateY(1px); }

/* icono de carga (spinner circular) dentro del botón */
.load-more-btn .lm-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  animation: lm-spin 1.1s linear infinite;
}
.load-more-btn .lm-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 42 22;             /* arco parcial = spinner */
  opacity: 0.95;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* En móvil el botón ocupa el ancho y crece: más fácil para gente mayor */
@media (max-width: 640px) {
  .load-more-btn {
    width: 100%;
    font-size: 1.12rem;
    padding: 1em 1.4em;
    border-radius: 14px;
  }
  #load-more-reviews { width: 100%; }
}


/* FIX (misma fecha): la capa vieja ".py-16.bg-white button" pisa este botón con
   !important en móvil. Esta capa gana con especificidad + !important. */
.py-16.bg-white button.load-more-btn,
button#load-more-reviews.load-more-btn {
  font-size: 1.06rem !important;
  padding: 0.85em 2.1em !important;
  width: auto !important;
}
@media (max-width: 640px) {
  .py-16.bg-white button.load-more-btn,
  button#load-more-reviews.load-more-btn {
    font-size: 1.12rem !important;
    padding: 1em 1.4em !important;
    width: 100% !important;
    border-radius: 14px !important;
  }
}

/* FIX 2: el wrapper del botón también a ancho completo en móvil */
@media (max-width: 640px) {
  .py-16.bg-white div[style*="text-align:center"][style*="margin"] {
    width: 100%;
  }
}

/* =====================================================================
   BOTÓN "LOAD MORE REVIEWS" v3 (8 oct 2026, petición del dueño):
   volver a lo SIMPLE — texto subrayado navy + símbolo de carga ESTÁTICO.
   Sin píldora, sin animación, sin spinner. Responsive: mismo estilo
   en desktop y móvil (solo un punto más de fuente en móvil).
   ===================================================================== */
button#load-more-reviews.load-more-btn,
.py-16.bg-white button.load-more-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1F4E8C !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  padding: 0.6em 0.8em !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  cursor: pointer;
  transition: color 0.12s ease;
}
button#load-more-reviews.load-more-btn:hover,
.py-16.bg-white button.load-more-btn:hover {
  background: transparent !important;
  color: #17406f !important;
  box-shadow: none !important;
}
button#load-more-reviews.load-more-btn:active {
  transform: none !important;
}

/* símbolo de carga ESTÁTICO: hereda el color, sin rotación */
.load-more-btn .lm-icon {
  animation: none !important;
  width: 1em !important;
  height: 1em !important;
  flex: none;
}
.load-more-btn .lm-icon circle { display: none !important; }

/* móvil: mismo estilo, un punto más de fuente; sin ancho completo */
@media (max-width: 640px) {
  button#load-more-reviews.load-more-btn,
  .py-16.bg-white button.load-more-btn {
    font-size: 1.12rem !important;
    padding: 0.7em 0.8em !important;
    width: auto !important;
    border-radius: 0 !important;
  }
  .py-16.bg-white div[style*="text-align:center"][style*="margin"] {
    width: auto !important;
  }
}

/* =====================================================================
   QUALITY ASSURANCE v2 (8 oct 2026, pedido del dueño): tarjeta más
   amplia que aprovecha el espacio en desktop y se adapta limpia en
   móvil. Va DENTRO de #esconder (solo visible con la oferta).
   ===================================================================== */
.qa-card {
  max-width: 1120px !important;
  padding: clamp(2.25rem, 3.4vw, 3.5rem) clamp(1.75rem, 4vw, 4rem) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #8f2c26 0%, #7e2621 100%) !important;
  box-shadow: 0 16px 40px -16px rgba(127, 38, 33, 0.6) !important;
}
.qa-stars svg {
  width: clamp(24px, 2.4vw, 34px) !important;
  height: clamp(24px, 2.4vw, 36px) !important;
}
.qa-title {
  font-size: clamp(1.75rem, 1.8vw + 1.1rem, 2.75rem) !important;
  letter-spacing: -0.02em;
}
.qa-copy {
  max-width: 72ch !important;
  font-size: clamp(1.05rem, 0.45vw + 0.98rem, 1.2rem) !important;
}
.qa-badges--wide {
  gap: 1rem clamp(1rem, 2.2vw, 1.75rem) !important;
  margin-top: 2.25rem !important;
}
.qa-badge-wide {
  height: clamp(44px, 5.6vw, 68px) !important;
}
.qa-badges--round {
  gap: 1rem clamp(0.75rem, 2.2vw, 1.5rem) !important;
  margin-top: 1.5rem !important;
}
.qa-badge-round {
  width: clamp(56px, 8vw, 92px) !important;
}
@media (max-width: 640px) {
  .qa-card {
    max-width: 100% !important;
    padding: 1.75rem 1.25rem 1.75rem !important;
    border-radius: 16px !important;
  }
  .qa-title { font-size: 1.6rem !important; }
  .qa-copy { font-size: 0.95rem !important; max-width: 100% !important; }
  .qa-badges--wide { gap: 0.75rem 0.5rem !important; margin-top: 1.5rem !important; }
  .qa-badge-wide { height: 40px !important; }
  .qa-badges--round { gap: 0.75rem 0.6rem !important; margin-top: 1.25rem !important; }
  .qa-badge-round { width: 54px !important; }
}

/* =====================================================================
   SECCIONES NUEVAS v2 (8 oct 2026) — FAQ minimalista, creador con letra
   grande, doctores con look médico. Paleta: navy #1F4E8C / granate / Inter.
   ===================================================================== */

/* ---------- FAQ minimalista ---------- */
.faq-section {
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}
.faq-title {
  text-align: center;
  font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.6rem);
  font-weight: 800;
  color: #17306b;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #e5e9f0; }
.faq-item:first-child { border-top: 1px solid #e5e9f0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 0.25rem;
  font-weight: 700;
  color: #17306b;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.9rem;
  font-weight: 300;
  color: #9aa7bd;
  flex: none;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: #1F4E8C; }
.faq-item[open] summary { color: #1F4E8C; }
.faq-a {
  padding: 0 2.2rem 1.25rem 0.25rem;
  color: #47536b;
  line-height: 1.7;
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.12rem);
}

/* ---------- Creador v4: foto del VSL grande + stats editoriales ---------- */
.creator-section {
  background: #fff;
  padding: clamp(2.75rem, 5vw, 4.5rem) 1.25rem;
}
.creator-grid {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.creator-figure {
  margin: 0;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 44px -18px rgba(23, 48, 107, 0.35);
  border: 1px solid #e8eef8;
}
.creator-figure img {
  width: 100%;
  display: block;
  border-radius: 12px;
}
.creator-creds {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 0.5rem 0.35rem;
  text-align: center;
}
.creator-creds-name {
  font-weight: 800;
  color: #17306b;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.creator-creds-role {
  color: #8f2c26;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}
.creator-creds-org {
  color: #64748c;
  font-size: 0.88rem;
  font-style: italic;
}
.creator-eyebrow {
  color: #8f2c26;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.creator-title {
  font-size: clamp(1.75rem, 1.3vw + 1.25rem, 2.6rem);
  font-weight: 800;
  color: #17306b;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  line-height: 1.15;
}
.creator-copy {
  color: #333f57;
  line-height: 1.75;
  font-size: clamp(1.08rem, 0.5vw + 0.98rem, 1.28rem);
  margin: 0 0 1rem;
}
.creator-copy strong { color: #17306b; }

/* stats editoriales — sin cajas, números tipográficos */
.creator-evidence {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.creator-evidence-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.ce-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9d6ea);
}
.ce-line:last-child { background: linear-gradient(270deg, transparent, #c9d6ea); }
.ce-title {
  color: #8f2c26;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  white-space: nowrap;
}
.creator-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 1000px;
  margin: 0 auto;
}
.ce-stat { text-align: center; }
.ce-num {
  display: block;
  font-size: clamp(2.6rem, 2.2vw + 1.8rem, 4rem);
  font-weight: 800;
  color: #17306b;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ce-sup { font-size: 0.55em; vertical-align: 0.5em; }
.ce-plus { font-size: 0.6em; color: #8f2c26; vertical-align: 0.35em; }
.ce-label {
  display: block;
  margin-top: 0.6rem;
  color: #5b6a84;
  font-size: clamp(0.95rem, 0.35vw + 0.88rem, 1.05rem);
  line-height: 1.55;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .creator-grid { grid-template-columns: 1fr; }
  .creator-figure { max-width: 380px; margin: 0 auto; }
  .creator-evidence-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ce-label { max-width: 32ch; }
}

/* ---------- Doctores v4: fotos grandes, auto lento ---------- */
.doctors-section {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  padding: clamp(2.75rem, 5vw, 4.5rem) 1.25rem;
  border-top: 1px solid #e5e9f0;
}
.doctors-title {
  text-align: center;
  font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.6rem);
  font-weight: 800;
  color: #17306b;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.doctors-sub {
  text-align: center;
  color: #64748c;
  margin: 0 0 2.5rem;
  font-size: 1.05rem;
}
.dr-carousel {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.dr-viewport { overflow: hidden; }
.dr-track {
  display: flex;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dr-card {
  flex: 0 0 100%;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 18px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "photo info";
  gap: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 12px 34px -20px rgba(23, 48, 107, 0.3);
}
.dr-photo {
  grid-area: photo;
  width: clamp(120px, 13vw, 168px);
  height: clamp(120px, 13vw, 168px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e8eef8;
  box-shadow: 0 6px 18px -8px rgba(3, 21, 63, 0.4);
  margin-top: 0.25rem;
  flex: none;
}
.dr-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dr-info { grid-area: info; }
.dr-name {
  margin: 0 0 0.25rem;
  font-weight: 800;
  color: #17306b;
  font-size: clamp(1.25rem, 0.9vw + 1rem, 1.65rem);
  letter-spacing: -0.01em;
  line-height: 1.22;
}
.dr-org {
  margin: 0 0 1rem;
  color: #1F4E8C;
  font-weight: 600;
  font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.12rem);
  line-height: 1.5;
}
.dr-sep { color: #b6c4da; margin: 0 0.3rem; }
.dr-quote {
  margin: 0;
  color: #47536b;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.24rem);
  line-height: 1.7;
  font-style: italic;
  border-left: 3px solid #d9a441;
  padding-left: 1.15rem;
}
.dr-nav {
  position: absolute;
  top: auto;
  bottom: -14px;
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #1F4E8C;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.dr-nav:hover { opacity: 1; transform: scale(1.12); }
.dr-nav--prev { left: -20px; }
.dr-nav--next { right: -20px; }
.dr-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2.4rem;
}
.dr-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  border: none;
  background: #c3d0e4;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.dr-dot:hover { background: #8fa8cc; }
.dr-dot--active {
  width: 30px;
  background: #1F4E8C;
}
@media (max-width: 640px) {
  .dr-card {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "info";
    text-align: left;
    gap: 1.1rem;
  }
  .dr-photo { width: 108px; height: 108px; }
  .dr-nav { font-size: 2.6rem; width: 46px; height: 46px; }
  .dr-nav--prev { left: -10px; }
  .dr-nav--next { right: -10px; }
}


/* =====================================================================
   CAPA 9 OCT 2026 (tarde) — PEDIDOS FINALES DEL HILO
   a) Bot\u00f3n Good Value (popular-buy): fuera el lavanda/morado; igual
      que el Basic aprobado: blanco-lavanda claro, borde navy del
      producto, texto navy.
   b) Creador v5: SIN caja alrededor de foto+nombre (mucho m\u00e1s simple).
   c) Doctores v5: flechas m\u00f3viles GRANDES y DENTRO de la secci\u00f3n;
      transici\u00f3n m\u00e1s lenta y suave (1.4s).
   d) Franja minimalista de instituciones bajo los doctores.
   ===================================================================== */

/* a) Bot\u00f3n Good Value — color del producto */
.offer-block a.buy-button.popular-buy {
  background-image: linear-gradient(to top, #F5F5F8 50%, #FFFFFF 51%) !important;
  color: #0F2749 !important;
  border: 2px solid #1F4E8C !important;
}
.offer-block a.buy-button.popular-buy:hover {
  background-image: linear-gradient(to bottom, #F5F5F8 50%, #FFFFFF 51%) !important;
  filter: none;
}
.offer-block a.buy-button.popular-buy .btn-text small {
  color: #4b5563 !important;
}
.offer-block a.buy-button.popular-buy .shopping-cart-icon::before {
  color: #1F4E8C;
}


/* ---------- Creador v5: SIN caja, mucho más simple ---------- */
.creator-figure {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.creator-figure img {
  border-radius: 14px;
}
.creator-creds {
  padding: 0.9rem 0 0 !important;
  text-align: center;
}

/* ---------- Doctores v5: flechas GRANDES dentro, transición lenta ---------- */
.dr-track {
  transition: transform 0.55s cubic-bezier(0.33, 0.66, 0.4, 1) !important;
}
.dr-nav {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  width: 64px !important;
  height: 96px !important;
  font-size: 4.2rem !important;
  opacity: 0.55;
}
.dr-nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.dr-nav--prev { left: 6px !important; }
.dr-nav--next { right: 6px !important; }
.dr-card {
  padding-left: clamp(1.5rem, 3.5vw, 2.75rem);
  padding-right: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* Franja de instituciones minimalista */
.dr-orgs {
  margin-top: 2.6rem;
  text-align: center;
}
.dr-orgs-label {
  display: block;
  color: #8a97ad;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.dr-orgs-list {
  color: #64748b;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .dr-nav {
    width: 48px !important;
    height: 84px !important;
    font-size: 3.2rem !important;
    opacity: 0.6;
  }
  .dr-nav--prev { left: 0 !important; }
  .dr-nav--next { right: 0 !important; }
  .dr-orgs-list { font-size: 0.9rem; line-height: 1.6; }
}


/* Flechas más visibles (sólidas) — ajuste tras QC visual */
.dr-nav {
  color: #1F4E8C !important;
  opacity: 0.9 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
.dr-nav:hover { opacity: 1 !important; }

@media (max-width: 640px) {
  .dr-quote { padding-left: 2.2rem; }  /* la flecha izq ya no toca la barra dorada */
}


/* =====================================================================
   CAPA v6 (9 oct 2026, noche) — CREATOR + DOCTORS según capturas móvil
   a) Título arriba de TODO, en negrita pero sobrio (no gigante azul).
   b) Credenciales en bloque organizado sobre el texto (no apiñadas).
   c) Doctores: foto GRANDE rectangular (no círculo), flechas a los
      lados y alineadas al centro vertical de la TARJETA.
   d) Franja de "logos": nombres en estilo wordmark tipográfico.
   ===================================================================== */

/* a) + b) Creador v6 */
.creator-section .container:first-child { text-align: center; }
.creator-eyebrow {
  color: #8f2c26;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.creator-title {
  font-size: clamp(1.4rem, 1vw + 1.1rem, 2rem) !important;
  font-weight: 800;
  color: #17306b;
  letter-spacing: -0.01em;
  margin: 0 0 2rem !important;
  line-height: 1.2;
}
.creator-grid {
  grid-template-columns: minmax(260px, 380px) 1fr !important;
  align-items: start !important;
  gap: clamp(1.75rem, 4vw, 3.25rem) !important;
}
.creator-figure img {
  width: 100%;
  display: block;
  border-radius: 14px;
}
.creator-id {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #e5e9f0;
}
.creator-id-name {
  grid-column: 1 / -1;
  font-weight: 800;
  color: #17306b;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.creator-id-role {
  grid-column: 1;
  color: #8f2c26;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}
.creator-id-org {
  grid-column: 2;
  color: #64748c;
  font-size: 0.95rem;
  font-style: italic;
  justify-self: start;
  margin: 0;
}
@media (max-width: 760px) {
  .creator-grid { grid-template-columns: 1fr !important; }
  .creator-figure { max-width: 340px; margin: 0 auto; }
}

/* c) Doctores v6: foto rectangular grande */
.dr-photo {
  width: clamp(150px, 16vw, 210px) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  border-radius: 14px !important;
  overflow: hidden;
  border: none;
  box-shadow: 0 10px 26px -14px rgba(23, 48, 107, 0.4);
}
.dr-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
}
.dr-nav {
  width: 58px !important;
  height: 58px !important;
  font-size: 3.6rem !important;
  top: 50% !important;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(2px);
}
.dr-nav:hover { transform: translateY(-50%) scale(1.1); }
.dr-nav--prev { left: 4px !important; }
.dr-nav--next { right: 4px !important; }

/* d) Instituciones como wordmarks tipográficos */
.dr-orgs {
  margin-top: 2.6rem;
  border-top: 1px solid #e5e9f0;
  padding-top: 1.9rem;
}
.dr-orgs-label {
  display: block;
  color: #8a97ad;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.dr-orgs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.4rem;
}
.dr-orgs-row span {
  color: #33415e;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .dr-orgs-row { gap: 0.7rem 1.6rem; }
  .dr-orgs-row span { font-size: 0.94rem; }
  .dr-nav { width: 46px !important; height: 46px !important; font-size: 2.8rem !important; }
}


/* =====================================================================
   BOTONES ADD TO CART (9 oct 2026, noche) — contraste de packs:
   Good Value (3 botellas): botón navy sólido MÁS OSCURO (texto blanco)
   Basic (2 botellas): botón claro como está (navy sobre blanco)
   Mismo color de producto en ambos; el carrito igual en los dos.
   ===================================================================== */
.offer-block a.buy-button.popular-buy {
  background-image: linear-gradient(180deg, #1F4E8C 0%, #17306B 100%) !important;
  color: #ffffff !important;
  border: 2px solid #17306B !important;
}
.offer-block a.buy-button.popular-buy:hover {
  background-image: linear-gradient(180deg, #2460a4 0%, #1a3a7a 100%) !important;
}
.offer-block a.buy-button.popular-buy .btn-text small {
  color: #cfe0f5 !important;
}
.offer-block a.buy-button.popular-buy .shopping-cart-icon::before {
  color: #ffffff;
}


/* ===== FIX MÓVIL flechas (9 oct noche): sin fondo, fuera del contenido ===== */
@media (max-width: 640px) {
  .dr-card {
    /* dejar aire a los lados para las flechas */
    margin: 0 34px;
  }
  .dr-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    width: 34px !important;
    height: 64px !important;
    font-size: 2.6rem !important;
    top: 50% !important;
    opacity: 0.85 !important;
  }
  .dr-photo { width: 118px !important; }
  .dr-info { min-width: 0; }
}


/* ===== FIX FINAL flecha izq móvil (9 oct noche) ===== */
@media (max-width: 640px) {
  .dr-card { margin: 0 30px; }
  .dr-name { padding: 0 18px 0 0; }
  .dr-org  { padding: 0 18px 0 0; }
  .dr-quote { padding-left: 2.2rem; padding-right: 1.1rem; }
  .dr-info { padding-left: 2px; }
  .dr-nav--prev { left: -2px !important; }
  .dr-nav--next { right: -2px !important; }
  .dr-nav { opacity: 0.7 !important; }
}


/* =====================================================================
   DOCTORES v8 (10 oct 2026) — DESKTOP protagonista:
   - Card horizontal ancho: FOTO GRANDE (240px) a la izquierda con marco
     elegante, texto a la derecha con la cita protagonista.
   - Flechas GRANDES y elegantes (chevron fino, 64px, fuera del card).
   - Franja de logos oficiales en monocromo navy.
   - Móvil: layout vertical (foto arriba centrada) como v7.
   ===================================================================== */
.doctors-section { padding: clamp(2.5rem, 5vw, 4rem) 1rem !important; }

.doctors-title {
  font-size: clamp(1.7rem, 1.3vw + 1.2rem, 2.5rem) !important;
  margin-bottom: 0.35rem !important;
}
.doctors-sub { margin-bottom: 2.2rem !important; }

.dr-carousel {
  max-width: 980px !important;
  padding: 0 72px;   /* aire para las flechas */
}
.dr-viewport { overflow: hidden; }
.dr-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.33, 0.66, 0.4, 1) !important;
}
.dr-card {
  flex: 0 0 100%;
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(23, 48, 107, 0.35) !important;
  padding: 0 !important;
  text-align: left !important;
}
.dr-photo {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  overflow: hidden;
  flex: none !important;
  position: relative;
}
.dr-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block;
}
.dr-info {
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.6rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  max-width: none !important;
}
.dr-name {
  font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem) !important;
  margin: 0 0 0.3rem !important;
  text-align: left !important;
  line-height: 1.22 !important;
}
.dr-org {
  font-size: clamp(0.88rem, 0.3vw + 0.82rem, 1rem) !important;
  color: #64748b !important;
  margin: 0 0 1.15rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.dr-quote {
  font-size: clamp(1.08rem, 0.5vw + 0.98rem, 1.3rem) !important;
  line-height: 1.68 !important;
  color: #3d4a63 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 3px solid #d9a441 !important;
  padding-left: 1.1rem !important;
  text-align: left !important;
  font-style: italic;
}

/* Flechas GRANDES elegantes: chevron fino navy, sin fondo */
.dr-nav {
  position: absolute;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  width: 64px !important;
  height: 88px !important;
  font-size: 4.6rem !important;
  font-weight: 300 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #1F4E8C !important;
  opacity: 0.6 !important;
  cursor: pointer;
  line-height: 1 !important;
  padding: 0 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.9);
}
.dr-nav:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.06);
}
.dr-nav--prev { left: 0 !important; }
.dr-nav--next { right: 0 !important; }

.dr-dots { margin-top: 1.8rem !important; }

/* Franja de LOGOS oficiales en monocromo navy */
.dr-orgs {
  margin-top: 2.8rem !important;
  border-top: 1px solid #e5e9f0 !important;
  padding-top: 2rem !important;
}
.dr-orgs-label {
  display: block;
  color: #8a97ad;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.4rem !important;
  text-align: center;
}
.dr-orgs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.4rem 3rem;
}
.org-logo {
  height: 40px;
  width: auto;
  opacity: 0.82;
  /* monocromo navy */
  filter: grayscale(100%) brightness(0) opacity(1);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.org-logo:hover { opacity: 1; }

/* ===== MÓVIL: vertical como v7 ===== */
@media (max-width: 720px) {
  .dr-carousel { padding: 0 34px; max-width: 640px !important; }
  .dr-card {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }
  .dr-photo {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    max-height: 260px;
  }
  .dr-info {
    align-items: center !important;
    text-align: center !important;
    padding: 1.3rem 1.1rem 1.6rem !important;
  }
  .dr-name, .dr-org, .dr-quote { text-align: center !important; }
  .dr-quote { border-left: none !important; padding-left: 0 !important; }
  .dr-nav {
    width: 34px !important;
    height: 64px !important;
    font-size: 3rem !important;
    opacity: 0.75 !important;
  }
  .dr-orgs-row { gap: 1rem 1.8rem; }
  .org-logo { height: 26px; }
}

/* ===== Ajuste fino móvil v8 (10 oct) ===== */
@media (max-width: 720px) {
  .dr-carousel { padding: 0 26px !important; }
  .dr-photo { aspect-ratio: 16 / 11 !important; }
}


/* =====================================================================
   BOTONES v2 (10 oct 2026) — sutileza:
   Good Value (3 botellas): azul claro elegante (ya no navy oscuro).
   Basic (2 botellas): lavanda pálido intermedio, borde suave.
   ===================================================================== */
.offer-block a.buy-button.popular-buy {
  background-image: linear-gradient(180deg, #4577C2 0%, #3A66AC 100%) !important;
  color: #ffffff !important;
  border: 2px solid #3A66AC !important;
}
.offer-block a.buy-button.popular-buy:hover {
  background-image: linear-gradient(180deg, #4f81cc 0%, #4370b6 100%) !important;
}
.offer-block a.buy-button.popular-buy .btn-text small {
  color: #d9e6f8 !important;
}

.offer-block a.buy-button.basic-buy {
  background-image: linear-gradient(180deg, #EDF2FA 0%, #E3EBF6 100%) !important;
  color: #17306b !important;
  border: 1.5px solid #B9CBE4 !important;
}
.offer-block a.buy-button.basic-buy:hover {
  background-image: linear-gradient(180deg, #F2F6FC 0%, #E9F0F9 100%) !important;
}
.offer-block a.buy-button.basic-buy .shopping-cart-icon::before {
  color: #4577C2;
}


/* =====================================================================
   DOCTORES v9 (10 oct 2026) — flechas protagonistas + foto vertical:
   - Flechas desktop 88x120px, chevron serif elegante, más presentes.
   - Flechas móviles 56x96px, grandes y centradas, DENTRO del padding
     reservado (nunca pegadas al borde del contenido).
   - Foto: recorte vertical más alto (3/4) para caras completas.
   - Credenciales: menos negritas, más pequeñas, solo lo importante.
   ===================================================================== */
.dr-carousel { padding: 0 96px !important; }   /* aire para flechas grandes */

.dr-card {
  grid-template-columns: 280px 1fr !important;  /* foto más ancha */
}
.dr-photo { aspect-ratio: 3 / 4 !important; }

.dr-org {
  font-weight: 500 !important;
  font-size: clamp(0.8rem, 0.2vw + 0.76rem, 0.9rem) !important;
  color: #8b98af !important;
}

/* Flechas grandes y elegantes — desktop */
.dr-nav {
  width: 88px !important;
  height: 120px !important;
  font-size: 6rem !important;
  opacity: 0.55 !important;
}
.dr-nav--prev { left: 0 !important; }
.dr-nav--next { right: 0 !important; }

/* ===== Móvil: flechas GRANDES centradas ===== */
@media (max-width: 720px) {
  .dr-carousel { padding: 0 52px !important; }
  .dr-card {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }
  .dr-photo { aspect-ratio: 4 / 5 !important; }
  .dr-nav {
    width: 52px !important;
    height: 104px !important;
    font-size: 3.8rem !important;
    opacity: 0.8 !important;
    top: 50% !important;
  }
  .dr-nav--prev { left: 0 !important; }
  .dr-nav--next { right: 0 !important; }
  .dr-info { padding: 1.15rem 0.4rem 1.4rem !important; }
  .dr-org { margin-bottom: 0.85rem !important; }
}

/* Flechas aún más notorias (ajuste final) */
.dr-nav {
  font-size: 7rem !important;
  font-weight: 400 !important;
  opacity: 0.65 !important;
  color: #1F4E8C !important;
}
.dr-nav:hover { opacity: 1 !important; }
@media (max-width: 720px) {
  .dr-nav { font-size: 4.2rem !important; }
}

@media (max-width: 720px) {
  .dr-photo { aspect-ratio: 4 / 5.4 !important; }
}

/* =====================================================================
   DOCTORES v10 (10 oct 2026) — móvil: flechas laterales con degradado,
   tarjeta central ancha que aprovecha el espacio horizontal.
   ===================================================================== */
@media (max-width: 720px) {
  .dr-carousel {
    display: grid !important;
    grid-template-columns: 56px 1fr 56px !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
    column-gap: 4px !important;
  }
  /* el viewport del carrusel es la columna central */
  .dr-viewport, .dr-track-wrap, .dr-cards-clip {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
  /* flechas: en las columnas laterales, centradas, con degradado */
  .dr-nav {
    position: static !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 130px !important;
    font-size: 4rem !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .dr-nav--prev {
    grid-column: 1 !important;
    background: linear-gradient(to right, rgba(31,78,140,0.10), rgba(31,78,140,0.02)) !important;
  }
  .dr-nav--next {
    grid-column: 3 !important;
    background: linear-gradient(to left, rgba(31,78,140,0.10), rgba(31,78,140,0.02)) !important;
  }
  /* tarjeta ancha: sin margen, foto arriba pero más compacta */
  .dr-card {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }
  .dr-photo { aspect-ratio: 4 / 4.6 !important; }
  .dr-info { padding: 1rem 0.9rem 1.3rem !important; }
  .dr-quote { font-size: 1rem !important; }
}

/* Desktop: tarjeta más ancha también (menos espacio en blanco) */
@media (min-width: 721px) {
  .dr-carousel { padding: 0 104px !important; }
  .dr-card { grid-template-columns: 300px 1fr !important; }
}

/* =====================================================================
   DOCTORES v10b (10 oct 2026) — móvil: tarjeta a TODO el ancho, flechas
   flotantes laterales con degradado (se leen como flechas, no roban espacio).
   ===================================================================== */
@media (max-width: 720px) {
  .dr-carousel {
    display: block !important;
    padding: 0 !important;
    position: relative !important;
  }
  .dr-viewport { min-width: 0 !important; }
  .dr-card {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }
  .dr-photo { aspect-ratio: 4 / 4.4 !important; }
  .dr-info { padding: 1rem 1.4rem 1.3rem !important; }
  .dr-quote { font-size: 1.02rem !important; }
  .dr-name { font-size: 1.18rem !important; }

  /* flechas flotantes con degradado, grandes y centradas verticalmente */
  .dr-nav {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 54px !important;
    font-size: 3.6rem !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1F4E8C !important;
    text-shadow: 0 0 14px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.9) !important;
    z-index: 5 !important;
  }
  .dr-nav--prev {
    left: 0 !important;
    background: linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%) !important;
  }
  .dr-nav--next {
    right: 0 !important;
    background: linear-gradient(to left, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%) !important;
  }
}

/* =====================================================================
   DOCTORES v10c (10 oct 2026) — flechas = botones circulares sólidos
   (blanco + sombra + borde navy) sobre scrim degradado a los costados.
   ===================================================================== */
@media (max-width: 720px) {
  .dr-nav {
    top: 50% !important;
    bottom: auto !important;
    height: 52px !important;
    width: 52px !important;
    margin-top: -26px !important;
    font-size: 2.6rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    border: 2px solid #1F4E8C !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 10px rgba(31,78,140,0.35) !important;
    color: #1F4E8C !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .dr-nav--prev { left: 6px !important; }
  .dr-nav--next { right: 6px !important; }
  .dr-nav:active { transform: scale(0.92) !important; }
}

/* v10d fix: min-height de v10 pisaba la altura del botón circular */
@media (max-width: 720px) {
  .dr-nav { min-height: 52px !important; }
}

/* =====================================================================
   FAQ móvil (10 oct 2026) — tipografía más grande y cómoda de leer.
   ===================================================================== */
@media (max-width: 767px) {
  .faq-item summary {
    font-size: 1.13rem !important;
    line-height: 1.45 !important;
    padding: 1.25rem 0.35rem !important;
  }
  .faq-a {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    padding-right: 1.8rem !important;
  }
  .faq-item summary::after {
    font-size: 2rem !important;
    margin-left: 0.65rem !important;
  }
  .faq-title { font-size: 1.7rem !important; }
}

/* =====================================================================
   FOTOS DOCTORES (10 oct 2026) — recortadas 4/5 con cara arriba:
   contenedor con la MISMA proporción, sin recorte del navegador.
   ===================================================================== */
.dr-photo { aspect-ratio: 4 / 5 !important; }
.dr-photo img { object-position: center top !important; }
@media (max-width: 720px) {
  .dr-photo { aspect-ratio: 4 / 5 !important; }
}

/* =====================================================================
   FOTOS DOCTORES FIX (10 oct 2026): la capa vieja fijaba max-height 260px
   y aspect 16/10 → caras corridas en móvil. Bloque definitivo:
   ===================================================================== */
.dr-photo {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  max-height: none !important;
}
.dr-photo img {
  object-fit: cover !important;
  object-position: center top !important;
}
@media (max-width: 720px) {
  .dr-photo {
    aspect-ratio: 4 / 5 !important;
    max-height: none !important;
  }
}
@media (min-width: 721px) {
  .dr-photo {
    aspect-ratio: 3 / 4 !important;   /* desktop: vertical elegante */
    max-height: none !important;
  }
}

/* =====================================================================
   DOCTORES móvil (10 oct 2026) — foto HORIZONTAL (16/10) para que la
   tarjeta no se vea tan grande ni ocupada. Desktop conserva la vertical.
   ===================================================================== */
@media (max-width: 720px) {
  .dr-photo {
    aspect-ratio: 640 / 400 !important;   /* exacto a las fotos -m (1.6) */
    max-height: none !important;
  }
  .dr-photo img {
    object-fit: cover !important;
    object-position: center 18% !important;   /* la cara está arriba: encuadre de retrato horizontal */
  }
}

/* Flechas móviles centradas sobre la foto horizontal (no sobre el nombre) */
@media (max-width: 720px) {
  .dr-nav {
    top: 96px !important;
    bottom: auto !important;
    margin-top: 0 !important;
  }
}

/* =====================================================================
   DOCTORES móvil v11 (10 oct 2026) — fotos -m dedicadas 16/10 (picture
   art-direction) + flechas centradas en la TARJETA completa.
   ===================================================================== */
@media (max-width: 720px) {
  .dr-photo {
    aspect-ratio: 640 / 400 !important;   /* exacto a las fotos -m (1.6) */
    max-height: none !important;
  }
  .dr-photo img {
    object-fit: cover !important;
    object-position: center center !important;   /* ya vienen recortadas */
  }
  /* flechas: centradas sobre la tarjeta completa (foto+texto) */
  .dr-nav {
    top: 50% !important;
    margin-top: -26px !important;
    bottom: auto !important;
  }
}

/* v12 FIX DEFINITIVO: alto de la foto por aspect-ratio exacto, no por height:100% */
@media (max-width: 720px) {
  .dr-photo {
    height: auto !important;
    aspect-ratio: 640 / 400 !important;
  }
  .dr-photo img {
    height: 100% !important;
    object-position: center center !important;
  }
}

/* v12b: altura EXPLÍCITA por cálculo — nada la pisa */
@media (max-width: 720px) {
  .doctors-section .dr-carousel .dr-card .dr-photo {
    height: calc((100vw - 58px) * 400 / 640) !important;
    aspect-ratio: 640 / 400 !important;
  }
}


/* =====================================================================
   VSL 9:16 VERTICAL — [BR] Biblical Rosmery Lead 01 (10 oct 2026)
   El player nuevo (6ac75a76d776e3eb934e0d6b) es VERTICAL (406x720),
   distinto a los 16:9 de las paginas 00-05. Se restaura el ancho
   vertical oficial de VTurb (la capa del 8 oct lo ponia en 'none'):
   400px en movil, min(620px, 62vh) en escritorio, para que el video
   quepa entero a lo alto. El placeholder del embed ya lleva el
   padding 177.63% (9:16) en el HTML.
   ===================================================================== */
vturb-smartplayer {
  --player-vertical-width: 400px;
}
@media (min-width: 768px) {
  vturb-smartplayer {
    --player-vertical-width: min(620px, 62vh);
  }
}


/* =====================================================================
   CAPA v7 (10 oct 2026) — CREATOR ID APILADO, adaptación [BR]
   El bloque de credenciales de la v6 pone role y org en la MISMA fila
   (grid auto 1fr, role col-1 / org col-2): diseñado para textos cortos
   ("Former Chief Medical Officer" + "Pfizer Inc."). Con los credenciales
   largos del Dr. Shimon ("Neurosurgeon & Neural Regeneration Researcher"
   + "Yad Elohim Laboratory, Tel Aviv") el role invade la columna 2, el
   org queda comprimido, salta la palabra huérfana ("Aviv") y la fila
   queda despareja en desktop; en móvil se apiña contra el margen.
   Fix: apilar — nombre, role y org cada uno en SU línea, alineados a la
   izquierda, con el filete separador igual que la v6. Funciona igual
   para credenciales cortas o largas. Solo en la sección creator.
   ===================================================================== */
.creator-grid .creator-id {
  display: block;
}
.creator-id-name {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}
.creator-id-role {
  display: block;
  font-size: 1.02rem;
  line-height: 1.4;
  margin-bottom: 0.3rem;
}
.creator-id-org {
  display: block;
  font-size: 0.98rem;
  line-height: 1.4;
  font-style: italic;
  margin: 0;
}
@media (max-width: 760px) {
  .creator-id-name { font-size: 1.22rem; }
  .creator-id-role { font-size: 0.95rem; }
  .creator-id-org  { font-size: 0.92rem; }
}

/* Balanceo de líneas en móvil (mismo fix v7): evita palabras huérfanas
   ("Researcher" / "FORMULA?" solas en su línea). text-wrap: balance
   reparte las palabras entre las líneas disponibles. */
.creator-id-role,
.creator-id-org {
  text-wrap: balance;
}
.creator-eyebrow {
  text-wrap: balance;
}

/* ============================================================
   CAPA DE COLOR v9 (11 oct 2026) — ADAPTACIÓN NeuroRecall
   Paleta muestreada de la etiqueta real (botella negra):
   navy #0B0F1C · azul #1E7CB8 · banner #17649E · cyan #189AD3
   ============================================================ */
:root {
  --nr-ink: #0B0F1C;
  --nr-blue: #1E7CB8;
  --nr-blue-deep: #12405F;
  --nr-blue-soft: #C9D8E4;
  --nr-mist: #F4F7FA;
  --nr-line: #DCE6ED;
  --nr-hot: #cf7a3e;
  --nr-green: #0f7a4a;
  --nr-red: #b3362b;
}
/* Tarjeta destacada (3+3 FREE): radial del claro al casi negro con el azul NR */
.offer-block .best-value-package .package-content,
.offer-block .best-value-content {
  background: radial-gradient(ellipse at 50% 30%, #1E4E75 0%, #143C5E 42%, #0B0F1C 100%) !important;
}
/* Laterales (Basic / Good Value): lavado sutil azul */
.offer-block .basic-package .package-content {
  background: linear-gradient(180deg, #F4F7FA 0%, #E9F0F6 100%) !important;
  border-color: #C9D8E4 !important;
}
.offer-block .popular-package .package-content {
  background: linear-gradient(180deg, #EDF3F8 0%, #DFEAF2 100%) !important;
  border-color: #B9CFDD !important;
}
.package-header { border-color: var(--nr-line); }
.basic-package .package-header h3 { color: #1E7CB8; }
.popular-package .package-header h3 { color: #17649E; }
/* Tinta de la cinta MOST POPULAR: texto casi negro de la marca NR */
.best-value-badge { color: #0B0F1C; }