@import url("./bottom-nav-plans.css?v=4");
@import url("./color-consistency-final.css?v=1");

/* KOVRA — ajuste quirúrgico de presentación para ampliar capacidad. */
.capacity-shop-head .capacity-main-title{
  display:block;
  margin:0;
  color:#f4fff7;
  font-size:clamp(24px,3.2vw,30px);
  font-weight:950;
  letter-spacing:-.035em;
  line-height:1.06;
  text-transform:none;
}

.capacity-shop-head p{
  max-width:680px;
  margin:8px 0 0;
  color:#a7b9ac;
  font-size:13.5px;
  font-weight:650;
  line-height:1.55;
}

.capacity-cost-summary{
  display:block !important;
  margin-top:12px;
  overflow:hidden;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--theme-surface-2);
}

.capacity-cost-summary .capacity-cost-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:43px;
  padding:10px 12px;
  border:0;
  border-radius:0;
  background:transparent;
}

.capacity-cost-summary .capacity-cost-row + .capacity-cost-row{
  border-top:1px solid rgba(255,255,255,.055);
}

.capacity-cost-summary .capacity-cost-row span{
  color:#a4b5a9;
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.3;
  text-transform:none;
}

.capacity-cost-summary .capacity-cost-row strong{
  flex:0 0 auto;
  color:#edf8f0;
  font-size:13px;
  font-weight:900;
  text-align:right;
}

.capacity-cost-summary .capacity-cost-row.total{
  background:var(--theme-accent-soft);
}

.capacity-cost-summary .capacity-cost-row.total span,
.capacity-cost-summary .capacity-cost-row.total strong{
  color:var(--green2);
}

.capacity-cost-summary .capacity-cost-row.total strong{
  font-size:15px;
}

/* Botones + / −: un poco más grandes y con respuesta táctil luminosa leve. */
.capacity-stepper{
  grid-template-columns:46px 1fr 46px;
}

.capacity-stepper button{
  height:44px;
  font-size:24px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .10s ease,background .14s ease,box-shadow .14s ease,border-color .14s ease;
}

.capacity-stepper button:active:not(:disabled){
  transform:translateY(1px) scale(.97);
  border-color:var(--theme-border-strong);
  background:var(--theme-accent-soft);
  box-shadow:none;
}

/* Mensaje superior de Planes: compacto, comercial y con énfasis premium. */
.plans-growth-message{
  position:relative;
  max-width:620px;
  margin:8px auto 0;
  color:#c9d9cd;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.012em;
  line-height:1.42;
  text-wrap:balance;
}

.plans-growth-message::after{
  content:"";
  display:block;
  width:76px;
  height:1px;
  margin:7px auto 0;
  background:var(--theme-accent);
  box-shadow:none;
  opacity:.9;
}

.plans-growth-highlight{
  display:inline;
  padding:0;
  color:inherit;
  font-weight:inherit;
  text-shadow:none;
}

.plans-growth-brand{
  color:#f7fff9;
  font-weight:950;
  letter-spacing:.035em;
}

/* Los tres enlaces legales permanecen juntos en una sola fila, también en móvil. */
.plans-legal-footer{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.plans-legal-footer a{
  min-width:0;
  width:100%;
  padding:7px 6px;
  font-size:12.5px;
  text-align:center;
}

.plans-legal-footer span{
  grid-column:1 / -1 !important;
  font-size:12.5px;
}

@media(max-width:560px){
  .capacity-shop-head{
    gap:7px;
  }

  .capacity-shop-head .capacity-main-title{
    font-size:24px;
  }

  .capacity-shop-head p{
    margin-top:6px;
    font-size:13.5px;
    line-height:1.5;
  }

  .capacity-cost-summary .capacity-cost-row{
    min-height:41px;
    padding:9px 10px;
  }

  .capacity-cost-summary .capacity-cost-row span{
    font-size:12px;
  }

  .capacity-cost-summary .capacity-cost-row strong{
    font-size:12.5px;
  }

  .capacity-cost-summary .capacity-cost-row.total strong{
    font-size:14px;
  }

  .plans-growth-message{
    max-width:350px;
    margin-top:6px;
    font-size:13.6px;
    line-height:1.38;
  }

  .plans-growth-message::after{
    width:64px;
    margin-top:6px;
  }

  .plans-legal-footer{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .plans-legal-footer a{
    min-height:38px;
    padding:6px 4px;
    font-size:12px;
    line-height:1.15;
  }
}

/* =========================================================
   PIE LEGAL DE PLANES — UN SOLO APARTADO COMPACTO
   ========================================================= */
.plans-legal-footer{
  width:min(920px,calc(100% - 24px)) !important;
  margin:10px auto calc(88px + env(safe-area-inset-bottom)) !important;
  padding:9px 10px 8px !important;
  gap:5px !important;
  border:1px solid rgba(105,255,164,.12) !important;
  border-radius:14px !important;
  background:var(--theme-surface)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
}

.plans-legal-footer a{
  min-height:30px !important;
  padding:4px 6px !important;
  border-color:rgba(105,255,164,.07) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.012) !important;
  font-size:12px !important;
  line-height:1.12 !important;
  font-weight:720 !important;
}

.plans-legal-footer span{
  margin-top:0 !important;
  padding-top:6px !important;
  border-top:1px solid rgba(105,255,164,.07) !important;
  color:#84958a !important;
  font-size:12px !important;
  line-height:1.25 !important;
}

@media(max-width:560px){
  .plans-legal-footer{
    width:calc(100% - 18px) !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    margin-top:8px !important;
    margin-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
    padding:7px !important;
    gap:4px !important;
  }

  .plans-legal-footer a{
    min-height:28px !important;
    padding:3px 4px !important;
    font-size:12px !important;
    line-height:1.08 !important;
  }

  .plans-legal-footer span{
    grid-column:1 / -1 !important;
    padding-top:5px !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }
}

/* =========================================================
   FUNCIONES DE PLAN — RITMO VERTICAL COMPACTO Y UNIFORME
   Mantiene tipografía y contenido; solo elimina altura vacía.
   ========================================================= */
body .plans-app .plan-card .plan-preview,
body .plans-app .plan-card .plan-full ul{
  grid-template-rows:repeat(var(--kovra-feature-rows,5),minmax(36px,auto)) !important;
  column-gap:10px !important;
  row-gap:3px !important;
  align-items:start !important;
}

body .plans-app .plan-card .plan-preview li,
body .plans-app .plan-card .plan-full li{
  height:auto !important;
  min-height:36px !important;
  padding:1px 1px 0 15px !important;
  line-height:1.22 !important;
}

body .plans-app .plan-card .plan-preview li::before,
body .plans-app .plan-card .plan-full li::before{
  top:1px !important;
}

@media(max-width:360px){
  body .plans-app .plan-card .plan-preview,
  body .plans-app .plan-card .plan-full ul{
    grid-template-rows:repeat(var(--kovra-feature-rows,5),minmax(38px,auto)) !important;
    column-gap:8px !important;
    row-gap:3px !important;
  }

  body .plans-app .plan-card .plan-preview li,
  body .plans-app .plan-card .plan-full li{
    height:auto !important;
    min-height:38px !important;
  }
}

/* =========================================================
   ELEGIR PLAN — CTA PREMIUM UNIFICADO
   Solo aplica a planes seleccionables. “Plan actual” y estados
   programados conservan su apariencia informativa sin animación.
   ========================================================= */
body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled){
  position:relative !important;
  isolation:isolate !important;
  min-height:60px !important;
  margin-top:13px !important;
  padding:14px 18px !important;
  overflow:hidden !important;
  border-width:1.5px !important;
  border-radius:17px !important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:17px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.012em !important;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.18) !important;
  transform:translateZ(0);
  animation:kovraPlanCtaPulse 2.25s ease-in-out infinite !important;
  transition:transform .14s ease,box-shadow .2s ease,border-color .2s ease !important;
}

body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-2px;
  border-radius:inherit;
  background:var(--theme-accent-soft);
  opacity:.42;
  pointer-events:none;
  animation:kovraPlanCtaHalo 2.25s ease-in-out infinite;
}

body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled)::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-85%;
  bottom:-85%;
  left:-38%;
  width:20%;
  transform:rotate(17deg);
  background:none;
  opacity:0;
  pointer-events:none;
  animation:kovraPlanCtaSheen 2.95s ease-in-out infinite !important;
}

body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled):active{
  transform:scale(.982) !important;
}

@keyframes kovraPlanCtaPulse{
  0%,100%{
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
    transform:scale(1);
  }
  50%{
    box-shadow:0 12px 27px rgba(0,0,0,.20)!important;
    transform:scale(1.01);
  }
}

@keyframes kovraPlanCtaHalo{
  0%,100%{opacity:.30;transform:scale(.985)}
  50%{opacity:.68;transform:scale(1.025)}
}

@keyframes kovraPlanCtaSheen{
  0%,18%{left:-38%;opacity:0}
  30%{opacity:1}
  57%{left:118%;opacity:0}
  100%{left:118%;opacity:0}
}

@media(max-width:390px){
  body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled){
    min-height:58px !important;
    padding:13px 16px !important;
    font-size:16.5px !important;
    border-radius:16px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled),
  body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled)::before,
  body .plans-app .plan-card .plan-action[data-plan-action]:not(.current):not(.scheduled):not(:disabled)::after{
    animation:none !important;
  }
}

/* =========================================================
   NEGOCIO — MISMO CTA EXACTO QUE ESENCIAL
   Blindaje final para que ambos botones “Elegir plan” compartan
   el mismo fondo, borde, color y profundidad visual.
   ========================================================= */
body .plans-app .plan-card.essential .plan-action[data-plan-action="essential"]:not(.current):not(.scheduled):not(:disabled),
body .plans-app .plan-card.business .plan-action[data-plan-action="business"]:not(.current):not(.scheduled):not(:disabled){
  border-color:var(--theme-border-strong)!important;
  background:var(--theme-accent-soft)!important;
  color:var(--theme-accent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.18) !important;
}