/* ════════════════════════════════════════════════════════════
   SECCIÓN COMPARATIVA
   Tabla unificada (1 grid): características + 3 alternativas +
   columna Draco separada y destacada. Estructura inspirada en la
   tabla comparativa de Elixir, con la identidad visual de Draco.
   ════════════════════════════════════════════════════════════ */

.cmp{
  padding-block:var(--section-pad);background:var(--bg);position:relative;overflow-x:clip;overflow-y:visible;
  /* columna Draco: el azul de marca algo apagado para que no grite */
  --cmp-draco-a:color-mix(in oklab,var(--c-deep) 84%,#0c1428);
  --cmp-draco-b:color-mix(in oklab,var(--c-deep) 70%,#0c1428);
  --cmp-draco-a-hover:color-mix(in oklab,var(--c-deep) 92%,#0c1428);
  --cmp-draco-b-hover:color-mix(in oklab,var(--c-deep) 78%,#0c1428);
  --cmp-ease-out:cubic-bezier(.16,1,.3,1);
}
.cmp-container{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}

/* ── CABECERA ── */
.cmp-head{max-width:600px;margin-bottom:0}
.cmp-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-sky);margin-bottom:16px}
.cmp-title{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--text-1);margin-bottom:12px}
.cmp-sub{font-size:13px;line-height:1.6;color:var(--text-2)}

/* ── SCROLL WRAPPER (desktop: sin scroll real; mobile: horizontal) ── */
/* sin scroll: por encima de 860px la tabla cabe (min-width 720px) y un
   overflow aquí recortaría el pelo de Draco, que asoma por encima */
.cmp-scroll{overflow:visible;margin-inline:calc(var(--page-gutter) * -1);padding-inline:var(--page-gutter)}

/* ════════════════════════════════
   GRID UNIFICADO
   label | themes | builders | ai | spacer | draco
   Cada fila es `.cmp-row{display:contents}` — sus celdas participan
   directamente de este grid, así que el hover (:hover en la fila)
   puede iluminar las 4 alternativas a la vez con CSS puro.
   ════════════════════════════════ */
.cmp-grid{
  display:grid;
  grid-template-columns:minmax(200px,2fr) repeat(3,minmax(92px,1fr)) 20px minmax(170px,1.15fr);
  align-items:stretch;
  min-width:720px;
  /* contexto propio: Draco (z-index:-1) se asoma por detrás de su
     columna sin quedar debajo del fondo de la sección */
  isolation:isolate;
  padding-top:150px;
}
.cmp-row{display:contents}

.cmp-cell{display:flex;align-items:center;min-height:62px;padding:0 14px}
.cmp-cell--label{gap:12px;font-size:15px;font-weight:600;color:var(--text-1);padding-left:22px;min-width:0}
.cmp-label-text{min-width:0;overflow-wrap:break-word;line-height:1.3}
.cmp-row-icon{width:32px;height:32px;border-radius:10px;background:color-mix(in oklab,var(--c-sky) 12%,transparent);color:var(--c-sky);display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="light"] .cmp-row-icon{color:var(--c-deep);background:color-mix(in oklab,var(--c-deep) 9%,transparent)}

.cmp-cell--val{justify-content:center;text-align:center}
.cmp-cell--spacer{padding:0;min-height:0}

/* ── bloque de alternativas: una sola tarjeta con filas ── */
.cmp-row:not(.cmp-row--head) .cmp-cell--label,
.cmp-row:not(.cmp-row--head) .cmp-cell--val:not(.cmp-cell--draco){
  background:var(--surface);border-bottom:1px solid var(--border);transition:background .18s ease;
}
.cmp-row:hover .cmp-cell--label,
.cmp-row:hover .cmp-cell--val:not(.cmp-cell--draco){background:var(--surface-2)}

.cmp-row--head .cmp-cell--label{background:none;border:none}
.cmp-row--head .cmp-cell--alt{background:none;border:none;flex-direction:column;justify-content:flex-end;padding-bottom:16px}
.cmp-row--total .cmp-cell--label,
.cmp-row--total .cmp-cell--val:not(.cmp-cell--draco){border-bottom:none;border-top:1.5px dashed var(--border-strong)}

.cmp-row--head + .cmp-row .cmp-cell--label{border-top-left-radius:20px}
.cmp-row--head + .cmp-row .cmp-cell--val:not(.cmp-cell--draco):nth-of-type(4){border-top-right-radius:20px}
.cmp-row--total .cmp-cell--label{border-bottom-left-radius:20px}
.cmp-row--total .cmp-cell--val:not(.cmp-cell--draco):nth-of-type(4){border-bottom-right-radius:20px}

.cmp-head-name{font-size:14px;font-weight:700;color:var(--text-2)}

.cmp-check{color:var(--text-1);font-size:17px;line-height:1}
.cmp-cross{color:var(--text-3);font-size:18px}
.cmp-dash{color:var(--text-3);font-size:15px}
/* "Depende", "Hay que crearlo"...: --text-2 (≥4.5:1 en ambos temas) */
.cmp-text{font-size:13px;color:var(--text-2);font-weight:500;line-height:1.3}
.cmp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cmp-cell--total .cmp-label-text{font-weight:800}
.cmp-total-price{font-size:14px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums}

/* ── columna Draco: el "ticket" azul ──
   Draco se asoma por detrás de la cabecera; abajo, el total de 0 € y
   el borde dentado, igual que el ticket de "Gratis de verdad". */
.cmp-cell--draco{
  flex-direction:column;justify-content:center;gap:2px;
  background:linear-gradient(170deg,var(--cmp-draco-a) 0%,var(--cmp-draco-b) 100%);
  position:relative;
}
.cmp-row:not(.cmp-row--head):not(.cmp-row--total) .cmp-cell--draco{border-bottom:1px solid rgba(255,255,255,.14)}
.cmp-draco--first{border-radius:22px 22px 0 0;justify-content:flex-end;padding:0 14px 16px}
.cmp-row:hover .cmp-cell--draco{background:linear-gradient(170deg,var(--cmp-draco-a-hover) 0%,var(--cmp-draco-b-hover) 100%)}

.cmp-draco--first{--peek-w:232px}
/* Draco detrás de la columna; la línea del borde cae en y≈545 de 595 de
   la imagen, así que asoma 50/700 de su ancho por debajo del borde: esa
   franja (los dedos) solo se ve en la capa de patas, que va delante. */
.cmp-draco-peek{position:absolute;z-index:-1;left:50%;bottom:calc(100% - var(--peek-w) * .0714);width:var(--peek-w);max-width:none;height:auto;
  transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 -6px 18px #0000004d)}
/* el cuerpo se recorta en la línea del borde (545/595 → 8.4% abajo): así
   nunca tapa la columna, aunque esta cree su propia capa al hacer el fundido */
.cmp-draco-peek:not(.cmp-draco-paws){clip-path:inset(-30% -30% 8.4% -30%)}
.cmp-draco-peek.cmp-draco-paws{z-index:2;filter:drop-shadow(0 4px 5px #00000040)}
.cmp-draco-name{font-size:12px;font-weight:800;color:#fff;letter-spacing:.12em;text-transform:uppercase;text-align:center}

.cmp-draco-check{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--c-deep);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.cmp-draco-text{font-size:13px;font-weight:700;color:#fff;line-height:1.3;text-align:center}

.cmp-draco--last{--z:8px;min-height:104px;padding:14px 14px calc(16px + var(--z));border-top:1.5px dashed rgba(255,255,255,.4);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%}
.cmp-draco-price{font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1;color:#fff}
.cmp-draco-note{font-size:12px;line-height:1.3;color:rgba(255,255,255,.88);font-weight:500;text-align:center}

/* ── aclaración ── */
.cmp-disclaimer{margin-top:16px;font-size:11px;line-height:1.6;color:var(--text-3);max-width:720px}

/* ── selector de alternativa (solo ≤860px, ver RESPONSIVE) ── */
.cmp-selector{display:none;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.cmp-pill{
  appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-family:inherit;font-size:11px;font-weight:600;padding:7px 12px;border-radius:999px;
  cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.cmp-pill:hover{color:var(--text-1);border-color:var(--border-strong)}
/* brand.css pinta la pastilla activa en --c-sky con texto blanco (≈2.2:1);
   aquí se sube a --c-deep (5.1:1) con más especificidad */
.cmp .cmp-selector .cmp-pill.is-active{background:var(--c-deep)!important;border-color:var(--c-deep)!important;color:#fff!important}
.cmp-pill:focus-visible{outline:2px solid var(--c-sky);outline-offset:2px}

/* ════════════════════════════════
   ENTRADA (título y entradilla usan el [data-reveal] global)
   Filas una a una (opacidad + desplazamiento lateral) y después los
   checks de Draco se marcan de arriba abajo, como un recuento.
   .is-armed lo pone el JS: sin JS la tabla se ve entera.
   ════════════════════════════════ */
.cmp-grid.is-armed .cmp-cell:not(.cmp-cell--draco):not(.cmp-cell--spacer){
  opacity:0;transform:translateX(-10px);
  transition:opacity .5s var(--cmp-ease-out),transform .6s var(--cmp-ease-out);
  transition-delay:calc(var(--i,0) * var(--row-stagger,60ms));
}
.cmp-grid.is-armed .cmp-cell--draco{opacity:0;transition:opacity .5s var(--cmp-ease-out)}
.cmp-grid.is-armed .cmp-draco-check,
.cmp-grid.is-armed .cmp-draco-text,
.cmp-grid.is-armed .cmp-draco-price{
  opacity:0;transform:scale(.6);
  transition:opacity .3s var(--cmp-ease-out),transform .55s var(--cmp-ease-out);
  transition-delay:calc(var(--tally-start,800ms) + var(--t,0) * var(--tally-stagger,70ms));
}
.cmp-grid.is-armed.is-in .cmp-cell:not(.cmp-cell--spacer){opacity:1;transform:none}
/* Draco se asoma por detrás de su columna al acabar el recuento */
/* sube por detrás de la columna y, al llegar, las patas agarran el borde.
   El recorte baja lo mismo que sube la imagen (90% + 8.4%), con la misma
   curva, así que el corte se queda fijo en la línea del borde. */
.cmp-grid.is-armed .cmp-draco-peek:not(.cmp-draco-paws){transform:translate(-50%,90%);clip-path:inset(-30% -30% 98.4% -30%);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1) var(--peek-start,1200ms),clip-path 1.1s cubic-bezier(.22,1,.36,1) var(--peek-start,1200ms)}
.cmp-grid.is-armed .cmp-draco-peek.cmp-draco-paws{opacity:0;transform:translate(-50%,-6px);
  transition:opacity .3s ease calc(var(--peek-start,1200ms) + .7s),transform .5s cubic-bezier(.22,1,.36,1) calc(var(--peek-start,1200ms) + .7s)}
.cmp-grid.is-armed.is-in .cmp-draco-peek{transform:translateX(-50%)}
.cmp-grid.is-armed.is-in .cmp-draco-peek:not(.cmp-draco-paws){clip-path:inset(-30% -30% 8.4% -30%)}
.cmp-grid.is-armed.is-in .cmp-draco-peek.cmp-draco-paws{opacity:1}
.cmp-grid.is-armed.is-in .cmp-draco-check,
.cmp-grid.is-armed.is-in .cmp-draco-text,
.cmp-grid.is-armed.is-in .cmp-draco-price{opacity:1;transform:none}

/* cambio de alternativa en mobile: fundido corto de la columna */
.cmp-grid .cmp-row .cmp-cell.cmp-cell--alt{transition:opacity .2s var(--cmp-ease-out),background .18s ease}
.cmp-grid.is-swapping .cmp-row .cmp-cell.cmp-cell--alt{opacity:0;transition-duration:.14s}

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media(max-width:860px){
  /* Sin scroll ni columnas "sticky": con .cmp-row{display:contents}
     la fila no existe como caja, así que position:sticky pierde su
     containing block por fila y la celda Draco queda mal anclada
     (se ancla al grid completo y tapa las columnas intermedias).
     En su lugar: Label + Draco siempre visibles, y el selector de
     pastillas (.cmp-selector) elige qué alternativa se muestra en
     la columna del medio. Solo 1 columna de alternativa visible a
     la vez ⇒ solo 4 celdas "reales" por fila ⇒ grid de 4 tracks. */
  .cmp-selector{display:flex}
  .cmp-scroll{overflow-x:visible}
  .cmp-grid{
    grid-template-columns:minmax(120px,1.4fr) minmax(80px,1fr) 10px minmax(104px,1fr);
    min-width:0;padding-top:96px;
  }
  .cmp-cell--alt{display:none}
  .cmp-grid[data-selected-option="themes"] .cmp-cell--alt[data-option="themes"],
  .cmp-grid[data-selected-option="builders"] .cmp-cell--alt[data-option="builders"],
  .cmp-grid[data-selected-option="ai"] .cmp-cell--alt[data-option="ai"]{display:flex}
  .cmp-row--head .cmp-cell--val:not(.cmp-cell--draco){padding-bottom:10px}
}

@media(max-width:640px){
  .cmp-grid{grid-template-columns:minmax(112px,1.3fr) minmax(70px,1fr) 8px minmax(96px,1fr);padding-top:84px}
  .cmp-cell{padding:0 8px;min-height:54px}
  .cmp-cell--label{padding-left:12px;font-size:13px;gap:8px}
  .cmp-row-icon{display:none}
  .cmp-text{font-size:12px}
  .cmp-draco--first{--peek-w:138px}
  .cmp-draco-price{font-size:30px}
  .cmp-draco-note{font-size:11px}
  .cmp-draco--last{min-height:112px;padding:12px 8px calc(22px + var(--z))}
  .cmp-pill{padding:7px 11px;font-size:11px}
}

/* ════════════════════════════════
   PREFERS-REDUCED-MOTION
   ════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .cmp-grid .cmp-cell,.cmp-grid .cmp-cell--alt,.cmp-draco-peek{transition:none !important}
}