/* =====================================================
   PANEL360 — PRECIOS B2B + CAPAS DE PROTECCION + STACK
   Creado 03/08/2026
   Todo sale de variables.css. Cero hardcodeo de paleta.
===================================================== */

.pricing-section{

padding:var(--section) 0;

background:var(--surface-2);

}


/* =====================================================
   LAS DOS AUDIENCIAS
   Consultora que lo revende / partido que lo usa adentro.
===================================================== */

.audience-split{

display:grid;

grid-template-columns:1fr 1fr;

gap:26px;

max-width:1120px;

margin:0 auto 60px;

}

.audience-card{

background:var(--surface);

border:1px solid var(--border);

border-top:4px solid var(--primary);

border-radius:var(--radius-md);

padding:32px 30px;

box-shadow:var(--shadow-sm);

}

.audience-tag{

display:inline-block;

font-size:12px;

font-weight:800;

letter-spacing:1.4px;

color:var(--primary);

margin-bottom:12px;

}

.audience-card h3{

font-size:23px;

font-weight:800;

line-height:1.25;

color:var(--secondary);

margin-bottom:12px;

}

.audience-card p{

font-size:16px;

line-height:1.75;

color:var(--text-soft);

}

.audience-card p strong{

color:var(--text);

font-weight:700;

}


/* =====================================================
   LAS TRES CAJAS DE PRECIO
===================================================== */

.pricing-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

align-items:stretch;

max-width:1120px;

margin:auto;

}

.price-card{

position:relative;

display:flex;

flex-direction:column;

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius-lg);

padding:38px 32px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.price-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

border-color:#7aaeff;

}


/* ---------- La del medio manda ---------- */

.price-card-featured{

border:2px solid var(--primary);

box-shadow:var(--shadow-blue);

}

.price-flag{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#fff;

font-size:12px;

font-weight:800;

letter-spacing:1.2px;

padding:8px 20px;

border-radius:var(--radius-xl);

white-space:nowrap;

}


/* ---------- Encabezado ---------- */

.price-head h3{

font-size:26px;

font-weight:800;

color:var(--secondary);

line-height:1.2;

margin-bottom:6px;

}

.price-scope{

font-size:14.5px;

color:var(--text-soft);

line-height:1.5;

min-height:44px;

}


/* ---------- El numero ----------
   Mismo formato que la landing B2C: "Desde 999" arriba,
   "USD mensuales" debajo.
--------------------------------------------------------*/

.price-amount{

margin:24px 0 26px;

padding-bottom:24px;

border-bottom:1px solid var(--border);

}

.price-amount strong{

display:block;

font-size:44px;

font-weight:900;

line-height:1.1;

letter-spacing:-1.5px;

color:var(--primary);

margin-bottom:6px;

}

.price-period{

display:block;

font-size:15px;

font-weight:600;

color:var(--text-soft);

}


/* ---------- El margen: es el argumento de venta ---------- */

.price-margin{

background:var(--surface-2);

border-left:4px solid var(--success);

border-radius:var(--radius-sm);

padding:16px 18px;

margin-bottom:26px;

}

.price-margin span{

display:block;

font-size:12.5px;

font-weight:700;

letter-spacing:.6px;

text-transform:uppercase;

color:var(--text-soft);

margin-bottom:4px;

}

.price-margin strong{

display:block;

font-size:19px;

font-weight:800;

color:var(--text);

margin-bottom:6px;

}

.price-margin em{

display:block;

font-style:normal;

font-size:14px;

font-weight:700;

line-height:1.45;

color:var(--success);

}


/* ---------- Listado ---------- */

.price-list{

list-style:none;

padding:0;

margin:0 0 30px;

flex:1 1 auto;

}

.price-list li{

position:relative;

padding:0 0 13px 26px;

font-size:15.5px;

line-height:1.55;

color:var(--text-soft);

}

.price-list li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:800;

color:var(--success);

}


/* ---------- Boton ---------- */

.price-btn{

width:100%;

margin-top:auto;

padding:15px 24px;

font-size:16px;

}


/* ---------- Aclaracion del fee ---------- */

.pricing-foot-note{

max-width:800px;

margin:34px auto 0;

text-align:center;

font-size:15.5px;

line-height:1.7;

color:var(--text-soft);

}


/* =====================================================
   DISCLAIMER (identico al de la landing B2C)
===================================================== */

.pricing-disclaimer{

max-width:900px;

margin:38px auto 0;

text-align:center;

font-size:14.5px;

line-height:1.7;

color:var(--text-soft);

}


/* =====================================================
   LAS TRES CAPAS DE PROTECCION
===================================================== */

.shield-block{

max-width:1120px;

margin:110px auto 0;

background:var(--secondary);

border-radius:var(--radius-lg);

padding:60px 54px;

box-shadow:var(--shadow-lg);

}

.shield-head{

text-align:center;

max-width:760px;

margin:0 auto 46px;

}

.shield-head h3{

font-size:34px;

font-weight:800;

line-height:1.25;

letter-spacing:-.6px;

color:#fff;

margin-bottom:14px;

}

.shield-head p{

font-size:17.5px;

line-height:1.7;

color:rgba(255,255,255,.68);

}

.shield-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:26px;

}

.shield-card{

position:relative;

display:flex;

flex-direction:column;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.12);

border-radius:var(--radius-md);

padding:32px 28px 26px;

transition:var(--transition);

}

.shield-card:hover{

background:rgba(255,255,255,.08);

border-color:rgba(255,255,255,.22);

}

.shield-num{

font-size:13px;

font-weight:900;

letter-spacing:2px;

color:var(--primary-light);

margin-bottom:16px;

}

.shield-card h4{

font-size:20px;

font-weight:800;

line-height:1.3;

color:#fff;

margin-bottom:12px;

}

.shield-card p{

font-size:15.5px;

line-height:1.7;

color:rgba(255,255,255,.68);

margin-bottom:22px;

flex:1 1 auto;

}

.shield-tag{

align-self:flex-start;

padding:7px 16px;

border-radius:var(--radius-xl);

font-size:12.5px;

font-weight:800;

letter-spacing:.8px;

text-transform:uppercase;

}

.shield-tag-in{

background:rgba(21,185,122,.16);

color:#3fe0a0;

border:1px solid rgba(21,185,122,.35);

}

.shield-tag-add{

background:rgba(21,101,255,.18);

color:#8db8ff;

border:1px solid rgba(21,101,255,.42);

}

.shield-note{

max-width:820px;

margin:40px auto 0;

text-align:center;

font-size:14.5px;

line-height:1.75;

color:rgba(255,255,255,.52);

}


/* =====================================================
   COMPARACION CONTRA EL STACK QUE YA PAGA
===================================================== */

.stack-block{

max-width:1120px;

margin:110px auto 0;

}

.stack-head{

text-align:center;

max-width:760px;

margin:0 auto 44px;

}

.stack-head h3{

font-size:34px;

font-weight:800;

line-height:1.25;

letter-spacing:-.6px;

color:var(--secondary);

margin-bottom:14px;

}

.stack-head p{

font-size:17.5px;

line-height:1.7;

color:var(--text-soft);

}

.stack-table-wrap{

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius-lg);

box-shadow:var(--shadow-sm);

overflow-x:auto;

}

.stack-table{

width:100%;

min-width:760px;

border-collapse:collapse;

}

.stack-table th,
.stack-table td{

padding:17px 16px;

text-align:center;

font-size:15px;

border-bottom:1px solid var(--border);

}

.stack-table thead th{

font-size:14px;

font-weight:800;

letter-spacing:.4px;

color:var(--text-soft);

background:var(--surface-2);

border-bottom:2px solid var(--border);

}

.stack-table thead th.col-own{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#fff;

font-size:15px;

}

.stack-table .row-label{

text-align:left;

font-weight:700;

color:var(--text);

min-width:240px;

}

.stack-table .yes{

color:var(--success);

font-weight:800;

font-size:18px;

}

.stack-table .no{

color:#c3ccda;

font-weight:700;

}

.stack-table td.own{

background:rgba(21,101,255,.05);

border-left:1px solid rgba(21,101,255,.18);

border-right:1px solid rgba(21,101,255,.18);

}

.stack-table .row-price td{

font-weight:700;

color:var(--text-soft);

border-bottom:none;

}

.stack-table .row-price td.own{

color:var(--primary);

font-weight:800;

}

.stack-punch{

max-width:860px;

margin:38px auto 0;

text-align:center;

font-size:19px;

line-height:1.75;

color:var(--text-soft);

}

.stack-punch strong{

color:var(--text);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

.audience-split{

grid-template-columns:1fr;

max-width:560px;

gap:22px;

}

.pricing-grid{

grid-template-columns:1fr;

max-width:560px;

gap:34px;

}

.price-card-featured{

order:-1;

}

.price-scope{

min-height:auto;

}

.shield-grid{

grid-template-columns:1fr;

}

.shield-block{

padding:46px 32px;

}

}


@media(max-width:700px){

.shield-block,
.stack-block{

margin-top:70px;

}

.shield-block{

padding:38px 24px;

border-radius:var(--radius-md);

}

.shield-head h3,
.stack-head h3{

font-size:26px;

}

.price-card{

padding:32px 24px;

}

.price-amount strong{

font-size:38px;

}

.stack-punch{

font-size:17px;

}

/* La tabla no se rompe: scrollea. Se avisa con el borde. */

.stack-table-wrap{

border-radius:var(--radius-md);

}

}