/* =========================================================
   NOVOVET · Productos Farmacéuticos
   Sistema de estilos corporativo
   Paleta: #04B464 (verde marca) · #0A9D58 (verde profundo)
   Tipografía: Raleway
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Tokens ---------- */
:root {
  /* ===== BASE LUMINOSA ===== */
  --bg: #ffffff;
  --bg-lum: #fbfdfc;
  --bg-soft: #f3f7f5;
  --bg-mint: #eaf5ef;
  --bg-warm: #f7f5ef;

  /* ===== MARCA + PROFUNDIDAD ===== */
  --green: #04B464;          /* decorativo / áreas grandes */
  --green-deep: #0A9D58;     /* decorativo */
  --green-darker: #067a45;   /* texto verde AA */
  --green-cta: #0c7d52;      /* inicio gradiente CTA */
  --petrol: #0E6E63;         /* secundario / íconos / foco */
  --petrol-deep: #0a4f48;    /* acentos / aura */

  /* ===== CALIDEZ / HUMANIDAD (mínima) ===== */
  --warm: #E7B778;           /* acento (relleno/borde, no texto) */
  --warm-soft: #f6ead6;
  --warm-ink: #8a5f18;       /* texto cálido AA (raro) */

  /* ===== TINTA Y ESTRUCTURA ===== */
  --ink: #112a23;            /* texto principal */
  --slate: #566b62;          /* texto secundario */
  --muted: #7d8c84;          /* placeholders / pistas */
  --line: #e6ece9;
  --line-strong: #d4ded8;
  --dark: #093f39;           /* footer / page-hero / cta */
  --gray-cap: #5a655f;       /* "PRODUCTOS FARMACÉUTICOS" */

  /* ===== ESTADOS ===== */
  --success: #0c7d52; --success-bg: #eaf5ef;
  --warning: #b9822f; --warning-bg: #f6ead6;
  --danger: #c0392b;  --danger-bg: #fdecea;
  --focus: #0E6E63;

  /* ===== GRADIENTES ===== */
  --grad: linear-gradient(135deg, #04B464 0%, #0A9D58 100%);       /* marca decorativa */
  --grad-cta: linear-gradient(130deg, #0c7d52 0%, #0E6E63 100%);   /* botón primario (AA) */
  --grad-deep: linear-gradient(135deg, #0E6E63 0%, #0a4f48 100%);  /* profundidad */

  /* ===== CAPAS DE LUZ (halos) ===== */
  --glow-top: radial-gradient(58% 50% at 50% -6%, rgba(4,180,100,.22), transparent 70%);
  --glow-petrol: radial-gradient(46% 42% at 6% 108%, rgba(14,110,99,.28), transparent 64%);
  --glow-warm: radial-gradient(48% 44% at 108% 106%, rgba(231,183,120,.17), transparent 64%);
  --aura-dark: radial-gradient(62% 60% at 50% -4%, rgba(4,180,100,.34), transparent 70%);

  /* ===== TEXTURA MOLECULAR / GEOMÉTRICA ===== */
  --mesh-dot: radial-gradient(rgba(14,110,99,.14) 1px, transparent 1.5px);
  --mesh-size: 24px;

  /* ===== SOMBRAS CON TEMPERATURA (petróleo) ===== */
  --shadow-sm: 0 2px 10px rgba(10,79,72,.07);
  --shadow-md: 0 12px 30px rgba(10,79,72,.11);
  --shadow-lg: 0 24px 60px rgba(10,79,72,.15);
  --glow-cta: 0 8px 24px rgba(4,180,100,.42);
  --glow-cta-hover: 0 16px 40px rgba(4,180,100,.55);

  /* ===== GEOMETRÍA / TIPO / MOVIMIENTO ===== */
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1200px;
  --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .2s; --dur: .28s; --dur-slow: .7s;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { color: var(--slate); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Utilities ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-darker);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; }
.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.section--mint { background: var(--bg-mint); }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head p { margin-top: 16px; font-size: 1.06rem; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--slate); }
.text-grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: .96rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--grad-cta); color: #fff; box-shadow: var(--glow-cta); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow-cta-hover); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--glow-cta); }
.btn--secondary { background: var(--petrol); color: #fff; box-shadow: 0 6px 18px rgba(14,110,99,.26); }
.btn--secondary:hover { background: var(--petrol-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,79,72,.32); }
.btn--ghost { background: #fff; color: var(--green-darker); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-darker); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--accent { background: var(--warm-soft); color: var(--warm-ink); border: 1.5px solid var(--warm); }
.btn--accent:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(231,183,120,.28); }
.btn--light { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn--light:hover { background: #fff; color: var(--petrol-deep); }
.btn--white { background: #fff; color: var(--petrol-deep); box-shadow: 0 8px 22px rgba(3,30,26,.30); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(3,30,26,.38); }
.btn--lg { padding: 17px 36px; font-size: 1.02rem; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--focus); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Announcement bar ---------- */
.topbar {
  background: var(--dark); color: #dff3e8; font-size: .82rem; font-weight: 500;
  letter-spacing: .02em;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 20px; }
.topbar__msg { display: flex; align-items: center; gap: 10px; }
.topbar__msg strong { color: #fff; font-weight: 700; }
.topbar__links { display: flex; gap: 22px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; opacity: .85; transition: opacity .2s; }
.topbar__links a:hover { opacity: 1; color: #fff; }
.topbar__links svg { width: 14px; height: 14px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  transition: box-shadow .3s;
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 116px; gap: 32px; transition: height .3s var(--ease); }
.nav__logo { flex: 0 0 auto; display: flex; align-items: center; }
.nav__logo img { height: 90px; width: auto; max-width: 100%; display: block; object-fit: contain; transition: height .3s var(--ease); }
.header.is-scrolled .nav { height: 88px; }
.header.is-scrolled .nav__logo img { height: 70px; }

/* Search bar */
.nav__search {
  flex: 1 1 auto; max-width: 620px; display: flex; align-items: stretch;
  border: 2px solid var(--green); border-radius: 999px; overflow: hidden; background: #fff;
}
.nav__search input {
  flex: 1; border: none; outline: none; padding: 10px 20px;
  font-family: inherit; font-size: .93rem; color: var(--ink); min-width: 0;
}
.nav__search input::placeholder { color: #9aa8a0; }
.nav__search button {
  background: var(--grad); color: #fff; padding: 0 20px;
  display: grid; place-items: center; transition: filter .2s;
}
.nav__search button:hover { filter: brightness(1.08); }
.nav__search button svg { width: 18px; height: 18px; }

/* Account links */
.nav__account { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav__login {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px; font-weight: 700; font-size: .92rem;
  color: var(--petrol); border: 1.5px solid var(--line-strong); background: #fff;
  transition: .2s var(--ease);
}
.nav__login svg { width: 18px; height: 18px; }
.nav__login:hover { border-color: var(--petrol); background: var(--bg-mint); color: var(--green-darker); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.acct-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--ink); transition: color .2s; }
.acct-link svg { width: 19px; height: 19px; color: var(--green-deep); }
.acct-link:hover { color: var(--green-darker); }

/* Green menu bar */
.mainnav { background: var(--grad); position: relative; }
.mainnav > .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__menu { display: flex; align-items: stretch; }
.nav__menu > li { position: relative; }
.nav__menu > li > a {
  display: flex; align-items: center; gap: 6px; padding: 14px 18px;
  font-weight: 700; font-size: .86rem; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; transition: background .2s;
}
.nav__menu > li > a:hover, .nav__menu > li > a.active { background: rgba(255,255,255,.16); }
.nav__menu .chev { width: 13px; height: 13px; transition: transform .25s; }
.has-drop:hover .chev { transform: rotate(180deg); }

/* Dropdown */
.drop {
  position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff;
  border-radius: 0 0 12px 12px; box-shadow: var(--shadow-lg); padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 120;
}
.has-drop:hover .drop, .has-drop.open .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 10px 22px; font-weight: 600; font-size: .92rem; color: var(--ink); transition: background .15s, color .15s; }
.drop a:hover { background: var(--bg-mint); color: var(--green-darker); }
.drop .drop__label { display: block; padding: 10px 22px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9aa8a0; }

.mainnav__quote {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #fff; color: var(--green-darker); font-weight: 700; font-size: .84rem;
  padding: 8px 20px; border-radius: 999px; margin: 7px 0; transition: transform .2s, box-shadow .2s;
}
.mainnav__quote:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6,60,38,.28); }

.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: .3s; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: .3s; }
.nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav__toggle.is-open span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Slider ---------- */
.slider { position: relative; }
.slide { display: none; }
.slide.active { display: block; animation: slideIn .55s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.slider__dots {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 6;
}
.slider__dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(6,122,69,.22); transition: width .3s var(--ease), background .3s; }
.slider__dot.active { width: 28px; background: var(--green); }
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--green-deep);
  box-shadow: var(--shadow-md); display: grid; place-items: center; transition: background .2s, color .2s;
}
.slider__arrow:hover { background: var(--green); color: #fff; }
.slider__arrow svg { width: 20px; height: 20px; }
.slider__arrow--prev { left: 18px; }
.slider__arrow--next { right: 18px; }

/* Slide variante marca (fondo verde) */
.slide--brand .hero { background: var(--grad); }
.slide--brand .hero__blob { background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%); }
.slide--brand h1, .slide--brand .hero__stat .num { color: #fff; }
.slide--brand .eyebrow { color: #d8f5e6; }
.slide--brand .eyebrow::before { background: #fff; }
.slide--brand .lead, .slide--brand .hero__stat .lbl { color: rgba(255,255,255,.85); }
.slide--brand .text-grad { background: none; color: var(--dark); -webkit-text-fill-color: currentColor; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--glow-top), var(--glow-petrol), var(--glow-warm), linear-gradient(180deg, #fff, #f7fbf9); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding: 84px 0 92px;
}
.hero__content h1 { margin-bottom: 22px; }
.hero__content .lead { margin-bottom: 34px; max-width: 520px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 34px; margin-top: 46px; flex-wrap: wrap; }
.hero__stat .num { font-size: 2rem; font-weight: 800; color: var(--green-deep); line-height: 1; }
.hero__stat .lbl { font-size: .84rem; color: var(--slate); margin-top: 6px; }
.hero__visual { position: relative; }
.hero__img {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5; background: var(--grad);
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
  position: absolute; bottom: -26px; left: -26px; background: #fff; border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 14px;
  max-width: 260px;
}
.hero__badge .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-mint); display: grid; place-items: center; flex-shrink: 0; }
.hero__badge .ico svg { width: 24px; height: 24px; color: var(--green-deep); }
.hero__badge strong { display: block; font-size: .95rem; color: var(--ink); }
.hero__badge span { font-size: .8rem; color: var(--slate); }
.hero__blob { position: absolute; width: 460px; height: 460px; background: radial-gradient(circle, rgba(4,180,100,.18), transparent 68%); top: -120px; right: -120px; z-index: 0; animation: breathe 10s ease-in-out infinite; }

/* ---------- Trust / logos strip ---------- */
.trust { padding: 34px 0; border-bottom: 1px solid var(--line); }
.trust__label { text-align: center; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin-bottom: 20px; }
.trust__row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.trust__row span { font-weight: 800; font-size: 1.15rem; color: #b8c4bd; letter-spacing: -.01em; transition: color .2s; }
.trust__row span:hover { color: var(--green-deep); }

/* ---------- Value cards ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.value-card .ico { width: 56px; height: 56px; border-radius: 15px; background: var(--grad); display: grid; place-items: center; margin-bottom: 20px; }
.value-card .ico svg { width: 28px; height: 28px; color: #fff; }
.value-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.value-card p { font-size: .95rem; }

/* ---------- Category cards ---------- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 230px;
  display: flex; align-items: flex-end; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s; isolation: isolate;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cat-card__bg { position: absolute; inset: 0; z-index: -2; }
.cat-card__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform .5s var(--ease); }
.cat-card:hover .cat-card__bg img { transform: scale(1.06); }
.cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,34,26,0) 18%, rgba(10,45,30,.55) 52%, rgba(6,60,38,.92) 100%); }
.cat-card__body { padding: 24px; color: #fff; width: 100%; }
.cat-card__body h3 { color: #fff; font-size: 1.25rem; }
.cat-card__body p { color: rgba(255,255,255,.82); font-size: .88rem; margin-top: 4px; }
.cat-card__arrow { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); display: grid; place-items: center; transition: background .25s; }
.cat-card:hover .cat-card__arrow { background: var(--green); }
.cat-card__arrow svg { width: 18px; height: 18px; color: #fff; }

/* Solid variant (no image) */
.cat-card--solid { background: var(--grad); min-height: 230px; }
.cat-card--solid::after { display: none; }

/* ---------- Split / about ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 5/4; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin: 16px 0 20px; }
.split .checklist { margin-top: 26px; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 500; }
.checklist li svg { width: 22px; height: 22px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ---------- Brands grid ---------- */
.brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.brand-tile {
  aspect-ratio: 3/2; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center;
  padding: 16px; background: #fff; transition: border-color .25s, box-shadow .25s, transform .25s;
  font-weight: 800; color: #9aa8a0; text-align: center; font-size: .95rem; letter-spacing: -.01em;
}
.brand-tile:hover { border-color: var(--green); color: var(--green-darker); box-shadow: var(--shadow-sm); transform: translateY(-3px); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--aura-dark), radial-gradient(46% 50% at 100% 108%, rgba(231,183,120,.12), transparent 60%), var(--dark); color: #fff; border-radius: var(--radius-lg); padding: 64px 56px; }
.cta-band__blob { position: absolute; width: 520px; height: 520px; background: radial-gradient(circle, rgba(4,180,100,.4), transparent 65%); top: -180px; right: -140px; animation: breathe 12s ease-in-out infinite; }
.cta-band__inner { position: relative; display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); margin-top: 12px; max-width: 560px; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Perks strip (franja de beneficios) ---------- */
.perks-strip { border-top: 1px solid var(--line); padding: 52px 0; }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.perk { display: flex; gap: 16px; align-items: flex-start; }
.perk .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-mint); display: grid; place-items: center; flex-shrink: 0; }
.perk .ico svg { width: 26px; height: 26px; color: var(--green-deep); }
.perk h4 { font-size: 1rem; margin-bottom: 4px; }
.perk p { font-size: .87rem; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--grad); padding: 48px 0; }
.newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.newsletter__text h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.newsletter__text p { color: rgba(255,255,255,.88); margin-top: 6px; font-size: .95rem; }
.newsletter__form { display: flex; background: #fff; border-radius: 999px; overflow: hidden; flex: 1; max-width: 480px; min-width: 300px; box-shadow: 0 10px 26px rgba(6,60,38,.22); }
.newsletter__form input {
  flex: 1; border: none; outline: none; padding: 15px 24px;
  font-family: inherit; font-size: .95rem; color: var(--ink); min-width: 0;
}
.newsletter__form button {
  background: var(--dark); color: #fff; font-weight: 700; font-size: .92rem;
  padding: 0 28px; white-space: nowrap; transition: background .2s;
}
.newsletter__form button:hover { background: #071811; }
.newsletter__ok { display: none; color: #fff; font-weight: 700; margin-top: 12px; }
.newsletter__ok.show { display: block; }

/* ---------- Footer ---------- */
.footer { background: radial-gradient(60% 40% at 50% -10%, rgba(4,180,100,.10), transparent 70%), var(--dark); color: #c5d6cf; padding: 72px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 52px; }
.footer__brand img { height: 54px; margin-bottom: 20px; }
.footer__brand p { color: #8fa39a; font-size: .92rem; max-width: 300px; }
.footer__social { display: flex; gap: 12px; margin-top: 22px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .25s, transform .25s; }
.footer__social a:hover { background: var(--green); transform: translateY(-3px); }
.footer__social svg { width: 18px; height: 18px; color: #fff; }
.footer__col h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.footer__col ul { display: grid; gap: 12px; }
.footer__col a { color: #a9bab1; font-size: .93rem; transition: color .2s; }
.footer__col a:hover { color: var(--green); }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: .93rem; }
.footer__contact svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 3px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .84rem; color: #7f948a; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--green); }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: var(--aura-dark), radial-gradient(46% 50% at 100% 108%, rgba(231,183,120,.10), transparent 60%), var(--dark); color: #fff; position: relative; overflow: hidden; padding: 68px 0 74px; }
.page-hero__blob { position: absolute; width: 480px; height: 480px; background: radial-gradient(circle, rgba(4,180,100,.32), transparent 66%); top: -160px; left: -120px; animation: breathe 11s ease-in-out infinite; }
.page-hero__inner { position: relative; max-width: 760px; }
.page-hero .eyebrow { color: #8be3b4; }
.page-hero .eyebrow::before { background: var(--green); }
.page-hero h1 { color: #fff; margin: 16px 0 16px; }
.page-hero p { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 620px; }
.breadcrumb { display: flex; gap: 8px; font-size: .84rem; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.breadcrumb a:hover { color: #fff; }

/* ---------- Catalog ---------- */
.catalog { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.filters { position: sticky; top: 100px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.filters h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.filters__list { display: grid; gap: 4px; }
.filter-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .93rem; color: var(--ink); transition: background .2s, color .2s; }
.filter-btn .count { font-size: .78rem; color: #9aa8a0; font-weight: 600; }
.filter-btn:hover { background: var(--bg-mint); }
.filter-btn.active { background: var(--grad); color: #fff; }
.filter-btn.active .count { color: rgba(255,255,255,.85); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.product-card__media { aspect-ratio: 4/3; background: var(--bg-mint); position: relative; display: grid; place-items: center; overflow: hidden; }
.product-card__media img { width: 62%; height: 62%; object-fit: contain; opacity: .9; }
.product-card__tag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--green-darker); font-size: .72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.product-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product-card__cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-darker); }
.product-card__body h3 { font-size: 1.08rem; margin: 8px 0 6px; }
.product-card__body p { font-size: .88rem; flex: 1; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.product-card__foot .fmt { font-size: .82rem; color: var(--slate); font-weight: 600; }
.product-card__foot a { font-size: .84rem; font-weight: 700; color: var(--green-darker); display: inline-flex; align-items: center; gap: 5px; }
.product-card__foot a svg { width: 15px; height: 15px; transition: transform .2s; }
.product-card__foot a:hover svg { transform: translateX(3px); }
.catalog__count { margin-bottom: 20px; font-size: .92rem; color: var(--slate); }
.catalog__count b { color: var(--ink); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact-info .info-item { display: flex; gap: 16px; margin-bottom: 28px; }
.contact-info .info-item .ico { width: 50px; height: 50px; border-radius: 13px; background: var(--bg-mint); display: grid; place-items: center; flex-shrink: 0; }
.contact-info .info-item .ico svg { width: 24px; height: 24px; color: var(--green-deep); }
.contact-info .info-item h4 { font-size: 1rem; margin-bottom: 3px; }
.contact-info .info-item p, .contact-info .info-item a { font-size: .95rem; color: var(--slate); }
.contact-info .info-item a:hover { color: var(--green-darker); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 11px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--bg-soft); transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.field textarea { resize: vertical; min-height: 120px; }
.field.err input, .field.err select, .field.err textarea { border-color: #e5484d; background: #fef2f2; }
.field .msg { font-size: .8rem; color: #e5484d; margin-top: 6px; display: none; }
.field.err .msg { display: block; }
.form-note { font-size: .82rem; color: var(--slate); margin-top: 8px; }
.form-success { display: none; background: var(--bg-mint); border: 1px solid #bfe6cf; border-radius: var(--radius); padding: 20px; color: var(--green-darker); font-weight: 600; margin-bottom: 20px; }
.form-success.show { display: block; }
.form-error { display: none; background: #fef2f2; border: 1px solid #f2c2c4; border-radius: var(--radius); padding: 16px 20px; color: #b42318; font-weight: 600; font-size: .9rem; margin-bottom: 18px; }
.form-error.show { display: block; }

/* ---------- Map / values interior ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-band .num { font-size: clamp(2.2rem,4vw,3rem); font-weight: 800; color: var(--green-deep); line-height: 1; }
.stat-band .lbl { color: var(--slate); margin-top: 8px; font-size: .92rem; }
.timeline { display: grid; gap: 0; max-width: 720px; margin: 0 auto; }
.timeline__item { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.timeline__item:last-child { border-bottom: none; }
.timeline__year { font-size: 1.4rem; font-weight: 800; color: var(--green-deep); }
.timeline__item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.value-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.value-list .item { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.value-list .item .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--bg-mint); display: grid; place-items: center; margin-bottom: 18px; }
.value-list .item .ico svg { width: 26px; height: 26px; color: var(--green-deep); }
.value-list .item h3 { font-size: 1.12rem; margin-bottom: 8px; }
.value-list .item p { font-size: .93rem; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(30px); filter: blur(7px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- WhatsApp float ---------- */
/* ---------- Accesos flotantes con etiqueta visible ---------- */
.wa-float, .aa-float { position: fixed; right: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 12px; padding-right: 24px;
  border-radius: 999px; color: #fff; text-decoration: none; white-space: nowrap;
  font-weight: 800; font-size: .93rem; line-height: 1.16;
  transition: transform .25s, box-shadow .25s; }
.wa-float { bottom: 24px; background: #25D366; box-shadow: 0 10px 26px rgba(37,211,102,.45); }
.wa-float:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 16px 34px rgba(37,211,102,.55); }
.fl__ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.fl__ico svg { width: 28px; height: 28px; }
.fl__txt { display: flex; flex-direction: column; }
.fl__txt small { font-weight: 600; font-size: .74rem; opacity: .93; }

/* ---------- Carrusel de proveedores ---------- */
.proveedores { padding: 60px 0; background: var(--bg-soft); overflow: hidden; }
/* la vuelta completa recorre las 28 marcas en ~52 s (antes 110 s) */
@keyframes scroll-inf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ci { flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; width: 176px; height: 104px; display: flex; align-items: center; justify-content: center; padding: 14px 18px; transition: box-shadow .2s, border-color .2s; }
.ci:hover { box-shadow: 0 4px 14px rgba(16,34,26,.08); border-color: var(--green); }
.ci img { max-width: 100%; max-height: 62px; object-fit: contain; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; row-gap: 12px; }
  .header.is-scrolled .nav { height: auto; }
  .nav__logo { flex: 0 0 auto; }
  .nav__logo img, .header.is-scrolled .nav__logo img { height: 64px; }
  .nav__search { order: 3; max-width: none; flex-basis: 100%; }
  .acct-link span { display: none; }
  .ci { width: 150px; height: 88px; padding: 12px 16px; }
  .ci img { max-height: 50px; }
  .nav__menu > li > a { padding: 13px 13px; font-size: .8rem; }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .slider__arrow { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { max-width: 440px; }
  .values { grid-template-columns: repeat(2,1fr); }
  .cats { grid-template-columns: repeat(2,1fr); }
  .brands { grid-template-columns: repeat(4,1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split__media { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .catalog { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .stat-band { grid-template-columns: repeat(2,1fr); gap: 30px; }
  .value-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar__links { display: none; }
  .mainnav > .container { display: block; padding: 0; }
  .mainnav__quote { display: none; }
  .nav__menu { display: none; flex-direction: column; align-items: stretch; background: var(--green-darker); }
  .nav__menu.is-open { display: flex; }
  .nav__menu > li > a { padding: 15px 24px; justify-content: space-between; }
  .drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; border-radius: 0; box-shadow: none; background: rgba(255,255,255,.97); padding: 6px 0;
  }
  .has-drop.open .drop { display: block; }
  .nav__toggle { display: flex; }
  .nav__login span { display: none; }
  .nav__login { padding: 9px 11px; }
  .nav__cta .btn--desktop { display: none; }
  .section { padding: 68px 0; }
  .values, .stat-band, .perks { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(3,1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { padding: 44px 28px; }
  .timeline__item { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   MINIMALISMO LUMINOSO · capas de luz, texturas y foco
   (aditivo — no altera la estructura existente)
   ========================================================= */

/* ---------- Foco visible global (accesibilidad) ---------- */
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--focus);
}

/* ---------- Fondos luminosos (utilidades) ---------- */
.section--lum { background: var(--glow-top), linear-gradient(180deg, #fff, var(--bg-lum)); }
.section--aura { background: var(--glow-top), var(--glow-petrol), var(--glow-warm), linear-gradient(180deg, #fff, #f7fbf9); }

/* ---------- Textura molecular (puntos) ---------- */
.has-mesh { position: relative; }
.has-mesh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6; pointer-events: none;
  background-image: var(--mesh-dot); background-size: var(--mesh-size) var(--mesh-size);
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
          mask-image: linear-gradient(#000, transparent 85%);
}
.has-mesh > * { position: relative; z-index: 1; }

/* ---------- Retícula geométrica ---------- */
.has-grid { position: relative; }
.has-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,110,99,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,110,99,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 30%, #000, transparent);
          mask-image: radial-gradient(75% 65% at 50% 30%, #000, transparent);
}
.has-grid > * { position: relative; z-index: 1; }

/* ---------- Aura para secciones oscuras ---------- */
.dark-aura { position: relative; overflow: hidden; }
.dark-aura::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--aura-dark), radial-gradient(46% 50% at 100% 108%, rgba(231,183,120,.14), transparent 60%);
}
.dark-aura > * { position: relative; z-index: 1; }

/* ---------- Halo que respira ---------- */
.breathe { animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; }
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   AURA BOOST · intensidad media-vívida (todas las palancas)
   ========================================================= */

/* ---- Textura molecular visible en el hero ---- */
.hero > .container { position: relative; z-index: 2; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .7;
  background-image: radial-gradient(rgba(14,110,99,.14) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(85% 80% at 50% 20%, #000, transparent);
          mask-image: radial-gradient(85% 80% at 50% 20%, #000, transparent);
}
.slide--brand .hero::after { display: none; }

/* ---- Retícula geométrica en secciones oscuras ---- */
.page-hero__inner, .cta-band__inner { z-index: 2; }
.page-hero::after, .cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(72% 82% at 28% 12%, #000, transparent);
          mask-image: radial-gradient(72% 82% at 28% 12%, #000, transparent);
}

/* ---- Íconos: tile + halo que late ---- */
.value-card .ico, .value-list .item .ico { position: relative; z-index: 0; box-shadow: var(--glow-cta); }
.value-card .ico::before, .value-list .item .ico::before {
  content: ""; position: absolute; inset: -7px; border-radius: 20px; z-index: -1;
  background: radial-gradient(circle, rgba(4,180,100,.40), transparent 70%);
  animation: pulse 3.4s ease-in-out infinite;
}
.perk .ico, .contact-info .info-item .ico, .hero__badge .ico {
  box-shadow: 0 6px 18px rgba(14,110,99,.18);
}
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }

/* ---- Barrido de luz al pasar el cursor (tarjetas) ---- */
.value-card, .product-card { position: relative; overflow: hidden; }
.value-card::before, .product-card::before {
  content: ""; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(4,180,100,.14), rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); transition: left .75s var(--ease);
}
.value-card:hover::before, .product-card:hover::before { left: 130%; }

/* ---- Mascota neón luminosa al hover — en TODOS los botones, alterna gatito/hámster/perrito ---- */
.btn, .mainnav__quote, .nav__login { position: relative; }
.btn::before, .mainnav__quote::before, .nav__login::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 78px; height: 62px;
  transform: translate(-50%, 0) scale(.5); transform-origin: bottom center;
  /* gatito (estado base) */
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64'><g fill='none' stroke='%23eafff4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 15 L15 4 L29 12'/><path d='M58 15 L65 4 L51 12'/><path d='M15 27 C15 45 27 55 40 55 C53 55 65 45 65 27 C65 17 57 12 40 12 C23 12 15 17 15 27 Z'/><path d='M33 40 q7 5 14 0'/><path d='M8 33 h15 M9 40 h13'/><path d='M72 33 h-15 M71 40 h-13'/></g><g fill='%23eafff4'><circle cx='31' cy='30' r='2.6'/><circle cx='49' cy='30' r='2.6'/></g></svg>") center/contain no-repeat;
  opacity: 0; pointer-events: none; z-index: 6;
  filter: drop-shadow(0 0 5px rgba(4,180,100,.95)) drop-shadow(0 0 13px rgba(4,180,100,.7));
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.btn:hover::before, .mainnav__quote:hover::before, .nav__login:hover::before {
  opacity: 1; transform: translate(-50%, -52px) scale(1);
  animation: petCycle 2.4s infinite;
}
@keyframes petCycle {
  /* gatito */
  0%, 30%   { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64'><g fill='none' stroke='%23eafff4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 15 L15 4 L29 12'/><path d='M58 15 L65 4 L51 12'/><path d='M15 27 C15 45 27 55 40 55 C53 55 65 45 65 27 C65 17 57 12 40 12 C23 12 15 17 15 27 Z'/><path d='M33 40 q7 5 14 0'/><path d='M8 33 h15 M9 40 h13'/><path d='M72 33 h-15 M71 40 h-13'/></g><g fill='%23eafff4'><circle cx='31' cy='30' r='2.6'/><circle cx='49' cy='30' r='2.6'/></g></svg>"); }
  /* hámster */
  34%, 63%  { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64'><g fill='none' stroke='%23eafff4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='29' cy='17' r='5'/><circle cx='51' cy='17' r='5'/><path d='M14 32 C14 47 26 56 40 56 C54 56 66 47 66 32 C66 20 54 15 40 15 C26 15 14 20 14 32 Z'/><path d='M34 44 q6 4 12 0'/><path d='M12 36 h10 M58 36 h10'/></g><g fill='%23eafff4'><circle cx='32' cy='31' r='2.6'/><circle cx='48' cy='31' r='2.6'/><circle cx='40' cy='39' r='2.2'/></g></svg>"); }
  /* perrito */
  67%, 96%  { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64'><g fill='none' stroke='%23eafff4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16 C10 20 9 36 18 40'/><path d='M58 16 C70 20 71 36 62 40'/><path d='M18 26 C18 44 28 54 40 54 C52 54 62 44 62 26 C62 16 54 12 40 12 C26 12 18 16 18 26 Z'/><path d='M34 45 q6 5 12 0'/><path d='M40 40 v4'/></g><g fill='%23eafff4'><circle cx='31' cy='30' r='2.6'/><circle cx='49' cy='30' r='2.6'/><circle cx='40' cy='39' r='2.6'/></g></svg>"); }
}

/* =========================================================
   INTEGRACIÓN JACOBO · Productos destacados + Promociones
   (aditivo — usa los tokens del tema luminoso)
   ========================================================= */

/* ---------- Productos destacados (carrusel) ---------- */
.featured-strip { background:#fff; padding:56px 0 60px; border-bottom:1px solid var(--line); }
.featured-strip .strip-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.featured-strip .strip-head h2 { font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--ink); }
.featured-strip__link { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.92rem; color:var(--green-darker); }
.featured-strip__link svg { width:17px; height:17px; transition:transform .2s var(--ease); }
.featured-strip__link:hover svg { transform:translateX(4px); }
.feat-outer { display:flex; align-items:center; gap:12px; }
.feat-track { display:flex; gap:16px; overflow:hidden; flex:1; scroll-behavior:smooth; cursor:grab; }
.feat-track:active { cursor:grabbing; }
.feat-card { flex:0 0 190px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s; }
.feat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--line-strong); }
.feat-card__img { background:var(--bg-mint); height:168px; display:flex; align-items:center; justify-content:center; padding:14px; }
.feat-card__img img { max-width:100%; max-height:140px; object-fit:contain; pointer-events:none; }
.feat-card__body { padding:12px 14px 14px; border-top:1px solid var(--line); }
.feat-card__cat { display:block; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--petrol); margin-bottom:4px; }
.feat-card__name { display:block; font-size:.86rem; font-weight:700; color:var(--green-darker); line-height:1.3; }
.feat-btn { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#fff; border:1.5px solid var(--line-strong); color:var(--green-darker); font-size:17px; display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); box-shadow:var(--shadow-sm); }
.feat-btn:hover { background:var(--grad-cta); color:#fff; border-color:transparent; box-shadow:var(--glow-cta); }
.feat-dots { display:flex; gap:6px; margin-top:20px; justify-content:center; }
.feat-dot { width:7px; height:7px; border-radius:50%; background:var(--line-strong); border:none; cursor:pointer; transition:all .3s var(--ease); padding:0; }
.feat-dot.active { background:var(--green); width:22px; border-radius:4px; }
@media(max-width:600px){ .feat-card{ flex:0 0 158px; } .feat-card__img{ height:140px; } }

/* ---------- Promociones vigentes ---------- */
.promos-section { padding:64px 0; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.promos-section .section-head { margin-bottom:36px; }
.promo-slider { position:relative; max-width:1080px; margin:0 auto; }
.promo-main { position:relative; aspect-ratio:3/2; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#0b201c;
              /* clip-path: recorta también al riel transformado (overflow solo no basta) */
              clip-path:inset(0 round var(--radius-lg)); }
/* riel: se desplaza recorriendo toda la parrilla de promociones */
.promo-track { display:flex; height:100%; width:100%; will-change:transform;
               transition:transform .62s cubic-bezier(.65,.02,.24,1); }
.promo-slide { position:relative; flex:0 0 100%; width:100%; height:100%; overflow:hidden; }
.promo-slide .promo-bg { position:absolute; inset:-24px; background-size:cover; background-position:center; filter:blur(22px) brightness(.7) saturate(1.2); transform:scale(1.12); z-index:0; }
.promo-slide img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; }
.promo-arrow { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:5; box-shadow:var(--shadow-sm); transition:background .2s; }
.promo-arrow:hover { background:#fff; }
.promo-arrow svg { width:18px; height:18px; stroke:var(--green-darker); }
.promo-arrow--prev { left:14px; } .promo-arrow--next { right:14px; }
.promo-dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.promo-dot { width:8px; height:8px; border-radius:50%; background:var(--line-strong); border:none; cursor:pointer; transition:all .3s var(--ease); padding:0; }
.promo-dot.active { background:var(--green); width:24px; border-radius:4px; }
.promo-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.promo-thumb { border-radius:10px; overflow:hidden; cursor:pointer; border:2.5px solid transparent; transition:border-color .2s, transform .2s, box-shadow .2s; box-shadow:var(--shadow-sm); }
.promo-thumb:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.promo-thumb.active { border-color:var(--green); box-shadow:0 4px 16px rgba(4,180,100,.28); }
.promo-thumb img { width:100%; height:92px; object-fit:cover; display:block; }
@media(max-width:700px){ .promo-main{ aspect-ratio:3/2; } .promo-thumb img{ height:52px; } .promo-thumbs{ gap:8px; } }

/* ============================================================
   ANILLO 3D DE PROVEEDORES  ·  reemplaza la marquesina plana
   ============================================================ */
.ring3d {
  --r: 820px; --cw: 176px; --ch: 104px; --step: 12.857deg; --tilt: 0deg;
  position: relative; margin-top: 32px; padding: 20px 0 4px;
  border-top: 1px solid var(--line);
  -webkit-user-select: none; user-select: none;
}
.ring3d__stage {
  position: relative; height: 188px; overflow: hidden;
  perspective: 1000px; perspective-origin: 50% 20%;
  cursor: grab; touch-action: pan-y;
}
.ring3d.is-drag .ring3d__stage { cursor: grabbing; }
.ring3d__stage::before, .ring3d__stage::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 3; pointer-events: none;
}
.ring3d__stage::before { left: 0;  background: linear-gradient(90deg, var(--bg-mint), transparent); }
.ring3d__stage::after  { right: 0; background: linear-gradient(270deg, var(--bg-mint), transparent); }
.ring3d--onsoft .ring3d__stage::before { background: linear-gradient(90deg, var(--bg-soft), transparent); }
.ring3d--onsoft .ring3d__stage::after  { background: linear-gradient(270deg, var(--bg-soft), transparent); }

.ring3d__ring {
  position: absolute; left: 0; right: 0; top: 50%; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--r))) rotateX(var(--tilt)) rotateY(var(--a, 0deg));
}
.ring3d__card {
  position: absolute; left: 50%; top: 0;
  width: var(--cw); height: var(--ch);
  margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--r));
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 14px 18px;
  box-shadow: 0 8px 22px rgba(16, 34, 26, .10);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: opacity;
}
.ring3d__card img {
  max-width: 100%; max-height: 62px; object-fit: contain; border-radius: 6px;
  pointer-events: none; -webkit-user-drag: none;
}
.ring3d__foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 16px; margin-top: 10px; min-height: 26px;
}
.ring3d__name { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.ring3d__hint { color: var(--muted); font-size: .86rem; }
.ring3d__hint svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }

@media (max-width: 1100px) {
  .ring3d { --r: 620px; --cw: 132px; --ch: 84px; }
  .ring3d__stage { height: 158px; perspective: 820px; perspective-origin: 50% 20%; }
  .ring3d__card img { max-height: 48px; }
  .ring3d__stage::before, .ring3d__stage::after { width: 56px; }
}
@media (max-width: 700px) {
  .ring3d { --r: 420px; --cw: 96px; --ch: 62px; }
  .ring3d__stage { height: 122px; perspective: 620px; perspective-origin: 50% 22%; }
  .ring3d__card { padding: 10px 12px; border-radius: 10px; }
  .ring3d__card img { max-height: 34px; }
  .ring3d__stage::before, .ring3d__stage::after { width: 34px; }
  .ring3d__hint { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .ring3d__hint { opacity: .75; } }

/* ============================================================
   PORTAL DE CLIENTES · aviso "Próximamente"
   ============================================================ */
.gate .gate__panel--soon h3 { margin-bottom: 6px; }
.gate__panel--soon hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0 18px; }
.gate__panel--soon .btn { width: 100%; justify-content: center; margin-top: 6px; }
.soon-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--warm-soft); color: var(--warm-ink);
  border: 1px solid #eadcc2; border-radius: 999px;
  padding: 6px 13px; font-size: .78rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px;
}
.soon-tag svg { width: 15px; height: 15px; }


/* ============================================================
   Congreso Cats in Chile 2026 · Mes del Gato (banner destacado)
   Acento violeta de evento (scoped) sobre identidad Novovet.
   ============================================================ */
.congreso { padding: clamp(38px, 6vw, 74px) 0; }
.congreso__card {
  --evt: #6d28d9; --evt-deep: #4c1d95; --evt-soft: #f4eefe;
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(109,40,217,.09), transparent 58%),
    radial-gradient(120% 130% at 0% 100%, rgba(4,180,100,.10), transparent 58%),
    var(--bg-lum);
  padding: clamp(24px, 4vw, 54px);
}
.congreso__glow { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(46% 60% at 90% -12%, rgba(109,40,217,.18), transparent 70%); }
.congreso__grid { position:relative; display:grid; grid-template-columns: 1.12fr .88fr; gap: clamp(22px,4vw,46px); align-items:center; }

.congreso__eyebrow { display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color: var(--evt-deep); background: var(--evt-soft);
  border:1px solid rgba(109,40,217,.18); padding:6px 14px; border-radius:999px; }
.congreso__eyebrow svg { width:16px; height:16px; }
.congreso__title { margin:16px 0 10px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.congreso__brandword { background: linear-gradient(115deg, var(--evt) 0%, #9333ea 55%, var(--green) 120%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.congreso__sub { max-width: 48ch; color: var(--slate); }

.congreso__dates { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.congreso__date { display:flex; flex-direction:column; gap:2px; padding:10px 16px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow-sm); min-width:142px; }
.congreso__city { font-weight:800; color: var(--ink); }
.congreso__day { font-size:.88rem; font-weight:600; color: var(--evt-deep); }

.congreso__offer { display:flex; align-items:center; gap:16px; margin:0 0 22px;
  padding:14px 18px; background: var(--evt-soft); border:1px solid rgba(109,40,217,.15); border-radius:14px; }
.congreso__offer p { margin:0; font-size:.94rem; color: var(--ink); }
.congreso__offer-badge { flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:50%; line-height:1.05; text-align:center; color:#fff;
  background: linear-gradient(135deg, var(--evt) 0%, var(--evt-deep) 100%); box-shadow:0 8px 20px rgba(76,29,149,.34); }
.congreso__offer-badge span { font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; opacity:.92; }
.congreso__offer-badge strong { font-size:1.55rem; font-weight:800; margin:1px 0; }

.congreso__actions { display:flex; flex-wrap:wrap; gap:12px; }

.congreso__media { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; }
.congreso__fan { position:relative; width:100%; max-width:440px; height:400px; }
.fan-card { position:absolute; top:50%; left:50%; margin:0; width:200px; border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-md); cursor: zoom-in;
  transition: transform .3s var(--ease), box-shadow .3s; }
.fan-card img { width:100%; height:auto; display:block; }
.fan-card--left  { transform: translate(-50%,-50%) translateX(-112px) rotate(-6deg); z-index:1; }
.fan-card--right { transform: translate(-50%,-50%) translateX(112px) rotate(6deg); z-index:1; }
.fan-card--main  { width:252px; transform: translate(-50%,-50%); z-index:2; box-shadow: var(--shadow-lg); }
.fan-card:hover, .fan-card:focus-visible { z-index:3; box-shadow: var(--shadow-lg); outline:none; }
.fan-card--left:hover, .fan-card--left:focus-visible { transform: translate(-50%,-50%) translateX(-112px) rotate(-6deg) translateY(-8px) scale(1.05); }
.fan-card--right:hover, .fan-card--right:focus-visible { transform: translate(-50%,-50%) translateX(112px) rotate(6deg) translateY(-8px) scale(1.05); }
.fan-card--main:hover, .fan-card--main:focus-visible { transform: translate(-50%,-50%) translateY(-8px) scale(1.04); }
.congreso__hint { margin:0; font-size:.78rem; font-weight:600; color: var(--muted); }

@media (max-width: 860px){
  .congreso__grid { grid-template-columns:1fr; }
  .congreso__media { order:-1; }
  .congreso__fan { max-width:340px; height:320px; }
  .fan-card { width:156px; }
  .fan-card--main { width:198px; }
  .fan-card--left  { transform: translate(-50%,-50%) translateX(-86px) rotate(-6deg); }
  .fan-card--right { transform: translate(-50%,-50%) translateX(86px) rotate(6deg); }
  .fan-card--left:hover  { transform: translate(-50%,-50%) translateX(-86px) rotate(-6deg) translateY(-6px); }
  .fan-card--right:hover { transform: translate(-50%,-50%) translateX(86px) rotate(6deg) translateY(-6px); }
}

/* ---------- Lightbox (ampliar flyers) ---------- */
.lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:4vh 4vw; background: rgba(9,63,57,.84); backdrop-filter: blur(6px); }
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:92vh; width:auto; height:auto; border-radius:12px; box-shadow: var(--shadow-lg); }
.lightbox__close { position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  background:#fff; color: var(--ink); font-size:26px; line-height:1; display:grid; place-items:center; box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce){ .fan-card { transition:none; } }

/* Hero de imagen única (perro+gato Novovet): frame horizontal en vez de 4/5 */
.hero--single .hero__img { aspect-ratio: 3 / 2; }
@media (max-width: 760px){ .hero--single .hero__img { aspect-ratio: 4 / 3; } }

/* ---------- Autoatención flotante (sobre el botón de WhatsApp) ---------- */
/* Autoatención: mismo pill, con halo que late para que se note */
.aa-float { bottom: 96px; background: var(--grad-cta); box-shadow: 0 12px 30px rgba(12,125,82,.5); }
.aa-float:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 18px 38px rgba(12,125,82,.6); }
.aa-float::after { content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2.5px solid #6ee7a8; pointer-events: none;
  animation: aa-latido 2.6s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes aa-latido {
  0%   { opacity: .9; transform: scale(1); }
  60%  { opacity: 0;  transform: scale(1.10); }
  100% { opacity: 0;  transform: scale(1.10); }
}

/* ---------- Botón "Inscríbete aquí" del header (las 5 páginas) ---------- */
.nav__cta { display: inline-flex; align-items: center; gap: 9px; position: relative;
  background: var(--grad-cta); color: #fff; font-weight: 800; font-size: .93rem;
  padding: 13px 24px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(12,125,82,.35); transition: transform .2s, box-shadow .2s; }
.nav__cta svg { width: 19px; height: 19px; }
.nav__cta__t b { font-weight: 800; }
.nav__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(12,125,82,.48); }
.nav__cta::after { content: ""; position: absolute; inset: -3px; border-radius: 999px;
  border: 2px solid var(--green); opacity: 0; pointer-events: none;
  animation: cta-latido 3.2s ease-out infinite; }
@keyframes cta-latido {
  0%   { opacity: .75; transform: scale(.99); }
  55%  { opacity: 0;   transform: scale(1.09); }
  100% { opacity: 0;   transform: scale(1.09); }
}

/* Botón principal que respira (hero y banda CTA) */
.btn--pulse { animation: btn-respira 3s ease-in-out infinite; }
@keyframes btn-respira {
  0%, 100% { box-shadow: 0 8px 22px rgba(12,125,82,.34); }
  50%      { box-shadow: 0 12px 34px rgba(12,125,82,.58); }
}

/* Pista bajo el hero: acceso para quien ya es cliente */
.hero__hint { margin-top: 16px; font-size: .93rem; color: var(--slate); font-weight: 600; }
.hero__hint a { color: var(--green-darker); font-weight: 800; text-decoration: underline;
  text-underline-offset: 3px; }
.hero__hint a:hover { color: var(--petrol); }

@media (prefers-reduced-motion: reduce) {
  .aa-float::after, .nav__cta::after, .btn--pulse { animation: none; }
}

/* Flotantes y CTA en pantallas chicas */
@media (max-width: 760px) {
  .nav__cta { padding: 11px 16px; font-size: .86rem; gap: 7px; }
  .nav__cta__t b { display: none; }
}
@media (max-width: 560px) {
  .wa-float, .aa-float { right: 12px; font-size: .81rem; padding-right: 17px; gap: 9px; }
  .fl__ico { width: 50px; height: 50px; }
  .fl__ico svg { width: 24px; height: 24px; }
  .fl__txt small { font-size: .67rem; }
  .wa-float { bottom: 14px; }
  .aa-float { bottom: 76px; }
}

/* Tarjetas de línea estáticas (productos.html sin profundidad) */
.ecard.ecard--static { cursor: default; }
.ecard.ecard--static:hover { transform: none; box-shadow: var(--shadow-sm); }
.ecard.ecard--static:hover > .ecard__bg { transform: none; }

/* ---------- Consentimiento de datos personales (Ley 21.719) ---------- */
.consent { margin-top: 2px; }
.consent__row { display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-size: .9rem; color: var(--slate); line-height: 1.55; font-weight: 500; }
.consent__row input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--green-deep); cursor: pointer; }
.consent__row b { color: var(--ink); }
.field.err .consent__row span { color: var(--danger); }
.consent__details { margin-top: 8px; }
.consent__details summary { cursor: pointer; font-weight: 700; font-size: .84rem; color: var(--green-darker); }
.consent__details summary:hover { text-decoration: underline; }
.consent__details p { margin-top: 8px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; font-size: .84rem; line-height: 1.65; color: var(--slate); }
.consent__details b { color: var(--ink); }


/* Campo trampa anti-robots (invisible, no debe verse nunca) */
.hp { position: absolute !important; left: -9999px !important; width: 1px !important;
  height: 1px !important; overflow: hidden !important; }