/* Kebarbaridad — Vilanova i la Geltrú · propuesta Renoveia
   Negro profundo + hueso del logo + morado neón muestreado del local.
   Neón #8200F8: SOLO decorativo (3,09:1 sobre negro).
   Texto/detalle morado: #B77CF2 (6,71:1 negro · 6,26:1 panel).
   Botón neón: fondo #8200F8 + texto hueso #E7E6E1 (5,08:1 AA). */

:root{
  --negro:#0C0B0E;
  --panel:#161418;
  --os:#E7E6E1;          /* 15,71:1 sobre negro */
  --secundario:#9B968F;  /* 6,69:1 negro · 6,23:1 panel */
  --tinta:#21201E;
  --neon:#8200F8;        /* muestreado del tubo del local */
  --morado:#B77CF2;      /* morado AA para texto */
  --linea:#2A2730;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ancho:1200px;
  --radio:14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--negro);
  color:var(--os);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.sin-scroll{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 20px;
}

.oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- cinta ---------- */
.avis{
  margin:0;
  padding:9px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--linea);
  color:var(--secundario);
  font-size:.76rem;
  letter-spacing:.03em;
  text-align:center;
}

/* ---------- banda BAUM Fest (no fija: se va con el scroll y el
   header sticky sigue anclando a top:0 sin saltos) ---------- */
.banda-baumfest{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:44px;                 /* tap target: tota la banda és l'enllaç */
  padding:8px 16px;
  background:var(--neon);          /* #8200F8 + os = 5,08:1 AA */
  color:var(--os);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.banda-baumfest:hover .banda-baumfest__mas{ text-decoration:underline; }
.banda-baumfest__texto--completo{ display:none; }
.banda-baumfest__mas{ white-space:nowrap; display:none; }

/* ---------- header ---------- */
.capcalera{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(12,11,14,.84);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border-bottom:1px solid var(--linea);
}
.capcalera__interior{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:16px;
}
.marca{
  display:flex;
  align-items:center;
  margin-right:auto;
  min-height:44px;
  padding:8px 0;
}
.marca__logo{
  width:150px;
  height:auto;
  border-radius:6px;   /* el logo vive sobre su hueso original */
}

.hamburguesa{
  width:44px; height:44px;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--linea);
  border-radius:8px;
  cursor:pointer;
}
.hamburguesa__barras,
.hamburguesa__barras::before,
.hamburguesa__barras::after{
  display:block; width:20px; height:2px;
  background:var(--os);
  content:'';
}
.hamburguesa__barras{ position:relative; }
.hamburguesa__barras::before{ position:absolute; top:-6px; }
.hamburguesa__barras::after{ position:absolute; top:6px; }

.nav{ display:none; }
.nav--abierta{
  display:block;
  position:absolute;
  left:0; right:0; top:100%;
  padding:8px 20px 20px;
  background:var(--negro);
  border-bottom:1px solid var(--linea);
}
.nav__lista{
  list-style:none;
  margin:0 0 14px;
  padding:0;
}
.nav__lista a{
  display:block;
  padding:12px 2px;
  min-height:44px;
  font-size:.98rem;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--linea);
}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 26px;
  border-radius:999px;
  border:0;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
}
.boton--neon{
  background:var(--neon);
  color:var(--os);                       /* 5,08:1 AA */
  box-shadow:0 0 18px rgba(130,0,248,.35);
}
.boton--neon:hover,.boton--neon:focus-visible{
  background:#8F1AF9;
  box-shadow:0 0 26px rgba(130,0,248,.5);
}
.boton--ghost{
  background:transparent;
  color:var(--os);
  border:1px solid var(--secundario);
}
.boton--ghost:hover,.boton--ghost:focus-visible{ border-color:var(--os); }
.boton--gran{ padding:14px 32px; font-size:1.02rem; }
.capcalera__reservar{ width:100%; }

/* ---------- hero ---------- */
.hero{ padding:48px 0 56px; }
.hero__cols{ display:grid; gap:36px; }
.kicker{
  margin:0 0 12px;
  color:var(--morado);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
h1{
  margin:0 0 18px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem,8.5vw,4.4rem);
  line-height:1.04;
  letter-spacing:.005em;
}
h1 em,h2 em{ font-style:italic; }
.neon-sub{
  position:relative;
  white-space:nowrap;
}
.neon-sub::after{
  content:'';
  position:absolute;
  left:2%; right:2%; bottom:-4px;
  height:2px;
  background:var(--neon);
  border-radius:2px;
  box-shadow:0 0 10px rgba(130,0,248,.8);
}
.subtitulo{
  margin:0 0 26px;
  max-width:38ch;
  color:var(--secundario);
  font-size:1.1rem;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__foto img{
  width:100%;
  border-radius:var(--radio);
  border:1px solid var(--neon);
  box-shadow:0 0 34px rgba(130,0,248,.22);
}

/* ---------- secciones ---------- */
.seccion{ padding:64px 0; }
.seccion--panel{ background:var(--panel); }

h2{
  margin:0 0 22px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem,6.4vw,3rem);
  line-height:1.1;
}
.texto-grande{
  margin:0 0 18px;
  max-width:46ch;
  font-size:1.12rem;
}

.cols-2{ display:grid; gap:32px; }
.foto-panel img{
  width:100%;
  border-radius:var(--radio);
  border:1px solid var(--linea);
}

/* ---------- servicios ----------
   Móvil: lista de carta compacta (filas clicables de ~92 px).
   Escritorio: tarjetas como hasta ahora, la tarjeta entera es el enlace. */
.tarjetas{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
}
.tarjeta + .tarjeta{ border-top:1px solid var(--linea); }
.tarjeta__enlace{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:14px 18px;
  text-decoration:none;
}
.tarjeta__enlace:hover,.tarjeta__enlace:focus-visible{ background:#1B1820; }
.tarjeta__num{
  color:var(--morado);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.06em;
}
.tarjeta__centro{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-right:auto;
}
.tarjeta__nombre{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.22rem;
  line-height:1.15;
}
.tarjeta__duracion{ color:var(--secundario); font-size:.84rem; }
.tarjeta__desc{ display:none; color:var(--secundario); font-size:.95rem; }
.precio{
  color:var(--morado);
  font-weight:600;
  font-size:1.18rem;
  white-space:nowrap;
}
.tarjeta__cta{ display:none; }

.protesis__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ---------- prótesis ---------- */
.rasgos{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}
.rasgos li{
  padding:7px 16px;
  border:1px solid var(--linea);
  border-radius:999px;
  color:var(--os);
  font-size:.88rem;
}

/* ---------- aceites ---------- */
.subrayado-sub{
  margin:-8px 0 26px;
  color:var(--secundario);
  font-size:1.02rem;
}
.reg{ font-size:.7em; vertical-align:super; }
.galeria-aceites{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:grid;
  gap:14px;
}
.galeria-aceites img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radio);
  border:1px solid var(--linea);
}
.centrado{ text-align:center; }

/* ---------- historia ---------- */
.cita{
  margin:0 0 20px;
  max-width:32ch;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.35rem,4.6vw,1.9rem);
  line-height:1.35;
}
.texto-historia{ color:var(--secundario); }
.foto-ancha{ margin:30px 0 0; }
.foto-ancha img{
  width:100%;
  border-radius:var(--radio);
  border:1px solid var(--linea);
}

/* ---------- baumfest ---------- */
.baumfest{
  padding:56px 0;
  background:
    radial-gradient(ellipse 60% 90% at 50% 120%, rgba(130,0,248,.18), transparent 70%),
    var(--negro);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  text-align:center;
}
.baumfest__interior{ display:grid; justify-items:center; gap:14px; }
.baumfest__titulo{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.6rem,5.4vw,2.5rem);
  line-height:1.15;
  max-width:22ch;
}

/* ---------- opiniones ---------- */
.nota{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(4.6rem,20vw,8.5rem);
  line-height:.9;
  display:flex;
  align-items:baseline;
  gap:14px;
}
.estrella{
  color:var(--morado);
  font-size:.42em;
  transform:translateY(-.5em);
}
.nota__pie{
  margin:12px 0 0;
  color:var(--secundario);
  letter-spacing:.03em;
}
.citas{
  margin-top:34px;
  display:grid;
  gap:16px;
}
.citas blockquote{
  margin:0;
  padding:22px 24px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  font-size:1.05rem;
}
.citas footer{
  margin-top:10px;
  color:var(--secundario);
  font-size:.88rem;
}
.pie-opiniones{
  margin:18px 0 0;
  color:var(--secundario);
  font-size:.84rem;
}

/* ---------- dónde ---------- */
.direccion{ margin:0 0 16px; font-size:1.1rem; }
.telefono{
  display:inline-block;
  min-height:44px;
  padding:4px 0;
  font-family:var(--serif);
  font-size:clamp(2.1rem,8.5vw,3.2rem);
  line-height:1.15;
  text-decoration:none;
}
.telefono:hover,.telefono:focus-visible{ text-decoration:underline; }
.ig{ margin:10px 0 0; }
.ig a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--morado);
  font-weight:600;
  text-decoration:none;
}
.ig a:hover,.ig a:focus-visible{ text-decoration:underline; }
.horario{
  margin:14px 0 0;
  color:var(--secundario);
  line-height:1.9;
}

/* ---------- footer ---------- */
.pie{
  padding:34px 0 40px;
  border-top:1px solid var(--linea);
  background:var(--negro);
}
.pie p{ margin:0; }
.pie__negocio{ font-size:.94rem; }
.pie__negocio a{
  display:inline-block;
  min-height:44px;
  padding:12px 6px;
  margin:-12px -6px;
  line-height:20px;
  text-decoration:none;
  white-space:nowrap;
}
.pie__negocio a:hover{ text-decoration:underline; }
.pie__renoveia{
  margin-top:10px;
  color:var(--secundario);
  font-size:.84rem;
}

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:80; }
.modal[hidden]{ display:none; }
.modal__fondo{
  position:absolute; inset:0;
  background:rgba(12,11,14,.78);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.modal__caja{
  position:relative;
  max-width:440px;
  margin:5vh auto 0;
  padding:30px 26px 26px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:18px;
  box-shadow:0 0 44px rgba(130,0,248,.25);
  width:calc(100% - 32px);
  max-height:90vh;
  overflow-y:auto;
}
.modal__caja h2{ margin:0 0 18px; padding-right:52px; font-size:1.7rem; }
.modal__cerrar{
  position:absolute;
  top:12px; right:12px;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--linea);
  border-radius:50%;
  color:var(--os);
  font-size:1rem;
  cursor:pointer;
}
.modal__cerrar:hover,.modal__cerrar:focus-visible{ border-color:var(--os); }
.modal__lista{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.modal__lista a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:12px 18px;
  background:var(--negro);
  border:1px solid var(--linea);
  border-radius:12px;
  text-decoration:none;
}
.modal__lista a:hover,.modal__lista a:focus-visible{ border-color:var(--neon); }
.modal__lista strong{ font-weight:600; }
.modal__lista span{ color:var(--secundario); font-size:.88rem; }
.modal__whatsapp{
  margin:18px 0 0;
  color:var(--secundario);
  font-size:.92rem;
}
.modal__whatsapp a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--morado);
  font-weight:600;
}

/* ---------- modal antes/después ---------- */
.modal__caja--ancha{ max-width:640px; }
.antes-despues{
  display:grid;
  gap:14px;
  margin:0 0 20px;
}
.antes-despues figure{ margin:0; }
.antes-despues figcaption{
  margin-bottom:8px;
  color:var(--morado);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.antes-despues img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--linea);
}

/* ---------- flotantes ---------- */
.flotante{
  position:fixed;
  right:16px;
  z-index:60;
  display:grid;
  place-items:center;
  border-radius:50%;
  cursor:pointer;
  text-decoration:none;
}
.flotante--whatsapp{
  bottom:18px;
  width:56px;
  height:56px;
  background:var(--neon);
  box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 18px rgba(130,0,248,.35);
}
.flotante--whatsapp:hover,.flotante--whatsapp:focus-visible{ background:#8F1AF9; }
.flotante--subir{
  bottom:86px;
  width:48px;
  height:48px;
  background:var(--panel);
  border:1px solid var(--linea);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.flotante--subir.flotante--visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.flotante--subir:hover,.flotante--subir:focus-visible{ border-color:var(--secundario); }

/* los flotantes no tapan el footer: aire extra al final */
.pie{ padding-bottom:120px; }

/* ---------- anclas ---------- */
#servicios,#aceites,#la-historia,#donde,#opiniones,#protesis{ scroll-margin-top:78px; }

/* ---------- escritorio ---------- */
@media (min-width:760px){
  .hamburguesa{ display:none; }
  .nav{ display:flex; align-items:center; gap:26px; }
  .nav__lista{ display:flex; gap:22px; margin:0; }
  .nav__lista a{
    border-bottom:0;
    padding:11px 2px;
    display:inline-flex;
    align-items:center;
    font-size:.92rem;
    font-weight:400;
    color:var(--secundario);
  }
  .nav__lista a:hover,.nav__lista a:focus-visible{ color:var(--os); }
  .capcalera__reservar{ width:auto; }
  .marca__logo{ width:170px; }

  .hero{ padding:72px 0 84px; }
  .hero__cols{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:56px;
  }
  .hero__foto{ max-width:460px; justify-self:end; }

  .seccion{ padding:92px 0; }

  /* servicios: de lista compacta a tarjetas */
  .tarjetas{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:visible;
  }
  .tarjeta{
    background:var(--panel);
    border:1px solid var(--linea);
    border-radius:var(--radio);
  }
  .tarjeta + .tarjeta{ border-top:1px solid var(--linea); }
  .tarjeta__enlace{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:26px 24px 24px;
    height:100%;
  }
  .tarjeta__enlace:hover,.tarjeta__enlace:focus-visible{ background:var(--panel); border-radius:var(--radio); }
  .tarjeta__enlace:hover .tarjeta__cta,
  .tarjeta__enlace:focus-visible .tarjeta__cta{ background:#8F1AF9; box-shadow:0 0 26px rgba(130,0,248,.5); }
  .tarjeta__centro{ margin-right:0; gap:6px; }
  .tarjeta__nombre{ font-size:1.45rem; }
  .tarjeta__desc{ display:block; }
  .precio{ font-size:1.35rem; }
  .tarjeta__cta{ display:inline-flex; margin-top:auto; }

  .banda-baumfest{
    min-height:44px;
    font-size:.82rem;
    justify-content:center;
  }
  .banda-baumfest__texto--completo{ display:inline; }
  .banda-baumfest__texto--corto{ display:none; }
  .banda-baumfest__mas{ display:inline; }

  .antes-despues{ grid-template-columns:1fr 1fr; }
  .flotante--whatsapp{ bottom:22px; right:22px; }
  .flotante--subir{ bottom:92px; right:26px; }
  .pie{ padding-bottom:110px; }
  .cols-2{
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:56px;
  }
  .foto-panel{ max-width:440px; justify-self:end; margin:0; }
  .galeria-aceites{ grid-template-columns:repeat(3,1fr); }
  .citas{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1100px){
  .tarjetas{ grid-template-columns:repeat(4,1fr); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}