/* =====================================================================
   Kairós AIMA — hoja de estilos común
   Un solo archivo para todas las páginas: se descarga una vez y el resto
   de la navegación va de la caché. Sin librerías externas ni fuentes de
   Google, porque cada una es una conexión más y Google penaliza la lentitud.
   ===================================================================== */

:root {
  --primario: #c41e3a;
  --secundario: #ff4757;
  --grad: linear-gradient(135deg, #c41e3a, #ff4757);
  --negro: #08080a;
  --panel: #101014;
  --panel-2: #17171c;
  --borde: rgba(255, 255, 255, .08);
  --borde-fuerte: rgba(255, 255, 255, .16);
  --texto: #f4f4f6;
  --texto-dim: #a8a8b3;
  --texto-mute: #6e6e78;
  --exito: #2ed573;
  --radio: 16px;
  --radio-sm: 10px;
  --ancho: 1140px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .5);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--negro);
  color: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Quien haya pedido en su sistema que no se muevan las cosas, no verá
   ninguna animación. No es un detalle menor: hay gente a la que el
   movimiento le provoca mareo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); margin-bottom: 18px; }
h3 { font-size: 1.18rem; margin-bottom: 10px; }
p { color: var(--texto-dim); }
a { color: inherit; text-decoration: none; }

.destacado { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entradilla { font-size: clamp(1rem, 1.9vw, 1.18rem); color: var(--texto-dim); max-width: 62ch; }
.etiqueta {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primario);
  border: 1px solid rgba(196, 30, 58, .35); border-radius: 100px;
  padding: 6px 14px; margin-bottom: 20px; background: rgba(196, 30, 58, .07);
}

/* ---------- Cabecera ---------- */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 8, 10, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.cabecera { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.marca { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.marca img { width: 30px; height: 30px; }
.marca span { color: var(--texto); }
nav.principal { display: flex; align-items: center; gap: 28px; }
nav.principal a { font-size: .93rem; color: var(--texto-dim); transition: color .16s; }
nav.principal a:hover, nav.principal a[aria-current="page"] { color: var(--texto); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 26px; border-radius: 100px; font-size: .94rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: transform .16s, filter .16s, background .16s;
  font-family: inherit;
}
.btn-primario { background: var(--grad); color: #fff; }
.btn-primario:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-secundario { background: transparent; border-color: var(--borde-fuerte); color: var(--texto); }
.btn-secundario:hover { border-color: var(--primario); background: rgba(196, 30, 58, .07); }
.btn-grande { padding: 15px 34px; font-size: 1rem; }

/* Menú en móvil */
.abrir-menu { display: none; background: none; border: 0; color: var(--texto); cursor: pointer; padding: 6px; }
@media (max-width: 860px) {
  nav.principal {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--borde);
    padding: 8px 24px 20px; display: none;
  }
  nav.principal.abierto { display: flex; }
  nav.principal a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--borde); }
  nav.principal .btn { margin-top: 14px; width: 100%; }
  .abrir-menu { display: block; }
}

/* ---------- Secciones ---------- */
section { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.seccion-cabecera { max-width: 60ch; margin-bottom: 48px; }

/* Un resplandor de fondo, muy sutil, para que el negro no sea plano. */
.resplandor::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 55% at 50% 0%, rgba(196, 30, 58, .13), transparent 70%);
}

/* ---------- Portada ---------- */
.portada { padding: clamp(70px, 11vw, 130px) 0 clamp(56px, 8vw, 96px); }
.portada h1 { margin-bottom: 22px; }
.portada .entradilla { margin-bottom: 34px; }
.portada-acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.portada-nota { margin-top: 26px; font-size: .87rem; color: var(--texto-mute); }

/* ---------- Portada con captura del programa ---------- */
/* En pantalla ancha, texto a la izquierda y programa a la derecha. En móvil
   se apila: primero el mensaje, luego la imagen. */
.portada-doble { display: grid; gap: clamp(34px, 5vw, 56px); align-items: center; }
/* A dos columnas solo cuando de verdad cabe: por debajo de 1080 px el
   titular se parte en cuatro líneas y queda peor que apilado. */
@media (min-width: 1080px) {
  .portada-doble { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr); gap: 48px; }
  /* El titular baja un punto en esta caja: el tamaño grande estaba calculado
     para ocupar el ancho entero de la página. */
  .portada-doble h1 { font-size: clamp(2.2rem, 3.1vw, 3rem); }
  .portada-doble .entradilla { font-size: 1.02rem; }
}
@media (min-width: 1400px) {
  .portada-doble h1 { font-size: 3.2rem; }
}

/* Marco de ventana: da contexto de "esto es una aplicación de escritorio"
   sin necesidad de explicarlo. */
.marco-app {
  border: 1px solid var(--borde-fuerte); border-radius: 14px; overflow: hidden;
  background: #0f0f13; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02);
  position: relative;
}
.marco-app-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: rgba(255, 255, 255, .035);
  border-bottom: 1px solid var(--borde);
}
.marco-app-punto { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.marco-app-titulo {
  margin-left: 10px; font-size: .78rem; color: var(--texto-mute);
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marco-app img { display: block; width: 100%; height: auto; }
.marco-app-pie {
  font-size: .82rem; color: var(--texto-mute); text-align: center;
  margin-top: 12px;
}

/* Galería de pantallas: una fila que se desliza en móvil y rejilla en ancho. */
.galeria-app { display: grid; gap: 22px; }
@media (min-width: 900px) { .galeria-app { grid-template-columns: 1fr 1fr; } }
.galeria-app figure { margin: 0; }
.galeria-app figcaption { font-size: .88rem; color: var(--texto-mute); margin-top: 10px; }

/* ---------- Comparación entre dos oficios ---------- */
.comparativa { display: grid; gap: 26px; }
@media (min-width: 900px) { .comparativa { grid-template-columns: 1fr 1fr; gap: 30px; } }
.comparativa figure { margin: 0; }
.comparativa .rotulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primario-claro, #ff4757); margin-bottom: 12px;
}
.comparativa .rotulo::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.comparativa figcaption { font-size: .9rem; color: var(--texto-mute); margin-top: 12px; }
.comparativa figcaption strong { color: var(--texto); font-weight: 600; }

/* ---------- Rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 20px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px 26px;
  transition: border-color .18s, transform .18s;
}
.tarjeta:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.tarjeta .icono {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 18px;
  background: rgba(196, 30, 58, .12); border: 1px solid rgba(196, 30, 58, .28);
  display: grid; place-items: center; color: var(--primario);
}
.tarjeta .icono svg { width: 20px; height: 20px; }
.tarjeta p { font-size: .95rem; }

.tarjeta-destacada { border-color: rgba(196, 30, 58, .4); background: linear-gradient(180deg, rgba(196, 30, 58, .06), transparent 60%), var(--panel); }

/* ---------- Listas de comprobación ---------- */
.lista-check { list-style: none; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 11px; align-items: flex-start; color: var(--texto-dim); font-size: .96rem; }
.lista-check svg { width: 17px; height: 17px; color: var(--exito); flex-shrink: 0; margin-top: 4px; }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.cifra { text-align: center; padding: 26px 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.cifra strong { display: block; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; }
.cifra span { font-size: .85rem; color: var(--texto-mute); }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 18px 22px;
}
.faq details[open] { border-color: var(--borde-fuerte); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--primario); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 12px; font-size: .95rem; }

/* ---------- Llamada final ---------- */
.cierre { text-align: center; }
.cierre .contenedor { max-width: 760px; }
.cierre p { margin: 0 auto 30px; }

/* ---------- Pie ---------- */
footer { border-top: 1px solid var(--borde); padding: 56px 0 30px; background: var(--panel); }
/* Seis bloques desde que el pie lleva también los servicios: la marca ocupa
   algo más y el resto se reparte. Por debajo de 1180 px caben cuatro. */
.pie-rejilla { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; margin-bottom: 40px; }
@media (min-width: 1180px) { .pie-rejilla { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 26px; } }
@media (max-width: 780px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
/* Los títulos del pie son h2 por jerarquía de accesibilidad, aunque se
   vean pequeños: el nivel del encabezado y su tamaño son cosas distintas. */
footer .pie-titulo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-mute); margin-bottom: 14px; }
footer ul { list-style: none; display: grid; gap: 9px; }
footer a { color: var(--texto-dim); font-size: .92rem; transition: color .15s; }
footer a:hover { color: var(--texto); }
.pie-legal {
  border-top: 1px solid var(--borde); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: var(--texto-mute);
}

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: 16px; max-width: 540px; }
.campo label { display: block; font-size: .86rem; margin-bottom: 7px; color: var(--texto-dim); font-weight: 500; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radio-sm);
  background: var(--panel-2); border: 1px solid var(--borde-fuerte);
  color: var(--texto); font-family: inherit; font-size: .96rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(196, 30, 58, .16);
}
.campo textarea { resize: vertical; min-height: 120px; }
/* Enlace de "saltar al contenido": no se ve hasta que alguien llega a él con
   el tabulador, y entonces aparece arriba del todo. Es lo primero que
   agradece quien navega sin ratón. */
.saltar-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primario); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.saltar-contenido:focus { left: 0; }

.acepto { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; color: var(--texto-mute); }
.acepto label { display: block; margin-bottom: 4px; cursor: pointer; }
.acepto a { display: inline-block; }
.acepto input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--primario); }
.aviso-form { padding: 14px 16px; border-radius: var(--radio-sm); font-size: .92rem; display: none; }
.aviso-form.ok { display: block; background: rgba(46, 213, 115, .1); border: 1px solid rgba(46, 213, 115, .3); color: #8ff0b5; }
.aviso-form.error { display: block; background: rgba(255, 71, 87, .1); border: 1px solid rgba(255, 71, 87, .3); color: #ffb3ba; }

/* ---------- Aparición al bajar ----------
   Solo se oculta el contenido si el JavaScript está vivo (él añade la clase
   "js" al <html> nada más cargar). Si el archivo no llega, falla o alguien
   navega sin JavaScript, todo se ve con normalidad: una web cuyo contenido
   desaparece cuando falla un script no la lee ni Google ni una persona. */
html.js .aparece { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
html.js .aparece.visible { opacity: 1; transform: none; }

/* ---------- Páginas de texto legal ---------- */
.texto-legal { max-width: 78ch; }
.texto-legal h2 { font-size: 1.35rem; margin: 38px 0 14px; }
.texto-legal p, .texto-legal li { font-size: .96rem; margin-bottom: 12px; }
.texto-legal ul { padding-left: 22px; }
.texto-legal strong { color: var(--texto); }


/* ---------- Impresión ---------- */
/* Las páginas legales y la guía se imprimen o se guardan en PDF. En pantalla
   el fondo es negro; en papel eso es ilegible y se come la tinta. */
@media print {
  :root { --fondo: #fff; --texto: #111; --texto-mute: #444; --panel: #fff; --borde: #ccc; }

  html, body { background: #fff !important; color: #111 !important; }

  /* Fuera lo que no aporta nada en papel. */
  header, footer nav, .saltar-contenido, .portada-acciones, .btn,
  .menu-boton, .galeria-app, .comparativa, .marco-app, form { display: none !important; }

  main { padding: 0 !important; }
  section { padding: 0 0 18pt !important; break-inside: avoid; }
  .resplandor::before, .resplandor::after { display: none !important; }

  h1, h2, h3 { color: #111 !important; break-after: avoid; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; margin-top: 14pt; }
  h3 { font-size: 12pt; }
  p, li { font-size: 10.5pt; line-height: 1.45; color: #222 !important; orphans: 3; widows: 3; }

  .tarjeta, .tarjeta-destacada {
    border: 1px solid #ccc !important; background: #fff !important;
    break-inside: avoid; padding: 10pt !important;
  }

  /* En papel, un enlace sin su dirección no lleva a ninguna parte. */
  a { color: #111 !important; text-decoration: underline; }
  main a[href^="/"]::after { content: " (kairosaima.com" attr(href) ")"; font-size: 9pt; color: #555; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  main a[href^="#"]::after, main a[href^="mailto"]::after { content: ""; }

  /* Quien imprime quiere el documento, no las animaciones a medio hacer. */
  .aparece { opacity: 1 !important; transform: none !important; }
}

/* ---------- La mascota de Carnage ---------- */
/* Es pixel art: si el navegador lo suaviza al agrandarlo se convierte en una
   mancha. image-rendering: pixelated mantiene el píxel cuadrado, que es justo
   lo que le da el aire de la marca. */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

.mascota-portada {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mascota-portada img {
  width: min(300px, 72vw);
  height: auto;
  /* Una sombra roja floja debajo: sobre el fondo oscuro la silueta negra del
     aro se comía el borde y parecía recortada a tijera. */
  filter: drop-shadow(0 14px 28px rgba(196, 30, 58, .32));
}

/* La escena de la tienda es apaisada y no lleva marco: el GIF tiene el fondo
   transparente, así que se apoya directamente en el fondo de la sección. */
.escena-simbionte {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.escena-simbionte img {
  width: 100%;
  height: auto;
  max-width: 640px;
}
.escena-simbionte .pie-escena {
  margin-top: 18px;
  color: var(--texto-mute);
  font-size: .93rem;
}

/* El logo pequeño de Carnage cuando acompaña a un titular. */
.marca-carnage {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.marca-carnage img { width: 52px; height: 52px; }
/* En una cabecera de sección la mascota manda más que un icono pequeño. */
.seccion-cabecera .marca-carnage img { width: 112px; height: 112px; }
.seccion-cabecera .marca-carnage { justify-content: center; }

/* ---------- Portada en móvil ---------- */
/* El botón principal quedaba por debajo del pliegue en un móvil de 812 px de
   alto: el visitante tenía que hacer scroll para ver la única acción de la
   página. Se recorta el aire de arriba y se ajusta la entradilla para que el
   titular, el texto y el botón entren juntos en la primera pantalla. */
@media (max-width: 640px) {
  .portada { padding-top: 40px; padding-bottom: 48px; }
  .portada h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); margin-bottom: 16px; }
  .portada .entradilla { font-size: .97rem; margin-bottom: 26px; }
  /* A pantalla estrecha los botones apilados a ancho completo se pulsan mejor
     que dos medios pegados. */
  .portada-acciones { flex-direction: column; }
  .portada-acciones .btn { width: 100%; text-align: center; }
  .portada-nota { margin-top: 20px; }
}