/* ============================================================
   Emotional Method™ — Design System
   ============================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --cream: #EDE4D6;
  --cream-light: #F5F0E8;
  --blue-emotional: #E2EBF0;
  --blue-deeper: #D0DDE6;
  --gold: #C9A96E;
  --gold-light: #E8D5B0;
  --btn-warm: #8C7B6B;
  --text-dark: #3A3530;
  --text-mid: #6A6560;
  --text-light: #9A9590;
  --white-off: #FAFAF8;

  /* Emotional Tech Method™ — paleta extraída del logo */
  --tech-blue: #4A6B7A;
  --tech-blue-light: #6A8B9A;
  --tech-node: #8FAAB8;
  --tech-node-pale: #E8EFF3;

  /* Emotional Events Method™ — burdeos + crema */
  --burgundy: #7D2E46;
  --burgundy-light: #A84E68;
  --burgundy-pale: #F5EEF0;
  --cream-warm: #E8DDD0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Jost', sans-serif;
  color: var(--text-dark);
  background: var(--white-off);
}

/* ── Navigation ──────────────────────────────────────────── */

.em-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--white-off);
  border-bottom: 1px solid var(--gold-light);
}

.em-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 60px;
}

/* Logo */
.em-nav__logo {
  text-decoration: none;
  flex-shrink: 0;
}

.em-nav__logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: 1px;
  transition: color 0.2s;
}

.em-nav__logo:hover .em-nav__logo-text {
  color: var(--gold);
}

/* Desktop links */
.em-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.em-nav__link {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s;
}

.em-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.em-nav__link:hover,
.em-nav__link--active {
  color: var(--text-dark);
}

.em-nav__link:hover::after,
.em-nav__link--active::after {
  transform: scaleX(1);
}

/* Hamburger button */
.em-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.em-nav__burger span {
  display: block;
  height: 1px;
  background: var(--text-dark);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Burger → X when open */
.em-nav__burger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.em-nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}

.em-nav__burger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer */
.em-nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--white-off);
  border-top: 1px solid var(--gold-light);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.em-nav__mobile.is-open {
  max-height: 520px;
  padding: 12px 0 20px;
}

.em-nav__mobile-link {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  padding: 14px 32px;
  border-bottom: 1px solid #F0EDE8;
  transition: color 0.2s, background 0.2s;
}

.em-nav__mobile-link:last-child {
  border-bottom: none;
}

.em-nav__mobile-link:hover,
.em-nav__mobile-link.em-nav__link--active {
  color: var(--text-dark);
  background: var(--cream-light);
}

/* Sublinks móvil (ramas) */
.em-nav__mobile-sub {
  padding-left: 48px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--text-light);
  background: var(--cream-light);
}

.em-nav__mobile-sub:hover,
.em-nav__mobile-sub.em-nav__link--active {
  color: var(--text-dark);
  background: var(--cream);
}

/* Label de grupo móvil (Las Ramas) */
.em-nav__mobile-group {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 14px 32px 10px;
  border-bottom: 1px solid #F0EDE8;
  display: block;
}

/* ── Dropdown desktop ──────────────────────────────────── */
.em-nav__dropdown {
  position: relative;
}

.em-nav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
}

.em-nav__chevron {
  font-size: 9px;
  color: var(--text-light);
  transition: transform 0.2s ease;
  line-height: 1;
  margin-top: 1px;
}

.em-nav__dropdown:hover .em-nav__chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.em-nav__dropdown-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white-off);
  border: 1px solid var(--gold-light);
  border-top: 2px solid var(--gold);
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 200;
}

/* puente invisible para no perder el hover al bajar el cursor */
.em-nav__dropdown-panel::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.em-nav__dropdown:hover .em-nav__dropdown-panel {
  opacity: 1;
  visibility: visible;
}

.em-nav__dropdown-link {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  padding: 14px 20px;
  border-bottom: 1px solid #F0EDE8;
  transition: color 0.2s, background 0.2s;
}

.em-nav__dropdown-link:last-child {
  border-bottom: none;
}

.em-nav__dropdown-link:hover,
.em-nav__dropdown-link--active {
  color: var(--text-dark);
  background: var(--cream-light);
}

/* ── Language switcher ───────────────────────────────────── */

.em-nav__lang {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}

.em-nav__lang-btn {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-mid);
  transition: color 0.2s;
  padding: 2px 0;
}

.em-nav__lang-btn:hover,
.em-nav__lang-btn.is-active {
  color: var(--text-dark);
}

.em-nav__lang-btn.is-active {
  border-bottom: 1px solid var(--gold);
}

.em-nav__lang-sep {
  font-size: 13px;
  color: var(--text-light);
}

.em-nav__mobile-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  border-top: 1px solid #F0EDE8;
  margin-top: 4px;
}

/* ── Typography ─────────────────────────────────────────── */

.em-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 20px;
}

/* ── Buttons ─────────────────────────────────────────────── */

.btn-p,
.btn-s {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-p {
  font-size: 13px;
  padding: 14px 32px;
  background: var(--btn-warm);
  color: var(--white-off);
  border: 1px solid var(--btn-warm);
}

.btn-p:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white-off);
}

.btn-s {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  padding: 14px 32px;
  background: transparent;
  color: var(--text-dark);
  border: 1px solid var(--gold);
}

.btn-s:hover {
  background: var(--gold-light);
  color: var(--text-dark);
}

/* ── Sections ────────────────────────────────────────────── */

section {
  width: 100%;
}

/* S1 — Hero */
.s-hero {
  background: var(--blue-emotional);
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 40px 80px;
}

.s-hero .breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 40px;
}

.s-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 54px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 12px;
}

.s-hero h1 em {
  font-style: italic;
  color: var(--text-dark);
}

.s-hero .firma {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 28px;
}

.s-hero .subhead {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 48px;
}

.s-hero .ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* S2 — Qué es */
.s-que-es {
  background: var(--white-off);
  padding: 80px 40px;
  text-align: center;
}

.s-que-es h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}

.s-que-es p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 560px;
  margin: 0 auto 16px;
  line-height: 1.7;
}

.triangulo {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin: 24px auto 36px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--text-dark);
}

.triangulo .arrow {
  color: var(--gold);
  font-size: 16px;
  font-style: normal;
}

/* S3 — Las Ramas */
.s-ramas {
  background: var(--blue-emotional);
  padding: 80px 60px;
}

.s-ramas .intro {
  text-align: center;
  margin-bottom: 48px;
}

.s-ramas .intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.s-ramas .intro p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
}

.ramas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* para 3 ramas
.ramas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}*/

.rama-card {
  background: var(--white-off);
  padding: 36px 28px;
  border-top: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rama-card .rama-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

.rama-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.3;
}

.rama-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
  flex-grow: 1;
}

.rama-card .btn-s {
  font-size: 12px;
  padding: 10px 20px;
  align-self: flex-start;
}

.badge-proximamente {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  border: 1px solid var(--gold-light);
  padding: 4px 10px;
  display: inline-block;
  width: fit-content;
}

/* S4 — Laura & Hope */
.s-laura {
  background: var(--cream);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.s-laura .col-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.s-laura .col-left .em-label {
  margin-bottom: 16px;
}

.s-laura .col-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}

.s-laura .col-left p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 32px;
}

.s-laura .col-right {
  background: var(--blue-emotional);
  padding: 48px 40px;
  border-top: 2px solid var(--gold);
  text-align: center;
}

.s-laura .col-right .quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 20px;
}

.s-laura .col-right .attr {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

/* S5 — Guía gratuita */
.s-guia {
  background: var(--blue-emotional);
  padding: 80px 40px;
  text-align: center;
}

.s-guia h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.s-guia p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 440px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

/* S6 — Footer */
.s-footer {
  background: var(--cream-light);
  padding: 56px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.s-footer .tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.4;
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--gold-light);
  padding-bottom: 28px;
}

.s-footer .col-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.s-footer .col-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-footer .col-links a {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.s-footer .col-links a:hover {
  color: var(--gold);
}

.newsletter-form {
  display: flex;
  gap: 0;
  margin-top: 4px;
}

.newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--gold-light);
  border-right: none;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  background: var(--white-off);
  color: var(--text-dark);
  outline: none;
}

.newsletter-form input::placeholder {
  color: var(--text-light);
}

.newsletter-form button {
  padding: 10px 16px;
  background: var(--btn-warm);
  color: var(--white-off);
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.newsletter-form button:hover {
  background: var(--gold);
}

.s-footer .copyright {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-light);
  grid-column: 1 / -1;
  border-top: 1px solid var(--gold-light);
  padding-top: 20px;
}

/* ============================================================
   El Método — secciones específicas
   ============================================================ */

/* S1 · Hero */
.metodo-hero {
  background: var(--blue-emotional);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 60px 80px;
}

.metodo-hero .breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 40px;
  text-decoration: none;
}

.metodo-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 24px;
}

.metodo-hero h1 em {
  font-style: italic;
}

.metodo-hero .subhead {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 560px;
}

/* S2 · Qué es */
.metodo-que-es {
  background: var(--white-off);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.metodo-que-es .col-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 24px;
}

.metodo-que-es .col-left p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 10px;
}

.metodo-que-es .col-right {
  background: var(--cream);
  padding: 36px 32px;
  border-top: 2px solid var(--gold);
}

.metodo-que-es .col-right .frase {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.6;
}

/* S3 · Triángulo Esencial */
.metodo-triangulo {
  background: var(--blue-emotional);
  padding: 80px 60px;
}

.metodo-triangulo .intro {
  text-align: center;
  margin-bottom: 48px;
}

.metodo-triangulo .intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.metodo-triangulo .intro .trio {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--text-mid);
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.metodo-triangulo .intro .trio .sep {
  color: var(--gold);
  font-style: normal;
  font-size: 18px;
}

.vertices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vertice-card {
  background: var(--white-off);
  padding: 36px 28px;
  border-top: 2px solid var(--gold);
}

.vertice-card .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
}

.vertice-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.vertice-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

.metodo-triangulo .cierre {
  text-align: center;
  margin-top: 40px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--text-mid);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* S4 · Qué no es */
.metodo-no-es {
  background: var(--cream-light);
  padding: 80px 60px;
}

.metodo-no-es .intro-text {
  max-width: 600px;
  margin-bottom: 40px;
}

.metodo-no-es .intro-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.metodo-no-es .intro-text p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

.no-es-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.no-es-card {
  background: var(--white-off);
  padding: 28px 24px;
  border-left: 2px solid var(--gold);
}

.no-es-card.full {
  grid-column: 1 / -1;
}

.no-es-card .titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 10px;
}

.no-es-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* S5 · Las 6 Fases Madre */
.metodo-fases {
  background: var(--blue-emotional);
  padding: 80px 60px;
}

.metodo-fases .intro {
  text-align: center;
  margin-bottom: 48px;
}

.metodo-fases .intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.metodo-fases .intro p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  font-style: italic;
}

.fases-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fase-card {
  background: var(--white-off);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
}

.fase-card .fase-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

.fase-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.fase-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* S6 · Pilares Conceptuales */
.metodo-pilares {
  background: var(--white-off);
  padding: 80px 60px;
  text-align: center;
}

.metodo-pilares h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 40px;
}

.pilares-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.pilar-card {
  background: var(--cream);
  padding: 28px 20px;
  text-align: center;
  border-top: 2px solid var(--gold);
}

.pilar-card .pilar-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 12px;
}

.pilar-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.4;
}

/* S7 · Frase de cierre */
.metodo-cierre {
  background: var(--blue-emotional);
  padding: 80px 60px;
  text-align: center;
}

.metodo-cierre blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}

.metodo-cierre blockquote em {
  color: var(--gold);
  font-style: normal;
}

/* S8 · El Ecosistema */
.metodo-ecosistema {
  background: var(--cream);
  padding: 80px 60px;
}

.metodo-ecosistema .intro {
  margin-bottom: 40px;
}

.metodo-ecosistema .intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.metodo-ecosistema .intro p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 600px;
}

.ramas-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rama-fila {
  background: var(--white-off);
  padding: 20px 28px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  border-left: 2px solid var(--gold);
}

.rama-fila .rama-nombre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
}

.rama-fila p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
}

.rama-fila .badge-proximamente {
  margin-top: 6px;
}

/* S9 · CTA final */
.metodo-cta {
  background: var(--cream-light);
  padding: 64px 80px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   Laura & Hope — secciones específicas
   ============================================================ */

/* S1 · Apertura (Hero) */
.lh-hero {
  background: var(--cream);
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 60px 80px;
}

.lh-hero .etiqueta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 40px;
}

.lh-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 32px;
}

.lh-hero .subhead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
}

/* S2 · Laura */
.lh-laura {
  background: var(--white-off);
  padding: 72px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.lh-laura .col-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 32px;
}

.lh-laura .col-left p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 12px;
}

.lh-laura .col-right {
  background: var(--cream-light);
  padding: 40px 32px;
  border-top: 2px solid var(--gold);
}

.lh-laura .col-right .quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.6;
}

/* S3 · Hope */
.lh-hope {
  background: var(--blue-emotional);
  padding: 72px 60px;
}

.lh-hope h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 40px;
  line-height: 1.2;
}

.lh-hope p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 2;
  margin-bottom: 8px;
  max-width: 600px;
}

.lh-hope .transparencia {
  margin-top: 40px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.6);
  border-left: 2px solid var(--gold);
}

.lh-hope .transparencia p {
  font-size: 15px;
  color: var(--text-mid);
  font-style: italic;
  max-width: none;
  margin-bottom: 0;
}

/* S4 · Carta de Laura */
.lh-carta {
  background: var(--cream);
  padding: 80px 60px;
  text-align: center;
}

.lh-carta .carta {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.lh-carta .carta p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.8;
  margin-bottom: 16px;
}

.lh-carta .firma {
  margin-top: 32px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  color: var(--gold);
}

/* S5 · Cómo trabajamos */
.lh-equipo {
  background: var(--white-off);
  padding: 72px 60px;
}

.lh-equipo h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 48px;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.rol-card {
  padding: 32px 24px;
  border-top: 2px solid var(--gold);
}

.rol-card .rol-nombre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.rol-card .rol-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* S6 · Documento Fundacional */
.lh-documento {
  background: var(--blue-emotional);
  padding: 72px 60px;
  text-align: center;
}

.lh-documento h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 24px;
  line-height: 1.2;
}

.lh-documento p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto;
}

/* S7 · CTA */
.lh-cta {
  background: var(--cream-light);
  padding: 64px 60px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   Emotional Tech Method™ — secciones específicas
   ============================================================ */

/* Botón Tech primario (azul acero) */
.btn-tech {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 32px;
  background: var(--tech-blue);
  color: var(--white-off);
  border: 1px solid var(--tech-blue);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-tech:hover {
  background: var(--tech-blue-light);
  border-color: var(--tech-blue-light);
  color: var(--white-off);
}

/* Botón back (sin borde, texto claro) */
.btn-back {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--text-light);
  padding: 14px 0;
  text-decoration: none;
  transition: color 0.2s;
}

.btn-back:hover {
  color: var(--tech-blue);
}

/* Botón Events primario (burdeos) */
.btn-events {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 32px;
  background: var(--burgundy);
  color: var(--white-off);
  border: 1px solid var(--burgundy);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-events:hover {
  background: var(--burgundy-light);
  border-color: var(--burgundy-light);
  color: var(--white-off);
}

/* Label Events (burdeos) */
.em-label-events {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 20px;
  display: block;
}

/* Label tech (azul) */
.em-label-tech {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tech-blue);
  margin-bottom: 20px;
  display: block;
}

/* S1 · Hero */
.tech-hero {
  background: var(--white-off);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 60px 80px;
}

.tech-hero .breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tech-blue);
  margin-bottom: 40px;
  text-decoration: none;
}

.tech-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 54px;
  font-weight: 300;
  color: var(--tech-blue);
  line-height: 1.15;
  margin-bottom: 8px;
}

.tech-hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.tech-hero .subhead {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto 48px;
}

.tech-hero .ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* S2 · Banda Claim */
.tech-banda {
  background: var(--blue-emotional);
  padding: 40px 80px;
  text-align: center;
  border-top: 1px solid var(--tech-node);
  border-bottom: 1px solid var(--tech-node);
}

.tech-banda p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--tech-blue);
  line-height: 1.5;
}

/* S3 · Qué es */
.tech-que-es {
  background: var(--white-off);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.tech-que-es .col-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--tech-blue);
  line-height: 1.2;
  margin-bottom: 24px;
}

.tech-que-es .col-left p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 12px;
}

.tech-que-es .col-left .espejo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--tech-blue);
  margin: 20px 0;
  line-height: 1.5;
}

.tech-que-es .col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cajita-tech {
  background: var(--blue-emotional);
  padding: 32px 28px;
  border-top: 2px solid var(--tech-blue);
}

.cajita-tech .titulo-cajita {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tech-blue);
  margin-bottom: 16px;
}

.cajita-tech p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 6px;
}

.cajita-tech p:last-child {
  margin-bottom: 0;
}

/* S4 · Qué no es */
.tech-no-es {
  background: var(--blue-emotional);
  padding: 80px 60px;
}

.tech-no-es h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--tech-blue);
  margin-bottom: 32px;
}

.tech-no-es .no-es-bloque {
  background: var(--white-off);
  padding: 36px 40px;
  border-left: 3px solid var(--gold);
}

.tech-no-es .no-es-bloque p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 2;
  margin-bottom: 4px;
}

.tech-no-es .no-es-bloque .cierre {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gold-light);
  font-size: 16px;
  font-weight: 400;
  color: var(--tech-blue);
  line-height: 1.7;
}

/* S5 · Las 6 Fases */
.tech-fases {
  background: var(--white-off);
  padding: 80px 60px;
}

.tech-fases .intro {
  text-align: center;
  margin-bottom: 48px;
}

.tech-fases .intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--tech-blue);
  margin-bottom: 8px;
}

.tech-fases .intro p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-light);
  font-style: italic;
}

.tech-fases .fases-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fase-tech {
  background: var(--blue-emotional);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
}

.fase-tech .fase-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

.fase-tech h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--tech-blue);
  margin-bottom: 6px;
}

.fase-tech p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

.tech-fases .frase-cierre {
  background: var(--white-off);
  padding: 28px 32px 28px 116px;
  border-left: 3px solid var(--gold);
  margin-top: 2px;
}

.tech-fases .frase-cierre p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  color: var(--tech-blue);
  line-height: 1.6;
}

/* S6 · Caso Fundacional */
.tech-caso {
  background: var(--blue-emotional);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.tech-caso .col-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--tech-blue);
  line-height: 1.2;
  margin-bottom: 24px;
}

.tech-caso .col-left p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 12px;
}

.tech-caso .col-right {
  background: var(--white-off);
  padding: 36px 32px;
  border-top: 2px solid var(--gold);
}

.tech-caso .col-right .quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.7;
}

/* S7 · Para quién */
.tech-para-quien {
  background: var(--white-off);
  padding: 80px 60px;
  text-align: center;
}

.tech-para-quien h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--tech-blue);
  margin-bottom: 40px;
}

.tech-para-quien .perfiles-grid {
  grid-template-columns: repeat(2, 1fr);
}

.perfiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.perfil-card {
  background: var(--blue-emotional);
  padding: 32px 24px;
  border-top: 2px solid var(--tech-blue);
}

.perfil-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 300;
  color: var(--tech-blue);
  margin-bottom: 12px;
  line-height: 1.3;
}

.perfil-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* S8 · Guía gratuita */
.tech-guia {
  background: var(--blue-emotional);
  padding: 80px;
  text-align: center;
}

.tech-guia h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--tech-blue);
  line-height: 1.2;
  margin-bottom: 16px;
}

.tech-guia p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.8;
}

/* S9 · Contacto */
.tech-contacto {
  background: var(--white-off);
  padding: 80px;
  text-align: center;
}

.tech-contacto h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--tech-blue);
  margin-bottom: 16px;
}

.tech-contacto p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  margin-bottom: 36px;
  line-height: 1.8;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.tech-contacto .ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
   Emotional Events Method™ — Rama 01
   ══════════════════════════════════════════════════════════ */

/* S1 · Hero */
.ee-hero {
  background: var(--cream);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 60px 80px;
}

.ee-hero .breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 40px;
  text-decoration: none;
}

.ee-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px;
  font-weight: 300;
  color: var(--burgundy);
  line-height: 1.2;
  margin-bottom: 24px;
}

.ee-hero .subhead {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 48px;
}

.ee-hero .ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* S2 · Banda Claim */
.ee-banda {
  background: var(--cream-warm);
  padding: 40px 80px;
  text-align: center;
  border-top: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
}

.ee-banda p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--burgundy);
  line-height: 1.5;
}

/* S3 · Qué es */
.ee-que-es {
  background: var(--white-off);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.ee-que-es .col-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--burgundy);
  line-height: 1.2;
  margin-bottom: 24px;
}

.ee-que-es .col-left p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 10px;
}

.ee-que-es .col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cajita-frase {
  background: var(--cream);
  padding: 32px 28px;
  border-top: 2px solid var(--gold);
}

.cajita-frase p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.7;
}

.cajita-cta {
  background: var(--cream-light);
  padding: 24px 28px;
  border-top: 2px solid var(--burgundy);
  text-align: center;
}

.cajita-cta .cta-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--burgundy);
  margin-bottom: 8px;
}

.cajita-cta .cta-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-light);
  font-style: italic;
  margin-top: 8px;
}

/* S4 · Las 5 Fases */
.ee-fases {
  background: var(--cream-light);
  padding: 80px 60px;
}

.ee-fases .intro {
  text-align: center;
  margin-bottom: 48px;
}

.ee-fases .intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--burgundy);
  margin-bottom: 8px;
}

.fase-event {
  background: var(--white-off);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
}

.fase-event .fase-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

.fase-event h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--burgundy);
  margin-bottom: 6px;
}

.fase-event p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

.ee-fases .fase-frase {
  background: var(--cream);
  padding: 20px 32px 20px 116px;
  border-left: 2px solid var(--gold);
}

.ee-fases .fase-frase p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.7;
}

/* S5 · Para quién */
.ee-para-quien {
  background: var(--cream);
  padding: 80px 60px;
  text-align: center;
}

.ee-para-quien h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--burgundy);
  margin-bottom: 40px;
}

.perfil-event {
  background: var(--white-off);
  padding: 32px 24px;
  border-top: 2px solid var(--burgundy);
  text-align: left;
}

.perfil-event h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--burgundy);
  margin-bottom: 12px;
  line-height: 1.3;
}

.perfil-event p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* S6 · Contacto */
.ee-contacto {
  background: var(--cream-light);
  padding: 80px;
  text-align: center;
}

.ee-contacto h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--burgundy);
  line-height: 1.3;
  margin-bottom: 20px;
}

.ee-contacto p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 36px;
}

.ee-contacto .ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  .em-nav__links {
    display: none;
  }

  .em-nav__burger {
    display: flex;
  }

  .em-nav__mobile {
    display: flex;
  }

  .em-nav__inner {
    padding: 0 24px;
  }

  /* Home */
  .s-hero h1 {
    font-size: 38px;
  }

  .s-que-es h2 {
    font-size: 34px;
  }

  .s-ramas {
    padding: 60px 24px;
  }

  .ramas-grid {
    grid-template-columns: 1fr;
  }

  .s-laura {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 24px;
  }

  .s-guia h2 {
    font-size: 30px;
  }

  .s-footer {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    gap: 32px;
  }

  .s-footer .tagline,
  .s-footer .copyright {
    grid-column: 1;
  }

  /* El Método */
  .metodo-hero h1 {
    font-size: 36px;
  }

  .metodo-hero {
    padding: 120px 32px 60px;
  }

  .metodo-que-es {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px;
  }

  .metodo-triangulo {
    padding: 60px 24px;
  }

  .vertices-grid {
    grid-template-columns: 1fr;
  }

  .metodo-no-es {
    padding: 60px 24px;
  }

  .no-es-grid {
    grid-template-columns: 1fr;
  }

  .no-es-card.full {
    grid-column: 1;
  }

  .metodo-fases {
    padding: 60px 24px;
  }

  .metodo-pilares {
    padding: 60px 24px;
  }

  .pilares-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metodo-cierre {
    padding: 60px 24px;
  }

  .metodo-cierre blockquote {
    font-size: 24px;
  }

  .metodo-ecosistema {
    padding: 60px 24px;
  }

  .rama-fila {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .metodo-cta {
    padding: 48px 24px;
  }

  /* Laura & Hope */
  .lh-hero {
    padding: 120px 32px 60px;
  }

  .lh-hero h1 {
    font-size: 34px;
  }

  .lh-hero .subhead {
    font-size: 19px;
  }

  .lh-laura {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px;
  }

  .lh-hope {
    padding: 60px 24px;
  }

  .lh-hope h2 {
    font-size: 32px;
  }

  .lh-carta {
    padding: 60px 24px;
  }

  .lh-equipo {
    padding: 60px 24px;
  }

  .roles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lh-documento {
    padding: 60px 24px;
  }

  .lh-documento h2 {
    font-size: 32px;
  }

  .lh-cta {
    padding: 48px 24px;
  }

  /* Emotional Tech */
  .tech-hero {
    padding: 120px 32px 60px;
  }

  .tech-hero h1 {
    font-size: 38px;
  }

  .tech-banda {
    padding: 32px 24px;
  }

  .tech-que-es {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px;
  }

  .tech-no-es {
    padding: 60px 24px;
  }

  .tech-no-es h2 {
    font-size: 30px;
  }

  .tech-fases {
    padding: 60px 24px;
  }

  .tech-fases .frase-cierre {
    padding: 24px 24px 24px 60px;
  }

  .tech-caso {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px;
  }

  .tech-para-quien {
    padding: 60px 24px;
  }

  .perfiles-grid {
    grid-template-columns: 1fr;
  }

  .tech-guia {
    padding: 60px 24px;
  }

  .tech-guia h2 {
    font-size: 30px;
  }

  .tech-contacto {
    padding: 60px 24px;
  }

  /* Emotional Events */
  .ee-hero {
    padding: 120px 32px 60px;
  }

  .ee-hero h1 {
    font-size: 38px;
  }

  .ee-banda {
    padding: 32px 24px;
  }

  .ee-que-es {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px;
  }

  .ee-fases {
    padding: 60px 24px;
  }

  .ee-fases .fase-frase {
    padding: 20px 24px 20px 60px;
  }

  .ee-para-quien {
    padding: 60px 24px;
  }

  .ee-para-quien h2 {
    font-size: 30px;
  }

  .ee-contacto {
    padding: 60px 24px;
  }

  .ee-contacto h2 {
    font-size: 30px;
  }
}

@media (max-width: 600px) {
  .s-hero h1 {
    font-size: 30px;
  }

  .s-hero {
    padding: 60px 24px;
    min-height: 100svh;
  }

  .s-que-es {
    padding: 60px 24px;
  }

  .s-guia {
    padding: 60px 24px;
  }

  .btn-p,
  .btn-s {
    padding: 12px 24px;
    font-size: 12px;
  }

  .metodo-hero h1 {
    font-size: 28px;
  }

  .metodo-cierre blockquote {
    font-size: 20px;
  }

  .pilares-grid {
    grid-template-columns: 1fr;
  }

  .lh-hero h1 {
    font-size: 28px;
  }

  .lh-hero .subhead {
    font-size: 17px;
  }

  .lh-carta .carta p {
    font-size: 19px;
  }

  .tech-hero h1 {
    font-size: 28px;
  }

  .tech-banda p {
    font-size: 20px;
  }

  .tech-fases .frase-cierre {
    padding: 20px 20px 20px 44px;
  }

  .ee-hero h1 {
    font-size: 30px;
  }

  .ee-banda p {
    font-size: 20px;
  }

  .ee-fases .fase-frase {
    padding: 16px 20px 16px 44px;
  }
}