:root{
      --brand-primary:#20a3e5;
      --brand-dark:#602b69;
      --brand-accent:#e1ddd1;
      --bg-sand:#ebe7dc;
      --bg-arena:#dbd5c6;
      --bg-footer:#ebe7dc;
    }
    html, body { background: var(--bg-sand); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }
    .brand-dark{ color:var(--brand-dark); }
    
    .btn-primary{ background:var(--brand-primary); color:#fff; }
    .btn-outline-dark{
      background: transparent;
      color: #111;
      border: 2px solid #111;
    }
    .btn-outline-dark:hover{
      background: #111;
      color: #fff;
    }
    .btn-solid-dark{
      background: #111;
      color: #fff;
      border: 2px solid #111;
    }
    .btn-solid-dark:hover{
      background: #000;
      border-color: #000;
    }
    .plan-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .plan-btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: .7rem 1.1rem;
      border-radius: 12px;
      font-weight: 700;
      text-decoration: none;
      line-height: 1;
    }

    .model-card{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid #e6e1d6;
      background: #fff;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      cursor: pointer;
    }
    .model-card:hover{
      transform: translateY(-2px);
      border-color: #d2c7b6;
      box-shadow: 0 10px 22px rgba(0,0,0,.08);
    }
    .model-card i{
      font-size: 26px;
      color: var(--brand-dark);
    }
    .model-card .model-title{
      font-weight: 800;
      color: #1f1f1f;
    }
    .model-card .model-note{
      font-size: 12px;
      color: #6b6b6b;
    }
    .model-card.is-selected{
      border-color: var(--brand-dark);
      box-shadow: 0 12px 26px rgba(96,43,105,.15);
    }

    .flipbook{
      position: relative;
      width: min(520px, 100%);
      aspect-ratio: 8.5 / 11;
      margin: 0 auto;
      perspective: 1400px;
    }
    .flipbook .page{
      position: absolute;
      inset: 0;
      border-radius: 18px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
      transform-origin: left center;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
    .flipbook .page img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .flipbook .page.page-under{ transform: translateZ(1px); }
    .flipbook .page.page-top{ transform: translateZ(2px); }
    .flipbook .page.page-top.is-flipping{
      animation: pageFlip 0.9s ease-in-out;
      will-change: transform;
    }
    @keyframes pageFlip{
      0%{ transform: rotateY(0deg); }
      100%{ transform: rotateY(-160deg); }
    }
    @media (max-width: 640px){
      .flipbook .page.page-top.is-flipping{
        animation: none;
      }
    }
    .flipbook-controls{
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .flip-btn{
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid #1a1a1a;
      background: #fff;
      color: #1a1a1a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease;
    }
    .flip-btn:hover{
      transform: translateY(-1px);
      background: #1a1a1a;
      color: #fff;
    }
    .flip-btn--play{
      border-color: var(--brand-dark);
    }
    .flip-status{
      padding: 0 10px;
      font-size: 13px;
      color: #4a4a4a;
      font-weight: 700;
    }

    .inv-scroll{
      height: 520px;
      overflow-y: auto;
      background: #fff;
      border-radius: 22px;
    }
    .inv-scroll img{
      display: block;
      width: 100%;
      height: auto;
    }
    .inv-scroll-wrap{
      position: relative;
    }
    .inv-phone{
      position: relative;
      width: min(320px, 100%);
      margin: 0 auto;
      border-radius: 28px;
      padding: 16px 10px 18px;
      background: #0f0f12;
      box-shadow:
        0 24px 50px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .inv-phone::before{
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
      height: 6px;
      border-radius: 999px;
      background: #2b2b30;
    }
    .inv-phone::after{
      content: "";
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(30px);
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #1f2025;
      box-shadow: inset 0 0 0 2px #2f3036;
    }
    .inv-controls{
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 2;
    }
    .inv-slider{
      display: flex;
      gap: 16px;
      flex-wrap: nowrap;
    }
    @media (min-width: 768px){
      .inv-slider{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
      }
    }
    @media (max-width: 640px){
      .inv-slider{
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
      }
      .inv-slider > article{
        flex: 0 0 85%;
        min-width: 85%;
        scroll-snap-align: start;
      }
      .inv-scroll{
        height: 460px;
      }
      .inv-controls{
        right: 8px;
        bottom: 8px;
      }
    }
    .inv-btn{
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid #1a1a1a;
      background: #fff;
      color: #1a1a1a;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s ease, background .2s ease;
    }
    .inv-btn:hover{
      transform: translateY(-1px);
      background: #1a1a1a;
      color: #fff;
    }

    .starter-divider{
      height: 2px;
      background: #111;
      margin-top: 20px;
      margin-bottom: 18px;
    }
    .starter-toggle{
      width: 100%;
      padding: 14px 18px;
      border-radius: 999px;
      border: 2px solid #111;
      background: #fff;
      color: #111;
      font-weight: 700;
      text-align: center;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .starter-toggle:hover{
      background: #111;
      color: #fff;
      transform: translateY(-1px);
    }
    .starter-plans.is-collapsed{
      display: none;
    }

    .reveal{
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s ease, transform .6s ease;
      transition-delay: var(--delay, 0s);
      will-change: opacity, transform;
    }
    .reveal.is-visible{
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce){
      .reveal{
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .identity-topic{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      color: var(--brand-dark);
    }
    .identity-topic i{
      font-size: 34px;
      color: var(--brand-dark);
    }
    .identity-topic p{
      margin: 0;
      font-weight: 300;
      color: #2c2c2c;
    }

    .identity-quote{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .identity-topics{
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 24px;
      justify-items: center;
      margin-top: 80px;
    }
    .identity-topics .identity-topic{
      align-items: center;
      text-align: center;
    }
    @media (max-width: 1024px){
      .identity-topics{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .identity-topics .identity-topic{
        align-items: flex-start;
        text-align: left;
      }
    }
    @media (max-width: 640px){
      .identity-quote{
        text-align: center;
      }
      .identity-topics{
        grid-template-columns: 1fr;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
    .bubble-a{ position:absolute; right:-40px; top:40px; width:190px; height:190px; border-radius:999px; filter:blur(16px); opacity:.2; background:var(--brand-primary) }
    .bubble-b{ position:absolute; left:-80px; bottom:-80px; width:300px; height:300px; border-radius:999px; filter:blur(24px); opacity:.12; background:var(--brand-dark) }
    .bubble-c{ position:absolute; right:25%; bottom:24px; width:90px; height:90px; border-radius:999px; filter:blur(14px); opacity:.28; background:var(--brand-primary) }
    .card{ border:1px solid rgb(229 231 235); background:#fff; border-radius:24px; box-shadow:0 6px 18px rgba(0,0,0,.06) }
    .pill{ border-radius:14px; }

    .footer-coloristica .footer-contenedor-arena-oscuro{ background:#d9d2c4; }
    .footer-coloristica .footer-inferior{ background:#cbc3b1; }
    .footer-coloristica a{ text-decoration:none; }
    .footer-coloristica .logo-dual{ display:inline-block; position:relative; }
    .footer-coloristica .logo-dual .logo-color{ position:absolute; inset:0; opacity:0; transition:.3s; }
    .footer-coloristica .logo-dual:hover .logo-color{ opacity:1; }

    /* ====== Demo slider: ancho controlado y sin overflow ====== */
.demo-wrap { overflow-x: hidden; }   /* evita scroll horizontal local */
#demoSlider { overflow: hidden; }
#demoTrack  { will-change: transform; }

/* Móvil: cada slide ocupa el 100% del viewport; card centrada y angosta */
@media (max-width: 767px){
  .slide      { flex: 0 0 100%; width: 100%; }
  .card-shell { width: min(92vw, 300px); margin: 0 auto; }

  /* compactos (opcional) */
  .demo-head{ height: 32px !important; }
  .demo-pad { padding: 12px !important; }
  .demo-btn { height: 34px !important; font-size: 16px !important; }
  .demo-chip{ font-size: 15px !important; padding: 2px 8px !important; }
}

/* Desktop: grid de 2 columnas iguales y sin transform */
@media (min-width: 768px){
  #demoTrack{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    transform: none !important;
  }
  .slide{ flex: initial; width: auto; }
  .card-shell{ width: 100%; max-width: 520px; margin: 0; }
}

/* Fondo purpura claro para distinguir el panel de control */
.bg-panel-light {
  background-color: #f5f0f8; /* lavanda suave */
}

/* Si quieres un tono más neutro con matiz morado (por consistencia con var(--brand-dark)): */
@supports (color-mix: in srgb) {
  .bg-panel-light {
    background-color: color-mix(in srgb, var(--brand-dark) 8%, white);
  }
}






/* Pinta el fondo una sola vez en el wrapper */
.hero-band {
  background:
    radial-gradient(1200px 600px at 20% -20%, var(--brand-accent), transparent),
    radial-gradient(800px 400px at 80% 0%, rgba(184,122,18,.18), transparent);
}

/* Elimina posibles huecos entre secciones internas del wrapper */
.hero-band > section {
  margin: 0;
  background: transparent; /* clave: no repintar fondo dentro */
}

/* Portada */
.superior-contenedor-arena-oscuro {
  border-radius: 24px;
  padding: 2rem;
  background: transparent; /* que no aparezca “arena oscuro” detrás */
}

.portada-hero{
  height: 450px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  background: #dcd7c8; /* fallback mientras carga */
}
.portada-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 480px){
  .portada-hero{ height: 240px; border-radius: 15px;}
  .superior-contenedor-arena-oscuro {
  padding: 1rem;
}
}


/* ===== BOTÓN PLANTILLAS ===== */
.boton-plantillas {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
  text-align: center;
  border: none;
}
.boton-plantillas:hover {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.boton-plantillas:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* 📱 En móvil ocupa todo el ancho */
@media (max-width: 768px) {
  .boton-plantillas {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 1rem;
  }
  .boton-plantillas i {
    font-size: 18px;
  }
}

/* ============ TIPOGRAFÍA FLUIDA (móvil → desktop) ============ */

/* Ajuste base en móviles: un poquitín más grande que 16px */
@media (max-width: 768px){
  html { font-size: 17px; } /* ~6% más grande */
}

/* Título principal de portada/hero */
.hero-title{
  /* 28–42px fluid, con salto suave en móviles estrechos */
  font-size: clamp(40px, 7vw, 45px);
  line-height: 1.15;         /* compacto y legible */
  letter-spacing: -0.02em;   /* un toque tight */
}

/* Títulos de secciones */
.hero-title-section{
  /* 28–42px fluid, con salto suave en móviles estrechos */
  font-size: clamp(35px, 7vw, 40px);
  line-height: 1.15;         /* compacto y legible */
  letter-spacing: -0.02em;   /* un toque tight */
}

/* Línea/acento del título (la de color primario) */
.hero-title-accent{
  color: var(--brand-primary);
  /* algo más grande para contraste */
  font-size: clamp(30px, 8vw, 48px);
}

/* Subtítulo bajo el título principal */
.hero-subtitle{
  font-size: clamp(20px, 4.2vw, 20px);
  line-height: 1.5;
  margin-bottom:15px;
  color: #1f2937; /* neutral-800 */
}

/* Encabezados de sección (h2) */
.section-heading{
  font-size: clamp(22px, 5.6vw, 36px);
  line-height: 1.2;
}

/* Párrafo destacado / lead (primer párrafo de una sección) */
.lead{
  font-size: clamp(15px, 4.3vw, 18px);
  line-height: 1.7;
}

/* Etiquetas y chips (para que no se vean minúsculas) */
.badge, .demo-chip{
  font-size: clamp(11px, 3.4vw, 13px);
}

/* Botones de acción “demo-btn” para que respiren mejor en móvil */
@media (max-width: 768px){
  .demo-btn{
    font-size: 16px !important;
    height: 40px !important;
  }
}

/* Un poco más de respiración vertical en móvil alrededor de la portada */
@media (max-width: 768px){
  .superior-contenedor-arena-oscuro{
    padding: 1.25rem; /* 20px */
  }
  #portada{
    padding-top: 72px; /* espacio para el banner fijo */
  }
}



/* ===== Bottom sheet ===== */
.sheet.hidden { display: none; }
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .25s; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: -100%; background: var(--bg-sand); border-top-left-radius: 20px; border-top-right-radius: 20px; max-height: 90vh; overflow: auto; box-shadow: 0 -10px 30px rgba(0,0,0,.25); transform: translateY(0); transition: bottom .4s; }
.sheet.open .sheet-overlay { opacity: 1; }
.sheet.open .sheet-panel { bottom: 0; animation: slideUp .4s ease both; }
@keyframes slideUp { from { transform: translateY(12%); } to { transform: translateY(0); } }

/* ===== Small entrance animations ===== */
.fade-grid > * { opacity: 0; transform: translateY(8px); animation: fadeUp .6s ease forwards; }
.fade-grid > *:nth-child(2){ animation-delay: .06s }
.fade-grid > *:nth-child(3){ animation-delay: .12s }
.fade-grid > *:nth-child(4){ animation-delay: .18s }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* Hover lift for cards and buttons */
.card:hover { transform: translateY(-2px); transition: transform .2s ease; }
.btn-primary { transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }


/* ===== Bottom sheet refinements ===== */
body.no-scroll { overflow: hidden; }

.sheet-panel { 
  max-height: 92vh; 
  overflow-y: auto; 
  padding-bottom: 20px; 
  overscroll-behavior: contain; 
}

.sheet-panel-header{
  position: sticky; 
  top: 0; 
  background: var(--bg-sand); 
  padding: 12px 16px 10px; 
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.sheet-header-row{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
}

.sheet-title{ 
  font-weight: 800; 
  color: var(--brand-dark); 
  font-size: 1.125rem; 
  margin: 0;
}

@media (min-width: 768px){
  .sheet-close{
    margin-right: 100px;
  }
}

.sheet-close{
  border: 0; 
  background: #fff; 
  width: 36px; 
  height: 36px; 
  border-radius: 999px; 
  display: grid; 
  place-items: center; 
  font-size: 22px; 
  line-height: 1; 
  color: #333; 
  box-shadow: 0 2px 8px rgba(0,0,0,.12); 
  cursor: pointer;
}
.sheet-close:hover{ transform: translateY(-1px); }

.sheet-grip{
  width: 44px; height: 5px; 
  border-radius: 999px; 
  background: rgba(0,0,0,.18); 
  margin: 4px auto 10px;
}

.sheet.open .sheet-overlay{ pointer-events: auto; }
.sheet.open .sheet-panel{ pointer-events: auto; }
.sheet { pointer-events: none; }

/* Extra padding at top of panel content after header */
.sheet-panel > .max-w-6xl{ padding-top: 8px; }


/* ===== CTA bottom sheet visual improvements ===== */
.sheet-panel {
  background:
    linear-gradient(to bottom, rgba(96,43,105,0.06), transparent 120px),
    var(--bg-sand);
}
.cta-content{
  padding-top: 18px;
  padding-bottom: 28px;
}
@media (min-width: 1024px){
  .cta-info{
    background: color-mix(in srgb, var(--brand-primary) 6%, white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }
}
.cta-checks--mobile{ display:none; }
@media (max-width: 767px){
  .cta-checks--left{ display:none; }
  .cta-checks--mobile{ display:block; }
}
#leadForm.card{
  box-shadow: 0 12px 30px rgba(32,163,229,.12);
  border-color: rgba(32,163,229,.18);
}
@media (max-width: 480px){
  .cta-content{ padding-bottom: 36px; }
}