/* ============================================================
   Estética Sofía PC — Collado Villalba
   Paleta INVERTIDA de su marca: ella usa marrón sobre crema en Instagram;
   aquí el marrón profundo es el aire y la crema es la tinta. Es su color,
   pero deja de parecer «web de spa» y pasa a parecer clínica.
   ============================================================ */

/* Hanken Grotesk para los titulares. NO se usa serif de display: es el reflejo
   que Rober me señaló (Cormorant en Elysium, Gambetta en MIDAS, Fraunces aquí)
   y además contradecía la marca de Sofía, cuyo logotipo es una sans fina y muy
   espaciada. Esta se le parece y respira igual. */
@font-face {
  font-family: 'Hanken';
  src: url('fonts/hanken.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('fonts/karla.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* ---------- MODO OSCURO (el de partida) ----------
     Paleta INVERTIDA de su marca: ella usa marrón sobre crema; aquí el marrón
     profundo es el aire y la crema es la tinta. */
  --noche: #17100d;      /* el fondo dominante */
  --corteza: #241811;    /* superficies elevadas: fichas, tarjetas */
  --piel: #30211a;       /* un escalón más, para el hover */
  --crema: #efe5d8;      /* texto principal */
  --arena: #b39b84;      /* texto secundario */
  --luz: #e0a76b;        /* EL ACENTO: la luz del láser y la lámpara de su cabina */
  --linea: rgba(239, 229, 216, 0.14);
  --sombra: rgba(0, 0, 0, 0.85);

  /* El HERO va aparte y NO cambia con el tema: la fotografía es oscura, así que
     el texto de encima tiene que seguir siendo claro también en modo claro.
     Si el hero siguiera al tema, en claro el texto caería sobre la foto oscura
     y no se leería nada. */
  --hero-fondo: #17100d;
  --hero-texto: #efe5d8;
  --hero-suave: #b39b84;
  --hero-acento: #e0a76b;
  --hero-linea: rgba(239, 229, 216, 0.14);
  --logo-filtro: none;

  /* Tonos del corte de piel. En oscuro se mantienen apagados para que la
     lámina no se despegue del resto de la página. */
  --epi: #6d4d3a;
  --dermis: #58382a;
  --hipo: #3d2419;
  --hipo-lobulo: #4a2d1f;
  --piel-borde: #9a7359;
  --pelo: #c39a7a;

  --display: 'Hanken', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Karla', system-ui, -apple-system, sans-serif;

  --ancho: 1440px;
}

/* ---------- MODO CLARO ----------
   La misma marca del derecho: crema de fondo y marrón de tinta, que es como
   ella lo usa en Instagram. El acento se oscurece hasta un ámbar tostado
   porque el #e0a76b sobre crema no llega al contraste mínimo para leerse. */
[data-tema="claro"] {
  --noche: #f7f2ea;
  --corteza: #ffffff;
  --piel: #f1e8dc;
  --crema: #26190f;
  --arena: #7a6553;
  --luz: #97601c;
  --linea: rgba(38, 25, 15, 0.14);
  --sombra: rgba(64, 44, 28, 0.22);
  /* El monograma viene en blanco; sobre fondo claro hay que darle la vuelta. */
  --logo-filtro: invert(1);
  --mapa-filtro: none;

  --epi: #f0d5c1;
  --dermis: #e3bda6;
  --hipo: #f2e2cf;
  --hipo-lobulo: #ecd6bd;
  --piel-borde: #c9a184;
  --pelo: #6b4a30;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--crema);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Foco visible de verdad: es requisito del suelo de accesibilidad y además
   se ve bien porque usa el ámbar de la casa. */
:focus-visible {
  outline: 2px solid var(--luz);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- piezas repetidas ---------- */

.envoltura {
  width: min(100% - 3rem, var(--ancho));
  margin-inline: auto;
}

/* Los rótulos van en mayúsculas muy espaciadas: es exactamente el gesto
   tipográfico de su logotipo, así la web no contradice su marca. */
.rotulo {
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--luz);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.rotulo::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--luz);
  flex: none;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.032em;
  margin: 0;
}

h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  margin-bottom: 1.4rem;
}

p { margin: 0 0 1.15rem; }

.parrafo-guia {
  color: var(--arena);
  font-size: 1.09rem;
  max-width: 46ch;
}

section { position: relative; }

/* ============================================================
   EL ELEMENTO FIRMA — el hilo de luz
   Una línea ámbar que baja por el borde izquierdo según avanzas, como el
   haz del láser recorriendo la piel. Es el único adorno de la página, y
   sale de lo que ella vende. Todo lo demás va callado.
   ============================================================ */
.hilo {
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 100vh;
  background: var(--linea);
  z-index: 60;
  pointer-events: none;
}
.hilo__luz {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--luz) 0%, transparent) 0%,
    var(--luz) 22%,
    var(--luz) 100%);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--luz) 55%, transparent);
}
@media (max-width: 860px) { .hilo { display: none; } }

/* ============================================================
   CABECERA — separada del hero, no encima de él
   ============================================================ */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem clamp(1.5rem, 4vw, 3rem);
  /* Mientras está sobre el hero usa los colores del hero (oscuros en los dos
     temas). Al pegarse arriba pasa a los del tema, que es cuando ya tiene
     debajo contenido claro u oscuro según toque. */
  background: linear-gradient(180deg, rgba(23, 16, 13, 0.92) 0%, rgba(23, 16, 13, 0) 100%);
  color: var(--hero-texto);
  transition: background 0.4s ease, color 0.4s ease;
}
.cabecera--fija {
  background: color-mix(in srgb, var(--noche) 94%, transparent);
  color: var(--crema);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(14px);
}
.cabecera .marca__tipo { color: inherit; opacity: 0.66; }
.cabecera .menu a { color: inherit; opacity: 0.72; }
.cabecera .menu a:hover { opacity: 1; }
.cabecera .boton--linea { color: inherit; border-color: currentColor; opacity: 0.75; }

/* El monograma real de Sofía, sacado de sus publicaciones. En modo claro se
   invierte, porque el fichero viene con el trazo en blanco. */
.marca__logo {
  height: 30px;
  width: auto;
  filter: var(--logo-filtro);
}
.cabecera .marca__logo { filter: none; }
.cabecera--fija .marca__logo { filter: var(--logo-filtro); }

.marca {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}
.marca__sigla {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
}
.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  border-left: 1px solid var(--linea);
  padding-left: 0.85rem;
}
.marca__nombre {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca__tipo {
  /* 9px era demasiado pequeño incluso para un bajo-logotipo en mayúsculas. */
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arena);
  white-space: nowrap;
}
/* En pantallas estrechas el bajo-logotipo parte en dos líneas y descuadra la
   cabecera; ahí se queda solo el nombre. */
@media (max-width: 430px) {
  .marca__tipo { display: none; }
  .marca__texto { padding-left: 0.7rem; }
}

.menu {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.menu a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--arena);
  transition: color 0.25s ease;
  padding: 0.4rem 0;
}
.menu a:hover { color: var(--crema); }
@media (max-width: 1040px) { .menu { display: none; } }

/* Botón principal. 48px de alto: por encima del mínimo de zona pulsable. */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--luz);
  color: var(--noche);
  font-family: var(--texto);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--luz) 60%, transparent);
}
.boton--linea {
  background: transparent;
  color: var(--crema);
  border: 1px solid var(--linea);
}
.boton--linea:hover {
  border-color: var(--luz);
  box-shadow: none;
}

/* ============================================================
   HERO — la fotografía a sangre, el titular ENCIMA
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-fondo);
  color: var(--hero-texto);
}
.hero .rotulo { color: var(--hero-acento); }
.hero .rotulo::before { background: var(--hero-acento); }
.hero__bajada { color: var(--hero-suave); }
.hero .boton--linea { color: var(--hero-texto); border-color: var(--hero-linea); }
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Empujada a la derecha para que el cabezal no invada la columna del
     titular: el hueco oscuro de la izquierda es lo que hace legible el texto. */
  object-position: 82% 50%;
}
/* Degradado desde la izquierda. La foto ya nace oscura por ahí, así que esto
   solo asienta el texto sobre el fondo — NO es un velo por encima de las letras. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, var(--hero-fondo) 26%, rgba(23, 16, 13, 0.88) 50%, rgba(23, 16, 13, 0.12) 72%),
    linear-gradient(0deg, var(--hero-fondo) 1%, rgba(23, 16, 13, 0) 26%);
}
/* La envoltura da el margen; el texto se limita dentro. Antes el bloque
   llevaba `margin-inline:auto` siendo hijo de un flex, y eso lo centraba
   en la pantalla: el titular acababa encima del aparato. */
.hero__contenido {
  position: relative;
  z-index: 2;
  padding-block: 7rem 3rem;
}
.hero__texto { max-width: 46rem; }
/* Más grande de verdad. Antes ocupaba un tercio del ancho y se leía como un
   párrafo destacado; el titular tiene que ser lo primero que se ve, no lo
   segundo después del aparato. */
.hero h1 {
  font-size: clamp(3rem, 7.4vw, 7.2rem);
  font-weight: 250;
  letter-spacing: -0.042em;
  line-height: 0.94;
  margin-bottom: 1.6rem;
}
.hero__bajada { font-size: clamp(1.02rem, 1.35vw, 1.16rem); }

/* En vertical el degradado lateral no sirve de nada: el aparato queda justo
   detrás del titular y el texto claro cae sobre el plástico blanco. Se baja
   el objeto al tercio inferior y el degradado pasa a ser vertical. */
@media (max-width: 860px) {
  .hero__foto { object-position: 58% 88%; }
  .hero::after {
    background:
      linear-gradient(180deg, var(--hero-fondo) 18%, rgba(23, 16, 13, 0.86) 46%, rgba(23, 16, 13, 0.1) 72%),
      linear-gradient(0deg, var(--hero-fondo) 2%, rgba(23, 16, 13, 0) 30%);
  }
  .hero__contenido { padding-block: 7rem 3rem; }
  /* En móvil el rótulo largo partía en dos líneas y descuadraba el bloque. */
  .hero .rotulo { letter-spacing: 0.13em; font-size: 0.75rem; }
}
/* La cursiva era un gesto propio de la serif. Una grotesca no tiene itálica de
   verdad: el navegador la inclina a la fuerza y se nota. El énfasis lo lleva
   ahora el color, que es más limpio. */
.hero h1 em {
  font-style: normal;
  color: var(--hero-acento);
}
.hero__bajada {
  color: var(--arena);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 33rem;
  margin-bottom: 2.6rem;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

/* ============================================================
   OBJETO 1 — la reseña de Google, construida, no escrita
   5,0 con 188 reseñas es su mejor activo: merece una pieza, no una frase.
   ============================================================ */
.aval {
  border-block: 1px solid var(--linea);
  background: var(--corteza);
}
.aval__rejilla {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: 2.4rem;
}
.aval__nota {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.aval__cifra {
  font-family: var(--display);
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 250;
  line-height: 0.85;
  color: var(--luz);
}
.aval__estrellas {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.aval__iconos { display: flex; gap: 0.18rem; color: var(--luz); }
.aval__iconos svg { width: 15px; height: 15px; }
.aval__pie {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arena);
}
.aval__cita {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--crema);
  max-width: 40ch;
}
.aval__enlace {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 0.35rem;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.aval__enlace:hover { color: var(--luz); border-color: var(--luz); }
@media (max-width: 900px) {
  .aval__rejilla { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ============================================================
   OBJETO 2 — el diagrama Trionda
   «Tecnología de tres longitudes de onda» es la frase que usan todas.
   Aquí se dibuja: tres haces entrando a distinta profundidad en la piel.
   ============================================================ */
.trionda {
  padding-block: clamp(5rem, 11vw, 9rem);
}
.trionda__rejilla {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 940px) {
  .trionda__rejilla { grid-template-columns: 1fr; }
}

.corte {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--corteza);
  border: 1px solid var(--linea);
}
.corte svg { width: 100%; height: auto; display: block; }
/* El corte de piel. Los tonos son de PIEL, no del tema: una dermis gris no
   parece una dermis. Lo que cambia con el tema es cuánto se apagan, para que
   sobre fondo claro no deslumbren. */
.corte .piel-epi { fill: var(--epi); }
.corte .piel-dermis { fill: var(--dermis); }
.corte .piel-hipo { fill: var(--hipo); }
.corte .superficie { stroke: var(--piel-borde); stroke-width: 2; }
.corte .grano { fill: var(--piel-borde); opacity: 0.5; }
.corte .lobulos { fill: var(--hipo-lobulo); }
.corte .pelo { stroke: var(--pelo); stroke-width: 2.6; }
.corte .haz { stroke: var(--luz); }
.corte .foco { fill: var(--luz); }
.corte .aro { stroke: var(--luz); opacity: 0.3; }
.corte .rotulo-svg { fill: var(--arena); }
.corte .nm-svg { fill: var(--crema); }
.corte .nm-unidad { fill: var(--arena); }

.ondas {
  display: grid;
  gap: 0.9rem;
  margin-top: 2.2rem;
  padding: 0;
  list-style: none;
}
.onda {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  background: var(--corteza);
  border: 1px solid var(--linea);
  border-radius: 3px;
}
.onda__nm {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--luz);
  min-width: 5.4rem;
}
.onda__que {
  font-size: 0.92rem;
  color: var(--arena);
  line-height: 1.5;
}
.onda__que strong {
  color: var(--crema);
  font-weight: 500;
  display: block;
  font-size: 0.98rem;
}

/* ============================================================
   OBJETO 3 — las fichas de tratamiento
   No una lista de viñetas: una ficha clínica por tratamiento, con sus datos.
   ============================================================ */
.tratamientos {
  padding-block: clamp(5rem, 11vw, 9rem);
  background: var(--corteza);
  border-block: 1px solid var(--linea);
}
.tratamientos__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3.4rem;
}
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.ficha {
  background: var(--noche);
  padding: 2.2rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: background 0.3s ease;
}
.ficha:hover { background: var(--piel); }
.ficha__num {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--luz);
}
.ficha h3 {
  font-size: 1.6rem;
  line-height: 1.12;
}
.ficha__desc {
  font-size: 0.94rem;
  color: var(--arena);
  margin: 0;
  flex: 1;
}
.ficha__datos {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}
.ficha__dato {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.79rem;
}
.ficha__dato dt {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena);
  font-size: 0.68rem;
}
.ficha__dato dd {
  margin: 0;
  color: var(--crema);
  font-weight: 500;
  text-align: right;
}

/* ============================================================
   CABINA — segunda fotografía a sangre, con el texto encima
   ============================================================ */
.cabina {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.cabina__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cabina::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--hero-fondo) 3%, rgba(23, 16, 13, 0.62) 44%, rgba(23, 16, 13, 0) 78%);
}
.cabina {
  background: var(--hero-fondo);
  color: var(--hero-texto);
}
.cabina .rotulo { color: var(--hero-acento); }
.cabina .rotulo::before { background: var(--hero-acento); }
.cabina .parrafo-guia { color: var(--hero-suave); }
.cabina__contenido {
  position: relative;
  z-index: 2;
  padding-block: 4.5rem;
  max-width: 40rem;
}
.cabina h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }

/* ============================================================
   OBJETO 4 — el proceso, en pasos numerados con dibujo
   ============================================================ */
.proceso {
  padding-block: clamp(5rem, 11vw, 9rem);
}
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.4rem;
  margin-top: 3.4rem;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid var(--linea);
}
.paso::before {
  counter-increment: paso;
  content: '0' counter(paso);
  position: absolute;
  top: 1.1rem;
  left: 0;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--luz);
}
.paso h3 {
  font-size: 1.32rem;
  margin-bottom: 0.7rem;
}
.paso p {
  font-size: 0.93rem;
  color: var(--arena);
  margin: 0;
}

/* ============================================================
   OFERTAS — las promociones que ella misma publica
   ============================================================ */
.ofertas {
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--corteza);
  border-block: 1px solid var(--linea);
}
.ofertas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.oferta {
  position: relative;
  padding: 2.4rem 2rem;
  background: var(--noche);
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
}
.oferta--marcada { border-color: rgba(224, 167, 107, 0.45); }
.oferta__cifra {
  font-family: var(--display);
  font-size: clamp(3.2rem, 6vw, 4.4rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--luz);
  display: block;
  margin-bottom: 1rem;
}
.oferta h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.oferta p {
  font-size: 0.92rem;
  color: var(--arena);
  margin: 0;
}

/* ============================================================
   VISITA — dirección, horario y contacto
   ============================================================ */
.visita {
  padding-block: clamp(5rem, 11vw, 9rem);
}
.visita__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
@media (max-width: 940px) {
  .visita__rejilla { grid-template-columns: 1fr; }
}
.datos {
  display: grid;
  gap: 1.6rem;
  margin: 2.4rem 0 0;
}
.dato {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--linea);
}
.dato dt {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arena);
}
.dato dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 300;
}
.dato dd a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.dato dd a:hover { border-color: var(--luz); color: var(--luz); }

.mapa {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
  background: var(--corteza);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  /* El mapa viene en blanco y llamaría más que la propia web. Se invierte
     y se tiñe hacia el marrón de la casa. */
  filter: var(--mapa-filtro, invert(0.92) hue-rotate(185deg) saturate(0.55) brightness(0.95) contrast(0.92));
}
/* Cartel previo al mapa: se muestra hasta que el visitante lo pide. */
.mapa__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 340px;
  height: 100%;
  padding: 2rem;
  border: 0;
  background: var(--corteza);
  color: var(--arena);
  font-family: var(--texto);
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.mapa__aviso:hover { background: var(--piel); color: var(--crema); }
.mapa__aviso svg { width: 32px; height: 32px; color: var(--luz); }
.mapa__titulo {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--crema);
}
.mapa__texto { max-width: 30ch; line-height: 1.5; }

/* ============================================================
   LLAMADA FINAL
   ============================================================ */
.cierre {
  padding-block: clamp(5rem, 12vw, 10rem);
  text-align: center;
  border-top: 1px solid var(--linea);
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--luz) 9%, transparent) 0%, transparent 62%),
    var(--noche);
}
.cierre h2 {
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  margin-inline: auto;
  max-width: 18ch;
}
.cierre .parrafo-guia { margin: 1.6rem auto 2.6rem; text-align: center; }
.cierre__acciones { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PIE — con el bloque legal, que va de oficio desde el minuto uno
   ============================================================ */
.pie {
  padding-block: 3.4rem 2.4rem;
  border-top: 1px solid var(--linea);
  background: var(--corteza);
}
.pie__rejilla {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.pie__legal {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
}
.pie__legal a { color: var(--arena); text-decoration: none; }
.pie__legal a:hover { color: var(--luz); }
.pie__nota {
  margin: 2.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  font-size: 0.74rem;
  color: var(--arena);
}

/* ============================================================
   WhatsApp flotante — es de donde van a venir las citas de verdad
   ============================================================ */
.wasap {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--luz);
  color: var(--noche);
  box-shadow: 0 12px 34px -10px var(--sombra);
  transition: transform 0.25s ease;
}
.wasap:hover { transform: scale(1.06); }
.wasap svg { width: 28px; height: 28px; }

/* ============================================================
   MOVIMIENTO — sobrio, que es lo que se pidió
   No es el fundido de 8 px de siempre: el contenido sube 26 px y se revela
   bajo una máscara, escalonado. Se nota que algo pasa, sin ruido.
   ============================================================ */
.revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.revela.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .boton:hover, .wasap:hover { transform: none; }
}

/* ============================================================
   SUELO DE CALIDAD — arreglos salidos de pasar ops/revisar.js
   ============================================================ */

/* Los enlaces del pie medían 21 px de alto: por debajo del mínimo de zona
   pulsable. El padding los sube sin cambiar cómo se ven. */
.pie__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 0.15rem;
}

/* En el móvil los rótulos en mayúsculas bajaban hasta 9 px. Se mantienen
   pequeños porque van muy espaciados, pero nunca por debajo de 12 px. */
@media (max-width: 860px) {
  .rotulo { font-size: 0.78rem; }
  .aval__pie,
  .aval__enlace,
  .pie__nota,
  .pie__legal a { font-size: 0.8rem; }
  .ficha__dato dt,
  .dato dt { font-size: 0.75rem; }
  .ficha__dato { font-size: 0.85rem; }
  .marca__nombre { font-size: 0.86rem; }
  .menu a { font-size: 0.82rem; }
}

/* ============================================================
   SELECTOR DE TEMA
   ============================================================ */
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tema:hover { opacity: 1; transform: translateY(-1px); }
.tema svg { width: 19px; height: 19px; }
/* En oscuro se ofrece el sol (ir a claro); en claro, la luna. */
.tema__luna { display: none; }
[data-tema="claro"] .tema__sol { display: none; }
[data-tema="claro"] .tema__luna { display: block; }

/* El pie es una superficie elevada: en claro conviene que se despegue del
   fondo con un tono más cálido, no con blanco puro. */
[data-tema="claro"] .pie,
[data-tema="claro"] .aval,
[data-tema="claro"] .tratamientos,
[data-tema="claro"] .ofertas { background: var(--piel); }
[data-tema="claro"] .ficha { background: var(--corteza); }
[data-tema="claro"] .ficha:hover { background: var(--piel); }
[data-tema="claro"] .onda,
[data-tema="claro"] .oferta,
[data-tema="claro"] .corte,
[data-tema="claro"] .mapa__aviso { background: var(--corteza); }
[data-tema="claro"] .mapa__aviso:hover { background: var(--piel); }

@media (prefers-reduced-motion: reduce) {
  .tema:hover { transform: none; }
}


/* ============================================================
   EL LÁSER ENCENDIDO
   La foto es un aparato apagado sobre una piedra. Encenderlo es lo que la
   convierte en una portada: sale del propio producto, no es un adorno pegado.
   Va con mezcla "screen", que SUMA luz sobre la foto en vez de taparla — un
   degradado normal ensuciaría el metal.
   ============================================================ */
.haz-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: encender 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
/* El cono que sale de la ventana del cabezal */
.haz-hero__cono {
  position: absolute;
  left: 41%;
  top: 40%;
  width: 17%;
  height: 42%;
  background: linear-gradient(196deg,
    color-mix(in srgb, var(--hero-acento) 55%, transparent) 0%,
    color-mix(in srgb, var(--hero-acento) 16%, transparent) 42%,
    transparent 76%);
  filter: blur(22px);
  transform: skewX(-13deg);
}
/* El charco de luz donde el haz toca la piedra */
.haz-hero__charco {
  position: absolute;
  left: 46%;
  top: 76%;
  width: 13%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--hero-acento) 60%, transparent) 0%,
    color-mix(in srgb, var(--hero-acento) 12%, transparent) 46%,
    transparent 72%);
  filter: blur(16px);
}
/* El brillo de la propia ventana emisora */
.haz-hero__foco {
  position: absolute;
  left: 47.5%;
  top: 41%;
  width: 7%;
  height: 20%;
  border-radius: 22%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--hero-acento) 85%, transparent) 0%,
    color-mix(in srgb, var(--hero-acento) 22%, transparent) 52%,
    transparent 78%);
  filter: blur(9px);
}

@keyframes encender {
  0% { opacity: 0; }
  55% { opacity: 1; }
  70% { opacity: 0.72; }
  100% { opacity: 1; }
}

/* En móvil la foto se recoloca, así que el haz se apaga: encajarlo otra vez
   por porcentajes sería adivinar, y un haz descuadrado es peor que ninguno. */
@media (max-width: 860px) {
  .haz-hero { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .haz-hero { animation: none; opacity: 1; }
}


/* ============================================================
   CABECERA EN MÓVIL
   El botón de tema se montaba encima de «SOFÍA PC»: en 390 px no caben el
   logotipo, el nombre, el interruptor y el botón de cita a tamaño de
   escritorio. Se encogen las cuatro piezas en vez de quitar ninguna.
   ============================================================ */
@media (max-width: 560px) {
  .cabecera { padding: 0.9rem 1rem; gap: 0.6rem; }
  .marca { gap: 0.55rem; }
  .marca__logo { height: 24px; }
  .marca__texto { padding-left: 0.55rem; }
  .marca__nombre { font-size: 0.75rem; letter-spacing: 0.13em; }
  .cabecera__acciones { gap: 0.45rem; }
  .tema { width: 38px; height: 38px; }
  .tema svg { width: 16px; height: 16px; }
  .cabecera .boton {
    min-height: 38px;
    padding: 0 0.95rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
}
/* Por debajo de 380 px el botón de cita sobra en la barra: ya está el de
   WhatsApp flotando y otro dentro del hero. */
@media (max-width: 379px) {
  .cabecera .boton { display: none; }
}