/* Style Center · B · Alta costura capilar */

:root {
  --color-papel: #F7F7F5;
  --color-tinta: #161616;
  --color-carbon: #0E1217;
  --color-estudio: #BFB7AF;
  --color-fondo-foto: #C8BEB6;
  --color-fondo-portada: #0C1015;
  --color-cereza: #C8243A;
  --color-cereza-oscuro: #A81D31;
  --color-grafito: #55524E;
  --color-suave: #E4E1DC;
  --color-tenue: #BDB9B3;

  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-texto: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-h1: clamp(3rem, 1.6rem + 5.4vw, 6.25rem);
  --t-h2: clamp(2.5rem, 1.7rem + 3vw, 4.25rem);
  --t-cuerpo: 1.0625rem;

  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-5: 3rem;
  --ancho-max: 1600px;
  --pad-x: max(4vw, calc((100% - var(--ancho-max)) / 2));
  --sec-y: clamp(2.75rem, 2rem + 3.2vw, 5rem);
  --alto-cabecera: 64px;

  --radio-boton: 2px;
  --foco: var(--color-tinta);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-portada: 700ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--alto-cabecera);
}

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

body {
  margin: 0;
  background: var(--color-papel);
  color: var(--color-tinta);
  font-family: var(--font-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.02; }
h2 { font-size: var(--t-h2); line-height: 1.05; font-weight: 600; }

p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: var(--esp-2);
  top: -4rem;
  z-index: 60;
  padding: 0.75rem 1rem;
  background: var(--color-tinta);
  color: var(--color-papel);
}
.salto:focus { top: var(--esp-1); outline-color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  font: 500 1rem/1 var(--font-texto);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn--reservar {
  background: var(--color-cereza);
  color: #fff;
}
.btn--reservar:hover { background: var(--color-cereza-oscuro); }
.btn--reservar:active { background: #8F1829; }
.btn--fantasma {
  border-color: currentColor;
  color: var(--color-tinta);
  background: transparent;
}
.btn--fantasma:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.btn--fantasma:active { background: color-mix(in srgb, currentColor 24%, transparent); }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* ---------- Cabecera fija ---------- */
.cabecera {
  --cab-fg: var(--color-tinta);
  --cab-bg: var(--color-papel);
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  height: var(--alto-cabecera);
  margin-bottom: calc(var(--alto-cabecera) * -1);
  padding-inline: var(--pad-x);
  background: var(--cab-bg);
  color: var(--cab-fg);
  transition: background-color 350ms ease, color 350ms ease, box-shadow 350ms ease;
}
.js .cabecera:not(.is-clara) {
  --cab-fg: #fff;
  --cab-bg: linear-gradient(rgba(14, 18, 23, 0.72), rgba(14, 18, 23, 0));
  --foco: #fff;
}
.cabecera.is-clara { box-shadow: 0 8px 28px rgba(22, 22, 22, 0.09); }
.cabecera .btn--fantasma { color: var(--cab-fg); }

/* Sin JS la cabecera es clara y ocupa su sitio */
html:not(.js) .cabecera { margin-bottom: 0; box-shadow: 0 8px 28px rgba(22, 22, 22, 0.09); }

.marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 12;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.5rem;
}

.menu { display: none; }
.menu a {
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 250ms var(--ease);
}
.menu a:hover { background-size: 100% 1px; }

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn--llamar { padding: 0; width: 44px; }
.btn--llamar .btn-texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

@media (min-width: 900px) {
  .marca { font-size: 1.625rem; }
  .menu {
    display: flex;
    gap: var(--esp-4);
  }
  .btn--llamar { width: auto; padding: 0 1.4rem; }
  .btn--llamar .btn-texto {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  }
  .cabecera-acciones { gap: 0.75rem; }
}

/* ---------- Portada: solo la imagen es fija; el texto sube con la página ---------- */
.portada {
  --foco: #fff;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100svh;
  padding: 0 var(--pad-x) max(7svh, 2.5rem);
  color: #fff;
}
/* Velo suave abajo para que el texto se lea sobre el pelo; sube con el texto */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 18, 23, 0.9) 0%, rgba(14, 18, 23, 0.55) 38%, rgba(14, 18, 23, 0) 66%);
  pointer-events: none;
}
.portada-foto {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-fondo-portada);
}
.portada-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 79% 40%;
  animation: descubrir var(--dur-portada) var(--ease) both;
}
.portada-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2);
}
.portada-texto p { max-width: 38ch; font-size: 1.125rem; line-height: 1.45; }
.portada-texto h1 { animation: aparecer 900ms 250ms var(--ease) both; }
.portada-texto .acciones { margin-top: var(--esp-1); }
.portada .btn--fantasma { color: #fff; }

/* Todo lo que sigue sube por encima de la imagen fija y la tapa */
.resto {
  position: relative;
  z-index: 1;
  background: var(--color-papel);
}

@keyframes descubrir { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 900px) {
  .portada {
    min-height: max(100svh, 34rem);
    padding-bottom: max(9svh, 3.5rem);
  }
  .portada::before { display: none; }
  .portada-foto img { object-position: 100% 35%; }
  .portada-texto {
    width: min(48vw, 46rem);
    gap: var(--esp-3);
  }
  .portada-texto h1 { font-size: clamp(3.25rem, 6.2vw, 6.5rem); }
  .portada-texto p { font-size: 1.3125rem; }
}

/* Portada en pantallas verticales: la MISMA imagen, escalada para que la figura entera
   (pelo y hombros: del 52,3 % al 88,8 % del ancho) ocupe ~85 % del ancho de pantalla y con
   su centro (70,6 % de la imagen) en el centro de la pantalla. Se ancla arriba y el borde
   inferior se funde con el fondo oscuro de la propia foto (#0C1015). */
@media (max-aspect-ratio: 3/4) {
  .portada-foto img {
    --ancho-img: min(233%, 112svh);
    width: var(--ancho-img);
    max-width: none;
    height: auto;
    margin-left: calc(50% - 0.706 * var(--ancho-img));
    object-fit: fill;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
  }
}

/* ---------- Secciones ---------- */
.seccion {
  padding: var(--sec-y) var(--pad-x);
}

.linea {
  max-width: 44ch;
  color: var(--color-grafito);
}

/* ---------- Antes y después: pantalla completa, de borde a borde ---------- */
.antes-despues {
  position: relative;
  background: var(--color-fondo-foto);
}
.comparador {
  /* Ajuste fino por capa: coronilla de las dos cabezas al ~12 % del alto y mismo tamaño de melena.
     --esc escala desde el borde inferior; --dy baja la foto (% de su alto); --dx la mueve en horizontal (% de su ancho). */
  --esc-antes: 1;
  --dy-antes: 0%;
  --esc-despues: 1.1736;
  --dy-despues: 9.52%;
  --dx-despues: -1.12%;
  --alto: 100svh;
  position: relative;
  width: 100%;
  height: var(--alto);
  min-height: 28rem;
  overflow: hidden;
  background: var(--color-fondo-foto);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.cmp-capa {
  position: absolute;
  inset: 0;
}
/* El "después" se recorta sobre el ancho total del contenedor */
.cmp-despues { clip-path: inset(0 0 0 var(--pos)); }

/* Colores muestreados en la columna del borde izquierdo y derecho de cada foto (13 alturas, de arriba abajo) */
.cmp-antes {
  --ar: 1 / 1;
  --esc: var(--esc-antes);
  --dy: var(--dy-antes);
  --fondo-sup: linear-gradient(to right, #C6BCB4, #B7B0A7);
  --g-izq: linear-gradient(to bottom, #C6BCB4 0%, #C8BEB6 8%, #C8BEB6 17%, #C9BFB7 25%, #C9BFB7 33%, #C9BFB7 42%, #C7BDB5 50%, #C6BCB4 58%, #C6BCB4 67%, #C2B8B0 75%, #C3B9B1 83%, #BDB5AD 92%, #BCB4AB 100%);
  --g-der: linear-gradient(to bottom, #B7B0A7 0%, #BBB3AA 8%, #BAB2A9 17%, #BAB2A9 25%, #B9B1A7 33%, #B6AFA4 42%, #B6AEA3 50%, #B3A99F 58%, #B1A79F 67%, #AEA59A 75%, #ABA197 83%, #A89E92 92%, #A4998D 100%);
}
.cmp-despues {
  --ar: 1792 / 2400;
  --esc: var(--esc-despues);
  --dy: var(--dy-despues);
  --dx: var(--dx-despues);
  --fondo-sup: linear-gradient(to right, #C4BDB5, #BDB6B0);
  --g-izq: linear-gradient(to bottom, #C4BDB5 0%, #C8C1BB 8%, #CBC4BD 17%, #CCC5BD 25%, #CCC5BE 33%, #CCC4BD 42%, #CAC3BC 50%, #C7C0B9 58%, #C5BEB7 67%, #C3BCB5 75%, #BFB8B2 83%, #BDB6AF 92%, #B7B1AA 100%);
  --g-der: linear-gradient(to bottom, #BDB6B0 0%, #C2BBB5 8%, #C3BDB7 17%, #C4BDB7 25%, #C1BBB5 33%, #C0B8B3 42%, #BBB3AD 50%, #B7AEA9 58%, #B0A7A2 67%, #ABA29D 75%, #A69D97 83%, #9C928B 92%, #978E86 100%);
}
.cmp-capa { background: var(--fondo-sup); }

/* La foto va anclada abajo y centrada; su fondo continúa a los lados con los colores del propio borde,
   dentro de la misma caja que se escala y se desplaza, así las filas siempre coinciden. */
.cmp-foto {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: var(--h, 100%);
  aspect-ratio: var(--ar);
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + var(--dx, 0%))) translateY(var(--dy)) scale(var(--esc));
}
.cmp-foto::before,
.cmp-foto::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  pointer-events: none;
}
.cmp-foto::before { right: calc(100% - 1px); background: var(--g-izq); }
.cmp-foto::after { left: calc(100% - 1px); background: var(--g-der); }
.cmp-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Pantallas verticales: la melena entera cabe en el ancho (solo se recorta fondo); el alto se ciñe a la foto */
@media (max-aspect-ratio: 3/4) {
  .comparador {
    --alto: min(100svh, 178vw);
  }
  .cmp-foto { --h: min(100%, 148vw); }
  .cmp-img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%);
  }
}

.cmp-etiqueta {
  position: absolute;
  top: calc(var(--alto-cabecera) + var(--esp-2));
  z-index: 2;
  padding: 0.35rem 0.8rem;
  background: var(--color-papel);
  color: var(--color-tinta);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  pointer-events: none;
}
.cmp-etiqueta--antes { left: var(--pad-x); }
.cmp-etiqueta--despues { right: var(--pad-x); }

.cmp-tirador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgba(22, 22, 22, 0.35);
  pointer-events: none;
}
.cmp-circulo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  color: var(--color-tinta);
  box-shadow: 0 4px 20px rgba(22, 22, 22, 0.28);
}
.cmp-circulo .icono { width: 20px; height: 20px; margin-inline: -3px; }

.cmp-rango {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.cmp-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100vh; }
.cmp-rango::-moz-range-thumb { width: 1px; height: 100vh; border: 0; }
.js-cmp .cmp-rango { pointer-events: none; }
.comparador:has(.cmp-rango:focus-visible) .cmp-circulo {
  outline: 3px solid var(--color-tinta);
  outline-offset: 3px;
}

/* ---------- Servicios ---------- */
.servicios {
  display: grid;
  gap: var(--esp-4);
}
.servicios-cabecera { display: block; }

.servicios-lista {
  display: grid;
  gap: var(--esp-4);
  align-items: start;
}
.grupo h3 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-grafito);
}
.columna { display: grid; gap: var(--esp-4); align-content: start; }
.grupo li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--esp-3);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-suave);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.3;
}
.s-nombre { grid-column: 1; min-width: 0; text-wrap: pretty; }
.s-precio {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.servicios-pie { display: flex; }

@media (min-width: 900px) {
  .servicios-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 6vw, 6rem);
    row-gap: var(--esp-4);
  }
}

/* ---------- Francesc: foto grande con aire a la izquierda y abajo ---------- */
.francesc {
  display: grid;
  background: var(--color-papel);
}
.francesc-foto {
  position: relative;
  margin: 0 var(--pad-x) var(--pad-x);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-carbon);
}
.francesc-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
.francesc-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--sec-y) var(--pad-x) var(--sec-y);
}
.francesc-texto > * { width: min(100%, 36rem); }
.francesc-texto h2 { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); }
.francesc-texto .rol { font-weight: 600; font-size: 1.1875rem; color: var(--color-grafito); }
.francesc-texto .cuerpo {
  max-width: 36rem;
  margin-top: var(--esp-1);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .francesc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: min(100svh, 62rem);
  }
  .francesc-foto {
    margin: 0 0 var(--pad-x) var(--pad-x);
    aspect-ratio: auto;
  }
  .francesc-texto {
    /* El texto se centra respecto a la foto: la foto deja un margen inferior de --pad-x, el texto lo compensa abajo */
    padding: var(--sec-y) clamp(2.5rem, 5vw, 6rem) calc(var(--sec-y) + var(--pad-x));
  }
}

/* ---------- Reseñas (formato reseña de Google) ---------- */
.resenas {
  --foco: #fff;
  background: var(--color-tinta);
  color: var(--color-papel);
  padding: var(--sec-y) var(--pad-x);
}
.resenas-interior {
  display: grid;
  gap: var(--esp-4);
}
.resenas-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-5);
}
.resenas h2 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: normal;
}
.nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-4);
}
.nota-detalle {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nota-detalle p { font-size: 1.0625rem; line-height: 1.3; color: var(--color-tenue); }
.enlace-resenas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.enlace-resenas:hover { text-decoration-thickness: 2px; }
.estrellas { display: flex; gap: 2px; }
.estrellas .icono {
  width: 20px;
  height: 20px;
  fill: #F5A800;
  stroke: none;
}
.citas {
  display: grid;
  gap: var(--esp-2);
}
.cita {
  margin: 0;
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  background: #fff;
  color: var(--color-tinta);
  border-radius: 4px;
}
.cita blockquote { margin: 0; flex: 1; }
.cita p {
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.cita figcaption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--color-grafito);
}
.marca-g { width: 18px; height: 18px; flex: none; }
@media (min-width: 640px) {
  .citas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
}
@media (min-width: 1200px) {
  .citas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cita { padding: var(--esp-4) var(--esp-3); }
}

/* ---------- Ubicación ---------- */
.ancla {
  position: absolute;
  top: 0;
}
.ubicacion {
  position: relative;
  display: grid;
  gap: var(--esp-4);
}
.ubicacion-texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  align-self: center;
}

.horario {
  display: grid;
  gap: 0.15rem;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--color-grafito);
}
.horario .es-hoy { color: var(--color-tinta); font-weight: 600; }

.mapa {
  position: relative;
  height: 340px;
  background: var(--color-suave);
}
.mapa iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 900px) {
  .ubicacion {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }
  .mapa { height: auto; min-height: clamp(26rem, 42vw, 36rem); }
}

/* ---------- Pie ---------- */
.pie {
  --foco: #fff;
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--pad-x) var(--esp-3);
  background: var(--color-tinta);
  color: var(--color-papel);
  font-size: 1.0625rem;
}
.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 0.22em;
}
.pie-interior {
  display: grid;
  gap: var(--esp-4);
}
.pie-marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 12;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
.pie-datos { display: grid; align-content: start; gap: 0; }
.pie-datos a { text-decoration-color: rgba(247, 247, 245, 0.35); }
.pie-datos a:hover { text-decoration-color: currentColor; }
.pie-redes { display: flex; align-content: start; gap: var(--esp-2); }
.pie-redes a {
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(247, 247, 245, 0.3);
  border-radius: 999px;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.pie-redes a:hover { background: var(--color-papel); color: var(--color-tinta); border-color: var(--color-papel); }
.pie-redes .icono { width: 22px; height: 22px; }

.pie-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  margin-top: var(--esp-4);
  padding-top: var(--esp-2);
  border-top: 1px solid rgba(247, 247, 245, 0.14);
  font-size: 0.9375rem;
  color: var(--color-tenue);
}
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--esp-3); }
.pie-legal a { text-decoration-color: rgba(247, 247, 245, 0.35); }
.pie-legal a:hover { color: var(--color-papel); text-decoration-color: currentColor; }

@media (min-width: 900px) {
  .pie-interior {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: var(--esp-5);
    align-items: start;
  }
  .pie-redes { justify-content: flex-end; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}