/* ============================================================
   CHICHARRO TATTOO GALLERY — hoja de estilo
   Fondo negro. Tipografia en grises; los titulares en casi blanco.
   El unico blanco puro del sitio es el logo de la cabecera.
   Titulares: Helvetica Black (nativa en Mac/iOS), con Inter 900
   como equivalente en Windows y Android.
   ============================================================ */

:root{
  /* --- Fondos --- */
  --bg:         #000000;   /* negro */
  --bg-soft:    #0C0C0C;   /* seccion ligeramente levantada */
  --bg-raised:  #141414;   /* pie y cajas */

  /* --- Tipografia (escala de grises) --- */
  --ink-bright: #EDEDED;   /* casi blanco: solo titulares */
  --ink-soft:   #C4C4C4;   /* gris claro: negritas y botones */
  --ink:        #A6A6A6;   /* gris medio: texto corrido */
  --ink-dim:    #7C7C7C;   /* gris oscuro: secundario, notas */
  --ink-faint:  #5A5A5A;   /* gris mas oscuro: legales, pie */
  --pure-white: #FFFFFF;   /* SOLO el logo */

  --line:       #262626;
  --line-soft:  #1A1A1A;

  /* --- Tipografias --- */
  --font-display: 'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --font-body:    -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* --- Escala --- */
  --t-hero:    1.75rem;
  --t-section: 1.25rem;
  --t-body:    1.0625rem;
  --t-label:   .8125rem;

  --maxw:      680px;
  --maxw-wide: 1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg);}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:#333; color:var(--ink-bright);}

/* ---------- Titulares ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:900;
  color:var(--ink-bright); line-height:1.2;
  letter-spacing:-.02em; margin:0 0 1.1rem;
}
h1{font-size:var(--t-hero);}
h2{font-size:var(--t-section);}
h3{font-size:1.0625rem;}
p{margin:0 0 1.35rem;}
p:last-child{margin-bottom:0;}
strong{color:var(--ink-soft); font-weight:600;}

.eyebrow{
  font-family:var(--font-body); font-size:var(--t-label);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 .9rem; font-weight:500;
}

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:var(--maxw-wide); margin:0 auto; padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
/* El logo: unico elemento en blanco puro */
.brand{display:flex; align-items:center; text-decoration:none;}
.brand img{height:34px; width:auto;}
.brand .brand-text{
  font-family:var(--font-display); font-weight:900; font-size:1.0625rem;
  color:var(--pure-white); letter-spacing:.01em; white-space:nowrap;
}
.nav{display:flex; align-items:center; gap:1.75rem;}
.nav a{font-size:.9375rem; text-decoration:none; color:var(--ink); transition:color .2s;}
.nav a:hover{color:var(--ink-bright);}
.nav .btn-sm{
  font-family:var(--font-display); font-weight:900; font-size:.9375rem;
  color:#0A0A0A; background:var(--ink-soft);
  padding:.5rem 1.1rem; border-radius:3px;
}
.nav .btn-sm:hover{color:#0A0A0A; background:var(--ink-bright);}

/* ---------- Estructura ---------- */
section{padding:5.5rem 1.5rem;}
.wrap{max-width:var(--maxw); margin:0 auto;}
.wrap-wide{max-width:var(--maxw-wide); margin:0 auto;}

/* ---------- Portada ---------- */
.hero{
  padding:0; position:relative; min-height:88vh;
  display:flex; align-items:flex-end; background:#000; overflow:hidden;
}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:1;}
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,#000 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.08) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--maxw-wide); margin:0 auto; width:100%;
  padding:0 1.5rem 5.5rem;
}
.hero h1{color:var(--ink-bright); max-width:17ch; margin-bottom:2rem;}
.hero .eyebrow{color:var(--ink-dim);}

/* ---------- Botones ---------- */
.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--font-display); font-weight:900; font-size:.9375rem; letter-spacing:-.01em;
  background:var(--ink-soft); color:#0A0A0A;
  padding:.9rem 2rem; border-radius:3px;
  transition:background .2s;
}
.btn:hover{background:var(--ink-bright); color:#0A0A0A;}
.btn-ghost{
  background:transparent; color:var(--ink-bright);
  border:1px solid var(--ink-faint);
}
.btn-ghost:hover{background:var(--ink-soft); color:#0A0A0A; border-color:var(--ink-soft);}
.center{text-align:center;}

/* ---------- Fotos anchas ---------- */
.figure-wide{padding:0;}
.figure-wide img{width:100%; height:clamp(320px,52vh,560px); object-fit:cover; opacity:.96;}

/* ---------- Galeria ---------- */
.gallery-grid{display:grid; gap:.75rem; grid-template-columns:repeat(4,1fr); margin-top:2.5rem;}
.gallery-grid img{width:100%; aspect-ratio:1/1; object-fit:cover; opacity:.94; transition:opacity .25s;}
.gallery-grid a:hover img{opacity:1;}

.rule{height:1px; background:var(--line); border:0; margin:0 auto; max-width:var(--maxw);}

/* ---------- Reservar ---------- */
.booking{background:var(--bg-soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.booking ul{list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:.55rem;}
.booking li{padding-left:1.4rem; position:relative; color:var(--ink);}
.booking li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--ink-faint);
}

/* ---------- Mapa ---------- */
.map-embed{
  width:100%; height:340px; border:0; margin-top:2rem;
  filter:invert(92%) grayscale(100%) contrast(.85); opacity:.85; transition:opacity .3s;
}
.map-embed:hover{opacity:1;}

/* ---------- Blog ---------- */
.post-list{display:grid; gap:0; margin-top:3rem;}
.post-card{
  display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:center;
  padding:2.25rem 0; border-top:1px solid var(--line); text-decoration:none; transition:opacity .2s;
}
.post-card:last-child{border-bottom:1px solid var(--line);}
.post-card:hover{opacity:.9;}
.post-card:hover h2{color:var(--ink-bright);}
.post-card img{width:100%; aspect-ratio:4/3; object-fit:cover; opacity:.94;}
.post-card:hover img{opacity:1;}
.post-meta{
  font-family:var(--font-body); font-size:var(--t-label); color:var(--ink-dim);
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .5rem; font-weight:500;
}
.post-card h2{margin:0 0 .6rem; font-size:1.125rem; transition:color .2s;}
.post-card p{margin:0; color:var(--ink-dim); font-size:.9375rem;}

/* ---------- Articulo ---------- */
.post-hero img{width:100%; height:clamp(260px,44vh,460px); object-fit:cover; opacity:.96;}
article h2{margin-top:2.5rem;}
article h3{margin-top:2rem;}
article ul{margin:0 0 1.6rem; padding-left:0; list-style:none;}
article ul li{padding-left:1.4rem; position:relative; margin-bottom:.6rem;}
article ul li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--ink-faint);
}
.back{font-size:.9375rem; color:var(--ink-dim); text-decoration:none; display:inline-block; margin-bottom:2rem;}
.back:hover{color:var(--ink-bright);}
.cta-box{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  padding:2.5rem 1.5rem; margin-top:3.5rem; text-align:center;
}
.cta-box p{max-width:44ch; margin:0 auto 1.5rem;}

/* ---------- Cierre de articulo ---------- */
.comments{border-top:1px solid var(--line); margin-top:3.5rem; padding-top:2.5rem;}
.comments h2{margin-top:0;}

/* ---------- Legales ---------- */
.legal h2{font-size:1.25rem; margin-top:2.25rem;}
.legal p,.legal li{color:var(--ink);}
.legal ul{margin:0 0 1.5rem; padding-left:0; list-style:none;}
.legal ul li{padding-left:1.4rem; position:relative; margin-bottom:.5rem;}
.legal ul li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--ink-faint);
}
.legal a{color:var(--ink-bright);}
.todo{
  background:var(--bg-raised); border-left:3px solid var(--ink-faint);
  padding:.9rem 1.1rem; font-size:.9375rem; margin:1.25rem 0; color:var(--ink);
}

/* ---------- Pie ---------- */
.site-footer{
  background:var(--bg-raised); color:var(--ink-dim);
  border-top:1px solid var(--line-soft);
  padding:4rem 1.5rem 2.5rem; font-size:.9375rem;
}
.footer-grid{max-width:var(--maxw-wide); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem;}
.site-footer h4{
  font-family:var(--font-display); font-weight:900; color:var(--ink-bright);
  font-size:.9375rem; letter-spacing:-.01em; text-transform:none; margin:0 0 1.1rem;
}
.site-footer a{color:var(--ink-dim); text-decoration:none; transition:color .2s;}
.site-footer a:hover{color:var(--ink-bright);}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;}
.footer-bottom{
  max-width:var(--maxw-wide); margin:3rem auto 0; padding-top:1.75rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8125rem; color:var(--ink-faint);
}
.footer-bottom a{color:var(--ink-faint);}
.footer-bottom a:hover{color:var(--ink-dim);}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:100;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.5); transition:transform .2s;
}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:30px; height:30px; fill:#0A0A0A;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  :root{--t-hero:1.5rem; --t-section:1.1875rem;}
  section{padding:3.75rem 1.5rem;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .post-card{grid-template-columns:1fr; gap:1rem;}
  .footer-grid{grid-template-columns:1fr; gap:2.25rem;}
  .nav{gap:1rem;}
  .nav a.nav-link{display:none;}
  .brand img{height:26px;}
  .hero{min-height:80vh;}
  .hero-content{padding-bottom:3.5rem;}
}