/* ============================================================
   ESTILOS DEL SITIO
   Usa siempre los valores definidos en tokens.css
   Diseñado primero para celular, luego se adapta a pantallas grandes.
   ============================================================ */

/* --- BASE ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* La barra de navegación queda fija arriba, así que al saltar a una sección
   el navegador la dejaría escondida debajo. Con scroll-margin-top se le pide
   frenar antes.
   El valor es EXACTAMENTE el alto de la barra: 72px del contenido más 1px
   de su línea inferior. Ni un píxel más, o asomaría el final de la sección
   anterior; ni uno menos, o taparía el título. El aire que se ve bajo la
   barra es el relleno propio de la sección, que sí es parte del diseño.
   Si algún día cambia --alto-nav, esto se ajusta solo.
   El desplazamiento suave se desactiva para quien haya pedido en su sistema
   que se reduzcan las animaciones. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

[id] { scroll-margin-top: calc(var(--alto-nav) + 1px); }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: 1.6;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--esp-4);
  letter-spacing: -0.03em;
}
h1 { font-size: var(--texto-3xl); }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }

/* LA CURSIVA DE LA CASA.
   Una palabra suelta dentro de un titular, en serif e itálica, en
   terracota. Es el único adorno del sitio y funciona porque se usa
   poco: una vez por sección como máximo, nunca dos en el mismo
   titular. Se apoya en el tamaño del titular que la contiene, así
   que no lleva medida propia.
   El 1.06 compensa que la Instrument Serif dibuja las letras más
   bajas que la Jakarta: sin eso se ve hundida respecto al resto. */
h1 em, h2 em, h3 em, .destacada-serif {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-acento);
  letter-spacing: -0.01em;
  font-size: 1.06em;
}

p { margin: 0 0 var(--esp-4); max-width: 65ch; }

img { max-width: 100%; height: auto; display: block; }

/* Marca visible para los textos que faltan definir */
.pendiente {
  background: #F6E6D6;
  border-bottom: 2px dashed var(--color-acento);
  padding: 0 var(--esp-1);
}

/* Enlace "saltar al contenido" — solo aparece al navegar con teclado */
.saltar {
  position: absolute; left: -9999px;
  background: var(--color-primario); color: #fff;
  padding: var(--esp-3) var(--esp-4); z-index: 100;
}
.saltar:focus { left: var(--esp-4); top: var(--esp-4); }

/* Contorno visible al navegar con teclado (accesibilidad) */
:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 3px;
}

/* --- CONTENEDOR Y SECCIONES ------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.seccion { padding-block: var(--esp-16); }
.seccion--alt { background: var(--color-fondo-alt); }

/* --- BOTONES ---------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;                 /* tamaño mínimo para tocar con el dedo */
  padding: var(--esp-3) var(--esp-8);
  border: 1.5px solid transparent;
  border-radius: var(--radio-full);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion);
}
/* El botón principal va en terracota: es el único elemento de ese color
   en la pantalla, así que la vista se va sola hacia él. */
.boton--primario {
  background: var(--color-acento);
  color: #FFF9F4;
  box-shadow: 0 8px 20px -12px rgba(180, 80, 58, .9);
}
.boton--primario:hover {
  background: var(--color-acento-oscuro);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(180, 80, 58, .95);
}
/* El secundario es una tarjeta clara: sobre el crema se distingue por
   ser más blanco, no por tener un borde grueso. */
.boton--secundario {
  background: var(--color-tarjeta);
  color: var(--color-primario);
  border-color: var(--color-borde);
}
.boton--secundario:hover { background: var(--color-fondo-alt); border-color: #D9CCB9; }
.boton:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* --- BARRA DE NAVEGACIÓN ---------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 241, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-borde);
}
.nav__interior {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--alto-nav);
}
/* El archivo del logo es blanco. Arriba, sobre fondo claro, se invierte
   con CSS para que se vea negro: un solo archivo sirve en los dos lugares. */
.nav__logo { display: block; line-height: 0; }
.nav__logo img {
  width: 132px; height: auto; display: block;
  filter: invert(1);
  transition: opacity var(--transicion);
}
.nav__logo:hover img { opacity: .7; }

.footer__logo {
  width: 150px; height: auto; display: block;
  margin-bottom: var(--esp-4);
}
.nav__menu { display: none; }        /* oculto en celular */
.nav__hamburguesa {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm); cursor: pointer;
}

/* Menú desplegado en celular */
.nav__menu.abierto {
  display: flex; flex-direction: column; gap: var(--esp-4);
  position: absolute; top: var(--alto-nav); left: 0; right: 0;
  background: var(--color-fondo); padding: var(--esp-6) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: var(--sombra-lg);
}
.nav__enlace {
  color: #4C4A45; text-decoration: none; font-weight: 500;
  transition: color var(--transicion);
}
.nav__enlace:hover { color: var(--color-acento); }

/* El botón de agendar de la barra: más chico que los del cuerpo, para
   que no compita con el titular, pero igual de reconocible. */
.nav__menu .boton { min-height: 44px; padding: var(--esp-2) var(--esp-6); font-size: var(--texto-sm); }

/* --- HERO -------------------------------------------------- */

.hero { padding-block: var(--esp-16) var(--esp-24); }
.hero__subtitulo {
  font-size: var(--texto-lg);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-8);
}
.hero__acciones {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}
/* --- CIFRAS DE TRAYECTORIA --------------------------------- */

/* Van en tarjetas claras sobre el crema. La caja hace que se lean como
   tres datos y no como una línea de texto corrida. */
.cifras {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--esp-4);
  padding-top: var(--esp-8);
}
.cifras__item {
  display: flex; flex-direction: column;
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--esp-6);
}
.cifras__numero {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-2xl);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-salvia);
}
.cifras__texto {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin-top: var(--esp-2);
}

/* --- FRANJA DE COMPROMISOS --------------------------------- */

.compromisos {
  background: var(--color-superficie);
  color: #F1EFE8;
  padding-block: var(--esp-4);
}
.compromisos__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-8);
  justify-content: center;
  font-size: var(--texto-sm);
  font-weight: 500;
}
/* El ✓ se dibuja por CSS: así no ensucia el texto que lee Google */
.compromisos__item::before {
  content: "✓";
  color: var(--color-acento-claro);   /* versión clara: legible sobre oscuro */
  font-weight: 700;
  margin-right: var(--esp-2);
}

/* --- SERVICIOS --------------------------------------------- */

.seccion__bajada {
  font-size: var(--texto-lg);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-12);
}

/* Etiqueta que anuncia de qué va el bloque.
   Antes iba numerada (01 · 02 · 03) y en mayúsculas espaciadas: esa
   combinación —etiqueta dorada numerada sobre fondo oscuro— es la
   firma visual de medio internet y era justo lo que había que soltar.
   Ahora es una línea corta seguida de una palabra en terracota, sin
   número y sin caja. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm); font-weight: 600;
  color: var(--color-acento);
  letter-spacing: .01em;
  margin-bottom: var(--esp-3);
}
.etiqueta::before {
  content: "";
  width: 28px; height: 1.5px;
  background: currentColor;
  flex: none;
}
.etiqueta--claro { color: var(--color-acento-claro); }

/* --- BLOQUE 1: el plan mensual (servicio continuo) --- */

.plan {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: var(--esp-8);
  margin-bottom: var(--esp-16);
}
.plan__titulo { margin: 0 0 var(--esp-3); }
.plan__frase {
  font-size: var(--texto-lg);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-8);
}
.plan__columnas { display: grid; gap: var(--esp-8); }
.plan__sub {
  font-size: var(--texto-base);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-texto-sec);
  margin: 0 0 var(--esp-3);
}
/* El precio vive dentro del plan, no suelto en la página */
.plan__precio {
  margin-top: var(--esp-8);
  padding-top: var(--esp-6);
  border-top: 1px solid var(--color-borde);
}
.plan__monto {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl); font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--esp-3);
}
.plan__detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-6);
}
.plan__detalle:last-child { margin-bottom: 0; }

.plan__extras {
  list-style: none; margin: 0 0 var(--esp-6); padding: 0;
  font-size: var(--texto-sm); color: var(--color-texto-sec);
}
.plan__extras li {
  padding: var(--esp-3) 0 var(--esp-3) var(--esp-6);
  position: relative;
  border-bottom: 1px solid var(--color-borde);
}
.plan__extras li:last-child { border-bottom: 0; }
.plan__extras li::before {
  content: ""; position: absolute;
  left: 0; top: 1.35em; width: 12px; height: 2px;
  background: var(--color-acento);
}
.plan__extras strong { color: var(--color-texto); }

/* --- BLOQUE 2: los servicios puntuales --- */

.puntuales__intro { margin-bottom: var(--esp-8); }

/* El índice de servicios: intro corta y la grilla de seis tarjetas */
.indice__intro { margin-bottom: var(--esp-8); max-width: 62ch; }
/* Es un h3 por jerarquía —va dentro de una sección que ya tiene su h2—
   pero se ve del tamaño de un título de sección, porque encabeza el
   listado completo de servicios y quedaba enano al lado del de arriba.
   Mismo criterio que .areas__titulo. */
.indice__titulo { margin: 0 0 var(--esp-3); font-size: var(--texto-2xl); }
.indice__intro p { color: var(--color-texto-sec); }
.indice__intro strong { color: var(--color-texto); }

/* Las tarjetas se estiran a la altura de la más alta y el precio queda
   pegado abajo: así la línea de precios se lee de corrido de izquierda a
   derecha, en vez de bailar según lo que mida cada lista. */
.indice .servicio { display: flex; flex-direction: column; }
.indice .servicio__nota { margin-top: auto; }
.servicio__nota a { color: var(--color-acento); font-weight: 600; }
.puntuales__titulo { margin: 0 0 var(--esp-3); }
.puntuales__intro p { color: var(--color-texto-sec); }

.servicios { display: grid; gap: var(--esp-6); }

.servicio {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  box-shadow: var(--sombra-sm);
}
/* TARJETA CLICABLE COMPLETA.
   Solo las que tienen página propia detrás llevan la clase
   .servicio--enlazada. Nadie apunta al enlace chico del final: se hace
   clic en el bloque entero.

   No se envuelve la tarjeta en un <a> gigante, que dejaría a Google y a
   un lector de pantalla con un enlace enorme y sin texto claro. En su
   lugar, el enlace real —el "Ver el detalle"— estira su zona de clic
   hasta cubrir la tarjeta con un ::after invisible. Se comporta igual y
   el marcado sigue limpio.

   La tarjeta se levanta al pasar el mouse: una tarjeta clicable sin
   ninguna señal visible es de las cosas que más molestan a un visitante. */
.servicio--enlazada { position: relative; transition: transform .18s ease, box-shadow .18s ease; }

.servicio--enlazada:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-lg);
}

.servicio--enlazada .servicio__nota a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-lg);
}

/* Quien navega con teclado tiene que ver dónde está parado. */
.servicio--enlazada:focus-within {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
}

.servicio__titulo { margin: 0 0 var(--esp-3); font-size: var(--texto-xl); }
.servicio__frase {
  font-weight: 600;
  margin-bottom: var(--esp-4);
}
.servicio__lista {
  list-style: none; margin: 0; padding: 0;
  font-size: var(--texto-sm); color: var(--color-texto-sec);
}
.servicio__lista li {
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-6);
  position: relative;
  border-bottom: 1px solid var(--color-borde);
}
.servicio__lista li:last-child { border-bottom: 0; }
/* La rayita de cada ítem se dibuja por CSS, no se escribe en el texto */
.servicio__lista li::before {
  content: ""; position: absolute;
  left: 0; top: 1.05em; width: 12px; height: 2px;
  background: var(--color-acento);
}
.servicio__lista em { font-style: normal; opacity: .8; }
.servicio__nota {
  margin: var(--esp-4) 0 0;
  padding-top: var(--esp-4);
  border-top: 2px solid var(--color-borde);
  font-size: var(--texto-sm);
}

/* --- BLOQUE DESTACADO (empresas extranjeras) ---------------- */

/* Va en salvia con las esquinas redondeadas y separado de los bordes de
   la pantalla: se lee como un bloque apoyado sobre el papel, no como una
   franja que parte la página en dos. */
.destacado {
  background: var(--color-superficie);
  color: #F1EFE8;
  padding-block: var(--esp-16);
  border-radius: var(--radio-lg);
  margin-inline: var(--esp-4);
}
.destacado__interior { display: grid; gap: var(--esp-8); }
.destacado__titulo { margin: 0 0 var(--esp-4); }
.destacado__frase { color: #D5D9CE; margin: 0 0 var(--esp-4); }
.destacado__frase:last-child { margin-bottom: 0; }
.destacado__lista {
  list-style: none; margin: 0 0 var(--esp-6); padding: 0;
}
.destacado__lista li {
  padding: var(--esp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.destacado__lista li:last-child { border-bottom: 0; }
.destacado__nota {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
  color: #B4BBAD;
}

/* El enlace a la página del servicio, dentro de la nota. Sin esto queda
   con el azul por defecto del navegador, que sobre el fondo verde se ve
   como un error. Va en línea aparte: pegado al final del párrafo se
   confundía con el texto. */
.destacado__nota a {
  display: inline-block;
  margin-top: var(--esp-2);
  color: var(--color-acento-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(226,169,140,.45);
}
.destacado__nota a:hover,
.destacado__nota a:focus-visible {
  color: #F1EFE8;
  text-decoration-color: currentColor;
}

/* --- BLOQUE CLICABLE ENTERO -------------------------------
   La lista completa lleva a la página del servicio, no solo la línea
   del enlace. Se consigue estirando un ::after transparente del <a>
   sobre todo el <ul>: el enlace sigue siendo uno solo, así que no se
   duplica para el teclado ni para Google. */
.destacado__lista-enlace {
  position: relative;
  border-radius: var(--radio-sm);
  transition: background-color .18s ease;
}
.destacado__lista-enlace::before {
  content: "";
  position: absolute;
  inset: calc(var(--esp-4) * -1);
  border-radius: var(--radio-md, 12px);
  background: transparent;
  transition: background-color .18s ease;
  pointer-events: none;
}
.destacado__lista-enlace:hover::before {
  background: rgba(255,255,255,.06);
}
.destacado__lista-enlace:hover .destacado__nota a {
  color: #F1EFE8;
  text-decoration-color: currentColor;
}
.destacado__lista-enlace .destacado__nota a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* El foco del teclado se dibuja sobre la lámina completa, no sobre el
   renglón del enlace: así se ve qué se va a activar. */
.destacado__lista-enlace:focus-within::before {
  background: rgba(255,255,255,.06);
  outline: 2px solid var(--color-acento-claro);
  outline-offset: 2px;
}

/* --- CÓMO TRABAJAMOS --------------------------------------- */

.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--esp-8);
  counter-reset: paso;
}
.paso { position: relative; padding-top: var(--esp-6); }
/* Línea superior que conecta visualmente los pasos */
.paso::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--color-borde);
}
.paso__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--color-acento);
  color: #FFF9F4;
  font-family: var(--fuente-titulos); font-weight: 700;
  border-radius: var(--radio-full);
  margin-bottom: var(--esp-4);
}
.paso__titulo { font-size: var(--texto-xl); margin-bottom: var(--esp-3); }
.paso p { font-size: var(--texto-sm); color: var(--color-texto-sec); margin: 0; }

/* --- CASOS Y CLIENTES -------------------------------------- */

.caso {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--color-acento);
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  margin-bottom: var(--esp-12);
}
/* Variante para fondo oscuro: la tarjeta se marca con un borde tenue
   en vez de una caja blanca, que cortaría la franja. */
.caso--oscuro {
  margin: var(--esp-12) 0 0;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.15);
  border-left-color: var(--color-acento-claro);
}
.caso--oscuro .caso__texto { color: #D5D9CE; margin-bottom: 0; }

/* El título del caso destacado es el logo del cliente. */
.caso__titulo { margin: var(--esp-3) 0 var(--esp-4); }
.caso__logo { display: inline-block; border-radius: var(--radio-sm); }
.caso__logo img { display: block; height: 34px; width: auto; }
.caso__logo:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 4px; }
.caso__texto { margin-bottom: var(--esp-4); }

.casos__intro {
  font-size: var(--texto-sm);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-4);
}
/* --- CARRUSEL DE LOGOS -------------------------------------
   La cinta se mueve sola de derecha a izquierda. La lista está
   escrita dos veces: cuando la primera copia termina de pasar,
   la animación vuelve al inicio y la segunda copia está justo
   en el mismo lugar, así el corte no se nota.                 */

.marquesina {
  position: relative;
  overflow: hidden;
  margin-top: var(--esp-8);
  padding-block: var(--esp-4);
  /* Los logos se desvanecen en los bordes en vez de cortarse de golpe */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquesina__pista {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
  animation: desfile 70s linear infinite;
  /* translate3d y will-change dejan la animación a cargo de la tarjeta
     gráfica: se mueve suave y el navegador no vuelve a dibujar los logos
     en cada paso, que era lo que dejaba huecos en blanco. */
  will-change: transform;
}
@keyframes desfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* la mitad justa: una copia entera */
}

/* La cinta se detiene mientras el visitante mira un logo */
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }

.marquesina__item {
  flex: none;
  display: grid; place-items: center;
  min-width: 150px; height: 76px;
  padding-inline: var(--esp-6);
}

/* En reposo van en gris y algo apagados, para que ninguna marca
   compite con el contenido. Al pasar el mouse vuelve su color real. */
.marquesina__logo {
  max-width: 190px; max-height: 42px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter var(--transicion), opacity var(--transicion), transform var(--transicion);
}
/* Los logos cuadrados llenarían todo el alto y se verían el doble de
   grandes que un logotipo horizontal: se les da un techo más bajo. */
.marquesina__logo--icono { max-height: 56px; max-width: 56px; }

/* Cada logo lleva al sitio de su empresa */
.marquesina__enlace {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: var(--radio-sm);
}
.marquesina__enlace:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 4px;
}

.marquesina__item:hover .marquesina__logo,
.marquesina__enlace:focus-visible .marquesina__logo {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

/* --- QUIÉNES SOMOS ----------------------------------------- */

.nosotros { display: grid; gap: var(--esp-8); }
.nosotros__texto p { font-size: var(--texto-lg); }

.ficha {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-top: 4px solid var(--color-acento);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--esp-8);
  align-self: start;
}
.ficha__nombre { font-size: var(--texto-xl); margin-bottom: var(--esp-1); }
.ficha__cargo {
  font-size: var(--texto-sm);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-6);
}
.ficha__lista {
  list-style: none; margin: 0; padding: 0;
  font-size: var(--texto-sm);
}
.ficha__lista li {
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--color-borde);
}

/* --- ÁREAS TÉCNICAS ----------------------------------------
   Van dentro de "Quiénes somos", después de la ficha. Cada una es
   una línea terracota arriba, un título corto y una explicación.
   Sin caja: son seis, y seis tarjetas seguidas pesan demasiado en
   una sección que ya trae una ficha con borde. */

.areas {
  margin-top: var(--esp-16);
  padding-top: var(--esp-12);
  border-top: 1px solid var(--color-borde);
}
/* Sin bajada: el título va directo sobre la grilla. La explicación del
   ciclo ya está en el texto de la sección, y repetirla acá era redundar. */
.areas__titulo { font-size: var(--texto-2xl); margin-bottom: var(--esp-12); }

.areas__grilla { display: grid; gap: var(--esp-8); }

.area { padding-top: var(--esp-4); border-top: 2px solid var(--color-acento); }
.area__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--esp-2);
}
.area p {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin: 0;
}
.area strong { color: var(--color-texto); }

/* Enlace al detalle dentro de una tarjeta de área. Va en terracota y en
   negrita para que se despegue del párrafo gris que lo rodea. */
.area p a {
  color: var(--color-acento);
  font-weight: 600;
  white-space: nowrap;
}

.areas__cierre {
  margin: var(--esp-12) 0 0;
  padding-top: var(--esp-6);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-lg);
}

/* La frase que resume la forma de trabajar */
.cita {
  margin: var(--esp-16) 0 0;
  padding-top: var(--esp-8);
  border-top: 2px solid var(--color-acento);
}
.cita__texto {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-2xl);
  line-height: 1.25;
  max-width: 24ch;
}
.cita__autor {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}

/* --- BOTÓN DE WHATSAPP (fijo, esquina inferior) ------------- */

.whatsapp {
  position: fixed; right: var(--esp-4); bottom: var(--esp-4);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: #25D366; color: #fff;
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-lg);
  transition: transform var(--transicion);
}
.whatsapp:hover { transform: scale(1.06); }

/* --- PIE DE PÁGINA ----------------------------------------- */

.footer {
  background: var(--color-superficie); color: #D5D9CE;
  padding-block: var(--esp-12) var(--esp-6);
}
.footer a { color: #D5D9CE; }
.footer a:hover { color: var(--color-acento-claro); }
.footer__grilla {
  display: grid; gap: var(--esp-8);
  margin-bottom: var(--esp-8);
}
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: var(--esp-6);
  font-size: var(--texto-sm);
}

/* --- PREGUNTAS FRECUENTES ---------------------------------
   Usa <details>/<summary> del navegador: abre y cierra sin
   JavaScript y ya viene con teclado y lector de pantalla.     */

.faq { margin-top: var(--esp-8); max-width: 80ch; }

.faq__item { border-bottom: 1px solid var(--color-borde); }
.faq__item:first-child { border-top: 1px solid var(--color-borde); }
/* La pregunta abierta se marca con un fondo apenas más cargado que el
   papel: se ve dónde estás sin necesidad de líneas ni flechas. */
.faq__item[open] {
  background: var(--color-fondo-alt);
  border-radius: var(--radio-md);
  padding-inline: var(--esp-6);
  margin-inline: calc(var(--esp-6) * -1);
}

.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) 0;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: 600;
  cursor: pointer;
  list-style: none;                 /* saca el triángulo del navegador */
  transition: var(--transicion);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--color-acento-oscuro); }
.faq__pregunta:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }

/* Signo + que gira hasta formar una × al abrir la pregunta */
.faq__pregunta::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-acento-oscuro);
  transition: transform var(--transicion);
}
.faq__item[open] .faq__pregunta::after { transform: rotate(45deg); }

.faq__respuesta { padding: 0 0 var(--esp-6); color: var(--color-texto-sec); }
.faq__respuesta p { margin: 0 0 var(--esp-4); }
.faq__respuesta p:last-child { margin-bottom: 0; }

/* --- AGENDAR: TEXTO + FORMULARIO --------------------------- */

.agendar { display: grid; gap: var(--esp-8); }
.agendar__encabezado { max-width: 60ch; }

.agendar__intro {
  margin: var(--esp-8) 0 var(--esp-4);
  font-family: var(--fuente-titulos);
  font-weight: 600;
}
.agendar__pasos {
  list-style: none; padding: 0;
  margin: 0;
  counter-reset: agenda;
  display: grid;
  gap: 0;
}
.agendar__despues { border-top: 1px solid var(--color-borde); padding-top: var(--esp-8); }
.agendar__pasos li {
  counter-increment: agenda;
  position: relative;
  /* Deja libre el ancho del círculo numerado más un respiro */
  padding: 0 0 var(--esp-6) calc(var(--esp-8) + var(--esp-2));
  color: var(--color-texto-sec);
}
.agendar__pasos li:last-child { padding-bottom: 0; }
.agendar__pasos strong { color: var(--color-texto); }
.agendar__pasos li::before {
  content: counter(agenda);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radio-full);
  background: var(--color-acento);
  color: #FFF9F4;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm); font-weight: 700;
}
.agendar__nota {
  margin-top: var(--esp-6);
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}

/* La tarjeta blanca separa el formulario del fondo gris de la sección */
/* --- CALENDARIO DE RESERVAS -------------------------------
   El calendario lo dibuja Cal.com dentro de este contenedor.
   Desde acá solo se controla la caja que lo contiene: por dentro
   los colores se pasan en js/calendario.js. --------------------- */

.agendar__calendario { min-width: 0; }   /* evita que el calendario desborde la grilla */

/* Sin fondo ni borde propios: el calendario de Cal.com ya trae su
   marco blanco, y poner otro alrededor dejaba un cuadro dentro de otro.
   Lo único que se conserva es la altura reservada, para que la página no
   pegue un salto cuando el calendario termina de cargar. */
.calendario {
  width: 100%;
  min-height: 520px;
}

/* Aviso que acompaña al calendario mientras carga. Va fuera de la caja
   del calendario, porque Cal.com no limpia lo que haya dentro. */
.calendario__aviso {
  margin: var(--esp-3) 0 0;
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}
.calendario__aviso--error { color: var(--color-error); font-weight: 600; }

/* --- ÚLTIMO DEL BLOG ---------------------------------------
   Franja al final de la portada con los artículos recientes.

   Está acá por dos razones distintas. Para el visitante, ver que
   publicas análisis de normativa al día es la prueba de que sigues
   activo y al tanto. Para Google, es el enlace que le permite
   descubrir los artículos: sin un enlace desde la portada, un
   artículo queda suelto, se indexa más lento y no recibe nada de
   la autoridad del dominio.
   Por eso el blog salió del menú de arriba pero no del sitio.   */

/* Dos columnas: a la izquierda por qué escribimos, a la derecha lo
   publicado. Se arma así, y no como una fila de tarjetas, porque hoy
   hay un artículo: una fila de tres con una sola tarjeta se ve rota,
   y esta forma se mantiene entera con uno, con dos o con seis. */
.blog-franja { display: grid; gap: var(--esp-8); }
.ultimos__intro p { color: var(--color-texto-sec); }

.ultimos { display: grid; gap: var(--esp-6); }

.ultimo {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  display: flex; flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.ultimo:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }

.ultimo__meta {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  align-items: center;
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-3);
}
.ultimo__tema { color: var(--color-acento); font-weight: 600; }

.ultimo__titulo { font-size: var(--texto-lg); margin-bottom: var(--esp-3); }
.ultimo__titulo a { color: var(--color-texto); text-decoration: none; }
.ultimo__titulo a:hover { color: var(--color-acento); }

.ultimo__resumen {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-4);
}
/* El enlace se pega abajo para que todas las tarjetas lo tengan a la
   misma altura, aunque los resúmenes midan distinto. */
.ultimo__enlace {
  margin: auto 0 0;
  font-weight: 600; font-size: var(--texto-sm);
  color: var(--color-acento);
  text-decoration: none;
}
.ultimo__enlace:hover { text-decoration: underline; }

.ultimos__pie { margin-top: var(--esp-8); }

/* --- PANTALLAS MÁS GRANDES --------------------------------- */

@media (min-width: 768px) {
  .blog-franja { grid-template-columns: 1fr 1.7fr; gap: var(--esp-12); align-items: start; }
  .ultimos { grid-template-columns: repeat(2, 1fr); }
  .nav__hamburguesa { display: none; }
  .nav__menu {
    display: flex; align-items: center; gap: var(--esp-4);
    position: static; padding: 0; box-shadow: none; background: none;
  }
  .cifras { grid-template-columns: repeat(3, 1fr); gap: var(--esp-8); }
  .areas__grilla { grid-template-columns: repeat(2, 1fr); gap: var(--esp-8) var(--esp-12); }
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); }
  .plan { padding: var(--esp-12); }
  .plan__columnas { grid-template-columns: 1fr 1fr; gap: var(--esp-12); }
  .plan__detalle { max-width: 70ch; }
  .destacado__interior { grid-template-columns: 1fr 1fr; gap: var(--esp-12); align-items: center; }
  .nosotros { grid-template-columns: 1.2fr 1fr; gap: var(--esp-12); }
  .cita__texto { max-width: 30ch; }
  .footer__grilla { grid-template-columns: repeat(4, 1fr); }
  /* El calendario ocupa todo el ancho: con menos de 900px, Cal.com pone
     las horas debajo del mes en vez de al lado. */
  .agendar { gap: var(--esp-12); }
  /* El calendario necesita más ancho que el texto para que la grilla
     del mes y las horas quepan cómodas. */
  .calendario { min-height: 560px; }
}

/* --- PANTALLAS ANCHAS: pasos al lado del calendario ---------
   Solo desde 1280px. Más abajo el calendario se quedaría con menos
   de 900px y Cal.com pondría las horas debajo del mes en vez de al
   lado, que es justo lo que queríamos evitar.
   Por eso esta sección se ensancha más que el resto de la página. */

@media (min-width: 1280px) {
  .agendar {
    max-width: 1360px;
    margin-inline: auto;
    grid-template-columns: 320px 1fr;
    gap: var(--esp-12);
    align-items: start;
  }
  /* El título ocupa las dos columnas; abajo van los pasos y el calendario */
  .agendar__encabezado { grid-column: 1 / -1; }
  .agendar__despues {
    grid-column: 1;
    grid-row: 2;
    border-top: 0;
    padding-top: 0;
  }
  .agendar__calendario { grid-column: 2; grid-row: 2; }
  .agendar__intro { margin-top: 0; }
}

@media (min-width: 1024px) {
  .hero__titulo   { max-width: 20ch; }
  .hero__subtitulo { max-width: 60ch; }
}

@media (min-width: 1024px) {
  /* En tres columnas las seis áreas se leen como dos filas de tres, que es
     como se recorre el ciclo: constitución → mes a mes → año → régimen →
     correcciones → laboral. */
  .areas__grilla { grid-template-columns: repeat(3, 1fr); }
  /* Seis servicios en tres columnas: dos filas parejas. En dos columnas
     serían tres filas y la sección se hace larga. */
  .indice .servicios { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1140px) {
  /* Los cinco pasos en una sola fila: se leen como una secuencia */
  .pasos { grid-template-columns: repeat(5, 1fr); gap: var(--esp-4); }
}

/* Respeta a quien pidió menos animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ============================================================
   TEXTO JUSTIFICADO — regla de toda la página

   Decisión de Sergio: los textos van justificados, o sea
   parejos por los dos lados, como en un documento impreso.
   Vale para TODO lo que se agregue de aquí en adelante.

   Va acompañado SIEMPRE de hyphens: auto. Sin eso, el navegador
   estira los espacios entre palabras para cuadrar el margen y
   se forman "ríos" de blanco que cruzan el párrafo, sobre todo
   en celular. Con la partición de palabras activada, el
   navegador corta con guion y las líneas quedan parejas.
   Funciona porque la página declara lang="es": así el navegador
   sabe dónde puede cortar una palabra en español.

   Este bloque va al final del archivo a propósito: así se
   aplica sobre todo lo anterior sin necesidad de !important.
   ============================================================ */

p,
li,
dd,
blockquote,
figcaption {
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* --- DÓNDE NO SE JUSTIFICA -----------------------------------
   En bloques angostos o de una sola línea, justificar no empareja
   nada: solo abre huecos. Estos vuelven a alinearse por la
   izquierda (o quedan como estaban).                            */

.nav p, .nav li,
.footer p, .footer li,
.marquesina p, .marquesina li,
.cifras p, .cifras__texto,
.plan__monto, .plan__precio, .plan__sub,
.cita__autor,
.etiqueta,
.pendiente,
.migas,
.articulo__meta,
.tarjeta-post__meta,
.ultimo__meta, .ultimo__resumen,
/* Los ítems de lista son renglones de una o dos líneas dentro de columnas
   angostas: justificar ahí no empareja nada, solo abre huecos entre
   palabras. Se nota sobre todo en celular, donde la columna es aún más
   estrecha. */
.plan__extras li, .servicio__lista li, .destacado__lista li, .ficha__lista li,
.area p,   /* tres columnas: la más angosta de la página */
.servicio__nota,   /* la línea de precio, al pie de cada tarjeta */
.tabla-scroll th, .tabla-scroll td {
  text-align: left;
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* --- LAS BAJADAS TAMPOCO SE JUSTIFICAN -----------------------
   Son las frases que van debajo de un título: una o dos líneas,
   con letra más grande que el cuerpo.

   Justificar solo empareja de verdad a partir de la cuarta línea.
   En dos líneas el navegador tiene que estirar la primera entera
   para cuadrar el margen derecho, y como no le alcanza, parte la
   palabra: "pun-tual", "nego-cio". Con letra grande ese guion se
   ve enorme y llama más la atención que la frase.

   El cuerpo del texto sigue justificado: ahí sí hay líneas
   suficientes para que el ajuste sea invisible.               */

.hero__subtitulo,
.seccion__bajada,
.puntuales__intro p,
.indice__intro p,
.plan__frase,
.servicio__frase,
.destacado__frase,
.articulo__bajada,
.listado__cabecera p {
  text-align: left;
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Los cinco pasos de "Cómo trabajamos" son la columna más angosta de
   la página. Ahí justificar no empareja: abre huecos enormes entre
   palabras ("Nos      reunimos,") y parte palabras cortas en dos
   ("confirma-mos"). Se excluye el paso completo.

   Va aparte y con el descendiente explícito porque text-align SE
   HEREDA: al justificar el <li>, el <h3> de adentro se justificaba
   también aunque los títulos nunca entraron en la regla. */
.paso, .paso * {
  text-align: left;
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Este ya estaba centrado y así se queda. Sin partición de palabras:
   en un texto centrado y corto, cortar con guion no gana nada. */
.calendario__aviso {
  text-align: center;
  -webkit-hyphens: manual;
          hyphens: manual;
}