/* ============================================================
   ACTÍVATE PRO — REBRANDING (Guía Esther Canales)
   Fuentes auto-alojadas + tokens de marca.
   Este bloque va ANTES de los tokens originales y los sobreescribe.
   ============================================================ */

/* ---- Tipografías ---- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Baskervville';
  src: url('../fonts/Baskervville-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ============================================
   ACTÍVATE PRO — Design Tokens
   Cambiar estas variables rebrandea toda la web.
   ============================================ */
:root {
  /* ===== Paleta Esther Canales ===== */
  --color-marron:   #44332C;  /* Conocimiento */
  --color-arena:    #D5B79B;  /* Cercanía */
  --color-burdeos:  #81302F;  /* Liderazgo — acción */
  --color-oliva:    #202621;  /* Evolución */

  /* Fondos y texto */
  --color-bg:         #FBF7F1;
  --color-bg-alt:     #F4EFE9;
  --color-oliva-texto: #202621;
  --color-text:        var(--color-oliva-texto);
  --color-text-light: #4A4E48;
  --color-arena-medio: #EAD9C6;

  /* Acento = burdeos (acción) */
  --color-accent:      #81302F;
  --color-accent-dark: #6A2726;
  --color-accent-light:#F3E9E4;

  /* Acento 2 = arena (informativo/decorativo) */
  --color-warm:       #D5B79B;
  --color-warm-light: #F4EFE9;
  --color-heading-accent: var(--color-marron);
  --color-deco:           var(--color-arena);
  --color-white:      #FFFFFF;
  --color-border:     #E0D5C9;

  /* ===== Tipografías ===== */
  --font-heading: 'Clash Display', Georgia, serif;
  --font-body:    'Satoshi', system-ui, sans-serif;
  --font-serif:   'Baskervville', Georgia, serif;

  /* Escalas (sin cambios) */
  --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:1320px; --container-px:1.5rem;
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0;
  --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) }
/* Columna de texto contenida (legibilidad editorial). Ancho independiente del contenedor general. */
.container--narrow { max-width:880px }
.section { padding-top:var(--section-py); padding-bottom:var(--section-py) }
.section--alt { background:var(--color-arena) }


/* === Aviso Legal === */
.legal h2 { font-family:var(--font-heading); font-size:var(--text-2xl); margin:2rem 0 .75rem }
.legal h3 { font-family:var(--font-heading); font-size:var(--text-lg); margin:1.5rem 0 .5rem }
.legal p, .legal li { color:var(--color-text-light); line-height:1.7; margin-bottom:.75rem }
.legal ul { padding-left:1.25rem; margin-bottom:1rem; list-style:disc }
.legal a { color:var(--color-accent) }

/* === Nav === */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(251,247,241,.92); 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:80px }
.nav__logo { display:flex; align-items:center }
.nav__logo img { height:26px; width:auto; display:block }
.nav__links { display:flex; align-items:center; gap:2rem }
.nav__links a { font-size:var(--text-sm); font-weight:500; color:var(--color-text); transition:color var(--transition); position:relative }
.nav__links a:hover, .nav__links a.active { color:var(--color-accent) }
.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:80px; 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:80px; 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-arena); color:var(--color-marron) }
.btn-white:hover { background:#E4C9AE; transform:translateY(-1px) }
.btn--sm { padding:.4rem 1rem; font-size:var(--text-xs) }
.btn-group { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem }
@media (max-width:768px) {
  .btn-group { flex-direction:column }
  .btn-group .btn { width:100% }
}

/* === 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-warm-light); color:var(--color-marron); border:1px solid var(--color-border) }
.badge--accent { background:var(--color-accent); color:#FFFFFF; border-color:var(--color-accent) }
.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) }

.schedule { margin:1rem 0 2rem; border-top:1px solid var(--color-border) }
.schedule__row { display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--color-border) }
.schedule__date { font-weight:600; color:var(--color-text); font-size:var(--text-sm) }
.schedule__time { color:var(--color-text-light); font-size:var(--text-sm) }

/* === Section headers === */
.section-label { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--color-heading-accent); margin-bottom:1rem }
.section-title { font-size:var(--text-4xl); margin-bottom:1.5rem }
.section-desc { font-family:var(--font-serif); font-style:italic; font-size:var(--text-xl); color:var(--color-text-light); max-width:600px; line-height:1.6 }
.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-serif); font-style:italic; font-size:var(--text-xl); color:var(--color-text); line-height:1.4; padding-left:2rem; border-left:3px solid var(--color-deco) }
.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-heading-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:80px }
.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-heading-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(80px + 4rem); padding-bottom:3rem; background:var(--color-arena) }
.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:#FFFDFB; 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-warm); 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:#FFFDFB; 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-deco) }
.hours-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0 }
.hours-item { background:var(--color-arena-medio); 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-heading-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 }
.form__error { color:var(--color-accent); font-size:var(--text-sm); margin-top:.35rem }
.form__check { display:flex; align-items:flex-start; gap:.6rem }
.form__check input { margin-top:.25rem; flex-shrink:0 }
.form__check label { font-size:var(--text-sm); color:var(--color-text-light); line-height:1.5; margin:0 }
.info-box { border-radius:var(--radius-lg); padding:2rem; border:1px solid }
.info-box--accent { background:var(--color-warm-light); border-color:var(--color-border) }
.info-box--accent h3 { color:var(--color-marron) }
.info-box--accent p, .info-box--accent a { color:var(--color-text-light) }

/* === 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:#FFFDFB; 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-warm-light); color:var(--color-marron); font-size:var(--text-sm); font-weight:500 }

/* === Method === */
/* Sección oscura (marrón) */
.section--dark, .method-bg { background:var(--color-marron); color:var(--color-arena) }
.section--dark .section-label, .method-bg .section-label { color:var(--color-arena) }
.section--dark .section-title, .method-bg .section-title { color:#FFFFFF }
.section--dark .section-desc, .method-bg .section-desc { color:rgba(255,255,255,.72) }
.section--dark .stat__number, .method-bg .stat__number { color:var(--color-arena) }
.section--dark .stat__label, .method-bg .stat__label { color:rgba(255,255,255,.6) }
.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-warm); opacity:.7; 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 de cierre: franja marrón a ancho completo (rompe el .container) */
.cta-block {
  background:var(--color-marron);
  color:var(--color-arena);
  text-align:center;
  padding:5rem 2rem;
  /* full-bleed seguro: se estira a todo el viewport sin scroll horizontal */
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.cta-block .section-title { color:#FFFFFF; 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 { margin-bottom:1rem }
.footer__brand img { height:56px; width:auto; display:block }
.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-warm) }
.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) {
  .hero-full__content { max-width:820px; margin-left:auto; margin-right:auto }
  .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 }
}

  /* ===== Hero full-width (estilo Merrithew: foto completa + texto encima) ===== */
.hero-full {
  position:relative;
  width:100vw;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  min-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center 18%;
  margin-top:-80px; /* sube bajo el nav fijo */
  padding-top:80px;
}
.hero-full__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(68,51,44,.58) 0%, rgba(68,51,44,.45) 40%, rgba(68,51,44,.8) 100%);
}
.hero-full__content {
  position:relative; z-index:2;
  max-width:600px;
  text-align:center;
  padding:2rem 1.5rem;
  color:#fff;
  margin-left:auto;
  margin-right:15%;
}
.hero-full__badge {
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  margin-bottom:1.5rem;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero-full__title {
  font-family:var(--font-heading);
  font-size:clamp(2rem, 4.5vw, 3.5rem);
  line-height:1.05;
  color:#fff;
  margin-bottom:1.5rem;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero-full__title em {
  font-style:italic;
  color:var(--color-arena);
}
.hero-full__subtitle {
  font-family:var(--font-body);
  font-style:normal;
  /*
  font-size:clamp(1.05rem, 1.9vw, 1.3rem);
  */
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  line-height:1.6;
  color:rgba(255,255,255,.95);
  max-width:640px;
  margin:0 auto 2rem;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
  font-weight:600;
}
.hero-full__actions { display:flex; justify-content:center }
.hero-full__actions .btn { padding:.7rem 1.5rem; font-size:var(--text-sm) }


@media (max-width:768px) {
  .hero-full { min-height:80vh; background-position:center 25% }
  .hero-full__content { max-width:820px; margin-left:auto; margin-right:auto }

  /* 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) }
}

/* ============================================
   PARCHE: integración de fotos en placeholders
   Añadido al integrar la sesión fotográfica.
   Garantiza que las <img> que sustituyen
   placeholders se rendericen correctamente.
   ============================================ */

/* Hero: la img llena su contenedor */
.hero__image { overflow:hidden; border-radius:var(--radius-xl) }
.hero__image > img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Sandra teaser (home y otros sandra-grid) */
.sandra__image {
  display:block;
  width:100%;
  object-fit:cover;
  border-radius:var(--radius-xl);
}

/* Cards de cursos: la img reemplaza al div */
.course-card img.course-card__img {
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* Cards de blog (preparado para futuro) */
.blog-card img.blog-card__img {
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* ============================================================
   ▼▼▼ MEJORAS VISUALES — Bloques REVERSIBLES individualmente ▼▼▼
   
   Cada mejora va envuelta en su propio bloque marcado.
   Para revertir una mejora concreta: borra el bloque
   desde "INICIO MEJORA #N" hasta "FIN MEJORA #N".
   ============================================================ */


/* ============================================================
   INICIO MEJORA #1 — BLUR (overlay tonal + microgrado en heroes)
   Para revertir: borra todo hasta "FIN MEJORA #1".
   ============================================================ */

/* Wash crema solo sobre la zona de la imagen del hero.
   .hero__image ya tiene overflow:hidden y border-radius del parche previo. */
.hero__image { position:relative }
.hero__image::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(250,248,245,0.08);
  pointer-events:none;
  z-index:1;
  border-radius:inherit;
}
/* Microblur ÚNICAMENTE en hero (no en cards, donde el detalle vende) */
.hero__image > img {
  filter:blur(0.6px);
}

/* En cards, el wash solo cubre la imagen, no el cuerpo de la card.
   Las imágenes son siblings directos del cuerpo dentro de un <a>.
   Aplicamos un wash con box-shadow inset sobre la propia img. */
.course-card img.course-card__img,
.blog-card img.blog-card__img,
.sandra__image {
  box-shadow:inset 0 0 0 9999px rgba(250,248,245,0.05);
}

/* ============================================================
   FIN MEJORA #1
   ============================================================ */


/* ============================================================
   INICIO MEJORA #2 — HOVER ZOOM SUAVE en cards
   Para revertir: borra todo hasta "FIN MEJORA #2".
   ============================================================ */

.course-card { overflow:hidden }  /* necesario para contener el zoom */
.blog-card { overflow:hidden }    /* ya estaba pero por seguridad */

.course-card img.course-card__img,
.blog-card img.blog-card__img {
  transition:transform 600ms cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.course-card:hover img.course-card__img,
.blog-card:hover img.blog-card__img {
  transform:scale(1.05);
}

/* ============================================================
   FIN MEJORA #2
   ============================================================ */


/* ============================================================
   INICIO MEJORA #3 — RADIUS UNIFICADO (mantener 220px, unificar radius)
   Para revertir: borra todo hasta "FIN MEJORA #3".
   ============================================================ */

/* Galerías con style inline: forzamos coherencia con --radius-lg
   para imágenes pequeñas-medias y --radius-xl solo en heroes/destacadas.
   Las imágenes ya están con su radius inline; este bloque sirve para
   futuras y como override coherente si se quisiera unificar más.
   
   En esta iteración (opción C - cambio mínimo), nos limitamos a
   asegurar que cards de cursos y blog comparten radius con el resto:
   ya usan --radius-lg via .course-card / .blog-card.
   No hay cambio efectivo aquí, sólo dejamos el ancla para futuras
   modificaciones. */

/* Asegurar que las cards usen radius-lg consistente */
.course-card,
.blog-card {
  border-radius:var(--radius-lg);
}
.course-card img.course-card__img,
.blog-card img.blog-card__img {
  border-radius:0; /* la card es la que redondea, no la img individual */
}

/* ============================================================
   FIN MEJORA #3
   ============================================================ */


/* ============================================================
   INICIO MEJORA #4 — TRATAMIENTO CROMÁTICO GLOBAL
   Saturación 92% + sepia ligero 5%. Cohesión cromática.
   Para revertir: borra todo hasta "FIN MEJORA #4".
   ============================================================ */

.hero__image > img,
.sandra__image,
.course-card__img,
.blog-card__img,
.course-detail img,
.section img:not([class*="logo"]):not([class*="icon"]) {
  filter:saturate(0.92) sepia(0.05);
}

/* MEJORA #4 + MEJORA #1: combinación para hero (blur + cromática) */
.hero__image > img {
  filter:blur(0.6px) saturate(0.92) sepia(0.05);
}

/* ============================================================
   FIN MEJORA #4
   ============================================================ */


/* ============================================================
   INICIO MEJORA #5 — ANIMACIONES FADE-IN AL SCROLL
   Para revertir: borra todo hasta "FIN MEJORA #5"
   Y borra la línea <script src="js/scroll-reveal.js"></script>
   en los HTML. Las clases [data-reveal] quedarán inertes.
   ============================================================ */

[data-reveal] {
  opacity:0;
  transform:translateY(20px);
  transition:opacity 600ms cubic-bezier(.4,0,.2,1),
             transform 600ms cubic-bezier(.4,0,.2,1);
  transition-delay:var(--reveal-delay,0ms);
  /* Fallback CSS: si el JS no se carga, se muestran solos a los 3s */
  animation:reveal-fallback 0s ease-in 3s forwards;
}
[data-reveal].is-visible {
  opacity:1;
  transform:translateY(0);
  animation:none; /* JS toma el control, cancela fallback */
}
@keyframes reveal-fallback {
  to { opacity:1; transform:translateY(0) }
}
/* Respeta preferencias del usuario: sin animación */
@media (prefers-reduced-motion:reduce) {
  [data-reveal] {
    opacity:1;
    transform:none;
    transition:none;
    animation:none;
  }
}

/* ============================================================
   FIN MEJORA #5
   ============================================================ */


/* ============================================================
   INICIO MEJORA #6 — GLASS EFFECT en floating card del hero
   Para revertir: borra todo hasta "FIN MEJORA #6".
   ============================================================ */

.hero__floating-card {
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:var(--shadow-lg);
  z-index:2; /* por encima del overlay de mejora #1 */
}

/* ============================================================
   FIN MEJORA #6
   ============================================================ */

/* ▲▲▲ FIN MEJORAS VISUALES REVERSIBLES ▲▲▲ */


/* ============================================================
   INICIO MEJORA #5b — DESACTIVAR fade-in en móvil
   Resuelve: imágenes superiores no aparecen al cargar en móvil
   porque arrancan con opacity:0 y la observación tarda.
   Para revertir: borra todo hasta "FIN MEJORA #5b".
   ============================================================ */

@media (max-width:768px) {
  [data-reveal] {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}

/* ============================================================
   FIN MEJORA #5b
   ============================================================ */


/* ============================================================
   INICIO MEJORA #7 — BLUR/wash perceptible vía filter
   El intento anterior con box-shadow inset no funcionaba porque
   box-shadow no se aplica al contenido de elementos <img>.
   Esta versión usa filter sobre las imágenes (sí funciona).
   Combina con #4 (saturate + sepia) acumulando filtros.
   Para revertir: borra todo hasta "FIN MEJORA #7".
   ============================================================ */

/* Overlay sobre la imagen del hero más perceptible (este SÍ funciona,
   es un ::after sobre el contenedor, no sobre la img) */
.hero__image::after {
  background:rgba(46,46,46,0.12);   /* grafito 12%, antes era crema 8% */
}

/* Para cards y sandra: oscurecemos vía filter brightness + contraste
   ligero. Esto sí impacta en <img>. Mantiene saturate+sepia de #4. */
.course-card__img,
.blog-card__img,
.sandra__image {
  filter:saturate(0.92) sepia(0.05) brightness(0.94) contrast(1.02) !important;
}

/* Hero: igualamos filtros al resto (sin blur), para coherencia visual.
   IMPORTANT: este override pisa al de MEJORA #4 línea por especificidad
   (misma especificidad, pero declarado después). */
.hero__image > img {
  filter:saturate(0.92) sepia(0.05) brightness(0.94) contrast(1.02) !important;
}

/* Galerías con style inline (curso-reformer, sandra-bravo, etc).
   Como tienen filter en el atributo style INLINE no podríamos pisarlo
   con CSS normal, pero como NO tienen filter inline, vale con selector
   genérico. */
.course-detail img:not(.course-card__img),
.section img:not(.course-card__img):not(.blog-card__img):not([class*="logo"]):not([class*="icon"]) {
  filter:saturate(0.92) sepia(0.05) brightness(0.94) contrast(1.02) !important;
}

/* ============================================================
   FIN MEJORA #7
   ============================================================ */


/* ============================================================
   INICIO MEJORA #8 — FOOTER border-top con ancho de contenedor
   El border-top original ocupaba 100vw. Lo movemos al .container
   interior del footer para que respete el ancho del propio footer.
   Para revertir: borra todo hasta "FIN MEJORA #8".
   ============================================================ */

.footer { border-top:none }                        /* anula el border original */
.footer > .container { border-top:1px solid var(--color-border); padding-top:4rem }
.footer { padding-top:0 }                          /* el padding sube al container */

/* ============================================================
   FIN MEJORA #8
   ============================================================ */


/* ============================================================
   INICIO MEJORA #9 — FIX footer de cards de cursos
   Resuelve: cuando el precio dice "Próximamente" (texto largo)
   y el botón dice "Solicitar información" (texto muy largo),
   el botón se colapsa y rompe a dos líneas en desktop 3 columnas.
   Solución: reducir tamaño del precio + impedir que el botón
   se rompa internamente. Sin wrap (que provocaba saltos
   inconsistentes entre cards).
   Para revertir: borra todo hasta "FIN MEJORA #9".
   ============================================================ */

.course-card__footer {
  gap:0.75rem;
}
.course-card__footer .btn {
  white-space:nowrap;    /* el botón no se rompe por dentro nunca */
  flex-shrink:0;         /* mantiene su tamaño mínimo */
}
.course-card__price {
  font-size:var(--text-base);   /* antes era --text-lg (1.125rem → 1rem) */
  flex:1 1 auto;
  min-width:0;
}

/* ============================================================
   FIN MEJORA #9
   ============================================================ */


/* ============================================================
   INICIO MEJORA #10 — PAGE-HEADER con foto + overlay grafito
   Aplica solo a .page-header.page-header--photo
   Las páginas sin esa clase mantienen el header crema actual.
   La foto se define vía custom property --header-bg en el HTML.
   Para revertir: borra todo hasta "FIN MEJORA #10".
   ============================================================ */

.page-header--photo {
  position:relative;
  background:#44332C;   /* fallback marrón corporativo */
  overflow:hidden;
  isolation:isolate;    /* contiene los pseudo-elementos */
}
.page-header--photo::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--header-bg);
  background-size:cover;
  background-position:center;
  opacity:0.55;
  z-index:-2;
}
.page-header--photo::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(68,51,44,0.72);   /* overlay marrón corporativo 72% */
  z-index:-1;
}
/* Texto en blanco/crema sobre overlay oscuro */
.page-header--photo .page-header__title { color:#FFFFFF }
.page-header--photo .page-header__desc { color:rgba(255,255,255,0.88) }
.page-header--photo .page-header__breadcrumb { color:rgba(255,255,255,0.75) }
.page-header--photo .page-header__breadcrumb a { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px }
.page-header--photo .page-header__breadcrumb a:hover { color:rgba(255,255,255,0.85) }

/* ============================================================
   FIN MEJORA #10
   ============================================================ */