@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Ethiopic:wdth,wght@62.5..100,300..700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&family=Caveat:wght@400;700&display=swap');

@font-face {
  font-family: 'Feature';
  src: url('https://static1.squarespace.com/static/68c1a5d3d0910e2c40dfc312/t/6920e163f23ede41182e2e60/1763762531557/FeatureDisplay-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   CSS VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
  /* Color Palette Hierarchy */
  --bg-base: #EEEFDE;       /* 55% Base/Fondos (Neutral Suave) */
  --color-wine: #351E28;    /* 20% Titulares y Autoridad (Vino Oscuro) */
  --bg-blue: #D7EFFF;       /* 15% Respiración visual (Azul Editorial) */
  --color-terracotta: #B97A6B; /* 7% Conexión humana (Terracotta Cálido) */
  --color-acid: #E9F056;    /* 3% Disrupción (Amarillo Ácido) */
  
  /* Text colors */
  --text-main: #351E28;
  --text-muted: rgba(53, 30, 40, 0.75);
  --text-light: #EEEFDE;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-serif-condensed: 'Noto Serif Ethiopic', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Layout */
  --container-max: 1200px;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
}

/* ==========================================================================
   GLOBAL RESETS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-base);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-wine);
  font-weight: 500;
  line-height: 1.15;
}

/* Global section header styling rules */
.sec-title,
.phil-title,
.section-title,
.pain-sec h2,
.results-sec h2,
.journey-sec h2,
.pricing-sec h2,
.transform-sec h2,
.principles-sec h2,
.faq-sec h2 {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
}

.noto-condensed {
  font-family: var(--font-serif-condensed) !important;
  font-stretch: condensed;
  letter-spacing: -0.01em;
}

p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   REUSABLE COMPONENTS & UTILITIES
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
}

/* Section styling */
section {
  padding: 8rem 0;
  position: relative;
}

@media (max-width: 768px) {
  section {
    padding: 5rem 0;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid var(--color-wine);
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--color-wine);
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-wine);
  transform: translateY(102%);
  transition: var(--transition-smooth);
  z-index: -1;
}

.btn:hover {
  color: var(--bg-base);
  border-color: var(--color-wine);
}

.btn:hover::before {
  transform: translateY(0);
}

/* CTA buttons with terracotta highlights */
.btn-primary {
  background: var(--color-wine);
  color: var(--bg-base);
  border-color: var(--color-wine);
}

.btn-primary::before {
  background: var(--color-terracotta);
}

.btn-primary:hover {
  color: var(--bg-base);
  border-color: var(--color-terracotta);
}

/* Secondary CTA buttons (light borders on dark backgrounds) */
.btn-secondary {
  border-color: var(--bg-base);
  color: var(--bg-base);
}

.btn-secondary::before {
  background: var(--color-terracotta);
}

.btn-secondary:hover {
  color: var(--bg-base);
  border-color: var(--color-terracotta);
}

.btn-terracotta {
  background: var(--color-terracotta);
  color: var(--bg-base);
  border-color: var(--color-terracotta);
}

.btn-terracotta::before {
  background: var(--color-wine);
}

.btn-terracotta:hover {
  color: var(--bg-base);
  border-color: var(--color-wine);
}

/* Styled text emphasis: Bold and Italicized */
strong em, em strong, .text-emphasis {
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-terracotta);
}

/* Accent link/button with terracotta / acid yellow details */
.text-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-wine);
  border-bottom: 2px solid var(--color-terracotta);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.text-link:hover {
  color: var(--color-terracotta);
  border-bottom-color: var(--color-acid);
  padding-right: 6px;
}

/* Scroll Trigger animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* Micro-disruption highlighting (yellow) */
.highlight-word {
  position: relative;
  display: inline-block;
  font-weight: 600;
}

.highlight-word::after {
  content: '';
  position: absolute;
  bottom: 0.1em;
  left: 0;
  width: 100%;
  height: 0.25em;
  background-color: var(--color-acid);
  z-index: -1;
  transform: skewX(-12deg);
}

/* Icon box */
.icon-box {
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
}
.icon-box svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* ==========================================================================
   SECTION 1: HERO SECTION
   ========================================================================== */
.hero-sec {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  overflow: hidden;
}

/* Top bar navigation */
.top-bar {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(53, 30, 40, 0.1);
  background: var(--bg-base);
  z-index: 10;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.lang-selector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.lang-btn:hover {
  color: var(--color-wine);
}

.lang-btn.active {
  color: var(--color-wine);
  font-weight: 700;
  border-bottom: 2px solid var(--color-terracotta);
}

.lang-divider {
  color: rgba(53, 30, 40, 0.2);
  user-select: none;
}

.logo-link {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--color-wine);
}

.social-links {
  display: flex;
  gap: 1.5rem;
}

.social-icon-link {
  color: var(--color-wine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.social-icon-link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.social-icon-link:hover {
  color: var(--color-terracotta);
  transform: translateY(-2px);
}

/* Hero Content layout */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
  flex-grow: 1;
  padding: 4rem 0;
}

@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem 0;
  }
}

.hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.micro-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.micro-title::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--color-terracotta);
}

.hero-title {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 0.95;
  margin-bottom: 2rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-terracotta);
  text-transform: none;
}

.hero-title strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--color-terracotta);
  text-transform: none;
}

.hero-body {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  max-width: 600px;
}

.hero-cta-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 576px) {
  .hero-cta-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .hero-cta-wrapper .btn {
    width: 100%;
  }
}

/* Hero Image Container */
.hero-image-col {
  position: relative;
  max-height: 550px;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 991px) {
  .hero-image-col {
    max-height: 450px;
    order: -1; /* Image first on tablet/mobile */
  }
}

.hero-image-col img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: contain;
  transition: transform 8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 991px) {
  .hero-image-col img {
    max-height: 450px;
  }
}

.hero-image-col:hover img {
  transform: scale(1.08);
}

.hero-image-badge {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: var(--bg-blue);
  color: var(--color-wine);
  padding: 1rem 1.5rem;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ==========================================================================
   SECTION 2: TRANSICIÓN Y AUTORIDAD (EL PUENTE)
   ========================================================================== */
.bridge-sec {
  background: var(--bg-base);
  border-top: 1px solid rgba(53, 30, 40, 0.08);
  border-bottom: 1px solid rgba(53, 30, 40, 0.08);
}

.bridge-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 950px;
  margin: 0 auto 5rem auto;
  color: var(--color-wine);
  text-transform: none !important;
}

.bridge-title .highlight-word {
  font-weight: 700;
}

.bridge-grid-1 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 6rem;
}

.bridge-grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
}

@media (max-width: 991px) {
  .bridge-grid-1, .bridge-grid-2 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .bridge-grid-1 {
    margin-bottom: 4rem;
  }
  .bridge-grid-2 .bridge-img-box {
    order: -1;
  }
}

.bridge-img-box {
  position: relative;
  background: var(--bg-blue);
  overflow: hidden;
  border: 1px solid rgba(53, 30, 40, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  border-radius: 2px;
}

.bridge-img-box img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: contain;
  transition: var(--transition-smooth);
}

.bridge-img-box:hover img {
  transform: scale(1.05);
}

.bridge-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bridge-text-box p {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.bridge-text-box p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SECTION 3: ESTRUCTURA DEL PROGRAMA (Capas del Ecosistema)
   ========================================================================== */
.structure-sec {
  background-color: var(--bg-base);
  padding: 6rem 0;
  border-bottom: 1px solid rgba(53, 30, 40, 0.05);
}

.structure-sec h2 {
  margin-bottom: 3.5rem;
}

.structure-intro {
  max-width: 800px;
  margin-bottom: 4rem;
  font-size: 1.15rem;
  line-height: 1.7;
}

.structure-intro p {
  margin-bottom: 1.5rem;
}

.structure-intro .highlight-p {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-wine);
}

.layers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.layer-card {
  background: rgba(53, 30, 40, 0.02);
  border: 1px solid rgba(53, 30, 40, 0.05);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  position: relative;
  transition: var(--transition-smooth);
}

.layer-card:hover {
  transform: translateY(-4px);
  background: rgba(53, 30, 40, 0.04);
  border-color: var(--color-terracotta);
  box-shadow: 0 10px 30px rgba(53, 30, 40, 0.03);
}

.layer-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
}

.layer-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-wine);
  margin-bottom: 1rem;
}

.layer-text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.sec-title,
.phil-title,
.section-title,
.pain-sec h2,
.results-sec h2,
.journey-sec h2,
.pricing-sec h2,
.transform-sec h2,
.principles-sec h2,
.faq-sec h2 {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
}

.noto-condensed {
  font-family: var(--font-serif-condensed) !important;
  font-stretch: condensed;
  letter-spacing: -0.01em;
}

p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
}

/* ==========================================================================
   SECTION 4: ENTREGABLES (LO QUE INCLUYE LA CONSULTORÍA)
   ========================================================================== */
.deliverables-sec {
  background: var(--color-wine);
  color: var(--bg-base);
  padding: 8rem 0;
}

.deliverables-sec h2 {
  color: var(--bg-base) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  text-align: center;
  margin-bottom: 3rem;
}

.deliverables-intro {
  color: rgba(238, 239, 222, 0.85);
  font-size: 1.15rem;
  max-width: 800px;
  margin: 0 auto 4rem auto;
  text-align: center;
  line-height: 1.6;
}

.deliverables-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.deliverable-item {
  display: flex;
  gap: 2rem;
  border-left: 2px solid var(--color-terracotta);
  padding-left: 2.5rem;
  transition: var(--transition-smooth);
}

.deliverable-item:hover {
  border-left-color: var(--color-acid);
  transform: translateX(8px);
}

.deliverable-content {
  flex: 1;
}

.deliverable-item-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--bg-base);
  margin-bottom: 0.75rem;
}

.deliverable-item-text {
  color: rgba(238, 239, 222, 0.75);
  font-size: 1.05rem;
  line-height: 1.6;
}

.deliverable-sublist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.deliverable-sublist li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(238, 239, 222, 0.75);
  font-size: 1.02rem;
  line-height: 1.5;
}

.deliverable-sublist li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-terracotta);
}

/* ==========================================================================
   SECTION 5: METODOLOGÍA (DIAGRAMA DE VENN)
   ========================================================================== */
.metodologia-sec {
  background: var(--bg-base);
  padding: 8rem 0;
  border-top: 1px solid rgba(53, 30, 40, 0.08);
}

.metodologia-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 5rem auto;
}

.metodologia-header h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 1.5rem;
}

.metodologia-subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Venn Diagram Desktop Layout */
.venn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem;
}

.venn-diagram {
  position: relative;
  width: 480px;
  height: 440px;
}

/* Float animations for Venn circles */
@keyframes float-marca {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-4px, -6px); }
  100% { transform: translate(0, 0); }
}
@keyframes float-estrategia {
  0% { transform: translate(0, 0); }
  50% { transform: translate(5px, -5px); }
  100% { transform: translate(0, 0); }
}
@keyframes float-comunicacion {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0px, 6px); }
  100% { transform: translate(0, 0); }
}

/* Circle wrappers for layout & scroll animations */
.circle-wrapper {
  position: absolute;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.circle-wrapper:hover {
  z-index: 12;
}

.wrapper-marca {
  left: 0;
  top: 0;
  width: 280px;
  height: 280px;
}

.wrapper-estrategia {
  right: 0;
  top: 0;
  width: 280px;
  height: 280px;
}

.wrapper-comunicacion {
  left: 100px;
  bottom: 0;
  width: 280px;
  height: 280px;
}

.wrapper-intersection {
  left: 200px;
  top: 110px;
  width: 80px;
  height: 80px;
  z-index: 20; /* Keep TÚ in front of all circles, even when they are hovered */
}

.venn-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: multiply;
  border: 1px solid rgba(53, 30, 40, 0.18);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, border-color 0.4s ease;
}

.venn-circle.circle-marca {
  background-color: rgba(215, 239, 255, 0.9); /* Azul editorial */
  animation: float-marca 8s ease-in-out infinite;
}

.venn-circle.circle-estrategia {
  background-color: rgba(185, 122, 107, 0.78); /* Terracotta */
  animation: float-estrategia 9s ease-in-out infinite;
}

.venn-circle.circle-comunicacion {
  background-color: rgba(238, 239, 222, 0.95); /* Neutral suave */
  border-color: var(--color-wine);
  animation: float-comunicacion 10s ease-in-out infinite;
}

/* Hover highlights for active state */
.venn-circle.circle-marca:hover {
  transform: scale(1.05) translate(-2px, -2px);
  opacity: 0.98;
  border-color: var(--color-wine);
}

.venn-circle.circle-estrategia:hover {
  transform: scale(1.05) translate(2px, -2px);
  opacity: 0.98;
  border-color: var(--color-wine);
}

.venn-circle.circle-comunicacion:hover {
  transform: scale(1.05) translate(0, 2px);
  opacity: 0.98;
  border-color: var(--color-wine);
}

/* Venn Labels Layer (always on top) */
.venn-label {
  position: absolute;
  z-index: 15; /* Sits on top of circles and the intersection */
  text-align: center;
  pointer-events: none; /* Mouse clicks/hovers pass through to the circles beneath */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
  animation: none !important; /* No float animation on text to prevent transform conflicts with fade-in */
}

.label-marca {
  left: 45px;
  top: 65px;
  width: 140px;
}

.label-estrategia {
  right: 45px;
  top: 65px;
  width: 140px;
}

.label-comunicacion {
  bottom: 85px; /* Moved up closer to the center of the bottom circle */
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
}

.circle-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--color-wine);
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6);
}

.venn-intersection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-acid);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(233, 240, 86, 0.3);
  z-index: 10;
  border: 1px solid var(--color-wine);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  cursor: pointer;
}

.venn-intersection:hover {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 6px 20px rgba(233, 240, 86, 0.5);
}

.intersection-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--color-wine);
}

/* Detail Cards Grid */
.metodologia-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.metodologia-card {
  background: var(--bg-blue);
  padding: 2.5rem;
  border-radius: 6px;
  border: 1px solid rgba(53, 30, 40, 0.05);
  box-shadow: 0 4px 20px rgba(53, 30, 40, 0.02);
  transition: var(--transition-smooth);
}

.metodologia-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(53, 30, 40, 0.06);
}

.detail-marca {
  border-top: 4px solid var(--bg-blue);
}

.detail-estrategia {
  border-top: 4px solid var(--color-terracotta);
}

.detail-comunicacion {
  border-top: 4px solid var(--color-wine);
}

.metodologia-card.active-highlight {
  transform: translateY(-8px);
  box-shadow: 0 16px 35px rgba(53, 30, 40, 0.12);
  border-color: var(--color-wine) !important;
  background-color: #f7fbfe !important;
}

.metodologia-card-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--color-wine);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.metodologia-card-title .marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background-color: var(--color-terracotta);
}

.metodologia-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.metodologia-card-list li {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-muted);
  position: relative;
  padding-left: 1.25rem;
}

.metodologia-card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-terracotta);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .venn-diagram {
    transform: scale(0.8);
    margin: 0 auto;
    height: 380px;
    width: 400px;
  }
  .wrapper-marca {
    left: 0;
    top: 0;
    width: 230px;
    height: 230px;
  }
  .wrapper-estrategia {
    right: 0;
    top: 0;
    width: 230px;
    height: 230px;
  }
  .wrapper-comunicacion {
    left: 85px;
    bottom: 0;
    width: 230px;
    height: 230px;
  }
  .wrapper-intersection {
    left: 160px;
    top: 90px;
    width: 70px;
    height: 70px;
    z-index: 20; /* Keep TÚ in front of all circles on mobile too */
  }
  .label-marca {
    left: 30px !important;
    top: 50px !important;
    width: 110px;
  }
  .label-estrategia {
    right: 30px !important;
    top: 50px !important;
    width: 110px;
  }
  .label-comunicacion {
    bottom: 65px !important; /* Moved up closer to the center on mobile */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 130px;
  }
  .circle-title {
    font-size: 0.78rem;
  }
  .metodologia-details {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   SECTION 7: TRANSFORMACIÓN (ANTES / DESPUÉS)
   ========================================================================== */
.transform-sec {
  background: var(--bg-base);
  padding: 8rem 0;
  border-top: 1px solid rgba(53, 30, 40, 0.08);
}

.transform-sec h2 {
  text-align: center;
  margin-bottom: 5rem;
}

.transform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

.transform-col {
  padding: 3rem;
  border-radius: 8px;
  border: 1px solid rgba(53, 30, 40, 0.08);
  box-shadow: 0 10px 30px rgba(53, 30, 40, 0.02);
}

.transform-antes {
  background: rgba(53, 30, 40, 0.02);
  border-left: 4px solid rgba(53, 30, 40, 0.15);
}

.transform-despues {
  background: var(--bg-blue);
  border-left: 4px solid var(--color-terracotta);
}

.transform-col-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  color: var(--color-wine);
}

.transform-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.transform-list li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-main);
  position: relative;
  padding-left: 2rem;
}

.transform-antes .transform-list li::before {
  content: "❌";
  position: absolute;
  left: 0;
  font-size: 1rem;
}

.transform-despues .transform-list li::before {
  content: "✅";
  position: absolute;
  left: 0;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .transform-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .transform-col {
    padding: 2rem 1.5rem;
  }
}

/* ==========================================================================
   SECTION 8: VALORES (CINCO PRINCIPIOS)
   ========================================================================== */
.principles-sec {
  background: var(--color-wine);
  color: var(--bg-base);
  padding: 8rem 0;
}

.principles-sec h2 {
  color: var(--bg-base) !important;
  text-align: center;
  margin-bottom: 5rem;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.principle-card {
  background: rgba(238, 239, 222, 0.05);
  border: 1px solid rgba(238, 239, 222, 0.1);
  padding: 2.5rem;
  border-radius: 6px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.principle-card:hover {
  background: rgba(238, 239, 222, 0.08);
  border-color: var(--color-acid);
  transform: translateY(-5px);
}

.principle-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-terracotta);
  margin-bottom: 1rem;
}

.principle-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--bg-base);
  margin-bottom: 1rem;
}

.principle-text {
  color: rgba(238, 239, 222, 0.75);
  font-size: 0.98rem;
  line-height: 1.6;
}

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

@media (max-width: 768px) {
  .principles-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ==========================================================================
   SECTION 9: Q&A (PREGUNTAS FRECUENTES)
   ========================================================================== */
.faq-sec {
  background: var(--bg-base);
  padding: 8rem 0;
  border-top: 1px solid rgba(53, 30, 40, 0.08);
}

.faq-sec h2 {
  text-align: center;
  margin-bottom: 5rem;
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq-item {
  background: var(--bg-blue);
  border: 1px solid rgba(53, 30, 40, 0.05);
  border-radius: 6px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.faq-item[open] {
  box-shadow: 0 10px 30px rgba(53, 30, 40, 0.05);
}

.faq-question {
  padding: 1.75rem 2rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-wine);
  cursor: pointer;
  list-style: none; /* Hide default triangle marker */
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

/* Hide native summary marker in Safari */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Custom +/- indicator */
.faq-question::after {
  content: "+";
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-terracotta);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-question::after {
  content: "—";
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 2rem 1.75rem 2rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.faq-answer p {
  margin: 0;
}

/* Mini form elements inside scroll pop-up */
.popup-freebie-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.popup-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  border: 1px solid rgba(53, 30, 40, 0.15);
  background: var(--bg-base);
  color: var(--color-wine);
  transition: var(--transition-fast);
}

.popup-input:focus {
  border-color: var(--color-terracotta);
  outline: none;
}

.pricing-sec {
  background: var(--bg-blue);
}

.pricing-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.pricing-info-col h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 2rem;
}

.pricing-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 3rem;
}

.value-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.value-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(53, 30, 40, 0.1);
}

.value-item-name {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-wine);
  max-width: 100%;
}

.value-item-price {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-terracotta);
}

/* Interactive Card container */
.pricing-card {
  background: var(--bg-base);
  border: 1px solid rgba(53, 30, 40, 0.1);
  padding: 3.5rem 3rem;
  position: relative;
  box-shadow: 0 25px 60px rgba(53, 30, 40, 0.08);
  max-width: 550px;
  width: 100%;
}

@media (max-width: 480px) {
  .pricing-card {
    padding: 2.5rem 1.5rem;
  }
}

.pricing-card-header {
  text-align: center;
  border-bottom: 1px solid rgba(53, 30, 40, 0.1);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.pricing-card-badge {
  display: inline-block;
  background: var(--color-wine);
  color: var(--bg-base);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  padding: 0.6rem 1.2rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.original-price {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: rgba(53, 30, 40, 0.5);
  margin-bottom: 0.25rem;
}

.current-price {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-wine);
  line-height: 1;
}

.price-currency {
  font-size: 1.2rem;
  font-weight: 500;
  vertical-align: super;
}

.price-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-terracotta);
  margin-top: 1rem;
  text-align: center;
  max-width: 90%;
}

/* Configurator options */
.pricing-configurator {
  margin-bottom: 2.5rem;
}

.configurator-title {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-wine);
  margin-bottom: 1.25rem;
  display: block;
}

.addon-option {
  display: block;
  background: rgba(215, 239, 255, 0.3);
  border: 1px solid rgba(53, 30, 40, 0.08);
  padding: 1.25rem;
  margin-bottom: 1rem;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.addon-option:hover {
  background: rgba(215, 239, 255, 0.6);
  border-color: var(--color-terracotta);
}

.addon-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.addon-box-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addon-label-text {
  display: flex;
  flex-direction: column;
}

.addon-label-main {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-wine);
}

.addon-label-sub {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.addon-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-wine);
}

/* Checked styling for custom checkbox */
.addon-option.active {
  background: var(--bg-blue);
  border-color: var(--color-wine);
}

.addon-option.active::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: var(--color-acid);
  border: 1px solid var(--color-wine);
  color: var(--color-wine);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.pricing-submit-btn {
  width: 100%;
  padding: 1.4rem;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.pricing-security {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pricing-security svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ==========================================================================
   SECTION 8: FOOTER & NEWSLETTER
   ========================================================================== */
.footer-sec {
  background: var(--color-wine);
  color: var(--bg-base);
  padding: 6rem 0 3rem 0;
}

.newsletter-box {
  max-width: 650px;
  margin: 0 auto 5rem auto;
  text-align: center;
}

.newsletter-box h3 {
  color: var(--bg-base);
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
}

.newsletter-box p {
  color: rgba(238, 239, 222, 0.75);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.newsletter-form {
  display: flex;
  gap: 0;
  border: 1px solid rgba(238, 239, 222, 0.25);
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition-smooth);
}

.newsletter-form:focus-within {
  border-color: var(--color-terracotta);
  background: rgba(255, 255, 255, 0.06);
}

.newsletter-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  padding: 1rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--bg-base);
  outline: none;
}

.newsletter-input::placeholder {
  color: rgba(238, 239, 222, 0.4);
}

.newsletter-btn {
  background: var(--color-terracotta);
  color: var(--bg-base);
  border: none;
  padding: 0 2rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: var(--transition-fast);
}

.newsletter-btn:hover {
  background: var(--color-acid);
  color: var(--color-wine);
}

@media (max-width: 576px) {
  .newsletter-form {
    flex-direction: column;
    border: none;
    padding: 0;
    gap: 1rem;
    background: transparent;
  }
  .newsletter-input {
    border: 1px solid rgba(238, 239, 222, 0.25);
    background: rgba(255, 255, 255, 0.03);
    width: 100%;
  }
  .newsletter-btn {
    padding: 1.2rem;
    width: 100%;
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(238, 239, 222, 0.1);
  padding-top: 3rem;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
}

.footer-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--bg-base);
}

.footer-socials {
  display: flex;
  gap: 1.5rem;
}

.footer-social-link {
  color: var(--bg-base);
  opacity: 0.7;
  transition: var(--transition-fast);
}

.footer-social-link:hover {
  opacity: 1;
  color: var(--color-acid);
  transform: translateY(-2px);
}

.footer-copyright {
  font-size: 0.8rem;
  color: rgba(238, 239, 222, 0.4);
}

.footer-info-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .footer-info-group {
    align-items: center;
  }
}

.clear-cache-btn {
  background: transparent;
  border: 1px solid rgba(238, 239, 222, 0.2);
  color: rgba(238, 239, 222, 0.5);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.clear-cache-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--bg-base);
}

/* ==========================================================================
   MODALS AND POPUPS
   ========================================================================== */
/* Google Form Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(53, 30, 40, 0.8);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background: var(--bg-base);
  width: 90%;
  max-width: 750px;
  height: 80vh;
  border: 1px solid var(--color-wine);
  display: flex;
  flex-direction: column;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}

.modal-overlay.active .modal-container {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: -45px;
  right: 0;
  background: none;
  border: none;
  color: var(--bg-base);
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--color-acid);
  transform: rotate(90deg);
}

.modal-body {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Scroll / Load Pop-up */
.scroll-popup {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg-blue);
  border: 2px solid var(--color-wine);
  padding: 2rem;
  max-width: 380px;
  z-index: 900;
  box-shadow: 0 15px 40px rgba(53, 30, 40, 0.15);
  transform: translateY(150px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 576px) {
  .scroll-popup {
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: 0 -10px 30px rgba(53, 30, 40, 0.15);
  }
}

.scroll-popup.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.scroll-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--color-wine);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-fast);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-popup-close:hover {
  color: var(--color-terracotta);
}

.scroll-popup-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-wine);
  margin-bottom: 0.5rem;
}

.scroll-popup-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.scroll-popup-btn {
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  width: 100%;
}

/* ==========================================================================
   SHOPPING CART & SIDEBAR
   ========================================================================== */
/* Floating Cart Trigger Button */
.floating-cart-trigger {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  background: var(--color-wine);
  color: var(--bg-base);
  border: 1px solid var(--color-terracotta);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 850;
  box-shadow: 0 10px 30px rgba(53, 30, 40, 0.2);
  transition: var(--transition-smooth);
}

.floating-cart-trigger:hover {
  transform: scale(1.1);
  background: var(--color-terracotta);
  border-color: var(--color-acid);
}

.floating-cart-trigger svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-acid);
  color: var(--color-wine);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-wine);
}

/* Cart Sidebar Slide-over Panel */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 450px;
  height: 100%;
  background: var(--bg-base);
  border-left: 1px solid rgba(53, 30, 40, 0.15);
  box-shadow: -15px 0 40px rgba(0,0,0,0.1);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-sidebar.active {
  transform: translateX(0);
}

.cart-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(53, 30, 40, 0.4);
  backdrop-filter: blur(2px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.cart-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-sidebar-header {
  padding: 2rem;
  border-bottom: 1px solid rgba(53, 30, 40, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-sidebar-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-wine);
}

.cart-close-btn {
  background: none;
  border: none;
  color: var(--color-wine);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: var(--transition-fast);
}

.cart-close-btn:hover {
  color: var(--color-terracotta);
  transform: rotate(90deg);
}

.cart-sidebar-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.cart-items-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 2rem;
}

.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(53, 30, 40, 0.08);
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.cart-item-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-wine);
}

.cart-item-desc {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.cart-item-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-wine);
}

.cart-sidebar-summary {
  padding: 2rem;
  background: var(--bg-blue);
  border-top: 1px solid rgba(53, 30, 40, 0.1);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-wine);
  margin-bottom: 1rem;
}

.cart-summary-note {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.cart-checkout-btn {
  width: 100%;
  padding: 1.2rem;
  text-align: center;
  font-size: 0.9rem;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES FOR MOBILE SCREEN AND IPHONE TYPOGRAPHY
   ========================================================================== */
@media (max-width: 576px) {
  .container {
    padding: 0 1.5rem; /* Incrementado de 1.25rem para dar más espacio en iPhone y no estar pegado al borde */
  }

  /* Reducir el tamaño de las letras y títulos para evitar efecto zoom */
  .hero-title {
    font-size: clamp(2.0rem, 9vw, 3.0rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    word-break: break-word;
  }

  .hero-body {
    font-size: 0.95rem; /* Ajustado para verse proporcional en iPhone */
    line-height: 1.6;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%; /* Forzar alineación estricta al margen */
    text-align: left;
  }

  .bridge-title {
    font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
  }

  .bridge-text-box p {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .phil-title,
  .pain-sec h2,
  .journey-header h2,
  .pricing-info-col h2 {
    font-size: clamp(1.8rem, 8vw, 2.3rem);
    line-height: 1.15;
    margin-bottom: 2.5rem;
  }

  .results-intro-col h2 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
  }

  .phil-intro-lead {
    font-size: 1.4rem;
  }

  .phil-card {
    padding: 1.5rem;
  }

  .pain-quote {
    font-size: 1.35rem;
  }

  .top-bar-right {
    gap: 1rem;
  }

  .lang-selector {
    font-size: 0.75rem;
  }

  .micro-title {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
}

/* ==========================================================================
   ANIMACIÓN DE MÁQUINA DE ESCRIBIR (TYPEWRITER) VIA PSEUDO-ELEMENTO
   ========================================================================== */
#main-heading::after {
  content: '|';
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--color-terracotta);
  animation: blink 0.75s step-end infinite;
  vertical-align: bottom;
  margin-left: 5px;
  display: inline-block;
  line-height: 0.95;
  transition: opacity 0.5s ease;
}

@media (max-width: 576px) {
  #main-heading::after {
    font-size: clamp(2.0rem, 9vw, 3.0rem);
  }
}

#main-heading.typing-complete::after {
  content: '';
  display: none;
}

@keyframes blink {
  from, to { color: transparent }
  50% { color: var(--color-terracotta); }
}

/* ==========================================================================
   GSAP HERO SECCIÓN CON PUERTAS DESLIZANTES & MARQUEE HEADER
   ========================================================================== */

:root {
  --bg-blue: #D7EFFF;
}

/* Modificaciones para Top Bar Fijo con Marquee */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4.5rem;
  background: transparent; /* Permite el blend-mode sobre las imágenes */
  border-bottom: 1px solid rgba(53, 30, 40, 0.08);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  overflow: hidden;
}

/* Compensar el espacio del top-bar fijo para el resto del sitio */
body {
  padding-top: 0; /* Ya que el Hero es full screen height y empieza en top: 0 */
}

.logo-marquee {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  mix-blend-mode: difference;
  filter: invert(1) grayscale(1) contrast(3);
  pointer-events: none;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-list {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-width: 100%;
  animation: scroll-marquee 25s linear infinite;
}

.marquee-list span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.25em;
  color: var(--bg-base); /* Invertido se leerá en vino o blanco según fondo */
  padding: 0 4rem;
  text-transform: uppercase;
}

.top-bar-right-container {
  position: relative;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
  background: var(--bg-base);
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  border: 1px solid rgba(53, 30, 40, 0.05);
}

@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Estilos de la nueva Hero Section con GSAP */
.hero-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-reveal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6rem 2rem 2rem 2rem; /* padding superior para no tapar el top bar */
  background-color: var(--bg-blue);
  z-index: 5;
}

.hero-title-large {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1.0;
  color: var(--color-wine);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.hero-subtitle-large {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  font-weight: 400;
  color: var(--color-terracotta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: 800px;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.hero-subtitle-large strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--color-wine);
  text-transform: none;
  font-size: 1.15em;
}

.hero-bottom-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--bg-blue);
  padding: 6rem 2rem;
  width: 100%;
}

.hero-bottom-block .hero-body {
  color: var(--color-wine);
  font-size: 1.25rem;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  text-align: center;
}

.hero-bottom-block .hero-cta-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sliding-doors {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.door {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.door-left {
  border-right: 1px solid rgba(238, 239, 222, 0.1);
}

.door img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.mobile-carousel {
  display: none;
}

/* Indicador de Scroll */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--bg-base);
  mix-blend-mode: difference;
  opacity: 0.8;
  animation: pulse-scroll 2s infinite;
}

@keyframes pulse-scroll {
  0%, 100% { opacity: 0.3; transform: translate(-50%, 0); }
  50% { opacity: 0.9; transform: translate(-50%, 10px); }
}

/* ==========================================================================
   MEDIA QUERIES - RESPONSIVE (MÓVIL < 768px)
   ========================================================================== */
@media (max-width: 767px) {
  .top-bar {
    height: 3.5rem;
    padding: 0 1rem;
    background: rgba(53, 30, 40, 0.9); /* Fondo vino oscuro fijo en móvil */
    backdrop-filter: blur(10px);
  }

  .logo-marquee {
    mix-blend-mode: normal;
    filter: none;
  }

  .marquee-list span {
    color: var(--bg-base);
    font-size: 1.1rem;
    padding: 0 2rem;
  }

  .top-bar-right-container {
    background: var(--bg-base);
    border: 1px solid rgba(53, 30, 40, 0.05);
    padding: 0.35rem 0.8rem;
    border-radius: 4px;
    gap: 0.75rem;
  }

  .top-bar-right-container .social-links {
    gap: 0.75rem;
  }

  .top-bar-right-container .social-icon-link {
    color: var(--color-wine);
  }

  .top-bar-right-container .social-icon-link:hover {
    color: var(--color-terracotta);
  }

  .top-bar-right-container .social-icon-link svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .top-bar-right-container .lang-btn {
    color: var(--text-muted);
  }

  .top-bar-right-container .lang-btn.active {
    color: var(--color-wine);
  }

  .top-bar-right-container .lang-divider {
    color: rgba(53, 30, 40, 0.2);
  }

  .sliding-doors {
    display: none !important;
  }

  .hero-container {
    height: auto !important;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--bg-blue);
  }

  .mobile-carousel {
    display: block;
    position: relative !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh !important;
    z-index: 2;
    order: 1;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
  }

  .carousel-slide.active {
    opacity: 1;
    z-index: 2;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(53, 30, 40, 0.2), rgba(53, 30, 40, 0.75));
    z-index: 3;
  }

  .hero-reveal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrar verticalmente */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65vh !important; /* Cubrir exactamente el carrusel móvil */
    z-index: 10 !important;
    background-color: transparent !important;
    padding: 2rem 1.5rem !important;
    box-sizing: border-box !important;
  }

  .hero-title-large {
    position: static !important;
    color: var(--bg-base) !important;
    font-size: clamp(1.8rem, 6.5vw, 2.2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 1.25rem 0 !important; /* Separación limpia con el subtítulo */
    text-align: center !important;
    width: 100% !important;
  }

  .hero-subtitle-large {
    position: static !important;
    color: rgba(238, 239, 222, 0.95) !important;
    font-size: clamp(0.85rem, 3.8vw, 1.0rem) !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-subtitle-large strong {
    color: var(--color-acid) !important;
  }

  .hero-bottom-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-blue); /* #D7EFFF */
    padding: 3.5rem 1.5rem 4rem 1.5rem;
    width: 100%;
  }

  .hero-bottom-block .hero-body {
    color: var(--color-wine) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
    margin: 0 0 2.5rem 0 !important; /* Generoso espacio entre texto y botón */
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .hero-bottom-block .hero-cta-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  .scroll-indicator {
    display: none !important;
  }
}

/* ==========================================================================
   PÁGINA DE LEAD MAGNET: FREEBIE.HTML
   ========================================================================== */
/* Promo Card Section on Main Page */
/* Services Promo Section Grid */
.services-promo-sec {
  background: var(--color-acid);
  padding: 6rem 0;
  border-bottom: 1px solid rgba(53, 30, 40, 0.08);
}

.services-promo-sec .services-redirect-text {
  color: var(--color-wine);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1050px;
  margin: 0 auto;
}

.service-promo-card {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: var(--transition-smooth);
  border-radius: 4px;
}

/* Service Card 1 (Dashed outline, light background) */
.service-promo-card:first-child {
  background: rgba(53, 30, 40, 0.02);
  border: 1px dashed rgba(53, 30, 40, 0.15);
}

.service-promo-card:first-child:hover {
  background: rgba(53, 30, 40, 0.04);
  border-color: var(--color-wine);
}

/* Service Card 2 (Solid blue, representing premium complete package) */
.service-promo-card:last-child {
  background: var(--bg-blue);
  border: 1px solid rgba(53, 30, 40, 0.05);
  box-shadow: 0 10px 30px rgba(53, 30, 40, 0.02);
}

.service-promo-card:last-child:hover {
  border-color: var(--color-terracotta);
  box-shadow: var(--shadow-premium);
}

.service-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-terracotta);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: block;
}

.service-title {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-wine);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.service-price {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-wine);
  background: rgba(185, 122, 107, 0.08); /* Terracotta tint matching palette */
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  border: 1px solid rgba(185, 122, 107, 0.15);
}

.service-promo-card:last-child .service-price {
  background: rgba(53, 30, 40, 0.05);
  border-color: rgba(53, 30, 40, 0.1);
  color: var(--color-wine);
}

.service-text {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 2rem;
  flex-grow: 1;
}

.service-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.service-highlights li {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.service-cta {
  margin-top: auto;
  width: 100%;
}

.service-cta .btn {
  width: 100%;
  text-align: center;
}

.service-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.service-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.service-check-list li {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.service-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(53, 30, 40, 0.08);
  padding-top: 1.5rem;
}

.service-meta-tags span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-wine);
  background: rgba(185, 122, 107, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: 40px;
  border: 1px solid rgba(185, 122, 107, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.service-promo-card:last-child .service-meta-tags span {
  background: rgba(53, 30, 40, 0.05);
  border-color: rgba(53, 30, 40, 0.1);
  color: var(--color-wine);
}

.service-section-heading {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-wine);
  margin: 2rem 0 1.25rem 0;
}

.service-cta-subtext {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
}

.service-layers-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.service-layers-list li {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.service-layers-list li strong {
  color: var(--color-wine);
}

.service-layers-list .layer-num {
  background: var(--color-wine);
  color: var(--bg-base);
  font-size: 0.75rem;
  font-weight: 700;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.service-promo-card:last-child .service-layers-list .layer-num {
  background: var(--color-terracotta);
  color: var(--color-wine);
}

.services-redirect-banner {
  max-width: 850px;
  margin: 0 auto;
  padding: 5rem 3rem;
  background: rgba(53, 30, 40, 0.02);
  border: 1px dashed rgba(53, 30, 40, 0.15);
  border-radius: 4px;
  text-align: center;
  transition: var(--transition-smooth);
}

.services-redirect-banner:hover {
  background: rgba(53, 30, 40, 0.03);
  border-color: var(--color-wine);
}

.services-redirect-heading {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-wine);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.services-redirect-text {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 2rem auto;
}

.services-redirect-banner .btn {
  white-space: normal;
  display: inline-block;
  line-height: 1.4;
  padding: 1.25rem 2.25rem;
  max-width: 100%;
}

.services-redirect-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .services-redirect-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .services-redirect-buttons .btn {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 991px) {
  .services-promo-sec {
    padding: 4rem 0;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 600px;
    padding: 0 1.5rem;
  }
  .service-promo-card {
    padding: 3rem 2rem;
  }
  .services-redirect-banner {
    padding: 3.5rem 1.5rem;
    margin: 0 1rem;
  }
}

/* Single Service Dedicated Page Styles */
.single-service-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}

.service-promo-card.single-card {
  box-shadow: 0 15px 45px rgba(53, 30, 40, 0.04);
}

@media (max-width: 768px) {
  .single-service-wrapper {
    padding: 0 1rem;
  }
}

/* Strategist Profile Section */
.strategist-sec-wrapper {
  max-width: 850px;
  margin: 6rem auto 0 auto;
  padding: 0 1.5rem;
}

.strategist-heading {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  color: var(--color-wine);
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.strategist-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  background: rgba(53, 30, 40, 0.02);
  border: 1px solid rgba(53, 30, 40, 0.06);
  padding: 3rem;
  border-radius: 4px;
  align-items: center;
}

.strategist-img-container {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(53, 30, 40, 0.08);
}

.strategist-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.strategist-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.strategist-name {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-wine);
  margin: 0;
}

.strategist-role {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: -0.5rem;
}

.strategist-bio {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .strategist-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
  .strategist-name {
    font-size: 1.8rem;
  }
}

/* Freebie Page Layout */
.freebie-wrapper {
  background-color: var(--bg-base);
  color: var(--color-wine);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem; /* Reduced padding from 4rem */
}

.freebie-header {
  margin-bottom: 2rem; /* Reduced from 6rem */
  text-align: center;
}

.freebie-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  color: var(--color-wine);
  text-decoration: none;
  border-bottom: none;
}

.freebie-container {
  max-width: 750px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Reduced from 5rem to avoid empty white space */
}

.freebie-intro, .freebie-metaphor, .freebie-capture {
  display: flex;
  flex-direction: column;
}

.freebie-tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--color-terracotta);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.freebie-title {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.freebie-body p {
  color: var(--color-wine);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.freebie-body p.highlight-p {
  font-style: italic;
  font-weight: 600;
  border-left: 2px solid var(--color-terracotta);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

/* Metaphor / List styling */
.freebie-divider {
  border: 0;
  height: 1px;
  background: rgba(53, 30, 40, 0.1);
  margin: 1rem 0;
}

.freebie-sec-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--color-wine);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.freebie-sec-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}

.floors-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.floors-list li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(53, 30, 40, 0.05);
}

.floors-list li:last-child {
  border-bottom: none;
}

.floor-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-wine);
}

.floor-desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Floor Tag styling */
.floor-tag {
  background-color: var(--color-terracotta);
  color: var(--bg-base);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  padding: 0.35rem 0.8rem;
  align-self: flex-start;
  margin-bottom: 0.5rem;
  border-radius: 2px;
}

/* Capture / Form styling with wine color palette background */
.freebie-capture {
  background-color: var(--color-wine);
  color: var(--bg-base);
  padding: 5rem 4rem;
  border-radius: 4px;
  border: 1px solid rgba(238, 239, 222, 0.05);
}

.freebie-capture .freebie-sec-title {
  color: var(--bg-base);
  border-bottom: 1px solid rgba(238, 239, 222, 0.1);
  padding-bottom: 1rem;
}

.capture-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(238, 239, 222, 0.85);
  margin-bottom: 3rem;
}

.freebie-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.freebie-form .input-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.freebie-form input[type="email"] {
  background: transparent;
  border: 1px solid var(--color-terracotta);
  border-radius: 0;
  padding: 1.1rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--bg-base);
  width: 100%;
  max-width: 450px;
  text-align: center;
  box-sizing: border-box;
  transition: var(--transition-fast);
}

.freebie-form input[type="email"]::placeholder {
  color: rgba(238, 239, 222, 0.4);
}

.freebie-form input[type="email"]:focus {
  outline: none;
  border-color: var(--bg-base);
  box-shadow: 0 4px 12px rgba(238, 239, 222, 0.05);
}

.freebie-submit-btn {
  background: transparent;
  border: 1px solid var(--bg-base);
  color: var(--bg-base);
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1.1rem 3rem;
  font-size: 0.85rem;
  cursor: pointer;
  width: auto;
  min-width: 250px;
  transition: var(--transition-smooth);
}

.freebie-submit-btn:hover {
  background: var(--bg-base);
  color: var(--color-wine);
}

/* Success box */
.freebie-success-container {
  display: flex;
  justify-content: center;
  width: 100%;
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.success-box {
  border: 1px dashed var(--color-terracotta);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(53, 30, 40, 0.5);
  color: var(--bg-base);
}

.success-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bg-base);
  margin-bottom: 1rem;
}

.success-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(238, 239, 222, 0.8);
  margin-bottom: 2rem;
}

.canva-link-btn {
  background: var(--bg-base);
  color: var(--color-wine);
  border: 1px solid var(--bg-base);
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1.1rem 2.5rem;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition-smooth);
}

.canva-link-btn:hover {
  background: transparent;
  color: var(--bg-base);
  border-color: var(--bg-base);
}

/* Showcase Grid layout */
.freebie-showcase {
  margin: 1.5rem 0;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.5rem auto 0 auto;
  max-width: 580px; /* Make showcase compact and centered */
  width: 100%;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(53, 30, 40, 0.02);
  padding: 1rem; /* Reduced padding */
  border-radius: 4px;
  border: 1px solid rgba(53, 30, 40, 0.05);
  box-shadow: 0 4px 20px rgba(53, 30, 40, 0.02);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(53, 30, 40, 0.06);
}

.showcase-img-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Matches the horizontal 16:9 PDF format */
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(53, 30, 40, 0.1);
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure 100% of the horizontal template is visible */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-card:hover .showcase-img {
  transform: scale(1.03);
}

.showcase-label {
  font-family: var(--font-serif);
  font-size: 0.95rem; /* Slightly smaller font */
  font-style: italic;
  color: var(--color-wine);
  margin-top: 0.75rem;
  text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .freebie-wrapper {
    padding: 1.5rem 1.25rem; /* Reduced from 3rem */
  }
  .freebie-header {
    margin-bottom: 2rem; /* Reduced from 4rem */
  }
  .freebie-container {
    gap: 2rem; /* Reduced from 3.5rem */
  }
  .freebie-capture {
    padding: 2.5rem 1.5rem; /* Reduced from 3rem */
  }
  .success-box {
    padding: 2rem 1.5rem;
  }
  .showcase-grid {
    grid-template-columns: 1fr 1fr; /* Keep 2 columns side-by-side on mobile */
    gap: 1rem;
    max-width: 100%;
  }
  .showcase-card {
    padding: 0.75rem;
  }
  .showcase-label {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
}

.response-sec {
  background-color: var(--color-wine);
  color: var(--bg-blue);
  padding: 6rem 2rem;
  text-align: center;
}

.response-text {
  font-family: 'Feature', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-style: italic;
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto;
  color: #D7EFFF !important;
}

/* Custom Methodology Card Text */
.metodologia-card-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Special highlight class and strong tags for important words (bold, italic, serif style like 'remarkable') */
strong,
.remarkable-highlight {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-size: 1.1em;
  display: inline;
}

/* ==========================================================================
   CONÓCEME (ABOUT ME) INTERACTIVE NOTEBOOK DECK STYLES
   ========================================================================== */
.conoceme-desk {
  background: linear-gradient(135deg, #24141b 0%, #15090f 50%, #0d0409 100%);
  padding: 8rem 0 6rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.conoceme-desk .back-link {
  color: var(--bg-blue);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 2.5rem;
  display: inline-block;
  position: relative;
  z-index: 10;
  transition: var(--transition-fast);
}

.conoceme-desk .back-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--bg-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.conoceme-desk .back-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.paper-stack-container {
  width: 100%;
  max-width: 730px;
  margin: 0 auto;
  position: relative;
}

.paper-stack {
  position: relative;
  width: 100%;
  height: 850px;
  margin: 0 auto;
  perspective: 1000px;
}

.paper-sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #EEEFDE; /* Cream base */
  color: var(--color-wine);
  padding: 2.5rem 3.5rem 2.5rem 5rem; /* Space on left for binder holes */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: bottom center;
  cursor: pointer;
  user-select: none;
  backface-visibility: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Notebook Binder Ring Hole Punches */
.paper-sheet::before {
  content: '';
  position: absolute;
  left: 2.2rem;
  top: 0;
  bottom: 0;
  width: 18px;
  background-image: radial-gradient(circle, #15090f 32%, transparent 37%);
  background-size: 18px 90px;
  background-repeat: repeat-y;
  opacity: 0.95;
  z-index: 5;
}

/* Notebook vertical margin line */
.paper-sheet::after {
  content: '';
  position: absolute;
  left: 3.8rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(185, 122, 107, 0.35); /* Terracota vertical rule */
  z-index: 4;
}

/* Stack styling and initial offsets */
.paper-sheet:nth-child(1) { transform: rotate(0.8deg); z-index: 4; }
.paper-sheet:nth-child(2) { transform: rotate(-1.5deg); z-index: 3; }
.paper-sheet:nth-child(3) { transform: rotate(2deg); z-index: 2; }
.paper-sheet:nth-child(4) { transform: rotate(-0.5deg); z-index: 1; }

.paper-sheet:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25);
}

/* Polaroid Card Style */
.polaroid-card {
  background-color: #fcfcf7;
  padding: 0.6rem 0.6rem 1.6rem 0.6rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  width: 190px;
  position: relative;
  transform: rotate(-1deg);
  border-radius: 1px;
}

.polaroid-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05); /* Black & white styling matching reference */
  display: block;
}

.polaroid-caption {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 0.6rem;
  font-weight: 500;
}

/* Paperclip representation */
.paperclip {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 26px;
  height: 68px;
  z-index: 10;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.25));
}

.sheet-header {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 1.5rem;
}

.sheet-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
}

.sheet-body .story-p {
  color: var(--color-wine);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  font-family: var(--font-sans);
  margin: 0;
}

.sheet-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(53, 30, 40, 0.08);
  padding-top: 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(53, 30, 40, 0.5);
  margin-top: 1.2rem;
}

/* Handwritten signature block */
.handwritten-note {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--color-terracotta);
  text-align: right;
  margin-top: 1.5rem;
  transform: rotate(-3deg);
  line-height: 1.2;
}

/* Controls */
.paper-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3.5rem;
  position: relative;
  z-index: 10;
}

.btn-paper-nav {
  background: transparent;
  border: 1px solid rgba(215, 239, 255, 0.3);
  color: var(--bg-blue);
  padding: 0.8rem 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: 2px;
}

.btn-paper-nav:hover {
  background: var(--bg-blue);
  color: var(--color-wine);
  border-color: var(--bg-blue);
}

.paper-indicator {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: rgba(215, 239, 255, 0.7);
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Responsiveness */
@media (max-width: 768px) {
  .conoceme-desk {
    padding: 7rem 0 5rem 0;
  }
  
  .paper-stack {
    height: 660px;
  }
  
  .paper-sheet {
    padding: 2.2rem 2rem 2.2rem 3.2rem;
  }
  
  .paper-sheet::before {
    left: 1.1rem;
    width: 14px;
    background-size: 14px 70px;
  }
  
  .paper-sheet::after {
    left: 2.2rem;
  }
  
  .polaroid-card {
    width: 160px;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
  }
  
  .paperclip {
    width: 18px;
    height: 48px;
    top: -18px;
  }

  .sheet-header {
    margin-bottom: 1.5rem;
  }
  
  .sheet-body .story-p {
    line-height: 1.5;
  }
  
  .handwritten-note {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
  
  .paper-controls {
    margin-top: 2.5rem;
  }
}

@media (max-width: 480px) {
  .paper-stack {
    height: 600px;
  }
  
  .paper-sheet {
    padding: 1.8rem 1.2rem 1.8rem 2.5rem;
  }
  
  .paper-sheet::before {
    left: 0.8rem;
    width: 10px;
    background-size: 10px 60px;
  }
  
  .paper-sheet::after {
    left: 1.6rem;
  }
  
  .polaroid-card {
    width: 130px;
    padding: 0.4rem 0.4rem 1.2rem 0.4rem;
  }
  
  .paperclip {
    width: 15px;
    height: 40px;
    top: -14px;
  }
}