/* ==========================================================================
   Sistema visual — cambiar colores y tipografía solo acá
   ========================================================================== */
:root {
  /* Paleta A (Stitch) */
  --primary: #4A3528;    /* texto y botones */
  --secondary: #988B7C;  /* solo tamaños grandes, números y líneas (3.1:1) */
  --tertiary: #1D2B44;   /* botones, acentos y bloque de turno */
  --fondo: #DED8D1;      /* fondo */
  --neutral: #F9F8F5;    /* tarjetas y texto sobre oscuro */
  --white: #FFFFFF;

  /* Roles */
  --bg: var(--fondo);
  --surface: var(--neutral);
  --surface-2: color-mix(in srgb, var(--secondary) 16%, var(--neutral));
  --text: var(--primary);
  --line: color-mix(in srgb, var(--secondary) 35%, transparent);
  --acento: var(--tertiary);
  --btn-bg: var(--tertiary);
  --btn-bg-hover: var(--primary);
  --btn-text: var(--neutral);
  --foto-fondo: var(--surface-2); /* detrás de las fotos mientras cargan */
  --sombra: 0 1px 4px color-mix(in srgb, var(--tertiary) 18%, transparent);

  /* Tipografía: DM Sans (variable, ejes wght y opsz) y DM Serif Display
     para los títulos principales */
  --font: "DM Sans", system-ui, sans-serif;
  --font-titulos: "DM Serif Display", Georgia, serif;
  --fs-display: clamp(2.125rem, 13vw - 0.25rem, 4.5rem); /* mobile: "en buenas manos." en un renglón */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  /* Espacio */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1320px;
  --header-h: 4rem;
  --radius: clamp(1rem, 1.6vw, 1.5rem);
}

/* Desktop: el título ocupa media pantalla; crece con el ancho para que
   "en buenas manos." siga entrando en un renglón */
@media (min-width: 900px) {
  :root { --fs-display: clamp(3.25rem, 5.8vw, 5rem); }
}

@media (min-width: 1024px) {
  :root { --header-h: 5rem; }
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-abierto { overflow: hidden; }

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

a { color: inherit; }

h1, h2, h3, p { margin: 0; }

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

.contenedor {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Botón
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; /* entre el ícono y el texto, si lo tiene */
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center; /* si el texto no entra y baja de renglón */
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Pantallas muy angostas (≤ 359px): menos aire a los costados para que
   "Escribime por WhatsApp" entre en un renglón en el bloque azul */
@media (max-width: 359px) {
  .boton { padding-inline: 1rem; }
}

.boton:hover,
.boton:active { background: var(--btn-bg-hover); }

/* Botón sobre fondo oscuro */
.boton--claro {
  background: var(--neutral);
  color: var(--primary);
}

.boton--claro:hover,
.boton--claro:active { background: var(--white); }

.boton--chico {
  min-height: 2.5rem;
  padding: 0 1.125rem;
  font-size: 0.875rem;
}

/* ==========================================================================
   0. Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header.con-scroll { border-bottom-color: var(--line); }

.header__barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
}

/* Logo MO (assets/Logo mo.png redibujado en SVG, en index.html) */
.marca__logo {
  flex: none;
  width: 2.9rem;  /* proporción del logo: 1106 × 526 */
  height: 1.375rem;
  color: var(--primary);
}

.nav { display: none; }

.nav__lista {
  display: flex;
  gap: 1.25rem; /* 2rem desde 1280 px: con 5 links y el botón no entra a 1024 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__lista a {
  font-size: var(--fs-small);
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.2s ease;
}

.nav__lista a:hover { background-size: 100% 1px; }

.header__cta {
  display: none;
  flex: none;
  white-space: nowrap;
}

.boton-menu {
  min-height: 2.5rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
}

/* Menú mobile */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem var(--gutter) 2.5rem;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.menu[hidden] { display: none; }

.menu__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__lista a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
}

.menu .boton { width: 100%; }

@media (min-width: 720px) {
  .header__cta { display: inline-flex; }
}

@media (min-width: 1024px) {
  .nav { display: block; margin-right: 0.5rem; }
  .boton-menu, .menu { display: none; }
}

@media (min-width: 1280px) {
  .nav__lista { gap: 2rem; }
}

/* ==========================================================================
   1. Hero
   Mobile: título, foto, bajada, turno, lugares (la foto se ve al abrir).
   Desktop: encabezado, lugares y turno a la izquierda llenando el alto de la foto.
   ========================================================================== */
.hero {
  padding-top: clamp(2rem, 6vw, 3rem);
}

.hero__grilla {
  display: grid;
  grid-template-areas:
    "titulo"
    "foto"
    "subtitulo"
    "turno"
    "lugares";
  gap: 1rem;
}

/* Mobile: el encabezado se disuelve para que la foto quede entre título y bajada */
.hero__encabezado {
  grid-area: encabezado;
  display: contents;
}

.hero__titulo {
  grid-area: titulo;
  font-family: var(--font-titulos);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-box: trim-both cap alphabetic;
}

.hero__titulo span { display: block; }
.hero__titulo span + span { font-style: italic; }

.hero__subtitulo {
  grid-area: subtitulo;
  max-width: 34rem;
  margin-bottom: 1rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Card de turno: texto + botones, centrados */
.hero__turno {
  grid-area: turno;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
}

.hero__turno p {
  max-width: 26rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-wrap: balance;
}

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Si los tres botones no entran en una fila (celular, o la columna
   angosta del hero entre 900 y 1100 px), van apilados a ancho completo:
   nunca queda uno solo en un segundo renglón. Lo decide el ancho de la card. */
.hero__turno { container-type: inline-size; }

@container (max-width: 460px) {
  .hero__botones {
    flex-direction: column;
    align-self: stretch;
  }
}

/* Cards de consultorios */
.hero__lugares {
  grid-area: lugares;
  display: grid;
  gap: 1rem;
}

@media (min-width: 480px) {
  .hero__lugares { grid-template-columns: 1fr 1fr; }
}

.lugar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.125rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.lugar:hover { border-color: var(--primary); }

.lugar__frecuencia {
  padding-right: 1.5rem; /* lugar para la flecha */
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lugar__datos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  container-type: inline-size; /* para medir el nombre de la ciudad */
}

.lugar__ciudad {
  font-family: var(--font-titulos);
  /* Tope por ancho de la card: "Córdoba Capital" mide ~7,1 em y va en un renglón */
  font-size: min(clamp(1.5rem, 0.5rem + 2vw, 2.375rem), 13.5cqi);
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Flecha arriba a la derecha: la card abre Google Maps */
.lugar__flecha {
  position: absolute;
  top: clamp(1.125rem, 2vw, 1.5rem);
  right: clamp(1.125rem, 2vw, 1.5rem);
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease-in-out;
}

.lugar:hover .lugar__flecha { transform: translate(2px, -2px); }

.lugar__direccion {
  font-size: var(--fs-small);
  line-height: 1.35;
}

.hero__foto {
  grid-area: foto;
  position: relative;
  width: 100%;
  margin: 0.5rem 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--foto-fondo);
}

/* Celulares: título, foto y bajada llenan la primera pantalla y la card de
   turno queda justo debajo del borde. --resto (lo pone main.js): lo que
   ocupan header, título, bajada y espacios, menos 24 px de margen. La foto
   nunca queda más chica que su proporción 4:5 */
@media (max-width: 599px) {
  .hero__foto { min-height: calc(100svh - var(--resto, 100svh)); }
}

/* Tablet y ventanas medianas: la foto ocupa todo el ancho, alineada con
   el título y la bajada (centrada y angosta quedaba descolgada). Más
   apaisada para que no ocupe toda la pantalla de alto */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__foto {
    aspect-ratio: 3 / 2;
  }
  .hero .hero__foto img { object-position: 50% 45%; }
}

/* Absoluta: la foto no empuja el alto de la grilla, se estira a lo que ocupe el texto */
.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

@media (min-width: 900px) {
  /* El hero queda centrado en la pantalla completa, contando el header
     (mismo fondo, se lee como parte del espacio de arriba). Dos espacios
     flexibles: el de abajo suma el alto del header, así el contenido queda
     a la misma distancia del borde de arriba que del de abajo. Si la
     pantalla es baja, ese extra se achica primero; mínimo 1,5rem por lado. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--header-h));
    padding-block: 0;
  }

  .hero::before,
  .hero::after {
    content: "";
    min-height: 1.5rem;
  }

  .hero::before { flex: 1 1 0; }
  .hero::after { flex: 1 1 var(--header-h); }

  /* El alto lo marca el contenido de la columna de texto (la foto lo
     acompaña). Título y bajada van juntos arriba y los bloques quedan a la
     misma distancia entre sí */
  .hero__grilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "encabezado foto"
      "lugares    foto"
      "turno      foto";
    gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
  }

  .hero__encabezado {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1rem;
  }

  .hero__subtitulo { margin: 0; }

  /* Frecuencia arriba, ciudad y dirección abajo */
  .lugar { justify-content: space-between; }

  .hero__foto {
    max-width: none;
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
  }

  /* Mitad y mitad: la foto se agranda un poco dentro del marco para
     recortar arriba (los muebles) y abajo, y queda centrada en las caras
     de Milo y la paciente */
  .hero__foto img {
    object-position: 50% 60%;
    transform: scale(1.15);
    transform-origin: 75% 70%;
  }
}

/* Entrada del hero al cargar la página: el título sube desde su línea
   renglón por renglón (igual que los títulos de sección) y después
   aparecen la foto, la bajada, las cards de consultorios y la de turno.
   Una sola vez, ~1,7 s en total. */
@media (prefers-reduced-motion: no-preference) {
  .hero__titulo span {
    animation: titulo-sube 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both;
  }

  .hero__titulo span + span { animation-delay: 0.3s; }

  .hero__foto { animation: hero-aparece 1.2s ease-in-out 0.4s both; }
  .hero__subtitulo { animation: hero-sube 0.9s ease-in-out 0.6s both; }
  .hero__lugares { animation: hero-sube 0.9s ease-in-out 0.75s both; }
  .hero__turno { animation: hero-sube 0.9s ease-in-out 0.85s both; }
}

@keyframes hero-sube {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   Secciones (base común)
   ========================================================================== */
.seccion {
  padding-block: clamp(4rem, 10vw, 7.5rem);
}

.seccion__titulo {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-titulos);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  text-box: trim-both cap alphabetic;
}

/* Animaciones de scroll (títulos, tarjetas, timeline y bloque de turno):
   se revelan al bajar y, cuando terminan, main.js les pone .visto: sin
   animación quedan en su estado final y no se esconden al volver a subir.
   Curvas: ease-out (responden apenas se scrollea y frenan al final) o
   linear (los puntitos, parejos con el scroll). ease-in-out arranca lento
   y atado al scroll se siente como que el elemento se queda atrás. */
.visto { animation: none !important; }

/* Títulos de sección: suben desde detrás de una línea a medida que entran
   en pantalla. El recorte (clip-path) queda fijo en el lugar final del
   título mientras el texto sube, con aire arriba para las tildes y abajo
   para los trazos que bajan de la línea. Solo donde el navegador soporta
   animaciones ligadas al scroll; en el resto, títulos quietos. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .seccion__titulo,
    .turno__titulo {
      animation: titulo-sube ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

@keyframes titulo-sube {
  from {
    transform: translateY(calc(100% + 0.7em));
    clip-path: inset(calc(-100% - 1em) -0.15em calc(100% + 0.35em));
  }
  to {
    transform: none;
    clip-path: inset(-0.3em -0.15em -0.35em);
  }
}

/* Tarjetas de Tratamientos y Casos: aparecen en cascada, subiendo, a
   medida que entran en pantalla. Las que comparten fila arrancan un poco
   más tarde que la de su izquierda (--col), así se leen en orden.
   --recorrido: cuánto del paso por la pantalla dura cada una (más en
   mobile, donde las tarjetas son más bajas y van de a una). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tratamiento {
      animation: tarjeta-entra ease-out both;
      animation-timeline: view();
      animation-range: cover calc(var(--col, 0) * 8%) cover calc(var(--recorrido, 45%) + var(--col, 0) * 8%);
    }
  }
}

@media (min-width: 640px) {
  .tratamiento { --recorrido: 32%; }

  .tratamiento:nth-child(even) { --col: 1; }
}

@media (min-width: 1100px) {
  .tratamiento:nth-child(3) { --col: 2; }
  .tratamiento:nth-child(4) { --col: 3; }
}

@keyframes tarjeta-entra {
  from {
    opacity: 0;
    transform: translateY(3.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   2. Tratamientos
   Tarjetas sin imágenes ni íconos: número, título y subtítulo.
   Subgrid: el número y el bloque de texto comparten filas entre tarjetas,
   así los títulos arrancan a la misma altura aunque ocupen uno o dos
   renglones, y cada subtítulo va justo debajo de su título.
   ========================================================================== */
.tratamientos {
  display: grid;
  grid-auto-rows: auto auto;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tratamiento {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Número grande en Secondary: pasa contraste por tamaño */
.tratamiento__numero {
  margin-bottom: clamp(1.5rem, 4vw, 4.5rem);
  color: var(--secondary);
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.tratamiento__titulo {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.tratamiento__texto {
  max-width: 22rem;
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Mobile: número al costado del título para que las tarjetas sean más bajas */
@media (max-width: 639px) {
  /* 1fr: todas las tarjetas toman el alto de la más alta */
  .tratamientos { grid-auto-rows: 1fr; }

  .tratamiento {
    grid-row: auto;
    grid-template-columns: 3.5rem 1fr;
    grid-template-rows: auto;
    row-gap: 0.5rem;
  }

  .tratamiento__numero {
    margin-bottom: 0;
    font-size: 2rem;
  }

  .tratamiento__texto { margin-top: 0.5rem; }
}

@media (min-width: 640px) {
  .tratamientos { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .tratamientos { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   3. Cómo es tu primera consulta
   Camino de puntitos marrones: vertical en mobile, horizontal en desktop.
   Cada paso arranca con un punto grande con su número.
   Con el scroll, el recorrido se completa en cascada, igual que las
   tarjetas (ver la animación al final de esta sección).
   ========================================================================== */
.pasos {
  --hito: 1.875rem;    /* diámetro del punto grande */
  --punto: 14px;       /* separación entre puntitos */
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paso {
  position: relative;
  padding: 0 0 2.5rem calc(var(--hito) + 1rem);
}

.paso:last-child { padding-bottom: 0; }

/* Punto grande con el número del paso */
.paso__hito {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--hito);
  height: var(--hito);
  border-radius: 50%;
  background: var(--primary);
  color: var(--fondo);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Puntitos entre un paso y el siguiente */
.paso__camino {
  position: absolute;
  top: calc(var(--hito) + 0.5rem);
  bottom: 0.5rem;
  left: calc(var(--hito) / 2 - 3px);
  width: 6px;
  background: radial-gradient(circle, var(--primary) 1.75px, transparent 2.25px) 0 0 / 6px var(--punto) space;
}

/* En mobile el título va centrado con el punto grande */
.paso__titulo {
  display: flex;
  align-items: center;
  min-height: var(--hito);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.paso__texto {
  max-width: 30rem;
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  /* Subgrid: títulos y textos alineados entre pasos */
  .pasos {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto auto;
  }

  .paso {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: calc(var(--hito) + 1.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
  }

  /* Camino horizontal: del punto grande hasta el del paso siguiente */
  .paso__camino {
    top: calc(var(--hito) / 2 - 3px);
    bottom: auto;
    left: calc(var(--hito) + 0.5rem);
    right: 0.5rem;
    width: auto;
    height: 6px;
    background-size: var(--punto) 6px;
  }

  .paso__titulo {
    display: block;
    min-height: 0;
  }
}

/* Animación ligada al scroll, como las tarjetas.
   Mobile (vertical): cada paso se completa al cruzar una línea a 2/3 de
   la pantalla (el inset de abajo de la línea de tiempo): aparece el punto
   grande, suben título y texto, y los puntitos se llenan a medida que
   pasan por esa línea.
   Desktop (fila): los pasos entran en cascada, del 1 al 4 (--i), y los
   puntitos se completan entre un punto grande y el siguiente.
   Sin soporte o con movimiento reducido, todo visible desde el inicio. */
.paso:nth-child(1) { --i: 0; }
.paso:nth-child(2) { --i: 1; }
.paso:nth-child(3) { --i: 2; }
.paso:nth-child(4) { --i: 3; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .paso {
      view-timeline-name: --paso;
      view-timeline-inset: 0% 33%;
    }

    .paso__hito {
      animation: hito-aparece ease-out both;
      animation-timeline: --paso;
      animation-range: entry 0% entry 90px;
    }

    .paso__titulo,
    .paso__texto {
      animation: tarjeta-entra ease-out both;
      animation-timeline: --paso;
      animation-range: entry 0% entry 220px;
    }

    .paso__camino {
      animation: camino-baja linear both;
      animation-timeline: view(block 0% 33%);
      animation-range: entry 0% entry 100%;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .paso { view-timeline-inset: 0%; }

    .paso__hito {
      animation-range: cover calc(var(--i) * 12%) cover calc(var(--i) * 12% + 5%);
    }

    .paso__titulo,
    .paso__texto {
      animation-range: cover calc(var(--i) * 12%) cover calc(var(--i) * 12% + 22%);
    }

    .paso__camino {
      animation-name: camino-avanza;
      animation-timeline: --paso;
      animation-range: cover calc(var(--i) * 12% + 2%) cover calc(var(--i) * 12% + 12%);
    }
  }
}

/* El punto grande crece y después aparece su número */
@keyframes hito-aparece {
  from {
    color: transparent;
    transform: scale(0);
  }
  60% {
    color: transparent;
    transform: none;
  }
  to {
    color: var(--fondo);
    transform: none;
  }
}

@keyframes camino-baja {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}

@keyframes camino-avanza {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

/* ==========================================================================
   4. Sobre mí
   Mobile: título, foto, texto.
   Desktop: foto a la izquierda (al revés que el hero); título arriba y
   texto abajo, alineados con los bordes de la foto.
   ========================================================================== */
.sobre-mi {
  display: grid;
  grid-template-areas:
    "titulo"
    "foto"
    "texto";
}

.sobre-mi__titulo { grid-area: titulo; }

.sobre-mi__foto {
  grid-area: foto;
  margin: 0 0 2rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--foto-fondo);
}

.sobre-mi__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobre-mi__texto {
  grid-area: texto;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.sobre-mi__texto p + p { margin-top: 1em; }

.sobre-mi__texto strong { font-weight: 600; }

@media (min-width: 900px) {
  .sobre-mi {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "foto titulo"
      "foto texto";
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }

  .sobre-mi__foto { margin: 0; }

  /* Texto largo (4 párrafos): cuerpo más chico y renglón más ancho para
     que termine a la altura de la foto */
  .sobre-mi__texto {
    align-self: end;
    max-width: 40rem;
    font-size: 1.125rem;
    line-height: 1.55;
  }
}

/* ==========================================================================
   5. Casos
   Card: slider antes/después arriba y tags abajo.
   Las fotos arrancan tapadas por un velo marrón: al tocarlo se abre como
   un telón desde la línea divisoria y queda abierto.
   Slider: el después de fondo y el antes encima, recortado hasta --pos.
   Se mueve arrastrando (mouse o touch) o con las flechas: el input range
   está invisible encima de la foto y es el que recibe el foco.
   ========================================================================== */
/* Carrusel: una fila de cards que se desliza en horizontal con snap.
   Mobile: una card y un pedazo de la siguiente (avisa que hay más).
   Desktop: unas 2,5 cards. */
.casos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.casos::-webkit-scrollbar { display: none; }

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

.casos > .caso { scroll-snap-align: start; }

@media (min-width: 640px) {
  .casos { grid-auto-columns: 46%; }
}

@media (min-width: 1100px) {
  .casos { grid-auto-columns: 38%; }
}

.casos__controles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.casos__flecha {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.casos__flecha svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.casos__flecha:hover:not(:disabled) {
  border-color: var(--tertiary);
  background: var(--tertiary);
  color: var(--neutral);
}

.casos__flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Entrada en cascada al bajar: el carrusel scrollea en horizontal, así
   que las cards siguen la línea de tiempo del bloque entero (--casos,
   medido contra la página) y cada una arranca un poco después (--i). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .casos-carrusel { view-timeline: --casos block; }
    .caso {
      animation: tarjeta-entra ease-out both;
      animation-timeline: --casos;
      animation-range: cover calc(var(--i, 0) * 6%) cover calc(35% + var(--i, 0) * 6%);
    }
  }
}

/* Cerrada (con el velo), la foto deja deslizar el carrusel */
.comparador:not(.abierto) { touch-action: auto; }

.caso {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.comparador {
  --pos: 50%;
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--surface-2);
  touch-action: pan-y; /* abierto: deslizar en horizontal mueve el divisor, en vertical scrollea la página */
  user-select: none;
  -webkit-user-select: none;
}

.comparador.abierto { cursor: ew-resize; }

.comparador__fotos {
  position: absolute;
  inset: 0;
}

.comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* El antes se recorta con dos desplazamientos opuestos (marco e imagen)
   en lugar de clip-path: los transforms los mueve la placa de video sin
   volver a pintar la foto, y el arrastre queda fluido en celulares */
.comparador__antes-marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(calc(var(--pos) - 100%));
  will-change: transform;
}

.comparador__antes-marco .comparador__antes {
  transform: translateX(calc(100% - var(--pos)));
  will-change: transform;
}

.comparador__etiqueta {
  position: absolute;
  top: 0.75rem;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  background: var(--neutral);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Cada etiqueta se desvanece cuando la línea se acerca a su borde (su foto
   queda casi tapada): plena entre 30 % y 70 %, invisible antes del 10 % */
.comparador__etiqueta--antes {
  left: 0.75rem;
  opacity: clamp(0, (var(--p, 50) - 10) / 20, 1);
}
.comparador__etiqueta--despues {
  right: 0.75rem;
  opacity: clamp(0, (90 - var(--p, 50)) / 20, 1);
}

/* Línea divisoria con el handle en el centro */
/* Ocupa toda la foto y se desplaza con transform (sin recalcular la
   página); la línea visible es el ::before */
.comparador__linea {
  position: absolute;
  inset: 0;
  transform: translateX(var(--pos));
  will-change: transform;
  pointer-events: none;
}

.comparador__linea::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--white);
}

.comparador__handle {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--sombra);
  transform: translate(-50%, -50%);
  transition: box-shadow 0.2s ease;
}

.comparador__handle svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comparador__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none; /* el arrastre lo maneja main.js sobre .comparador */
}

/* El foco del input se ve en el handle */
.comparador:has(.comparador__control:focus-visible) .comparador__handle {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--tertiary);
}

.caso__cuerpo {
  padding: 0.875rem clamp(1rem, 2.5vw, 1.25rem) 1rem;
}

/* El llamado del velo cambia según se toque o se use el mouse */
.solo-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .solo-mouse { display: inline; }
  .solo-tactil { display: none; }
}

/* Velo: dos mitades marrones (::before y ::after) que se corren hacia los
   costados desde la línea divisoria; el texto se desvanece primero */
.comparador__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate; /* las mitades (z-index: -1) quedan detrás del texto, no de las fotos */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: none;
  color: var(--neutral);
  font: inherit;
  cursor: pointer;
}

.comparador__velo::before,
.comparador__velo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 50.5%; /* se solapan un poco: sin línea de luz en el centro */
  background: var(--primary);
}

.comparador__velo::before { left: 0; }
.comparador__velo::after { right: 0; }

.comparador__velo-etiqueta {
  font-family: var(--font-titulos);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1;
}

.comparador__velo-boton {
  padding: 0.5rem clamp(0.75rem, 3vw, 1.125rem);
  white-space: nowrap;
  border: 1px solid var(--neutral);
  border-radius: 999px;
  font-size: min(var(--fs-small), 4vw);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.comparador__velo:hover .comparador__velo-boton {
  background: var(--neutral);
  color: var(--primary);
}

.comparador__velo:focus-visible { outline: none; }
.comparador__velo:focus-visible .comparador__velo-boton {
  outline: 2px solid var(--neutral);
  outline-offset: 3px;
}

/* Cargando las fotos: el cursor sigue siendo la manito (sin la ruedita
   de carga del sistema) */
.comparador__velo.cargando { cursor: pointer; }

.abierto .comparador__velo { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .comparador__velo::before,
  .comparador__velo::after { transition: transform 0.6s ease-in-out; }

  .comparador__velo-etiqueta { transition: opacity 0.3s ease; }
  .comparador__velo-boton { transition: opacity 0.3s ease, background-color 0.2s ease, color 0.2s ease; }
}

.abierto .comparador__velo::before { transform: translateX(-100%); }
.abierto .comparador__velo::after { transform: translateX(100%); }
.abierto .comparador__velo > span { opacity: 0; }

/* Qué se corrigió: renglón propio, arriba de los tags */
.caso__correccion {
  margin: 0 0 0.625rem;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Tags informativos, no clickeables */
.caso__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.caso__tags li {
  padding: 0.25rem 0.7rem;
  border: 1.5px solid var(--secondary);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
}

.casos__intro {
  max-width: 34rem;
  margin: calc(-1 * clamp(0.75rem, 2vw, 1.5rem)) 0 clamp(1.75rem, 4vw, 2.5rem);
  font-size: var(--fs-body);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ==========================================================================
   6. Preguntas frecuentes
   Acordeón nativo (details/summary): accesible y funciona sin JS.
   name="faq" hace que al abrir una se cierre la anterior.
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

.faq__pregunta::-webkit-details-marker { display: none; }

/* "+" dibujado con dos líneas; al abrir, la vertical gira y queda "−" */
.faq__icono {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq__icono::before,
.faq__icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.375rem;
  border-radius: 1px;
  background: var(--acento);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;
}

.faq__icono::after { transform: rotate(90deg); }

.faq__pregunta:hover .faq__icono { border-color: var(--acento); }

.faq__item[open] .faq__icono {
  border-color: var(--acento);
  background: var(--acento);
}

.faq__item[open] .faq__icono::before,
.faq__item[open] .faq__icono::after { background: var(--neutral); }

.faq__item[open] .faq__icono::after { transform: rotate(0deg); }

.faq__respuesta p {
  max-width: 40rem;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Apertura suave donde el navegador lo soporta (Chrome/Edge recientes);
   en el resto abre al instante, igual de bien */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }

    .faq__item::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition:
        height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.6s ease,
        content-visibility 0.6s allow-discrete;
    }

    .faq__item[open]::details-content {
      height: auto;
      opacity: 1;
    }
  }
}

@media (min-width: 900px) {
  .preguntas {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  /* El título acompaña mientras se recorren las preguntas */
  .preguntas .seccion__titulo {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* ==========================================================================
   7. Pedí tu turno
   Bloque azul con la llamada a la acción y, debajo, las direcciones en
   grande (como el cierre de la referencia) con horarios y foto.
   ========================================================================== */
.turno__cta {
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  border-radius: var(--radius);
  background: var(--acento);
  color: var(--neutral);
}

/* El bloque se abre con el scroll: entra recortado a los costados y con
   las esquinas más redondeadas, y llega a su forma final cuando su centro
   pasa por el centro de la pantalla. El recorte no toca el texto: queda
   dentro del padding. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .turno__cta {
      animation: bloque-abre ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

@keyframes bloque-abre {
  from { clip-path: inset(2% 5% round calc(var(--radius) * 3)); }
  to { clip-path: inset(0 round var(--radius)); }
}

.turno__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(2.5rem, 0.9rem + 4.1vw, 4.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-box: trim-both cap alphabetic;
}

.turno__accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.turno__accion p {
  max-width: 24rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* Mail e Instagram: links secundarios, más juntos entre sí que con el botón.
   Cada link tiene 44 px de alto para tocarlo cómodo; el margen negativo
   descuenta ese aire de arriba y de abajo del grupo */
.turno__contacto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-block: -0.625rem;
}

.turno__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  font-size: var(--fs-small);
  text-decoration: none;
}

/* Subrayado solo en el texto, no debajo del ícono */
.turno__link span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-underline-offset 0.2s ease;
}

.turno__link:hover span { text-underline-offset: 0.5em; }

/* Íconos de trazo fino, mismo estilo que la flecha de las direcciones */
.icono {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.turno :focus-visible { outline-color: var(--neutral); }
.consultorios :focus-visible { outline-color: var(--tertiary); }

/* Consultorios */
.consultorios {
  display: grid;
  gap: 4rem;
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* Cada consultorio: foto, ciudad (link a Maps), dirección y días */
.consultorio__ciudad {
  margin-top: 1.75rem;
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 400;
  line-height: 1;
}

/* La ciudad y la dirección llevan a Maps; la flecha reacciona con las dos */
.consultorio__ciudad a,
.consultorio__direccion a { text-decoration: none; }

.consultorio__direccion {
  margin: 0.75rem 0 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.flecha {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.12em;
  vertical-align: 0.45em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease-in-out;
}

.consultorio:has(.consultorio__ciudad a:hover, .consultorio__direccion a:hover) .flecha { transform: translate(0.08em, -0.08em); }

.horarios {
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
  margin: 1.5rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.horarios div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.horarios dt { font-weight: 600; }
.horarios dd { margin: 0; }
/* Frecuencia (De lunes a viernes / Una vez por mes): completa el
   encabezado de la card, debajo de la dirección y más discreta */
.consultorio__frecuencia {
  margin: 0.375rem 0 0;
  font-size: var(--fs-small);
  opacity: 0.8;
}

/* Las dos fotos con el mismo encuadre, para que las cards queden parejas */
.consultorio__foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--foto-fondo);
}

.consultorio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Villa Dolores: corrido a la izquierda para mostrar el sillón */
.consultorio__foto--villa img { object-position: 25% 50%; }

@media (min-width: 900px) {
  .turno__cta {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }

  .consultorios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 0;
  }

  .consultorio {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .consultorio__direccion { justify-self: start; }
}

/* ==========================================================================
   8. Footer
   Sobrio (el bloque azul de arriba ya cierra con fuerza). La leyenda
   de matrícula es obligatoria y se corta solo en los "·".
   ========================================================================== */
.footer {
  padding-block: 2rem 2.5rem;
}

.footer__barra {
  display: grid;
  gap: 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.footer__marca {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Celulares: logo arriba para que la leyenda tenga todo el ancho */
@media (max-width: 479px) {
  .footer__marca {
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer__legal {
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer__legal span { white-space: nowrap; }

/* Pantallas muy angostas (≤ 359px): la frase larga no entra en un renglón */
@media (max-width: 359px) {
  .footer__legal span:nth-child(2) { white-space: normal; }
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem; /* entre renglones lo da el área de toque de cada link */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Área de toque de 44 px de alto; el subrayado queda pegado al texto */
.footer__nav a {
  display: inline-block;
  padding-block: 0.6875rem;
  font-size: 0.875rem;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  background-origin: content-box;
  background-clip: content-box;
  transition: background-size 0.2s ease;
}

.footer__nav a:hover { background-size: 100% 1px; }

/* Instagram: solo el ícono, sin subrayado; al pasar el mouse, azul.
   Área de toque de 44 px; el margen negativo la descuenta del espacio */
.footer__nav .footer__instagram {
  display: flex;
  padding: 0.75rem;
  margin: -0.75rem;
  background: none;
  transition: color 0.2s ease;
}

.footer__nav .footer__instagram:hover { color: var(--tertiary); }

.footer__instagram .icono {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 1024px) {
  .footer__barra {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ==========================================================================
   Barra fija "Pedí tu turno" (solo mobile, donde el header no tiene botón)
   main.js le agrega .visible según lo que haya en pantalla.
   ========================================================================== */
.barra-turno {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.5s;
}

.barra-turno.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

.barra-turno .boton { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .barra-turno,
  .barra-turno.visible { transition: none; }
}

/* Espacio al final para que la barra no tape el footer */
@media (max-width: 719px) {
  body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}

@media (min-width: 720px) {
  .barra-turno { display: none; }
}