/* Páginas de servicio y de estilo de la N2c (Tinta). Se carga después de n2.css y n2b.css. */
.p-hero{padding:150px 0 0}
.p-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:56px;align-items:end}
.p-hero.sin-foto .p-hero-in{grid-template-columns:1fr}
.migas{font-size:14px;color:var(--mute);margin-bottom:28px}
.migas a{border-bottom:1px solid var(--line-fuerte)}
.migas a:hover{color:var(--fg)}
.migas [aria-current]{color:var(--fg)}
.p-kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.p-hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(52px,7.4vw,118px);line-height:.88;margin:14px 0 26px;max-width:14ch}
.p-hero.sin-foto h1{max-width:18ch}
.p-intro{font-size:20px;line-height:1.55;max-width:48ch}
.p-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.p-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.p-foto figcaption{color:var(--mute);font-size:14px;margin-top:8px}

.p-bloque{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start}
.p-bloque+.p-bloque{margin-top:72px}
.p-bloque h2{font-size:clamp(40px,4.6vw,72px)}
.p-txt p{color:var(--mute);font-size:18px;max-width:62ch}
.p-txt p+p{margin-top:16px}
.p-txt a{color:var(--fg);border-bottom:1px solid var(--line-fuerte)}
.p-txt a:hover{border-color:var(--fg)}

.p-cita{border-top:1px solid var(--line-fuerte);padding-top:28px}
.p-cita blockquote{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.6vw,54px);line-height:1.02;max-width:30ch}
.p-cita figcaption{margin-top:18px;color:var(--mute)}

.p-tira{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.p-tira img{width:100%;aspect-ratio:4/5;object-fit:cover}

.p-otros{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin-top:40px}
.p-otros a{display:block;border-top:1px solid var(--line);padding:18px 0 22px}
.p-otros b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;color:#3b3835;transition:color .25s}
.p-otros span{display:block;color:var(--mute);font-size:15px;margin-top:8px}
.p-otros a:hover b,.p-otros a:focus-visible b{color:var(--fg)}

.p-estilos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 18px}
.p-est{display:block}
.p-est .img{aspect-ratio:4/5;overflow:hidden;background:var(--card);display:grid;place-items:center}
.p-est img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .5s,transform .5s}
.p-est:hover img,.p-est:focus-visible img{filter:none;transform:scale(1.03)}
.p-est .sin{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.6vw,56px);line-height:.9;text-transform:uppercase;text-align:center;padding:12px;color:transparent;-webkit-text-stroke:1px #4a4743}
.p-est b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;margin-top:14px}
.p-est span{display:block;color:var(--mute);font-size:15px;margin-top:6px}


@media (max-width:1100px){.p-otros,.p-estilos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .p-hero{padding-top:112px}
  .p-hero-in{grid-template-columns:1fr;gap:30px}
  .p-hero h1{font-size:13vw}
  .p-intro{font-size:18px}
  .p-bloque{grid-template-columns:1fr;gap:14px}
  .p-bloque+.p-bloque{margin-top:48px}
  .p-txt p{font-size:17px}
  .p-tira,.p-otros,.p-estilos{grid-template-columns:1fr 1fr}
  .p-otros b,.p-est b{font-size:24px}
}
/* textos legales */
.legal-sec{padding-top:40px}
.legal-txt{max-width:820px}
.legal-txt h2{font-size:clamp(26px,2.6vw,36px);margin:44px 0 14px}
.legal-txt h2:first-child{margin-top:0}
.legal-txt p{color:var(--mute);font-size:16px;margin-bottom:12px;max-width:72ch}
.pie span a{border-bottom:1px solid var(--line-fuerte)}
/* enlaces destacados (tatuajes pequeños, precios) */
.p-hub-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.p-hub-links a{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;border-bottom:1px solid var(--line-fuerte);padding-bottom:4px}
.p-hub-links a:hover{border-color:var(--fg)}
.mas-precios{color:var(--fg);border-bottom:1px solid var(--line-fuerte)}
.p-hero h1.largo{font-size:clamp(44px,5.6vw,92px)}
@media (max-width:820px){.p-hero h1.largo{font-size:11vw}}