/* =====================================================
   PANEL360 — TABLA COMPARATIVA
   "Sin Panel360 / Con Panel360"
   Es la seccion donde el consultor se ve a si mismo.
===================================================== */

.compare-section{

padding:var(--section) 0;

}


/* ---------- Encabezado de las dos columnas ---------- */

.compare-head{

display:grid;

grid-template-columns:1fr 1fr;

gap:24px;

max-width:1000px;

margin:0 auto 22px;

}

.compare-head div{

padding:18px 26px;

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

font-weight:800;

font-size:18px;

letter-spacing:.3px;

}

.compare-head .head-sin{

background:var(--surface-2);

color:var(--text-soft);

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

}

.compare-head .head-con{

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

color:#fff;

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

}


/* ---------- Filas ---------- */

.compare-rows{

max-width:1000px;

margin:auto;

display:flex;

flex-direction:column;

gap:16px;

}

.compare-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:24px;

}

.cell{

background:var(--surface);

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

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

padding:24px 26px;

font-size:16.5px;

line-height:1.6;

display:flex;

gap:14px;

align-items:flex-start;

transition:var(--transition);

}

.compare-row:hover .cell{

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

}

.cell .mark{

flex:0 0 auto;

width:26px;

height:26px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

font-weight:800;

margin-top:2px;

}


/* Columna izquierda: como se trabaja hoy */

.cell-sin{

color:var(--text-soft);

background:var(--surface-2);

}

.cell-sin .mark{

background:rgba(240,68,56,.12);

color:var(--danger);

}


/* Columna derecha: con Panel360 */

.cell-con{

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

color:var(--text);

}

.cell-con .mark{

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

color:var(--success);

}

.cell-con strong{

font-weight:700;

}


/* ---------- Pie de la tabla ---------- */

.compare-foot{

max-width:1000px;

margin:50px auto 0;

text-align:center;

}

.compare-foot p{

font-size:20px;

color:var(--text-soft);

margin-bottom:30px;

}


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

@media(max-width:820px){

/* En celular la tabla deja de ser tabla: cada fila pasa a ser un
   par apilado (hoy arriba, Panel360 abajo).

   PROBLEMA QUE ESTO CORRIGE (05/08/2026): antes se ocultaba solo
   el titulo "Como se trabaja hoy" y quedaba el titulo azul "Con
   PoliTech Panel360" flotando encima de la PRIMERA celda, que es
   justamente la del problema con la cruz roja. Se leia al reves:
   parecia que Panel360 causaba el problema. Ademas, de la segunda
   fila en adelante ninguna celda decia a que columna pertenecia.

   Solucion: se oculta el encabezado completo y cada celda lleva
   su propio rotulo, escrito desde el CSS (content) para no
   ensuciar la vista de escritorio. */

.compare-head{

display:none;

}

.compare-row{

grid-template-columns:1fr;

gap:0;

margin-bottom:20px;

}

.cell{

flex-wrap:wrap;

padding:18px 20px;

font-size:15.5px;

}

.cell::before{

flex:0 0 100%;

font-size:11px;

font-weight:800;

letter-spacing:.09em;

text-transform:uppercase;

margin-bottom:10px;

}

.cell-sin::before{

content:"Como se trabaja hoy";

color:var(--danger);

}

.cell-con::before{

content:"Con PoliTech Panel360";

color:var(--primary);

}

.cell-sin{

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

border-bottom:none;

}

.cell-con{

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

}

}