/* =========================================================
   LIPSA — Design tokens
   ========================================================= */
:root{
  --ink:#10241A;
  --primary:#0A512E;
  --primary-dark:#063D22;
  --accent:#87C505;
  --accent-dark:#6FA800;
  --paper:#F7F6F1;
  --surface:#FFFFFF;
  --line:#E3E1D8;
  --line-dark:rgba(255,255,255,0.14);
  --muted:#5B6B62;
  --muted-light:rgba(255,255,255,0.6);
  --text:#14201A;

  /* Extended palette — used on /nosotros for section-to-section rhythm.
     Additive only: none of these replace tokens the homepage relies on. */
  --green-mid:#1C6B3D;
  --beige:#EFE9DC;
  --gray-soft:#EDEEEA;
  --offwhite:#FAF9F5;

  --font-display:'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-in-out: cubic-bezier(0.77,0,0.175,1);

  --container:1280px;
  --gutter: clamp(24px, 5vw, 64px);

  --fs-hero: clamp(2.75rem, 1.6rem + 5vw, 6.75rem);
  --fs-h2: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--primary); color:#fff; padding:14px 22px; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:3px; }

#main, #inicio, #nosotros, #productos, #como-comprar, #contacto{ scroll-margin-top:110px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* =========================================================
   Utilities
   ========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:var(--fs-label); font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--primary);
}
.eyebrow::before{ content:''; width:8px; height:8px; background:var(--accent); border-radius:1px; flex-shrink:0; }

.section-head{
  display:flex; align-items:baseline; gap:16px;
  max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  padding-top:clamp(64px, 9vw, 112px);
  padding-bottom:24px;
}
.section-head__index{
  font-family:var(--font-display); font-weight:800; font-size:0.875rem;
  color:var(--line); border-top:1px solid var(--line); padding-top:8px; width:34px;
}
.section-head--dark .section-head__index{ color:rgba(255,255,255,0.25); border-color:var(--line-dark); }
.section-head__label{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-label);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--primary);
  border-top:1px solid var(--line); padding-top:8px; flex:1;
}
.section-head--dark .section-head__label{ color:var(--accent); border-color:var(--line-dark); }
.section-head__label--light{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-small);
  padding:16px 28px; border-radius:3px;
  transition:transform 160ms var(--ease-out), background 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.btn:active{ transform:scale(0.97); }
.btn--filled{ background:var(--primary); color:#fff; }
.btn--filled:hover{ background:var(--primary-dark); }
.btn--light{ background:#fff; color:var(--primary); }
.btn--light:hover{ background:#EDEEE6; }
.btn--text{ padding:16px 0; background:none; color:var(--primary); }
.btn--text span{ display:inline-block; transition:transform 200ms var(--ease-out); }
.btn--text:hover span{ transform:translateX(4px); }
.btn--pill{ border-radius:999px; }
.btn--sm{ padding:11px 22px; font-size:0.875rem; }

/* Scroll-reveal */
/* Reveal states are opt-in via .js on <html> (set synchronously in <head>) so
   content stays visible by default if JavaScript fails to load. */
.js [data-reveal], .js [data-reveal-onload]{ opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay:var(--d, 0ms); }
[data-reveal].is-visible, [data-reveal-onload].is-visible{ opacity:1; transform:translateY(0); }

.reveal-line{ display:block; overflow:hidden; }
.js .reveal-line__inner{ display:block; transform:translateY(110%); opacity:0; transition:transform 800ms var(--ease-out), opacity 700ms var(--ease-out); transition-delay:var(--d, 0ms); }
.reveal-line__inner.is-visible{ transform:translateY(0); opacity:1; }

/* =========================================================
   Navbar — floating island
   ========================================================= */
.nav-wrap{ position:sticky; top:0; z-index:100; display:flex; justify-content:center; padding-top:16px; pointer-events:none; }
.nav{
  pointer-events:auto;
  width:min(1180px, calc(100% - 32px));
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  background:rgba(247,246,241,0.75);
  border:1px solid rgba(20,32,26,0.08);
  border-radius:999px;
  padding:10px 12px 10px 22px;
  transition:box-shadow 300ms var(--ease-out), background 300ms var(--ease-out);
}
/* Blur only once scrolled — at rest there's nothing behind the nav worth blurring,
   and a sticky element recomputes backdrop-filter on every scroll frame otherwise. */
.nav-wrap.is-scrolled .nav{
  background:rgba(247,246,241,0.94); box-shadow:0 12px 32px -16px rgba(10,81,46,0.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav__logo{ display:flex; align-items:center; flex-shrink:0; position:relative; }
.nav__links{ display:flex; gap:clamp(14px,2.4vw,30px); flex:1; justify-content:center; }
.nav__links a{ font-size:0.9rem; font-weight:600; position:relative; padding:6px 0; }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--ease-out); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__cta{ flex-shrink:0; }
.nav__toggle{ display:none; }

.nav-mobile{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:0 32px; gap:40px;
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms;
}
.nav-mobile.is-open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.nav-mobile__links{ display:flex; flex-direction:column; gap:8px; }
.nav-mobile__links li{ overflow:hidden; }
.nav-mobile__links a{
  display:block; font-family:var(--font-display); font-size:2.25rem; font-weight:700; color:#fff; padding:6px 0;
  transform:translateY(120%); opacity:0; transition:transform 500ms var(--ease-out), opacity 400ms var(--ease-out);
  transition-delay:calc(var(--i) * 55ms);
}
.nav-mobile.is-open .nav-mobile__links a{ transform:translateY(0); opacity:1; }
.nav-mobile__cta{ align-self:flex-start; }

/* =========================================================
   Hero — full-bleed photo, home page only
   ========================================================= */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg-img{
  width:100%; height:100%; object-fit:cover; display:block; transform-origin:center;
  animation:heroZoom 22s var(--ease-in-out) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,36,26,0.82) 0%, rgba(16,36,26,0.56) 42%, rgba(16,36,26,0.24) 70%, rgba(16,36,26,0.1) 100%);
}

.hero__inner{
  position:relative; z-index:2; width:100%; max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter) clamp(72px,9vw,112px);
}
.eyebrow--light{ color:#fff; }
.hero__title{
  font-size:clamp(2.5rem, 1.85rem + 2.8vw, 4.375rem); line-height:1.06; margin-top:20px;
  max-width:660px; color:#fff;
}
.hero__title em{ font-style:italic; font-weight:600; color:var(--accent); }
.hero__desc{ margin-top:22px; max-width:440px; color:rgba(255,255,255,0.78); font-size:var(--fs-lg); line-height:1.5; }
.hero__ctas{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:36px; }

.hero__badge{
  margin-top:44px; display:inline-flex; align-items:center; gap:10px;
  background:rgba(247,246,241,0.1); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.22);
  padding:14px 20px; border-radius:3px; font-size:0.875rem; color:#fff;
}
.hero__badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.hero__badge strong{ color:var(--accent); font-family:var(--font-display); }

.hero__scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2;
  width:1px; height:34px; background:rgba(255,255,255,0.3); overflow:hidden;
}
.hero__scroll-cue span{ display:block; width:100%; height:14px; background:var(--accent); animation:scrollCue 2.4s ease-in-out infinite; }
@keyframes scrollCue{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(130%); } }

@media (min-width:769px){
  .hero__badge{ position:absolute; right:var(--gutter); bottom:clamp(72px,9vw,112px); margin-top:0; }
}
@media (max-width:768px){
  .hero__overlay{ background:linear-gradient(180deg, rgba(16,36,26,0.3) 0%, rgba(16,36,26,0.55) 38%, rgba(16,36,26,0.88) 100%); }
  .hero__scroll-cue{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .hero__bg-img{ animation:none; } }

/* Marquee */
.marquee{ background:var(--ink); overflow:hidden; padding:16px 0; }
.marquee__track{ display:flex; gap:48px; width:max-content; animation:marquee 32s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:700; font-size:0.9rem; letter-spacing:0.14em; color:var(--accent); white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* =========================================================
   Nosotros
   ========================================================= */
.about{ background:var(--surface); }
.about__grid{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter) clamp(64px,9vw,112px); display:grid; grid-template-columns:0.95fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:center; }
.about__statement{ font-size:var(--fs-h2); line-height:1.08; }
.about__desc{ margin-top:20px; max-width:420px; color:var(--muted); font-size:var(--fs-small); line-height:1.7; }
.about__cta{ margin-top:36px; letter-spacing:0.04em; }

.about__photo{ aspect-ratio:4/5; background:var(--ink); position:relative; overflow:hidden; }
.about__photo img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   Cómo comprar
   ========================================================= */
.how{ background:var(--surface); padding-bottom:clamp(64px,9vw,112px); }
.how__rail{
  --how-num-size:56px;
  max-width:var(--container); margin:clamp(48px,7vw,88px) auto 0; padding:0 var(--gutter);
  position:relative; display:flex; justify-content:space-between; gap:8px;
}
/* ::before (static track) and ::after (fill) share identical geometry, derived
   from --how-num-size, so the two can never drift out of alignment; the fill
   draws via transform:scaleX (compositor-only) instead of animating width. */
.how__rail::before, .how__rail::after{
  content:''; position:absolute; top:calc(var(--how-num-size) / 2 - 1px);
  left:calc(var(--gutter) + var(--how-num-size) / 2); right:calc(var(--gutter) + var(--how-num-size) / 2);
  height:1px;
}
.how__rail::before{ background:var(--line); z-index:0; }
.how__rail::after{
  background:var(--primary); z-index:1;
  transform:scaleX(0); transform-origin:left; transition:transform 1100ms var(--ease-in-out);
}
.how__rail.is-visible::after{ transform:scaleX(1); }
.how__step{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.how__step:nth-child(1){ --i:0; } .how__step:nth-child(2){ --i:1; } .how__step:nth-child(3){ --i:2; }
.how__step:nth-child(4){ --i:3; } .how__step:nth-child(5){ --i:4; }
.how__num{
  width:var(--how-num-size); height:var(--how-num-size); border-radius:50%; background:var(--surface); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--muted);
  transition:border-color 400ms var(--ease-out), color 400ms var(--ease-out), background 400ms var(--ease-out);
  transition-delay:calc(var(--i) * 180ms);
}
.how__rail.is-visible .how__num{ border-color:var(--primary); color:var(--primary); }
.how__rail.is-visible .how__step:last-child .how__num{ background:var(--primary); color:#fff; }
.how__label{ font-size:0.85rem; font-weight:600; max-width:120px; }

/* =========================================================
   Contacto
   ========================================================= */
.contact{ background:var(--primary); color:#fff; }
.contact__grid{ max-width:var(--container); margin:0 auto; padding:clamp(64px,9vw,120px) var(--gutter); display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,6vw,88px); }
.contact__intro h2{ font-size:var(--fs-h2); color:#fff; margin-top:14px; }
.contact__info{ margin-top:36px; display:flex; flex-direction:column; gap:20px; padding-top:24px; border-top:1px solid var(--line-dark); }
.contact__info li{ display:flex; align-items:center; gap:14px; font-size:0.95rem; }
.contact__info svg{ color:var(--accent); flex-shrink:0; }
.contact__info a{ position:relative; }
.contact__info a:hover{ text-decoration:underline; text-underline-offset:3px; }

.contact__form{ display:flex; flex-direction:column; gap:22px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.75rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-dark);
  padding:10px 2px; color:#fff; font-size:0.95rem;
  transition:border-color 220ms var(--ease-out);
}
.field select{ color:#fff; }
.field select option{ color:var(--text); }
.field textarea{ resize:vertical; min-height:64px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.35); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
.contact__form .btn{ align-self:flex-start; margin-top:6px; }
.contact__form .btn:disabled{ opacity:0.6; cursor:not-allowed; }
.contact__note{ font-size:0.85rem; color:var(--accent); min-height:1.2em; }
.contact__note.is-success{ color:var(--accent); }
.contact__note.is-error{ color:#FF9E8A; }

/* Honeypot — present in the DOM for simple bots to fill, invisible and
   unreachable (tabindex-free) for real visitors and screen readers. */
.field--honeypot{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--ink); color:#fff; }
.footer__top{ max-width:var(--container); margin:0 auto; padding:clamp(48px,7vw,80px) var(--gutter) 40px; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer__brand{ display:flex; flex-direction:column; gap:16px; max-width:300px; }
.footer__brand p{ font-size:0.875rem; color:var(--muted-light); line-height:1.6; }
.footer__nav{ display:flex; flex-direction:column; gap:12px; }
.footer__nav a{ position:relative; font-size:0.9rem; color:var(--muted-light); transition:color 200ms var(--ease-out); }
.footer__nav a:hover{ color:#fff; }
.footer__social{ display:flex; gap:20px; align-items:flex-start; }
.footer__social a{ position:relative; color:var(--muted-light); transition:color 200ms var(--ease-out); }
.footer__social a:hover{ color:var(--accent); }
.footer__bottom{
  max-width:var(--container); margin:0 auto; padding:22px var(--gutter);
  border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:0.8125rem; color:var(--muted-light);
}
.footer__legal{ display:flex; gap:24px; }
.footer__legal a{ position:relative; color:var(--muted-light); }
.footer__legal a:hover{ color:#fff; }

/* =========================================================
   Nosotros — institutional hero (with visual composition)
   ========================================================= */
.hero-sub{
  position:relative; overflow:hidden; background:var(--paper);
  padding:clamp(56px,9vw,120px) 0 clamp(64px,9vw,112px);
}
.hero-sub__pattern{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-sub__pattern::before, .hero-sub__pattern::after{
  content:''; position:absolute; border-radius:50%; filter:blur(60px);
}
.hero-sub__pattern::before{ width:520px; height:520px; top:-220px; right:-160px; background:radial-gradient(circle, rgba(135,197,5,0.16), transparent 70%); }
.hero-sub__pattern::after{ width:420px; height:420px; bottom:-200px; left:-140px; background:radial-gradient(circle, rgba(10,81,46,0.10), transparent 70%); }
.hero-sub__lines{ position:absolute; inset:0; z-index:0; opacity:0.5; }

.hero-sub__inner{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 0.95fr; gap:clamp(32px,5vw,64px); align-items:center;
}
.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:0.8125rem; color:var(--muted); margin-bottom:22px; }
.breadcrumb a{ position:relative; }
.breadcrumb a:hover{ color:var(--primary); }
.breadcrumb span{ color:var(--line); }
.hero-sub__title{ font-size:clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem); line-height:1.04; margin-top:16px; }
.hero-sub__title em{ font-style:italic; font-weight:600; color:var(--primary); }
.hero-sub__desc{ margin-top:26px; max-width:440px; color:var(--muted); font-size:var(--fs-lg); line-height:1.5; hyphens:auto; text-align:justify; text-align-last:left; }

.hero-sub__visual{ position:relative; }
.hero-sub__photo{ aspect-ratio:4/5; border-radius:6px; overflow:hidden; box-shadow:0 40px 70px -30px rgba(10,81,46,0.35); }
.hero-sub__photo img{ width:100%; height:100%; object-fit:cover; animation:heroSubZoom 22s var(--ease-in-out) forwards; }
@keyframes heroSubZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

.float-card{
  position:absolute; display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:14px 18px; box-shadow:0 20px 40px -18px rgba(10,81,46,0.3);
  font-size:0.85rem; font-weight:600; color:var(--text);
}
.float-card__num{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--primary); line-height:1; }
.float-card__icon{ width:34px; height:34px; border-radius:50%; background:var(--paper); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.float-card__icon svg{ width:17px; height:17px; }
.float-card--stat{ left:-28px; bottom:56px; flex-direction:column; align-items:flex-start; gap:2px; }
.float-card--cobertura{ right:-18px; top:36px; }
.float-card--alianzas{ right:-24px; bottom:-20px; }

/* =========================================================
   Nosotros — Sobre nosotros
   ========================================================= */
.sobre{ background:var(--beige); }
.sobre__grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter) clamp(64px,9vw,112px);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start;
}
.sobre__image{ aspect-ratio:4/5; border-radius:6px; overflow:hidden; position:sticky; top:130px; box-shadow:0 30px 60px -30px rgba(10,81,46,0.3); }
.sobre__image img{ width:100%; height:100%; object-fit:cover; }
.sobre__copy{ display:flex; flex-direction:column; gap:28px; }
.sobre__lead{ font-size:var(--fs-lg); line-height:1.5; font-weight:500; hyphens:auto; text-align:justify; text-align-last:left; }

.pull-quote{
  position:relative; background:linear-gradient(135deg, rgba(10,81,46,0.07), rgba(135,197,5,0.09));
  border-left:4px solid var(--primary); border-radius:4px; padding:36px 32px 32px 44px; margin:0;
}
.pull-quote__mark{
  position:absolute; top:2px; left:14px; font-family:var(--font-display); font-weight:800; font-size:3.5rem;
  color:var(--accent); opacity:0.5; line-height:1; pointer-events:none;
}
.pull-quote p{ position:relative; font-family:var(--font-display); font-weight:600; font-style:italic; font-size:var(--fs-h3); line-height:1.35; color:var(--primary); hyphens:auto; text-align:justify; text-align-last:left; }
.pull-quote strong{ color:var(--ink); font-style:normal; }
.sobre__desc{ color:var(--muted); font-size:var(--fs-small); line-height:1.7; max-width:460px; hyphens:auto; text-align:justify; text-align-last:left; }

/* =========================================================
   Nosotros — Nuestra trayectoria (timeline)
   ========================================================= */
.trayectoria{ background:var(--offwhite); padding-bottom:clamp(64px,9vw,112px); }
.trayectoria__title{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); font-size:var(--fs-h2); line-height:1.15; }
.timeline{
  max-width:var(--container); margin:clamp(48px,7vw,80px) auto 0; padding:0 var(--gutter);
  display:flex; justify-content:space-between; position:relative; gap:8px;
}
.timeline::before{
  content:''; position:absolute; top:11px; left:calc(var(--gutter) + 11px); right:calc(var(--gutter) + 11px);
  height:1px; background:var(--line);
}
.timeline::after{
  content:''; position:absolute; top:11px; left:calc(var(--gutter) + 11px); height:1px; background:var(--primary);
  width:0; transition:width 1400ms var(--ease-in-out);
}
.timeline.is-visible::after{ width:calc(100% - (var(--gutter) * 2) - 22px); }
.timeline__item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; position:relative; }
.timeline__dot{ width:22px; height:22px; border-radius:50%; background:var(--offwhite); border:2px solid var(--line); z-index:1; transition:border-color 400ms var(--ease-out), background 400ms var(--ease-out); }
.timeline.is-visible .timeline__item:nth-child(1) .timeline__dot{ border-color:var(--primary); background:var(--primary); }
.timeline.is-visible .timeline__item:nth-child(2) .timeline__dot{ border-color:var(--primary); background:var(--primary); transition-delay:350ms; }
.timeline.is-visible .timeline__item:nth-child(3) .timeline__dot{ border-color:var(--primary); background:var(--primary); transition-delay:700ms; }
.timeline.is-visible .timeline__item:nth-child(4) .timeline__dot{ border-color:var(--primary); background:var(--primary); transition-delay:1050ms; }
.timeline__year{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--primary); }
.timeline__label{ font-size:0.875rem; color:var(--muted); max-width:150px; }

/* =========================================================
   Nosotros — section headers (Lo que hacemos / Industrias /
   Portafolio / Filosofía)
   ========================================================= */
.experiencia{ background:linear-gradient(180deg, var(--beige), var(--paper)); padding-bottom:clamp(64px,9vw,112px); }
.experiencia__statement{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); font-size:var(--fs-h2); line-height:1.14; }
.experiencia__intro{
  max-width:720px; margin:16px var(--gutter) 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  color:var(--muted); font-size:var(--fs-body); line-height:1.6; hyphens:auto; text-align:justify; text-align-last:left;
}

.industrias{ background:var(--gray-soft); padding-bottom:clamp(64px,9vw,112px); }
.industrias__title{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); font-size:var(--fs-h2); line-height:1.18; }

.portafolio{ background:var(--primary); padding-bottom:clamp(72px,10vw,128px); color:#fff; }
.portafolio .section-head__index{ color:rgba(255,255,255,0.3); border-color:var(--line-dark); }
.portafolio .section-head__label{ color:var(--accent); border-color:var(--line-dark); }
.portafolio__title{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); font-size:var(--fs-h2); line-height:1.15; color:#fff; }

.filosofia{ background:var(--ink); color:#fff; padding-bottom:clamp(64px,9vw,112px); position:relative; overflow:hidden; }
.filosofia::before{
  content:''; position:absolute; top:-140px; right:-100px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(135,197,5,0.09), transparent 70%); pointer-events:none;
}
.filosofia__title{ position:relative; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); font-size:var(--fs-h2); color:#fff; line-height:1.15; }

/* =========================================================
   Photo Card — Lo que hacemos / Industrias (image-led, with a
   small premium icon badge and a decorative number)
   ========================================================= */
.photo-grid{ max-width:var(--container); margin:44px auto 0; padding:0 var(--gutter); display:grid; gap:24px; }
.photo-grid--4{ grid-template-columns:repeat(4,1fr); }
.photo-grid--4-wide{ grid-template-columns:repeat(2,1fr); }

.photo-card{
  position:relative; overflow:hidden; border-radius:6px; aspect-ratio:3/4;
  box-shadow:0 24px 44px -24px rgba(10,81,46,0.28);
  transition:transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.photo-card:hover{ transform:translateY(-8px); box-shadow:0 34px 54px -20px rgba(10,81,46,0.38); }
.photo-card__media{ position:absolute; inset:0; }
.photo-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out); }
.photo-card:hover .photo-card__media img{ transform:scale(1.07); }
.photo-card__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,36,26,0.05) 30%, rgba(16,36,26,0.92) 100%); }
.photo-card__num{ position:absolute; top:20px; left:20px; font-family:var(--font-display); font-weight:800; font-size:0.8rem; color:rgba(255,255,255,0.65); letter-spacing:0.04em; z-index:2; }
.photo-card__icon{
  position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(247,246,241,0.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.25); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.photo-card__icon svg{ width:18px; height:18px; }
.photo-card__content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; color:#fff; }
.photo-card__content h3{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h3); }
.photo-card__content p{ margin-top:8px; color:rgba(255,255,255,0.72); font-size:0.85rem; line-height:1.55; hyphens:auto; text-align:justify; text-align-last:left; }

/* =========================================================
   Portfolio Card — premium, larger, distinct component (green section)
   ========================================================= */
.portfolio-grid{
  max-width:var(--container); margin:44px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(380px,auto);
  gap:2px; background:rgba(255,255,255,0.14);
}
.portfolio-card{ background:var(--primary-dark); display:grid; grid-template-columns:1.1fr 1fr; min-height:260px; }
.portfolio-card__media{ position:relative; overflow:hidden; }
.portfolio-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out); }
.portfolio-card:hover .portfolio-card__media img{ transform:scale(1.06); }
.portfolio-card__body{ padding:32px 28px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.portfolio-card__tag{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:rgba(135,197,5,0.16); color:var(--accent); font-family:var(--font-display);
  font-weight:700; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.portfolio-card__body h3{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h3); color:#fff; }
.portfolio-card__body p{ color:rgba(255,255,255,0.68); font-size:0.85rem; line-height:1.6; hyphens:auto; text-align:justify; text-align-last:left; }

/* =========================================================
   Pillar Card — ¿Por qué elegirnos? (dark, with ghost number)
   ========================================================= */
.pillar-grid{ position:relative; max-width:var(--container); margin:clamp(44px,6vw,72px) auto 0; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); }
.pillar-card{ position:relative; background:var(--ink); padding:44px 32px 36px; overflow:hidden; }
.pillar-card__ghost{ position:absolute; top:-18px; right:6px; font-family:var(--font-display); font-weight:900; font-size:6rem; color:rgba(255,255,255,0.05); line-height:1; z-index:0; }
.pillar-card__icon{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.07); color:var(--accent); display:flex; align-items:center; justify-content:center;
  transition:background 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.pillar-card:hover .pillar-card__icon{ background:var(--accent); color:var(--ink); transform:translateY(-3px); }
.pillar-card__icon svg{ width:24px; height:24px; }
.pillar-card h3{ position:relative; z-index:1; margin-top:22px; font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:#fff; }
.pillar-card p{ position:relative; z-index:1; margin-top:12px; color:var(--muted-light); font-size:var(--fs-small); line-height:1.65; hyphens:auto; text-align:justify; text-align-last:left; }

/* =========================================================
   Page hero — shared header for Productos / Cómo comprar / Contacto
   ========================================================= */
.page-hero{ max-width:var(--container); margin:0 auto; padding:clamp(56px,9vw,120px) var(--gutter) clamp(48px,7vw,72px); }
.page-hero__title{ font-size:var(--fs-hero); line-height:0.98; max-width:820px; margin-top:16px; }
.page-hero__title em{ font-style:italic; font-weight:600; color:var(--primary); }
.page-hero__desc{ margin-top:24px; max-width:520px; color:var(--muted); font-size:var(--fs-lg); line-height:1.5; }
.detail-crumb{ max-width:var(--container); margin:0 auto; padding:clamp(28px,4vw,40px) var(--gutter) 0; }
.detail-crumb .breadcrumb{ margin-bottom:0; }

/* =========================================================
   CTA band — closing section (Home and sub-pages)
   ========================================================= */
.cta-band{ background:var(--primary); padding:clamp(56px,8vw,96px) var(--gutter); text-align:center; }
.cta-band__inner{ max-width:640px; margin:0 auto; }
.cta-band h2{ color:#fff; font-size:var(--fs-h2); }
.cta-band p{ color:rgba(255,255,255,0.75); margin-top:16px; font-size:var(--fs-body); hyphens:auto; text-align:justify; text-align-last:center; }
.cta-band__actions{ display:flex; justify-content:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
.btn--outline-light{ border:1.5px solid rgba(255,255,255,0.45); color:#fff; }
.btn--outline-light:hover{ border-color:#fff; }

/* =========================================================
   Catálogo — Category cards (hub page)
   ========================================================= */
.category-grid{
  max-width:var(--container); margin:clamp(40px,6vw,72px) auto 0; padding:0 var(--gutter) clamp(64px,9vw,112px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.category-card{
  position:relative; display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(10,81,46,0.35);
  transition:transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.category-card:hover{ transform:translateY(-6px); box-shadow:0 40px 80px -28px rgba(10,81,46,0.45); }
.category-card:active{ transform:translateY(-2px) scale(0.99); }
.category-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease-out); }
.category-card:hover .category-card__img{ transform:scale(1.06); }
.category-card__tint{ position:absolute; inset:0; mix-blend-mode:multiply; opacity:0.6; transition:opacity 400ms var(--ease-out); }
.category-card:hover .category-card__tint{ opacity:0.45; }
.category-card--energeticos .category-card__tint{ background:linear-gradient(155deg, var(--primary), var(--primary-dark) 75%); }
.category-card--proteinas .category-card__tint{ background:linear-gradient(155deg, var(--green-mid), var(--ink) 80%); }
.category-card--aditivos .category-card__tint{ background:linear-gradient(155deg, var(--accent-dark), var(--primary-dark) 80%); }
.category-card--bioseguridad .category-card__tint{ background:linear-gradient(155deg, var(--ink), var(--primary-dark) 70%); }
.category-card__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,20,15,0.8) 0%, rgba(10,20,15,0.1) 55%); }
.category-card__count{
  position:absolute; top:28px; left:28px; z-index:2;
  font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.22);
}
.category-card__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:32px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.category-card__name{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem); color:#fff; letter-spacing:-0.01em; }
.category-card__arrow{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background 300ms var(--ease-out), color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.category-card:hover .category-card__arrow{ background:var(--accent); color:var(--ink); transform:rotate(45deg); }
.category-card__arrow svg{ width:20px; height:20px; }

/* =========================================================
   Catálogo — Category page hero
   ========================================================= */
.cat-hero{ position:relative; min-height:50vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.cat-hero__bg{ position:absolute; inset:0; z-index:0; }
.cat-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-hero__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,20,15,0.92) 0%, rgba(10,20,15,0.5) 52%, rgba(10,20,15,0.22) 100%); }
.cat-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--container); margin:0 auto; padding:clamp(96px,12vw,148px) var(--gutter) clamp(48px,7vw,72px); }
.cat-hero .breadcrumb{ color:rgba(255,255,255,0.7); }
.cat-hero .breadcrumb a:hover{ color:#fff; }
.cat-hero .breadcrumb span{ color:rgba(255,255,255,0.35); }
.cat-hero__title{ font-size:var(--fs-hero); line-height:0.98; color:#fff; margin-top:8px; }
.cat-hero__desc{ margin-top:20px; max-width:580px; color:rgba(255,255,255,0.82); font-size:var(--fs-lg); line-height:1.5; }

.back-link{
  position:absolute; top:clamp(20px,3.5vw,36px); left:var(--gutter); z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:0.875rem; color:#fff; text-decoration:none;
  background:rgba(255,255,255,0.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.25); padding:11px 18px 11px 14px; border-radius:999px;
  transition:background 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.back-link:hover{ background:rgba(255,255,255,0.24); }
.back-link:active{ transform:scale(0.97); }
.back-link svg{ width:16px; height:16px; transition:transform 220ms var(--ease-out); }
.back-link:hover svg{ transform:translateX(-3px); }

/* =========================================================
   Catálogo — Filter bar (subcategorías)
   ========================================================= */
.filter-bar{
  max-width:var(--container); margin:0 auto; padding:clamp(36px,5.5vw,56px) var(--gutter) 0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.filter-btn{
  font-family:var(--font-display); font-weight:700; font-size:0.9375rem;
  padding:14px 26px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer;
  transition:background 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.filter-btn:hover{ border-color:var(--primary); color:var(--primary); }
.filter-btn:active{ transform:scale(0.97); }
.filter-btn.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* =========================================================
   Catálogo — Product grid & card
   ========================================================= */
.product-grid{
  max-width:var(--container); margin:0 auto; padding:clamp(32px,5vw,48px) var(--gutter) clamp(72px,9vw,120px);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:28px 24px;
  scroll-margin-top:110px;
}
.product-card{
  display:block; text-decoration:none; color:inherit;
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.product-card.is-filtering-out{ opacity:0; transform:translateY(10px); pointer-events:none; }
/* [hidden] alone loses to the class's own display:block (equal specificity,
   author rule wins the UA default) — this pairing wins so filtered-out cards
   are truly removed from grid flow instead of leaving an invisible gap. */
.product-card[hidden]{ display:none; }
.product-card__media{
  position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--gray-soft);
  box-shadow:0 18px 40px -22px rgba(10,81,46,0.25);
}
.product-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease-out); }
.product-card:hover .product-card__media img{ transform:scale(1.07); }
.product-card__name{ margin-top:16px; font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.3; color:var(--text); transition:color 200ms var(--ease-out); }
.product-card:hover .product-card__name{ color:var(--primary); }
.product-card__unit{ margin-top:4px; font-size:0.8125rem; color:var(--muted); }

/* =========================================================
   Catálogo — Ficha individual de producto
   ========================================================= */
.product-detail{
  max-width:var(--container); margin:0 auto; padding:clamp(24px,4vw,40px) var(--gutter) clamp(72px,9vw,120px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start;
}
.product-detail__media{ position:sticky; top:130px; }
.product-detail__frame{
  position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--gray-soft);
  box-shadow:0 30px 60px -30px rgba(10,81,46,0.3); cursor:zoom-in; border:0; padding:0; width:100%; display:block;
}
.product-detail__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease-out); }
.product-detail__frame:hover img{ transform:scale(1.04); }
.product-detail__zoom{
  position:absolute; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  color:var(--ink); pointer-events:none;
}
.product-detail__zoom svg{ width:18px; height:18px; }

.product-detail__info{ padding-top:8px; }
.product-detail__badges{ display:flex; flex-wrap:wrap; gap:8px; }
.product-detail__badge{
  font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--primary);
}
.product-detail__name{ margin-top:20px; font-size:clamp(1.75rem,1.4rem + 1.4vw,2.75rem); line-height:1.1; }
.product-detail__unit{ margin-top:10px; font-size:0.9375rem; color:var(--muted); }
.product-detail__divider{ height:1px; background:var(--line); margin:32px 0; }
.product-detail__section-label{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:0.1em; text-transform:uppercase; color:var(--primary); }
.product-detail__desc{ margin-top:14px; color:var(--text); font-size:var(--fs-body); line-height:1.7; hyphens:auto; text-align:justify; text-align-last:left; }
.product-detail__benefits{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.product-detail__benefit{ display:flex; align-items:flex-start; gap:12px; font-size:var(--fs-body); line-height:1.55; color:var(--text); }
.product-detail__benefit svg{ flex-shrink:0; width:20px; height:20px; color:var(--accent-dark); margin-top:2px; }
.product-detail__actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

/* Lightbox — imagen ampliada con zoom suave */
.lightbox{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,15,0.95); opacity:0; visibility:hidden;
  transition:opacity 280ms var(--ease-out), visibility 0s linear 280ms;
  padding:40px;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity 280ms var(--ease-out), visibility 0s; }
.lightbox__img{ max-width:min(1100px,90vw); max-height:86vh; object-fit:contain; border-radius:4px; transform:scale(0.96); transition:transform 320ms var(--ease-out); }
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:28px; right:28px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 200ms var(--ease-out);
}
.lightbox__close:hover{ background:rgba(255,255,255,0.2); }
.lightbox__close:active{ transform:scale(0.94); }
.lightbox__close svg{ width:20px; height:20px; }

/* =========================================================
   Responsive — 1024
   ========================================================= */
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; }
  .about__photo{ aspect-ratio:16/9; order:-1; }
  .contact__grid{ grid-template-columns:1fr; }
  .icon-grid--4, .icon-grid--3{ grid-template-columns:repeat(2,1fr); }

  .hero-sub__inner{ grid-template-columns:1fr; }
  .hero-sub__visual{ order:-1; max-width:480px; margin:0 auto 24px; }
  .float-card{ display:none; }

  .sobre__grid{ grid-template-columns:1fr; }
  .sobre__image{ position:static; aspect-ratio:16/9; }

  .photo-grid--4{ grid-template-columns:repeat(2,1fr); }
  .portfolio-card{ grid-template-columns:1fr; }
  .portfolio-card__media{ aspect-ratio:16/9; }
  .pillar-grid{ grid-template-columns:1fr; }

  .product-detail{ grid-template-columns:1fr; }
  .product-detail__media{ position:static; max-width:520px; }
}

/* =========================================================
   Responsive — 768 (tablet / mobile nav takeover)
   ========================================================= */
@media (max-width:768px){
  /* Hiding the inline nav in favor of the hamburger overlay is opt-in via .js —
     without JS the toggle button does nothing, so the links must stay reachable
     and wrap inside the pill instead of disappearing. */
  .js .nav__links, .js .nav__cta{ display:none; }
  :not(.js) .nav{ flex-wrap:wrap; border-radius:24px; }
  .nav-wrap{ padding-top:14px; }
  .nav{ padding:8px 8px 8px 18px; }
  .js .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; align-items:center; flex-shrink:0;
  }
  .nav__toggle span{ width:20px; height:2px; background:var(--text); transition:transform 300ms var(--ease-out), opacity 200ms var(--ease-out); }
  .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

  .field-row{ grid-template-columns:1fr; }

  .how__rail{ flex-direction:column; align-items:flex-start; gap:28px; }
  .how__rail::before, .how__rail::after{
    top:0; bottom:28px; left:calc(var(--how-num-size) / 2 - 1px); right:auto; width:1px; height:auto;
  }
  .how__rail::after{ transform:scaleY(0); transform-origin:top; }
  .how__rail.is-visible::after{ transform:scaleY(1); }
  .how__step{ flex-direction:row; text-align:left; width:100%; }
  .how__label{ max-width:none; }

  .icon-grid--4, .icon-grid--3, .icon-grid--2{ grid-template-columns:1fr; }

  .photo-grid--4{ grid-template-columns:1fr; }
  .photo-card{ aspect-ratio:16/10; }
  .portfolio-grid{ grid-template-columns:1fr; }

  .timeline{ flex-direction:column; align-items:flex-start; gap:32px; }
  .timeline::before, .timeline::after{
    top:0; bottom:32px; left:11px; right:auto; width:1px; height:auto;
  }
  .timeline::after{ width:1px; height:0; }
  .timeline.is-visible::after{ height:calc(100% - 32px); width:1px; }
  .timeline__item{ flex-direction:row; text-align:left; width:100%; }
  .timeline__label{ max-width:none; }

  .category-grid{ grid-template-columns:1fr; }
  .category-card{ aspect-ratio:16/11; }
  .filter-bar{ gap:8px; }
  .filter-btn{ padding:12px 20px; font-size:0.875rem; }
  .back-link{ font-size:0.8125rem; padding:9px 16px 9px 12px; }

  /* Touch-target expansion — invisible hit-area padding via ::before, so the
     visible mark (dot, icon, logo) keeps its exact designed size and spacing;
     only the tappable zone around it grows to meet the ~44px guideline. */
  .nav__logo::before,
  .footer__social a::before,
  .footer__legal a::before,
  .breadcrumb a::before{
    content:''; position:absolute; inset:-14px;
  }
  /* Rows are 20px apart — a smaller inset keeps each link's hit-zone from
     reaching into the next row. */
  .contact__info a::before{ content:''; position:absolute; inset:-9px; }
  /* Footer nav links stack with only 12px between them by default — open
     that up a bit so the enlarged hit-zones don't touch. */
  .footer__nav{ gap:18px; }
  .footer__nav a::before{ content:''; position:absolute; inset:-8px; }
}

/* =========================================================
   Responsive — 640 / true phones only (kept below iPad's 768px
   portrait width, so tablets still get the image-first hero)
   ========================================================= */
@media (max-width:640px){
  /* On phones the reordered photo (see 1024px block) lands above the H1 as
     the very first thing on the page — reads oddly as a first impression on
     a narrow screen. iPad and desktop keep the image; phones go title-first. */
  .hero-sub__visual{ display:none; }
}

/* =========================================================
   Responsive — 430 / small phones
   ========================================================= */
@media (max-width:430px){
  :root{ --gutter:20px; }
  .hero__ctas{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer__top{ flex-direction:column; }
  .footer__social{ order:-1; }
}