/* futcoins.es — «la pizarra del míster». Hoja única; sin estilos en línea. */

@font-face { font-family: "Space Grotesk"; src: url(/r/spacegrotesk-var.0640890476.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
/* Las cifras del texto, con el cero sin barra de Space Grotesk. */
@font-face { font-family: "Cifras"; src: url(/r/spacegrotesk-var.0640890476.woff2) format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+30-39; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/r/atkinsonhyperlegible-400.d64ba838ef.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/r/atkinsonhyperlegible-700.140e2bd25a.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(/r/caveat-700.15f9638095.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url(/r/sharetechmono-400.41e6b9f297.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --fondo: #EEF1F4;
  --blanco: #FFFFFF;
  --tinta: #111827;
  --gris: #374151;
  --gris2: #4B5563;
  --linea: #D5DBE3;
  --marco: #C3CAD3;
  --azul: #1D4ED8;
  --azul2: #2563EB;
  --azul-claro: #EFF4FF;
  --rojo: #DC2626;
  --rojo2: #EF4444;
  --amarillo: #FACC15;
  --verde: #15803D;
  --led: #39E07A;
  --noche: #0B1220;
  --campo: #F7FBF8;
  --cal: #9CCBAA;
  --titulos: "Space Grotesk", system-ui, sans-serif;
  --texto: "Cifras", "Atkinson Hyperlegible", system-ui, sans-serif;
  --mano: "Caveat", "Comic Sans MS", cursive;
  --tablero: "Share Tech Mono", ui-monospace, monospace;
  --ancho: 1312px;
  --lado: clamp(16px, 4.4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.55 var(--texto); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 19px; }
p { margin: 0; }
a { color: var(--azul); font-weight: 700; text-decoration: none; border-radius: 3px; }
a:hover, a:focus-visible { background: #FEF08A; color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul2); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; background: var(--blanco); padding: 8px 12px; z-index: 50; }
.saltar:focus { top: 8px; }
.rotulador { font-family: var(--mano); font-weight: 700; color: var(--rojo); line-height: 1; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico--ok { color: var(--verde); }
.ico--azul { color: var(--azul); }
.ico--no { color: var(--rojo); }

/* ---------------------------------------------------------------- cabecera */
.cab { display: flex; align-items: center; gap: 24px; padding: 12px var(--lado); background: var(--blanco); border-bottom: 1px solid #DDE2E8; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); margin-right: auto; }
.marca:hover { background: none; }
.marca__iman { width: 30px; height: 30px; border-radius: 50%; background: var(--azul2); box-shadow: inset -4px -4px 0 rgba(0,0,0,.18); }
.marca__txt { font: 700 24px/1 var(--titulos); color: var(--tinta); }
.marca__txt span { color: var(--azul); }
.cab__nav { display: flex; gap: 26px; }
.cab__nav a { color: var(--tinta); font-size: 15px; }
.cab__nav a[aria-current] { color: var(--azul); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__lista { position: absolute; right: 0; top: 52px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 16px 40px rgba(17,24,39,.16); padding: 8px; display: flex; flex-direction: column; min-width: 220px; z-index: 30; }
.menu__lista a { padding: 12px; color: var(--tinta); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; background: var(--azul); color: var(--blanco); font: 700 18px/1 var(--texto); cursor: pointer; text-align: center; }
.boton:hover, .boton:focus-visible { background: #1E40AF; color: var(--blanco); }
.boton .ico { width: 24px; height: 24px; }
.boton--cab { padding: 12px 18px; font-size: 15px; border-radius: 10px; }
.boton--pago { min-height: 56px; padding: 0 24px; }

/* ---------------------------------------------------------------- pizarra */
.pizarra { background: var(--blanco); border: 10px solid var(--marco); border-radius: 10px; box-shadow: 0 10px 30px rgba(17,24,39,.08); }
.migas { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 14px auto 0; padding: 0 var(--lado); font-size: 14px; color: var(--gris2); }
.migas a { font-weight: 700; }

.portada { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; padding: 24px var(--lado) 8px; display: grid; grid-template-columns: minmax(0, 1fr) 470px; grid-template-areas: "texto ficha" "dibujo ficha"; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
.portada__texto { grid-area: texto; border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: none; padding: 22px 28px 8px; display: flex; flex-direction: column; gap: 10px; }
.portada__dibujo { grid-area: dibujo; align-self: stretch; border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 16px 24px -14px rgba(17,24,39,.18); padding: 8px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.portada__corta { display: none; font-size: 14px; font-weight: 700; color: var(--gris); }
.portada__texto--mister { position: relative; padding-right: 200px; min-height: 250px; }
.portada__texto--mister h1 { font-size: clamp(30px, 3vw, 42px); }
.portada__mister { position: absolute; right: 8px; bottom: 0; width: 190px; line-height: 0; }
.portada__mister img { width: 100%; height: auto; }
.portada__ficha { grid-area: ficha; }
.antetitulo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris2); }
.portada h1 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -0.02em; max-width: 720px; }
.portada h1 em { font-style: normal; color: var(--azul); }
.portada__lede { color: var(--gris); max-width: 640px; }

.chapas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chapa { display: flex; align-items: center; gap: 8px; background: #F3F5F8; border-radius: 999px; padding: 6px 12px 6px 6px; font-size: 14px; font-weight: 700; }
.chapa::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--amarillo); }
.chapa--rojo::before { background: var(--rojo2); }
.chapa--azul::before { background: var(--azul2); }
.chapa--verde::before { background: var(--verde); }

/* el campo y los imanes */
.campo { position: relative; margin: 0; aspect-ratio: 656 / 300; background: var(--campo); border-radius: 6px; }
.campo__lineas { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--cal); stroke-width: 2; }
.trazo { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.trazo--pase { stroke: var(--azul); }
.trazo--carrera { stroke: var(--rojo); stroke-dasharray: 7 6; }
.trazo--punta { stroke: var(--rojo); }
.campo__once, .campo__jugada { list-style: none; margin: 0; padding: 0; }
.iman { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; width: 110px; }
.iman__ficha { width: 40px; height: 40px; border-radius: 50%; background: var(--azul2); color: var(--blanco); box-shadow: inset -4px -4px 0 rgba(0,0,0,.18), 0 2px 4px rgba(17,24,39,.25); font: 700 15px/40px var(--titulos); text-align: center; }
.iman--amarillo .iman__ficha { background: var(--amarillo); color: var(--tinta); }
.iman--foto .iman__ficha { position: relative; width: 48px; height: 48px; padding: 3px; background: var(--azul2); }
.iman--foto.iman--amarillo .iman__ficha { background: var(--amarillo); }
.iman__foto { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #E5E7EB; }
.iman--foto .iman__val { position: absolute; right: -8px; bottom: -4px; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--tinta); color: var(--blanco); font: 700 11px/18px var(--titulos); text-align: center; }
.iman--foto.iman--amarillo .iman__val { background: var(--tinta); color: var(--amarillo); }
.iman__nombre { background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; padding: 1px 7px; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.iman--libre .iman__ficha { background: var(--blanco); color: var(--rojo); border: 2.5px dashed var(--rojo); box-shadow: none; font: 700 26px/35px var(--mano); }
.iman--libre .iman__nombre { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.iman--por { left: 7.5%; top: 50%; } .iman--li { left: 23%; top: 14%; } .iman--dfc1 { left: 21.5%; top: 38%; } .iman--dfc2 { left: 21.5%; top: 63%; } .iman--ld { left: 23%; top: 86%; }
.iman--mc1 { left: 46%; top: 23%; } .iman--mcd { left: 40%; top: 50%; } .iman--mc2 { left: 46%; top: 77%; }
.iman--ei { left: 68.5%; top: 16%; } .iman--ed { left: 68.5%; top: 84%; } .iman--dc { left: 86%; top: 50%; }
.campo__nota { position: absolute; right: 1.5%; top: 21%; font-size: 25px; text-align: right; display: flex; flex-direction: column; }

.paso { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; text-align: center; }
.paso__iman { width: 46px; height: 46px; border-radius: 50%; font: 700 19px/46px var(--titulos); color: var(--blanco); background: var(--azul2); box-shadow: inset -4px -4px 0 rgba(0,0,0,.18), 0 2px 4px rgba(17,24,39,.25); }
.paso--1 .paso__iman { background: var(--amarillo); color: var(--tinta); }
.paso--2 .paso__iman { background: var(--rojo2); }
.paso--4 .paso__iman { background: var(--verde); }
.paso__txt { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 2px 8px; font-size: 13px; line-height: 1.3; }
.paso--1 { left: 14%; top: 76%; } .paso--2 { left: 42%; top: 36%; } .paso--3 { left: 66%; top: 40%; } .paso--4 { left: 87%; top: 60%; }

/* ---------------------------------------------------------------- ficha */
.ficha { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 16px 40px rgba(17,24,39,.12); overflow: hidden; scroll-margin-top: 12px; }
.tablero { margin: 14px 14px 0; background: var(--noche); border: 3px solid #1F2937; border-radius: 10px; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "etq etq" "cifra txt"; align-items: center; column-gap: 14px; row-gap: 2px; }
.tablero__etq { grid-area: etq; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF; font-weight: 700; }
.tablero__cifra { grid-area: cifra; display: flex; align-items: center; gap: 8px; font: 400 36px/1 var(--tablero); color: var(--led); white-space: nowrap; }
.tablero__flecha { width: 18px; height: 18px; fill: var(--led); }
.tablero__txt { grid-area: txt; font-size: 13px; color: #D1D5DB; text-align: right; line-height: 1.3; }
.ficha__cuerpo { padding: 14px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.ficha__titulo { display: flex; justify-content: space-between; align-items: center; font: 700 21px/1.2 var(--titulos); }
.ficha__vivo { display: flex; align-items: center; gap: 6px; font: 700 13px/1 var(--texto); color: var(--verde); }
.ficha__vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.ficha__grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ficha__paso { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; font-weight: 700; color: var(--gris); }
.numero { width: 22px; height: 22px; border-radius: 50%; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--amarillo); color: var(--tinta); }
.numero--2 { background: var(--rojo2); color: var(--blanco); }
.plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plat, .paq { position: relative; cursor: pointer; }
.plat input, .paq input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plat__caja { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--linea); border-radius: 10px; min-height: 84px; }
.plat__nombre { font-weight: 700; font-size: 15px; }
.plat__equipos { font-size: 12px; color: var(--gris2); line-height: 1.3; }
.plat__precio { font: 700 14px/1.3 var(--titulos); color: var(--gris); margin-top: auto; }
.plat__barata { position: absolute; top: -11px; right: 6px; font-size: 18px; background: var(--blanco); padding: 0 4px; }
.plat__barata[hidden] { display: none; }
.plat input:checked + .plat__caja { border-color: var(--azul); background: var(--azul-claro); }
.plat input:checked + .plat__caja .plat__precio { color: var(--azul); }
.plat input:focus-visible + .plat__caja, .paq input:focus-visible + span { outline: 3px solid var(--azul2); outline-offset: 2px; }
.paqs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.paq span { display: flex; align-items: center; justify-content: center; height: 44px; border: 2px solid var(--linea); border-radius: 10px; font: 700 16px/1 var(--titulos); }
.paq input:checked + span { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.otra input { width: 100%; height: 44px; border: 1px solid #C7CFDA; border-radius: 10px; padding: 0 14px; font: 400 16px var(--texto); color: var(--tinta); }
.otra input::placeholder { color: #5F6B7D; }
.ficha__aviso { color: var(--rojo); font-size: 14px; font-weight: 700; }
.resumen { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #F3F5F8; border-radius: 10px; padding: 12px 16px; }
.resumen__izq, .resumen__der { display: flex; flex-direction: column; gap: 3px; }
.resumen__der { align-items: flex-end; text-align: right; }
.resumen__etq { font-size: 13px; font-weight: 700; color: var(--gris); }
.resumen__det, .resumen__cien { font-size: 13px; color: var(--gris2); }
.resumen__precio { font: 700 32px/1 var(--titulos); white-space: nowrap; }
.ficha .boton--pago { width: 100%; }
.ficha__nota { font-size: 13px; color: var(--gris2); line-height: 1.45; }

/* ---------------------------------------------------------------- bloques */
.bloque { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; padding: 56px var(--lado) 0; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 10px; }
.bloque__cab { display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.bloque__nota { font-size: 26px; }
.bloque__intro { color: var(--gris); font-size: 18px; }
.texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.texto--lado { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.prosa { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.prosa h3 { margin-top: 8px; }
.prosa ul, .prosa ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.lado { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.lado h3 { font-size: 17px; }

.precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; padding-top: 10px; }
.precio { position: relative; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; padding: 26px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.precio--barata { border: 2px solid var(--rojo); }
.precio__iman { position: absolute; top: -13px; left: 22px; width: 26px; height: 26px; border-radius: 50%; background: var(--azul2); box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); }
.precio__iman--verde { background: var(--verde); } .precio__iman--amarillo { background: var(--amarillo); }
.precio__barata { position: absolute; top: -16px; right: 16px; font-size: 24px; background: var(--fondo); padding: 0 6px; }
.precio__plat { font: 700 22px/1.2 var(--titulos); }
.precio__club { font-size: 14px; color: var(--gris2); }
.precio__cifras { display: flex; gap: 24px; }
.precio__cifras > span { display: flex; flex-direction: column; }
.precio__unidad { font-size: 12px; color: var(--gris2); }
.precio__eur { font: 700 28px/1.2 var(--titulos); }
.precio__ir { align-self: flex-start; background: var(--azul-claro); padding: 8px 14px; border-radius: 8px; }

.tabla { overflow-x: auto; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; }
.tabla table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; }
.tabla caption { text-align: left; padding: 14px 18px 4px; color: var(--gris2); font-size: 14px; }
.tabla th, .tabla td { padding: 11px 18px; text-align: right; border-top: 1px solid #E5E9EE; font-family: var(--titulos); }
.tabla th:first-child { text-align: left; }
.tabla thead th { border-top: 0; font-size: 14px; color: var(--gris); }

.usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.uso { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.uso p { color: var(--gris); font-size: 16px; }
.mini-mercado { background: #0F172A; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mini-mercado__cab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9CA3AF; font-weight: 700; }
.mini-mercado__fila { display: flex; align-items: center; gap: 10px; background: #1E293B; border-radius: 8px; padding: 6px 8px; color: #E5E7EB; font-size: 13px; }
.mini-mercado__fila > span:nth-child(2) { flex: 1; }
.mini-mercado__fila--tuya { outline: 2px dashed var(--rojo); }
.mini-mercado__precio { font: 400 15px var(--tablero); color: var(--amarillo); }
.mini-iman { width: 28px; height: 28px; border-radius: 50%; background: var(--azul2); color: var(--blanco); font: 700 12px/28px var(--titulos); text-align: center; flex-shrink: 0; }
.mini-iman--libre { background: var(--blanco); color: var(--rojo); font: 700 18px/28px var(--mano); }
.mini-sbc { background: var(--campo); border: 1.5px solid #CFE3D6; border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 12px; }
.mini-sbc svg { width: 110px; height: 96px; flex-shrink: 0; }
.mini-sbc__lista { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mini-sbc__lista > span { display: flex; align-items: center; gap: 6px; }
.mini-sbc__lista .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.mini-sbc__no { color: var(--rojo); font-weight: 700; }
.mini-sobres { background: var(--azul-claro); border-radius: 10px; height: 120px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.mini-sobres__sobre { width: auto; height: 108px; }
.mini-sobres__monedas { width: auto; height: 84px; align-self: flex-end; margin-bottom: 8px; }
.mini-modos { background: var(--campo); border: 1.5px solid #CFE3D6; border-radius: 10px; height: 120px; display: flex; }
.mini-modos svg { width: 100%; height: 100%; }
.cal { fill: none; stroke: var(--cal); stroke-width: 2; }
.f-azul { fill: var(--azul2); } .f-azul-osc { fill: var(--azul); } .f-amarillo { fill: var(--amarillo); } .f-rojo { fill: var(--rojo2); }
.f-blanco { fill: var(--blanco); } .f-noche { fill: #0F172A; } .f-led { fill: var(--led); }
.t-marco { stroke: var(--marco); stroke-width: 6; fill: none; } .f-blanco.t-marco { fill: var(--blanco); }
.t-rojo { stroke: var(--rojo); stroke-width: 3; stroke-dasharray: 5 4; }

.duelo { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; padding: 28px clamp(18px, 3vw, 36px); }
.duelo__col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.duelo__tit { display: flex; align-items: center; gap: 10px; font: 700 22px/1.2 var(--titulos); }
.duelo__iman { width: 28px; height: 28px; border-radius: 50%; background: var(--verde); }
.duelo__iman--azul { background: var(--azul); }
.duelo__vs { flex: 0 0 56px; align-self: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tinta); color: var(--blanco); font: 700 18px/56px var(--titulos); text-align: center; }
.duelo__nota { font-size: 23px; color: var(--verde); }
.duelo__nota--azul { color: var(--azul); }
.lista-ok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-ok li { display: flex; gap: 8px; align-items: flex-start; }
.lista-ok .ico { margin-top: 2px; stroke-width: 2.6; }

.estados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.estado { display: flex; flex-direction: column; gap: 10px; }
.estado p { color: var(--gris); font-size: 16px; }
.led { background: var(--noche); border: 4px solid #1F2937; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.led__etq { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF; font-weight: 700; }
.led__txt { font: 400 27px/1.1 var(--tablero); }
.led__txt--amarillo { color: var(--amarillo); } .led__txt--azul { color: #60A5FA; } .led__txt--verde { color: var(--led); }
.led--corto { flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; border-width: 3px; }
.led--corto .led__txt { font-size: 22px; }

.amarilla { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 56px auto 0; padding: 0 var(--lado); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; scroll-margin-top: 10px; }
.amarilla > * { position: relative; }
.amarilla__tarjeta { flex: 0 0 auto; width: 110px; height: 154px; background: var(--amarillo); border-radius: 10px; transform: rotate(-8deg); box-shadow: 0 10px 24px rgba(17,24,39,.2); margin: 16px 0 16px 18px; }
.amarilla__txt { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; background: #FFFBEB; border: 1.5px solid #FDE68A; border-radius: 14px; padding: 24px clamp(18px, 3vw, 32px); }
.amarilla__txt .bloque__nota { color: #B45309; }
.amarilla__txt ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }

.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.pasos__item { display: flex; gap: 16px; align-items: flex-start; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; padding: 18px; }
.pasos__item > div { display: flex; flex-direction: column; gap: 8px; }
.pasos__item p { color: var(--gris); }
.pasos__iman { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; font: 700 17px/40px var(--titulos); text-align: center; color: var(--blanco); background: var(--azul2); box-shadow: inset -4px -4px 0 rgba(0,0,0,.18); }
.pasos__iman--1 { background: var(--amarillo); color: var(--tinta); } .pasos__iman--2 { background: var(--rojo2); } .pasos__iman--4 { background: var(--verde); }

.chequeo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.chequeo li { display: flex; gap: 12px; align-items: flex-start; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; padding: 16px; }
.chequeo li > div { display: flex; flex-direction: column; gap: 6px; }
.chequeo p { color: var(--gris); font-size: 16px; }
.chequeo .ico { width: 26px; height: 26px; stroke-width: 2.6; }

.dudas { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.duda { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 10px; }
.duda summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; position: relative; }
.duda summary::-webkit-details-marker { display: none; }
.duda summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 700 26px/1 var(--titulos); color: var(--azul); }
.duda[open] summary::after { content: "–"; }
.duda h3 { font-size: 18px; line-height: 1.3; }
.duda__r { padding: 0 18px 16px; color: var(--gris); }

.final { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 64px auto 0; padding: 32px var(--lado); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; background: var(--blanco); border-top: 1px solid #DDE2E8; border-bottom: 1px solid #DDE2E8; }
.final__arte { flex: 0 0 220px; }
.final__arte img { width: 220px; height: auto; display: block; }
.final__txt { flex: 1 1 380px; display: flex; flex-direction: column; gap: 12px; }
.final__fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.doc { max-width: 900px; margin: 24px auto 0; padding: 28px clamp(18px, 4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.doc h1 { font-size: clamp(30px, 4vw, 42px); }
.doc__intro { color: var(--gris); font-size: 18px; }
.doc h2 { font-size: 24px; margin-top: 10px; }
.doc--mister { position: relative; padding-right: clamp(18px, 30%, 260px); min-height: 320px; }
.doc__mister { position: absolute; right: 10px; bottom: 0; width: min(28%, 230px); line-height: 0; }
.doc__mister img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- pie */
.pie { margin-top: 64px; background: var(--tinta); color: #D1D5DB; }
.pie__dentro { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; padding: 32px var(--lado) 96px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; font-size: 14px; }
.pie__marca { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.pie .marca__txt { color: var(--blanco); font-size: 20px; }
.pie .marca__txt span { color: #93C5FD; }
.pie a { color: #BFDBFE; }
.pie a:hover { color: var(--tinta); }
.pie__nav { display: flex; flex-direction: column; gap: 8px; }
.pie__fecha { grid-column: 1 / -1; color: #9CA3AF; }

/* barra fija (móvil) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--blanco); border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px rgba(17,24,39,.1); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.barra[hidden] { display: none; }
.barra__info { display: flex; flex-direction: column; min-width: 0; }
.barra__det { font-size: 12px; color: var(--gris2); }
.barra__precio { font: 700 20px/1.1 var(--titulos); }
.boton--barra { min-height: 48px; padding: 0 20px; font-size: 16px; }

/* ---------------------------------------------------------------- tableta y móvil */
@media (max-width: 1099px) {
  .cab__nav { display: none; }
  .menu { display: block; }
  .portada { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "ficha" "dibujo"; grid-template-rows: auto; row-gap: 12px; padding-top: 12px; }
  .portada__texto { border-bottom: 10px solid var(--marco); border-radius: 10px; padding: 14px 18px; gap: 6px; }
  .portada__dibujo { border-top: 10px solid var(--marco); border-radius: 10px; padding: 14px 18px; }
  .portada__ficha { max-width: 640px; width: 100%; justify-self: center; }
  .portada__texto--mister { padding-right: 18px; min-height: 0; }
  .portada__mister { display: none; }
  .texto--lado { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  body { font-size: 16px; }
  .cab { padding: 8px 16px; gap: 10px; }
  .marca__txt { font-size: 20px; }
  .marca__iman { width: 26px; height: 26px; }
  .boton--cab { padding: 10px 12px; font-size: 14px; }
  .portada { padding: 10px 12px 0; }
  .portada__texto { border-width: 6px; padding: 10px 14px; }
  .portada__lede { display: none; }
  .portada__corta { display: block; }
  .antetitulo__extra { display: none; }
  .portada h1 { font-size: 27px; }
  .antetitulo { font-size: 11px; }
  .portada__dibujo { border-width: 6px; padding: 10px; }
  .portada__ficha { padding: 0 4px; }
  .tablero { margin: 10px 10px 0; padding: 6px 12px; border-width: 2px; grid-template-areas: "cifra txt"; }
  .tablero__etq { display: none; }
  .tablero__cifra { font-size: 26px; }
  .tablero__flecha { width: 14px; height: 14px; }
  .tablero__txt { font-size: 11px; }
  .ficha__cuerpo { padding: 10px 14px 12px; gap: 8px; }
  .ficha__titulo { display: none; }
  .plats { gap: 8px; }
  .plat__caja { min-height: 0; padding: 7px 6px; align-items: center; text-align: center; }
  .plat__equipos { display: none; }
  .plat__nombre { font-size: 14px; }
  .plat__precio { font-size: 12px; margin-top: 0; }
  .plat__barata { font-size: 15px; top: -9px; right: 2px; }
  .paqs { gap: 6px; }
  .paq span { font-size: 14px; }
  .ficha__paso { font-size: 13px; }
  .resumen { padding: 8px 12px; }
  .resumen__cien { display: none; }
  .resumen__precio { font-size: 26px; }
  .boton--pago { min-height: 52px; font-size: 17px; }
  .ficha__nota { font-size: 12px; }
  .iman { width: auto; }
  .iman__ficha { width: 26px; height: 26px; font-size: 11px; line-height: 26px; }
  .iman--libre .iman__ficha { font-size: 18px; line-height: 22px; }
  .iman__nombre { display: none; }
  .campo__nota { font-size: 17px; top: 28%; right: 2%; }
  .campo__nota span { display: none; }
  .paso { width: 92px; }
  .paso__iman { width: 32px; height: 32px; font-size: 15px; line-height: 32px; }
  .paso__txt { font-size: 11px; padding: 1px 4px; }
  .bloque { padding-top: 44px; }
  .bloque__nota { font-size: 22px; }
  .precio__eur { font-size: 24px; }
  .amarilla__tarjeta { width: 70px; height: 98px; }
  .final__arte { flex: 0 0 auto; margin: 0 auto; }
  .final__arte img { width: 150px; }
  .iman--foto .iman__ficha { width: 30px; height: 30px; padding: 2px; }
  .iman--foto .iman__val { display: none; }
  .doc--mister { padding-right: 18px; }
  .doc__mister { position: static; width: 140px; margin: 0 auto; }
  .pie__dentro { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .barra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}