/* ==========================================================================
   Recado: página de producto y legales de Recado.
   Se apoya en /assets/css/site.css (tema .theme-recado). Aquí va solo lo propio:
   el rótulo de «próximamente», las pruebas de Recado (transcripción, estado
   de la nota, chat, reloj, compromiso), los planes, la banda negra de «lo
   que no hace», las preguntas y los ajustes de lectura de sus legales.
   El rojo significa grabar. Nada más es rojo.
   ========================================================================== */

/* ---------- 1. Tema: ajustes locales ------------------------------------ */

/* En theme-recado, --mark-ink (blanco) sobre --mark-soft (#F1F1F1) no se
   lee: el marcador apagado va en negro y se invierte al encenderse. */
.theme-recado .ref,
.theme-recado .exhibit__caption .ref-num { color: var(--rc-texto); }
.theme-recado .ref.is-lit,
.theme-recado .ref[aria-expanded='true'] { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .theme-recado .ref:hover { color: #fff; }
}

/* Botones y flechas en el negro de Recado, no en la tinta de Olevior. */
.theme-recado .btn { --btn-bg: var(--rc-negro); }
.theme-recado .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-orb: var(--rc-hundido); }
@media (hover: hover) and (pointer: fine) {
  .theme-recado .channel:hover .door__go { background: var(--rc-negro); }
}

/* La barra de Recado es blanca y opaca: el wordmark solo vive sobre blanco. */
.theme-recado .product-bar {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.theme-recado .product-bar__brand img { height: 22px; }
@media (max-width: 1180px) and (min-width: 901px) {
  .theme-recado .product-bar__links a:nth-child(5) { display: none; }
}

/* El gris del «ado» del wordmark: la segunda voz de los titulares. */
.rc-gray { color: #666666; }

/* ---------- 2. Apertura -------------------------------------------------- */

.rc-hero .display { max-width: 12.5ch; }
.rc-fine {
  margin-top: 18px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-3);
}
.rc-fine a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--text-2); text-underline-offset: 0.2em; }

/* «Próximamente en el App Store» dice la verdad: no es un enlace ni un
   botón, es un rótulo. El filete punteado lo separa de lo que sí se toca. */
.rc-soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 22px 6px 18px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-pill);
  color: var(--text);
  white-space: nowrap;
  cursor: default;
}
.rc-soon svg { width: 17px; height: 21px; flex: none; fill: currentColor; }
.rc-soon__t { display: grid; line-height: 1.15; }
.rc-soon__t small { font-size: 0.75rem; color: var(--text-3); }
.rc-soon__t strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- 3. Olvido y cifras ------------------------------------------- */

.rc-statement { color: #666666; max-width: 19ch; }
.rc-statement strong { color: var(--text); font-weight: 500; }

.rc-figures { display: grid; border-top: 1px solid var(--rule); }
.rc-figures > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.rc-figures dt {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rc-figures dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }

/* ---------- 4. Listas del argumento -------------------------------------- */

.rc-list,
.rc-feats,
.rc-steps,
.rc-nots {
  list-style: none;
  margin: clamp(30px, 3.2vw, 44px) 0 0;
  padding: 0;
  max-width: 62ch;
  border-top: 1px solid var(--rule);
}
.rc-list > li { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.rc-list h3,
.rc-steps h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.016em; }
.rc-list p,
.rc-steps p { margin-top: 8px; color: var(--text-2); line-height: 1.65; }
.rc-list p strong,
.rc-feats strong { color: var(--text); font-weight: 600; }

.rc-feats .ref { font-size: max(var(--t-micro), 0.66em); vertical-align: 0.4em; }
.rc-feats li,
.rc-nots li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  line-height: 1.6;
}

.rc-aside {
  margin-top: 24px;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* Pasos: el número se enciende con el paso que estás leyendo. */
.rc-steps { counter-reset: rc-step; }
.rc-steps > li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 20px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--rule);
  counter-increment: rc-step;
}
.rc-steps > li::before {
  content: counter(rc-step);
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-2);
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.rc-steps > li.is-active::before { background: var(--rc-negro); color: #fff; box-shadow: none; }
.rc-steps h3 { grid-column: 2; padding-top: 5px; }
.rc-steps p { grid-column: 2; }

/* Tabla: lo que se hace en el reloj y lo que no */
.rc-table-wrap { margin-top: clamp(30px, 3.2vw, 40px); max-width: 62ch; overflow-x: auto; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.rc-table caption { caption-side: top; text-align: left; font-weight: 600; color: var(--text); padding-bottom: 12px; }
.rc-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-3);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--rule-2);
}
.rc-table td {
  width: 50%;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  vertical-align: top;
}

/* ---------- 5. Pruebas de Recado ---------------------------------------- */

/* Transcripción: quién dijo qué y en qué minuto */
.rc-lines { list-style: none; margin: 12px 0 0; padding: 0; }
.rc-lines li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--rc-linea);
  font-size: 0.875rem;
  line-height: 1.45;
}
.rc-lines b { font-weight: 600; color: var(--rc-texto); }
.rc-lines span { color: var(--rc-texto-2); }
.rc-lines time,
.rc-chat__who,
.rc-commit dt,
.rc-commit__quote small {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--rc-texto-2);
  font-variant-numeric: tabular-nums;
}

/* Estado de la nota: de grabar a lista. Cada paso leído deja su marca y el
   hilo baja al siguiente; es el único movimiento propio de la página. */
.rc-states { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.rc-state {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
}
.rc-state:not(:last-child)::before,
.rc-state:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 26px;
  bottom: -10px;
  width: 2px;
  border-radius: 1px;
  background: var(--rc-hundido);
}
.rc-state:not(:last-child)::after {
  background: var(--rc-negro);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 520ms var(--ease-out);
}
.rc-state[data-status='done']:not(:last-child)::after { transform: scaleY(1); }
.rc-state__mark {
  position: relative;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
  transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.rc-state__mark svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-ui) ease; }
.rc-state__mark::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--rc-negro);
  opacity: 0;
  transition: opacity var(--dur-ui) ease;
}
.rc-state[data-status='done'] .rc-state__mark { background: var(--rc-negro); box-shadow: none; }
.rc-state[data-status='done'] .rc-state__mark svg { opacity: 1; }
.rc-state[data-status='active'] .rc-state__mark { box-shadow: inset 0 0 0 1.5px var(--rc-negro); }
.rc-state[data-status='active'] .rc-state__mark::after { opacity: 1; }
/* Grabando es lo único rojo: el punto de grabar. */
.rc-state--rec[data-status='active'] .rc-state__mark::after { background: var(--rc-rojo); }
.rc-state__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 1px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rc-texto-3);
  transition: color var(--dur-ui) ease;
}
.rc-state__label span { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--rc-texto-3); }
.rc-state[data-status='done'] .rc-state__label,
.rc-state[data-status='active'] .rc-state__label { color: var(--rc-texto); }
.rc-state__detail {
  grid-column: 2;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rc-texto-3);
  transition: color var(--dur-ui) ease;
}
.rc-state[data-status='active'] .rc-state__detail { color: var(--rc-texto-2); }

/* Chat de la nota: una conversación con filetes, sin globos */
.rc-chat__turns { list-style: none; margin: 12px 0 0; padding: 0; }
.rc-chat__turn {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--rc-linea);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--rc-texto-2);
}
.rc-chat__who { padding-top: 1px; }
.rc-chat__turn--you { color: var(--rc-texto); font-weight: 500; }
.rc-chat__turn b { color: var(--rc-texto); font-weight: 600; }
.rc-chat__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding-top: 11px;
  border-top: 1px solid var(--rc-linea);
  font-size: 0.75rem;
  color: var(--rc-texto-3);
}

/* Botones dibujados dentro de las pruebas (no se tocan: son la app) */
.rc-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rc-ops span {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rc-texto-2);
  box-shadow: inset 0 0 0 1px var(--rc-linea);
}
.rc-ops span:first-child { background: var(--rc-negro); color: #fff; box-shadow: none; }

/* Compromiso detectado */
.rc-commit dl { margin: 12px 0 0; border-top: 1px solid var(--rc-linea); }
.rc-commit dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rc-linea);
  font-size: 0.875rem;
}
.rc-commit dt { padding-top: 2px; }
.rc-commit dd { margin: 0; color: var(--rc-texto); }
.rc-commit__quote { margin-top: 12px; font-size: 0.875rem; color: var(--rc-texto); }
.rc-commit__quote small { display: block; margin-top: 2px; }

/* Reloj: el cuerpo negro es la placa. El punto y el botón rojos son grabar. */
.exhibit--recado .exhibit__plate.rc-watch {
  width: min(232px, 100%);
  aspect-ratio: 41 / 50;
  border-radius: 27% / 22%;
  padding: 20px 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  background: var(--rc-negro);
  color: #fff;
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.6);
}
.exhibit--recado.is-lit .exhibit__plate.rc-watch {
  box-shadow: 0 0 0 4px rgba(16, 16, 16, 0.12), 0 24px 48px -26px rgba(0, 0, 0, 0.62);
}
.rc-watch::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 27%;
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: #2B2B2B;
}
.rc-watch__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.rc-watch__state i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc-rojo); }
.rc-watch__timer {
  font-family: var(--font-mono);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rc-watch__rec { width: 50px; height: 50px; border-radius: 50%; background: var(--rc-rojo); }
.rc-watch__note { max-width: 16ch; font-size: 0.75rem; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }

/* ---------- 6. Planes ----------------------------------------------------- */

/* Una sola pieza: lo que cambia, lado a lado y alineado; lo que es igual,
   una sola vez abajo. Pro se distingue por color, no por altura. */
.rc-terms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rc-terms li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; color: var(--text); }

.rc-plans {
  margin-top: clamp(40px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--r-plate);
  overflow: hidden;
  background: #fff;
}
.rc-plan {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: clamp(24px, 2.6vw, 36px);
}
.rc-plan + .rc-plan { box-shadow: inset 1px 0 0 var(--rule); }
.rc-plan--pro {
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.8);
  --text-3: rgba(255, 255, 255, 0.66);
  --rule: rgba(255, 255, 255, 0.18);
  background: var(--rc-negro);
  color: var(--text);
}
.rc-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-plan__head h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.rc-plan__tag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
}
.rc-plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 22px;
  font-size: 0.875rem;
  color: var(--text-3);
}
.rc-plan__price span {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rc-plan__year { margin-top: 12px; font-size: 0.9375rem; color: var(--text-2); }
.rc-plan__year b { color: var(--text); font-weight: 600; }
.rc-plan__use {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}
.rc-plan__use strong { color: var(--text); font-weight: 600; }
.rc-plan__fit { margin-top: 20px; font-size: 0.875rem; line-height: 1.5; color: var(--text-3); }
.rc-plans__both {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 28px;
  padding: 20px clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--rule);
}
.rc-plans__both p { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.rc-plans__both ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.rc-fineprint {
  margin-top: 22px;
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-3);
}
.rc-fineprint a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--text-2); text-underline-offset: 0.2em; }

@media (max-width: 900px) {
  .rc-plans { grid-template-columns: minmax(0, 1fr); }
  .rc-plan { display: block; grid-row: auto; }
  .rc-plan + .rc-plan { box-shadow: inset 0 1px 0 var(--rule); }
}

@media (max-width: 760px) {
  .rc-plans__both { grid-template-columns: minmax(0, 1fr); }
  .rc-plans__both ul { display: grid; gap: 6px; }
}

/* ---------- 7. Privacidad: los documentos -------------------------------- */

.rc-docs { display: grid; border-top: 1px solid var(--rule); }
.rc-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.rc-doc:active .door__go { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .rc-doc:hover .door__go { background: var(--rc-negro); color: #fff; box-shadow: none; transform: translate(2px, -1px); }
}

/* ---------- 8. Lo que Recado no hace: banda negra ------------------------ */

.rc-band {
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.78);
  --text-3: rgba(255, 255, 255, 0.64);
  --rule: rgba(255, 255, 255, 0.16);
  --rule-2: rgba(255, 255, 255, 0.28);
  --mark: #FFFFFF;
  --mark-text: #FFFFFF;
  --mark-soft: rgba(255, 255, 255, 0.14);
  --mark-ink: var(--rc-negro);
  --focus: #FFFFFF;
  padding-block: var(--section);
  background: var(--rc-negro);
  color: var(--text);
}
.rc-band ::selection { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---------- 9. Preguntas frecuentes -------------------------------------- */

.rc-faq { margin-top: clamp(28px, 3vw, 40px); max-width: 62ch; border-top: 1px solid var(--rule); }
.rc-faq details { border-bottom: 1px solid var(--rule); }
.rc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary::after {
  content: '';
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.rc-faq details[open] > summary::after { transform: rotate(45deg); background-color: var(--rc-negro); color: #fff; box-shadow: none; }
.rc-faq__a { padding: 0 0 22px; }
.rc-faq__a p { color: var(--text-2); line-height: 1.65; }
.rc-faq__a a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- 10. Cierre --------------------------------------------------- */

.rc-close .actions { margin-top: 4px; }

/* ---------- 11. Legales de Recado ---------------------------------------- */

.doc .summary { margin-top: 2.4em; }
.doc .summary h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}
.doc .summary ul { margin-top: 0; }
.doc .summary li { color: var(--text-2); }
.doc > .doc__intro { font-size: 1.125rem; line-height: 1.6; color: var(--text); }
.doc .updated { margin-top: 3em; }

/* Un índice de veinte entradas no cabe siempre en pantalla: se desplaza solo. */
.reading__margin > .sticky {
  max-height: calc(100dvh - var(--sticky-offset) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1023px) {
  .reading__margin > .sticky { max-height: none; overflow: visible; }
}

/* ---------- 12. Movimiento reducido ------------------------------------- */

/* Se queda el cambio de color y de luz; se va lo que viaja o gira. */
@media (prefers-reduced-motion: reduce) {
  .rc-state:not(:last-child)::after,
  .rc-faq summary::after { transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
  .rc-doc:hover .door__go,
  .rc-doc:active .door__go { transform: none; }
}