/* ============================================
   ACTÍVATE PRO — Design Tokens
   Cambiar estas variables rebrandea toda la web.
   ============================================ */
:root {
  --color-bg:         #FAFAF7;
  --color-bg-alt:     #F2F0EB;
  --color-text:       #1A1A2E;
  --color-text-light: #6B6B7B;
  --color-accent:     #2D6A4F;
  --color-accent-dark:#1B4332;
  --color-accent-light:#D8F3DC;
  --color-warm:       #B7A78F;
  --color-warm-light: #E8E0D5;
  --color-white:      #FFFFFF;
  --color-border:     #E5E2DB;
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:3.75rem;
  --section-py:6rem; --container-max:1200px; --container-px:1.5rem;
  --radius-sm:.375rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.5rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-card:0 2px 20px rgba(0,0,0,.06);
  --transition:.3s cubic-bezier(.4,0,.2,1);
}

/* === Reset === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden }
body { font-family:var(--font-body); font-size:var(--text-base); line-height:1.7; color:var(--color-text); background:var(--color-bg); overflow-x:hidden }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:400; line-height:1.2 }
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }

/* === Layout === */
.container { max-width:var(--container-max); margin:0 auto; padding-left:var(--container-px); padding-right:var(--container-px) }
.section { padding-top:var(--section-py); padding-bottom:var(--section-py) }
.section--alt { background:var(--color-bg-alt) }

/* === Nav === */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(250,250,247,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border) }
.nav__inner { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-px); display:flex; align-items:center; justify-content:space-between; height:72px }
.nav__logo { font-family:var(--font-heading); font-size:var(--text-xl); color:var(--color-text) }
.nav__logo span { color:var(--color-accent) }
.nav__links { display:flex; align-items:center; gap:2rem }
.nav__links a { font-size:var(--text-sm); font-weight:500; color:var(--color-text-light); transition:color var(--transition); position:relative }
.nav__links a:hover, .nav__links a.active { color:var(--color-text) }
.nav__links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--color-accent); transition:width var(--transition) }
.nav__links a:hover::after, .nav__links a.active::after { width:100% }
/* CTA in nav - override link color */
.nav__cta { font-size:var(--text-sm)!important; padding:.6rem 1.4rem; color:var(--color-white)!important }
.nav__cta:hover { color:var(--color-white)!important }
.nav__cta::after { display:none!important }

/* Hamburger */
.nav__hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px }
.nav__hamburger span { display:block; width:24px; height:2px; background:var(--color-text); transition:all var(--transition) }

/* Mobile menu — dropdown panel, not fullscreen */
.nav__mobile { display:none; position:fixed; top:72px; left:0; right:0; background:var(--color-bg); padding:.5rem var(--container-px) 1rem; z-index:9999; box-shadow:var(--shadow-lg); border-bottom:1px solid var(--color-border) }
.nav__mobile.open { display:flex; flex-direction:column; gap:0 }
.nav__mobile a { font-size:var(--text-base); font-weight:500; color:var(--color-text); padding:.875rem 0; border-bottom:1px solid var(--color-border); display:block }
.nav__mobile a:last-child { border-bottom:none }
.nav__mobile-cta { text-align:center; margin-top:.5rem; border-bottom:none!important; padding-top:1rem!important }
.nav__mobile .btn-primary { color:var(--color-white) }
/* Overlay behind menu to close on tap outside */
.nav__overlay { display:none; position:fixed; top:72px; left:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:9998 }
.nav__overlay.open { display:block }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 2rem; font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; letter-spacing:.05em; text-transform:uppercase; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition) }
.btn-primary { background:var(--color-accent); color:var(--color-white) }
.btn-primary:hover { background:var(--color-accent-dark); transform:translateY(-1px); box-shadow:var(--shadow-md) }
.btn-outline { background:transparent; color:var(--color-accent); border:1.5px solid var(--color-accent) }
.btn-outline:hover { background:var(--color-accent); color:var(--color-white) }
.btn-white { background:var(--color-white); color:var(--color-accent) }
.btn-white:hover { background:var(--color-bg); transform:translateY(-1px) }
.btn--sm { padding:.4rem 1rem; font-size:var(--text-xs) }

/* === Badges & Tags === */
.badge { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; font-size:var(--text-xs); font-weight:500; text-transform:uppercase; letter-spacing:.1em; border-radius:100px; background:var(--color-accent-light); color:var(--color-accent-dark) }
.tag { display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .625rem; font-size:var(--text-xs); border-radius:var(--radius-sm); background:var(--color-bg-alt); color:var(--color-text-light) }

/* === Section headers === */
.section-label { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--color-accent); margin-bottom:1rem }
.section-title { font-size:var(--text-4xl); margin-bottom:1.5rem }
.section-desc { font-size:var(--text-lg); color:var(--color-text-light); max-width:600px; line-height:1.8 }
.section-center { text-align:center; margin-bottom:3rem }
.section-header-row { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:3rem }

/* === Text helpers === */
.text-body { color:var(--color-text-light); line-height:1.8; margin-bottom:1.5rem }
.footer__text { font-size:var(--text-sm); color:var(--color-text-light) }

/* === Quote === */
.quote { font-family:var(--font-heading); font-size:var(--text-2xl); color:var(--color-text); line-height:1.4; padding-left:2rem; border-left:3px solid var(--color-accent) }
.quote--sm { font-size:var(--text-xl); margin-bottom:2rem }
.quote__author { font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text-light); margin-top:1rem; font-style:normal }

/* === Stats === */
.stat { text-align:center }
.stat__number { font-family:var(--font-heading); font-size:var(--text-4xl); color:var(--color-accent); line-height:1 }
.stat__label { font-size:var(--text-sm); color:var(--color-text-light); margin-top:.5rem }
.stats-row { display:flex; justify-content:center; gap:5rem; margin-top:3rem; padding-top:3rem; border-top:1px solid rgba(255,255,255,.1) }
.stats-row--flat { border-top:none; padding-top:0; margin-top:0 }

/* === Hero === */
.hero { min-height:90vh; display:flex; align-items:center; padding-top:72px }
.hero__grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center }
.hero__badge { margin-bottom:1.5rem }
.hero__title { font-size:var(--text-6xl); margin-bottom:1.5rem }
.hero__title em { font-style:italic; color:var(--color-accent) }
.hero__subtitle { font-size:var(--text-lg); color:var(--color-text-light); max-width:480px; margin-bottom:2rem; line-height:1.8 }
.hero__actions { display:flex; gap:1rem }
.hero__image { height:580px; position:relative }
.hero__floating-card { position:absolute; bottom:24px; left:24px; background:var(--color-white); border-radius:var(--radius-md); padding:1rem 1.25rem; box-shadow:var(--shadow-md) }
.hero__floating-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); font-weight:600; margin-bottom:.25rem }
.hero__floating-value { font-family:var(--font-heading); font-size:var(--text-lg); color:var(--color-text) }

/* === Page header (internal pages) === */
.page-header { padding-top:calc(72px + 4rem); padding-bottom:3rem; background:var(--color-bg-alt) }
.page-header .container { max-width:800px }
.page-header__breadcrumb { font-size:var(--text-sm); color:var(--color-text-light); margin-bottom:1rem; display:flex; gap:.5rem; align-items:center }
.page-header__breadcrumb a { color:var(--color-accent); transition:color var(--transition) }
.page-header__breadcrumb a:hover { color:var(--color-accent-dark) }
.page-header__title { font-size:var(--text-5xl); margin-bottom:1rem }
.page-header__desc { font-size:var(--text-lg); color:var(--color-text-light); line-height:1.8; max-width:650px }

/* === Course cards === */
.course-card { background:var(--color-white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:all var(--transition); text-decoration:none; display:block }
.course-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.course-card__img { width:100%; height:220px; object-fit:cover; background:var(--color-bg-alt); display:flex; align-items:center; justify-content:center; color:var(--color-text-light); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em }
.course-card__body { padding:1.5rem }
.course-card__type { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin-bottom:.5rem }
.course-card__title { font-family:var(--font-heading); font-size:var(--text-xl); margin-bottom:.75rem; color:var(--color-text) }
.course-card__meta { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem }
.course-card__desc { font-size:var(--text-sm); color:var(--color-text-light); margin-bottom:1.25rem; line-height:1.6 }
.course-card__footer { display:flex; justify-content:space-between; align-items:center }
.course-card__price { font-size:var(--text-lg); font-weight:700; color:var(--color-text) }
.courses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem }

/* === Course detail === */
.course-detail { display:grid; grid-template-columns:2fr 1fr; gap:3rem; align-items:start }
.course-detail__sidebar { position:sticky; top:100px }
.course-detail__sidebar-card { background:var(--color-white); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-card) }
.course-detail__sidebar-card .btn { width:100%; margin-top:1rem }
.course-detail h3 { font-size:var(--text-2xl); margin-top:2.5rem; margin-bottom:1rem }
.course-detail p, .course-detail li { color:var(--color-text-light); line-height:1.8; margin-bottom:.75rem }
.course-detail ul { padding-left:1.5rem; margin-bottom:1.5rem }
.course-detail ul li { position:relative; padding-left:.5rem; margin-bottom:.5rem }
.course-detail ul li::before { content:'—'; position:absolute; left:-1.25rem; color:var(--color-accent) }
.hours-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0 }
.hours-item { background:var(--color-bg-alt); border-radius:var(--radius-md); padding:1.25rem; text-align:center }
.hours-item__number { font-family:var(--font-heading); font-size:var(--text-3xl); color:var(--color-accent); margin-bottom:.25rem }
.hours-item__label { font-size:var(--text-sm); color:var(--color-text-light) }

/* === Contact form === */
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start }
.form__group { margin-bottom:1.5rem }
.form__label { display:block; font-size:var(--text-sm); font-weight:500; margin-bottom:.5rem; color:var(--color-text) }
.form__input, .form__select, .form__textarea { width:100%; padding:.75rem 1rem; font-family:var(--font-body); font-size:var(--text-base); border:1.5px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-white); color:var(--color-text); transition:border-color var(--transition); outline:none }
.form__input:focus, .form__select:focus, .form__textarea:focus { border-color:var(--color-accent) }
.form__textarea { min-height:120px; resize:vertical }
.form__select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B7B' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center }

/* === FAQ === */
.faq-item { border-bottom:1px solid var(--color-border); padding:1.25rem 0 }
.faq-item summary { font-family:var(--font-heading); font-size:var(--text-lg); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:'+'; color:var(--color-accent); font-size:var(--text-xl); flex-shrink:0; transition:transform var(--transition) }
.faq-item[open] summary::after { transform:rotate(45deg) }
.faq-item__answer { margin-top:1rem; color:var(--color-text-light); line-height:1.8; max-width:700px }

/* === Blog === */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem }
.blog-card { background:var(--color-white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:all var(--transition) }
.blog-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.blog-card__img { width:100%; height:200px; background:var(--color-bg-alt); display:flex; align-items:center; justify-content:center; color:var(--color-text-light); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em }
.blog-card__body { padding:1.5rem }
.blog-card__cat { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin-bottom:.5rem }
.blog-card__title { font-family:var(--font-heading); font-size:var(--text-xl); margin-bottom:.5rem }
.blog-card__excerpt { font-size:var(--text-sm); color:var(--color-text-light); line-height:1.6; margin-bottom:1rem }
.blog-card__date { font-size:var(--text-xs); color:var(--color-warm) }

/* === Sandra === */
.sandra-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start }
.sandra__image { height:450px }
.sandra-certs { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem }
.sandra-cert { padding:.5rem 1rem; border-radius:var(--radius-sm); background:var(--color-accent-light); color:var(--color-accent-dark); font-size:var(--text-sm); font-weight:500 }

/* === Method === */
.method-bg { background:var(--color-text); color:var(--color-white) }
.method-bg .section-label { color:var(--color-accent-light) }
.method-bg .section-title { color:var(--color-white) }
.method-bg .section-desc { color:rgba(255,255,255,.7) }
.method-center { text-align:center }
.method-desc { margin:0 auto 3rem }
.method-cta { margin-top:2.5rem }
.principles-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; margin-top:3rem }
.principle { text-align:center; padding:1.5rem 1rem; border-radius:var(--radius-md); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1) }
.principle__number { font-family:var(--font-heading); font-size:var(--text-3xl); color:var(--color-accent-light); opacity:.5; margin-bottom:.5rem }
.principle__name { font-size:var(--text-sm); font-weight:600; color:var(--color-white) }
.stats-row .stat__number { color:var(--color-accent-light) }
.stats-row .stat__label { color:rgba(255,255,255,.6) }

/* === Testimonials === */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:3rem }

/* === CTA block === */
.cta-block { background:var(--color-accent); color:var(--color-white); text-align:center; padding:4rem 2rem; border-radius:var(--radius-xl); max-width:var(--container-max) }
.cta-block .section-title { color:var(--color-white); max-width:600px; margin:0 auto 1rem }
.cta-block p { color:rgba(255,255,255,.8); max-width:500px; margin:0 auto 2rem }

/* === Footer === */
.footer { padding:4rem 0 2rem; border-top:1px solid var(--color-border); margin-top:var(--section-py) }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem }
.footer__brand { font-family:var(--font-heading); font-size:var(--text-xl); margin-bottom:1rem }
.footer__brand span { color:var(--color-accent) }
.footer__desc { font-size:var(--text-sm); color:var(--color-text-light); max-width:300px; line-height:1.7 }
.footer__heading { font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; color:var(--color-text) }
.footer__links { display:flex; flex-direction:column; gap:.5rem }
.footer__links a { font-size:var(--text-sm); color:var(--color-text-light); transition:color var(--transition) }
.footer__links a:hover { color:var(--color-accent) }
.footer__bottom { padding-top:2rem; border-top:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; font-size:var(--text-xs); color:var(--color-text-light) }
.footer__bottom-links { display:flex; gap:1.5rem }

/* === Image placeholders === */
.img-placeholder { display:flex; align-items:center; justify-content:center; color:var(--color-text-light); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; border-radius:var(--radius-xl) }
.img-placeholder--warm { background:linear-gradient(135deg,var(--color-warm-light) 0%,var(--color-bg) 100%) }
.img-placeholder--green { background:linear-gradient(135deg,var(--color-accent-light) 0%,var(--color-warm-light) 100%) }
.img-placeholder--neutral { background:linear-gradient(135deg,var(--color-bg-alt) 0%,var(--color-warm-light) 100%) }

/* ============================================
   Responsive — Tablet
   ============================================ */
@media (max-width:1024px) {
  .section-title { font-size:var(--text-3xl) }
  .page-header__title { font-size:var(--text-4xl) }
  .courses-grid { grid-template-columns:repeat(2,1fr) }
  .principles-grid { grid-template-columns:repeat(3,1fr) }
  .course-detail { grid-template-columns:1fr }
  .course-detail__sidebar { position:static }
  .footer__grid { grid-template-columns:1fr 1fr }
  .hero__grid { gap:3rem }
}

/* ============================================
   Responsive — Mobile
   ============================================ */
@media (max-width:768px) {
  :root { --section-py:4rem; --container-px:1.25rem }

  /* Nav */
  .nav__links { display:none }
  .nav__hamburger { display:flex }

  /* Hero */
  .hero { min-height:auto; padding-top:100px; padding-bottom:3rem }
  .hero__grid { grid-template-columns:1fr; gap:2rem }
  .hero__image-wrap { order:-1 }
  .hero__image { height:300px }
  .hero__title { font-size:var(--text-3xl) }
  .hero__floating-card { position:static; margin-top:1rem; border-radius:var(--radius-md) }
  .hero__actions { flex-wrap:wrap }

  /* Sections */
  .section-title { font-size:var(--text-2xl) }
  .section-header-row { flex-direction:column; align-items:flex-start }
  .section-header-btn { align-self:flex-start }
  .page-header__title { font-size:var(--text-3xl) }

  /* Grids collapse to 1 column */
  .courses-grid { grid-template-columns:1fr }
  .sandra-grid { grid-template-columns:1fr }
  .sandra__image { height:300px }
  .testimonials-grid { grid-template-columns:1fr }
  .contact-grid { grid-template-columns:1fr }
  .blog-grid { grid-template-columns:1fr }
  .hours-grid { grid-template-columns:1fr }
  .principles-grid { grid-template-columns:repeat(2,1fr) }
  .stats-row { flex-wrap:wrap; gap:2rem }
  .footer__grid { grid-template-columns:1fr }
  .footer__bottom { flex-direction:column; gap:.5rem; text-align:center }

  /* CTA block */
  .cta-block { border-radius:var(--radius-lg); padding:3rem 1.5rem }

  /* Quote */
  .quote { font-size:var(--text-xl) }
  .quote--sm { font-size:var(--text-lg) }
}