:root{
  --bg:#ffffff; --bg2:#faf8f2; --card:#ffffff; --card2:#f5f2e8;
  --navy:#2c3154; --navy-soft:#565c86;
  --accent:#e8bc4e;  /* dorado - cabello */
  --accent2:#3fae74; /* verde - cola */
  --accent3:#d9555c; /* rojo - corbata/ojos */
  --brown:#a8682f;   /* café - zapatos */
  --text:#252a45; --muted:#6d7296;
  --border:#e9e5d8; --btn-text:#241a08;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; -webkit-text-size-adjust:100%;
}

/* ---------- Animaciones ---------- */
@keyframes fadeInUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
@keyframes float1{0%,100%{transform:translate(0,0)} 50%{transform:translate(26px,18px)}}
@keyframes float2{0%,100%{transform:translate(0,0)} 50%{transform:translate(-24px,-14px)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)} 50%{box-shadow:0 0 14px currentColor}}
@keyframes shimmer{0%{background-position:-200px 0} 100%{background-position:200px 0}}
@keyframes bounceIn{0%{transform:scale(.9); opacity:0} 60%{transform:scale(1.02); opacity:1} 100%{transform:scale(1)}}

/* ---------- Header ---------- */
header{
  padding:18px 6vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); z-index:10;
}
.logo{font-weight:800; font-size:1.3rem; display:flex; align-items:center; gap:8px; color:var(--navy); transition:transform .2s ease; cursor:default}
.logo:hover{transform:scale(1.04)}
.logo span{color:var(--accent2)}
nav a{color:var(--navy-soft); text-decoration:none; margin-left:22px; font-size:.9rem; position:relative; padding-bottom:3px; transition:color .2s ease}
nav a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--accent); transition:width .25s ease}
nav a:hover{color:var(--navy)}
nav a:hover::after{width:100%}

/* ---------- Hero ---------- */
.hero{
  padding:64px 6vw 50px; text-align:center; position:relative; overflow:hidden; background:var(--bg);
}
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; filter:blur(70px); opacity:.28; z-index:0; pointer-events:none;
}
.hero::before{width:340px; height:340px; background:var(--accent); top:-120px; left:-90px; animation:float1 9s ease-in-out infinite}
.hero::after{width:300px; height:300px; background:var(--accent2); bottom:-110px; right:-70px; animation:float2 11s ease-in-out infinite}
.hero > *{position:relative; z-index:1}
.hero h1{font-size:2.4rem; margin:0 0 14px; max-width:780px; margin-inline:auto; color:var(--navy); animation:fadeInUp .6s ease both}
.hero h1 em{font-style:normal; color:var(--accent2)}
.hero p{color:var(--muted); max-width:600px; margin:0 auto 28px; font-size:1rem; animation:fadeInUp .6s ease .1s both}
.badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(63,174,116,.10); border:1px solid transparent;
  padding:6px 14px; border-radius:20px; font-size:.8rem; color:var(--accent2); margin-bottom:18px;
  animation:fadeInUp .6s ease both, pulseGlow 3s ease-in-out infinite 1s;
}
.badge-alert{color:var(--accent3); background:rgba(217,85,92,.10)}

/* ---------- Buscador ---------- */
.search-box{
  max-width:680px; margin:0 auto; background:var(--card); border:1px solid var(--border); box-shadow:0 10px 30px rgba(44,49,84,.06);
  border-radius:16px; padding:16px; display:grid; grid-template-columns:1fr auto; gap:12px;
  animation:fadeInUp .6s ease .15s both;
}
@media (max-width:640px){ .search-box{grid-template-columns:1fr} }
.search-field-wrap{position:relative; text-align:left}
select, input, textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--card2); color:var(--text); font-size:.95rem; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease;
}
select:focus, input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,188,78,.22)}
.suggestions-box{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card);
  border:1px solid var(--border); border-radius:12px; z-index:30; box-shadow:0 14px 34px rgba(44,49,84,.14);
  visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s; max-height:260px; overflow-y:auto; text-align:left;
}
.suggestions-box.show{visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto}
.suggestion-item{padding:10px 14px; cursor:pointer; font-size:.88rem; transition:background .15s ease}
.suggestion-item:hover{background:var(--card2); color:var(--navy)}

/* ---------- Botones ---------- */
.btn{
  background:linear-gradient(135deg,var(--accent),#f3d98a); color:var(--btn-text); border:none;
  padding:12px 22px; border-radius:10px; font-weight:700; cursor:pointer; font-size:.95rem;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(232,188,78,.4)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-outline{
  background:transparent; border:1.5px solid var(--accent3); color:var(--accent3);
  padding:12px 22px; border-radius:10px; font-weight:700; cursor:pointer; font-size:.95rem;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-outline:hover{background:var(--accent3); color:#fff; transform:translateY(-2px)}

/* ---------- Secciones ---------- */
section{padding:56px 6vw}
section:nth-of-type(odd){background:var(--bg2)}
.section-title{font-size:1.5rem; margin-bottom:6px; color:var(--navy)}
.section-sub{color:var(--muted); margin-bottom:26px; max-width:620px}

.stats{display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:30px}
.stat{padding:0 30px; border-right:1px solid var(--border); animation:fadeInUp .6s ease .2s both}
.stat:last-child{border-right:none}
.stat b{display:block; font-size:1.7rem; color:var(--navy)}
.stat span{color:var(--muted); font-size:.8rem}
@media (max-width:520px){
  .stat{border-right:none; border-bottom:1px solid var(--border); padding:10px 24px; width:100%; max-width:220px}
}

/* ---------- Tarjetas de materias ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px;
  cursor:pointer; opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease, border-color .2s ease, box-shadow .2s ease;
}
.card.in-view{opacity:1; transform:translateY(0)}
.card:hover{border-color:var(--accent); box-shadow:0 12px 26px rgba(44,49,84,.10); transform:translateY(-4px)}
.card.in-view:hover{transform:translateY(-4px)}
.card h3{margin:0; font-size:1rem; color:var(--navy); font-weight:700}
.card-cta{display:inline-flex; align-items:center; gap:4px; color:var(--brown); font-size:.8rem; font-weight:600; margin-top:12px}
.card-cta .arrow{transition:transform .2s ease}
.card:hover .card-cta .arrow{transform:translateX(4px)}
.empty-note{
  grid-column:1/-1; text-align:center; color:var(--muted); padding:30px; border:1px dashed var(--border);
  border-radius:14px;
}
#loadMoreBtn{display:block; margin:30px auto 0}

/* ---------- CTA panels ---------- */
.cta-split{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:800px){ .cta-split{grid-template-columns:1fr} }
.panel{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px;
  box-shadow:0 10px 30px rgba(44,49,84,.05); transition:box-shadow .25s ease, transform .25s ease;
}
.panel:hover{box-shadow:0 16px 40px rgba(44,49,84,.09); transform:translateY(-2px)}
.panel h3{margin-top:0; color:var(--navy)}
form{display:flex; flex-direction:column; gap:12px; margin-top:16px}

footer{padding:26px 6vw; text-align:center; color:var(--muted); font-size:.85rem; border-top:1px solid var(--border)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(150%);
  background:var(--navy); color:#fff; padding:13px 22px; border-radius:10px; font-weight:600;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; z-index:80; max-width:90vw; text-align:center;
  box-shadow:0 14px 30px rgba(44,49,84,.25);
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(37,42,69,.45); backdrop-filter:blur(2px); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:16px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease;
}
.modal-overlay.show{opacity:1; visibility:visible; pointer-events:auto}
.modal{
  background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:26px;
  max-width:440px; width:100%; position:relative; max-height:88vh; overflow-y:auto;
  transform:scale(.93) translateY(10px); transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 24px 60px rgba(37,42,69,.28);
}
.modal-overlay.show .modal{transform:scale(1) translateY(0)}
.modal h3{margin:0 0 8px; padding-right:20px; color:var(--navy)}
.modal-desc{color:var(--muted); font-size:.87rem; margin:0 0 14px}
.modal-instruction{color:var(--accent2); font-size:.8rem; font-weight:600; margin:0 0 14px}
.modal-close{
  position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted);
  font-size:1.1rem; cursor:pointer; transition:transform .2s ease, color .2s ease;
}
.modal-close:hover{color:var(--accent3); transform:rotate(90deg)}

.modal-tabs{display:flex; gap:6px; background:var(--card2); padding:4px; border-radius:12px; margin-bottom:16px}
.modal-tab{flex:1; text-align:center; padding:9px 8px; border-radius:9px; font-size:.82rem; font-weight:700;
  cursor:pointer; color:var(--muted); transition:.2s ease; user-select:none}
.modal-tab.active{background:var(--accent); color:var(--btn-text)}
.tab-panel{display:none}
.tab-panel.active{display:block; animation:fadeInUp .3s ease both}

.pricing-options{display:flex; flex-direction:column; gap:10px}
.price-card{
  border:1.5px solid var(--border); background:var(--card2); border-radius:12px; padding:12px 14px;
  cursor:pointer; display:block; position:relative; transition:.2s ease;
}
.price-card.static{cursor:default}
.price-card input{position:absolute; opacity:0; pointer-events:none}
.price-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px}
.price-amount{font-weight:800; font-size:1.1rem; color:var(--navy)}
.price-unit{font-size:.72rem; color:var(--muted)}
.price-card p{margin:0; font-size:.78rem; color:var(--muted)}
.price-card.selected{border-color:var(--accent); background:rgba(232,188,78,.14); transform:scale(1.015)}
.artifact-note{color:var(--muted); font-size:.85rem; margin:0 0 14px}

@media (max-width:480px){
  header{padding:14px 4vw}
  nav a{margin-left:12px; font-size:.82rem}
  .hero{padding:46px 5vw 34px}
  .hero h1{font-size:1.85rem}
  .hero p{font-size:.92rem}
  section{padding:36px 5vw}
  .modal{padding:20px}
}