@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root{
  --green:#AFE802;--green-dark:#8fc400;--navy:#1B223A;--black:#0B101F;
  --white:#ffffff;--off-white:#f4f7f0;--light-green:#e4f5b0;--border:#cde06a;
  --grey-text:#4a5568;
  --font-main:'Barlow',sans-serif;--font-cond:'Barlow Condensed',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--off-white);color:var(--black);font-family:var(--font-main);font-size:16px;line-height:1.65;min-height:100vh;}

/* ── HEADER ── */
header{height:72px;background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,0.35);}
.header-inner{max-width:1200px;margin:0 auto;padding:0 2.5rem;height:100%;display:flex;align-items:center;gap:1.5rem;}
.logo-slot{height:46px;display:flex;align-items:center;flex-shrink:0;}
.logo-slot a{display:flex;align-items:center;}
.logo-slot img{max-height:100%;max-width:160px;object-fit:contain;}
.hdivider{width:1px;height:30px;background:rgba(255,255,255,0.18);}
.header-title h1{font-family:var(--font-cond);font-size:1.05rem;font-weight:600;color:var(--white);letter-spacing:0.05em;text-transform:uppercase;}
.header-title p{font-size:0.75rem;color:rgba(255,255,255,0.42);font-weight:300;}
.header-back{margin-left:auto;display:inline-flex;align-items:center;gap:0.4rem;color:rgba(255,255,255,0.8);font-family:var(--font-cond);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:color 0.15s;}
.header-back:hover{color:var(--green);}
.header-back svg{width:14px;height:14px;}

/* ── HERO INDEX (dos columnas: foto | texto) ── */
.hero{background:var(--navy);border-bottom:4px solid var(--green);display:grid;grid-template-columns:1fr 1fr;min-height:420px;}
.hero-img{background-image:url('hero.jpg');background-size:cover;background-position:center;min-height:320px;}
.hero-content{padding:3.5rem 3rem;display:flex;flex-direction:column;justify-content:center;}
.hero-pre{font-family:var(--font-cond);font-size:0.85rem;font-weight:600;letter-spacing:0.25em;color:var(--green);text-transform:uppercase;margin-bottom:0.75rem;}
.hero-title{font-family:var(--font-cond);font-size:2.8rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.02em;line-height:1.05;margin-bottom:1rem;}
.hero-title span{color:var(--green);}
.hero-desc{font-size:01rem;color:rgba(255,255,255,0.8);font-weight:300;line-height:1.7;margin-bottom:2rem;}
.hero-meta{display:flex;gap:2.5rem;flex-wrap:wrap;}
.hero-stat{display:flex;flex-direction:column;}
.hero-stat-num{font-family:var(--font-cond);font-size:2rem;font-weight:700;color:var(--white);line-height:1;}
.hero-stat-label{font-size:0.68rem;color:#afe802;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;margin-top:0.2rem;}

/* ── CARDS INDEX ── */
.main{max-width:1200px;margin:0 auto;padding:3rem 2.5rem 7rem;}
.section-label{font-family:var(--font-cond);font-size:1rem;font-weight:900;letter-spacing:0.2em;text-transform:uppercase;color:var(--grey-text);}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;}
.card{background:var(--white);border:1px solid var(--border);border-top:4px solid var(--navy);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-top-color 0.2s,box-shadow 0.2s;}
.card:hover{border-top-color:var(--green);box-shadow:0 4px 20px rgba(175,232,2,0.12);}
.card-header{padding:1.75rem 1.75rem 1.25rem;flex:1;}
.card-num{font-family:var(--font-cond);font-size:0.65rem;font-weight:700;letter-spacing:0.2em;color:var(--green-dark);text-transform:uppercase;margin-bottom:0.4rem;}
.card-app{font-family:var(--font-cond);font-size:0.65rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--grey-text);margin-bottom:0.5rem;}
.card-title{font-family:var(--font-cond);font-size:1.4rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.02em;line-height:1.15;margin-bottom:0.5rem;}
.card-desc{font-size:0.85rem;color:var(--grey-text);font-weight:300;line-height:1.55;}
.card-footer{padding:1rem 1.75rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-count{font-family:var(--font-cond);font-size:0.7rem;font-weight:600;color:var(--grey-text);letter-spacing:0.08em;text-transform:uppercase;}
.card-arrow{display:flex;align-items:center;gap:0.4rem;font-family:var(--font-cond);font-size:0.7rem;font-weight:600;color:var(--green-dark);letter-spacing:0.1em;text-transform:uppercase;}
.card-arrow svg{width:14px;height:14px;}
.card.disabled{opacity:0.45;pointer-events:none;}
.card.disabled .card-arrow{color:var(--grey-text);}
.badge-soon{display:inline-block;background:var(--light-green);color:var(--navy);font-family:var(--font-cond);font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.2rem 0.5rem;margin-left:0.5rem;vertical-align:middle;}

/* ── HERO PÁGINAS INTERNAS ── */
.page-hero{background:var(--navy);border-bottom:4px solid var(--green);padding:3rem 2.5rem;}
.page-hero-inner{max-width:1200px;margin:0 auto;}
.page-hero-pre{font-family:var(--font-cond);font-size:0.85rem;font-weight:500;letter-spacing:0.2em;color:var(--green);text-transform:uppercase;margin-bottom:0.6rem;}
.page-hero-title{font-family:var(--font-cond);font-size:2.2rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.02em;line-height:1.1;margin-bottom:0.75rem;}
.page-hero-desc{font-size:1rem;color:rgba(255,255,255,0.8);font-weight:300;max-width:680px;}

/* ── TOC ── */
.toc{background:var(--white);border:1px solid var(--border);border-top:4px solid var(--green);max-width:1200px;margin:2.5rem auto 0;padding:1.75rem 2rem;}
.toc-title{font-family:var(--font-cond);font-size:0.88rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey-text);margin-bottom:1rem;}
.toc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem 2rem;}
.toc-link{display:flex;align-items:baseline;gap:0.6rem;text-decoration:none;color:var(--black);font-size:0.95rem;padding:0.3rem 0;transition:color 0.15s;}
.toc-link:hover{color:var(--green-dark);}
.toc-num{font-family:var(--font-cond);font-size:0.85rem;font-weight:700;color:var(--green-dark);letter-spacing:0.05em;flex-shrink:0;}

/* ── BLOQUES DE EJERCICIOS ── */
main{max-width:1200px;margin:0 auto;padding:2.5rem 2.5rem 7rem;display:flex;flex-direction:column;gap:2rem;}
.block{background:var(--white);border:1px solid var(--border);border-top:4px solid var(--navy);overflow:hidden;transition:border-top-color 0.2s;}
.block:hover{border-top-color:var(--green);}
.block-header{padding:1.75rem 2rem 1.5rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border);}
.block-meta{flex:1;}
.block-tag{font-family:var(--font-cond);font-size:0.8rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey-text);margin-bottom:0.3rem;}
.block-title{font-family:var(--font-cond);font-size:1.35rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.02em;line-height:1.2;}
.block-subtitle{font-size:1rem;color:var(--grey-text);font-weight:300;margin-top:0.35rem;}
.tool-badge{display:inline-flex;align-items:center;background:var(--light-green);color:var(--navy);font-family:var(--font-cond);font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.35rem 0.85rem;white-space:nowrap;flex-shrink:0;}
.block-body{padding:1.75rem 2rem;display:flex;flex-direction:column;gap:1.25rem;}
.phase-label{font-family:var(--font-cond);font-size:0.65rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--green-dark);margin-bottom:0.5rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border);}

/* ── PROMPTS ── */
.prompt-item{display:flex;flex-direction:column;gap:0.5rem;}
.prompt-num{font-family:var(--font-cond);font-size:0.85rem;font-weight:600;color:var(--green-dark);letter-spacing:0.1em;text-transform:uppercase;}
.prompt-box{background:var(--black);overflow:hidden;}
.prompt-text{font-family:var(--font-main);font-size:1rem;color:rgba(255,255,255,0.88);line-height:1.65;padding:1.25rem 1.5rem;white-space:pre-wrap;}
.prompt-footer{padding:0.65rem 1.5rem;background:rgba(255,255,255,0.04);border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:flex-end;}
.copy-btn{background:var(--green);color:var(--black);border:none;font-family:var(--font-cond);font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.4rem 1.1rem;cursor:pointer;transition:background 0.15s;}
.copy-btn:hover{background:var(--green-dark);}
.copy-btn.copied{background:var(--navy);color:var(--white);}

/* ── ACTIVITY BOX ── */
.activity-box{background:var(--off-white);border:1px solid var(--border);border-left:3px solid var(--green);padding:1rem 1.25rem;font-size:0.85rem;color:var(--grey-text);}
.activity-box strong{display:block;font-family:var(--font-cond);font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--navy);margin-bottom:0.3rem;}

/* ── DESCARGAS ── */
.docs-label{font-family:var(--font-cond);font-size:0.8rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey-text);margin-bottom:0.5rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border);}
.doc-download{display:flex;align-items:center;gap:1.25rem;background:var(--off-white);border:1px solid var(--border);padding:1rem 1.25rem;margin-bottom:0.25rem;}
.doc-download svg{width:28px;height:28px;flex-shrink:0;color:var(--green-dark);}
.doc-download-info{flex:1;}
.doc-download-label{font-family:var(--font-cond);font-size:0.62rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--grey-text);margin-bottom:0.15rem;}
.doc-download-name{font-family:var(--font-cond);font-size:0.9rem;font-weight:600;color:var(--navy);}
.doc-link{display:inline-flex;align-items:center;gap:0.4rem;background:var(--green);color:var(--black);font-family:var(--font-cond);font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.45rem 1rem;text-decoration:none;flex-shrink:0;transition:background 0.15s;}
.doc-link:hover{background:var(--green-dark);}

/* ── FOOTER ── */
footer{background:var(--navy);border-top:4px solid var(--green);padding:2rem 2.5rem;text-align:center;}
footer p{color:var(--white);font-size:0.78rem;line-height:1.8;text-transform:uppercase;letter-spacing:0.06em;}
footer a{color:var(--white);text-decoration:underline;}