/* =========================================================
   Olga Camacho — Asesora de Imagen y Estilista
   ---------------------------------------------------------
   Dirección: editorial. La grotesca en mayúsculas que ella
   usa en sus creatividades, llevada a escala de revista;
   la carta de servicios compuesta como una carta de verdad,
   con filetes y precios alineados, no como tarjetas.
   Paleta: la suya, publicada por ella misma.
   ========================================================= */

/* ---------- Fuentes autoalojadas ----------
   Servidas desde el propio dominio, no desde Google Fonts.
   Motivo legal: cargarlas desde fonts.gstatic.com envía la IP del
   visitante a Google (un tercero en EE. UU.) antes de que haya dado
   ningún consentimiento. Tribunales europeos ya han condenado ese uso.
   Autoalojándolas el problema desaparece y además carga antes.
   Son fuentes variables: un archivo cubre todos los pesos. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:300 700;
  font-display:swap; src:url("../fonts/archivo.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:300 500;
  font-display:swap; src:url("../fonts/jost.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:400 500;
  font-display:swap; src:url("../fonts/cormorant.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:italic; font-weight:400;
  font-display:swap; src:url("../fonts/cormorant-italic.woff2") format("woff2");
}

:root{
  /* Paleta oficial de Olga */
  --hueso:      #F7F1EA;
  --arena-1:    #E9DED3;
  --arena-2:    #D6C6B6;
  --champan:    #C9B18A;
  --topo:       #8F867C;

  /* Neutros derivados, con el mismo sesgo cálido que los suyos */
  --gris:       #505050;   /* el gris de sus titulares */
  --tinta:      #33302B;
  --carbon:     #35312C;
  --champan-o:  #B2966A;
  /* El champán sobre el hueso da 1,8:1. Inservible para texto. */
  --champan-txt:#85703F;

  --bg:         var(--hueso);
  --texto:      var(--tinta);
  --texto-2:    #6E665D;
  --titular:    var(--gris);
  --linea:      rgba(51,48,43,.16);
  --linea-fina: rgba(51,48,43,.09);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:   "Cormorant Garamond", Georgia, serif;

  --max:    1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --t: .5s cubic-bezier(.2,.8,.25,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--texto);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,.4vw + 14.6px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
p{ margin:0; }

/* Grano: textura de papel. Lo que más aleja la página del look de plantilla. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--carbon); color:var(--hueso); padding:.8em 1.4em;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--champan-txt); outline-offset:3px; }

/* ---------- Tipografía ---------- */
h1,h2,.display{
  font-family:var(--display);
  font-weight:300;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.035em;
  color:var(--titular);
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.9rem,9.5vw,7.2rem); }
h2{ font-size:clamp(2rem,4.6vw,3.5rem); }
h1 strong,h2 strong,.display strong{ display:block; font-weight:700; letter-spacing:-.05em; }
h3{ font-family:var(--sans); font-weight:400; font-size:1.1rem; line-height:1.3; margin:0; color:var(--texto); }

.eyebrow{
  font-family:var(--display);
  font-size:.7rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--champan-txt);
}
.lead{ font-size:clamp(1.02rem,1.1vw,1.18rem); color:var(--texto-2); max-width:38ch; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:820px; }
.section{ padding-block:clamp(72px,11vw,150px); }
.section-linea{ border-top:1px solid var(--linea); }

.section-head{ margin-bottom:clamp(40px,6vw,76px); }
.section-head h2{ max-width:15ch; }
.section-head .eyebrow{ display:block; margin-bottom:1.6em; }
.section-head .section-sub{
  max-width:54ch; margin-top:1.6em;
  color:var(--texto-2); font-size:1rem;
}
.section-head-center{ text-align:center; }
.section-head-center h2{ max-width:none; }
.section-head-center .section-sub{ margin-inline:auto; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 2.1em;
  border:1px solid transparent;
  font-family:var(--display);
  font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.btn-primary{ background:var(--carbon); color:var(--hueso); }
.btn-primary:hover{ background:var(--champan); color:var(--carbon); }
.btn-ghost{ border-color:var(--linea); color:var(--texto); }
.btn-ghost:hover{ border-color:var(--carbon); background:var(--carbon); color:var(--hueso); }
.btn-sm{ padding:.75em 1.4em; font-size:.68rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--hueso) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t);
}
.site-header.is-stuck{ border-bottom-color:var(--linea); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; }

.brand{ display:flex; align-items:center; gap:.7em; text-decoration:none; }
.brand-mark{
  width:36px; height:36px; flex:none;
  border:1px solid var(--champan); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:.8rem;
  color:var(--champan-txt);
}
.brand-mark::before{ content:"OC"; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{
  font-family:var(--display); font-size:.9rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.brand-text em{
  font-size:.57rem; letter-spacing:.2em; text-transform:uppercase;
  font-style:normal; color:var(--texto-2);
}

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
.nav a{
  text-decoration:none;
  font-family:var(--display); font-size:.72rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
}
.nav a:not(.btn){ position:relative; color:var(--texto-2); transition:color var(--t); }
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px;
  height:1px; background:var(--carbon); transition:right var(--t);
}
.nav a:not(.btn):hover{ color:var(--texto); }
.nav a:not(.btn):hover::after{ right:0; }

.nav-toggle{
  display:none; width:44px; height:44px;
  background:none; border:1px solid var(--linea); border-radius:0;
  cursor:pointer; padding:13px 11px;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:1px; background:var(--texto); transition:transform var(--t), opacity var(--t); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(40px,7vw,90px) clamp(48px,7vw,96px); }
.hero-inner{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,4vw,60px);
  align-items:end;
}
.hero-copy .eyebrow{ display:block; margin-bottom:2em; }
.hero h1{ margin-bottom:.5em; }
.h1-entrada{
  display:block;
  font-size:clamp(.95rem,.22em,1.6rem);
  font-weight:300; line-height:1.35;
  letter-spacing:.005em; text-transform:none;
  color:var(--texto-2); max-width:22ch;
  margin-bottom:.9em;
}
.hero h1 strong{ color:var(--carbon); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2.4em; }

/* Retrato con el bloque de color detrás, desplazado */
.hero-visual{ position:relative; }
.hero-visual::before{
  content:""; position:absolute; inset:16% -7% -7% 26%;
  background:var(--champan);
}
.portrait-real{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.portrait-real img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }

/* ---------- Cinta ---------- */
.ticker{
  border-block:1px solid var(--linea);
  padding-block:1.1em;
  overflow:hidden;
  display:flex; gap:0;
}
.ticker-track{
  display:flex; flex:none; gap:3.5rem; padding-right:3.5rem;
  animation:desliza 46s linear infinite;
}
.ticker span{
  font-family:var(--display);
  font-size:.78rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-2); white-space:nowrap;
  display:flex; align-items:center; gap:3.5rem;
}
.ticker span::after{ content:"◆"; color:var(--champan); font-size:.55em; }
@keyframes desliza{ to{ transform:translateX(-100%); } }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* ---------- Dolor ---------- */
.pain-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0;
  border-top:1px solid var(--linea);
}
.pain{ padding:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,34px) clamp(28px,3.4vw,44px) 0; border-bottom:1px solid var(--linea); }
.pain h3{ font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-size:1rem; font-weight:500; margin-bottom:.8em; }
.pain p{ color:var(--texto-2); font-size:.95rem; }

/* ---------- Carta de servicios ----------
   Compuesta como una carta: filete, nombre, precio alineado
   a la derecha y el contenido en dos columnas. La etiqueta de
   cada servicio dice cómo se relaciona con los demás, que es
   información real, no un número decorativo. */
.carta{ border-top:1px solid var(--carbon); }
.carta-item{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) 1.1fr;
  gap:clamp(20px,3vw,56px);
  padding-block:clamp(30px,3.6vw,52px);
  border-bottom:1px solid var(--linea);
  transition:background var(--t);
}
.carta-item:hover{ background:rgba(201,177,138,.13); }
.carta-item--destacada{
  background:rgba(201,177,138,.2);
  border-bottom-color:var(--champan);
}
.carta-item--destacada:hover{ background:rgba(201,177,138,.28); }

.carta-rel{
  display:inline-block;
  font-family:var(--display); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--champan-txt);
  padding-bottom:.9em;
}
.carta-nombre{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.02; letter-spacing:-.025em; text-transform:uppercase;
  color:var(--titular); margin:0;
}
.carta-tipo{ margin-top:.5em; font-size:.9rem; color:var(--texto-2); }
.carta-precio{
  font-family:var(--display);
  font-size:clamp(1.6rem,2.6vw,2.15rem); font-weight:500;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--carbon); margin-top:.7em;
}
.carta-precio small{ display:block; font-size:.6rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-2); margin-bottom:.4em; }

.carta-desc{ color:var(--texto-2); font-size:.97rem; margin-bottom:1.5em; max-width:52ch; }
.incluye{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.55em 2em; }
.incluye li{ position:relative; padding-left:1.15em; font-size:.92rem; line-height:1.5; }
.incluye li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--champan);
}
.addon{
  margin-top:1.6em; padding-top:1.2em;
  border-top:1px solid var(--linea);
  font-size:.89rem; color:var(--texto-2);
}
.addon strong{
  display:block; font-family:var(--display);
  font-size:.62rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto); margin-bottom:.45em;
}
.addon span{ color:var(--champan-txt); font-weight:500; white-space:nowrap; }

/* Complementarios */
.complementarios{ margin-top:clamp(44px,6vw,80px); }
.comp-head{ max-width:56ch; margin-bottom:clamp(24px,3vw,36px); }
.comp-head h3{ font-family:var(--display); text-transform:uppercase; font-size:1.15rem; font-weight:500; letter-spacing:.02em; margin-bottom:.7em; }
.comp-head p{ color:var(--texto-2); font-size:.95rem; }
.comp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.6vw,32px); }
.comp{ border-top:1px solid var(--carbon); padding-top:1.4em; display:flex; flex-direction:column; }
.comp h4{ margin:0 0 .6em; font-family:var(--display); text-transform:uppercase; font-size:.92rem; font-weight:500; letter-spacing:.04em; }
.comp p{ font-size:.93rem; color:var(--texto-2); flex:1; }
.comp-precio{
  margin-top:1.2em !important; font-family:var(--display);
  font-size:1.5rem; font-weight:500; letter-spacing:-.03em;
  color:var(--carbon) !important; flex:none !important;
}

/* ---------- Modalidades ---------- */
.modos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:0; border-top:1px solid var(--carbon); }
.mode{
  padding:clamp(26px,3vw,40px) clamp(20px,2.2vw,32px) clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--linea);
  display:flex; flex-direction:column;
}
.mode + .mode{ border-left:1px solid var(--linea-fina); padding-left:clamp(20px,2.2vw,32px); }
.mode-principal .mode-donde{ color:var(--champan-txt); }
.mode h3{ font-family:var(--display); text-transform:uppercase; font-size:1.05rem; font-weight:500; letter-spacing:.02em; }
.mode-donde{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-2); margin:.7em 0 1.5em; }
.mode .incluye{ grid-template-columns:1fr; gap:.5em; margin-bottom:1.5em; flex:1; }
.mode-ideal{ font-size:.9rem; color:var(--texto-2); padding-top:1.1em; border-top:1px solid var(--linea-fina); margin-bottom:1.2em; }
.mode-ideal strong{ color:var(--texto); font-weight:400; }
.mode-link{
  align-self:flex-start; text-decoration:none;
  font-family:var(--display); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--carbon);
  border-bottom:1px solid var(--champan); padding-bottom:.35em;
  transition:border-color var(--t), color var(--t);
}
.mode-link:hover{ color:var(--champan-txt); border-color:var(--carbon); }

/* ---------- Estaciones: banda a sangre ---------- */
.banda{ background:var(--arena-1); padding-block:clamp(72px,11vw,150px); }
.season-tabs{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--carbon); margin-bottom:clamp(30px,4vw,48px); }
.season-tab{
  flex:1 1 150px;
  padding:1.2em 1.4em;
  background:none; border:0; border-bottom:2px solid transparent;
  cursor:pointer; text-align:left;
  font-family:var(--display); font-size:.78rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-2);
  transition:color var(--t), border-color var(--t);
}
.season-tab:hover{ color:var(--texto); }
.season-tab.is-active{ color:var(--carbon); border-bottom-color:var(--carbon); font-weight:600; }

.season-panel{ display:none; }
.season-panel.is-active{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px); }
.season-top h3{
  font-family:var(--display); font-weight:300; text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:.95; letter-spacing:-.04em;
  color:var(--titular); margin-bottom:.5rem;
}
.season-chip{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champan-txt); }
.season-desc{ color:var(--texto-2); font-size:.97rem; margin-top:1.4em; max-width:46ch; }
.season-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:1.4em; margin:0 0 2em; }
.season-meta dt{ font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-2); margin-bottom:.4em; }
.season-meta dd{ margin:0; font-size:.94rem; }
.palette{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:0; }
.palette li{ text-align:left; }
.palette .sw{ aspect-ratio:1/1.35; width:100%; }
.palette small{ display:block; font-size:.62rem; letter-spacing:.06em; color:var(--texto-2); padding:.7em .3em 0; }
.nota{ margin-top:clamp(28px,3.4vw,44px); max-width:56ch; font-size:.93rem; color:var(--texto-2); }

/* ---------- Proceso: aquí los números sí son una secuencia ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; border-top:1px solid var(--carbon); }
.step{ padding:clamp(26px,3vw,42px) clamp(20px,2.4vw,34px) clamp(26px,3vw,42px) 0; }
.step + .step{ border-left:1px solid var(--linea-fina); padding-left:clamp(20px,2.4vw,34px); }
.step-num{
  display:block; font-family:var(--display);
  font-size:clamp(2.6rem,5vw,4rem); font-weight:300;
  line-height:1; letter-spacing:-.05em;
  color:var(--champan); margin-bottom:.35em;
}
.step h3{ font-family:var(--display); text-transform:uppercase; font-size:1rem; font-weight:500; letter-spacing:.03em; margin-bottom:.7em; }
.step p{ color:var(--texto-2); font-size:.94rem; }

/* ---------- Franja oscura ---------- */
.franja{ background:var(--carbon); color:var(--hueso); padding-block:clamp(60px,8vw,110px); }
.franja h2{ color:var(--hueso); }
.franja-inner{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px; }
.franja p{ color:rgba(247,241,234,.72); max-width:42ch; margin-top:1.4em; }
.franja .btn-primary{ background:var(--champan); color:var(--carbon); }
.franja .btn-primary:hover{ background:var(--hueso); }

/* ---------- Sobre mí ---------- */
.about{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,80px); align-items:start; }
.about-visual{ position:relative; }
.about-visual::before{ content:""; position:absolute; inset:-5% 12% 12% -6%; background:var(--arena-2); }
.about-visual .portrait-real{ aspect-ratio:2/3; }
.about-copy p + p{ margin-top:1.1em; }
.about-copy .lead{ max-width:44ch; font-size:1.1rem; color:var(--texto); }
.lema{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.3;
  color:var(--champan-txt);
  margin-top:1.8em !important;
  padding-top:1.4em; border-top:1px solid var(--linea);
}
.firma{ font-family:var(--display); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-2); margin-top:1em !important; }

/* ---------- Testimonios ---------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:0; border-top:1px solid var(--carbon); }
.quote{
  margin:0; padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px) clamp(26px,3vw,40px) 0;
  display:flex; flex-direction:column;
}
.quote + .quote{ border-left:1px solid var(--linea-fina); padding-left:clamp(20px,2.4vw,32px); }
.quote p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.3; letter-spacing:-.02em;
  color:var(--titular); flex:1;
}
.quote-destacada p{ color:var(--carbon); }
.quote footer{ margin-top:1.8em; display:flex; flex-direction:column; gap:.3em; }
.quote cite{
  font-style:normal; font-family:var(--display);
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.quote em{ font-style:normal; font-size:.76rem; color:var(--texto-2); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--carbon); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.4em 3em 1.4em 0;
  font-family:var(--display); font-size:1rem; font-weight:400;
  letter-spacing:-.005em; color:var(--titular);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4em; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-right:1px solid var(--champan-txt); border-bottom:1px solid var(--champan-txt);
  transform:rotate(45deg); transition:transform var(--t);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details p{ padding:0 3em 1.6em 0; color:var(--texto-2); font-size:.96rem; max-width:62ch; }

/* ---------- Reservar: calendario propio ---------- */
.reserva{ max-width:900px; margin:0 auto clamp(56px,8vw,96px); }
.paso{ padding-block:clamp(26px,3.4vw,42px); border-top:1px solid var(--linea); }
.paso:first-child{ border-top:1px solid var(--carbon); }
.paso[data-bloqueado]{ opacity:.38; pointer-events:none; }
.paso-titulo{
  display:flex; align-items:center; gap:.8em;
  font-family:var(--display); text-transform:uppercase;
  font-size:.95rem; font-weight:500; letter-spacing:.08em;
  margin-bottom:1.6em;
}
.paso-num{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; border:1px solid var(--champan);
  border-radius:50%; font-size:.72rem; color:var(--champan-txt);
}

.opciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }
.opcion{
  display:flex; flex-direction:column; gap:.3em;
  text-align:left; cursor:pointer;
  padding:1em 1.2em;
  background:none; border:1px solid var(--linea); border-radius:0;
  transition:border-color var(--t), background var(--t);
}
.opcion:hover{ border-color:var(--champan); background:rgba(201,177,138,.12); }
.opcion.is-on{ border-color:var(--carbon); background:var(--carbon); color:var(--hueso); }
.opcion-nombre{ font-family:var(--display); font-size:.86rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.opcion-meta{ font-size:.82rem; color:var(--texto-2); }
.opcion.is-on .opcion-meta{ color:rgba(247,241,234,.7); }

.aviso{ padding:1.2em 1.4em; background:rgba(201,177,138,.2); font-size:.94rem; }

.cal-nav{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-bottom:1.2em; }
.cal-nav strong{
  font-family:var(--display); text-transform:uppercase;
  font-size:1rem; font-weight:500; letter-spacing:.1em;
}
.cal-flecha{
  width:40px; height:40px; flex:none; cursor:pointer;
  background:none; border:1px solid var(--linea); color:var(--texto);
  transition:border-color var(--t), background var(--t);
}
.cal-flecha:hover:not(:disabled){ border-color:var(--carbon); background:var(--carbon); color:var(--hueso); }
.cal-flecha:disabled{ opacity:.3; cursor:not-allowed; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dia-nombre{
  text-align:center; padding-bottom:.7em;
  font-family:var(--display); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; color:var(--texto-2);
}
.cal-hueco{ aspect-ratio:1; }
.cal-dia{
  aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  background:rgba(201,177,138,.2); border:1px solid transparent; border-radius:0;
  font-family:var(--display); font-size:.9rem; font-variant-numeric:tabular-nums;
  color:var(--texto);
  transition:background var(--t), border-color var(--t), color var(--t);
}
.cal-dia:hover:not(:disabled){ border-color:var(--carbon); }
.cal-dia.is-no{ background:none; color:rgba(110,102,93,.45); cursor:not-allowed; }
.cal-dia.is-on{ background:var(--carbon); color:var(--hueso); }
.cal-vacio{ margin-top:1.2em; font-size:.9rem; color:var(--texto-2); }

.cal-horas{ margin-top:1.8em; }
.cal-horas-titulo{
  font-family:var(--display); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-2);
  margin-bottom:1em;
}
.cal-horas-lista{ display:flex; flex-wrap:wrap; gap:8px; }
.cal-hora{
  padding:.75em 1.3em; cursor:pointer;
  background:none; border:1px solid var(--linea); border-radius:0;
  font-family:var(--display); font-size:.82rem; font-variant-numeric:tabular-nums;
  transition:border-color var(--t), background var(--t), color var(--t);
}
.cal-hora:hover{ border-color:var(--champan); background:rgba(201,177,138,.16); }
.cal-hora.is-on{ background:var(--carbon); border-color:var(--carbon); color:var(--hueso); }

.resumen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.2em;
  padding:1.3em 1.5em; margin-bottom:2em;
  background:rgba(201,177,138,.2);
}
.resumen span{ display:flex; flex-direction:column; font-size:.93rem; }
.resumen small{
  font-family:var(--display); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-2);
  margin-bottom:.35em;
}
.resumen-vacio{ color:var(--texto-2); font-style:italic; }

.reserva-ok{ padding:2em; background:var(--carbon); color:var(--hueso); }
.reserva-ok h4{
  margin:0 0 .6em; font-family:var(--display); text-transform:uppercase;
  font-size:1.05rem; font-weight:500; letter-spacing:.08em;
}
.reserva-ok p{ color:rgba(247,241,234,.75); font-size:.94rem; }

.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.opcional{ text-transform:none; letter-spacing:0; color:var(--texto-2); }
.nota-envio{ font-size:.84rem; color:var(--texto-2); }
button:disabled{ opacity:.4; cursor:not-allowed; }

.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,5vw,72px); align-items:start; }
.form{ display:grid; gap:20px; }
.field{ display:grid; gap:.5em; }
.field label{ font-family:var(--display); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-2); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.97rem; width:100%;
  padding:.85em 0;
  background:none; border:0; border-bottom:1px solid var(--linea);
  color:var(--texto); border-radius:0;
  transition:border-color var(--t);
}
.field select{ padding-left:0; }
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--champan-txt); }
.field input[aria-invalid="true"]{ border-bottom-color:#A8442F; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.check{ display:flex; gap:.8em; align-items:flex-start; font-size:.86rem; color:var(--texto-2); }
.check input{ margin-top:.3em; accent-color:var(--champan-txt); flex:none; }
.form-msg{ font-size:.88rem; min-height:1.3em; }
.form-msg.ok{ color:#3F6B4E; }
.form-msg.err{ color:#A8442F; }

.contact-side h3{ font-family:var(--display); text-transform:uppercase; font-size:.95rem; font-weight:500; letter-spacing:.08em; margin-bottom:1.6em; }
.contact-list{ display:grid; gap:0; }
.contact-list li{ display:flex; align-items:center; gap:.9em; font-size:.94rem; padding:1em 0; border-bottom:1px solid var(--linea-fina); }
.contact-list a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--t); }
.contact-list a:hover{ border-bottom-color:var(--champan); }
.ci{ flex:none; width:22px; color:var(--champan-txt); font-size:.95rem; }
.side-note{ margin-top:2em; padding:1.3em 1.5em; background:var(--arena-1); font-size:.9rem; }

/* ---------- Pie ---------- */
.site-footer{ background:var(--carbon); color:var(--hueso); padding-block:clamp(48px,6vw,72px) clamp(28px,3vw,36px); }
.footer-inner{ display:grid; gap:36px; }
.footer-brand{ display:flex; align-items:center; gap:1em; }
.footer-brand .brand-mark{ border-color:rgba(201,177,138,.7); color:var(--champan); }
.footer-brand p{ font-size:.88rem; line-height:1.5; color:rgba(247,241,234,.72); }
.footer-brand strong{
  display:block; font-family:var(--display); font-size:.92rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hueso);
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:1em 2.2em; }
.footer-nav a{
  text-decoration:none; font-family:var(--display);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,241,234,.72); transition:color var(--t);
}
.footer-nav a:hover{ color:var(--hueso); }
.footer-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding-top:26px; border-top:1px solid rgba(247,241,234,.16);
  font-size:.76rem; color:rgba(247,241,234,.55);
}
.footer-legal a{ text-decoration:none; border-bottom:1px solid rgba(247,241,234,.3); }


/* ---------- Páginas legales ---------- */
.legal{ padding-block:clamp(48px,7vw,90px) clamp(60px,8vw,110px); }
.legal-titulo{
  font-family:var(--display); font-weight:300; text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem); line-height:.95; letter-spacing:-.035em;
  color:var(--titular); margin:.4em 0 0;
}
.legal-fecha{ margin-top:1.2em; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-2); }
.legal h2{
  font-family:var(--display); text-transform:uppercase;
  font-size:1.05rem; font-weight:600; letter-spacing:.04em; line-height:1.3;
  color:var(--carbon);
  margin:2.8em 0 1em; padding-top:1.2em; border-top:1px solid var(--linea);
  max-width:none;
}
.legal p{ margin-bottom:1em; max-width:70ch; }
.legal ul{ margin:0 0 1.4em; max-width:70ch; }
.legal ul li{ position:relative; padding-left:1.3em; margin-bottom:.55em; }
.legal ul li::before{ content:""; position:absolute; left:0; top:.68em; width:5px; height:5px; background:var(--champan); }
.legal-datos li{ padding-left:1.3em; }
.legal a{ color:var(--champan-txt); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--carbon); }

.legal-tabla{
  width:100%; border-collapse:collapse; margin:0 0 1.6em;
  font-size:.9rem; text-align:left;
}
.legal-tabla caption{
  text-align:left; font-family:var(--display); font-size:.65rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-2);
  padding-bottom:.9em;
}
.legal-tabla th,.legal-tabla td{
  padding:.85em 1em .85em 0; border-bottom:1px solid var(--linea); vertical-align:top;
}
.legal-tabla th{
  font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--carbon);
  border-bottom-color:var(--carbon);
}
.tabla-scroll{ overflow-x:auto; }

.legal-aviso,.legal-destacado{
  padding:1.4em 1.6em; margin:2em 0;
  background:rgba(201,177,138,.2);
  border-left:2px solid var(--champan);
}
.legal-destacado--aviso{ background:rgba(143,134,124,.16); border-left-color:var(--topo); }
.legal-aviso strong,.legal-destacado strong{
  display:block; font-family:var(--display);
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--carbon); margin-bottom:.7em;
}
.legal-aviso p:last-child,.legal-destacado p:last-child{ margin-bottom:0; }
.legal-destacado ul{ margin-bottom:1em; }
.legal-pendiente{
  padding:1em 1.2em; font-size:.9rem;
  border-left:2px solid var(--champan-txt);
}
.legal-volver{ margin-top:3em; padding-top:1.6em; border-top:1px solid var(--linea); }
.legal-volver a{
  font-family:var(--display); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; color:var(--carbon);
}

/* ---------- Contenido pendiente ---------- */
[data-ph]{
  background:repeating-linear-gradient(45deg,rgba(201,177,138,.28) 0 6px,transparent 6px 12px);
  outline:1px dashed rgba(133,112,63,.55); outline-offset:2px;
}

/* ---------- Movimiento al hacer scroll ----------
   Dos efectos que se complementan:

   1. .sube   → el bloque entra desde abajo al aparecer en pantalla.
                Se dispara una vez, con IntersectionObserver.
   2. [data-parallax] → la foto se desplaza más despacio que la página,
                así que al bajar parece que sube dentro de su marco.
                Es lo que da sensación de profundidad.

   El estado oculto vive bajo .js-scroll, que pone main.js. Si el
   JavaScript no llega a ejecutarse, no se esconde nada y la página se ve
   entera: nunca queda invisible esperando. */
html.js-scroll .sube{
  opacity:0;
  transform:translateY(56px);
  transition:opacity .9s cubic-bezier(.16,.84,.28,1),
             transform .9s cubic-bezier(.16,.84,.28,1);
}
html.js-scroll .sube.visto{ opacity:1; transform:none; }

/* La foto es más alta que su marco para poder moverse sin dejar huecos */
[data-parallax]{
  will-change:transform;
  transition:none;
}
.portrait-real{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-inner{ grid-template-columns:1fr; align-items:start; }
  .hero-visual{ max-width:400px; }
  .carta-item{ grid-template-columns:1fr; }
  .season-panel.is-active{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about-visual{ max-width:360px; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:80px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--hueso); border-bottom:1px solid var(--linea);
    padding:0 var(--gutter) 28px;
    transform:translateY(-130%); transition:transform var(--t);
    max-height:calc(100dvh - 80px); overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav a:not(.btn){ padding:1.15em 0; border-bottom:1px solid var(--linea-fina); font-size:.82rem; }
  .nav a:not(.btn)::after{ display:none; }
  .nav .btn{ margin-top:22px; justify-content:center; }
  body.nav-open{ overflow:hidden; }
  .mode + .mode,.step + .step,.quote + .quote,.booking-steps li + li{ border-left:0; padding-left:0; }
  .franja-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .field-row{ grid-template-columns:1fr; }
  .hero-visual::before{ inset:20% -5% -5% 32%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; }
  /* Excepción: la aparición del contenido sigue viéndose. Es un fundido
     de opacidad, sin desplazamiento, así que no implica movimiento. */
  html.js-scroll .sube{ transition-duration:.5s !important; }
  html.js-scroll .sube{ transform:none !important; }
}

@media print{
  .site-header,.nav-toggle,.ticker,.form,.booking{ display:none; }
  body{ background:#fff; }
  body::after{ display:none; }
}