/* ==========================================================================
   54 · Trazo de tinta
   Para estudios de micropigmentación, cejas, labios y tatuaje fino con logo de
   pincel. Sale del manual de marca: la firma en pincel azul tinta (#263468), la
   escala de azules (#1A4B99, #2075BB, #27A1D2, #6DC7E1, #78C8D3), las manchas de
   acuarela celeste y las etiquetas en letras de máquina de escribir muy espaciadas.
   Oswald, condensada como la Saker Sans del manual, para títulos; Cutive Mono, de
   máquina como la Orator, para etiquetas; Instrument Sans para leer.
   El celeste de la marca no aguanta texto blanco: sobre celeste siempre va tinta.
   ========================================================================== */

:root{
  --papel:   #FAFBFC;
  --niebla:  #EEF6F9;
  --blanco:  #FFFFFF;
  --tinta:   #263468;
  --tinta-2: #1A4B99;
  --azul:    #2075BB;
  --cian:    #27A1D2;
  --celeste: #6DC7E1;
  --agua:    #78C8D3;
  --texto:   #1C2442;
  --texto-2: #4A5575;
  --linea:   rgba(38,52,104,.14);
  --linea-clara: rgba(255,255,255,.22);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--papel); color:var(--texto); line-height:1.72; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--f-titulo); font-weight:500; line-height:1.05; text-transform:uppercase; letter-spacing:.01em}
h1 em, h2 em{font-style:normal; color:var(--azul)}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1180px,92vw); margin:0 auto}
.sec{padding:100px 0; position:relative}
.sec-head{max-width:680px; margin:0 auto 52px; text-align:center}
.sec-head h2{font-size:clamp(2.4rem,5vw,3.8rem); margin-bottom:14px}
.sec-head p{margin:0; color:var(--texto-2)}
.eyebrow{display:none}

/* Letras de máquina de escribir, muy espaciadas, como en el manual. */
.an-maquina{font-family:"Cutive Mono", ui-monospace, "Courier New", monospace; font-weight:400; text-transform:uppercase;
  letter-spacing:.32em; font-size:.82rem; color:var(--tinta-2); margin:0 0 12px}

/* El logo es tinta negra sobre transparente: se pinta con máscara para darle el azul de
   la marca. Si en el panel suben un logo sin transparencia, se ve como un bloque azul;
   por eso la máscara solo se usa en los lugares de firma. */
.an-marca, .an-firma{display:block; background:var(--tinta);
  -webkit-mask-position:center; mask-position:center; -webkit-mask-size:100% auto; mask-size:100% auto;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
/* La imagen de la máscara va en el style del elemento, no en una variable: un url() dentro de
   una custom property se resuelve contra la hoja de estilos (theme/img/logo.png) y no se ve. */

/* ---------- Encabezado ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(250,251,252,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea); transition:box-shadow .3s var(--ease)}
header.stuck{box-shadow:0 14px 30px -26px rgba(38,52,104,.5)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.an-marca{flex:none; width:156px; height:78px; transition:height .3s var(--ease)}
header.stuck .an-marca{height:62px}
.an-marca-tx{display:flex; flex-direction:column; min-width:0}
/* El nombre ya está escrito en el logo: el texto queda para lectores de pantalla y para
   cuando el panel cambie el logo por una marca sola. */
.an-marca-tx b{font-family:var(--f-titulo); font-weight:500; font-size:1.1rem; line-height:1.1; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.an-marca-tx i{font-style:normal; font-size:.72rem; color:var(--texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
header .an-marca-tx{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.nav-links{display:flex; gap:26px}
.nav-links a{position:relative; text-decoration:none; padding:6px 0; font-family:"Cutive Mono", ui-monospace, monospace; text-transform:uppercase; letter-spacing:.14em; font-size:.86rem; color:var(--tinta)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--celeste); transform:scaleX(0); transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; border-radius:4px;
  border:1.5px solid transparent; cursor:pointer; text-transform:uppercase; letter-spacing:.08em; transition:all .3s var(--ease)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--tinta); color:#fff}
.btn-primary:hover{background:var(--azul)}
.btn-ghost{background:transparent; color:var(--tinta); border-color:var(--tinta)}
.btn-ghost:hover{background:var(--tinta); color:#fff}
.btn-ghost:not(.btn-sm){padding:1rem 2rem; font-weight:600}
.btn-claro{background:var(--celeste); color:var(--tinta); padding:1rem 2rem; font-weight:700}
.btn-claro:hover{background:#fff}
.btn-wa{background:#25D366; color:#06280F}

.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background:linear-gradient(90deg,var(--tinta),var(--cian),var(--agua))}

/* Manchas de acuarela: capas de círculos celestes que se funden. */
.an-mancha{position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(2px);
  background:
    radial-gradient(circle at 30% 40%, rgba(109,199,225,.55) 0 18%, rgba(109,199,225,0) 42%),
    radial-gradient(circle at 62% 58%, rgba(39,161,210,.35) 0 14%, rgba(39,161,210,0) 38%),
    radial-gradient(circle at 48% 30%, rgba(120,200,211,.45) 0 22%, rgba(120,200,211,0) 50%),
    radial-gradient(circle at 20% 70%, rgba(32,117,187,.28) 0 4%, rgba(32,117,187,0) 8%),
    radial-gradient(circle at 80% 26%, rgba(32,117,187,.3) 0 3%, rgba(32,117,187,0) 6%)}

/* ---------- 1 · Portada ---------- */
.an-hero{position:relative; overflow:hidden; background:var(--papel)}
.an-mancha.m1{left:-6%; top:6%; width:min(620px,70vw); aspect-ratio:1}
.an-mancha.m2{right:-8%; bottom:-10%; width:min(420px,50vw); aspect-ratio:1; opacity:.7}
.an-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,5vw,80px);
  align-items:center; padding-block:clamp(40px,5vw,76px) 40px}
/* El logo es un cuadrado con la firma en la franja del medio: a todo el ancho de la caja se
   recorta solo el aire de arriba y abajo, nunca las letras de los lados. */
.an-firma{width:min(100%,520px); aspect-ratio:512/250; margin:0 0 6px}
.an-hero h1{font-size:clamp(3.2rem,7vw,6.2rem); line-height:.95; margin-top:14px; font-weight:600}
.an-hero h1 span, .an-hero h1 em{display:inline}
.an-hero h1 em{margin-left:.25em}
.an-lead{font-size:1.08rem; color:var(--texto-2); max-width:48ch; margin:20px 0 0}
.an-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.an-panel{position:relative; margin:0; justify-self:center; width:min(100%,400px); padding:12px; background:var(--blanco);
  box-shadow:0 34px 60px -40px rgba(38,52,104,.6); transform:rotate(1.5deg)}
.an-panel img{width:100%; height:auto; aspect-ratio:461/612; object-fit:cover}
/* Dentro del panel: el efecto barrido recorta lo que se sale. */
/* La ceja a pincel va como trazo junto a los títulos: encima de una foto de cejas se leía
   como una raya sobre la frente de la modelo. */
.an-ceja{display:block; width:min(220px,55%); height:auto; margin:2px 0 0; fill:var(--cian)}
.anim .an-ceja{clip-path:inset(0 100% 0 0); transition:clip-path 1.3s var(--ease) .6s}
.anim .visto .an-ceja, .anim .an-ceja.visto{clip-path:inset(0 0 0 0)}
.an-panel figcaption{margin:12px 4px 2px; font-size:.74rem}
.an-firmas{position:relative; z-index:1; list-style:none; padding-left:0; margin-block:10px 0; padding-bottom:70px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.an-firmas li{display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-top:2px solid var(--tinta); background:rgba(255,255,255,.7)}
.an-firmas svg{width:22px; height:22px; flex:none; color:var(--cian); margin-top:2px}
.an-firmas b{display:block; font-family:var(--f-titulo); font-weight:500; text-transform:uppercase; font-size:1.05rem; color:var(--tinta)}
.an-firmas span{font-size:.92rem; color:var(--texto-2)}
.pista{color:var(--tinta)}

/* ---------- 2 · Servicios con precio ---------- */
.an-servicios{background:var(--niebla)}
.an-tarjetas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.an-tarjeta{display:flex; flex-direction:column; background:var(--blanco); box-shadow:0 22px 44px -36px rgba(38,52,104,.55)}
.an-tarjeta-foto{position:relative; display:block; overflow:hidden; --lav:var(--celeste)}
.an-tarjeta-foto img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease)}
.an-tarjeta:hover .an-tarjeta-foto img{transform:scale(1.05)}
.an-num{position:absolute; left:12px; top:12px; margin:0; padding:4px 8px; background:var(--papel); color:var(--tinta); font-size:.78rem; letter-spacing:.2em}
.an-tarjeta-tx{display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px; flex:1}
.an-tarjeta-tx h3{font-size:1.4rem}
.an-tarjeta-tx h3 a{text-decoration:none}
.an-tarjeta-tx > p{margin:0; color:var(--texto-2); font-size:.92rem; flex:1}
.an-compra{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:12px; border-top:1px dashed var(--linea)}
.an-precio{font-family:var(--f-titulo); font-weight:600; font-size:1.35rem; color:var(--tinta)}
.an-aviso{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:start; max-width:880px; margin:40px auto 0; padding:18px 22px;
  background:var(--blanco); border-left:4px solid var(--cian)}
.an-aviso .an-maquina{margin:3px 0 0; color:var(--tinta)}
.an-aviso p{margin:0; color:var(--texto-2); font-size:.94rem}
.an-aviso.compacto{grid-template-columns:1fr; margin:16px 0 0; max-width:none; background:var(--niebla)}

/* ---------- 3 · La carta ---------- */
.an-carta{background:var(--tinta); color:#fff}
.an-carta .an-maquina{color:var(--celeste)}
.an-carta .sec-head h2{color:#fff}
.an-carta .sec-head p{color:rgba(255,255,255,.8)}
.an-grupos{columns:2 380px; column-gap:40px}
.an-grupo{break-inside:avoid; margin:0 0 30px; padding:26px 26px 12px; border:1px solid var(--linea-clara)}
.an-grupo h3{display:flex; align-items:baseline; gap:12px; font-size:1.6rem; margin-bottom:10px; padding-bottom:12px; border-bottom:1px solid var(--linea-clara)}
.an-grupo h3 .an-maquina{margin:0; font-size:.8rem}
.an-grupo ul{list-style:none; margin:0; padding-left:0}
.an-grupo li{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px dashed var(--linea-clara)}
.an-grupo li:last-child{border-bottom:0}
.an-grupo li > div{min-width:0}
.an-grupo b{display:block; font-weight:600; color:#fff}
.an-grupo li p{margin:3px 0 0; font-size:.88rem; color:rgba(255,255,255,.72)}
.an-grupo li a{flex:none; margin-top:2px; font-family:"Cutive Mono", ui-monospace, monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem;
  color:var(--tinta); background:var(--celeste); padding:6px 10px; text-decoration:none; transition:background .3s var(--ease)}
.an-grupo li a:hover{background:#fff}

/* ---------- 4 · Historia ---------- */
.an-historia{background:var(--papel)}
.an-his-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,76px); align-items:center}
.an-his-firma{position:relative; text-align:center; padding:40px 10px}
.an-mancha.m3{left:50%; top:50%; width:min(460px,90%); aspect-ratio:1; translate:-50% -50%}
.an-firma.grande{position:relative; z-index:1; width:100%; margin:0 auto}
.an-cierre{position:relative; z-index:1; margin:10px auto 0; max-width:30ch; font-family:var(--f-titulo); text-transform:uppercase; font-size:1.3rem; color:var(--tinta)}
.an-historia h2{font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:16px}
.hist > summary{color:var(--tinta-2)}
.an-mv{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.an-mv > div{padding:18px 18px 16px; background:var(--niebla); border-top:2px solid var(--tinta)}
.an-mv h3{margin:0 0 8px; font-size:.78rem}
.an-mv p{margin:0; color:var(--texto-2); font-size:.93rem}

/* ---------- 5 · Cómo agendar ---------- */
.an-agendar{background:var(--niebla)}
.an-pasos{list-style:none; margin:0; padding-left:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.an-pasos li{position:relative; padding:28px 24px 24px; background:var(--blanco)}
.an-paso-n{display:block; font-family:var(--f-titulo); font-weight:300; font-size:4rem; line-height:.9; color:var(--celeste); margin-bottom:8px}
.an-pasos h3{font-size:1.5rem; margin-bottom:6px}
.an-pasos p{margin:0; color:var(--texto-2)}
.an-agendar-cta{text-align:center; margin-top:40px}
.an-agendar-cta .btn{padding:1.05rem 2.2rem; font-weight:700}

/* ---------- 6 · Contacto ---------- */
.an-contacto{background:var(--tinta); color:#fff}
.an-contacto .an-maquina{color:var(--celeste)}
.an-con-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:center}
.an-contacto h2{font-size:clamp(2.8rem,5.4vw,4.2rem); margin-bottom:14px}
.an-con-txt{color:rgba(255,255,255,.84); max-width:40ch; margin-bottom:24px}
.an-redes{list-style:none; margin:0; padding-left:0; display:grid; gap:10px}
.an-redes a{display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid var(--linea-clara); text-decoration:none; transition:background .3s var(--ease)}
.an-redes a:hover{background:var(--tinta-2)}
.an-red-ic{flex:none; width:44px; height:44px; display:grid; place-items:center; background:var(--celeste); color:var(--tinta)}
.an-red-ic svg{width:21px; height:21px}
.an-red-tx{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.an-red-tx small{margin:0; font-size:.7rem; letter-spacing:.2em}
.an-red-tx b{font-weight:600; overflow-wrap:anywhere}

/* ---------- Pie ---------- */
footer{background:#1B2550; color:rgba(255,255,255,.75); padding:52px 0 36px}
.an-marca.clara{background:#fff}
footer .an-marca-tx{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:10px}
.foot-social a{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--linea-clara); color:#fff; transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--celeste); color:var(--tinta); border-color:var(--celeste)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:18px}

/* ---------- Flotantes y piezas compartidas ---------- */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#06280F; text-decoration:none; border-radius:999px; box-shadow:0 18px 38px -16px rgba(37,211,102,.9)}
.anim .wa-float{animation:latirAn 3.4s ease-out infinite}
@keyframes latirAn{0%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 0 rgba(37,211,102,.55)}
  70%,100%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 16px rgba(37,211,102,0)}}
.arriba{background:var(--tinta); color:#fff}
.barra-compra{background:var(--blanco); border-top:1px solid var(--linea)}

/* ---------- Ficha de servicio ---------- */
.ap-cab{position:relative; overflow:hidden; background:var(--papel); border-bottom:1px solid var(--linea)}
.ap-cab .an-mancha.m1{left:auto; right:-6%; top:-40%; width:min(420px,60vw); aspect-ratio:1}
.ap-cab-in{position:relative; z-index:1; padding-block:30px 40px}
.p-migas{font-size:.72rem; letter-spacing:.18em}
.p-migas a{text-decoration:none}
.p-migas span{margin:0 8px; color:var(--cian)}
.ap-cab h1{max-width:20ch; font-size:clamp(2.4rem,5vw,4rem); font-weight:600}
.ap-cuerpo{padding:52px 0 80px; background:var(--papel)}
.ap-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:start; width:min(1180px,92vw); margin:0 auto}
.ap-panel{width:100%; transform:none}
.ap-panel img{aspect-ratio:4/5}
.ap-cab .an-ceja{margin:6px 0 10px; width:min(180px,45%)}
.ap-mini{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.ap-mini button{width:70px; height:70px; padding:0; overflow:hidden; cursor:pointer; background:none; border:2px solid transparent}
.ap-mini button[aria-current="true"]{border-color:var(--tinta)}
.ap-mini img{width:100%; height:100%; object-fit:cover}
.ap-nombre{font-size:clamp(1.9rem,3.2vw,2.6rem); margin-bottom:10px}
.p-desc{color:var(--texto-2)}
.p-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:20px 0 4px}
.p-precio b{font-family:var(--f-titulo); font-weight:600; font-size:2.8rem; line-height:1; color:var(--tinta)}
.p-precio small{color:var(--texto-2)}
.p-opciones{margin:22px 0}
.p-opciones h3{margin-bottom:10px}
.p-chips{display:flex; flex-wrap:wrap; gap:9px}
.p-chips button{min-height:44px; padding:0 16px; border:1.5px solid var(--linea); background:#fff; cursor:pointer; font:inherit; font-weight:600; color:var(--texto)}
.p-chips button[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:#fff}
.p-puntos{list-style:none; margin:22px 0 0; padding-left:0; display:grid; gap:11px}
.p-puntos li{display:flex; gap:11px; align-items:flex-start; color:var(--texto-2)}
.p-puntos svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--cian)}
.p-cta{margin-top:26px}
.btn-block{width:100%}
.p-cta .btn{padding:1.05rem 1.6rem; font-weight:700}
.p-nota{display:flex; align-items:flex-start; gap:9px; margin-top:16px; color:var(--texto-2); font-size:.9rem}
.p-nota svg{width:18px; height:18px; color:var(--tinta); flex:none; margin-top:3px}
.p-agotado{padding:5px 12px; background:var(--niebla); color:var(--tinta); font-weight:700; font-size:.8rem}
.ap-det{padding:0 0 86px; background:var(--papel)}
.ap-ficha{max-width:780px; margin:0 auto; padding:34px 36px 26px; background:var(--blanco); border-top:3px solid var(--tinta)}
.ap-ficha h2{font-size:2rem; margin-bottom:12px}
.ap-ficha .rico{color:var(--texto-2)}
.ap-otros{padding:76px 0; background:var(--niebla)}
.ap-otros .sec-head h2{font-size:clamp(2.1rem,4vw,3rem)}
.ap-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px}
.ap-otro{display:flex; flex-direction:column; gap:4px; text-decoration:none; background:var(--blanco); padding-bottom:14px}
.ap-otro-foto{display:block; overflow:hidden; margin-bottom:10px}
.ap-otro-foto img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
.ap-otro b{padding-inline:14px; font-family:var(--f-titulo); font-weight:500; text-transform:uppercase; font-size:1.15rem; color:var(--tinta)}
.ap-otro small{padding-inline:14px; font-weight:700; color:var(--azul)}

/* ---------- Pantallas ---------- */
@media (max-width:1080px){
  .an-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .an-hero-grid, .an-his-grid, .an-con-grid, .ap-grid{grid-template-columns:minmax(0,1fr)}
  .an-panel{width:min(86%,380px)}
  .an-firmas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .sec{padding:76px 0}
  .nav-links{display:none}
  .an-pasos{grid-template-columns:minmax(0,1fr)}
  .an-mv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .an-marca{width:118px; height:58px}
  header.stuck .an-marca{height:50px}
  .an-hero h1{font-size:clamp(2.8rem,14vw,3.8rem)}
  .an-tarjetas{grid-template-columns:minmax(0,1fr)}
  .an-grupo{padding:22px 18px 8px}
  .an-grupo li{flex-direction:column; gap:8px}
  .an-aviso{grid-template-columns:minmax(0,1fr)}
  .ap-ficha{padding:28px 22px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .an-tarjeta-foto img{transition:none}
  .anim .an-ceja{clip-path:none; transition:none}
  .anim .wa-float{animation:none}
}