/* Formato de ensayo (2026-09-23): textos sin recuadros.
   Referencia: darioamodei.com/essay/the-adolescence-of-technology.
   Se carga DESPUES de page.css / footer.css / el <style> de la portada.
   El chat de la portada no se toca. La nube sigue de fondo, oscurecida
   por un velo parejo para que la letra clara se lea sobre cualquier tono. */

:root {
  --ens-texto: #f0eee6;
  --ens-suave: rgba(240, 238, 230, .72);
  --ens-linea: rgba(240, 238, 230, .22);
  --ens-letra: 'Lato', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ens-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ens-acento: 'Instrument Serif', Georgia, serif;
  --ens-velo: rgba(20, 22, 27, .55);
}

/* --- velo sobre la nube (paginas internas) ---------------------------- */
/* Fijo, de borde a borde y sin forma: no es un recuadro, es luz. Queda
   entre la nube (canvas z -1) y el contenido. */
/* con muones.js el velo lo pinta su canvas, para quedar DEBAJO de las trazas */
body.ensayo:not(.con-muones)::after,
body.portada-ensayo:not(.con-muones)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ens-velo);
  pointer-events: none;
}

/* --- navegacion: sin barra de vidrio ---------------------------------- */
body.ensayo .nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.ensayo .nav a.brand { color: var(--ens-texto); }
body.ensayo .nav a.cta { background: var(--ens-texto); color: #1d2430; }

/* --- columna de lectura ------------------------------------------------ */
body.ensayo .wrap { max-width: 660px; }

body.ensayo .hero { padding-top: calc(64px + env(safe-area-inset-top, 0px)); padding-bottom: 28px; }
body.ensayo h1 {
  font-family: var(--ens-titulo);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3rem);
  letter-spacing: -.025em;
  line-height: 1.08;
  color: var(--ens-texto);
  text-shadow: none;
}
body.ensayo .lead {
  /* la introduccion es parrafo: va en la letra de texto. La letra de acento es solo
     para palabras sueltas, nunca para parrafos (correccion del usuario). */
  font-family: var(--ens-letra);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.12rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--ens-suave);
  text-shadow: none;
  max-width: none;
  text-align: left;
  hyphens: manual;
}

/* --- las tarjetas dejan de ser cajas ------------------------------------ */
body.ensayo .card,
html.vidrio-horneado body.ensayo .card {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 52px;
}
body.ensayo .card h2 {
  font-family: var(--ens-titulo);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ens-texto);
  margin-bottom: 16px;
}
body.ensayo .card h3 {
  font-family: var(--ens-titulo);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ens-texto);
  margin: 30px 0 8px;
}
body.ensayo .card p,
body.ensayo .card li,
body.ensayo .card td {
  font-family: var(--ens-letra);
  font-size: 1.14rem;
  line-height: 1.55;   /* texto de lectura: 1,5 a 1,6 */
  color: var(--ens-texto);
  text-align: left;
  hyphens: manual;
}
/* salto de parrafo ~3 veces el aire entre lineas, para que no se confundan */
body.ensayo .card p { margin-bottom: 1.15em; }
body.ensayo .card strong { color: var(--ens-texto); font-weight: 600; }
body.ensayo .card li { padding-left: 24px; margin-bottom: .5em; }
body.ensayo .card li::before {
  background: var(--ens-texto);
  opacity: .8;
  width: 5px; height: 5px;
  top: .72em;
}
body.ensayo .card ol li { padding-left: 6px; }
body.ensayo .card a,
body.ensayo .lead a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(240, 238, 230, .55);
}
body.ensayo .card a:hover { opacity: 1; text-decoration-color: var(--ens-texto); }
body.ensayo .card th { color: var(--ens-texto); font-family: var(--ens-letra); }
body.ensayo .card th,
body.ensayo .card td { border-bottom-color: var(--ens-linea); }
body.ensayo .stat .n { color: var(--ens-texto); font-family: var(--ens-letra); }  /* cifras en sin remate (correccion del usuario) */
body.ensayo .stat .t { color: var(--ens-suave); }

/* el cierre deja de ser tarjeta; el boton de vidrio se queda */
body.ensayo .cta-card { text-align: left; padding-top: 28px; border-top: 1px solid var(--ens-linea); }
body.ensayo .cta-card .btn,
body.ensayo .cta-card .btn:visited {
  color: #fff;
  text-decoration: none;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .45);
}
body.ensayo .cta-card .btn:hover { opacity: 1; }

/* --- boton: hover sobrio, estilo Apple --------------------------------
   Sin colores (el usuario descarto el borde espectral y la aurora): la
   pastilla solo se aclara y su borde gana luz, en 200 ms. Se apagan los
   2 pseudo-elementos de colores que trae page.css. */
body.ensayo .cta-card .btn::before,
body.ensayo .cta-card .btn::after { display: none; }
body.ensayo .cta-card .btn {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.ensayo .cta-card .btn:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}
body.ensayo .cta-card .btn:active { background: rgba(255, 255, 255, .18); }
body.ensayo .cta-card .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- indice lateral, como el ensayo de referencia ----------------------- */
.ens-indice { display: none; }
@media (min-width: 1180px) {
  .ens-indice {
    display: block;
    position: fixed;
    top: 120px;
    left: max(32px, calc(50% - 330px - 280px));
    width: 220px;
    font-family: var(--ens-letra);
  }
  .ens-indice h2 { font-family: var(--ens-titulo); font-size: 1.15rem; font-weight: 600; color: var(--ens-texto); margin-bottom: 14px; }
  .ens-indice ol { list-style: none; }
  .ens-indice li { margin-bottom: 10px; line-height: 1.35; }
  .ens-indice a { color: var(--ens-suave); text-decoration: none; font-size: 1rem; transition: color .2s; }
  .ens-indice a:hover, .ens-indice a.activo { color: var(--ens-texto); }
}

/* --- pie: conserva su forma redondeada; vidrio oscuro y letra blanca ---- */
body.ensayo footer,
html.vidrio-horneado body.ensayo footer,
body.portada-ensayo footer,
html.vidrio-horneado body.portada-ensayo footer {
  background: rgba(14, 16, 20, .45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 28px 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
/* :visited incluido: footer.css pinta .brand-name:visited en negro, y un
   enlace ya visitado le ganaba a la regla blanca (visto el 2026-09-23). */
body.ensayo footer .brand-name, body.ensayo footer .brand-name:visited,
body.ensayo footer .foot-col a, body.ensayo footer .foot-col a:visited,
body.portada-ensayo footer .brand-name, body.portada-ensayo footer .brand-name:visited,
body.portada-ensayo footer .foot-col a, body.portada-ensayo footer .foot-col a:visited { color: #fff; }
body.ensayo footer p, body.ensayo footer h2, body.ensayo .foot-bottom,
body.portada-ensayo footer p, body.portada-ensayo footer h2, body.portada-ensayo .foot-bottom { color: rgba(255, 255, 255, .88); }
body.ensayo .foot-bottom, body.portada-ensayo .foot-bottom { border-top-color: rgba(255, 255, 255, .22); }

/* --- portada: el chat queda igual; solo cambia el bloque de texto ------- */
/* Sin degradado entre el chat y el texto (el usuario lo rechazo): el velo
   es el mismo de las paginas internas, parejo en toda la pantalla. */
body.portada-ensayo .intro { max-width: 660px; }
body.portada-ensayo .intro-card,
html.vidrio-horneado body.portada-ensayo .intro-card {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
body.portada-ensayo .intro h1 {
  font-family: var(--ens-titulo);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  line-height: 1.12;
  color: var(--ens-texto);
  margin-bottom: 20px;
}
body.portada-ensayo .intro p,
body.portada-ensayo .intro li {
  font-family: var(--ens-letra);
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ens-texto);
  text-align: left;
  hyphens: manual;
}
body.portada-ensayo .intro p { margin-bottom: 1.15em; }
body.portada-ensayo .intro strong { color: var(--ens-texto); }
body.portada-ensayo .intro li::before { background: var(--ens-texto); opacity: .8; width: 5px; height: 5px; top: .72em; }
body.portada-ensayo .intro a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(240,238,230,.55); }

@media (max-width: 480px) {
  body.ensayo .card p, body.ensayo .card li,
  body.portada-ensayo .intro p, body.portada-ensayo .intro li { font-size: 1.02rem; }
}

/* Acento: palabras destacadas dentro del texto, como en claude.com */
body.ensayo em, body.portada-ensayo .intro em {
  font-family: var(--ens-acento);
  font-style: italic;
  font-size: 1.12em;
  font-weight: 400;
}

/* --- una sola tipografia en todo el sitio (2026-09-23) -----------------
   Pedido del usuario: estandarizar la letra en todas las paginas. Todo el
   texto hereda Lato, los titulos van en Fraunces y el acento solo en <em>.
   Space Grotesk queda SOLO en la zona del chat de la portada, que no se toca. */
body.ensayo,
body.ensayo .nav, body.ensayo .nav a,
body.ensayo footer, body.ensayo footer *,
body.portada-ensayo footer, body.portada-ensayo footer *,
body.portada-ensayo .intro,
body.ensayo .cta-card .btn,
body.ensayo .card th, body.ensayo .card td,
body.ensayo .stat .t {
  font-family: var(--ens-letra);
}
body.ensayo h1, body.ensayo h2, body.ensayo h3,
body.portada-ensayo .intro h1, body.portada-ensayo .intro h2 {
  font-family: var(--ens-titulo);
}
/* El logotipo «Kumo Cloud» es una marca, no texto: conserva SIEMPRE su
   letra, Space Grotesk, en el pie, el menu y la esquina de la portada.
   La tipografia del texto no se aplica a la marca (correccion del usuario). */
body.ensayo footer .brand-name, body.portada-ensayo footer .brand-name,
body.ensayo .nav a.brand,
body.portada-ensayo .logo {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
}
body.ensayo footer h2, body.portada-ensayo footer h2 { font-family: var(--ens-letra); }