/* ==========================================================================
   RETORIK — hoja de estilo única.
   Monocromo: tinta #1c1b1c, hueso #f5f4f1, gris #8c8c93, líneas de 1px.
   Georgia para titulares, sans del sistema para texto chico.
   Mobile first: casi todo el tráfico llega desde Instagram.
   Sin frameworks, sin fuentes externas, sin peticiones de red.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --tinta:      #1c1b1c;
  --tinta-alta: #141314;            /* un peldaño más profundo, para bandas */
  --hueso:      #f5f4f1;
  --gris:       #8c8c93;

  --linea:      rgba(245, 244, 241, 0.14);
  --linea-alta: rgba(245, 244, 241, 0.30);
  --velo:       rgba(245, 244, 241, 0.05);

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --aire:   clamp(3.5rem, 11vw, 8.5rem);   /* separación vertical entre secciones */
  --margen: clamp(1.25rem, 5.5vw, 4.5rem); /* margen lateral */
  --ancho:  1180px;

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Color del texto que tiene que destacar dentro de un párrafo. Cambia solo
     al entrar en una banda clara — sin esto, hueso sobre hueso desaparece. */
  --fuerte: var(--hueso);

  /* Grano de película. Es un SVG generado, no un archivo: ~400 bytes inline,
     cero peticiones. Es lo que le quita al fondo la sensación de plano. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  position: relative;      /* bloque contenedor de la capa de grano */
  background: var(--tinta);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}

h1 { font-size: clamp(2.5rem, 8.5vw, 4.75rem); }
h2 { font-size: clamp(1.95rem, 6vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.16; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--hueso); color: var(--tinta); }

:focus-visible {
  outline: 1px solid var(--hueso);
  outline-offset: 3px;
}

/* Grano de película, detrás de todo el contenido.
   RENDIMIENTO — esto era `position: fixed` + `mix-blend-mode: soft-light` sobre
   la ventana entera, y era la causa principal de que el scroll se sintiera
   pesado: obligaba a recomponer la pantalla completa en cada fotograma. Ahora
   es una capa absoluta, sin mezcla, que se pinta UNA vez y viaja con la
   página. Se ve prácticamente igual y no cuesta nada por fotograma. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--grano);
  background-size: 160px 160px;
}

/* ---------- 2b. Fondos generados ----------------------------------------- */
/*  Reemplazan a las fotos de fondo: halos de luz, tramas y viñeteado hechos
    con gradientes. Pesan ~1 KB en total y no piden nada a la red.            */

.aurora,
.rejilla-fondo,
.vineta {
  position: relative;
  isolation: isolate;          /* mantiene las capas dentro de la sección */
}

.aurora::before,
.rejilla-fondo::after,
.vineta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Halos de luz fuera de foco. Cada variante los pone en otro sitio para que
   dos secciones seguidas no se vean iguales. */
.aurora::before {
  background:
    radial-gradient(58% 52% at 14% 4%,  rgba(245, 244, 241, 0.10), transparent 62%),
    radial-gradient(42% 44% at 92% 30%, rgba(245, 244, 241, 0.06), transparent 60%);
}
.aurora.aurora-baja::before {
  background:
    radial-gradient(62% 55% at 82% 100%, rgba(245, 244, 241, 0.09), transparent 64%),
    radial-gradient(38% 40% at 8% 22%,   rgba(245, 244, 241, 0.05), transparent 60%);
}
.aurora.aurora-centro::before {
  background: radial-gradient(58% 62% at 50% 46%, rgba(245, 244, 241, 0.085), transparent 68%);
}

/* Trama técnica de 1px, desvanecida hacia los bordes con una máscara: sin la
   máscara se ve como papel milimetrado y compite con el texto. */
.rejilla-fondo::after {
  background-image:
    linear-gradient(to right,  var(--linea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(74% 62% at 50% 42%, #000 12%, transparent 76%);
          mask-image: radial-gradient(74% 62% at 50% 42%, #000 12%, transparent 76%);
}

/* Viñeteado: cierra la sección por los bordes y la hunde. */
.vineta::before {
  background: radial-gradient(80% 70% at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.45));
}

/* Banda oscura profunda: el escalón que hace que la siguiente respire. */
.profunda {
  background: var(--tinta-alta);
  position: relative;
  isolation: isolate;
}
.profunda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--grano);
  background-size: 160px 160px;
}

/* ---------- 3. Piezas reutilizables -------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--aire); }

/* Rótulo pequeño en versalitas: el recurso de identidad de los afiches */
.rotulo {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.5rem;
}

.lead {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--gris);
  max-width: 46ch;
}

/* Botones: sin relleno de color, solo contorno de 1px — la marca es la línea */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--linea-alta);
  border-radius: 999px;
  background: transparent;
  color: var(--hueso);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: background 0.35s var(--curva), border-color 0.35s var(--curva),
              color 0.35s var(--curva);
}
.btn:hover { border-color: var(--hueso); background: var(--velo); }

.btn-solido {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--tinta);
}
.btn-solido:hover { background: #ffffff; border-color: #ffffff; color: var(--tinta); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- 4. Marca ----------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.marca svg { width: 26px; height: 25px; flex: none; }
.marca span {
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.34em;
  padding-left: 0.1em;
}

/* ---------- 5. Barra de navegación --------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* RENDIMIENTO — tenía `backdrop-filter: blur(14px)`, que recalcula un
     desenfoque de ancho completo en cada fotograma del scroll. Un fondo opaco
     se ve igual de bien sobre este diseño y no cuesta nada. */
  background: var(--tinta);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--curva);
}
.nav.pegado { border-bottom-color: var(--linea); }

.nav-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
}

.nav-menu { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
.nav-links a {
  font-size: 0.88rem;
  color: var(--gris);
  transition: color 0.3s var(--curva);
}
.nav-links a:hover { color: var(--hueso); }

/* Botón hamburguesa (solo móvil) */
.nav-boton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.nav-boton i {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--hueso);
  transition: transform 0.35s var(--curva), opacity 0.25s var(--curva);
}
.nav-boton[aria-expanded="true"] i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-boton[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-boton[aria-expanded="true"] i:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

/* Cajón desplegable en móvil */
.nav-cajon {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--curva);
  border-top: 1px solid transparent;
}
.nav-cajon.abierto {
  grid-template-rows: 1fr;
  border-top-color: var(--linea);
}
.nav-cajon > div { overflow: hidden; }
.nav-cajon a {
  display: block;
  padding: 1rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--linea);
  color: var(--hueso);
}
.nav-cajon .cajon-pie {
  padding-block: 1.35rem 1.6rem;
  border-bottom: 0;
}

@media (min-width: 860px) {
  .nav-boton { display: none; }
  .nav-cajon { display: none; }
  .nav-menu { display: flex; align-items: center; gap: 2rem; }
}

/* ---------- 6. Portada --------------------------------------------------- */
.portada {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
}

/* Burbuja gigante de fondo, al 5%: el mismo recurso de los afiches */
.portada-marca {
  position: absolute;
  right: -22%;
  bottom: -18%;
  width: min(52rem, 115vw);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.portada .wrap { position: relative; z-index: 1; }

.portada-rejilla {
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

/* Más chico que el h1 general: en la portada compite con la conversación de
   ejemplo, y la primera pantalla tiene que caber entera. */
.portada h1 {
  font-size: clamp(2.5rem, 7.2vw, 3.75rem);
  margin-bottom: 1.35rem;
}
.portada h1 em {
  font-style: italic;
  color: var(--gris);
}

/* Etiqueta que deja claro, antes del titular, que esto es UN proyecto de
   Retorik y no la empresa entera. */
.portada-proyecto {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}
.portada-proyecto::before {
  content: "";
  width: clamp(1.5rem, 4vw, 2.75rem);
  height: 1px;
  background: var(--linea-alta);
  flex: none;
}
.portada-proyecto b { color: var(--hueso); font-weight: 400; }

.portada .lead { max-width: 44ch; }

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.4rem;
}

.portada-sello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  font-size: 0.82rem;
  color: var(--gris);
}
.portada-sello span { display: inline-flex; align-items: center; gap: 0.5rem; }
.portada-sello span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gris);
  flex: none;
}

@media (min-width: 960px) {
  .portada-rejilla {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

/* ---------- 7. Demo guionizada (la conversación que se escribe sola) ------ */
.demo {
  border: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(245, 244, 241, 0.045), rgba(245, 244, 241, 0.015));
  display: flex;
  flex-direction: column;
  height: min(30rem, 68vh);
}

.demo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--linea);
}
.demo-quien { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.demo-avatar {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--linea-alta);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 0.8rem;
  flex: none;
}
.demo-nombre {
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-canal {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.demo-hilo {
  flex: 1;
  min-height: 0;                 /* sin esto, un hijo flex no se deja encoger */
  padding: 1.35rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-alta) transparent;
}
.demo-hilo::-webkit-scrollbar { width: 6px; }
.demo-hilo::-webkit-scrollbar-thumb { background: var(--linea-alta); }

.demo-hora {
  flex: none;
  align-self: center;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.4rem;
}

.burbuja {
  flex: none;
  max-width: 84%;
  padding: 0.72rem 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  border: 1px solid var(--linea);
  border-radius: 14px;
  animation: entra 0.4s var(--curva) both;
}
.burbuja.cliente {
  align-self: flex-end;
  background: var(--hueso);
  color: var(--tinta);
  border-color: var(--hueso);
  border-bottom-right-radius: 4px;
}
.burbuja.asistente {
  align-self: flex-start;
  background: transparent;
  border-bottom-left-radius: 4px;
}

@keyframes entra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* Puntos de "escribiendo" */
.puntos {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 0.95rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.puntos i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gris);
  animation: latido 1.25s infinite;
}
.puntos i:nth-child(2) { animation-delay: 0.18s; }
.puntos i:nth-child(3) { animation-delay: 0.36s; }
@keyframes latido {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* La ficha del pedido guardado: el momento que vende el producto */
.ficha {
  flex: none;
  margin-top: 0.5rem;
  border: 1px solid var(--linea-alta);
  background: var(--tinta-alta);
  animation: entra 0.55s var(--curva) both;
}
.ficha-titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--linea);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}
.ficha-titulo svg { width: 0.95rem; height: 0.95rem; flex: none; }
.ficha dl {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.1rem;
  font-size: 0.82rem;
}
.ficha dt { color: var(--gris); white-space: nowrap; }
.ficha dd { margin: 0; }

.demo-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.15rem;
  border-top: 1px solid var(--linea);
  font-size: 0.74rem;
  color: var(--gris);
}
.demo-repetir {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  color: var(--gris);
  font-size: 0.74rem;
  padding: 0.25rem 0;
  transition: color 0.3s var(--curva);
}
.demo-repetir:hover { color: var(--hueso); }
.demo-repetir svg { width: 0.85rem; height: 0.85rem; }

/* ---------- 8. Bloque del problema --------------------------------------- */
.problema { border-top: 1px solid var(--linea); }

.problema-rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .problema-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.problema h2 { margin-bottom: 1.4rem; }
.problema p { color: var(--gris); }
.problema p + p { margin-top: 1.1rem; }
.problema .cierre {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.35;
  color: var(--hueso);
  max-width: 30ch;
}

/* Mensajes sin responder, apilados */
.sinleer { display: flex; flex-direction: column; gap: 0.75rem; }
.sinleer-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linea);
  background: var(--velo);
}
.sinleer-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hueso);
  margin-top: 0.55rem;
  flex: none;
}
.sinleer-texto { flex: 1; min-width: 0; }
.sinleer-texto p { font-size: 0.92rem; line-height: 1.45; color: var(--hueso); }
.sinleer-meta {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  color: var(--gris);
}
.sinleer-nota {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--gris);
  text-align: right;
}

/* ---------- 9. Pasos (01 · 02 · 03 · 04) --------------------------------- */
.pasos { border-top: 1px solid var(--linea); }
.pasos h2 { margin-bottom: 3rem; max-width: 16ch; }

.paso {
  display: flex;
  align-items: baseline;
  gap: clamp(1.1rem, 3.5vw, 2.6rem);
  padding-block: clamp(1.6rem, 3.5vw, 2.3rem);
  border-top: 1px solid var(--linea);
}
.paso:last-of-type { border-bottom: 1px solid var(--linea); }
.paso-num {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--gris);
  min-width: 2.2rem;
  flex: none;
}
.paso-txt { display: flex; flex-direction: column; gap: 0.45rem; }
.paso-txt h3 { letter-spacing: -0.015em; }
.paso-txt p { color: var(--gris); font-size: 0.98rem; max-width: 52ch; }

.pasos-cierre {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  line-height: 1.3;
}

/* ---------- 10. Chat en vivo --------------------------------------------- */
.probar { border-top: 1px solid var(--linea); }

.probar-rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .probar-rejilla { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.probar h2 { margin-bottom: 1.4rem; }
.probar .lead { margin-bottom: 1.8rem; }

.probar-pistas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}
.probar-pistas li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: 0.9rem;
  color: var(--gris);
}
.probar-pistas li b { color: var(--hueso); font-weight: 400; }

/* La caja del chat real */
.chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(245, 244, 241, 0.045), rgba(245, 244, 241, 0.015));
  height: min(34rem, 76vh);
}

.chat-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--linea);
}
.chat-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}
.chat-estado::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gris);
  flex: none;
}
.chat-estado.viva::before { background: var(--hueso); }

.chat-hilo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.35rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-alta) transparent;
}
.chat-hilo::-webkit-scrollbar { width: 6px; }
.chat-hilo::-webkit-scrollbar-thumb { background: var(--linea-alta); }

.burbuja.sistema {
  align-self: center;
  max-width: 92%;
  text-align: center;
  border-style: dashed;
  color: var(--gris);
  font-size: 0.86rem;
  border-radius: 10px;
}
.burbuja.sistema a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; }

.chat-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 1.15rem 0.9rem;
}
.chat-sugerencias:empty { display: none; }
.chip {
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--gris);
  font-size: 0.8rem;
  padding: 0.42rem 0.9rem;
  transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}
.chip:hover { color: var(--hueso); border-color: var(--linea-alta); }

.chat-entrada {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem 0.9rem;
  border-top: 1px solid var(--linea);
}
.chat-entrada input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--hueso);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.7rem 1.05rem;
  transition: border-color 0.3s var(--curva);
}
.chat-entrada input::placeholder { color: var(--gris); }
.chat-entrada input:focus { outline: none; border-color: var(--linea-alta); }
.chat-enviar {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--linea-alta);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--curva), opacity 0.3s var(--curva);
}
.chat-enviar:hover:not(:disabled) { background: var(--velo); }
.chat-enviar:disabled { opacity: 0.35; cursor: default; }
.chat-enviar svg { width: 1.05rem; height: 1.05rem; }

/* ---------- 11. Bandas claras -------------------------------------------- */
/*  `.invertida` se aplica a las tres secciones que cortan el ritmo oscuro:
    cómo funciona, qué incluye y quiénes somos. Redefine los tokens en su
    propio ámbito, así que todo lo de dentro se adapta sin reglas aparte.     */
.invertida {
  background: var(--hueso);
  color: var(--tinta);
  --linea: rgba(28, 27, 28, 0.16);
  --linea-alta: rgba(28, 27, 28, 0.34);
  --velo: rgba(28, 27, 28, 0.035);
  --gris: #6f6f76;
  --fuerte: var(--tinta);
  position: relative;
  isolation: isolate;
}
.invertida .rotulo,
.invertida .lead { color: var(--gris); }

/* La banda clara es opaca y tapa el grano del body, así que lleva el suyo. El
   mismo mosaico gris medio: sobre hueso oscurece, sobre tinta aclara. */
.invertida::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: var(--grano);
  background-size: 160px 160px;
}

/* Los halos también existen en claro, en tinta y mucho más suaves: sobre
   hueso, la misma opacidad de antes sería una mancha. */
.invertida.aurora::before {
  background:
    radial-gradient(56% 50% at 88% 2%,  rgba(28, 27, 28, 0.055), transparent 62%),
    radial-gradient(44% 46% at 6% 40%,  rgba(28, 27, 28, 0.035), transparent 62%);
}
.invertida.aurora.aurora-baja::before {
  background:
    radial-gradient(60% 52% at 12% 100%, rgba(28, 27, 28, 0.05), transparent 64%),
    radial-gradient(40% 42% at 90% 18%,  rgba(28, 27, 28, 0.03), transparent 60%);
}
.invertida.vineta::before {
  background: radial-gradient(82% 72% at 50% 45%, transparent 45%, rgba(28, 27, 28, 0.07));
}

/* Un botón claro sobre banda clara sería invisible. */
.invertida .btn { color: var(--tinta); border-color: var(--linea-alta); }
.invertida .btn:hover { border-color: var(--tinta); }
.invertida .btn-solido {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--hueso);
}
.invertida .btn-solido:hover { background: #000000; border-color: #000000; color: var(--hueso); }

.incluye {
  display: grid;
  gap: 0;
  margin-top: 3rem;
  border-top: 1px solid var(--linea);
}
.incluye-item {
  padding-block: clamp(1.5rem, 3.5vw, 2.1rem);
  border-bottom: 1px solid var(--linea);
  display: grid;
  gap: 0.5rem;
}
.incluye-item h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.incluye-item p { color: var(--gris); font-size: 0.95rem; max-width: 54ch; }

@media (min-width: 800px) {
  .incluye { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
}

/* Maqueta del panel de pedidos */
.panel {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid var(--linea);
  background: #ffffff;
}
.panel-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.panel-titulo { font-family: var(--serif); font-size: 1.02rem; }
.panel-etiqueta {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  border: 1px solid var(--linea);
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.panel-desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.panel th {
  text-align: left;
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.panel td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.panel tbody tr:last-child td { border-bottom: 0; }
.panel td small { display: block; color: var(--gris); font-size: 0.78rem; }
.panel-marca {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--linea-alta);
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
  white-space: nowrap;
}
.panel-nota {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--gris);
}

/* ---------- 11b. La empresa y sus proyectos ------------------------------ */
.empresa { border-top: 1px solid var(--linea); }
.empresa h2 { margin-bottom: 1.4rem; max-width: 17ch; }
.empresa p { color: var(--gris); max-width: 54ch; }
.empresa p + p { margin-top: 1.1rem; }

.proyectos {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
  border-top: 1px solid var(--linea);
}
@media (min-width: 720px)  { .proyectos { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 3.5rem); } }
@media (min-width: 1040px) { .proyectos { grid-template-columns: repeat(3, 1fr); } }

.proyecto {
  display: block;
  padding-block: clamp(1.6rem, 3.5vw, 2.2rem);
  border-bottom: 1px solid var(--linea);
  /* transform en vez de padding: mover el relleno recalcula la maquetación en
     cada fotograma de la animación. */
  transition: transform 0.4s var(--curva);
}
a.proyecto:hover { transform: translateX(0.6rem); }

.proyecto-cabeza {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}
.proyecto-num {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--gris);
}
.proyecto-estado {
  margin-left: auto;
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  white-space: nowrap;
}
.proyecto-estado.viva {
  color: var(--hueso);
  border-color: var(--linea-alta);
}
.proyecto h3 { font-size: clamp(1.3rem, 3.4vw, 1.65rem); }
.proyecto p { color: var(--gris); font-size: 0.95rem; max-width: 46ch; }
.proyecto-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--hueso);
}
.proyecto-ir svg { width: 0.9rem; height: 0.9rem; }

/* El que todavía no existe se marca en gris y sin flecha: no es un enlace. */
.proyecto.futuro h3 { color: var(--gris); }

/* ---------- 12. Se adapta a lo que vendas -------------------------------- */
/*  Reemplaza a la antigua "Para quién es". Aquella describía a los clientes y
    de hecho EXCLUÍA rubros; esta muestra adaptabilidad con ejemplos reales de
    lo que le preguntan a un negocio, sin decirle a nadie que no encaja.       */
.adapta { border-top: 1px solid var(--linea); }
.adapta h2 { margin-bottom: 1.3rem; max-width: 16ch; }
.adapta .lead { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); max-width: 56ch; }

.casos {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.15rem);
}
@media (min-width: 700px)  { .casos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .casos { grid-template-columns: repeat(3, 1fr); } }

/*  Cada caso es un objeto, no un párrafo: por eso esta sección deja de leerse
    plana. La pregunta va en burbuja de chat; la respuesta, bajo una línea.    */
.caso {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.15rem, 2.6vw, 1.5rem);
  border: 1px solid var(--linea);
  background: var(--velo);
  transition: border-color 0.35s var(--curva), background 0.35s var(--curva);
}
.caso:hover { border-color: var(--linea-alta); background: rgba(245, 244, 241, 0.075); }

.caso-pregunta {
  align-self: flex-start;
  max-width: 100%;
  padding: 0.62rem 0.95rem;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--hueso);
  color: var(--tinta);
  font-size: 0.92rem;
  line-height: 1.45;
}
.caso-respuesta {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gris);
}
/* Flecha de respuesta dibujada con bordes: sin iconos ni peticiones. */
.caso-respuesta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.55rem;
  height: 0.55rem;
  border-left: 1px solid var(--linea-alta);
  border-bottom: 1px solid var(--linea-alta);
}

/* ---------- 13. Lo que NO hace ------------------------------------------- */
/*  El "NO" es el argumento, así que se destaca: en el titular y en cada punto. */
.no {
  font-style: normal;
  padding-bottom: 0.06em;
  border-bottom: 2px solid currentColor;
}
.limites-lista .no { border-bottom-width: 1px; }

.limites { border-top: 1px solid var(--linea); }
.limites h2 { margin-bottom: 1.3rem; max-width: 20ch; }

.limites-lista {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 0;
}
.limites-lista li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--linea);
}
.limites-lista svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-top: 0.32rem;
  color: var(--gris);
}
.limites-lista b { font-weight: 400; display: block; margin-bottom: 0.2rem; }
.limites-lista span { color: var(--gris); font-size: 0.92rem; }

@media (min-width: 800px) {
  .limites-lista { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
}

/* ---------- 14. Nosotros ------------------------------------------------- */
.nosotros { border-top: 1px solid var(--linea); }

.nosotros-rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .nosotros-rejilla { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/*  A color, por decisión de Patrick: en la sección donde se le pide confianza
    a un desconocido, la foto real pesa más que la coherencia cromática.       */
.retrato {
  border: 1px solid var(--linea);
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
}

.nosotros h2 { margin-bottom: 1.5rem; }
.nosotros p + p { margin-top: 1.1rem; }
.nosotros p { color: var(--gris); max-width: 54ch; }
.nosotros p strong { color: var(--fuerte); font-weight: 400; }

/* Va después de `.nosotros p`, que si no le gana por especificidad y deja la
   frase de cierre en gris de párrafo en vez de a plena tinta. */
.nosotros .firma {
  margin-top: 2.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.35;
  color: var(--fuerte);
  max-width: 32ch;
}

/* ---------- 15. Preguntas ------------------------------------------------ */
.preguntas { border-top: 1px solid var(--linea); }
.preguntas h2 { margin-bottom: 3rem; }

.acordeon { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.7vw, 1.25rem);
  line-height: 1.32;
  transition: color 0.3s var(--curva);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--gris); }
.pregunta summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  margin-top: 0.5rem;
  background:
    linear-gradient(var(--hueso), var(--hueso)) center / 100% 1px no-repeat,
    linear-gradient(var(--hueso), var(--hueso)) center / 1px 100% no-repeat;
  transition: transform 0.4s var(--curva);
}
.pregunta[open] summary::after { transform: rotate(135deg); }
.pregunta-cuerpo {
  padding-bottom: 1.6rem;
  color: var(--gris);
  font-size: 0.98rem;
  max-width: 66ch;
  animation: despliega 0.4s var(--curva);
}
.pregunta-cuerpo p + p { margin-top: 0.85rem; }
@keyframes despliega {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 16. Contacto ------------------------------------------------- */
.contacto { border-top: 1px solid var(--linea); }
.contacto h2 { margin-bottom: 1.4rem; max-width: 15ch; }
.contacto .lead { max-width: 50ch; }

.canales {
  display: grid;
  gap: 0;
  margin-top: 3.2rem;
  border-top: 1px solid var(--linea);
}
.canal {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linea);
  transition: transform 0.4s var(--curva);
}
.canal:hover { transform: translateX(0.6rem); }
.canal svg.icono { width: 1.35rem; height: 1.35rem; flex: none; color: var(--gris); }
.canal-txt { flex: 1; min-width: 0; }
.canal-etq {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  display: block;
  margin-bottom: 0.15rem;
}
.canal-val {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  word-break: break-word;
}
.canal-flecha { width: 1rem; height: 1rem; flex: none; color: var(--gris); }

/* ---------- 17. Pie ------------------------------------------------------ */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 3rem 2.5rem;
}
.pie-fila {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.pie-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.6rem;
  font-size: 0.88rem;
}
.pie-links a { color: var(--gris); transition: color 0.3s var(--curva); }
.pie-links a:hover { color: var(--hueso); }
.pie-legal {
  font-size: 0.78rem;
  color: var(--gris);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

@media (min-width: 800px) {
  .pie-fila {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .pie-legal { justify-content: flex-end; }
}

/* ---------- 18. Página de texto (privacidad) ----------------------------- */
.texto { padding-block: clamp(3rem, 8vw, 5rem) var(--aire); }
.texto .wrap { max-width: 46rem; }
.texto h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); margin-bottom: 1.2rem; }
.texto .actualizado {
  font-size: 0.8rem;
  color: var(--gris);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 2.5rem;
}
.texto h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.texto p, .texto li { color: var(--gris); font-size: 0.98rem; }
.texto p + p { margin-top: 1rem; }
.texto ul { margin: 1rem 0 0; padding-left: 1.15rem; }
.texto li { margin-bottom: 0.5rem; }
.texto li strong, .texto p strong { color: var(--hueso); font-weight: 400; }
.texto a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; }
.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--gris);
  margin-bottom: 2.5rem;
  transition: color 0.3s var(--curva);
}
.volver:hover { color: var(--hueso); }
.volver svg { width: 0.95rem; height: 0.95rem; }

/* ---------- 19. Aparición al desplazar ----------------------------------- */
/* Se oculta SOLO si el JS esta vivo (la clase .js la pone un script en el
   <head>). Sin esa guarda, un error de JS dejaba la pagina entera invisible:
   inaceptable en el sitio que recibe a los prospectos. */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.js .revelar.visible { opacity: 1; transform: none; }

.js .revelar[data-retraso="1"] { transition-delay: 0.08s; }
.js .revelar[data-retraso="2"] { transition-delay: 0.16s; }
.js .revelar[data-retraso="3"] { transition-delay: 0.24s; }

/* ---------- 20. Accesibilidad -------------------------------------------- */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  top: -100px;
  left: var(--margen);
  z-index: 100;
  background: var(--hueso);
  color: var(--tinta);
  padding: 0.7rem 1.2rem;
  transition: top 0.25s var(--curva);
}
.saltar:focus { top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .revelar { opacity: 1; transform: none; }
}