/* ============================================================
   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.
   Tipografías: Petrona (serif, titulares) y Karla (sans, texto).
   ============================================================ */

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

  --linea:color-mix(in srgb,var(--nogal) 14%,transparent);
  --linea-tenue:color-mix(in srgb,var(--nogal) 9%,transparent);

  --texto:1.0625rem;
  --medida:36rem;
  --ancho:72rem;

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

  --margen:clamp(1.1rem,5vw,3.5rem);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}

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.65;
  -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;
  background:color-mix(in srgb,var(--crema) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}

.barra-interior{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-2);
  max-width:var(--ancho);margin-inline:auto;
  padding:.8rem var(--margen);
}

.marca{
  display:flex;align-items:center;gap:.6rem;
  font-family:"Petrona",Georgia,serif;
  font-size:1.2rem;font-weight:600;
  color:var(--nogal);text-decoration:none;
  white-space:nowrap;
}
.marca img{width:2rem;height:2rem;border-radius:50%}

.nav{display:flex;align-items:center;gap:1.15rem}
.nav a{
  font-size:.92rem;color:var(--nogal-suave);
  text-decoration:none;white-space:nowrap;
}
.nav a:hover{color:var(--nogal)}
.nav a[aria-current="page"]{
  color:var(--nogal);
  box-shadow:inset 0 -2px 0 var(--madera);
}

.nav-cita{
  padding:.4rem .9rem;
  border:1px solid var(--salvia);
  border-radius:999px;
  color:var(--salvia) !important;
  font-weight:700;
}
.nav-cita:hover{background:var(--salvia);color:var(--hueso) !important}

/* ---------- portada ---------- */
/* Foto a sangre con el sello encima. El degradado oscuro es lo que
   permite leer el texto blanco sin tapar la madera de la foto. */

.portada{
  position:relative;isolation:isolate;
  display:grid;place-items:center;
  min-height:min(38rem,88vh);
  padding:var(--esp-5) var(--margen);
  text-align:center;
  overflow:hidden;
}

.portada-fondo{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}

.portada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(40,25,16,.55) 0%, rgba(40,25,16,.74) 45%, rgba(40,25,16,.88) 100%),
    radial-gradient(90% 70% at 50% 45%, rgba(40,25,16,.28) 0%, rgba(40,25,16,.62) 100%);
}

.portada-contenido{
  display:flex;flex-direction:column;align-items:center;
  max-width:40rem;
}

.sello{
  width:min(13rem,46vw);height:auto;
  margin-bottom:var(--esp-3);
  border-radius:50%;
  box-shadow:0 10px 40px rgba(26,16,10,.45);
}

.portada h1{
  font-size:clamp(2rem,6.6vw,3.4rem);
  font-weight:400;
  color:var(--hueso);
  margin-bottom:var(--esp-2);
  text-shadow:0 1px 20px rgba(26,16,10,.5);
}

.lugar{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:#E3BE97;
  margin-bottom:.7rem;
  text-shadow:0 1px 10px rgba(26,16,10,.7);
}

.entrada{
  max-width:32rem;
  color:#F2EADF;
  margin-bottom:var(--esp-3);
  text-shadow:0 1px 12px rgba(26,16,10,.6);
}

/* ---------- franja de tres datos ---------- */

.tres{
  background:var(--nogal);
  padding-top:var(--esp-4);padding-bottom:var(--esp-4);
}

.tres-rejilla{
  display:grid;gap:var(--esp-3);
  max-width:var(--ancho);margin-inline:auto;
  text-align:center;
}

.dato{display:block}

.dato-cifra{
  font-family:"Petrona",Georgia,serif;
  font-size:2.6rem;line-height:1;
  color:var(--madera-claro);
  margin-bottom:.3rem;
}

.dato-texto{
  color:color-mix(in srgb,var(--crema) 82%,transparent);
  font-size:.95rem;
  max-width:16rem;margin-inline:auto;
}

/* ---------- 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)}

.boton-claro{background:var(--hueso);color:var(--nogal)}
.boton-claro:hover{background:#fff;color:var(--nogal)}

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

section{padding:var(--esp-5) var(--margen)}

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

/* Un rótulo discreto por encima del título de sección. */
.rotulo{
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--madera);
  margin-bottom:.5rem;
}

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

.presentacion{
  display:grid;gap:var(--esp-4);
  align-items:center;
}

.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 var(--linea);
  border-bottom:1px solid var(--linea);
}

.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-3);
  padding:var(--esp-3) 0;
  border-top:1px solid var(--linea);
}
.grupo:first-of-type{border-top:0;padding-top:0}
.grupo:last-of-type{margin-bottom:0}

/* El botón cierra la sección: centrado y separado de la última lista. */
.tratamientos > .boton{
  display:block;width:fit-content;
  margin:var(--esp-4) auto 0;
}

.grupo-cabecera{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--esp-2);flex-wrap:wrap;
  margin-bottom:var(--esp-2);
}

.grupo h3{
  font-family:"Petrona",Georgia,serif;
  font-size:1.6rem;font-weight:500;
  color:var(--nogal);
}

.saber-mas{font-size:.9rem;white-space:nowrap}

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

.carta li{
  padding:.85rem 0;
  border-bottom:1px solid var(--linea-tenue);
}

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

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

/* Las duraciones no están puestas; el estilo queda listo por si se añaden. */
.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;
}

/* ---------- antes y después ---------- */

.resultados{
  background:var(--nogal);
  color:color-mix(in srgb,var(--crema) 88%,transparent);
}
.resultados h2{color:var(--hueso)}
.resultados .rotulo{color:var(--madera-claro)}
.resultados .aviso{color:color-mix(in srgb,var(--crema) 74%,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:.6rem;
  font-size:.9rem;
  color:color-mix(in srgb,var(--crema) 72%,transparent);
}

/* ---------- 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-5);
  padding-bottom:var(--esp-5);
  display:flex;justify-content:center;
  border-bottom:1px solid var(--linea);
}

.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;
}

/* ---------- ubicaciones ---------- */

.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:var(--madera-claro);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)}

/* ---------- páginas interiores ---------- */

.cabecera-pagina{
  padding:var(--esp-5) var(--margen) var(--esp-4);
  border-bottom:1px solid var(--linea);
}

.miga{
  font-size:.88rem;color:var(--nogal-suave);
  margin-bottom:var(--esp-2);
}
.miga a{color:var(--nogal-suave)}

.cabecera-pagina h1{
  font-size:clamp(2rem,6.4vw,3.1rem);
  font-weight:400;
  max-width:20ch;
  margin-bottom:var(--esp-2);
}

.sumario{
  max-width:var(--medida);
  font-size:1.1rem;
  color:var(--nogal-suave);
}

/* Una foto a lo ancho, justo debajo de la cabecera de página. */
.foto-ancha{
  margin:0;
  padding:var(--esp-4) var(--margen) 0;
  max-width:calc(var(--ancho) + var(--margen)*2);
  margin-inline:auto;
}
.foto-ancha img{
  width:100%;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:2px;
}
.foto-ancha figcaption{
  margin-top:.6rem;
  font-size:.9rem;color:var(--nogal-suave);
}

/* Texto largo: una sola columna estrecha, que es lo que se lee bien. */
.articulo{padding:var(--esp-5) var(--margen)}
.articulo > *{max-width:var(--medida)}

.articulo h2{
  font-size:clamp(1.5rem,4vw,2rem);
  margin-top:var(--esp-4);
  margin-bottom:var(--esp-2);
}
.articulo > h2:first-child{margin-top:0}

.articulo h3{
  font-size:1.25rem;
  margin-top:var(--esp-3);margin-bottom:.4rem;
}

.articulo p{color:var(--nogal-suave)}

.articulo ul{
  margin:0 0 var(--esp-2);padding-left:1.1rem;
  color:var(--nogal-suave);
}
.articulo li{margin-bottom:.4rem}

/* Una cita o idea destacada, para romper el muro de texto. */
.destacado{
  margin:var(--esp-4) 0;
  padding:var(--esp-3) 0 var(--esp-3) var(--esp-3);
  border-left:3px solid var(--madera);
  font-family:"Petrona",Georgia,serif;
  font-size:1.3rem;line-height:1.4;
  color:var(--nogal);
}

/* Fichas de cada aparato o técnica. */
.fichas{
  display:grid;gap:var(--esp-2);
  max-width:100% !important;
  margin-bottom:var(--esp-3);
}

.ficha{
  padding:var(--esp-3);
  background:var(--hueso);
  border:1px solid var(--linea-tenue);
  border-radius:2px;
}

.ficha h3{
  margin-top:0;margin-bottom:.15rem;
  font-size:1.35rem;
}

.ficha-tipo{
  font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--madera);
  margin-bottom:.7rem;
}

.ficha p{margin-bottom:.6rem}
.ficha p:last-child{margin-bottom:0}

.ficha-para{
  font-size:.92rem;
  padding-top:.6rem;
  border-top:1px solid var(--linea-tenue);
  color:var(--nogal);
}
.ficha-para strong{font-weight:700}

/* Pasos de una sesión. Aquí sí hay orden, así que van numerados. */
.pasos{
  list-style:none;margin:0 0 var(--esp-3);padding:0;
  counter-reset:paso;
}
.pasos li{
  position:relative;
  padding-left:2.6rem;margin-bottom:var(--esp-2);
  color:var(--nogal-suave);
}
.pasos li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:0;top:-.1rem;
  width:1.8rem;height:1.8rem;
  display:grid;place-items:center;
  border:1px solid var(--madera);border-radius:50%;
  font-family:"Petrona",Georgia,serif;font-size:.95rem;
  color:var(--madera);
}
.pasos strong{color:var(--nogal);font-weight:700}

/* Preguntas frecuentes. */
.faq{max-width:var(--medida)}
.faq details{
  border-bottom:1px solid var(--linea-tenue);
  padding:var(--esp-2) 0;
}
.faq summary{
  cursor:pointer;list-style:none;
  font-family:"Petrona",Georgia,serif;font-size:1.15rem;
  display:flex;justify-content:space-between;gap:var(--esp-2);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--madera);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.6rem;color:var(--nogal-suave)}

/* Cierre de página con llamada a la acción. */
.cierre{
  background:var(--hueso);
  border-top:1px solid var(--linea);
  text-align:center;
}
.cierre h2{margin-bottom:var(--esp-2)}
.cierre p{
  max-width:34rem;margin-inline:auto;
  color:var(--nogal-suave);margin-bottom:var(--esp-3);
}

/* Aviso de que esto es estética, no medicina. */
.nota-salud{
  max-width:var(--medida);
  margin-top:var(--esp-4);
  padding:var(--esp-2) var(--esp-3);
  background:var(--crema-hondo);
  border-radius:2px;
  font-size:.9rem;color:var(--nogal-suave);
}

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

.pie{
  background:var(--crema-hondo);
  border-top:1px solid var(--linea);
  padding:var(--esp-4) var(--margen) calc(var(--esp-5) + 1rem);
  font-size:.92rem;
}

.pie-cols{
  display:grid;gap:var(--esp-3);
  max-width:var(--ancho);margin-inline:auto;
  margin-bottom:var(--esp-3);
}

.pie h2{
  font-family:"Karla",sans-serif;
  font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--madera);
  margin-bottom:.6rem;
}

.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.3rem}
.pie a{color:var(--nogal-suave)}
.pie a:hover{color:var(--nogal)}
.pie p{color:var(--nogal-suave)}

.pie-fin{
  max-width:var(--ancho);margin-inline:auto;
  padding-top:var(--esp-2);
  border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:var(--esp-2);flex-wrap:wrap;
  font-size:.88rem;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{min-height:min(42rem,90vh)}
  .sello{width:min(15rem,24vw)}

  .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}

  .tres-rejilla{grid-template-columns:repeat(3,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .resultados{padding-top:var(--esp-6);padding-bottom:var(--esp-6)}
  .cabinas{grid-template-columns:repeat(2,1fr)}
  .tratamientos{padding-top:var(--esp-6);padding-bottom:var(--esp-6)}

  .cabecera-pagina{padding-top:var(--esp-6)}
  .articulo{padding-top:var(--esp-6);padding-bottom:var(--esp-6)}
  .fichas{grid-template-columns:repeat(2,1fr)}

  .pie-cols{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:64rem){
  .carta{grid-template-columns:repeat(2,1fr);column-gap:var(--esp-4)}
  .carta li{padding:1.1rem 0}
  /* Con dos columnas, el borde inferior de las dos últimas sobra. */
  .carta li:nth-last-child(-n+2):nth-child(odd),
  .carta li:nth-last-child(-n+1){border-bottom:0}
}

/* Las secciones centradas comparten el mismo ancho máximo que la barra. */
@media (min-width:48rem){
  .presentacion,.tratamientos > *,.resultados > *,.donde > *,
  .cabecera-pagina > *,.articulo > .fichas{
    max-width:var(--ancho);margin-inline:auto;
  }
  .presentacion{max-width:var(--ancho)}
  .articulo{max-width:calc(var(--ancho) + var(--margen)*2);margin-inline:auto}
}

/* ---------- móviles estrechos ---------- */
/* Sin esto, el último enlace del menú se sale de la barra a 375px. */

@media (max-width:30rem){
  .barra-interior{padding-left:.9rem;padding-right:.9rem;gap:.5rem}
  .marca{font-size:1rem;gap:.45rem}
  .marca img{width:1.7rem;height:1.7rem}
  .nav{gap:.7rem}
  .nav a{font-size:.78rem}
  .nav-cita{padding:.3rem .65rem}
}

/* En pantallas muy estrechas el menú se reduce a lo imprescindible. */
@media (max-width:26rem){
  .nav .solo-ancho{display:none}
}

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

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