:root {
      --color-rojo: #971B25;
      --color-vinotinto: #660A11;
      --color-crema: #EFE6E3;
      --color-nude: #E0BCAF;
      --color-mauve: #B99590;
      --color-sage: #9AA793;
      --text-dark: #2A1A1A;
      --text-medium: #5C3D3D;
      
      --font-script: 'Pinyon Script', cursive;
      --font-body: 'Nunito', sans-serif;
      --font-serif: 'Cormorant Garamond', serif;
      
      --shadow-soft: 0 4px 24px rgba(151, 27, 37, 0.08);
      --radius-full: 9999px;
      
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --transition: 0.6s var(--ease-out);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background-color: var(--color-crema);
      color: var(--text-dark);
      overflow-x: hidden;
      line-height: 1.7;
    }

    /* Browser Surfaces */
    ::selection { background: var(--color-vinotinto); color: var(--color-crema); }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--color-crema); }
    ::-webkit-scrollbar-thumb { background: var(--color-mauve); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-rojo); }

    /* === Header === */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 900;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2.5rem 1rem 5.5rem;
      background: rgba(239, 230, 227, 0.93); /* Crema translúcido de CEF */
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(151, 27, 37, 0.08);
      transition: background 0.4s var(--ease-out);
    }
    .header-logo {
      text-align: center;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
    }
    .header-logo .script-name {
      font-family: var(--font-script);
      font-size: 2.4rem;
      color: var(--color-rojo);
      line-height: 1;
    }
    .header-logo .serif-subtitle {
      font-family: var(--font-serif);
      font-size: 0.75rem;
      letter-spacing: 0.35em;
      color: var(--text-medium);
      text-transform: uppercase;
      margin-top: 4px;
    }
    .header-social {
      display: flex;
      gap: 1.5rem;
      position: absolute;
      right: 2.5rem;
    }
    .header-social a {
      color: var(--color-rojo);
      font-size: 1.1rem;
      transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    }
    .header-social a:hover {
      color: var(--color-vinotinto);
      transform: translateY(-3px);
    }

    /* === Hamburger & Sidebar === */
    
    
    

    .sidebar-overlay {
      position: fixed; inset: 0;
      background: rgba(42, 26, 26, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 998;
      opacity: 0; pointer-events: none;
      transition: opacity 0.5s var(--ease-out);
    }
    .sidebar-overlay.active { opacity: 1; pointer-events: all; }
    
    .sidebar {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 400px;
      max-width: 85vw;
      background: #560B12; /* Mismo color de la sección del libro */
      z-index: 999;
      transform: translateX(-100%);
      transition: transform 0.6s var(--ease-out);
      padding: 6rem 3rem 3rem;
      display: flex; flex-direction: column;
      box-shadow: 10px 0 50px rgba(42,26,26,0.5);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close {
      position: absolute; top: 1.8rem; right: 2rem;
      background: none; border: none;
      font-size: 2rem; color: var(--color-nude);
      cursor: pointer;
      font-family: var(--font-body);
      font-weight: 300;
      transition: color 0.3s;
    }
    .sidebar-close:hover { color: var(--color-crema); }
    .sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
    .sidebar-nav a {
      text-decoration: none;
      font-family: var(--font-serif);
      font-size: 2rem;
      color: var(--color-crema);
      transition: color 0.3s, transform 0.4s var(--ease-out);
      display: inline-block;
      font-weight: 300;
    }
    .sidebar-nav a i {
      color: var(--color-nude);
      font-size: 1.4rem;
      margin-right: 0.8rem;
      transition: color 0.3s;
    }
    .sidebar-nav a:hover { color: var(--color-white); transform: translateX(4px); font-style: italic; }
    .sidebar-nav a:hover i { color: var(--color-crema); }
    .sidebar-divider { margin: 2.5rem 0; border: none; border-top: 1px solid rgba(239, 230, 227, 0.2); }

    /* === Orchestrated Entrance === */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      animation: blockEntrance 1.2s var(--ease-out) forwards;
    }
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.3s; }
    .delay-3 { animation-delay: 0.5s; }
    
    @keyframes blockEntrance {
      to { opacity: 1; transform: translateY(0); }
    }

    /* === Hero Section (Editorial Split Layout) === */
    .hero-section {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      padding: 10rem 2.5rem 6rem;
      background: linear-gradient(150deg, var(--color-crema) 0%, #f5ede9 45%, #ede1dc 100%);
      position: relative;
      overflow: hidden;
    }
    .hero-layout {
      max-width: 1140px;
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
      z-index: 1;
    }
    .hero-content {
      text-align: left;
    }
    .hero-title {
      font-family: var(--font-script);
      font-size: clamp(4rem, 8vw, 7rem);
      color: var(--color-rojo);
      line-height: 1.05;
      margin-bottom: 2.5rem;
      position: relative;
    }
    .hero-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 1px;
      background: var(--color-rojo);
      margin-top: 1.5rem;
      opacity: 0.5;
    }
    .hero-body-text {
      font-family: var(--font-serif);
      font-size: clamp(1.2rem, 3vw, 1.45rem);
      line-height: 1.8;
      color: var(--text-dark);
      margin-bottom: 2rem;
      max-width: 500px;
    }
    .highlight { color: var(--color-rojo); font-weight: 600; font-style: italic; }
    
    .hero-image-wrapper {
      position: relative;
      display: flex;
      justify-content: flex-end;
    }
    .hero-image {
      width: 100%;
      max-width: 480px;
      border-radius: 4px;
      box-shadow: 0 40px 80px rgba(102, 10, 17, 0.15); /* Vinotinto tinted shadow */
      object-fit: cover;
      aspect-ratio: 4 / 5;
    }
    /* Sutil borde decorativo detrás de la imagen para dar profundidad */
    .hero-image-wrapper::before {
      content: '';
      position: absolute;
      top: -20px;
      right: -20px;
      width: 100%;
      max-width: 480px;
      height: 100%;
      border: 1px solid rgba(151, 27, 37, 0.2);
      border-radius: 4px;
      z-index: -1;
      transition: transform 0.8s var(--ease-out);
    }
    .hero-image-wrapper:hover::before {
      transform: translate(-10px, 10px);
    }

    /* === Book Section (Creative Editorial Layout) === */
    .book-section {
      padding: 10rem 2rem;
      background: #560B12; /* Exact color of the 3D book mockup background */
      color: var(--color-crema);
      position: relative;
      overflow: hidden;
    }
    .book-watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-script);
      font-size: 35vw;
      color: rgba(239, 230, 227, 0.04);
      white-space: nowrap;
      pointer-events: none;
      z-index: 0;
    }
    .book-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 6rem;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .book-img-wrapper {
      position: relative;
      /* Remove border-radius and shadow to make it completely seamless */
      transform: translateY(-20px);
    }
    /* Add a subtle inset shadow to hide any JPEG compression seams on the edges */
    .book-img-wrapper::after {
      content: '';
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 30px 10px #560B12;
      pointer-events: none;
    }
    .book-img-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.8s var(--ease-out);
    }
    .book-img-wrapper:hover img { 
      transform: scale(1.03) rotate(-1deg); 
    }
    
    .book-title {
      font-family: var(--font-serif);
      font-size: clamp(2.5rem, 6vw, 4rem);
      line-height: 1.05;
      margin-bottom: 2rem;
      font-weight: 400;
      color: var(--color-crema);
      position: relative;
    }
    .book-title em {
      color: var(--color-nude);
      font-family: var(--font-script);
      font-size: 1.4em;
      display: block;
      margin-top: 0.1em;
      transform: translateX(-10px);
    }
    .book-desc {
      font-family: var(--font-body);
      font-size: 1.1rem;
      line-height: 1.9;
      margin-bottom: 3rem;
      color: rgba(239, 230, 227, 0.85);
      max-width: 500px;
      border-left: 2px solid rgba(224, 188, 175, 0.3);
      padding-left: 1.5rem;
    }
    .btn-amazon {
      display: inline-flex; align-items: center; gap: 0.8rem;
      background: #FF9900; /* Amazon Yellow */
      color: #111111;
      padding: 1.2rem 2.6rem;
      border-radius: 4px;
      text-decoration: none;
      font-family: var(--font-body);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      font-size: 0.85rem;
      box-shadow: 0 10px 30px rgba(255, 153, 0, 0.2);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    .btn-amazon:hover { 
      background: #FFB03A; 
      transform: translateY(-3px); 
      box-shadow: 0 15px 40px rgba(255, 153, 0, 0.35); 
    }

    /* === Editorial Explore List === */
    .explore-section {
      padding: 10rem 2rem;
      background: var(--color-nude);
      max-width: 100%;
    }
    .explore-inner {
      max-width: 1000px;
      margin: 0 auto;
    }
    .explore-title {
      font-family: var(--font-script);
      font-size: clamp(3.5rem, 8vw, 5.5rem);
      color: var(--color-rojo);
      text-align: center;
      margin-bottom: 4rem;
      line-height: 1;
    }
    .editorial-list {
      list-style: none;
      border-top: 1px solid rgba(151, 27, 37, 0.15);
    }
    .editorial-item {
      border-bottom: 1px solid rgba(151, 27, 37, 0.15);
    }
    .editorial-link {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 2.5rem 0;
      text-decoration: none;
      color: var(--text-dark);
      transition: padding 0.5s var(--ease-out), color 0.4s;
    }
    .editorial-link:hover {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      color: var(--color-rojo);
    }
    .editorial-name {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 300;
    }
    .editorial-desc {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--text-medium);
      max-width: 300px;
      text-align: right;
    }

    /* === WhatsApp Float === */
    .whatsapp-btn {
      position: fixed;
      bottom: 2.5rem; right: 2.5rem;
      background: #25D366;
      color: white;
      width: 64px; height: 64px;
      border-radius: 50%;
      display: flex; justify-content: center; align-items: center;
      font-size: 2.2rem;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
      z-index: 900;
      transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    }
    .whatsapp-btn:hover { 
      transform: scale(1.08) translateY(-4px); 
      box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
    }

    /* === Footer === */
    footer {
      background: var(--color-vinotinto);
      padding: 5rem 2rem 4rem;
      text-align: center;
      color: var(--color-crema);
    }
    .footer-logo {
      font-family: var(--font-script);
      font-size: 3rem;
      color: var(--color-nude);
      text-decoration: none;
      display: inline-block;
      margin-bottom: 1rem;
    }
    .footer-copy {
      font-family: var(--font-body);
      font-size: 0.85rem;
      margin-top: 3rem;
      color: rgba(239, 230, 227, 0.7);
    }

    @media (max-width: 768px) {
      header { padding: 1rem 1.5rem 1rem 4rem; }
      .header-social { display: none; }
      
      .hero-layout { grid-template-columns: 1fr; gap: 4rem; padding-top: 2rem; }
      .hero-title { font-size: clamp(3.5rem, 12vw, 4.5rem); text-align: center; }
      .hero-title::after { margin: 1.5rem auto 0; }
      .hero-body-text { text-align: center; max-width: 100%; }
      .hero-image-wrapper { justify-content: center; }
      .book-inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
      .book-watermark { font-size: 25vw; top: 30%; }
      .book-desc { margin: 0 auto 2.5rem; }
      .editorial-link { flex-direction: column; gap: 1rem; align-items: flex-start; }
      .editorial-desc { text-align: left; }
      .whatsapp-btn { bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; font-size: 1.8rem; }
    }
  







.hamburger-btn {
  position: fixed;
  top: 1.1rem;
  left: 1.2rem;
  z-index: 1100;
  background: var(--color-rojo);
  border: none;
  border-radius: 10px;
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(151,27,37,.35);
  transition: background 0.3s, transform 0.2s;
}

.hamburger-btn:hover {
  background: var(--color-vinotinto);
  transform: scale(1.06);
}

.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-crema);
  border-radius: 2px;
}

/* --- Comprehensive Mobile Adaptations --- */
@media (max-width: 768px) {
  /* Reduce massive paddings for mobile screens */
  .section-padding { padding: 4rem 1.5rem; }
  .course-hero, .gestadora-hero, .course-cta, .gestadora-cta { padding: 5rem 1.5rem !important; }
  
  /* Make sidebar slightly narrower to show some of the background */
  .sidebar { width: 280px; }
  
  /* Make sure headings scale down better */
  h1:not(.hero-title) { font-size: 2.5rem; }
  h2:not(.hero-title) { font-size: 2rem; }
  
  /* Adjust purchase card sticking logic */
  .purchase-card {
    position: static !important;
    margin-top: 2rem;
    padding: 2rem 1.5rem !important;
  }
}