*{box-sizing:border-box;margin:0}

:root{
  --bg:#0D0D0D;
  --surface:#171511;
  --texto:#EFE9DD;
  --texto-suave:#A89F8D;
  --acento:#C9A96A;
  --acento-2:#E8DCC0;
  --borde:#2B2820;
  --font-display:Georgia,'Times New Roman',serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gap-hilo:88px;
  --pad-seccion:72px;
}

@media(min-width:768px){
  :root{
    --gap-hilo:120px;
    --pad-seccion:120px;
  }
}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--texto);
  font-family:var(--font-body);
  font-size:clamp(1rem,1.4vw,1.125rem);
  line-height:1.8;
  padding-bottom:76px; /* deja libre la barra fija */
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
}

h1{
  font-size:clamp(2.25rem,6vw,4rem);
  line-height:1.15;
  letter-spacing:0.01em;
}

h2{
  font-size:clamp(1.625rem,4vw,2.5rem);
  line-height:1.2;
  letter-spacing:0.01em;
}

h3{
  font-size:clamp(1.25rem,2.5vw,1.5rem);
  line-height:1.3;
  letter-spacing:0.02em;
}

p{max-width:680px}

a{color:var(--acento);text-decoration:none}
a:hover{color:var(--acento-2)}

a,button{transition:color 450ms ease,border-color 450ms ease,background-color 450ms ease}

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

.kicker{
  font-family:var(--font-body);
  font-size:0.75rem;
  font-weight:500;
  line-height:1.4;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--acento);
  margin-bottom:24px;
}

/* ── Botones ─────────────────────────────────────────────────────── */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:14px 32px;
  font-family:var(--font-body);
  font-size:0.9375rem;
  border-radius:0;
  white-space:nowrap;
}

.boton-primario{
  background:var(--acento);
  color:#0D0D0D;
  border:1px solid var(--acento);
}
.boton-primario:hover{background:var(--acento-2);border-color:var(--acento-2);color:#0D0D0D}

.boton-secundario{
  background:transparent;
  color:var(--acento);
  border:1px solid var(--acento);
}
.boton-secundario:hover{color:var(--acento-2);border-color:var(--acento-2)}

/* ── Barra de contacto fija ──────────────────────────────────────── */
.contacto-fijo{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  display:flex;
  gap:1px;
  background:var(--borde);
  border-top:1px solid var(--borde);
}
.contacto-fijo .boton{
  flex:1;
  border-radius:0;
  border:none;
  min-height:56px;
}
.contacto-fijo .boton-secundario{background:var(--bg)}

@media(min-width:768px){
  .contacto-fijo{max-width:360px;left:auto;right:24px;bottom:24px;border:1px solid var(--borde)}
}

/* ── El hilo de oro (dispositivo visual firma) ──────────────────── */
main{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--gap-hilo);
  padding-top:var(--gap-hilo);
}

main::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,
    transparent 0,
    var(--acento) 140px,
    var(--acento) calc(100% - 140px),
    transparent 100%);
  z-index:0;
}

main > section{
  position:relative;
  z-index:1;
  background:var(--bg);
  padding:var(--pad-seccion) 24px;
}

main > section:not(:first-child)::before{
  content:'';
  position:absolute;
  top:calc(var(--gap-hilo) / -2 - 4px);
  left:50%;
  width:9px;height:9px;
  background:var(--bg);
  border:1px solid var(--acento);
  transform:translateX(-50%) rotate(45deg);
  z-index:2;
}

@media(min-width:768px){
  main > section{padding:var(--pad-seccion) 40px}
  /* Las bandas de dos líneas (confianza, instagram) no cargan los 120px
     de una sección completa: con el row-gap del hilo ya respiran de sobra.
     Con el padding completo dejaban casi una pantalla de penumbra vacía. */
  main > .confianza,
  main > .instagram{padding-block:48px}
}

.contenedor{max-width:1040px;margin-inline:auto;text-align:center}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{
  background:transparent;
  padding:0 24px var(--pad-seccion);
  text-align:center;
}
@media(min-width:768px){.hero{padding:0 40px var(--pad-seccion)}}

.hero-inner{
  background:var(--bg);
  max-width:680px;
  margin-inline:auto;
  padding-top:24px;
}
.hero h1{margin-bottom:24px}
.hero .subtitulo{color:var(--texto-suave);margin-bottom:40px;margin-inline:auto}

.cta-grupo{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  padding-bottom:8px;
}

/* ── Franja de confianza ─────────────────────────────────────────── */
.confianza{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.estado-horario{
  font-size:0.875rem;
  letter-spacing:0.02em;
  color:var(--texto-suave);
}
.estado-horario.abierto{color:var(--acento-2)}
.enlace-oro{font-size:0.9375rem}

/* ── Tratamientos ────────────────────────────────────────────────── */
.tratamientos{text-align:center}
.tratamientos h2{margin-bottom:64px}
.lista-tratamientos{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:1040px;
  margin-inline:auto;
  text-align:left;
}
@media(min-width:640px){
  .lista-tratamientos{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
  /* 6 pistas de las que cada tarjeta ocupa 2: con 5 tarjetas la última
     fila queda centrada en vez de dejar una celda vacía al final. */
  .lista-tratamientos{grid-template-columns:repeat(6,1fr)}
  .lista-tratamientos>.tarjeta-tratamiento{grid-column:span 2}
  .lista-tratamientos>.tarjeta-tratamiento:nth-child(4){grid-column:2/span 2}
}
.tarjeta-tratamiento{
  background:var(--surface);
  border:1px solid var(--borde);
  padding:32px 24px;
}
.tarjeta-tratamiento .numero{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--acento-2);
  margin-bottom:16px;
}
.tarjeta-tratamiento h3{margin-bottom:12px}
.tarjeta-tratamiento p{color:var(--texto-suave);max-width:none}

/* ── Experiencia ─────────────────────────────────────────────────── */
.experiencia{text-align:center}
.experiencia h2{margin-bottom:64px}
.lista-experiencia{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  max-width:1040px;
  margin-inline:auto;
}
@media(min-width:768px){
  .lista-experiencia{grid-template-columns:repeat(3,1fr)}
}
.punto-experiencia h3{margin-bottom:12px}
.punto-experiencia p{color:var(--texto-suave);max-width:none}

/* ── Reseñas ─────────────────────────────────────────────────────── */
.pacientes{text-align:center}
.pacientes h2{margin-bottom:64px}
.lista-resenas{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:1040px;
  margin-inline:auto;
  text-align:left;
}
@media(min-width:768px){
  .lista-resenas{grid-template-columns:repeat(3,1fr)}
}
.resena{
  background:var(--surface);
  border:1px solid var(--borde);
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.resena blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  line-height:1.7;
  max-width:none;
}
.resena figcaption{color:var(--texto-suave);font-size:0.875rem}

/* ── Instagram ───────────────────────────────────────────────────── */
.instagram{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.icono-instagram{color:var(--acento)}

/* ── Visítanos ───────────────────────────────────────────────────── */
.visitanos{text-align:center}
.visitanos .direccion{
  color:var(--texto-suave);
  margin-inline:auto;
  margin-bottom:40px;
}
.tabla-horarios{
  border-collapse:collapse;
  margin:0 auto 40px;
  width:100%;
  max-width:420px;
}
.tabla-horarios tr{border-bottom:1px solid var(--borde)}
.tabla-horarios tr:last-child{border-bottom:none}
.tabla-horarios th,.tabla-horarios td{
  padding:12px 8px;
  font-weight:400;
  font-size:0.875rem;
  letter-spacing:0.02em;
  text-align:left;
}
.tabla-horarios th{color:var(--texto)}
.tabla-horarios td{color:var(--texto-suave);text-align:right}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}

/* ── CTA final ───────────────────────────────────────────────────── */
.cta-final{text-align:center}
.cta-final h2{margin-bottom:24px}
.cta-final p{
  color:var(--texto-suave);
  margin-inline:auto;
  margin-bottom:40px;
}

/* ── Footer ──────────────────────────────────────────────────────── */
footer{
  background:var(--bg);
  border-top:1px solid var(--borde);
  padding:40px 24px 96px;
  text-align:center;
  color:var(--texto-suave);
  font-size:0.875rem;
  display:flex;
  flex-direction:column;
  gap:8px;
}
footer a{color:var(--texto-suave);text-decoration:underline}
footer a:hover{color:var(--acento)}

@media(min-width:768px){
  footer{padding-bottom:40px}
  body{padding-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important}
}