/* ============================================================
   MaderoParaTi — hoja de estilos
   Paleta tomada del logo: crema de fondo, nogal para la tinta,
   madera para los detalles y un verde salvia de las hojas.
   ============================================================ */

:root{
  --crema:#EFE6DA;
  --hueso:#FAF6F0;
  --nogal:#3E2A1E;
  --nogal-suave:#7A6354;
  --salvia:#55634A;
  --salvia-claro:#67795A;
  --madera:#8B5E3C;
  --whatsapp:#25D366;

  --texto:1.0625rem;
  --medida:34rem;

  --esp-1:.5rem;
  --esp-2:1rem;
  --esp-3:1.75rem;
  --esp-4:3rem;
  --esp-5:5rem;
  --esp-6:7.5rem;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--crema);
  color:var(--nogal);
  font-family:"Karla",system-ui,-apple-system,sans-serif;
  font-size:var(--texto);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--salvia);text-underline-offset:.2em}
a:hover{color:var(--madera)}

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

h1,h2,h3,h4{
  font-family:"Petrona",Georgia,serif;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 var(--esp-2)}
p:last-child{margin-bottom:0}

.saltar{
  position:absolute;left:-9999px;top:0;
  background:var(--nogal);color:var(--hueso);
  padding:.75rem 1rem;z-index:100;
}
.saltar:focus{left:0}

/* ---------- barra superior ---------- */

.barra{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--esp-2);
  padding:.9rem clamp(1.1rem,5vw,3.5rem);
  background:color-mix(in srgb,var(--crema) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--nogal) 12%,transparent);
}

.marca{
  font-family:"Petrona",Georgia,serif;
  font-size:1.2rem;font-weight:600;
  color:var(--nogal);text-decoration:none;
}

.nav{display:flex;gap:1.25rem}
.nav a{font-size:.9rem;color:var(--nogal-suave);text-decoration:none}
.nav a:hover{color:var(--nogal);text-decoration:underline}

/* ---------- portada: el sello manda ---------- */

.portada{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:var(--esp-4) clamp(1.1rem,5vw,3.5rem) var(--esp-5);
}

.sello{
  width:min(19rem,72vw);height:auto;
  margin-bottom:var(--esp-3);
}

.lugar{
  font-size:.85rem;letter-spacing:.04em;
  color:var(--madera);
  margin-bottom:.6rem;
}

.portada h1{
  font-size:clamp(1.9rem,6.4vw,3.2rem);
  font-weight:400;
  margin-bottom:var(--esp-2);
}

.entrada{
  max-width:30rem;
  color:var(--nogal-suave);
  margin-bottom:var(--esp-3);
}

/* ---------- botones ---------- */

.boton{
  display:inline-block;
  padding:.85rem 1.6rem;
  background:var(--salvia);color:var(--hueso);
  font-weight:700;font-size:1rem;
  text-decoration:none;border-radius:2px;
}
.boton:hover{background:var(--salvia-claro);color:var(--hueso)}

/* ---------- secciones generales ---------- */

section{padding:var(--esp-5) clamp(1.1rem,5vw,3.5rem)}
.portada{padding-top:var(--esp-4)}

section h2{
  font-size:clamp(1.7rem,4.6vw,2.5rem);
  margin-bottom:var(--esp-3);
}

/* ---------- presentación ---------- */

.presentacion{
  display:grid;gap:var(--esp-4);
  align-items:center;
  border-top:1px solid color-mix(in srgb,var(--nogal) 12%,transparent);
}

.presentacion-texto{max-width:var(--medida)}
.presentacion-texto p{color:var(--nogal-suave)}

.presentacion-foto{margin:0}
.presentacion-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}

/* ---------- tratamientos ---------- */

.tratamientos{
  background:var(--hueso);
  border-top:1px solid color-mix(in srgb,var(--nogal) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--nogal) 12%,transparent);
}

.aviso{
  color:var(--nogal-suave);max-width:var(--medida);
  margin-top:calc(var(--esp-3) * -1 + .4rem);
  margin-bottom:var(--esp-4);
}

.grupo{margin-bottom:var(--esp-4);max-width:44rem}

.grupo h3{
  font-size:1rem;font-family:"Karla",sans-serif;font-weight:700;
  color:var(--madera);
  padding-bottom:.5rem;
  border-bottom:2px solid var(--madera);
  margin-bottom:var(--esp-2);
}

.carta{list-style:none;margin:0;padding:0}

.carta li{
  padding:var(--esp-2) 0;
  border-bottom:1px solid color-mix(in srgb,var(--nogal) 10%,transparent);
}
.carta li:last-child{border-bottom:0}

.nombre{font-size:1.2rem;font-weight:500}

.detalle{
  margin:.3rem 0 0;
  font-size:.95rem;color:var(--nogal-suave);
  max-width:32rem;
}

.duracion{color:var(--madera);white-space:nowrap}

.sede{
  display:inline-block;
  margin-left:.15rem;
  padding:.08rem .45rem;
  border:1px solid color-mix(in srgb,var(--madera) 45%,transparent);
  border-radius:999px;
  font-size:.8rem;color:var(--madera);white-space:nowrap;
}

/* ---------- galería ---------- */

/* ---------- nota de Google ---------- */
/* Sin estrellas junto al logo: sus normas de marca no lo permiten.
   El logo es el archivo oficial, sin recolorear ni redibujar.
   La tarjeta va en blanco puro para que el fondo del PNG no se note. */

.opiniones{
  padding-top:var(--esp-4);
  padding-bottom:var(--esp-4);
  display:flex;justify-content:center;
}

.nota{
  display:block;text-align:center;
  max-width:22rem;
  padding:var(--esp-3) var(--esp-4);
  border:1px solid color-mix(in srgb,var(--nogal) 16%,transparent);
  border-radius:2px;
  background:#fff;
  color:var(--nogal);
  text-decoration:none;
}
.nota:hover{
  color:var(--nogal);
  border-color:color-mix(in srgb,var(--madera) 55%,transparent);
}

.nota-logo{
  width:6.75rem;height:auto;
  margin:0 auto .75rem;
}

.cifra{
  display:block;
  font-family:"Petrona",Georgia,serif;
  font-size:3rem;line-height:1;
  margin-bottom:.5rem;
}

.fuente{
  display:block;
  font-size:.85rem;color:var(--nogal-suave);
  margin-bottom:.6rem;
}

.enlace{
  display:block;
  font-size:.95rem;color:var(--salvia);
  text-decoration:underline;text-underline-offset:.2em;
}

.resultados{
  border-bottom:1px solid color-mix(in srgb,var(--nogal) 12%,transparent);
}

.galeria{display:grid;gap:var(--esp-3);grid-template-columns:1fr;align-items:start}
.galeria figure{margin:0}
.galeria img{width:100%;height:auto;border-radius:2px}

.galeria figcaption{
  margin-top:.5rem;
  font-size:.9rem;color:var(--nogal-suave);
}

/* ---------- dónde y cuándo ---------- */

.donde{background:var(--nogal);color:var(--crema)}
.donde h2{color:var(--hueso)}
.donde h3{
  font-family:"Karla",sans-serif;font-size:.95rem;font-weight:700;
  color:#C79A6E;margin-bottom:.5rem;
}
.donde a{color:var(--crema)}
.donde a:hover{color:#fff}

.cabinas{display:grid;gap:var(--esp-3)}

.cabina{
  padding:var(--esp-3);
  border:1px solid color-mix(in srgb,var(--crema) 24%,transparent);
  border-radius:2px;
}

.cabina h3{
  font-family:"Petrona",Georgia,serif;
  font-size:1.5rem;font-weight:500;
  color:var(--hueso);
  margin-bottom:.6rem;
}

.direccion{margin-bottom:var(--esp-2)}

.extra{
  margin-bottom:var(--esp-2);
  font-size:.95rem;
  color:color-mix(in srgb,var(--crema) 76%,transparent);
}

.horario{margin:0 0 var(--esp-2)}
.horario dt{font-weight:700;margin-top:.5rem}
.horario dt:first-child{margin-top:0}
.horario dd{margin:0;color:color-mix(in srgb,var(--crema) 78%,transparent)}

.contacto{margin-top:var(--esp-4)}

/* ---------- pie ---------- */

.pie{
  padding:var(--esp-3) clamp(1.1rem,5vw,3.5rem) calc(var(--esp-5) + 1rem);
  font-size:.9rem;color:var(--nogal-suave);
}
.pie p{margin:0 0 .25rem}
.legal a{color:var(--nogal-suave)}

/* ---------- botón flotante de WhatsApp ---------- */

.flotante{
  position:fixed;z-index:50;
  right:1rem;bottom:1rem;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.15rem;
  background:var(--whatsapp);color:#0B2E17;
  font-weight:700;font-size:.95rem;
  text-decoration:none;border-radius:999px;
  box-shadow:0 6px 20px rgba(62,42,30,.26);
}
.flotante:hover{background:#1FBE5A;color:#0B2E17}
.flotante svg{flex:none}

/* ---------- pantallas medianas y grandes ---------- */

@media (min-width:48rem){
  .portada{padding-top:var(--esp-5);padding-bottom:var(--esp-6)}
  .sello{width:min(22rem,40vw)}
  .presentacion{
    padding-top:var(--esp-6);padding-bottom:var(--esp-6);
  }
  /* Dos columnas solo cuando la foto está activa; ahora está comentada
     en el HTML, así que el texto ocupa el ancho él solo. */
  .presentacion:has(.presentacion-foto){grid-template-columns:1.15fr .85fr}
  .galeria{grid-template-columns:repeat(3,1fr);gap:var(--esp-3)}
  .resultados{padding-top:var(--esp-6);padding-bottom:var(--esp-6)}
  .cabinas{grid-template-columns:repeat(2,1fr);gap:var(--esp-3)}
  .tratamientos{padding-top:var(--esp-6);padding-bottom:var(--esp-6)}
}

@media (min-width:64rem){
  .carta li{padding:1.15rem 0}
}

/* ---------- móviles estrechos ---------- */
/* Sin esto, "Dónde estoy" se sale de la barra a 375px. */

@media (max-width:30rem){
  .barra{padding-left:.9rem;padding-right:.9rem;gap:.6rem}
  .marca{font-size:1.05rem}
  .nav{gap:.8rem}
  .nav a{font-size:.8rem;white-space:nowrap}
}

/* ---------- accesibilidad ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}