/* ==========================================================
   Productos Page Styles (Cencozotti)
   Archivo: /assets/css/pages/productos.css
   ========================================================== */

/* HERO Productos */
.prod-hero{
  padding: 4.5rem 0 2.5rem;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(14,165,233,.08), transparent 60%),
    #fff;
}

.prod-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.25rem;
  align-items: center;
}

.prod-hero__lead{
  color: var(--muted);
  max-width: 62ch;
  margin: .65rem 0 1.2rem;
  font-size: 1.03rem;
}

.prod-hero__actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.prod-hero__note{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* Imagen opcional (si decides usarla) */
.prod-hero__media{
  min-height: 260px;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02));
  box-shadow: 0 22px 60px rgba(2,6,23,.10);
  overflow: hidden;
}

.prod-hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navegación por divisiones */
.prod-nav{
  padding-top: 2.5rem;
}

.prod-nav__chips{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.chip-link{
  display: inline-flex;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.92);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.chip-link:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 22%, #e2e8f0 78%);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}

/* Sección por división */
.prod-section{
  padding: 3.25rem 0;
}

.prod-section:nth-of-type(even){
  background: #f8fafc;
}

.prod-section__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  align-items: start;
}

.prod-points{
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 1.35rem;
  display: grid;
  gap: .55rem;
}

.prod-points li{
  position: relative;
  padding-left: 1.05rem;
}

.prod-points li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 800;
}

/* Aside */
.prod-section__aside{
  padding: 1.2rem;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

.aside-title{
  margin: 0 0 .35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* CTA final */
.prod-cta{
  padding: 4rem 0;
  background:
    linear-gradient(135deg, rgba(14,165,233,.12), rgba(2,132,199,.08));
}

.prod-cta__box{
  padding: 2.25rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 28px 70px rgba(2,6,23,.12);
  text-align: center;
}

.prod-cta__box p{
  margin: .5rem 0 1.15rem;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 980px){
  .prod-hero__grid{
    grid-template-columns: 1fr;
  }
  .prod-hero__media{
    order: -1;
    min-height: 220px;
  }
  .prod-section__grid{
    grid-template-columns: 1fr;
  }
}


/* Más presencia para la imagen del hero */
.prod-hero__media{
  min-height: 340px;            /* antes ~260 */
  border-radius: 1.35rem;
  box-shadow: 0 28px 75px rgba(2,6,23,.14);
}
@media (max-width: 980px){
  .prod-hero__media{ min-height: 240px; }
}

/* Verde como firma (subrayado premium bajo el H1) */
.prod-hero h1{
  position: relative;
}
.prod-hero h1::after{
  content:"";
  display:block;
  width: 92px;
  height: 3px;
  margin-top: .7rem;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(34,197,94,0),
    rgba(34,197,94,.55),
    rgba(34,197,94,0)
  );
}


.chip-link:hover{
  border-color: rgba(34,197,94,.35);
}

.chip-link.is-active{
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 14px 35px rgba(34,197,94,.10);
}

.prod-section__aside{
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  border-left: 3px solid rgba(34,197,94,.25);
}

.prod-nav{
  position: sticky;
  top: 86px; /* debajo del header sticky */
  z-index: 20;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(226,232,240,.75);
  padding: 1rem 0;
}

.prod-section:nth-of-type(even){
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(14,165,233,.06), transparent 60%),
    #f8fafc;
}

/* ==========================================================
   Productos - HERO full width (Premium)
   Archivo: /assets/css/pages/productos.css
   ========================================================== */

.prod-hero--cover{
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: center;
  padding: 2.75rem 0;

  /* Imagen full-width (almacén/planta) */
  background: url("/assets/img/productos/hero.webp") center / cover no-repeat;
}

/* Overlay para legibilidad (sobrio, corporativo) */
.prod-hero--cover .prod-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 22% 45%,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.84) 42%,
      rgba(255,255,255,.28) 72%,
      rgba(255,255,255,.06) 100%),
    linear-gradient(to bottom, rgba(2,6,23,.20), rgba(2,6,23,.10));
}

.prod-hero--cover .prod-hero__content{
  position: relative;
  z-index: 1;
}

/* Panel (no tapa la imagen, solo ancla texto) */
.prod-hero__panel{
  width: min(760px, 100%);
  padding: 1.45rem 1.55rem;
  border-radius: 1.15rem;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(226,232,240,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 28px 70px rgba(2,6,23,.14);
}

.prod-hero__lead{
  color: var(--muted);
  max-width: 62ch;
  margin: .65rem 0 1.2rem;
  font-size: 1.03rem;
}

.prod-hero__actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.prod-hero__note{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* ==========================================================
   Verde corporativo visible (NO sólido) - firma premium
   ========================================================== */

/* 1) Subrayado verde bajo el H1 (visible, elegante) */
.prod-hero__panel h1{
  position: relative;
}

.prod-hero__panel h1::after{
  content:"";
  display:block;
  width: 96px;
  height: 3px;
  margin-top: .7rem;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(34,197,94,0),
    rgba(34,197,94,.58),
    rgba(34,197,94,0)
  );
}

/* 2) Asides con acento verde (sutil, B2B) */
.prod-section__aside{
  border-left: 3px solid rgba(34,197,94,.22);
}

/* Responsive */
@media (max-width: 980px){
  .prod-hero--cover{
    min-height: 78vh;
    padding: 2.5rem 0;
  }
  .prod-hero__panel{
    padding: 1.15rem;
    border-radius: 1rem;
  }
}

@media (max-width: 520px){
  .prod-hero--cover{
    min-height: 84vh;
  }
  .prod-hero__actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================
   Bloque CALIDAD + LOGÍSTICA (Premium, liviano)
   ========================================================== */

.prod-quality,
.prod-logistics{
  background: #fff;
}

.prod-quality__grid,
.prod-logistics__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.25rem;
  align-items: center;
}

.prod-quality__media img,
.prod-logistics__media img{
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 22px 60px rgba(2,6,23,.12);
  display: block;
}

/* Alternancia suave (más premium) */
.prod-logistics{
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(34,197,94,.06), transparent 60%),
    #f8fafc;
}

/* Responsive */
@media (max-width: 980px){
  .prod-quality__grid,
  .prod-logistics__grid{
    grid-template-columns: 1fr;
  }
  .prod-logistics__media{ order: -1; }
}

.prod-section{ scroll-margin-top: 110px; }

/* ==========================================================
   PRODUCTOS – Variables corporativas
   ========================================================== */

:root{
  --cz-blue: var(--brand-blue, #023A5F);
  --cz-green: var(--brand-green, #99CC33);

  --cz-blue-soft: rgba(2,58,95,.10);
  --cz-blue-line: rgba(2,58,95,.35);

  --cz-green-soft: rgba(153,204,51,.12);
  --cz-green-line: rgba(153,204,51,.45);

  --cz-card-border: rgba(226,232,240,.92);
  --cz-shadow: 0 22px 60px rgba(2,6,23,.12);
}

/* ==========================================================
   1) HERO – Productos (sobrio y técnico)
   ========================================================== */

.hero--productos .hero-overlay{
  background:
    linear-gradient(135deg,
      rgba(2,58,95,.22),
      rgba(2,6,23,.22)
    ) !important;
}

/* Título */
.hero--productos h1{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 2px rgba(2,6,23,.45);
}

/* Texto */
.hero--productos p{
  color: rgba(255,255,255,.80) !important;
  text-shadow: 0 1px 2px rgba(2,6,23,.40);
}

/* ==========================================================
   2) Especialidades por división
   ========================================================== */

.section-productos-intro{
  background:
    radial-gradient(900px 360px at 20% 0%, var(--cz-blue-soft), transparent 60%),
    #fff !important;
}

.section-productos-intro h2{
  color: var(--cz-blue) !important;
}

/* ==========================================================
   3) Divisiones – consistencia con Inicio
   ========================================================== */

.section-productos-divisiones .division-card{
  border: 1px solid rgba(153,204,51,.45) !important;
  box-shadow:
    0 0 0 1px rgba(153,204,51,.55),
    0 18px 45px rgba(153,204,51,.18) !important;
}

.section-productos-divisiones .division-card:hover{
  transform: translateY(-2px);
}

/* ==========================================================
   4) Bloques por división
   ========================================================== */

.producto-bloque{
  border: 1px solid var(--cz-card-border) !important;
  box-shadow: var(--cz-shadow) !important;
}

/* Títulos */
.producto-bloque h3{
  color: var(--cz-blue) !important;
}

/* Bullets / ítems */
.producto-bloque li::marker{
  color: var(--cz-green);
}


/* ==========================================================
   5) CTA por división – Azul técnico
   ========================================================== */

.producto-bloque .btn--primary{
  background: var(--cz-blue) !important;
  border-color: var(--cz-blue) !important;
  color: #fff !important;
}

.producto-bloque .btn--primary:hover{
  background: rgba(2,58,95,.90) !important;
}


/* ==========================================================
   6) Calidad / Resguardo / Continuidad
   ========================================================== */

.section-calidad{
  background:
    radial-gradient(900px 360px at 85% 0%, var(--cz-green-soft), transparent 60%),
    #fff !important;
}

.section-calidad h2{
  color: var(--cz-blue) !important;
}

/* Firma verde sutil */
.section-calidad h2::after{
  content:"";
  display:block;
  width: 84px;
  height: 3px;
  margin-top:.6rem;
  border-radius:999px;
  background: linear-gradient(to right,
    rgba(153,204,51,0),
    var(--cz-green-line),
    rgba(153,204,51,0)
  );
}


/* ==========================================================
   7) CTA intermedio – orientación
   ========================================================== */

.section-cta-orientacion .btn--primary{
  background: var(--cz-blue) !important;
}

.section-cta-orientacion .btn--secondary{
  border-color: var(--cz-green) !important;
  color: var(--cz-green) !important;
}

.section-cta-orientacion .btn--secondary:hover{
  background: var(--cz-green-soft) !important;
}


/* ==========================================================
   8) Responsive – Productos
   ========================================================== */

@media (max-width: 980px){
  .producto-bloque{
    padding: 1.4rem !important;
  }
}

/* ==========================================================
   FIX PRODUCTOS – Selectores reales (DevTools)
   ========================================================== */

/* ===== Nuestras divisiones (Productos) ===== */
.section-divisiones .division-card{
  border: 1px solid rgba(153,204,51,.45) !important;
  box-shadow:
    0 0 0 1px rgba(153,204,51,.55),
    0 18px 45px rgba(153,204,51,.18) !important;
}

.section-divisiones .division-card:hover{
  transform: translateY(-2px);
}

/* ===== Secciones por división (Nutrición, Farmacéutica, etc.) ===== */
.prod-section{
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 22px 60px rgba(2,6,23,.12);
}

/* Títulos de división */
.prod-section h2,
.prod-section h3{
  color: var(--brand-blue);
}

/* Bullets */
.prod-section li::marker{
  color: var(--brand-green);
}

/* ===== Bloque Calidad / Resguardo ===== */
.prod-section[aria-label*="Calidad"] h2::after{
  content:"";
  display:block;
  width:84px;
  height:3px;
  margin-top:.6rem;
  border-radius:999px;
  background: linear-gradient(
    to right,
    rgba(153,204,51,0),
    rgba(153,204,51,.45),
    rgba(153,204,51,0)
  );
}

/* ===== CTA de Productos (SIEMPRE azul) ===== */
.prod-section .btn,
.prod-cta .btn{
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color:#fff !important;
}

/* ==========================================================
   PRODUCTOS — ASIDE con Imagen + PDF (Premium)
   Archivo: /assets/css/pages/productos.css
   ========================================================== */

.prod-section__aside{
  display: grid;
  gap: .9rem;
  padding: 1.05rem;
}

/* Contenedor de imagen (pequeña, elegante) */
.prod-aside__media{
  aspect-ratio: 16 / 9;
  border-radius: 1.05rem;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.92);
  background: linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02));
  box-shadow: 0 18px 48px rgba(2,6,23,.10);
}

.prod-aside__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto del aside (sobrio) */
.prod-aside__body .aside-title{
  margin: 0 0 .25rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  font-size: 1rem;
}

.prod-aside__body .muted{
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}

/* Acciones (PDF) */
.prod-aside__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: .25rem;
}

/* Botón PDF premium (pill editorial) */
.pdf-btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(11,15,20,.12);
  background: rgba(255,255,255,.78);
  color: rgba(11,15,20,.86);
  font-weight: 850;
  font-size: .86rem;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.pdf-btn:hover{
  transform: translateY(-1px);
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.30);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}

.pdf-btn:active{ transform: translateY(1px); }

/* Badge PDF pequeño, elegante */
.pdf-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .14rem .42rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  background: rgba(201,164,76,.16);
  border: 1px solid rgba(201,164,76,.35);
  color: var(--ink);
}

/* ==========================================================
   PRODUCTOS — CTAs por división: más pequeños, elegantes
   (Sin tocar global)
   ========================================================== */

.prod-section__actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Abarca cualquier variante existente: btn + btn--primary o btn-primary */
.prod-section__actions .btn{
  padding: .62rem .95rem;
  font-size: .9rem;
  border-radius: 999px;
}

/* Si existe la clase --primary/--secondary, baja “grito” */
.prod-section__actions .btn--primary,
.prod-section__actions .btn-primary{
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

.prod-section__actions .btn--secondary,
.prod-section__actions .btn-secondary{
  opacity: .92;
}

/* Mobile: CTAs full-width para tactilidad sin verse gigantes */
@media (max-width: 520px){
  .prod-section__actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================
   PRODUCTOS — Móvil: CTA azul al final (debajo del PDF)
   Solución definitiva usando display: contents
   ========================================================== */

@media (max-width: 980px){

  /* 1) En móvil, el grid se comporta como columna (flex) */
  .prod-section__grid{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* 2) “Aplanar” el wrapper del copy para que sus hijos
        (incl. .prod-section__actions) sean hermanos del aside */
  .prod-section__copy{
    display: contents;
  }

  /* 3) Reordenar: primero contenido, luego aside (PDF), luego CTA */
  .prod-section__aside{
    order: 20;
  }

  .prod-section__actions{
    order: 30;
    margin-top: .25rem;
  }

  /* 4) CTA full-width, centrado (táctil y premium) */
  .prod-section__actions .btn{
    width: 100%;
    justify-content: center;
  }
}