/* Jardinero IA — portada pública (/). Sigue el lienzo "Invernadero": fondo crema, verde bosque
   para los bloques que van a sangre, terracota como segundo acento, titulares en Newsreader y
   el resto en Karla. Los tokens salen de /diseño/styles.css; aquí solo se componen, salvo los
   pocos matices que el lienzo usa y el sistema no nombra (el sage claro del héroe, el ámbar).

   Todo se mide con clamp() contra el ancho de la ventana, así que no hay tres diseños sino uno
   que respira: la misma hoja vale para el móvil, la tableta y el escritorio, y los saltos de
   columna los deciden los minmax() de cada rejilla, no una lista de puntos de ruptura. */

html, body { background: var(--color-bg); }
body { -webkit-tap-highlight-color: transparent; overflow-x: hidden; text-wrap: pretty; }

/* saltar al contenido, oculto hasta recibir foco */
.skip-link {
  position: absolute; left: var(--space-3); top: -48px; z-index: 60;
  background: var(--color-accent); color: var(--color-bg);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: var(--space-3); }

/* ── pastillas: el único botón de esta página ────────────────────────────── */
.pastilla {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: filter .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}
.pastilla:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pastilla:active { transform: translateY(0); }
.pastilla-solida { background: var(--color-accent); color: #f6f1e4; }
.pastilla-borde { border-color: #b9c2a4; color: var(--color-accent); background: transparent; }
.pastilla-borde:hover { background: var(--color-accent-100); filter: none; }
.pastilla-crema { background: #f1efe0; color: var(--color-text); }
.pastilla-terracota { background: #c2673c; color: #fff7f1; }
.pastilla-borde-terracota { border-color: #d8b7a2; color: var(--color-accent-2-500); background: transparent; }
.pastilla-borde-terracota:hover { background: #f9ece5; filter: none; }

/* ── la barra de arriba ──────────────────────────────────────────────────── */
.nav-inv {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); flex-wrap: wrap;
  padding: 14px clamp(20px, 5vw, 64px);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.marca {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.01em; color: var(--color-text);
}
/* La hoja de la marca: un cuadrado con dos esquinas redondeadas en diagonal. Es el mismo gesto
   que el radio de las tarjetas, en pequeño, y lo que ata el logotipo al resto del sistema. */
.hoja {
  width: 22px; height: 22px; flex: none;
  background: var(--color-hoja); border-radius: 2px 14px 2px 14px;
}
.nav-enlaces { display: flex; gap: clamp(14px, 2.4vw, 26px); font-size: 14.5px; }
.nav-enlaces a { color: var(--color-neutral-700); text-decoration: none; font-weight: 500; }
.nav-enlaces a:hover { color: var(--color-accent-2-500); }
.nav-inv .pastilla { margin-left: auto; padding: 11px 22px; font-size: 14.5px; }

/* el selector de idioma */
.idiomas { display: flex; gap: 2px; padding: 3px; background: var(--color-sage); border-radius: var(--radius-pill); }
.idiomas button {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  color: var(--color-neutral-600); background: none; border: 0; border-radius: var(--radius-pill);
  padding: 6px 11px; cursor: pointer; transition: background .14s ease, color .14s ease;
}
.idiomas button:hover { color: var(--color-text); }
.idiomas button[aria-pressed="true"] { background: var(--color-bg); color: var(--color-accent); }
.idiomas button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── el héroe ────────────────────────────────────────────────────────────── */
.heroe {
  position: relative;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 64px) clamp(64px, 8vw, 104px);
  background-image:
    repeating-linear-gradient(90deg, rgba(111,145,89,.13) 0 1px, transparent 1px 96px),
    linear-gradient(var(--color-bg), #eef0dd);
}
.heroe-dentro {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 44px clamp(32px, 5vw, 72px); align-items: center;
}
.heroe-texto { flex: 1 1 440px; min-width: 0; }
.heroe-figura { flex: 0 1 360px; min-width: 240px; position: relative; }

.insignia {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-sage); color: var(--color-accent);
  padding: 8px 16px 8px 12px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.insignia i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-hoja); }

.heroe h1 {
  font-size: clamp(40px, 6.1vw, 82px); line-height: 1.02; letter-spacing: -0.022em;
  margin: 22px 0 0; color: var(--color-text);
}
.heroe h1 em { font-style: italic; color: var(--color-accent-2-500); }
.entradilla { font-size: 17.5px; line-height: 1.65; max-width: 52ch; margin: 26px 0 0; color: var(--color-neutral-700); }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; align-items: center; }
.nota {
  font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 1.6;
  margin: 22px 0 0; color: var(--color-neutral-600);
}

/* El arco. Es lo que más aleja a la página del panel de métricas que no queremos parecer. */
.arco {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  overflow: hidden; border: 1.5px solid #cfd5bb; background: var(--color-sage);
  display: grid; place-items: center;
}
.arco svg, .arco canvas { width: 100%; height: 100%; display: block; }
/* La pastilla de la última lectura, asomando por el borde: es lo que convierte el dibujo en
   "esto está midiendo algo ahora mismo". */
.lectura {
  position: absolute; left: -14px; bottom: 34px;
  display: flex; align-items: center; gap: 9px;
  background: var(--color-bg); border: 1.5px solid #cfd5bb; border-radius: var(--radius-pill);
  padding: 11px 19px; box-shadow: var(--shadow-sm);
}
.lectura i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-hoja); flex: none; }
.lectura b { font-size: 14px; font-weight: 600; color: var(--color-accent); }
.lectura span { font-size: 13px; color: var(--color-neutral-600); }

/* ── las cifras, montadas sobre el héroe ─────────────────────────────────── */
.cifras { padding: 0 clamp(20px, 5vw, 64px); margin-top: -36px; position: relative; z-index: 2; }
.cifras-dentro {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px;
}
.cifra {
  background: var(--color-bg); border: 1.5px solid #ddd6c2;
  border-radius: 28px 28px 28px 4px; padding: 24px 22px 22px;
}
.cifra.destacada { background: var(--color-sage); border-color: #cfd5bb; }
.cifra.destacada .dato { color: var(--color-accent-2-500); }
.dato {
  font-family: var(--font-heading); font-weight: 400; font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1; margin: 0; color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.rotulo {
  font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-neutral-600); margin: 14px 0 0; font-weight: 600;
}

/* ── bloques de sección ──────────────────────────────────────────────────── */
.bloque { padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 64px); }
.bloque-dentro { max-width: 1180px; margin: 0 auto; }
.cejilla {
  display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-2-500); font-weight: 600; margin-bottom: 14px;
}
.cabecera-seccion {
  display: flex; flex-wrap: wrap; gap: 20px clamp(32px, 6vw, 88px);
  align-items: flex-end; margin-bottom: clamp(34px, 4vw, 56px);
}
.cabecera-seccion > div { flex: 1 1 380px; min-width: 0; }
.cabecera-seccion h2 { margin: 0; }
.cabecera-seccion > p, .cabecera-seccion h2 + p {
  flex: 1 1 320px; min-width: 0; font-size: 16.5px; line-height: 1.7; margin: 0;
  color: var(--color-neutral-700); max-width: 46ch;
}

/* — lo que mide — */
.rejilla-medidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.medida .cejilla { color: var(--color-neutral-600); margin-bottom: 0; }
.medida h3 { font-size: 25px; line-height: 1.2; margin: 8px 0 12px; }
.medida p { font-size: 15.5px; line-height: 1.65; margin: 0; color: var(--color-neutral-700); }
/* Los glifos: la misma hoja de la marca, en grande y en cuatro colores. Cada medida tiene el
   suyo, así que la rejilla se lee de un vistazo aunque no se lea el texto. */
.glifo { display: inline-block; width: 44px; height: 44px; border-radius: 2px 22px 2px 22px; margin-bottom: 20px; }
.g1 { background: var(--color-hoja); }
.g2 { background: #8fa86f; }
.g3 { background: #d8a24a; }
.g4 { background: #c2673c; }

/* — la IA, a sangre y en verde bosque — */
/* Va a sangre y con la esquina superior redondeada: es el momento en que deja de hablar el
   hardware y empieza a hablar la IA, y el cambio de fondo lo dice sin una palabra. */
.bosque {
  background: var(--color-accent); color: #f1efe0;
  border-radius: clamp(32px, 7vw, 96px) clamp(32px, 7vw, 96px) 0 0;
  margin-top: clamp(24px, 4vw, 48px);
}
.bosque .cejilla { color: #f1efe0; }
.bosque h2 { color: #f6f1e4; }
.bosque .cabecera-seccion > p, .bosque .cabecera-seccion h2 + p { color: #cfd8c2; max-width: 44ch; }
.bosque .cabecera-seccion h2 { flex: 1 1 400px; min-width: 0; }
.rejilla-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.numero {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border: 1.5px solid #7fa07f; border-radius: 50%;
  font-family: var(--font-heading); font-size: 18px; color: #cfd8c2; margin-bottom: 20px;
}
.paso h3 { font-size: 27px; line-height: 1.15; margin: 0 0 14px; color: #f6f1e4; }
.paso p { font-size: 15.5px; line-height: 1.7; margin: 0; color: #cfd8c2; }
.pastilla-ambar {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  background: #d8a24a; color: #2b2410; padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600;
}

/* — el alta, una conversación — */
.conversacion { display: flex; flex-wrap: wrap; gap: 44px clamp(32px, 6vw, 88px); }
.conversacion-texto { flex: 1 1 380px; min-width: 0; }
.conversacion-texto h2 { margin: 0; }
.conversacion-texto p { font-size: 16.5px; line-height: 1.7; margin: 22px 0 0; color: var(--color-neutral-700); max-width: 44ch; }
.chat { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pregunta, .respuesta {
  margin: 0; max-width: 32ch; padding: 15px 21px; font-size: 15.5px; line-height: 1.55;
}
.pregunta {
  align-self: flex-start; background: #eef0dd; border: 1.5px solid var(--color-divider);
  border-radius: 24px 24px 24px 6px; color: var(--color-neutral-800);
}
.respuesta {
  align-self: flex-end; background: var(--color-accent); color: #f1efe0;
  border-radius: 24px 24px 6px 24px;
}
/* La ficha que propone la IA al final de la conversación. Es el único sitio de la página donde
   la terracota llena un bloque: marca que aquí hay algo que decidir. */
.ficha {
  margin-top: 14px; background: #f2ddd0; border: 1.5px solid #e3c3ae;
  border-radius: 28px 28px 28px 8px; padding: 24px 24px 26px;
}
.ficha .cejilla { margin-bottom: 0; }
.ficha h3 { font-size: 23px; line-height: 1.2; margin: 10px 0 16px; color: var(--color-text); }
.ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px 20px;
  font-size: 15px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums;
}
.ficha-datos i { font-style: normal; color: var(--color-neutral-600); }
.ficha-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ficha-acciones .pastilla { padding: 12px 22px; font-size: 15px; }

/* — el cierre — */
.cierre {
  background-image:
    repeating-linear-gradient(90deg, rgba(241,239,224,.07) 0 1px, transparent 1px 110px),
    linear-gradient(var(--color-text), var(--color-text));
  color: #f1efe0;
  border-radius: clamp(32px, 7vw, 96px) clamp(32px, 7vw, 96px) 0 0;
  margin-top: clamp(24px, 4vw, 48px);
}
.cierre-dentro { display: flex; flex-wrap: wrap; gap: 36px clamp(32px, 6vw, 88px); align-items: flex-end; }
.cierre-dentro > div { flex: 1 1 420px; min-width: 0; }
.cierre h2 {
  font-size: clamp(34px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; color: #f1efe0;
}
.cierre h2 em { font-style: italic; color: var(--color-accent-2-300); }
.cierre p { font-size: 17.5px; line-height: 1.7; max-width: 42ch; margin: 24px 0 0; color: #cfd8c2; }
.cierre .acciones { margin-top: 32px; }
.cita {
  flex: 0 1 300px; min-width: 220px;
  font-family: var(--font-heading); font-style: italic; font-size: 19px; line-height: 1.5;
  margin: 0; color: #8a9c7f;
}

/* ── el pie ──────────────────────────────────────────────────────────────── */
.pie-inv {
  padding: 28px clamp(20px, 5vw, 64px); background: var(--color-text);
  color: #8a9c7f; font-size: 13.5px; line-height: 1.6;
}
.pie-dentro {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between;
}

/* ── lo que el móvil necesita de verdad ──────────────────────────────────── */
/* Casi todo lo de arriba ya respira con clamp() y auto-fit. Aquí solo van los dos sitios donde
   la barra de arriba se queda sin sitio y hay que recolocar, no encoger. */
@media (max-width: 720px) {
  .nav-enlaces { order: 4; width: 100%; justify-content: space-between; padding-top: 4px; }
  .nav-inv .pastilla { margin-left: 0; }
  .idiomas { margin-left: auto; }
  .lectura { left: 0; bottom: 18px; padding: 9px 15px; }
  .cifras { margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }