/* ==========================================================================
   RH Firms and More — Diseño 7: "Archivo"
   Combinación pedida por el cliente: los COLORES y la atmósfera del #1
   Profundidad, con la FORMA DE MOSTRAR LA INFORMACIÓN del #5 Vitrina.

   La síntesis no es pegar uno al lado del otro: las carpetas heredan el
   lenguaje de profundidad. Al abrirse se LEVANTAN del campo oscuro con
   sombra y un filo de luz en el borde superior, como si salieran del cajón.

   Paleta: solo los tres colores del logo, igual que el #1. Sin acento.
   Contrastes verificados por cálculo.
   ========================================================================== */

:root {
  /* Idénticos al diseño 1 — es lo que el cliente aprobó. */
  --bg: oklch(0.18 0.03 232);          /* #03141d */
  --bg-2: oklch(0.235 0.035 232);      /* #0b212c */
  --brand: oklch(0.349 0.041 232);     /* #233e4c — azul exacto del logo */
  --brand-lift: oklch(0.42 0.045 232);

  --text: oklch(0.97 0.005 232);       /* 17.21:1 sobre bg */
  --dim: oklch(0.76 0.012 250);        /* 8.74:1 sobre bg */
  --grey: oklch(0.652 0.008 261);      /* #8d9095 — 5.84:1 sobre bg */

  --line: oklch(0.97 0.005 232 / 0.14);
  --line-soft: oklch(0.97 0.005 232 / 0.07);

  --font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.2rem;
  --fs-3xl: 2.75rem;
  --fs-display: clamp(2.6rem, 5.4vw, 4.5rem);
  --fs-mega: clamp(2.4rem, 10.5vw, 8.5rem);

  --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-sm: 1rem;
  --sp-md: 1.5rem; --sp-lg: 2.25rem; --sp-xl: 3.5rem;
  --sp-2xl: clamp(4rem, 9vw, 8rem);
  --sp-3xl: clamp(5.5rem, 13vw, 12rem);

  --container: 78rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;

  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;

  --z-bg: 0; --z-content: 10; --z-sticky: 200; --z-header: 300;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  font-synthesis-weight: none; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--text); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--grey); outline-offset: 3px; border-radius: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: -100%; left: var(--gutter); z-index: 999; background: var(--text); color: var(--bg); padding: var(--sp-2xs) var(--sp-md); border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: var(--sp-sm); }

/* --- Botones ------------------------------------------------------------ */
.ctas { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2xs);
  min-height: 52px; padding: var(--sp-2xs) var(--sp-lg);
  border: 1px solid transparent; border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.btn svg { flex: none; }
.btn__num { font-variant-numeric: tabular-nums; margin-inline-start: 0.35em; }
.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover { background: var(--grey); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--text); background: oklch(0.97 0.005 232 / 0.08); }
@media (hover: hover) { .btn:hover { translate: 0 -2px; } }
.btn:active { translate: 0 1px; }

/* --- Cabecera ---------------------------------------------------------- */
.header { position: relative; z-index: var(--z-header); padding-block: var(--sp-md); border-bottom: 1px solid var(--line-soft); }
.header__inner { display: flex; align-items: center; gap: var(--sp-md); }
.header__logo { display: flex; align-items: center; gap: var(--sp-xs); margin-inline-end: auto; min-width: 0; }
.header__mark { height: 42px; width: auto; }
.header__word { height: 30px; width: auto; }
.header__nav { display: flex; gap: var(--sp-md); }
.header__nav a { color: var(--dim); text-decoration: none; font-size: var(--fs-sm); padding-block: var(--sp-2xs); border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.header__nav a:hover { color: var(--text); border-bottom-color: var(--grey); }
@media (max-width: 60rem) { .header__nav { display: none; } }
@media (max-width: 34rem) {
  .header__mark { height: 34px; } .header__word { height: 22px; }
  .header__cta .btn__label { display: none; }
  .header__cta .btn { min-width: 52px; justify-content: center; padding-inline: var(--sp-sm); }
}

/* ==========================================================================
   Héroe — las tres capas del diseño 1: aurora, monograma, grano.
   ========================================================================== */

.hero { position: relative; isolation: isolate; padding-block: var(--sp-xl) var(--sp-2xl); overflow: hidden; }

.hero__aurora {
  position: absolute; inset: -20% -10%; z-index: var(--z-bg); pointer-events: none;
  background:
    radial-gradient(48% 42% at 22% 18%, oklch(0.42 0.045 232 / 0.85), transparent 70%),
    radial-gradient(40% 38% at 82% 72%, oklch(0.349 0.041 232 / 0.7), transparent 72%);
  filter: blur(28px);
}

.hero__mark {
  position: absolute; z-index: var(--z-bg); top: 50%; right: -6vw;
  width: min(62vw, 46rem); translate: 0 -50%; opacity: 0.055; pointer-events: none;
  transform: translateY(calc(var(--parallax, 0) * 1px));
}

.hero__grain {
  position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

.hero__inner { position: relative; z-index: var(--z-content); }
.hero__h1 { font-size: var(--fs-display); letter-spacing: -0.03em; max-width: 22ch; }
.hero__h1 em { color: var(--grey); font-style: italic; font-weight: 500; }
.hero__lead { margin-block-start: var(--sp-md); font-size: var(--fs-lg); color: var(--dim); max-width: 52ch; line-height: 1.5; }
.hero__ctas { margin-block-start: var(--sp-lg); }
.hero__note { margin-block-start: var(--sp-sm); font-size: var(--fs-sm); color: var(--grey); }

/* ==========================================================================
   EL CAJÓN DE EXPEDIENTES (del diseño 5) CON PROFUNDIDAD (del diseño 1).
   Al abrirse, la carpeta se levanta del campo oscuro: sombra abajo y un
   filo de luz en el borde superior. Ahí se juntan las dos ideas.
   ========================================================================== */

.drawer { padding-block: var(--sp-2xl); border-top: 1px solid var(--line-soft); }

/* El retrato ocupa la columna derecha ENTERA — junto al titular y junto a
   las carpetas — en vez de solo la fila del titular. Alinearlo únicamente
   con el titular obligaba a bajar el texto y abría un hueco arriba peor
   que el que se quería llenar. */
.drawer__grid {
  display: grid;
  /* 15rem (240px), bajado de 19rem: a 304px el retrato pesaba demasiado
     frente a las carpetas, que son el contenido principal. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  grid-template-areas:
    'head portrait'
    'files portrait';
  gap: var(--sp-lg) var(--sp-lg);
  align-items: start;
}
.drawer__head { grid-area: head; }
.portrait { grid-area: portrait; }
.files { grid-area: files; }

/* Se queda a la vista mientras abres carpetas: la persona acompaña la
   consulta en vez de desaparecer al primer scroll. */
@media (min-width: 52rem) {
  .portrait { position: sticky; top: var(--sp-md); }
}

.drawer__head h2 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
.drawer__head p { margin-block-start: var(--sp-sm); font-size: var(--fs-lg); color: var(--dim); max-width: var(--measure); line-height: 1.5; }

/* ==========================================================================
   EL RETRATO. Tres tratamientos encima de la foto, todos al servicio del
   mismo lenguaje de profundidad de esta versión:

   1. Duotono al azul de marca. La foto original tiene un fondo degradado
      azul-dorado y un archivador que peleaban con la paleta; en duotono la
      imagen pasa a pertenecer al sistema en vez de competir con él.
   2. El borde inferior se disuelve con `mask-image`, así que él emerge del
      campo oscuro en lugar de ser un rectángulo pegado.
   3. Levantado: `drop-shadow` (que respeta la máscara, al contrario que
      `box-shadow`) más un filo de luz de 1px arriba. Es el mismo relieve
      que toma una carpeta al abrirse.
   ========================================================================== */

.portrait { margin: 0; }

/* La sombra va en el envoltorio: `filter: drop-shadow` sigue el canal alfa
   de la máscara, mientras que un `box-shadow` dibujaría el rectángulo duro
   por debajo del degradado de disolución. */
.portrait__lift {
  filter: drop-shadow(0 22px 34px oklch(0.1 0.02 232 / 0.75));
}

.portrait__frame {
  position: relative;
  /* Aísla la mezcla: sin esto el duotono se mezclaría con el fondo de la
     página en vez de solo con la foto. */
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, oklch(0 0 0 / 0.35) 86%, transparent 100%);
}

.portrait__frame img {
  display: block;
  width: 100%;
  height: auto;
  /* A escala de grises primero: es lo que permite que la capa de color
     de arriba produzca un duotono limpio. */
  filter: grayscale(1) contrast(1.06) brightness(0.94);
}

.portrait__tint {
  position: absolute;
  inset: 0;
  background: var(--brand-lift);
  /* `color` toma el tono y la saturación de esta capa y la luminosidad de
     la foto: duotono de verdad, no un velo encima. */
  mix-blend-mode: color;
  opacity: 0.85;
}

/* El mismo grano del héroe: cose el retrato al resto de la página. */
.portrait__grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* SIN filo de luz en el borde superior.
   Lo llevaba (1px casi blanco, igual que las carpetas al abrirse) para dar
   relieve, pero sobre una fotografía no lee como un bisel: lee como una
   línea blanca a todo lo ancho, o sea como un error de renderizado. Sobre
   las carpetas funciona porque son color plano; sobre una foto no.
   La elevación la carga la sombra proyectada del envoltorio, que basta. */

.portrait__cap {
  margin-block-start: var(--sp-xs);
  display: grid;
  gap: 0.1rem;
}
.portrait__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.portrait__role { font-size: var(--fs-sm); color: var(--grey); }

/* Móvil y tablet: una columna, con el retrato entre el titular y las
   carpetas (ese es su orden en el HTML, así que no hace falta reordenar).
   Se limita el ancho para no empujar las carpetas fuera de la pantalla:
   la prioridad sigue siendo llegar a ellas y al teléfono. */
/* Punto de quiebre bajado de 62rem (992px) a 52rem (832px): a 992 se
   apilaba en ventanas de portátil perfectamente anchas y la foto salía
   arriba a todo el ancho, que es justo lo que no se quería. */
@media (max-width: 52rem) {
  .drawer__grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'portrait' 'files';
  }
  /* Y bien pequeña si le toca apilarse: aquí la prioridad es llegar a las
     carpetas y al teléfono, no admirar el retrato.
     El límite va sobre la imagen, NO sobre la figura: en la figura también
     encogía el pie de foto y partía "Rigoberto Hernandez" en dos líneas. */
  .portrait__lift { max-width: 11rem; }
}

.files { list-style: none; padding: 0; margin: 0; }
.file-item { margin-block-end: var(--sp-xs); }

/* La pestaña. Cerrada es un plano un paso por encima del fondo. */
.file__tab {
  display: flex; align-items: center; gap: var(--sp-2xs);
  width: fit-content; max-width: 100%;
  min-height: 52px; padding: var(--sp-2xs) var(--sp-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--text);
  transition: background-color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.file__tab::-webkit-details-marker { display: none; }
.file__tab:hover { background: var(--brand); border-color: var(--brand-lift); }

.file__chev { flex: none; color: var(--grey); transition: rotate var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.file[open] .file__chev { rotate: 90deg; color: var(--text); }

/* Abierta: sube al plano del azul de marca y toma el filo de luz. */
.file[open] .file__tab {
  background: var(--brand);
  border-color: var(--brand-lift);
  box-shadow: inset 0 1px 0 oklch(0.97 0.005 232 / 0.16);
}

/* El cuerpo de la carpeta LEVANTADO: es la síntesis de los dos diseños. */
.file__body {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: var(--sp-lg);
  box-shadow:
    inset 0 1px 0 oklch(0.97 0.005 232 / 0.1),
    0 20px 46px -16px oklch(0.1 0.02 232 / 0.85);
}

.file__solves { color: var(--dim); max-width: 62ch; }

/* Enlace a la página completa del trámite, al pie de la carpeta abierta. */
.file__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  width: 100%;
  margin-block-start: var(--sp-sm);
  padding-block-start: var(--sp-2xs);
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.file__more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.file__cols { display: grid; gap: var(--sp-md) var(--sp-xl); grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-block-start: var(--sp-md); padding-block-start: var(--sp-md); border-top: 1px solid var(--line-soft); }
.file__k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.file__cols ul { margin: var(--sp-2xs) 0 0; padding-inline-start: 1.15em; display: grid; gap: var(--sp-3xs); font-size: var(--fs-sm); color: var(--dim); }
.file__cols p.t { margin-block-start: var(--sp-2xs); font-size: var(--fs-sm); color: var(--dim); }
.file__cta { margin-block-start: var(--sp-md); }
@media (max-width: 46rem) { .file__cols { grid-template-columns: 1fr; } }

/* Escalonado de pestañas: SOLO cuando hay ancho. Aplicarlo dentro de
   `min-width` en vez de anularlo después evita el choque de especificidad
   que sacaba las pestañas fuera de pantalla en el diseño 5. */
@media (min-width: 46rem) {
  .file-item:nth-child(2) .file__tab,
  .file-item:nth-child(5) .file__tab { margin-inline-start: 2.4rem; }
  .file-item:nth-child(3) .file__tab,
  .file-item:nth-child(6) .file__tab { margin-inline-start: 4.8rem; }
  .file-item:nth-child(4) .file__tab { margin-inline-start: 7.2rem; }

  .file-item:nth-child(2) .file__body,
  .file-item:nth-child(5) .file__body { margin-inline-start: 2.4rem; }
  .file-item:nth-child(3) .file__body,
  .file-item:nth-child(6) .file__body { margin-inline-start: 4.8rem; }
  .file-item:nth-child(4) .file__body { margin-inline-start: 7.2rem; }
}

@media (max-width: 46rem) { .file__tab { width: 100%; } }

/* --- Banda de confianza ------------------------------------------------- */
.trust { background: var(--brand); padding-block: var(--sp-xl); }
.trust__grid { display: grid; gap: var(--sp-lg) var(--sp-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.trust__item h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--grey); }
.trust__item p { margin-block-start: var(--sp-2xs); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; }

/* --- Revelado al hacer scroll, SIN JavaScript ---------------------------
   Animaciones ligadas al scroll (`animation-timeline: view()`). El estado
   por defecto es VISIBLE: donde el navegador no lo soporta (Safari,
   Firefox por ahora) el contenido simplemente se ve, sin animación.

   Antes esto lo hacía un IntersectionObserver que ponía opacidad 0 y la
   subía al entrar. Funcionaba, pero dejaba la visibilidad del contenido a
   merced de que el script corriera: si el JS se bloquea o el observador no
   dispara, la sección se queda en blanco. Para el sitio de un cliente eso
   no es aceptable, y con CSS no hace falta asumir ese riesgo. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}

@keyframes reveal-rise {
  from { opacity: 0; translate: 0 1.5rem; filter: blur(6px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* --- Persona ------------------------------------------------------------ */
.persona { padding-block: var(--sp-2xl); }
.persona__grid { display: grid; gap: var(--sp-xl); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.persona__quote { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
.persona__body { margin-block-start: var(--sp-md); color: var(--dim); max-width: var(--measure); }
.persona__card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-md); background: var(--bg-2); box-shadow: inset 0 1px 0 oklch(0.97 0.005 232 / 0.1); }
.persona__mark { width: 68px; opacity: 0.9; }
.persona__name { margin-block-start: var(--sp-sm); font-family: var(--font-display); font-size: var(--fs-lg); }
.persona__role { margin-block-start: var(--sp-3xs); font-size: var(--fs-sm); color: var(--grey); }
@media (max-width: 54rem) { .persona__grid { grid-template-columns: 1fr; } }

/* --- Cierre ------------------------------------------------------------- */
.closing { position: relative; isolation: isolate; padding-block: var(--sp-2xl) var(--sp-xl); overflow: hidden; border-top: 1px solid var(--line-soft); }
.closing__aurora { position: absolute; inset: -30% -10%; z-index: var(--z-bg); pointer-events: none; background: radial-gradient(50% 60% at 50% 100%, oklch(0.42 0.045 232 / 0.8), transparent 70%); filter: blur(30px); }
.closing__inner { position: relative; z-index: var(--z-content); text-align: center; }
.closing h2 { font-size: var(--fs-3xl); }
.closing__lead { margin: var(--sp-sm) auto 0; max-width: 48ch; color: var(--dim); font-size: var(--fs-lg); }
.closing__phone {
  display: inline-block; margin-block: var(--sp-md);
  font-family: var(--font-display); font-size: var(--fs-mega); font-weight: 600;
  line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--text); text-decoration: none;
}
.closing__phone:hover { color: var(--grey); }
.closing .ctas { justify-content: center; }

/* --- Pie ---------------------------------------------------------------- */
.footer { background: var(--bg-2); padding-block: var(--sp-xl) var(--sp-lg); border-top: 1px solid var(--line-soft); }
.footer__grid { display: grid; gap: var(--sp-lg) var(--sp-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.footer__logo img { height: 58px; width: auto; }

/* Horario, dirección y enlace al mapa, bajo el logotipo del pie. */
.footer__meta {
  margin-block-start: var(--sp-2xs);
  color: var(--dim);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.5;
}
.footer__meta:first-of-type { margin-block-start: var(--sp-sm); }
.footer__meta a { color: var(--dim); text-decoration: underline; text-underline-offset: 0.2em; }
.footer__meta a:hover { color: var(--text); }
.footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--grey); margin-block-end: var(--sp-xs); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3xs); }
.footer a { color: var(--dim); text-decoration: none; font-size: var(--fs-sm); display: inline-block; padding-block: 0.3em; }
.footer a:hover { color: var(--text); text-decoration: underline; }
.footer__legal { margin-block-start: var(--sp-xl); padding-block-start: var(--sp-md); border-top: 1px solid var(--line-soft); color: var(--grey); font-size: var(--fs-xs); display: grid; gap: var(--sp-3xs); }
.footer__legal p { max-width: 68ch; }

/* --- Barra fija de contacto en móvil ------------------------------------ */
.callbar { display: none; }
@media (max-width: 54rem) {
  .callbar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: var(--sp-2xs); min-height: 58px; background: var(--bg-2); color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
  .callbar a:first-child { background: var(--text); color: var(--bg); }
  body { padding-bottom: 58px; }
}

/* Pantallas muy estrechas: las etiquetas de botón pueden partirse antes
   que forzar el ancho y sacar el contenido de la pantalla. */
@media (max-width: 30rem) {
  .btn { white-space: normal; padding-inline: var(--sp-md); }
  .file__body { padding: var(--sp-md); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .btn:active { translate: none; }
  .hero__mark { transform: none; }
  .file__tab, .file__chev { transition: none; }
}