/* =========================================================
   ESCUCHATUSER - STYLESHEET OPTIMIZADO
   ========================================================= */

/* VARIABLES */

:root {
  --bg: #f7f4ef;
  --bg-soft: #fdfaf5;
  --white: #ffffff;

  --text: #22201d;
  --muted: #6e665e;

  --primary: #355443;
  --primary-dark: #263c30;

  --line: #e7ddd2;

  --radius-sm: 18px;
  --radius-md: 28px;
  --radius-lg: 38px;
  --radius-xl: 42px;

  --shadow-soft: 0 10px 40px rgba(40, 35, 28, 0.06);
  --shadow-medium: 0 24px 70px rgba(40, 35, 28, 0.08);
  --shadow-premium: 0 34px 100px rgba(40, 35, 28, 0.12);

  --max-width: 1180px;
  --transition: 0.3s ease;
}


/* RESET */

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

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background: linear-gradient(to bottom, #f8f5f0, #f3efe8);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(247,244,239,0.82), rgba(247,244,239,0.75)),
    url("../img/background-calm.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: scale(1.02);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at bottom left, rgba(53,84,67,0.05), transparent 45%);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}


/* LAYOUT */

.container,
.container-narrow {
  width: 100%;
  margin: auto;
  padding-inline: 24px;
}

.container {
  max-width: var(--max-width);
}

.container-narrow {
  max-width: 920px;
}

.section {
  padding: 90px 24px;
}

.panel,
.glass-panel {
  background: rgba(255, 250, 245, 0.82);
  border: 1px solid rgba(53,84,67,0.12);
  border-radius: var(--radius-md);
  padding: clamp(34px, 5vw, 70px);
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(10px);
}


/* HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(247,244,239,0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(231,221,210,0.7);
  box-shadow: 0 8px 30px rgba(40,35,28,0.04);
}

.nav {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 82px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.menu a,
.menu button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}

.menu a:hover,
.menu a.active,
.menu button:hover,
.menu button.active {
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.home-link {
  min-width: 46px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.menu-toggle,
.menu-icon {
  display: none;
}


/* BOTONES */

.btn,
.nav-cta {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 600;
  transition: var(--transition);
}

.nav-cta,
.btn.primary {
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}

.nav-cta:hover,
.btn.primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.btn {
  border: 1px solid rgba(53,84,67,0.15);
  background: rgba(255,255,255,0.76);
  color: var(--text);
  backdrop-filter: blur(8px);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

.btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.space-buttons {
  justify-content: flex-start;
  margin-top: 34px;
}


/* TIPOGRAFÍA */

.section-label,
.mini-label {
  color: var(--primary);
  font-weight: 800;
}

.section-label {
  margin-bottom: 16px;
}

.mini-label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section h2,
.section-heading h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.06em;
  margin-bottom: 24px;
}

.section-heading {
  max-width: 780px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-heading h2 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  margin-bottom: 16px;
}

.section-heading p,
.lead {
  color: var(--muted);
  font-size: 1.08rem;
}

.lead {
  max-width: 780px;
  font-size: 1.15rem;
}

.lead-text {
  max-width: 560px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.9;
}


/* HOME HERO */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px 100px;
  overflow: hidden;
  background:
    linear-gradient(rgba(247,244,239,0.70), rgba(247,244,239,0.80)),
    url("../img/hero-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  backdrop-filter: blur(2px);
  padding-top: 40px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 28px;
  border-radius: 999px;
  border: 1px solid rgba(53,84,67,0.12);
  background: rgba(255,255,255,0.58);
  color: #4e4740;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 35px rgba(40,35,28,0.05);
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.hero h1 {
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
  margin-bottom: 30px;
  color: #1f1d1a;
  text-shadow: 0 2px 18px rgba(255,255,255,0.35);
}

.hero h2 {
  font-size: clamp(1.7rem, 3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  margin-bottom: 24px;
  color: #2e2a26;
}

.hero p {
  max-width: 760px;
  margin: auto auto 36px;
  color: #5f5850;
  font-size: 1.15rem;
  line-height: 1.9;
}


/* INTRO EMOCIONAL */

.intro-emotional {
  position: relative;
  padding: 120px 24px 110px;
  overflow: hidden;
  background:
    linear-gradient(rgba(247,244,239,0.93), rgba(247,244,239,0.95)),
    url("../img/intro-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.intro-emotional::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(247,244,239,0.25) 100%);
  pointer-events: none;
}

.intro-background {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.intro-wrap {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.intro-title {
  max-width: 980px;
  margin: 0 auto 42px;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.075em;
  font-weight: 600;
  color: #1f1d1a;
  text-wrap: balance;
}

.intro-divider,
.gestalt-divider {
  width: 70px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}

.intro-divider {
  width: 56px;
  margin: 0 auto 42px;
}

.gestalt-divider {
  margin: 26px 0 34px;
}

.gestalt-divider.center {
  margin: 34px auto 40px;
}

.intro-text {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 34px;
  color: #5c554d;
  font-size: 1.22rem;
  line-height: 1.95;
}


/* GRIDS GENERALES */

.grid-2,
.hub-grid,
.support-image-grid,
.steps,
.contact-box {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.hub-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.support-image-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.contact-box {
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}


/* HUB CARDS */

.hub-card {
  overflow: hidden;
  border-radius: 30px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(53,84,67,0.12);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.hub-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-premium);
}

.hub-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  background: #ece7e1;
  transition: transform 0.6s ease;
}

.hub-card:hover img {
  transform: scale(1.04);
}

.hub-card-body {
  position: relative;
  padding: 34px;
}

.hub-icon {
  position: absolute;
  top: -28px;
  left: 34px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3f7f4;
  color: var(--primary);
  box-shadow: 0 8px 24px rgba(53,84,67,0.12);
}

.hub-card h3 {
  margin: 18px 0;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.hub-card p {
  margin-bottom: 18px;
  color: var(--muted);
}

.hub-card ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
}

.hub-card li {
  color: var(--text);
  font-size: 0.96rem;
}

.hub-card li::before {
  content: "○";
  color: var(--primary);
  margin-right: 8px;
}

.hub-card a {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  transition: var(--transition);
}

.hub-card a:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}


/* SUPPORT CARDS */

.support-section {
  position: relative;
  overflow: hidden;
}

.support-section::before {
  content: "";
  position: absolute;
  inset: 80px auto auto 50%;
  width: 720px;
  height: 720px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,84,67,0.08), transparent 68%);
  pointer-events: none;
}

.support-heading,
.support-image-grid {
  position: relative;
  z-index: 2;
}

.seo-card {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  overflow: hidden;
  border-radius: 30px;
}

.seo-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02) brightness(0.88);
  transition: transform 0.6s ease;
}

.seo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(22,20,18,0.72),
    rgba(22,20,18,0.22),
    rgba(247,244,239,0.04)
  );
}

.seo-card:hover > img {
  transform: scale(1.04);
}

.support-card-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  color: var(--white);
}

.support-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: var(--primary);
  font-weight: 800;
  font-size: 1.05rem;
}

.seo-card h3,
.support-card-content strong {
  font-size: 1.55rem;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
}

.seo-card p,
.support-card-content small {
  max-width: 280px;
  color: rgba(255,255,255,0.88);
  font-size: 0.98rem;
  line-height: 1.5;
}

.support-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.92rem;
  transition: var(--transition);
}

.support-link:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}


/* DESPLEGABLE */

.support-dropdown {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding-inline: 28px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    grid-template-rows 0.65s cubic-bezier(.22,.61,.36,1),
    opacity 0.45s ease,
    transform 0.45s ease,
    padding 0.45s ease;
}

.support-dropdown-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 16px;
}

.support-image-card[open] .support-dropdown {
  grid-template-rows: 1fr;
  padding: 26px 28px 32px;
  opacity: 1;
  transform: translateY(0);
}

.support-image-card[open] summary {
  min-height: 300px;
}

.support-image-card[open] summary::after {
  content: "Cerrar";
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
}


/* EL ESPACIO / SOBRE MI HERO */

.space-hero-split {
  padding: 140px 24px 90px;
}

.space-hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.space-hero-copy h1 {
  margin-top: 18px;
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.space-hero-copy p {
  max-width: 620px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 1.18rem;
  line-height: 1.9;
}

.space-hero-image {
  position: relative;
  overflow: hidden;
  height: 620px;
  border-radius: 34px;
  background: rgba(255,255,255,0.42);
  box-shadow:
    0 30px 80px rgba(0,0,0,.10),
    0 10px 30px rgba(0,0,0,.05);
  transform: translateY(20px);
  transition: var(--transition);
}

.space-hero-image:hover {
  transform: translateY(14px);
  box-shadow:
    0 40px 100px rgba(0,0,0,.14),
    0 14px 40px rgba(0,0,0,.07);
}

.space-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 34px;
  filter: saturate(.92) contrast(.96) brightness(.98);
  transform: scale(1.01);
  transition: transform 1.2s ease, filter .8s ease;
}

.space-hero-image:hover img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1) brightness(1);
}

.space-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background:
    linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,.02) 40%, rgba(255,255,255,.03));
  pointer-events: none;
}

.space-statement p {
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.07em;
  text-align: center;
  font-weight: 700;
  color: var(--text);
}


/* SOBRE MÍ */

.about-presence-section {
  padding-top: 40px;
}

.about-presence-panel {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  padding: clamp(30px, 5vw, 72px);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow: var(--shadow-premium);
}

.about-presence-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.about-presence-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) contrast(0.92) brightness(0.92);
  transform: scale(1.02);
}

.about-presence-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(247,244,239,0.92) 0%, rgba(247,244,239,0.78) 42%, rgba(247,244,239,0.22) 100%),
    linear-gradient(to top, rgba(20,20,20,0.22), transparent 55%);
}

.about-presence-content {
  position: relative;
  z-index: 3;
  max-width: 620px;
}

.about-presence-content h2 {
  margin-top: 14px;
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.about-presence-content h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 30px 0 34px;
  border-radius: 999px;
  background: var(--primary);
}

.about-presence-lead {
  max-width: 560px;
  color: #403b35;
  font-size: 1.18rem;
  line-height: 1.9;
  margin-bottom: 30px;
}

.about-presence-text {
  display: grid;
  gap: 18px;
}

.about-presence-text p {
  max-width: 560px;
  color: #5c554d;
  font-size: 1.02rem;
  line-height: 1.9;
}


/* SPACE CALM */

.space-calm-section {
  padding-top: 60px;
}

.space-calm-panel {
  padding: clamp(36px, 6vw, 80px);
  border-radius: var(--radius-lg);
  background: rgba(255,250,245,0.82);
  border: 1px solid rgba(53,84,67,0.12);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(14px);
}

.space-calm-main {
  max-width: 880px;
  margin: 0 auto 46px;
  text-align: center;
}

.space-calm-main h2 {
  margin-top: 14px;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.075em;
}

.space-calm-main p {
  max-width: 720px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.9;
}

.space-calm-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.space-calm-cards article {
  padding: 28px;
  border-radius: 26px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(53,84,67,0.10);
}

.space-calm-cards h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.space-calm-cards p {
  color: var(--muted);
  line-height: 1.7;
}


/* GESTALT */

.gestalt-hero-full {
  position: relative;
  overflow: hidden;
  padding: 180px 24px 140px;
  background:
    linear-gradient(rgba(247,244,239,0.82), rgba(247,244,239,0.90)),
    url("../img/enfoque-gestalt.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gestalt-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.04), rgba(247,244,239,0.22));
  backdrop-filter: blur(1px);
}

.gestalt-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.gestalt-content h1 {
  margin-top: 18px;
  font-size: clamp(3.4rem, 6vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: -0.08em;
}

.gestalt-text {
  display: grid;
  gap: 34px;
  margin-top: 40px;
  color: #564f48;
  font-size: 1.16rem;
  line-height: 2;
}

.gestalt-text p {
  max-width: 760px;
  margin: 0 auto;
}

.gestalt-hero-clean {
  min-height: 82vh;
  display: flex;
  align-items: center;
}

.gestalt-hero-lead {
  max-width: 720px;
  margin: 34px auto 0;
  color: #4f4841;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.8;
}

.gestalt-reading-section {
  margin-top: -80px;
  position: relative;
  z-index: 5;
}

.gestalt-reading-card {
  padding: clamp(34px, 6vw, 76px);
  border-radius: 34px;
  background: rgba(255,250,245,0.92);
  border: 1px solid rgba(53,84,67,0.12);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(16px);
}

.reading-intro {
  margin-bottom: 46px;
  color: var(--text);
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.055em;
}

.reading-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 38px;
}

.reading-grid p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.85;
}

.gestalt-awareness-section {
  padding-top: 40px;
}

.gestalt-awareness-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-premium);
}

.gestalt-awareness-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}

.gestalt-awareness-image {
  position: relative;
  overflow: hidden;
  height: 360px;
  border-radius: var(--radius-md);
  background: #e8e2d8;
  box-shadow: var(--shadow-medium);
}

.gestalt-awareness-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s ease;
}

.gestalt-awareness-panel:hover .gestalt-awareness-image img {
  transform: scale(1.03);
}

.gestalt-awareness-content h2 {
  margin-top: 14px;
  max-width: 580px;
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.gestalt-text-flow {
  display: grid;
  gap: 24px;
}

.gestalt-text-flow p {
  max-width: 580px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 2;
}

.gestalt-mirror-box {
  text-align: center;
}

.gestalt-mirror-box h2 {
  margin-bottom: 24px;
}

.gestalt-mirror-box p {
  max-width: 760px;
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.9;
}


/* CONTACTO */

.contact-premium-section {
  position: relative;
  z-index: 2;
  padding-top: 120px;
}

.contact-premium-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(34px,5vw,70px);
  align-items: center;
  padding: clamp(30px,5vw,68px);
  border-radius: var(--radius-xl);
  background: rgba(255,250,245,0.72);
  border: 1px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-premium);
}

.contact-premium-image {
  position: relative;
  overflow: hidden;
  height: 560px;
  border-radius: 34px;
  box-shadow: var(--shadow-premium);
}

.contact-premium-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1s ease, filter 0.8s ease;
}

.contact-premium-image:hover img {
  transform: scale(1.05);
  filter: saturate(.92) contrast(.98) brightness(1.04);
}

.contact-premium-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(53,84,67,.12), rgba(255,255,255,.03));
  pointer-events: none;
}

.contact-premium-content {
  position: relative;
  z-index: 2;
}

.contact-premium-content h1 {
  margin-top: 14px;
  color: var(--text);
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.contact-premium-content h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 30px 0 34px;
  border-radius: 999px;
  background: var(--primary);
}

.contact-premium-content > p {
  max-width: 620px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.9;
}

.contact-form,
.contact-form-grid {
  display: grid;
  gap: 20px;
}

.contact-form-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}

.contact-form-grid .full,
.contact-submit {
  grid-column: 1 / -1;
}

.hidden-field {
  display: none;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  color: var(--primary);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(53,84,67,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.76);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: var(--transition);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: rgba(53,84,67,.42);
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 0 4px rgba(53,84,67,.08);
  transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(90,84,76,.62);
}

.contact-form .btn,
.contact-submit {
  width: fit-content;
  min-width: 220px;
  margin-top: 8px;
}

.contact-note {
  margin-top: 28px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.8;
}

.contact-note a {
  color: var(--primary-dark);
  font-weight: 800;
  transition: var(--transition);
}

.contact-note a:hover {
  opacity: .7;
}


/* GRACIAS */

.thanks-section {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 120px;
}

.thanks-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(40px,6vw,90px);
  border-radius: var(--radius-xl);
  background: rgba(255,250,245,.72);
  border: 1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-premium);
}

.thanks-glow {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(rgba(53,84,67,.10), transparent 70%);
  pointer-events: none;
}

.thanks-panel h1 {
  margin-top: 18px;
  color: var(--text);
  font-size: clamp(3.4rem,8vw,6.5rem);
  line-height: .92;
  letter-spacing: -.08em;
}

.thanks-lead {
  margin-bottom: 24px;
  color: var(--text);
  font-size: 1.18rem;
}

.thanks-panel p {
  max-width: 720px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.95;
}

.thanks-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 44px;
}


/* =========================================================
   ESPACIOS HERO PREMIUM
========================================================= */

.spaces-hero-premium {
  padding: 150px 0 90px;
}

.spaces-hero-panel {
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(44px, 6vw, 90px);
  padding: clamp(46px, 6vw, 80px);
  min-height: 640px;
}

.spaces-hero-copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.9rem);

  line-height: 1.02;

  letter-spacing: -0.06em;

  max-width: 500px;

  margin-bottom: 26px;
}

.spaces-hero-copy p {
  max-width: 520px;
}

.spaces-hero-image {
  min-height: 520px;
}

.spaces-hero-image img {
  min-height: 520px;
}

.spaces-hero-image img {
  min-height: 470px;
  object-position: center;
}
.spaces-hero-panel:hover .spaces-hero-image img {
  transform: scale(1.035);
  filter: saturate(1.02) contrast(1.02);
}

.space-buttons {
  justify-content: flex-start;
  margin-top: 38px;
}

/* RESPONSIVE */

@media (max-width: 980px) {
  .spaces-hero-panel {
    grid-template-columns: 1fr;
  }

  .spaces-hero-image,
  .spaces-hero-image img {
    min-height: 330px;
  }
}

@media (max-width: 640px) {
  .spaces-hero-premium {
    padding: 120px 0 70px;
  }

  .spaces-hero-panel {
    padding: 28px;
    border-radius: 30px;
  }

  .spaces-hero-copy h1 {
    font-size: 2.9rem;
  }

  .spaces-hero-image,
  .spaces-hero-image img {
    min-height: 260px;
    border-radius: 24px;
  }

  .space-buttons {
    justify-content: stretch;
  }

  .space-buttons .btn {
    width: 100%;
  }
}
/* ESPACIOS */

.spaces-hero {
  position: relative;
  z-index: 2;
  padding: 170px 0 90px;
}

.spaces-hero-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 70px;
  border-radius: var(--radius-xl);
  background: rgba(248,244,239,0.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-medium);
}

.spaces-hero-copy h1 {
  max-width: 700px;
  margin-bottom: 30px;
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: .94;
  letter-spacing: -0.065em;
}

.spaces-hero-copy p {
  max-width: 560px;
  color: #5d5a56;
  font-size: 1.15rem;
  line-height: 1.9;
}

.spaces-hero-image img {
  width: 100%;
  border-radius: 32px;
  box-shadow: var(--shadow-medium);
}

.spaces-intro {
  padding-top: 20px;
}

.spaces-intro-text {
  text-align: center;
}

.spaces-intro-text p {
  max-width: 900px;
  margin: 25px auto 0;
  color: #5b5854;
  font-size: 1.25rem;
  line-height: 2;
}

.spaces-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.space-emotion-card {
  overflow: hidden;
  border-radius: 34px;
  background: rgba(248,244,239,0.88);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.space-emotion-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
}

.space-emotion-card.large {
  grid-column: span 2;
}

.space-emotion-card img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center;
}

.space-emotion-content {
  padding: 38px;
}

.space-emotion-content span {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 3px;
}

.space-emotion-content h2 {
  margin-bottom: 22px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -2px;
}

.space-emotion-content p {
  color: #5c5955;
  font-size: 1.04rem;
  line-height: 1.9;
}

.human-space-horizontal {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
  padding: clamp(34px, 5vw, 70px);
  border-radius: var(--radius-xl);
  background: rgba(248,244,239,.88);
  box-shadow: var(--shadow-medium);
}

.human-space-horizontal .human-space-image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
  box-shadow: var(--shadow-medium);
}

.human-space-horizontal .human-space-content {
  max-width: 540px;
}

.human-space-horizontal .human-space-content h2 {
  margin: 16px 0 24px;
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.human-space-horizontal .lead-text {
  margin-bottom: 34px;
  font-size: 1.06rem;
  line-height: 1.85;
}

.human-space-points {
  display: grid;
  gap: 18px;
}

.human-space-points article {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(53,84,67,0.12);
}

.human-space-points h3 {
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.human-space-points p {
  color: var(--muted);
  line-height: 1.7;
}

.detail-human-panel {
  display: grid;
  grid-template-columns: .95fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 60px;
  border-radius: 40px;
  background: rgba(248,244,239,0.88);
  box-shadow: var(--shadow-soft);
}

.detail-human-image img {
  width: 100%;
  border-radius: var(--radius-md);
}

.detail-human-content {
  max-width: 560px;
}

.detail-human-content h2 {
  max-width: 520px;
  margin: 18px 0 24px;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.detail-human-content p {
  max-width: 560px;
  color: #5d5a56;
  font-size: 1.08rem;
  line-height: 2;
}

.space-format-section .panel {
  padding: 70px;
}

.space-format-section h2 {
  margin: 18px 0 30px;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -3px;
}

.space-format-section .lead {
  max-width: 850px;
  margin: auto;
  color: #5b5854;
  font-size: 1.08rem;
  line-height: 2;
}

.spaces-final-card {
  padding: 90px 60px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(53,84,67,.95), rgba(46,70,57,.96));
  color: white;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.14);
}

.spaces-final-card .mini-label {
  color: rgba(255,255,255,.75);
}

.spaces-final-card h2 {
  margin: 18px 0 28px;
  font-size: clamp(2rem, 3.8vw, 4.4rem);
  line-height: .98;
  letter-spacing: -2.5px;
}

.spaces-final-card p {
  max-width: 760px;
  margin: auto auto 40px;
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  line-height: 2;
}

.spaces-final-card .btn.primary {
  background: white;
  color: var(--primary);
}

.spaces-final-card .btn.primary:hover {
  background: #f3ede7;
}


/* FOOTER */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 36px 50px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}


/* UTILIDADES */

.mt-md {
  margin-top: 20px;
}

.mt-lg {
  margin-top: 34px;
}

.fade-in {
  animation: fadeIn 0.45s ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* RESPONSIVE TABLET */

@media (max-width: 1100px) {
  .support-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spaces-hero-panel,
  .human-space-horizontal,
  .detail-human-panel {
    grid-template-columns: 1fr;
  }

  .spaces-journey-grid {
    grid-template-columns: 1fr;
  }

  .space-emotion-card.large {
    grid-column: auto;
  }
}

@media (max-width: 980px) {
  .hub-grid,
  .grid-2,
  .steps,
  .contact-box,
  .space-hero-grid,
  .gestalt-awareness-grid,
  .contact-premium-panel {
    grid-template-columns: 1fr;
  }

  .hub-card img {
    height: 260px;
  }

  .space-hero-image {
    height: 420px;
    transform: none;
    margin-top: 20px;
  }

  .space-hero-image:hover {
    transform: none;
  }

  .gestalt-awareness-image,
  .contact-premium-image,
  .human-space-horizontal .human-space-image img,
  .space-emotion-card img {
    height: 320px;
  }

  .contact-premium-content h1,
  .human-space-horizontal .human-space-content h2 {
    font-size: 3rem;
  }

  .reading-grid,
  .space-calm-cards {
    grid-template-columns: 1fr;
  }

  body::before {
    background-attachment: scroll;
  }
}


@media (max-width: 900px) {

  .nav {
    min-height: 78px;
  }

  .brand-logo {
    height: 64px;
  }

  .nav-cta {
    display: none;
  }

  .menu-icon {
    position: relative;
    z-index: 1002;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
  }

  .menu-icon span {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: var(--primary);
    transition: var(--transition);
  }

  .menu-icon span:nth-child(1) { transform: translateY(-7px); }
  .menu-icon span:nth-child(2) { transform: translateY(0); }
  .menu-icon span:nth-child(3) { transform: translateY(7px); }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1000;

    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(247,244,239,0.98);
    backdrop-filter: blur(20px);

    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);

    transition: 0.35s ease;
  }

  .menu {
    width: 100%;
    max-width: 360px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .menu li {
    width: 100%;
    text-align: center;
  }

  .menu a,
  .menu button {
    width: 100%;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    font-size: 1.25rem;
    font-weight: 700;

    color: var(--text);
    border-radius: 999px;
  }

  .menu a.active {
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .menu-toggle:checked ~ .main-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .menu-toggle:checked + .menu-icon span:nth-child(1) {
    transform: rotate(45deg);
  }

  .menu-toggle:checked + .menu-icon span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked + .menu-icon span:nth-child(3) {
    transform: rotate(-45deg);
  }

  body:has(.menu-toggle:checked) {
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .hero {
    background-position: 68% center;
  }

  .spaces-hero {
    padding-top: 140px;
  }

  .spaces-hero-panel,
  .human-space-horizontal,
  .detail-human-panel,
  .space-format-section .panel,
  .spaces-final-card {
    padding: 34px 26px;
    border-radius: 28px;
  }

  .space-emotion-content {
    padding: 28px;
  }

  .spaces-hero-copy h1,
  .human-space-content h2,
  .detail-human-content h2,
  .space-format-section h2,
  .spaces-final-card h2 {
    letter-spacing: -2px;
  }

  .gestalt-hero-full {
    padding: 140px 18px 90px;
  }

  .gestalt-text {
    gap: 24px;
    font-size: 1.02rem;
    line-height: 1.85;
  }

  .gestalt-reading-section {
    margin-top: -40px;
  }

  .about-presence-panel {
    min-height: auto;
    padding: 34px;
    align-items: flex-start;
  }

  .about-presence-panel::before {
    background:
      linear-gradient(to bottom, rgba(247,244,239,0.94), rgba(247,244,239,0.82));
  }
}

@media (max-width: 720px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-submit,
  .contact-form .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .container,
  .container-narrow {
    padding-inline: 18px;
  }

  .section {
    padding: 70px 18px;
  }

  .panel {
    padding: 30px;
  }

  .hero {
    min-height: auto;
    padding: 120px 18px 80px;
  }

  .hero h1 {
    font-size: 3rem;
    line-height: 0.92;
  }

  .hero h2 {
    font-size: 1.5rem;
    line-height: 1.18;
  }

  .hero p {
    font-size: 1rem;
  }

  .intro-emotional {
    padding: 90px 18px;
  }

  .intro-title {
    font-size: 3rem;
    line-height: 0.98;
  }

  .intro-text {
    gap: 22px;
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.85;
  }

  .hub-card img {
    height: 220px;
  }

  .hub-card-body {
    padding: 28px;
  }

  .hub-icon {
    left: 28px;
  }

  .support-image-grid {
    grid-template-columns: 1fr;
  }

  .support-image-card summary,

  .support-image-card[open] summary {
    min-height: 300px;
  }

  .support-dropdown,
  .support-image-card[open] .support-dropdown {
    padding-inline: 22px;
  }

  .support-image-card[open] .support-dropdown {
    padding-block: 22px 28px;
  }

  .contact-premium-section {
    padding-top: 80px;
  }

  .contact-premium-panel {
    padding: 26px;
    border-radius: 30px;
  }

  .contact-premium-image {
    height: 320px;
    border-radius: 24px;
  }

  .contact-premium-content h1,
  .about-presence-content h2,
  .gestalt-awareness-content h2 {
    font-size: 3rem;
  }

  .thanks-panel {
    padding: 34px 26px;
    border-radius: 30px;
  }

  .thanks-panel h1 {
    font-size: 3.2rem;
  }

  .site-footer {
    flex-direction: column;
  }
}


/* RENDIMIENTO MOVIL */

@media (max-width: 768px) {
  .panel,
  .glass-panel,
  .hub-card,
  .space-calm-panel,
  .contact-premium-panel,
  .thanks-panel,
  .gestalt-reading-card,
  .gestalt-awareness-panel {
    backdrop-filter: none;
  }

  .hub-card,
  .space-emotion-card,
  .human-space-horizontal,
  .detail-human-panel,
  .spaces-hero-panel {
    box-shadow: var(--shadow-soft);
  }
}
/* INTERIOR HUMANO - VERSIÓN EDITORIAL */

.human-space-editorial {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(42px, 6vw, 82px);
  align-items: center;

  padding: clamp(34px, 5vw, 68px);
  border-radius: 42px;

  background: rgba(255,250,245,0.78);
  border: 1px solid rgba(255,255,255,0.52);

  box-shadow:
    0 24px 80px rgba(40,35,28,0.08),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.human-space-editorial .human-space-image img {
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: center;
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(40,35,28,0.12);
}

.human-space-editorial .human-space-content {
  max-width: 500px;
}

.human-space-editorial h2 {
  margin: 14px 0 26px;
  font-size: clamp(2.6rem, 4.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.human-space-editorial .lead-text {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.9;
}

.human-space-quote {
  margin: 28px 0 34px;
  padding: 22px 26px;

  border-left: 3px solid var(--primary);
  border-radius: 0 18px 18px 0;

  background: rgba(255,255,255,0.48);

  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.human-space-editorial .human-space-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.human-space-editorial .human-space-points article {
  padding: 0;
  border: none;
}

.human-space-editorial .human-space-points h3 {
  margin-bottom: 4px;
  font-size: 1.08rem;
}

.human-space-editorial .human-space-points p {
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 980px) {
  .human-space-editorial {
    grid-template-columns: 1fr;
  }

  .human-space-editorial .human-space-image img {
    height: 340px;
  }
}

@media (max-width: 640px) {
  .human-space-editorial {
    padding: 26px;
    border-radius: 28px;
  }

  .human-space-editorial .human-space-image img {
    height: 280px;
    border-radius: 22px;
  }

  .human-space-editorial h2 {
    font-size: 2.4rem;
  }
}
/* =========================================================
   INTERIOR HUMANO - MODERNO
========================================================= */

.human-space-modern {
  overflow: hidden;

  border-radius: 44px;

  background:
    rgba(255,250,245,0.80);

  border:
    1px solid rgba(255,255,255,0.55);

  box-shadow:
    0 28px 90px rgba(40,35,28,0.09),
    inset 0 1px 0 rgba(255,255,255,0.65);

  backdrop-filter: blur(12px);
}

.human-space-modern-image {
  position: relative;
  height: 390px;
  overflow: hidden;
}

.human-space-modern-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(247,244,239,0.18),
      rgba(247,244,239,0.02)
    );

  pointer-events: none;
}

.human-space-modern-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 58%;

  filter:
    saturate(.96)
    contrast(.98)
    brightness(1.02);

  transition:
    transform 1.1s ease,
    filter .8s ease;
}

.human-space-modern:hover .human-space-modern-image img {
  transform: scale(1.025);
  filter:
    saturate(1.02)
    contrast(1.02)
    brightness(1.02);
}
@media (max-width:768px){

  .human-space-modern-image{
    width:100%;
    height:auto !important;
    max-height:none !important;

    aspect-ratio:3 / 2;

    overflow:hidden;
    border-radius:30px;
  }

  .human-space-modern-image img{
    width:100%;
    height:100% !important;
    min-height:0 !important;

    object-fit:cover;
    object-position:center 52%;

    display:block;
    border-radius:30px;
  }

}
.human-space-modern-content {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(34px, 5vw, 70px);

  padding: clamp(36px, 5vw, 64px);
}

.human-space-modern-heading h2 {
  margin-top: 14px;

  font-size: clamp(2.6rem, 4.6vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.065em;

  max-width: 460px;
}

.human-space-modern-text {
  max-width: 720px;
}

.human-space-modern-text .lead-text {
  max-width: 680px;

  color: var(--muted);

  font-size: 1.08rem;
  line-height: 1.9;
}

.human-space-quote {
  margin: 28px 0 34px;
  padding: 22px 26px;

  border-left: 3px solid var(--primary);
  border-radius: 0 18px 18px 0;

  background: rgba(255,255,255,0.52);

  color: var(--primary-dark);

  font-size: 1.18rem;
  font-weight: 750;
  line-height: 1.5;
}

.human-space-points-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.human-space-points-inline article {
  padding-top: 18px;
  border-top: 1px solid rgba(53,84,67,0.12);
  border-bottom: none;
}

.human-space-points-inline h3 {
  margin-bottom: 8px;

  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.human-space-points-inline p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 980px) {
  .human-space-modern-content {
    grid-template-columns: 1fr;
  }

  .human-space-points-inline {
    grid-template-columns: 1fr;
  }

  .human-space-modern-image {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .human-space-modern {
    border-radius: 28px;
  }

  .human-space-modern-image {
    height: 260px;
  }

  .human-space-modern-content {
    padding: 28px;
  }

  .human-space-modern-heading h2 {
    font-size: 2.5rem;
  }
}
/* =========================================================
   COMO FUNCIONA
========================================================= */

.how-hero {
  padding: 150px 0 80px;
  position: relative;
  z-index: 2;
}

.how-hero-panel {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;

  padding: clamp(38px, 6vw, 76px);
  border-radius: 46px;

  background: rgba(255,250,245,0.82);
  border: 1px solid rgba(255,255,255,0.55);

  box-shadow:
    0 30px 90px rgba(40,35,28,0.10),
    inset 0 1px 0 rgba(255,255,255,0.65);

  backdrop-filter: blur(12px);
}

.how-hero-content h1 {
  max-width: 620px;
  margin: 18px 0 28px;

  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.how-hero-content p {
  max-width: 620px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.9;
}

.how-buttons {
  justify-content: flex-start;
  margin-top: 36px;
}

.how-hero-visual {
  display: grid;
  gap: 18px;
}

.how-soft-card {
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(53,84,67,0.10);
  box-shadow: 0 16px 45px rgba(40,35,28,0.06);
}

.how-soft-card span {
  display: block;
  margin-bottom: 12px;

  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.how-soft-card p {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

/* INTRO */

.how-intro-panel {
  text-align: center;
}

.how-intro-panel h2 {
  margin: 14px 0 24px;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

.how-intro-panel p {
  max-width: 760px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.9;
}

/* PASOS */

.how-steps-section {
  position: relative;
  z-index: 2;
}

.how-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.how-step-card {
  padding: 34px 28px;
  border-radius: 30px;

  background: rgba(255,250,245,0.82);
  border: 1px solid rgba(53,84,67,0.10);

  box-shadow: 0 18px 55px rgba(40,35,28,0.07);
  transition: 0.3s ease;
}

.how-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(40,35,28,0.10);
}

.how-step-number {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;

  margin-bottom: 26px;
  border-radius: 50%;

  background: rgba(53,84,67,0.10);
  color: var(--primary);

  font-weight: 800;
}

.how-step-card h3 {
  margin-bottom: 14px;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.how-step-card p {
  color: var(--muted);
  line-height: 1.8;
}

/* BLOQUE CALMA */

.how-calm-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;

  padding: clamp(38px, 6vw, 76px);
  border-radius: 44px;

  background: rgba(255,250,245,0.82);
  border: 1px solid rgba(255,255,255,0.55);

  box-shadow: 0 28px 90px rgba(40,35,28,0.09);
}

.how-calm-content h2 {
  max-width: 780px;
  margin: 16px 0 28px;

  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.how-calm-content p {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.9;
}

.how-calm-list {
  display: grid;
  gap: 16px;
}

.how-calm-list article {
  padding: 24px 26px;
  border-radius: 24px;

  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(53,84,67,0.10);
}

.how-calm-list h3 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}

.how-calm-list p {
  color: var(--muted);
}

/* FINAL */

.how-final-card {
  padding: clamp(42px, 6vw, 82px);
  border-radius: 42px;

  background:
    linear-gradient(
      135deg,
      rgba(53,84,67,.96),
      rgba(38,60,48,.96)
    );

  color: white;
  text-align: center;

  box-shadow: 0 30px 80px rgba(0,0,0,0.14);
}

.how-final-card .mini-label {
  color: rgba(255,255,255,0.72);
}

.how-final-card h2 {
  max-width: 820px;
  margin: 18px auto 26px;

  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.how-final-card p {
  max-width: 680px;
  margin: 0 auto 38px;

  color: rgba(255,255,255,0.82);
  font-size: 1.08rem;
  line-height: 1.9;
}

.how-final-card .btn.primary {
  background: white;
  color: var(--primary);
}

.how-final-card .btn.primary:hover {
  background: #f3ede7;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .how-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-calm-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .how-hero-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .how-hero {
    padding: 120px 0 70px;
  }

  .how-hero-panel,
  .how-calm-panel,
  .how-final-card {
    padding: 28px;
    border-radius: 30px;
  }

  .how-hero-content h1,
  .how-calm-content h2,
  .how-final-card h2 {
    font-size: 2.55rem;
  }

  .how-steps-grid {
    grid-template-columns: 1fr;
  }

  .how-buttons .btn {
    width: 100%;
  }
}
/* TARJETAS VISUALES - CÓMO FUNCIONA */

.how-steps-visual .how-step-card {
  overflow: hidden;
  padding: 0;
}

.how-step-image {
  height: 165px;
  overflow: hidden;
}

.how-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(.98) brightness(.96);
  transition: transform .8s ease, filter .6s ease;
}

.how-step-card:hover .how-step-image img {
  transform: scale(1.06);
  filter: saturate(1.03) contrast(1.02) brightness(1);
}

.how-steps-visual .how-step-number,
.how-steps-visual .how-step-card h3,
.how-steps-visual .how-step-card p {
  margin-left: 28px;
  margin-right: 28px;
}

.how-steps-visual .how-step-number {
  margin-top: 26px;
}

.how-steps-visual .how-step-card p {
  margin-bottom: 32px;
}
@media (max-width:768px){

  .hero-image,
  .spaces-hero-image,
  .human-space-image{

      aspect-ratio: 16 / 10;
      overflow:hidden;
      border-radius:28px;
  }

}
@media (max-width:768px){

  .hero-panel,
  .spaces-hero-panel,
  .human-space-panel,
  .human-space-horizontal{
      padding:32px 24px;
      border-radius:32px;
  }

  .hero-image img,
  .spaces-hero-image img,
  .human-space-image img{

      width:100%;
      height:220px;

      object-fit:cover;
      object-position:center;

      border-radius:28px;
  }

  .hero-copy h1,
  .spaces-hero-copy h1,
  .human-space-content h2{

      font-size:clamp(2.2rem, 9vw, 3.2rem);
      line-height:0.95;

      letter-spacing:-0.05em;

      max-width:10ch;

      margin-top:24px;
      margin-bottom:18px;
  }

  .hero-copy p,
  .spaces-hero-copy p,
  .human-space-content p{

      font-size:1rem;
      line-height:1.8;
  }

}
/* LEGAL PAGES */

.legal-section {
  padding-top: 150px;
}

.legal-panel h1 {
  margin: 16px 0 34px;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.legal-panel h2 {
  margin-top: 34px;
  margin-bottom: 12px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.legal-panel p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.9;
  margin-bottom: 14px;
}

.legal-panel strong {
  color: var(--text);
}

.legal-note {
  margin-top: 34px;
  font-size: 0.95rem;
  opacity: 0.8;
}

.site-footer a {
  color: var(--primary);
  font-weight: 700;
}

.site-footer a:hover {
  opacity: 0.7;
}

@media (max-width: 640px) {
  .legal-section {
    padding-top: 110px;
  }

  .legal-panel h1 {
    font-size: 2.7rem;
  }
}
.check-policy{
    grid-column:1 / -1;

    display:flex;
    align-items:center;

    gap:12px;

    margin-top:10px;
    margin-bottom:4px;

    font-size:.95rem;
    line-height:1.5;

    color:rgba(30,30,30,.72);
}

.check-policy input{
    width:17px;
    height:17px;

    accent-color:var(--primary);

    flex-shrink:0;

    cursor:pointer;
}

.check-policy span{
    display:inline;
}

.check-policy a{
    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:opacity .25s ease;
}

.check-policy a:hover{
    opacity:.7;
}

.contact-submit{
    grid-column:1 / -1;

    margin-top:18px;
}
/* =========================
   SCROLL TOP BUTTON
========================= */

#scrollTopBtn{
    position:fixed;

    right:28px;
    bottom:28px;

    width:54px;
    height:54px;

    border:none;
    border-radius:50%;

    background:rgba(53,84,67,.92);

    color:#fff;

    font-size:1.4rem;
    font-weight:300;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
      0 10px 30px rgba(0,0,0,.12);

    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    transform:
      translateY(20px)
      scale(.92);

    transition:
      opacity .35s ease,
      transform .35s ease,
      visibility .35s ease,
      background .25s ease;

    z-index:999;
}

#scrollTopBtn.show{
    opacity:1;
    visibility:visible;

    transform:
      translateY(0)
      scale(1);
}

#scrollTopBtn:hover{
    background:#2d4738;

    transform:
      translateY(-4px)
      scale(1.04);
}

#scrollTopBtn:active{
    transform:scale(.96);
}

/* móvil */

@media (max-width:768px){

    #scrollTopBtn{
        width:48px;
        height:48px;

        right:18px;
        bottom:18px;

        font-size:1.15rem;
    }

}
/* FIX IMÁGENES ESPACIOS EN MÓVIL */

@media (max-width: 768px) {

  .spaces-hero-image,
  .human-space-image,
  .human-space-modern-image,
  .space-emotion-card,
  .space-emotion-card img {
    max-width: 100%;
    overflow: hidden;
  }

  .spaces-hero-image img,
  .human-space-image img,
  .human-space-modern-image img,
  .space-emotion-card img {
    width: 100%;
    max-width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .spaces-hero-panel,
  .human-space-horizontal,
  .human-space-modern,
  .space-emotion-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

}
/* =========================
   HERO EMOCIONAL
========================= */

.emotional-hero{
    position:relative;
}

.hero-overlay{
    position:relative;

    overflow:hidden;

    min-height:640px;

    display:flex;
    align-items:center;

    padding:
      clamp(70px, 9vw, 110px)
      clamp(40px, 6vw, 90px);

    border-radius:42px;

    background:#f4f0eb;

    isolation:isolate;
}

/* IMAGEN FONDO */

.hero-bg-image{
    position:absolute;

    inset:0;

    background:
      linear-gradient(
        90deg,
        rgba(244,240,235,.96) 0%,
        rgba(244,240,235,.90) 35%,
        rgba(244,240,235,.40) 65%,
        rgba(244,240,235,.10) 100%
      ),
      url('../img/hero-telefonico.jpg');

    background-size:cover;
    background-position:center right;

    z-index:-1;
}

/* TEXTO */

.spaces-hero-copy{
    position:relative;

    max-width:620px;

    z-index:2;
}

.spaces-hero-copy h1{
    font-size:
      clamp(3.3rem, 7vw, 6.4rem);

    line-height:.92;

    letter-spacing:-0.05em;

    max-width:720px;

    margin:
      18px 0
      28px;
}

.spaces-hero-copy p{
    max-width:560px;

    font-size:1.14rem;

    line-height:1.9;

    color:rgba(30,30,30,.70);

    margin-bottom:36px;
}

/* BOTONES */

.space-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

/* MOBILE */

@media (max-width:768px){

    .hero-overlay{

        min-height:auto;

        padding:
          120px 28px 70px;

        border-radius:30px;
    }

    .hero-bg-image{

        background:
          linear-gradient(
            180deg,
            rgba(244,240,235,.84) 0%,
            rgba(244,240,235,.92) 48%,
            rgba(244,240,235,.98) 100%
          ),
          url('../img/hero-telefonico.jpg');

        background-size:cover;
        background-position:center;
    }

    .spaces-hero-copy h1{

        font-size:
          clamp(3rem, 14vw, 4.8rem);

        line-height:.94;
    }

    .spaces-hero-copy p{
        font-size:1rem;
        line-height:1.8;
    }

}
/* =========================================================
   COUNSELLING - HERO IMAGE MOBILE FIX
========================================================= */

@media (max-width: 768px) {

  .space-hero-image {
    width: 100%;
    height: 340px !important;
    max-height: 340px !important;
    overflow: hidden;
    border-radius: 30px;
    transform: none !important;
  }

  .space-hero-image img {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover;
    object-position: 78% center;
    display: block;
    border-radius: 30px;
  }

}
/* =========================================================
   GESTALT AWARENESS IMAGE MOBILE FIX
========================================================= */

@media (max-width: 768px) {

  .gestalt-awareness-image {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 28px;
  }

  .gestalt-awareness-image img {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    object-fit: cover;
    object-position: center center;

    display: block;
    border-radius: 28px;
  }

}
/* =========================================================
   PRIMERA CONVERSACIÓN - FONDO COMPLETO
========================================================= */

.gestalt-awareness-panel{
  position:relative;
  overflow:hidden;

  background-image:
    linear-gradient(
      to right,
      rgba(247,244,239,0.96) 0%,
      rgba(247,244,239,0.90) 34%,
      rgba(247,244,239,0.40) 58%,
      rgba(247,244,239,0.08) 100%
    ),
    url("../img/primera-conversacion-presencia.jpg");

  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

/* elimina bloque antiguo */

.gestalt-awareness-background{
  display:none;
}

/* contenido encima */

.gestalt-awareness-grid,
.gestalt-awareness-content{
  position:relative;
  z-index:2;
}

/* móvil */

@media (max-width:768px){

  .gestalt-awareness-panel{

    background-image:
      linear-gradient(
        to bottom,
        rgba(247,244,239,0.95) 0%,
        rgba(247,244,239,0.88) 42%,
        rgba(247,244,239,0.35) 100%
      ),
      url("../img/primera-conversacion-presencia.jpg");

    background-position:center;
    background-size:cover;
  }

}
/* =========================================================
   GESTALT - TOMA DE CONCIENCIA CLEAN
========================================================= */

.gestalt-awareness-clean {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(42px, 6vw, 86px);
  align-items: center;

  padding: clamp(34px, 6vw, 72px);
  border-radius: 44px;

  background: rgba(255,250,245,0.86);
  border: 1px solid rgba(255,255,255,0.58);

  box-shadow:
    0 28px 90px rgba(40,35,28,0.09),
    inset 0 1px 0 rgba(255,255,255,0.68);

  backdrop-filter: blur(12px);
}

.gestalt-awareness-clean-image {
  overflow: hidden;
  height: 430px;
  border-radius: 34px;

  box-shadow:
    0 24px 70px rgba(40,35,28,0.12);
}

.gestalt-awareness-clean-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(.94)
    contrast(.98)
    brightness(1.02);

  transition:
    transform .9s ease,
    filter .7s ease;
}

.gestalt-awareness-clean:hover .gestalt-awareness-clean-image img {
  transform: scale(1.025);
  filter:
    saturate(1)
    contrast(1.01)
    brightness(1.02);
}

.gestalt-awareness-clean-content {
  max-width: 620px;
}

.gestalt-awareness-clean-content h2 {
  margin: 14px 0 26px;

  font-size: clamp(2.7rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -0.065em;
}

.gestalt-awareness-clean-content .lead-text {
  margin-bottom: 28px;
}

@media (max-width: 980px) {

  .gestalt-awareness-clean {
    grid-template-columns: 1fr;
  }

  .gestalt-awareness-clean-image {
    height: 340px;
  }

}

@media (max-width: 640px) {

  .gestalt-awareness-clean {
    padding: 26px;
    border-radius: 30px;
  }

  .gestalt-awareness-clean-image {
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 26px;
  }

  .gestalt-awareness-clean-content h2 {
    font-size: 2.55rem;
  }

}
/* ==========================================================
   ESPACIOS · TABLA DE MODALIDADES Y PRECIOS
========================================================== */

.space-pricing-table{
  margin-top: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(53, 84, 67, .14);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 12px 32px rgba(28, 48, 38, .06);
}

.space-pricing-table table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.space-pricing-table th,
.space-pricing-table td{
  padding: .95rem 1.15rem;
  text-align: left;
  vertical-align: middle;
}

.space-pricing-table thead{
  background: #355443;
  color: #fff;
}

.space-pricing-table th{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.space-pricing-table tbody tr{
  border-bottom: 1px solid rgba(53, 84, 67, .10);
  transition: background-color .2s ease;
}

.space-pricing-table tbody tr:last-child{
  border-bottom: 0;
}

.space-pricing-table tbody tr:hover{
  background: rgba(53, 84, 67, .045);
}

.space-pricing-table td{
  color: #4b4b46;
  font-size: .98rem;
  line-height: 1.45;
}

.space-pricing-table td:first-child{
  font-weight: 600;
  color: #263d32;
}

.space-pricing-table td:last-child{
  font-weight: 700;
  color: #355443;
  white-space: nowrap;
}

/* Tablet / móvil */
@media (max-width: 640px){

  .space-pricing-table{
    border-radius: 14px;
  }

  .space-pricing-table th,
  .space-pricing-table td{
    padding: .8rem .7rem;
  }

  .space-pricing-table th{
    font-size: .68rem;
    letter-spacing: .035em;
  }

  .space-pricing-table td{
    font-size: .88rem;
  }
}
/* Separación entre tabla de precios y texto posterior */
.space-pricing-table + .lead{
  margin-top: 1.4rem;
}
/* ==========================================================
   CÓMO FUNCIONA · BLOQUE "UN ESPACIO CUIDADO"
   Diseño destacado de duración, modalidades y precios
========================================================== */

.how-calm-section{
  position:relative;
}

.how-calm-panel{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr);
  gap:4rem;
  align-items:center;

  padding:4.5rem 4rem;
  border-radius:32px;

  background:rgba(250,247,241,.94);
  border:1px solid rgba(53,84,67,.08);

  box-shadow:
    0 28px 70px rgba(36,48,40,.10),
    inset 0 1px 0 rgba(255,255,255,.85);

  backdrop-filter:blur(8px);
}


/* ==========================================================
   COLUMNA IZQUIERDA
========================================================== */

.how-calm-content .mini-label{
  display:block;
  margin-bottom:1.5rem;

  color:#355443;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
}


/* Línea dorada debajo del eyebrow */
.how-calm-content .mini-label::after{
  content:"";
  display:block;

  width:72px;
  height:2px;

  margin-top:1.25rem;

  background:#b9894d;
  border-radius:999px;
}


.how-calm-content h2{
  max-width:650px;

  margin:0 0 2rem;

  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(3rem,5vw,5.3rem);
  line-height:.98;
  letter-spacing:-.04em;

  color:#173126;
}


/* detalle fino dorado */
.how-calm-content h2::after{
  content:"";
  display:block;

  width:160px;
  height:1px;

  margin-top:2rem;

  background:linear-gradient(
    90deg,
    #b9894d,
    rgba(185,137,77,.20)
  );
}


.how-calm-content > p{
  max-width:600px;

  margin:0;

  color:#57574f;
  font-size:1rem;
  line-height:1.8;
}


/* ==========================================================
   COLUMNA DERECHA
========================================================== */

.how-calm-list{
  display:flex;
  flex-direction:column;
  gap:1.15rem;
}


/* tarjetas */
.how-calm-list article{
  position:relative;

  min-height:125px;
  padding:1.8rem 1.8rem 1.8rem 7.5rem;

  display:flex;
  flex-direction:column;
  justify-content:center;

  border:1px solid rgba(185,137,77,.25);
  border-radius:22px;

  background:rgba(255,255,255,.65);

  box-shadow:
    0 10px 26px rgba(33,45,37,.045);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.how-calm-list article:hover{
  transform:translateY(-3px);

  border-color:rgba(185,137,77,.45);

  box-shadow:
    0 16px 34px rgba(33,45,37,.08);
}


.how-calm-list h3{
  margin:0 0 .45rem;

  color:#173126;

  font-family:Georgia, "Times New Roman", serif;
  font-size:1.35rem;
  line-height:1.2;
}


.how-calm-list p{
  margin:0;

  color:#5b5c55;
  font-size:.98rem;
  line-height:1.55;
}


/* ==========================================================
   ICONOS CIRCULARES
========================================================== */

.how-calm-list article::before{
  position:absolute;
  left:1.65rem;
  top:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  width:70px;
  height:70px;

  transform:translateY(-50%);

  border-radius:50%;

  background:#355443;

  color:#d5a354;

  font-size:2rem;
  font-weight:400;

  box-shadow:
    0 8px 22px rgba(53,84,67,.16);
}


/* Duración */
.how-calm-list article:nth-child(1)::before{
  content:"◷";
  font-size:2.5rem;
}


/* Modalidades */
.how-calm-list article:nth-child(2)::before{
  content:"☎";
  font-size:2rem;
}


/* Precios */
.how-calm-list article:nth-child(3)::before{
  content:"◇";
  font-size:2.35rem;
}


/* ==========================================================
   TARJETA DESTACADA DE PRECIOS
========================================================== */

.how-calm-list article:nth-child(3){
  min-height:145px;

  background:
    linear-gradient(
      135deg,
      #355443 0%,
      #274536 100%
    );

  border:1px solid #b9894d;

  box-shadow:
    0 18px 38px rgba(32,64,48,.18);
}


.how-calm-list article:nth-child(3)::before{
  background:rgba(23,49,38,.35);

  border:1px solid #d5a354;

  color:#d5a354;
}


.how-calm-list article:nth-child(3) h3{
  color:#fff;
}


/* botón Consultar en Espacios */
.how-calm-list article:nth-child(3) p{
  margin-top:.8rem;
}


.how-calm-list article:nth-child(3) a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;

  min-height:52px;

  padding:.8rem 1.35rem;

  border-radius:13px;

  background:linear-gradient(
    135deg,
    #d7aa5b,
    #c79543
  );

  border:1px solid rgba(255,255,255,.2);

  color:#173126;

  font-weight:700;
  text-decoration:none;

  box-shadow:
    0 8px 20px rgba(0,0,0,.16);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


/* flecha automática */
.how-calm-list article:nth-child(3) a::after{
  content:"→";

  font-size:1.55rem;
  line-height:1;

  transition:transform .2s ease;
}


.how-calm-list article:nth-child(3) a:hover{
  transform:translateY(-2px);

  filter:brightness(1.04);

  box-shadow:
    0 12px 26px rgba(0,0,0,.20);
}


.how-calm-list article:nth-child(3) a:hover::after{
  transform:translateX(4px);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px){

  .how-calm-panel{
    grid-template-columns:1fr;

    gap:3rem;

    padding:3.5rem 2.5rem;
  }

  .how-calm-content h2{
    max-width:720px;
  }

}


@media (max-width: 640px){

  .how-calm-panel{
    padding:2.5rem 1.35rem;

    border-radius:24px;
  }

  .how-calm-content h2{
    font-size:clamp(2.6rem,13vw,4rem);
  }

  .how-calm-list article{
    min-height:auto;

    padding:1.5rem 1.25rem 1.5rem 5.9rem;

    border-radius:18px;
  }

  .how-calm-list article::before{
    left:1.15rem;

    width:58px;
    height:58px;

    font-size:1.7rem;
  }

  .how-calm-list article:nth-child(3){
    min-height:auto;
  }

  .how-calm-list article:nth-child(3) a{
    width:100%;
  }

}
/* ==========================================================
   CÓMO FUNCIONA · AJUSTE DE TONOS SEGÚN REFERENCIA
========================================================== */

.how-calm-panel{
  background: rgba(250,247,243,.96);

  border-color: rgba(184,165,140,.16);

  box-shadow:
    0 26px 64px rgba(72,66,57,.09),
    inset 0 1px 0 rgba(255,255,255,.88);
}


/* Etiqueta superior */
.how-calm-content .mini-label{
  color:#526553;
}


/* Línea dorada */
.how-calm-content .mini-label::after,
.how-calm-content h2::after{
  background:#c4a269;
}


/* Título principal */
.how-calm-content h2{
  color:#20211e;
}


/* Texto */
.how-calm-content > p{
  color:#66615a;
}


/* Tarjetas claras */
.how-calm-list article{
  background:rgba(250,248,244,.76);

  border-color:rgba(184,165,140,.28);

  box-shadow:
    0 10px 26px rgba(70,63,54,.045);
}


.how-calm-list h3{
  color:#242622;
}


.how-calm-list p{
  color:#68645e;
}


/* Iconos */
.how-calm-list article::before{
  background:#f3eee7;

  color:#bd9046;

  box-shadow:
    0 8px 18px rgba(90,79,62,.07);
}


/* ==========================================================
   TARJETA PRECIOS
========================================================== */

.how-calm-list article:nth-child(3){
  background:
    linear-gradient(
      135deg,
      #edf0e9 0%,
      #e6e8df 100%
    );

  border-color:#506755;

  box-shadow:
    0 14px 32px rgba(55,69,58,.12);
}


.how-calm-list article:nth-child(3)::before{
  background:#42604f;

  border-color:#42604f;

  color:#ffffff;
}


.how-calm-list article:nth-child(3) h3{
  color:#252722;
}


/* Botón */
.how-calm-list article:nth-child(3) a{
  background:#496554;

  border:1px solid #c8a05d;

  color:#ffffff;

  box-shadow:
    0 7px 17px rgba(49,64,54,.16);
}


.how-calm-list article:nth-child(3) a:hover{
  background:#3f5949;

  box-shadow:
    0 10px 22px rgba(49,64,54,.20);
}
/* ==========================================================
   CÓMO FUNCIONA · HERO PRINCIPAL
========================================================== */

.how-hero-panel{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:4rem;
  align-items:center;

  padding:4.6rem 4.2rem;

  border-radius:34px;

  background:
    linear-gradient(
      135deg,
      rgba(250,247,242,.97),
      rgba(247,244,238,.93)
    );

  border:1px solid rgba(185,137,77,.10);

  box-shadow:
    0 28px 70px rgba(45,47,40,.10),
    inset 0 1px 0 rgba(255,255,255,.9);

  backdrop-filter:blur(8px);
}


/* ==========================================================
   COLUMNA IZQUIERDA
========================================================== */

.how-hero-content .mini-label{
  display:block;

  margin-bottom:1.4rem;

  color:#4c6353;

  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
}


/* pequeño detalle dorado */
.how-hero-content .mini-label::after{
  content:"";

  display:block;

  width:64px;
  height:2px;

  margin-top:1.15rem;

  background:#c4a269;

  border-radius:999px;
}


.how-hero-content h1{
  max-width:620px;

  margin:0 0 1.8rem;

  color:#20211e;

  font-size:clamp(3.2rem,5vw,5.2rem);
  line-height:.98;

  letter-spacing:-.045em;
}


.how-hero-content > p{
  max-width:600px;

  margin:0;

  color:#66615a;

  font-size:1.04rem;
  line-height:1.8;
}


.how-buttons{
  margin-top:2rem;
}


/* ==========================================================
   TARJETAS 01 / 02 / 03
========================================================== */

.how-hero-visual{
  display:flex;
  flex-direction:column;
  gap:1rem;
}


.how-soft-card{
  position:relative;

  min-height:106px;

  padding:1.45rem 1.6rem 1.45rem 5.4rem;

  display:flex;
  flex-direction:column;
  justify-content:center;

  border-radius:22px;

  background:
    rgba(255,255,255,.66);

  border:1px solid rgba(185,137,77,.18);

  box-shadow:
    0 10px 26px rgba(61,58,49,.05);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.how-soft-card:hover{
  transform:translateY(-3px);

  border-color:rgba(185,137,77,.35);

  box-shadow:
    0 16px 32px rgba(61,58,49,.08);
}


/* círculo con número */
.how-soft-card span{
  position:absolute;

  left:1.35rem;
  top:50%;

  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  transform:translateY(-50%);

  border-radius:50%;

  background:#edf0e9;

  border:1px solid rgba(76,99,83,.18);

  color:#4c6353;

  font-size:.75rem;
  font-weight:800;

  letter-spacing:.08em;
}


.how-soft-card p{
  margin:0;

  color:#282925;

  font-size:1.08rem;
  line-height:1.4;

  font-weight:650;
}


/* ==========================================================
   TERCERA TARJETA DESTACADA
========================================================== */

.how-soft-card:nth-child(3){
  background:
    linear-gradient(
      135deg,
      #edf0e9,
      #e5e9e1
    );

  border-color:#9eaa9f;

  box-shadow:
    0 14px 30px rgba(67,85,71,.10);
}


.how-soft-card:nth-child(3) span{
  background:#4d6555;

  border-color:#4d6555;

  color:#fff;
}


/* ==========================================================
   BOTONES
========================================================== */

.how-buttons .btn.primary{
  background:#4b6554;

  box-shadow:
    0 8px 20px rgba(60,80,66,.14);
}


.how-buttons .btn.primary:hover{
  background:#405849;

  transform:translateY(-2px);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

  .how-hero-panel{
    grid-template-columns:1fr;

    gap:3rem;

    padding:3.5rem 2.5rem;
  }

}


@media (max-width:640px){

  .how-hero-panel{
    padding:2.5rem 1.35rem;

    border-radius:24px;
  }

  .how-hero-content h1{
    font-size:clamp(2.8rem,14vw,4rem);
  }

  .how-soft-card{
    min-height:92px;

    padding:1.25rem 1.15rem 1.25rem 4.8rem;
  }

  .how-soft-card span{
    left:1rem;

    width:46px;
    height:46px;
  }

}
/* ==========================================================
   BOTÓN SUPERIOR GLOBAL · SOLICITAR CONVERSACIÓN
========================================================== */

.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  white-space:nowrap;

  padding:.9rem 1.55rem;
  min-height:48px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #3f5d4d 0%,
      #2f4e3e 100%
    );

  color:#fff;
  text-decoration:none;

  font-weight:700;
  font-size:.94rem;
  line-height:1;

  letter-spacing:.01em;

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    0 10px 24px rgba(38,65,51,.16),
    inset 0 1px 0 rgba(255,255,255,.10);

  position:relative;
  overflow:hidden;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}


/* Brillo elegante */
.nav-cta::before{
  content:"";

  position:absolute;
  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  transform:skewX(-20deg);

  transition:left .55s ease;
}


/* Flecha discreta */
.nav-cta::after{
  content:"→";

  font-size:1.05rem;
  line-height:1;

  transition:transform .22s ease;
}


/* Hover */
.nav-cta:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #496957 0%,
      #355645 100%
    );

  box-shadow:
    0 14px 30px rgba(38,65,51,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
}


.nav-cta:hover::before{
  left:140%;
}


.nav-cta:hover::after{
  transform:translateX(4px);
}


/* Pulsación */
.nav-cta:active{
  transform:translateY(0);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

  .nav-cta{
    padding:.82rem 1.15rem;
    font-size:.88rem;
  }

}


@media (max-width:900px){

  .nav-cta{
    white-space:nowrap;
  }

}

/* ==========================================================
   FIX RESPONSIVE · TABLA DE MODALIDADES Y PRECIOS
   Evita recorte horizontal en móviles estrechos (Chrome/Brave)
========================================================== */

.space-pricing-table{
  width:100%;
  max-width:100%;
  min-width:0;
}

.space-pricing-table table{
  width:100%;
  max-width:100%;
  min-width:0;
  table-layout:fixed;
}

.space-pricing-table th,
.space-pricing-table td{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Reparto estable de las tres columnas */
.space-pricing-table th:nth-child(1),
.space-pricing-table td:nth-child(1){
  width:44%;
}

.space-pricing-table th:nth-child(2),
.space-pricing-table td:nth-child(2){
  width:31%;
}

.space-pricing-table th:nth-child(3),
.space-pricing-table td:nth-child(3){
  width:25%;
}

/* El precio debe permanecer en una sola línea */
.space-pricing-table th:last-child,
.space-pricing-table td:last-child{
  white-space:nowrap;
}

/* Móviles estrechos */
@media (max-width:480px){

  .space-pricing-table th,
  .space-pricing-table td{
    padding:.72rem .48rem;
  }

  .space-pricing-table th{
    font-size:.62rem;
    letter-spacing:.015em;
  }

  .space-pricing-table td{
    font-size:.84rem;
    line-height:1.4;
  }

  .space-pricing-table th:nth-child(1),
  .space-pricing-table td:nth-child(1){
    width:45%;
  }

  .space-pricing-table th:nth-child(2),
  .space-pricing-table td:nth-child(2){
    width:30%;
  }

  .space-pricing-table th:nth-child(3),
  .space-pricing-table td:nth-child(3){
    width:25%;
  }
}

/* Pantallas especialmente estrechas */
@media (max-width:360px){

  .space-pricing-table th,
  .space-pricing-table td{
    padding:.68rem .38rem;
  }

  .space-pricing-table th{
    font-size:.58rem;
  }

  .space-pricing-table td{
    font-size:.80rem;
  }
}

/* ==========================================================
   PRIMERA CONVERSACIÓN · AJUSTE EDITORIAL Y RESPONSIVE
========================================================== */

.first-talk-page .first-talk-hero .space-hero-grid{
  grid-template-columns:minmax(0, 1fr) minmax(360px, .92fr);
  gap:clamp(38px, 6vw, 72px);
}

.first-talk-page .first-talk-hero .space-hero-copy{
  max-width:680px;
}

.first-talk-page .first-talk-hero .space-hero-copy h1{
  max-width:680px;
  font-size:clamp(3rem, 5.8vw, 5.6rem);
  line-height:.96;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.first-talk-page .first-talk-hero .space-hero-copy p{
  max-width:610px;
}

/* Bloques editoriales */
.first-talk-page .first-talk-panel h2{
  max-width:760px;
  margin:14px 0 28px;
  font-size:clamp(2.3rem, 4.8vw, 4.35rem);
  line-height:1.02;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.first-talk-page .first-talk-lines{
  display:grid;
  gap:18px;
  margin-top:26px;
}

.first-talk-page .first-talk-lines p{
  margin:0;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.85;
}

/* Este bloque reutiliza how-calm, pero aquí no es una tabla de precios */
.first-talk-page #como-es .how-calm-panel{
  grid-template-columns:minmax(0, 1.05fr) minmax(340px, .95fr);
  gap:clamp(38px, 5vw, 64px);
}

.first-talk-page #como-es .how-calm-content h2{
  max-width:680px;
  font-size:clamp(2.8rem, 4.8vw, 4.8rem);
  text-wrap:balance;
}

/* Neutraliza el estilo especial heredado del tercer article */
.first-talk-page #como-es .how-calm-list article,
.first-talk-page #como-es .how-calm-list article:nth-child(3){
  min-height:118px;
  padding:1.55rem 1.55rem 1.55rem 6.4rem;
  background:rgba(250,248,244,.76);
  border:1px solid rgba(184,165,140,.28);
  box-shadow:0 10px 26px rgba(70,63,54,.045);
}

.first-talk-page #como-es .how-calm-list article h3,
.first-talk-page #como-es .how-calm-list article:nth-child(3) h3{
  color:#242622;
}

.first-talk-page #como-es .how-calm-list article p,
.first-talk-page #como-es .how-calm-list article:nth-child(3) p{
  margin:0;
  color:#68645e;
}

/* Numeración coherente de los tres pasos */
.first-talk-page #como-es .how-calm-list article::before,
.first-talk-page #como-es .how-calm-list article:nth-child(3)::before{
  left:1.35rem;
  width:58px;
  height:58px;
  background:#edf0e9;
  border:1px solid rgba(76,99,83,.18);
  color:#4c6353;
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
}

.first-talk-page #como-es .how-calm-list article:nth-child(1)::before{ content:"01"; }
.first-talk-page #como-es .how-calm-list article:nth-child(2)::before{ content:"02"; }
.first-talk-page #como-es .how-calm-list article:nth-child(3)::before{ content:"03"; }

/* Quién soy */
.first-talk-page .about-human-section .gestalt-awareness-content{
  max-width:650px;
}

.first-talk-page .about-human-section .gestalt-awareness-content h2{
  max-width:620px;
  text-wrap:balance;
}

.first-talk-page .contact-premium-content h1{
  text-wrap:balance;
}

@media (max-width:980px){
  .first-talk-page .first-talk-hero .space-hero-grid,
  .first-talk-page #como-es .how-calm-panel{
    grid-template-columns:1fr;
  }

  .first-talk-page .first-talk-hero .space-hero-copy,
  .first-talk-page .first-talk-hero .space-hero-copy h1,
  .first-talk-page .first-talk-hero .space-hero-copy p{
    max-width:100%;
  }
}

@media (max-width:640px){
  .first-talk-page .first-talk-hero{
    padding:110px 18px 60px;
  }

  .first-talk-page .first-talk-hero .space-hero-copy h1{
    max-width:100%;
    margin-top:14px;
    margin-bottom:22px;
    font-size:clamp(2.45rem, 11.5vw, 3.35rem);
    line-height:.98;
    letter-spacing:-.045em;
  }

  .first-talk-page .first-talk-hero .space-hero-copy p{
    font-size:1rem;
    line-height:1.75;
  }

  .first-talk-page .first-talk-panel{
    padding:28px 24px;
  }

  .first-talk-page .first-talk-panel h2{
    max-width:100%;
    margin-bottom:22px;
    font-size:clamp(2rem, 9.5vw, 2.8rem);
    line-height:1.03;
    letter-spacing:-.04em;
  }

  .first-talk-page .first-talk-lines{
    gap:15px;
  }

  .first-talk-page .first-talk-lines p,
  .first-talk-page .first-talk-panel .lead{
    font-size:1rem;
    line-height:1.75;
  }

  .first-talk-page #como-es .how-calm-panel{
    padding:2rem 1.25rem;
    gap:2rem;
  }

  .first-talk-page #como-es .how-calm-content h2{
    max-width:100%;
    font-size:clamp(2.25rem, 10vw, 3rem);
    line-height:1;
  }

  .first-talk-page #como-es .how-calm-list article,
  .first-talk-page #como-es .how-calm-list article:nth-child(3){
    padding:1.3rem 1.05rem 1.3rem 4.85rem;
    border-radius:18px;
  }

  .first-talk-page #como-es .how-calm-list article::before,
  .first-talk-page #como-es .how-calm-list article:nth-child(3)::before{
    left:1rem;
    width:48px;
    height:48px;
  }

  .first-talk-page #como-es .how-calm-list h3{
    font-size:1.15rem;
  }

  .first-talk-page #como-es .how-calm-list p{
    font-size:.94rem;
    line-height:1.55;
  }

  .first-talk-page .about-human-section .gestalt-awareness-content h2{
    max-width:100%;
    font-size:clamp(2.3rem, 10vw, 3rem);
    line-height:1;
  }
}