/* ==========================================================================
   VITA · Suplementos — hoja de estilos premium
   Paleta Google: azul #4285F4, rojo #EA4335, amarillo #FBBC04, verde #34A853
   ========================================================================== */

:root {
    --azul: #4285F4;
    --azul-osc: #1a73e8;
    --rojo: #EA4335;
    --amarillo: #FBBC04;
    --verde: #34A853;

    --tinta: #202124;
    --gris: #5f6368;
    --gris-claro: #9aa0a6;
    --linea: #e8eaed;
    --fondo: #ffffff;
    --fondo-2: #f8f9fb;

    --sombra-sm: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.10);
    --sombra-md: 0 4px 14px rgba(60,64,67,.10), 0 2px 6px rgba(60,64,67,.06);
    --sombra-lg: 0 12px 40px rgba(60,64,67,.16), 0 4px 12px rgba(60,64,67,.08);
    --radio: 16px;
    --radio-sm: 10px;
    --transicion: .25s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.contenedor { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600; font-size: .98rem;
    padding: .85rem 1.6rem; border-radius: 999px;
    border: none; cursor: pointer;
    transition: var(--transicion);
    white-space: nowrap;
}
.btn--sm { padding: .6rem 1.15rem; font-size: .9rem; }
.btn--primario { background: var(--azul); color: #fff; box-shadow: var(--sombra-sm); }
.btn--primario:hover { background: var(--azul-osc); box-shadow: var(--sombra-md); transform: translateY(-1px); }
.btn--fantasma { background: #fff; color: var(--tinta); border: 1.5px solid var(--linea); }
.btn--fantasma:hover { border-color: var(--azul); color: var(--azul-osc); }
.btn--wa { background: #25D366; color: #fff; }
.btn--wa:hover { background: #1eb257; transform: translateY(-1px); box-shadow: var(--sombra-md); }
.ico-wa { width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.6.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.4.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.5-.9-2.1-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 5 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.6 15L2 22l5.1-1.3A10 10 0 1012 2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.6.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.4.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.5-.9-2.1-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 5 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.6 15L2 22l5.1-1.3A10 10 0 1012 2z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Navbar ---------- */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--linea);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .7rem; }
.marca__logo {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    font-weight: 900; font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, var(--azul), var(--verde));
    box-shadow: var(--sombra-sm);
}
.marca__texto { display: flex; flex-direction: column; line-height: 1; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.marca__texto small { font-size: .58rem; letter-spacing: .28em; color: var(--gris-claro); font-weight: 600; margin-top: 3px; }
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a { font-weight: 500; color: var(--gris); font-size: .95rem; transition: var(--transicion); }
.nav__links a:hover { color: var(--azul); }

/* ---------- Alertas ---------- */
.alerta { margin: 1.2rem 0; padding: 1rem 1.3rem; border-radius: var(--radio-sm); font-weight: 500; }
.alerta--success { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.alerta--error { background: #fce8e6; color: #c5221f; border: 1px solid #f6cbc7; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 5rem 0 4.5rem; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60% 60% at 85% 10%, rgba(66,133,244,.12), transparent 60%),
        radial-gradient(50% 50% at 5% 90%, rgba(52,168,83,.12), transparent 60%),
        radial-gradient(40% 40% at 95% 95%, rgba(251,188,4,.10), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.pildora {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--linea);
    padding: .45rem 1rem; border-radius: 999px;
    font-size: .82rem; font-weight: 600; color: var(--gris);
    box-shadow: var(--sombra-sm); margin-bottom: 1.5rem;
}
.pildora b { color: var(--verde); }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 900; }
.hero h1 .deg {
    background: linear-gradient(120deg, var(--azul), var(--verde) 60%, var(--amarillo));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 1.15rem; color: var(--gris); margin: 1.4rem 0 2rem; max-width: 34rem; }
.hero__acciones { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 2.2rem; margin-top: 2.8rem; }
.hero__stats .n { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.hero__stats .n.azul { color: var(--azul); }
.hero__stats .n.verde { color: var(--verde); }
.hero__stats .n.rojo { color: var(--rojo); }
.hero__stats span { display: block; font-size: .82rem; color: var(--gris-claro); font-weight: 500; }

.hero__tarjeta {
    background: #fff; border-radius: 24px; padding: 1.8rem;
    box-shadow: var(--sombra-lg); border: 1px solid var(--linea);
    position: relative;
}
.hero__tarjeta::after {
    content: ''; position: absolute; inset: -1px; border-radius: 24px; z-index: -1;
    background: linear-gradient(135deg, var(--azul), var(--verde));
    opacity: .12; filter: blur(20px);
}
.hero__tarjeta h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.chip-linea { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    font-size: .82rem; font-weight: 600; padding: .4rem .9rem;
    border-radius: 999px; background: var(--fondo-2); color: var(--gris);
    border: 1px solid var(--linea);
}
.hero__marcas { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px dashed var(--linea); }
.hero__marcas .et { font-size: .72rem; letter-spacing: .18em; color: var(--gris-claro); font-weight: 700; margin-bottom: .7rem; }
.hero__marcas .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.marca-box {
    background: var(--fondo-2); border: 1px solid var(--linea);
    border-radius: var(--radio-sm); padding: .8rem .5rem; text-align: center;
    font-weight: 700; font-size: .8rem; color: var(--tinta);
}

/* ---------- Secciones ---------- */
.seccion { padding: 4.5rem 0; }
.seccion--gris { background: var(--fondo-2); }
.seccion__cab { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.seccion__cab .et { font-size: .78rem; letter-spacing: .2em; font-weight: 800; text-transform: uppercase; color: var(--azul); }
.seccion__cab h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin: .6rem 0 .7rem; font-weight: 900; }
.seccion__cab p { color: var(--gris); font-size: 1.05rem; }

/* ---------- Categorías ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.cat {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.8rem 1.5rem; transition: var(--transicion); position: relative; overflow: hidden;
}
.cat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c, var(--azul)); }
.cat:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: transparent; }
.cat__ico {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.8rem; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--c, var(--azul)) 12%, #fff);
}
.cat h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.cat p { color: var(--gris); font-size: .92rem; margin: .35rem 0 1rem; }
.cat__link { font-weight: 600; font-size: .9rem; color: var(--c, var(--azul)); display: inline-flex; align-items: center; gap: .3rem; }
.cat__link::after { content: '→'; transition: var(--transicion); }
.cat:hover .cat__link::after { transform: translateX(4px); }

/* ---------- Productos ---------- */
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }
.card {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    overflow: hidden; transition: var(--transicion); display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: transparent; }
.card__img {
    aspect-ratio: 4/3; background: var(--fondo-2);
    display: grid; place-items: center; position: relative; overflow: hidden;
}
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__img .ph { font-size: 3.4rem; opacity: .35; }
.card__badges { position: absolute; top: .8rem; left: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.badge {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .65rem; border-radius: 999px; color: #fff;
}
.badge--top { background: var(--amarillo); color: #4d3800; }
.badge--stock { background: var(--verde); }
.badge--bajo { background: #f29900; }
.badge--ago { background: var(--gris-claro); }
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.card__marca { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); font-weight: 700; }
.card__nombre { font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: .25rem 0 .3rem; }
.card__pres { font-size: .82rem; color: var(--gris-claro); margin-bottom: .9rem; }
.card__precios { margin-top: auto; }
.card__precio { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.card__precio small { font-size: .78rem; font-weight: 500; color: var(--gris-claro); }
.card__mayoreo {
    font-size: .82rem; color: var(--verde); font-weight: 600; margin-top: .2rem;
    display: flex; align-items: center; gap: .35rem;
}
.card__cta { margin-top: 1rem; }
.card__cta .btn { width: 100%; justify-content: center; }

/* ---------- Franja marcas ---------- */
.marcas-franja { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.marcas-franja .m {
    background: #fff; border: 1px solid var(--linea); border-radius: 999px;
    padding: .75rem 1.7rem; font-weight: 800; letter-spacing: -.01em; color: var(--tinta);
    box-shadow: var(--sombra-sm);
}

/* ---------- Mayoreo (bloque split) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.split__panel {
    background: linear-gradient(135deg, var(--azul), var(--azul-osc));
    color: #fff; border-radius: 24px; padding: 2.6rem; box-shadow: var(--sombra-lg);
}
.split__panel h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.2rem; letter-spacing: -.02em; }
.beneficios { list-style: none; display: grid; gap: .9rem; }
.beneficios li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; }
.beneficios .check {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: .8rem; font-weight: 900;
}
.split__texto h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.split__texto p { color: var(--gris); font-size: 1.05rem; margin: 1.1rem 0 1.8rem; }

/* ---------- Formulario cotización ---------- */
.form-cotiza {
    background: #fff; border: 1px solid var(--linea); border-radius: 24px;
    padding: 2.5rem; box-shadow: var(--sombra-lg); max-width: 720px; margin-inline: auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.form-campo { display: flex; flex-direction: column; gap: .4rem; }
.form-campo.full { grid-column: 1 / -1; }
.form-campo label { font-size: .85rem; font-weight: 600; color: var(--tinta); }
.campo {
    width: 100%; padding: .8rem 1rem; font-size: .95rem; font-family: inherit;
    border: 1.5px solid var(--linea); border-radius: var(--radio-sm);
    background: var(--fondo-2); transition: var(--transicion); color: var(--tinta);
}
.campo:focus { outline: none; border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px rgba(66,133,244,.12); }
textarea.campo { resize: vertical; min-height: 110px; }
.form-error { color: var(--rojo); font-size: .8rem; font-weight: 500; }
.form-help { font-size: .78rem; color: var(--gris-claro); }
.form-nota { text-align: center; color: var(--gris); font-size: .85rem; margin-top: 1.3rem; }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; padding: 4.5rem 0; }
.cta-final h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.02em; }
.cta-final p { color: var(--gris); font-size: 1.1rem; margin: 1rem auto 2rem; max-width: 34rem; }
.cta-final .acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Detalle producto ---------- */
.detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3.5rem 0; }
.detalle__img { background: var(--fondo-2); border-radius: 24px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--linea); overflow: hidden; }
.detalle__img img { width: 100%; height: 100%; object-fit: cover; }
.detalle__img .ph { font-size: 6rem; opacity: .3; }
.galeria { display: flex; flex-direction: column; gap: .9rem; }
.galeria__thumbs { display: flex; gap: .6rem; flex-wrap: wrap; }
.thumb {
    width: 70px; height: 70px; padding: 0; border-radius: 12px; overflow: hidden;
    border: 2px solid var(--linea); background: var(--fondo-2); cursor: pointer;
    transition: var(--transicion);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--azul); }
.thumb.activo { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(66,133,244,.18); }
.detalle__marca { color: var(--azul); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.detalle h1 { font-size: 2.2rem; font-weight: 900; letter-spacing: -.02em; margin: .4rem 0 1rem; }
.detalle__precio-box { display: flex; gap: 2rem; margin: 1.5rem 0; padding: 1.3rem; background: var(--fondo-2); border-radius: var(--radio); }
.detalle__precio-box .et { font-size: .75rem; color: var(--gris-claro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.detalle__precio-box .p { font-size: 1.7rem; font-weight: 800; }
.detalle__precio-box .p.verde { color: var(--verde); }
.tabla-datos { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.tabla-datos td { padding: .7rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.tabla-datos td:first-child { color: var(--gris); width: 40%; }
.tabla-datos td:last-child { font-weight: 600; }

/* ---------- Catálogo: filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; align-items: center; }
.filtro {
    padding: .55rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
    background: #fff; border: 1.5px solid var(--linea); color: var(--gris); transition: var(--transicion);
}
.filtro:hover { border-color: var(--azul); color: var(--azul); }
.filtro.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.buscador { margin-left: auto; display: flex; gap: .5rem; }
.buscador .campo { min-width: 220px; }
.vacio { text-align: center; padding: 4rem 1rem; color: var(--gris); }
.vacio .em { font-size: 3rem; margin-bottom: 1rem; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff; display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(37,211,102,.45); transition: var(--transicion);
}
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante .ico-wa { width: 30px; height: 30px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .hero__grid, .split, .detalle { grid-template-columns: 1fr; }
    .nav__links { display: none; }
    .hero__tarjeta { order: -1; }
    .form-grid { grid-template-columns: 1fr; }
    .buscador { margin-left: 0; width: 100%; }
    .buscador .campo { flex: 1; }
}
@media (max-width: 520px) {
    .hero__stats { gap: 1.3rem; }
    .hero__stats .n { font-size: 1.4rem; }
    .form-cotiza, .split__panel { padding: 1.6rem; }
    .detalle__precio-box { flex-direction: column; gap: 1rem; }
}