/* Layout: una columna tipo app sobre blanco; cada pregunta es una pantalla que entra deslizándose.
   Tema único claro por decisión: la marca es una web blanca y alegre. */
:root {
  --bg: #FFFFFF;
  --soft: #F4F6FB;
  --ink: #13151D;
  --muted: #5D6375;
  --line: #E3E6EF;
  --blue: #2F5BFF;
  --blue-deep: #1D3FD0;
  --blue-soft: #EAF0FF;
  --sun: #FFD23F;
  --sun-deep: #E5B000;
  --sun-soft: #FFF7DA;
  --silver: #C9CFDA;
  --silver-deep: #8E98AA;
  --bronze: #E8AB78;
  --bronze-deep: #B8733F;
  --green-soft: #E8F6EE;
  --pink: #FF6B8B;
  --good: #13955B;
  --white: #FFFFFF;
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 40px;
}
.app { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* Cabecera y logo */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px 0; }
.logo { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); min-width: 0; }
.logo svg { width: 30px; height: 40px; flex: none; transform: rotate(-10deg); transition: transform .3s; }
.logo:hover svg { transform: rotate(6deg) scale(1.05); }
.wm { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; white-space: nowrap; }
.wm b { color: var(--blue); font-weight: 700; }
.wm i { font-style: normal; color: var(--muted); font-weight: 600; }
.progress { display: flex; gap: 5px; flex: none; }
.progress span { width: 16px; height: 8px; border-radius: 4px; background: var(--line); transition: background .3s, width .3s; }
.progress span.on { background: var(--blue); width: 26px; }

.screen { display: flex; flex-direction: column; gap: 18px; animation: enter .45s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { transform: translateX(26px); opacity: .25; } to { transform: none; opacity: 1; } }

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 10vw, 3.3rem); line-height: 1.02; }
h1 .mark { display: inline-block; background: var(--sun); padding: 0 .22em .04em; border-radius: .25em; transform: rotate(-2deg); }
h2 { font-size: clamp(1.7rem, 7vw, 2.15rem); line-height: 1.08; }
.lead { color: var(--muted); font-size: 1.06rem; margin: 0; max-width: 60ch; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0; }
.hint { font-size: .92rem; color: var(--muted); margin: 0; }
.hint b { color: var(--ink); }
.center { text-align: center; }

/* Ilustración: móvil animado */
.art { position: relative; height: 330px; display: grid; place-items: center; overflow: hidden; }
.art .blob { position: absolute; width: 270px; height: 270px; border-radius: 50%; background: var(--blue-soft); }
.art .ring { position: absolute; width: 318px; height: 318px; max-width: 100%; border-radius: 50%; border: 2px dashed var(--line); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mock { position: relative; width: 156px; height: 300px; background: var(--ink); border-radius: 34px; padding: 8px; box-shadow: 0 22px 40px rgba(19,21,29,.18); animation: float 4.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.mock::after { content: ""; position: absolute; right: -3px; top: 70px; width: 3px; height: 34px; border-radius: 2px; background: var(--ink); }
.mock-screen { height: 100%; background: var(--white); border-radius: 27px; padding: 30px 9px 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; position: relative; font-size: 11px; line-height: 1.25; }
.island { position: absolute; top: 9px; left: 50%; width: 46px; height: 13px; margin-left: -23px; border-radius: 8px; background: var(--ink); }
.bub { padding: 7px 9px; border-radius: 14px; max-width: 90%; font-weight: 600; animation: nudge 6s ease-in-out infinite; transform-origin: left bottom; }
.bub.l { background: var(--soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.bub.r { background: var(--blue); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; transform-origin: right bottom; animation-delay: 1.4s; }
.chips-mini { display: flex; gap: 4px; align-self: flex-end; animation: nudge 6s ease-in-out infinite; animation-delay: 2.4s; transform-origin: right center; }
.chips-mini span { background: var(--blue-soft); border: 1.5px solid var(--blue); border-radius: 999px; padding: 2px 6px; font-size: 12px; }
.res-mini { margin-top: auto; background: var(--sun-soft); border: 1.5px solid var(--sun); border-radius: 14px; padding: 8px; display: flex; gap: 7px; align-items: center; font-weight: 700; animation: nudge 6s ease-in-out infinite; animation-delay: 3.6s; transform-origin: center bottom; }
.res-mini small { display: block; font-weight: 500; color: var(--muted); }
@keyframes nudge { 0%, 14%, 100% { transform: none; } 5% { transform: scale(1.1) rotate(-2deg); } 9% { transform: scale(.97); } }
.fl { position: absolute; width: 50px; height: 50px; border-radius: 16px; background: var(--white); box-shadow: 0 8px 18px rgba(19,21,29,.12); display: grid; place-items: center; font-size: 25px; animation: bob 3.4s ease-in-out infinite; }
.f1 { top: 22px; left: calc(50% - 150px); }
.f2 { top: 54px; left: calc(50% + 100px); animation-delay: .6s; }
.f3 { top: 196px; left: calc(50% - 160px); animation-delay: 1.2s; }
.f4 { top: 232px; left: calc(50% + 106px); animation-delay: 1.8s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
.art.search .mock { animation: wiggle .5s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.slot { font-family: var(--display); font-weight: 700; font-size: 17px; text-align: center; margin: auto 0; line-height: 1.15; }
.lupa { font-size: 30px; text-align: center; margin-top: 30px; animation: bob 1.2s ease-in-out infinite; }

/* Botones */
.btn { font: 600 1.15rem/1 var(--display); border: 0; border-radius: 999px; padding: 17px 24px; cursor: pointer; background: var(--blue); color: var(--white); box-shadow: 0 5px 0 var(--blue-deep); transition: transform .1s, box-shadow .1s; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--blue-deep); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blue-deep); }
.btn:disabled { background: var(--line); color: var(--muted); box-shadow: 0 5px 0 #CBD0DC; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--white); color: var(--ink); box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line); }
.btn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-deep); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .btn { flex: 1 1 150px; }

/* Prioridades */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.pick { position: relative; text-align: left; background: var(--white); color: var(--ink); border: 2px solid var(--line); border-radius: 20px; padding: 14px 12px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; font: inherit; box-shadow: 0 4px 0 var(--line); transition: border-color .15s, box-shadow .15s, background .15s; min-width: 0; }
.pick:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pick:hover { border-color: #C9CEDC; }
.pick .ico { align-self: flex-start; font-size: 1.8rem; line-height: 1; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pick:hover .ico { transform: rotate(-10deg); }
.pick .name { font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.pick .joke { font-size: .86rem; color: var(--muted); line-height: 1.3; }
.pick .rank { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: var(--white); font: 700 .85rem/26px var(--display); text-align: center; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.pick.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 4px 0 var(--blue); animation: pop .3s; }
.pick.on .rank { transform: scale(1); }
@keyframes pop { 50% { transform: scale(1.04) rotate(-1deg); } }

/* Presupuesto y sistema */
.list { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); color: var(--ink); border: 2px solid var(--line); border-radius: 20px; padding: 15px 16px; cursor: pointer; font: inherit; text-align: left; box-shadow: 0 4px 0 var(--line); transition: border-color .15s, transform .15s; }
.opt:hover { border-color: #C9CEDC; transform: translateX(3px); }
.opt.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 4px 0 var(--blue); }
.opt .big { font-family: var(--display); font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.opt .sub { color: var(--muted); font-size: .88rem; }
.opt .ico { font-size: 1.7rem; }
.opt .arrow { color: var(--blue); font-family: var(--display); font-size: 1.3rem; }

/* Resultado */
.winner { background: var(--white); border: 2px solid var(--sun); border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 0 var(--sun); animation: land .6s cubic-bezier(.2,1.4,.4,1); }
.winner { scroll-margin-top: 16px; }
.winner.plata { border-color: var(--silver-deep); box-shadow: 0 6px 0 var(--silver-deep); animation-delay: .15s; animation-fill-mode: backwards; }
.winner.bronce { border-color: var(--bronze-deep); box-shadow: 0 6px 0 var(--bronze-deep); animation-delay: .3s; animation-fill-mode: backwards; }
@keyframes land { from { transform: translateY(30px) rotate(2deg) scale(.95); opacity: 0; } }
.w-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.w-head > div { min-width: 0; }
.badge { display: inline-block; background: var(--sun); color: var(--ink); font: 700 .78rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; transform: rotate(-2deg); }
.plata .badge { background: var(--silver); }
.bronce .badge { background: var(--bronze); }
.w-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.05; margin: 8px 0 4px; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.price .left { color: var(--good); font-size: .86rem; font-weight: 600; display: block; margin-top: 2px; }
.meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.match { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.match small { font: 500 .85rem var(--body); color: var(--muted); display: block; }
.stars { color: var(--sun-deep); font-size: 1.2rem; letter-spacing: 2px; text-align: right; }
.stars span { color: var(--line); }
.stars small { display: block; color: var(--muted); font-size: .8rem; letter-spacing: 0; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 8.6em minmax(0,1fr) 2.2em; gap: 10px; align-items: center; font-size: .9rem; }
.bar .track { height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 5px; background: var(--blue); width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.bar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.why { margin: 0; padding-left: 1.1em; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.why b { color: var(--ink); font-weight: 600; }
.empty { background: var(--soft); border-radius: 20px; padding: 18px; color: var(--muted); }

/* Dibujo de móvil en los resultados */
.phone { width: 70px; height: 128px; border-radius: 17px; border: 3px solid var(--ink); position: relative; flex: none; background: linear-gradient(160deg, var(--c1), var(--c2)); animation: float 4.5s ease-in-out infinite; }
.phone::before { content: ""; position: absolute; top: 8%; left: 11%; width: 40%; height: 24%; border-radius: 10px; background: rgba(0,0,0,.25); }
.phone::after { content: ""; position: absolute; top: 11%; left: 17%; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 0 16px 0 rgba(255,255,255,.6); }
.phone.sm { width: 22px; height: 38px; border-radius: 6px; border-width: 2px; animation: none; }
.phone.sm::before { border-radius: 3px; }
.phone.sm::after { width: 4px; height: 4px; top: 12%; left: 18%; box-shadow: 0 6px 0 rgba(255,255,255,.6); }

/* Horquilla de precio */
.range-box { background: var(--soft); border-radius: 22px; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.range-val { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 6.5vw, 1.9rem); font-variant-numeric: tabular-nums; }
.range-sub { color: var(--muted); font-size: .9rem; }
.dual { position: relative; height: 48px; margin-top: 8px; }
.dual-track { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--line); }
.dual-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--blue); left: calc(17px + (100% - 34px) * var(--a, 0)); width: calc((100% - 34px) * (var(--b, 1) - var(--a, 0))); }
.dual input[type=range] { position: absolute; inset: 0; width: 100%; height: 48px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2; }
.dual input[type=range]::-webkit-slider-runnable-track { background: none; height: 48px; }
.dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 34px; height: 34px; margin-top: 7px; border-radius: 50%; background: var(--white); border: 3px solid var(--blue); box-shadow: 0 3px 0 var(--blue-deep); cursor: grab; }
.dual input[type=range]::-moz-range-track { background: none; }
.dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 3px solid var(--blue); box-shadow: 0 3px 0 var(--blue-deep); cursor: grab; }
.dual input[type=range]:focus-visible { outline: none; }
.dual input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--pink); outline-offset: 2px; }
.dual-scale { position: relative; height: 1.3em; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dual-scale span { position: absolute; left: calc(17px + (100% - 34px) * var(--x)); transform: translateX(-50%); }
.dual-scale span:first-child { transform: translateX(-17px); }
.dual-scale .fin { left: auto; right: 0; transform: none; }
.hq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hq-chip { font: 600 .92rem/1.2 var(--body); color: var(--ink); background: var(--white); border: 2px solid var(--line); border-radius: 14px; padding: 11px 6px; cursor: pointer; box-shadow: 0 3px 0 var(--line); font-variant-numeric: tabular-nums; }
.hq-chip:hover { border-color: #C9CEDC; }
.hq-chip.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 3px 0 var(--blue); }
@media (max-width: 370px) { .hq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

footer.note { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 370px) { .grid { grid-template-columns: minmax(0,1fr); } .pick:last-child:nth-child(odd) { grid-column: auto; } .bar { grid-template-columns: 7.4em minmax(0,1fr) 2em; font-size: .84rem; } .fl { display: none; } }

/* Fuentes servidas desde la propia web (sin llamadas a Google) */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fuentes/fredoka.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fuentes/figtree.woff2) format("woff2"); }

a { color: var(--blue); }
.logo { text-decoration: none; }

/* Dónde comprarlo */
.shops { display: flex; flex-direction: column; gap: 10px; border-top: 2px dashed var(--line); padding-top: 14px; }
.shops-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0; }
.shop-list { display: flex; flex-wrap: wrap; gap: 8px; }
.shop { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; box-shadow: 0 3px 0 var(--line); transition: border-color .15s, transform .1s; }
.shop:hover { border-color: var(--blue); }
.shop:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.shop b { color: var(--blue); font-family: var(--display); flex: none; }
.shops-note { font-size: .72rem; line-height: 1.35; color: var(--muted); margin: 0; }
.shops-note a { color: inherit; white-space: nowrap; }
.shop small { color: var(--muted); font-weight: 500; }

/* Aviso de iPhone al mejor precio */
.deal { display: flex; flex-direction: column; gap: 10px; background: var(--sun-soft); border: 2px solid var(--sun); border-radius: 22px; padding: 16px; }
.deal > p { margin: 0; }
.deal-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.price .desde { color: var(--muted); font-weight: 600; }
.price .cifra { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 7vw, 1.9rem); line-height: 1.1; color: var(--ink); }
.price small, .price .left { flex-basis: 100%; }
.price small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.share { align-self: center; }

/* Texto de la portada para Google y para quien quiera leer */
.info { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }
.info[hidden] { display: none; }
.info h2 { font-size: clamp(1.4rem, 6vw, 1.7rem); }
.info h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 8px 0 0; }
.info p { margin: 0; color: var(--muted); }
.info details { background: var(--soft); border-radius: 16px; padding: 12px 14px; }
.info summary { cursor: pointer; font-weight: 600; }
.info details p { margin-top: 8px; }

/* Pie */
footer.site { font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
footer.site p { margin: 0; }
footer.site .pie { font-size: .72rem; line-height: 1.45; opacity: .85; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer.site a { color: var(--muted); }

/* Páginas de texto (aviso legal, privacidad, cómo elegimos) */
.doc { display: flex; flex-direction: column; gap: 12px; }
.doc h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
.doc h2 { font-size: clamp(1.25rem, 5vw, 1.45rem); margin-top: 10px; }
.doc p, .doc li { color: var(--ink); }
.doc ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.doc .lead { color: var(--muted); }
.doc .box { background: var(--soft); border-radius: 16px; padding: 14px 16px; }
.doc dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.doc dt { font-weight: 600; }
.doc dd { margin: 0; overflow-wrap: anywhere; }

/* Página intermedia que abre la tienda */
.ir-box { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; }
.ir-box p { font-size: 1.1rem; margin: 0; max-width: 30ch; }
.ir-box .lupa { margin: 0; }

/* Guías de compra */
.migas { font-size: .82rem; color: var(--muted); }
.migas a { color: var(--muted); }
.g-fecha { font-size: .85rem; color: var(--muted); margin: 0; }
.g-fecha a { color: inherit; }
.quick { background: var(--blue-soft); border-radius: 16px; padding: 12px 14px; margin: 0; }
.quick a { color: var(--ink); }
.g-intro { display: flex; flex-direction: column; gap: 10px; }
.g-intro p { margin: 0; }
.g-list { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.g-card { background: var(--white); border: 2px solid var(--line); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 5px 0 var(--line); scroll-margin-top: 16px; min-width: 0; }
.g-card.first { border-color: var(--sun); box-shadow: 0 5px 0 var(--sun); }
.g-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.g-card .phone { animation: none; }
.g-card .w-name { font-size: clamp(1.35rem, 6vw, 1.7rem); }
.g-pos { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: var(--white); font: 700 1.05rem/1 var(--display); }
.first .g-pos { background: var(--sun); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.doc .chips { padding: 0; flex-direction: row; }
.chips li { background: var(--soft); border-radius: 999px; padding: 4px 10px; font-size: .8rem; color: var(--ink); white-space: nowrap; }
.chips.tags li { background: var(--sun-soft); border: 1.5px solid var(--sun); font-weight: 600; }
.tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: top; }
.cmp thead th { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cmp th:first-child, .cmp td:first-child { text-align: left; white-space: normal; }
.cmp tbody th { font-weight: 600; min-width: 9em; }
.cmp.segun td:nth-child(2) { text-align: left; white-space: normal; min-width: 10em; }
.cmp.segun td small { display: block; color: var(--muted); font-size: .78rem; }
.cmp a { color: var(--blue); }
.cta-test .btn { align-self: flex-start; }
.g-links { list-style: none; padding: 0; }
.doc .g-links { padding: 0; }
.g-index { list-style: none; }
.doc .g-index { padding: 0; gap: 10px; }
.g-index li { background: var(--soft); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.g-index a { font-weight: 700; font-family: var(--display); font-size: 1.08rem; text-decoration: none; }
.g-index small { color: var(--muted); }
.info p b { color: var(--ink); }
@media (max-width: 480px) {
  .cmp { font-size: .82rem; }
  .cmp th, .cmp td { padding: 8px 4px; }
  .cmp tbody th { min-width: 7.5em; }
  .cmp thead .lbl { display: none; }
}
.cmp.segun td { text-align: left; white-space: normal; }
.cmp.segun tbody th { min-width: 6.5em; width: 30%; }
.cmp .seg-pie { display: block; margin-top: 2px; font-weight: 600; }
.badge.alt { background: var(--blue-soft); color: var(--blue-deep); }
.w-name a { color: inherit; text-decoration: none; }
.w-name a:hover { color: var(--blue); }
.cmp.ficha th { width: 38%; vertical-align: top; }
.cmp.ficha td { text-align: left; white-space: normal; }
.cmp small { color: var(--muted); }
.alts li small { display: block; color: var(--muted); font-size: .82rem; }
.ficha-link { font-weight: 600; text-decoration: none; }
main.doc .fuentes { font-size: .8rem; color: var(--muted); margin-top: 8px; }
main.doc .fuentes a { color: var(--muted); }
main.doc .titular { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
main.doc .titular h2 { font-size: .85rem; margin: 0 0 4px; }
main.doc .titular p { margin: 0 0 4px; color: var(--muted); }
main.doc .titular a { color: var(--muted); }
.deal.especial { background: #FFF1F4; border-color: var(--pink); margin: 14px 0; }
.deal.especial .deal-title { font-size: 1.05rem; }
.deal.especial p { margin: 0; }

/* 11.11 de AliExpress */
.ali-letra { font-size: .8rem; line-height: 1.4; color: var(--muted); }
.ali-tabla th, .ali-tabla td { white-space: normal; }
.ali-tabla th small, .ali-tabla td small { display: block; font-size: .76rem; font-weight: 400; }
.doc h3 { font-size: 1.05rem; margin: 6px 0 0; }

/* Lista de precios por tienda */
.precios { display: flex; flex-direction: column; gap: 8px; border-top: 2px dashed var(--line); padding-top: 14px; }
.tienda { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; min-height: 54px; border-radius: 16px; border: 2px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 3px 0 var(--line); transition: border-color .15s, transform .1s; }
.tienda[hidden] { display: none; }
.tienda:hover { border-color: var(--blue); }
.tienda:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.t-nom { display: flex; flex-direction: column; gap: 1px; font-weight: 700; min-width: 0; }
.t-nom small { font-weight: 500; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.t-tit { display: inline-flex; align-items: center; gap: 7px; }
.t-logo { width: 20px; height: 20px; padding: 2px; flex: none; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.shop .t-logo { margin-right: 6px; vertical-align: -5px; }
.t-nom small b { color: var(--ink); }
.t-ver { color: var(--blue); font: 600 .95rem/1 var(--display); white-space: nowrap; flex: none; }
.t-precio { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.t-precio b { font: 700 1.4rem/1.05 var(--display); font-variant-numeric: tabular-nums; }
.t-precio small { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.tienda.t-1111 { background: var(--sun-soft); border-color: var(--sun); box-shadow: 0 3px 0 var(--sun-deep); }
.tienda.t-1111:hover { border-color: var(--sun-deep); }
.t-1111 em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .03em; background: var(--sun); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.precios .ali-letra { margin: 0; font-size: .76rem; color: var(--muted); }
.precios .ali-letra a { color: inherit; }
main.doc .precios { margin-top: 4px; }

/* Portada: vídeo de cómo funciona y guías en botones */
/* Héroe: vídeo del test dentro del móvil, con los iconos flotando, y los 3 pasos al lado */
.hero-demo { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.art-video { height: 300px; overflow: visible; }
.art-video .blob { width: 170px; height: 170px; }
.art-video .ring { width: 210px; height: 210px; }
.art-video .fl { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; z-index: 2; }
.art-video .f1 { top: 18px; left: -6px; } .art-video .f2 { top: 70px; left: auto; right: -10px; }
.art-video .f3 { top: 200px; left: -12px; } .art-video .f4 { top: 246px; left: auto; right: -4px; }
.demo-movil { position: relative; width: 128px; aspect-ratio: 480 / 1038; border: 6px solid var(--ink); border-radius: 26px; overflow: hidden; background: var(--soft); box-shadow: 0 18px 36px rgba(19,21,29,.18); flex: none; }
.demo-movil video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; color: var(--muted); font-size: .86rem; line-height: 1.3; }
.pasos li::before { content: counter(paso); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--white); font: 700 .95rem/28px var(--display); text-align: center; }
.pasos b { color: var(--ink); font-family: var(--display); font-size: .98rem; font-weight: 700; }
@media (min-width: 520px) {
  .hero-demo { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; }
  .art-video { height: 380px; }
  .art-video .blob { width: 220px; height: 220px; } .art-video .ring { width: 268px; height: 268px; }
  .art-video .fl { width: 46px; height: 46px; font-size: 23px; border-radius: 15px; }
  .art-video .f1 { left: 4px; } .art-video .f2 { right: -4px; top: 90px; } .art-video .f3 { top: 250px; left: -4px; } .art-video .f4 { top: 310px; right: 6px; }
  .demo-movil { width: 164px; border-width: 7px; border-radius: 30px; }
  .pasos { gap: 18px; } .pasos li { font-size: .92rem; } .pasos b { font-size: 1.05rem; }
}

/* Portada: buscar por marca */
.marcas-p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.marca-c { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.marca-c:hover { border-color: var(--blue); transform: translateY(-2px); }
.marca-c .mini { width: 30px; height: 48px; object-fit: contain; flex: none; }
.marca-c .phone.mini { width: 26px; height: 46px; border-radius: 6px; }
.marca-c b { display: block; font-family: var(--display); font-size: 1.02rem; }
.marca-c small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.2; }
@media (min-width: 520px) { .marcas-p { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mas-p { text-align: right; font-weight: 600; } .mas-p a { color: var(--blue); }

/* Portada: comparativas más buscadas */
.duelos-p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duelo-c { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 18px; text-align: center; color: var(--ink); text-decoration: none;
  background: linear-gradient(115deg, var(--blue-soft) 0 50%, var(--sun-soft) 50% 100%); border: 1.5px solid transparent; transition: border-color .15s, transform .15s; }
.duelo-c:hover { border-color: var(--blue); transform: translateY(-2px); }
.duelo-f { display: flex; align-items: center; gap: 4px; }
.duelo-f .mini { width: 40px; height: 64px; object-fit: contain; }
.duelo-f .phone.mini { width: 34px; height: 60px; border-radius: 8px; }
.duelo-f i { font: 700 .75rem/1 var(--display); font-style: normal; background: var(--ink); color: var(--white); border-radius: 999px; padding: 6px 7px; transform: rotate(-8deg); }
.duelo-n { display: flex; flex-direction: column; font-size: .84rem; line-height: 1.2; }
.duelo-n b { font-family: var(--display); font-weight: 700; }
.duelo-n em { font-style: normal; color: var(--muted); font-size: .74rem; }
.duelo-c small { color: var(--muted); font-size: .72rem; }
@media (min-width: 520px) { .duelos-p { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-grupo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.info .g-grupo { margin-top: 4px; color: var(--muted); }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chips a { background: var(--soft); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.g-chips a:hover { border-color: var(--blue); color: var(--blue); }
/* Foto del móvil (de los catálogos de las tiendas) */
.foto { width: 80px; height: 128px; object-fit: contain; flex: none; }
.foto.sm { width: 24px; height: 38px; }
/* Publicaciones con sus móviles (estilos de la antigua página /instagram/) */
.ig-post { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 2px dashed var(--line); }
.ig-post[hidden] { display: none; }
.ig-post h2 { margin: 0; }
.doc .ig-fecha { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ig-post .btn { align-self: flex-start; }

/* Podio del resultado: plata a la izquierda, oro en medio y más alto, bronce a la derecha, sobre una línea de suelo */
.podio { display: flex; align-items: flex-end; gap: 8px; border-bottom: 3px solid var(--ink); }
.peldano { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.peldano.plata { order: -1; }
.peldano .phone, .peldano .foto { margin-bottom: 4px; }
.p-nom { font-family: var(--display); font-weight: 700; font-size: .98rem; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.oro .p-nom { font-size: 1.1rem; }
.p-precio { font-size: .86rem; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.escalon { align-self: stretch; margin-top: 6px; display: grid; place-items: center; border: 2px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; transform-origin: bottom; animation: subir .5s cubic-bezier(.2,1.3,.4,1) backwards; }
.oro .escalon { height: 96px; background: var(--sun); animation-delay: .35s; }
.plata .escalon { height: 68px; background: var(--silver); animation-delay: .2s; }
.bronce .escalon { height: 46px; background: var(--bronze); animation-delay: .05s; }
@keyframes subir { from { transform: scaleY(0); } }
@media (hover: hover) { .peldano:hover .p-nom { color: var(--blue); } }
.peldano:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 16px; }
.phone.md { width: 52px; height: 94px; border-radius: 13px; }
.phone.md::after { width: 8px; height: 8px; box-shadow: 0 12px 0 rgba(255,255,255,.6); }
.foto.md { width: 60px; height: 96px; }
.deal.reacond { background: var(--green-soft); border-color: var(--good); }

/* En la pregunta 1 el botón de seguir se queda abajo, a la vista, mientras bajas por las 9 opciones */
.btn.fijo { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 6px 0 var(--blue-deep), 0 10px 24px rgba(19,21,29,.18); }
.btn.fijo:disabled { box-shadow: none; }

/* Resultado: notas estimadas y "¿Cómo hemos elegido tu podio?" */
.nota-est { margin: -4px 0 0; font-size: .8rem; color: var(--muted); }
.como { background: var(--soft); border-radius: 18px; padding: 12px 16px; font-size: .92rem; }
.como summary { cursor: pointer; font-weight: 700; color: var(--blue-deep); }
.como ul { margin: 10px 0 8px; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
.como a { font-weight: 600; color: var(--blue); }

/* Portada: acceso a la lista de móviles por precio, debajo del botón del test */
.por-precio { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--line); text-align: center; }
.por-precio p { margin: 0 0 10px; color: var(--muted); }
.por-precio .g-chips { justify-content: center; }

/* Lista de móviles por precio (/moviles/) */
.l-filtros { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 14px; }
.l-filtros[hidden] { display: none; }
.l-chip { background: var(--soft); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 13px; font: 600 .9rem/1.2 inherit; color: var(--ink); cursor: pointer; }
.l-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.l-sel { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.l-sel label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.l-sel select { font: inherit; font-weight: 500; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); max-width: 60vw; }
.l-test { margin: 0 0 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.l-test p { margin: 0; flex: 1 1 200px; }
.l-test .btn { padding: 12px 18px; font-size: 1rem; }
.l-lista { display: grid; gap: 12px; }
.l-movil { border: 2px solid var(--line); border-radius: 20px; padding: 12px; background: var(--white); display: grid; gap: 10px; }
.l-movil[hidden] { display: none; }
.l-cab { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.l-cab .l-foto { width: 52px; height: 84px; flex: 0 0 auto; object-fit: contain; }
.l-cab .phone.l-foto { transform: none; }
.l-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.l-txt > b { font-family: var(--display); font-size: 1.08rem; line-height: 1.2; }
.l-cab:hover .l-txt > b { color: var(--blue); }
.l-precio { color: var(--muted); font-size: .92rem; }
.l-precio b { color: var(--ink); font-size: 1.05rem; }
.doc .l-notas { list-style: none; padding: 0; flex-direction: row; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .88rem; color: var(--muted); }
.l-notas .l-nota { font-weight: 700; color: var(--ink); }
.l-aviso { margin: 0; font-size: .88rem; color: var(--muted); }
.l-tiendas { display: grid; gap: 6px; }
.l-tiendas .tienda { min-height: 44px; padding: 8px 12px; }
@media (min-width: 760px) {
  .l-movil { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  .l-aviso { grid-column: 1; }
  .l-tiendas { grid-column: 2; grid-row: 1 / span 2; }
}

/* Pregunta 1: Plegable y Rugerizado van en la cuadrícula; llevan ✓ en vez de número */
.pick.tipo.on .rank { background: var(--ink); }

/* Calculadora de horas de trabajo (/horas-de-trabajo-movil/) */
.por-precio .horas-link { margin: 14px 0 0; }
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; background: var(--soft); border-radius: 22px; padding: 16px; }
.c-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; min-width: 0; }
.c-ancho { grid-column: 1 / -1; }
.calc input, .calc select { font: inherit; font-weight: 500; font-size: 1.05rem; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); width: 100%; min-width: 0; box-sizing: border-box; }
.calc input:focus-visible, .calc select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.c-eur { display: flex; align-items: center; gap: 8px; }
.c-eur b { font-family: var(--display); font-size: 1.2rem; }
.c-res { background: var(--sun-soft); border: 2px solid var(--sun); border-radius: 22px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.c-res[hidden] { display: none; }
.c-res p { margin: 0; }
.c-horas { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.c-horas b { display: block; font-weight: 700; font-size: clamp(3.6rem, 20vw, 5.4rem); line-height: 1; color: var(--blue); }
#c-dias { color: var(--muted); font-weight: 600; }
.c-alt { background: var(--white); border-radius: 14px; padding: 10px 12px; }
.c-res .row { justify-content: center; margin-top: 4px; }
.c-nota { font-size: .8rem; color: var(--muted) !important; }

/* Comparativas «A contra B» (/comparar/) */
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.d-movil { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--ink); background: var(--soft); border-radius: 18px; padding: 14px 8px; min-width: 0; }
.d-movil b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; overflow-wrap: anywhere; }
.d-movil span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.d-movil .foto, .d-movil .phone { margin: 0 auto; }
.d-vs { font-family: var(--display); font-weight: 700; font-size: 1.1rem; background: var(--sun); border-radius: 999px; padding: 8px 10px; }
.duelo-t { table-layout: fixed; }
.duelo-t th, .duelo-t td { white-space: normal; text-align: center; vertical-align: top; overflow-wrap: anywhere; }
.duelo-t tbody th { min-width: 0; width: 28%; text-align: left; overflow-wrap: normal; hyphens: auto; }
.duelo-t thead th:first-child { width: 28%; }
.duelo-t td small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; margin-top: 2px; }
.duelo-t td.gana b { color: var(--blue); }
.duelo-t td.gana { background: var(--blue-soft); }
.duelo-t thead th { font-family: var(--display); font-size: .95rem; text-transform: none; letter-spacing: 0; }

/* Historial de precios en cada tienda: el más bajo del mes o más caro de lo normal */
.t-nom .t-hist { display: block; font-weight: 600; color: var(--muted); }
.t-nom .t-hist.bajo { color: #12805C; }
.t-nom .t-hist.alto { color: #B3261E; }
/* ---- Menú de arriba (31 oct) ---- */
.nav-top { position: sticky; top: 0; z-index: 50; background: var(--blue); color: #fff; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-bottom: 18px; box-shadow: 0 2px 0 var(--blue-deep); }
.nav-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, env(safe-area-inset-left, 0px)); }
.nav-top .logo svg { width: 24px; height: 32px; }
.nav-top .wm { color: #fff; font-size: 1.1rem; }
.nav-top .wm b { color: var(--sun); }
.nav-top .wm i { color: rgba(255,255,255,.75); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links > a, .nav-dd > summary { color: #fff; text-decoration: none; font: 600 1rem/1 var(--display); padding: 10px 12px; border-radius: 12px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.nav-dd > summary::-webkit-details-marker, .nav-burger > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: ""; width: 7px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.nav-links > a:hover, .nav-dd > summary:hover, .nav-dd[open] > summary { background: rgba(255,255,255,.16); }
.nav-links [aria-current="page"] { background: rgba(255,255,255,.22); }
.nav-dd, .nav-burger { position: relative; }
.nav-sub { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 300px; background: #fff; color: var(--ink); border-radius: 18px; padding: 8px; box-shadow: 0 14px 40px rgba(19,21,29,.22); display: flex; flex-direction: column; }
.nav-sub a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.nav-sub a b { font: 600 .98rem/1.25 var(--display); }
.nav-sub a small { color: var(--muted); font-size: .8rem; }
.nav-sub a:hover { background: var(--blue-soft); }
.nav-test { margin-left: auto; background: var(--sun); color: var(--ink); text-decoration: none; font: 600 .98rem/1 var(--display); padding: 11px 16px; border-radius: 999px; box-shadow: 0 3px 0 var(--sun-deep); white-space: nowrap; }
.nav-test:hover { transform: translateY(-1px); }
.nav-burger { display: none; }
.nav-burger > summary { list-style: none; cursor: pointer; width: 42px; height: 40px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-burger > summary span { width: 20px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.nav-burger[open] > summary { background: rgba(255,255,255,.16); }
.nav-burger[open] > summary span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger[open] > summary span:nth-child(2) { opacity: 0; }
.nav-burger[open] > summary span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-sub-m { left: auto; right: 0; width: min(330px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow-y: auto; }
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-in { gap: 8px; }
  .nav-test { padding: 9px 13px; font-size: .9rem; }
}
@media (max-width: 380px) { .nav-top .wm i { display: none; } .nav-test { padding: 8px 10px; } }

/* ---- Portada a tres columnas: móviles top, test y ofertas ---- */
.app-portada > .progress { display: none; }
.centro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.centro .progress { justify-content: center; }
body:not(.en-test) .centro .progress { display: none; }
.lado { min-width: 0; background: var(--soft); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lado-ofe { background: var(--sun-soft); }
.lado-t { font-size: 1.25rem; line-height: 1.15; }
.lado-sub { margin: -6px 0 0; color: var(--muted); font-size: .86rem; }
.lado-lista { display: flex; flex-direction: column; gap: 8px; }
.lado-mas { font: 600 .95rem/1.2 var(--display); color: var(--blue); text-decoration: none; padding: 4px 2px; }
.lado-mas:hover { text-decoration: underline; }
.lado-nota { margin: 0; font-size: .72rem; color: var(--muted); }
.mini-card { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 8px 10px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
a.mini-card:hover, .mini-card.ofe:hover { border-color: var(--blue); transform: translateY(-1px); }
.foto.xs { width: 40px; height: 64px; }
.phone.xs { width: 34px; height: 58px; border-radius: 9px; border-width: 2px; animation: none; }
.phone.xs::after { width: 5px; height: 5px; box-shadow: 0 8px 0 rgba(255,255,255,.6); }
.mc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mc-tramo { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.mc-nom { font: 600 .95rem/1.2 var(--display); }
.mc-nom a { color: var(--ink); text-decoration: none; }
.mc-nom a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.mc-tienda { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.mc-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: .86rem; color: var(--muted); }
.mc-pie b { color: var(--ink); }
.mc-pie s { font-size: .78rem; }
.mc-precio { color: var(--good) !important; font-size: 1rem; }
.mc-dto { background: var(--pink); color: #fff; font-weight: 700; font-size: .72rem; padding: 2px 6px; border-radius: 999px; }
.mc-nota { background: var(--blue); color: #fff; font: 700 .8rem/1 var(--display); padding: 4px 7px; border-radius: 8px; }
.mc-ir { position: relative; z-index: 1; flex: none; align-self: center; background: var(--blue); color: #fff; text-decoration: none; font: 600 .85rem/1 var(--display); padding: 9px 12px; border-radius: 999px; }
.mc-ir:hover { background: var(--blue-deep); }
.calc-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 2px dashed var(--blue); border-radius: 16px; padding: 12px; text-decoration: none; color: var(--ink); margin-top: 4px; }
.calc-card b { font: 600 1rem/1.25 var(--display); }
.calc-card span { font-size: .84rem; color: var(--muted); }
.calc-card:hover { background: var(--blue-soft); }
.ofe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* Móvil: el test primero; debajo, móviles top y ofertas en carrusel. Durante el test no salen, para no distraer */
@media (max-width: 899px) {
  .app-portada .centro { order: 1; }
  .app-portada .lado-top { order: 2; }
  .app-portada .lado-ofe { order: 3; }
  .app-portada .info { order: 4; }
  .app-portada footer.site { order: 5; }
  body.en-test .lado { display: none; }
  .lado { margin-inline: -4px; }
  .lado-lista { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .lado-lista::-webkit-scrollbar { display: none; }
  .lado-lista .mini-card { flex: 0 0 min(250px, 74vw); scroll-snap-align: start; }
}
/* Ordenador mediano: test a la izquierda, móviles top y ofertas a la derecha */
@media (min-width: 900px) {
  .app-portada { max-width: 920px; display: grid; grid-template-columns: minmax(0, 540px) 300px; justify-content: space-between; column-gap: 40px; row-gap: 22px;
    grid-template-areas: "centro top" "centro ofe" "info ofe" "pie pie"; align-items: start; }
  .app-portada .centro { grid-area: centro; }
  .app-portada .lado-top { grid-area: top; }
  .app-portada .lado-ofe { grid-area: ofe; }
  .app-portada .info { grid-area: info; }
  .app-portada footer.site { grid-area: pie; }
}
/* Ordenador grande: móviles top | test | ofertas */
@media (min-width: 1200px) {
  .app-portada { max-width: 1240px; grid-template-columns: 290px minmax(0, 540px) 290px; grid-template-areas: "top centro ofe" "top info ofe" "pie pie pie"; }
  .app-portada .lado { position: sticky; top: 76px; }
}
body { margin: 0; }
.mini-card.ofe .mc-nom { font-size: .9rem; }

/* Frase gancho de Ofertas (31 oct, idea de Ángel) */
.ofe-gancho { margin: 4px 0 8px; padding: 6px 10px; border-radius: 10px; background: #fff4c2; color: #6b4a00; font-weight: 700; font-size: .92rem; line-height: 1.35; transform: rotate(-1deg); display: inline-block; }
.ofe-gancho small { display: block; font-weight: 500; font-size: .8rem; opacity: .85; }

/* 11.11: qué vale hoy (tira de la portada y caja de /aliexpress-11-11/), 1 nov */
.tira-1111 { display: block; max-width: 1180px; margin: -8px auto 14px; padding: 9px 14px; border-radius: 12px; background: #fff4c2; color: #6b4a00; text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.35; text-align: center; }
.tira-1111 .tira-ir { white-space: nowrap; text-decoration: underline; }
.tira-1111:hover .tira-ir { text-decoration-thickness: 2px; }
body.en-test .tira-1111 { display: none; }
.doc .hoy-caja { background: #fff4c2; color: #6b4a00; font-size: 1.02rem; }

/* Banderas de envío (los emojis de bandera no salen en Windows: allí se ven «ES» y «CN») */
.bandera { display: inline-block; width: 1.25em; height: .85em; margin-right: .3em; vertical-align: -.08em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.bandera.es { background: linear-gradient(#c60b1e 25%, #ffc400 25% 75%, #c60b1e 75%); }
.bandera.cn { background: radial-gradient(circle at 24% 34%, #ffde00 0 16%, transparent 17%), #de2910; }
.bandera.fr { background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); }
.bandera.de { background: linear-gradient(#000 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.bandera.it { background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); }
.bandera.pl { background: linear-gradient(#fff 50%, #dc143c 50%); }
.bandera.pt { background: linear-gradient(90deg, #006600 40%, #ff0000 40%); }
.bandera.cz { background: linear-gradient(110deg, #11457e 30%, transparent 30%), linear-gradient(#fff 50%, #d7141a 50%); }
.bandera.be { background: linear-gradient(90deg, #000 33.3%, #fdda24 33.3% 66.6%, #ef3340 66.6%); }
.bandera.nl { background: linear-gradient(#ae1c28 33.3%, #fff 33.3% 66.6%, #21468b 66.6%); }
.bandera.eu { background: radial-gradient(circle, #039 0 25%, transparent 26% 40%, #039 41%), repeating-conic-gradient(#fc0 0 10deg, #039 10deg 30deg); } /* UE: 12 estrellas en círculo */
.price[hidden] { display: none; }

/* Accesorios en Amazon bajo «Dónde comprarlo» */
.acc { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line, #dfe3ee); }
.acc-tit { font-weight: 700; margin: 0 0 8px; }
.acc-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-lista a { padding: 8px 12px; border-radius: 999px; background: #f2f4fa; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.acc-lista a:hover { background: #e6eaf6; }
.acc-nota { color: var(--muted); font-size: .78rem; margin: 8px 0 0; }

/* Ofertas de Amazon sin precio (2 nov): bloque en /ofertas/ y en la guía de Black Friday, enlace en cada ficha y banner de Black Friday */
.az-hoy { margin: 28px 0; padding: 16px 18px; border-radius: 14px; background: #fff7e8; border: 1px solid #f3d9a4; }
.az-hoy h2 { margin-top: 0; }
.az-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.az-lista a, .az-bf { display: inline-block; padding: 9px 13px; border-radius: 999px; background: #fff; border: 1px solid #e8c77d; color: #4a3200; text-decoration: none; font-weight: 600; font-size: .95rem; }
.az-lista a:hover, .az-bf:hover { border-color: #c98f00; background: #fff1cc; }
.az-bf { display: block; margin: 10px 0; background: #111; color: #fff; border-color: #111; text-align: center; }
.az-bf:hover { background: #333; border-color: #333; }
.az-bf[hidden], .tira-bf[hidden] { display: none; }
.az-oferta { display: inline-block; margin: 8px 0 2px; font-size: .92rem; font-weight: 600; color: #8a5a00; }
.tira-bf { background: #111; color: #fff; }
.nota-ficha { margin: 2px 0 6px; font-size: .95rem; }
.nota-ficha b { font-family: Fredoka, system-ui, sans-serif; font-size: 1.3rem; color: var(--blue); }
.tira-bf { margin: 14px 0; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .95rem; }
.tira-bf a { color: #fff; text-decoration: none; }
.tira-bf a b { color: #FFD23F; }

/* Bandas de campaña (campanas.json): ocultas hasta su día, la de la portada centrada como la del 11.11 */
.tira-1111[hidden], .tira-guia[hidden] { display: none; }
.tira-1111.tira-bf, .tira-1111.tira-camp { margin: -8px auto 14px; }
.tira-1111.tira-camp { background: #e8f1ff; color: #123a7a; }
.camp-hoy ul { margin: 6px 0 0; padding-left: 1.2em; }
.camp-hoy li { margin: 4px 0; }

/* Aviso de alertas en las guías de Black Friday y Cyber Monday: solo cuando las alertas están activas (alertas.js pone .alertas-on) */
.aviso-alerta{display:none}
.alertas-on .aviso-alerta{display:block}
/* 11.11 (6 nov): tira grande del 10 al 12 en la portada; en su página, rejilla de rebajas de mayor a menor con filtros y el test */
.tira-1111.grande { font-size: 1.12rem; padding: 14px 16px; background: #ffd23f; color: #13151d; border: 2px solid #13151d; }
.r-test-btn { display: block; text-align: center; font-size: 1.1rem; margin: 6px 0 14px; }
.hoy-linea { font-size: .92rem; font-weight: 600; margin: 0 0 12px; }
.r-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.r-f, .r-marca { font: inherit; font-size: .88rem; font-weight: 600; border: 2px solid #13151d; border-radius: 999px; background: #fff; color: #13151d; padding: 6px 12px; cursor: pointer; }
.r-f.on { background: #13151d; color: #fff; }
.r-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin: 0 0 12px; }
.r1111 { position: relative; border: 2px solid #13151d; border-radius: 14px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.r1111[hidden] { display: none; }
.r1111 p { margin: 0; }
.r-dto { position: absolute; top: 10px; right: 10px; background: #e5484d; color: #fff; font-weight: 800; font-size: .95rem; border-radius: 999px; padding: 3px 9px; }
.r-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: inherit; text-decoration: none; }
.r-cab small { font-size: .8rem; opacity: .8; }
.r-foto { width: 72px; height: 115px; }
.r-precio { text-align: center; }
.r-precio s { opacity: .6; font-size: .9rem; }
.r-precio .r-p { font-size: 1.45rem; color: #12805c; }
.r-precio small { display: block; font-size: .76rem; opacity: .75; }
.r-cod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.r-cod.r-sin { font-size: .78rem; opacity: .75; }
.r-c { font-size: 1rem; font-weight: 700; background: #fff4c2; border: 1px dashed #6b4a00; border-radius: 8px; padding: 3px 8px; }
.copiar { font: inherit; font-size: .8rem; font-weight: 600; border: 2px solid #13151d; border-radius: 8px; background: #fff; padding: 3px 8px; cursor: pointer; }
.r-ver { text-align: center; margin-top: auto; padding-left: 8px; padding-right: 8px; }
.r-nota, .r-resumen { font-size: .8rem; opacity: .75; }
.app:has(.r-lista) { max-width: 1100px; }
.app:has(.r-lista) .doc > p, .app:has(.r-lista) .doc > .box, .app:has(.r-lista) .doc > ul, .app:has(.r-lista) .doc > details { max-width: 760px; }
.r-test-btn { max-width: 560px; }
/* Los tres precios de cada móvil (7 nov): habitual, hoy sin cupón y con cupón */
.price .p-det { display: block; margin-top: 4px; }
.price .p-det span { display: block; font-size: .8rem; line-height: 1.35; color: var(--muted); }
.price .p-det b { color: var(--ink); }
.price .p-det em { font-style: normal; font-weight: 700; color: #B8541A; }
.en-oferta { margin-top: 18px; }
.en-oferta li { margin: 6px 0; }
/* Aviso de cookies (solo si hay GA4 en medicion.json) */
#qmc-cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 640px; margin: 0 auto; background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(19,21,29,.25); font-size: .92rem; }
#qmc-cookies p { margin: 0 0 10px; }
#qmc-cookies div { display: flex; gap: 10px; }
#qmc-cookies button { flex: 1; min-height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
#qmc-cookies button[data-c="si"] { background: #2F5BFF; color: #fff; }

.velada { display: flex; flex-direction: column; gap: 14px; }
.ring-top { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; background: var(--ink); color: var(--white); border-radius: 22px; padding: 16px 14px 18px; box-shadow: 0 5px 0 #000; }
.ring-top::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -70%; height: 120%; background: radial-gradient(closest-side, rgba(255, 210, 63, .30), transparent); pointer-events: none; }
.ring-top > * { position: relative; }
.ring-top h2 { color: var(--white); margin: 0; }
.ring-ayuda { margin: 0; color: var(--silver); font-size: .9rem; }
.ring-err { margin: 0; color: #FFB3C1; font-size: .85rem; }
.ring-vacio { margin: 0; padding: 14px; border-radius: 16px; background: var(--soft); color: var(--muted); text-align: center; }
#ring-out { display: flex; flex-direction: column; gap: 14px; }
#ring-out:empty { display: none; }
.ring-cols { display: grid; gap: 8px; }
.ring-cols.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ring-cols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esq-azul { --esq: var(--blue); }
.esq-roja { --esq: #E5484D; }
.esq-oro { --esq: var(--sun-deep); }
.ring-m { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border: 2px solid var(--line); border-top: 6px solid var(--esq); border-radius: 18px; background: var(--white); text-align: center; }
.ring-esq { font: 700 .66rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--esq); }
.ring-x { position: absolute; top: 4px; right: 4px; padding: 4px 7px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: .85rem; cursor: pointer; }
.ring-x:hover { background: var(--soft); color: var(--ink); }
.ring-foto { width: 64px; height: 102px; object-fit: contain; }
.phone.ring-foto { width: 56px; height: 100px; border-radius: 14px; animation: none; }
.ring-n { font: 700 .95rem/1.15 var(--display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ring-n:hover { color: var(--blue); }
.ring-g b { font: 700 1.9rem/1 var(--display); color: var(--esq); }
.ring-g small { display: block; color: var(--muted); font-size: .7rem; }
.ring-p { font-size: .85rem; }
.ring-p b { font-family: var(--display); font-size: 1.1rem; }
.ring-p small, .ring-cup, .ring-av { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.3; color: var(--muted); }
.ring-cup { margin-top: 4px; padding: 3px 6px; border-radius: 8px; background: var(--sun-soft); color: var(--ink); }
.ring-av { color: #B4232F; }
.ring-tienda { margin-top: auto; font-weight: 700; font-size: .82rem; color: var(--blue); text-decoration: none; }
.ring-cols.n3 .ring-n { font-size: .8rem; }
.ring-cols.n3 .ring-g b { font-size: 1.45rem; }
.ring-cols.n3 .ring-foto { width: 46px; height: 76px; }
.ring-cols.n3 .phone.ring-foto { width: 40px; height: 72px; border-radius: 10px; }
.ring-prio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ring-prio span { width: 100%; font-weight: 700; font-size: .9rem; }
.ring-prio button { font: 600 .82rem var(--body); padding: 6px 11px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; }
.ring-prio button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.ring-ver { padding: 14px 16px; border: 2px solid var(--sun); border-radius: 18px; background: var(--sun-soft); }
.ring-ver p { margin: 0; }
.ring-ver p + p { margin-top: 6px; }
.ring-ver .v-tit { font: 700 1.2rem/1.2 var(--display); }
.ring-ver small { color: var(--muted); }
.ring-h { margin: 4px 0 0; font: 700 1.15rem var(--display); }
.asaltos { display: grid; gap: 10px; }
.asalto { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: 16px; }
.asalto.doble { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.asalto-t { margin: 0; font-weight: 700; }
.asalto-t span { display: block; margin-bottom: 2px; font: 700 .68rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.asalto-t em { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: var(--white); font-style: normal; font-size: .7rem; vertical-align: middle; }
.barra { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr) 2.2em; align-items: center; gap: 8px; font-size: .82rem; }
.barra-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.barra-b { height: 10px; overflow: hidden; border-radius: 999px; background: var(--soft); }
.barra-b i { display: block; height: 100%; border-radius: 999px; background: var(--esq); opacity: .4; }
.barra.gana .barra-b i { opacity: 1; }
.barra.gana .barra-n { color: var(--ink); font-weight: 700; }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }
.asalto-f { margin: 0; font-size: .86rem; color: var(--muted); }
.asalto-f b { color: var(--ink); }
.ring-para { margin: 0; padding-left: 1.1em; }
.ring-para li + li { margin-top: 4px; }
.ring-t thead th.esq-azul, .ring-t thead th.esq-roja, .ring-t thead th.esq-oro, .ring-t thead th.esq-verde { color: var(--esq); white-space: normal; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.ring-t td small { display: block; white-space: normal; color: var(--muted); font-size: .72rem; }
.ring-nota { margin: 0; font-size: .82rem; color: var(--muted); }
.ring-nota a, .ring-acc a { color: var(--blue); }
.ring-acc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ring-acc a { font-weight: 600; }
.duelos-p.cartel .duelo-c.estelar { grid-column: 1 / -1; border-color: var(--ink); background: var(--ink); color: var(--white); }
.duelo-c.estelar .duelo-n em, .duelo-c.estelar small { color: var(--silver); }
.duelo-c .peso { font: 700 .66rem/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.duelo-c.estelar .peso { color: var(--sun); font-size: .78rem; }
.al-ring { margin: 0; text-align: center; }
.ring-go { align-self: flex-start; }
.velada .ring-top .ring-ayuda { color: var(--silver); }
.velada .ring-top .ring-err { color: #FFB3C1; }
.ring-cup b { font: inherit; font-weight: 700; }
a.ring-cup { text-decoration: none; }
a.ring-cup:hover { background: var(--sun); }
.ring-cols.n3 .e-pal { display: none; }
.ring-esq { padding: 0 14px; }
@media (min-width: 640px) {
  .asaltos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablets (/tablets/, /tablet/…/ y sus guías): la foto es apaisada */
.foto.tab { width: 128px; height: 96px; }
.foto.tab.md { width: 96px; height: 72px; }
.tab-head { align-items: center; }
.pick.tipo { border-style: dashed; }
.pick.tipo.on { border-style: solid; }
.pick.net { width: 100%; margin: 0 0 14px; }
@media (max-width: 380px) { .foto.tab { width: 104px; height: 78px; } .foto.tab.md { width: 80px; height: 60px; } }
/* Tablets, fase 2: comparativas, tinta electrónica dentro de otras páginas y «lo mejor de cada presupuesto» */
.vs-t { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 4px; }
.vs-c { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--soft); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 8px; }
.vs-c a { color: var(--ink); text-decoration: none; font-family: var(--display); line-height: 1.15; }
.vs-c span { font-size: .86rem; color: var(--muted); }
.cmp.vs td { text-align: center; font-variant-numeric: tabular-nums; }
.cmp.vs td.gana { font-weight: 700; color: var(--blue); }
.minis { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mini-t { display: flex; align-items: center; gap: 12px; }
.mini-t small { display: block; color: var(--muted); }
.eink-alt .w-head { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.mejores-t { padding-left: 18px; }
.mejores-t li { margin: 4px 0; }
ul.pros { list-style: none; padding: 0; }
ul.pros li { margin: 4px 0; }
.cmp.vs { table-layout: fixed; width: 100%; }
.cmp.vs th, .cmp.vs td { white-space: normal; overflow-wrap: anywhere; font-size: .88rem; }
.cmp.vs thead th { font-size: .78rem; }
.cmp.vs th:first-child { width: 30%; }
.foto.tab.xs { width: 56px; height: 42px; }
.r-tab .foto.tab { margin: 0 auto; }
.r-saltar { margin: 6px 0 0; font-weight: 600; }
.ring-barra { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.ring-caja { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 2px solid transparent; border-radius: 16px; background: var(--white); color: var(--ink); cursor: text; }
.ring-caja:focus-within { border-color: var(--sun); }
.ring-chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 5px 5px 11px; border-radius: 999px; background: var(--esq); color: var(--white); font-size: .85rem; line-height: 1.1; }
.chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .25); color: var(--white); font-size: .7rem; line-height: 1; cursor: pointer; }
.chip.esq-oro { color: var(--ink); }
.chip.esq-oro button { background: rgba(0, 0, 0, .12); color: var(--ink); }
.ring-q { flex: 1 1 160px; min-width: 120px; padding: 8px 4px; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 1rem var(--body); }
.ring-q::-webkit-search-cancel-button { display: none; }
.ring-go { flex: none; }
.ring-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 12px 30px rgba(19, 21, 29, .28); }
.ring-sug li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
.ring-sug li[aria-selected="true"], .ring-sug li[data-s]:hover { background: var(--blue-soft); }
.ring-sug li span { display: flex; flex-direction: column; min-width: 0; }
.ring-sug li small { color: var(--muted); font-size: .78rem; }
.ring-sug .sug-nada { color: var(--muted); font-size: .9rem; cursor: default; }
.sug-foto { flex: none; width: 28px; height: 44px; object-fit: contain; }
.phone.sug-foto { width: 22px; height: 40px; border-width: 2px; border-radius: 6px; animation: none; }
.phone.vit-foto::before, .phone.vit-foto::after, .phone.sug-foto::after { display: none; }
.esq-verde { --esq: var(--good); }
.ring-cols.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ring-cols.n4 .e-pal { display: none; }
@media (min-width: 760px) {
  .ring-cols.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nav-busca { position: relative; flex: 1 1 200px; min-width: 150px; max-width: 320px; margin: 0; }
.nav-busca input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: var(--white); font: 500 .95rem var(--body); }
.nav-busca input::placeholder { color: rgba(255, 255, 255, .85); }
.nav-busca input:focus { outline: none; background: var(--white); color: var(--ink); }
.nav-busca input:focus::placeholder { color: var(--muted); }
.nav-busca input::-webkit-search-cancel-button { display: none; }
.nav-busca .nb-res { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: max(100%, 380px); max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 12px 30px rgba(19, 21, 29, .28); text-align: left; }
.nav-busca .nb-res li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
.nav-busca .nb-res li[aria-selected="true"], .nav-busca .nb-res li[data-u]:hover { background: var(--blue-soft); }
.nav-busca .nb-res img { flex: none; object-fit: contain; }
.nav-busca .nb-ico { flex: none; width: 26px; text-align: center; }
.nav-busca .nb-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; font-family: var(--body); }
.nav-busca .nb-txt b { font-size: .92rem; font-weight: 700; color: var(--ink); }
.nav-busca .nb-txt small { color: var(--muted); font-size: .76rem; }
.nav-busca .nb-res .nb-cmp { flex: none; display: inline-block; padding: 6px 8px; border-radius: 10px; text-decoration: none; font-size: 1rem; }
.nav-busca .nb-res .nb-cmp:hover { background: var(--white); }
.nav-busca .nb-res .nb-nada { display: block; color: var(--muted); font-size: .9rem; cursor: default; }
.nav-busca .nb-res .nb-nada a { display: inline; padding: 0; color: var(--blue); }
.nav-sub .nav-busca { max-width: none; padding: 4px 4px 8px; }
.nav-sub .nav-busca input { background: var(--soft); color: var(--ink); }
.nav-sub .nav-busca input::placeholder { color: var(--muted); }
.nav-sub .nav-busca .nb-res { position: static; width: auto; max-width: none; padding: 4px 0 0; box-shadow: none; }
@media (max-width: 820px) {
  .nav-in > .nav-busca { display: none; }
}
@media (min-width: 821px) and (max-width: 1080px) {
  .nav-links { margin-left: 0; }
  .nav-links > a, .nav-dd > summary { padding: 10px 8px; }
  .nav-in > .nav-busca { min-width: 130px; }
}

/* El desplegable de sugerencias no se recorta: el brillo va dentro de la caja */
.ring-top { overflow: visible; z-index: 3; }
.ring-top::before { inset: 0; height: auto; border-radius: inherit; background: radial-gradient(ellipse 75% 65% at 50% 125%, rgba(255, 210, 63, .3), transparent); }
.ring-top .ring-barra { z-index: 5; }

/* Ordenador: menos blanco a los lados. El texto sigue a 780 px para leer cómodo
   y las rejillas (listas, guías, ofertas, comparador) usan todo el ancho. */
@media (min-width: 1100px) {
  .app:not(.app-portada):has(> main.doc) { max-width: 1160px; }
  .app:not(.app-portada) > main.doc > * { width: 100%; max-width: 780px; margin-inline: auto; box-sizing: border-box; }
  .app:not(.app-portada) > main.doc > :is(.g-list, .duelos-p, .marcas-p, .velada, .r-lista, .l-lista, .ofe-grid),
  .app:not(.app-portada) > main.doc > :is(h2, h3):has(+ :is(.ofe-grid, .g-list, .l-lista, .duelos-p)) { max-width: none; }
  .app:not(.app-portada) .g-list,
  .app:not(.app-portada) .l-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .app:not(.app-portada) .ofe-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .app:not(.app-portada) .duelos-p { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .velada .ring-top { max-width: 900px; margin-inline: auto; width: 100%; box-sizing: border-box; }
  .velada .asaltos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .velada .ring-cols.n2 { max-width: 760px; margin-inline: auto; }
  .velada .ring-cols.n3 { max-width: 1000px; margin-inline: auto; }
}

/* Vitrina del ring: todos los móviles a la vista, por marca, sin tener que escribir */
.ring-vitrina { display: flex; flex-direction: column; gap: 8px; }
.ring-vitrina:empty { display: none; }
.vit-tit { margin: 2px 0 0; font: 700 .72rem/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--silver); }
.vit-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.vit-tabs button { flex: none; padding: 5px 12px; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--white); font: 600 .8rem var(--body); white-space: nowrap; cursor: pointer; }
.vit-tabs button small { font-weight: 500; opacity: .7; }
.vit-tabs button:hover { background: rgba(255, 255, 255, .18); }
.vit-tabs button[aria-selected="true"] { border-color: var(--sun); background: var(--sun); color: var(--ink); }
.vit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; }
.vit-m { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1.5px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--white); font: inherit; text-align: left; cursor: pointer; }
.vit-m:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); }
.vit-m:disabled { opacity: .45; cursor: default; }
.vit-m span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vit-m b { display: -webkit-box; overflow: hidden; font-size: .84rem; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vit-m small { overflow: hidden; color: var(--silver); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.vit-m i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 800 .95rem/1 var(--display); font-style: normal; }
.vit-foto { flex: none; width: 24px; height: 38px; object-fit: contain; }
.phone.vit-foto { width: 18px; height: 32px; border-width: 1.5px; border-radius: 5px; animation: none; }
.vit-mas { align-self: center; padding: 4px 14px; border: 0; background: none; color: var(--sun); font: 700 .84rem var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 760px) { .vit-tabs { flex-wrap: wrap; overflow: visible; padding-bottom: 0; } }
.ring-sug[hidden], .nb-res[hidden] { display: none; } /* .doc ul les pone display:flex y taparía el hidden */
.doc .ring-sug { padding: 6px; gap: 0; } /* y también padding-left y gap */
.doc .ring-sug li { margin: 0; }
/* Con 4 móviles la tabla no cabe en un móvil estrecho: se desliza de lado */
.tabla-n4 { overflow-x: auto; }
.tabla-n4 .ring-t { min-width: 540px; }
.ring-sug .sug-lleno { background: #fff4cc; color: var(--ink); font-weight: 600; }