/* ==========================================================================
   MYO COCINA — REDISEÑO
   Paleta y tipografía tomadas de la identidad real de marca (etiqueta
   "Tostador para sandwichs sellados"): terracota, marrón tostado y una
   tipografía redondeada y cálida. Se mantiene el motivo de "ficha de
   fundición" para datos (años, códigos, medidas) como hilo conductor.
   ========================================================================== */

:root{
  /* ---- color: identidad de etiqueta MYO ---- */
  --bg:            #241708;   /* marrón tostado oscuro (como el texto de la etiqueta) */
  --bg-2:          #2e1e0e;
  --bg-3:          #382613;
  --cream:         #faf1e1;   /* papel cálido */
  --cream-2:       #f1e1c2;
  --ink:           #241708;
  --ink-soft:      #6e5236;
  --aluminum-1:    #fbf2e3;   /* marfil cálido (antes plata) */
  --aluminum-2:    #d9b98d;   /* dorado tostado */
  --aluminum-3:    #9c7a54;   /* bronce apagado */
  --ember:         #de7c3f;   /* terracota de la etiqueta */
  --ember-2:       #f2a968;
  --ember-deep:    #a8501f;
  --line-dark:     rgba(251,242,227,0.14);
  --line-light:    rgba(36,23,8,0.14);

  /* ---- tipografia: redondeada y cálida, como "MYO / TOSTADOR" ---- */
  /*--font-display: 'Fredoka', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;*/

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;	 
	
	
	
  /* ---- layout ---- */
  --maxw: 1280px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 4px;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--aluminum-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

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

.h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.02;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0.4em 0 0.7em;
  text-transform:uppercase;
}
.h2--light{ color:var(--aluminum-1); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ember-deep);
  margin:0;
  font-weight:500;
}
.eyebrow--light{ color:var(--ember-2); }
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 0 3px rgba(222,124,63,0.25);
  flex:none;
}

/* ---- grano de fondo (textura de arena) ---- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- botones ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  padding:0.85em 1.5em;
  font-family:var(--font-mono);
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-radius:10px;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;

  white-space:nowrap;
}
.btn--lg{ padding:1em 1.9em; font-size:0.86rem; }
.btn--ember{
  background:linear-gradient(135deg, var(--ember), var(--ember-deep));
  color:#1a0d04;
  box-shadow:0 8px 24px -8px rgba(222,124,63,0.55);
}
.btn--ember:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(222,124,63,0.7); }
.btn--outline{
  border-color:rgba(238,240,241,0.35);
  color:var(--aluminum-1);
}
.btn--outline:hover{ border-color:var(--ember-2); color:var(--ember-2); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--cream); }
.btn--dark:hover{ background:var(--ember-deep); color:#fff; transform:translateY(-2px); }
.btn--ghost-mini{
  color:var(--aluminum-2);
  font-size:0.78rem;
  padding:0.6em 0.2em;
}
.btn--ghost-mini:hover{ color:var(--ember-2); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:1.1rem var(--pad);
  transition:background .35s ease, padding .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.nav.is-scrolled{
  padding:0.65rem var(--pad);
  background:rgba(36,23,8,0.85);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line-dark), 0 12px 30px -18px rgba(0,0,0,0.6);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__logo{ height:34px; width:auto; object-fit:contain; }
@media (max-width: 560px){
  .nav__logo{ height:26px; }
}

.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  display:flex; align-items:baseline; gap:0.4em;
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.03em;
  color:var(--aluminum-2); transition:color .2s ease;
}
.nav__links a span{ color:var(--ember); font-size:0.7rem; }
.nav__links a:hover{ color:var(--aluminum-1); }

.nav__actions{ display:flex; align-items:center; gap:1.2rem; }

.nav__burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; flex:none;
}
.nav__burger span{ width:100%; height:2px; background:var(--aluminum-1); transition:transform .3s ease, opacity .3s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--bg-2); flex-direction:column; justify-content:center;
    padding:2rem; gap:1.6rem; transform:translateX(100%);
    transition:transform .4s cubic-bezier(.65,0,.35,1);
    box-shadow:-20px 0 50px rgba(0,0,0,0.4);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:1.05rem; }
  .nav__actions .btn--ghost-mini{ display:none; }
  .nav__burger{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem var(--pad) 6rem;
  overflow:hidden;
  background:
    radial-gradient(ellipse 120% 70% at 15% -10%, rgba(222,124,63,0.16), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero__ember{
  position:absolute; border-radius:50%; filter:blur(70px); z-index:0;
  width:46vw; height:46vw; max-width:640px; max-height:640px;
  background:radial-gradient(circle, rgba(222,124,63,0.35), rgba(168,80,31,0) 70%);
  top:-14%; right:-10%;
  animation:drift 16s ease-in-out infinite alternate;
}
.hero__ember--two{
  width:26vw; height:26vw; max-width:380px; max-height:380px;
  top:55%; left:-8%;
  background:radial-gradient(circle, rgba(242,169,104,0.22), rgba(168,80,31,0) 70%);
  animation-duration:20s; animation-delay:2s;
}
@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-4%,6%) scale(1.08); }
}

.hero__inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto; width:100%;
}
.hero__content{ max-width:900px; }
.hero__title{
  margin:0.9rem 0 1.4rem;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2.8rem, 8.6vw, 6.4rem);
  line-height:0.92;
  letter-spacing:-0.015em;
}
.hero__title-line{ display:block; color:var(--aluminum-1); }
.hero__title-line--metal{
  background:linear-gradient(100deg, var(--aluminum-3) 10%, var(--aluminum-1) 35%, #fff 45%, var(--aluminum-1) 55%, var(--aluminum-3) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 5s ease-in-out infinite;
}
.hero__title-line--ember{
  background:linear-gradient(100deg, var(--ember-deep), var(--ember) 45%, var(--ember-2) 60%, var(--ember-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes sheen{
  0%,100%{ background-position:0% 0; }
  50%{ background-position:100% 0; }
}

.hero__sub{
  max-width:560px; font-size:1.08rem; color:var(--aluminum-2); font-weight:300;
  margin:0 0 2.2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }

.hero__tag{
  position:relative;
  display:inline-flex; align-items:center; gap:0.9rem;
  padding:0.9rem 1.5rem 0.9rem 1.9rem;
  background:var(--cream);
  color:var(--ink);
  border-radius:14px;
  transform:rotate(-2deg);
  box-shadow:0 18px 34px -14px rgba(0,0,0,0.55);
}
.tag__rivet{
  position:absolute; left:0.6rem; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:var(--bg); box-shadow:inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.15);
}
.tag__num{
  font-family:var(--font-display); font-weight:700; font-size:2.1rem; line-height:1;
  color:var(--ember-deep);
}
.tag__num--text{ font-size:1.7rem; }
.tag__label{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.03em; line-height:1.3; color:var(--ink-soft);
}

.hero__scroll{
  position:relative; z-index:1; align-self:center; margin-top:auto;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  background:none; border:none; color:var(--aluminum-3);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase;
}
.hero__scroll svg{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ==========================================================================
   MARQUESINA
   ========================================================================== */
.marquee{
  background:var(--ember);
  color:var(--ink);
  overflow:hidden;
  padding:0.85rem 0;
  border-top:1px solid rgba(0,0,0,0.15);
  border-bottom:1px solid rgba(0,0,0,0.15);
}
.marquee__track{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--font-mono); font-weight:600; font-size:0.82rem;
  letter-spacing:0.08em;
  animation:scroll-left 32s linear infinite;
}
.marquee__track span{ padding:0 0.5rem; }
.marquee__sep{ opacity:0.6; }
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ background:var(--cream); color:var(--ink); padding:7rem var(--pad); }
.about__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:5rem; align-items:center;
}
.about__lead{ font-size:1.2rem; font-weight:400; color:var(--ink); }
.about__p{ color:var(--ink-soft); max-width:52ch; }

.tags-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.tag--paper{
  position:relative;
  background:#fff;
  border:1px solid var(--line-light);
  padding:1.1rem 1.3rem 1.1rem 2rem;
  border-radius:14px;
  display:flex; align-items:center; gap:0.8rem;
  box-shadow:0 10px 24px -16px rgba(28,23,18,0.35);
}
.tag--paper .tag__rivet{ background:var(--cream); box-shadow:inset 0 1px 2px rgba(0,0,0,0.25); }
.tag--paper .tag__num{ font-size:1.7rem; }
.tag--paper .tag__label{ color:var(--ink-soft); }

.about__media{ position:relative; }
.about__photo{ border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(28,23,18,0.5); }
.about__photo img{ width:100%; height:100%; object-fit:cover; }
.about__photo--main{ width:76%; aspect-ratio:3/4; }
.about__photo--small{
  position:absolute; right:0; bottom:-8%; width:52%; aspect-ratio:3/2;
  border:6px solid var(--cream); box-shadow:0 24px 50px -20px rgba(28,23,18,0.55);
}
.about__stamp{
  position:absolute; top:-6%; left:-6%;
  width:104px; height:104px; border-radius:50%;
  background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase;
  transform:rotate(-8deg);
  box-shadow:0 14px 30px -12px rgba(0,0,0,0.5);
  border:2px dashed rgba(242,236,223,0.35);
}

@media (max-width: 980px){
  .about__inner{ grid-template-columns:1fr; gap:4rem; }
  .about__media{ order:-1; max-width:420px; margin:0 auto 2rem; }
}

/* ==========================================================================
   PROCESO
   ========================================================================== */
.process{
  position:relative;
  background:var(--bg);
  padding:7rem var(--pad) 6rem;
  overflow:hidden;
}
.process__head{ max-width:640px; margin:0 auto 4rem; text-align:center; }
.process__sub{ color:var(--aluminum-2); font-weight:300; margin-top:1rem; }

.process__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
}
.process__step{
  padding:2.4rem 1.8rem;
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  transition:background .3s ease;
}
.process__step:hover{ background:rgba(222,124,63,0.05); }
.process__index{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:2.6rem; color:var(--ember); line-height:1; margin-bottom:1rem;
}
.process__step h3{
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  font-size:1.3rem; margin:0 0 0.7rem; color:var(--aluminum-1); letter-spacing:0.01em;
}
.process__step p{ color:var(--aluminum-2); font-size:0.94rem; margin:0; }

@media (max-width: 900px){
  .process__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .process__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PRODUCTOS
   ========================================================================== */
.products{ background:var(--cream); color:var(--ink); padding:7rem var(--pad); }
.products__head{ max-width:640px; margin:0 auto 3.5rem; text-align:center; }
.products__sub{ color:var(--ink-soft); margin-top:1rem; }

.products__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem;
}
.pcard{
  position:relative;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  cursor:zoom-in;
  box-shadow:0 16px 34px -22px rgba(28,23,18,0.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -20px rgba(28,23,18,0.5); }
.pcard--wide{ grid-column:span 2; grid-row:span 2; }
.pcard img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;
  transition:transform .5s ease;
}
.pcard--wide img{ aspect-ratio:auto; height:100%; }
.pcard:hover img{ transform:scale(1.06); }
.pcard__info{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.1rem 1.2rem;
  background:linear-gradient(0deg, rgba(20,17,12,0.9) 0%, rgba(20,17,12,0.55) 55%, transparent 100%);
  color:#fff;
  transform:translateY(8px);
  opacity:0.94;
}
.pcard__info h3{
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  font-size:1.2rem; margin:0 0 0.15rem;
}
.pcard__info p{ margin:0; font-size:0.82rem; color:rgba(255,255,255,0.75); }
.pcard__code{
  display:inline-block; margin-top:0.5rem;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.05em;
  color:var(--ember-2);
}

.products__cta{
  max-width:var(--maxw); margin:4rem auto 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-top:2.5rem; border-top:1px dashed var(--line-light);
}
.products__cta p{ color:var(--ink-soft); margin:0; max-width:36ch; }

@media (max-width: 980px){
  .products__grid{ grid-template-columns:repeat(2,1fr); }
  .pcard--wide{ grid-column:span 2; grid-row:span 1; }
  .pcard--wide img{ aspect-ratio:16/10; }
}
@media (max-width: 560px){
  .products__grid{ grid-template-columns:1fr; }
  .pcard--wide{ grid-column:span 1; }
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  position:relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 32 16 16 32 32 16 48Z' fill='rgba(255,255,255,0.05)'/%3E%3Cpath d='M32 0 48 16 32 32 16 16Z' fill='rgba(255,255,255,0.035)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--ember-deep), var(--ember));
  padding:5rem var(--pad);
  overflow:hidden;
}
.cta-band__inner{
  max-width:760px; margin:0 auto; text-align:center;
}
.cta-band__inner h2{
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  font-size:clamp(1.9rem,4vw,2.8rem); color:#1a0d04; margin:0 0 0.6rem;
}
.cta-band__inner p{ color:rgba(26,13,4,0.75); margin:0 0 2rem; font-size:1.05rem; }
.cta-band .btn--ember{ background:#1a0d04; color:var(--cream); box-shadow:0 14px 30px -14px rgba(0,0,0,0.5); }
.cta-band .btn--ember:hover{ background:#000; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact{ background:var(--bg); padding:7rem var(--pad); }
.contact__inner{ max-width:var(--maxw); margin:0 auto; }
.contact__intro{ max-width:560px; margin-bottom:3.5rem; }
.contact__lead{ color:var(--aluminum-2); font-weight:300; }

.contact__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.contact__card{
  background:var(--bg-2);
  border:1px solid var(--line-dark);
  border-radius:16px;
  padding:1.8rem 1.5rem;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.contact__card:hover{ transform:translateY(-4px); border-color:rgba(222,124,63,0.5); background:var(--bg-3); }
.contact__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(222,124,63,0.12); color:var(--ember-2);
  margin-bottom:1.1rem;
}
.contact__card h3{
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  font-size:1.05rem; margin:0 0 0.4rem; color:var(--aluminum-1);
}
.contact__card p{ margin:0; color:var(--aluminum-2); font-size:0.88rem; line-height:1.5; }
.contact__card--ember{ background:linear-gradient(135deg, rgba(222,124,63,0.14), rgba(168,80,31,0.08)); border-color:rgba(222,124,63,0.35); }

@media (max-width: 900px){
  .contact__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .contact__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--bg-2); border-top:1px solid var(--line-dark); padding:2.6rem var(--pad); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.footer__brand{ display:flex; align-items:center; }
.footer__brand img{ height:38px; width:auto; object-fit:contain; }
.footer__links{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer__links a{ font-family:var(--font-mono); font-size:0.76rem; color:var(--aluminum-2); letter-spacing:0.03em; }
.footer__links a:hover{ color:var(--ember-2); }
.footer__fine{ width:100%; margin:0; padding-top:1.6rem; border-top:1px solid var(--line-dark); font-size:0.76rem; color:var(--aluminum-3); font-family:var(--font-mono); }

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.fab{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:70;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #29d366, #1fa855);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(31,168,85,0.6);
  animation:pulse-fab 2.6s ease-in-out infinite;
  transition:transform .25s ease;
}
.fab:hover{ transform:scale(1.08); }
@keyframes pulse-fab{
  0%,100%{ box-shadow:0 14px 30px -10px rgba(31,168,85,0.6); }
  50%{ box-shadow:0 14px 30px -10px rgba(31,168,85,0.95), 0 0 0 10px rgba(31,168,85,0.08); }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:4vh 4vw;
  background:rgba(10,8,6,0.92);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:100%; max-height:88vh; border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  transform:scale(0.96); transition:transform .3s ease;
}
.lightbox.is-open img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:1.6rem; right:1.6rem;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.2);
  font-size:1.1rem;
}
.lightbox__close:hover{ background:rgba(222,124,63,0.25); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }