/* Páginas por servicio (litigios, tributario, saneamiento) y el hub del enlace de la biografía. Van sobre base.css y c.css,
   la variante C de la constitución, y solo agregan sus piezas: el video de Renato en el primer bloque, las situaciones,
   los pasos en columna junto a la consulta y el hub. c.css no se toca, para que la C de la prueba A/B quede igual. */

/* ───────────────────────── Primer bloque: el video o la foto de Renato ───────────────────────── */

/* c.css no deja partir el resaltado («S/ 500»). Aquí resalta frases enteras, que en un celular angosto no caben en una
   línea: se parten, y cada pedazo lleva su fondo. */
.titular-1 .resalte {
  white-space: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* La portada: el despacho de noche de fondo, con el video encima, y el texto en claro sobre un velo. La foto fija es el último
   fotograma del video: sin JavaScript, con el movimiento reducido o si el video no corre, se ve ella y la página se lee igual.
   El velo es más fuerte donde va el texto: sobre la pared clara del despacho, el texto blanco no llegaría al contraste AA. */
.hero-portada {
  position: relative;
  isolation: isolate;
  background: #0d1118;
  color: #fff;
}

.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-fondo-fija,
.hero-fondo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 17, 0.84) 0%, rgba(8, 11, 17, 0.78) 55%, rgba(8, 11, 17, 0.88) 100%);
}

.hero-portada .pastilla {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.hero-portada .hero-bajada,
.hero-portada .hero-nota {
  color: #eef1f4;
}

/* El marcador sigue claro: el texto de adentro vuelve a ser oscuro. */
.hero-portada .resalte {
  color: var(--tinta);
}

.hero-portada :focus-visible {
  outline-color: #fff;
}

.medio {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #1c1c20;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.medio-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medio-rotulo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--fondo);
  color: var(--tenue);
}

.medio-rotulo-nombre {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--tinta);
}

.medio-rotulo-cargo {
  font-size: 13px;
  line-height: 1.4;
}

/* ───────────────────────── Situaciones ───────────────────────── */

.casos {
  display: grid;
  gap: 12px;
}

.caso {
  padding: 20px;
  border-radius: 16px;
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.caso-icono {
  width: 28px;
  height: 28px;
  color: var(--enlace);
}

.caso-titulo {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}

.caso-texto {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tenue);
}

/* Una pregunta del filtro sin responder: base.css marca así los campos y las casillas, no las opciones. */
.opcion:has(input[aria-invalid="true"]) {
  border-color: var(--error);
}

/* ───────────────────────── La consulta: pasos en columna y su recibo ───────────────────────── */

.pasos-columna .paso {
  padding: 0;
  background: none;
}

.pasos-columna {
  gap: 20px;
}

.consulta .recibo-total-cifra {
  font-size: 40px;
}

/* ───────────────────────── Hub del enlace de la biografía ───────────────────────── */

.hub {
  padding: 28px var(--margen) 48px;
}

.hub-interior {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.hub-foto {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: #dce2e7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
}

.hub-foto-img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.hub-nombre {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hub-cargo {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tenue);
}

.hub-pregunta {
  margin-top: 12px;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

.hub-opciones {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.hub-opcion {
  min-height: 72px;
  padding: 14px 16px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 16px;
  background: var(--fondo);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--tinta);
  text-decoration: none;
}

.hub-opcion:hover {
  border-color: var(--acento);
  color: var(--tinta);
}

.hub-opcion-icono {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--enlace);
}

.hub-opcion-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hub-opcion-titulo {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}

.hub-opcion-detalle {
  font-size: 14px;
  line-height: 1.45;
  color: var(--tenue);
}

.hub-opcion-flecha {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--tenue);
}

.hub-nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tenue);
}

/* ───────────────────────── Otra consulta ───────────────────────── */

/* El campo de texto de la consulta breve: base.css le da a .campo-control la altura de una línea. */
.campo-control.campo-texto {
  height: auto;
  min-height: 132px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

/* El botón de WhatsApp aparece solo dentro de las gracias, después de dejar los datos. */
.gracias .boton-whatsapp {
  margin-top: 16px;
}

/* ───────────────────────── Celular grande y tableta ───────────────────────── */

@media (min-width: 720px) {
  /* En escritorio el texto va a la izquierda y la foto de Renato a la derecha: el velo se aligera hacia la derecha. */
  .hero-fondo::after {
    background: linear-gradient(90deg, rgba(8, 11, 17, 0.88) 0%, rgba(8, 11, 17, 0.78) 55%, rgba(8, 11, 17, 0.5) 100%);
  }

  .casos {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .caso {
    padding: 24px;
  }

  /* c.css pone los pasos en fila desde 720 px; aquí van en columna, junto al recibo. */
  .pasos.pasos-columna {
    display: flex;
    flex-direction: column;
  }

  .pasos-columna .paso {
    padding: 0;
    flex-direction: row;
    gap: 16px;
  }

  .pasos-columna .paso-titulo {
    margin-top: 0;
  }
}

/* ───────────────────────── Escritorio ───────────────────────── */

@media (min-width: 960px) {
  .medio {
    flex: 0 1 420px;
    min-width: 0;
  }

  .caso-titulo {
    font-size: 20px;
  }

  .caso-texto {
    font-size: 16px;
  }

  .consulta .seccion-columna {
    flex: 1 1 420px;
  }

  .consulta .recibo {
    flex: 1 1 420px;
  }

  .hub-nombre {
    font-size: 32px;
  }
}

/* ───────────────────────── Movimiento ─────────────────────────
   SPEC movimiento-landings del cerebro. Rápido y sutil, con una sola curva, y cada animación corre una vez por carga. Solo
   se animan transform, opacity, el trazo de los íconos (stroke-dashoffset), el fondo del marcador y la altura de las
   preguntas frecuentes.

   Lo que entra al llegar a la pantalla (los casos, los pasos y el recibo) solo se esconde bajo `.mov`, la clase que
   servicios.js pone en <html>. Sin JavaScript, sin IntersectionObserver o con el movimiento reducido nadie la pone, y la
   página se ve completa y quieta. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* El marcador del titular se pinta de izquierda a derecha. El texto se ve desde el primer pintado: solo crece el fondo, y
   con box-decoration-break: clone cada línea del resaltado se pinta a la vez. */
.titular-1 .resalte {
  background: linear-gradient(#ffe0cc, #ffe0cc) no-repeat 0 0 / 100% 100%;
  animation: marcador 600ms var(--ease-out) 300ms both;
}

@keyframes marcador {
  from {
    background-size: 0% 100%;
  }
}

/* Feedback al tocar. iOS solo aplica :active si la página escucha los toques: lo hace servicios.js. */
.boton-enlace,
.boton,
.opcion,
.hub-opcion {
  transition: transform 160ms var(--ease-out);
}

.boton-enlace:active,
.boton:active:not(:disabled),
.opcion:active,
.hub-opcion:active {
  transform: scale(0.97);
}

/* Los casos entran escalonados y su ícono se dibuja. servicios.js pone en cada caso su --orden dentro de la tanda que
   entra junta, y en cada trazo que pudo medir, su --largo y la clase `trazo`. Entran con una animación y no con una
   transición: terminada la entrada, `transform` queda libre para el feedback al tocar. */
.mov .caso:not(.visto) {
  opacity: 0;
}

.mov .caso.visto {
  animation: entrar 400ms var(--ease-out) backwards;
  animation-delay: calc(var(--orden, 0) * 60ms);
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.mov .trazo {
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
}

.mov .caso.visto .trazo {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 600ms var(--ease-out);
  transition-delay: calc(var(--orden, 0) * 60ms + 150ms);
}

/* Los casos que se pueden tocar: el enlace es el título, y su ::after cubre la ficha entera. Lleva al formulario, y con
   JavaScript, además, prellena el filtro. «Es mi caso» es solo la señal de que se puede tocar. */
.caso {
  position: relative;
}

.caso-enlace,
.caso-enlace:hover {
  color: inherit;
  text-decoration: none;
}

.caso-enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

/* El foco se dibuja alrededor de la ficha, no del título. */
.caso-enlace:focus-visible {
  outline: none;
}

.caso-enlace:focus-visible::after {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.caso-accion {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--enlace);
}

.caso-accion-flecha {
  width: 18px;
  height: 18px;
  transition: transform 160ms var(--ease-out);
}

.caso:has(.caso-enlace) {
  transition: transform 160ms var(--ease-out);
}

.caso:has(.caso-enlace):active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .caso:has(.caso-enlace):hover .caso-accion-flecha {
    transform: translateX(3px);
  }
}

/* Los pasos se conectan: un tramo de línea de cada número al siguiente, con el riel gris debajo y el naranja encima. El
   número mide 40 px y entre paso y paso hay 20 px. Sin `.mov`, la línea se ve llena. */
.pasos-columna .paso {
  position: relative;
}

.pasos-columna .paso:not(:last-child)::before,
.pasos-columna .paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  bottom: -14px;
  left: 19px;
  width: 2px;
  border-radius: 1px;
}

.pasos-columna .paso:not(:last-child)::before {
  background: var(--linea-fuerte);
}

.pasos-columna .paso:not(:last-child)::after {
  background: var(--acento);
  transform-origin: top;
}

/* El número apagado es un aro gris; al encenderse, el círculo naranja crece por detrás de la cifra. */
.mov .pasos-columna .paso-numero {
  position: relative;
  isolation: isolate;
  background: var(--fondo);
  box-shadow: inset 0 0 0 2px var(--linea-fuerte);
}

.mov .pasos-columna .paso-numero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--acento);
}

@keyframes encender {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes llenar {
  from {
    transform: scaleY(0);
  }
}

/* Donde la animación se puede atar al scroll, cada número se enciende al subir por la pantalla y la línea se llena
   mientras se baja. */
@supports (animation-timeline: view()) {
  .mov .pasos-columna .paso {
    view-timeline: --paso block;
  }

  .mov .pasos-columna .paso-numero::before {
    animation: encender linear both;
    animation-timeline: --paso;
    animation-range: cover 15% cover 30%;
  }

  .mov .pasos-columna .paso:not(:last-child)::after {
    animation: llenar linear both;
    animation-timeline: --paso;
    animation-range: cover 25% cover 50%;
  }
}

/* En los demás, la línea se dibuja de una vez cuando los pasos entran a la pantalla: servicios.js les pone `visto`. */
@supports not (animation-timeline: view()) {
  .mov .pasos-columna .paso-numero::before {
    opacity: 0;
    transform: scale(0.4);
  }

  .mov .pasos-columna .paso:not(:last-child)::after {
    transform: scaleY(0);
  }

  .mov .pasos-columna.visto .paso-numero::before,
  .mov .pasos-columna.visto .paso:not(:last-child)::after {
    opacity: 1;
    transform: none;
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  }

  .mov .pasos-columna.visto .paso:nth-child(1)::after {
    transition-delay: 150ms;
  }

  .mov .pasos-columna.visto .paso:nth-child(2) .paso-numero::before {
    transition-delay: 400ms;
  }

  .mov .pasos-columna.visto .paso:nth-child(2)::after {
    transition-delay: 550ms;
  }

  .mov .pasos-columna.visto .paso:nth-child(3) .paso-numero::before {
    transition-delay: 800ms;
  }
}

/* El recibo se imprime cuando entra a la pantalla: la ficha sube, las filas salen una tras otra con su check, los puntos se
   estiran hasta «Incluido» y al final llega el total. Cada pieza lleva en --t cuándo empieza; todo dura 1,2 s. */
.mov .recibo,
.mov .recibo-fila,
.mov .recibo-total,
.mov .recibo-nota {
  opacity: 0;
  transform: translateY(8px);
}

.mov .recibo-puntos {
  transform: scaleX(0);
  transform-origin: left;
}

.mov .recibo-incluido {
  opacity: 0;
}

.mov .recibo.visto,
.mov .recibo.visto .recibo-fila,
.mov .recibo.visto .recibo-total,
.mov .recibo.visto .recibo-nota,
.mov .recibo.visto .recibo-puntos,
.mov .recibo.visto .recibo-incluido {
  opacity: 1;
  transform: none;
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
  transition-delay: var(--t, 0ms);
}

.mov .recibo.visto .recibo-fila:nth-child(1) {
  --t: 200ms;
}

.mov .recibo.visto .recibo-fila:nth-child(2) {
  --t: 350ms;
}

.mov .recibo.visto .recibo-fila:nth-child(3) {
  --t: 500ms;
}

.mov .recibo.visto .recibo-total {
  --t: 800ms;
}

.mov .recibo.visto .recibo-nota {
  --t: 850ms;
}

.mov .recibo.visto .recibo-puntos {
  transition-delay: calc(var(--t) + 100ms);
}

.mov .recibo.visto .recibo-incluido {
  transition-delay: calc(var(--t) + 300ms);
}

.mov .recibo.visto .trazo {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 400ms var(--ease-out);
  transition-delay: calc(var(--t) + 50ms);
}

/* Las preguntas frecuentes se despliegan donde el navegador sabe animar hasta `auto`; en los demás se abren como antes. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq-item {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* El filtro. La nota dice qué marcó el caso que se tocó, con el mismo naranja muy claro de las opciones elegidas, y vacía
   no ocupa lugar. La opción elegida se llena con una transición; el borde cambia en seco, como siempre. */
.nota-prellenado {
  padding: 10px 14px;
  border-left: 3px solid var(--acento-control);
  border-radius: var(--campo-radio);
  background: #fff1e8;
  font-size: 14px;
  line-height: 1.5;
}

.nota-prellenado:empty {
  display: none;
}

.opcion {
  position: relative;
  isolation: isolate;
}

.opcion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #fff1e8;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.opcion:has(input:checked)::before {
  opacity: 1;
}

/* El contador del filtro, junto al botón de enviar. servicios.js le quita el `hidden` y pone en --progreso la parte
   respondida, de 0 a 1. */
.progreso-filtro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progreso-texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tenue);
}

.progreso-barra {
  height: 4px;
  border-radius: 2px;
  background: var(--linea);
  overflow: hidden;
}

.progreso-relleno {
  display: block;
  height: 100%;
  background: var(--acento);
  transform: scaleX(var(--progreso, 0));
  transform-origin: left;
  transition: transform 250ms var(--ease-out);
}

/* Las gracias entran, el check se dibuja y llegan los tres pasos que siguen. Corre al mostrarse, cuando formulario.js les
   quita el `hidden` tras el 204 del endpoint. Los largos son los del ícono: el círculo mide 2π·10 y la marca, 6√2. */
.gracias {
  animation: entrar 400ms var(--ease-out) backwards;
}

.gracias-icono {
  width: 40px;
  height: 40px;
  color: var(--acento-control);
}

.gracias-circulo {
  stroke-dasharray: 63;
  animation: trazar-circulo 500ms var(--ease-out) 150ms backwards;
}

.gracias-marca {
  stroke-dasharray: 9;
  animation: trazar-marca 250ms var(--ease-out) 550ms backwards;
}

@keyframes trazar-circulo {
  from {
    stroke-dashoffset: 63;
  }
}

@keyframes trazar-marca {
  from {
    stroke-dashoffset: 9;
  }
}

.gracias-subtitulo {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.gracias-pasos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gracias-paso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tenue);
  animation: entrar 350ms var(--ease-out) backwards;
}

.gracias-paso:nth-child(1) {
  animation-delay: 650ms;
}

.gracias-paso:nth-child(2) {
  animation-delay: 750ms;
}

.gracias-paso:nth-child(3) {
  animation-delay: 850ms;
}

.gracias-paso strong {
  font-weight: 600;
  color: var(--tinta);
}

.gracias-paso-numero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--tinta);
  font-weight: 700;
  font-size: 14px;
}

/* El hub: las cuatro opciones entran en cascada al abrir, en 345 ms en total, para no frenar a quien ya sabe qué tocar, y la
   flecha avanza al tocar. Solo CSS; para el :active de iOS, hub.js escucha los toques. */
.hub-opciones > li {
  animation: entrar 240ms var(--ease-out) backwards;
}

.hub-opciones > li:nth-child(2) {
  animation-delay: 35ms;
}

.hub-opciones > li:nth-child(3) {
  animation-delay: 70ms;
}

.hub-opciones > li:nth-child(4) {
  animation-delay: 105ms;
}

.hub-opcion-flecha {
  transition: transform 160ms var(--ease-out);
}

.hub-opcion:active .hub-opcion-flecha {
  transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
  .hub-opcion:hover .hub-opcion-flecha {
    transform: translateX(3px);
  }
}

/* La transición del hub a cada página: la opción tocada se convierte en la etiqueta de la página, y el resto se funde. Es
   la de View Transitions entre documentos, solo con CSS, y la tienen que pedir las dos páginas: /c/, que no carga
   servicios.css, navega como siempre, y también el navegador que no la conoce. Con el movimiento reducido no se pide. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.hub-opcion[href^="/litigios/"],
.pastilla-litigios {
  view-transition-name: linea-litigios;
}

.hub-opcion[href^="/tributario/"],
.pastilla-tributario {
  view-transition-name: linea-tributario;
}

.hub-opcion[href^="/saneamiento/"],
.pastilla-saneamiento {
  view-transition-name: linea-saneamiento;
}

.hub-opcion[href^="/consulta/"],
.pastilla-consulta {
  view-transition-name: linea-consulta;
}

::view-transition-group(*) {
  animation-duration: 300ms;
  animation-timing-function: var(--ease-out);
}

/* El botón fijo en celular. servicios.js le quita el `hidden` y le pone `visible` cuando el botón del primer bloque ya
   quedó arriba y el formulario no está a la vista. Escondido, `visibility` lo saca del foco y de los lectores de
   pantalla. Desde 720 px no va: la cabecera ya trae su botón. */
.cta-fija {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  background: var(--fondo);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 250ms var(--ease-out), visibility 0s linear 250ms;
}

.cta-fija.visible {
  transform: none;
  visibility: visible;
  transition: transform 250ms var(--ease-out), visibility 0s;
}

/* La barra mide 81 px: el pie crece eso para que al final no tape nada, y el foco que llega con Tab no queda debajo. */
@media (max-width: 719.98px) {
  .cta-activa {
    scroll-padding-bottom: 96px;
  }

  .cta-activa .pie {
    padding-bottom: 121px;
  }
}

@media (min-width: 720px) {
  .cta-fija {
    display: none;
  }
}

/* Con el movimiento reducido, servicios.js no pone `.mov` y nada se esconde. base.css acorta las duraciones pero no los
   retrasos: aquí se quitan los que quedan, para que todo esté en su sitio desde el primer pintado. */
@media (prefers-reduced-motion: reduce) {
  .titular-1 .resalte,
  .gracias,
  .gracias-circulo,
  .gracias-marca,
  .gracias-paso,
  .hub-opciones > li {
    animation: none;
  }

  .cta-fija,
  .cta-fija.visible {
    transition: none;
  }

  /* El `*` de base.css no alcanza a los pseudoelementos como este. */
  .faq-item::details-content {
    transition: none;
  }
}