/* ═══════════════════════════════════════════════════════════════════════════
   BASE — tokens, reset, navegación, botones y pie. COMPARTIDO por las landings.
   ───────────────────────────────────────────────────────────────────────────
   Dirección de arte del 19-08, destilada de arlo.sh (direccion-arte/referencias).

   El cambio de fondo respecto a styles.css: allí el morado era el ambiente
   —texto morado, bordes morados, fondos morados— y por eso la página se leía
   plana: no destacaba nada porque destacaba todo. Aquí el morado es SOLO el
   acento (CTA, la cursiva del titular, las cifras de precio) y el resto va en
   tinta casi negra sobre blanco, con un crema cálido para alternar.

   styles.css sigue vivo y sin tocar: lo usa taller.html.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* Tinta — antes era #1e0b40 (morado). Ahora casi negro con una gota de violeta */
  --ink:        #17141f;
  --ink-2:      #56525f;
  --ink-3:      #8d8996;
  --ink-4:      #b8b5be;

  /* Superficies */
  --white:      #ffffff;
  --cream:      #faf8f5;   /* el #FAF7F0 de Arlo, calentado */
  --cream-deep: #f4f1ec;

  /* Acento — la marca. Se usa poco a propósito */
  --purple:      #7C3AED;
  --purple-deep: #5b21b6;
  --purple-tint: #f5f3ff;

  --line:      rgba(23,20,31,.10);
  --line-soft: rgba(23,20,31,.055);

  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Sombras de Arlo: propagación negativa, muy poco contraste */
  --sh-1: 0 4px 12px -6px rgba(23,20,31,.18);
  --sh-2: 0 7px 17px -3.5px rgba(38,28,13,.14);
  --sh-3: 0 24px 48px -20px rgba(23,20,31,.20);

  --r-card:  16px;
  --r-panel: 28px;
  --r-pill:  999px;

  --w-text: 760px;   /* el ancho de Arlo para texto */
  --w-wide: 1120px;  /* para el configurador, que necesita más */
  --air:    96px;    /* Arlo usa 76; el español es más largo */
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  /* Crema, no blanco (09-09). Todas las tarjetas de la web —.persona, .paso,
     .serv, .proy, .vista— tienen fondo blanco: sobre una página blanca no se
     ven, y sobre el crema se despegan solas. El cambio de fondo hace el trabajo
     que iban a hacer las sombras. */
  background: var(--cream);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { max-width: 100%; display: block; }

/* ─── ESCALA TIPOGRÁFICA ─────────────────────────────────────────────────
   Salto titular-cuerpo ×3.4, el de Arlo. Cormorant pesa menos que Fraunces,
   así que va a 600 donde Arlo usa 500: a 400 se deshace en pantalla grande. */

.t-display, .t-h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(42px, 6.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(32px, 4.3vw, 50px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
}
/* La cursiva de acento: el gesto que ya tenía la marca y que Arlo también usa */
.acento { font-style: italic; color: var(--purple); }

.t-lead   { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--ink-2); }
.t-body   { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.t-small  { font-size: 14px;   line-height: 1.6; color: var(--ink-3); }
.t-micro  { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

.t-eyebrow {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple);
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.envoltura      { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 28px; }
.envoltura-txt  { width: 100%; max-width: var(--w-text); margin: 0 auto; padding: 0 28px; }
.seccion        { padding: var(--air) 0; }
.seccion-cream  { background: var(--cream-deep); }  /* un tono por debajo del fondo */
.seccion-ink    { background: var(--ink); color: var(--white); }
.centrado       { text-align: center; }

/* ─── BOTONES ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 14px 28px; border-radius: var(--r-pill);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-1 { background: var(--purple); color: #fff; box-shadow: var(--sh-2); }
.btn-1:hover { background: var(--purple-deep); box-shadow: var(--sh-3); transform: translateY(-1px); }

.btn-2 { background: rgba(255,255,255,.9); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.btn-2:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(23,20,31,.2), var(--sh-2); transform: translateY(-1px); }

.btn-3 { background: transparent; color: var(--ink-2); padding: 14px 8px; }
.btn-3:hover { color: var(--purple); }

/* ─── NAV — pastilla flotante con desenfoque, como Arlo ──────────────────
   ─── LA BARRA ─────────────────────────────────────────────────────────────
   Fondo de tinta fijo, no cristal translúcido.

   El cristal era blanco al 74 % y dejaba pasar lo que hubiera detrás. Con el
   texto en tinta sobre una sección blanca —que es la mitad de la web— el nav
   se disolvía: al bajar por la página, «Marirrodriga» desaparecía. La variante
   clara del hero oscuro y la clase .pegada eran dos parches para el mismo
   agujero, y cada uno arrastraba su propia lista de excepciones de color.

   Con la píldora oscura siempre, el contraste no depende de nada: da igual que
   detrás haya foto, crema o blanco. Una regla en vez de tres juegos de reglas.
   ───────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; z-index: 200;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 1180px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 9px 9px 9px 22px;
  background: rgba(23,20,31,.90);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 26px -12px rgba(10,8,16,.5);
  transition: box-shadow .25s, background .25s;
}
/* Al bajar se cierra del todo y pesa un poco más */
.nav.pegada {
  background: rgba(20,17,28,.97);
  box-shadow: 0 14px 34px -14px rgba(10,8,16,.62);
}

.nav-logo { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
/* El isotipo original: reloj y órbitas. Va algo mayor que el SVG que había
   porque sus anillos son muy finos y por debajo de 30 px se emborronan. */
.nav-logo img { width: 32px; height: 32px; flex: none; }
.nav-logo span { display: inline-flex; align-items: baseline; }
.nav-logo b { color: #c9b6ff; font-weight: 800; margin-left: 1px; }
/* nowrap y no encoger: al alargar las etiquetas —«Software para tu negocio»,
   «IA por departamento»— el flex empezó a partirlas en dos líneas en vez de
   dejarlas anchas, y la barra se veía como un párrafo. */
.nav-links { display: flex; align-items: center; gap: 21px; }
.nav-links > * { flex: none; }
.nav-link, .nav-grupo-btn { white-space: nowrap; }
.nav-link { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.76); transition: color .18s; }
.nav-link:hover { color: #fff; }
.nav-cta { font-size: 13.5px; padding: 11px 21px; }

/* ─── MENÚ DE PRODUCTO ────────────────────────────────────────────────────
   Dos ejes: por sector y por departamento. La misma pieza se busca de las dos
   maneras — el dueño de la clínica busca «software para clínicas», el jefe de
   atención busca «automatizar el teléfono» — así que las dos entradas existen.

   Cada grupo lleva una frase debajo del nombre. Sin ella, un panel de nueve
   enlaces obliga a leerlos todos para saber cuál es el tuyo.
   ───────────────────────────────────────────────────────────────────────── */
/* Estático a propósito: el panel se ancla a la barra, no al botón, y para eso
   el único bloque contenedor por encima tiene que ser .nav (que es fixed). */
.nav-grupo { position: static; display: flex; align-items: center; }

.nav-grupo-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 13.5px/1 var(--font-body); color: rgba(255,255,255,.76);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .18s;
}
.nav-grupo-btn::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.nav-grupo-btn:hover,
.nav-grupo[data-abierto] .nav-grupo-btn { color: #fff; }
.nav-grupo[data-abierto] .nav-grupo-btn::after { transform: rotate(-135deg); margin-top: 2px; }

/* ─── EL PANEL ES LA BARRA, ESTIRADA ──────────────────────────────────────
   Era una tarjeta blanca colgando del botón, y se leía como un pegote: fondo
   distinto, ancho distinto y borde propio, encima de una barra oscura. Ahora
   la barra se abre hacia abajo —mismo fondo, mismo ancho, mismos bordes— y
   los sectores se reparten en rejilla. Un bloque, no dos.

   Por eso .nav-grupo es estático: el panel se posiciona contra .nav.
   ───────────────────────────────────────────────────────────────────────── */
.nav-panel {
  position: absolute; top: 100%; left: -1px; right: -1px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px; padding: 12px;
  background: rgba(23,20,31,.90);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.10); border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 18px 40px -18px rgba(10,8,16,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-grupo[data-abierto] .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* Con un panel abierto barra y panel son un solo rectangulo redondeado, y por
   eso las esquinas de ARRIBA tambien cambian: 999 px sobre una barra de ~54
   se recorta a media altura, o sea una tapa semicircular, que soldada a un
   bloque recto se veia como dos piezas pegadas. 20 px es claramente menos que
   media altura, asi que arriba y abajo curvan igual.
   Sin :has() el navegador se queda con la pildora entera y el panel debajo:
   menos fino, pero legible. */
.nav:has(.nav-grupo[data-abierto]) {
  border-radius: 20px 20px 0 0;
  border-bottom-color: rgba(255,255,255,.07);
}
.nav.pegada .nav-panel { background: rgba(20,17,28,.97); }

/* Los sectores son solo nombres, sin frase debajo, así que caben todos en una
   fila. auto-fit en vez de un número fijo: si mañana hay ocho, se recoloca
   solo en lugar de dejar uno huérfano abajo. */
.nav-panel-sectores { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

.nav-item { display: block; padding: 9px 12px; border-radius: 10px; transition: background .15s; }
.nav-item:hover { background: var(--purple-tint); }
.nav-item b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.nav-item span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.nav-item.apagado { pointer-events: none; }
.nav-item.apagado b { color: var(--ink-4); font-weight: 500; }
.nav-item.apagado span { color: var(--ink-4); }

/* Sobre el fondo oscuro del panel se invierten. Fuera de él —el panel móvil,
   que es blanco— siguen valiendo las de arriba. */
.nav-panel .nav-item:hover { background: rgba(255,255,255,.07); }
.nav-panel .nav-item b { color: #fff; }
.nav-panel .nav-item span { color: rgba(255,255,255,.55); }
.nav-panel .nav-item.apagado b { color: rgba(255,255,255,.4); }
.nav-panel .nav-item.apagado span { color: rgba(255,255,255,.28); }

.nav-panel-pie {
  grid-column: 1 / -1;
  margin: 10px -12px -12px; padding: 12px 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  border-radius: 0 0 20px 20px;
  background: rgba(255,255,255,.035);
  font-size: 12.5px; font-weight: 600; color: #c9b6ff;
  transition: background .15s;
}
.nav-panel-pie:hover { background: rgba(255,255,255,.07); }

/* ─── HAMBURGUESA Y PANEL MÓVIL ───────────────────────────────────────────
   Hasta hoy .nav-links se ocultaba en móvil y no había nada que lo sustituyera:
   en un teléfono la web se quedaba sin navegación. Esto es ese reemplazo.
   ───────────────────────────────────────────────────────────────────────── */
.nav-burger {
  display: none; width: 40px; height: 40px; flex: none;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  background: none; border: 0; cursor: pointer; border-radius: var(--r-pill);
}
.nav-burger i { display: block; width: 17px; height: 1.6px; background: #fff; border-radius: 2px; transition: transform .22s, opacity .18s; }
.nav-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.nav-movil {
  position: fixed; z-index: 199; inset: 78px 20px auto;
  max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nav-movil[data-abierto] { opacity: 1; visibility: visible; transform: translateY(0); }
/* Los epígrafes eran 11 px en gris claro, o sea el elemento MÁS pequeño y más
   flojo del panel, mientras los nombres iban a 13,5 px en negro. La jerarquía
   estaba del revés y por eso no dividía nada: quien lo abría veía una lista
   larga y uniforme. Ahora mandan ellos —más grandes y más oscuros que lo que
   cuelga debajo— y una línea separa cada grupo, que es lo que de verdad marca
   dónde acaba uno y empieza el siguiente. */
.nav-movil h5 {
  font: 700 16.5px/1.2 var(--font-body); letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 18px; padding: 16px 12px 8px;
  border-top: 1px solid var(--line);
}
.nav-movil h5:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }
.nav-movil .btn { width: 100%; justify-content: center; margin-top: 14px; }

/* Por debajo de 1240 no caben los TRES desplegables más las anclas de la
   página. Se van las anclas: llevan a sitios de esta misma página, a los que
   se llega bajando. Los desplegables son la única puerta al resto del sitio,
   y siguen estando enteros en el panel móvil. */
@media (min-width: 861px) and (max-width: 1320px) {
  .nav-links { gap: 18px; }
  .nav-links > .nav-link { display: none; }
}

@media (max-width: 860px) {
  .nav { padding: 8px 8px 8px 16px; gap: 8px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 861px) {
  .nav-movil { display: none; }
}

/* El botón NO se esconde en el panel, y esto era un fallo de verdad: por
   debajo de 520 px se metia dentro del desplegable, asi que quien entraba
   desde el movil —que es casi todo el mundo— leia un servicio, le gustaba, y
   no tenia a la vista ninguna forma de dar el siguiente paso. Hay que abrir
   un menu para encontrar el unico sitio al que queremos que vaya.

   Se queda en la barra siempre. Para que quepa junto al logo y la
   hamburguesa se encoge todo un punto, y por debajo de 400 px el nombre de
   la marca cede el sitio al isotipo: identifica igual y el boton importa
   mas. El duplicado del panel sobra en cuanto el de arriba esta a la vista. */
@media (max-width: 520px) {
  .nav-cta { font-size: 12.5px; padding: 9px 15px; }
  .nav-logo { font-size: 14px; gap: 7px; }
  .nav-logo img { width: 27px; height: 27px; }
  .nav-burger { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .nav-logo span { display: none; }
}
@media (max-width: 860px) {
  .nav-movil .btn { display: none; }
}

/* ─── PIE ────────────────────────────────────────────────────────────────── */
.pie { background: var(--ink); color: rgba(255,255,255,.62); padding: 64px 0 40px; font-size: 14px; }
.pie a { color: rgba(255,255,255,.62); transition: color .18s; }
.pie a:hover { color: #fff; }
.pie-fila { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.pie-marca { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: -.03em; }
.pie-marca img { width: 30px; height: 30px; }
.pie-cols { display: flex; flex-wrap: wrap; gap: 56px; }
.pie-col { display: flex; flex-direction: column; gap: 10px; }
.pie-col h4 { color: rgba(255,255,255,.4); font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 2px; }
.pie-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.42); }

/* ─── APARICIÓN AL HACER SCROLL ──────────────────────────────────────────── */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.aparece.dentro { opacity: 1; transform: none; }

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

/* ─── WHATSAPP FLOTANTE ──────────────────────────────────────────────────── */
.wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 54px; height: 54px; border-radius: var(--r-pill);
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 8px 24px -6px rgba(37,211,102,.5);
  transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

/* ─── «SIN IVA» JUNTO AL PRECIO ────────────────────────────────────────────
   Va donde está la cifra, no solo en el pie de la sección. Quien mira un
   precio decide ahí mismo, y enterarse del IVA tres pantallas más abajo es
   enterarse tarde. Fuera de los heros a propósito: allí no hay ninguna cifra
   que aclarar y solo ensucia el titular.
   ───────────────────────────────────────────────────────────────────────── */
.sin-iva {
  margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-4);
}

/* ─── LOS DOS SECTORES, Y LOS OFICIOS DEBAJO ───────────────────────────────
   El panel tenía siete entradas, una por página de sector, y aquellas páginas
   compartían el 84-91 % de sus palabras. Ahora son dos productos —Bookia y
   Dentia— y los oficios cuelgan de Bookia como fichas que llevan a su trozo
   dentro de /bookia. El menú sigue diciéndole a la peluquera que esto es para
   ella, que era lo único que aquellas seis páginas hacían bien.
   ───────────────────────────────────────────────────────────────────────── */
.nav-panel-sectores { grid-template-columns: 1.15fr 1fr; gap: 10px; }
.nav-sector { padding-bottom: 2px; }
.nav-oficios { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 12px 0; }
.nav-oficios a {
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.72);
  transition: background .15s, color .15s, border-color .15s;
}
.nav-oficios a:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.24); color: #fff; }

/* La misma aclaración que el panel de escritorio, dentro del de móvil: que
   solo aparezcan dos productos no significa que solo hagamos dos, y el móvil
   es por donde entra casi todo el mundo. */
.nav-movil-nota {
  display: block; margin: 8px 0 2px; padding: 11px 12px;
  border-radius: 10px; background: var(--purple-tint);
  font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--purple);
}

/* La frase que abre el panel de departamentos. Un panel de siete filas no
   dice para qué sirve nada de eso: dice qué hay. Esto lo enmarca antes de la
   lista, con la escalera de tres que propuso Isma — aliviar, mejorar, dejar
   de hacerlo tú— que además ordena los productos de menos a más compromiso. */
.nav-panel-intro {
  grid-column: 1 / -1;
  margin: 0 2px 4px; padding: 0 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.62);
}
.nav-movil-intro {
  margin: 2px 0 8px; padding: 0 12px;
  font-size: 13px; line-height: 1.45; color: var(--ink-3);
}