/* =========================================================
   Aprendemas – styles.css (No external image dependencies)
   ========================================================= */

/* ------------ Design Tokens ------------ */
:root {
  --primary-purple:   #673AB7;
  --accent-purple:    #8E24AA;
  --deep-purple:      #4527A0;
  --gold:             #FFD54F;

  --accent-teal:      #28C6C6;
  --accent-blue:      #4E8CFA;
  --accent-pink:      #FF6EB5;
  --accent-orange:    #FF9E42;

  --bg-white:         #FDFBF7;
  --pure-white:       #FFFFFF;
  --subtle-purple:    #F5F0FA;

  --text-primary:     #2F2F35;
  --text-secondary:   #666666;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.15);
  --shadow-lg: 0 12px 36px -6px rgba(32,16,72,.35);

  --ease-smooth: cubic-bezier(.4,.16,.25,.98);
  --trans-fast: .25s var(--ease-smooth);
  --trans-med:  .55s var(--ease-smooth);

  /* Tipografía (patch escalado) */
  --font-h1: clamp(1.9rem, 4.2vw, 2.55rem);
  --font-h2: clamp(1.35rem, 3.2vw, 1.95rem);
  --font-h3: 1.05rem;
  --font-body: 0.95rem;
}

/* Dark Mode Overrides */
html[data-theme="dark"] {
  --bg-white: #1F1E24;
  --pure-white: #2A2831;
  --subtle-purple: #322845;
  --text-primary: #F4F3F7;
  --text-secondary: #B9B6C5;
  --shadow-lg: 0 18px 44px -8px rgba(0,0,0,.55);
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

/* ------------ Base ------------ */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: var(--font-body);
  background: linear-gradient(120deg,var(--subtle-purple),var(--bg-white) 60%) fixed;
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: var(--accent-purple); text-decoration:none; }
a:hover { color: var(--primary-purple); }
::selection { background: var(--accent-purple); color:#fff; }

/* Scroll anchor offset */
section[id], .courses, .about-us, .contact { scroll-margin-top: 110px; }

/* Focus */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Container */
.container { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ------------ Header & Nav ------------ */
.site-header {
  position:sticky; top:0; z-index:1000;
  background: var(--primary-purple);
  background-image: radial-gradient(circle at 20% 30%,rgba(255,213,79,.35),rgba(255,213,79,0) 55%);
  padding:1rem 0 1.2rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

.header-content {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.logo {
  max-height:160px;
  width:auto;
  transform-origin:center;
  transition: transform var(--trans-fast), filter var(--trans-fast);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.logo:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}

.nav-main { display:flex; align-items:flex-start; gap:.75rem; }

.nav-links, .dropdown-content { list-style:none; margin:0; padding:0; }

.nav-links {
  display:flex;
  gap:1.2rem;
  align-items:center;
  flex-wrap:wrap;
}

.nav-links a,
.dropdown-trigger {
  color:#FFF;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.4px;
  position:relative;
  padding:.35rem .2rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition: color var(--trans-fast);
}

.nav-links a::after,
.dropdown-trigger::after {
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--gold);
  transition: width var(--trans-fast);
  border-radius:2px;
}
.nav-links a:hover::after,
.dropdown-trigger:hover::after,
.nav-links a.active::after {
  width:100%;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.4rem;
}

/* Icon Buttons */
.btn-icon {
  background: linear-gradient(90deg,#FFD54F,#FFB347 60%,#FFD54F);
  background-size: 200% 100%;
  border:none;
  color: var(--primary-purple);
  font-weight:600;
  width: 42px; height:42px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
  position:relative;
  transition: background-position var(--trans-med), transform var(--trans-fast), box-shadow var(--trans-fast);
}
.btn-icon:hover {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.btn-icon .icon-label {
  position:absolute;
  inset:auto auto -0.85rem 50%;
  transform:translateX(-50%);
  font-size:.5rem;
  font-weight:700;
  text-transform:uppercase;
  background:rgba(0,0,0,.45);
  color:#fff;
  padding:2px 5px;
  border-radius: 8px;
  letter-spacing:.5px;
  pointer-events:none;
}

.nav-toggle .icon-close { display:none; }
.nav-toggle.active .icon-open { display:none; }
.nav-toggle.active .icon-close { display:block; }

/* Dropdown */
.dropdown { position:relative; }
.dropdown-trigger {
  background:transparent; border:none; cursor:pointer; font:inherit;
}
.dropdown-content {
  position:absolute;
  top:100%; left:0;
  background: var(--accent-purple);
  border-radius: var(--radius-lg);
  padding:.5rem 0;
  min-width:210px;
  box-shadow: var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transform: translateY(-10px);
  transition: var(--trans-fast);
  z-index: 1001;
  backdrop-filter: blur(6px);
}
.dropdown:hover .dropdown-content,
.dropdown-content.open {
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-content li a {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem;
  color:#FFF;
  font-weight:500;
  font-size:.85rem;
  transition: background var(--trans-fast), padding-left var(--trans-fast);
}
.dropdown-content li a:hover {
  background: rgba(255,255,255,.12);
  padding-left:1.15rem;
  border-radius:8px;
}

/* Mobile Nav */
@media (max-width: 820px){
  .nav-links {
    display:none;
    flex-direction:column;
    background: linear-gradient(160deg,#673AB7,#4527A0 70%);
    padding:1rem 1.1rem 1.3rem;
    border-radius: 20px;
    position:absolute;
    right:1rem; top:100%;
    box-shadow: var(--shadow-lg);
    width: min(90vw, 320px);
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-purple) transparent;
    animation: menuFade .4s var(--ease-smooth);
    z-index: 2000;
  }
  .nav-links.open { display:flex; }
  @keyframes menuFade {
    from { opacity:0; transform: translateY(-10px) scale(.96); }
    to   { opacity:1; transform: translateY(0) scale(1); }
  }
  body.menu-open { overflow:hidden; }

  .dropdown-content {
    position:static;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    box-shadow:none;
    background: linear-gradient(160deg,#8E24AA,#673AB7);
    margin-top:.3rem;
    padding:.2rem 0 .4rem;
    border-radius:16px;
  }
  .dropdown-trigger::after { display:none; }
}

/* ------------ Hero ------------ */
.hero {
  position:relative;
  min-height: 340px;
  display:flex;
  align-items:center;
  background: linear-gradient(135deg,#8E24AA 0%,#673AB7 55%,#4527A0 100%);
  overflow:hidden;
  color:#FFF;
  padding: 2.2rem 0 2.6rem;
}

.hero::before,
.hero::after {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,213,79,.35), transparent 60%),  
    radial-gradient(circle at 78% 70%, rgba(255,255,255,.16), transparent 55%);
  mix-blend-mode: screen;  
  animation: heroGlow 14s linear infinite alternate;  
  pointer-events:none;  
}
.hero::after {
  animation-duration: 18s;
  animation-direction: alternate-reverse;
  opacity:.6;
  filter: blur(4px);
}
@keyframes heroGlow {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-10px,0) scale(1.02); }
  100% { transform: translate3d(0,8px,0) scale(1.01); }
}
.hero-content { text-align:center; width:100%; position:relative; z-index:1; }
.hero-content h1 {
  font-family:'Montserrat',sans-serif;
  font-size: var(--font-h1);
  line-height:1.15;
  letter-spacing:-.25px;
  margin:0 auto .8rem;
  max-width:760px;
  animation: fadeDown .8s var(--ease-smooth);
}
@keyframes fadeDown {
  from { opacity:0; transform: translateY(-12px); }
  to { opacity:1; transform: translateY(0); }
}
.subhero {
  font-size:.85rem;
  letter-spacing:.4px;
  opacity:.92;
  animation: fadeUp .9s .25s var(--ease-smooth) forwards;
  transform:translateY(10px); opacity:0;
}
@keyframes fadeUp {
  to { transform:translateY(0); opacity:1; }
}

/* ------------ Buttons ------------ */
.btn-cta {
  display:inline-block;
  margin-top:1.3rem;
  padding:.85rem 1.9rem;
  font-weight:700;
  letter-spacing:.5px;
  font-size:.88rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,#FFD54F,#FFB347 60%,#FFD54F);
  background-size:220% 100%;
  color: var(--primary-purple);
  box-shadow: 0 6px 20px -4px rgba(0,0,0,.35);
  transition: background-position var(--trans-med), transform var(--trans-fast), box-shadow var(--trans-fast);
  position:relative;
  overflow:hidden;
}
.btn-cta::after {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 55%);
  opacity:0;
  transition: opacity var(--trans-fast);
  mix-blend-mode: overlay;
}
.btn-cta:hover {
  background-position:100% 0;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.btn-cta:hover::after { opacity:.65; }

/* Floating Buttons */
.btn-float {
  position:fixed;
  bottom:1rem;
  right:1rem;
  width:46px; height:46px;
  border-radius:50%;
  border:none;
  background: linear-gradient(140deg,var(--gold),#FFC15A);
  color:var(--primary-purple);
  font-size:1.05rem;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  z-index:1200;
}
.btn-float:hover { transform:scale(1.12); }
#home-button { right:4rem; }

/* ------------ Reveal Animation ------------ */
.reveal {
  opacity:0;
  transform: translateY(26px) scale(.98);
  transition: opacity .75s var(--ease-smooth), transform .75s var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity:1;
  transform: translateY(0) scale(1);
}

/* ------------ Courses Section (with background collage) ------------ */
.courses {
/* ------------ Courses Section (with background collage) ------------ */
.courses {
  padding: 3.2rem 0;
  position: relative;

  /* gradient overlay atop your /images/background.png */
  background:
    linear-gradient(180deg, rgba(245,240,250,.85), rgba(253,251,247,.9)),
    url('/images/background.png') no-repeat center center;
  background-size: cover;

  border-radius: 24px;
  margin-top: 2rem;
}

}

.courses h2 {
  font-family:'Montserrat',sans-serif;
  font-size: var(--font-h2);
  text-align:center;
  letter-spacing:-.3px;
  margin-bottom:2rem;
  position:relative;
}
.courses h2::after {
  content:'';
  display:block;
  width:68px; height:4px;
  margin:1rem auto 0;
  background: linear-gradient(90deg,var(--accent-purple),var(--primary-purple));
  border-radius:2px;
}

.course-grid {
  display:grid;
  gap:1.8rem;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}

.course-card {
  background: var(--pure-white);
  border-radius: 14px;
  padding: 1.35rem 1.1rem 1.5rem;
  position:relative;
  box-shadow: var(--shadow-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  isolation:isolate;
  border:1px solid rgba(103,58,183,.15);
}
.course-card::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(140deg,rgba(142,36,170,.12),rgba(103,58,183,.12));
  opacity:0;
  transition: opacity var(--trans-med);
  z-index:0;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.course-card:hover::before { opacity:1; }

.course-icon {
  width:56px; height:56px;
  margin-bottom:.75rem;
  display:flex; align-items:center; justify-content:center;
}
.course-icon .ci { width:100%; height:100%; }
.course-card h3 {
  font-size: .98rem;
  letter-spacing:.4px;
  color: var(--accent-purple);
  margin-bottom:.5rem;
  z-index:1;
}
.course-card p {
  font-size:.83rem;
  color: var(--text-secondary);
  line-height:1.45;
  margin-bottom:.8rem;
  z-index:1;
}
.tags {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:.7rem;
}
.tags span {
  background: linear-gradient(90deg,#FFD54F,#FFB347);
  color:#43206E;
  font-size:.6rem;
  font-weight:700;
  padding:.25rem .55rem;
  border-radius: var(--radius-pill);
  letter-spacing:.6px;
  text-transform:uppercase;
}

.btn-link {
  align-self:center;
  font-weight:600;
  font-size:.75rem;
  color: var(--accent-purple);
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
  letter-spacing:.5px;
  z-index:1;
}
.btn-link::after {
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background: currentColor;
  transition: width var(--trans-fast);
  border-radius:2px;
}
.btn-link:hover::after { width:100%; }

.price-info {
  text-align:center;
  font-size: .8rem;
  color: var(--text-secondary);
  margin-top:1.8rem;
}

/* Color accents (opcional por si quieres variar) */
.course-card.color-2 { border-color:rgba(78,140,250,.30); }
.course-card.color-3 { border-color:rgba(255,110,181,.30); }
.course-card.color-4 { border-color:rgba(40,198,198,.30); }
.course-card.color-5 { border-color:rgba(255,158,66,.35); }

/* ------------ About Us ------------ */
.about-us {
  padding:2.6rem 0 2.8rem;
}
.about-us h2 {
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-size:var(--font-h2);
  margin-bottom:1.4rem;
}
.about-us p {
  max-width: 760px;
  margin: 0 auto;
  font-size:.95rem;
  line-height:1.55;
  color: var(--text-secondary);
  text-align:center;
}

/* ------------ Contact ------------ */
.contact {
  padding:2.6rem 0 3rem;
}
.contact h2 {
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-size:var(--font-h2);
  margin-bottom:1.4rem;
}

.contact-form {
  display:grid;
  gap:1rem;
  max-width:640px;
  margin:0 auto;
  background: linear-gradient(135deg,rgba(142,36,170,.08),rgba(103,58,183,.08));
  padding:1.6rem 1.4rem 1.9rem;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
}
.contact-form label {
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.4px;
  text-transform:uppercase;
  color: var(--accent-purple);
}
.contact-form input,
.contact-form textarea {
  width:100%;
  padding:.7rem .85rem;
  border:2px solid #E4DFEE;
  border-radius: var(--radius-md);
  background: var(--pure-white);
  font: inherit;
  color: var(--text-primary);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea {
  border:2px solid #564B6D;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 4px rgba(142,36,170,.20);
  outline:none;
}
.contact-form textarea { resize: vertical; min-height:140px; }

/* ------------ Footer ------------ */
.site-footer {
  background: var(--deep-purple);
  color:#FFF;
  text-align:center;
  padding:2.8rem 0 2.2rem;
  margin-top:2.4rem;
  position:relative;
  box-shadow: 0 -4px 18px -6px rgba(0,0,0,.4);
}
.site-footer p {
  font-size:.7rem;
  letter-spacing:.6px;
  opacity:.85;
}
.site-footer a {
  color: var(--gold);
  font-weight:600;
}
.site-footer a:hover { text-decoration:underline; }

/* ------------ Media Queries ------------ */
@media (max-width: 1040px){
  .logo { max-height:150px; }
}
@media (max-width: 900px){
  .logo { max-height:135px; }
}
@media (max-width: 760px){
  .hero { min-height:300px; padding:1.9rem 0 2rem; }
  .course-grid { gap:1.4rem; }
  .course-card { padding:1.15rem .95rem 1.3rem; }
  .contact-form { padding:1.4rem 1.2rem 1.6rem; }
}
@media (max-width: 520px){
  .logo { max-height:110px; }
  .hero { min-height:270px; padding:1.6rem 0 1.7rem; }
  .course-card { padding:1.05rem .9rem 1.15rem; }
  .course-icon { width:50px; height:50px; }
  .btn-cta { padding:.7rem 1.45rem; font-size:.8rem; }
  .contact-form { padding:1.25rem 1rem 1.4rem; }
}

/* Extra compact <400px */
@media (max-width: 400px){
  :root {
    --font-h1: clamp(1.7rem, 6vw, 2.1rem);
    --font-h2: clamp(1.2rem, 5vw, 1.55rem);
  }
  .hero { min-height:250px; padding:1.3rem 0 1.5rem; }
  .logo { max-height:95px; }
  .btn-cta { padding:.65rem 1.2rem; font-size:.75rem; }
  .course-card h3 { font-size:.9rem; }
  .course-card p { font-size:.74rem; }
  .contact-form { padding:1.1rem .9rem 1.3rem; }
}

/* ------------ Utilities ------------ */
.text-center { text-align:center; }
.hide { display:none !important; }