/* =========================================================
   Clave Digital · página «Webs inteligentes» (01/10/2026)
   Se carga después de style.css: usa sus tokens y añade solo los de esta página.
   Hermana de la portada (misma noche, mismo azul de acción, mismas fuentes).
   Aire propio: portada de texto con una conversación en una ventana de web al lado; el
   resto, listas con reglas finas, sin fotos ni tarjetas de cristal.
   Elemento memorable: «La conversación» (01/10/2026; antes «La jornada», la franja de 24 h).
   ========================================================= */

:root {
  /* ---- Tipografía propia de la página ---- */
  --wi-font-portada: 800 clamp(2.5rem, 6.4vw, 5rem) / 1.04 var(--font-titular);
  --wi-font-titulo:  700 clamp(1.75rem, 3.6vw, 2.6rem) / 1.15 var(--font-titular);
  --wi-font-verbo:   800 clamp(1.6rem, 2.6vw, 2rem) / 1.1 var(--font-titular);
  --wi-font-ordinal: 800 1rem / 1 var(--font-titular);

  /* ---- Fondos ---- */
  --wi-bg-portada: radial-gradient(ellipse 55% 60% at 80% 85%, rgba(61, 139, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--noche-900) 0%, var(--noche-azul) 100%);

  /* ---- La conversación ---- */
  --wi-font-portada-2col: 800 clamp(2.25rem, 3.1vw, 3rem) / 1.06 var(--font-titular);

  --wi-muestra: 28px;
  --wi-aa-tam: 1.75rem;                   /* las «Aa» de muestra de cada letra */
  /* Olea, el spa ficticio de la maqueta del arranque (identidad propia, 01/10/2026) */
  --olea-arena: #F4EEE6;
  --olea-crema: #FBF8F3;
  --olea-tinta: #2C3A2F;
  --olea-suave: #5E6B5F;
  --olea-terra: #9C4F35;
  --olea-blanco: #FFFFFF;
  --olea-linea: rgba(44, 58, 47, 0.18);
  --olea-serif: 'Fraunces', Georgia, serif;
  --olea-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --wi-sombra-maqueta: 0 50px 110px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 120px rgba(61, 139, 255, 0.12);
  --wi-sombra-chat: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  /* Paletas de las demos, copiadas de demo/almenara/style.css y demo/forja/style.css */
  --demo-almenara-1: #0B6E77;
  --demo-almenara-2: #0C2B3C;
  --demo-almenara-3: #D7EDEF;
  --demo-almenara-4: #F6FAFC;
  --demo-forja-1: #D0311A;
  --demo-forja-2: #0B0B0C;
  --demo-forja-3: #2E2E33;
  --demo-forja-4: #F5F5F4;                     /* muestras de color de las fichas de marca */

  /* ---- Medidas ---- */
  --wi-portada-min: min(100svh, 920px);
  --wi-titulo-medida: 14ch;

  /* Contraste calculado (WCAG 2.x) el 01/10/2026 para esta página, sobre los fondos que usa
     (la portada va de --noche-900 a --noche-azul; se mide sobre el más claro):
       --text-heading  / --noche-azul        17,28:1
       (01/10/2026: en las secciones alternas --bg-page-alt pasa a ser la banda, noche-800;
        los valores sobre ella están en style.css, «Ritmo de secciones», y todos pasan)
       --text-neutral  / --noche-azul        14,20:1 · / --bg-page-alt 15,05:1
       --text-subtle   / --noche-azul         7,61:1 · / --bg-page-alt  8,07:1
       --text-support  / --noche-azul         9,42:1 · / --bg-page-alt 9,98:1 (ordinales)
       --text-inverse  / --bg-brand-bold      5,28:1 (botones y respuestas de la web)
       La conversación (la ventana va sobre --bg-page, la cabecera sobre --bg-surface-raised):
       --text-support  / --bg-page           10,40:1 (horas)
       --text-brand    / --bg-page           12,22:1 («Contestado», «Cita puesta»)
       --text-neutral  / --bg-surface        14,21:1 (mensaje del paciente)
       --text-neutral  / --bg-surface-raised 12,68:1 (cabecera de la ventana)
       --text-heading  / --bg-surface-raised 15,43:1 (nombre de la clínica)
       --text-subtle   / --noche-azul         7,61:1 (pie de la conversación)
       Gráficos (mínimo 3:1):
       --border-input  / --bg-page                4,38:1 (reglas de las listas)
       --border-brand  / --bg-page                5,75:1 (foco) */
}

/* ---------- Menú: la página en la que estás (como en Marca personal) ---------- */
.menu > a[aria-current="page"] { color: var(--text-heading); text-decoration: underline; text-decoration-color: var(--border-brand); text-decoration-thickness: var(--linea); text-underline-offset: var(--sp-2); }
@media (max-width: 899.98px) {
  .menu.abierto > a[aria-current="page"] { text-decoration: none; color: var(--text-brand); }
}

/* ---------- Titulares-frase de Vicky: en minúscula y grandes (como Marca personal) ---------- */
.wi-titulo { font: var(--wi-font-titulo); letter-spacing: var(--tracking-titular); color: var(--text-heading); max-width: 22ch; }

/* ---------- 1 · Gancho ---------- */
.wi-portada {
  min-height: var(--wi-portada-min);
  display: flex; align-items: center;
  padding: calc(var(--cabecera-alto) + var(--sp-8)) 0 var(--sp-12);
  background: var(--wi-bg-portada);
}
.wi-portada > .contenedor { display: grid; gap: var(--sp-12); }
.wi-portada__titulo { font: var(--wi-font-portada); letter-spacing: var(--tracking-titular); max-width: var(--wi-titulo-medida); }
.wi-portada__titulo .wi-portada__linea { display: block; }
@media (min-width: 1100px) { .wi-portada__titulo { max-width: none; } }
.wi-portada__sub { font: var(--font-body-l); color: var(--text-neutral); max-width: 46ch; margin-top: var(--sp-6); }
.wi-portada__accion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-8); }
.wi-portada__micro { font: var(--font-body-s); color: var(--text-subtle); }
@media (max-width: 479.98px) { .wi-portada__accion .boton { width: 100%; } }

/* ---------- La super web: el elemento memorable (01/10/2026) ----------
   Maqueta estática del arranque de Olea, spa ficticio, con el asistente abierto encima.
   Todo dentro se mide en cqi (centésimas del ancho de la maqueta): escala sola.
   Contraste de la paleta de Olea, calculado:
     --olea-tinta  / --olea-arena   10,39:1 (titular y menú)
     --olea-suave  / --olea-arena    4,87:1 (texto)
     --olea-terra  / --olea-arena    5,08:1 (antetítulo, cursiva)
     --olea-blanco / --olea-terra    5,86:1 (botón y burbujas del asistente)
     --olea-tinta  / --olea-crema   11,31:1 (mensajes del cliente) · --olea-suave / --olea-crema 5,29:1
     --olea-arena  / --olea-tinta   10,39:1 (aviso de ejemplo y cabecera del chat)
   Pie de la maqueta: --text-subtle / --noche-azul 7,61:1 */
@media (min-width: 1100px) {
  .wi-portada > .contenedor { grid-template-columns: 0.9fr 1.1fr; align-items: center; column-gap: var(--sp-12); }
  .wi-portada__titulo { font: var(--wi-font-portada-2col); }
}
.maqueta { position: relative; margin: 0; width: 100%; container-type: inline-size; }
.maqueta__ventana {
  margin-bottom: 14cqi; overflow: hidden; border-radius: 1.6cqi;
  background: var(--negro-1000); box-shadow: var(--wi-sombra-maqueta);
}
.maqueta__barra { padding: 1.1cqi 1.8cqi; }
.olea { background: var(--olea-arena); color: var(--olea-tinta); font-family: var(--olea-sans); }
.olea__aviso { padding: 0.7cqi; background: var(--olea-tinta); color: var(--olea-arena); font-size: 1.5cqi; font-weight: 500; text-align: center; letter-spacing: 0.02em; }
.olea__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 2.4cqi 4cqi; }
.olea__logo { display: inline-flex; align-items: baseline; gap: 1.2cqi; font-family: var(--olea-serif); font-size: 3.6cqi; font-weight: 500; letter-spacing: -0.01em; }
.olea__logo-sub { font-family: var(--olea-sans); font-size: 1.35cqi; color: var(--olea-suave); letter-spacing: 0.08em; }
.olea__menu { display: flex; gap: 2.6cqi; font-size: 1.6cqi; color: var(--olea-suave); }
.olea__heroe { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; min-height: 50cqi; }
.olea__texto { display: flex; flex-direction: column; justify-content: center; gap: 1.8cqi; padding: 2cqi 3cqi 5cqi 4cqi; }
.olea__antetitulo { font-size: 1.6cqi; color: var(--olea-terra); font-weight: 500; }
.olea__titulo { font-family: var(--olea-serif); font-size: 5.8cqi; font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; }
.olea__titulo em { font-style: italic; color: var(--olea-terra); }
.olea__sub { font-size: 1.75cqi; line-height: 1.5; color: var(--olea-suave); max-width: 30ch; }
.olea__boton { align-self: flex-start; margin-top: 0.6cqi; padding: 1.3cqi 2.6cqi; border-radius: 10cqi; background: var(--olea-terra); color: var(--olea-blanco); font-size: 1.6cqi; font-weight: 500; }
.olea__foto { position: relative; overflow: hidden; border-top-left-radius: 22cqi; }
.olea__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 72%; }

.maqueta__chat {
  position: absolute; right: -2cqi; bottom: 0; width: 35cqi; overflow: hidden;
  border-radius: 2.2cqi; background: var(--olea-crema); color: var(--olea-tinta); font-family: var(--olea-sans);
  box-shadow: var(--wi-sombra-chat);
  animation: maqueta-chat 0.7s var(--curva-salida) 0.5s both;
}
.maqueta__chat-cabeza { display: flex; align-items: center; gap: 1.2cqi; padding: 1.4cqi 1.8cqi; background: var(--olea-tinta); color: var(--olea-arena); font-size: 1.45cqi; }
.maqueta__chat-cabeza strong { font-weight: 500; }
.maqueta__chat-avatar { display: grid; place-items: center; width: 3.6cqi; height: 3.6cqi; flex: none; border-radius: 50%; background: var(--olea-terra); color: var(--olea-blanco); font-family: var(--olea-serif); font-size: 1.8cqi; }
.maqueta__chat-cuerpo { display: flex; flex-direction: column; gap: 1cqi; padding: 1.8cqi; }
.maqueta__msg { max-width: 86%; padding: 1cqi 1.4cqi; border-radius: 1.6cqi; font-size: 1.45cqi; line-height: 1.4; }
.maqueta__msg--cliente { align-self: flex-start; background: var(--olea-arena); color: var(--olea-tinta); border-bottom-left-radius: 0.4cqi; }
.maqueta__msg--web { align-self: flex-end; background: var(--olea-terra); color: var(--olea-blanco); border-bottom-right-radius: 0.4cqi; }
.maqueta__chat-pie { margin: 0 1.8cqi 1.8cqi; padding: 1.1cqi 1.4cqi; border-radius: 10cqi; border: 0.15cqi solid var(--olea-linea); font-size: 1.4cqi; color: var(--olea-suave); }
.maqueta__pie { max-width: 56cqi; font: var(--font-body-xs); color: var(--text-subtle); }
@keyframes maqueta-chat { from { opacity: 0; transform: translateY(var(--desplaza)); } to { opacity: 1; transform: none; } }

/* Maqueta estrecha (móvil): menos texto en la web y un chat más grande para que se lea */
@container (max-width: 560px) {
  .olea__menu, .olea__sub, .olea__antetitulo { display: none; }
  .olea__logo { font-size: 5cqi; } .olea__logo-sub { font-size: 2.2cqi; }
  .olea__aviso { font-size: 2.4cqi; padding: 1cqi; }
  .olea__titulo { font-size: 7.4cqi; }
  .olea__boton { font-size: 2.8cqi; padding: 1.8cqi 3.4cqi; }
  .olea__heroe { min-height: 58cqi; }
  .maqueta__ventana { margin-bottom: 0; }
  .maqueta__chat { position: relative; right: auto; bottom: auto; width: 80cqi; margin: -22cqi 2cqi 0 auto; }
  .maqueta__pie { max-width: none; margin-top: var(--sp-4); }
  .maqueta__chat-cabeza { font-size: 3cqi; padding: 2.4cqi 3cqi; }
  .maqueta__chat-avatar { width: 6.4cqi; height: 6.4cqi; font-size: 3.2cqi; }
  .maqueta__chat-cuerpo { gap: 1.8cqi; padding: 3cqi; }
  .maqueta__msg { font-size: 3.2cqi; padding: 1.8cqi 2.4cqi; border-radius: 3cqi; }
  .maqueta__msg:nth-child(3), .maqueta__msg:nth-child(4) { display: none; }
  .maqueta__chat-pie { font-size: 2.8cqi; margin: 0 3cqi 3cqi; padding: 2cqi 2.6cqi; }
}

/* ---------- Pruébalo tú: el componente de la portada (style.css) + elecciones de diseño ---------- */
.wi-prueba__chat { margin-top: var(--sp-3); }
#pruebalo .wi-titulo { margin-inline: auto; }  /* titular de la página (sin mayúsculas), centrado como el componente */
/* Desplegable (01/10/2026). Sin animación del panel; solo la flecha gira, y no con movimiento reducido.
   Contraste sobre --bg-page y --bg-surface (noche-800): --text-heading 19,07:1 / 17,28:1 ·
   --text-neutral 15,68:1 / 14,21:1 · --text-subtle 8,40:1 / 7,61:1 · foco --border-brand 5,75:1.
   Las muestras de color son ilustración (filete --border-neutral). */
.eleccion { margin-top: var(--sp-16); border-top: var(--borde-fino) solid var(--border-input); }
.eleccion__boton {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--tactil); padding: var(--sp-6) 0; background: none; border: 0; cursor: pointer;
  font: var(--font-heading-m); letter-spacing: var(--tracking-titular); color: var(--text-heading); text-align: left;
}
.eleccion__boton:hover { color: var(--text-brand); }
.eleccion__flecha { width: var(--sp-3); height: var(--sp-3); flex: none; border-right: var(--linea) solid currentColor; border-bottom: var(--linea) solid currentColor; transform: rotate(45deg); transition: transform var(--transicion); }
.eleccion__boton[aria-expanded="true"] .eleccion__flecha { transform: rotate(-135deg); }
.eleccion__panel { padding-bottom: var(--sp-6); }
.eleccion__panel[hidden] { display: none; }
.eleccion__lista { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .eleccion__lista { grid-template-columns: repeat(2, 1fr); } }
.eleccion__fila {
  display: grid; gap: var(--sp-3); padding: var(--sp-6);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md);
}
.eleccion__centro { font: var(--font-body-m); color: var(--text-neutral); }
.eleccion__centro strong { font-weight: 600; color: var(--text-heading); }
.eleccion__colores { display: flex; gap: var(--sp-2); }
.eleccion__colores li { width: var(--wi-muestra); height: var(--wi-muestra); border-radius: var(--radio-full); background: var(--muestra); box-shadow: 0 0 0 var(--borde-fino) var(--border-neutral); }
.eleccion__letras { display: grid; gap: var(--sp-1); }
.eleccion__letras p { display: flex; align-items: baseline; gap: var(--sp-3); font: var(--font-body-s); color: var(--text-subtle); }
.eleccion__aa { min-width: var(--sp-12); font-size: var(--wi-aa-tam); line-height: 1; color: var(--text-heading); }
.eleccion__aa--jakarta-titular { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.eleccion__aa--jakarta-texto { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; }
.eleccion__aa--archivo { font-family: 'Archivo', sans-serif; font-weight: 900; }
.eleccion__aa--inter { font-family: 'Inter', sans-serif; font-weight: 400; }
.eleccion__caracter { font: var(--font-body-m-strong); color: var(--text-heading); }
.eleccion__plantilla { margin-top: var(--sp-6); font: var(--font-body-m-strong); color: var(--text-heading); }   /* 02/10: el «no plantilla» dicho con esas palabras */
.eleccion__pruebas { margin-top: var(--sp-6); font: var(--font-body-s); color: var(--text-neutral); }
@media (prefers-reduced-motion: reduce) { .eleccion__flecha { transition: none; } .maqueta__chat { animation: none; } }

/* ---------- 2 · Qué la hace inteligente ---------- */
.wi-hace { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }
.wi-hace > * { min-width: 0; }
.wi-hace__cabeza .entradilla { max-width: 46ch; }
.wi-hace__cabeza .conversa { margin-top: var(--sp-8); }  /* la conversación, desde el arranque (01/10/2026) */
.wi-cuatro { display: grid; grid-template-columns: 1fr; border-top: var(--borde-fino) solid var(--border-input); }
.wi-cuatro li {
  display: grid; grid-template-columns: var(--sp-8) 1fr; column-gap: var(--sp-4); row-gap: var(--sp-2);
  padding: var(--sp-6) 0; border-bottom: var(--borde-fino) solid var(--border-neutral);
}
.wi-cuatro__num { grid-row: 1 / span 2; padding-top: var(--sp-2); font: var(--wi-font-ordinal); color: var(--text-support); font-variant-numeric: tabular-nums; }
.wi-cuatro__verbo { font: var(--wi-font-verbo); letter-spacing: var(--tracking-titular); }
.wi-cuatro p { color: var(--text-neutral); max-width: 52ch; }
.wi-remate { font: var(--font-heading-m); letter-spacing: var(--tracking-titular); color: var(--text-heading); max-width: 40ch; }
.wi-remate--suave { margin-top: var(--sp-12); font: var(--font-body-l); color: var(--text-neutral); letter-spacing: normal; }
@media (min-width: 1024px) {
  .wi-hace { grid-template-columns: 5fr 7fr; column-gap: var(--sp-16); row-gap: var(--sp-12); align-items: start; }
  .wi-hace__cabeza { position: sticky; top: calc(var(--cabecera-alto) + var(--sp-8)); }
  .wi-remate { grid-column: 2; }
}

/* ---------- 3 · Tres puntos de partida: columnas con regla superior, sin cajas ---------- */
/* 01/10/2026: los tres puntos de partida van en el mismo marco de tarjeta que las condiciones de
   abajo (mismo borde, radio, relleno, rejilla y hueco). Sin la línea azul de encima: un solo adorno.
   Diferencia sutil: arriba, un punto más de fondo (--bg-surface-raised). Contraste sobre noche-700:
   --text-heading 15,43:1 · --text-neutral 12,68:1 · --text-brand 9,89:1 */
.wi-partidas { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.wi-partidas > * { min-width: 0; }
.wi-partidas li {
  display: flex; flex-direction: column; padding: var(--sp-6);
  background: var(--bg-surface-raised); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md);
}
.wi-partidas__caso { font: var(--font-body-m-strong); color: var(--text-brand); margin-bottom: var(--sp-2); }
.wi-partidas__titulo { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); margin-bottom: var(--sp-4); }
.wi-partidas li > p:last-child { color: var(--text-neutral); max-width: 44ch; }
@media (min-width: 900px) { .wi-partidas { grid-template-columns: repeat(3, 1fr); } }

/* Lo que conviene saber (01/10/2026): tarjetas ligeras con icono, y el cierre destacado.
   Sobre --bg-surface (noche-800): --text-neutral 14,21:1 (antes --text-subtle sin tarjeta, 8,40:1).
   Cierre sobre --bg-brand-suave encima de la base: --text-heading, más de 15:1. Icono --text-brand. */
.wi-aclara { margin-top: var(--sp-4); }   /* mismo hueco que entre tarjetas: las dos filas, un conjunto */
.wi-aclara__lista { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .wi-aclara__lista { grid-template-columns: repeat(3, 1fr); } }
.wi-aclara__item {
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md);
}
.wi-aclara__item p { font: var(--font-body-m); color: var(--text-neutral); }
@media (max-width: 899.98px) { .wi-aclara__item { flex-direction: row; align-items: flex-start; padding: var(--sp-4); } }
.wi-aclara__icono {
  display: grid; place-items: center; width: var(--tactil); height: var(--tactil); flex: none;
  border-radius: var(--radio-sm); background: var(--bg-brand-suave); border: var(--borde-fino) solid var(--border-brand-suave); color: var(--text-brand);
}
.wi-aclara__icono svg { width: var(--icono-m); height: var(--icono-m); }
.wi-aclara__final {
  display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radio-md); border: var(--borde-fino) solid var(--border-brand-medio); background: var(--bg-brand-suave);
  font: var(--font-body-m-strong); color: var(--text-heading);
}

/* ---------- 4 · Por sector: un índice con reglas, sin fotos (las fotos son de la portada) ---------- */
.wi-sectores { border-top: var(--borde-fino) solid var(--border-input); }
.wi-sectores li {
  display: grid; grid-template-columns: 1fr; row-gap: var(--sp-2);
  padding: var(--sp-6) 0; border-bottom: var(--borde-fino) solid var(--border-neutral);
}
.wi-sectores li > * { min-width: 0; }
.wi-sectores__nombre { font: var(--font-body-m-strong); color: var(--text-subtle); }
.wi-sectores__titulo { font: var(--font-heading-m); letter-spacing: var(--tracking-titular); margin-bottom: var(--sp-2); }
.wi-sectores p:not(.wi-sectores__nombre) { color: var(--text-neutral); max-width: 60ch; }
@media (min-width: 900px) {
  .wi-sectores li { grid-template-columns: 4fr 8fr; column-gap: var(--sp-12); align-items: baseline; }
}

/* ---------- 6 · Cómo trabajamos: la línea de la portada con cinco pasos ---------- */
@media (min-width: 1024px) { .linea--cinco { grid-template-columns: repeat(5, 1fr); } }

/* ---------- 8 · Cierre ---------- */
.wi-cierre__micro { margin-top: var(--sp-4); font: var(--font-body-s); color: var(--text-subtle); }