/* =========================================================================
GUMIVIT — GLOBAL
=========================================================================

Va en el sitio completo. Cárgala DESPUÉS de Bootstrap.

ORDEN DE CARGA — importa:
bootstrap.min.css
gumivit-global.css      ← esta
gumivit-home.css        ← solo en el layout de la home

Si Bootstrap carga después, varias reglas pierden por orden (fue lo que
dejó el botón "Dónde comprar" en blanco). Los selectores que compiten
con clases de Bootstrap van duplicados (.btn.btn-gumvit-green) para
ganar por especificidad y funcionar en cualquier orden.

ÍNDICE
1. Tokens
2. Base
3. Layout
4. Componentes
5. Navbar y footer
6. Páginas (excepto home)
7. Responsive

Valores marcados con  (?)  están estimados desde el PNG del diseño.

========================================================================= */


/* =========================================================================
1. TOKENS
=========================================================================
Deben quedar en la hoja global: gumivit-home.css los consume.
========================================================================= */

:root {
  
  /* --- Verdes --- */
  --gv-green:               #02B557;   /* verde de marca */
  --gv-green-footer:        #04A34F;
  --gv-green-footer-dark:   #03823E;
  --gv-green-cta:           #70AE45;   /* (?) ver nota A */
  --gv-green-cta-hover:     #659A3F;
  --gv-green-cta-shadow:    #438300;
  --gv-green-cta-shadow-2:  #3B742E;
  --gv-green-producto:      #3BAE60;
  --gv-green-thumb:         #4AA96F;
  --gv-green-thumb-bg:      #98DAB2;
  --gv-green-titulo:        #608A4E;
  --gv-green-divider:       #D1E4D7;
  
  /* --- Naranjas --- */
  --gv-orange:              #E86A27;
  --gv-orange-vito:         #FF7226;
  --gv-orange-marquee:      #F47330;
  --gv-orange-stroke:       #D64E1C;
  --gv-orange-btn:          #E97B53;
  --gv-orange-btn-hover:    #D96F49;
  --gv-orange-btn-shadow:   #B85736;
  --gv-orange-btn-shadow-2: #A04A2E;
  --gv-orange-divider:      #E8651F;
  --gv-orange-titulo:       #C55A33;
  --gv-orange-pq:           #FF8646;
  --gv-coral:               #FD7959;
  --gv-coral-hero-from:     #F85C36;
  --gv-coral-hero-to:       #FF8568;
  
  /* --- Azules / violetas --- */
  --gv-blue-panel:          #7790F7;   /* (?) ver nota B */
  --gv-blue-grad-from:      #7790F7;
  --gv-blue-grad-to:        #5D74D1;
  --gv-blue-badge:          #3247D1;
  --gv-blue-pq:             #6D85E8;
  --gv-blue-cta-from:       #758EF4;
  --gv-blue-cta-to:         #5F76D3;
  --gv-icon-bg:             #E4E2FB;
  --gv-icon-fg:             #5B4FE0;
  --gv-quote:               #C9CDF7;
  
  /* --- Otros --- */
  --gv-yellow:              #FFC107;
  --gv-yellow-highlight:    #FFDF5A;
  --gv-magenta-from:        #E747A7;
  --gv-magenta-to:          #A01A6A;
  --gv-purple-cuentos:      #AB04D8;
  
  /* --- Neutros --- */
  --gv-text:                #171717;
  --gv-text-body:           #333333;
  --gv-text-muted:          #6C757D;
  --gv-card-bg:             #F7F7F7;
  --gv-card-bg-alt:         #F4F4F4;
  --gv-feature-bg:          #F2F2F2;
  --gv-nav-bg:              #F1F1F1;
  
  /* --- Escalas --- */
  --gv-radius:              12px;
  --gv-radius-md:           15px;
  --gv-radius-lg:           1.5rem;
  --gv-radius-xl:           30px;
  --gv-radius-pill:         16px;
  
  --gv-font:                'Baloo 2', sans-serif;
  --gv-navbar-h:            80px;
}

/* NOTA A — .btn-gumvit-green usa #70AE45, un verde oliva apagado, mientras
el verde de marca en el resto del sitio es #02B557. Es el CTA principal
y el único elemento con ese tono. Probablemente esté mal, pero no lo
cambio sin confirmar. Si se confirma: --gv-green-cta: var(--gv-green).

NOTA B — Dos azules en paneles que en el diseño se ven iguales:
.bg-gumvit-purple es degradado y .main-container es plano (#7790F7).
Uno de los dos está mal. Al confirmarlo, unificar. */


/* =========================================================================
2. BASE
========================================================================= */

body { font-family: var(--gv-font); }

.text-orange        { color: var(--gv-orange); }
.text-gumvit-yellow { color: var(--gv-yellow); }
.hightlight         { color: var(--gv-yellow-highlight); }
/* ^ el typo es intencional: la clase se llama así en el markup del FAQ.
Si se corrige, hay que corregirla también en la plantilla. */

.rounded-3xl { border-radius: var(--gv-radius-lg); }


/* =========================================================================
3. LAYOUT
=========================================================================
El .container saltaba a 1216px en 1200px, pero el grid (col-lg-*) y el
navbar (navbar-expand-lg) cambian a modo escritorio en 992px. Entre 992
y 1199 el layout de desktop quedaba embutido en 688px. Ahora hay un
escalón intermedio.

Selector duplicado: .container de Bootstrap declara max-width en los
mismos breakpoints con la misma especificidad. Sin duplicar, gana quien
cargue después.
========================================================================= */

.container.container {
  width: 100%;
  max-width: 335px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px)  { .container.container { max-width: 688px; } }
@media (min-width: 992px)  { .container.container { max-width: 944px; } }  /* (?) */
@media (min-width: 1200px) { .container.container { max-width: 1216px; } }

.mt-n8 { margin-top: -80px; }


/* =========================================================================
4. COMPONENTES
========================================================================= */

/* --- 4.1 Botones ------------------------------------------------------- */
/* Selector duplicado (.btn.btn-gumvit-green) para ganarle a .btn de
Bootstrap sin recurrir a !important. Esta es la regla que dejó el botón
"Dónde comprar" en blanco cuando se quitó el !important. */

.btn.btn-gumvit-green {
  background-color: var(--gv-green-cta);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 4px 0 var(--gv-green-cta-shadow);
  transition: all 0.2s;
}
.btn.btn-gumvit-green:hover,
.btn.btn-gumvit-green:focus,
.btn.btn-gumvit-green:active {
  background-color: var(--gv-green-cta-hover);
  color: #fff;
  box-shadow: 0 2px 0 var(--gv-green-cta-shadow-2);
  transform: translateY(2px);
}

.btn.btn-gumvit-orange {
  background-color: var(--gv-orange-btn);
  color: #fff;
  border: none;
  border-radius: var(--gv-radius-pill);
  padding: 10px 20px;
  box-shadow: 0 4px 0 var(--gv-orange-btn-shadow);
  transition: all 0.2s;
}
.btn.btn-gumvit-orange:hover,
.btn.btn-gumvit-orange:focus,
.btn.btn-gumvit-orange:active {
  background-color: var(--gv-orange-btn-hover);
  color: #fff;
  box-shadow: 0 2px 0 var(--gv-orange-btn-shadow-2);
  transform: translateY(2px);
}

/* --- 4.2 Íconos -------------------------------------------------------- */
/* ELIMINADA de la hoja original:
.fa-solid, .fas { font-size: 14px !important; }
Ese !important pisaba TODOS los íconos de Font Awesome del sitio sin
excepción posible: aplastaba a 14px los de .vito-feature-icon (círculos
de 44px) y los de .btn-social-icon. Ahora el tamaño va donde toca. */

.btn.btn-gumvit-green i,
.btn.btn-gumvit-orange i { font-size: 0.875rem; }

/* CONFLICTO RESUELTO — .btn-social-icon estaba definida dos veces: 40px /
1.5rem en la hoja principal y 32px / 16px en el master page. Ganaba la
del master page por orden de carga. Se conserva la del diseño. */
.btn-social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin: 0 5px;
  text-decoration: none;
}
.btn-social-icon i { font-size: 1.5rem; }

.btn-facebook  { background-color: #1877F2; }
.btn-instagram {
  background: radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

/* --- 4.3 Fondos de marca ----------------------------------------------- */

.bg-gumvit-blue  { background-color: var(--gv-blue-panel); }
.bg-vito-orange  { background-color: var(--gv-orange-vito); }

.bg-gumvit-orange {
  background-image: url('/Gumivit/media/Images/bg-orange.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  color: #fff;
  padding-bottom: 80px;
}

.bg-gumvit-dark-green {
  background-image: url('/Gumivit/media/Images/bg-g.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  color: #fff;
  padding-bottom: 80px;
  position: relative;
}
.bg-gumvit-dark-green::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: url('/Gumivit/media/Images/divisor.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- 4.4 Video --------------------------------------------------------- */

.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
}
.video-container iframe {
  width: 100%;
  height: 600px;
  display: block;
  aspect-ratio: 1216 / 600;
}
.video-preview {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: bottom;
  background-color: #fff;
  background-repeat: no-repeat;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.video-playing .video-preview { opacity: 0; pointer-events: none; }

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 3;
}
.play-button:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1.05);
}
.play-button::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #8D0B14;
  margin-left: 5px;
}
.video-playing .play-button { opacity: 0; visibility: hidden; }

/* --- 4.5 Carrusel de miniaturas (genérico) ----------------------------- */

.swiper-thumbs { height: 80px; box-sizing: border-box; }
.swiper-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
}
.swiper-thumbs .swiper-slide-thumb-active img {
  opacity: 1;
  border-color: #fff;
  border-radius: var(--gv-radius);
}

/* --- 4.6 Listas y pre-footer ------------------------------------------- */

.list-vito { list-style-type: none; }
.list-vito li::before {
  content: "✓ ";
  font-weight: bold;
  color: #fff;
  font-size: 1rem;
}

.prefooter-text h2 {
  font-size: 2.1rem;
  color: var(--gv-orange);
  font-weight: bold;
}
.prefooter-text p { font-size: 1.5rem; }


/* =========================================================================
5. NAVBAR Y FOOTER
========================================================================= */

/* --- 5.1 Navbar -------------------------------------------------------- */
/* height: 80px rompía el menú desplegable: el collapse de Bootstrap vive
dentro del .navbar, así que al abrirlo el fondo blanco seguía midiendo
80px y los links quedaban flotando sobre el contenido. */
.navbar.navbar {
  min-height: var(--gv-navbar-h);
  height: auto;
}

/* Duplicado para ganarle a .navbar-light .nav-link de Bootstrap.
Los dos links tenían colores distintos: "Productos" heredaba #171717 de
aquí y "¿Porqué Gumivit?" llevaba .text-black (#000). Quitar text-black
del markup y dejar que mande esta regla. */
.navbar .nav-link.nav-link {
  color: var(--gv-text);
  font-family: var(--gv-font);
  font-size: 1rem;
  font-weight: 600;
}

.navbar-brand { font-size: 1.5rem; font-weight: 700; }

.gumivit-logo     { display: flex; align-items: center; }
.gumivit-logo img { width: 140px; height: auto; }
.img-procaps      { width: 170px; height: auto; }

/* --- 5.2 Footer -------------------------------------------------------- */

.bg-gumvit-dark-green-foot { background-color: var(--gv-green-footer); }

.gumivit-footer      { position: relative; overflow: hidden; }
.gumivit-footer-logo { width: 160px; }
.gumivit-footer-links li { margin-bottom: 0.85rem; }
.gumivit-footer-links a  { font-size: 1.05rem; }
.gumivit-footer-legal {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 480px;
}
.gumivit-footer-art { position: relative; min-height: 320px; }

/* Con overflow:hidden en .gumivit-footer y bottom:-145px se recortaban
145px de Vito. (?) medir contra el diseño. */
.gumivit-footer-bear {
  position: absolute;
  bottom: -60px;
  right: 0;
  width: 100%;
  max-width: 615px;
}

/* z-index:1 pone esta barra por delante del oso. Verificar cuál va
adelante en el diseño. */
.gumivit-footer-brandbar {
  position: relative;
  background-color: var(--gv-green-footer-dark);
  margin-top: 2rem;
  z-index: 1;
}
.gumivit-footer-brandbar-label { font-size: 0.9rem; opacity: 0.85; }
.gumivit-footer-procaps-logo   { height: 39px; width: auto; }


/* =========================================================================
6. PÁGINAS
=========================================================================
La home vive en gumivit-home.css. El resto sigue aquí; se pueden ir
separando con el mismo criterio a medida que se revisen.
========================================================================= */

/* -------------------------------------------------------------------------
6.1 PRODUCTOS
------------------------------------------------------------------------- */

.productos-eyebrow { font-size: 1rem; color: var(--gv-text-body); }
.productos-title {
  font-size: 3rem;
  color: var(--gv-orange-vito);
  line-height: 1.15;
}
.productos-spark { position: absolute; width: 26px; height: 26px; top: 0.1em; }
.productos-spark-left  { left: -34px; }
.productos-spark-right { right: -34px; }
.productos-wave {
  position: absolute;
  top: 55%;
  width: 220px;
  height: auto;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.productos-wave-left  { left: -90px; }
.productos-wave-right { right: -90px; }

.productos-card       { background-color: var(--gv-card-bg-alt); z-index: 1; }
.productos-card-img   { width: 160px; flex-shrink: 0; }
.productos-card-title { font-size: 1.75rem; }
.productos-card-title--c     { color: var(--gv-green-titulo); }
.productos-card-title--czinc { color: var(--gv-orange-titulo); }
.productos-card-text  { color: var(--gv-text-body); }

/* -------------------------------------------------------------------------
6.2 DETALLE DE PRODUCTO
------------------------------------------------------------------------- */

.producto-carrusel-card {
  background-image: url('/Gumivit/media/Images/Fondo-de-los-slides.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.producto-carrusel-card .mySwiper { width: 100%; height: 100%; }
.producto-carrusel-card .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.producto-carrusel-card .swiper-slide img {
  max-height: 78%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.producto-carrusel-card .swiper-pagination { bottom: 10px; }

.producto-brand   { color: var(--gv-text-muted); font-size: 0.95rem; }
.producto-title   { font-size: 2.5rem; }
.producto-lead    { font-size: 1.1rem; }
.producto-heading { color: var(--gv-green-producto); }
.producto-feature {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gv-text-body);
  background-color: var(--gv-feature-bg);
  border-radius: var(--gv-radius-pill);
  padding: 0.5rem 1rem 0.5rem 0.6rem;
}
.producto-feature img { width: 30px; height: 30px; }
.producto-divider { border-top: 1px solid var(--gv-green-divider); opacity: 1; }

/* El CTA de esta sección va más grande que el estándar del sitio
(medido del PDF: ~257x62px, texto ~20px) */
.producto-detalle .btn.btn-gumvit-green {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 14px 28px;
}
.producto-sabor             { height: 40px; width: auto; }
.producto-tabla-nutricional { max-width: 520px; }
.producto-legal             { font-size: 0.8rem; color: var(--gv-text-muted); }

/* Variante Vitamina C + Zinc */
.producto-detalle--zinc .producto-heading { color: var(--gv-orange-vito); }
.producto-detalle--zinc .producto-divider { border-top-color: var(--gv-orange-divider); }
.producto-carrusel-card--zinc {
  background-image: none;
  background-color: #D67E45;
}

.producto-thumb-single {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--gv-radius);
  border: 3px solid transparent;
  padding: 5px;
  flex-shrink: 0;
}
.producto-thumb-single img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.producto-thumb-single--zinc { background-color: #F7C9A6; border-color: #E8763A; }
.producto-presentacion-unica {
  color: var(--gv-orange-divider);
  font-weight: 700;
  font-size: 0.95rem;
}
.producto-presentaciones-label {
  font-size: 0.85rem;
  color: var(--gv-text-body);
  line-height: 1.3;
}

.producto-swiper-thumbs { max-width: 260px; }
.producto-swiper-thumbs .swiper-slide {
  background-color: var(--gv-green-thumb-bg);
  border-radius: var(--gv-radius);
  border: 3px solid transparent;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
}
.producto-swiper-thumbs .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.producto-swiper-thumbs .swiper-slide-thumb-active {
  border-color: var(--gv-green-thumb);
}
.producto-thumb-nav {
  background-color: var(--gv-nav-bg);
  border: none;
  color: var(--gv-green-producto);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.producto-presentaciones-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.producto-presentaciones-list li {
  color: #ADB5BD;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.producto-presentaciones-list li::before { content: "✓ "; }
.producto-presentaciones-list li.active { color: var(--gv-green); font-weight: 700; }

/* Testimonios */
.testimonios-star     { width: 28px; height: 28px; }
.testimonios-eyebrow  { font-size: 1.1rem; opacity: 0.9; }
.testimonios-subtitle { max-width: 640px; opacity: 0.9; }
.testimonio-card {
  background-color: #fff;
  color: var(--gv-text-body);
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
  font-size: 0.9rem;
}
.testimonio-nombre { font-weight: 700; font-size: 0.85rem; }
.testimonio-quote {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gv-quote);
  font-family: Georgia, serif;
}
.testimonios-destacado-label { font-size: 0.9rem; opacity: 0.85; }
.testimonios-swiper { padding-bottom: 0.5rem; }
.testimonios-swiper .swiper-slide { height: auto; }

.destacado-card {
  display: block;
  width: 150px;
  border-radius: var(--gv-radius);
  padding: 8px 8px 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
.destacado-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  height: 100px;
  padding: 6px;
  margin-bottom: 6px;
}
.destacado-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.destacado-card-label { display: block; font-weight: 600; font-size: 0.8rem; }
.destacado-vermas {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 0.85rem;
}

/* FAQ del detalle de producto */
.faq-eyebrow   { color: var(--gv-text-muted); }
.faq-accordion { max-width: 70%; margin: 0 auto; }
.faq-accordion .accordion-item { border: none; border-bottom: 1px solid #E9ECEF; }
.faq-accordion .accordion-button { font-weight: 700; color: #212529; }
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--gv-green);
  background-color: transparent;
  box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; }
/* Ícono circular "+" en vez del chevron default de Bootstrap.
0-2-1 de especificidad, le gana a .accordion-button::after (0-1-1). */
.faq-accordion .accordion-button::after {
  background-image: none;
  content: "+";
  width: 26px;
  height: 26px;
  border: 1.5px solid #495057;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  color: #495057;
  flex-shrink: 0;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  content: "−";
  border-color: var(--gv-green);
  color: var(--gv-green);
}
.faq-number { margin-right: 0.4rem; }

/* -------------------------------------------------------------------------
6.3 DÓNDE COMPRAR
------------------------------------------------------------------------- */

.donde-comprar-hero     { overflow: hidden; }
.donde-comprar-eyebrow  { font-size: 1rem; opacity: 0.9; }
.donde-comprar-title    { font-size: 3rem; line-height: 1.1; }
.donde-comprar-text     { font-size: 1rem; max-width: 480px; opacity: 0.9; }
.donde-comprar-hero-img { max-width: 560px; width: 100%; }

.partner-card {
  display: block;
  border-radius: 20px;
  padding: 16px 16px 20px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease;
}
.partner-card:hover { transform: translateY(-4px); }
.partner-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background-color: #fff;
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 14px;
}
.partner-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-card-label {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.partner-farmatodo   { background: linear-gradient(180deg, #448DD6, #1C5A98); }
.partner-pasteur     { background: linear-gradient(180deg, #E3221A, #B3120C); }
.partner-farmacenter { background: linear-gradient(180deg, #358ADE, #0754A1); }
.partner-cruzverde   { background: linear-gradient(180deg, #00DB67, #019B49); }
.partner-pricesmart  { background: linear-gradient(180deg, #708ACD, #2B4179); }
.partner-larebaja    { background: linear-gradient(180deg, #FF3456, #CB1B38); }
.partner-locatel     { background: linear-gradient(180deg, #27E36C, #1FB255); }
.partner-olimpica    { background: linear-gradient(180deg, #FF5661, #DE0C19); }
.partner-colsubsidio { background: linear-gradient(180deg, #1583D4, #0A5993); }
.partner-rappi       { background: linear-gradient(180deg, #FF5660, #DE0C18); }

/* CONFLICTO RESUELTO — .product-image estaba definida dos veces:
width:100% / max-width:673px aquí y width:366px en el master page
(dentro del offcanvas). Ganaba la del master page por orden de carga.
Al eliminar el offcanvas, recupera su comportamiento. Buscar
class="product-image" en el resto de plantillas antes de dar por bueno
el cambio. */
.product-image { width: 100%; max-width: 673px; }

/* -------------------------------------------------------------------------
6.4 ¿PORQUÉ GUMIVIT?
------------------------------------------------------------------------- */

.pq-hero {
  background: linear-gradient(90deg,
    var(--gv-coral-hero-from) 0%, var(--gv-coral-hero-to) 100%);
}
.pq-hero-eyebrow { font-size: 0.95rem; opacity: 0.9; }
.pq-hero-title   { font-size: 3rem; line-height: 1.2; }
.pq-hero-text    { max-width: 780px; font-size: 1rem; opacity: 0.95; }
.pq-hero-gomitas { max-width: 420px; width: 100%; }

.pq-feature-img   { max-width: 460px; }
.pq-feature-title { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1rem; }
.pq-feature-text {
  color: var(--gv-text-body);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 520px;
}
.pq-title-coral  { color: var(--gv-coral); }
.pq-title-blue   { color: var(--gv-blue-pq); }
.pq-title-orange { color: var(--gv-orange-pq); }

.pq-cta {
  background: linear-gradient(180deg,
    var(--gv-blue-cta-from) 0%, var(--gv-blue-cta-to) 100%);
}
.pq-cta-title { font-size: 2.5rem; line-height: 1.2; }
.pq-cta-text  { font-size: 0.95rem; opacity: 0.95; max-width: 420px; }
.pq-cta-img   { width: 100%; }

/* -------------------------------------------------------------------------
6.5 DIVERSIÓN
------------------------------------------------------------------------- */

.hero-section-diver {
  background-color: var(--gv-blue-panel);
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: visible;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.hero-title-diver { font-size: 3.5rem; font-weight: 900; line-height: 1.1; }
.hero-text-diver  { font-size: 1.1rem; line-height: 1.5; margin-top: 1rem; }
.hero-image-diver {
  position: absolute;
  right: 0;
  bottom: -245px;
  width: 100%;
  max-width: 500px;
}

.content-section-diver { padding: 4rem 0 6rem; text-align: center; }
.content-title-diver {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gv-text-body);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.content-subtitle-diver {
  font-weight: 900;
  color: #FF8C00;
  font-size: 2.5rem;
  line-height: 1.2;
}
.content-description-diver {
  font-size: 1.1rem;
  color: var(--gv-text-muted);
  margin-bottom: 3rem;
}

.card-item-diver {
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;
}
.card-item-diver:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.grid-left-diver { display: grid; grid-template-rows: repeat(2, 1fr); gap: 15px; }
.card-title-diver {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.card-image-placeholder-diver {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
}

/* -------------------------------------------------------------------------
6.6 FAQ (página)
------------------------------------------------------------------------- */

.gummy-bear-background {
  background-image: url('/Gumivit/media/Images/bg-faq-ositos.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--gv-text-body);
}
.hero-section-faq {
  background: linear-gradient(180deg,
    var(--gv-coral-hero-to) 0%, var(--gv-coral-hero-from) 100%);
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: visible;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.hero-title-faq { font-size: 3.5rem; font-weight: 900; line-height: 1.1; }
.hero-text-faq  { font-size: 1.1rem; line-height: 1.5; margin-top: 1rem; }
.hero-image-faq {
  position: absolute;
  right: 0;
  bottom: -245px;
  width: 100%;
  max-width: 500px;
}
/* Duplicado: compite con .accordion-button de Bootstrap */
.accordion-button.accordion-button { font-size: 1.125rem; }

/* -------------------------------------------------------------------------
6.7 BLOG / CRECIENDO JUNTOS
------------------------------------------------------------------------- */

.hero-section-blog {
  background: linear-gradient(270deg,
    var(--gv-magenta-from) 0%, var(--gv-magenta-to) 100%);
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: visible;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

/* -------------------------------------------------------------------------
6.8 LOS CUENTOS DE VITO
------------------------------------------------------------------------- */

.hero-section-cuentos {
  background-color: var(--gv-purple-cuentos);
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: visible;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.hero-title-cuentos { font-size: 3.5rem; font-weight: 900; line-height: 1.1; }
.hero-text-cuentos  { font-size: 1.1rem; line-height: 1.5; margin-top: 1rem; }
.hero-image-cuentos {
  position: absolute;
  right: 0;
  bottom: -340px;
  width: 100%;
  max-width: 500px;
}

/* Subrayado de los titulares de hero.
CONSOLIDADA — estaba repetida tres veces (diver, faq, cuentos). */
.hero-title-diver .highlight,
.hero-title-faq .highlight,
.hero-title-cuentos .highlight {
  border-bottom: 4px solid #fff;
  line-height: 1.5;
}


/* =========================================================================
7. RESPONSIVE
=========================================================================
ANTES el sitio tenía un solo media query real (max-width: 991.98px), así
que una tablet de 800px recibía el mismo CSS que un celular de 360px.
Los tres frames de Figma no estaban implementados.
========================================================================= */

@media (min-width: 992px) {
  .grid-left-diver { height: 100%; }
}

@media (max-width: 991.98px) {
  
  /* Navbar */
  .gumivit-logo img { width: 110px; }
  .img-procaps      { width: 130px; }
  
  /* Footer */
  .gumivit-footer-art { min-height: 250px; }
  .gumivit-footer-bear {
    position: absolute;
    bottom: -90px;
    left: 50%;
    right: auto;
    width: 90%;
    max-width: 380px;
    margin: 0;
    transform: translateX(-50%);
  }
  
  /* ¿Porqué Gumivit? */
  .pq-hero-title    { font-size: 2rem; }
  .pq-hero-text     { font-size: 0.95rem; }
  .pq-hero-gomitas  { max-width: 300px; }
  .pq-feature-img,
  .pq-cta-img       { display: block; margin: 0 auto; }
  .pq-feature-img   { max-width: 340px; }
  .pq-feature-title { font-size: 1.75rem; }
  .pq-feature-text  { max-width: 100%; }
  .pq-cta-title     { font-size: 2rem; }
  .pq-cta-text      { max-width: 100%; margin-left: auto; margin-right: auto; }
  
  /* Dónde comprar */
  .donde-comprar-title    { font-size: 2.25rem; }
  .donde-comprar-text     { max-width: 100%; }
  .donde-comprar-hero-img { max-width: 380px; }
  
  /* Productos */
  .productos-title       { font-size: 2rem; }
  .productos-spark       { width: 18px; height: 18px; }
  .productos-spark-left  { left: -22px; }
  .productos-spark-right { right: -22px; }
  .productos-wave        { width: 110px; opacity: 0.6; }
  .productos-wave-left   { left: -50px; }
  .productos-wave-right  { right: -50px; }
  .productos-card        { flex-direction: column; text-align: center; }
  .productos-card-img    { width: 130px; }
  
  /* Detalle de producto */
  .producto-title   { font-size: 2rem; }
  .producto-feature { font-size: 0.8rem; }
  .testimonio-card  { margin-bottom: 0; }
  
  /* Diversión */
  .hero-section-diver { padding-bottom: 0; }
  .hero-title-diver   { font-size: 2.5rem; text-align: center; }
  .hero-text-diver    { text-align: center; padding: 0 15px; }
  .hero-image-diver {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 2rem auto 0;
    bottom: auto;
  }
  .img-vito-friends {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    bottom: 0;
  }
  .grid-left-diver           { display: block; }
  .grid-left-diver > .col-12 { margin-bottom: 1rem; }
  .card-item-diver           { margin-bottom: 1rem; }
}


/* =========================================================================
CAMBIOS DE MARKUP EN EL MASTER PAGE
=========================================================================

1. Eliminar el bloque completo del offcanvas #buySidebar (desde el
comentario "2. OFFCANVAS (SIDEBAR)" hasta su </div> de cierre). En el
diseño nuevo es un enlace a /donde-comprar, que el navbar ya
implementa.
2. Eliminar el bloque <style> embebido completo. Todo lo que sobrevive
ya está aquí.
3. Quitar .text-black del link "¿Porqué Gumivit?".
4. Los links comentados (Diversión, Creciendo Juntos) llevan
.fw-semibold mientras los activos dependen del font-weight del CSS.
Unificar ahora que están ocultos.
5. Verificar que esta hoja se cargue DESPUÉS de bootstrap.min.css.
6. Hacer grep de "buySidebar" en todo el proyecto por si hay un
disparador en otra plantilla que quedaría apuntando a un id
inexistente.
7. Farmacenter en href="#" (verificar si se repite en /donde-comprar).

========================================================================= */