/* =========================================================
   PETIT ESPAI GISELLE — Hoja de estilos principal
   Paleta de la marca: chocolate, mocha, caramelo y nude cálido.
   Criterios: texto grande y con buen contraste, botones de al menos
   48 px de alto, pocas decisiones por pantalla y reserva siempre a mano.
   ========================================================= */

/* Tipografías alojadas en la propia web (carpeta fonts/): así no se envía
   la IP de las visitas a Google (RGPD). Si faltan los archivos, se usan
   Georgia y Helvetica/Arial automáticamente. */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500 600; font-display:swap; src:url('../fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url('../fonts/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:400 600; font-display:swap; src:url('../fonts/jost.woff2') format('woff2'); }

:root{
  --espresso:      #2B1710;
  --cacao:         #4E3127;   /* texto principal (contraste 10:1 sobre marfil) */
  --oro-texto:     #86592A;   /* caramelo oscuro: texto pequeño accesible */
  --caramelo:      #B98A52;   /* acento decorativo */
  --caramelo-suave:#D9B98A;
  --nude:          #E9D6C6;
  --rosa-polvo:    #F1DDD4;
  --marfil:        #FBF7F2;
  --marfil-oscuro: #F3EAE0;
  --blanco:        #FFFFFF;
  --verde:         #3F6B45;
  --linea:         rgba(43,23,16,0.12);
  --sombra:        0 10px 30px -12px rgba(43,23,16,0.22);
  --sombra-suave:  0 4px 14px -6px rgba(43,23,16,0.14);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --radio: 18px;
  --radio-s: 12px;
  --max: 1180px;
  --pad: clamp(1rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
html,body{ margin:0; padding:0; }

body{
  font-family:var(--sans);
  color:var(--cacao);
  background:var(--marfil);
  font-size:1.0625rem;          /* 17px: cómodo para todas las edades */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

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

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--espresso);
  font-weight:600;
  line-height:1.12;
  margin:0 0 0.5em;
}
h1{ font-size:clamp(2.5rem, 5.2vw, 4.3rem); }
h2{ font-size:clamp(2rem, 3.4vw, 2.9rem); }
h3{ font-size:1.45rem; }
p{ margin:0 0 1em; max-width:62ch; }

.section-tag{
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--oro-texto);
  font-size:0.8rem;
  display:inline-block;
  margin-bottom:0.8em;
}
.lead{ font-size:1.18rem; }
.muted{ opacity:0.8; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head{ max-width:680px; margin-bottom:2.6rem; }
.section-head.center{ text-align:center; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.container{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
section{ padding:clamp(4rem, 8vw, 6.5rem) 0; }
.bg-suave{ background:var(--marfil-oscuro); }
.bg-rosa{ background:var(--rosa-polvo); }
.bg-oscuro{ background:var(--espresso); color:var(--nude); }
.bg-oscuro h2, .bg-oscuro h3{ color:var(--marfil); }
.bg-oscuro .section-tag{ color:var(--caramelo-suave); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-family:var(--sans); font-size:1rem; font-weight:500;
  min-height:50px;
  padding:0.7em 1.7em;
  border-radius:999px;
  border:1.5px solid var(--espresso);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
  text-align:center;
}
.btn:active{ transform:scale(0.97); }
.btn-dark{ background:var(--espresso); color:var(--marfil); }
.btn-dark:hover{ background:var(--cacao); box-shadow:var(--sombra); }
.btn-outline{ background:transparent; color:var(--espresso); }
.btn-outline:hover{ background:var(--espresso); color:var(--marfil); }
.btn-gold{ background:var(--caramelo); color:var(--espresso); border-color:var(--caramelo); }
.btn-gold:hover{ background:var(--caramelo-suave); border-color:var(--caramelo-suave); }
.btn-light{ background:var(--marfil); color:var(--espresso); border-color:var(--marfil); }
.btn-light:hover{ background:var(--nude); }
.btn-sm{ min-height:42px; padding:0.45em 1.2em; font-size:0.95rem; }
.btn-lg{ min-height:58px; font-size:1.1rem; padding:0.8em 2.2em; }
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:0.8rem; }

.link-arrow{
  font-weight:500; color:var(--oro-texto);
  display:inline-flex; align-items:center; gap:0.35em;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.link-arrow:hover{ color:var(--espresso); }

/* ---------- Barra superior de información ---------- */
.topbar{
  background:var(--espresso); color:var(--nude);
  font-size:0.9rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  min-height:38px; flex-wrap:wrap;
}
.topbar a:hover{ color:var(--marfil); }
.topbar .estado{ display:inline-flex; align-items:center; gap:0.45em; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--caramelo-suave); display:inline-block; }
.dot.abierto{ background:#7FC48A; box-shadow:0 0 0 3px rgba(127,196,138,0.25); }
.dot.cerrado{ background:#D98F7E; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,247,242,0.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{ box-shadow:var(--sombra-suave); }
.nav{
  max-width:var(--max); margin:0 auto;
  padding:0.8rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.logo{
  font-family:var(--serif); font-size:1.7rem; font-weight:600;
  letter-spacing:0.01em; color:var(--espresso); line-height:1;
}
.logo em{ font-style:italic; color:var(--caramelo); font-weight:500; }
.nav-links{ display:flex; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:1rem; position:relative; padding:6px 0; white-space:nowrap; }
.nav-tel{ white-space:nowrap; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--caramelo); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--espresso); font-weight:500; }
.nav-cta{ display:flex; align-items:center; gap:0.7rem; }
.nav-cta .btn{ min-height:44px; padding:0.45em 1.35em; font-size:0.97rem; }
.nav-tel{ display:inline-flex; align-items:center; gap:0.4em; font-weight:500; color:var(--espresso); }
.nav-tel svg{ width:18px; height:18px; }

.burger{
  display:none; align-items:center; gap:0.5rem;
  background:none; border:1.5px solid var(--linea); border-radius:999px;
  padding:0.45rem 0.9rem; cursor:pointer; font-size:0.95rem; color:var(--espresso);
  min-height:44px;
}
.burger .lines{ display:flex; flex-direction:column; gap:4px; }
.burger .lines span{ width:18px; height:2px; background:var(--espresso); display:block; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] .lines span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .lines span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .lines span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  display:none; flex-direction:column;
  background:var(--marfil);
  border-top:1px solid var(--linea);
  padding:0.5rem var(--pad) 1.5rem;
}
.mobile-menu.open{ display:flex; animation:fadeSlideIn .25s ease; }
.mobile-menu a{
  padding:1rem 0.2rem; border-bottom:1px solid var(--linea);
  font-size:1.2rem; font-family:var(--serif); font-weight:600; color:var(--espresso);
  display:flex; justify-content:space-between; align-items:center;
}
.mobile-menu a::after{ content:"›"; color:var(--caramelo); font-size:1.4rem; }
.mobile-menu .btn{
  margin-top:1.2rem; font-family:var(--sans); font-size:1.05rem; font-weight:500;
  border-bottom:1.5px solid var(--espresso); justify-content:center; padding:0.95rem 1.2rem;
}
.mobile-menu .btn-dark{ color:var(--marfil); }
.mobile-menu .btn::after{ content:none; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.hero .container{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.hero h1 em{ font-style:italic; color:var(--caramelo); font-weight:500; }
.hero-text .lead{ margin-bottom:1.8rem; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem; margin-top:1.8rem;
  font-size:0.95rem; list-style:none; padding:0;
}
.hero-trust li{ display:flex; align-items:center; gap:0.45em; }
.hero-trust svg{ width:18px; height:18px; color:var(--oro-texto); flex:none; }

.hero-figure{ position:relative; }
.hero-figure .main-img{
  border-radius:200px 200px var(--radio) var(--radio);
  overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sombra);
}
.hero-figure .main-img img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.rating-badge{
  position:absolute; left:-1.4rem; bottom:2.2rem;
  background:var(--blanco); border-radius:var(--radio-s);
  padding:0.9rem 1.2rem; box-shadow:var(--sombra);
  display:flex; align-items:center; gap:0.8rem;
}
.rating-badge strong{ font-family:var(--serif); font-size:2.1rem; color:var(--espresso); line-height:1; }
.rating-badge small{ display:block; font-size:0.85rem; line-height:1.35; }
.stars{ color:#C9942F; letter-spacing:0.08em; font-size:0.95rem; }
.float-img{
  position:absolute; right:-1rem; top:1.5rem; width:34%;
  border-radius:var(--radio-s); overflow:hidden; border:5px solid var(--marfil);
  box-shadow:var(--sombra); aspect-ratio:1/1;
}
.float-img img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Franja de confianza ---------- */
.trust-strip{ padding:1.8rem 0; }
.trust-strip .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.trust-item strong{
  font-family:var(--serif); font-size:1.9rem; color:var(--marfil); display:block; line-height:1.1;
}
.trust-item span{ font-size:0.92rem; opacity:0.9; }

/* ---------- Tarjetas de categoría ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.cat-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--blanco); border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra-suave); transition:transform .3s ease, box-shadow .3s ease;
}
.cat-card:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.cat-card .cat-img{ aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg, var(--nude), var(--rosa-polvo)); }
.cat-card .cat-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.cat-card:hover .cat-img img{ transform:scale(1.06); }
.cat-card .cat-img.placeholder{ display:flex; align-items:center; justify-content:center; }
.cat-card .cat-img.placeholder svg{ width:64px; height:64px; color:var(--oro-texto); opacity:0.75; }
.cat-card .cat-body{ padding:1.3rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.cat-card h3{ margin-bottom:0.2rem; }
.cat-card p{ font-size:0.96rem; margin-bottom:1rem; }
.cat-card .precio-desde{ margin-top:auto; font-size:0.92rem; display:flex; justify-content:space-between; align-items:center; }
.cat-card .precio-desde b{ color:var(--espresso); font-weight:600; }

/* ---------- Servicios populares (tarjetas con botón) ---------- */
.pop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pop-card{
  background:var(--blanco); border-radius:var(--radio); padding:1.4rem;
  display:flex; flex-direction:column; gap:0.35rem; box-shadow:var(--sombra-suave);
  border:1px solid transparent; transition:border-color .25s ease, transform .25s ease;
}
.pop-card:hover{ border-color:var(--caramelo-suave); transform:translateY(-3px); }
.pop-card h3{ font-size:1.3rem; margin:0; }
.pop-card p{ font-size:0.95rem; margin:0; }
.pop-card .meta{ display:flex; gap:1rem; font-size:0.92rem; color:var(--oro-texto); }
.pop-card .pie{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:0.9rem; }
.pop-card .precio{ font-family:var(--serif); font-size:1.6rem; color:var(--espresso); font-weight:600; }
.pop-card .precio s{ font-size:1rem; opacity:0.55; margin-left:0.3rem; font-family:var(--sans); }
.tag-oferta{
  align-self:flex-start; font-size:0.78rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--rosa-polvo); color:#7A3B2A; padding:0.2em 0.75em; border-radius:999px;
}

/* ---------- Pasos (cómo reservar) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset:paso; }
.step{ background:var(--blanco); border-radius:var(--radio); padding:1.8rem 1.6rem; position:relative; }
.step::before{
  counter-increment:paso; content:counter(paso);
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--espresso); color:var(--marfil);
  font-family:var(--serif); font-size:1.4rem; margin-bottom:1rem;
}
.step h3{ font-size:1.3rem; }
.step p{ margin:0; font-size:0.98rem; }

/* ---------- Valores ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 2.5rem; }
.value{ padding-top:1.2rem; border-top:2px solid var(--caramelo); }
.value h3{ font-size:1.3rem; }
.value p{ font-size:0.98rem; }

/* ---------- Split editorial ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; }
.split-media{ border-radius:var(--radio); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sombra); }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split.reverse .split-media{ order:2; }

/* ---------- Reseñas ---------- */
.reviews{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:3rem; align-items:center; }
.review-score{ text-align:center; background:var(--blanco); border-radius:var(--radio); padding:2.4rem 1.5rem; box-shadow:var(--sombra-suave); }
.review-score strong{ font-family:var(--serif); font-size:4.5rem; line-height:1; color:var(--espresso); display:block; }
.review-score .stars{ font-size:1.4rem; display:block; margin:0.4rem 0 0.6rem; }
.review-themes{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.theme{ background:var(--blanco); border-radius:var(--radio-s); padding:1.2rem 1.3rem; }
.theme h3{ font-size:1.15rem; margin-bottom:0.3rem; }
.theme p{ font-size:0.95rem; margin:0; }
.review-dims{ list-style:none; padding:0; margin:0.8rem auto 1rem; max-width:220px; text-align:left; }
.review-dims li{ display:flex; justify-content:space-between; padding:0.3rem 0; border-bottom:1px solid var(--linea); font-size:0.95rem; }
.review-dims b{ color:var(--espresso); }
.review-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.review-card{ background:var(--blanco); border-radius:var(--radio-s); padding:1.2rem 1.3rem; margin:0; display:flex; flex-direction:column; gap:0.5rem; }
.review-card blockquote{ margin:0; font-family:var(--serif); font-size:1.22rem; line-height:1.35; color:var(--espresso); }
.review-card figcaption{ font-size:0.9rem; color:var(--oro-texto); margin-top:auto; }
.review-card figcaption b{ color:var(--cacao); }

/* ---------- Equipo ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.team-card{ background:var(--blanco); border-radius:var(--radio); padding:1.6rem 1.4rem; text-align:center; box-shadow:var(--sombra-suave); }
.avatar{
  width:84px; height:84px; border-radius:50%; margin:0 auto 1rem;
  background:linear-gradient(135deg, var(--caramelo-suave), var(--rosa-polvo));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:2.2rem; color:var(--espresso); font-weight:600;
}
.team-card h3{ margin-bottom:0.1rem; }
.team-card .rol{ font-size:0.88rem; color:var(--oro-texto); display:block; margin-bottom:0.6rem; }
.team-card p{ font-size:0.94rem; margin:0 auto 0.8rem; }
.team-card .nota{ font-size:0.88rem; }

/* ---------- Galería ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.8rem; }
.gallery-grid figure{
  margin:0; overflow:hidden; cursor:zoom-in; aspect-ratio:4/5; position:relative; border-radius:var(--radio-s);
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-grid figure:hover img{ transform:scale(1.06); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 0.9rem 0.7rem;
  color:var(--marfil); font-size:0.88rem;
  background:linear-gradient(transparent, rgba(43,23,16,0.75));
}

.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(20,10,6,0.94);
  display:flex; align-items:center; justify-content:center; padding:2rem;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:90vw; max-height:85vh; object-fit:contain; border-radius:var(--radio-s); }
.lightbox button{
  position:absolute; background:rgba(251,247,242,0.12); border:none; color:var(--marfil);
  width:52px; height:52px; border-radius:50%; font-size:1.8rem; cursor:pointer; line-height:1;
}
.lightbox button:hover{ background:rgba(251,247,242,0.25); }
.lightbox-close{ top:1.2rem; right:1.2rem; }
.lightbox-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1rem; top:50%; transform:translateY(-50%); }

.insta-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.7rem; }
.insta-strip a{ position:relative; overflow:hidden; aspect-ratio:1/1; display:block; border-radius:var(--radio-s); }
.insta-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.insta-strip a:hover img{ transform:scale(1.08); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:0 auto; }
.faq details{ background:var(--blanco); border-radius:var(--radio-s); margin-bottom:0.7rem; box-shadow:var(--sombra-suave); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.2rem 1.4rem; font-weight:500; font-size:1.08rem; color:var(--espresso);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.6rem; color:var(--oro-texto); transition:transform .25s ease; line-height:1; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 1.4rem 1.3rem; margin:0; max-width:none; }

/* ---------- Visítanos / contacto ---------- */
.visit{ display:grid; grid-template-columns:1fr 1.1fr; gap:2.5rem; align-items:stretch; }
.visit-card{ background:var(--blanco); border-radius:var(--radio); padding:2rem; box-shadow:var(--sombra-suave); }
.contact-list{ list-style:none; margin:0 0 1.5rem; padding:0; }
.contact-list li{ padding:0.95rem 0; border-bottom:1px solid var(--linea); display:flex; gap:0.9rem; align-items:flex-start; }
.contact-list li:last-child{ border-bottom:none; }
.contact-list svg{ width:22px; height:22px; color:var(--oro-texto); flex:none; margin-top:3px; }
.contact-list .label{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--oro-texto); display:block; }
.contact-list .value-text{ font-size:1.08rem; color:var(--espresso); }
.contact-list a.value-text{ text-decoration:underline; text-decoration-color:var(--caramelo-suave); text-underline-offset:3px; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:0.55rem 0.4rem; border-bottom:1px solid var(--linea); }
.hours-table td:last-child{ text-align:right; color:var(--espresso); }
.hours-table tr.hoy td{ font-weight:600; color:var(--espresso); background:var(--marfil-oscuro); }
.hours-table tr.festivo td:last-child{ color:#A03A2A; }
.nota-festivos{ font-size:0.9rem; line-height:1.5; margin:0.7rem 0 0; padding:0.6rem 0.8rem; background:var(--marfil-oscuro); border-radius:var(--radio-s); }
.nota-festivos b{ color:var(--espresso); }
.map-wrap{ border-radius:var(--radio); overflow:hidden; min-height:380px; box-shadow:var(--sombra-suave); }
.map-wrap iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; }
.map-wrap[data-mapa]{ position:relative; }
.map-wrap[data-mapa] > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.map-consent{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem; display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem;
  background:linear-gradient(transparent, rgba(43,23,16,0.85) 45%); color:#fff; padding-top:3.5rem;
}
.map-consent small{ font-size:0.88rem; opacity:0.95; }
.map-consent a{ text-decoration:underline; color:#fff; }

/* ---------- Páginas legales ---------- */
.legal-page{ max-width:780px; }
.legal-page h2{ font-size:1.7rem; margin:2.4rem 0 0.7rem; }
.legal-page h3{ font-family:var(--sans); font-size:1.08rem; font-weight:600; margin:1.4rem 0 0.4rem; }
.legal-page p, .legal-page li{ margin-bottom:0.7rem; }
.legal-page ul{ padding-left:1.3rem; }
.legal-page a{ text-decoration:underline; }
.legal-page .actualizado{ color:var(--oro-texto); font-size:0.95rem; }
.legal-table{ width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:0.95rem; }
.legal-table th, .legal-table td{ text-align:left; vertical-align:top; padding:0.65rem 0.7rem; border-bottom:1px solid var(--linea); }
.legal-table th{ background:var(--marfil-oscuro); font-weight:600; }
.legal-scroll{ overflow-x:auto; }
.legal-pendiente{ background:#FFE58A; color:#4A3500; padding:0 0.25em; border-radius:3px; }
.legal-links a{ white-space:nowrap; }

/* ---------- Encabezado de páginas internas ---------- */
.page-header{ padding:clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-header p{ font-size:1.15rem; }

/* ---------- Página de servicios ---------- */
.cat-tabs{
  position:sticky; top:72px; z-index:50;
  background:rgba(251,247,242,0.96); backdrop-filter:blur(8px);
  padding:0.8rem 0; border-bottom:1px solid var(--linea);
}
.cat-tabs .container{ display:flex; gap:0.5rem; overflow-x:auto; scrollbar-width:none; }
.cat-tabs .container::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; min-height:44px; padding:0.45em 1.2em; border-radius:999px;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--cacao);
  font-size:0.98rem; cursor:pointer; white-space:nowrap; transition:all .2s ease;
  display:inline-flex; align-items:center;
}
.chip:hover{ border-color:var(--caramelo); }
.chip.active, .chip[aria-pressed="true"]{ background:var(--espresso); color:var(--marfil); border-color:var(--espresso); }

.menu-cat{ padding:3rem 0 1rem; scroll-margin-top:150px; }
.menu-cat-head{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.4rem; }
.menu-cat-head img, .menu-cat-head .ph{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; background:linear-gradient(135deg, var(--nude), var(--rosa-polvo)); }
.menu-cat-head h2{ margin:0; font-size:2.1rem; }
.menu-cat-head p{ margin:0; }
.menu-list{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.menu-item{
  background:var(--blanco); border-radius:var(--radio-s); padding:1.1rem 1.2rem;
  display:grid; grid-template-columns:1fr auto; gap:0.3rem 1rem; align-items:center;
  border:1px solid transparent; transition:border-color .2s ease;
}
.menu-item:hover{ border-color:var(--caramelo-suave); }
.menu-item h3{ font-family:var(--sans); font-size:1.02rem; font-weight:500; margin:0; color:var(--espresso); line-height:1.35; }
.menu-item .meta{ font-size:0.9rem; color:var(--oro-texto); grid-column:1; }
.menu-item .meta .pill{ background:var(--marfil-oscuro); border-radius:999px; padding:0.05em 0.6em; margin-left:0.4rem; color:var(--cacao); font-size:0.8rem; }
.menu-item .right{ grid-column:2; grid-row:1 / span 3; display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; }
.menu-item .precio{ font-weight:600; color:var(--espresso); white-space:nowrap; font-size:1.05rem; }
.menu-item .precio s{ font-weight:400; opacity:0.55; font-size:0.9rem; margin-right:0.3rem; }
.menu-item .menu-desc{ grid-column:1; font-size:0.92rem; margin:0; line-height:1.45; }
.menu-item h3 .pill{ background:var(--marfil-oscuro); border-radius:999px; padding:0.05em 0.6em; margin-left:0.3rem; color:var(--cacao); font-size:0.78rem; font-weight:400; white-space:nowrap; }
/* Tratamiento con varias opciones: cada opción con su precio y su botón */
.menu-item-grupo{ grid-template-columns:1fr; align-self:start; }
.menu-opts{ list-style:none; padding:0; margin:0.4rem 0 0; }
.menu-opts li{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:0.4rem 0.9rem;
  padding:0.55rem 0; border-top:1px solid var(--linea);
}
.menu-opts .opt-nombre{ font-size:0.98rem; line-height:1.35; }
.menu-opts .precio{ font-weight:600; color:var(--espresso); white-space:nowrap; font-size:1.02rem; }
.menu-opts .precio s{ font-weight:400; opacity:0.55; font-size:0.88rem; margin-right:0.25rem; }
.menu-opts .opt-nombre small{ color:var(--oro-texto); font-size:0.85rem; white-space:nowrap; }
.menu-opts .btn{ min-height:40px; padding-inline:0.9rem; }
.menu-list{ align-items:start; }
@media (max-width:420px){
  .menu-opts li{ grid-template-columns:1fr auto; }
  .menu-opts .btn{ grid-column:1 / -1; justify-self:start; }
}
/* ---------- Desplegables de servicios (Servicios y Reserva) ---------- */
.acordeon{ display:flex; flex-direction:column; gap:0.6rem; }
.menu-cat .acordeon{ max-width:920px; }
.acc-item{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio-s);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.acc-item:hover{ border-color:var(--caramelo-suave); }
.acc-item[open]{ border-color:var(--caramelo); box-shadow:var(--sombra-suave); }
.acc-item > summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:0.4rem 1rem;
  padding:1rem 1.15rem; min-height:64px; border-radius:var(--radio-s);
}
.acc-item > summary::-webkit-details-marker{ display:none; }
.acc-item > summary:focus-visible{ outline:3px solid var(--caramelo); outline-offset:2px; }
.acc-titulo{ display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.acc-nombre{ font-weight:500; color:var(--espresso); font-size:1.05rem; line-height:1.35; }
.acc-meta{ font-size:0.88rem; color:var(--oro-texto); }
.acc-meta .pill{ background:var(--marfil-oscuro); border-radius:999px; padding:0.05em 0.6em; margin-left:0.45rem; color:var(--cacao); font-size:0.78rem; white-space:nowrap; }
.acc-meta .pill-oferta{ background:var(--rosa-polvo); color:#7A3B2A; }
.acc-precio{ font-weight:600; color:var(--espresso); white-space:nowrap; text-align:right; }
.acc-precio s{ font-weight:400; opacity:0.55; font-size:0.9rem; margin-right:0.25rem; }
.acc-flecha{
  width:32px; height:32px; border-radius:50%; background:var(--marfil-oscuro); position:relative; flex:none;
  transition:transform .25s ease, background .2s ease;
}
.acc-flecha::after{
  content:""; position:absolute; left:50%; top:45%; width:9px; height:9px;
  border:solid var(--espresso); border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg);
}
.acc-item[open] .acc-flecha{ transform:rotate(180deg); background:var(--nude); }
.acc-cuerpo{ padding:0 1.15rem 0.6rem; animation:fadeSlideIn .25s ease; }
.acc-desc{ font-size:0.97rem; line-height:1.55; margin:0 0 0.6rem; max-width:62ch; }
@media (max-width:560px){
  .acc-item > summary{ grid-template-columns:1fr auto; padding:0.9rem 1rem; }
  .acc-precio{ grid-column:1; grid-row:2; text-align:left; font-size:0.98rem; }
  .acc-flecha{ grid-column:2; grid-row:1 / span 2; }
  .acc-cuerpo{ padding:0 1rem 0.5rem; }
}

/* Oferta de depilación por zonas (Servicios y Reserva) */
.oferta-zonas{
  margin:0 0 0.7rem; padding:0.7rem 0.9rem; border-radius:var(--radio-s);
  background:var(--rosa-polvo); color:#5E2C1E; font-size:0.93rem; line-height:1.5; border-left:4px solid var(--caramelo);
}
.oferta-zonas b{ color:#4A2015; }
.oferta-zonas a{ text-decoration:underline; font-weight:500; }
.oferta-zonas.ok{ background:#E4F1E3; color:#234A27; border-left-color:var(--verde); }
.oferta-zonas.ok b{ color:#1B3A1F; }
.oferta-zonas.pack{ background:#FFF4DC; color:#5E4410; border-left-color:#D9A53A; }
.oferta-zonas.pack b{ color:#4A3500; }

/* Opciones dentro de las tarjetas de "más reservados" */
.pop-opts{ list-style:none; padding:0; margin:0.2rem 0 0; }
.pop-opts a{ display:flex; justify-content:space-between; gap:1rem; padding:0.6rem 0; border-top:1px solid var(--linea); min-height:44px; align-items:center; }
.pop-opts a:hover span{ text-decoration:underline; }
.pop-opts b{ font-family:var(--serif); font-size:1.25rem; color:var(--espresso); white-space:nowrap; }
.pop-opts b s{ font-family:var(--sans); font-size:0.9rem; font-weight:400; opacity:0.55; }

/* ---------- CTA final ---------- */
.cta-band{
  background:var(--espresso); color:var(--nude); border-radius:var(--radio);
  padding:clamp(2.2rem, 5vw, 3.8rem); display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,185,138,0.28), transparent 70%);
}
.cta-band h2{ color:var(--marfil); margin-bottom:0.4rem; }
.cta-band p{ margin:0; }
.cta-band .btn-row{ justify-content:flex-end; position:relative; z-index:1; }

.quote{ max-width:760px; margin:0 auto; text-align:center; }
.quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.7rem,3vw,2.4rem); color:var(--marfil); max-width:none; line-height:1.3; }
.quote span{ display:block; margin-top:1rem; font-size:0.95rem; color:var(--caramelo-suave); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--espresso); color:var(--nude); padding:3.5rem 0 6rem; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(251,247,242,0.14); }
.footer-grid h4{ color:var(--marfil); font-size:1rem; margin-bottom:1rem; font-family:var(--sans); font-weight:500; letter-spacing:0.04em; }
.footer-grid .logo{ color:var(--marfil); margin-bottom:0.9rem; display:block; }
.footer-grid p{ font-size:0.95rem; opacity:0.9; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:0.65rem; font-size:0.97rem; }
.footer-links a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .2s; }
.footer-links a:hover{ text-decoration-color:var(--caramelo-suave); color:var(--marfil); }
.footer-bottom{ padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.87rem; opacity:0.75; }

/* ---------- Barra fija de reserva (móvil) ---------- */
.sticky-book{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:none; gap:0.6rem;
  padding:0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom));
  background:rgba(251,247,242,0.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--linea); box-shadow:0 -8px 24px -12px rgba(43,23,16,0.25);
  transform:translateY(110%); transition:transform .35s ease;
}
.sticky-book.show{ transform:none; }
.sticky-book .btn{ flex:1; min-height:52px; white-space:nowrap; }
.sticky-book .btn-dark{ padding-inline:0.7rem; min-width:0; }
.sticky-book .btn-outline{ flex:0 0 auto; padding:0.6em 1.1em; }
.sticky-book svg{ width:20px; height:20px; }
.sticky-book .btn-wa{ color:#1B7A43; border-color:#1B7A43; }
/* con 3 botones en pantallas estrechas, Llamar y WhatsApp solo con icono */
@media (max-width:420px){
  .sticky-book.con-wa .btn-outline{ font-size:0; gap:0; padding:0.6rem 0.9rem; min-width:56px; justify-content:center; }
  .sticky-book.con-wa .btn-outline svg{ width:22px; height:22px; }
}

/* Botón flotante de WhatsApp (solo ordenador) */
.wa-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:140;
  display:inline-flex; align-items:center; gap:0.55rem; padding:0.75rem 1.1rem 0.75rem 0.9rem;
  background:#1B7A43; color:#fff; border-radius:999px; font-weight:500; font-size:0.95rem;
  box-shadow:0 10px 24px -8px rgba(0,0,0,0.35); transition:transform .2s ease, background .2s ease;
}
.wa-float:hover{ transform:translateY(-2px); background:#156336; }
.wa-float svg{ width:24px; height:24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .nav-links{ gap:1.3rem; }
  .nav-tel{ display:none; }
}
@media (max-width: 1020px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 1010px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }
}
@media (max-width: 880px){
  .hero .container, .split, .reviews, .visit, .cta-band{ grid-template-columns:1fr; }
  .hero-figure{ max-width:460px; margin:0 auto; width:100%; }
  .rating-badge{ left:0.6rem; bottom:1rem; }
  .float-img{ right:0.4rem; }
  .split.reverse .split-media{ order:0; }
  .trust-strip .container{ grid-template-columns:repeat(2,1fr); }
  .pop-grid, .steps{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .menu-list{ grid-template-columns:1fr; }
  .gallery-grid, .insta-strip{ grid-template-columns:repeat(2,1fr); }
  .cta-band .btn-row{ justify-content:flex-start; }
  .sticky-book{ display:flex; }
  .wa-float{ display:none; }
  .cat-tabs{ top:66px; }
  .topbar .dir{ display:none; }
}
@media (max-width: 560px){
  .topbar .dir{ display:none; }
  .topbar .container{ justify-content:center; }
  .topbar .tel-top{ display:none; }
  .topbar{ font-size:0.82rem; }
  .topbar .container{ flex-wrap:nowrap; }
  .topbar .estado{ white-space:nowrap; }
  .solo-ancho{ display:none; }
  .nav-cta{ display:none; }
  .cat-grid{ grid-template-columns:1fr 1fr; gap:0.8rem; }
  .cat-card .cat-body{ padding:1rem; }
  .cat-card h3{ font-size:1.25rem; }
  .cat-card p{ display:none; }
  .team-grid{ grid-template-columns:1fr 1fr; gap:0.8rem; }
  .team-card{ padding:1.2rem 0.9rem; }
  .team-card p{ font-size:0.88rem; }
  .review-themes, .review-cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .logo{ font-size:1.45rem; }
  .btn-row .btn{ flex:1 1 100%; }
}

/* ---------- Animaciones ---------- */
@keyframes fadeSlideIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Solo se ocultan si hay JavaScript (html.js), así nunca queda contenido invisible */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.js .reveal.is-visible{ opacity:1; transform:none; }

.hero-text > *{ animation:fadeSlideIn .8s ease both; }
.hero-text > *:nth-child(2){ animation-delay:.1s; }
.hero-text > *:nth-child(3){ animation-delay:.2s; }
.hero-text > *:nth-child(4){ animation-delay:.3s; }
.hero-text > *:nth-child(5){ animation-delay:.4s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Idioma (ES | CA) ---------- */
.i18n-pend body{ visibility:hidden; }   /* evita ver un instante el texto en castellano */
.nav .btn{ white-space:nowrap; }

/* ---------- Desplegable de idiomas con banderas ---------- */
.lang-menu{ position:relative; flex:none; }
.bandera{ width:24px; height:16px; border-radius:3px; flex:none; display:block; box-shadow:0 0 0 1px rgba(43,23,16,0.18); }
.lang-btn{
  display:inline-flex; align-items:center; gap:0.45rem; min-height:44px; padding:0.4rem 0.7rem;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:999px; cursor:pointer;
  font:inherit; font-size:0.85rem; font-weight:600; letter-spacing:0.04em; color:var(--cacao);
  transition:border-color .2s ease;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"]{ border-color:var(--caramelo); }
.lang-btn:focus-visible, .lang-lista button:focus-visible{ outline:3px solid var(--caramelo); outline-offset:2px; }
.lang-flecha{ width:7px; height:7px; border:solid var(--cacao); border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
.lang-btn[aria-expanded="true"] .lang-flecha{ transform:rotate(-135deg) translateY(-1px); }
.lang-lista{
  position:absolute; right:0; top:calc(100% + 8px); z-index:300; list-style:none; margin:0; padding:0.4rem;
  min-width:250px; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-s);
  box-shadow:var(--sombra); animation:fadeSlideIn .18s ease;
}
.lang-lista[hidden]{ display:none; }
.lang-lista button{
  width:100%; display:flex; align-items:center; gap:0.8rem; min-height:48px; padding:0.5rem 0.8rem;
  background:none; border:0; border-radius:10px; cursor:pointer; text-align:left;
  font:inherit; font-size:1rem; color:var(--cacao);
}
.lang-lista button:hover{ background:var(--marfil-oscuro); }
.lang-lista button[aria-checked="true"]{ background:var(--marfil-oscuro); font-weight:600; color:var(--espresso); }
.lang-lista button[aria-checked="true"]::after{ content:"✓"; margin-left:auto; color:var(--verde); font-weight:700; }
.lang-lista .bandera{ width:30px; height:20px; }
@media (max-width:560px){
  .lang-btn{ padding:0.4rem 0.55rem; gap:0.35rem; }
  .lang-cod{ display:none; }                 /* en móvil: solo bandera y flecha */
  .lang-lista{ min-width:235px; }
}
.lang-otro .nota-idioma{ display:block; padding:0.7rem 0.9rem; background:var(--marfil-oscuro); border-radius:var(--radio-s); font-size:0.95rem; }