/* ═══════════════════════════════════════════════════════════════
   Frida · Estilismo canino · Alhama de Murcia
   Dirección: "El damero" — el suelo del salón como retícula.
   Paleta sacada de sus fotos: fucsia de la pared, rosa de la sala,
   tinta y mármol del damero, lila del muro de flores.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fucsia:#C4176A;
  --fucsia-dp:#8E0F4C;
  --rosa:#EFC0DE;
  --rosa-pl:#FAE4F1;
  --tinta:#141317;
  --tinta-2:#26242B;
  --marmol:#F1F2F3;
  --blanco:#FFFFFF;
  --lila:#A97FC9;
  --lila-dp:#7B4FA3;

  --txt:#141317;
  --txt-mid:#4A4750;
  --txt-soft:#6C6875;
  --line:#DEDFE2;
  --line-dk:rgba(255,255,255,.16);

  --maxw:1280px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(76px,10vw,148px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:260ms;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Familjen Grotesk','DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* Sin overflow-x aquí a propósito: 'hidden' mata el position:sticky de la
   columna de servicios, y 'clip' contiene el pintado y deja el iframe del
   mapa EN BLANCO. No hace falta ninguno: nada desborda a lo ancho. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--marmol);
  color:var(--txt);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:600;letter-spacing:-.035em;line-height:.94}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none !important}

.skip{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--fucsia);outline-offset:3px}

/* ── tipografía de sección ───────────────────────────────── */
.h2{font-size:clamp(2.4rem,5.6vw,4.6rem)}
.h2--light{color:#fff}

.eyebrow{
  font-family:var(--mono);
  font-size:.8125rem;      /* 13px */
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fucsia);
  display:flex;align-items:center;gap:12px;
  margin:0 0 20px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;max-width:96px}
.eyebrow--light{color:var(--rosa)}
.eyebrow__sep{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}
.eyebrow__more{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}

.lede{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  color:var(--txt-mid);
  max-width:52ch;
  margin-top:22px;
}
.lede--light{color:rgba(255,255,255,.8)}

/* ── botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);
  font-size:1rem;font-weight:600;letter-spacing:-.01em;
  padding:16px 28px;
  border:2px solid transparent;
  text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 120ms var(--ease);
}
.btn--solid{background:var(--fucsia);color:#fff;border-color:var(--fucsia)}
.btn--ghost{background:transparent;color:var(--txt);border-color:currentColor}
.btn--onDark.btn--solid{background:#fff;color:var(--tinta);border-color:#fff}
.btn--onDark.btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
@media (hover:hover){
  .btn--solid:hover{background:var(--fucsia-dp);border-color:var(--fucsia-dp)}
  .btn--ghost:hover{background:var(--txt);color:var(--marmol);border-color:var(--txt)}
  .btn--onDark.btn--solid:hover{background:var(--rosa);border-color:var(--rosa)}
  .btn--onDark.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
}
.btn:active{transform:scale(.97)}

/* ── marca ───────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand__board{
  width:26px;height:26px;flex:none;
  background:
    linear-gradient(45deg,var(--tinta) 25%,transparent 25%,transparent 75%,var(--tinta) 75%),
    linear-gradient(45deg,var(--tinta) 25%,transparent 25%,transparent 75%,var(--tinta) 75%),
    var(--blanco);
  background-size:13px 13px;
  background-position:0 0,6.5px 6.5px;
  border:1.5px solid var(--tinta);
}
.brand__txt{font-family:var(--disp);font-weight:700;font-size:1.4rem;letter-spacing:-.04em}
.brand__dot{color:var(--fucsia)}

/* ── cabecera ────────────────────────────────────────────── */
.hd{position:fixed;inset:0 0 auto;z-index:90;transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hd__in{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:26px;
}
.hd .brand__txt{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hd .brand__board{border-color:rgba(255,255,255,.85)}

.hd[data-scrolled-at]{background:rgba(241,242,243,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.hd[data-scrolled-at] .brand__txt{color:var(--tinta);text-shadow:none}
.hd[data-scrolled-at] .brand__board{border-color:var(--tinta)}
.hd[data-scrolled-at] .nav a{color:var(--txt-mid);text-shadow:none}
.hd[data-scrolled-at] .hd__call{color:var(--tinta);text-shadow:none}
.hd[data-scrolled-at] .burger span{background:var(--tinta)}

.nav{margin-left:auto;display:flex;gap:26px}
.nav a{
  font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.92);
  text-decoration:none;text-shadow:0 1px 12px rgba(0,0,0,.5);
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
@media (hover:hover){.nav a:hover{border-bottom-color:var(--fucsia)}}
.nav a.active{border-bottom-color:var(--fucsia)}

.hd__call{
  display:flex;flex-direction:column;line-height:1.15;text-decoration:none;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hd__call-lab{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.hd__call-num{font-family:var(--disp);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.burger span{width:24px;height:2px;background:#fff;display:block;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}

/* ── PORTADA ─────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:34% 20%;
  z-index:-3;
}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(20,19,23,.52) 0%,rgba(20,19,23,.12) 34%,rgba(20,19,23,.34) 62%,rgba(20,19,23,.86) 100%),
    linear-gradient(85deg,rgba(142,15,76,.42) 0%,rgba(142,15,76,0) 58%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__body{
  position:relative;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:0 var(--gut) clamp(76px,11vw,132px);
}
.hero__h1{
  color:#fff;
  font-size:clamp(3.25rem,11.5vw,7.5rem);   /* 52px → 120px */
  display:flex;flex-direction:column;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__h1 .l1{margin-left:0}
.hero__h1 .l2{margin-left:.14em}
.hero__h1 .l3{margin-left:.30em;color:var(--rosa)}
.hero__sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(1.0625rem,1.7vw,1.3125rem);
  max-width:44ch;margin-top:26px;
  text-shadow:0 1px 18px rgba(0,0,0,.55);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* el fantasma va sobre foto oscura: aquí manda el blanco, no la tinta */
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(3px)}
@media (hover:hover){
  .hero__cta .btn--ghost:hover{background:#fff;color:var(--tinta);border-color:#fff}
}
.hero__now{
  display:flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;
  color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--rosa);flex:none}
.dot.open{background:#37D07A;box-shadow:0 0 0 4px rgba(55,208,122,.25)}
.dot.closed{background:#FF7A7A;box-shadow:0 0 0 4px rgba(255,122,122,.2)}

/* banda de damero al pie de la portada: la firma entra ya en la primera pantalla */
.hero__board{
  position:absolute;left:0;right:0;bottom:0;height:22px;z-index:1;
  background:
    linear-gradient(45deg,var(--tinta) 25%,transparent 25%,transparent 75%,var(--tinta) 75%),
    linear-gradient(45deg,var(--tinta) 25%,transparent 25%,transparent 75%,var(--tinta) 75%),
    var(--marmol);
  background-size:44px 44px;
  background-position:0 0,22px 22px;
}

/* ── FICHA RÁPIDA ────────────────────────────────────────── */
.strip{background:var(--marmol);border-bottom:1px solid var(--line)}
.strip__in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(34px,4.5vw,52px) var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);
}
.strip__i{
  background:var(--marmol);
  background-clip:content-box;      /* evita las franjas laterales del gap:1px */
  padding:4px clamp(14px,2vw,28px);
  display:flex;flex-direction:column;gap:4px;
}
.strip__i:first-child{padding-left:0}
.strip__k{font-family:var(--mono);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fucsia)}
.strip__v{font-family:var(--disp);font-weight:600;font-size:clamp(1.75rem,3.2vw,2.5rem);letter-spacing:-.04em;line-height:1.05}
.strip__v--sm{font-size:clamp(1.375rem,2.3vw,1.875rem)}
/* suelo en px: en em puro se bajaba a 8px en algunos anchos */
.strip__u{font-size:max(14px,.52em);font-weight:500;color:var(--txt-soft);letter-spacing:-.01em}
.strip__n{font-size:.875rem;color:var(--txt-soft)}

/* ── SERVICIOS · split-screen ────────────────────────────── */
.svc{
  max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,88px);
  align-items:stretch;   /* con 'start' la columna encoge y el sticky no tiene recorrido */
}
.svc__media{min-height:100%}
.svc__sticky{position:sticky;top:110px}
.svc__sticky img{width:100%;aspect-ratio:1;object-fit:cover}
.svc__cap{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;
  color:var(--txt-soft);margin-top:14px;
}
.svc__ul{margin-top:44px;border-top:1px solid var(--line)}
.svc__it{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.svc__no{
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  color:var(--fucsia);letter-spacing:.1em;padding-top:5px;
}
.svc__it h3{font-size:clamp(1.375rem,2.3vw,1.75rem);letter-spacing:-.03em}
.svc__it p{grid-column:2;color:var(--txt-mid);font-size:1rem;margin-top:6px}
.svc__foot{margin-top:30px;color:var(--txt-soft);font-size:.9375rem;max-width:46ch}
.svc__foot a{color:var(--fucsia);font-weight:600}

/* ── EL TABLERO · la firma ───────────────────────────────── */
.board{background:var(--tinta);color:#fff;padding:var(--sec) 0}
/* el fucsia sobre la tinta se queda en 3,2:1. Sobre oscuro manda el rosa. */
.board .eyebrow{color:var(--rosa)}
.board__head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(40px,5vw,64px)}
.board__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gut);
}
.cell{
  position:relative;aspect-ratio:1;overflow:hidden;margin:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0;
  transform:rotateY(-88deg);
  transform-origin:left center;
  opacity:0;
  transition:transform 620ms var(--ease),opacity 420ms var(--ease);
}
.cell.in{transform:none;opacity:1}
.cell--img{cursor:zoom-in;background:var(--tinta-2)}
.cell--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
@media (hover:hover){.cell--img:hover img{transform:scale(1.05)}}
.cell--flat{padding:clamp(18px,2.4vw,30px)}
.cell--fucsia{background:var(--fucsia)}
.cell--tinta{background:var(--marmol);color:var(--tinta)}
.cell--lila{background:var(--lila)}
.cell--rosa{background:var(--rosa);color:var(--tinta)}
.cell__k{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.9;margin-bottom:auto;
}
.cell__t{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.875rem);letter-spacing:-.035em;line-height:.98;
}

/* ── FORMACIÓN ───────────────────────────────────────────── */
.cred{
  max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,6vw,80px);align-items:center;
}
.cred__ul{margin-top:40px}
.cred__it{
  display:grid;grid-template-columns:130px 1fr;gap:4px 20px;
  padding:20px 0;border-top:1px solid var(--line);
}
.cred__it:last-child{border-bottom:1px solid var(--line)}
.cred__yr{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fucsia);padding-top:4px;
}
.cred__ti{font-family:var(--disp);font-weight:600;font-size:1.125rem;letter-spacing:-.02em}
.cred__by{grid-column:2;font-size:.875rem;color:var(--txt-soft)}
.cred__ph{margin:0}
.cred__ph img{width:100%;object-fit:cover}
.cred__ph figcaption{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;
  color:var(--txt-soft);margin-top:12px;
}

/* ── RESEÑAS ─────────────────────────────────────────────── */
.rev{background:var(--rosa-pl);padding:var(--sec) 0}
.rev__head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.rev__ul{
  max-width:var(--maxw);margin:clamp(38px,5vw,60px) auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);
}
.rev__q{background:#fff;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px}
.rev__stars{color:var(--fucsia);letter-spacing:.14em;font-size:1rem}
.rev__q blockquote{margin:0}
.rev__q blockquote p{font-size:1.0625rem;color:var(--txt);line-height:1.58}
.rev__by{margin-top:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;color:var(--txt-mid)}
.rev__by span{color:var(--txt-soft);opacity:.8}
.rev__link{max-width:var(--maxw);margin:30px auto 0;padding:0 var(--gut)}
.rev__link a{color:var(--fucsia);font-weight:600;font-size:.9375rem}

/* ── EL SALÓN · celdas desiguales ────────────────────────── */
.shop{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut)}
.shop__grid{
  margin-top:clamp(36px,4.6vw,56px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,24px);
  grid-template-areas:"a a b" "a a c";
  align-items:stretch;
}
.shop__a{grid-area:a}
.shop__b{grid-area:b}
.shop__c{grid-area:c}
/* cada figura es una columna: la imagen se estira y el pie va SIEMPRE debajo,
   nunca encima de la foto de al lado */
.shop__grid figure{margin:0;cursor:zoom-in;display:flex;flex-direction:column;min-height:0}
.shop__grid img{width:100%;flex:1 1 auto;min-height:0;object-fit:cover}
/* la foto de la sala se recorta alta: lo que interesa es el damero y la pared, no el techo */
.shop__a img{object-position:center 78%}
.shop__b img{object-position:center 40%}
.shop__grid figcaption{
  flex:none;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  color:var(--txt-soft);margin-top:10px;
}
@media (min-width:901px){
  .shop__b img,.shop__c img{min-height:280px}
}

/* ── HORARIO + MAPA ──────────────────────────────────────── */
.when{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) var(--sec);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,66px);align-items:start;
}
.when__live{
  display:flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.05em;color:var(--txt-mid);
}
.when__ul{margin-top:26px;border-top:1px solid var(--line)}
.when__ul .row{
  display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:.9375rem;
}
.when__ul .row--off{color:var(--txt-soft)}
.when__ul .row.today{color:var(--fucsia);font-weight:600}
.when__note{margin-top:20px;font-size:.9375rem;color:var(--txt-soft)}
.when__map{height:100%;min-height:360px;border:1px solid var(--line)}
/* sin filter: un filtro CSS sobre el iframe lo manda a su propia capa de
   composición y el mapa se queda EN BLANCO. El gris no vale ese precio. */
.when__map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}

/* ── CITA ────────────────────────────────────────────────── */
.cta{
  background:var(--fucsia);color:#fff;
  padding:var(--sec) 0;
  position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22px;
  background:
    linear-gradient(45deg,var(--tinta) 25%,transparent 25%,transparent 75%,var(--tinta) 75%),
    linear-gradient(45deg,var(--tinta) 25%,transparent 25%,transparent 75%,var(--tinta) 75%),
    var(--rosa-pl);
  background-size:44px 44px;background-position:0 0,22px 22px;
}
.cta__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.cta .eyebrow{color:rgba(255,255,255,.85)}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cta__fine{margin-top:26px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.05em;color:rgba(255,255,255,.82)}

/* ── PIE ─────────────────────────────────────────────────── */
.ft{background:var(--tinta);color:rgba(255,255,255,.74);padding:clamp(56px,7vw,88px) 0 0}
.ft__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(40px,5vw,60px);
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,52px);
}
.ft__brand .brand__txt{color:#fff;font-size:1.6rem}
.ft__brand{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ft__brand .brand__board{width:30px;height:30px;background-size:15px 15px;background-position:0 0,7.5px 7.5px;border-color:rgba(255,255,255,.55)}
.ft__brand p{font-size:.9375rem;max-width:30ch;margin-top:4px}
.ft__h{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rosa);margin-bottom:14px;
}
.ft__col p{font-size:.9375rem;margin-bottom:8px}
.ft__col a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
@media (hover:hover){.ft__col a:hover{border-bottom-color:var(--rosa);color:var(--rosa)}}

.ft__bar{
  max-width:var(--maxw);margin:0 auto;padding:22px var(--gut) 28px;
  border-top:1px solid var(--line-dk);
}
.ft__legal{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.8125rem;color:rgba(255,255,255,.6)}
.ft__legal a{color:rgba(255,255,255,.6);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
@media (hover:hover){.ft__legal a:hover{color:#fff}}
.demo-aviso{margin-top:12px;font-size:.75rem;color:rgba(255,255,255,.42);line-height:1.5}

/* ── barra de llamada (móvil) ────────────────────────────── */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95}
.callbar a{
  flex:1;text-align:center;padding:16px 8px;text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:1rem;
}
.callbar__a{background:var(--fucsia);color:#fff}
.callbar__b{background:var(--tinta);color:#fff}

/* ── lightbox ────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:120;
  background:rgba(20,19,23,.94);
  align-items:center;justify-content:center;padding:clamp(20px,5vw,60px);
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain}
.lightbox__close{
  position:absolute;top:20px;right:20px;
  background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;cursor:pointer;
}

/* ── reveal ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.reveal.in,.reveal.is-in,.reveal.visible{opacity:1;transform:none}

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width:1080px){
  .strip__in{grid-template-columns:repeat(2,1fr);gap:1px}
  .strip__i:first-child{padding-left:clamp(14px,2vw,28px)}
  .strip__i:nth-child(3){padding-left:clamp(14px,2vw,28px)}
  .cred{grid-template-columns:1fr}
  .rev__ul{grid-template-columns:1fr}
  .when{grid-template-columns:1fr}
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,340px);
    background:var(--tinta);flex-direction:column;gap:0;
    padding:96px 30px 30px;
    transform:translateX(100%);transition:transform 320ms var(--ease);
    margin-left:0;
  }
  .nav.open{transform:none}
  .nav a{
    color:#fff;font-size:1.25rem;font-family:var(--disp);font-weight:600;
    padding:15px 0;border-bottom:1px solid var(--line-dk);text-shadow:none;
  }
  .nav a.active{color:var(--rosa);border-bottom-color:var(--rosa)}
  .hd[data-scrolled-at] .nav a{color:#fff}
  .burger{display:flex}
  .hd__call{display:none}
  .hd__in{gap:14px}

  .svc{grid-template-columns:1fr}
  .svc__media{order:2}
  .svc__sticky{position:static}
  .svc__sticky img{aspect-ratio:16/10}

  .board__grid{grid-template-columns:repeat(2,1fr)}
  .shop__grid{grid-template-columns:1fr;grid-template-areas:"a" "b" "c"}

  .callbar{display:flex}
  body{padding-bottom:56px}
  .ft__bar{padding-bottom:70px}
}

@media (max-width:560px){
  .strip__in{grid-template-columns:1fr;gap:0}
  .strip__i{padding:14px 0 !important;border-bottom:1px solid var(--line)}
  .strip__i:last-child{border-bottom:0}
  .ft__in{grid-template-columns:1fr}
  .cred__it{grid-template-columns:1fr}
  .cred__by{grid-column:1}
  .svc__it{grid-template-columns:auto 1fr}
  .hero__h1 .l2{margin-left:.08em}
  .hero__h1 .l3{margin-left:.16em}
  .eyebrow__more{display:none}    /* en móvil cabe la ciudad y poco más */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .cell{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
}