/* ==========================================================================
   EnBlanco · #recorrido «Del clic al mensaje» (blanco)
   Fusión de «Así se conecta» (5 pasos reales) y «Antes y después».
   Composición: ruta horizontal de 5 estaciones (pestañas) con el cliente como
   punto, y debajo un escenario en dos piezas: el texto del paso y la pantalla
   del celular del cliente. El conmutador «Hoy / Con EnBlanco» cambia el texto,
   la pantalla y el trazo de la ruta (entero o cortado). Solo tokens.
   ========================================================================== */

/* ---- Cabecera: el único momento centrado de la página (la ruta es simétrica) */
.rc-head {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
  margin-bottom: clamp(var(--s-5), 5vw, var(--s-7));
}
.rc-head__title {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 7rem); /* 44–112: titular corto, se planta grande */
  max-width: none;
}
.rc-head__side { display: grid; gap: var(--s-4); justify-items: center; }
.rc-head__lead { font-size: var(--fs-4); line-height: 1.35; max-width: 34ch; text-wrap: balance; }

/* Conmutador Hoy / Con EnBlanco: grande, es el control principal */
.rc-mode {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--c-hueso);
  isolation: isolate;
}
.rc-mode::before { /* píldora que se desliza al estado elegido */
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px);
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) ease;
}
.recorrido[data-mode="con"] .rc-mode::before { transform: translateX(100%); background: var(--c-terracota); }
.recorrido[data-instant] .rc-mode::before { transition: none; }
.rc-mode__opt {
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-3);
  font-weight: var(--fw-strong);
  color: var(--c-tinta);
  white-space: nowrap;
  touch-action: manipulation;
  transition: color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.rc-mode__opt[aria-pressed="true"] { color: var(--c-blanco); }
.rc-mode__opt:active { transform: scale(var(--press-scale)); }
/* Sin JS (sin data-mode): la píldora no se ve y el botón activo lleva su propio fondo */
.recorrido:not([data-mode]) .rc-mode::before { display: none; }
.recorrido:not([data-mode]) .rc-mode__opt[aria-pressed="true"] { background: var(--c-terracota); }

/* ---- Ruta: 5 estaciones ---------------------------------------------------- */
.rc-route {
  position: relative;
  margin-bottom: var(--s-4);
  --node: 48px;
}
.rc-rail {
  position: absolute;
  left: calc(10% - var(--gutter) * .4);  /* de centro a centro de la primera y la última estación */
  right: calc(10% - var(--gutter) * .4);
  top: calc(var(--node) / 2 - 2px);
  height: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  pointer-events: none;
}
.rc-rail__seg {
  position: relative;
  display: block;
  height: 4px;
  margin-inline: calc(var(--node) / 2 + 6px);
  border-radius: 2px;
  background: var(--c-hueso);
  overflow: hidden;
}
.rc-rail__seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-terracota);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 420ms var(--ease-in-out);
}
.rc-rail__seg:nth-child(2)::after { transition-delay: 70ms; }
.rc-rail__seg:nth-child(3)::after { transition-delay: 140ms; }
.rc-rail__seg:nth-child(4)::after { transition-delay: 210ms; }
/* Hoy: la ruta se corta (el cliente se pierde entre paso y paso) */
.recorrido[data-mode="hoy"] .rc-rail__seg::after { transform: scaleX(.3); transition-delay: 0ms; }
.recorrido[data-mode="hoy"] .rc-rail__seg::after { background: var(--c-grafito); }
.recorrido[data-instant] .rc-rail__seg::after { transition: none; }

/* El cliente: un aro que viaja a la estación elegida (detrás del nodo) */
.rc-rail__client {
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 0;          /* JS lo traslada en px hasta la estación elegida */
  transition: transform 420ms var(--ease-in-out);
}
.rc-rail__client::before {
  content: "";
  position: absolute;
  left: calc(var(--node) / -2 - 9px);
  top: calc(var(--node) / -2 - 9px);
  width: calc(var(--node) + 18px);
  height: calc(var(--node) + 18px);
  border-radius: 50%;
  border: 3px solid var(--c-terracota);
  transition: border-color var(--dur-ui) ease;
}
.recorrido[data-mode="hoy"] .rc-rail__client::before { border-color: var(--c-grafito); }
.recorrido:not([data-mode]) .rc-rail__client { display: none; }
.recorrido[data-instant] .rc-rail__client { transition: none; }

.rc-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gutter);
}
.rc-tab {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  padding: 0 4px 6px;
  border-radius: var(--r-md);
  text-align: center;
  touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out);
}
.rc-tab:active { transform: scale(var(--press-scale)); }
.rc-tab__node {
  display: grid;
  place-items: center;
  width: var(--node); height: var(--node);
  border-radius: 50%;
  background: var(--c-hueso);
  color: var(--c-tinta);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.25rem;
  box-shadow: 0 0 0 6px var(--c-blanco);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-ui) var(--ease-out);
}
.rc-tab__label {
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  font-size: clamp(1rem, .8rem + .6vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: var(--ls-title);
  color: var(--c-grafito);
  transition: color var(--dur-fast) ease;
}
.rc-tab[aria-selected="true"] .rc-tab__node { background: var(--c-tinta); color: var(--c-blanco); transform: scale(1.12); }
.rc-tab[aria-selected="true"] .rc-tab__label { color: var(--c-tinta); }
.recorrido[data-mode="con"] .rc-tab[aria-selected="true"] .rc-tab__node { background: var(--c-terracota); }
@media (hover: hover) and (pointer: fine) {
  .rc-tab:not([aria-selected="true"]):hover .rc-tab__node { background: var(--c-arena); }
  .rc-tab:not([aria-selected="true"]):hover .rc-tab__label { color: var(--c-tinta); }
}

/* ---- Escenario: texto + pantalla ------------------------------------------ */
.rc-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
}
.rc-copy {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--c-hueso);
  padding: clamp(var(--s-4), 3.4vw, var(--s-6));
}
.rc-panel { display: grid; gap: var(--s-3); align-content: start; }
.rc-panel + .rc-panel { margin-top: var(--s-5); } /* sin JS: los 5 pasos uno debajo de otro */
.rc-count {
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  color: var(--c-grafito);
  font-variant-numeric: tabular-nums;
}
.rc-state { display: grid; gap: var(--s-2); align-content: start; }
.rc-state + .rc-state { margin-top: var(--s-3); }
.rc-title {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.25rem); /* 28–52 */
  font-weight: var(--fw-display);
  line-height: 1.03;
  letter-spacing: var(--ls-display);
  max-width: 18ch;
}
.rc-body { font-size: var(--fs-3); max-width: 46ch; color: var(--c-tinta); }
.rc-out {
  display: grid;
  gap: 6px;
  margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  max-width: 46ch;
}
.rc-out__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
}
.rc-out__tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.rc-out--con { background: var(--c-blanco); color: var(--c-tinta); }
.rc-out--con .rc-out__tag { color: var(--c-terracota); }
.rc-hoy-tag {
  justify-self: start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  color: var(--c-blanco);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
}

/* Con JS: solo el paso y el estado elegidos */
.recorrido[data-mode] .rc-panel:not(.is-on) { display: none; }
.recorrido[data-mode] .rc-panel + .rc-panel { margin-top: 0; }
.recorrido[data-mode] .rc-state + .rc-state { margin-top: 0; }
.recorrido[data-mode="con"] .rc-state--hoy,
.recorrido[data-mode="hoy"] .rc-state--con { display: none; }
/* Solo cuando el cambio llega por puntero (JS pone .is-anim); con teclado no se anima */
.recorrido[data-mode] .rc-panel.is-on.is-anim { animation: rc-in var(--dur-ui) var(--ease-out); }
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.rc-nav {
  display: none; /* sin JS no hacen falta */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-top: auto;
}
.recorrido[data-mode] .rc-nav { display: flex; }
.rc-nav__btn, .rc-nav__flip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  touch-action: manipulation;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.rc-nav__btn { background: var(--c-blanco); color: var(--c-tinta); }
.rc-nav__btn[data-rc-prev] { padding: 0; }
.rc-nav__btn--next { background: var(--c-tinta); color: var(--c-blanco); }
.rc-nav__btn:disabled { opacity: .4; cursor: default; }
.rc-nav__flip { margin-left: auto; color: var(--c-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.rc-nav__btn:not(:disabled):active, .rc-nav__flip:active { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  .rc-nav__btn:not(:disabled):hover { background: var(--c-arena); color: var(--c-tinta); }
  .rc-nav__btn--next:hover svg { transform: translateX(3px); }
  .rc-nav__flip:hover { color: var(--c-terracota); }
}
.rc-nav__btn svg { transition: transform var(--dur-ui) var(--ease-out); }

/* ---- Pantalla del cliente -------------------------------------------------- */
.rc-screen {
  grid-column: 7 / -1;
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s-3);
  min-height: 560px;
  margin: 0;
  background: var(--c-arena);
  transition: background-color var(--dur-ui) ease;
}
.recorrido[data-mode="hoy"] .rc-screen { background: color-mix(in srgb, var(--c-grafito) 22%, var(--c-hueso)); }
.rc-tag { position: absolute; top: var(--s-3); left: var(--s-3); }
.rc-screen__cap {
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  color: var(--c-tinta);
  text-align: center;
}

.rc-phone {
  position: relative;
  width: 290px;
  height: 460px;
  padding: 34px 14px 16px;
  border-radius: 40px;
  background: var(--c-tinta);
  box-shadow: var(--shadow-3); /* flota sobre su fondo: es el objeto */
  font-family: var(--font-text);
  color: var(--c-tinta);
  transform: rotate(-2deg);
  transition: transform var(--dur-panel) var(--ease-out);
}
.recorrido[data-mode="hoy"] .rc-phone { transform: rotate(1.5deg); }
.rc-phone__notch {
  position: absolute;
  top: 12px; left: 50%;
  width: 84px; height: 16px;
  margin-left: -42px;
  border-radius: 10px;
  background: var(--c-tinta-2);
}
.rc-phone__view {
  position: relative;
  height: 100%;
  border-radius: 28px;
  background: var(--c-blanco);
  overflow: hidden;
}
.rc-scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.rc-scr.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.recorrido[data-instant] .rc-scr { transition: none; }
/* Sin JS: la pantalla del paso 1 con EnBlanco */
.recorrido:not([data-mode]) .rc-scr[data-scr="1-con"] { opacity: 1; visibility: visible; transform: none; }

/* Piezas de las pantallas (nunca menos de 13 px) */
.m-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  background: var(--c-hueso);
  color: var(--c-grafito);
}
.m-ico { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; flex: none; }
.m-card { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-sm); background: var(--c-hueso); }
.m-card--you { box-shadow: inset 0 0 0 2px var(--c-terracota); }
.m-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 64px; margin-bottom: 6px; }
.m-photos i { border-radius: 6px; background: var(--c-arena) center / cover no-repeat url("../assets/fotos/cocina-420.webp"); }
.m-photos i:nth-child(2) { background-image: url("../assets/fotos/bano-420.webp"); }
.m-photos i:nth-child(3) { background-image: url("../assets/fotos/sala-420.webp"); }
.m-name { font-family: var(--font-display); font-size: 16px; }
.m-meta, .m-open { color: var(--c-grafito); }
.m-open { color: var(--c-tinta); font-weight: 600; }
.m-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.m-btns em { font-style: normal; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); background: var(--c-blanco); }
.m-btns em.is-hot { background: var(--c-terracota); color: var(--c-blanco); }
.m-row { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-hueso); }
.m-row span { color: var(--c-grafito); }
.m-row--dim b { color: var(--c-grafito); } /* atenuado por tono, no por opacidad (contraste AA) */
.m-row--you { margin-top: auto; }
.m-site__nav { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); }
.m-site__nav span { font-family: var(--font-text); font-weight: 600; color: var(--c-grafito); }
.m-kicker { color: var(--c-grafito); margin-top: 18px; }
.m-title { font-family: var(--font-display); font-size: 26px; line-height: 1.02; letter-spacing: -0.03em; }
.m-title--sm { font-size: 22px; margin-top: 8px; }
.m-cta { align-self: flex-start; padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-terracota); color: var(--c-blanco); font-weight: 600; }
.m-cta--wide { align-self: stretch; text-align: center; }
.m-tiles { display: grid; gap: 6px; margin-top: auto; }
.m-tiles span { padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-hueso); font-weight: 600; }
.m-tiles span:first-child { background: var(--c-tinta); color: var(--c-blanco); }
.m-empty { margin: auto; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--c-grafito); }
.m-empty b { font-family: var(--font-display); font-size: 20px; color: var(--c-tinta); }
.m-empty__mark { width: 64px; height: 64px; border-radius: 16px; background: var(--c-hueso); position: relative; }
.m-empty__mark::before, .m-empty__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 4px; margin: -2px 0 0 -15px; border-radius: 2px; background: var(--c-grafito); transform: rotate(45deg); }
.m-empty__mark::after { transform: rotate(-45deg); }
.m-h { font-family: var(--font-display); font-size: 18px; }
.m-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 82px; gap: 6px; }
.m-gallery i { border-radius: 10px; background: var(--c-arena) center / cover no-repeat; position: relative; overflow: hidden; }
.m-gallery .g1 { grid-row: span 2; background-image: url("../assets/fotos/bano-420.webp"); background-position: 30% center; }
.m-gallery .g2 { background-image: url("../assets/fotos/cocina-420.webp"); }
.m-gallery .g3 { background-image: url("../assets/fotos/sala-420.webp"); }
.m-gallery .g4 { background-image: url("../assets/fotos/terraza-420.webp"); }
.m-gallery .g5 { grid-column: span 2; background-image: url("../assets/fotos/cocina-900.webp"); background-position: center 70%; }
.m-gallery--empty i { background: var(--c-hueso); }
.m-gallery--empty i:first-child { grid-row: auto; }
.m-or { align-self: center; color: var(--c-grafito); }
.m-field { padding: 9px 12px; border-radius: var(--r-xs); background: var(--c-hueso); color: var(--c-grafito); }
.m-note { color: var(--c-grafito); margin-top: auto; text-align: center; }
.m-label { align-self: center; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-hueso); font-weight: 600; }
.m-bubble { align-self: flex-start; max-width: 85%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--c-hueso); }
.m-bubble--out { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--c-tinta); color: var(--c-blanco); }
.m-bubble--draft { align-self: stretch; max-width: none; border-radius: var(--r-sm); background: var(--c-arena); }
.m-wait { display: inline-flex; gap: 4px; padding: 10px 12px; align-self: flex-end; border-radius: 14px; background: var(--c-hueso); }
.m-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-grafito); opacity: .5; }

/* ---- Pie ------------------------------------------------------------------ */
.rc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}
.rc-foot__note { font-size: var(--fs-2); color: var(--c-grafito); max-width: 52ch; }
.rc-foot__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  color: var(--c-blanco);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease;
}
.rc-foot__link svg { flex: none; transition: transform var(--dur-ui) var(--ease-out); }
@media (max-width: 559px) {
  .rc-foot__link { border-radius: var(--r-md); padding-block: 10px; }
}
.rc-foot__link:active { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  .rc-foot__link:hover { background: var(--c-terracota); }
  .rc-foot__link:hover svg { transform: translateX(3px); }
}

/* ---- Tableta ---------------------------------------------------------------- */
@media (max-width: 1079px) {
  .rc-copy { grid-column: 1 / span 7; }
  .rc-screen { grid-column: 8 / -1; min-height: 520px; }
  .rc-phone { width: 250px; height: 430px; }
}
@media (max-width: 899px) {
  .rc-stage { grid-template-columns: minmax(0, 1fr); }
  .rc-copy, .rc-screen { grid-column: 1; }
  .rc-screen { min-height: 0; padding-block: 72px 64px; }
}

/* ---- Teléfono: la ruta son 5 nodos; la etiqueta del paso va en el escenario -- */
@media (max-width: 767px) {
  .rc-head, .rc-head__side { justify-items: stretch; text-align: left; }
  .rc-head__title { justify-self: start; }
  .rc-mode { width: 100%; }
  .rc-mode__opt { padding: 0 12px; }
  .rc-route { --node: 44px; }
  .rc-tabs { gap: 4px; }
  .rc-rail { left: calc(10% - 1.6px); right: calc(10% - 1.6px); }
  .rc-tab { padding: 0; }
  .rc-tab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rc-rail__seg { margin-inline: calc(var(--node) / 2 + 4px); }
  .rc-nav__flip { margin-left: 0; }
  .rc-phone { width: 248px; height: 420px; }
}

/* ---- Movimiento reducido ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rc-phone, .recorrido[data-mode="hoy"] .rc-phone { transform: none; transition: none; }
  .rc-scr { transform: none; }
  .rc-rail__client { transition: none; }
  .rc-rail__seg::after { transition: opacity var(--dur-ui) ease; }
  .recorrido[data-mode] .rc-panel.is-on.is-anim { animation: rc-fade var(--dur-ui) ease; }
  .rc-tab[aria-selected="true"] .rc-tab__node { transform: none; }
  .rc-tab:active, .rc-mode__opt:active, .rc-nav__btn:active, .rc-nav__flip:active, @media (max-width: 559px) {
  .rc-foot__link { border-radius: var(--r-md); padding-block: 10px; }
}
.rc-foot__link:active { transform: none; }
  .rc-mode::before { transition: background-color var(--dur-ui) ease; }
}