/* ==========================================================================
   Comparador (template-compare.php) · DESIGN §12.3
   Cabecera de página, tabla (columnas por producto, filas por grupo, barras
   espejo con 2 productos, ganador en negrita con filete azul, «Solo
   diferencias»), barra fija al bajar y estado vacío. El resto (nota, regla,
   .vr, .sh, .vslist, .ctile, .steps, botones) sale de style.css.
   ========================================================================== */

.cmp-page{padding-bottom:var(--section)}

/* Cabecera: H1 y entradilla en una línea; filete de tinta como el archivo */
.cmph{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 18px;padding:12px 0 16px;border-bottom:2px solid var(--ink)}
.cmph h1{font:400 var(--fs-h1)/var(--lh-h1) var(--serif);letter-spacing:-.01em;word-spacing:.05em}
.cmph p{font-size:15.5px;color:var(--muted)}
/* Sin tabla, el filete lo ponen las cabeceras de sección de debajo (no dos filetes de tinta seguidos) */
.cmph--empty{border-bottom:0;padding-bottom:0}

/* Avisos (productos que no entran) */
.cmpt__note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper-2);font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.cmpt__note .ic{margin-top:2px;color:var(--muted)}

/* Comparativa patrocinada (§10.8): etiqueta encima de la tabla, nunca dentro */
.cmpt__paid{margin-top:16px;border:1px solid var(--paid-line);border-radius:var(--r-md);overflow:hidden}
.cmpt__paid p{padding:8px 12px;font-size:var(--fs-meta);line-height:1.4;color:var(--paid);background:#FFFBF1}

/* ---- Tabla -------------------------------------------------------------- */
.cmpt{position:relative}
.cmpt__scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.cmpt__scroll:focus-visible{outline-offset:-2px}
/* Anchos: etiquetas (--c0), productos (entre --cmin y --cmax) y el hueco «Añadir» (--ca, --a = 1 si está).
   Si no caben, la tabla pasa del 100 % y se desliza; con 1 o 2 productos no se estira sin fin. */
.ctab{--c0:196px;--ca:164px;--cmin:190px;--cmax:420px;
  width:clamp(calc(var(--c0) + var(--n)*var(--cmin) + var(--a)*var(--ca)),100%,calc(var(--c0) + var(--n)*var(--cmax) + var(--a)*var(--ca)));
  table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.4;color:var(--ink)}
.ctab__corner{width:var(--c0)}
.ctab__add{width:var(--ca)}
.ctab th,.ctab td{padding:9px 14px;text-align:left;vertical-align:top;font-weight:400;border-bottom:1px solid var(--rule);background:#fff}
/* Con table-layout:fixed la celda no crece: una palabra larga («brillo/oscurecimiento») se parte en vez de invadir la columna vecina */
.ctab td,.cph__t{overflow-wrap:anywhere;hyphens:manual}   /* sin guiones insertados: en una tabla técnica parecen parte del dato */
/* Separador de columnas sin afectar a los anchos (sombra interior, no borde) */
.ctab td[data-p],.ctab .cph,.ctab__add,.ctab__e{box-shadow:inset 1px 0 0 var(--rule)}

/* Etiqueta de fila: fija a la izquierda al deslizar */
.ctab th[scope="row"]{font:500 13.5px/1.35 var(--sans);color:var(--ink-2);hyphens:manual;overflow-wrap:anywhere}
.ctab th[scope="row"] small{font-size:var(--fs-2xs);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctab th[scope="row"],.ctab__corner{position:sticky;left:0;z-index:2}
.cmpt.is-scrolled .ctab th[scope="row"],.cmpt.is-scrolled .ctab__corner,.cmpt.is-scrolled .cstick__c0{box-shadow:8px 0 10px -10px rgba(18,21,31,.45)}

/* Grupo: kicker sobre un filete de tinta de 2 px, como la cabecera de sección */
.ctab__gh th{padding:22px 14px 8px;border-bottom:2px solid var(--ink);font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ctab__gh span{position:sticky;left:14px}

/* Valores */
.cval{color:var(--ink)}
.cnone{color:var(--muted)}
.ctab tr[data-win]:has(.is-w) td:not(.is-w) .cval{color:var(--ink-2)}
/* Ganador de la fila: negrita y filete azul a la izquierda de la celda */
.ctab td.is-w{box-shadow:inset 2px 0 0 var(--blue)}
.ctab td.is-w .cval{font-weight:700;color:var(--ink)}

/* Nota y veredicto (primera fila): cifra, veredicto y regla; la regla de quien no tiene la mejor nota, apagada */
.cnota{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.cnota .cval{font:600 20px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cnota__v{font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)}
.r-score .ruler{margin-top:8px;max-width:170px}
.r-score td:not(.is-top) .ruler{opacity:.35}
.r-score td:not(.is-top) .cnota .cval{font-weight:500;color:var(--ink-2)}
.r-score td.is-w .cnota .cval{font-weight:700}

/* Criterios: barras de .vr, una por columna; gana a color pleno y pierde al 30 % */
.ctab .vr{gap:10px;font-size:13.5px}
.ctab .vr--l,.ctab .vr--s{grid-template-columns:30px minmax(0,1fr)}
.ctab .vr--r{grid-template-columns:minmax(0,1fr) 30px}
.ctab .vr--l b{text-align:left}
.ctab td.is-top .vr i{opacity:1}
.ctab td.is-top .vr b{font-weight:700;color:var(--ink)}
.ctab tr.r-bar td{vertical-align:middle}
/* Con 2 productos, barras espejo: la 1.ª crece hacia el centro y la 2.ª desde él; el filete del ganador, en el centro, junto a su barra */
.ctab--2 tr.r-bar td[data-p]{padding-right:8px}
.ctab--2 tr.r-bar td[data-p]+td[data-p]{padding-left:8px;padding-right:14px}
.ctab--2 tr.r-bar th+td.is-w{box-shadow:inset 1px 0 0 var(--rule),inset -2px 0 0 var(--blue)}

/* Textos largos de la ficha técnica: 4 líneas y «Seguir leyendo» cuando recortar ahorra de verdad (lo decide compare.js) */
.cclamp__t{display:block}
.cclamp.is-clamped:not(.is-open) .cclamp__t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.cclamp__more{position:relative;display:inline-flex;align-items:center;min-height:22px;margin-top:2px;padding:0;border:0;background:none;color:var(--blue);font:600 var(--fs-meta)/1.2 var(--sans);cursor:pointer}
.cclamp__more[hidden]{display:none}
.cclamp__more::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.cclamp__more:hover{text-decoration:underline;text-underline-offset:3px}

/* Lo mejor y lo peor */
.clist{display:grid;gap:5px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.clist li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:7px}
.clist .ic{width:14px;height:14px;margin-top:2px;stroke-width:2.25}
.clist--pros .ic{color:var(--pos)}
.clist--cons .ic{color:var(--neg)}

/* ---- Cabecera de columnas ---------------------------------------------- */
.ctab thead th,.ctab thead td{border-bottom:0}
.ctab__h>*{padding-top:14px;padding-bottom:6px}
.ctab__h2>td{padding-top:4px;padding-bottom:14px;border-bottom:1px solid var(--rule-2)}
.ctab__corner,.ctab__add{border-bottom:1px solid var(--rule-2)!important;padding-bottom:14px!important}
/* Esquina: categoría, «2 de 4» y el interruptor */
.ccorner{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%}
.ccorner__k{display:flex;align-items:center;gap:10px;font:600 15px/1.2 var(--sans);color:var(--ink)}
.ccorner__n{font-size:var(--fs-meta);color:var(--muted)}
.ccorner__n b{font-weight:600;color:var(--ink)}
.ccorner__hint{font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
.cswitch{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:500 13.5px/1.2 var(--sans);color:var(--ink);cursor:pointer;user-select:none}
.cswitch input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cswitch__ui{position:relative;flex:none;width:34px;height:20px;border-radius:var(--r-pill);border:1.5px solid var(--control);background:#fff;transition:background .15s,border-color .15s}
.cswitch__ui::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:var(--control);transition:transform .15s,background .15s}
.cswitch input:checked+.cswitch__ui{background:var(--ink);border-color:var(--ink)}
.cswitch input:checked+.cswitch__ui::after{transform:translateX(14px);background:#fff}
.cswitch input:focus-visible+.cswitch__ui{outline:2px solid var(--blue);outline-offset:2px}
.cswitch:hover .cswitch__ui{border-color:var(--ink)}
/* Producto: imagen 4:3 pequeña, nombre y × (nada encima de la foto) */
.cph__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.cph__img{display:block;width:128px;max-width:calc(100% - 40px);aspect-ratio:4/3;background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.cph__img img{width:100%;height:100%;object-fit:contain}
.cph__t{font:600 15px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.cph__t:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* «Patrocinado · Marca»: nunca se recorta; si no cabe en la columna, pasa a 2 líneas con la ⓘ al lado */
.cph__paid{display:flex;flex-wrap:wrap;align-items:center;gap:2px;max-width:100%}
.cph__paid .tag{white-space:normal;height:auto;min-height:22px;padding:4px 6px;line-height:1.25;overflow-wrap:anywhere}
.cph__paid .paidbar__why{width:22px;height:22px}
.cph__x{position:absolute;top:-2px;right:-4px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--rule-2);border-radius:50%;background:#fff;color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s}
.cph__x:hover{border-color:var(--ink);color:var(--ink)}
.cph__x .ic{width:15px;height:15px}
.cph__x::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
/* Nota M, veredicto, «desde» y «Ver precio ›» */
.cps__s{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.cps__s .verdict{font:400 21px/1.05 var(--serif);white-space:normal}
.cps__f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;margin-top:12px}
/* Hueco «+ Añadir producto»: abre la paleta filtrada por la categoría (sin JS, el listado) */
.cadd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:168px;padding:14px 10px;border:1.5px dashed var(--rule-3);border-radius:var(--r-md);text-align:center;color:var(--ink);transition:border-color .15s,background .15s}
.cadd:hover{border-color:var(--ink);background:var(--paper-2)}
.cadd__i{display:grid;place-items:center;width:36px;height:36px;margin-bottom:3px;border-radius:50%;background:var(--paper-2);transition:background .15s,color .15s}
.cadd:hover .cadd__i{background:var(--ink);color:#fff}
.cadd b{font:600 14px/1.25 var(--sans)}
.cadd small{font-size:var(--fs-xs);color:var(--muted)}

/* Pie de la tabla: «Ver precio» otra vez, al final de la ficha técnica */
.ctab tfoot th,.ctab tfoot td{vertical-align:middle;border-bottom:0;padding-top:14px;padding-bottom:14px}
.cmpt__foot{margin-top:10px;font-size:var(--fs-meta);line-height:1.45;color:var(--muted)}

/* «Solo diferencias»: fuera las filas (y los grupos) iguales en todos los productos */
.cmpt.is-diff [data-same],.cmpt:has([data-cmp-diff]:checked) [data-same]{display:none}

/* ---- Barra fija al bajar: miniatura, nombre y nota de cada columna -------- */
.cstick{position:sticky;top:var(--header-h);height:0;z-index:var(--z-tabs)}
.cstick__in{position:absolute;left:0;right:0;top:0;overflow:hidden;background:#fff;border-bottom:1px solid var(--rule-2);box-shadow:0 10px 18px -16px rgba(18,21,31,.45);visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.cmpt.is-stuck .cstick__in{visibility:visible;opacity:1;transform:none}
.cstick__row{display:grid;grid-auto-flow:column;align-items:stretch}
.cstick__row>*{min-width:0;background:#fff}
.cstick__c0{position:sticky;left:0;z-index:1;display:flex;align-items:center;padding:8px 14px;font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cstick__p{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 14px;box-shadow:inset 1px 0 0 var(--rule)}
.cstick__img{display:block;width:44px;aspect-ratio:4/3}
.cstick__img img{width:100%;height:100%;object-fit:contain}
.cstick__t{font:600 13.5px/1.25 var(--sans);letter-spacing:-.01em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.cstick__a{box-shadow:inset 1px 0 0 var(--rule)}

/* ---- Estado vacío -------------------------------------------------------- */
.cmp-resume{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-top:16px;padding:12px 14px 12px 16px;border:1.5px solid var(--ink);border-radius:var(--r-md)}
.cmp-resume p{font-size:var(--fs-ui);line-height:1.4;color:var(--ink-2)}
.cmp-resume p b{color:var(--ink);font-weight:600}
/* Escritorio: «Cara a cara» y «Cómo funciona» en una fila, las categorías debajo. En el DOM las categorías van
   entre las dos (orden de lectura en móvil: parejas, categorías, explicación). */
.cmpe{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"vs how" "cats cats";gap:var(--section) 48px;align-items:start;padding-top:22px}
.cmpe__vs{grid-area:vs}
.cmpe__how{grid-area:how}
.cmpe__cats{grid-area:cats}
.cmpe__vs .sh{margin-bottom:6px}
.cmpe__how .sh--sm{margin-bottom:10px}
.cmpe__steps{grid-template-columns:minmax(0,1fr)}
.cmpe__steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:11px 14px}
.cmpe__steps li+li{border-left:0;border-top:1px solid var(--rule)}
.cmpe__steps b{font-size:24px}
.cmpe__steps h3{font:600 14.5px/1.25 var(--sans)}
.cmpe__steps p{font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
.cmpe__find{margin-top:12px}

/* Paleta abierta desde «Añadir producto»: solo fichas; las que ya están en la tabla, marcadas */
.palette-layer.is-cmp-add .palette__g[aria-label="Guías"]{display:none}
.palette-layer.is-cmp-add .palette__row.is-in{opacity:.55}
.palette-layer.is-cmp-add .palette__row.is-in small::after{content:" · ya en la comparación"}
.cmp-palmsg{margin:8px 12px 0;padding:8px 12px;border-radius:var(--r-sm);background:var(--paper-2);font-size:var(--fs-sm);line-height:1.4;color:var(--ink)}
.cmp-palmsg[hidden]{display:none}

/* ---- Tableta ------------------------------------------------------------- */
@media (max-width:1023.98px){
  .ctab{--c0:150px;--ca:132px;--cmin:168px}
  .cmpe{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .cmpe>*{grid-area:auto}
  .cmpe__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cmpe__steps li+li{border-top:0;border-left:1px solid var(--rule)}
}

/* ---- Móvil: 2 columnas de producto a la vista, etiquetas fijas y deslizamiento lateral ---- */
@media (max-width:767.98px){
  .cmph{padding:10px 0 12px;gap:2px 12px}
  .cmph p{font-size:var(--fs-sm)}
  /* El 3.er producto o el hueco «Añadir» asoman 22 px: se ve que hay más a la derecha */
  .ctab{--c0:110px;--ca:92px;--cmin:calc((100% - var(--c0) - 22px)/2);--cmax:9999px;font-size:13px}
  .ctab th,.ctab td{padding:8px 10px}
  /* Sin guiones automáticos: la columna de etiquetas cabe «Almacenamiento» entero (110 px, 4 px a la derecha) */
  .ctab th[scope="row"]{font-size:12.5px;line-height:1.3;padding-right:4px}
  .ctab th[scope="row"] small{margin-left:1px}   /* el peso sigue a la etiqueta en la misma línea si cabe */
  .ctab__gh th{padding:14px 10px 6px}
  .ctab__gh span{left:10px}
  .ctab__h>*{padding-top:10px}
  .ctab__h2>td{padding-bottom:12px}
  .ccorner{gap:6px}
  .ccorner__k .plate{display:none}
  .ccorner__k{font-size:13.5px}
  .cswitch{flex-direction:column;align-items:flex-start;gap:5px;font-size:12.5px;margin-top:4px}
  .cswitch__ui{width:30px;height:18px}
  .cswitch__ui::after{width:11px;height:11px}
  .cswitch input:checked+.cswitch__ui::after{transform:translateX(12px)}
  .ccorner__hint{font-size:12.5px}
  .cph__in{gap:8px}
  .cph__img{max-width:calc(100% - 30px)}
  .cph__t{font-size:13.5px}
  .cph__paid .tag{letter-spacing:.02em;padding:3px 5px}   /* «PATROCINADO» entero en la columna de 390 */
  .cph__x{width:26px;height:26px;top:-2px;right:-4px}
  .cph__x .ic{width:14px;height:14px}
  .cps__s .score--m{width:38px;height:38px;font-size:17px}
  .cps__s .verdict{display:none}   /* el veredicto está dos filas más abajo, en «Nota»; aquí solo costaba una línea */
  .cps__f{flex-direction:column;align-items:flex-start;margin-top:8px}
  .cps__f .price b{font-size:15px}
  .ctab .pcard__cta{height:28px;font-size:var(--fs-xs);padding:0 4px 0 8px}
  .cnota .cval{font-size:17px}
  .cnota__v{font-size:var(--fs-xs)}
  .ctab .vr{gap:6px;font-size:12.5px}
  .ctab .vr--l,.ctab .vr--s{grid-template-columns:24px minmax(0,1fr)}
  .ctab .vr--r{grid-template-columns:minmax(0,1fr) 24px}
  .ctab--2 tr.r-bar td[data-p]{padding-right:6px}
  .ctab--2 tr.r-bar td[data-p]+td[data-p]{padding-left:6px;padding-right:10px}
  .clist{font-size:12.5px}
  .clist li:nth-child(n+2){display:none}   /* 1 por producto en móvil: la ficha tiene la lista completa */
  .cadd{min-height:128px;padding:10px 6px}
  .cadd b{font-size:13px}
  .cstick__c0{padding:6px 10px}
  .cstick__p{grid-template-columns:minmax(0,1fr);gap:6px;padding:7px 10px}
  .cstick__img,.cstick__p .score{display:none}   /* el nombre (2 líneas como mucho) tiene toda la columna */
  .cstick__t{font-size:12.5px}
  .cmpe{padding-top:18px}
  .cmpe__steps{grid-template-columns:minmax(0,1fr)}
  .cmpe__steps li{padding:10px 12px}
  .cmpe__steps li+li{border-left:0;border-top:1px solid var(--rule)}
  .cmp-resume{padding:10px 12px}
  .cmp-resume .btn{width:100%}
}

/* Móvil estrecho (360): «Ver precio» sin la flecha para caber en la columna */
@media (max-width:379.98px){
  .ctab .pcard__cta{padding:0 8px}
  .ctab .pcard__cta .ic{display:none}
  .cph__paid .tag{text-transform:none;letter-spacing:0;font-size:11px}   /* en mayúsculas no cabe la palabra */
}