@font-face{font-family:'Archivo';font-style:italic;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:italic;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/instrumentsans-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/instrumentsans-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/instrumentsans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/instrumentsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ==========================================================================
   VILLA ALTA PRIVATE BOUTIQUE · CENTRO HISTÓRICO
   Sistema de diseño derivado del Manual de Identidad 2024 (AfterProjects).
   Paleta y gesto tipográfico (mayúsculas con tracking amplio, acentos en
   italic light) tomados literalmente del manual.
   ========================================================================== */

:root{
  /* Paleta principal — Pantone del manual */
  --vino:        #44282C;   /* PANTONE 505 C  · fondo dominante */
  --vino-deep:   #2C1A1D;   /* profundidad, pie de página */
  --vino-soft:   #573439;   /* superficies elevadas sobre vino */
  --hueso:       #E9E5DC;   /* PANTONE 7506 C 10% · fondo claro y texto */
  --hueso-warm:  #F3F0EA;
  --oliva:       #5B6452;   /* PANTONE 5753 C · estructura */
  --malva:       #8B5C66;   /* PANTONE 4995 C · acento */
  --malva-lift:  #B08590;   /* acento sobre fondo oscuro (contraste AA) */

  --linea:       rgba(233,229,220,.16);
  --linea-fuerte:rgba(233,229,220,.32);
  --linea-osc:   rgba(68,40,44,.16);

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --paso: clamp(1.5rem, 4vw, 3rem);
  --marco: clamp(1.25rem, 5vw, 5.5rem);
  --ancho: 1280px;
  --radio: 2px;

  --t: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--vino); color:var(--hueso);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}

/* --- Gesto tipográfico de marca ------------------------------------------ */
.eyebrow{
  font-family:var(--display); font-size:.6875rem; font-weight:600;
  font-stretch:118%; text-transform:uppercase; letter-spacing:.26em;
  color:var(--malva-lift); margin:0 0 1.25rem;
}
.seccion--claro .eyebrow{color:var(--malva)}

h1,h2,h3,.display{
  font-family:var(--display); font-weight:600; font-stretch:120%;
  text-transform:uppercase; letter-spacing:.11em; line-height:1.14;
  margin:0; text-wrap:balance;
}
h2{font-size:clamp(1.75rem,1.15rem + 2.4vw,3rem)}
h3{font-size:clamp(1.0625rem,.98rem + .45vw,1.3125rem); letter-spacing:.14em}

/* Título 2 del manual: mayúsculas italic light */
.italica{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-stretch:100%; text-transform:uppercase; letter-spacing:.17em;
  line-height:1.5; color:var(--hueso);
}
.seccion--claro .italica{color:var(--vino)}

.prosa{max-width:62ch; color:rgba(233,229,220,.82)}
.prosa p{margin:0 0 1.15em}
.prosa p:last-child{margin-bottom:0}
.seccion--claro .prosa{color:rgba(44,26,29,.82)}

/* --- Estructura ----------------------------------------------------------- */
.seccion{padding:clamp(4.5rem,9vw,8.5rem) var(--marco); position:relative}
.seccion--claro{background:var(--hueso); color:var(--vino)}
.seccion--oliva{background:var(--oliva); color:var(--hueso)}
.envoltura{max-width:var(--ancho); margin-inline:auto}
.cabecera-seccion{max-width:66ch; margin-bottom:clamp(2.5rem,5vw,4rem)}

/* --- Botones -------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--display); font-size:.75rem; font-weight:600;
  font-stretch:114%; text-transform:uppercase; letter-spacing:.2em;
  padding:1.05em 2.1em; border-radius:var(--radio); border:1px solid transparent;
  text-decoration:none; transition:background .35s var(--t), color .35s var(--t),
    border-color .35s var(--t), transform .35s var(--t);
}
.boton--solido{background:var(--malva); color:var(--hueso-warm); border-color:var(--malva)}
.boton--solido:hover{background:var(--hueso); color:var(--vino); border-color:var(--hueso)}
.boton--linea{background:transparent; color:var(--hueso); border-color:var(--linea-fuerte)}
.boton--linea:hover{border-color:var(--hueso); background:rgba(233,229,220,.08)}
.seccion--claro .boton--linea{color:var(--vino); border-color:var(--linea-osc)}
.seccion--claro .boton--linea:hover{border-color:var(--vino); background:rgba(68,40,44,.06)}
.boton:active{transform:translateY(1px)}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--malva-lift); outline-offset:3px; border-radius:var(--radio);
}

/* --- Barra superior ------------------------------------------------------- */
.barra{
  position:fixed; inset:0 0 auto; z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem;
  padding:1.15rem var(--marco);
  transition:background .45s var(--t), backdrop-filter .45s var(--t), padding .45s var(--t);
}
.barra[data-fija]{
  background:rgba(44,26,29,.9); backdrop-filter:blur(14px) saturate(1.2);
  padding-block:.8rem; border-bottom:1px solid var(--linea);
}
.marca{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0}
.marca svg{width:22px; height:auto; color:var(--hueso)}
.marca-texto{
  font-family:var(--display); font-weight:600; font-stretch:112%;
  font-size:.9375rem; letter-spacing:.2em; text-transform:uppercase; line-height:1;
}
.marca-sub{
  display:block; font-family:var(--display); font-weight:400; font-stretch:100%;
  font-size:.5rem; letter-spacing:.34em; opacity:.72; margin-top:.42em;
}
.nav{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem)}
.nav a{
  font-family:var(--display); font-size:.6875rem; font-weight:500; font-stretch:110%;
  text-transform:uppercase; letter-spacing:.19em; text-decoration:none;
  color:rgba(233,229,220,.76); transition:color .3s var(--t);
}
.nav a:hover{color:var(--hueso)}
.barra .boton{padding:.85em 1.6em; font-size:.6875rem}
@media (max-width:1040px){ .nav{display:none} }

/* --- Hero ----------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:8rem var(--marco) clamp(2rem,4vw,3.5rem);
  overflow:hidden; isolation:isolate;
}
.hero-fondo{position:absolute; inset:0; z-index:-2}
.hero-fondo img,.hero-fondo video{width:100%; height:100%; object-fit:cover}
.hero-fondo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(44,26,29,.94) 0%, rgba(44,26,29,.62) 38%, rgba(44,26,29,.28) 68%, rgba(44,26,29,.55) 100%);
}
.hero-contenido{max-width:var(--ancho); margin-inline:auto; width:100%}
.hero h1{
  font-size:clamp(2.1rem,1.1rem + 4.4vw,5.25rem); font-stretch:125%; font-weight:600;
  letter-spacing:.055em; line-height:1.02; max-width:16ch;
}
.hero h1 em{
  display:block; font-style:italic; font-weight:400; font-stretch:100%;
  font-size:.42em; letter-spacing:.2em; line-height:1.4;
  color:var(--malva-lift); margin-bottom:.9em;
}
.hero-pie{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
}
.hero-dato{
  font-family:var(--display); font-size:.6875rem; font-weight:500; font-stretch:110%;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(233,229,220,.72);
  display:flex; align-items:center; gap:.6em;
}
.hero-dato b{
  font-size:1.5rem; font-weight:600; font-stretch:120%; letter-spacing:.02em;
  color:var(--hueso); line-height:1;
}

/* --- Buscador de fechas --------------------------------------------------- */
.buscador{
  margin-top:clamp(2rem,4vw,3rem); background:rgba(44,26,29,.72);
  backdrop-filter:blur(16px) saturate(1.3); border:1px solid var(--linea-fuerte);
  border-radius:var(--radio); padding:clamp(1rem,2vw,1.35rem);
  display:grid; gap:.75rem; grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  align-items:end; max-width:940px;
}
.campo{display:flex; flex-direction:column; gap:.5rem; min-width:0}
.campo label{
  font-family:var(--display); font-size:.625rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.22em; color:rgba(233,229,220,.66);
}
.campo input,.campo select{
  font-family:var(--body); font-size:.9375rem; color:var(--hueso);
  background:transparent; border:0; border-bottom:1px solid var(--linea-fuerte);
  padding:.55rem 0; border-radius:0; width:100%;
  transition:border-color .3s var(--t);
}
.campo input:hover,.campo select:hover,
.campo input:focus,.campo select:focus{border-bottom-color:var(--hueso); outline:none}
.campo input:focus-visible,.campo select:focus-visible{outline:2px solid var(--malva-lift); outline-offset:4px}
.campo select option{background:var(--vino-deep); color:var(--hueso)}
.campo input::-webkit-calendar-picker-indicator{filter:invert(.85); cursor:pointer; opacity:.65}
.campo input::-webkit-calendar-picker-indicator:hover{opacity:1}
.buscador .boton{white-space:nowrap; height:max-content}
.buscador-aviso{
  grid-column:1/-1; margin:0; font-size:.8125rem; color:var(--malva-lift);
  display:none;
}
.buscador[data-error] .buscador-aviso{display:block}
@media (max-width:800px){
  .buscador{grid-template-columns:1fr 1fr}
  .buscador .boton{grid-column:1/-1}
}
@media (max-width:460px){ .buscador{grid-template-columns:1fr} }

/* --- El plano de los 500 metros (elemento firma) -------------------------- */
.plano{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.plano-lienzo{position:relative; aspect-ratio:1; width:100%}
.plano-lienzo svg{width:100%; height:100%; overflow:visible}
.anillo{fill:none; stroke:var(--linea); stroke-width:1}
.anillo-etiqueta{
  font-family:var(--display); font-size:9px; font-weight:600; font-stretch:112%;
  letter-spacing:.22em; fill:rgba(233,229,220,.45);
}
.radial{stroke:var(--linea); stroke-width:.5}
.hito{cursor:pointer}
.hito circle{
  fill:var(--vino); stroke:var(--malva-lift); stroke-width:1.25; r:4;
  transition:fill .3s var(--t), r .3s var(--t), stroke .3s var(--t);
}
.hito text{
  font-family:var(--display); font-size:8.5px; font-weight:500; font-stretch:108%;
  letter-spacing:.14em; text-transform:uppercase; fill:rgba(233,229,220,.7);
  transition:fill .3s var(--t);
}
.hito:hover circle,.hito[data-activo] circle{fill:var(--malva-lift); r:5.5; stroke:var(--hueso)}
.hito:hover text,.hito[data-activo] text{fill:var(--hueso)}
.hito:focus{outline:none}
.hito:focus-visible circle{stroke:var(--hueso); stroke-width:2.5}
.plano-centro{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center; pointer-events:none;
}
.plano-centro svg{width:30px; color:var(--hueso)}
.plano-centro span{
  font-family:var(--display); font-size:.5625rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.24em; color:var(--hueso);
}
.plano-lectura{
  border-top:1px solid var(--linea); padding-top:1.35rem; margin-top:2rem;
  min-height:7.5rem;
}
.plano-lectura h3{margin-bottom:.55rem; color:var(--hueso)}
.plano-lectura p{margin:0; color:rgba(233,229,220,.8); font-size:.9375rem}
.plano-metrica{
  display:flex; gap:2rem; margin-top:1rem;
  font-family:var(--display); font-size:.625rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.2em; color:var(--malva-lift);
}
.plano-metrica b{
  display:block; font-size:1.5rem; letter-spacing:.01em; color:var(--hueso);
  margin-top:.3em; font-stretch:120%;
}
@media (max-width:900px){ .plano{grid-template-columns:1fr} }

/* --- Rejilla de habitaciones --------------------------------------------- */
.habitaciones{display:grid; gap:clamp(2.5rem,5vw,4.5rem)}
.hab{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.hab:nth-child(even) .hab-fotos{order:2}
.hab-fotos{display:grid; grid-template-columns:1.6fr 1fr; gap:.7rem; align-items:stretch}
.hab-fotos img{width:100%; height:100%; object-fit:cover; border-radius:var(--radio)}
.hab-fotos figure{margin:0; display:grid; gap:.7rem; min-height:0}
.hab-fotos figure img{min-height:0}
.hab-info h3{color:var(--hueso); margin-bottom:1rem}
.hab-lista{
  list-style:none; margin:1.5rem 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.55rem 1.25rem;
}
.hab-lista li{
  font-family:var(--display); font-size:.625rem; font-weight:500; font-stretch:110%;
  text-transform:uppercase; letter-spacing:.17em; color:rgba(233,229,220,.72);
  padding-left:1.1em; position:relative;
}
.hab-lista li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:4px; height:4px; background:var(--malva-lift); border-radius:50%;
}
@media (max-width:880px){
  .hab,.hab:nth-child(even) .hab-fotos{grid-template-columns:1fr; order:0}
}

/* --- Mosaico de la casa --------------------------------------------------- */
.mosaico{
  display:grid; gap:.85rem; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(0,1fr); margin-top:clamp(2rem,4vw,3.5rem);
}
.mosaico img{width:100%; height:100%; object-fit:cover; border-radius:var(--radio)}
.mosaico figure{margin:0; min-height:0; aspect-ratio:3/4}
.mosaico figure.ancho{grid-column:span 2; aspect-ratio:3/2}
.mosaico figure.alto{grid-row:span 2; aspect-ratio:auto}
@media (max-width:820px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .mosaico figure.alto{grid-row:auto; aspect-ratio:3/4}
}

/* --- Desayuno / franja partida ------------------------------------------- */
.partida{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:min(78vh,720px)}
.partida-foto{position:relative; overflow:hidden}
.partida-foto img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.partida-texto{
  padding:clamp(3rem,7vw,6.5rem) var(--marco);
  display:flex; flex-direction:column; justify-content:center;
}
.partida-texto .envoltura{max-width:52ch; margin-inline:0}
@media (max-width:880px){
  .partida{grid-template-columns:1fr; min-height:0}
  .partida-foto{aspect-ratio:4/3; position:relative}
}

/* --- Fichas (reserva directa, servicios) ---------------------------------- */
.fichas{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); background:var(--linea)}
.ficha{background:var(--vino); padding:clamp(1.75rem,3vw,2.5rem)}
.seccion--claro .fichas{background:var(--linea-osc)}
.seccion--claro .ficha{background:var(--hueso)}
.seccion--oliva .fichas{background:rgba(233,229,220,.2)}
.seccion--oliva .ficha{background:var(--oliva)}
.ficha h3{margin-bottom:.85rem}
.ficha p{margin:0; font-size:.9375rem; color:rgba(233,229,220,.78)}
.seccion--claro .ficha p{color:rgba(44,26,29,.78)}
.ficha-num{
  font-family:var(--display); font-size:.625rem; font-weight:600; font-stretch:112%;
  letter-spacing:.24em; color:var(--malva-lift); display:block; margin-bottom:1.5rem;
}
.seccion--claro .ficha-num{color:var(--malva)}

/* --- Conserje virtual ------------------------------------------------------ */
.conserje{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.conserje-panel{
  background:var(--vino-soft); border:1px solid var(--linea);
  border-radius:var(--radio); padding:clamp(1.5rem,3vw,2.25rem);
}
.intenciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.6rem; margin-bottom:1.5rem;
}
.intencion{
  background:transparent; border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  padding:1rem 1.1rem; text-align:left; display:flex; flex-direction:column; gap:.35rem;
  transition:border-color .3s var(--t), background .3s var(--t), transform .3s var(--t);
}
.intencion:hover{border-color:var(--hueso); background:rgba(233,229,220,.06)}
.intencion[aria-pressed="true"]{
  border-color:var(--malva-lift); background:rgba(176,133,144,.16);
}
.intencion b{
  font-family:var(--display); font-size:.6875rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.17em; color:var(--hueso);
}
.intencion span{font-size:.8125rem; color:rgba(233,229,220,.66); line-height:1.45}
.conserje-mensaje{
  font-family:var(--body); font-size:.9375rem; color:var(--hueso); width:100%;
  background:rgba(44,26,29,.55); border:1px solid var(--linea);
  border-radius:var(--radio); padding:.9rem 1rem; resize:vertical; min-height:6.5rem;
  line-height:1.55;
}
.conserje-mensaje:focus{outline:none; border-color:var(--hueso)}
.conserje-mensaje:focus-visible{outline:2px solid var(--malva-lift); outline-offset:2px}
.conserje-acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem}
.conserje-nota{
  font-size:.8125rem; color:rgba(233,229,220,.6); margin:1rem 0 0; max-width:48ch;
}
@media (max-width:900px){ .conserje{grid-template-columns:1fr} }

/* --- Reseñas -------------------------------------------------------------- */
.puntuaciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:1.5rem 1rem; margin-bottom:clamp(2.5rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--linea-osc);
}
.puntuacion b{
  display:block; font-family:var(--display); font-size:2.25rem; font-weight:600;
  font-stretch:122%; letter-spacing:.01em; line-height:1; color:var(--vino);
}
.puntuacion span{
  display:block; margin-top:.6em; font-family:var(--display); font-size:.5625rem;
  font-weight:600; font-stretch:112%; text-transform:uppercase; letter-spacing:.2em;
  color:rgba(44,26,29,.6);
}
.puntuacion[data-alta] b{color:var(--malva)}
.resenas{columns:3 17rem; column-gap:clamp(1.5rem,3vw,2.5rem)}
.resena{
  break-inside:avoid; margin:0 0 clamp(1.5rem,3vw,2.5rem);
  padding-left:1.35rem; border-left:2px solid var(--malva);
}
.resena blockquote{margin:0 0 .85rem; font-size:.9375rem; line-height:1.6; color:rgba(44,26,29,.86)}
.resena figcaption{
  font-family:var(--display); font-size:.5625rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(44,26,29,.55);
}
@media (max-width:640px){ .resenas{columns:1} }

/* --- Guía / contenido editorial ------------------------------------------ */
.guias{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); background:var(--linea-osc)}
.guia{background:var(--hueso); padding:clamp(1.75rem,3vw,2.5rem)}
.guia h3{margin-bottom:1rem; color:var(--vino)}
.guia p{margin:0 0 1em; font-size:.9375rem; color:rgba(44,26,29,.82)}
.guia p:last-child{margin-bottom:0}
.guia ul{margin:0; padding-left:1.1rem; font-size:.9375rem; color:rgba(44,26,29,.82)}
.guia li{margin-bottom:.45em}
.guia li b{font-weight:600}

/* --- Preguntas frecuentes ------------------------------------------------- */
.faq{max-width:76ch; margin-inline:auto}
.faq details{border-bottom:1px solid var(--linea-osc)}
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--display); font-size:.8125rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.13em; color:var(--vino); line-height:1.45;
  transition:color .3s var(--t);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--malva)}
.faq summary::after{
  content:''; position:absolute; right:.35rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--t);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq-cuerpo{padding:0 2.5rem 1.6rem 0; color:rgba(44,26,29,.82); font-size:.9375rem}
.faq-cuerpo p{margin:0 0 .8em}
.faq-cuerpo p:last-child{margin-bottom:0}

/* --- Contacto y pie ------------------------------------------------------- */
.contacto{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:clamp(2rem,4vw,3.5rem)}
.contacto h3{margin-bottom:1rem}
.contacto a{color:var(--hueso); text-decoration:none; border-bottom:1px solid var(--linea-fuerte); transition:border-color .3s var(--t)}
.contacto a:hover{border-color:var(--hueso)}
.contacto p{margin:0 0 .5em; color:rgba(233,229,220,.8); font-size:.9375rem}

.pie{background:var(--vino-deep); padding:clamp(3rem,5vw,4rem) var(--marco) 2rem}
.pie-fila{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center;
  justify-content:space-between; max-width:var(--ancho); margin-inline:auto;
}
.pie-legal{
  max-width:var(--ancho); margin:2.5rem auto 0; padding-top:1.75rem;
  border-top:1px solid var(--linea);
  font-family:var(--display); font-size:.5625rem; font-weight:500; font-stretch:110%;
  text-transform:uppercase; letter-spacing:.19em; color:rgba(233,229,220,.5);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
}

/* --- Flotante de WhatsApp ------------------------------------------------- */
.flotante{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:70;
  display:inline-flex; align-items:center; gap:.7em; text-decoration:none;
  background:var(--oliva); color:var(--hueso-warm);
  border:1px solid rgba(233,229,220,.28); border-radius:100px;
  padding:.9em 1.4em; box-shadow:0 10px 30px rgba(44,26,29,.45);
  font-family:var(--display); font-size:.625rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.19em;
  transform:translateY(150%); opacity:0;
  transition:transform .55s var(--t), opacity .55s var(--t), background .3s var(--t);
}
.flotante[data-visible]{transform:translateY(0); opacity:1}
.flotante:hover{background:var(--malva)}
.flotante svg{width:17px; flex-shrink:0}
@media (max-width:520px){ .flotante span{display:none} .flotante{padding:1em; border-radius:50%} }

/* --- Aparición al hacer scroll -------------------------------------------- */
[data-revela]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--t), transform .8s var(--t)}
[data-revela][data-visible]{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  [data-revela]{opacity:1; transform:none}
  .flotante{transform:none; opacity:1}
}

/* --- Lista de hitos (sincronizada con el plano) --------------------------- */
.hitos{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linea)}
.hitos li{
  background:var(--vino); display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding:.72rem .25rem; cursor:default;
  transition:background .3s var(--t), padding-left .3s var(--t);
}
.hitos li:hover,.hitos li[data-activo]{background:var(--vino-soft); padding-left:.9rem}
.hitos li b{
  font-family:var(--display); font-size:.6875rem; font-weight:500; font-stretch:110%;
  text-transform:uppercase; letter-spacing:.15em; color:rgba(233,229,220,.8);
  transition:color .3s var(--t);
}
.hitos li:hover b,.hitos li[data-activo] b{color:var(--hueso)}
.hitos li span{
  font-family:var(--display); font-size:.625rem; font-weight:600; font-stretch:112%;
  letter-spacing:.14em; color:var(--malva-lift); white-space:nowrap; flex-shrink:0;
}

/* ==========================================================================
   AJUSTES DE COMPOSICIÓN — segunda pasada
   ========================================================================== */

/* Cabeceras a dos columnas: el titular sostiene la izquierda y el texto
   ocupa la derecha, en vez de dejar media página vacía. */
.cabecera-seccion{
  max-width:none; display:grid; align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2rem,5vw,5rem);
}
.cabecera-seccion > .eyebrow{grid-column:1/-1}
.cabecera-seccion > h2{grid-column:1; grid-row:2/span 20; align-self:start}
.cabecera-seccion > *:not(.eyebrow):not(h2){grid-column:2}
.cabecera-seccion .prosa{max-width:52ch}
.cabecera-seccion--centro{
  display:block; max-width:66ch; margin-inline:auto; text-align:center;
}
@media (max-width:880px){
  .cabecera-seccion{grid-template-columns:1fr}
  .cabecera-seccion > h2{grid-row:auto}
  .cabecera-seccion > *:not(.eyebrow):not(h2){grid-column:1}
}

/* Hero: el texto se apoya sobre un velo propio para no depender de que la
   foto tenga zonas oscuras justo detrás. */
.hero-fondo::after{
  background:
    linear-gradient(to top, rgba(44,26,29,.96) 0%, rgba(44,26,29,.80) 30%,
                    rgba(44,26,29,.50) 62%, rgba(44,26,29,.72) 100%),
    linear-gradient(105deg, rgba(44,26,29,.82) 0%, rgba(44,26,29,.52) 46%, rgba(44,26,29,0) 78%);
}
.hero h1 em{color:#D9BEC5}
.hero-dato b{text-transform:none}

/* Plano: trazo con más presencia; a esta escala el hilo anterior se perdía. */
.radial{stroke:rgba(233,229,220,.22); stroke-width:1}
.anillo{stroke:rgba(233,229,220,.24)}
.hito circle{r:5.5; stroke-width:1.5}
.hito:hover circle,.hito[data-activo] circle{r:7.5}

/* Mosaico: filas de alto fijo para que los spans encajen sin huecos. */
.mosaico{grid-auto-rows:clamp(10rem,15.5vw,14rem)}
.mosaico figure{aspect-ratio:auto; height:100%}
.mosaico figure.ancho{aspect-ratio:auto; grid-column:span 2}
.mosaico figure.alto{aspect-ratio:auto; grid-row:span 2}
@media (max-width:820px){
  .mosaico{grid-auto-rows:clamp(8rem,26vw,12rem)}
  .mosaico figure.alto{grid-row:span 2}
}

/* Habitaciones: la columna de fotos manda la altura y las tres imágenes
   comparten un mismo bloque, sin escalones. */
.hab-fotos{aspect-ratio:4/3}
.hab-fotos > img{height:100%}
.hab-fotos figure{grid-template-rows:1fr 1fr; height:100%}
@media (max-width:880px){ .hab-fotos{aspect-ratio:16/11} }

/* Cuatro atributos por habitación: en dos columnas quedan 2×2 y no cuelga uno solo. */
.hab-lista{grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- La llegada (video vertical) ------------------------------------------ */
.llegada-rejilla{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.llegada-video{position:relative; border-radius:var(--radio); overflow:hidden; background:var(--vino-deep)}
.llegada-video video{width:100%; aspect-ratio:9/16; object-fit:cover; display:block}
.video-control{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(44,26,29,.72); backdrop-filter:blur(10px);
  border:1px solid var(--linea-fuerte); border-radius:100px; color:var(--hueso);
  padding:.75em 1.4em;
  font-family:var(--display); font-size:.625rem; font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.19em;
  transition:background .3s var(--t), border-color .3s var(--t);
}
.video-control:hover{background:var(--malva); border-color:var(--malva)}
@media (max-width:880px){
  .llegada-rejilla{grid-template-columns:1fr}
  .llegada-video{max-width:26rem; margin-inline:auto; width:100%}
}

/* Las cifras conservan su caja: «450 m» no debe salir como «450 M». */
.plano-metrica b{text-transform:none}

/* ==========================================================================
   LOGO DEFINITIVO (2026-08-27)
   Los PNG llevan solo canal alfa; el color lo pone `background-color`, así que
   el mismo archivo sirve en hueso sobre vino y en vino sobre hueso.
   ========================================================================== */
.logo{
  display:block; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.logo--isotipo{
  width:1.55em; height:2.18em;
  -webkit-mask-image:url('../img/logo-isotipo.png'); mask-image:url('../img/logo-isotipo.png');
}
.logo--wordmark{
  width:9.2em; height:2.05em;
  -webkit-mask-image:url('../img/logo-wordmark.png'); mask-image:url('../img/logo-wordmark.png');
}
.logo--completo{
  width:11.5em; height:6.04em;
  -webkit-mask-image:url('../img/logo-completo.png'); mask-image:url('../img/logo-completo.png');
}

.marca{color:var(--hueso); font-size:.75rem; align-items:center; gap:.85rem}
.marca--pie{flex-direction:column; align-items:flex-start; gap:.9rem; font-size:.8rem}
.marca--pie .marca-sub{
  display:block; font-family:var(--display); font-weight:400; font-stretch:100%;
  font-size:.5625rem; letter-spacing:.3em; text-transform:uppercase;
  opacity:.6; margin:0; color:var(--hueso);
}
.plano-centro .logo--isotipo{font-size:1rem; margin-inline:auto}
@media (max-width:520px){ .marca{font-size:.66rem} }

/* --- Hero en video --------------------------------------------------------
   El poster es el elemento LCP y se pinta de inmediato; el video se monta
   encima y aparece al empezar a reproducir, así el relevo no se nota.
   -------------------------------------------------------------------------- */
.hero-fondo img,
.hero-fondo video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-fondo video{opacity:0; transition:opacity 1.1s var(--t)}
.hero-fondo video[data-listo]{opacity:1}

/* Tamaños del logo: las relaciones de aspecto vienen de los PNG recortados,
   así que el ancho se deriva del alto y el trazo nunca se deforma. */
.logo--isotipo{height:1.9em; width:1.35em}
.logo--wordmark{height:2.1em; width:9.49em}
.logo--completo{height:4.2em; width:8.02em}

.marca{font-size:1.0625rem}                       /* barra: «VILLA·ALTA» legible */
.marca--pie{font-size:1.375rem; gap:1rem}         /* pie: el lockup completo respira */
.marca--pie .marca-sub{font-size:.5rem}
.plano-centro .logo--isotipo{font-size:1.1rem}
@media (max-width:640px){
  .marca{font-size:.85rem; gap:.6rem}
  .marca--pie{font-size:1.05rem}
}

/* La bajada «Private Boutique» es de trazo muy fino: por debajo de este tamaño
   se pierde, así que en el pie el lockup va grande. */
.marca--pie{font-size:1.9rem}
.marca--pie .marca-sub{font-size:.4rem}
@media (max-width:640px){ .marca--pie{font-size:1.25rem} }

/* ==========================================================================
   BARRA CON EL LOCKUP COMPLETO (incluye «Private Boutique»)
   La bajada es de trazo finísimo: por debajo de ~7px de altura de caja deja de
   leerse, así que el wordmark necesita más alto que el que pedía sin ella, y la
   navegación cede algo de aire para que todo siga cupiendo en una línea.
   ========================================================================== */
.marca{font-size:1.35rem; gap:.7rem}
.barra .nav{gap:clamp(.85rem,1.7vw,1.75rem)}

/* Al fijarse, la barra se compacta pero el logo sigue legible. */
.barra[data-fija] .marca{font-size:1.15rem}
.marca .logo{transition:font-size .45s var(--t)}

@media (max-width:1340px){
  .barra .nav{gap:.8rem}
  .barra .nav a{font-size:.625rem; letter-spacing:.13em}
  .marca{font-size:1.15rem}
}
/* Un escalon mas antes de rendirse: entre 1040 y 1180 los siete enlaces solo
   caben con el tracking al minimo. */
@media (max-width:1180px){
  .barra .nav{gap:.62rem}
  .barra .nav a{font-size:.6rem; letter-spacing:.08em}
  .barra .boton{padding:.8em 1.15em}
}
@media (max-width:640px){
  .marca,.barra[data-fija] .marca{font-size:1rem; gap:.55rem}
}

/* Los enlaces nunca se parten: «Guía del centro» en dos líneas desalinea la barra. */
.nav a{white-space:nowrap}

/* ── Hero en movil ─────────────────────────────────────────────────────────
   En movil el hero muestra la foto del huesped leyendo junto al balcon, que es
   apaisada (1.5) dentro de un marco casi vertical: sin object-position el
   recorte se lo come. Con cover la foto escala a ~1266px de ancho en un marco de
   390, y el se sienta hacia el 78% del original: el 88% es lo que lo deja dentro
   del encuadre. La vertical no influye (la altura calza exacta y sobra ancho). */
@media (max-width:700px){
  .hero-fondo img{object-position:88% center}
  /* El video es el mismo plano del balcon que ya no se ve en movil, y pesa
     10 MB en datos moviles: no se carga. */
  .hero-fondo video{display:none}
}