/* =========================================================
   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.5rem, 4.2vw, 3.75rem) / 1.04 var(--font-titular);

  /* ---- 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__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 conversación: el elemento memorable (01/10/2026) ---------- */
@media (min-width: 1100px) {
  .wi-portada > .contenedor { grid-template-columns: 1.05fr 1fr; align-items: center; column-gap: var(--sp-16); }
  .wi-portada__titulo { font: var(--wi-font-portada-2col); }
}
@media (min-width: 1100px) { .conversa { justify-self: end; } }
/* El resto de «La conversación» es un componente común: style.css («La conversación») */

/* ---------- 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-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 ---------- */
.wi-partidas { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }
.wi-partidas > * { min-width: 0; }
.wi-partidas li { padding-top: var(--sp-6); border-top: var(--linea) solid var(--border-brand); }
.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); gap: var(--sp-8); } }

.wi-aclara { margin-top: var(--sp-16); padding-left: var(--sp-6); border-left: var(--borde-fino) solid var(--border-input); max-width: var(--medida); }
.wi-aclara__lista { display: grid; gap: var(--sp-3); }
.wi-aclara__lista li { font: var(--font-body-m); color: var(--text-subtle); }
.wi-aclara__final { margin-top: var(--sp-6); 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; }
}

/* ---------- 5 · Pruébalo: las dos demos ---------- */
.wi-demos { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }
.wi-demos > * { min-width: 0; }
@media (min-width: 900px) { .wi-demos { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } }
.wi-demo {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);   /* marco de la demo (01/10): tarjeta con filete */
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-lg);
}
.wi-demo__vista {
  display: block; width: 100%; margin-bottom: var(--sp-3); overflow: hidden;
  border-radius: var(--radio-md); border: var(--borde-fino) solid var(--border-neutral);
  background: var(--bg-surface); box-shadow: var(--sombra-panel);
  transition: border-color var(--transicion);
}
.wi-demo__vista img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.wi-demo__vista:hover { border-color: var(--border-brand-medio); }
.wi-demo__nombre { font: var(--font-heading-m); letter-spacing: var(--tracking-titular); }
.wi-demo > p { color: var(--text-neutral); max-width: 46ch; }
.wi-demo .boton { margin-top: var(--sp-2); }
@media (max-width: 479.98px) { .wi-demo .boton { width: 100%; } }

/* ---------- 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); }