/* =========================================================
   ESSÈNCIA BY ELISABET GOYES — sistema de diseño
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&family=Playball&display=swap');

:root{
  /* Color — anclado en las capturas reales de la marca */
  --bg:        #F7F3EA;
  --bg-alt:    #EFE8D8;
  --surface:   #FFFDF9;
  --ink:       #4B4F3F;
  --ink-soft:  #75786A;
  --ink-faint: #A6A692;
  --sage:      #6E7259;
  --sage-dark: #565A46;
  --clay:      #A9814F;
  --clay-dark: #8C6B3E;
  --line:      #DDD5C0;
  --line-dark: #838569;
  --error:     #A6423A;
  --success:   #4B6B4F;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  --font-script: 'Playball', cursive;

  /* Escala tipográfica (base 1rem = 16px) */
  --step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.3rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.3vw, 2.4rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
  --step-5:  clamp(3.1rem, 2.3rem + 3.6vw, 4.6rem);

  /* Espaciado */
  --space-2xs: 0.4rem;
  --space-xs:  0.7rem;
  --space-s:   1.1rem;
  --space-m:   1.8rem;
  --space-l:   2.8rem;
  --space-xl:  4.5rem;
  --space-2xl: 7rem;

  /* Radios y bordes: casi rectos, coherente con la estética de "carta" */
  --radius-s: 2px;
  --radius-m: 4px;

  --content-width: 74rem;
  --text-width: 42rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--space-s);
  line-height: 1.15;
}
p{ margin: 0 0 var(--space-s); }
:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout helpers ---------- */
.wrap{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-m);
}
.section{ padding: var(--space-2xl) 0; }
.section--tight{ padding: var(--space-xl) 0; }
.section--alt{ background: var(--bg-alt); }
.section--dark{ background: var(--sage); color: #EFEBDB; }
.section--dark h1, .section--dark h2, .section--dark h3{ color: #FBF9F1; }
.section--dark .ink-soft{ color: #D8D8C4; }
.text-center{ text-align: center; }
.stack{ display: flex; flex-direction: column; }
.center-col{ max-width: var(--text-width); margin-left: auto; margin-right: auto; }

/* ---------- Divisor hoja (motivo único, reutilizado) ---------- */
.leaf-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin: var(--space-l) 0;
  color: var(--line-dark);
}
.leaf-divider::before, .leaf-divider::after{
  content: '';
  height: 1px;
  width: clamp(2rem, 10vw, 6rem);
  background: var(--line);
}
.section--dark .leaf-divider::before, .section--dark .leaf-divider::after{ background: rgba(255,255,255,.25); }
.leaf-divider svg{ width: 22px; height: 22px; opacity: .8; }

/* ---------- Header / navegación ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}
.brand{
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1;
}
.brand small{
  font-family: var(--font-script);
  font-size: var(--step-0);
  color: var(--ink-soft);
}
nav.main-nav{ display: none; }
nav.main-nav ul{ display: flex; gap: var(--space-l); list-style: none; }
nav.main-nav a{
  font-size: var(--step--1);
  letter-spacing: .03em;
  color: var(--ink-soft);
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  color: var(--ink);
  border-color: var(--clay);
}
.header-actions{ display: flex; align-items: center; gap: var(--space-s); }
.menu-toggle{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-m);
  padding: .5rem .8rem;
  font-size: var(--step--1);
  color: var(--ink);
}
@media (min-width: 800px){
  nav.main-nav{ display: block; }
  .menu-toggle{ display: none; }
}

/* menú móvil */
.mobile-nav{
  display: none;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mobile-nav.is-open{ display: flex; }
.mobile-nav a{
  padding: var(--space-s) var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
}
@media (min-width: 800px){
  .mobile-nav{ display: none !important; }
}

/* ---------- Botones ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: var(--radius-m);
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: .02em;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--clay); color: #FFFBF3; }
.btn-primary:hover{ background: var(--clay-dark); }
.btn-primary:focus-visible{ outline-color: var(--ink); }
.btn-outline{ background: transparent; border-color: var(--line-dark); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink); background: rgba(0,0,0,.03); }
.section--dark .btn-outline{ border-color: rgba(255,255,255,.5); color: #FBF9F1; }
.section--dark .btn-outline:hover{ background: rgba(255,255,255,.08); }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }
.btn-row{ display: flex; gap: var(--space-s); flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero{
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
}
.hero .wordmark{
  font-family: var(--font-display);
  font-size: var(--step-5);
  color: var(--ink);
  margin: 0;
}
.hero .signature{
  display: block;
  font-family: var(--font-script);
  font-size: var(--step-1);
  color: var(--ink-soft);
  margin-top: -0.3em;
}
.hero .tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  letter-spacing: .04em;
  margin: var(--space-m) 0 var(--space-2xs);
  color: var(--sage-dark);
}
.hero .subtitle{
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto var(--space-m);
}
.hero .btn-row{ justify-content: center; margin-top: var(--space-m); }

/* ---------- Página interior: cabecera de página ---------- */
.page-hero{ padding: var(--space-xl) 0 var(--space-l); text-align: center; }
.page-hero h1{ font-size: var(--step-4); }
.page-hero .lede{ max-width: 38rem; margin: 0 auto; color: var(--ink-soft); font-size: var(--step-1); }
.eyebrow-script{
  display: block;
  font-family: var(--font-script);
  font-size: var(--step-1);
  color: var(--clay-dark);
  margin-bottom: var(--space-2xs);
}

/* ---------- Carta de servicios (menú tipo spa, no cards) ---------- */
.menu-group{ margin-bottom: var(--space-l); }
.menu-group__title{
  font-style: italic;
  font-size: var(--step-2);
  color: var(--sage-dark);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-m);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
}
.menu-group__title .durations{
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--1);
  color: var(--ink-faint);
  letter-spacing: .03em;
  white-space: nowrap;
}
.menu-item{
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--line);
}
.menu-item:last-child{ border-bottom: none; }
.menu-item__row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-s);
}
.menu-item__name{
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}
.menu-item__tag{
  font-family: var(--font-script);
  font-size: var(--step-0);
  color: var(--clay-dark);
}
.menu-item__prices{
  margin-left: auto;
  display: flex;
  gap: var(--space-m);
  font-size: var(--step-0);
  color: var(--ink);
  white-space: nowrap;
}
.menu-item__prices span{ display: inline-block; min-width: 3.6rem; text-align: right; }
.menu-item__prices .dim{ color: var(--ink-faint); }
.menu-item__desc{
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: 46rem;
  margin-top: var(--space-2xs);
}
.menu-item__cta{ margin-top: var(--space-xs); }
.menu-item__variable{
  font-size: var(--step--1);
  color: var(--clay-dark);
  font-style: italic;
}
.menu-note{
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-style: italic;
  margin-top: var(--space-s);
}

/* ---------- Franja reserva (Booksy) ---------- */
.booking-banner{
  background: var(--sage);
  color: #F7F4EA;
  border-radius: var(--radius-m);
  padding: var(--space-l) var(--space-m);
  text-align: center;
  margin: var(--space-l) 0;
}
.booking-banner h3{ color: #FBF9F1; margin-bottom: var(--space-2xs); }
.booking-banner p{ color: #DEDCC7; max-width: 32rem; margin: 0 auto var(--space-m); }

/* ---------- Grid genérico ---------- */
.grid{ display: grid; gap: var(--space-l); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width: 700px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Placeholder de imagen local (sin servicios externos) ---------- */
.placeholder-img{
  position: relative;
  background: linear-gradient(155deg, var(--bg-alt), var(--line));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  text-align: center;
  overflow: hidden;
}
.placeholder-img::before{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.25) 0 2px, transparent 2px 14px);
}
.placeholder-img span{ position: relative; padding: 0 1rem; }
.ratio-4-3{ aspect-ratio: 4 / 3; }
.ratio-1-1{ aspect-ratio: 1 / 1; }
.ratio-16-9{ aspect-ratio: 16 / 9; }
.ratio-3-4{ aspect-ratio: 3 / 4; }

/* ---------- Fotografía real (sustituye a placeholder-img cuando hay foto) ---------- */
.photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

/* ---------- Tarjeta simple (usada con moderación: valores, horario) ---------- */
.info-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  background: var(--surface);
}
.info-card h3{ font-size: var(--step-1); margin-bottom: var(--space-2xs); }

/* ---------- Tabla horario ---------- */
.hours-table{ width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.hours-table td{ padding: var(--space-2xs) 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.section:not(.section--dark) .hours-table td{ border-bottom: 1px solid var(--line); }
.hours-table td:last-child{ text-align: right; }
.hours-table tr.is-today td{ font-weight: 500; }

/* ---------- Formulario de contacto ---------- */
.form-grid{ display: grid; gap: var(--space-m); }
@media (min-width: 640px){
  .form-grid.two-col{ grid-template-columns: 1fr 1fr; }
  .form-grid.two-col .full{ grid-column: 1 / -1; }
}
.field{ display: flex; flex-direction: column; gap: .4rem; }
.field label{ font-size: var(--step--1); color: var(--ink-soft); letter-spacing: .02em; }
.field input,
.field select,
.field textarea{
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  padding: .75rem .9rem;
  width: 100%;
}
.field textarea{ resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--clay);
  outline-offset: 1px;
  border-color: var(--clay);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color: var(--error); }
.field .error-msg{
  font-size: var(--step--1);
  color: var(--error);
  display: none;
}
.field.has-error .error-msg{ display: block; }
.form-status{
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  display: none;
}
.form-status.is-visible{ display: block; }
.form-status.is-success{ background: #E7EEE1; color: var(--success); border: 1px solid #C3D4B7; }
.form-status.is-error{ background: #F3E1DE; color: var(--error); border: 1px solid #E2BBB4; }
.form-status.is-loading{ background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--line); }
button[type="submit"].is-loading{ position: relative; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--sage-dark);
  color: #E6E4D2;
  padding: var(--space-xl) 0 var(--space-l);
}
.site-footer a:hover{ color: #FBF9F1; }
.footer-grid{
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-grid h4{ color: #FBF9F1; font-size: var(--step-0); margin-bottom: var(--space-s); }
.footer-grid p, .footer-grid li{ color: #C9C7B3; font-size: var(--step--1); }
.footer-grid ul{ list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-brand{
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: #FBF9F1;
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  font-size: var(--step--1);
  color: #A9A98F;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
}

/* ---------- Viñeta promocional (portada) ---------- */
.christmas-promo{
  background: linear-gradient(155deg, var(--sage-dark), #3F4234);
  padding: var(--space-l) var(--space-m);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.christmas-promo::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(169,129,79,.18) 0, transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(169,129,79,.14) 0, transparent 45%);
  pointer-events: none;
}
.christmas-promo__icon{
  width: 46px;
  height: 46px;
  color: var(--clay);
  margin: 0 auto var(--space-xs);
  display: block;
  position: relative;
}
.christmas-promo__eyebrow{
  font-family: var(--font-script);
  font-size: var(--step-1);
  color: #E7D9BE;
  display: block;
  margin-bottom: var(--space-2xs);
  position: relative;
}
.christmas-promo h2{
  color: #FBF9F1;
  font-size: var(--step-3);
  margin-bottom: var(--space-2xs);
  position: relative;
}
.christmas-promo p{
  color: #D8D8C4;
  max-width: 32rem;
  margin: 0 auto var(--space-m);
  position: relative;
}
.christmas-promo .btn-row{ justify-content: center; position: relative; }
.christmas-promo .btn-primary{ background: var(--clay); }
.christmas-promo .btn-primary:hover{ background: #C79A5F; }

/* ---------- Galería de fotos reales ---------- */
.gallery-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 700px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
.gallery-grid figure{ margin: 0; }
.gallery-grid figcaption{
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}
.gallery-grid .ratio-4-3,
.gallery-grid .ratio-1-1{ overflow: hidden; }

/* ---------- Reseñas ---------- */
.reviews-banner{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-m);
  padding: var(--space-l) var(--space-m);
  text-align: center;
}
/* ---------- Skip link (accesibilidad) ---------- */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 100;
}
.skip-link:focus{ left: var(--space-s); top: var(--space-s); }

/* ---------- Utilidades ---------- */
.mt-0{ margin-top: 0; }
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}