/* ============================================================
   Mago Konstant — magiarusa.com
   Dirección de arte: "NOCHE DE ASOMBRO"  (inspirada en la publicidad)
   Cielo nocturno · dorado · confeti · fotos que brillan · sin emojis
   Fonts: Bricolage Grotesque (display) + Hanken Grotesk (texto)
   ============================================================ */

:root{
  --bg:        oklch(0.17 0.075 300);
  --bg-2:      oklch(0.22 0.095 312);
  --surface:   oklch(0.26 0.075 305);
  --ink:       oklch(0.98 0.012 310);
  --ink-soft:  oklch(0.82 0.035 310);
  --ink-dim:   oklch(0.68 0.040 310);

  --magenta:   oklch(0.68 0.245 355);
  --cyan:      oklch(0.83 0.135 205);
  --gold:      oklch(0.84 0.155 92);
  --gold-deep: oklch(0.75 0.150 78);

  --line:      oklch(1 0 0 / .12);
  --line-2:    oklch(1 0 0 / .07);

  --glow-gold: 0 0 0 1px oklch(0.84 0.155 92 / .5), 0 14px 44px -10px oklch(0.84 0.155 92 / .5);
  --shadow:    0 30px 70px -30px #000;

  --radius:   22px;
  --radius-lg:34px;
  --maxw:     1200px;

  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --e-out: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px); }
section{ position:relative; z-index:1; padding:clamp(74px,10vw,132px) 0; }

/* WhatsApp icon (SVG, no emoji) */
.wa-ico{ width:20px; height:20px; flex:none; }

/* ---------- Fondo estrellado + reflectores ---------- */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 82% -5%, oklch(0.68 0.245 355 / .20), transparent 60%),
    radial-gradient(1000px 800px at 4% 12%, oklch(0.83 0.135 205 / .12), transparent 55%),
    radial-gradient(900px 900px at 60% 112%, oklch(0.55 0.16 300 / .30), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg)); }
.sky::before{ content:""; position:absolute; inset:-50%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, #fff, transparent),
    radial-gradient(1px 1px at 55% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 75%, #fff, transparent),
    radial-gradient(1px 1px at 90% 40%, #fff, transparent),
    radial-gradient(1px 1px at 30% 10%, #fff, transparent);
  opacity:.5; animation:twinkle 5s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.3;} 50%{opacity:.65;} }
#confetti{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---------- Tipografía ---------- */
h1,h2,h3,.display{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
h2{ font-size:clamp(2.1rem,5.2vw,3.9rem); }
h3{ font-size:1.3rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
p{ text-wrap:pretty; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--ink-soft); max-width:60ch; line-height:1.7; }
.hl-gold{ color:var(--gold); }
.hl-mag{ color:var(--magenta); }
.hl-cyan{ color:var(--cyan); }
.u-gold{ color:var(--gold); position:relative; white-space:nowrap; }
.u-gold::after{ content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.07em; min-height:4px;
  background:linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius:3px; }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--sans); font-weight:700;
  font-size:1.02rem; padding:16px 30px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s var(--e-out), box-shadow .25s var(--e-out), background .2s; }
.btn-gold{ background:var(--gold); color:#2a1a00; box-shadow:var(--glow-gold); }
.btn-gold:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 0 0 1px var(--gold), 0 22px 55px -12px oklch(0.84 0.155 92 / .7); }
.btn-wa{ background:oklch(0.78 0.17 155); color:#04351f; box-shadow:0 12px 34px -10px oklch(0.78 0.17 155 / .7); }
.btn-wa:hover{ transform:translateY(-3px) scale(1.02); }
.btn-ghost{ background:oklch(1 0 0 / .05); color:var(--ink); border-color:var(--line); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.btn-lg{ padding:18px 36px; font-size:1.08rem; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.site-header.scrolled{ background:oklch(0.17 0.075 300 / .8); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line-2); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ display:flex; flex-direction:column; justify-content:center; line-height:1; gap:3px; }
.brand-eyebrow{ font-family:var(--sans); font-weight:600; font-size:.64rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.brand-name{ font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.02em; color:var(--ink); }
.nav-links{ display:flex; gap:32px; }
.nav-links a{ font-weight:500; font-size:.96rem; color:var(--ink-soft); transition:color .18s; }
.nav-links a:hover{ color:var(--ink); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:9px; margin-left:auto; margin-right:4px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s; }
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero (collage en movimiento) ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:120px 0 90px; }
.hero-collage{ position:absolute; inset:-16% -8%; z-index:-2; display:flex; gap:14px; transform:rotate(-5deg) scale(1.2); filter:saturate(1.05); }
.hero-collage .col{ flex:1; display:flex; flex-direction:column; gap:14px; height:max-content; will-change:transform; }
.hero-collage .col.up{ animation:cUp 30s linear infinite; }
.hero-collage .col.down{ animation:cDown 36s linear infinite; }
.hero-collage img{ width:100%; height:clamp(150px,20vh,230px); object-fit:cover; border-radius:14px; display:block; box-shadow:0 12px 34px -14px #000; }
@keyframes cUp{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes cDown{ from{transform:translateY(-50%)} to{transform:translateY(0)} }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, oklch(0.13 0.08 300 / .96) 0%, oklch(0.14 0.08 300 / .84) 46%, oklch(0.14 0.08 300 / .5) 74%, oklch(0.14 0.08 300 / .34) 100%),
    radial-gradient(1100px 760px at 86% 8%, oklch(0.68 0.245 355 / .22), transparent 62%); }
.hero-inner{ max-width:660px; position:relative; }
.hero h1{ font-size:clamp(2.7rem,6.6vw,5.6rem); }
.hero h1 .l2{ display:block; margin-top:.06em; }
.hero p.lead{ margin:26px 0 34px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:15px; }
.hero-proof{ margin-top:30px; color:var(--ink-dim); font-size:.95rem; }
.hero-proof b{ color:var(--gold); font-family:var(--display); }

/* ---------- Marcas / clientes ---------- */
.brands{ text-align:center; }
.brands .lead{ margin:14px auto 0; text-align:center; }
.brands-marquee{ margin-top:48px; display:flex; flex-direction:column; gap:16px; }
.brand-row{ overflow:hidden; }
.brand-track{ display:flex; gap:16px; width:max-content; animation:scrollx 38s linear infinite; }
.brand-row.rev .brand-track{ animation-direction:reverse; animation-duration:46s; }
.brands-marquee:hover .brand-track{ animation-play-state:paused; }
.brand-cell{ flex:none; width:210px; display:grid; place-items:center; min-height:104px; padding:22px 26px;
  border:1px solid var(--line); border-radius:16px; background:#fbfbfd; }
.brand-cell img{ max-width:100%; max-height:54px; width:auto; object-fit:contain; }
@media (max-width:540px){ .brand-cell{ width:160px; min-height:90px; padding:18px 20px; } }

/* ---------- Marquee credenciales ---------- */
.creds-strip{ border-block:1px solid var(--line-2); background:oklch(1 0 0 / .02); padding:20px 0; overflow:hidden; }
.creds-track{ display:flex; gap:44px; white-space:nowrap; width:max-content; animation:scrollx 32s linear infinite; }
.creds-track span{ display:inline-flex; align-items:center; gap:10px; color:var(--ink-soft); font-weight:600; font-size:1rem; }
.creds-track span b{ color:var(--gold); font-family:var(--display); }
.creds-track .star{ color:var(--magenta); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- Servicios (bento apantallante) ---------- */
.services-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:46px; flex-wrap:wrap; }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(228px,auto); gap:16px; }
.tile{ position:relative; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px; isolation:isolate; border:1px solid var(--line); transition:transform .35s var(--e-out), box-shadow .35s var(--e-out); }
.tile .bg{ position:absolute; inset:0; z-index:-2; }
.tile .bg img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out); }
.tile::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 22%, oklch(0.14 0.08 300 / .5) 55%, oklch(0.11 0.07 300 / .96)); transition:opacity .35s; }
.tile:hover{ transform:translateY(-6px); box-shadow:0 40px 80px -34px #000, var(--glow-gold); }
.tile:hover .bg img{ transform:scale(1.08); }
.tile .kicker{ font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.tile h3{ margin-bottom:8px; }
.tile p{ color:var(--ink-soft); font-size:.95rem; max-width:46ch; }
.tile .more{ margin-top:16px; font-weight:700; color:var(--gold); font-size:.92rem; display:inline-flex; gap:8px; transition:gap .2s; }
.tile:hover .more{ gap:13px; }
.tile.feat{ grid-column:span 4; grid-row:span 2; }
.tile.feat h3{ font-size:clamp(1.9rem,3vw,2.6rem); }
.tile.feat p{ font-size:1.05rem; max-width:36ch; }
.tile.col{ grid-column:span 2; }
.tile.banner{ grid-column:span 6; min-height:300px; }
.tile.banner .bg img{ object-position:center 28%; }
.tag-hot{ position:absolute; top:20px; left:20px; z-index:1; background:var(--magenta); color:#fff; font-size:.7rem;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:7px 14px; border-radius:999px;
  box-shadow:0 0 0 1px oklch(0.68 0.245 355 / .5), 0 12px 30px -8px oklch(0.68 0.245 355 / .6); }

/* ---------- Momento estrella ---------- */
.starman{ padding:0; }
.starman-inner{ position:relative; min-height:86vh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:110px 0; }
.starman-inner .bg{ position:absolute; inset:0; z-index:-2; }
.starman-inner .bg img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.starman-inner::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 50% 42%, oklch(0.15 0.08 300 / .35), oklch(0.12 0.07 300 / .92) 76%); }
.starman-inner .content{ max-width:780px; padding:0 24px; }
.starman-inner h2{ font-size:clamp(2.4rem,6vw,4.6rem); }
.starman-inner .lead{ margin:22px auto 32px; text-align:center; color:var(--ink); }
.eyebrow-solo{ display:inline-block; color:var(--cyan); font-weight:700; letter-spacing:.02em; margin-bottom:16px; font-size:1.05rem; }

/* ---------- Reacciones (galería marquee) ---------- */
.reactions{ overflow:hidden; }
.react-head{ text-align:center; margin-bottom:48px; }
.marquee{ display:flex; gap:20px; width:max-content; }
.marquee.row1{ animation:scrollx 44s linear infinite; }
.marquee.row2{ animation:scrollx 50s linear infinite reverse; margin-top:20px; }
.marquee figure{ position:relative; width:340px; height:252px; border-radius:20px; overflow:hidden; flex:none; border:1px solid var(--line); box-shadow:var(--shadow); }
.marquee img{ width:100%; height:100%; object-fit:cover; }
.marquee figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 16px 14px; font-weight:700; font-size:.92rem;
  background:linear-gradient(transparent, oklch(0.12 0.07 300 / .85)); }
.react-marquees:hover .marquee{ animation-play-state:paused; }

/* ---------- Autoridad ---------- */
.authority-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,70px); align-items:center; }
.portrait{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid oklch(0.84 0.155 92 / .4);
  box-shadow:0 40px 90px -34px oklch(0.84 0.155 92 / .45); }
.portrait img{ width:100%; }
.portrait .medal{ position:absolute; bottom:20px; left:20px; background:oklch(0.68 0.245 355 / .95); color:#fff; padding:12px 18px;
  border-radius:14px; font-weight:700; font-size:.9rem; box-shadow:var(--shadow); }
.portrait .medal b{ font-family:var(--display); color:var(--gold); }
.constellation{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.constellation span{ border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:.9rem; color:var(--ink-soft);
  background:oklch(1 0 0 / .03); transition:border-color .2s, color .2s; }
.constellation span:hover{ border-color:var(--cyan); color:var(--ink); }

/* ---------- Garantía (3 sellos, sin emoji) ---------- */
.guarantee{ text-align:center; }
.seals{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 40px; margin-top:48px; text-align:center; }
.seal{ position:relative; padding:0; border:none; background:none; }
.seal .halo, .seal .num{ display:none; }
.seal h3{ margin-bottom:10px; }
.seal p{ color:var(--ink-soft); font-size:.98rem; max-width:34ch; margin-inline:auto; }

/* ---------- Testimonios (placeholders) ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.testi{ border-radius:var(--radius); padding:28px; border:1px dashed var(--line); background:oklch(1 0 0 / .02); }
.testi .stars{ letter-spacing:3px; color:oklch(0.84 0.155 92 / .45); font-size:1.05rem; margin-bottom:14px; }
.testi .ln{ height:11px; border-radius:6px; background:oklch(1 0 0 / .07); margin-bottom:10px; }
.testi .ln.w1{ width:100%; } .testi .ln.w2{ width:92%; } .testi .ln.w3{ width:70%; }
.testi .who{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.testi .av{ width:38px; height:38px; border-radius:50%; background:oklch(1 0 0 / .08); flex:none; }
.testi .who .ln{ margin:0 0 7px; }
.testi .tag{ display:inline-block; margin-top:6px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.testi-foot{ text-align:center; margin-top:30px; color:var(--ink-dim); font-size:.92rem; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:48px auto 0; }
.faq-item{ border-bottom:1px solid var(--line-2); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 46px 24px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.14rem; letter-spacing:-.01em; color:var(--ink); }
.faq-q::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.7rem; color:var(--gold); font-family:var(--sans); }
.faq-item.open .faq-q::after{ content:"\2212"; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--e-out); }
.faq-a p{ padding:0 0 24px; color:var(--ink-soft); max-width:70ch; }

/* ---------- Contacto ---------- */
#contacto{ padding-bottom:24px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:26px; margin-top:50px; align-items:start; }
.contact-card{ border-radius:var(--radius-lg); padding:clamp(30px,4vw,44px); position:relative; overflow:hidden; }
.contact-card.wa{ background:linear-gradient(155deg, oklch(0.30 0.08 305), oklch(0.22 0.09 312)); border:1px solid var(--line); }
.contact-card.corp{ background:oklch(1 0 0 / .03); border:1px solid var(--line); }
.contact-card h3{ font-size:1.5rem; margin-bottom:10px; }
.contact-card p{ color:var(--ink-soft); margin-bottom:22px; }
.contact-card .tel{ margin-top:18px; font-size:.9rem; color:var(--ink-dim); }
.contact-card .tel b{ color:var(--ink); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select{ width:100%; padding:14px 16px; border-radius:13px; border:1px solid var(--line);
  background:oklch(0.15 0.06 300 / .6); color:var(--ink); font-family:var(--sans); font-size:.96rem; }
.field input::placeholder{ color:var(--ink-dim); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--gold); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-2); padding:36px 0 28px; color:var(--ink-soft); font-size:.92rem; }
.foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:34px; padding-bottom:34px; border-bottom:1px solid var(--line-2); }
.foot-col h4{ color:var(--ink); font-family:var(--display); font-size:1rem; margin-bottom:14px; }
.foot-col p{ margin:5px 0; }
.foot-col a:hover{ color:var(--gold); }
.foot-bottom{ padding-top:24px; text-align:center; color:var(--ink-dim); font-size:.82rem; }

/* ---------- WhatsApp FAB ---------- */
.fab{ position:fixed; bottom:24px; right:24px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  background:oklch(0.78 0.17 155); color:#04351f; font-weight:800; padding:15px 22px; border-radius:999px;
  box-shadow:0 16px 40px -10px oklch(0.78 0.17 155 / .7); transition:transform .25s var(--e-out); }
.fab:hover{ transform:scale(1.06); }

/* ---------- Reveal (enhances an already-visible default) ---------- */
.reveal{ opacity:1; }
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--e-out), transform .7s var(--e-out); }

/* ---------- Páginas interiores ---------- */
.subhero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden; padding:150px 0 60px; }
.subhero .bg{ position:absolute; inset:0; z-index:-2; }
.subhero .bg img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.subhero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, oklch(0.14 0.08 300 / .55), oklch(0.14 0.08 300 / .94)),
    radial-gradient(900px 520px at 82% 8%, oklch(0.68 0.245 355 / .2), transparent 60%); }
.subhero .crumb{ font-size:.86rem; color:var(--ink-dim); margin-bottom:14px; }
.subhero .crumb a:hover{ color:var(--gold); }
.subhero h1{ font-size:clamp(2.3rem,5.6vw,4.3rem); max-width:20ch; }
.subhero .sub{ color:var(--ink-soft); max-width:58ch; margin-top:16px; font-size:1.14rem; line-height:1.6; }
.subhero .sub-cta{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.prose{ max-width:780px; }
.prose > h2{ margin:0 0 18px; }
.prose p{ color:var(--ink-soft); font-size:1.08rem; margin-bottom:18px; line-height:1.75; }
.prose p a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.feature-list{ display:grid; gap:24px; margin:30px 0; }
.feature-list li{ list-style:none; display:flex; gap:18px; align-items:flex-start; padding:0; border:none; background:none; }
.feature-list .k{ font-family:var(--display); font-weight:800; color:var(--gold); font-size:1.05rem; flex:none; line-height:1.5; min-width:1.6em; }
.feature-list h3{ font-size:1.1rem; margin-bottom:5px; }
.feature-list p{ color:var(--ink-soft); font-size:1rem; margin:0; }
.cta-band{ text-align:center; }
.cta-band .box{ max-width:740px; margin:0 auto; padding:clamp(36px,5vw,56px) 34px; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:linear-gradient(160deg, oklch(0.30 0.08 305), oklch(0.20 0.09 312)); }
.cta-band h2{ margin-bottom:12px; }
.cta-band p{ color:var(--ink-soft); margin-bottom:26px; max-width:52ch; margin-inline:auto; }

/* ---------- Galería ---------- */
.gallery-video{ max-width:820px; margin:26px auto 0; }
.gallery-video video{ width:100%; height:auto; display:block; border-radius:18px; border:1px solid var(--line); background:#000; box-shadow:var(--shadow); }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:28px; }
.gallery-grid figure{ margin:0; aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid var(--line); position:relative; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--e-out); }
.gallery-grid figure:hover img{ transform:scale(1.08); }
.gallery-grid figure::after{ content:"+"; position:absolute; inset:0; display:grid; place-items:center; font-size:1.9rem; color:#fff;
  background:oklch(0.15 0.08 300 / .45); opacity:0; transition:opacity .25s; pointer-events:none; }
.gallery-grid figure:hover::after{ opacity:1; }
@media (max-width:540px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); gap:6px; }
  .gallery-grid figure{ border-radius:8px; }
}
/* Lightbox / presentación */
.lightbox{ position:fixed; inset:0; z-index:100; background:oklch(0.1 0.05 300 / .95); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:82vh; border-radius:12px; box-shadow:var(--shadow); user-select:none; }
.lightbox .lb-close{ position:absolute; top:12px; right:18px; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; background:none; border:none; z-index:2; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:oklch(1 0 0 / .1); border:1px solid oklch(1 0 0 / .3); color:#fff; font-size:1.5rem; cursor:pointer;
  display:grid; place-items:center; z-index:2; transition:background .2s; }
.lightbox .lb-nav:hover{ background:oklch(0.84 0.155 92 / .35); }
.lightbox .lb-prev{ left:12px; }
.lightbox .lb-next{ right:12px; }
.lightbox .lb-count{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; font-size:.92rem; opacity:.85; font-weight:600; letter-spacing:.06em; }
@media (max-width:540px){
  .lightbox .lb-nav{ width:42px; height:42px; }
  .lightbox img{ max-height:72vh; }
}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .authority-grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile.feat{ grid-column:span 2; grid-row:auto; min-height:360px; }
  .tile.col{ grid-column:span 1; }
  .tile.banner{ grid-column:span 2; }
  .seals, .testi-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .nav-toggle{ display:flex; }
  .nav-links{ display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0;
    background:oklch(0.15 0.07 300 / .98); backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line);
    padding:6px 24px 18px; opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .22s, transform .22s; }
  .site-header.nav-open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding:15px 2px; border-bottom:1px solid var(--line-2); font-size:1.06rem; }
}
@media (max-width:540px){
  .bento{ grid-template-columns:1fr; }
  .tile.feat, .tile.banner{ grid-column:span 1; }
  .marquee figure{ width:260px; height:200px; }
  .form-row{ grid-template-columns:1fr; }
  .fab span{ display:none; }
  .hero-collage{ transform:rotate(-4deg) scale(1.3); }
  .hero-collage .col:nth-child(4), .hero-collage .col:nth-child(5){ display:none; }
  /* Momento estrella: foto completa (sin recorte) + texto debajo */
  .starman-inner{ display:flex; flex-direction:column; min-height:auto; padding:0 0 44px; }
  .starman-inner .bg{ position:relative; inset:auto; z-index:auto; }
  .starman-inner .bg img{ width:100%; height:auto; object-fit:contain; object-position:center; }
  .starman-inner::after{ display:none; }
  .starman-inner .content{ padding:30px 22px 0; }
  /* menos espacio bajo el formulario */
  #contacto{ padding-bottom:20px; }
  .site-footer{ padding-top:30px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}