@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   CENTRO DE ESTÉTICA EBENEZER & BOOZ HAIR SALÓN · Rancagua
   Sistema de estilos compartido por las 6 páginas.

   PÁGINAS QUE LO USAN
     index.html · tratamientos.html · medicina-estetica.html · booz.html
     el-centro.html · (+ las legales)

   Todo lo que se revela con scroll es VISIBLE POR DEFECTO acá: es el JS el
   que oculta para animar. Ver el bloque REVELADOS antes de tocar nada.

   ÍNDICE
     01 · Variables            07 · Cabecera de navegación
     02 · Base y tipografía    08 · Bloques de contenido
     03 · Contenedores         09 · Pie de página
     04 · Mármol               10 · Flotante de WhatsApp
     05 · Botones              11 · Revelados por scroll
     06 · Tarjetas y grillas   12 · Responsive · 13 · Utilidades
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 01 · VARIABLES ═══════════════════════════════════════════════════════
   La paleta es la real de su atom.bio / Instagram. No inventar tonos nuevos:
   los únicos derivados son --vino y --tinta-suave, y están explicados abajo. */
:root{
  /* --- paleta de marca --- */
  --nude:      #E9DCD6;   /* nude base */
  --nude-2:    #DFCCC6;   /* nude un punto más hondo, para separar bloques */
  --rosa:      #E3B7B4;   /* rosa */
  --rosa-hond: #C98F8C;   /* rosa hondo */
  --oro:       #C9A227;   /* oro (vetas y detalles finos) */
  --cobre:     #B08D57;   /* cobre (cursivas de acento, cifras) */
  --tinta:     #5A4642;   /* texto */
  --blanco:    #FDFAF8;   /* blanco cálido, NO #FFF */
  --nude-claro:#F3E3C8;   /* nude aclarado, sólo sobre mármol oscuro */

  /* --- derivados, sólo por contraste legible --- */
  /* --vino es --rosa-hond oscurecido hasta pasar 4.5:1 contra blanco.
     Es el color del botón de reservar. NO es un color nuevo de marca. */
  --vino:       #9E5F5C;
  --vino-hond:  #854B49;
  --tinta-suave:#836B66;  /* texto secundario sobre fondos claros */
  /* --cobre oscurecido hasta pasar 4,5:1 sobre nude (5,33:1), nude-2 (4,62:1)
     y blanco (6,88:1). SÓLO para texto chico: las cifras grandes y las
     vetas del mármol siguen usando --cobre. */
  --cobre-txt:  #6E5410;
  --borde:      #EFE2DD;

  /* --- verde: EXCLUSIVO de WhatsApp. No usarlo en ningún otro botón --- */
  --wasap:      #1F9D55;
  --wasap-hond: #17773F;

  /* --- tipografía --- */
  --serif: Georgia,'Times New Roman',Times,serif;
  --sans:  'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;

  /* --- medidas --- */
  --ancho:   1120px;   /* ancho máximo del contenido */
  --ancho-txt: 62ch;   /* ancho máximo de un párrafo cómodo de leer */
  --radio:   6px;
  --radio-px:40px;     /* pastilla de los botones */
  --sombra:  0 10px 34px rgba(90,70,66,.10);
  --sombra-alta: 0 18px 48px rgba(90,70,66,.16);
  --paso: .28s cubic-bezier(.22,.61,.36,1);
}


/* ═══ 02 · BASE Y TIPOGRAFÍA ══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* margen para que los anclas no queden debajo de la barra fija */
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* red de seguridad contra el desborde horizontal en 375 px. No reemplaza
     hacer bien las grillas: es el cinturón, no el motor. */
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:where(a,button,summary,input):focus-visible{
  outline:2px solid var(--vino);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0;color:var(--tinta)}
h1{font-size:clamp(2.15rem,5.6vw,3.9rem);letter-spacing:-.012em}
h2{font-size:clamp(1.75rem,3.9vw,2.7rem);letter-spacing:-.006em}
h3{font-size:clamp(1.15rem,2.2vw,1.42rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

/* cursiva de acento: el recurso tipográfico de la marca */
.cursiva{font-style:italic;color:var(--cobre)}
.cursiva-clara{font-style:italic;color:#F3E3C8}

/* rótulo: el texto chico espaciado que va arriba de los títulos */
.rotulo{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  margin:0 0 .85rem;
  display:block;
}
.rotulo--claro{color:rgba(255,255,255,.9)}
.rotulo--oro{color:var(--cobre-txt)}

.bajada{font-size:1.06rem;color:var(--tinta-suave);max-width:var(--ancho-txt)}
.chico{font-size:.88rem}
.mini{font-size:.79rem;line-height:1.5}

/* cifra grande. ⛔ Sólo para cifras que se puedan auditar contra su propia
   agenda (21 categorías, 9 disciplinas). Ni ratings ni conteos de redes. */
.cifra{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3rem);line-height:1;color:var(--cobre);display:block}


/* ═══ 03 · CONTENEDORES Y SECCIONES ═══════════════════════════════════════ */
.env{width:min(var(--ancho),92vw);margin-inline:auto}
.env--angosto{width:min(760px,92vw)}

.seccion{padding:clamp(3.2rem,7vw,5.5rem) 0;position:relative}
.seccion--apretada{padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.seccion--nude{background:var(--nude)}
.seccion--nude2{background:var(--nude-2)}
.seccion--blanca{background:var(--blanco)}
.seccion--tinta{background:var(--tinta);color:#F3E7E3}
.seccion--tinta h2,.seccion--tinta h3{color:#fff}

/* encabezado de sección */
.enc{max-width:var(--ancho-txt);margin:0 0 clamp(2rem,4vw,3rem)}
.enc p{color:var(--tinta-suave);margin:.9rem 0 0}
.enc--centro{margin-inline:auto;text-align:center}

/* separador fino con un rombo al medio */
.filete{border:0;height:1px;background:var(--borde);margin:2.6rem 0;position:relative}
.filete::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--cobre);
}


/* ═══ 04 · MÁRMOL ═════════════════════════════════════════════════════════
   El mármol es una CAPA DE FONDO, nunca contenido. Va dentro de un
   contenedor .capa, que lo aísla y sube el contenido por encima.
   */

.capa{position:relative;isolation:isolate;overflow:hidden}
.capa > *:not(.marmol){position:relative;z-index:1}

.marmol{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.marmol svg{width:100%;height:100%;display:block}

/* velo: sube el contraste del texto BLANCO sin tapar la piedra.
   Se pone SIEMPRE que encima haya texto blanco. */
.marmol--velo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(110,76,71,.26),rgba(110,76,71,.10) 45%,rgba(110,76,71,.32));
}
/* velo lateral, para heroes con el texto alineado a la izquierda */
.marmol--velo-izq::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(110,76,71,.42),rgba(110,76,71,.10) 62%,rgba(110,76,71,0));
}
/* velo claro: cuando encima va texto en tinta y la piedra tiene mucha veta */
.marmol--velo-claro::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(253,250,248,.55),rgba(253,250,248,.30));
}

/* borde superior de oro: para rematar un bloque de mármol */
.filo-oro{border-top:2px solid var(--cobre)}


/* ═══ 05 · BOTONES ════════════════════════════════════════════════════════
   ⛔ EL BOTÓN DE RESERVAR NO PUEDE SER VERDE. El verde promete WhatsApp.
      Reservar → https://ebenezer.site.agendapro.com/cl/sucursal/4901
      WhatsApp → https://wa.me/56946347403                                   */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;
  border-radius:var(--radio-px);
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;text-align:center;
  cursor:pointer;
  transition:background var(--paso),color var(--paso),border-color var(--paso),transform var(--paso),box-shadow var(--paso);
  /* que un botón largo nunca abra la página en 375 px */
  max-width:100%;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* PRIMARIO · reservar en AgendaPro */
.btn--reserva{background:var(--vino);color:#fff;box-shadow:0 6px 20px rgba(158,95,92,.28)}
.btn--reserva:hover{background:var(--vino-hond);box-shadow:0 10px 26px rgba(158,95,92,.34)}

/* SECUNDARIO sobre fondo claro */
.btn--tinta{border-color:var(--tinta);color:var(--tinta)}
.btn--tinta:hover{background:var(--tinta);color:var(--blanco)}

/* SECUNDARIO sobre mármol o foto (texto blanco) */
.btn--linea{border-color:rgba(255,255,255,.85);color:#fff;backdrop-filter:blur(2px)}
.btn--linea:hover{background:rgba(255,255,255,.2);border-color:#fff}

/* TERCIARIO · enlace con flecha, sin caja */
.btn--txt{
  padding:0;border:0;border-radius:0;background:none;color:var(--vino);
  letter-spacing:.1em;
}
.btn--txt::after{content:"→";transition:transform var(--paso)}
.btn--txt:hover{transform:none;color:var(--vino-hond)}
.btn--txt:hover::after{transform:translateX(4px)}

/* WHATSAPP · el ÚNICO verde del sitio */
.btn--wasap{background:var(--wasap);color:#fff}
.btn--wasap:hover{background:var(--wasap-hond)}

.btn--ancho{width:100%}
.btn--chico{padding:.7rem 1.35rem;font-size:.72rem}

/* fila de botones */
.acciones{display:flex;gap:.85rem;flex-wrap:wrap}
.acciones--centro{justify-content:center}


/* ═══ 06 · TARJETAS Y GRILLAS ═════════════════════════════════════════════ */

/* grilla base: se adapta sola y NUNCA desborda porque el minmax lleva 0 */
.grilla{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.grilla--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grilla--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.grilla > *{min-width:0}   /* la regla que evita el desborde en grillas */

/* TARJETA con foto */
.ficha{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--paso),box-shadow var(--paso);
}
.ficha:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.ficha__foto{width:100%;height:238px;object-fit:cover;background:var(--nude)}
.ficha__cuerpo{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ficha__cuerpo h3{margin:0}
.ficha__cuerpo p{color:var(--tinta-suave);font-size:.95rem;margin:0}
.ficha__pie{margin-top:auto;padding-top:.9rem}

/* TARJETA SIN FOTO. Cuando no hay imagen real, el bloque va sin imagen:
   no se dibuja un icono ni una ilustración para rellenar. Se rellena con
   tipografía y con mármol. */
.ficha--sin-foto{position:relative;isolation:isolate;min-height:250px;justify-content:flex-end}
.ficha--sin-foto .ficha__cuerpo{position:relative;z-index:1;justify-content:center}
.bloque-sin-foto{padding:2.2rem 1.6rem;text-align:center}
.bloque-sin-foto .numero{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--cobre);opacity:.55;display:block;margin-bottom:.4rem}

/* LAS DOS CASAS · el bloque editorial propio (piso 9 / primer piso) */
.casas{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.casa{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radio);
  min-height:420px;
  padding:2.6rem 2.1rem;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.casa > *:not(.marmol){position:relative;z-index:1}
.casa__piso{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--cobre);opacity:.7;display:block}
.casa h3{font-size:clamp(1.5rem,2.8vw,1.95rem);margin:.5rem 0 .55rem}
.casa p{color:var(--tinta);font-size:.97rem;margin:0 0 1.4rem}
/* el botón de la casa no se estira: en un flex en columna, sin esto
   ocupa todo el ancho de la tarjeta y parece una barra */
.casa .btn{align-self:flex-start}
/* variante con texto blanco: exige .marmol--velo en su capa de mármol */
.casa--clara h3,.casa--clara p,.casa--clara .casa__piso{color:#fff}
.casa--clara .casa__piso{color:var(--nude-claro);opacity:.9}

/* CINTA · ⛔ Ni un rating, ni un conteo de seguidores, ni nada que caduque solo:
   sólo lo que consta en su agenda o en su dirección. */
.cinta{background:var(--nude);padding:1.15rem 0}
.cinta .env{
  display:flex;gap:clamp(1rem,4vw,2.4rem);flex-wrap:wrap;justify-content:center;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
  text-align:center;
}
.cinta b{color:var(--cobre-txt);font-weight:700}
.cinta .env{color:var(--tinta)}

/* LISTA DE CATEGORÍAS · las 21 reales, como pastillas */
.pildoras{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:0;list-style:none}
.pildora{
  border:1px solid var(--borde);
  background:var(--blanco);
  border-radius:var(--radio-px);
  padding:.5rem 1.05rem;
  font-size:.84rem;
  color:var(--tinta);
  transition:border-color var(--paso),color var(--paso),background var(--paso);
}
.pildora--enlace:hover{border-color:var(--rosa-hond);color:var(--vino)}
.pildora--piso1{border-color:var(--cobre);color:var(--cobre)}

/* PRECIOS · sólo los 3 públicos que existen (Peluquería Booz) */
.precios{list-style:none;margin:0;padding:0;border-top:1px solid var(--borde)}
.precio{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--borde);
}
.precio__nombre{font-family:var(--serif);font-size:1.1rem;flex:1 1 200px;min-width:0}
.precio__dura{font-size:.8rem;color:var(--tinta-suave);letter-spacing:.06em}
.precio__valor{font-family:var(--serif);font-size:1.22rem;color:var(--cobre);white-space:nowrap}

/* AVISO · la política real de reserva (abono, 24 h, 15 minutos) */
.aviso{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-left:3px solid var(--cobre);
  border-radius:var(--radio);
  padding:1.5rem 1.6rem;
}
.aviso h3{font-size:1.1rem;margin:0 0 .7rem}
.aviso ul{margin:0;padding-left:1.15rem;color:var(--tinta-suave);font-size:.95rem}
.aviso li{margin-bottom:.45rem}
.aviso li:last-child{margin-bottom:0}

/* ESPACIO RESERVADO · va donde irían los testimonios.
   ⛔ Nunca escribir una reseña de ejemplo acá dentro. El texto explica que
      ahí van las reseñas REALES de Google, y eso es argumento de venta. */
.reservado{
  border:1px dashed var(--rosa-hond);
  border-radius:var(--radio);
  background:rgba(233,220,214,.35);
  padding:clamp(1.8rem,4vw,2.6rem);
  text-align:center;
  color:var(--tinta-suave);
}
.reservado h3{color:var(--tinta);margin:0 0 .6rem}
.reservado p{max-width:52ch;margin-inline:auto;font-size:.95rem}

/* DATO · para las cifras verificadas en fila */
.datos{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));text-align:center}
.dato span{display:block}
.dato .pie{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.35rem}

/* MEDIA con texto al lado */
.duo{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center}
.duo img{border-radius:var(--radio);width:100%;object-fit:cover}
.duo--alto img{max-height:560px}


/* ═══ 07 · CABECERA DE NAVEGACIÓN ═════════════════════════════════════════
   Menú móvil sin JavaScript: es un <details>. Si el JS falla, el menú abre
   igual. */

.barra{
  position:sticky;top:0;z-index:60;
  background:rgba(253,250,248,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--borde);
}
.barra__env{
  width:min(var(--ancho),92vw);margin-inline:auto;
  display:flex;align-items:center;gap:1rem;
  min-height:68px;
}
.barra__marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto;min-width:0}
.barra__marca img{width:38px;height:38px;border-radius:50%;flex:0 0 auto}
.barra__nombre{font-family:var(--serif);font-size:1.02rem;line-height:1.1;white-space:nowrap}
.barra__nombre small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}

.barra__nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.barra__nav a{
  text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta);padding:.35rem 0;border-bottom:1px solid transparent;
  transition:color var(--paso),border-color var(--paso);white-space:nowrap;
}
.barra__nav a:hover{color:var(--vino);border-bottom-color:var(--rosa-hond)}
.barra__nav a[aria-current="page"]{color:var(--vino);border-bottom-color:var(--cobre)}
.barra__cta{margin-left:.4rem}

/* el disparador del menú móvil, oculto en escritorio */
.barra__menu{display:none;margin-left:auto;position:relative}
.barra__menu > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta);
  padding:.6rem .2rem;
}
.barra__menu > summary::-webkit-details-marker{display:none}
/* las tres rayas son geometría abstracta, no un dibujo de objeto */
.barra__rayas{width:22px;height:12px;position:relative;display:inline-block}
.barra__rayas::before,.barra__rayas::after,.barra__rayas i{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--tinta);transition:var(--paso);
}
.barra__rayas::before{top:0}
.barra__rayas i{top:5px}
.barra__rayas::after{bottom:0}
.barra__menu[open] .barra__rayas::before{transform:translateY(5px) rotate(45deg)}
.barra__menu[open] .barra__rayas i{opacity:0}
.barra__menu[open] .barra__rayas::after{transform:translateY(-5px) rotate(-45deg)}

.barra__panel{
  position:absolute;right:0;top:calc(100% + .55rem);
  width:min(260px,86vw);
  background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra-alta);
  padding:.65rem;
  display:flex;flex-direction:column;gap:.1rem;
}
.barra__panel a{
  text-decoration:none;color:var(--tinta);
  font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.75rem .8rem;border-radius:4px;
}
.barra__panel a:hover{background:var(--nude)}
.barra__panel a[aria-current="page"]{color:var(--vino);background:var(--nude)}
.barra__panel .btn{margin-top:.5rem}


/* ═══ 08 · BLOQUES DE CONTENIDO ═══════════════════════════════════════════ */

/* HERO · el primer pantallazo. Su imagen NO lleva loading="lazy". */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,720px);
  display:flex;align-items:center;
  padding:5.5rem 0 4.5rem;
  color:#fff;
}
.hero > *:not(.marmol){position:relative;z-index:1}
.hero__env{width:min(var(--ancho),92vw);margin-inline:auto;text-align:center}
.hero__logo{width:112px;height:112px;border-radius:50%;margin:0 auto 1.5rem;box-shadow:0 8px 30px rgba(90,70,66,.3)}
.hero h1{color:#fff;margin:0 0 1rem;text-shadow:0 2px 22px rgba(110,76,71,.42)}
.hero .bajada{color:rgba(255,255,255,.96);max-width:48ch;margin:0 auto 2.1rem;text-shadow:0 1px 14px rgba(110,76,71,.5)}
.hero--corto{min-height:min(52vh,430px);padding:4rem 0 3.4rem}

/* CINTA DE LLAMADA FINAL, sobre mármol */
.cierre{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3.4rem,7vw,5rem) 0;text-align:center;color:#fff}
.cierre > *:not(.marmol){position:relative;z-index:1}
.cierre h2{color:#fff;text-shadow:0 2px 18px rgba(110,76,71,.4)}
.cierre p{color:rgba(255,255,255,.95);max-width:52ch;margin-inline:auto;text-shadow:0 1px 12px rgba(110,76,71,.45)}

/* MAPA / DIRECCIÓN. ⛔ No se dibuja un mapa por código. O va un iframe real
   de Google Maps, o va la foto real del edificio (img/edificio.jpg) con la
   dirección en texto. Esta clase es para lo segundo. */
.direccion{display:grid;gap:clamp(1.6rem,4vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:center}
.direccion img{border-radius:var(--radio);width:100%;max-height:520px;object-fit:cover}
.direccion dl{margin:0}
.direccion dt{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-suave);margin-top:1.15rem}
.direccion dt:first-child{margin-top:0}
.direccion dd{margin:.25rem 0 0;font-size:1.02rem}

/* PASOS numerados (cómo reservar) */
.pasos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pasos li{counter-increment:p;padding-top:2.6rem;position:relative}
.pasos li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--serif);font-size:1.5rem;color:var(--cobre);opacity:.75;
}
.pasos h3{margin:0 0 .35rem}
.pasos p{color:var(--tinta-suave);font-size:.94rem;margin:0}

/* LEGIBILIDAD SOBRE EL NUDE
   #836B66 (--tinta-suave) sobre #E9DCD6 (--nude) se queda en 3,68:1 y no
   pasa AA para texto chico; --tinta sí pasa (5,69:1 sobre nude-2). Todo lo
   que cae sobre nude sube a tinta. Venía parchado en booz.html: vive acá. */
.seccion--nude .enc p,
.seccion--nude .pasos p,
.seccion--nude .suave,
.seccion--nude2 .suave,
.direccion dt,
.dato .pie{color:var(--tinta)}


/* ═══ 09 · PIE DE PÁGINA ══════════════════════════════════════════════════ */
.pie-pag{
  background:var(--tinta);color:#E7D8D3;
  padding:clamp(3rem,6vw,4.4rem) 0 6.5rem; /* el hueco de abajo es del flotante */
  font-size:.92rem;
}
.pie-pag a{color:#F0E3DF;text-decoration:none}
.pie-pag a:hover{color:#fff;text-decoration:underline}
.pie-pag h4{color:#D9BFA8;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-family:var(--sans);margin:0 0 1rem}
.pie-pag__grilla{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.pie-pag ul{list-style:none;margin:0;padding:0}
.pie-pag li{margin-bottom:.55rem}
.pie-pag__marca{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.pie-pag__marca img{width:46px;height:46px;border-radius:50%}
.pie-pag__marca span{font-family:var(--serif);font-size:1.1rem;color:#fff;line-height:1.2}
.pie-pag__legal{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:.6rem 1.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
  font-size:.79rem;color:#D2C0BB;
}
.pie-pag__legal nav{display:flex;gap:1.2rem;flex-wrap:wrap}


/* ═══ 10 · FLOTANTE DE WHATSAPP ═══════════════════════════════════════════
   Es lo ÚNICO verde de la página. Va en todas, incluidas las legales.
   El icono no se dibuja por código: se pone el texto "WhatsApp". */
.flota-wasap{
  position:fixed;right:16px;bottom:16px;z-index:80;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--wasap);color:#fff;
  padding:.85rem 1.35rem;
  border-radius:var(--radio-px);
  text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 26px rgba(23,119,63,.36);
  transition:background var(--paso),transform var(--paso),box-shadow var(--paso);
}
.flota-wasap:hover{background:var(--wasap-hond);transform:translateY(-2px);box-shadow:0 12px 32px rgba(23,119,63,.42)}
.flota-wasap::before{
  /* punto claro: geometría abstracta, no un dibujo de teléfono */
  content:"";width:8px;height:8px;border-radius:50%;background:#BFF3D4;flex:0 0 auto;
}


/* ═══ 11 · REVELADOS POR SCROLL ═══════════════════════════════════════════
   ⛔ LA REGLA DURA: TODO ESTÁ VISIBLE POR DEFECTO EN EL CSS.
      Es el JS el que oculta, y sólo después de confirmar que puede animar.
      Si el JS no corre, si el IntersectionObserver no dispara, o si el
      navegador es viejo, la página se ve COMPLETA. Esta demo ya se rompió
      una vez por hacerlo al revés.

   Contrato con el HTML y el JS:
     · El <html> arranca SIN clase.
     · El JS, y sólo si existe IntersectionObserver, agrega la clase
       'js-anima' al <html>. Recién ahí este CSS oculta los .revelar.
     · El mismo JS arma un temporizador de 3 s que agrega 'todo-visible'
       al <html> pase lo que pase. Esa es la red de seguridad.
*/

.revelar{opacity:1;transform:none}          /* ← el estado por defecto: VISIBLE */

.js-anima .revelar{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.js-anima .revelar.visible,
.js-anima.todo-visible .revelar{          /* ← la red de seguridad de los 3 s */
  opacity:1;transform:none;
}

/* escalonado: se pone en el hijo, no en el padre */
.js-anima .revelar[data-demora="1"]{transition-delay:.10s}
.js-anima .revelar[data-demora="2"]{transition-delay:.20s}
.js-anima .revelar[data-demora="3"]{transition-delay:.30s}
.js-anima .revelar[data-demora="4"]{transition-delay:.40s}

/* Respeto por quien pide menos movimiento: nada se mueve, todo se ve. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js-anima .revelar{opacity:1 !important;transform:none !important}
  .btn:hover,.ficha:hover,.flota-wasap:hover{transform:none}
}


/* ═══ 12 · RESPONSIVE ═════════════════════════════════════════════════════
   Objetivo medido: 0 desborde horizontal a 375 px de ancho. */

/* --- tablet y menos: el menú pasa a <details> --- */
@media (max-width:900px){
  .barra__nav{display:none}
  .barra__menu{display:block}
  .barra__cta{display:none}
}

/* --- móvil --- */
@media (max-width:640px){
  body{font-size:16px}
  html{scroll-padding-top:74px}
  .env,.barra__env{width:min(var(--ancho),90vw)}
  .hero{min-height:min(82vh,600px);padding:4rem 0 3.5rem}
  .hero__logo{width:92px;height:92px}
  .casa{min-height:340px;padding:2rem 1.5rem}
  .casa__piso{font-size:2.6rem}
  .ficha__foto{height:210px}
  .acciones{flex-direction:column;align-items:stretch}
  .acciones .btn{width:100%}
  .acciones--centro{align-items:center}
  .cinta .env{gap:.5rem 1.2rem;font-size:.72rem}
  .precio__valor{margin-left:auto}
  .pie-pag li{margin-bottom:0}
  .pie-pag li a{display:inline-block;padding:.55rem 0}
  .pie-pag__legal{flex-direction:column;align-items:flex-start}
  .pie-pag__legal nav{gap:.2rem 1.6rem}
  .pie-pag__legal nav a{display:inline-block;padding:.5rem 0}
  /* el media query no suma especificidad: si .hero--corto no se repite acá,
     gana la regla .hero de más arriba y las 5 interiores abren con una losa
     de mármol a pantalla casi completa. */
  .hero--corto{min-height:min(56vh,400px);padding:3.2rem 0 2.6rem}

  /* el flotante tapaba el final del texto del hero y de la cinta: se achica
     a punto + palabra corta y cada bloque de arriba reserva su hueco. */
  .flota-wasap{right:12px;bottom:12px;padding:.7rem 1rem;font-size:.68rem;gap:.4rem}
  .hero__env > *:last-child{margin-bottom:3.2rem}
  .cinta{padding:1.15rem 0 3rem}
}

/* --- 375 px justos: lo que se rompe primero --- */
@media (max-width:400px){
  .barra__nombre{font-size:.92rem}
  .barra__nombre small{letter-spacing:.12em;font-size:.7rem}
  .hero h1{font-size:2rem}
  .grilla,.grilla--2,.grilla--4,.casas{grid-template-columns:1fr}
  .duo,.direccion{grid-template-columns:1fr}
  .pildora{font-size:.79rem;padding:.45rem .85rem}
  .btn{padding:.9rem 1.3rem;font-size:.75rem;letter-spacing:.1em}
  .btn--chico{padding:.72rem 1.1rem;font-size:.7rem}
}

/* pantallas anchas: el mármol de los heroes se ve mejor un poco más alto */
@media (min-width:1400px){
  .hero{min-height:min(84vh,780px)}
}

/* impresión: sin mármol, sin flotante, sin desperdicio de tinta */
@media print{
  .marmol,.flota-wasap,.barra{display:none !important}
  body{background:#fff;color:#000}
  .seccion{padding:1.2rem 0}
}


/* ═══ 13 · UTILIDADES ═════════════════════════════════════════════════════ */
.centro{text-align:center}
.centro .bajada,.centro .enc{margin-inline:auto}
.izq{text-align:left}
.sin-margen{margin:0}
.mt-1{margin-top:.6rem}  .mt-2{margin-top:1.2rem}  .mt-3{margin-top:2rem}  .mt-4{margin-top:3rem}
.mb-2{margin-bottom:1.2rem} .mb-3{margin-bottom:2rem}
.limite-txt{max-width:var(--ancho-txt)}
.oro{color:var(--cobre)}
.suave{color:var(--tinta-suave)}
.blanco{color:#fff}
.nowrap{white-space:nowrap}

/* sólo para lectores de pantalla */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* saltar al contenido: aparece al tabular */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--vino);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--radio) 0;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.saltar:focus{left:0}