/* ===================================================================
   TU ESTILO — Peluquería & Belleza, La Serena
   Estilo: editorial premium sobre fondo blanco. El hero es un momento
   claro y luminoso; el menú móvil, el footer y la Gift Card quedan
   como los únicos momentos oscuros (bookend), minimalista.
   =================================================================== */

:root{
  /* Paleta — fondo blanco, tinta casi negra, sin acentos de color
     (excepto el verde de WhatsApp en los botones de contacto directo) */
  --paper:      #ffffff;
  --paper-alt:  #f5f3ef;
  --ink:        #111111;
  --ink-2:      #3d3a35;
  --ink-mute:   #767268;
  --line:       rgba(17,17,17,0.12);
  --line-soft:  rgba(17,17,17,0.08);

  /* Momentos oscuros: hero, menú móvil, footer, widgets flotantes */
  --night:      #0a0a0a;
  --night-2:    #161616;
  --on-night:       #f7f6f4;
  --on-night-mute:  rgba(247,246,244,0.72);
  --line-on-night:  rgba(247,246,244,0.14);

  /* WhatsApp — único acento de color, reservado a contacto directo */
  --wa:      #25D366;
  --wa-dark: #1DA851;

  /* Acento cobre para las letras T/E en los titulares principales — oscuro
     a propósito para que se lea bien sobre fondos claros/fotos, y bien
     saturado (no negrita: el trazo queda igual de fino que el resto del
     título) para que el acento se note por el color y no por el grosor. */
  --accent-copper: #c1440a;

  /* Tipografía principal del sitio. Servicios y Testimonios son la excepción
     y mantienen la tipografía original (ver más abajo, #servicios/#testimonios
     redefinen estas mismas variables solo dentro de esas dos secciones). */
  --font-display: 'Montserrat', 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Para texto en cursiva: 'Montserrat Italic' es una familia aparte
     (ver fonts.css) para evitar que el navegador la confunda con Fraunces. */
  --font-display-italic: 'Montserrat Italic', 'Fraunces', 'Times New Roman', serif;

  /* Tipografía original — se sigue usando en Servicios y Testimonios */
  --font-display-original: 'Fraunces', 'Times New Roman', serif;
  --font-body-original: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.68,.1,1);
}

*, *::before, *::after{ box-sizing: border-box; }
/* El atributo [hidden] debe ganarle a cualquier display:flex/inline-flex
   de un componente (ej. un <button class="btn"> oculto con .hidden=true
   desde JS) — si no, el elemento se sigue mostrando igual. */
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
input, select{ font: inherit; color: inherit; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Anclas: compensar navbar fija */
section[id]{ scroll-margin-top: 84px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h2{ font-size: clamp(1rem, 1.8vw, 1.55rem); }
h3{ font-size: clamp(.6rem, 1vw, .75rem); font-weight: 600; }
p{ margin: 0 0 1em; color: var(--ink-2); }

em{ font-style: italic; font-family: var(--font-display-italic); font-weight: 500; }

.eyebrow{
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1em;
}

/* -------- Defensivo: si el JS no corre, TODO debe verse -------- */
.reveal{ opacity: 1; transform: none; }

/* -------- Secciones -------- */
.section-head{ max-width: 640px; margin-bottom: 3.5rem; }
.section-head--center{ max-width: 620px; margin-inline: auto; text-align: center; }
.section-head__lead{ font-size: 1.05rem; }

/* -------- Botones -------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.9em;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .45s var(--ease), background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .45s ease;
  white-space: nowrap;
}
/* Botón primario — para secciones sobre fondo claro */
.btn--primary{
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(17,17,17,.45);
}
/* Modificador — mismo botón, pero sobre fondo oscuro (hero, menú móvil) */
.btn--primary.btn--on-dark{
  background: var(--paper);
  color: var(--ink);
}
.btn--primary.btn--on-dark:hover{
  box-shadow: 0 14px 30px -12px rgba(255,255,255,.35);
}
/* Botón fantasma — pensado para fondos oscuros (navbar sobre el hero, footer) */
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: var(--on-night);
}
.btn--ghost:hover{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  transform: translateY(-2px);
}
/* Botón de WhatsApp — único acento de color del sitio */
.btn--whatsapp{
  background: var(--wa);
  color: #ffffff;
}
.btn--whatsapp:hover{
  background: var(--wa-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(37,211,102,.55);
}
.btn--block{ width:100%; }
/* Botón contorno — acción secundaria sobre fondo claro */
.btn--outline{
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--outline:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.link-inline{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: .15em;
  transition: border-color .3s ease, gap .3s ease, opacity .3s ease;
}
.link-inline svg{ transition: transform .3s var(--ease); }
.link-inline:hover{ border-color: var(--ink); gap: .7em; }
.link-inline:hover svg{ transform: translateX(3px); }
.link-inline--muted{ color: var(--ink-mute); }

/* Enlaces que llevan a WhatsApp: siempre en verde, en cualquier sección */
a[href*="wa.me"].link-inline{ color: var(--wa-dark); border-color: rgba(37,211,102,.35); }
a[href*="wa.me"].link-inline:hover{ border-color: var(--wa-dark); }
.hero a[href*="wa.me"].link-inline,
.chat-popup a[href*="wa.me"]{ color: var(--wa); }

/* WhatsApp mencionado dentro de un párrafo corrido (no un link-inline con
   flecha, solo la palabra dentro del texto): mismo verde, con subrayado
   para que se note que es clickeable en medio de la frase. */
p a[href*="wa.me"]:not(.link-inline){
  color: var(--wa-dark); text-decoration: underline; text-underline-offset: .15em;
}
p a[href*="wa.me"]:not(.link-inline):hover{ color: var(--wa); }

/* =================== NAVBAR (sobre el hero claro por defecto) =================== */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.4rem;
  color: var(--ink);
  transition: padding .4s var(--ease), background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease, color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding-block: .8rem;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap: 1.4rem; }
.nav__brand{ display:flex; align-items:center; transition: margin .4s var(--ease); }
/* Sin círculo ni fondo: solo la firma en tinta negra (recortada y con el
   negro original vuelto transparente) "flotando" sobre la foto del hero,
   como una marca fundida en la imagen. Un halo claro le da contraste tanto
   sobre el fondo blanco del menú (al hacer scroll) como sobre las partes
   más oscuras de la foto. */
.nav__logo{
  display:block; width: 46px; flex-shrink: 0;
  transition: transform .4s var(--ease), width .4s var(--ease);
}
.nav__brand:hover .nav__logo{ transform: scale(1.06); }
.nav__logo-img{
  display:block; width:100%; height:auto;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 1px 6px rgba(255,255,255,.55));
}

.nav__right{ display:flex; align-items:center; gap: 2.1rem; }

.nav__links{ display:none; align-items:center; gap: 2.1rem; }
.nav__links a{
  font-size: .88rem; font-weight: 500; color: var(--ink);
  position: relative; padding-bottom: 4px;
  transition: color .35s ease;
}
.nav.is-scrolled .nav__links a{ color: var(--ink); }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor; transition: right .35s var(--ease);
}
.nav__links a:hover{ color: var(--ink); }
.nav.is-scrolled .nav__links a:hover{ color: var(--ink); }
.nav__links a:hover::after{ right:0; }

.nav__cta{ display:none; padding: .7em 1.5em; font-size: .82rem; border-color: var(--line); color: var(--ink); }
.nav__cta:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav__toggle{ display:flex; color: var(--ink); padding: .3rem; transition: color .4s ease; }
.nav.is-scrolled .nav__toggle{ color: var(--ink); }

@media (min-width: 920px){
  .nav__links{ display:flex; }
  .nav__links--left{ flex: 1 1 0; justify-content:flex-end; }
  .nav__right{ flex: 1 1 0; justify-content:flex-start; }
  .nav__cta{ display:inline-flex; }
  .nav__toggle{ display:none; }

  /* Logo protagonista y centrado sobre la pantalla de inicio: se saca del flujo para
     que la barra siga siendo angosta y el logo "flote" encima sin empujar el resto
     del encabezado ni tapar el titular. Cuelga mayormente hacia abajo (en vez de
     quedar centrado en ambos sentidos) para no recortarse contra el borde superior
     de la ventana. Al hacer scroll se compacta y sí queda perfectamente centrado. */
  .nav__inner{ position:relative; gap: 11rem; }
  .nav__brand{
    position:absolute; left:50%; top:50%;
    transform: translate(-50%, -8%);
    margin-inline: 0;
    z-index:2;
    transition: transform .4s var(--ease);
  }
  .nav.is-scrolled .nav__brand{ transform: translate(-50%, -50%); }
  .nav__logo{ width: 184px; }
  .nav.is-scrolled .nav__logo{ width: 46px; }
}

/* En laptops de poca altura no cabe un logo tan grande entre el borde superior y el
   titular del hero sin recortarse o taparlo; ahí se usa un tamaño intermedio y
   cuelga más hacia abajo (más flotando bajo la barra que centrado) porque, al ser
   ahora más alto que ancho (ya no es un círculo), si no se recorta contra el
   titular de abajo en vez de contra el borde de arriba. */
@media (min-width: 920px) and (max-height: 820px){
  .nav__logo{ width: 120px; }
  .nav__brand{ transform: translate(-50%, -25%); }
}

/* Menú móvil — pantalla completa oscura, a propósito, sobre el sitio claro */
.mobile-menu{
  position: fixed; inset:0; z-index: 200;
  background: var(--night);
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--pad);
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu__close{ position:absolute; top: 1.6rem; right: var(--pad); color: var(--on-night); }
.mobile-menu__nav{ display:flex; flex-direction:column; gap: 1.1rem; }
.mobile-menu__nav a{
  font-family: var(--font-display-italic); font-style: italic; font-weight: 500;
  font-size: clamp(2rem, 9vw, 3rem); color: var(--on-night);
}
.mobile-menu__nav .btn{ margin-top: 1rem; align-self: flex-start; font-style:normal; font-family: var(--font-body); font-size: .92rem; }
.mobile-menu__footer{ margin-top: 3rem; display:flex; flex-direction:column; gap:.4rem; color: var(--on-night-mute); font-size: .95rem; }

/* =================== HERO (momento claro, luminoso) =================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  padding-bottom: 5.5rem;
  color: var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:0; background: var(--paper-alt); }
.hero__img{
  width:100%; height: 118%; object-fit: cover; object-position: 38% 42%;
  filter: grayscale(1) contrast(1.05);
  will-change: transform;
}
/* Un solo tramo (sin paradas intermedias) a propósito: con varias paradas el
   degradado cambia de pendiente en cada una y eso se nota como una línea
   sutil pero visible cruzando la foto, sobre todo con la imagen en blanco y
   negro. Un solo tramo es perfectamente parejo, sin "costuras". */
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.3) 100%);
}
.hero__content{ position:relative; z-index:1; }
.hero__title{ max-width: 64rem; font-family: 'Montserrat', var(--font-body), sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: .03em; }
.hero-line, .reveal-line{ display:block; overflow:hidden; padding-bottom: .08em; }
.hero__title .reveal{ display:block; font-size: clamp(1.9rem, 4.8vw, 3.9rem); overflow-wrap: break-word; color: var(--ink); }
.hero__subtitle{ max-width: 46ch; font-size: 1.08rem; color: var(--ink-2); margin-top: 1.4rem; font-family: 'Montserrat', var(--font-body), sans-serif; font-weight: 300; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap: 1.8rem; margin-top: 2.2rem; }

/* Letras T/E acentuadas en color cobre dentro de los titulares principales
   (ver initLetterAccents en main.js, que envuelve cada T/E en este span).
   Se mantiene el mismo trazo fino del resto del título (sin negrita): el
   acento se nota por el color, no por el grosor de la letra. */
.letter-accent{ color: var(--accent-copper); }

/* Mismo tipo de letra del hero (Montserrat Light, mayúsculas, tracking) aplicado
   a los títulos de cada sección del sitio (h2) y al de "Datos de contacto" (h3),
   a pedido del cliente. */
h2, h3{
  font-family: 'Montserrat', var(--font-body), sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hero .link-inline{ color: var(--ink); border-color: var(--line); }
.hero .link-inline:hover{ border-color: var(--ink); }

/* Excepción a pedido del cliente: Servicios y Testimonios mantienen la
   tipografía original (Fraunces/Inter) mientras el resto del sitio pasa a
   Montserrat. Redefinir las variables acá alcanza para todo el contenido de
   esas dos secciones; el h2 se revierte aparte porque tiene su propia regla
   directa (mayúsculas, tracking, etc.) más arriba. */
#servicios, #testimonios{
  --font-display: var(--font-display-original);
  --font-body: var(--font-body-original);
}
#servicios h2, #testimonios h2{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ...pero el encabezado de esas dos secciones (ojo de texto + título + bajada)
   sí pasa a Montserrat a pedido del cliente; solo el contenido de adentro
   (los tiles de Servicios, las tarjetas de Testimonios) queda en la
   tipografía original. */
#servicios .section-head .eyebrow, #testimonios .section-head .eyebrow,
#servicios .section-head__lead{
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#servicios .section-head h2, #testimonios .section-head h2{
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hero__scrollcue{
  position:absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: var(--ink-mute);
}
.hero__scrollcue-line{ width:1px; height: 34px; background: var(--line); position:relative; overflow:hidden; }
.hero__scrollcue-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--ink);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* =================== PRUEBA SOCIAL =================== */
.stats{ padding: 5rem 0 4rem; background: var(--paper-alt); border-bottom: 1px solid var(--line); }
.stats__grid{
  display:grid; gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  text-align:center;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.4rem;
}
.stat__num{ font-family: var(--font-display-italic); font-style: italic; font-size: clamp(2.6rem,5vw,3.6rem); color: var(--ink); }
.stat p{ margin-top:.4rem; font-size: .92rem; color: var(--ink-mute); }
.stats__reviews{ display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; }
.stats__stars{ display:flex; gap:.25rem; color: #F5B400; }
.stats__reviews p{ margin:0; color: var(--ink-2); }

/* Marcas: cinta infinita, se desplaza sola de derecha a izquierda */
.brands{
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.brands__track{
  display:flex;
  align-items:center;
  gap: clamp(2.4rem, 6vw, 4.4rem);
  width: max-content;
  animation: brands-scroll 32s linear infinite;
}
.brands__item{
  flex: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  white-space: nowrap;
  opacity: .8;
}
@keyframes brands-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce){
  .brands__track{ animation: none; }
}

/* =================== SERVICIOS =================== */
.services{ padding: 7rem 0; background: var(--paper); }
.services__grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: .6rem;
}
@media (min-width: 700px){ .services__grid{ grid-template-columns: repeat(3,1fr); gap: .8rem; } }
@media (min-width: 1080px){ .services__grid{ grid-template-columns: repeat(4,1fr); } }

.service-tile{
  position:relative; aspect-ratio: 3/4; overflow:hidden; display:block;
  background: var(--paper-alt); border-radius: var(--radius-sm);
}
.service-tile img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.08);
  transition: transform 1.1s var(--ease), filter .6s ease;
}
.service-tile::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.5) 60%, rgba(10,10,10,.72) 100%);
  transition: background-color .4s ease;
}
.service-tile:hover img{ transform: scale(1.08); filter: grayscale(.35) contrast(1.12); }
/* En celular no hay hover para "revelar" el color, así que ahí se deja la
   foto a color directamente en vez de que quede en blanco y negro fijo. */
@media (hover: none){
  .service-tile img{ filter: grayscale(0) contrast(1.08); }
}
.service-tile__text{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; gap:.4rem; padding: 1.4rem 1rem 1.6rem;
}
.service-tile__text strong{
  font-family: var(--font-display); font-weight:500; font-style:italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem); color:#ffffff; line-height:1.2;
}
.service-tile__text em{
  font-family: var(--font-body); font-style:normal; font-weight:600;
  font-size: .74rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(255,255,255,.78);
  transition: color .3s ease;
}
.service-tile:hover .service-tile__text em{ color:#ffffff; }

/* =================== NOSOTROS =================== */
.about{ padding: 7rem 0; background: var(--paper); border-top: 1px solid var(--line); }
.about__grid{ display:grid; gap: 3rem; align-items:center; }
@media (min-width: 960px){ .about__grid{ grid-template-columns: 1fr 1fr; gap: 5rem; } }
.about__media{ position:relative; margin-top: 2.2rem; }
.about__media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; filter: grayscale(1) contrast(1.05); border-radius: var(--radius); }
/* La foto principal es la excepción: se deja a color a propósito para que
   se note el resultado del tratamiento (pedido explícito del cliente).
   Especificidad: ".about__media img" ya pesa clase+etiqueta, así que acá
   hace falta iguales o más para que la gane. */
.about__media img.about__media-main{ filter: saturate(1.15) contrast(1.05); }
.about__media-inset{
  position:absolute; left: -1rem; top: -2.2rem; z-index:1;
  width: 44%; max-width: 220px; margin:0;
  border-radius: var(--radius-sm); overflow:hidden;
  border: 6px solid var(--paper);
  box-shadow: 0 16px 34px -16px rgba(17,17,17,.5);
}
.about__media-inset img{ display:block; border-radius:0; }
.about__badge{
  position:absolute; right: -0.6rem; bottom: -1.4rem; z-index:1;
  background: var(--ink); color: var(--paper);
  padding: 1.2rem 1.6rem; text-align:center; min-width: 130px;
  box-shadow: 0 20px 40px -18px rgba(17,17,17,.5);
  border-radius: var(--radius-sm);
}
@media (max-width: 480px){
  .about__media-inset{ width: 40%; max-width: 150px; left: -.5rem; top: -1.6rem; border-width: 4px; }
}
.about__badge span{ display:block; font-family: var(--font-display-italic); font-style:italic; font-size: 2rem; }
.about__badge em{ font-family: var(--font-body); font-style:normal; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--on-night-mute); }
.about__list{ display:flex; flex-direction:column; gap: .9rem; margin: 1.6rem 0 2rem; }
.about__list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color: var(--ink-2); }
.about__list svg{ flex-shrink:0; margin-top:.15rem; color: var(--ink); }

/* =================== GIFT CARD =================== */
/* Sección oscura a propósito (como el hero) para que combine con el negro y dorado
   de la tarjeta física; el dorado queda reservado solo para este bloque. */
.giftcard{
  --gold: #c9a15f;
  padding: 7rem 0; background: var(--night); color: var(--on-night);
}
.giftcard__grid{ display:grid; gap: 3rem; align-items:center; }
@media (min-width: 960px){ .giftcard__grid{ grid-template-columns: 1fr 1fr; gap: 5rem; } }
.giftcard .eyebrow{ color: var(--gold); }
.giftcard h2{ color: var(--on-night); }
/* El acento T/E oscuro no se lee sobre este fondo negro: acá usa el dorado
   de la tarjeta en vez del cobre oscuro que se usa en el resto del sitio. */
.giftcard .letter-accent{ color: var(--gold); }
.giftcard p{ color: var(--on-night-mute); }
.giftcard__list{ display:flex; flex-direction:column; gap: .9rem; margin: 1.6rem 0 2rem; }
.giftcard__list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color: var(--on-night-mute); }
.giftcard__list svg{ flex-shrink:0; margin-top:.15rem; color: var(--gold); }
.giftcard .btn--primary{ background: var(--gold); border-color: var(--gold); color: var(--night); }
.giftcard .btn--primary:hover{ background: var(--on-night); border-color: var(--on-night); }
.giftcard__media img{
  width:100%; aspect-ratio: 4/3; object-fit: cover; object-position: center;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.65);
}

/* =================== TESTIMONIOS =================== */
.testimonials{ padding: 7rem 0; border-top: 1px solid var(--line); background: var(--paper-alt); }
.testimonials__grid{ display:grid; gap: 1.4rem; }
@media (min-width: 860px){ .testimonials__grid{ grid-template-columns: repeat(3,1fr); } }
.testimonial-card{
  margin:0; padding: 2.2rem; border: 1px solid var(--line); background: var(--paper);
  display:flex; flex-direction:column; border-radius: var(--radius);
}
.testimonial-card__stars{ display:flex; gap:.2rem; color: #F5B400; margin-bottom: 1.1rem; }
.testimonial-card blockquote{ margin: 0 0 1.6rem; font-family: var(--font-display); font-size: 1.12rem; line-height:1.5; color: var(--ink); flex-grow:1; }
.testimonial-card figcaption{ display:flex; align-items:center; gap: .8rem; font-size:.87rem; color: var(--ink-mute); }
.avatar{
  width: 40px; height:40px; border-radius:50%; flex-shrink:0;
  background: var(--ink); color: var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
}

/* =================== BOOKING / CONTACTO =================== */
.booking{ padding: 7rem 0 8rem; background: var(--paper); border-top: 1px solid var(--line); }
/* El calendario de Cal.com solo muestra mes y horas lado a lado (en vez de
   uno arriba del otro, mucho más alto) cuando tiene bastante ancho, así que
   le damos todo el ancho de la sección en su propia fila; los datos de
   contacto van debajo. */
.booking__grid{ display:grid; gap: 1.6rem; }

.booking__form-card, .booking__cal-card, .booking__info-card, .booking__calcom-card{
  background: var(--paper-alt); border: 1px solid var(--line);
  padding: 2.2rem; border-radius: var(--radius);
}
/* Radio más chico que el general: su padding es de solo .5rem, y un radio
   mayor que el padding dejaría asomar la esquina cuadrada del iframe de
   Cal.com por fuera de la esquina redondeada (no se le puede aplicar
   overflow:hidden sin arriesgar que vuelva a cortar el calendario). */
.booking__calcom-card{ padding: .5rem; overflow: visible; position: relative; border-radius: var(--radius-sm); }
.booking__calcom-again{ display:block; margin: .9rem auto .6rem; }

.booking__info-card{ display:flex; flex-direction:column; gap: 1.6rem; }
@media (min-width: 760px){
  .booking__info-card{ flex-direction: row; align-items: stretch; }
  .booking__info-text{ flex: 1 1 260px; }
}

.contact-list{ display:flex; flex-direction:column; gap: 1rem; margin-bottom: 1.4rem; }
.contact-list li{ display:flex; align-items:center; gap: .8rem; font-size:.95rem; color: var(--ink-2); }
.contact-list svg{ flex-shrink:0; color: var(--ink-mute); }
.contact-list a:hover{ color: var(--ink); }
.booking__map{ margin-top: 1.6rem; flex: 1 1 320px; min-height: 220px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px){ .booking__map{ margin-top: 0; } }

/* =================== FOOTER (momento oscuro, como el hero) =================== */
.footer{ background: var(--night); color: var(--on-night); border-top: 1px solid var(--line-on-night); padding-top: 5rem; }
.footer__grid{ display:grid; gap: 2.6rem; padding-bottom: 3.5rem; }
@media (min-width: 760px){ .footer__grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__logo{ display:block; width:64px; height:64px; border-radius:50%; overflow:hidden; margin-bottom: 1.2rem; }
.footer__logo img{ width:100%; height:100%; object-fit:cover; }
.footer__brand p{ max-width: 30ch; font-size:.92rem; color: var(--on-night-mute); }
.footer__social{ display:flex; gap: .9rem; margin-top: 1.2rem; }
.footer__social a{ width:38px; height:38px; border:1px solid var(--line-on-night); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--on-night-mute); transition: all .3s ease; }
.footer__social a:hover{ color: var(--night); background: var(--on-night); border-color: var(--on-night); }
.footer__col{ display:flex; flex-direction:column; gap:.75rem; }
.footer__col h4{ font-family: var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--on-night-mute); margin-bottom:.4rem; }
.footer__col a, .footer__col span{ font-size:.92rem; color: var(--on-night-mute); }
.footer__col a:hover{ color: var(--on-night); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap: 1rem; justify-content:space-between; align-items:center;
  padding-block: 1.6rem; border-top: 1px solid var(--line-on-night);
  font-size:.82rem; color: rgba(247,246,244,.5);
}
.footer__top{ color: var(--on-night-mute); }
.footer__top:hover{ color: var(--on-night); }

/* =================== WIDGETS FLOTANTES =================== */
.float-stack{
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 300;
  display:flex; flex-direction:column; align-items:flex-end; gap: .8rem;
}
.float-btn{
  width: 54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.4);
  transition: transform .35s var(--ease), box-shadow .35s ease, background-color .35s ease;
}
.float-btn:hover{ transform: translateY(-3px) scale(1.04); }
/* Botón de WhatsApp — verde, el único acento de color del sitio */
.float-btn--wa{ background: var(--wa); color: #ffffff; }
.float-btn--wa:hover{ background: var(--wa-dark); }
.float-btn--chat{ background: var(--night-2); color: var(--on-night); border: 1px solid var(--line-on-night); width:46px; height:46px; }
.chat-popup{
  background: var(--night-2); border: 1px solid var(--line-on-night);
  padding: 1.2rem; width: 230px;
  display:flex; flex-direction:column; gap:.6rem;
  transform: translateY(12px) scale(.96); opacity:0; pointer-events:none;
  transition: all .32s var(--ease);
}
.chat-popup.is-open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.chat-popup p{ margin:0 0 .2rem; font-weight:600; color: var(--on-night); font-size:.92rem; }
.chat-popup a, .chat-popup button{
  font-size: .87rem; color: var(--on-night-mute); padding: .3rem 0; border-bottom: 1px solid var(--line-on-night);
  text-align:left; font-family:inherit;
}
.chat-popup a:last-child, .chat-popup button:last-child{ border-bottom:none; }
.chat-popup a:hover, .chat-popup button:hover{ color: var(--on-night); }

/* =================== ASISTENTE VIRTUAL (IA) =================== */
.ai-chat{
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 350;
  width: min(340px, calc(100vw - 2.6rem)); height: min(480px, calc(100vh - 2.6rem));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateY(16px) scale(.97); opacity:0; pointer-events:none;
  transition: all .32s var(--ease);
}
.ai-chat.is-open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.ai-chat__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;
  padding: 1rem 1.1rem; background: var(--night); color: var(--on-night);
}
.ai-chat__head strong{ display:block; font-family: var(--font-display-italic); font-style: italic; font-size: 1.05rem; }
.ai-chat__head span{ display:block; font-size: .74rem; color: var(--on-night-mute); margin-top:.15rem; }
.ai-chat__head button{ color: var(--on-night-mute); flex-shrink:0; }
.ai-chat__head button:hover{ color: var(--on-night); }
.ai-chat__messages{
  flex:1; overflow-y:auto; padding: 1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem;
  background: var(--paper-alt);
}
.ai-chat__msg{ max-width: 85%; padding: .6em .85em; border-radius: 10px; font-size: .88rem; line-height:1.5; }
.ai-chat__msg--bot{ align-self:flex-start; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.ai-chat__msg--user{ align-self:flex-end; background: var(--ink); color: var(--paper); }
.ai-chat__msg--typing{ color: var(--ink-mute); font-style:italic; }
.ai-chat__form{ display:flex; gap:.5rem; padding: .8rem; border-top: 1px solid var(--line); background: var(--paper); }
.ai-chat__form input{
  flex:1; padding: .7em .9em; border: 1px solid var(--line); border-radius: 100px;
  font-size: .88rem; background: var(--paper-alt); color: var(--ink);
}
.ai-chat__form input:focus{ outline:none; border-color: var(--ink); }
.ai-chat__form button{
  width: 40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--ink); color: var(--paper); transition: transform .25s ease;
}
.ai-chat__form button:hover{ transform: scale(1.06); }

/* =================== CURSOR PERSONALIZADO (solo puntero fino) =================== */
.cursor-dot{
  position: fixed; top:0; left:0; width: 10px; height:10px; border-radius:50%;
  background: #ffffff; pointer-events:none; z-index: 999;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: width .25s var(--ease), height .25s var(--ease);
}
.cursor-dot.is-active{ width: 34px; height: 34px; }

@media (pointer: coarse){ .cursor-dot{ display:none; } }

/* =================== UTILIDADES DE ANIMACIÓN =================== */
.reveal-group .reveal{ opacity:1; }