/* Rankings «Lo mejor de Ibiza»: podio que se levanta, barras por criterio que se llenan en orden y radar por puesto.
   Solo tokens de site.css. El estado inicial de cada animación vive dentro de prefers-reduced-motion:no-preference. */
.rk-page{--c-rating:var(--accent);--c-calm:var(--olive);--c-weather:var(--ochre);--c-family:var(--bougain);--c-price:var(--terra)}
.c-rating{--c:var(--c-rating)}.c-calm{--c:var(--c-calm)}.c-weather{--c:var(--c-weather)}.c-family{--c:var(--c-family)}.c-price{--c:var(--c-price)}

/* cabecera */
.rk-head{padding-block-end:.5rem}
.rk-eyebrow{display:inline-flex;align-items:center;gap:.55rem}.rk-eyebrow .glyph{inline-size:22px;block-size:22px;color:var(--accent)}
.rk-title{font-size:clamp(2.1rem,1.2rem + 3.4vw,4.1rem);line-height:1;max-inline-size:19ch;letter-spacing:-.018em}
.rk-title .w{display:inline-block;overflow:clip;overflow-clip-margin:.08em;padding-block-end:.08em;margin-block-end:-.08em;vertical-align:top}
.rk-title .w>span{display:inline-block}
.rk-title em{font-style:normal;color:var(--accent);background:linear-gradient(transparent 64%,var(--mark-bg,color-mix(in oklch,var(--sand) 62%,transparent)) 64% 92%,transparent 92%);padding-inline:.04em}
.rk-head .lead{max-inline-size:68ch}
.rk-stats{margin-block-start:1.6rem;animation-delay:.45s}

/* podio */
.rk-pod{position:relative;margin-block:clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,3.5rem);padding-block-start:.5rem;isolation:isolate}
.rk-contours{position:absolute;inset-inline:0;inset-block-end:0;inline-size:100%;block-size:42%;z-index:-1;overflow:visible}
.rk-contours path{fill:none;stroke:color-mix(in oklch,var(--accent) 38%,transparent);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:1 0}
.rk-contours path:nth-child(2){stroke:color-mix(in oklch,var(--sand) 80%,transparent)}.rk-contours path:nth-child(3){stroke:color-mix(in oklch,var(--accent) 28%,transparent)}
.pod{list-style:none;margin:0 auto;padding:0;max-inline-size:980px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);grid-template-areas:"p2 p1 p3";align-items:end;gap:clamp(.5rem,2.2vw,1.6rem);border-block-end:2px solid var(--ink)}
.pod-i{display:flex;flex-direction:column;gap:.75rem;min-inline-size:0}
.p1{grid-area:p1;--medal:var(--sand)}.p2{grid-area:p2;--medal:var(--lav)}.p3{grid-area:p3;--medal:color-mix(in oklch,var(--terra) 62%,var(--sand))}
.pod-card{display:grid;gap:.3rem;text-decoration:none;color:inherit;min-inline-size:0}
.pod-img{display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow);outline:3px solid color-mix(in oklch,var(--medal) 70%,transparent);outline-offset:-3px}
.pod-img>*,.pod-img img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pod-card:hover .pod-img>*{transform:scale(1.04)}
.pod-card:hover .pod-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.pod-name{font:400 clamp(.86rem,.72rem + .62vw,1.22rem)/1.2 var(--ff-display);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;hyphens:auto;overflow-wrap:anywhere}
.pod-op{font:500 .68rem/1.3 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-step{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.8rem .4rem;border-radius:var(--r) var(--r) 0 0;background:color-mix(in srgb,var(--medal) 20%,var(--surface));border:1px solid var(--line);border-block-start:4px solid var(--medal);border-block-end:0;transform-origin:50% 100%}
.p1 .pod-step{block-size:clamp(9.5rem,6rem + 9vw,14rem)}.p2 .pod-step{block-size:clamp(7.4rem,5rem + 6vw,10.5rem)}.p3 .pod-step{block-size:clamp(6.4rem,4.4rem + 4.4vw,8.8rem)}
.pod-n{font:400 clamp(2.2rem,1.3rem + 3.4vw,4.6rem)/.95 var(--ff-display);color:var(--ink)}
.pod-s{display:flex;flex-direction:column;align-items:center;line-height:1}
.pod-s b{font:600 clamp(.95rem,.8rem + .5vw,1.3rem)/1 var(--ff-mono);font-variant-numeric:tabular-nums}
.pod-s small{font:500 .62rem/1.4 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklch,var(--ink) 74%,transparent)}
.p1 .pod-step::before{content:"";flex:none;inline-size:26px;block-size:26px;margin-block-end:.1rem;background:var(--sand);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.95}
.pod-step{position:relative}
@media (max-width:560px){.pod-op{display:none}.pod-name{font-size:.8rem}.pod-img{aspect-ratio:1}.pod-step{padding-inline:.2rem}.p1 .pod-step::before{inline-size:18px;block-size:18px}}

/* cómo se calcula (también hace de leyenda de colores) */
.rk-how{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.1rem,3vw,2rem);margin-block:0 clamp(2rem,5vw,3.5rem);box-shadow:var(--shadow)}
.rk-how h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem)}
.rk-weights{list-style:none;padding:0;margin:0 0 1.1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem 1.6rem}
.rk-weights li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"bar bar" "w txt";gap:.45rem .7rem;align-items:baseline;font-size:.92rem;color:var(--muted)}
.rk-weights strong{color:var(--ink)}
.rk-weights b{grid-area:w;font:600 1.7rem/1 var(--ff-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.rk-weights>li>span:last-child{grid-area:txt}
.rk-wbar{grid-area:bar;display:block;block-size:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.rk-wbar i{display:block;block-size:100%;inline-size:var(--w);background:var(--c);border-radius:99px;transform-origin:0 50%;transition:transform .9s var(--ease) calc(.15s + var(--i) * .2s)}
.rk-how .rk-links{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:0}

/* lista */
.rk-list-wrap>h2{margin-block-end:.3rem}
.rk-list{list-style:none;padding:0;margin:1.4rem 0 0;border-block-end:1px solid var(--line)}
.rk-row{display:grid;grid-template-columns:clamp(3rem,2rem + 4vw,6rem) minmax(0,1fr) minmax(220px,300px) 280px;grid-template-areas:"num main score radar";gap:.6rem clamp(1rem,2.6vw,2.4rem);padding-block:clamp(1.3rem,3vw,2rem);border-block-start:1px solid var(--line);align-items:start;scroll-margin-block-start:96px}
.rk-num{grid-area:num;font:400 clamp(2.4rem,1.5rem + 3vw,4.6rem)/.9 var(--ff-display);color:color-mix(in oklch,var(--accent) 80%,var(--ink));font-variant-numeric:tabular-nums;overflow:clip;display:block}
.rk-row:nth-child(1) .rk-num{color:var(--ochre)}.rk-row:nth-child(-n+3) .rk-num{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em;text-decoration-color:var(--sand)}
.rk-main{grid-area:main;min-inline-size:0}
.rk-op{font:500 .72rem/1.4 var(--ff-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .45rem}
.rk-main h3{font-size:clamp(1.2rem,1rem + .8vw,1.55rem);margin:0 0 .6rem}.rk-main h3 a{text-decoration:none}.rk-main h3 a:hover{text-decoration:underline}
.rk-facts{list-style:none;padding:0;margin:0 0 .7rem;display:flex;flex-wrap:wrap;gap:.35rem .5rem;font-size:.88rem}
.rk-facts li{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:99px;background:var(--surface-2)}
.rk-facts li.na{color:var(--muted)}.rk-facts small{color:var(--muted)}.rk-g svg{color:var(--ochre)}
.rk-for{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 .6rem;font-size:.84rem}
.rk-for span{font:500 .68rem/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-inline-end:.15rem}
.rk-for em{font-style:normal;padding:.2rem .55rem;border:1px solid var(--line);border-radius:99px}
.rk-why,.rk-sib{font-size:.88rem;color:var(--muted);margin:0 0 .5rem;max-inline-size:68ch}.rk-why strong{color:var(--ink)}
.rk-see{font-size:.92rem}
.rk-score{grid-area:score;min-inline-size:0}
.rk-total{margin:0 0 .5rem;display:flex;align-items:baseline;gap:.4rem}
.rk-total b{font:600 clamp(1.6rem,1.2rem + 1.2vw,2.2rem)/1 var(--ff-mono);font-variant-numeric:tabular-nums}.rk-total small{font:500 .7rem var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rk-meter{display:flex;block-size:12px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-block-end:.9rem}
.rk-meter .seg{flex:none;inline-size:var(--w);block-size:100%;background:var(--c);transform-origin:0 50%;transition:transform .55s cubic-bezier(.3,.7,.3,1) calc(.2s + var(--i) * .45s)}
.rk-meter .seg+.seg{box-shadow:inset 2px 0 0 var(--surface)}
.rk-parts{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:.86rem}
.rk-parts li{display:grid;grid-template-columns:10px 1fr auto auto;gap:.5rem;align-items:baseline;transition:opacity .5s ease calc(.25s + var(--i) * .45s)}
.rk-parts i{inline-size:10px;block-size:10px;border-radius:3px;background:var(--c);align-self:center}
.rk-parts span small{display:block;color:var(--muted);font-size:.76rem}
.rk-parts b{font:600 .95rem var(--ff-mono);font-variant-numeric:tabular-nums}.rk-parts li>small{color:var(--muted);font:500 .74rem var(--ff-mono)}
.rk-radar{grid-area:radar;min-inline-size:0}
.rk-radar .radar{max-inline-size:280px;margin:0}.rk-radar .radar text{font-size:16px}
.rk-radar .radar figcaption{font-size:.74rem}.rk-radar .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1rem;padding:0;margin:.2rem 0 0;list-style:none}
@media (max-width:1100px){.rk-row{grid-template-columns:clamp(3rem,2rem + 4vw,5rem) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num main main" "num score radar"}.rk-radar .radar{margin-inline:auto}}
@media (max-width:640px){.rk-row{grid-template-columns:2.8rem minmax(0,1fr);grid-template-areas:"num main" "score score" "radar radar"}.rk-num{font-size:2.2rem}.rk-radar .radar{max-inline-size:280px;margin-inline:auto}}

/* sin datos, preguntas y más listas */
.rk-unrated{margin-block:clamp(2rem,5vw,3rem)}.rk-unrated ul{columns:2 280px;column-gap:2.4rem;padding-inline-start:1.1em;margin:0}.rk-unrated li{break-inside:avoid;margin-block-end:.35rem}
.rk-faq{margin-block:clamp(2rem,5vw,3rem)}
.rk-more{margin-block:clamp(2rem,5vw,3rem)}
.rk-chips{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.rk-chips .pill{gap:.45rem}.rk-chips .glyph{inline-size:18px;block-size:18px;color:var(--accent)}

/* hub */
.rk-sec{margin-block:clamp(1.5rem,4vw,3rem)}
.rk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(.9rem,2vw,1.4rem)}
.rk-card{display:flex;flex-direction:column;gap:1rem;padding:1.2rem 1.25rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.rk-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.rk-card-h{display:flex;align-items:center;gap:.75rem}.rk-card-h .glyph{flex:none;inline-size:34px;block-size:34px;color:var(--accent)}
.rk-card-h>span{display:grid;gap:.2rem}.rk-card-h small{font:500 .66rem/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.rk-card-h strong{font:400 1.32rem/1.1 var(--ff-display)}
.rk-mini{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.rk-mini li{display:grid;grid-template-columns:1.3rem minmax(0,1fr) auto;grid-template-areas:"n t s" ". bar bar";gap:.25rem .5rem;align-items:baseline;font-size:.88rem}
.rk-mini-n{grid-area:n;font:400 1.15rem/1 var(--ff-display);color:var(--accent-ink)}
.rk-mini-t{grid-area:t;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-mini b{grid-area:s;font:600 .82rem var(--ff-mono);font-variant-numeric:tabular-nums}
.rk-mini-bar{grid-area:bar;display:block;block-size:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.rk-mini-bar i{display:block;block-size:100%;inline-size:var(--w);background:var(--accent);border-radius:99px;transform-origin:0 50%;transition:transform .8s var(--ease) calc(.2s + var(--i) * .14s)}
.rk-card-go{margin-block-start:auto;font-weight:600;color:var(--accent-ink);font-size:.92rem}
.rk-card:hover .rk-card-go span{display:inline-block;transform:translateX(3px);transition:transform .3s var(--ease)}
.rk-method{margin-block:clamp(2.5rem,6vw,4.5rem);padding-block-start:clamp(1.5rem,4vw,2.5rem);border-block-start:2px solid var(--ink);scroll-margin-block-start:90px}
.rk-method-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,2.5rem);align-items:start}.rk-table-wrap{max-inline-size:960px}
.rk-method .prose p,.rk-method .prose li{max-inline-size:68ch}.rk-method .prose li{margin-block-end:.45rem}
.rk-formula code{display:block;font:500 .86rem/1.5 var(--ff-mono);background:var(--surface-2);border-inline-start:3px solid var(--accent);padding:.8rem 1rem;border-radius:var(--r-sm);overflow-wrap:anywhere}
.rk-table{font-size:.86rem}.rk-table th,.rk-table td{text-align:center}.rk-table th[scope="row"]{text-align:start;white-space:nowrap}
.rk-table .dot{display:inline-block;inline-size:9px;block-size:9px;border-radius:3px;background:var(--c);margin-inline-end:.35rem;vertical-align:middle}
@media (max-width:860px){.rk-method-grid{grid-template-columns:minmax(0,1fr)}}
.rk-method-grid>*{min-inline-size:0}

/* movimiento: el estado inicial solo existe si la persona no pidió reducirlo (y con JS, que es quien añade .in) */
@media (prefers-reduced-motion:no-preference){
  .rk-title .w>span{animation:wordup .9s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(.05s + var(--i) * .06s)}
  .rk-title em{background-size:0 100%;background-repeat:no-repeat;animation:mark .7s var(--ease) .8s forwards}
  .rk-eyebrow{animation:wipe .8s var(--ease) both}
  .rk-contours path{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.25,1) calc(var(--i) * .22s)}
  .js .rk-pod:not(.in) .rk-contours path{stroke-dasharray:1;stroke-dashoffset:1}
  .rk-pod.in .rk-contours path{stroke-dasharray:1}
  .rk-pod .pod-step{transition:transform .85s cubic-bezier(.2,.9,.25,1.12)}
  .rk-pod .p3 .pod-step{transition-delay:.1s}.rk-pod .p2 .pod-step{transition-delay:.25s}.rk-pod .p1 .pod-step{transition-delay:.4s}
  .js .rk-pod:not(.in) .pod-step{transform:scaleY(0)}
  .rk-pod .pod-n{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
  .rk-pod .p3 .pod-n{transition-delay:.55s}.rk-pod .p2 .pod-n{transition-delay:.7s}.rk-pod .p1 .pod-n{transition-delay:.9s}
  .js .rk-pod:not(.in) .pod-n{transform:scale(0)}
  .rk-pod .pod-card{transition:opacity .6s ease,clip-path .8s var(--ease)}
  .rk-pod .p3 .pod-card{transition-delay:.5s}.rk-pod .p2 .pod-card{transition-delay:.65s}.rk-pod .p1 .pod-card{transition-delay:.8s}
  .js .rk-pod:not(.in) .pod-card{opacity:0;clip-path:inset(0 0 100% 0)}
  .rk-pod.in .pod-card{clip-path:inset(-10px -10px -10px -10px)}
  .rk-pod .p1 .pod-step::before{transition:transform .5s cubic-bezier(.3,1.7,.5,1) 1.15s}
  .js .rk-pod:not(.in) .p1 .pod-step::before{transform:scale(0) rotate(-120deg)}
  .js .rk-row:not(.in) .rk-meter .seg,.js .rk-how:not(.in) .rk-wbar i,.js .rk-card:not(.in) .rk-mini-bar i{transform:scaleX(0)}
  .js .rk-row:not(.in) .rk-parts li{opacity:.25}
  .rk-num{transition:clip-path .7s var(--ease),transform .7s var(--ease)}
  .js .rk-row:not(.in) .rk-num{clip-path:inset(0 0 100% 0);transform:translateY(35%)}
  .rk-row.in .rk-num{clip-path:inset(-.2em)}
}

/* móvil: la tabla de pesos (lista + 5 criterios): columna de nombres legible y el resto en columnas estrechas */
@media (max-width:640px){
  .rk-table{table-layout:fixed;min-inline-size:500px;inline-size:100%;font-size:.8rem}
  .rk-table th,.rk-table td{padding:.65rem .4rem}
  .rk-table thead th:first-child,.rk-table tbody th[scope="row"]{inline-size:116px;white-space:normal;min-inline-size:0;position:sticky;inset-inline-start:0;z-index:1}
  .rk-table thead th:first-child{background:var(--surface)}
  .rk-table thead th{vertical-align:bottom;font-size:.72rem;line-height:1.25;white-space:normal;hyphens:auto}
  .cmp-scroll:has(.rk-table){background:linear-gradient(to left,var(--surface) 30%,transparent) right center/36px 100% no-repeat local,linear-gradient(to left,color-mix(in srgb,var(--ink) 18%,transparent),transparent) right center/14px 100% no-repeat scroll,var(--surface)}
}
@media (max-width:640px){.pod-s small,.rk-card-h small,.pod-op{font-size:.7rem}}