:root{
  --bg-900:#06080d; --bg-800:#0a1020;
  --ink-100:#eef2ff; --ink-300:#bfc8e6;
  --gold-300:#efdfac; --gold-400:#d8b765; --gold-700:#8f7228;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --radius:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--ink-100);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(1100px 800px at 80% -10%, rgba(70,120,230,.08), transparent 60%),
    radial-gradient(900px 650px at 15% 12%, rgba(70,120,230,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-900) 0%, var(--bg-800) 60%, var(--bg-900) 100%);
  overflow-x:hidden;
}

/* Puntitos dorados (canvas) */
.particles{position:fixed; inset:0; z-index:-2; pointer-events:none}

/* Header */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(6,8,13,.7), rgba(6,8,13,.35));
  border-bottom:1px solid rgba(216,183,101,.18);
}
.nav{width:min(1200px,92vw); margin:auto; display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:700}
.dot-logo{width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #fff0 55%), linear-gradient(135deg, var(--gold-300), var(--gold-700));
  box-shadow:0 0 18px rgba(216,183,101,.5)
}

/* Hero */
.hero{width:min(1200px,92vw); margin:54px auto 28px; text-align:center; position:relative}
.halo{
  position:absolute; left:50%; top:50px; translate:-50% 0;
  width:min(900px, 85vw); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(216,183,101,.18), rgba(216,183,101,0) 60%),
    conic-gradient(from 0deg, rgba(216,183,101,.25), rgba(216,183,101,0) 35% 65%, rgba(216,183,101,.25));
  filter:blur(18px);
  opacity:.65;
  mask:radial-gradient(circle, #000 55%, transparent 65%);
}
h1{
  font-family:"Playfair Display", serif; font-weight:700;
  font-size: clamp(38px, 5.8vw, 64px); line-height:1.05; margin:0;
  letter-spacing:.2px; position:relative; display:inline-block;
}
.h1-underline{
  height:2px; width:0;
  background:linear-gradient(90deg, transparent, var(--gold-400), transparent);
  margin:14px auto 10px; border-radius:2px; filter:drop-shadow(0 6px 18px rgba(216,183,101,.45));
}
.sub{color:var(--ink-300); max-width:780px; margin:0 auto 26px; line-height:1.6}
.btn-gold{
  display:inline-flex; gap:.6rem; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:999px; border:1px solid rgba(216,183,101,.35);
  background-image:linear-gradient(180deg, var(--gold-300), var(--gold-700));
  color:#231a06; font-weight:700; box-shadow:0 0 0 1px rgba(216,183,101,.25), 0 14px 40px rgba(216,183,101,.25);
  cursor:pointer; position:relative; overflow:hidden; text-decoration:none;
}
.btn-gold::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40% 60%, rgba(255,255,255,.9));
  mask:linear-gradient(120deg, transparent 46%, #000 50% 54%, transparent 58%);
  translate:-150% 0; transition:translate .8s cubic-bezier(.2,.6,0,1);
}
.btn-gold:hover::after{ translate:120% 0 }

/* Showcase (libros) */
.showcase{width:min(1200px,92vw); margin:34px auto 80px; position:relative}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg, var(--glass), transparent);
  border:1px solid var(--stroke); box-shadow:var(--shadow);
}
.frame{
  position:relative; width:100%; aspect-ratio:3/4.2; background:#0c1327c7;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  --a: 0deg; outline:1px solid rgba(255,255,255,.06);
}
.frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    conic-gradient(from var(--a), rgba(216,183,101,.0) 0deg, rgba(216,183,101,.55) 30deg, rgba(216,183,101,.0) 60deg),
    radial-gradient(120% 120% at 80% -20%, rgba(216,183,101,.08), transparent 60%);
  mix-blend-mode:screen; opacity:.6;
}
.img-wrap{
  position:relative; width:88%; height:88%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); /* reveal */
  will-change:clip-path, transform;
}
.img-wrap img{width:100%; height:100%; object-fit:contain; transform-origin:center; will-change:transform, filter}

.meta{padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.title{font:700 20px/1.25 "Playfair Display", serif; letter-spacing:.2px}
.badge{
  font:600 12px/1 Inter; color:var(--gold-300);
  padding:6px 10px; border-radius:999px; border:1px solid rgba(216,183,101,.35);
  background:rgba(216,183,101,.08);
}
.actions{padding: 0 16px 18px; display:flex; justify-content:flex-start}
.btn-sm{ padding:12px 16px; font-size:14px; border-radius:12px; }

/* -------- NUEVA SECCIÓN: “Prácticos y elegantes” -------- */
.features{
  width:min(1100px,92vw); margin:0 auto 90px;
  position:relative; z-index:1;
}
.feat-card{
  background:linear-gradient(180deg, var(--glass), var(--glass-2));
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:28px clamp(18px,3vw,32px) 26px;
  position:relative;
  overflow:hidden;
}
.feat-logo{
  height:100px; width:auto; display:block; margin:6px auto 12px;
  filter:drop-shadow(0 10px 28px rgba(216,183,101,.35));
  opacity:0; transform:translateY(10px);
}
.feat-title{
  font-family:"Playfair Display", serif; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-align:left; margin:10px 0 8px; font-size: clamp(18px,2.4vw,24px);
}
.feat-rule{
  height:1px; width:0; background:linear-gradient(90deg, transparent, var(--gold-400), transparent);
  filter:drop-shadow(0 6px 18px rgba(216,183,101,.45));
  margin:8px 0 14px;
}
.feat-list{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:14px 26px;
}
.feat-list li{
  position:relative; padding-left:28px; line-height:1.55; color:var(--ink-100);
  opacity:0; transform:translateY(12px);
}
.feat-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #fff, #fff0 60%), linear-gradient(135deg, var(--gold-300), var(--gold-700));
  box-shadow:0 0 14px rgba(216,183,101,.6);
  transform:scale(.5); opacity:.6;
}
@media (max-width:820px){
  .feat-list{grid-template-columns:1fr}
}

/* ===== Contenedor/huella del bloque ===== */
.compare{
max-width: 1200px;           /* iguala ancho visual de tu card superior */
margin-inline: auto;
}

/* ===== Card principal: mismo estilo “glass” del card superior ===== */
.compare-card{
--pad-card: 22px;
--pad-cell: 12px;
--fs-base: clamp(12px, 1.05vw, 14px);
position: relative;
border-radius: 28px;
padding: var(--pad-card);
background:
  radial-gradient(120% 120% at 0% 0%, rgba(216,183,101,.12) 0%, rgba(18,24,38,.35) 40%, rgba(8,12,22,.65) 100%),
  rgba(15,19,32,.35);
border: 1px solid rgba(216,183,101,.18);
box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: blur(6px);
}

/* ===== Cabecera ===== */
.compare-head{ margin-bottom: 14px; }
.compare-title{
font-family: "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
font-size: clamp(26px, 3vw, 42px);
font-weight: 800;
letter-spacing: .3px;
line-height: 1.08;
color: #f0f2f8;
text-shadow: 0 2px 18px rgba(216,183,101,.18);
}
.compare-rule{
height: 2px; width: 0;
border-radius: 99px;
background: linear-gradient(90deg, rgba(216,183,101,0), rgba(216,183,101,.55), rgba(216,183,101,0));
box-shadow: 0 0 22px rgba(216,183,101,.35);
}

/* ===== Tabla compacta sin scrollbar interno ===== */
.table-wrap{
position: relative;
border-radius: 22px;
background: rgba(10,12,24,.55);
border: 1px solid rgba(255,255,255,.06);
overflow: visible;   /* << sin barras */
padding: 8px;
}
.header-sheen{
position: absolute; inset: 0 auto 0 -40%;
width: 40%; transform: translateX(-120%);
background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
filter: blur(8px); pointer-events: none; opacity: 0;
border-radius: 22px;
}

table.isef{
width: 100%; border-collapse: separate; border-spacing: 0;
color: #cfd6e6; font-weight: 500; font-size: var(--fs-base);
}
.isef thead tr.icons th{
padding: 12px 10px 6px; position: sticky; top: 0; z-index: 2;
background: linear-gradient(180deg, rgba(15,19,32,.92), rgba(15,19,32,.85) 60%, rgba(15,19,32,.75));
backdrop-filter: blur(4px);
}
.isef thead tr.labels th{
padding: 8px 10px 12px; position: sticky; top: 56px; z-index: 2;
color: #eaeffb; font-weight: 800; text-align: left;
background: linear-gradient(180deg, rgba(15,19,32,.92), rgba(15,19,32,.85) 60%, rgba(15,19,32,.75));
}

/* Badges */
.badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:38px; height:38px; border-radius:999px;
background: radial-gradient(120% 120% at 30% 30%, rgba(216,183,101,.35), rgba(216,183,101,.12));
border: 1px solid rgba(216,183,101,.35);
box-shadow: 0 0 0 3px rgba(216,183,101,.12), 0 8px 24px rgba(216,183,101,.18);
font-weight: 800; color:#f6f2e6;
}

/* Celdas y filas */
.isef td, .isef th{ border-right: 1px solid rgba(255,255,255,.04); }
.isef th:last-child, .isef td:last-child{ border-right: none; }
.isef tbody tr{
background: linear-gradient(180deg, rgba(14,17,30,.55), rgba(14,17,30,.42));
transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
}
.isef tbody tr:not(:last-child) td{ border-bottom: 1px solid rgba(255,255,255,.04); }
.isef tbody td{ padding: var(--pad-cell) 10px; }
.isef tbody td.comp{ font-weight:700; }
.isef tbody td .gold{ color:#d8b765; }
.isef tbody td .red{ color:#ff5b5b; }

/* >>> Precios: color #d8b765 (solicitado) */
.isef tbody td.precio{
font-weight: 900;
color: #d8b765;                 /* fijo */
text-shadow: 0 8px 26px rgba(216,183,101,.18);
text-align: right;
}

/* Hover */
.isef tbody tr:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(216,183,101,.14), inset 0 1px 0 rgba(255,255,255,.06); }

/* Anchos de columnas (desktop) */
.c-comp{ width: 22%; }
.c-cont{ width: 12%; }
.c-casos{ width: 16%; }
.c-dispo{ width: 14%; }
.c-tam{  width: 11%; }
.c-vol{  width: 6%;  }
.c-extras{width: 11%; }
.c-precio{width: 8%; }

/* ===== Breakpoints ===== */
@media (max-width: 1100px){
.isef thead tr.icons{ display:none; }
}
@media (max-width: 900px){
.isef thead{ display:none; }
.isef tbody{ display:block; }
.isef tbody tr{
  display:grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 14px 12px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 16px;
}
.isef tbody td{ display:flex; gap:10px; padding:0; border:0; background:transparent !important; }
.isef tbody td::before{
  content: attr(data-label); min-width: 44%; color:#eaeffb; font-weight:800;
}
.isef tbody td.comp{ grid-column: 1 / -1; font-size: 1.05rem; }
.isef tbody td.precio{ grid-column: 2 / 3; justify-self:end; font-size: 1.1rem; }
}
@media (max-width: 520px){
.isef tbody tr{ grid-template-columns: 1fr; }
.isef tbody td::before{ min-width: 46%; }
.isef tbody td.precio{ grid-column: 1 / -1; justify-self:end; }
}
/* ===== CONTENEDOR ===== */
.compare{
max-width: 1200px;
margin-inline: auto;
}

/* ===== CARD ===== */
.compare-card{
--pad-card: 22px;
--pad-cell: 12px;
--fs-base: clamp(12px, 1.05vw, 14px);
position: relative;
border-radius: 28px;
padding: var(--pad-card);
background:
  radial-gradient(120% 120% at 0% 0%, rgba(216,183,101,.12) 0%, rgba(18,24,38,.35) 40%, rgba(8,12,22,.65) 100%),
  rgba(15,19,32,.35);
border: 1px solid rgba(216,183,101,.18);
box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: blur(6px);
}

/* ===== CABECERA ===== */
.compare-head{ margin-bottom: 14px; }
.compare-title{
font-family: "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
font-size: clamp(26px, 3vw, 20px);
font-weight: 800;
letter-spacing: .3px;
line-height: 1.08;
color: #f0f2f8;
text-shadow: 0 2px 18px rgba(216,183,101,.18);
will-change: transform, opacity, letter-spacing;
}
.compare-rule{
height: 2px; width: 0; border-radius: 99px;
background: linear-gradient(90deg, rgba(216,183,101,0), rgba(216,183,101,.55), rgba(216,183,101,0));
box-shadow: 0 0 22px rgba(216,183,101,.35);
}

/* ===== TABLA ===== */
.table-wrap{
position: relative;
border-radius: 22px;
background: rgba(10,12,24,.55);
border: 1px solid rgba(255,255,255,.06);
overflow: visible; /* sin barras internas */
padding: 8px;
}
.header-sheen{
position: absolute; inset: 0 auto 0 -40%;
width: 40%; transform: translateX(-120%);
background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
filter: blur(8px); pointer-events: none; opacity: 0; border-radius: 22px;
}

table.isef{
width: 100%; border-collapse: separate; border-spacing: 0;
color: #cfd6e6; font-weight: 500; font-size: var(--fs-base);
}
.isef thead tr.icons th{
padding: 12px 10px 6px; position: sticky; top: 0; z-index: 2;
background: linear-gradient(180deg, rgba(15,19,32,.92), rgba(15,19,32,.85) 60%, rgba(15,19,32,.75));
backdrop-filter: blur(4px);
}
.isef thead tr.labels th{
padding: 8px 10px 12px; position: sticky; top: 56px; z-index: 2;
color: #eaeffb; font-weight: 800; text-align: left;
background: linear-gradient(180deg, rgba(15,19,32,.92), rgba(15,19,32,.85) 60%, rgba(15,19,32,.75));
}

/* Badges */
.badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:38px; height:38px; border-radius:999px;
background: radial-gradient(120% 120% at 30% 30%, rgba(216,183,101,.35), rgba(216,183,101,.12));
border: 1px solid rgba(216,183,101,.35);
box-shadow: 0 0 0 3px rgba(216,183,101,.12), 0 8px 24px rgba(216,183,101,.18);
font-weight: 800; color:#f6f2e6;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse){
  .badge{ display: none !important; }
}

/* Celdas y filas */
.isef td, .isef th{ border-right: 1px solid rgba(255,255,255,.04); }
.isef th:last-child, .isef td:last-child{ border-right: none; }
.isef tbody tr{
background: linear-gradient(180deg, rgba(14,17,30,.55), rgba(14,17,30,.42));
transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
will-change: transform, filter, box-shadow, background;
}
.isef tbody tr:not(:last-child) td{ border-bottom: 1px solid rgba(255,255,255,.04); }
.isef tbody td{ padding: var(--pad-cell) 10px; }
.isef tbody td.comp{ font-weight:700; }
.isef tbody td .gold{ color:#d8b765; }
.isef tbody td .red{ color:#ff5b5b; }

/* >>> PRECIOS (color fijo) */
.isef tbody td.precio{
font-weight: 900; color: #d8b765; text-shadow: 0 8px 26px rgba(216,183,101,.18);
text-align: right;
}

/* Hover fila + columna */
.isef tbody tr:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(216,183,101,.14), inset 0 1px 0 rgba(255,255,255,.06); }
.isef tbody td.is-col-hover{ background: radial-gradient(60% 60% at 50% 50%, rgba(216,183,101,.06), rgba(216,183,101,0)); }

/* Anchos de columnas (desktop) */
.c-comp{ width: 22%; } .c-cont{ width: 12%; } .c-casos{ width: 16%; } .c-dispo{ width: 14%; }
.c-tam{  width: 11%; } .c-vol{ width: 6%; }  .c-extras{width: 11%; } .c-precio{width: 8%; }

/* ===== Breakpoints ===== */
@media (max-width: 1100px){ .isef thead tr.icons{ display:none; } }
@media (max-width: 900px){
.isef thead{ display:none; }
.isef tbody{ display:block; }
.isef tbody tr{
  display:grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 14px 12px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 16px;
}
.isef tbody td{ display:flex; gap:10px; padding:0; border:0; background:transparent !important; }
.isef tbody td::before{ content: attr(data-label); min-width: 44%; color:#eaeffb; font-weight:800; }
.isef tbody td.comp{ grid-column: 1 / -1; font-size: 1.05rem; }
.isef tbody td.precio{ grid-column: 2 / 3; justify-self:end; font-size: 1.1rem; }
}
@media (max-width: 520px){
.isef tbody tr{ grid-template-columns: 1fr; }
.isef tbody td::before{ min-width: 46%; }
.isef tbody td.precio{ grid-column: 1 / -1; justify-self:end; }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
*{animation: none !important; transition: none !important;}
}

footer{ text-align:center; color:var(--ink-300); padding:26px 0; border-top:1px solid rgba(216,183,101,.18) }