:root{
    --green:#0F3D22;
    --green-2:#2E7D32;
    --green-3:#6BAF45;
    --gold:#D4A017;
    --ink:#1a1a1a;
    --gray:#4A4A4A;
    --cream:#F2F2F2;
    --paper:#EFEAE0; /* warm secondary cream */
    --line:rgba(15,61,34,.18);
    --line-cream:rgba(242,242,242,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--cream);color:var(--green);font-family:'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body{font-weight:400;line-height:1.5}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  ::selection{background:var(--gold);color:var(--green)}

  /* ---------- LAYOUT ---------- */
  .wrap{max-width:1480px;margin:0 auto;padding:0 48px}
  @media (max-width:720px){ .wrap{padding:0 24px} }

  /* ---------- NAV ---------- */
  /* Cream background — gives the green tractor in the icon strong contrast */
  .nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 0;background:rgba(242,242,242,.92);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(15,61,34,.10);transition:background .35s ease,padding .35s ease,box-shadow .35s ease}
  .nav.solid{background:var(--cream);padding:10px 0;box-shadow:0 1px 0 rgba(15,61,34,.08),0 8px 24px rgba(15,61,34,.06)}
  .nav .row{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--green)}
  .logo{display:flex;align-items:center;gap:12px;color:var(--green);min-width:0;flex:0 1 auto}
  /* SVG logo mark: --logo-bg sets the "background" cutout color (cream-like) inside the gear/tractor */
  .logo-mark{height:50px;width:auto;flex:none;display:block;--logo-bg:#e8eae5}
  /* SVG wordmark: uses currentColor for the dark text — inherit from parent (.logo color) */
  .logo-wordmark{height:38px;width:auto;flex:0 1 auto;min-width:0;max-width:100%;display:block;color:var(--green)}
  /* Hide standalone text spans if they ever appear */
  .logo-text,.logo-sub{display:none}
  .nav-links{display:flex;gap:36px;font-weight:700;letter-spacing:.18em;font-size:11px;text-transform:uppercase;color:var(--green)}
  .nav-links a{position:relative;padding:6px 0;color:var(--green)}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s ease}
  .nav-links a:hover::after{right:0}
  /* CTA: solid green pill — strong contrast on cream */
  .nav-cta{background:var(--green);color:var(--gold);border:1.5px solid var(--green);padding:11px 22px;font-weight:700;letter-spacing:.18em;font-size:11px;text-transform:uppercase;transition:background .25s,color .25s,transform .2s;white-space:nowrap;flex:none}
  .nav-cta:hover{background:#0a2c19;color:var(--gold);transform:translateY(-1px)}
  @media (max-width:900px){
    .nav-links{display:none}
    .logo-mark{height:42px}
    .logo-wordmark{height:30px}
    .nav-cta{padding:9px 14px;font-size:10px;letter-spacing:.14em}
  }
  @media (max-width:560px){
    /* On phone-size screens: keep icon + tight wordmark + small CTA */
    .nav{padding:8px 0}
    .logo{gap:8px}
    .logo-mark{height:36px}
    .logo-wordmark{height:24px}
    .nav-cta{padding:8px 10px;font-size:9px;letter-spacing:.1em}
    .wrap{padding:0 16px}
  }
  @media (max-width:360px){
    /* Only ultra-small phones drop the wordmark — at 390px it still fits */
    .logo-wordmark{display:none}
    .logo-mark{height:38px}
  }
  /* Footer logos: SVG icon gets a cream "card" background; wordmark in cream color */
  footer .logo-mark{background:var(--cream);padding:8px;border-radius:12px;height:64px;width:auto;box-shadow:0 2px 12px rgba(0,0,0,.18);--logo-bg:var(--cream)}
  .logo-wordmark-footer{height:50px;width:auto;flex:0 1 auto;min-width:0;display:block;color:var(--cream)}
  @media (max-width:600px){
    .logo-wordmark-footer{height:40px}
  }

  /* ---------- HERO (rediseñado) ---------- */
  .hero{position:relative;min-height:100vh;background:var(--green);color:var(--cream);overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
  .hero-img{position:absolute;inset:0;z-index:0}
  .hero-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05) contrast(1.05)}
  /* Stronger, layered gradient: oscurece de izquierda a derecha + arriba/abajo para legibilidad total */
  .hero-img::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(15,61,34,.55) 0%,rgba(15,61,34,.20) 35%,rgba(15,61,34,.85) 100%),
    linear-gradient(90deg,rgba(15,61,34,.78) 0%,rgba(15,61,34,.35) 45%,rgba(15,61,34,.20) 100%)
  }

  /* Single-column hero — composition is vertical, more editorial */
  .hero-inner{position:relative;z-index:2;flex:1;display:grid;grid-template-rows:1fr auto;padding:120px 0 110px 0;min-height:100vh}
  .hero-content{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:56px;align-items:center;padding:0 64px}
  @media (max-width:1024px){
    .hero-content{grid-template-columns:1fr;gap:48px;padding:0 32px}
  }
  @media (max-width:720px){
    .hero-inner{padding:90px 0 70px 0;min-height:auto}
    .hero-content{padding:0 20px;gap:28px}
    .hero-aside{padding:24px 22px}
    .hero-aside p{font-size:15px;margin-bottom:22px}
    .hero-stats{gap:14px;margin-top:20px;padding-top:18px}
    .hero-stat .num{font-size:24px}
    .hero-stat .lab{font-size:9px}
  }

  .eyebrow{display:inline-flex;align-items:center;gap:14px;font-weight:700;letter-spacing:.32em;font-size:11px;text-transform:uppercase;color:var(--gold);margin-bottom:32px}
  .eyebrow .bar{width:42px;height:1px;background:var(--gold)}

  /* Hero headline — MUCHO más grande, ocupa el ancho de su columna */
  .hero-title{font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.025em;display:block;width:100%;text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hero-title .ln{display:block;overflow:hidden;width:100%}
  .hero-title .word{
    display:inline-block;
    /* Short words can be huge; PRODUCTIVIDAD is constrained below */
    font-size:clamp(2.75rem, 7.2vw, 6.5rem); /* 44px → 104px */
    line-height:.92;
    color:var(--cream);
    transform:translateY(110%);opacity:0;will-change:transform;
  }
  /* PRODUCTIVIDAD is the long one — needs its own clamp, plus tighter tracking to fit */
  .hero-title .ln:nth-child(5) .word{
    font-size:clamp(2rem, 5.6vw, 5.25rem); /* 32px → 84px */
    letter-spacing:-.045em;
  }
  /* Mobile: keep PRODUCTIVIDAD tight so it never overflows tiny viewports */
  @media (max-width:480px){
    .hero-title .word{font-size:clamp(2.5rem, 11vw, 3.5rem)}
    .hero-title .ln:nth-child(5) .word{font-size:clamp(1.75rem, 8.4vw, 2.65rem);letter-spacing:-.05em}
  }
  .hero-title .word.accent{color:var(--gold)}
  .hero-title.go .word{animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-title.go .word:nth-child(1){animation-delay:.05s}
  .hero-title.go .word:nth-child(2){animation-delay:.16s}
  .hero-title.go .word:nth-child(3){animation-delay:.27s}
  .hero-title.go .word:nth-child(4){animation-delay:.38s}
  .hero-title.go .word:nth-child(5){animation-delay:.5s}

  @keyframes rise{ to{ transform:translateY(0); opacity:1 } }

  /* Headline mode variants */
  body[data-headline="editorial"] .hero-title .ln:nth-child(3){margin-left:6%}

  body[data-headline="indexado"] .hero-title .ln{position:relative;padding-left:62px}
  body[data-headline="indexado"] .hero-title .ln::before{position:absolute;left:0;top:.45em;font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--gold);font-family:'Montserrat',sans-serif}
  body[data-headline="indexado"] .hero-title .ln:nth-child(1)::before{content:"N° 01"}
  body[data-headline="indexado"] .hero-title .ln:nth-child(2)::before{content:"N° 02"}
  body[data-headline="indexado"] .hero-title .ln:nth-child(3)::before{content:"N° 03"}
  body[data-headline="indexado"] .hero-title .ln:nth-child(4)::before{content:"N° 04"}
  body[data-headline="indexado"] .hero-title .ln:nth-child(5)::before{content:"N° 05"}
  body[data-headline="indexado"] .hero-title .word.accent{color:var(--cream);border-bottom:5px solid var(--gold);padding-bottom:.04em}
  @media (max-width:720px){
    body[data-headline="editorial"] .hero-title .ln{margin-left:0}
    body[data-headline="indexado"] .hero-title .ln{padding-left:0}
    body[data-headline="indexado"] .hero-title .ln::before{position:static;display:block;margin-bottom:4px}
  }

  /* Hero right column — panel oscuro semi-translúcido para legibilidad sobre cualquier imagen */
  .hero-aside{position:relative;padding:36px 36px 36px 36px;background:rgba(10,30,18,.62);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--line-cream);border-left:3px solid var(--gold)}
  .hero-aside .aside-label{font-weight:700;letter-spacing:.28em;font-size:10px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:10px}
  .hero-aside .aside-label::before{content:"";width:8px;height:8px;background:var(--gold);display:inline-block;border-radius:50%;box-shadow:0 0 0 4px rgba(212,160,23,.18);animation:pulse-dot 2.4s ease-in-out infinite;flex:none}
  @keyframes pulse-dot{0%,100%{box-shadow:0 0 0 4px rgba(212,160,23,.18)}50%{box-shadow:0 0 0 8px rgba(212,160,23,.05)}}
  .hero-aside p{font-size:16px;line-height:1.65;color:rgba(242,242,242,.94);margin-bottom:28px}
  @media (max-width:720px){
    .hero-aside{padding:24px 22px}
    .hero-aside p{font-size:15px;margin-bottom:22px}
  }
  .hero-cta-row{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:700;letter-spacing:.18em;font-size:12px;text-transform:uppercase;padding:0 24px;height:52px;transition:transform .2s,background .25s,color .25s,border-color .25s}
  .btn:hover{transform:translateY(-1px)}
  .btn.gold{background:var(--gold);color:var(--green);border:1.5px solid var(--gold)}
  .btn.gold:hover{background:#e6b328;border-color:#e6b328}
  .btn.ghost{border:1.5px solid var(--cream);color:var(--cream);background:transparent}
  .btn.ghost:hover{background:var(--cream);color:var(--green)}
  .btn .arr{width:18px;height:10px;flex:none}
  @media (max-width:720px){
    .hero-cta-row .btn{flex:1 1 auto;min-width:0}
  }

  /* small stat row inside aside */
  .hero-stats{display:flex;gap:24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line-cream)}
  .hero-stat{flex:1;min-width:0}
  .hero-stat .num{font-weight:900;font-size:28px;color:var(--gold);line-height:1;letter-spacing:-.02em}
  .hero-stat .lab{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,242,242,.7);margin-top:6px;font-weight:600}
  @media (max-width:480px){
    .hero-stats{gap:14px}
    .hero-stat .num{font-size:22px}
    .hero-stat .lab{font-size:9px;letter-spacing:.18em}
  }

  /* meta strip at hero bottom — ahora con sucursales correctas */
  .hero-meta{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:20px 64px;border-top:1px solid var(--line-cream);color:var(--cream);font-size:11px;letter-spacing:.22em;font-weight:500;text-transform:uppercase;background:rgba(10,30,18,.40);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .hero-meta .dot{width:6px;height:6px;background:var(--gold);display:inline-block;margin:0 12px;transform:translateY(-1px)}
  .hero-meta span.muted{color:rgba(242,242,242,.55)}
  @media (max-width:720px){ .hero-meta{padding:16px 22px;flex-direction:column;gap:8px;text-align:center;font-size:9px;letter-spacing:.18em} }

  /* scroll indicator — vertical, sutil */
  .scroll-ind{position:absolute;left:28px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:3;display:flex;align-items:center;gap:18px;color:var(--cream);font-size:10px;letter-spacing:.32em;font-weight:700;text-transform:uppercase}
  .scroll-ind::after{content:"";width:1px;height:56px;background:var(--gold);animation:scroll-line 1.8s ease-in-out infinite;writing-mode:horizontal-tb}
  @keyframes scroll-line{ 0%,100%{transform:scaleY(.3);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }
  @media (max-width:1240px){ .scroll-ind{display:none} }

  /* Big watermark logo in background — adds depth & branding presence */
  .hero-watermark{position:absolute;right:-80px;top:50%;transform:translateY(-50%);z-index:1;width:min(560px,55vw);opacity:.10;pointer-events:none;color:var(--cream)}
  .hero-watermark img,.hero-watermark svg{width:100%;height:auto;display:block}
  @media (max-width:1024px){ .hero-watermark{opacity:.05;width:min(380px,70vw);right:-60px} }
  @media (max-width:720px){ .hero-watermark{display:none} }

  /* Small badge top-left of left column showing sucursales */
  .hero-loc{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(212,160,23,.12);border:1px solid rgba(212,160,23,.35);color:var(--gold);font-size:10px;letter-spacing:.24em;font-weight:700;text-transform:uppercase;margin-top:32px}
  .hero-loc .pin{width:10px;height:10px;flex:none}

  /* ---------- MARQUEE ---------- */
  .marquee{background:var(--gold);color:var(--green);overflow:hidden;border-top:1px solid var(--green);border-bottom:1px solid var(--green);position:relative}
  .marquee.dark{background:var(--green);color:var(--gold);border-color:var(--gold)}
  .marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track > span{display:inline-flex;align-items:center;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(28px,4.5vw,68px);padding:18px 28px;line-height:1;white-space:nowrap}
  .marquee-track .sep{font-size:24px;padding:18px 4px;color:var(--green);opacity:.5}
  .marquee.dark .marquee-track .sep{color:var(--gold);opacity:.5}
  @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ---------- SECTION BASE / SCROLL REVEAL ---------- */
  section{position:relative}
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}
  .reveal.d4{transition-delay:.32s}

  .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;padding:120px 0 60px;border-bottom:1px solid var(--line)}
  .section-head .num{font-weight:900;font-size:14px;letter-spacing:.25em}
  .section-head .num::before{content:"";display:inline-block;width:36px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px;transform:translateY(-3px)}
  .section-head h2{font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-size:clamp(36px,5vw,86px);word-break:break-word}
  .section-head h2 .accent{color:var(--gold)}
  @media (max-width:900px){ .section-head{grid-template-columns:1fr;padding:80px 0 40px} }

  /* ---------- ABOUT (cream) ---------- */
  .about{background:var(--cream);color:var(--green);padding-bottom:120px}
  .about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:80px;padding:80px 0;align-items:start}
  .about p{font-size:18px;line-height:1.7;max-width:560px}
  .about p + p{margin-top:24px}
  .about p .lead{font-weight:700}
  .about-side{border-left:1px solid var(--line);padding-left:48px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px}
  .stat .n{font-weight:900;font-size:72px;line-height:.9;letter-spacing:-.02em}
  .stat .n sup{font-size:28px;color:var(--gold);vertical-align:top;margin-left:2px;font-weight:900}
  .stat .l{margin-top:10px;font-weight:700;letter-spacing:.18em;font-size:10px;text-transform:uppercase;color:var(--gray)}
  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr;gap:48px;padding:64px 0}
    .about-side{border-left:none;border-top:1px solid var(--line);padding:48px 0 0}
  }
  @media (max-width:600px){
    .about{padding-bottom:72px}
    .about p{font-size:16px}
    .stat .n{font-size:56px}
  }

  /* ---------- PRODUCTS (green, parallax) ---------- */
  .products{background:var(--green);color:var(--cream);overflow:hidden}
  .products .section-head{border-color:var(--line-cream)}
  .products-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;padding-bottom:120px;position:relative}
  .pcard{grid-column:span 4;border:1px solid var(--line-cream);border-top:none;border-left:none;padding:48px 36px 36px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;position:relative;transition:background .35s ease}
  .pcard:nth-child(3n){border-right:none}
  .pcard:nth-child(-n+3){border-top:1px solid var(--line-cream)}
  .pcard:hover{background:#0a2c19}
  .pcard .pnum{font-weight:700;font-size:11px;letter-spacing:.25em;color:var(--gold)}
  .pcard h3{font-weight:900;text-transform:uppercase;font-size:28px;line-height:1;letter-spacing:.005em;margin-top:auto}
  .pcard p{font-size:13px;line-height:1.55;color:rgba(242,242,242,.7);margin-top:14px;max-width:280px}
  .pcard .ico{width:54px;height:54px;color:var(--gold);margin-bottom:8px}
  .pcard .arr{margin-top:24px;width:42px;height:14px;color:var(--gold);transition:transform .3s ease}
  .pcard:hover .arr{transform:translateX(8px)}
  @media (max-width:900px){
    .pcard{grid-column:span 12;border-right:none;border-bottom:1px solid var(--line-cream);min-height:auto;padding:36px 28px 28px}
    .pcard:nth-child(-n+3){border-top:none}
  }
  @media (max-width:560px){
    .pcard{padding:32px 22px 24px}
    .pcard h3{font-size:24px}
    .pcard .ico{width:44px;height:44px}
    .products-grid{padding-bottom:72px}
  }

  /* parallax decorative bg */
  .px-blob{position:absolute;font-weight:900;text-transform:uppercase;color:rgba(212,160,23,.06);font-size:clamp(120px,18vw,300px);line-height:.85;letter-spacing:-.02em;pointer-events:none;user-select:none;z-index:0;will-change:transform}
  .px-blob.b1{top:6%;right:-2%}
  .px-blob.b2{bottom:8%;left:-3%}
  .products .wrap{position:relative;z-index:1}

  /* ---------- VALUES (cream) ---------- */
  .values{background:var(--paper);color:var(--green);padding-bottom:120px}
  .values .section-head{border-color:var(--line)}
  .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:1px;border:1px solid var(--line)}
  .vcard{background:var(--paper);padding:48px 36px;display:flex;flex-direction:column;gap:20px;min-height:280px;transition:background .3s,color .3s}
  .vcard:hover{background:var(--green);color:var(--cream)}
  .vcard:hover .vico{color:var(--gold)}
  .vcard .vico{width:44px;height:44px;color:var(--green-2);transition:color .3s}
  .vcard .vnum{font-weight:700;font-size:11px;letter-spacing:.25em;color:var(--gold);margin-top:auto}
  .vcard h3{font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:.005em}
  .vcard p{font-size:13px;line-height:1.55;opacity:.78}
  @media (max-width:900px){ .values-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:600px){
    .values-grid{grid-template-columns:1fr}
    .vcard{min-height:auto;padding:32px 22px;gap:14px}
    .vcard h3{font-size:20px}
    .values{padding-bottom:72px}
  }

  /* ---------- BIG CTA (gold) ---------- */
  .cta-block{background:var(--gold);color:var(--green);padding:120px 0;position:relative;overflow:hidden}
  .cta-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:60px;align-items:end}
  .cta-grid h2{font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;font-size:clamp(48px,6.8vw,138px);word-break:break-word}
  .cta-grid .underline{display:inline-block;border-bottom:8px solid var(--green);padding-bottom:4px}
  .cta-side p{font-size:21px;line-height:1.55;max-width:420px;margin-bottom:32px;font-weight:500}
  .btn.dark{background:var(--green);color:var(--gold);height:60px;padding:0 32px;font-size:13px}
  .btn.dark:hover{background:#0a2c19}
  @media (max-width:900px){ .cta-grid{grid-template-columns:1fr;gap:40px} .cta-block{padding:80px 0} }
  @media (max-width:600px){
    .cta-block{padding:60px 0}
    .cta-grid{gap:28px}
    .cta-grid h2{font-size:42px}
    .cta-side p{font-size:17px;margin-bottom:24px}
    .btn.dark{height:54px;padding:0 24px}
  }

  /* ---------- CONTACT ---------- */
  .contact{background:var(--cream);color:var(--green);padding:120px 0 80px}
  .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
  .contact h3{font-weight:900;text-transform:uppercase;font-size:48px;line-height:.95;letter-spacing:-.005em;margin-bottom:40px}
  .form-field{display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--green);padding:14px 0;margin-bottom:20px}
  .form-field label{font-weight:700;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gray)}
  .form-field input,.form-field textarea{border:none;outline:none;background:transparent;font-family:inherit;font-size:16px;font-weight:500;color:var(--green);padding:6px 0;resize:none}
  .form-field input::placeholder,.form-field textarea::placeholder{color:rgba(15,61,34,.4)}

  /* Single-location info stack with icons */
  .info-stack{display:flex;flex-direction:column;gap:0}
  .info-card{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line);align-items:start}
  .info-card:last-child{border-bottom:1px solid var(--line)}
  .info-card .ico-wrap{width:48px;height:48px;border:1.5px solid var(--gold);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;flex:none}
  .info-card .ico-wrap svg{width:22px;height:22px}
  .info-card .lbl{font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
  .info-card .val{font-weight:700;font-size:16px;line-height:1.45;color:var(--green)}
  .info-card .val strong{font-weight:900;font-size:22px;letter-spacing:-.005em;display:block;margin-bottom:4px}
  .info-card .val .sub{display:block;font-weight:500;font-size:13px;color:var(--gray);margin-top:6px;letter-spacing:.02em}
  .info-card .val a{color:inherit;border-bottom:1px solid var(--gold);transition:color .2s}
  .info-card .val a:hover{color:var(--gold)}

  /* Map embed */
  .contact-map{margin-top:80px;border:1px solid var(--line);overflow:hidden;position:relative;background:var(--paper)}
  .contact-map .map-frame{display:block;width:100%;height:420px;border:0;filter:saturate(.85) contrast(1.05)}
  .contact-map .map-tag{position:absolute;top:18px;left:18px;background:var(--green);color:var(--cream);padding:10px 14px;font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;z-index:2;pointer-events:none}
  .contact-map .map-tag .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;display:inline-block}

  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr} .contact-map .map-frame{height:340px} }

  /* ---------- FOOTER ---------- */
  footer{background:var(--green);color:var(--cream);padding:80px 0 36px}
  .foot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;border-bottom:1px solid var(--line-cream);padding-bottom:60px}
  .foot-grid h4{font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.28em;color:var(--gold);margin-bottom:20px}
  .foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:500;color:rgba(242,242,242,.8)}
  .foot-grid ul a:hover{color:var(--gold)}
  .foot-grid .brand p{margin-top:20px;font-size:13px;max-width:320px;color:rgba(242,242,242,.7);line-height:1.6}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:rgba(242,242,242,.6)}
  @media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;gap:36px} }
  @media (max-width:600px){ .foot-grid{grid-template-columns:1fr} .foot-bottom{flex-direction:column;gap:16px} }

  /* big footer wordmark — uses the real branded wordmark, subtle */
  .footmark{margin-top:60px;text-align:center;user-select:none;pointer-events:none;line-height:0;color:var(--cream)}
  .footmark img,.footmark svg{width:100%;max-width:100%;height:auto;opacity:.10;display:block;margin:0 auto}

  /* utility */
  .pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--gold);color:var(--gold);padding:8px 14px;font-weight:700;letter-spacing:.2em;font-size:10px;text-transform:uppercase;border-radius:999px}
  .pill .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }

  /* ===== BOTÓN FLOTANTE DE WHATSAPP ===== */
  .wa-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .wa-btn{display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#fff;border:none;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.02em;padding:14px 20px;border-radius:999px;
    box-shadow:0 6px 24px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
  .wa-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
  .wa-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .wa-btn svg{width:23px;height:23px;flex:none}
  .wa-panel{background:var(--cream);border:1px solid var(--line);border-radius:14px;overflow:hidden;
    box-shadow:0 14px 44px rgba(0,0,0,.26);width:266px;animation:waIn .18s ease}
  @keyframes waIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .wa-panel-h{background:var(--green);color:var(--cream);font-size:11px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;padding:13px 16px}
  .wa-panel a{display:block;padding:14px 16px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
  .wa-panel a:first-of-type{border-top:none}
  .wa-panel a:hover{background:var(--paper)}
  .wa-panel a strong{display:block;font-size:15px;font-weight:700;margin-bottom:3px}
  .wa-panel a span{display:block;font-size:12px;color:var(--gray)}
  @media (max-width:520px){
    .wa-fab{right:14px;bottom:14px}
    .wa-btn{padding:14px}
    .wa-btn .wa-lbl{display:none}
    .wa-panel{width:calc(100vw - 28px);max-width:290px}
  }
  @media print{.wa-fab{display:none}}


  /* ================= SUBPÁGINAS DE FAMILIA ================= */
  .fam-head{background:var(--green);color:var(--cream);padding:150px 0 70px;position:relative;overflow:hidden}
  .crumb{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(242,242,242,.6);margin-bottom:34px;flex-wrap:wrap}
  .crumb a{color:var(--gold);text-decoration:none}
  .crumb a:hover{text-decoration:underline}
  .crumb .sep{opacity:.45}
  .fam-head h1{font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.025em;
    font-size:clamp(2.2rem,5.4vw,4.4rem);max-width:16ch;margin:0 0 26px}
  .fam-head .lead{max-width:62ch;font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:rgba(242,242,242,.86)}
  .fam-idx{position:absolute;right:-2vw;bottom:-4vw;font-weight:900;font-size:clamp(9rem,26vw,24rem);
    line-height:.75;color:rgba(242,242,242,.05);pointer-events:none;user-select:none}

  .cat-sec{background:var(--cream);padding:90px 0}
  .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px;margin-top:44px}
  .catcard{background:var(--cream);border:1px solid var(--line);border-radius:12px;
    padding:32px 28px 30px;transition:background .25s ease,border-color .25s ease}
  .catcard:hover{border-color:var(--gold)}
  .catcard:hover{background:var(--paper)}
  .catcard .cnum{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--gold);margin-bottom:16px}
  .catcard h3{font-size:19px;font-weight:800;line-height:1.24;margin:0 0 12px;color:var(--green)}
  .catcard p{font-size:14px;line-height:1.62;color:var(--gray);margin:0}
  .catcard .cbrands{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
  .catcard .cbrands span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--green);border:1px solid var(--line);padding:4px 9px;border-radius:999px}

  .brands-sec{background:var(--paper);padding:74px 0;border-top:1px solid var(--line)}
  .brands-lbl{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gray);margin-bottom:24px}
  .brand-chips{display:flex;flex-wrap:wrap;gap:12px}
  .brand-chips span{background:var(--cream);border:1px solid var(--line);color:var(--green);
    font-weight:800;font-size:15px;letter-spacing:.02em;padding:13px 22px;border-radius:8px}
  .brands-note{margin-top:26px;font-size:14px;line-height:1.75;color:var(--gray);max-width:78ch;
    border-left:3px solid var(--line);padding-left:18px}

  .fam-cta{background:var(--green);color:var(--cream);padding:82px 0}
  .fam-cta h2{font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.02em;
    font-size:clamp(1.9rem,4vw,3.2rem);margin:0 0 18px;max-width:20ch}
  .fam-cta p{max-width:56ch;color:rgba(242,242,242,.82);line-height:1.65;margin:0 0 32px}
  .suc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-bottom:30px}
  .suc{background:rgba(242,242,242,.07);border:1px solid var(--line-cream);border-radius:12px;padding:24px}
  .suc .st{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .suc .sd{font-size:13px;line-height:1.6;color:rgba(242,242,242,.78);margin-bottom:16px}
  .suc .wa-link{display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#fff;
    text-decoration:none;font-weight:700;font-size:14px;padding:12px 18px;border-radius:999px}
  .suc .wa-link:hover{filter:brightness(1.07)}
  .suc .wa-link svg{width:18px;height:18px;fill:currentColor}

  .promise{background:var(--gold);color:#2b2205;padding:34px 0}
  .promise p{margin:0;font-weight:700;font-size:clamp(15px,2vw,20px);line-height:1.5;max-width:76ch}
  .back-row{background:var(--cream);padding:40px 0 76px}
  .back-link{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-weight:700;
    text-decoration:none;font-size:14px;letter-spacing:.02em}
  .back-link:hover{color:var(--gold)}

  @media (max-width:720px){
    .fam-head{padding:120px 0 54px}
    .cat-sec{padding:64px 0}
    .catcard{padding:28px 24px}
  }

  .pcard .pgo{display:block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);opacity:.85;transition:opacity .2s ease,transform .2s ease}
  .pcard:hover .pgo{opacity:1;transform:translateX(4px)}

  /* --- ilustraciones e iconos --- */
  .fam-head-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  @media (max-width:860px){.fam-head-grid{grid-template-columns:1fr;gap:32px}.fam-fig{max-width:460px}}

  .catcard .cico{width:46px;height:46px;color:var(--green);margin-bottom:18px;display:block}
  .catcard:hover .cico{color:var(--gold)}
  .catcard .cico{transition:color .25s ease}

  .brand-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
  .bitem{display:flex;flex-direction:column;gap:7px;max-width:210px}
  .bsub{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--gray);
    text-transform:uppercase;line-height:1.4;padding-left:2px}
  .blogo{background:var(--cream);border:1px solid var(--line);border-radius:10px;
    padding:16px 22px;display:flex;align-items:center;justify-content:center;min-width:150px;min-height:76px}
  .blogo img{max-height:44px;max-width:150px;width:auto;height:auto;display:block}
  .bchip{background:var(--cream);border:1px solid var(--line);color:var(--green);font-weight:800;
    font-size:15px;padding:13px 22px;border-radius:10px;min-height:76px;display:flex;align-items:center}

  .foto-nota{margin-top:30px;font-size:14px;line-height:1.7;color:var(--gray);max-width:74ch;
    border-left:3px solid var(--gold);padding-left:18px}
  .foto-nota strong{color:var(--green)}
  .fam-sib{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}


  /* ===== FIGURAS DE PRODUCTO (foto + círculo dorado por CSS) ===== */
  .cfig{position:relative;display:flex;align-items:center;justify-content:center;
    background:var(--cream);border-radius:10px;aspect-ratio:16/10;overflow:hidden;margin-bottom:18px}
  .cfig::before{content:"";position:absolute;right:19%;top:48%;transform:translateY(-50%);
    width:33%;aspect-ratio:1;background:var(--gold);border-radius:50%;opacity:.9}
  .cfig img{position:relative;z-index:1;max-width:86%;max-height:84%;width:auto;height:auto;
    object-fit:contain;display:block}
  .cfig .cico{position:relative;z-index:1;width:64px;height:64px;color:var(--green);opacity:.5;display:none}
  .cfig.sin-foto img{display:none}
  .cfig.sin-foto .cico{display:block}
  .cfig.sin-foto::before{display:none}
  .cfig.sin-foto{background:var(--paper)}

  .pcard .cfig{aspect-ratio:16/9;margin:16px 0 20px;border:1px solid var(--line)}
  .pcard .cfig::before{width:29%;right:16%}
  .catcard .cfig{margin:-4px 0 20px}

  /* marco de la imagen en el encabezado de familia */
  .fam-fig{aspect-ratio:16/11;border:1px solid var(--line-cream);
    box-shadow:0 18px 50px rgba(0,0,0,.20)}
  .fam-fig::before{width:36%;right:17%}
  .fam-fig img{max-width:88%;max-height:86%}
  @media (max-width:860px){.fam-fig{max-width:520px}}

  .form-field select{width:100%;font-family:inherit;font-size:15px;padding:13px 14px;
    border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--ink)}
  .wa-fallback{display:inline-block;margin-top:14px;color:#128C4A;font-weight:700;font-size:14px}

  /* --- tarjeta de categoría clicable --- */
  .catcard{cursor:pointer;display:flex;flex-direction:column}
  .catcard:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .catcard p{flex:1}
  .cgo{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:#128C4A;opacity:.85;transition:opacity .2s,transform .2s}
  .cgo svg{width:16px;height:10px}
  .catcard:hover .cgo{opacity:1;transform:translateX(4px)}

  /* --- modal de sucursal --- */
  .wa-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
  .wa-modal[hidden]{display:none}
  .wa-modal-bg{position:absolute;inset:0;background:rgba(12,30,18,.62);backdrop-filter:blur(3px)}
  .wa-modal-caja{position:relative;background:var(--cream);border-radius:16px;max-width:430px;width:100%;
    padding:34px 30px 26px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:waIn .2s ease}
  .wa-modal-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:28px;line-height:1;
    color:var(--gray);cursor:pointer;padding:4px 8px}
  .wa-modal-x:hover{color:var(--green)}
  .wa-modal-lbl{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .wa-modal-caja h3{font-size:23px;font-weight:800;color:var(--green);margin:0 0 10px;line-height:1.2}
  .wa-modal-caja > p{font-size:14px;line-height:1.6;color:var(--gray);margin:0 0 22px}
  .wa-op{display:block;background:#25D366;color:#fff;text-decoration:none;border-radius:12px;
    padding:15px 18px;margin-bottom:11px;transition:filter .18s}
  .wa-op:hover{filter:brightness(1.07)}
  .wa-op:focus-visible{outline:3px solid var(--green);outline-offset:2px}
  .wa-op strong{display:block;font-size:15px;font-weight:800;margin-bottom:3px}
  .wa-op span{display:block;font-size:11.5px;opacity:.92;line-height:1.4}