/* ==========================================================================
   Observatorio de proveedores · sudaderasengrupo.com
   Ámbito exclusivo: body.df-project-comparador y componentes .df-insights.
   Cargar después de current-project.css. No toca .df-project-colegios ni
   .df-project-recursos. Sin fuentes remotas, librerías ni imágenes externas.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
body.df-project-comparador{
  --obs-ink:#0a1430;
  --obs-ink-2:#101d42;
  --obs-ink-3:#172a5a;
  --obs-line:#263a6c;
  --obs-line-strong:#5d72ad;
  --obs-text:#eef2fb;
  --obs-muted:#a9b5d1;
  --obs-coral:#ff6f61;
  --obs-coral-hover:#ff8a7e;
  --obs-coral-soft:rgba(255,111,97,.14);
  --obs-turquoise:#3ddbc8;
  --obs-turquoise-soft:rgba(61,219,200,.12);
  --obs-on-accent:#0a1430;
  --obs-radius:20px;
  --obs-radius-sm:12px;
  --obs-gap:clamp(16px,2.4vw,28px);
  --obs-section:clamp(64px,9vw,128px);
  --obs-font-display:"Bahnschrift","DIN Alternate","DIN Next","Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --obs-font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --obs-font-mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,monospace;
  /* Puentes con current-project.css y con el kit global de Elementor */
  --df-mustard:var(--obs-coral);
  --df-section-gap:var(--obs-section);
  --e-global-color-primary:var(--obs-text);
  --e-global-color-secondary:var(--obs-muted);
  --e-global-color-text:var(--obs-muted);
  --e-global-color-accent:var(--obs-coral);
  background:radial-gradient(900px 520px at 88% -8%,rgba(61,219,200,.10),transparent 62%),radial-gradient(700px 480px at -6% 42%,rgba(255,111,97,.07),transparent 60%),var(--obs-ink);
  color:var(--obs-text);
  font-family:var(--obs-font-text);
  color-scheme:dark;
}

/* 2. Base ------------------------------------------------------------------ */
body.df-project-comparador main{max-width:1280px;padding:clamp(40px,6vw,88px) clamp(20px,4vw,48px) clamp(72px,9vw,128px)}
body.df-project-comparador :is(h1,h2,h3,h4){color:var(--obs-text);font-family:var(--obs-font-display);font-weight:700;letter-spacing:-.015em;line-height:1.04;text-transform:none}
body.df-project-comparador .df-page-content h1{font-size:clamp(44px,7.2vw,104px);line-height:.98;letter-spacing:-.03em;max-width:13ch}
body.df-project-comparador .df-page-content h2{font-size:clamp(32px,4.4vw,60px)}
/* :where() deja la especificidad baja para que los componentes fijen su propio color */
body.df-project-comparador :where(.df-page-content) p{color:var(--obs-muted);line-height:1.6}
body.df-project-comparador .df-page-intro p{color:var(--obs-muted)}
body.df-project-comparador a{color:var(--obs-turquoise);text-decoration-thickness:1px;text-underline-offset:.2em}
body.df-project-comparador a:hover{color:var(--obs-text);text-decoration-thickness:2px}
body.df-project-comparador :focus-visible{outline:3px solid var(--obs-turquoise);outline-offset:3px}
body.df-project-comparador ::selection{background:var(--obs-coral);color:var(--obs-on-accent)}
body.df-project-comparador .df-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.df-project-comparador .df-skip-link{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--obs-turquoise);color:var(--obs-on-accent);font-weight:700}
body.df-project-comparador .df-skip-link:focus{top:12px}
body.df-project-comparador .df-skip-link:hover{color:var(--obs-on-accent)}

/* 3. Cabecera, aviso de revisión y pie (solo color; el tema maqueta) ------- */
body.df-project-comparador .df-review-bar{background:#050b1d;color:var(--obs-muted)}
body.df-project-comparador .df-header{background:rgba(10,20,48,.94);border-bottom:1px solid var(--obs-line);color:var(--obs-text)}
body.df-project-comparador .df-header a{color:var(--obs-text);text-decoration:none}
body.df-project-comparador .df-header-nav a:hover,
body.df-project-comparador .df-header-nav a[aria-current]{color:var(--obs-turquoise);text-decoration:underline;text-underline-offset:.35em}
body.df-project-comparador .df-footer{background:#070f26;border-top:1px solid var(--obs-line);color:var(--obs-muted)}
body.df-project-comparador .df-footer a{color:var(--obs-text)}

/* 4. Elementor nativo ------------------------------------------------------ */
body.df-project-comparador .elementor .elementor-widget-heading .elementor-heading-title{color:var(--obs-text);font-family:var(--obs-font-display)}
body.df-project-comparador .elementor .elementor-widget-text-editor{color:var(--obs-muted)}
body.df-project-comparador .elementor .elementor-widget-text-editor :is(strong,b){color:var(--obs-text)}
body.df-project-comparador .elementor-widget-divider{--divider-color:var(--obs-line)}
body.df-project-comparador .elementor-widget-icon-list .elementor-icon-list-text{color:var(--obs-muted)}
body.df-project-comparador .elementor-widget-icon-list .elementor-icon-list-icon :is(i,svg){color:var(--obs-turquoise);fill:var(--obs-turquoise)}
body.df-project-comparador .elementor .elementor-widget-button .elementor-button{display:inline-block;background:var(--obs-coral)!important;color:var(--obs-on-accent)!important;border-radius:999px;padding:15px 26px;line-height:1.2;text-decoration:none;font-family:var(--obs-font-display);font-weight:700;letter-spacing:.01em;transition:background-color .2s ease,transform .2s ease}
body.df-project-comparador .elementor .elementor-widget-button .elementor-button:hover{background:var(--obs-coral-hover)!important;transform:translateY(-1px)}
body.df-project-comparador .elementor .df-btn-secondary.elementor-widget-button .elementor-button{background:transparent!important;color:var(--obs-text)!important;box-shadow:inset 0 0 0 2px var(--obs-turquoise)}
body.df-project-comparador .elementor .elementor-button:focus-visible{outline:3px solid var(--obs-turquoise);outline-offset:3px}

/* 5. Piezas existentes del plugin ------------------------------------------ */
body.df-project-comparador .df-disclosure{max-width:780px;padding:18px 22px;border:1px solid var(--obs-line);border-left:4px solid var(--obs-coral);border-radius:0 var(--obs-radius-sm) var(--obs-radius-sm) 0;background:linear-gradient(90deg,var(--obs-coral-soft),transparent 85%),var(--obs-ink-2);color:var(--obs-text);font-size:16px;line-height:1.55}
body.df-project-comparador .df-disclosure a{color:var(--obs-turquoise)}
body.df-project-comparador .df-comparison-filters label,
body.df-project-comparador .df-message label{color:var(--obs-text)}
body.df-project-comparador :is(input:not([type=radio]):not([type=checkbox]):not([type=range]),select,textarea){background:var(--obs-ink-2);color:var(--obs-text);border:1px solid var(--obs-line-strong);border-radius:10px;font:inherit;min-height:48px}
body.df-project-comparador :is(input:not([type=radio]):not([type=checkbox]):not([type=range]),select,textarea):hover{border-color:var(--obs-turquoise)}
body.df-project-comparador :is(input[type=radio],input[type=checkbox]){accent-color:var(--obs-turquoise)}
body.df-project-comparador :is(button,.df-button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:0;border-radius:999px;background:var(--obs-coral);color:var(--obs-on-accent);font:700 16px/1.1 var(--obs-font-display);letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:background-color .2s ease,transform .2s ease}
body.df-project-comparador :is(button,.df-button):hover{background:var(--obs-coral-hover);color:var(--obs-on-accent)}
body.df-project-comparador :is(button,.df-button):active{transform:translateY(1px)}
body.df-project-comparador :is(th,td){border-bottom:1px solid var(--obs-line);color:var(--obs-text)}
body.df-project-comparador caption{color:var(--obs-text)}
body.df-project-comparador .table-scroll{overflow-x:auto;border:1px solid var(--obs-line);border-radius:var(--obs-radius);background:var(--obs-ink-2);-webkit-overflow-scrolling:touch}
body.df-project-comparador .table-scroll:focus{outline:3px solid var(--obs-turquoise);outline-offset:4px}
body.df-project-comparador .df-breadcrumbs{color:var(--obs-muted)}
body.df-project-comparador .df-export-file{color:var(--obs-turquoise)}
body.df-project-comparador .df-directory article{background:var(--obs-ink-2);border-color:var(--obs-line);border-radius:var(--obs-radius)}
body.df-project-comparador .df-task-hero.e-con{border-bottom-color:var(--obs-line)}
body.df-project-comparador .df-task-card.e-con{background:var(--obs-ink-2);border:1px solid var(--obs-line);border-radius:var(--obs-radius)}
body.df-project-comparador .df-task-card>.elementor-widget-text-editor:first-child p{color:var(--obs-turquoise);font-family:var(--obs-font-mono);letter-spacing:.12em;text-transform:uppercase}

/* 6. Observatorio: estructura y cabeceras ---------------------------------- */
body.df-project-comparador .df-insights{position:relative;margin:0 0 var(--obs-section)}
body.df-project-comparador .df-insights[id]{scroll-margin-top:96px}
body.df-project-comparador .df-insights__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--obs-turquoise);font:600 13px/1.2 var(--obs-font-mono);letter-spacing:.14em;text-transform:uppercase}
body.df-project-comparador .df-insights__eyebrow::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--obs-coral)}
body.df-project-comparador .df-insights h2{margin:0;font-size:clamp(34px,4.8vw,64px);max-width:18ch}
body.df-project-comparador .df-insights__lead{margin:0 0 28px;max-width:58ch;color:var(--obs-muted);font-size:clamp(18px,1.6vw,22px);line-height:1.55}
body.df-project-comparador .df-insights__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin:0 0 clamp(24px,3vw,40px)}
body.df-project-comparador .df-insights__note{margin:12px 0 0;max-width:62ch;color:var(--obs-muted);font-size:15px;line-height:1.55}

/* Relación comercial: siempre junto a resultados, nunca oculta */
body.df-project-comparador .df-insights__relation{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0;padding:10px 16px;border:1px solid rgba(255,111,97,.6);border-radius:16px;background:var(--obs-coral-soft);color:var(--obs-text);font-size:14px;font-weight:600;line-height:1.35}
body.df-project-comparador .df-insights__relation::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--obs-coral) 0 50%,var(--obs-turquoise) 0 100%)}
body.df-project-comparador .df-insights__relation a{color:inherit}

/* 7. Portada con figura geométrica ----------------------------------------- */
body.df-project-comparador .df-insights-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:clamp(24px,5vw,72px);padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--obs-line)}
body.df-project-comparador .df-insights-hero h1{margin:6px 0 28px;font-size:clamp(46px,7.4vw,112px);line-height:.95;letter-spacing:-.035em;max-width:12ch}
body.df-project-comparador .df-insights-hero h1 em{font-style:normal;color:var(--obs-coral)}
body.df-project-comparador .df-insights__figure{justify-self:end;width:100%;max-width:520px;margin:0}
body.df-project-comparador .df-insights__figure svg{display:block;width:100%;height:auto;overflow:visible}
body.df-project-comparador .df-insights__orbit{transform-box:view-box;transform-origin:50% 50%;animation:obs-orbit 90s linear infinite}
@keyframes obs-orbit{to{transform:rotate(360deg)}}

/* 8. Estados de evidencia (forma + texto, nunca solo color) --------------- */
body.df-project-comparador .df-insights__legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin:28px 0 0;padding:0;list-style:none;color:var(--obs-muted);font-size:14px}
body.df-project-comparador .df-insights__legend li{display:inline-flex;align-items:center;gap:8px}
body.df-project-comparador .df-state{display:inline-flex;align-items:center;gap:8px;color:var(--obs-muted);font:600 13px/1.25 var(--obs-font-text);letter-spacing:.01em}
body.df-project-comparador .df-state::before{content:"";flex:none;box-sizing:border-box;width:12px;height:12px;border:2px dashed currentColor;border-radius:50%}
body.df-project-comparador .df-state--verified{color:var(--obs-text)}
body.df-project-comparador .df-state--verified::before{border:0;background:var(--obs-turquoise)}
body.df-project-comparador .df-state--no-profile::before{border:2px solid currentColor;border-radius:2px}
body.df-project-comparador .df-state--na::before{height:2px;border:0;border-radius:0;background:currentColor}
body.df-project-comparador .df-state--checking::before{border:2px dotted var(--obs-coral)}
body.df-project-comparador .df-state--lg{font-size:18px;font-family:var(--obs-font-display)}
body.df-project-comparador .df-state--lg::before{width:18px;height:18px}

/* 9. Pestañas (anclas con aria-current o role=tab) y filtros ---------------- */
body.df-project-comparador .df-insights__tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;margin:0 0 20px;padding:8px;overflow-x:auto;border:1px solid var(--obs-line);border-radius:999px;background:rgba(10,20,48,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none}
body.df-project-comparador .df-insights__tabs :is(a,[role=tab]){flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--obs-muted);font:600 15px/1 var(--obs-font-display);letter-spacing:.01em;text-decoration:none;cursor:pointer}
body.df-project-comparador .df-insights__tabs :is(a,[role=tab]):hover{background:var(--obs-ink-3);color:var(--obs-text)}
body.df-project-comparador .df-insights__tabs :is(a[aria-current],[role=tab][aria-selected=true]){background:var(--obs-text);color:var(--obs-ink)}
body.df-project-comparador .df-insights__tabs :is(a,[role=tab]):focus-visible{outline-offset:-3px}
body.df-project-comparador [role=tabpanel]:focus-visible{outline-offset:8px}
body.df-project-comparador .df-insights__filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 32px;margin:0 0 clamp(32px,4vw,52px);padding:20px 22px;border:1px solid var(--obs-line);border-radius:var(--obs-radius);background:var(--obs-ink-2)}
body.df-project-comparador .df-insights__filters fieldset{min-width:0;margin:0;padding:0;border:0}
body.df-project-comparador .df-insights__filters legend{margin:0 0 10px;padding:0;color:var(--obs-muted);font:600 12px/1 var(--obs-font-mono);letter-spacing:.12em;text-transform:uppercase}
body.df-project-comparador .df-insights__filters .df-insights__note{flex:1 1 100%;margin:0;font-size:14px}
body.df-project-comparador .df-chips{display:flex;flex-wrap:wrap;gap:8px}
body.df-project-comparador .df-chip{position:relative;display:inline-flex}
body.df-project-comparador .df-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
body.df-project-comparador .df-chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--obs-line-strong);border-radius:999px;color:var(--obs-text);font-size:15px;font-weight:600}
body.df-project-comparador .df-chip input:hover+span{border-color:var(--obs-turquoise)}
body.df-project-comparador .df-chip input:checked+span{border-color:var(--obs-turquoise);background:var(--obs-turquoise);color:var(--obs-on-accent)}
body.df-project-comparador .df-chip input:checked+span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
body.df-project-comparador .df-chip input:focus-visible+span{outline:3px solid var(--obs-turquoise);outline-offset:3px}

/* 10. Reputación: criterio común y tarjetas de proveedor -------------------- */
body.df-project-comparador .df-insights__criteria{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 20px;margin:0 0 28px;padding:22px 24px;border:1px dashed var(--obs-line-strong);border-radius:var(--obs-radius);color:var(--obs-muted);font-size:15px;line-height:1.6}
body.df-project-comparador .df-insights__criteria::before{content:"";width:40px;height:40px;border:2px solid var(--obs-turquoise);border-radius:50%;background:radial-gradient(circle,var(--obs-coral) 0 6px,transparent 7px)}
body.df-project-comparador .df-insights__criteria p{margin:0 0 8px;color:var(--obs-muted)}
body.df-project-comparador .df-insights__criteria p:last-child{margin:0}
body.df-project-comparador .df-insights__criteria strong{color:var(--obs-text)}
body.df-project-comparador .df-insights__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--obs-gap);margin:0;padding:0;list-style:none}
body.df-project-comparador .df-provider{position:relative;display:flex;flex-direction:column;gap:20px;height:100%;padding:clamp(20px,2.4vw,32px);overflow:hidden;border:1px solid var(--obs-line);border-radius:var(--obs-radius);background:linear-gradient(180deg,var(--obs-ink-2),rgba(16,29,66,.55))}
body.df-project-comparador .df-provider::after{content:"";position:absolute;top:-72px;right:-72px;width:168px;height:168px;border:1px solid var(--obs-line);border-radius:50%;box-shadow:0 0 0 28px rgba(38,58,108,.18);pointer-events:none}
body.df-project-comparador .df-provider__head{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
body.df-project-comparador .df-provider__name{margin:0;font-size:clamp(26px,2.6vw,36px)}
body.df-project-comparador .df-provider__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;color:var(--obs-muted);font-size:14px}
body.df-project-comparador .df-provider__tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--obs-coral);border-radius:999px;color:var(--obs-text);font-size:13px;font-weight:600}
body.df-project-comparador .df-provider__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--obs-coral)}
body.df-project-comparador .df-provider__platforms,
body.df-project-comparador .df-provider__reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.df-project-comparador .df-platform{min-width:0;padding:18px;border:1px solid var(--obs-line);border-radius:var(--obs-radius-sm);background:var(--obs-ink)}
body.df-project-comparador .df-platform__name{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:20px}
body.df-project-comparador .df-platform__name::before{content:"";flex:none;box-sizing:border-box;width:14px;height:14px;border:3px solid var(--obs-turquoise);border-radius:50%}
body.df-project-comparador .df-platform--trustpilot .df-platform__name::before{border-color:var(--obs-coral);border-radius:2px;transform:rotate(45deg)}
body.df-project-comparador .df-platform__status{margin:0 0 12px}
body.df-project-comparador .df-platform__facts{margin:0}
body.df-project-comparador .df-platform__facts div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:9px 0;border-top:1px solid var(--obs-line)}
body.df-project-comparador .df-platform__facts dt{color:var(--obs-muted);font-size:14px}
body.df-project-comparador .df-platform__facts dd{margin:0;color:var(--obs-text);font-size:14px;text-align:right}
body.df-project-comparador .df-platform--no-profile{border-style:dashed;background:transparent}
body.df-project-comparador .df-review{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:18px;border:1px dashed var(--obs-line-strong);border-radius:var(--obs-radius-sm)}
body.df-project-comparador .df-review__label{display:flex;align-items:center;gap:8px;color:var(--obs-muted);font:600 12px/1.2 var(--obs-font-mono);letter-spacing:.12em;text-transform:uppercase}
body.df-project-comparador .df-review__label::before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid currentColor}
body.df-project-comparador .df-review--worst .df-review__label::before{border-top:10px solid currentColor;border-bottom:0}
body.df-project-comparador .df-review__text{margin:0;color:var(--obs-text);font-size:17px;line-height:1.5}
body.df-project-comparador .df-review__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;color:var(--obs-muted);font-size:13px}
body.df-project-comparador .df-reply{display:inline-flex;align-items:center;padding:3px 10px;border:1px dotted var(--obs-muted);border-radius:999px;color:var(--obs-muted);font-size:12px;font-weight:600}
body.df-project-comparador .df-reply--answered{border:1px solid var(--obs-turquoise);color:var(--obs-text)}
body.df-project-comparador .df-reply--no-visible{border:1px dashed var(--obs-line-strong);color:var(--obs-text)}

/* 11. Matriz de prestaciones y reputación --------------------------------- */
body.df-project-comparador .df-matrix{width:100%;min-width:1040px;border-collapse:separate;border-spacing:0;font-size:14px}
body.df-project-comparador .df-matrix caption{padding:18px 20px;color:var(--obs-text);font:600 15px/1.45 var(--obs-font-text);text-align:left}
body.df-project-comparador .df-matrix thead th{padding:14px 16px;background:var(--obs-ink-3);color:var(--obs-muted);font:600 12px/1.25 var(--obs-font-mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:bottom}
body.df-project-comparador .df-matrix thead .df-matrix__rep{box-shadow:inset 0 3px 0 var(--obs-coral);color:var(--obs-text)}
body.df-project-comparador .df-matrix tbody th{position:sticky;left:0;z-index:1;min-width:180px;padding:16px;background:var(--obs-ink-2);color:var(--obs-text);font:700 16px/1.25 var(--obs-font-display);text-transform:none;letter-spacing:0}
body.df-project-comparador .df-matrix td{padding:16px;vertical-align:middle}
body.df-project-comparador .df-matrix td.df-matrix__rep{background:rgba(255,111,97,.06)}
body.df-project-comparador .df-matrix tbody tr:hover>*{background:var(--obs-ink-3)}
body.df-project-comparador .df-matrix tbody tr:last-child>*{border-bottom:0}
body.df-project-comparador .df-matrix thead th:first-child{position:sticky;left:0;z-index:2}
body.df-project-comparador .df-matrix tbody th .df-provider__tag{display:flex;width:max-content;margin-top:8px;font-family:var(--obs-font-text)}
body.df-project-comparador main:focus{outline:none}

/* 12. Cobertura de evidencia: constelación categórica, no puntuación ------- */
body.df-project-comparador .df-coverage{display:grid;gap:12px;margin:0;padding:0;list-style:none}
body.df-project-comparador .df-coverage__row{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);align-items:center;gap:16px 28px;padding:20px 22px;border:1px solid var(--obs-line);border-radius:var(--obs-radius);background:var(--obs-ink-2)}
body.df-project-comparador .df-coverage__brand{margin:0;font-size:21px}
body.df-project-comparador .df-coverage__summary{margin:6px 0 0}
body.df-project-comparador .df-coverage__nodes{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
body.df-project-comparador .df-coverage__nodes::before{content:"";position:absolute;top:11px;left:6.25%;right:6.25%;height:1px;background:var(--obs-line-strong)}
body.df-project-comparador .df-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;color:var(--obs-muted);font-size:12px;line-height:1.2;text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
body.df-project-comparador .df-node::before{content:"";box-sizing:border-box;width:22px;height:22px;border:2px dashed var(--obs-muted);border-radius:50%;background:var(--obs-ink-2)}
body.df-project-comparador .df-node--verified{color:var(--obs-text)}
body.df-project-comparador .df-node--verified::before{border:0;background:var(--obs-turquoise)}
body.df-project-comparador .df-node--no-profile::before{border:2px solid var(--obs-muted);border-radius:4px}
body.df-project-comparador .df-node--na::before{height:2px;margin:10px 0;border:0;border-radius:0;background:var(--obs-muted)}

/* 13. Método --------------------------------------------------------------- */
body.df-project-comparador .df-insights__method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--obs-gap);margin:0;padding:0;list-style:none}
body.df-project-comparador .df-insights__method li{padding:24px;border-top:3px solid var(--obs-turquoise);border-radius:0 0 var(--obs-radius-sm) var(--obs-radius-sm);background:var(--obs-ink-2)}
body.df-project-comparador .df-insights__method li:nth-child(even){border-top-color:var(--obs-coral)}
body.df-project-comparador .df-insights__method h3{margin:0 0 10px;font-size:22px}
body.df-project-comparador .df-insights__method p{margin:0;color:var(--obs-muted);font-size:15px;line-height:1.6}

/* 14. Responsive: 1440 · 768 · 390 ---------------------------------------- */
@media (max-width:1199px){
  body.df-project-comparador .df-insights__method{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  body.df-project-comparador .df-insights-hero{grid-template-columns:1fr}
  body.df-project-comparador .df-insights__figure{justify-self:start;max-width:340px}
  body.df-project-comparador .df-insights__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  body.df-project-comparador main{padding:36px 20px 72px}
  body.df-project-comparador .df-insights__figure{max-width:240px}
  body.df-project-comparador .df-insights__tabs{position:static;border-radius:var(--obs-radius-sm)}
  body.df-project-comparador .df-insights__filters{padding:16px}
  body.df-project-comparador .df-insights__criteria{grid-template-columns:1fr;padding:18px}
  body.df-project-comparador .df-provider__platforms,
  body.df-project-comparador .df-provider__reviews{grid-template-columns:1fr}
  body.df-project-comparador .df-matrix tbody th{min-width:140px;font-size:15px}
  body.df-project-comparador .df-coverage__row{grid-template-columns:1fr;padding:18px}
  body.df-project-comparador .df-coverage__nodes{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px}
  body.df-project-comparador .df-coverage__nodes::before{display:none}
  body.df-project-comparador .df-insights__method{grid-template-columns:1fr}
}

/* 15. Movimiento, alto contraste e impresión ------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html:has(body.df-project-comparador){scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  body.df-project-comparador *,
  body.df-project-comparador *::before,
  body.df-project-comparador *::after{animation:none!important;transition:none!important}
}
@media (forced-colors:active){
  body.df-project-comparador :is(.df-state,.df-node)::before{forced-color-adjust:none;border-color:CanvasText;background:Canvas}
  body.df-project-comparador :is(.df-state--verified,.df-node--verified,.df-state--na,.df-node--na)::before{background:CanvasText}
  body.df-project-comparador .df-chip input:checked+span{outline:2px solid Highlight}
}
@media print{
  body.df-project-comparador{--obs-ink:#fff;--obs-ink-2:#fff;--obs-ink-3:#f1f1f1;--obs-line:#bbb;--obs-line-strong:#666;--obs-text:#000;--obs-muted:#333;--obs-coral:#a3271b;--obs-turquoise:#006b5f;background:#fff}
  body.df-project-comparador :is(.df-insights__tabs,.df-insights__filters,.df-insights__figure,.df-skip-link){display:none!important}
  body.df-project-comparador .df-provider{break-inside:avoid}
}