/* NOTA DE COLOR · DÓNDE VA CADA TOKEN DEL ÁREA.
 *   · `--color-area`        pinta: glow, realces, fondos. Es el color del
 *                           manual y no cambia con el tema.
 *   · `--color-area-texto`  se LEE: cualquier texto y cualquier borde que
 *                           delimite una pieza. En claro es el tono oscurecido
 *                           que pasa AA; en oscuro vuelve a ser el vivo.
 * Los seis colores del manual sobre papel dan de 1.31:1 a 2.73:1 — invisibles.
 * Lo cazó una auditoría externa el 2026-08-12 y `comprobar-sistema.ts` lo
 * vigila desde entonces con las doce combinaciones.
 */
/* ═══════════════════════════════════════════════════════════════════════════
 * LA PÁGINA DE UN ÁREA · /servicios/<area>
 *
 * DOS FORMAS Y UN SOLO SISTEMA, decidido sobre maquetas el 2026-08-12:
 *
 *   · EN ESCRITORIO manda la LECTURA. La ficha del área se queda pegada a la
 *     izquierda mientras se leen los servicios, con la auditoría siempre en
 *     pantalla: quien llega comparando no pierde de vista la llamada.
 *   · EN CELULAR manda el CINE. La misma ficha se convierte en portada —icono
 *     centrado, vecinos asomando por las orillas— y la llamada baja a una
 *     barra fija. Los casos van a todo el ancho, con su foto real.
 *
 * Y ES UNA SOLA PLANTILLA: el HTML no cambia entre tamaños, solo se recoloca.
 * Un elemento que existe dos veces —uno para escritorio y otro para el móvil—
 * es un elemento que un día dice dos cosas distintas.
 *
 * LA ORILLA ES LA DEL SITIO, Y ESTO SE PIDIÓ EXPRESAMENTE. Nada de bordes
 * finos ni de grosores que cambian con el estado: `2px` del color del área,
 * igual en todo, como en las tarjetas de la portada. Lo que distingue a la
 * pieza activa es el GLOW de su color, no un borde más gordo. Y al pasar el
 * cursor se eleva un poco, como el resto de la casa.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── La reja ────────────────────────────────────────────────────────────── */

.area { padding-block: var(--e6) var(--e7); }

.area-cuerpo { display: grid; gap: var(--e6); align-items: start; }

@media (min-width: 62rem) {
  .area-cuerpo { grid-template-columns: 20rem 1fr; gap: var(--e7); }
}

/* ── La ficha del área ──────────────────────────────────────────────────── */
/*
 * EN CELULAR ES LA PORTADA y por eso lleva el baño de color: un degradado del
 * color del área que nace arriba y se apaga. En escritorio ese mismo degradado
 * es lo que hace que la columna izquierda se lea como una ficha y no como una
 * lista de enlaces sueltos.
 */
.area-ficha {
  position: relative;
  padding: var(--e5) var(--e4) var(--e4);
  border: 2px solid var(--color-area-texto, var(--acento-fondo));
  border-radius: var(--radio-tarjeta);
  background:
    radial-gradient(20rem 14rem at 50% 0%, color-mix(in srgb, var(--color-area) 14%, transparent), transparent 70%),
    var(--superficie);
  text-align: center;
}

@media (min-width: 62rem) {
  /* LA FICHA SE AJUSTA A LA VENTANA, y por eso no se arrastra.
   *
   * `position: sticky` sola no basta: si la ficha es MÁS ALTA que la ventana
   * —932px contra 760 medidos el 2026-08-12— el navegador no puede fijarla, y
   * lo que hace es dejarla correr con la página hasta que su base entra en
   * cuadro. Desde fuera parece que el menú «se mueve» y luego se detiene.
   *
   * Con el alto limitado a la ventana la ficha SIEMPRE cabe, así que se fija
   * desde el primer píxel de desplazamiento y no se mueve hasta que el
   * expediente se acaba —que es lo que se pidió—. Si su contenido no cupiera,
   * se desplaza por dentro en vez de empujar la página.
   *
   * `100dvh` y no `100vh`: en el móvil de escritorio con barra dinámica, `vh`
   * mide la ventana SIN la barra y la ficha volvería a sobrar por unos píxeles. */
  .area-ficha {
    position: sticky;
    /* SE DESCUENTA LA BARRA, y esto era lo que faltaba. La cabecera del sitio
     * es PEGAJOSA: el espacio libre no es la ventana entera, es la ventana
     * menos la barra. Con `top: 2rem` la ficha se fijaba DEBAJO de la barra
     * —su cabecera quedaba tapada— y con el alto calculado sobre la ventana
     * completa le sobraban 66px que se salían por abajo: medido el 2026-08-12,
     * ficha de 686px empezando en 140 sobre una ventana de 760. Se movía y se
     * cortaba a la vez, que es justo lo que se veía.
     *
     * Se reutiliza `calc(var(--alto-barra) + var(--e3))`, la MISMA expresión
     * con la que `comun.css` separa del encabezado cualquier ancla del sitio.
     * Escribir aquí otro número sería tener dos: el día que la barra cambie de
     * alto, uno de los dos se quedaría atrás. */
    top: calc(var(--alto-barra) + var(--e3));
    text-align: left;
    max-height: calc(100dvh - var(--alto-barra) - var(--e3) - var(--e2));
    overflow-y: auto; overscroll-behavior: contain;
    /* Y EL CONTENIDO SE COMPACTA PARA QUE QUEPA DE VERDAD. Con las medidas de
       la portada la ficha pedía 928px para un hueco de 639: sobraban 289 y el
       tope los cortaba por dentro, que es «ajustado» solo de nombre. Aquí no
       se quita NADA —siguen el icono, los datos, las dos llamadas, el dial y
       los vecinos—: se aprieta. Solo en escritorio; el cine del celular no se
       toca. */
    padding: var(--e4) var(--e3) var(--e3);
    /* La barra se esconde, como ya se hace en el menú de la cabecera por la
       misma razón: es una pieza de marca, no un panel de aplicación, y una
       barra gris cruzándole la orilla de color estropea justo lo que la
       tarjeta viene a hacer. El desplazamiento sigue funcionando. */
    scrollbar-width: none;
  }
  .area-ficha::-webkit-scrollbar { display: none; }

}

/* El icono, protagonista. Es lo que vuela desde la portada: su tamaño aquí y
   el de allá tienen que ser distintos —si fueran iguales el viaje no se ve—,
   pero la forma es la misma pieza del manual, sin redibujar. */
/* EL ICONO VA ENMARCADO EN SU COLOR, no pegado. Sin marco, el cuadrado oscuro
   del SVG flotaba sobre el hero como una calcomanía — lo dijo el director
   viéndolo. Es el mismo lenguaje que las estaciones del riel de la portada y
   que el dial: loseta con la orilla de 2px del color del área, siempre del
   mismo ancho. El glow se queda: es lo que dice «estás aquí». */
.area-icono {
  display: block; width: 7rem; height: auto;
  margin: 0 auto var(--e3);
  padding: .35rem;
  border: 2px solid var(--color-area-texto, var(--acento-fondo));
  border-radius: var(--radio-caja);
  background: var(--superficie-alta);
  filter: drop-shadow(0 0 1.5rem color-mix(in srgb, var(--color-area) 55%, transparent));
}
@media (min-width: 62rem) { .area-icono { margin-inline: 0; } }

.area-estacion {
  font-family: var(--fuente-titulo); font-size: var(--t-pie);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-area-texto, var(--acento)); margin: 0;
}

.area-ficha h1 { font-size: var(--t-h1); line-height: 1.05; margin: var(--e0) 0 var(--e2); }
/* EL TÍTULO, MÁS CHICO EN LA COLUMNA — Y ESTA REGLA VA AQUÍ, NO ARRIBA.
 * A tamaño de portada «Multimedia» mide más que los 20rem de la ficha y el
 * navegador lo parte a mitad de palabra: «Multimedi / a».
 *
 * Estuvo escrita junto al resto de lo de escritorio, veinte líneas más arriba,
 * y NO HACÍA NADA: misma especificidad que la regla base y declarada antes que
 * ella, así que la base ganaba por orden. Es el mismo fallo que dejó el botón
 * de WhatsApp en gris sobre verde. Una media query no sube la especificidad.
 *
 * En el celular la ficha ocupa el ancho entero y ahí sí cabe: por eso la
 * reducción vive solo en escritorio. */
@media (min-width: 62rem) {
  .area-ficha h1 { font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.4rem); }
}
.area-lede { color: var(--texto-suave); margin: 0 0 var(--e4); }

.area-datos { margin: 0 0 var(--e4); }
.area-datos > div {
  display: flex; justify-content: space-between; gap: var(--e2);
  border-top: 1px solid var(--borde); padding: var(--e2) 0;
}
.area-datos dt { color: var(--texto-suave); font-size: var(--t-pie); }
.area-datos dd {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* El dial de las seis áreas: se salta de cualquiera a cualquiera sin volver a
   la portada. La activa se marca con el glow de su color, nunca con un borde
   distinto — el ancho es el mismo en las seis. */
.area-dial {
  display: flex; flex-wrap: wrap; gap: var(--e0);
  justify-content: center; margin-top: var(--e4);
}
@media (min-width: 62rem) { .area-dial { justify-content: flex-start; } }

.area-dial-pt {
  display: grid; place-items: center;
  /* Seis de 2.9rem con su hueco no caben en los 20rem de la ficha y el sexto
     se iba a una segunda fila. El dial son SEIS y se leen de un golpe o no se
     leen: 2.55rem es lo que entra con el hueco mínimo. */
  width: 2.55rem; height: 2.55rem; padding: .15rem;
  border: 2px solid var(--color-area-texto);
  border-radius: var(--radio-caja);
  background: var(--superficie-alta);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.area-dial-pt img { width: 100%; height: auto; opacity: .85; }
.area-dial-pt:hover { transform: translateY(-3px); }
.area-dial-pt.es-activa {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area) 50%, transparent),
              0 0 1.1rem color-mix(in srgb, var(--color-area) 60%, transparent);
}
.area-dial-pt.es-activa img { opacity: 1; }

/* Los vecinos. En celular asoman por las orillas de la portada —se ve que hay
   más estaciones sin leer nada—; en escritorio son el anterior y el siguiente
   al pie de la ficha. Mismo marcado. */
.area-vecinos {
  display: flex; justify-content: space-between; gap: var(--e2);
  margin-top: var(--e4); border-top: 1px solid var(--borde); padding-top: var(--e3);
}
.area-vecinos a {
  display: flex; align-items: center; gap: var(--e2);
  text-decoration: none; color: var(--texto);
  border-bottom: 2px solid var(--color-area-texto); padding-bottom: var(--e1);
  transition: transform var(--transicion-rapida);
}
/* El siguiente se lee hacia su borde: icono al canto de la dirección. */
.area-vecinos a:last-child { flex-direction: row-reverse; text-align: right; }
.area-vecinos a:hover { transform: translateY(-2px); }
.area-vecinos img { width: 2.2rem; height: auto; flex: none; border-radius: var(--radio); }
.area-vecino-t { display: grid; gap: 1px; }
.area-vecino-t span { font-size: .72rem; color: var(--texto-suave); }
.area-vecino-t strong { font-family: var(--fuente-titulo); font-size: var(--t-pie); line-height: 1.2; }

/* ── El contenido ──────────────────────────────────────────────────────── */
/*
 * ES UNA COLUMNA FLEX POR EL ORDEN, no por el reparto: el diseño pactado pone
 * el CASO ESTRELLA arriba en escritorio (se ve trabajo hecho antes de leer) y
 * DESPUÉS de los servicios en el celular, como en la maqueta C3. Reordenar
 * entre tamaños sin duplicar el marcado solo lo hace `order`.
 */
.area-contenido { display: flex; flex-direction: column; }

.area-miga {
  font-size: var(--t-pie); letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave); margin: 0 0 var(--e3);
}
.area-miga b { color: var(--color-area, var(--acento)); }

/* La estrella: un hero de imagen con el texto ENCIMA de la foto. */
.area-estrella { margin-bottom: var(--e5); }
.area-estrella .area-caso-destacado { margin-bottom: 0; }

.area-seccion { margin-bottom: var(--e6); }
.area-seccion > h2 {
  font-size: var(--t-h2); margin-bottom: var(--e4);
  padding-bottom: var(--e2); border-bottom: 2px solid var(--color-area-texto);
}

/* Los servicios: filetes y no cajas —es la lista más larga de la página, doce
   en Marketing— con la MINIATURA de trabajo real a la izquierda y el número al
   canto derecho, como en la maqueta. La miniatura enlaza el caso; la loseta
   neutra (icono del área apagado) es un servicio sin caso que lo ilustre. */
.area-servicios { list-style: none; padding: 0; margin: 0; }
.area-servicios li {
  display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; gap: var(--e3);
  align-items: center;
  padding: var(--e3) 0; border-bottom: 1px solid var(--borde);
}
.area-servicios li:first-child { border-top: 1px solid var(--borde); }
.area-servicio-foto {
  display: block; border-radius: var(--radio-caja); overflow: hidden;
  background: var(--superficie-alta);
}
.area-servicio-foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.area-servicio-foto.es-vacia { display: grid; place-items: center; aspect-ratio: 3 / 2; }
.area-servicio-foto.es-vacia img { width: 55%; aspect-ratio: auto; opacity: .35; }
.area-servicio-n {
  font-family: var(--fuente-titulo); font-size: var(--t-pie); font-weight: 700;
  color: var(--color-area-texto, var(--acento)); font-variant-numeric: tabular-nums;
  align-self: start; text-align: right;
}
.area-servicio-t strong { display: block; font-family: var(--fuente-titulo); font-size: var(--t-h3); }
.area-servicio-p { display: block; color: var(--texto-suave); font-size: var(--t-pie); margin-top: 2px; }
/* La liga al caso, en el color del área: el caso se abre desde el servicio. */
.area-servicio-caso {
  display: inline-block; margin-top: var(--e1);
  font-size: var(--t-pie); font-weight: 600; text-decoration: none;
  color: var(--color-area-texto, var(--acento));
}
.area-servicio-caso:hover { text-decoration: underline; }

/* ── Los casos ─────────────────────────────────────────────────────────── */
/*
 * LA FOTO ES EL ARGUMENTO. Se pidió sitio para imágenes y este es: el caso
 * destacado ocupa todo el ancho de la columna y los demás van en dos. Las
 * fotos son las de las fichas —las mismas que ya están en el sitio—, nunca
 * una ilustración de relleno.
 *
 * `aspect-ratio` en vez de alto fijo: la foto reserva su hueco antes de
 * llegar, así el texto de abajo no salta cuando carga.
 */
.area-casos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.area-caso {
  position: relative; display: block; overflow: hidden;
  border: 2px solid var(--color-area-texto, var(--acento-fondo));
  border-radius: var(--radio-tarjeta);
  background: var(--superficie); text-decoration: none; color: var(--texto);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.area-caso:hover { transform: translateY(-3px); }
.area-caso img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.area-caso-pie {
  display: grid; gap: 2px; padding: var(--e3);
  border-top: 1px solid var(--borde);
}
.area-caso-oficios {
  font-size: var(--t-pie); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-area-texto, var(--acento));
}
.area-caso-pie strong { font-family: var(--fuente-titulo); font-size: var(--t-h3); }
/* Del color del ÁREA y no del verde de marca: el caso pertenece al área que se
   está leyendo, y el verde ahí se leía como una pieza de otro sitio. */
.area-caso-abrir {
  justify-self: start; margin-top: var(--e1);
  font-size: var(--t-pie); font-weight: 700; color: var(--color-area-texto, var(--acento));
  border: 1px solid color-mix(in srgb, var(--color-area-texto, var(--acento)) 55%, transparent);
  border-radius: var(--radio-pastilla); padding: .3rem .7rem;
}
.area-caso:hover .area-caso-abrir {
  background: var(--color-area-texto, var(--acento)); color: var(--superficie);
  border-color: transparent;
}

/* LA ESTRELLA Y LOS CASOS DEL CELULAR SON HEROS: el texto va SOBRE la foto,
   con un velo que nace transparente y aterriza casi opaco — sin él, «Danza 3»
   sobre una foto clara es ilegible, y la legibilidad no puede depender de qué
   foto toque. El botón «Abrir caso» va lleno, como en la maqueta. */
.area-caso-destacado img { aspect-ratio: 16 / 7; }
.area-caso-destacado .area-caso-pie { position: absolute; inset: 0; display: grid; gap: 2px; align-content: end; padding: var(--e4); background: linear-gradient(180deg, transparent 12%, rgba(16, 18, 25, .45) 45%, rgba(16, 18, 25, .92)); color: #F2F3F7; border-top: 0; }
.area-caso-destacado .area-caso-pie strong { font-size: var(--t-h2); }
/* Sobre el velo oscuro de la estrella el color VIVO del área sí cumple —de
   6.08:1 a 12.65:1— y es el que se diseñó: aquí va el de superficie. */
.area-caso-destacado .area-caso-abrir { position: absolute; right: var(--e4); bottom: var(--e4); margin: 0; background: var(--color-area); color: #14161d; border-color: transparent; }

/* Los demás casos, COMPACTOS en escritorio: foto a la izquierda, texto y el
   botón a la derecha — en pares, como en la maqueta E2. */
@media (min-width: 62rem) {
  .area-caso:not(.area-caso-destacado) {
    display: grid; grid-template-columns: 9.5rem 1fr; align-items: center;
  }
  .area-caso:not(.area-caso-destacado) img { aspect-ratio: auto; height: 100%; min-height: 6.5rem; }
  .area-caso:not(.area-caso-destacado) .area-caso-pie { border-top: 0; }
}

.area-sin-casos { color: var(--texto-suave); }

/* El método del área (C4/M8): tres líneas de CÓMO se trabaja, con respaldo
   del sistema — no un adorno de ventas. Medida de lectura, voz suave. */
.area-sec-metodo p { color: var(--texto-suave); max-width: 60ch; margin: 0; }

/* ── El cierre ─────────────────────────────────────────────────────────── */

.area-cierre {
  display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center;
  justify-content: space-between;
  border: 2px solid var(--color-area-texto, var(--acento-fondo));
  border-radius: var(--radio-tarjeta);
  padding: var(--e5) var(--e4);
  background:
    radial-gradient(28rem 16rem at 100% 0%, color-mix(in srgb, var(--color-area) 12%, transparent), transparent 70%),
    var(--superficie);
}
.area-cierre h2 { font-size: var(--t-h2); margin-bottom: var(--e1); }
.area-cierre p { color: var(--texto-suave); margin: 0; max-width: 34rem; }
.area-cierre-b { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ── El glow del área, por tema ────────────────────────────────────────── */
/*
 * Igual que en las tarjetas de la portada, y por la misma razón que allí está
 * escrita: en CLARO el volumen lo da una sombra de la tinta del manual, porque
 * el color puro sobre papel ensucia; en OSCURO una sombra no se ve y el
 * volumen lo da el glow del propio color del área.
 *
 * Y va DOS VECES —`[data-tema="oscuro"]` y la media query— porque una media
 * query no cabe dentro de una lista de selectores. Las dos copias tienen que
 * decir lo mismo; hay una comprobación que lo vigila.
 */
.area-ficha, .area-caso, .area-cierre {
  box-shadow: 0 1px 2px rgba(28, 30, 38, .07), 0 12px 28px -8px rgba(28, 30, 38, .20);
}
.area-caso:hover { box-shadow: 0 2px 4px rgba(28, 30, 38, .09), 0 20px 44px -10px rgba(28, 30, 38, .28); }

:root[data-tema="oscuro"] .area-ficha,
:root[data-tema="oscuro"] .area-caso,
:root[data-tema="oscuro"] .area-cierre {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 35%, transparent),
              0 6px 26px -6px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 40%, transparent);
}
:root[data-tema="oscuro"] .area-caso:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 50%, transparent),
              0 10px 40px -6px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 60%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .area-ficha,
  :root:not([data-tema="claro"]) .area-caso,
  :root:not([data-tema="claro"]) .area-cierre {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 35%, transparent),
                0 6px 26px -6px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 40%, transparent);
  }
  :root:not([data-tema="claro"]) .area-caso:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 50%, transparent),
                0 10px 40px -6px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 60%, transparent);
  }
}

/* ── La ficha, fluida con el alto de la ventana ──────────────────────────
 *
 * EL ERROR QUE ESTO CORRIGE, Y FUE MÍO. Para que la ficha cupiera en una
 * ventana de 760px la apreté con medidas FIJAS. Cupo — y quedó igual de
 * apretada en un monitor de 1200, donde sobraba sitio de sobra. El director lo
 * dijo con la palabra exacta: parecía aplastada. Ajustar no es encoger; es
 * ocupar lo que hay.
 *
 * Ahora cada medida es un `clamp()` atado a `vh`: el mínimo es lo apretado
 * —solo para pantallas bajas—, el máximo es lo generoso de la primera versión
 * —que es lo que se veía bien— y en medio escala sola. En la misma página, un
 * portátil chico y un monitor grande se ven cada uno como les corresponde.
 *
 * VA AQUÍ, AL FINAL, Y NO JUNTO AL RESTO DE LO DE ESCRITORIO. Escrito arriba
 * NO HACÍA NADA: misma especificidad que las reglas base y declarado antes que
 * ellas, así que ganaban las base por orden. Es la tercera vez que este archivo
 * tropieza con lo mismo —el h1 partido, el botón de WhatsApp— y por eso queda
 * dicho otra vez: una media query NO sube la especificidad.
 */
@media (min-width: 62rem) {
  .area-ficha { padding: clamp(var(--e3), 2.6vh, var(--e5)) var(--e4) clamp(var(--e2), 2.2vh, var(--e4)); }
  .area-ficha .area-icono {
    width: clamp(3.5rem, 9vh, 7rem);
    margin-bottom: clamp(var(--e1), 1.6vh, var(--e3));
  }
  .area-ficha h1 {
    font-size: clamp(1.5rem, 1rem + 1.6vh, 2.4rem);
    margin-block: 0 clamp(var(--e1), 1.2vh, var(--e2));
  }
  .area-ficha .area-lede {
    margin-bottom: clamp(var(--e2), 2vh, var(--e4));
    font-size: clamp(var(--t-pie), 1.7vh, var(--t-base));
  }
  .area-ficha .area-datos { margin-bottom: clamp(var(--e2), 2vh, var(--e4)); }
  .area-ficha .area-datos > div { padding: clamp(var(--e0), 1.1vh, var(--e2)) 0; }
  .area-ficha .area-dial { margin-top: clamp(var(--e1), 1.8vh, var(--e4)); }
  .area-ficha .area-dial-pt { width: clamp(2.3rem, 3.4vh, 2.9rem); height: clamp(2.3rem, 3.4vh, 2.9rem); }
  .area-ficha .area-vecinos {
    margin-top: clamp(var(--e2), 2vh, var(--e4));
    padding-top: clamp(var(--e1), 1.4vh, var(--e3));
  }
  .area-ficha .area-vecinos img { width: clamp(1.6rem, 2.4vh, 2.2rem); }
}

/* ── El celular · el cine de C3 ────────────────────────────────────────── */
/*
 * Aquí vive TODO lo que el diseño pactado hace distinto en el teléfono:
 *
 *   1. LA LLAMADA SE DESPEGA AL FONDO. En escritorio la ficha es pegajosa y la
 *      auditoría ya está siempre a la vista; en el celular la portada se va
 *      con el desplazamiento y, sin la barra fija, media página se lee sin
 *      ninguna llamada. El hueco lo paga `.area` con relleno: una barra fija
 *      sobre el contenido taparía la última línea.
 *   2. EL ORDEN ES EL DE LA MAQUETA C3: servicios primero, casos después. En
 *      escritorio la estrella abre la página; aquí cierra el recorrido.
 *   3. LA FICHA ES UN HERO A SANGRE: sin borde y de orilla a orilla, con el
 *      baño del color del área. La tarjeta con marco es lenguaje de
 *      escritorio; el cine no lleva marco.
 *   4. LOS CASOS SON HEROS: el texto sobre la foto con su velo, a todo el
 *      ancho — la presentación que en escritorio reserva la estrella.
 *   5. EL DIAL VIVE EN EL CIERRE y no en la ficha, como en la maqueta: arriba
 *      ya están los vecinos asomando; abajo, tras leer, es donde se salta.
 */
@media (max-width: 61.999rem) {
  /* Ya no hay barra fija que esquivar: los botones salieron de la ficha por
     petición del director —no eran del color de la ficha y estorbaban—, así
     que la llamada vive en el encabezado y en el cierre. */
  .area { padding-top: 0; }


  /* 2 · El orden de C3. */
  .area-miga { order: 1; }
  .area-sec-servicios { order: 2; }
  .area-estrella { order: 3; margin-bottom: var(--e3); }
  .area-sec-casos { order: 4; }
  .area-cierre { order: 5; }

  /* La estrella baja a la sección de casos: le devuelve su cabecera. */
  .area-sec-casos { margin-bottom: var(--e5); }

  /* 3 · El hero a sangre. Lo que separa la ficha del borde de la pantalla son
     DOS cosas, no una: el hueco del centrado del contenedor —(100vw − ancho
     de página) / 2— y su `--margen-lateral` de relleno. La primera versión
     solo restaba el 3vw del centrado y el hero quedaba flotando a 22px del
     borde: ni tarjeta ni sangre, lo peor de las dos. El borde de 2px es de la
     tarjeta de escritorio; a sangre no hay tarjeta. */
  .area-ficha {
    border: 0; border-radius: 0;
    margin-inline: calc(((100vw - min(94vw, 132rem)) / -2) - var(--margen-lateral));
    padding-inline: max(var(--margen-lateral), 4vw);
    padding-top: var(--e6);
  }
  /* Los datos son lenguaje de expediente; el hero de C3 es icono, nombre y
     lede. Siguen existiendo en escritorio. */
  .area-datos { display: none; }
  /* 5 · El dial de la ficha se esconde aquí; el del cierre lo sustituye. */
  .area-ficha .area-dial { display: none; }

  /* Los vecinos asoman por las orillas como pestañas de icono, con el glow de
     su color: se ve que hay más estaciones sin leer nada. El texto queda para
     los lectores de pantalla. */
  .area-vecinos { border: 0; padding: 0; margin: 0; }
  .area-vecinos a {
    position: absolute; top: 7.5rem; z-index: 2;
    display: grid; place-items: center;
    width: 3.4rem; height: 4.6rem; padding: 0;
    border: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
    background: var(--superficie);
  }
  .area-vecinos a:first-child {
    left: 0; border-left: 0; border-radius: 0 var(--radio-caja) var(--radio-caja) 0;
    box-shadow: 6px 0 16px -8px color-mix(in srgb, var(--color-area) 60%, transparent);
  }
  .area-vecinos a:last-child {
    right: 0; border-right: 0; border-radius: var(--radio-caja) 0 0 var(--radio-caja);
    box-shadow: -6px 0 16px -8px color-mix(in srgb, var(--color-area) 60%, transparent);
  }
  .area-vecinos a img { width: 2.1rem; height: auto; opacity: .9; }
  .area-vecino-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* 4 · Todos los casos son heros: el pie se superpone a la foto con el velo,
     la misma presentación que la estrella. */
  .area-caso img { aspect-ratio: 16 / 10; }
  .area-caso .area-caso-pie {
    position: absolute; inset: 0;
    display: grid; gap: 2px; align-content: end;
    padding: var(--e3) var(--e4);
    background: linear-gradient(180deg, transparent 12%, rgba(16, 18, 25, .45) 45%, rgba(16, 18, 25, .92));
    color: #F2F3F7; border-top: 0;
  }
  .area-caso .area-caso-abrir {
    position: absolute; right: var(--e3); bottom: var(--e3); margin: 0;
    background: var(--color-area); color: #14161d;
    border-color: transparent;
  }
  /* Sobre el velo oscuro, el color del área a plena luz. */
  .area-caso .area-caso-oficios { color: var(--color-area, var(--acento)); }

  /* Las miniaturas de los servicios, al tamaño del pulgar. */
  .area-servicios li { grid-template-columns: 5.5rem 1fr 2rem; gap: var(--e2); }

  /* El dial del cierre, centrado y algo más grande que el de la ficha. */
  .area-cierre { flex-direction: column; align-items: stretch; text-align: center; }
  .area-dial-cierre { justify-content: center; margin-top: var(--e3); }
  .area-dial-cierre .area-dial-pt { width: 2.9rem; height: 2.9rem; }
  .area-cierre-b { justify-content: center; }
  .area-cierre p { margin-inline: auto; }
}

/* El dial del cierre solo existe en el celular: en escritorio la ficha
   pegajosa ya lo trae y dos diales a la vista son ruido, no navegación. */
@media (min-width: 62rem) {
  .area-dial-cierre { display: none; }
}

/* ── La transición entre páginas ───────────────────────────────────────── */
/*
 * UNA SOLA ANIMACIÓN PARA LAS DOS FORMAS, y es la del icono: al abrir un área
 * desde la portada —o al saltar de un área a otra por el dial— el icono VIAJA
 * de donde estaba a su nuevo sitio, y el resto de la página entra detrás.
 *
 * Se apoya en la View Transitions API entre documentos: el navegador reconoce
 * el icono de allá y el de aquí como la misma pieza porque comparten
 * `view-transition-name` (se pone en el HTML, con el área dentro del nombre).
 * Donde no está implementada no pasa nada malo: la navegación es la de
 * siempre, sin salto ni parpadeo. Por eso no hay JavaScript aquí — una
 * animación que necesita guion para no romperse es una animación que rompe.
 *
 * El opt-in `@view-transition` vive en `comun.css` para que valga en todo el
 * sitio; aquí solo se afina la duración y la entrada del contenido.
 */
@keyframes area-entra {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
/* LA FICHA NO SE ANIMA, Y ES UNA RENUNCIA DELIBERADA con dos causas ya
   pagadas, las dos por lo mismo: dentro de ella vive la llamada, que en el
   celular es `position: fixed`.
     · Con TRANSFORM en los fotogramas, el ancestro animado se vuelve el
       CONTENEDOR de sus descendientes fijos (así lo trata Chrome aunque el
       valor final sea `none`): la barra quedaba clavada al fondo de la ficha.
     · Se cambió a solo opacidad… y una animación de OPACIDAD también crea un
       CONTEXTO DE APILAMIENTO: el `z-index` de la barra dejaba de competir
       con la página y el contenido posterior se pintaba ENCIMA de los
       botones. Es la captura del director del 2026-08-12.
   Un elemento con un hijo `fixed` no se anima — ni de posición ni de nada.
   La entrada de la ficha ya la pone la transición entre documentos. */

@media (prefers-reduced-motion: no-preference) {
  .area-contenido > * { animation: area-entra .5s var(--curva) both; }
  /* En cascada, no todo a la vez: el ojo sigue el orden de lectura. */
  .area-contenido > *:nth-child(1) { animation-delay: .06s; }
  .area-contenido > *:nth-child(2) { animation-delay: .12s; }
  .area-contenido > *:nth-child(3) { animation-delay: .18s; }

  ::view-transition-old(root) { animation-duration: .25s; }
  ::view-transition-new(root) { animation-duration: .35s; }
}

/* ── El botón del color del área ─────────────────────────────────────────
 *
 * POR QUÉ EXISTE. Dentro de una pieza de área, un botón verde de marca compite
 * con la orilla y con el icono y se lee como algo de OTRO sitio: el director lo
 * describió como que «estorba». Este toma el color del área, así que la ficha,
 * el caso y su llamada hablan el mismo idioma.
 *
 * USA EL TOKEN DE TEXTO, no el de superficie. Sobre papel el color del manual
 * daría de 1.31:1 a 2.73:1 y el rótulo sería ilegible; el de texto pasa AA en
 * los dos temas. Y el relleno invierte: fondo del color, texto del papel.
 */
.boton-area {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: 44px; padding: .6rem 1.3rem;
  font-family: var(--fuente-cuerpo); font-weight: 700; font-size: var(--t-pie);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--color-area-texto, var(--acento));
  border-radius: var(--radio-pastilla);
  background: transparent; color: var(--color-area-texto, var(--acento));
  transition: transform var(--transicion-rapida), background var(--transicion-rapida), color var(--transicion-rapida);
}
.boton-area:hover {
  transform: translateY(-2px);
  background: var(--color-area-texto, var(--acento));
  color: var(--superficie);
}
.boton-area-lleno {
  background: var(--color-area-texto, var(--acento));
  color: var(--superficie);
}
.boton-area-lleno:hover { filter: brightness(1.1); background: var(--color-area-texto); color: var(--superficie); }