/* ======= Paleta, tipografía y básicos ======= */
    :root{
      --prussian: #0B1C2C;         /* azul prusia */
      --atlantic: #123652;         /* azul atlántico */
      --deep-ink: #102032;         /* texto fuerte */
      --platinum: #E5E7EA;        /* gris platino */
      --silver: #C9CFD6;          /* plata */
      --teal: teal;            /* acento dorado */
      --teal-lake: #2C9CA6;       /* acento teal */
      --paper: #FFFFFF;           /* blanco */
      --mist: #F5F7FA;            /* fondo base claro */
      --shadow: 0 12px 34px rgba(16,32,50,0.12);
      --radius: 16px; --radius-lg: 22px;
    }
    *{box-sizing:border-box;    scrollbar-width: none; scroll-behavior: smooth;}
    html,body{height:100%}
    body{margin:0; font-family: "Century Gothic", "Quicksand", "Avant Garde", Arial, sans-serif; color: var(--deep-ink); background: var(--mist); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
    a{color:inherit; text-decoration:none}
    button, input, textarea{
      font-family: inherit;
    }
    .container{width:min(1160px,92vw); margin:0 auto}
    #MacroB{
      position: fixed;
    top: 0;
    width: 100%;
    overflow: auto;
    height: 100%;
    }

    /* ======= Fondo aurora global continuo ======= */
    
    @keyframes auroraPremium1 {
      0%   { transform: scale(1) translate(0,0); opacity:.32; }
      50%  { transform: scale(2) translate(-30%, -2%); opacity:.80; }
      100% { transform: scale(1.08) translate(2%, 2%); opacity:.36; }
    }

    @keyframes auroraPremium2 {
      0%   { transform: scale(1) translate(0,0); opacity:.30; }
      50%  { transform: scale(2) translate(30%, -20%); opacity:.80; }
      100% { transform: scale(1.1) translate(-50%, 3%); opacity:.34; }
    }

    /* Prefijos para Safari/iOS (algunos builds aún lo requieren) */
    @-webkit-keyframes auroraPremium1 {
      0%   { -webkit-transform: scale(1) translate(0,0);    opacity:.32; }
      50%  { -webkit-transform: scale(1.15) translate(-3%,-2%); opacity:.42; }
      100% { -webkit-transform: scale(1.08) translate(2%, 2%);  opacity:.36; }
    }
    @-webkit-keyframes auroraPremium2 {
      0%   { -webkit-transform: scale(1) translate(0,0);    opacity:.30; }
      50%  { -webkit-transform: scale(1.18) translate(3%,-2%);  opacity:.40; }
      100% { -webkit-transform: scale(1.10) translate(-2%, 3%); opacity:.34; }
    }
    .aurora-bg{position:relative; min-height:100vh; overflow:hidden;}
    .aurora-bg::before,
    .aurora-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      filter: blur(140px);
      pointer-events: none;
      z-index: 0;
    }

    .aurora-bg::before {
      opacity: .38;
      background: radial-gradient(35% 35% at 25% 30%, rgb(223 80 255 / 40%), transparent 30%), 
                  radial-gradient(45% 45% at 75% 65%, rgb(0 200 200 / 33%), transparent 50%), 
                  radial-gradient(55% 55% at 50% 55%, rgb(5 89 255 / 30%), transparent 20%);
      animation: auroraPremium1 22s ease-in-out infinite alternate;
    }

    .aurora-bg::after {
      opacity: .34;
      background: radial-gradient(40% 40% at 80% 20%, rgb(64 255 43 / 30%), transparent 40%), 
                  radial-gradient(40% 40% at 20% 80%, rgb(80 255 95 / 34%), transparent 10%), 
                  radial-gradient(45% 45% at 55% 45%, rgb(255 222 40 / 72%), transparent 20%);
      animation: auroraPremium2 28s ease-in-out infinite alternate;
    }

    /* ======= Header (sticky con hide/show) ======= */
    header{position:fixed;width:100%; top:0; z-index:40; backdrop-filter: blur(8px); background: rgba(255,255,255,.82); border-bottom:1px solid #e9edf4; transition: transform .35s ease, box-shadow .25s ease; box-shadow:none; will-change: transform}
    header.hidden{transform: translateY(-100%)}
    header.elevated{box-shadow: 0 8px 24px rgba(16,32,50,.12)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:74px}
    .brand{display:flex; align-items:center; gap:.8rem}
    .brand img{height:30px}
    .brand small{display:block; margin-top:2px; color:#6a7382}
    .links{display:flex; gap:1.2rem; align-items:center}
    .links a{font-weight:700; color:#2b3342}
    .btn{display:inline-flex; gap:.6rem; align-items:center; border:1px solid transparent; border-radius:999px; padding:.9rem 1.2rem; font-weight:700; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease; box-shadow: var(--shadow)}
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background: var(--atlantic); color:#fff}
    .btn-ghost{background:#fff; color: var(--deep-ink); border-color:#e6e9ee}
    .btn-gold{background: var(--teal); color:white}

    /* ======= Secciones ======= */
    section{position:relative; z-index:1; padding: 56px 0}
    .panel{background:#fff; border:1px solid #e9edf4; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px}

    /* ======= Hero ======= */
    .hero .grid{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center}
    .headline{font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight:800; line-height:1.06; color: var(--atlantic)}
    .sub{font-size: clamp(1rem, 1.8vw, 1.12rem); color:#5a6573; margin:12px 0 22px}
    .hero-list{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
    .hero-list .item{display:flex; gap:.7rem; align-items:flex-start; background:#fff; border:1px solid #e9edf4; border-radius: 14px; padding:12px}
    .icon{width:28px;height:28px;border-radius:8px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(199,154,45,.18), rgba(44,156,166,.15))}
    .badge{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; background:#fff; border:1px solid #e7e9ef; color:#2c3442; font-weight:700; font-size:.85rem}
    .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}

    /* ======= Diferenciador ======= */
    .diff-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
    .card{background:#fff; border:1px solid #e9edf4; border-radius: var(--radius); padding:18px; box-shadow: var(--shadow)}
    .card h3{margin: 0 0 6px; font-size: 1.06rem}
    .card p{margin:0; color:#5a6573}

    /* ======= Productos ======= */
    .tabs{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px}
    .chip{padding:.5rem .8rem; border-radius:999px; border:1px solid #e6e8ef; background:#fff; font-weight:700}
    .grid-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px}
    .price{display:flex; align-items:baseline; gap:.4rem; font-weight:800; font-size:1.4rem; color:var(--atlantic)}
    .price small{font-weight:700; color:#6a7382}
    .pill{display:inline-flex; padding:.25rem .6rem; 
      background:#f7f1e2; color:#735615; border-radius:999px; font-weight:800; 
      font-size:.8rem; letter-spacing:.02em;margin: 0 0 10 0;}
    .pill-blue{background:#e8f0f7; color:#183c5a}
    .list{margin:10px 0 0; padding:0; list-style:none}
    .list li{display:flex; gap:.6rem; align-items:flex-start; padding:.38rem 0}
    .ok{color: var(--teal); font-weight:800}

    /* ======= App: Breakeven (margen %) ======= */
    .calc-card{border:1px solid #e9edf4; background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding:18px}
    .row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    .field label{font-weight:800; font-size:.9rem; letter-spacing:.02em}
    .input{width:100%; padding:.85rem .95rem; border:1px solid #e2e6ee; border-radius:12px; background:#fff}
    .input:focus{outline:2px solid var(--teal); border-color: var(--teal)}
    .result{background:#fbfcff; border:1px solid #e2e8f0; border-radius:12px; padding:12px; font-weight:800}

    /* ======= Contacto ======= */
    .contact-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:18px}

    /* ======= Footer ======= */
    footer{border-top:1px solid #e9edf4; padding: 22px 0; color:#5e6575; background:rgba(255,255,255,.82); position:relative; z-index:1}

    /* Utils */
    .flex{display:flex; gap:.8rem; align-items:center}
    .mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem}
    .hide{display:none}

    /* Responsive */
    @media (max-width: 980px){
      .hero .grid{grid-template-columns: 1fr}
      .diff-grid{grid-template-columns: 1fr}
      .grid-3{grid-template-columns: 1fr}
      .row{grid-template-columns: 1fr}
      .contact-grid{grid-template-columns: 1fr}
    }
    #B{padding: 75 0 0 0}
    /* ===== Responsive nav (sin JS) ===== */
.nav { position: relative; }

/* Ocultamos el checkbox visualmente */
.nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Botón kebab (oculto en desktop) */
.menu-btn {
  display: none;
  font-size: 26px; line-height: 1;
  padding: .4rem .6rem;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Layout mobile */
@media (max-width: 760px) {
  /* Mostrar kebab, ocultar enlaces por defecto */
  .menu-btn { display: block; }
  .links {
    position: absolute;
    right: 12px; top: 64px;        /* bajo el header */
    display: none;                 /* cerrado por defecto */
    flex-direction: column;
    gap: .6rem;
    padding: 12px;
    background: rgba(255,255,255,.96);
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(16,32,50,.16);
    min-width: 220px;
    z-index: 50;
  }
  /* Botón dentro del menú que se vea full width */
  .links .btn {
    width: 100%;
    justify-content: center;
  }
  /* Al activar el checkbox, mostrar menú */
  .nav-toggle:checked ~ .menu-btn { 
    /* estado activo del botón (opcional) */
    background: rgba(18,54,82,.06);
  }
  .nav-toggle:checked ~ .links { display: flex; }

  /* Acomodar barra superior: brand + kebab a los extremos */
  .nav { height: 74px; }
  .brand { flex: 1; }
  .links a { font-weight: 700; }

  /* Ocultar el menú horizontal para que no ocupe espacio en la barra */
  /* (en desktop, .links vive en línea; aquí sólo se despliega flotante) */
}

/* Hover/focus accesibles */
.menu-btn:hover, .menu-btn:focus { outline: none; }

/* (Opcional) Animación sutil */
@media (max-width: 760px) {
  .links { 
    transform-origin: top right;
    animation: dropdown-enter 160ms ease-out both;
  }
  @keyframes dropdown-enter {
    from { opacity: 0; transform: scale(.98) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
}
/* PATCH CSS HERO (añade a tu hoja; respeta variables existentes) */
.hero--mk { padding: 64px 0; }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; }
.hero__eyebrow { display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .7rem; border:1px solid #e7e9ef; border-radius:999px; background:#fff; font-weight:700; }
.u-accent { color: var(--gold); }
.hero__title { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height:1.06; color: var(--atlantic); margin:.5rem 0; font-weight:800; }
.hero__sub { color:#5a6573; margin:.25rem 0 1rem; font-size: clamp(1rem,1.8vw,1.12rem); }
.hero__proof { display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:0; margin:0 0 1rem; list-style:none; color:#2b3342; font-weight:700; }
.hero__ctas { display:flex; gap:.8rem; align-items:center; margin-bottom: .75rem; }
.hero__lead { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.hero__input { flex:1 1 220px; min-width:220px; padding:.85rem .95rem; border:1px solid #e2e6ee; border-radius:12px; background:#fff; }
.hero__input:focus { outline:2px solid var(--gold); border-color:var(--gold); }
.hero__note { color:#6a7382; }
.hero__panel { padding:18px; }
.hero__list { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px; color:#2b3342; }
.hero__list li { display:flex; flex-wrap:wrap; gap:.25rem; }
.hero__tool { display:inline-block; margin-top:8px; font-weight:800; color:var(--atlantic); text-underline-offset:3px; }
.hero__tool:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 980px){
  .hero__grid { grid-template-columns:1fr; }
  .hero__ctas { flex-wrap:wrap; }
}
/* ===== SlidePanel — contenedor y animaciones ===== */
.sp-root{ position:fixed; inset:0; z-index:100; display:block; pointer-events:none; }
.sp-root.is-open{ pointer-events:auto; }
.sp-backdrop{
  position:absolute; inset:0; background:rgba(10,18,28,.38);
  opacity:0; transition:opacity .22s ease;
}
.sp-root.is-open .sp-backdrop{ opacity:1; }

.sp-panel{
  --sp-width: 520px;
  --sp-height: 100vh;
  position:absolute; top:0; right:0; height:var(--sp-height);
  width:min(var(--sp-width), 100vw); max-width:100%;
  background:#fff; color:var(--deep-ink);
  border-left:1px solid #e9edf4; box-shadow: var(--shadow);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.sp-root.is-open .sp-panel{ transform: translateX(0); }

/* Header */
.sp-header{ display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:14px 16px; background:rgba(245,247,250,.85); border-bottom:1px solid #e9edf4; backdrop-filter:saturate(120%) blur(4px);}
.sp-title{ margin:0; font-size:1.05rem; font-weight:800; color:var(--atlantic); }
.sp-close{ border:1px solid #e6e9ee; background:#fff; border-radius:8px; padding:.4rem .55rem; cursor:pointer; font-weight:800; }
.sp-close:hover{ background:#f7f9fc; }

/* Contenido */
.sp-content{ padding:16px; overflow:auto; -webkit-overflow-scrolling: touch; }

/* ===== Formulario dentro del panel ===== */
.sp-form{ display:grid; gap:12px; }
.sp-field label{ display:block; font-weight:800; font-size:.92rem; margin-bottom:4px; color:#2b3342; }
.sp-field input, .sp-field textarea{
  width:100%; padding:.85rem .95rem; border:1px solid #e2e6ee; border-radius:12px; background:#fff; font:inherit;
}
.sp-field input:focus, .sp-field textarea:focus{ outline:2px solid var(--teal); border-color: var(--teal); }
.sp-actions{ display:flex; gap:.6rem; align-items:center; margin-top:6px; }
.sp-status{ margin:6px 2px 0; color:#3b4758; }

/* Honeypot oculto */
.sp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Responsive: panel ocupa pantalla completa en móviles */
@media (max-width: 560px){
  .sp-panel{ width:100vw; }
}

.wrapper_success{text-align: center;
        width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;}
.checkmark__circle{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;stroke-miterlimit: 10;
    stroke: #7ac142;fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}
.checkmark{width: 56px;height: 56px;
    border-radius: 50%;
    display: block;stroke-width: 2;
    stroke: #fff;stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    &.tarde{
        box-shadow: inset 0px 0px 0px #4A148C;
        animation: fill2 .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    }
}
.checkmark__check{transform-origin: 50% 50%;
    stroke-dasharray: 48;stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}
    @keyframes stroke{100%{stroke-dashoffset: 0}}
    @keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}
    @keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #7ac142}}
    @keyframes fill2{100%{box-shadow: inset 0px 0px 0px 30px #4A148C}}
.acc_wrsucc{
    display: flex;cursor: pointer;padding: 10;
}
/* ===== ERROR POP (tache animado) ===== */
.wrapper_error{
  width:100%;position:relative;display:flex;justify-content:center;
  flex-wrap:wrap;flex-direction:column;align-content:center;text-align:center
}
.crossmark{
  width:56px;height:56px;border-radius:50%;display:block;stroke-width:2;stroke:#fff;stroke-miterlimit:10;
  margin:10% auto;box-shadow:inset 0 0 0 #e53935;
  animation:fillErr .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.crossmark__circle{
  stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;
  stroke:#e53935;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards
}
/* Líneas del tache */
.crossmark__x1,.crossmark__x2{
  stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;
  stroke-dasharray:28;stroke-dashoffset:28; /* anima el trazo de cada línea */
  animation:stroke .25s cubic-bezier(.65,0,.45,1) .8s forwards
}
/* Texto contenedor inferior */
.acc_wrsucc{display:flex;cursor:pointer;justify-content:center;padding:10px}
.acc_wrsucc p{margin:2px 0}

/* Animaciones */
@keyframes stroke{to{stroke-dashoffset:0}}
@keyframes scale{0%,100%{transform:none}50%{transform:scale3d(1.1,1.1,1)}}
@keyframes fillErr{to{box-shadow:inset 0 0 0 30px #e53935}}
/* Inputs inválidos */
.ipt-err{ border-color:#d14343 !important; outline:2px solid rgba(209,67,67,.25) !important; background:#fff7f7 !important }
.ipt-err:focus{ outline-color:rgba(209,67,67,.4) !important }
/* Indicador en el botón */
.fdc-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; background:#fff; opacity:.9 }
.fdc-dot--ok{ background:green }
.popupbox{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgb(25 37 61 / 14%);
    backdrop-filter: blur(2px);
    transition:all 0.5s;
    opacity:0;    z-index: 9999;
    }
.popupbox .popcontainer{
    position: absolute;
    width: 600;
    height: 400;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0px 5px 0px rgb(194 194 201);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition:all 0.5s;
    opacity:0;
}