/* ============================================================
   BERYC — Tortillas de harina
   Rompemos el molde, no la tortilla.
   ============================================================ */

:root{
  /* Palette — comal / tostado */
  --masa:#F2E7D3;        /* warm cream paper */
  --masa-deep:#E9D9BC;
  --paper-card:#FBF4E6;
  --ink:#1B1714;         /* warm near-black */
  --ink-soft:#5A4F45;
  --char:#211B15;        /* dark section bg */
  --char-2:#2C241C;
  --accent:#C75B1E;      /* comal burnt orange (tweakable) */
  --accent-2:#E0A33A;    /* golden (spots / highlight) */
  --on-accent:#FBF4E6;
  --line:rgba(27,23,20,.16);
  --line-soft:rgba(27,23,20,.09);
  --spot-opacity:1;      /* tweakable: pintas intensity */

  /* Fonts */
  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'Archivo', sans-serif;
  --font-mono:'Space Mono', monospace;

  --maxw:1320px;
  --pad:clamp(20px,5vw,84px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--masa);
  color:var(--ink);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--on-accent)}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type scale ---------- */
.kicker{
  font-family:var(--font-mono);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block}
.display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:.96}
p{text-wrap:pretty}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s ease, padding .4s ease, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in srgb, var(--masa) 86%, transparent);
  backdrop-filter:blur(14px);
  border-color:var(--line-soft);
  padding-block:12px;
}
.brand{
  font-family:var(--font-display);font-weight:800;font-size:26px;
  letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:center;
}
.brand img{height:clamp(40px,4.6vw,52px);width:auto;display:block;border-radius:5px;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.brand:hover img{transform:scale(1.05) rotate(-2deg)}
.nav.solid .brand img{height:clamp(36px,4.2vw,46px)}
.brand .dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav-links a{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);opacity:.78;transition:opacity .2s;
}
.nav-links a:hover{opacity:1}
.nav-links a.hide-sm{}
.btn{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;border:none;
  background:var(--ink);color:var(--masa);
  padding:11px 18px;border-radius:100px;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.4), background .25s;
}
.btn:hover{transform:translateY(-2px);background:var(--accent);color:var(--on-accent)}
.btn.accent{background:var(--accent);color:var(--on-accent)}
.btn.accent:hover{background:var(--ink);color:var(--masa)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--masa);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translate(3px,-3px)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:96px;padding-bottom:30px;position:relative;overflow:hidden;
}
.hero-grid{
  max-width:var(--maxw);margin:0 auto;width:100%;padding-inline:var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
}
.hero h1{
  font-size:clamp(54px,9.2vw,148px);
  line-height:.9;letter-spacing:-.035em;
}
.hero h1 .em{color:var(--accent);font-style:italic;font-weight:800}
.hero h1 .stroke{
  -webkit-text-stroke:2px var(--ink);color:transparent;
}
.hero-sub{
  margin-top:30px;max-width:46ch;font-size:clamp(16px,1.5vw,20px);
  color:var(--ink-soft);line-height:1.5;
}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-kicker{margin-bottom:26px}

.hero-art{position:relative;display:grid;place-items:center;min-height:min(60vh,560px)}
.tortilla-spin{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-badge{
  position:absolute;top:6%;right:2%;
  width:clamp(96px,12vw,138px);height:clamp(96px,12vw,138px);border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;text-align:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
  transform:rotate(-12deg);box-shadow:0 18px 40px -16px rgba(199,91,30,.6);
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{50%{transform:rotate(-12deg) translateY(-10px)}}

/* ---------- Tortilla disc (CSS art) ---------- */
.tortilla{
  position:relative;border-radius:50%;aspect-ratio:1;
  background:
    radial-gradient(circle at 38% 34%, #FCF4E2 0%, #F3E4C4 42%, #E7CE9D 72%, #D8B87C 88%, #C99C5C 100%);
  box-shadow:
    inset 0 0 60px rgba(150,100,40,.18),
    inset 0 -18px 50px rgba(120,70,20,.16),
    0 50px 90px -40px rgba(60,40,15,.5);
  overflow:hidden;
}
.tortilla::after{ /* charred rim */
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 3px rgba(150,95,35,.25), inset 0 0 24px rgba(120,70,25,.35);
  -webkit-mask:radial-gradient(circle, transparent 86%, #000 92%);
          mask:radial-gradient(circle, transparent 86%, #000 92%);
}
.spot{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(150,82,28,calc(.85*var(--spot-opacity))), rgba(110,55,15,calc(.55*var(--spot-opacity))) 70%, transparent 100%);
  filter:blur(.4px);pointer-events:none;
}

/* hero size of tortilla */
.hero .tortilla{width:min(52vw,540px)}

/* ---------- Hero video disc ---------- */
.tortilla-video{
  position:relative;border-radius:50%;aspect-ratio:1;
  width:min(52vw,540px);overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 38% 34%, #FCF4E2 0%, #E7CE9D 70%, #C99C5C 100%);
  box-shadow:
    inset 0 0 60px rgba(150,100,40,.22),
    0 50px 90px -40px rgba(60,40,15,.5);
}
button.tortilla-video{
  border:none;padding:0;cursor:pointer;display:block;font:inherit;color:inherit;
  -webkit-tap-highlight-color:transparent;transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
button.tortilla-video:hover{transform:scale(1.012)}
button.tortilla-video:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
button.tortilla-video:active{transform:scale(.99)}

/* sound pill */
.sound-pill{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 13px;border-radius:100px;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  color:var(--masa);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;white-space:nowrap;
}
button.tortilla-video:hover .sound-pill{transform:translateX(-50%) translateY(-2px)}
.sound-ico{
  width:16px;height:16px;flex-shrink:0;position:relative;display:inline-block;
  background:currentColor;
  -webkit-mask:var(--ico-muted) center/contain no-repeat;
          mask:var(--ico-muted) center/contain no-repeat;
}
:root{
  --ico-muted:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
  --ico-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
}
button.tortilla-video.is-on .sound-ico{
  -webkit-mask-image:var(--ico-on);mask-image:var(--ico-on);
}
button.tortilla-video.is-on .sound-pill{
  background:color-mix(in srgb, var(--accent) 90%, black 4%);color:var(--on-accent);
}
.tortilla-video video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.tortilla-rim{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  box-shadow:
    inset 0 0 0 3px rgba(150,95,35,.45),
    inset 0 0 28px rgba(120,70,25,.5),
    inset 0 -16px 46px rgba(90,55,18,.4);
  -webkit-mask:radial-gradient(circle, transparent 80%, #000 90%);
          mask:radial-gradient(circle, transparent 80%, #000 90%);
}

/* ---------- Marquee ---------- */
.marquee{
  border-block:1.5px solid var(--ink);
  background:var(--accent);color:var(--on-accent);
  overflow:hidden;white-space:nowrap;display:flex;
}
.marquee.invert{background:var(--char);color:var(--masa)}
.marquee-track{
  display:inline-flex;align-items:center;gap:0;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;
  padding-block:14px;animation:scroll-x 26s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{padding-inline:.5em;display:inline-flex;align-items:center;gap:.5em}
.marquee-track .star{font-size:.6em;opacity:.8}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{background:var(--char);color:var(--masa);padding-block:clamp(80px,12vw,160px)}
.manifesto .big{
  font-size:clamp(34px,6vw,90px);line-height:.98;max-width:18ch;letter-spacing:-.03em;
}
.manifesto .big .hl{color:var(--accent)}
.manifesto .meta{
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-top:60px;padding-top:30px;border-top:1px solid rgba(242,231,211,.2);
}
.manifesto .meta p{font-family:var(--font-mono);font-size:13px;color:rgba(242,231,211,.7);max-width:34ch;letter-spacing:.02em}

/* ============================================================
   PRODUCTS
   ============================================================ */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{font-size:clamp(38px,6vw,86px);line-height:.92}
.section-head .lead{max-width:40ch;color:var(--ink-soft);font-size:clamp(15px,1.4vw,18px)}
.products{padding-block:clamp(80px,11vw,150px)}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.prod{
  position:relative;background:var(--paper-card);border:1.5px solid var(--ink);
  border-radius:26px;padding:clamp(26px,3vw,40px);overflow:hidden;
  display:flex;flex-direction:column;gap:18px;min-height:340px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, background .35s;
}
.prod:hover{transform:translateY(-6px);box-shadow:0 36px 60px -34px rgba(60,40,15,.55)}
.prod .pn{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--accent)}
.prod .ptort{width:clamp(120px,15vw,176px);height:auto;aspect-ratio:1;object-fit:contain;position:absolute;top:clamp(16px,2.4vw,30px);right:clamp(14px,2vw,26px);transition:transform .5s cubic-bezier(.2,.8,.3,1);mix-blend-mode:multiply}
.prod:hover .ptort{transform:translateY(-4px) rotate(-4deg) scale(1.06)}
.prod h3{font-size:clamp(28px,3.4vw,46px);max-width:9ch;margin-top:auto}
.prod p{color:var(--ink-soft);font-size:15px;max-width:34ch}
.prod .pfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;
  padding-top:16px;border-top:1px solid var(--line)}
.prod .pieces{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.prod .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--masa);padding:5px 11px;border-radius:100px}
.prod.feat{grid-column:span 2;flex-direction:row;align-items:center;gap:40px;min-height:300px}
.prod.feat .ptort{position:relative;top:auto;right:auto;width:clamp(170px,21vw,272px);height:auto;aspect-ratio:1;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.prod.feat .pbody{flex:1}
.prod.feat:hover .ptort{transform:translateY(-4px) rotate(-3deg) scale(1.04)}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--char);color:var(--masa);padding-block:clamp(80px,11vw,150px);overflow:hidden}
.process .section-head h2{color:var(--masa)}
.process .section-head .lead{color:rgba(242,231,211,.65)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);counter-reset:s}
.step{position:relative;padding-top:26px;border-top:2px solid var(--accent)}
.step .sn{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.1em}
.step h3{font-size:clamp(22px,2.4vw,32px);margin:14px 0 12px;color:var(--masa);line-height:1}
.step p{color:rgba(242,231,211,.72);font-size:14.5px}

/* ============================================================
   GALLERY / lifestyle
   ============================================================ */
.gallery{padding-block:clamp(70px,9vw,120px)}
.gal-grid{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(2,1fr);gap:16px;
  height:clamp(420px,52vw,640px)}
.gal-grid img{width:100%;height:100%;object-fit:cover;border:1.5px solid var(--ink);border-radius:22px;display:block}
.gal-grid .g1{grid-row:span 2}
.gal-cap{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--ink-soft);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em}

/* ============================================================
   WHY / features
   ============================================================ */
.why{padding-block:clamp(80px,11vw,150px)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--paper-card)}
.feat-cell{padding:clamp(26px,3vw,40px);border-right:1.5px solid var(--ink)}
.feat-cell:last-child{border-right:none}
.feat-cell .fi{font-family:var(--font-display);font-weight:800;font-size:40px;color:var(--accent);line-height:1}
.feat-cell h3{font-size:clamp(20px,2vw,26px);margin:18px 0 10px}
.feat-cell p{color:var(--ink-soft);font-size:14.5px}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(30px,4vw,52px)}
.stat{border-top:2px solid var(--ink);padding-top:18px}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,7vw,92px);line-height:.85;letter-spacing:-.03em}
.stat .num .u{color:var(--accent);font-size:.5em;vertical-align:super}
.stat .lab{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px}

/* ============================================================
   STORES
   ============================================================ */
.stores{background:var(--masa);padding-block:clamp(70px,9vw,120px);border-top:1.5px solid var(--line-soft)}
.store-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.store-chip{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,32px);
  border:1.5px solid var(--ink);border-radius:100px;padding:12px 28px;letter-spacing:-.02em;
  background:var(--paper-card);transition:background .25s,color .25s,transform .25s;
  white-space:nowrap;
}
.store-chip:hover{background:var(--ink);color:var(--masa);transform:translateY(-3px)}
.store-note{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);letter-spacing:.03em;flex-basis:100%;margin-top:8px}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--accent);color:var(--on-accent);padding-block:clamp(80px,12vw,170px);overflow:hidden;position:relative}
.cta h2{font-size:clamp(42px,8vw,128px);line-height:.9;max-width:14ch;letter-spacing:-.03em}
.cta p{margin-top:24px;max-width:48ch;font-size:clamp(16px,1.6vw,20px);color:rgba(251,244,230,.88)}
.cta .btn.ghost{color:var(--on-accent);box-shadow:inset 0 0 0 1.5px var(--on-accent)}
.cta .btn.ghost:hover{background:var(--on-accent);color:var(--accent)}
.cta .btn.solid{background:var(--ink);color:var(--masa)}
.cta .btn.solid:hover{background:var(--on-accent);color:var(--accent)}
.cta-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.cta .ghost-tort{position:absolute;right:-8%;bottom:-30%;width:46vw;opacity:.22;pointer-events:none}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--char);color:var(--masa);padding-block:clamp(50px,7vw,90px)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:clamp(28px,5vw,64px);
  flex-wrap:wrap;border-bottom:1.5px solid rgba(242,231,211,.22);padding-bottom:clamp(30px,4vw,46px)}
.foot-logo{width:clamp(220px,30vw,360px);height:auto;display:block;flex-shrink:0;border-radius:10px;box-shadow:0 18px 44px -22px rgba(0,0,0,.6)}
.foot-tagline{font-family:var(--font-display);font-weight:500;
  font-size:clamp(20px,2.4vw,32px);line-height:1.12;letter-spacing:-.01em;
  color:rgba(242,231,211,.78);max-width:18ch;text-align:right;margin-left:auto}
.foot-tagline strong{color:var(--accent);font-weight:800}
.foot-grid{display:flex;justify-content:flex-start;gap:clamp(40px,9vw,120px);flex-wrap:wrap;margin-top:clamp(34px,4vw,52px)}
.foot-col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,231,211,.5);margin-bottom:14px;font-weight:400}
.foot-col a,.foot-col p{display:block;font-size:15px;color:rgba(242,231,211,.85);margin-bottom:8px}
.foot-col a:hover{color:var(--accent)}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:50px;
  font-family:var(--font-mono);font-size:12px;color:rgba(242,231,211,.5);letter-spacing:.04em}

/* ============================================================
   REVEAL animations
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,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}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-art{order:-1;min-height:auto}
  .hero .tortilla{width:min(64vw,360px)}
  .tortilla-video{width:min(64vw,360px)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-cell:nth-child(2){border-right:none}
  .feat-cell:nth-child(-n+2){border-bottom:1.5px solid var(--ink)}
  .stats{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .gal-grid img{height:300px}
  .gal-grid .g1{grid-row:auto}
}
@media (max-width:680px){
  .nav-links a.hide-sm{display:none}
  .prod-grid{grid-template-columns:1fr}
  .prod.feat{grid-column:auto;flex-direction:column;align-items:flex-start}
  .prod.feat .ptort{position:absolute;top:clamp(14px,4vw,24px);right:clamp(14px,4vw,24px);width:clamp(100px,26vw,140px)}
  .prod .ptort{width:clamp(96px,24vw,124px)}
  .feat-grid{grid-template-columns:1fr}
  .feat-cell{border-right:none;border-bottom:1.5px solid var(--ink)}
  .feat-cell:last-child{border-bottom:none}
  .hero h1{font-size:clamp(46px,13vw,80px)}
  .stat .num{font-size:clamp(56px,18vw,90px)}
  .foot-top{flex-direction:column;align-items:flex-start;gap:22px}
  .foot-tagline{text-align:left;margin-left:0;max-width:24ch}
}

/* ============================================================
   CERTIFICATIONS (Calidad certificada)
   ============================================================ */
.cert{padding-block:clamp(80px,11vw,150px)}
.cert .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1.5px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--paper-card)}
.cert .pillar{padding:clamp(24px,2.8vw,38px);border-right:1.5px solid var(--ink)}
.cert .pillar:last-child{border-right:none}
.cert .pillar .pnum{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;color:var(--accent)}
.cert .pillar h3{font-size:clamp(19px,1.9vw,25px);margin:14px 0 10px;line-height:1.04}
.cert .pillar p{color:var(--ink-soft);font-size:14.5px}
.cert-proof{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(28px,3.4vw,44px)}
.cert-card{display:flex;gap:clamp(18px,2.2vw,28px);align-items:center;
  background:var(--paper-card);border:1.5px solid var(--ink);border-radius:22px;padding:clamp(20px,2.4vw,30px);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.cert-card:hover{transform:translateY(-5px);box-shadow:0 30px 54px -32px rgba(60,40,15,.5)}
.seal{flex-shrink:0;width:clamp(96px,11vw,128px);height:clamp(96px,11vw,128px);border-radius:50%;
  display:grid;place-items:center;text-align:center;line-height:1;
  background:var(--ink);color:var(--masa);position:relative;
  box-shadow:0 14px 30px -14px rgba(27,23,20,.6)}
.seal.gmp{background:var(--accent);color:var(--on-accent)}
.seal .sk{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em}
.seal .sy{position:absolute;bottom:14%;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;opacity:.85}
.cert-card .cc-body{min-width:0}
.cert-card .cc-body h3{font-size:clamp(19px,2vw,26px);line-height:1.1;margin-bottom:8px}
.cert-card .cc-body p{margin-bottom:0}
.cert-card .cc-body p{color:var(--ink-soft);font-size:14px;max-width:34ch}
.cert-card .cc-meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--accent);margin-top:10px;text-transform:uppercase}

/* ============================================================
   VISION 2030 + VALUES
   ============================================================ */
.vision{background:var(--char);color:var(--masa);padding-block:clamp(80px,12vw,160px);overflow:hidden}
.vision .v-quote{font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.4vw,62px);line-height:1.04;letter-spacing:-.025em;max-width:20ch;margin-top:24px}
.vision .v-quote .hl{color:var(--accent)}
.vision .v-foot{font-family:var(--font-mono);font-size:13px;color:rgba(242,231,211,.6);margin-top:26px;letter-spacing:.03em}
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(48px,6vw,80px);padding-top:clamp(34px,4vw,50px);border-top:1px solid rgba(242,231,211,.2)}
.value .vn{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4vw,58px);
  color:var(--accent);line-height:.85;letter-spacing:-.03em}
.value .vl{font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.5vw,21px);margin-top:14px;color:var(--masa)}

/* ============================================================
   PARTNERS (Socios comerciales)
   ============================================================ */
.partners{padding-block:clamp(80px,11vw,150px)}
.logo-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,4vw,54px)}
.logo-card{aspect-ratio:3/2;min-width:0;background:#fff;border:1.5px solid var(--ink);border-radius:18px;
  display:grid;place-items:center;padding:clamp(16px,2vw,26px);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.logo-card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -28px rgba(60,40,15,.5)}
.logo-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.78;transition:filter .35s,opacity .35s}
.logo-card:hover img{filter:none;opacity:1}
.partners-note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px);
  padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.partners-note .pn-strong{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em}
.partners-note .pn-text{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);letter-spacing:.03em;max-width:46ch}

@media (max-width:1000px){
  .cert .pillars{grid-template-columns:repeat(2,1fr)}
  .cert .pillar:nth-child(2){border-right:none}
  .cert .pillar:nth-child(-n+2){border-bottom:1.5px solid var(--ink)}
  .cert-proof{grid-template-columns:1fr}
  .values{grid-template-columns:repeat(3,1fr);gap:30px 18px}
  .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:680px){
  .cert .pillars{grid-template-columns:1fr}
  .cert .pillar{border-right:none;border-bottom:1.5px solid var(--ink)}
  .cert .pillar:last-child{border-bottom:none}
  .cert-card{flex-direction:column;align-items:flex-start;text-align:left}
  .values{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   AUTOSERVICIO (exhibición en tienda)
   ============================================================ */
.autoserv{padding-block:clamp(60px,8vw,110px)}
.store-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:22px}
.store-gal figure{margin:0;position:relative;overflow:hidden;border:1.5px solid var(--ink);border-radius:18px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.store-gal figure:hover{transform:translateY(-5px);box-shadow:0 28px 50px -30px rgba(60,40,15,.5)}
.store-gal img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.store-gal figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--masa);padding:34px 16px 14px;
  background:linear-gradient(to top, rgba(27,23,20,.82), transparent)}

@media (max-width:1000px){
  .store-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .store-gal{grid-template-columns:1fr}
}

/* dark theme variant (tweakable) */
[data-theme="carbon"]{
  --masa:#1B1714;--masa-deep:#241D16;--paper-card:#262019;
  --ink:#F2E7D3;--ink-soft:#C3B49C;--line:rgba(242,231,211,.18);--line-soft:rgba(242,231,211,.1);
  --char:#0F0C09;--char-2:#171210;--on-accent:#1B1714;
}