/* ─────────────────────────────────────────────────────────────
   JM Beauty Art · Águilas
   Dirección: "La mirada". El logo del negocio es un ojo dibujado a
   línea continua y lo tienen en la pared en NEÓN: la portada es ese
   ojo a escala de cartel, encendido. Paleta muestreada píxel a píxel
   de su propia recepción (pared greige, mostrador de piedra tallada,
   suelo travertino) + el salvia de sus globos y su carmín.
   ───────────────────────────────────────────────────────────── */

:root{
  --tinta:      #141312;   /* el fondo de todas sus publicaciones */
  --tinta-2:    #1D1B19;
  --tinta-3:    #2A2724;
  --piedra:     #F1EEE6;   /* el mostrador tallado con luz */
  --piedra-2:   #E4DFD4;
  --greige:     #A79A90;   /* la pared */
  --travertino: #C9BCAF;   /* el suelo */
  --salvia:     #7C8E79;   /* los globos de su inauguración */
  --salvia-luz: #A3B69F;
  --carmin:     #8E1B2B;   /* su carmín */
  --carmin-luz: #D9707E;

  --texto-osc:  #141312;
  --texto-osc2: #57504A;
  --texto-cla:  #F1EEE6;
  --texto-cla2: #B9AEA4;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --cuerpo:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --env: min(1240px, 100% - 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--tinta); color:var(--texto-cla);
  font-family:var(--cuerpo); font-size:1.0625rem; line-height:1.62;
  font-weight:300; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.022em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.env{ width:var(--env); margin-inline:auto; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--piedra); color:var(--tinta); padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:.8125rem;
}
.saltar:focus{ left:1rem; top:1rem; }

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

/* ─────────── tipografía de sección ─────────── */
.etq{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-osc2);
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem;
}
.etq::before{ content:""; width:2.25rem; height:1px; background:currentColor; opacity:.6; }
.etq--claro{ color:var(--salvia-luz); }

.tit{
  font-family:var(--display); color:var(--texto-osc);
  font-size:clamp(2.25rem, 5.2vw, 4.1rem); line-height:1.02;
  letter-spacing:-.03em; max-width:22ch;
}
.tit--claro{ color:var(--texto-cla); }

.parr{ color:var(--texto-osc2); max-width:56ch; margin-top:1.5rem; font-size:1.0625rem; }
.centro .parr{ color:var(--texto-cla2); }

/* ─────────── botones ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.65rem; font-family:var(--cuerpo); font-size:.95rem;
  font-weight:500; letter-spacing:.005em; text-decoration:none;
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .18s var(--ease);
}
.btn--wa{ background:var(--carmin); color:#fff; }
.btn--fant{ background:transparent; color:var(--texto-cla); border-color:rgba(241,238,230,.32); font-family:var(--mono); }
.btn--ancho{ width:100%; }
@media (hover:hover){
  .btn--wa:hover{ background:#A62435; }
  .btn--fant:hover{ border-color:var(--piedra); background:rgba(241,238,230,.08); }
}
.btn:active{ transform:scale(.97); }

.enl{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.04em;
  color:var(--carmin); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity .2s var(--ease);
}
@media (hover:hover){ .enl:hover{ opacity:.65; } }
.enl--mapa{ display:inline-block; margin-top:2rem; }

/* ═══════════ CABECERA ═══════════ */
.cab{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.15rem 0; background:transparent;
}
.cab.scrolled{
  background:rgba(20,19,18,.82); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(241,238,230,.1);
}
.cab__in{
  width:var(--env); margin-inline:auto;
  display:flex; align-items:center; gap:2rem;
}
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.marca__ojo{ width:44px; height:auto; opacity:.95; }
.marca__txt{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-cla);
}

.nav{ display:flex; gap:1.9rem; }
.nav a{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.05em;
  text-decoration:none; color:var(--texto-cla2);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav a.active{ color:var(--texto-cla); border-color:var(--salvia); }
@media (hover:hover){ .nav a:hover{ color:var(--texto-cla); } }

.burger{ display:none; background:none; border:0; padding:.6rem; cursor:pointer; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--texto-cla); margin:5px 0; transition:transform .25s var(--ease); }

/* ═══════════ PORTADA ═══════════ */
.portada{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:8rem 0 6rem; overflow:hidden; isolation:isolate;
}
/* halo de neón detrás del ojo */
.portada::before{
  content:""; position:absolute; z-index:-2; inset:0;
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(163,182,159,.16), transparent 70%),
    radial-gradient(40% 34% at 50% 46%, rgba(241,238,230,.10), transparent 72%);
}
/* grano */
.portada::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  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='.4'/%3E%3C/svg%3E");
}

/* El ojo se sale a propósito en móvil (158vw). El recorte va AQUÍ, en su propio
   contenedor: poner overflow-x en html/body mataría el sticky del header y
   dejaría el iframe del mapa en blanco. */
.portada__ojo{
  position:absolute; z-index:-1; inset:0; overflow:hidden;
  display:grid; place-items:center; pointer-events:none;
}
.ojo{
  width:min(94vw, 1180px); height:auto;
  opacity:.5;
  filter:
    drop-shadow(0 0 2px rgba(241,238,230,.95))
    drop-shadow(0 0 14px rgba(241,238,230,.55))
    drop-shadow(0 0 46px rgba(163,182,159,.42))
    drop-shadow(0 0 110px rgba(163,182,159,.22));
  will-change:transform;
  transition:opacity .8s var(--ease);
}

.portada__in{ position:relative; width:var(--env); text-align:center; }
/* velo bajo el texto: el neón es precioso pero se come el cuerpo pequeño.
   Elipse oscura centrada en la columna de texto, no en toda la portada. */
.portada__in::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(120%, 1000px); height:150%;
  background:radial-gradient(52% 46% at 50% 52%, rgba(20,19,18,.86) 0%, rgba(20,19,18,.62) 46%, rgba(20,19,18,0) 78%);
  pointer-events:none;
}
.portada__h1{
  font-family:var(--display);
  font-size:clamp(3.5rem, 11.2vw, 10.5rem);
  line-height:.9; letter-spacing:-.045em; color:var(--piedra);
  text-shadow:0 2px 40px rgba(20,19,18,.75), 0 1px 4px rgba(20,19,18,.6);
}
.portada__h1 em{ font-style:italic; color:var(--travertino); }

.portada__sub{
  margin:2rem auto 0; max-width:44ch; color:#D5CCC2;
  font-size:1.0625rem; text-shadow:0 1px 3px rgba(20,19,18,.95), 0 2px 18px rgba(20,19,18,.9);
}
.portada__acciones{ margin-top:2.5rem; display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }

.barra{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap;
  padding:.9rem 1.5rem;
  border-top:1px solid rgba(241,238,230,.14);
  background:rgba(20,19,18,.55); backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.barra__txt{ color:var(--texto-cla); }
.barra__txt--sec{ color:var(--texto-cla2); }
.barra__sep{ width:1px; height:12px; background:rgba(241,238,230,.28); }
.barra__punto{
  width:7px; height:7px; border-radius:50%; background:var(--greige);
  box-shadow:0 0 0 3px rgba(167,154,144,.2); flex:none;
}
.barra__punto.open{ background:var(--salvia-luz); box-shadow:0 0 0 3px rgba(163,182,159,.24); }
.barra__punto.closed{ background:var(--carmin-luz); box-shadow:0 0 0 3px rgba(217,112,126,.2); }

/* ═══════════ TRATAMIENTOS (piedra) ═══════════ */
.trat{ background:var(--piedra); color:var(--texto-osc); padding:7rem 0 7.5rem; }

.bento{
  margin-top:3.5rem;
  display:grid; gap:1px; background:var(--travertino);
  border:1px solid var(--travertino);
  grid-template-columns:repeat(6,1fr);
}
.cel{ background:var(--piedra); padding:2.4rem 2.1rem; grid-column:span 2; }
.cel--grande{ grid-column:span 6; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:3rem; align-items:center; padding:3rem 2.1rem; }
.cel--rostro{ grid-column:span 3; }
.cel--cuerpo{ grid-column:span 3; }
.cel--tinta{ grid-column:span 4; background:var(--tinta); color:var(--texto-cla); }
.cel--pequena{ grid-column:span 2; }
.cel--cta{
  grid-column:span 4; background:var(--travertino); color:var(--texto-osc);
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
}
/* sobre travertino hace falta bajar bastante: #5F544A daba 4,0:1 y el suelo es 4,5. */
.cel--cta .cel__n{ color:#443D35; }
.cel--cta .cel__p{ color:#3E372F; margin-bottom:0; }
.cel--cta .btn{ align-self:flex-start; }

.cel__foto--redonda{ aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--tinta); }
.cel__foto--redonda img{ width:100%; height:100%; object-fit:cover; object-position:center 70%; }

.cel__n{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-osc2); margin-bottom:.5rem;
}
.cel--tinta .cel__n{ color:var(--salvia-luz); }

.cel__h{
  font-family:var(--display); font-size:clamp(1.9rem,3.2vw,2.9rem);
  line-height:1.02; letter-spacing:-.03em; margin-bottom:1.1rem;
}
.cel__p{ color:var(--texto-osc2); font-size:.9875rem; margin-bottom:1.4rem; max-width:48ch; }
.cel--tinta .cel__p{ color:var(--texto-cla2); }
.cel__p--sec{ margin-top:1.25rem; margin-bottom:0; font-style:italic; }
.cel__p em{ font-family:var(--display); font-style:italic; font-size:1.1em; }

.lista li{ padding:.85rem 0; border-top:1px solid var(--travertino); }
.cel--tinta .lista li{ border-color:var(--tinta-3); }
.lista li:first-child{ border-top:0; padding-top:0; }
.lista b{ display:block; font-weight:500; font-size:1rem; letter-spacing:-.005em; }
.lista span{ display:block; color:var(--texto-osc2); font-size:.875rem; line-height:1.5; margin-top:.15rem; }
.cel--tinta .lista span{ color:var(--texto-cla2); }

.cita-min{
  margin-top:1.5rem; font-family:var(--display); font-style:italic;
  font-size:1.35rem; color:var(--salvia-luz); line-height:1.25;
}

/* ═══════════ EL CENTRO (tinta, foto a sangre) ═══════════ */
.centro{ background:var(--tinta); padding-bottom:7rem; }
.centro__foto{ margin:0; position:relative; }
.centro__foto img{
  width:100%; height:min(62svh, 560px); object-fit:cover; object-position:center 46%;
}
.centro__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,19,18,.15) 0%, rgba(20,19,18,.05) 45%, var(--tinta) 100%);
}
.centro__txt{ margin-top:-3rem; position:relative; z-index:1; padding-top:3rem; }

.cifras{
  margin-top:3.5rem; display:grid; gap:1px;
  grid-template-columns:repeat(4,1fr); background:var(--tinta-3);
  border:1px solid var(--tinta-3);
}
.cifra{ background:var(--tinta); padding:1.9rem 1.3rem; text-align:left; }
.cifra b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1; color:var(--piedra);
  letter-spacing:-.035em;
}
/* OJO: `> span`. Con `.cifra span` a secas se pisaba también el <span data-count>
   que va DENTRO del <b>, y el número salía en mono a 12px mientras el «+» quedaba
   gigante. El selector de hijo directo solo alcanza a la etiqueta. */
.cifra > span{
  display:block; margin-top:.55rem; font-family:var(--mono);
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-cla2);
}
.cifra b span{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }

.galeria{ margin-top:1px; display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:1px; background:var(--tinta-3); border:1px solid var(--tinta-3); border-top:0; }
.shot{ margin:0; padding:0; border:0; background:var(--tinta); cursor:zoom-in; overflow:hidden; display:block; }
.shot img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s var(--ease), opacity .3s var(--ease); }
@media (hover:hover){ .shot:hover img{ transform:scale(1.04); opacity:.86; } }

/* ═══════════ JUANA MARÍA (piedra, asimétrica) ═══════════ */
.jm{ background:var(--piedra); color:var(--texto-osc); padding:7rem 0; }
.jm__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.jm__foto{ margin:0; }
.jm__foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 22%; }
.jm__foto figcaption{
  margin-top:.9rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texto-osc2);
}
.jm__cita{ margin:2rem 0 0; padding-left:1.6rem; border-left:2px solid var(--carmin); }
.jm__cita p{
  font-family:var(--display); font-size:clamp(1.35rem,2.3vw,1.8rem);
  line-height:1.28; color:var(--texto-osc); letter-spacing:-.02em;
}
.jm__cita p + p{ margin-top:.9rem; }
.jm__cita footer{
  margin-top:1.1rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-osc2);
}
.lema{
  margin-top:2.25rem; font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.45rem); color:var(--carmin); line-height:1.3;
}

/* ═══════════ OPINIONES (tinta) ═══════════ */
.opi{ background:var(--tinta); padding:7rem 0; }
.opi__cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.opi__meta{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-cla2); }
.opi__car{ margin-top:3rem; border-top:1px solid var(--tinta-3); }
.op{ margin:0; padding:3.25rem 0 2.5rem; }
.op blockquote{
  margin:0; font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.2; letter-spacing:-.028em; color:var(--piedra); max-width:26ch;
}
.op figcaption{
  margin-top:1.5rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-cla2);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
.op figcaption span{ color:var(--salvia-luz); letter-spacing:.15em; }

.opi__nav{ display:flex; align-items:center; gap:1.25rem; padding-bottom:.5rem; }
.opi__nav button{
  background:none; border:1px solid var(--tinta-3); color:var(--texto-cla);
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1rem;
  transition:border-color .22s var(--ease), background-color .22s var(--ease);
}
@media (hover:hover){ .opi__nav button:hover{ border-color:var(--salvia); background:rgba(124,142,121,.12); } }
.opi__puntos{ display:flex; gap:.55rem; margin-right:auto; }
.opi__puntos button{
  width:8px; height:8px; padding:0; border-radius:50%; border:0;
  background:var(--tinta-3); cursor:pointer; transition:background-color .25s var(--ease);
}
.opi__puntos button.active{ background:var(--salvia-luz); }

/* ═══════════ VISÍTANOS (piedra) ═══════════ */
.vis{ background:var(--piedra); color:var(--texto-osc); padding:7rem 0 7.5rem; }
.vis__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(2.5rem,5vw,4.5rem); }

.horario{ margin-top:2.5rem; border-top:1px solid var(--travertino); max-width:30rem; }
.horario .row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.72rem 0; border-bottom:1px solid var(--travertino);
  font-size:.9375rem; color:var(--texto-osc2);
}
.horario .row.today{ color:var(--texto-osc); font-weight:500; }
.horario .row.today span:first-child::after{ content:" · hoy"; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--carmin); }

.horario__estado{
  margin-top:1.25rem; display:flex; align-items:center; gap:.65rem;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.04em; color:var(--texto-osc);
}

.contacto{ margin-top:2.5rem; border-top:1px solid var(--travertino); max-width:30rem; }
.contacto li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.78rem 0; border-bottom:1px solid var(--travertino);
}
.contacto span{ font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-osc2); }
.contacto a{ text-decoration:none; font-size:1rem; border-bottom:1px solid transparent; transition:border-color .2s var(--ease); }
@media (hover:hover){ .contacto a:hover{ border-color:var(--texto-osc); } }

.form{ background:var(--tinta); color:var(--texto-cla); padding:2.4rem 2.1rem 2.1rem; }
.form__h{ font-family:var(--display); font-size:1.9rem; letter-spacing:-.03em; }
.form__p{ margin-top:.5rem; color:var(--texto-cla2); font-size:.9375rem; }
.form label{
  display:block; margin-top:1.35rem; font-family:var(--mono);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-cla2);
}
.form input, .form select{
  display:block; width:100%; margin-top:.5rem; padding:.8rem .9rem;
  background:var(--tinta-2); border:1px solid var(--tinta-3); border-radius:2px;
  color:var(--texto-cla); font-family:var(--cuerpo); font-size:.9375rem;
  transition:border-color .2s var(--ease);
}
.form input::placeholder{ color:#7C736B; }
.form input:focus, .form select:focus{ outline:none; border-color:var(--salvia); }
.form .btn{ margin-top:1.75rem; }
.form__nota{ margin-top:.9rem; font-size:.8125rem; color:var(--texto-cla2); }

.mapa{ margin-top:1.5rem; border:1px solid var(--travertino); background:var(--piedra-2); }
.mapa iframe{ width:100%; height:300px; border:0; display:block; filter:grayscale(1) contrast(.95); }

/* ═══════════ PIE ═══════════ */
.pie{ background:var(--tinta); padding:5rem 0 2rem; border-top:1px solid var(--tinta-3); }
.pie__in{ display:grid; gap:3rem; }
.pie__marca{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.pie__marca img{ opacity:.85; }
.pie__lema{ font-family:var(--display); font-size:1.5rem; color:var(--travertino); letter-spacing:-.02em; }
.pie__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.pie__cols h4{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--salvia-luz); margin-bottom:.85rem;
}
.pie__cols p{ color:var(--texto-cla2); font-size:.9375rem; line-height:1.85; }
.pie__cols a{ text-decoration:none; border-bottom:1px solid rgba(185,174,164,.35); }
@media (hover:hover){ .pie__cols a:hover{ color:var(--piedra); border-color:var(--piedra); } }

.pie__baja{ border-top:1px solid var(--tinta-3); padding-top:1.75rem; }
.pie__legal{
  display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; color:var(--texto-cla2);
}
.pie__legal a{ text-decoration:none; border-bottom:1px solid transparent; }
@media (hover:hover){ .pie__legal a:hover{ color:var(--piedra); border-color:var(--piedra); } }
.demo-aviso{ margin-top:.9rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:#8A817A; }

/* ═══════════ barra de llamada móvil ═══════════ */
.callbar{ display:none; }

/* ═══════════ lightbox ═══════════ */
.lightbox__close{
  position:absolute; top:1.25rem; right:1.5rem; z-index:2;
  background:none; border:0; color:var(--piedra); font-size:2.25rem;
  line-height:1; cursor:pointer; padding:.35rem .7rem;
}
[data-lightbox] img{ max-width:92vw; max-height:88svh; object-fit:contain; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .cel--grande{ grid-template-columns:1fr; gap:2rem; }
  .cel--grande .cel__foto--redonda{ max-width:260px; }
  .cel--rostro, .cel--cuerpo, .cel--tinta{ grid-column:span 6; }
  .cel--pequena{ grid-column:span 3; }
  /* las dos pequeñas comparten fila (3+3); la de acción cierra a fila entera,
     si no se queda sola dejando media rejilla vacía */
  .cel--cta{ grid-column:span 6; flex-direction:row; align-items:flex-end; }
  .cel--cta .btn{ align-self:auto; flex:none; }
  .jm__grid{ grid-template-columns:1fr; }
  .jm__foto img{ aspect-ratio:4/3; object-position:center 20%; }
  .vis__grid{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:repeat(2,1fr); }
  .galeria{ grid-template-columns:1fr 1fr; }
  .galeria .shot:last-child{ grid-column:span 2; }
}

@media (max-width:760px){
  :root{ --env: calc(100% - 2.25rem); }
  .nav{
    position:fixed; inset:0; z-index:99;
    flex-direction:column; align-items:center; justify-content:center; gap:2rem;
    background:rgba(20,19,18,.97); backdrop-filter:blur(10px);
    transform:translateY(-100%); transition:transform .35s var(--ease);
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:1.15rem; letter-spacing:.06em; }
  .burger{ display:block; position:relative; z-index:101; }
  .cab__cta{ display:none; }

  .portada{ min-height:100svh; padding:7rem 0 7rem; }
  .ojo{ width:158vw; max-width:none; opacity:.42; }
  .portada__h1{ font-size:clamp(3rem,15vw,5rem); }
  .portada__acciones{ flex-direction:column; }
  .portada__acciones .btn{ width:100%; }
  .barra{ font-size:.6875rem; gap:.6rem; padding:.75rem 1rem 5rem; }
  .barra__sep, .barra__txt--sec{ display:none; }

  .trat, .jm, .opi, .vis{ padding:4.5rem 0; }
  .cel{ padding:2rem 1.5rem; }
  .cel--pequena, .cel--rostro, .cel--cuerpo, .cel--tinta, .cel--grande, .cel--cta{ grid-column:span 6; }
  .cifras{ grid-template-columns:1fr 1fr; }
  .galeria{ grid-template-columns:1fr; }
  .galeria .shot:last-child{ grid-column:span 1; }
  .centro__foto img{ height:44svh; }
  .pie__cols{ grid-template-columns:1fr; gap:1.75rem; }

  .callbar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed;
    left:0; right:0; bottom:0; z-index:98;
    border-top:1px solid var(--tinta-3); background:rgba(20,19,18,.96);
    backdrop-filter:blur(10px);
  }
  .callbar a{
    padding:1rem; text-align:center; text-decoration:none;
    font-family:var(--mono); font-size:.8125rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--texto-cla);
  }
  .callbar a:last-child{ background:var(--carmin); color:#fff; }
  body{ padding-bottom:3.3rem; }
  .pie{ padding-bottom:4.5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ojo{ transform:none !important; }
}