/* ============================================================
   EMEYA FISIOTERAPIA — Collado Villalba

   QUÉ SOSTIENE ESTA PÁGINA
   No hay foto que la sostenga: de sus 26 imágenes casi todas llevan su
   marco de marca, son selfies con mascarilla o son de banco. Así que la
   sostiene un OBJETO CONSTRUIDO: un mapa del cuerpo con el que el
   visitante señala dónde le duele y la página le contesta. Es lo único
   que ninguna otra clínica de Villalba tiene, y no finge nada.

   COLOR: verde profundo DOMINANTE (la portada entera) y lima AFILADO,
   que solo aparece en el punto activo y en el botón que hay que pulsar.
   Nada de verde repartido por todas partes, que es lo que hacía que
   pareciera una plantilla de clínica.

   TIPOS: Bricolage Grotesque en los titulares (tiene eje óptico y unas
   terminaciones algo torcidas: se nota que está elegida) y Manrope en el
   cuerpo, que es el que se lee.
   ============================================================ */

@font-face {
  font-family: 'Bricolage';
  src: url('fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --fondo: #f4f6f0;
  --panel: #ffffff;
  --panel2: #e9eee1;
  --tinta: #142018;
  --gris: #5c6a5e;
  --linea: rgba(20, 32, 24, 0.14);
  --sombra: rgba(20, 45, 25, 0.18);

  /* el verde profundo: es el color dominante, no un adorno */
  --hondo: #0d1c14;
  --hondo2: #16301f;
  --sobre-hondo: #eef3ea;
  --gris-hondo: #93a894;

  /* los dos acentos: uno pinta, el otro se lee */
  --lima: #7fc41b;          /* superficies y trazos */
  --lima-viva: #a3e043;     /* solo sobre el verde profundo */
  --accion: #3f7a0b;        /* texto y bordes sobre claro (5,2:1) */

  --logo-fondo: transparent;
  --logo-pad: 0;

  --display: 'Bricolage', 'Manrope', system-ui, sans-serif;
  --texto: 'Manrope', system-ui, -apple-system, sans-serif;
  --ancho: 1280px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tema="oscuro"] {
  --fondo: #0d1610;
  --panel: #141f17;
  --panel2: #1b291e;
  --tinta: #e8efe5;
  --gris: #93a291;
  --linea: rgba(232, 239, 229, 0.15);
  --sombra: rgba(0, 0, 0, 0.6);
  --hondo: #0a140e;
  --hondo2: #12241a;
  --lima: #8fd137;
  --accion: #9ad63a;
  --logo-fondo: #edf1e8;
  --logo-pad: 5px 9px;
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accion); outline-offset: 3px; border-radius: 4px; }

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

/* Salto al contenido: fuera de pantalla hasta que se tabula. Antes esto iba
   con onfocus/onblur en el HTML; en CSS no depende de que el JS cargue. */
.salto {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem;
  background: var(--tinta); color: var(--fondo); border-radius: 0 0 12px 0;
  font-weight: 800; text-decoration: none;
}
.salto:focus { left: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.028em; margin: 0;
  font-variation-settings: 'opsz' 40;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-bottom: 1rem; }
p { margin: 0 0 1rem; }
.guia { color: var(--gris); font-size: 1.05rem; max-width: 52ch; }

/* rótulo: una raya y una palabra. Sin la gotita de antes, que era ruido. */
.rotulo {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accion);
  margin: 0 0 1rem; display: flex; align-items: center; gap: 0.7rem;
}
.rotulo::before {
  content: ''; width: 26px; height: 2px; flex: none;
  background: currentColor; border-radius: 2px;
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  background: var(--tinta); color: var(--fondo);
  font-family: var(--texto); font-size: 0.94rem; font-weight: 800;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.22s var(--curva), box-shadow 0.22s var(--curva),
              background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px var(--sombra); }
.boton svg { width: 19px; height: 19px; flex: none; }

/* el que hay que pulsar: lima. Es el único sitio donde el lima manda. */
.boton--lima { background: var(--lima); color: #10240a; border-color: var(--lima); }
.boton--hueco { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--hueco:hover { border-color: var(--accion); box-shadow: none; }

/* sobre el verde profundo cambian las reglas */
.enfondo .boton { background: var(--lima-viva); color: #0c1c06; }
.enfondo .boton--hueco {
  background: transparent; color: var(--sobre-hondo);
  border-color: rgba(238, 243, 234, 0.28);
}
.enfondo .boton--hueco:hover { border-color: var(--lima-viva); color: var(--lima-viva); }
.enfondo :focus-visible { outline-color: var(--lima-viva); }

/* ============================================================
   CABECERA — separada de la portada, no encima de ella
   ============================================================ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem clamp(1rem, 3vw, 2.2rem);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s ease;
}
.cabecera--fija { border-bottom-color: var(--linea); }
.marca { display: flex; align-items: center; text-decoration: none; }
/* Su logotipo es un dibujo a línea negra: en negativo se pierde. Se usa el
   mismo en los dos modos y en oscuro se apoya en una pastilla clara. */
.marca picture {
  display: block; background: var(--logo-fondo); padding: var(--logo-pad);
  border-radius: 12px; transition: background 0.25s ease;
}
.marca img { height: 58px; width: auto; }
.cabecera__der { display: flex; align-items: center; gap: 0.5rem; }
.cabecera .boton { min-height: 46px; font-size: 0.88rem; padding: 0 1.2rem; }
.tema {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; flex: none;
  border: 1px solid var(--linea); border-radius: 50%;
  background: transparent; color: var(--tinta); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tema:hover { border-color: var(--accion); color: var(--accion); }
.tema svg { width: 18px; height: 18px; }
.tema__sol { display: none; }
[data-tema="oscuro"] .tema__sol { display: block; }
[data-tema="oscuro"] .tema__luna { display: none; }
@media (max-width: 620px) { .cabecera__wa { display: none; } }

/* ============================================================
   PORTADA — panel verde profundo, y dentro el mapa del cuerpo
   ============================================================ */
.portada {
  background: var(--hondo); color: var(--sobre-hondo);
  margin: 0 clamp(0.5rem, 1.6vw, 1.2rem) clamp(2rem, 5vw, 4rem);
  border-radius: clamp(20px, 2.4vw, 34px);
  padding: clamp(2rem, 4.6vw, 4.2rem) clamp(1.2rem, 3.4vw, 3.4rem);
  overflow: hidden; position: relative;
}
/* un halo muy tenue detrás de la figura: da profundidad sin poner un velo
   por encima de ningún texto */
.portada::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 76% 44%,
              rgba(127, 196, 27, 0.13), transparent 68%);
}
.portada__rejilla {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.12fr;
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center;
  max-width: var(--ancho); margin-inline: auto;
}
.portada h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-variation-settings: 'opsz' 96;
  margin-bottom: 1.1rem;
}
.portada h1 em { font-style: normal; color: var(--lima-viva); }
.portada .rotulo { color: var(--lima-viva); }
.portada__bajada {
  color: var(--gris-hondo); font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  max-width: 40ch; margin-bottom: 1.7rem;
}
.portada__acciones { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* la nota: ya no es una caja aparte, es una línea de crédito bajo el titular */
.nota {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(238, 243, 234, 0.16);
}
.nota__cifra {
  font-family: var(--display); font-size: 2.9rem; font-weight: 700;
  line-height: 1; letter-spacing: -0.045em; color: var(--lima-viva);
  font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 96;
}
.nota__estrellas { display: flex; gap: 0.18rem; }
.nota__estrellas svg { width: 17px; height: 17px; color: var(--lima-viva); }
.nota__pie { font-size: 0.92rem; color: var(--gris-hondo); margin: 0; max-width: 32ch; }
.nota__pie b { color: var(--sobre-hondo); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- EL MAPA DEL CUERPO ---------- */
.mapa-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 2.6vw, 2.6rem); align-items: center; }
.figura { display: grid; place-items: center; }
/* La figura se mide por ALTO, no por ancho: con width la relación 240x620 del
   viewBox estiraba la portada hasta 1.100 px de alto y el texto se quedaba
   solo en su mitad. Atada al alto, la portada cabe en pantalla. */
.figura svg {
  height: clamp(360px, 54vh, 500px); width: auto; max-width: 100%;
  overflow: visible;
}
.figura .silueta, .figura .puntos { will-change: transform; }
/* La opacidad va en el GRUPO, no en cada pieza. Si cada forma fuera
   translúcida por su cuenta, en cada solape (hombro con torso, muslo con
   cadera) saldría una banda más clara justo donde se cruzan: la figura
   parecería despiezada. Con la opacidad en el grupo se compone primero y se
   atenúa después, así que los empalmes no se ven. */
.figura .silueta { opacity: 0.15; }
.figura .relleno { fill: var(--sobre-hondo); }
.figura .trazo {
  fill: none; stroke: var(--sobre-hondo);
  stroke-linecap: round; stroke-linejoin: round;
}

.punto { cursor: pointer; }
.punto__halo { fill: transparent; }          /* zona pulsable de 60 px */
.punto__aro {
  fill: none; stroke: var(--lima-viva); stroke-width: 1.6; opacity: 0.45;
  transition: opacity 0.3s ease, stroke-width 0.3s ease;
}
/* El latido va en un circulo APARTE. Antes lo llevaba el aro, y como la
   animacion lo escala hasta desaparecer, el punto seleccionado pasaba la
   mayor parte del ciclo siendo una bolita suelta al lado del cuerpo — que es
   justo lo que estaba mal en la version anterior de la web. */
.punto__pulso {
  fill: none; stroke: var(--lima-viva); stroke-width: 1.6; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.punto__eje {
  fill: rgba(238, 243, 234, 0.55);
  transform-box: fill-box; transform-origin: center;
  transition: fill 0.3s ease, transform 0.3s var(--curva);
}
.punto:hover .punto__eje, .punto:focus-visible .punto__eje { fill: var(--lima-viva); }
.punto--on .punto__eje { fill: var(--lima-viva); transform: scale(1.35); }
.punto--on .punto__aro { opacity: 1; stroke-width: 2.2; }
.punto--on .punto__pulso { animation: latido 2.6s ease-out infinite; }
@keyframes latido {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ---------- las zonas, en acordeón ---------- */
.zonas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; max-width: 30rem; }
.zona { border-bottom: 1px solid rgba(238, 243, 234, 0.13); }
.zona:last-child { border-bottom: 0; }
.chip {
  width: 100%; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.72rem 0.2rem; min-height: 48px;
  border: 0; background: transparent; color: var(--sobre-hondo);
  font-family: var(--texto); font-size: 1.02rem; font-weight: 800;
  text-align: left; cursor: pointer;
  transition: color 0.2s ease, padding-left 0.25s var(--curva);
}
.chip::before {
  content: ''; width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: rgba(238, 243, 234, 0.28);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.chip:hover { color: var(--lima-viva); }
.chip--on { color: var(--lima-viva); padding-left: 0.45rem; }
.chip--on::before { background: var(--lima-viva); box-shadow: 0 0 0 4px rgba(163, 224, 67, 0.18); }

/* Se despliega con grid-template-rows 0fr → 1fr: se puede animar y el texto
   sigue en el HTML (que es lo que lee Google). visibility lo saca del
   tabulador cuando está plegado. */
.chip__cuerpo {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.38s var(--curva), visibility 0.38s;
}
.zona--on .chip__cuerpo { grid-template-rows: 1fr; visibility: visible; }
.chip__cuerpo > div { overflow: hidden; }
.chip__cuerpo p { color: var(--gris-hondo); font-size: 0.96rem; margin: 0 0 1rem; padding-left: 1.65rem; }

@media (max-width: 1080px) {
  .portada__rejilla { grid-template-columns: 1fr; }
  .mapa-cuerpo { grid-template-columns: minmax(0, 260px) 1fr; }
}
@media (max-width: 620px) {
  .mapa-cuerpo { grid-template-columns: 1fr; gap: 1.4rem; }
  .figura svg { height: clamp(300px, 40vh, 360px); }
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.servicios { padding-block: clamp(2.6rem, 6vw, 5rem); }
/* --cols lo calcula construir.py con el número de servicios, para que el
   último renglón nunca quede a medias (6 → 3+3, no 4+2). Con auto-fit el
   navegador metía las que cabían y dejaba dos sueltas con un hueco al lado. */
.tarjetas { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px; margin-top: 2.4rem;
  background: var(--linea); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
@media (max-width: 900px) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tarjetas { grid-template-columns: 1fr; } }
.tarjeta {
  background: var(--panel); padding: 1.9rem 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: background 0.25s ease;
}
.tarjeta:hover { background: var(--panel2); }
.tarjeta__n {
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accion); margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.tarjeta h3 { font-size: 1.28rem; }
.tarjeta p { font-size: 0.95rem; color: var(--gris); margin: 0; }

/* ============================================================
   EL CENTRO
   ============================================================ */
.centro { background: var(--panel2); border-block: 1px solid var(--linea); }
/* La foto es su FACHADA con el rótulo: se saca del marco de marca de su
   Instagram. Manda que se vea ENTERA — el rótulo cortado no sirve de nada —
   así que el hueco lleva su proporción exacta y `cover` no recorta ni un
   píxel, ni en escritorio ni en móvil. */
.centro__rejilla { display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; }
.centro__foto { aspect-ratio: 1400 / 1456; }
/* el <picture> es inline por defecto y no hereda la altura del hueco: sin esto
   el height:100% del img no tiene contra qué resolverse */
.centro__foto picture { display: block; width: 100%; height: 100%; }
.centro__foto img { width: 100%; height: 100%; object-fit: cover; }
.centro__texto { padding: clamp(2.2rem, 5vw, 4.2rem); }
@media (max-width: 940px) {
  .centro__rejilla { grid-template-columns: 1fr; }
  /* en móvil NO se toca la proporción: recortarla se comería el rótulo.
     Tampoco max-height, que en una pantalla baja volvería a recortar. */
}
.equipo { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.4rem; }
.equipo__n {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--lima); color: #10240a;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
}


/* Cuatro datos prácticos al lado de la foto. La columna de texto se quedaba
   con doscientos píxeles de contenido contra setecientos de foto y la sección
   parecía a medio hacer: el hueco en blanco no es aire, es un descuido. */
.datos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.6rem; margin: 2.2rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
@media (max-width: 520px) { .datos { grid-template-columns: 1fr; gap: 1rem; } }
.datos dt {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accion); margin-bottom: 0.25rem;
}
.datos dd { margin: 0; font-size: 0.95rem; color: var(--gris); line-height: 1.5; }

/* ============================================================
   RESERVAR — lo que una web hace y un teléfono no
   ============================================================ */
.reservar { padding-block: clamp(2.6rem, 6vw, 5rem); }
.reservar__caja {
  background: var(--hondo); color: var(--sobre-hondo);
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(2rem, 4.4vw, 3.6rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}
@media (max-width: 860px) { .reservar__caja { grid-template-columns: 1fr; } }
.reservar__caja h2 { color: var(--sobre-hondo); }
.reservar .rotulo { color: var(--lima-viva); }
.reservar__guia { color: var(--gris-hondo); font-size: 1.05rem; max-width: 42ch; margin: 0; }
.vias { display: grid; gap: 0.7rem; }
.via {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.3rem; min-height: 74px;
  background: rgba(238, 243, 234, 0.06); border: 1px solid rgba(238, 243, 234, 0.12);
  border-radius: 14px; text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--curva);
}
.via:hover { background: rgba(238, 243, 234, 0.1); border-color: var(--lima-viva); transform: translateX(4px); }
.via svg { width: 24px; height: 24px; flex: none; color: var(--lima-viva); }
.via__t { display: block; font-weight: 800; font-size: 1.02rem; }
.via__d { display: block; font-size: 0.87rem; color: var(--gris-hondo); }
.via__ir { margin-left: auto; color: var(--lima-viva); font-size: 1.3rem; line-height: 1; }
.via--fuerte { background: var(--lima-viva); border-color: var(--lima-viva); color: #0c1c06; }
.via--fuerte svg, .via--fuerte .via__ir { color: #0c1c06; }
.via--fuerte .via__d { color: rgba(12, 28, 6, 0.72); }
.via--fuerte:hover { background: #b2ec55; border-color: #b2ec55; }

/* ============================================================
   VISITA
   ============================================================ */
.visita { padding-block: clamp(2.6rem, 6vw, 5rem); }
.visita__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 940px) { .visita__rejilla { grid-template-columns: 1fr; } }
.horario { border-collapse: collapse; width: 100%; max-width: 26rem; margin-top: 1.3rem; }
.horario th { text-align: left; font-weight: 500; padding: 0.52rem 0; border-bottom: 1px solid var(--linea); }
.horario td { text-align: right; padding: 0.52rem 0; border-bottom: 1px solid var(--linea); font-weight: 800; font-variant-numeric: tabular-nums; }
.horario tr.cerrado th, .horario tr.cerrado td { color: var(--gris); font-weight: 500; }
.ficha { display: grid; gap: 1.1rem; margin: 1.4rem 0 0; }
.ficha > div { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); margin-bottom: 0.2rem; }
.ficha dd { margin: 0; font-size: 1.08rem; }
.ficha dd a { text-decoration: none; border-bottom: 2px solid var(--linea); }
.ficha dd a:hover { border-color: var(--accion); color: var(--accion); }
.ficha dd small { display: block; color: var(--gris); font-size: 0.88rem; }
.mapa { min-height: 320px; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; background: var(--panel); }
.mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }
.mapa__aviso {
  width: 100%; min-height: 320px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 2rem; border: 0; background: var(--panel);
  font-family: var(--texto); font-size: 0.9rem; color: var(--gris);
  text-align: center; cursor: pointer; transition: background 0.25s ease;
}
.mapa__aviso:hover { background: var(--panel2); }
.mapa__aviso b { font-size: 1.12rem; font-weight: 800; color: var(--tinta); }
.mapa__aviso svg { width: 28px; height: 28px; color: var(--accion); }

/* ============================================================
   CIERRE Y PIE
   ============================================================ */
.cierre { padding-block: clamp(3rem, 6vw, 4.6rem); text-align: center; }
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre .guia { margin: 1rem auto 1.7rem; }
.cierre__acciones { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

.pie { padding-block: 2rem 1.5rem; border-top: 1px solid var(--linea); }
.pie__rejilla { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.pie__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie__legal a { font-size: 0.85rem; color: var(--gris); text-decoration: none; display: inline-flex; align-items: center; min-height: 26px; }
.pie__legal a:hover { color: var(--accion); }
.pie__nota { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linea); font-size: 0.84rem; color: var(--gris); }

.wasap {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #05300f;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35); transition: transform 0.2s var(--curva);
}
.wasap:hover { transform: scale(1.07); }
.wasap svg { width: 28px; height: 28px; }

.revela {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.revela.visible { opacity: 1; transform: none; }

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

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .cabecera { padding: 0.5rem 0.9rem; }
  .marca img { height: 48px; }
  .rotulo { font-size: 0.76rem; }
  .ficha dt, .datos dt, .pie__legal a, .pie__nota { font-size: 0.85rem; }
  .tarjeta p, .chip__cuerpo p, .nota__pie, .via__d { font-size: 0.95rem; }
  .nota { gap: 0.7rem; }
  .nota__cifra { font-size: 2.4rem; }
}