/* El sitio de Cedric. Cada sección lleva su tema (claro = arena, oscuro = noche) en data-tema; la portada es salvia.
   Los objetos (placas e instrumentos) se colocan en su escena con --x, --y, --w y --r (en cqw) y entran con el scroll (--t de 0 a 1).
   .js (lo pone el <head>) y .con-movimiento (lo pone sitio.js si la persona no pidió menos movimiento) activan lo que depende del script. */
:root {
  --salvia: #6D786A; --arena: #E7DFD2; --olivo: #484734; --noche: #141518; --tinta: #252B66;
  --terra: #B94B31; --terra-clara: #F0A58C; --hueso: #F4F0E8;
  --sans: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --canal: clamp(16px, 4.45vw, 64px);
  --cabecera: 72px;
  --tope: calc(var(--cabecera) + env(safe-area-inset-top, 0px));
  --suave: cubic-bezier(.2, .7, .2, 1);
  --firme: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
@media (max-width: 760px) { :root { --cabecera: 60px; } }

[data-tema="claro"] {
  --fondo: var(--arena); --texto: var(--noche); --sub: #3A3631; --linea: rgba(20,21,24,0.18); --acento: var(--terra);
  --sombra: drop-shadow(0 22px 26px rgba(70,52,34,0.20)) drop-shadow(0 3px 4px rgba(70,52,34,0.22));
  --sombra-placa: var(--sombra);
}
[data-tema="oscuro"] {
  --fondo: var(--noche); --texto: var(--hueso); --sub: rgba(244,240,232,0.72); --linea: rgba(244,240,232,0.2); --acento: var(--terra-clara);
  --sombra: drop-shadow(0 0 1px rgba(244,240,232,0.45)) drop-shadow(0 24px 34px rgba(0,0,0,0.6));
  --sombra-placa: brightness(1.08) drop-shadow(0 0 34px rgba(242,226,196,0.20)) drop-shadow(0 24px 34px rgba(0,0,0,0.6));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--noche); color: var(--hueso); font-family: var(--sans); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.marco { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--canal); }
section[data-tema] { position: relative; background: var(--fondo); color: var(--texto); }
.solo-movil { display: none; }
[id] { scroll-margin-top: var(--cabecera); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--hueso); color: var(--noche); }
.saltar:focus { top: 12px; }

/* ---------- la cabecera del sitio ---------- */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--cabecera); display: flex; align-items: center; gap: clamp(20px, 3.9vw, 56px);
  padding-inline: clamp(16px, 2.8vw, 40px); background: var(--arena); color: var(--noche); box-shadow: 0 1px 0 rgba(20,21,24,0.08); }
.cabecera .nombre { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.cabecera nav { display: flex; gap: 28px; font-weight: 500; }
.cabecera nav > a, .cabecera nav > span { color: #3A3631; text-decoration: none; white-space: nowrap; }
.cabecera nav > a, .idioma a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: color .25s, text-decoration-color .25s; }
.cabecera nav > a:hover, .cabecera nav > a[aria-current], .idioma a:hover { color: var(--noche); text-decoration-color: currentColor; }
.cabecera nav > span:not(.idioma) { opacity: 0.55; cursor: default; }
.cabecera .lado { margin-left: auto; display: flex; align-items: center; gap: 22px; }
/* ES · EN: el idioma de la página en oscuro; el otro, una liga en gris */
.idioma { font-family: var(--mono); font-size: 14px; font-weight: 500; color: #3A3631; white-space: nowrap; }
.idioma a { color: #8A8378; text-underline-offset: 4px; }
.boton { display: inline-flex; align-items: center; align-self: flex-start; height: 48px; padding-inline: 22px; border-radius: 4px; background: var(--terra); color: var(--hueso);
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s, translate .2s; }
.boton:hover { background: #A23F28; }
.boton:active { translate: 0 1px; }
.menu-boton { display: none; }
.idioma-corto { display: none; }
@media (max-width: 760px) {
  .cabecera .lado .idioma { display: none; }
  .idioma-corto { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 8px;
    border: 1.5px solid rgba(20,21,24,0.3); border-radius: 4px; color: var(--noche); font: 500 13px/1 var(--mono); letter-spacing: 0.06em;
    text-decoration: none; transition: border-color .2s; }
  .idioma-corto:hover { border-color: var(--noche); }
  .cabecera .lado { gap: 10px; }
  .cabecera .boton { height: 40px; padding-inline: 16px; font-size: 15px; }
  /* el menú en celular: un botón que abre la lista debajo de la cabecera; la lista baja como persiana y sus ligas entran una tras otra */
  .menu-boton { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 4px 0 8px; border: 0; background: none; color: var(--noche);
    font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  .menu-raya, .menu-raya::before { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .3s var(--suave), translate .3s var(--suave), top .3s var(--suave); }
  .menu-raya { position: relative; translate: 0 -3px; }
  .menu-raya::before { content: ""; position: absolute; left: 0; top: 6px; }
  .abierta .menu-raya { translate: 0 0; transform: rotate(45deg); }
  .abierta .menu-raya::before { top: 0; transform: rotate(-90deg); }
  .cabecera nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 4px var(--canal) 28px; background: var(--arena);
    box-shadow: 0 18px 30px rgba(20,21,24,0.14); max-height: calc(100svh - var(--cabecera)); overflow-y: auto;
    visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .35s var(--firme), opacity .2s .15s, visibility 0s .35s; }
  .cabecera.abierta nav { visibility: visible; opacity: 1; clip-path: inset(0 0 -40px 0); transition: clip-path .5s var(--suave), opacity .15s; }
  .cabecera nav > * { opacity: 0; translate: 0 12px; transition: opacity .2s, translate .2s; }
  .cabecera.abierta nav > * { opacity: 1; translate: 0 0; transition: opacity .45s var(--suave), translate .6s var(--suave); }
  .cabecera.abierta nav > :nth-child(2) { transition-delay: .05s; }
  .cabecera.abierta nav > :nth-child(3) { transition-delay: .1s; }
  .cabecera.abierta nav > :nth-child(4) { transition-delay: .15s; }
  .cabecera nav > a, .cabecera nav > span:not(.idioma) { padding: 14px 0; border-top: 1px solid rgba(20,21,24,0.18); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
  .cabecera nav > a { text-decoration: none; }
  .cabecera nav > a[aria-current] { color: var(--terra); }
  .cabecera nav .idioma { display: block; opacity: 1; padding-top: 18px; border-top: 1px solid rgba(20,21,24,0.18); }
  .cabecera nav .idioma a { display: inline-block; padding: 10px 8px; margin: -10px -8px; }   /* más fácil de tocar, sin moverse */
}
/* con el botón de idioma no cabe la palabra «Menú» en un celular angosto: queda la raya sola (la palabra sigue para lectores de pantalla) */
@media (max-width: 420px) {
  .cabecera { gap: 12px; }
  .cabecera .lado { gap: 8px; }
  .cabecera .boton { padding-inline: 13px; }
  .menu-boton { gap: 0; padding: 0 6px; }
  .menu-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 340px) { .cabecera .nombre { font-size: 16px; } }

/* ---------- lo que aparece al entrar en pantalla (sitio.js le pone .visto) ---------- */
.con-movimiento .revela { transition: opacity .9s var(--suave), translate 1.1s var(--suave); transition-delay: calc(var(--i, 0) * 90ms); }
.con-movimiento .revela:not(.visto) { opacity: 0; translate: 0 28px; }

/* ---------- los objetos y su movimiento ---------- */
[data-rango] { --t: 1; }
.escena { position: relative; container-type: inline-size; }
.obj { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); rotate: var(--r, 0deg); z-index: var(--z, 1);
  translate: calc(var(--dx, 0) * 1cqw * (1 - var(--t))) calc(var(--dy, 0) * 1cqw * (1 - var(--t))); }
.con-movimiento .obj { will-change: translate; }
/* la placa del área no: fija y con su resplandor en una capa aparte, Chrome dejaba franjas del resplandor sin pintar */
.con-movimiento .area-escenario .obj { will-change: auto; }
.obj > img { width: 100%; height: auto; filter: var(--sombra); }
.obj.placa > img { filter: var(--sombra-placa); }
.zona { position: absolute; inset: 0; opacity: var(--t); pointer-events: none; }
.zona img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lazo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lazo path { fill: none; stroke: var(--terra); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t)); opacity: 0.92; }
[data-tema="oscuro"] .escena-luz::before { content: ""; position: absolute; inset: -12% -24% -8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244,222,190,0.16), rgba(244,222,190,0.06) 55%, rgba(244,222,190,0)); }
.aparece { opacity: var(--t); }
.trazos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; }
.ojo { margin: 0 0 18px; font: 500 13px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }

/* ---------- portada: entra al cargar ---------- */
.portada { position: relative; overflow: clip; background: var(--salvia); color: var(--hueso); }
.portada-marco { position: relative; height: clamp(520px, 56.4vw, 812px); }
.hola { position: absolute; left: var(--canal); top: 7.6%; margin: 0; font-size: clamp(20px, 1.95vw, 28px); line-height: 1.3; z-index: 2; }
.portada h1 { position: absolute; left: calc(var(--canal) - 0.045em); top: 20.2%; margin: 0; font-size: clamp(56px, 10.4vw, 150px); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.055em; z-index: 2; }
.portada h1 span { display: block; }
.retrato { position: absolute; right: clamp(0px, 2.8vw, 40px); bottom: 0; height: 100%; width: auto; max-width: none; z-index: 1; }
.portada-pie { position: absolute; left: var(--canal); bottom: clamp(16px, 1.8vw, 26px); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.portada-pie p { margin: 0; font: 500 14px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
/* la otra versión del sitio: como «Agendar», pero en negro. Junto al pie solo donde cabe sin pisar a Cedric; si no, abajo */
.boton-idioma { align-self: auto; gap: 0.4em; background: var(--noche); }   /* gap: en un flex, el espacio antes de la flecha se pierde */
.boton-idioma:hover { background: #2B2D33; }
@media (min-width: 1400px) { .portada-pie { flex-direction: row; align-items: center; gap: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hola, .js .portada h1 span, .js .portada-pie { animation: subir 1.1s var(--suave) both; }
  .js .hola { animation-delay: .05s; }
  .js .portada h1 span:nth-child(1) { animation-delay: .18s; }
  .js .portada h1 span:nth-child(2) { animation-delay: .28s; }
  .js .portada h1 span:nth-child(3) { animation-delay: .38s; }
  .js .portada-pie { animation-delay: .7s; }
  .js .retrato { animation: retrato 1.5s var(--suave) .12s both; }
}
@keyframes subir { from { opacity: 0; translate: 0 0.45em; } }
@keyframes retrato { from { opacity: 0; translate: 0 4%; } }

/* ---------- Qué atiendo: la lista y la mesa de placas ---------- */
.atiendo, .consulta { overflow: clip; padding-block: clamp(56px, 5vw, 72px) clamp(48px, 5vw, 80px); }
.cabeza-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.titulo-seccion { margin: 0; font-size: clamp(52px, 8.6vw, 124px); font-weight: 300; line-height: 0.95; letter-spacing: -0.04em; }
.cabeza-seccion p { margin: 0 0 0.5em; max-width: 26em; font-size: clamp(17px, 1.4vw, 20px); color: var(--sub); }
.atiendo-cuerpo { display: grid; grid-template-columns: minmax(0, 860fr) minmax(0, 580fr); align-items: start; margin-top: clamp(24px, 3vw, 44px); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista a, .lista .fila { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; min-height: clamp(104px, 10.4vw, 150px);
  margin-left: calc(-1 * var(--canal)); padding: 16px 24px 16px var(--canal); border-top: 1px solid var(--linea); text-decoration: none; }
.num { font: 500 15px var(--mono); }
.linea { display: block; margin-bottom: 8px; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.3; color: var(--sub); }
.lista .nombre { display: block; font-size: clamp(32px, 4.2vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
/* la fila del área va en terracota: el color entra barriendo de izquierda a derecha cuando aparece */
.lista .activa a { color: var(--hueso); border-top-color: transparent; }
.lista .activa a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terra); transform-origin: 0 50%; transition: scale 1.1s var(--firme) .25s, background-color .25s; }
.con-movimiento .lista .activa:not(.visto) a::before { scale: 0 1; }
.lista .activa a:hover::before { background: #A23F28; }
.lista .activa .linea { color: var(--hueso); }
.flecha { font-size: clamp(28px, 3vw, 44px); font-weight: 300; line-height: 1; transition: translate .4s var(--suave); }
.lista a:hover .flecha { translate: 0 6px; }
.escena-placas { aspect-ratio: 580 / 660; margin-right: calc(-1 * var(--canal)); }

/* ---------- Cómo es la consulta: un objeto por paso ---------- */
.pasos { list-style: none; margin: clamp(24px, 3vw, 44px) auto 0; }
.paso { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 46%); align-items: center; min-height: clamp(150px, 13.6vw, 196px);
  border-top: 1px solid var(--linea); }
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso .linea { max-width: 30em; }
.paso .nombre { display: block; font-size: clamp(40px, 5.6vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
.paso-objetos { align-self: stretch; margin-right: calc(-1 * var(--canal)); }

/* ---------- el área: la placa enciende dónde reviso cada molestia ----------
   Sin script, todo se lee de corrido. Con él, la lista se queda fija (.pasos-slot) mientras se baja por .area-pasos
   (--paso de scroll por paso): se abre el paso que toca y la placa enciende sus zonas. */
.area { overflow: clip; --alto: calc(100svh - var(--tope)); --paso: 34svh; }
.area-grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: clamp(24px, 4vw, 64px); }
.area-textos { min-width: 0; }
.area-inicio { min-height: var(--alto); display: flex; flex-direction: column; padding-top: clamp(56px, 5vw, 72px); }
.area h2 { margin: 0; font-size: clamp(44px, 7.8vw, 112px); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; }
.area .resumen { margin: clamp(20px, 3.75vw, 54px) 0 clamp(24px, 4vw, 56px); max-width: 26em; font-size: clamp(17px, 1.53vw, 22px); color: var(--sub); }
.escena-mesa-area { margin-top: auto; width: min(100%, 640px); aspect-ratio: 640 / 190; }

.pasos-slot { padding-block: clamp(48px, 6vw, 96px); }
.js .area-pasos { height: calc(var(--n) * var(--paso) + var(--alto)); }
.js .pasos-slot { position: sticky; top: var(--tope); height: var(--alto); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(16px, 4svh, 48px); }
.avance { display: none; }
.grupo + .grupo { margin-top: clamp(18px, 3.6svh, 40px); }
.grupo-titulo { margin: 0 0 clamp(6px, 1.2svh, 12px); font: 500 13px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.pasos-lista { list-style: none; margin: 0; padding: 0; }
.paso-area { position: relative; border-top: 1px solid var(--linea); transition: opacity .5s var(--suave); }
.paso-area h4 { margin: 0; font: inherit; }
.ir { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; width: 100%; margin: 0; padding: clamp(8px, 1.45svh, 16px) 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ir .num { color: var(--sub); transition: color .5s; }
.de { display: none; }
.paso-titulo { font-size: clamp(22px, min(2.4vw, 3.9svh), 36px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.cuerpo { display: grid; grid-template-rows: 1fr; }
.cuerpo > div { min-height: 0; overflow: hidden; padding-left: 52px; }
.cuerpo p { margin: 0; padding-bottom: clamp(12px, 2.2svh, 22px); max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); color: var(--sub); }
.cuerpo dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; padding-bottom: clamp(12px, 2.2svh, 22px); }
.cuerpo dl div { min-width: 0; }
.cuerpo dt { margin-bottom: 4px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.cuerpo dd { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; }
.js .cuerpo { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--suave); }
.js .cuerpo > div > * { opacity: 0; transition: opacity .25s; }
.js .paso-area.activo .cuerpo { grid-template-rows: 1fr; }
.js .paso-area.activo .cuerpo > div > * { opacity: 1; transition: opacity .55s .2s; }
.js .en-curso .paso-area:not(.activo) { opacity: 0.34; }
@media (hover: hover) { .js .en-curso .paso-area:not(.activo):hover { opacity: 0.72; } }
.paso-area.activo .ir .num { color: var(--acento); }
/* la raya de arriba del paso abierto se llena en terracota mientras se baja por él */
.paso-area::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--acento); transform-origin: 0 50%; scale: 0 1; }
.js .paso-area.activo::before { scale: clamp(0, calc(var(--avance, 0) - var(--k)), 1) 1; }

.area-escenario { position: sticky; top: var(--tope); align-self: start; height: var(--alto); display: grid; place-items: center; }
.mapa-escena { width: min(100%, calc((var(--alto) - 72px) * var(--prop))); aspect-ratio: var(--prop); }

/* el mapa: el velo oscurece la placa, la zona se enciende, la guía crece del rótulo a la zona y el punto late dos veces */
.mapa { position: absolute; inset: 0; pointer-events: none; }
.velo { position: absolute; inset: 0; background: rgba(0,0,0,0.4); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0; transition: opacity .8s var(--suave); }
.mapa.foco .velo { opacity: 1; }
.mapa .zona { opacity: 0; visibility: hidden; transition: opacity .6s var(--suave), visibility 0s .6s; }
.mapa .zona.on { opacity: 1; visibility: visible; transition: opacity .9s var(--suave) .1s; }
.guia { position: absolute; height: 1px; margin-top: -0.5px; background: var(--hueso); box-shadow: 0 0 0 1px rgba(20,21,24,0.5); transform-origin: 0 50%;
  scale: 0 1; opacity: 0; transition: scale .3s var(--firme), opacity .25s; }
.guia.ver { scale: 1 1; opacity: 0.9; transition: scale .65s var(--firme) .15s, opacity .2s .15s; }
.punto { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--hueso); box-shadow: 0 0 0 1.5px var(--noche);
  scale: 0; transition: scale .2s; }
.punto.ver { scale: 1; transition: scale .5s cubic-bezier(.3, 1.7, .5, 1) .7s; }
.punto::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--terra-clara); opacity: 0; }
.con-movimiento .punto.on::after { animation: latido 1.9s var(--suave) .9s 2; }
@keyframes latido { from { opacity: 0.95; scale: 1; } to { opacity: 0; scale: 4.4; } }
.rotulo { position: absolute; translate: 6px -50%; padding: 0.3em 0.58em; background: rgba(20,21,24,0.86); color: var(--hueso); font: 500 max(9px, 2.1cqw)/1.17 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .3s, translate .4s var(--suave), background-color .45s; }
.rotulo.der { translate: calc(-100% - 6px) -50%; }
.rotulo.ver { opacity: 1; translate: 0 -50%; transition: opacity .45s .25s, translate .7s var(--suave) .25s, background-color .45s; }
.rotulo.der.ver { translate: -100% -50%; }
.rotulo.on { background: var(--terra); }

.area-cierre { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-block: clamp(56px, 7vw, 112px) clamp(72px, 8vw, 128px); }
.titulo-tramo { margin: 0; font-size: clamp(38px, 4.8vw, 68px); font-weight: 300; line-height: 1; letter-spacing: -0.035em; }
.area-cierre p { margin: 0 0 24px; max-width: 32em; font-size: clamp(17px, 1.35vw, 20px); color: var(--sub); }

/* ---------- Sedes y cita: el sobre ---------- */
.sedes { overflow: clip; padding-block: clamp(56px, 6vw, 96px) clamp(72px, 8vw, 128px); }
.sedes .titulo-seccion { margin-bottom: clamp(28px, 3.4vw, 52px); }
.sedes-marco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas: "mapa sobre" "sedes sobre" "agendar sobre" "datos sobre";
  grid-template-rows: auto auto auto 1fr; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.sedes-lista { grid-area: sedes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.sede { padding-block: 20px 28px; border-top: 1px solid var(--linea); }
.sede .ojo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; }
.sede-num, .alfiler b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--terra);
  color: var(--hueso); font: 600 12px/1 var(--mono); letter-spacing: 0; }
.sede h3 { margin: 0 0 10px; font-size: clamp(28px, 2.9vw, 42px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.sede p { margin: 0; color: var(--sub); font-size: clamp(16px, 1.25vw, 18px); }
.sede .como-llegar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.como-llegar a { display: inline-flex; align-items: center; height: 36px; padding-inline: 14px; border: 1px solid var(--linea); border-radius: 999px;
  color: var(--texto); font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s, border-color .2s; }
.como-llegar a::after { content: "↗"; margin-left: 6px; letter-spacing: 0; }
.como-llegar a:hover { border-color: var(--texto); background: rgba(20,21,24,0.05); }
.como-llegar a:focus-visible, .alfiler:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* el mapa: el dibujo en SVG y, encima, los rótulos y los alfileres en % (la letra no se encoge con el mapa) */
.sedes-mapa { grid-area: mapa; position: relative; margin: 0 0 clamp(20px, 2.4vw, 32px); overflow: hidden; border: 1px solid var(--linea);
  border-radius: 4px; background: var(--fondo); }
.mapa-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-dibujo .mar { fill: color-mix(in srgb, var(--salvia) 26%, var(--fondo)); }
.mapa-dibujo .mar-olas { fill: url(#olas); }
.mapa-dibujo .ola { fill: none; stroke: color-mix(in srgb, var(--salvia) 40%, var(--fondo)); stroke-width: 0.8; }
.mapa-dibujo .islote { fill: var(--fondo); stroke: var(--sub); stroke-width: 0.8; }
.mapa-dibujo .costa { fill: none; stroke: var(--sub); stroke-width: 1.3; stroke-linejoin: round; }
.mapa-dibujo .frontera { fill: none; stroke: var(--sub); stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .7; }
.mapa-dibujo .ruta { fill: none; stroke: var(--terra); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 7; }
.mapa-rotulo, .mapa-tiempo { position: absolute; translate: -50% -50%; font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; color: var(--sub); pointer-events: none; }
.mapa-rotulo.mar { color: color-mix(in srgb, var(--salvia) 70%, var(--noche)); font-style: italic; letter-spacing: 0.16em; }
.mapa-rotulo.estado { opacity: .75; }
.mapa-tiempo { left: var(--x); top: var(--y); translate: 14px -50%; padding: 5px 9px 4px; border-radius: 999px; background: var(--fondo); color: var(--terra); font-weight: 600; letter-spacing: 0.06em; }
.alfiler { position: absolute; translate: -11px -11px; display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; }
.alfiler b { box-shadow: 0 0 0 4px color-mix(in srgb, var(--terra) 22%, transparent); transition: box-shadow .25s, scale .25s; }
.alfiler span { padding: 5px 9px 4px; border-radius: 999px; background: var(--fondo); font: 600 12px/1.2 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 0 var(--linea); }
.alfiler[data-sede="joya"] { flex-direction: row-reverse; translate: calc(-100% + 11px) -11px; }
.alfiler:hover b, .sedes-marco:has(.sede[data-sede="cmq"]:hover, .sede[data-sede="cmq"]:focus-within) .alfiler[data-sede="cmq"] b,
.sedes-marco:has(.sede[data-sede="joya"]:hover, .sede[data-sede="joya"]:focus-within) .alfiler[data-sede="joya"] b {
  scale: 1.15; box-shadow: 0 0 0 8px color-mix(in srgb, var(--terra) 26%, transparent); }
.mapa-credito { position: absolute; right: 8px; bottom: 6px; font: 400 10px/1 var(--mono); color: var(--sub); opacity: .7; }

.agendar { grid-area: agendar; padding-block: 24px 8px; border-top: 1px solid var(--linea); }
.agendar h3, .sobre-nota h3 { margin: 0 0 8px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.agendar p, .sobre-nota p { margin: 0 0 20px; max-width: 34em; color: var(--sub); font-size: clamp(16px, 1.25vw, 18px); }
.datos { grid-area: datos; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--linea); }
.datos div { min-width: 0; }
.datos dt { font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.datos dd { margin: 6px 0 0; font-size: clamp(16px, 1.2vw, 18px); }
.datos .ancho { grid-column: 1 / -1; }
.sobre-col { grid-area: sobre; }
.escena-sobre { aspect-ratio: 560 / 850; }
.etiqueta { position: absolute; left: 9.6%; top: 13.6%; width: 27%; height: 9%; margin: 0; display: flex; align-items: center; rotate: -2deg;
  font: 500 max(8px, 2.05cqw)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--noche); }
/* la sombra en la boca del sobre: oscurece la placa justo donde entra (solo a lo ancho de la placa) */
.boca { position: absolute; left: 8.5%; right: 8.2%; bottom: 100%; height: 7%; margin-bottom: -3.4%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(40, 26, 12, 0), rgba(40, 26, 12, .38)); }
.sobre-nota { margin-top: 8px; }

/* ---------- el pie ---------- */
.pie { background: var(--noche); color: var(--hueso); }
.pie-cita { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-block: clamp(56px, 6vw, 96px) clamp(40px, 4vw, 64px);
  border-bottom: 1px solid rgba(244,240,232,0.2); }
.pie-cita h2 { margin: 0; font-size: clamp(44px, 7vw, 100px); font-weight: 300; line-height: 0.95; letter-spacing: -0.04em; }
.pie-cita p { margin: 12px 0 0; max-width: 30em; color: rgba(244,240,232,0.72); font-size: clamp(16px, 1.3vw, 19px); }
.pie-sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; padding-block: 32px; }
.pie-sedes .ojo { margin-bottom: 8px; font-size: 12px; color: var(--terra-clara); }
.pie-sedes p { margin: 0; color: rgba(244,240,232,0.72); font-size: 15px; }
.pie-sedes a { text-decoration: none; color: var(--hueso); font-weight: 600; }
.pie-sedes a:hover { text-decoration: underline; }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(244,240,232,0.2); color: rgba(244,240,232,0.6); font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .solo-escritorio { display: none !important; }
  .solo-movil { display: revert; }
  .obj { left: calc(var(--xm) * 1cqw); top: calc(var(--ym) * 1cqw); width: calc(var(--wm) * 1cqw); rotate: var(--rm, var(--r, 0deg)); }
  .portada-marco { height: auto; display: flex; flex-direction: column; padding-block: 28px 0; }
  .hola, .portada h1 { position: static; }
  .portada h1 { margin-top: 12px; font-size: clamp(48px, 15vw, 66px); }
  /* el pie va bajo el título y Cedric cierra la portada, pegado al borde de abajo: así el corte de la foto es el de la sección.
     El pie va encima de la foto, que sube 12 px por debajo del botón */
  .portada-pie { position: relative; left: auto; bottom: auto; margin-top: 16px; gap: 14px; }
  .portada-pie p { font-size: 11px; }
  .portada-pie .boton { height: 44px; padding-inline: 18px; font-size: 15px; }
  .retrato { order: 1; position: relative; right: auto; align-self: flex-end; height: auto; width: min(80%, 340px); margin-top: -12px; margin-right: calc(-1 * var(--canal) + 4px); }
  .atiendo, .consulta { padding-top: 64px; }
  .atiendo-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .escena-placas { order: -1; aspect-ratio: 358 / 440; margin-bottom: 8px; }
  .lista a, .lista .fila { padding-right: var(--canal); }
  .paso { grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding-top: 20px; }
  .paso .num { padding-top: 4px; }
  .paso-objetos { grid-column: 1 / -1; height: 132px; margin-top: 4px; }

  /* el área en celular: arriba la placa, abajo el paso que se lee. Las dos se quedan fijas mientras se baja por los ocho
     pasos (--paso de scroll cada uno) y se van juntas al final. --placa es el alto de la placa; --hueco, el del texto. */
  .area { --placa: clamp(200px, min(56svh, calc(var(--alto) - 250px)), 480px); --hueco: calc(var(--alto) - var(--placa)); --paso: 44svh; }
  .area-grid { grid-template-columns: minmax(0, 1fr); }
  .area-inicio { min-height: 0; padding-block: 56px 36px; }
  .area h2 { font-size: clamp(40px, 12.4vw, 52px); }
  .area .resumen { margin: 14px 0 22px; font-size: 17px; }
  .area-escenario { order: -1; position: static; height: auto; padding-block: 24px 8px; }
  .mapa-escena { width: min(80vw, 360px); }
  .rotulo { font-size: 9px; }
  .cuerpo > div { padding-left: 0; }
  .cuerpo dl { grid-template-columns: minmax(0, 1fr); }
  .ir { grid-template-columns: 40px minmax(0, 1fr); }

  .js .area-textos { display: contents; }
  .js .area-inicio { order: 0; }
  .js .area-escenario { order: 1; position: sticky; top: var(--tope); z-index: 3; height: var(--alto); margin-inline: calc(-1 * var(--canal)); padding: 0;
    display: block; pointer-events: none; background: linear-gradient(var(--fondo) calc(var(--placa) - 6px), rgba(20,21,24,0) var(--placa)); }
  .js .area-escenario .mapa-escena { width: min(84vw, calc((var(--placa) - 30px) * var(--prop))); margin: 14px auto 0; }
  .js .area-pasos { order: 2; position: relative; z-index: 2; margin-top: calc(-1 * var(--hueco)); height: calc(var(--n) * var(--paso) + var(--hueco)); }
  .js .pasos-slot { top: calc(var(--tope) + var(--placa)); height: var(--hueco); display: block; padding: 0; }
  .js .avance { display: flex; gap: 4px; position: absolute; top: 10px; left: 0; right: 0; }
  .avance i { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--linea); }
  .avance i::after { content: ""; position: absolute; inset: 0; background: var(--acento); transform-origin: 0 50%; scale: clamp(0, calc(var(--avance, 0) - var(--k)), 1) 1; }
  .avance i:nth-child(6) { margin-left: 10px; }
  .js .grupo + .grupo { margin: 0; }
  .js .pasos-slot .grupo-titulo { position: absolute; top: 26px; left: 0; margin: 0; font-size: 11px; opacity: 0; transition: opacity .35s; }
  .js .pasos-slot .grupo.actual .grupo-titulo { opacity: 1; transition: opacity .5s .1s; }
  .js .pasos-slot .paso-area { position: absolute; top: 54px; left: 0; right: 0; border: 0; opacity: 0; translate: 0 22px; pointer-events: none;
    transition: opacity .25s, translate .45s var(--suave); }
  .js .pasos-slot .paso-area.antes { translate: 0 -22px; }
  .js .en-curso .paso-area:not(.activo) { opacity: 0; }
  .js .pasos-slot .paso-area.activo { opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity .5s .12s, translate .75s var(--suave) .12s; }
  .paso-area::before { display: none; }
  .js .pasos-slot .ir { display: block; padding: 0; cursor: default; }
  .js .pasos-slot .num { position: absolute; top: -28px; right: 0; font-size: 11px; letter-spacing: 0.08em; color: var(--sub); }
  .js .pasos-slot .de { display: inline; }
  .js .pasos-slot .paso-titulo { display: block; font-size: clamp(24px, min(7.6vw, 4.6svh), 31px); }
  .js .cuerpo, .js .paso-area.activo .cuerpo { grid-template-rows: 1fr; }
  .js .cuerpo > div > * { opacity: 1; }
  .js .pasos-slot .cuerpo > div { padding-top: 10px; overflow: visible; }
  .js .pasos-slot .cuerpo p, .js .pasos-slot .cuerpo dl { padding: 0; font-size: 16.5px; }
  .js .pasos-slot .cuerpo dd { font-size: 16px; }

  .area-cierre { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-block: 64px 80px; }
  .sedes-marco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mapa" "sedes" "sobre" "agendar" "datos"; grid-template-rows: none; }
  .mapa-rotulo, .mapa-tiempo, .alfiler span { font-size: 10px; }
  .mapa-rotulo.estado { display: none; }
  /* en el celular la píldora de Joya no cabe a la izquierda (es mar y se sale): va abajo del alfiler */
  .alfiler[data-sede="joya"] { flex-direction: column; align-items: flex-start; gap: 6px; translate: -11px -11px; }
  /* la de CMQ, pegada a la orilla derecha, tampoco cabe a su derecha: va abajo, hacia la izquierda */
  .alfiler[data-sede="cmq"] { flex-direction: column; align-items: flex-end; gap: 6px; translate: calc(-100% + 11px) -11px; }
  /* y el tiempo, que a media ruta chocaría con ella, pasa a la esquina como leyenda, con su raya */
  .mapa-tiempo { left: auto; right: 8px; top: 8px; translate: none; display: flex; align-items: center; gap: 6px; }
  .mapa-tiempo::before { content: ""; width: 18px; border-top: 2px dashed var(--terra); }
  .sedes-lista { grid-template-columns: minmax(0, 1fr); }
  .escena-sobre { aspect-ratio: 358 / 560; }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .pie-sedes { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}