/* Portada (/). Las piezas home-* también las usan /app/ (app-download.css) y /creditos/. */

/* ── Banner ─────────────────────────────────────────────────────────────── */
.home-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.5rem;align-items:stretch;min-height:300px;margin-bottom:1.25rem;padding:2.4rem;border:1px solid var(--border-gold);border-radius:16px;background:linear-gradient(90deg,rgba(22,17,12,.88),rgba(22,17,12,.62) 46%,rgba(22,17,12,.18)),url("../../img/heroindex.png"),linear-gradient(135deg,#7f8f32,#d2b248 54%,#7d5f24);background-size:auto,cover,cover;background-position:center,center 42%,center;box-shadow:0 12px 32px rgba(35,24,12,.18),0 0 0 1px rgba(255,255,255,.28) inset}
.home-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.30)),radial-gradient(ellipse at 86% 8%,rgba(255,244,186,.34),transparent 34%);pointer-events:none}
.home-hero-copy, .home-hero-panel{position:relative;z-index:1}
.home-hero-copy{max-width:660px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.home-kicker{width:max-content;max-width:100%;margin-bottom:.75rem;padding:.28rem .65rem;border:1px solid rgba(246,217,119,.45);border-radius:999px;background:rgba(22,17,12,.36);color:#fff4bf;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.home-hero h1{font-family:'Cinzel',serif;font-size:2.45rem;line-height:1;color:#f6d977;margin:0 0 .8rem;text-shadow:0 2px 14px rgba(0,0,0,.5);letter-spacing:.04em}
.home-hero p{max-width:560px;margin:0;color:#fff3bf;font-size:1rem;line-height:1.65;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.home-hero p.home-hero-note{margin-top:.85rem;font-size:.8rem;opacity:.88}
.home-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.35rem}
.home-btn{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;min-height:40px;padding:.55rem 1rem;border:1px solid rgba(246,217,119,.5);border-radius:7px;background:color-mix(in srgb,var(--c-surface-hi) 92%,transparent);color:var(--gold-dark);font-family:var(--font-ui);font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:all .15s}
.home-btn svg{width:16px;height:16px;flex-shrink:0}
.home-btn:hover{background:var(--c-surface-hi);color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.16)}
.home-btn.primary{background:linear-gradient(135deg,#e8c96a,#c9a84c 48%,#9a6e14);border-color:var(--c-line-accent);color:#1c1200}
.home-hero-panel{align-self:center;background:color-mix(in srgb,var(--c-surface-hi) 92%,transparent);border:1px solid rgba(246,217,119,.52);border-radius:12px;padding:.85rem;box-shadow:0 14px 32px rgba(0,0,0,.20);backdrop-filter:blur(5px)}
.home-panel-row{display:flex;flex-direction:column;gap:.18rem;padding:.72rem .8rem;border-bottom:1px solid rgba(184,154,80,.24)}
.home-panel-row + .home-panel-row{margin-top:.45rem}
.home-panel-row:last-child{border-bottom:0}
.home-panel-row span{display:flex;align-items:center;gap:.38rem;font-size:.68rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-dark)}
.home-panel-row span svg{width:14px;height:14px;flex-shrink:0}
.home-panel-row strong{font-size:.9rem;color:var(--text);line-height:1.3}

/* Teclas y comandos dentro del texto */
.main-content :is(.home-hero, .home-section, .home-flow) kbd{display:inline-block;padding:.02rem .36rem;border:1px solid var(--c-line-strong);border-bottom-width:2px;border-radius:4px;background:var(--c-inset-2);color:var(--c-text);font-family:var(--font-ui);font-size:.8em;font-weight:600;line-height:1.35;text-shadow:none;white-space:nowrap}
.main-content :is(.home-section, .home-flow) code{padding:.05rem .3rem;border-radius:4px;background:var(--c-inset-2);color:var(--c-accent-ink);font-family:var(--font-mono);font-size:.82em;overflow-wrap:anywhere}
.main-content .home-hero kbd{background:rgba(0,0,0,.35);border-color:rgba(255,240,200,.35);color:#fff7e2}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.home-section, .home-flow{background:var(--c-surface-hi);border:1px solid var(--border-gold);border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px rgba(35,24,12,.08)}
.home-section{margin-bottom:1rem}
.home-section-archis{background:linear-gradient(180deg,var(--c-surface-hi),var(--c-inset))}
.home-section-head{display:block;max-width:920px;margin-bottom:1.15rem}
.home-section-tag{display:inline-flex;align-items:center;margin-bottom:.55rem;padding:.22rem .58rem;border:1px solid var(--c-line);border-radius:999px;background:var(--c-inset);color:var(--gold-dark);font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.home-section h2, .home-flow h2{font-family:'Cinzel',serif;font-size:1.36rem;color:var(--gold-dark);margin:0;letter-spacing:.01em;font-weight:700;line-height:1.18}
.home-section-head p, .home-flow p{max-width:760px;margin:.55rem 0 0;color:var(--text-muted);font-size:.92rem;line-height:1.6}
.home-section-head p strong, .home-flow p strong{color:var(--c-text);font-weight:600}

/* Tarjetas */
.home-primary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.home-primary-grid .feature-card{min-height:230px}
.feature-card{display:flex;flex-direction:column;min-height:190px;padding:1rem;border:1px solid var(--c-line);border-radius:8px;background:var(--c-surface);color:var(--text);text-decoration:none;box-shadow:0 2px 8px rgba(35,24,12,.06);transition:all .16s;min-width:0}
.feature-card:hover{transform:translateY(-2px);border-color:var(--border-gold);background:var(--c-surface-hi);box-shadow:0 8px 18px rgba(35,24,12,.10)}
.home-route-card{position:relative;overflow:hidden;padding:1.15rem;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--route-accent,var(--c-accent)) 16%,transparent),transparent 62%),var(--c-surface)}
.home-route-card::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--route-accent,#b89a50)}
.home-route-card::after{content:'';position:absolute;right:-28px;bottom:-30px;width:96px;height:96px;border:1px solid color-mix(in srgb,var(--route-accent,var(--c-line-accent)) 34%,transparent);border-radius:8px;transform:rotate(12deg);background:color-mix(in srgb,var(--route-accent,#b89a50) 10%,transparent);pointer-events:none}
.home-route-card .feature-icon{background:color-mix(in srgb,var(--route-accent,#b89a50) 16%,var(--c-surface));border-color:color-mix(in srgb,var(--route-accent,var(--c-line-accent)) 58%,var(--c-line));color:var(--route-accent-dark,var(--c-accent-ink))}
.home-route-card p{position:relative;z-index:1}
.feature-action{position:relative;z-index:1;margin-top:auto;padding-top:1rem;color:var(--route-accent-dark,var(--c-accent-ink));font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.feature-action::after{content:'>';display:inline-block;margin-left:.38rem;transition:transform .16s}
.home-route-card:hover .feature-action::after{transform:translateX(3px)}
.route-archis{--route-accent:#9a6414;--route-accent-dark:#623907}
.route-map{--route-accent:#6f7f28;--route-accent-dark:#46561a}
.route-harvest{--route-accent:#9d4f2e;--route-accent-dark:#66301d}
.route-trades{--route-accent:#2f6d82;--route-accent-dark:#23505f}
.feature-icon{width:36px;height:36px;flex:0 0 36px;margin-bottom:.8rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-gold);border-radius:8px;background:var(--c-inset);color:var(--gold-dark)}
.feature-icon svg{width:18px;height:18px;stroke-width:2.2}
.feature-card h3{font-family:var(--font-ui);font-size:1rem;color:var(--c-accent-ink);margin:0 0 .45rem;font-weight:800;line-height:1.25}
.home-route-card h3{color:var(--route-accent-dark,var(--c-accent-ink))}
.feature-card p{margin:0;color:var(--text-muted);font-size:.86rem;line-height:1.5}

/* ── App de escritorio ──────────────────────────────────────────────────── */
.home-app{border-color:var(--c-line-accent)}
.home-app-intro{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:1.6rem;align-items:center;margin-bottom:1.3rem}
.home-app-copy{min-width:0}
.home-app-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.8rem}
.home-app-head img{width:56px;height:56px;flex:0 0 56px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.home-app-head .home-section-tag{margin-bottom:.35rem}
.home-app-copy > p{max-width:680px;margin:0 0 .6rem;color:var(--c-text-2);font-size:.95rem;line-height:1.62}
.home-app-copy > p.home-app-req{margin:.9rem 0 0;font-size:.82rem;color:var(--c-text-3)}
.home-app-copy > p.home-app-req strong{color:var(--c-text-2);font-weight:600}
.home-app-copy .home-actions{margin-top:1rem}
.home-app-shot{margin:0;justify-self:center}
.home-app-shot img{display:block;width:210px;height:auto;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px var(--c-line-accent);transform:rotate(1.5deg)}
.home-app-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.home-app-group{min-width:0;padding:1rem;border:1px solid var(--c-line);border-radius:var(--r-inner);background:var(--c-surface)}
.home-app-group .feature-icon{width:32px;height:32px;flex-basis:32px;margin-bottom:.6rem;background:var(--c-accent-soft);border-color:var(--c-line-accent);color:var(--c-accent-ink)}
.home-app-group .feature-icon svg{width:16px;height:16px}
.home-app-group h3{margin:0 0 .5rem;font-family:var(--font-ui);font-size:.98rem;font-weight:700;color:var(--c-text);line-height:1.25}
.home-app-group ul, .app-tab-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.42rem}
.home-app-group li, .app-tab-card li{position:relative;padding-left:.95rem;color:var(--c-text-2);font-size:.85rem;line-height:1.5}
.home-app-group li::before, .app-tab-card li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--c-accent)}
.home-app-group li strong, .app-tab-card li strong{color:var(--c-text);font-weight:600}
.home-app-extra{display:flex;align-items:center;gap:.5rem;margin:1rem 0 0;color:var(--c-text-2);font-size:.86rem;line-height:1.5}
.home-app-extra svg{width:16px;height:16px;flex-shrink:0;color:var(--c-accent-ink)}

/* ── Cómo se conectan la web y la app ───────────────────────────────────── */
.home-link-steps{counter-reset:paso;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.home-link-steps li{counter-increment:paso;position:relative;min-width:0;display:flex;flex-direction:column;gap:.3rem;padding:2.9rem 1rem 1rem;border:1px solid var(--c-line);border-radius:var(--r-inner);background:var(--c-surface)}
.home-link-steps li::before{content:counter(paso);position:absolute;left:1rem;top:.95rem;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c-accent);color:var(--c-on-accent);font-size:.8rem;font-weight:800}
.home-link-steps li:not(:last-child)::after{content:'';position:absolute;left:calc(1rem + 34px);right:-.8rem;top:calc(.95rem + 13px);height:1px;background:linear-gradient(90deg,var(--c-line-accent),transparent)}
.home-link-steps strong{color:var(--c-text);font-size:.95rem;font-weight:700}
.home-link-steps span{color:var(--c-text-2);font-size:.85rem;line-height:1.5}
.home-link-steps em, .home-section em{font-style:normal;color:var(--c-text);font-weight:600}
.home-link .home-actions{margin-top:1.1rem}

/* ── Con tu cuenta ──────────────────────────────────────────────────────── */
.home-flow{display:grid;grid-template-columns:minmax(0,.9fr) 1.1fr;gap:1.4rem;align-items:center;margin-top:1rem;background:linear-gradient(135deg,var(--c-surface-hi) 0%,var(--c-inset) 55%,var(--c-inset-2) 100%)}
.flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
.flow-step{min-height:88px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.4rem;padding:.8rem;border:1px solid color-mix(in srgb,var(--step-accent,var(--c-line-accent)) 42%,var(--c-line));border-radius:8px;background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--step-accent,var(--c-accent)) 16%,transparent),transparent 65%),var(--c-surface);color:var(--step-dark,var(--c-accent-ink));font-size:.86rem;font-weight:800;text-decoration:none;transition:all .16s}
.flow-step:hover{transform:translateY(-2px);border-color:var(--step-accent,var(--c-line-accent));background:var(--c-surface-hi);color:var(--step-dark,var(--c-accent-ink));box-shadow:0 8px 18px rgba(35,24,12,.10)}
.flow-step span{width:26px;height:26px;flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--step-accent,#b89a50);color:#fffaf0;font-size:.78rem;font-weight:900;line-height:1}
.flow-step span svg{width:13px;height:13px;stroke-width:2.5;flex-shrink:0}
.progress-main{--step-accent:#a98222;--step-dark:#68430d}
.progress-archis{--step-accent:#6f7f28;--step-dark:#46561a}
.progress-trades{--step-accent:#2f6d82;--step-dark:#23505f}

/* ── Pantallas medianas y móviles ───────────────────────────────────────── */
@media(max-width:1100px){
  .home-hero{grid-template-columns:1fr;padding:2rem}
  .home-hero-panel{max-width:520px}
  .home-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-app-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-link-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-link-steps li::after{display:none}
  .home-flow{grid-template-columns:1fr}
}
@media(max-width:700px){
  .home-hero{padding:1.35rem;min-height:auto}
  .home-hero h1{font-size:1.8rem}
  .home-section{padding:1.05rem}
  .home-primary-grid, .flow-steps, .home-app-groups{grid-template-columns:1fr}
  .home-primary-grid .feature-card, .feature-card{min-height:0}
  .home-app-intro{grid-template-columns:1fr}
  .home-app-shot{display:none}
}
@media(max-width:760px){
  .home-hero{margin-bottom:1rem;background-position:center,center top,center}
  .home-hero-panel{width:100%;max-width:none}
  .home-actions{gap:.55rem}
  .home-btn{flex:1 1 180px;min-width:0;text-align:center}
  .home-section, .home-flow{border-radius:10px}
}
@media(max-width:560px){
  .home-hero{padding:1rem;border-radius:12px;gap:1rem}
  .home-kicker{width:100%;justify-content:center;text-align:center;font-size:.62rem;line-height:1.2}
  .home-hero h1{text-align:center;font-size:1.65rem;line-height:1.05}
  .home-hero p{text-align:center;font-size:.9rem;line-height:1.5}
  .home-actions{flex-direction:column;margin-top:1rem}
  .home-btn{width:100%;flex-basis:auto}
  .home-hero-panel{padding:.65rem}
  .home-panel-row{padding:.62rem .65rem}
  .home-section, .home-flow{padding:.9rem}
  .home-section-tag{font-size:.6rem;line-height:1.1}
  .home-section h2, .home-flow h2{font-size:1.16rem;line-height:1.18}
  .home-section-head p, .home-flow p{font-size:.86rem;line-height:1.48}
  .feature-card{padding:.9rem}
  .feature-icon{width:32px;height:32px;flex-basis:32px;margin-bottom:.65rem}
  .flow-step{min-height:76px}
  .home-link-steps{grid-template-columns:1fr}
  .home-app-head img{width:44px;height:44px;flex-basis:44px}
}
@media(max-width:380px){
  .home-hero{padding:.85rem}
  .home-hero h1{font-size:1.48rem}
  .home-hero p{font-size:.84rem}
  .home-section, .home-flow{padding:.75rem}
  .feature-card h3{font-size:.92rem}
  .feature-card p, .flow-step{font-size:.8rem}
}

/* --------------------------------------------------------------------------
   Tema moderno (tokens en theme/tokens.css)
   -------------------------------------------------------------------------- */
/* Por defecto (sin clase de ruta) toman el acento */
html[data-theme] :is(.home-route-card, .flow-step) {
  --route-accent: var(--c-accent); --route-accent-dark: var(--c-accent-ink);
  --step-accent: var(--c-accent); --step-dark: var(--c-accent-ink);
}
/* Cada ruta conserva su color con los tokens de estado: mapa verde, cosecha rojo cálido, intercambios azul */
html[data-theme] .route-archis   { --route-accent: var(--c-accent); --route-accent-dark: var(--c-accent-ink); }
html[data-theme] .route-map      { --route-accent: var(--c-green); --route-accent-dark: color-mix(in srgb, var(--c-green) 78%, var(--c-text)); }
html[data-theme] .route-harvest  { --route-accent: var(--c-red); --route-accent-dark: color-mix(in srgb, var(--c-red) 78%, var(--c-text)); }
html[data-theme] .route-trades   { --route-accent: var(--c-blue); --route-accent-dark: color-mix(in srgb, var(--c-blue) 78%, var(--c-text)); }
html[data-theme] .progress-main   { --step-accent: var(--c-accent); --step-dark: var(--c-accent-ink); }
html[data-theme] .progress-archis { --step-accent: var(--c-green); --step-dark: color-mix(in srgb, var(--c-green) 78%, var(--c-text)); }
html[data-theme] .progress-trades { --step-accent: var(--c-blue); --step-dark: color-mix(in srgb, var(--c-blue) 78%, var(--c-text)); }
html[data-theme] .flow-step span { color: var(--c-on-accent); }
html[data-theme] .feature-action { letter-spacing: .02em; text-transform: none; font-size: .82rem; font-weight: 700; }
html[data-theme] .home-route-card::before { height: 3px; }

/* Etiqueta sobre el banner: cristal neutro como los botones del banner */
html[data-theme] .home-kicker {
  border-color: rgba(255, 240, 200, .35) !important;
  background: rgba(0, 0, 0, .34) !important;
  color: #fff7e2 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Panel del banner: cristal oscuro con borde neutro */
html[data-theme] .home-hero-panel {
  background: var(--c-glass) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--c-shadow) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
html[data-theme] .home-panel-row { border-bottom-color: var(--c-line) !important; }
html[data-theme] .home-panel-row span { color: var(--c-accent-ink); }
html[data-theme] .feature-card { box-shadow: none; }
html[data-theme] .feature-icon { border-color: var(--c-line-accent); }
html[data-theme] .home-route-card::after { border-radius: var(--r-inner); }
/* La sección de la app destaca con el borde del acento (cards.css pone el borde neutro a todas) */
html[data-theme] .page-layout .home-section.home-app { border-color: var(--c-line-accent) !important; }