@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-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:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-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:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-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:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-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:'Montserrat';font-style:italic;font-weight:300 800;font-display:swap;src:url('../fonts/montserrat-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:'Montserrat';font-style:italic;font-weight:300 800;font-display:swap;src:url('../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/montserrat-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;}
/* ==========================================================================
   LA MADRIGUERA HOTEL · GUATAPÉ
   Sistema derivado del Manual de Identidad v1.0.
   Paleta de seis colores exactos, regla 70/20/10, Cormorant Garamond +
   Montserrat. Composición editorial: espacio negativo, fotos protagonistas,
   líneas finas. Sin sombras pesadas, degradados decorativos ni efectos 3D.
   ========================================================================== */

:root{
  /* Los seis del manual, sin añadidos */
  --carbon:   #20201D;  /* logo, títulos, texto, navegación, fondos oscuros */
  --marfil:   #F3F0E8;  /* fondo principal */
  --arena:    #D8CDBB;  /* fondos secundarios, tarjetas */
  --bosque:   #4B5A49;  /* acentos naturales, botones secundarios */
  --terracota:#9A6349;  /* detalles destacados */
  --agua:     #708C8A;  /* detalles de agua y represa */

  /* Derivados de opacidad, no colores nuevos */
  --carbon-72: rgba(32,32,29,.72);
  --carbon-56: rgba(32,32,29,.56);
  --carbon-12: rgba(32,32,29,.12);
  --marfil-76: rgba(243,240,232,.76);
  --marfil-52: rgba(243,240,232,.52);
  --marfil-18: rgba(243,240,232,.18);

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texto:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --marco: clamp(1.25rem, 5vw, 6rem);
  --ancho: 1320px;
  --t: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--marfil); color:var(--carbon);
  font-family:var(--texto); font-weight:400;
  font-size:clamp(.9375rem,.9rem + .18vw,1.0125rem); line-height:1.72;
  -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; background:none; border:0}

/* --- Tipografía ----------------------------------------------------------
   Cormorant para emoción y concepto; Montserrat para información y acción.
   El manual no admite ninguna otra familia.
   ------------------------------------------------------------------------- */
h1,h2,h3,.display{
  font-family:var(--display); font-weight:300; line-height:1.08;
  letter-spacing:-.005em; margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,5.5rem)}
h2{font-size:clamp(2rem,1.35rem + 2.7vw,3.75rem)}
h3{font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem)}
.h-peq{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem)}

.kicker{
  font-family:var(--texto); font-size:.6875rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--terracota);
  margin:0 0 1.5rem;
}
.seccion--oscura .kicker{color:var(--arena)}

.prosa{max-width:60ch; color:var(--carbon-72); font-weight:300}
.prosa p{margin:0 0 1.2em}
.prosa p:last-child{margin-bottom:0}
.prosa b,.prosa strong{font-weight:600; color:var(--carbon)}
.seccion--oscura .prosa{color:var(--marfil-76)}
.seccion--oscura .prosa b{color:var(--marfil)}

/* Frase editorial: Cormorant en cursiva, para los momentos de voz de marca */
.frase{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem); line-height:1.32;
  color:var(--bosque); max-width:22ch; margin:0;
}
.seccion--oscura .frase{color:var(--arena)}

/* --- Estructura ----------------------------------------------------------- */
.seccion{padding:clamp(4.5rem,9vw,9rem) var(--marco); position:relative}
.seccion--oscura{background:var(--carbon); color:var(--marfil)}
.seccion--arena{background:var(--arena)}
.seccion--bosque{background:var(--bosque); color:var(--marfil)}
.envoltura{max-width:var(--ancho); margin-inline:auto}
.cabecera{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4.5rem); align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.cabecera > .kicker{grid-column:1/-1; margin-bottom:0}
@media (max-width:860px){ .cabecera{grid-template-columns:1fr; align-items:start} }

/* --- Botones -------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--texto); font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.1em 2.2em; border:1px solid transparent; border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background .35s var(--t), color .35s var(--t), border-color .35s var(--t);
}
.boton--solido{background:var(--carbon); color:var(--marfil); border-color:var(--carbon)}
.boton--solido:hover{background:var(--bosque); border-color:var(--bosque)}
.boton--linea{border-color:var(--carbon-12); color:var(--carbon)}
.boton--linea:hover{border-color:var(--carbon); background:rgba(32,32,29,.04)}
.seccion--oscura .boton--solido,.seccion--bosque .boton--solido{background:var(--marfil); color:var(--carbon); border-color:var(--marfil)}
.seccion--oscura .boton--solido:hover{background:var(--arena); border-color:var(--arena)}
.seccion--oscura .boton--linea{color:var(--marfil); border-color:var(--marfil-18)}
.seccion--oscura .boton--linea:hover{border-color:var(--marfil); background:rgba(243,240,232,.07)}

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

/* --- Barra ---------------------------------------------------------------- */
.barra{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.2rem var(--marco); color:var(--marfil);
  transition:background .45s var(--t), padding .45s var(--t), color .45s var(--t);
}
.barra[data-fija]{
  background:rgba(32,32,29,.92); backdrop-filter:blur(14px);
  padding-block:.85rem; border-bottom:1px solid var(--marfil-18);
}
.marca{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:inherit}
.marca .sello{width:clamp(38px,4vw,50px); height:auto; color:currentColor; flex-shrink:0}
.marca-txt{display:flex; flex-direction:column; line-height:1}
.marca-txt b{font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:.02em}
.marca-txt span{
  font-size:.5rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  opacity:.7; margin-top:.45em;
}
.nav{display:flex; align-items:center; gap:clamp(.9rem,1.9vw,2rem)}
.nav a{
  font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--marfil-76); white-space:nowrap;
  transition:color .3s var(--t);
}
.nav a:hover{color:var(--marfil)}
.barra .boton{padding:.85em 1.7em; font-size:.625rem}
@media (max-width:1024px){ .nav{display:none} }

/* --- Hero ----------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items: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{width:100%; height:100%; object-fit:cover}
.hero-fondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(32,32,29,.90) 0%, rgba(32,32,29,.52) 42%,
             rgba(32,32,29,.20) 70%, rgba(32,32,29,.58) 100%);
}
.hero-contenido{max-width:var(--ancho); margin-inline:auto; width:100%; color:var(--marfil)}
.hero h1{max-width:15ch; color:var(--marfil)}
.hero h1 em{font-style:italic; color:var(--arena)}
.hero-sub{
  font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marfil-76); margin:0 0 1.75rem;
}

/* --- Buscador ------------------------------------------------------------- */
.buscador{
  margin-top:clamp(2rem,4vw,3rem); max-width:920px;
  background:rgba(32,32,29,.62); backdrop-filter:blur(16px);
  border:1px solid var(--marfil-18); border-radius:2px;
  padding:clamp(1rem,2vw,1.35rem);
  display:grid; gap:.8rem; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:end;
}
.campo{display:flex; flex-direction:column; gap:.55rem; min-width:0}
.campo label{
  font-size:.5625rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marfil-52);
}
.campo input,.campo select{
  font-family:var(--texto); font-size:.9375rem; color:var(--marfil);
  background:transparent; border:0; border-bottom:1px solid var(--marfil-18);
  padding:.5rem 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(--marfil); outline:none;
}
.campo select option{background:var(--carbon); color:var(--marfil)}
.campo input::-webkit-calendar-picker-indicator{filter:invert(.9); opacity:.6; cursor:pointer}
.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(--arena); display:none}
.buscador[data-error] .buscador-aviso{display:block}
@media (max-width:820px){ .buscador{grid-template-columns:1fr 1fr} .buscador .boton{grid-column:1/-1} }
@media (max-width:460px){ .buscador{grid-template-columns:1fr} }

/* ==========================================================================
   EL PUNTO EXACTO — elemento firma
   El manual define el territorio como «dos mundos» y sitúa a La Madriguera en
   el punto donde se encuentran. El comparador lo hace literal: a la izquierda
   el pueblo, a la derecha el agua, y el sello del hotel en la línea que los
   separa. El control es un <input type="range"> real, así funciona con
   teclado y lectores de pantalla sin trabajo extra.
   ========================================================================== */
.punto{position:relative; overflow:hidden; border-radius:2px; background:var(--carbon)}
.punto-lienzo{position:relative; aspect-ratio:16/9; min-height:340px}
.punto-lienzo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
/* La capa del pueblo se recorta según la posición del tirador. */
.punto-capa{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.punto-lienzo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(32,32,29,.62), rgba(32,32,29,0) 45%);
}

.punto-linea{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:1px;
  background:var(--marfil); pointer-events:none; z-index:3;
}
.punto-sello{
  position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%);
  width:clamp(58px,7vw,84px); height:auto; color:var(--marfil);
  pointer-events:none; z-index:4;
}
/* El input cubre el lienzo: se arrastra desde cualquier punto. */
.punto-control{
  position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:5;
  appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize;
}
.punto-control::-webkit-slider-thumb{
  -webkit-appearance:none; width:44px; height:100%; cursor:ew-resize; background:transparent;
}
.punto-control::-moz-range-thumb{width:44px; height:100%; border:0; background:transparent; cursor:ew-resize}
.punto-control:focus-visible{outline:2px solid var(--terracota); outline-offset:-4px}

.punto-etiqueta{
  position:absolute; bottom:clamp(1rem,2.5vw,2rem); z-index:4; pointer-events:none;
  color:var(--marfil); max-width:min(38%,22rem);
}
.punto-etiqueta--pueblo{left:clamp(1rem,2.5vw,2.5rem)}
.punto-etiqueta--agua{right:clamp(1rem,2.5vw,2.5rem); text-align:right}
.punto-etiqueta b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.375rem,1.1rem + 1.1vw,2.125rem); line-height:1.1;
}
.punto-etiqueta span{
  display:block; margin-top:.55em; font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--marfil-76);
}
.punto-pie{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  align-items:baseline; margin-top:1.25rem;
  font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--carbon-56);
}
.seccion--oscura .punto-pie{color:var(--marfil-52)}
@media (max-width:720px){
  .punto-lienzo{aspect-ratio:4/5}
  .punto-etiqueta{max-width:46%}
  .punto-etiqueta b{font-size:1.125rem}
  .punto-etiqueta span{font-size:.5625rem; letter-spacing:.1em}
}

/* --- Rejilla editorial (texto + foto alternos) ---------------------------- */
.duo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.duo--invertido > :first-child{order:2}
.duo img{width:100%; height:100%; object-fit:cover; border-radius:2px}
.duo-fotos{display:grid; gap:.85rem; grid-template-columns:1fr 1fr}
.duo-fotos img{aspect-ratio:3/4}
.duo-fotos img:first-child{grid-column:1/-1; aspect-ratio:3/2}
@media (max-width:880px){
  .duo,.duo--invertido > :first-child{grid-template-columns:1fr; order:0}
}

/* --- Tira de datos -------------------------------------------------------- */
.datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.75rem,3vw,2.5rem); border-top:1px solid var(--carbon-12);
}
.seccion--oscura .datos{border-top-color:var(--marfil-18)}
.dato b{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(2rem,1.6rem + 1.4vw,2.75rem); line-height:1; color:var(--bosque);
}
.seccion--oscura .dato b{color:var(--arena)}
.dato span{
  display:block; margin-top:.7em; font-size:.625rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--carbon-56);
}
.seccion--oscura .dato span{color:var(--marfil-52)}

/* --- Habitaciones --------------------------------------------------------- */
.filtros{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(2rem,4vw,3rem);
}
.filtro{
  font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.75em 1.35em; border:1px solid var(--carbon-12); border-radius:100px;
  transition:border-color .3s var(--t), background .3s var(--t), color .3s var(--t);
}
.filtro:hover{border-color:var(--carbon)}
.filtro[aria-pressed="true"]{background:var(--carbon); color:var(--marfil); border-color:var(--carbon)}

.habs{display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:clamp(1.5rem,3vw,2.25rem)}
.hab{
  display:flex; flex-direction:column; background:var(--marfil);
  border:1px solid var(--carbon-12); border-radius:2px; overflow:hidden;
  transition:border-color .35s var(--t), transform .35s var(--t);
}
.hab:hover{border-color:var(--carbon); transform:translateY(-3px)}
.hab[hidden]{display:none}
.hab-foto{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--arena)}
.hab-foto img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--t)}
.hab:hover .hab-foto img{transform:scale(1.04)}
.hab-etiqueta{
  position:absolute; top:.85rem; left:.85rem;
  background:rgba(32,32,29,.82); color:var(--marfil);
  font-size:.5625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.5em 1em; border-radius:100px;
}
.hab-cuerpo{padding:clamp(1.35rem,2.5vw,1.75rem); display:flex; flex-direction:column; flex:1; gap:.85rem}
.hab-cuerpo h3{font-size:1.5rem}
.hab-cuerpo p{margin:0; font-size:.875rem; font-weight:300; color:var(--carbon-72); flex:1}
.hab-lista{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem .85rem;
  font-size:.5625rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--carbon-56);
}
.hab-lista li{position:relative; padding-left:.85em}
.hab-lista li::before{
  content:''; position:absolute; left:0; top:.52em; width:3px; height:3px;
  border-radius:50%; background:var(--terracota);
}
.hab-pie{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:.9rem; border-top:1px solid var(--carbon-12); margin-top:.25rem;
}
.hab-pax{font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--carbon-56)}
.hab-pie .boton{padding:.8em 1.4em; font-size:.5625rem}

/* --- Fichas genéricas ----------------------------------------------------- */
.fichas{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); background:var(--carbon-12)}
.ficha{background:var(--marfil); padding:clamp(1.75rem,3vw,2.5rem)}
.seccion--oscura .fichas{background:var(--marfil-18)}
.seccion--oscura .ficha{background:var(--carbon)}
.seccion--arena .fichas{background:rgba(32,32,29,.14)}
.seccion--arena .ficha{background:var(--arena)}
.ficha h3{margin-bottom:.75rem; font-size:1.5rem}
.ficha p{margin:0; font-size:.875rem; font-weight:300; color:var(--carbon-72)}
.seccion--oscura .ficha p{color:var(--marfil-76)}

/* --- Mosaico de experiencias ---------------------------------------------- */
.mosaico{display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; grid-auto-rows:clamp(9rem,14vw,13rem)}
.mosaico figure{margin:0; position:relative; overflow:hidden; border-radius:2px; height:100%}
.mosaico img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--t)}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figure.ancho{grid-column:span 2}
.mosaico figure.alto{grid-row:span 2}
.mosaico figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.75rem 1.1rem .9rem;
  background:linear-gradient(to top, rgba(32,32,29,.78), rgba(32,32,29,0));
  color:var(--marfil); font-size:.625rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:820px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .mosaico figure.alto{grid-row:span 1}
}

/* --- Reseñas -------------------------------------------------------------- */
.notas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:1.5rem 1rem; padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--marfil-18); margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.nota b{display:block; font-family:var(--display); font-weight:300; font-size:2.5rem; line-height:1; color:var(--marfil)}
.nota[data-alta] b{color:var(--arena)}
.nota span{display:block; margin-top:.5em; font-size:.5625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--marfil-52)}
.resenas{columns:3 17rem; column-gap:clamp(1.5rem,3vw,2.5rem)}
.resena{break-inside:avoid; margin:0 0 clamp(1.5rem,3vw,2.25rem); padding-left:1.25rem; border-left:1px solid var(--arena)}
.resena blockquote{margin:0 0 .8rem; font-family:var(--display); font-size:1.125rem; font-weight:300; font-style:italic; line-height:1.5; color:var(--marfil-76)}
.resena figcaption{font-size:.5625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--marfil-52)}
@media (max-width:640px){ .resenas{columns:1} }

/* --- Guía editorial (contenido SEO) --------------------------------------- */
.guias{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); background:var(--carbon-12)}
.guia{background:var(--marfil); padding:clamp(1.75rem,3vw,2.5rem)}
.guia h3{margin-bottom:1rem; font-size:1.625rem}
.guia p{margin:0 0 1em; font-size:.875rem; font-weight:300; color:var(--carbon-72)}
.guia p:last-child{margin-bottom:0}
.guia ul{margin:0; padding-left:1.1rem; font-size:.875rem; font-weight:300; color:var(--carbon-72)}
.guia li{margin-bottom:.5em}
.guia li b{font-weight:600; color:var(--carbon)}

/* --- Preguntas frecuentes ------------------------------------------------- */
.faq{max-width:78ch; margin-inline:auto}
.faq details{border-bottom:1px solid var(--carbon-12)}
.faq summary{
  list-style:none; cursor:pointer; padding:1.4rem 2.5rem 1.4rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.125rem,1.05rem + .35vw,1.375rem);
  font-weight:400; line-height:1.35; transition:color .3s var(--t);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--bosque)}
.faq summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:10px; height:10px;
  border-right:1px solid currentColor; border-bottom:1px 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.7rem 0; font-size:.875rem; font-weight:300; color:var(--carbon-72)}
.faq-cuerpo p{margin:0 0 .85em}
.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{font-size:1.375rem; margin-bottom:.9rem}
.contacto p{margin:0 0 .45em; font-size:.875rem; font-weight:300; color:var(--marfil-76)}
.contacto a{text-decoration:none; border-bottom:1px solid var(--marfil-18); transition:border-color .3s var(--t)}
.contacto a:hover{border-bottom-color:var(--marfil)}

.pie{background:var(--carbon); color:var(--marfil); padding:clamp(3rem,5vw,4rem) var(--marco) 2rem}
.pie-fila{
  display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between;
  max-width:var(--ancho); margin-inline:auto;
}
.pie .marca .sello{width:74px}
.pie-legal{
  max-width:var(--ancho); margin:2.5rem auto 0; padding-top:1.75rem;
  border-top:1px solid var(--marfil-18);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  font-size:.5625rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marfil-52);
}

/* --- 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(--bosque); color:var(--marfil); border-radius:100px;
  padding:.95em 1.5em; border:1px solid var(--marfil-18);
  font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  transform:translateY(150%); opacity:0;
  transition:transform .55s var(--t), opacity .55s var(--t), background .3s var(--t);
}
.flotante[data-visible]{transform:none; opacity:1}
.flotante:hover{background:var(--terracota)}
.flotante svg{width:17px; flex-shrink:0}
@media (max-width:520px){ .flotante span{display:none} .flotante{padding:1em; border-radius:50%} }

/* --- Apariciones ---------------------------------------------------------- */
[data-revela]{opacity:0; transform:translateY(20px); transition:opacity .85s var(--t), transform .85s 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}
}

/* ==========================================================================
   AJUSTES — segunda pasada
   ========================================================================== */

/* La sección verde bosque necesita las mismas inversiones de color que la
   oscura: sin esto la prosa hereda el carbón y se pierde sobre el verde. */
.seccion--bosque .prosa{color:var(--marfil-76)}
.seccion--bosque .prosa b{color:var(--marfil)}
.seccion--bosque .kicker{color:var(--arena)}
.seccion--bosque .fichas{background:var(--marfil-18)}
.seccion--bosque .ficha{background:var(--bosque)}
.seccion--bosque .ficha p{color:var(--marfil-76)}
.seccion--bosque .datos{border-top-color:var(--marfil-18)}
.seccion--bosque .dato b{color:var(--arena)}
.seccion--bosque .dato span{color:var(--marfil-52)}

/* Dentro de una columna del duo, auto-fit deja una celda vacía con tres
   fichas. En columna sencilla se leen como una lista y no sobra nada. */
.duo .fichas{grid-template-columns:1fr}

/* El hero necesita techo propio: la barra flota sobre la parte clara de la
   foto y sin este velo el logo desaparece. */
.hero-fondo::after{
  background:
    linear-gradient(to top, rgba(32,32,29,.90) 0%, rgba(32,32,29,.52) 40%,
                    rgba(32,32,29,.16) 62%, rgba(32,32,29,.34) 82%, rgba(32,32,29,.62) 100%),
    linear-gradient(100deg, rgba(32,32,29,.62) 0%, rgba(32,32,29,.24) 44%, rgba(32,32,29,0) 72%);
}

/* El sello del comparador se perdía sobre las fotos: disco propio detrás. */
.punto-sello{
  filter:drop-shadow(0 1px 10px rgba(32,32,29,.85));
}
.punto-disco{
  position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%);
  width:clamp(78px,9vw,112px); aspect-ratio:1; border-radius:50%;
  background:rgba(32,32,29,.42); backdrop-filter:blur(3px);
  border:1px solid var(--marfil-18); pointer-events:none; z-index:3;
}

/* Las etiquetas van arriba: abajo chocaban con el flotante de WhatsApp, que es
   fijo y siempre acaba encima de la esquina derecha. El velo se invierte para
   acompañarlas. */
.punto-lienzo::after{
  background:linear-gradient(to bottom, rgba(32,32,29,.62), rgba(32,32,29,0) 42%);
}
.punto-etiqueta{top:clamp(1rem,2.5vw,2rem); bottom:auto}

/* La barra flota sobre la foto del hero, cuyo tercio superior es claro. El velo
   del hero por sí solo dejaba el logo en 2,3:1 de contraste; este gradiente
   propio lo sube sin oscurecer la foto entera. Desaparece al fijarse la barra,
   que ya trae fondo sólido. */
.barra::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(32,32,29,.72), rgba(32,32,29,.34) 55%, rgba(32,32,29,0));
  transition:opacity .45s var(--t);
}
.barra[data-fija]::before{opacity:0}

/* --- Conmutador de idioma ------------------------------------------------
   Se distingue de los enlaces de sección con un filete: no lleva a otra parte
   de la página, lleva a la misma página en otro idioma. */
.nav-lang{position:relative;padding-left:1.1rem;margin-left:.35rem}
.nav-lang::before{content:'';position:absolute;left:0;top:50%;width:1px;height:1.1em;
  transform:translateY(-50%);background:currentColor;opacity:.35}
@media (max-width:860px){
  .nav-lang{padding-left:0;margin-left:0}
  .nav-lang::before{display:none}
}