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

:root{
  --bg:#FBF7EF;
  --surface:#FFFFFF;
  --texto:#24312A;
  --texto-suave:#4E5D55;
  --acento:#33604A;
  --acento-2:#B23A24;
  --borde:#E4DCCC;
  --tinte-salvia:#E7EFE6;
  --tinte-coral:#FBE9E2;
  --font:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --sombra:0 2px 10px rgba(36,49,42,0.08);
}

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

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--texto);
  line-height:1.65;
  font-size:clamp(1rem,1.5vw,1.0625rem);
  padding-bottom:76px; /* espacio para la barra fija en móvil */
}

h1,h2,h3{font-family:var(--font);color:var(--texto);font-weight:800;line-height:1.12;letter-spacing:-0.015em}
h1{font-size:clamp(2rem,5.5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.125rem);font-weight:700;line-height:1.2;letter-spacing:-0.01em;margin-bottom:24px}
h3{font-size:clamp(1.125rem,2vw,1.3rem);font-weight:700;line-height:1.3;letter-spacing:0;margin-bottom:8px}
p{max-width:640px}

a{color:inherit}
img{max-width:100%}

.container{max-width:1080px;margin:0 auto;padding:0 24px}

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

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:999px;
  font-weight:700;font-size:0.9375rem;text-decoration:none;
  border:none;cursor:pointer;white-space:nowrap;
}
.btn--salvia{background:var(--acento);color:#fff}
.btn--coral{background:var(--acento-2);color:#fff}
.btn--llegar{background:var(--surface);color:var(--texto);border:1.5px solid var(--borde)}

/* ---------- Barra fija ---------- */
.barra-fija{
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--surface);box-shadow:var(--sombra);
}
.barra-fija__tel{
  display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;
  padding:0 4px;color:var(--texto);text-decoration:none;flex:0 0 auto;
}
.barra-fija__marca{display:none;font-weight:800}
.btn--bar{flex:1 1 0;padding:0 12px;font-size:0.875rem}

@media (min-width:820px){
  body{padding-bottom:0;padding-top:72px}
  .barra-fija{bottom:auto;top:0;padding:12px 24px;justify-content:flex-end;max-width:1080px;margin:0 auto;left:0;right:0}
  .barra-fija__marca{display:inline;margin-right:auto;font-size:1.125rem}
  .btn--bar{flex:0 0 auto}
}

/* ---------- Hero ---------- */
.hero{background:var(--bg)}
.hero-top{padding:96px 24px 40px;text-align:center;max-width:820px}
.hero-top p{margin-left:auto;margin-right:auto}
.eyebrow{font-size:0.875rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:12px}
.hero-subtitle{color:var(--texto-suave);margin-top:16px;margin-left:auto;margin-right:auto}

.hero-split{position:relative;display:flex;flex-direction:column}
.hero-half{padding:48px 24px 64px}
.hero-half--salvia{background:var(--tinte-salvia)}
.hero-half--coral{background:var(--tinte-coral)}
.hero-half__inner{max-width:420px;margin:0 auto;text-align:center}
.hero-half--salvia .hero-half__inner{color:var(--texto)}
.hero-half__icon{color:var(--acento)}
.hero-half--coral .hero-half__icon{color:var(--acento-2)}
.hero-half__etiqueta{font-size:0.875rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin:16px 0 4px}
.hero-half--salvia .hero-half__etiqueta{color:var(--acento)}
.hero-half--coral .hero-half__etiqueta{color:var(--acento-2)}
.hero-half__inner p{margin:0 auto 20px;color:var(--texto-suave)}
.hero-half__micro{font-size:0.875rem;margin-top:14px}

.seam{display:block}
.seam--vertical{display:none}
.seam--horizontal{width:100%;height:28px}
.seam--hero{margin:0}
.seam--divisor{opacity:0.6}

@media (min-width:820px){
  .hero-split{flex-direction:row;align-items:stretch}
  .hero-half{flex:1 1 50%;padding:96px 48px;display:flex;align-items:center}
  .hero-half__inner{margin:0 auto}
  .seam--vertical{display:block;position:absolute;left:50%;top:0;bottom:0;height:100%;width:28px;transform:translateX(-50%)}
  .seam--horizontal.seam--hero{display:none}
}

/* ---------- Franja de confianza ---------- */
.franja-confianza{
  background:var(--texto);color:#fff;
  padding:20px 24px;display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:center;justify-content:center;text-align:center;font-size:0.9375rem;
}
.franja-confianza a{color:#fff;text-decoration:underline}
#estado-apertura{font-weight:700}

/* ---------- Caminos (consulta / peluquería) ---------- */
.camino{padding:64px 0}
.camino--salvia{background:var(--tinte-salvia)}
.camino--coral{background:var(--tinte-coral)}
.etiqueta{font-size:0.875rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:8px}
.camino--salvia .etiqueta{color:var(--acento)}
.camino--coral .etiqueta{color:var(--acento-2)}

.tarjetas{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:32px}
@media (min-width:640px){.tarjetas{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}

.tarjeta{background:var(--surface);border-radius:16px;padding:24px;box-shadow:var(--sombra)}
.tarjeta p{color:var(--texto-suave);max-width:none}

/* ---------- Por qué elegirnos ---------- */
.porque{padding:64px 0;background:var(--bg)}
.puntos{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:640px){.puntos{grid-template-columns:repeat(3,1fr)}}
.punto p{color:var(--texto-suave);max-width:none}

/* ---------- Reseñas ---------- */
.resenas{padding:64px 0;background:var(--bg)}
.tarjetas--resenas{margin-bottom:24px}
.tarjeta--resena{border:1.5px solid var(--borde);box-shadow:none}
.tarjeta__estrellas{color:var(--acento);letter-spacing:2px;margin-bottom:12px;font-size:1rem}
.tarjeta__texto{color:var(--texto);margin-bottom:16px;max-width:none}
.tarjeta__autor{font-weight:700;font-size:0.875rem;color:var(--texto-suave)}
.enlace-mapa{font-weight:700;text-decoration:underline;color:var(--acento)}

/* ---------- Ubicación ---------- */
.ubicacion{padding:64px 0;background:var(--bg);border-top:1.5px solid var(--borde)}
.ubicacion__direccion{color:var(--texto-suave);margin-bottom:20px}
.horario-detalle{margin-bottom:24px}
.horario-detalle summary{cursor:pointer;font-weight:700;color:var(--acento);padding:8px 0}
.tabla-horario{border-collapse:collapse;margin-top:12px;width:100%;max-width:360px}
.tabla-horario th,.tabla-horario td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--borde);font-weight:400}
.tabla-horario th{font-weight:600}

/* ---------- CTA final ---------- */
.cta-final{padding:64px 0 96px;background:var(--texto);color:#fff;text-align:center}
.cta-final h2{color:#fff}
.cta-final p{color:#E7EFE6;margin:0 auto 32px}
.cta-final__botones{display:flex;flex-direction:column;gap:12px;align-items:center}
@media (min-width:480px){.cta-final__botones{flex-direction:row;justify-content:center}}

/* ---------- Footer ---------- */
.footer{padding:32px 24px;text-align:center;font-size:0.875rem;color:var(--texto-suave)}
.footer p{margin:4px auto;max-width:none}
.footer a{text-decoration:underline;color:var(--texto-suave)}
.footer a[href^="tel:"]{display:inline-block;padding:14px 6px;margin:-14px -6px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}