/* ═══════════════════════════════════════
   AGENTES DE IA — hoja de estilo propia
   Un tono distinto al resto de la web: cuaderno, carta escrita a mano.
   Se carga solo en agentes-ia.html, encima de styles.css.
   ═══════════════════════════════════════ */

:root {
  --ag-bg:       #EEE3CD;
  --ag-bg-soft:  #F5ECDA;
  --ag-paper:    #FBF5E7;
  --ag-ink:      #2C2620;
  --ag-ink-soft: #55483A;
  --ag-ink-mute: #8B7A63;
  --ag-line:     #DBC9A3;
  --ag-accent:   #B14A2E;
  --ag-accent-2: #33506E;
  --ag-display:  'Fraunces', 'Georgia', serif;
  --ag-hand:     'Caveat', cursive;
  --ag-body:     'Lora', 'Georgia', serif;
}

/* ─── Nav override: the site nav assumes a dark hero underneath it.
   This page's hero is warm and light, so the nav needs to flip too. ─── */
body.agents-page #nav,
body.agents-page #nav.scrolled {
  background: rgba(238,227,205,0.94);
  box-shadow: 0 1px 0 rgba(44,38,32,0.08);
}
body.agents-page .nav-logo-mark,
body.agents-page .nav-logo-word,
body.agents-page .nav-item > a,
body.agents-page .nav-item > button.nav-link-btn {
  color: var(--ag-ink) !important;
}
body.agents-page .nav-item > a:hover,
body.agents-page .nav-item.is-active > a,
body.agents-page .nav-link-btn:hover { color: var(--ag-accent) !important; }
body.agents-page .nav-item > a::after { background: var(--ag-accent) !important; }
body.agents-page .nav-toggle span { background: var(--ag-ink) !important; }

/* ─── Base ─── */
body.agents-page main { background: var(--ag-bg); }
.ag-wrap {
  font-family: var(--ag-body); color: var(--ag-ink-soft);
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(177,74,46,0.05), transparent 60%),
    radial-gradient(ellipse 900px 600px at 90% 30%, rgba(51,80,110,0.05), transparent 55%),
    var(--ag-bg);
}
.ag-section { padding: clamp(3.5rem,7vw,6.5rem) 0; position: relative; }
.ag-section--paper { background: var(--ag-paper); }
.ag-section--dark { background: var(--ag-ink); color: rgba(251,245,231,0.82); }
.ag-container { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 clamp(1.25rem,5vw,3rem); position: relative; }
.ag-container--wide { max-width: 1120px; }

/* ─── Typography ─── */
.ag-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ag-hand); font-size: 1.5rem; color: var(--ag-accent);
  transform: rotate(-2deg); margin-bottom: 0.75rem;
}
.ag-eyebrow::before { content: '✒'; font-size: 1.1rem; }
.ag-h1 {
  font-family: var(--ag-display); font-weight: 600; font-style: italic;
  font-size: clamp(2.4rem,5.5vw,4.4rem); line-height: 1.08; color: var(--ag-ink);
  letter-spacing: -0.01em; margin-bottom: 1.5rem; max-width: 16ch;
}
.ag-h1 em { font-style: normal; color: var(--ag-accent); }
.ag-h2 {
  font-family: var(--ag-display); font-weight: 600; font-style: italic;
  font-size: clamp(1.9rem,4vw,2.8rem); line-height: 1.15; color: var(--ag-ink);
  margin-bottom: 1.25rem;
}
.ag-section--dark .ag-h2 { color: var(--ag-paper); }
.ag-h3 {
  font-family: var(--ag-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ag-ink); margin-bottom: 0.6rem;
}
.ag-lead { font-size: 1.15rem; line-height: 1.75; color: var(--ag-ink-soft); max-width: 62ch; }
.ag-lead--center { margin: 0 auto; text-align: center; }
.ag-p { font-size: 1.02rem; line-height: 1.8; color: var(--ag-ink-soft); max-width: 62ch; }
.ag-p + .ag-p { margin-top: 1.1rem; }
.ag-section--dark .ag-p, .ag-section--dark .ag-lead { color: rgba(251,245,231,0.78); }
.ag-mark { background: linear-gradient(120deg, rgba(177,74,46,0.18) 0%, rgba(177,74,46,0.18) 100%); background-repeat: no-repeat; background-size: 100% 0.5em; background-position: 0 88%; padding: 0 0.1em; }
.ag-signature { font-family: var(--ag-hand); font-size: 2rem; color: var(--ag-accent); margin-top: 0.5rem; display: inline-block; transform: rotate(-1.5deg); }

/* ─── Divider: hand-drawn wavy rule between sections ─── */
.ag-divider { width: 100%; height: 28px; display: block; margin: 0; }
.ag-divider svg { width: 100%; height: 100%; }
.ag-divider path { stroke: var(--ag-line); stroke-width: 2; fill: none; }
.ag-section--dark + .ag-divider path,
.ag-divider--dark path { stroke: rgba(251,245,231,0.2); }

/* ─── Hero ─── */
.ag-hero { padding: calc(var(--nav-h) + 3.5rem) 0 4rem; overflow: hidden; }
.ag-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.ag-hero-stats { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.75rem; }
.ag-hero-stat { font-family: var(--ag-hand); font-size: 1.15rem; color: var(--ag-ink-soft); display: flex; align-items: center; gap: 0.4rem; }
.ag-hero-stat strong { color: var(--ag-accent); font-size: 1.3rem; }
.ag-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.ag-robot-frame { position: relative; }
.ag-robot-frame .ag-tape { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 90px; height: 30px; background: rgba(219,201,163,0.55); border: 1px solid rgba(139,122,99,0.25); z-index: 2; }

/* ─── Buttons — deliberately distinct pill treatment, but a bridge CTA can borrow the site's blue ─── */
.ag-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ag-hand);
  font-size: 1.2rem; padding: 0.7rem 1.75rem; border-radius: 40% 60% 57% 43% / 45% 48% 52% 55%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ag-btn--ink { background: var(--ag-ink); color: var(--ag-paper); box-shadow: 3px 4px 0 rgba(44,38,32,0.18); }
.ag-btn--ink:hover { transform: translate(-2px,-2px); box-shadow: 5px 6px 0 rgba(44,38,32,0.22); }
.ag-btn--outline { background: transparent; color: var(--ag-ink); border: 2px solid var(--ag-ink); }
.ag-btn--outline:hover { background: rgba(44,38,32,0.06); transform: translate(-2px,-2px); }

/* ─── Cards: taped index cards / sticky notes ─── */
.ag-card {
  background: var(--ag-paper); border: 1px solid var(--ag-line); border-radius: 10px 12px 9px 13px;
  padding: 1.75rem; box-shadow: 4px 5px 0 rgba(44,38,32,0.06);
  position: relative;
}
.ag-card:nth-child(2n) { transform: rotate(-0.6deg); }
.ag-card:nth-child(2n+1) { transform: rotate(0.5deg); }
.ag-card-icon { width: 42px; height: 42px; margin-bottom: 1rem; color: var(--ag-accent); }
.ag-card-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ag-card h3 { font-family: var(--ag-display); font-weight: 600; font-size: 1.1rem; color: var(--ag-ink); margin-bottom: 0.5rem; }
.ag-card p { font-size: 0.92rem; line-height: 1.65; color: var(--ag-ink-soft); }

.ag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ag-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ─── Timeline / historia ─── */
.ag-story { display: flex; flex-direction: column; gap: 2.5rem; max-width: 720px; margin: 0 auto; }
.ag-story-item { position: relative; padding-left: 2.5rem; }
.ag-story-item::before {
  content: ''; position: absolute; left: 0; top: 0.4rem; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--ag-accent); background: var(--ag-paper);
}
.ag-story-item::after {
  content: ''; position: absolute; left: 5px; top: 1.4rem; bottom: -2.5rem; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ag-line) 0 6px, transparent 6px 11px);
}
.ag-story-item:last-child::after { display: none; }
.ag-story-year { font-family: var(--ag-hand); font-size: 1.3rem; color: var(--ag-accent); margin-bottom: 0.15rem; display: block; }

/* ─── Diagram: hand-drawn loop ─── */
.ag-loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; margin-top: 2.5rem; }
.ag-loop-node { text-align: center; position: relative; }
.ag-loop-icon {
  width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--ag-paper); border: 2px solid var(--ag-ink);
  display: flex; align-items: center; justify-content: center; color: var(--ag-accent);
  position: relative; z-index: 1;
}
.ag-loop-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ag-loop-node h4 { font-family: var(--ag-display); font-weight: 600; font-size: 1.05rem; color: var(--ag-ink); margin-bottom: 0.4rem; }
.ag-loop-node p { font-size: 0.85rem; color: var(--ag-ink-soft); line-height: 1.55; }
.ag-loop-arrow { position: absolute; top: 38px; right: -1.1rem; width: 2.2rem; color: var(--ag-ink-mute); z-index: 0; }
.ag-loop-node:last-child .ag-loop-arrow { display: none; }

/* ─── Annotated benefit list ─── */
.ag-benefits { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; }
.ag-benefit { display: flex; gap: 1rem; align-items: flex-start; }
.ag-benefit-check { flex-shrink: 0; width: 28px; height: 28px; color: var(--ag-accent); margin-top: 0.15rem; }
.ag-benefit-check svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ag-benefit h4 { font-family: var(--ag-display); font-weight: 600; font-size: 1.08rem; color: var(--ag-ink); margin-bottom: 0.2rem; }
.ag-benefit p { font-size: 0.92rem; color: var(--ag-ink-soft); line-height: 1.6; }

/* ─── Compare (automatización vs inteligencia), notebook style ─── */
.ag-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.ag-compare-card { background: var(--ag-paper); border: 1px dashed var(--ag-line); border-radius: 14px; padding: 1.75rem; }
.ag-compare-card--accent { border: 2px solid var(--ag-accent); background: #FBF0E9; }
.ag-compare-label { font-family: var(--ag-hand); font-size: 1.3rem; color: var(--ag-accent); display: block; margin-bottom: 0.75rem; }
.ag-compare-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ag-ink-soft); margin: 0.75rem 0; }
.ag-compare-flow span:not(.a) { background: rgba(44,38,32,0.05); padding: 0.3rem 0.6rem; border-radius: 6px; }
.ag-compare-flow .a { color: var(--ag-ink-mute); }
.ag-compare-example { font-size: 0.85rem; color: var(--ag-ink-mute); font-style: italic; margin-top: 0.5rem; }

/* ─── Chat demo, restyled as a notebook conversation ─── */
.ag-chat { background: var(--ag-paper); border: 1px solid var(--ag-line); border-radius: 14px; padding: 1.5rem; }
.ag-chat-label { font-family: var(--ag-hand); font-size: 1.2rem; color: var(--ag-accent); margin-bottom: 1rem; display: block; }
.ag-chat-bubble {
  display: block; width: 100%; text-align: left; font-family: var(--ag-body); font-size: 0.9rem;
  background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 10px;
  padding: 0.85rem 1.1rem; margin-bottom: 0.65rem; color: var(--ag-ink-soft); cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ag-chat-bubble:hover { border-color: var(--ag-accent); }
.ag-chat-bubble.is-active { background: #FBF0E9; border-color: var(--ag-accent); color: var(--ag-ink); }
.ag-chat-reply {
  margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 10px;
  background: rgba(51,80,110,0.08); border: 1px solid rgba(51,80,110,0.25);
  font-size: 0.88rem; color: var(--ag-ink); line-height: 1.6;
}
.ag-chat-reply[hidden] { display: none; }
.ag-chat-reply-label { font-family: var(--ag-hand); font-size: 1rem; color: var(--ag-accent-2); margin-bottom: 0.35rem; display: block; }

/* ─── Tag stickers ─── */
.ag-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ag-tags li {
  font-family: var(--ag-hand); font-size: 1.05rem; color: var(--ag-ink-soft);
  background: var(--ag-paper); border: 1px solid var(--ag-line); border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  padding: 0.35rem 1rem;
}

/* ─── Future / manifesto section ─── */
.ag-future { text-align: center; }
.ag-future .ag-h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.ag-future .ag-lead { margin: 0 auto 2rem; }

/* ─── Trust note, warm variant ─── */
.ag-note {
  display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 1.75rem;
  padding: 1.1rem 1.25rem; background: rgba(51,80,110,0.07);
  border: 1px solid rgba(51,80,110,0.2); border-radius: 12px; max-width: 640px;
}
.ag-note svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ag-accent-2); stroke: currentColor; fill: none; stroke-width: 1.8; margin-top: 0.1rem; }
.ag-note p { font-size: 0.88rem; color: var(--ag-ink-soft); line-height: 1.6; }

/* ─── Bridge CTA back to the main site — uses the site's own button language on purpose ─── */
.ag-bridge { text-align: center; }
.ag-bridge .btn { margin: 0 0.4rem; }

/* ─── Sketchy filter for illustrations ─── */
.ag-sketchy { filter: url(#ag-sketch-filter); }

@media (max-width: 900px) {
  .ag-hero-grid { grid-template-columns: 1fr; }
  .ag-grid, .ag-grid--3 { grid-template-columns: 1fr; }
  .ag-compare { grid-template-columns: 1fr; }
  .ag-loop { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
  .ag-loop-arrow { display: none; }
}
@media (max-width: 600px) {
  .ag-loop { grid-template-columns: 1fr; }
}