/* MECANIC · Carbono, aluminio y verde de competición. Capa visual de la casa. */
:root {
  --carbon: #090a0a;
  --metal: #a6b3ad;
  --borde-metal: rgba(188, 208, 198, .18);
  --superficie: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px), linear-gradient(135deg, #242827, #131615 48%, #0d100f);
  --sombra-taller: 0 18px 45px #02060466, inset 0 1px 0 #e7fff00d;
}
body {
  background: radial-gradient(ellipse at 0% 0%, #15302130, transparent 48%), #090a0a;
  font-variant-numeric: tabular-nums;
}
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--verde); outline-offset: 4px;
}
button:active, .btn:active, .btn-taller-masivo:active { transform: translateY(1px); }
.nav { background: #0a100de8; border-bottom: 1px solid var(--borde-metal); }
.nav::after { opacity: .35; }
.nav .marca { font-size: 13px; letter-spacing: .08em; }
.nav-links > a:not(.btn) { font-size: 13px; }
.btn-mecanic-glow { box-shadow: inset 0 1px 0 #ffffff18; text-shadow: none; }
.btn-mecanic-glow:hover { box-shadow: 0 5px 20px #2ee57a18; }
.sec-title { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.025em; }
.sec-kicker { color: var(--metal); }
.hero-mecanic { background: none; padding: 52px 0 20px; }
.placa-taller-centrada {
  max-width: 1040px; padding: 32px 48px; border-radius: 16px;
  border: 1px solid #a0b3a84a; background: var(--superficie);
  box-shadow: 0 30px 90px #0008, inset 0 1px 0 #fff2;
}
.placa-taller-centrada::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .17;
  background: repeating-linear-gradient(125deg, transparent 0 3px, #bcc9c609 3px 4px);
}
.banner-separado-negro {
  padding: 25px 16px; border-radius: 5px; border-color: #afc1b63b;
  background: #050807; box-shadow: inset 0 2px 12px #000b, 0 1px 0 #fff1;
}
.typewriter-word {
  font-family: var(--f-titulo); font-size: clamp(20px, 3.8vw, 48px);
  letter-spacing: .035em; font-weight: 400; text-shadow: 0 2px 1px #000;
  background: linear-gradient(#fff 30%, #becbc4 55%, #f0f5f2 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.typewriter-cursor { font-size: clamp(20px, 3.8vw, 48px); }
.eslogan-hero-bloque { margin: 30px auto 24px; max-width: 720px; }
.hero-mecanic .eslogan-hero-texto {
  font: 650 clamp(25px, 3.1vw, 42px)/1.2 var(--f-cuerpo); letter-spacing: -.045em;
}
.eslogan-hero-texto :is(.txt-v, .txt-o) { text-shadow: none; }
.taller-chips-gris { gap: 8px; }
.taller-chip-gris {
  background: #ffffff04; border: 1px solid #c7d3cb20; box-shadow: inset 0 1px 0 #fff05;
  font-size: 10px; font-weight: 450; padding: 8px 11px; border-radius: 4px; letter-spacing: .015em;
}
.taller-galleta-contenido {
  background: #040a073d; border-color: var(--borde-metal); padding: 22px 24px;
  gap: 32px; margin: 24px 0; border-radius: 6px;
}
.galleta-col + .galleta-col { border-left: 1px solid var(--borde-metal); padding-left: 28px; }
.galleta-kicker { font-size: 10px; letter-spacing: .04em; }
.galleta-col h4 { font: 600 16px var(--f-cuerpo); margin: 8px 0; }
.galleta-col p { font-size: 12px; line-height: 1.65; }
.hero-cta-masivo-wrap { margin: 22px 0 18px; }
.btn-taller-masivo {
  position: relative; overflow: hidden; min-height: 60px; padding: 18px;
  font: 700 15px var(--f-cuerpo); letter-spacing: .07em; border-radius: 5px;
  background: linear-gradient(110deg, #2ee57a, #22c66a);
  box-shadow: inset 0 1px 0 #ffffff60, 0 6px 22px #0005;
}
.btn-taller-masivo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #fff4 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .65s ease;
}
.btn-taller-masivo:hover::after { transform: translateX(130%); }
.btn-taller-masivo:hover { box-shadow: 0 8px 28px #2ee57a25; transform: translateY(-1px); }
.social-login-titulo { text-transform: none; font: 12px var(--f-cuerpo); letter-spacing: 0; }
.btn-social { box-shadow: inset 0 1px 0 #ffffff0b; border-color: var(--borde-metal); }
.placa-taller { background: var(--superficie); border-color: var(--borde-metal); box-shadow: var(--sombra-taller); }
.tarjeta-plan-taller {
  border-color: var(--borde-metal); background: var(--superficie); box-shadow: var(--sombra-taller);
  padding: 30px; border-radius: 10px;
}
.tarjeta-plan-taller.plan-destacado {
  transform: none; border-color: #2ee57a80;
  background: radial-gradient(ellipse at top right, #2ee57a13, transparent 65%), var(--superficie);
  box-shadow: var(--sombra-taller);
}
.plan-taller-nombre { font: 600 23px var(--f-cuerpo); letter-spacing: -.03em; }
.cifra-precio { font: 650 44px var(--f-cuerpo); letter-spacing: -.05em; }
.plan-taller-precio { min-height: 66px; flex-wrap: wrap; }
.plan-taller-sub { min-height: 60px; line-height: 1.6; }
.dashboard-nav-tabs { border-bottom: 1px solid var(--borde-metal); gap: 12px; margin: 24px 0; }
.tab-btn { font: 600 12px var(--f-cuerpo); letter-spacing: .02em; padding: 15px 14px; }
.tab-btn.activo { text-shadow: none; }
.filtros { background: #0f1813; border: 1px solid var(--borde-metal); border-radius: 9px; padding: 20px; }
.filtros label { letter-spacing: .04em; font-size: 10px; }
.filtros :is(select, input) { border-color: #a9bcb32b; background-color: #080e0b; border-radius: 5px; min-height: 44px; }
.galleta-serie, .ficha-cajita, .tarjeta-coche-capa {
  background: var(--superficie); border-color: var(--borde-metal); border-radius: 9px;
  box-shadow: inset 0 1px 0 #e5ffed0a;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.galleta-serie { padding: 20px; }
.galleta-serie:hover, .ficha-cajita:hover, .tarjeta-coche-capa:hover {
  border-color: #2ee57a70; transform: translateY(-2px);
  box-shadow: 0 12px 25px #02060480, inset 0 1px 0 #2ee57a30;
}
.galleta-serie-titulo { font: 600 18px/1.35 var(--f-cuerpo); letter-spacing: -.02em; min-height: 48px; }
.galleta-serie-preview { height: 155px; border-color: #fff1; border-radius: 5px; }
.galleta-serie-preview img, .ficha-cajita-img img { transition: transform .5s ease; }
.galleta-serie:hover .galleta-serie-preview > img, .ficha-cajita:hover img { transform: scale(1.035); }
.galleta-serie-chip { background: transparent; border-color: #fff1; font-size: 10px; }
.galleta-serie-btn { border-color: #9db8a82b; background: #ffffff04; padding: 11px; font-size: 10px; }
.galleta-serie:hover .galleta-serie-btn { background: #2ee57a12; color: var(--verde); }
.ficha-cajita-info h4 { white-space: normal; font: 600 14px/1.4 var(--f-cuerpo); }
.ficha-cajita-info .pista { white-space: normal; font-size: 12px; }
.capa-coche-banner { background: #0e1812; border-color: var(--borde-metal); }
.tarjeta-coche-capa h5 { white-space: normal; font: 550 13px/1.4 var(--f-cuerpo); }

/* Ficha: un espacio de trabajo, cuatro contextos; la descarga permanece visible. */
body:has(#pag-paquete:not([hidden])) #pagPie { display: none; }
.pack-workspace {
  max-width: 1440px; margin: var(--nav-alto) auto 0;
  height: calc(100dvh - var(--nav-alto)); min-height: 540px;
  padding: 18px 32px 22px; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px;
}
.pack-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pack-topline a { color: var(--metal); font: 12px var(--f-cuerpo); }
.pack-topline a:hover { color: var(--verde); }
.pack-topline > span { color: var(--metal); font: 10px var(--f-mono); letter-spacing: .05em; }
.pack-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; min-height: 0; }
.pack-car { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(140px, 1fr) auto; }
.pack-visual { position: relative; overflow: hidden; border: 1px solid var(--borde-metal); border-radius: 10px; background: #070c09; min-height: 0; }
.pack-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pack-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #050b08 0%, #050b0890 25%, transparent 65%); pointer-events: none; }
.pack-car-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px; z-index: 1; }
.pack-car-title h1 { font: 600 clamp(21px, 2.1vw, 31px)/1.2 var(--f-cuerpo); letter-spacing: -.035em; margin: 12px 0 6px; }
.pack-car-title p { color: var(--verde); font-size: 14px; }
.pack-car-title .estado { font-size: 9px; padding: 5px 8px; box-shadow: none; }
.pack-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 0 0; }
.pack-specs dt { font: 9px var(--f-mono); text-transform: uppercase; color: var(--metal); letter-spacing: .08em; margin-bottom: 5px; }
.pack-specs dd { font: 500 12px var(--f-cuerpo); color: #e1e8e4; }
.pack-engineer { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 15px; }
.pack-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pack-heading h2 { font: 600 22px var(--f-cuerpo); letter-spacing: -.03em; }
.pack-heading span { font: 10px var(--f-mono); color: var(--metal); white-space: nowrap; }
.pack-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #050b08; padding: 5px; border: 1px solid var(--borde-metal); border-radius: 7px; gap: 4px; }
.pack-tab { border: 1px solid transparent; background: transparent; color: var(--metal); border-radius: 4px; padding: 11px 4px; font: 550 12px var(--f-cuerpo); cursor: pointer; }
.pack-tab span { opacity: .65; margin-left: 4px; font-size: 10px; }
.pack-tab[aria-selected="true"] { color: var(--verde); background: #153121; border-color: #2ee57a36; box-shadow: inset 0 1px 0 #ffffff0c; }
.pack-tab:hover { color: #f0f5f2; }
.pack-panel { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.pack-panels { min-height: 0; display: grid; }
.pack-panel[hidden] { display: none; }
.pack-panel[data-context="qualy"] { grid-template-rows: minmax(0, 1fr); }
.pack-variant { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 17px; border: 1px solid var(--borde-metal); border-left: 2px solid #6b7b72; border-radius: 6px; background: var(--superficie); }
.pack-variant[data-style="aggressive"] { border-left-color: var(--naranja); }
.pack-variant[data-style="balance"] { border-left-color: var(--verde); }
.pack-variant h3 { font: 600 16px var(--f-cuerpo); letter-spacing: -.02em; margin-bottom: 5px; }
.pack-variant p { font: 12px/1.5 var(--f-cuerpo); color: var(--texto-2); max-width: 60ch; }
.pack-variant small { display: block; font: 9px var(--f-mono); color: var(--metal); margin-top: 7px; }
.pack-variant-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.pack-download { color: var(--verde); background: #2ee57a0b; border: 1px solid #2ee57a40; border-radius: 4px; padding: 9px 12px; font: 600 11px var(--f-cuerpo); text-align: center; white-space: nowrap; }
.pack-download:hover { color: #060c08; background: var(--verde); }
.pack-variant .voto-btn-group { border-color: var(--borde-metal); padding: 1px; justify-content: center; }
.pack-variant .btn-voto { font: 10px var(--f-cuerpo); min-height: 27px; padding: 4px 7px; color: var(--texto-2); }
.pack-variant .btn-voto.activo { color: var(--verde); }
.pack-vote-note { font: 10px/1.5 var(--f-cuerpo); color: var(--metal); }
.pack-dock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; background: #111d16; border: 1px solid #a8c3b32b; border-radius: 8px; padding: 15px 22px; box-shadow: inset 0 1px 0 #ffffff08; }
.pack-dock strong { display: block; font: 600 14px var(--f-cuerpo); margin-bottom: 4px; }
.pack-dock small { display: block; font: 11px/1.5 var(--f-cuerpo); color: var(--metal); }
.pack-dock .paq-cuenta { background: none; border: 0; border-radius: 0; margin: 3px 0 0; padding: 0; font: 11px/1.4 var(--f-cuerpo); color: var(--texto-2); }
.pack-dock .btn { min-height: 46px; padding: 12px 22px; border-radius: 5px; font: 650 12px var(--f-cuerpo); background: var(--verde); color: #05100a; border: 1px solid #a7ffcb70; white-space: nowrap; }
@media (min-width: 901px) and (max-height: 760px) {
  .pack-workspace { padding-block: 12px; gap: 12px; }
  .pack-engineer { gap: 10px; }
  .pack-variant { padding: 10px 14px; }
  .pack-variant p { font-size: 11px; line-height: 1.4; }
  .pack-dock { padding: 12px 18px; }
}
@media (max-width: 900px) {
  .pack-workspace { padding: 14px 20px; gap: 14px; min-height: 670px; }
  .pack-stage { grid-template-columns: 1fr; grid-template-rows: 180px minmax(0, 1fr); gap: 18px; }
  .pack-car { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; }
  .pack-car-title { padding: 16px; }
  .pack-car-title h1 { font-size: 23px; margin: 8px 0 4px; }
  .pack-specs { grid-template-columns: 1fr; padding: 8px 0; align-content: center; }
  .pack-visual img { object-position: center 45%; }
  .pack-heading h2 { font-size: 18px; }
  .pack-engineer { gap: 9px; }
  .pack-variant { padding: 10px 13px; }
  .pack-variant p { font-size: 11px; }
  .pack-variant small { margin-top: 4px; }
}
@media (max-width: 540px) {
  .placa-taller-centrada { padding: 24px 18px; }
  .hero-mecanic { padding-top: 28px; }
  .banner-separado-negro { padding: 24px 5px; }
  .typewriter-word, .typewriter-cursor { font-size: 21px; }
  .taller-chip-gris { font-size: 9px; padding: 7px; }
  .taller-galleta-contenido { padding: 18px; gap: 18px; }
  .galleta-col + .galleta-col { border-left: 0; border-top: 1px solid var(--borde-metal); padding: 18px 0 0; }
  .pack-workspace { padding: 10px 12px; gap: 10px; min-height: 690px; }
  .pack-topline > span { font-size: 8px; }
  .pack-stage { grid-template-rows: 145px minmax(0, 1fr); gap: 12px; }
  .pack-car { grid-template-columns: minmax(0, 1fr) 83px; gap: 10px; }
  .pack-car-title { padding: 12px; }
  .pack-car-title h1 { font-size: 19px; }
  .pack-car-title p { font-size: 11px; }
  .pack-car-title .estado { font-size: 7px; padding: 3px 5px; }
  .pack-specs dt { font-size: 8px; }.pack-specs dd { font-size: 10px; }
  .pack-heading h2 { font-size: 17px; }.pack-heading span { font-size: 9px; }
  .pack-tab { font-size: 10px; padding-block: 9px; }.pack-tab span { margin-left: 2px; font-size: 8px; }
  .pack-variant { padding: 9px 10px; gap: 8px; }
  .pack-variant h3 { font-size: 14px; margin-bottom: 4px; }
  .pack-variant p { font-size: 10px; line-height: 1.4; }
  .pack-variant small { font-size: 8px; }
  .pack-variant .btn-voto { font-size: 9px; padding: 4px; }
  .pack-download { padding: 9px 7px; font-size: 10px; }
  .pack-vote-note { font-size: 9px; }
  .pack-dock { padding: 12px; gap: 10px; }
  .pack-dock strong { font-size: 12px; }.pack-dock small, .pack-dock .paq-cuenta { font-size: 9px; }
  .pack-dock .btn { padding: 12px; font-size: 11px; white-space: normal; max-width: 130px; }
}
/* El zoom y las ventanas muy bajas pueden crecer sin recortar contenido. */
@media (max-height: 620px) { .pack-workspace { height: auto; min-height: 640px; } }
@media (prefers-reduced-motion: reduce) {
  .btn-taller-masivo::after { display: none; }
  .galleta-serie:hover, .ficha-cajita:hover, .tarjeta-coche-capa:hover { transform: none; }
}

/* Las diez variantes juntas: Safe naranja, Balance verde, Agresivo azul. */
.pack-all-variants { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:10px; min-height:0; }
.pack-compact { --estilo:#ff9b45; padding:10px 12px; display:flex; flex-direction:column; justify-content:center; gap:7px; border:1px solid color-mix(in srgb,var(--estilo) 30%,transparent); border-top:2px solid var(--estilo); background:linear-gradient(150deg,color-mix(in srgb,var(--estilo) 7%,#111914),#0b120e); }
.pack-compact[data-style="aggressive"] { --estilo:#73b9ff; border-left-color:color-mix(in srgb,var(--estilo) 30%,transparent); }
.pack-compact[data-style="balance"] { --estilo:var(--verde); border-left-color:color-mix(in srgb,var(--estilo) 30%,transparent); }
.pack-compact .pack-download, .pack-pending { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; width:100%; min-height:40px; border:0; border-radius:4px; padding:3px 5px; text-align:left; color:var(--estilo); background:none; }
.pack-compact .pack-download strong, .pack-pending strong { color:var(--estilo); font:650 15px var(--f-cuerpo); }
.pack-compact .pack-download span, .pack-pending span { color:#b8c5be; font:10px var(--f-cuerpo); }
.pack-compact .pack-download:hover { background:color-mix(in srgb,var(--estilo) 12%,transparent); color:var(--estilo); }
.pack-compact-bottom { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.pack-rating { font:9px var(--f-mono); color:var(--metal); padding-left:5px; }
.pack-compact .voto-btn-group { border:0; background:#0002; }
.pack-compact .btn-voto { padding:3px 7px; min-height:24px; font-size:10px; }
.pack-qualy { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; }
.pack-qualy .pack-download { width:auto; min-width:45%; }
.pack-qualy .pack-compact-bottom { gap:15px; }
@media(max-width:540px) {
  .pack-all-variants { gap:7px; }
  .pack-compact { padding:6px; gap:3px; }
  .pack-compact .pack-download, .pack-pending { padding:2px; min-height:38px; }
  .pack-compact .pack-download strong, .pack-pending strong { font-size:12px; }
  .pack-compact .pack-download span, .pack-pending span { font-size:8px; }
  .pack-compact .btn-voto { padding:3px 6px; min-height:23px; font-size:9px; }
  .pack-rating { font-size:8px; padding-left:2px; }
}

/* Materiales de la casa: carbono forjado, tejido y aluminio cepillado. */
:root {
  --fondo:#090a0a; --fondo-2:#101411; --panel-solido:#121514; --panel-2:#191e1b;
  --panel:rgba(20,23,22,.94); --verde-osc:#10291b;
  --borde-metal:rgba(194,202,198,.20);
  --tejido:repeating-linear-gradient(45deg,#ffffff03 0 1px,transparent 1px 5px), repeating-linear-gradient(-45deg,#00000014 0 2px,transparent 2px 6px);
}
body {
  background:radial-gradient(ellipse at 0% 0%,#15302125,transparent 48%),#090a0a;
}
.nav { background:linear-gradient(180deg,#242726f5,#101312f5); border-bottom-color:#ff7a1a50; box-shadow:0 3px 16px #0005,inset 0 1px #ffffff09; }
.nav::after { background:linear-gradient(90deg,transparent,var(--naranja),#84968b,var(--verde),transparent); opacity:.65; }
.hero-mecanic { border-bottom-color:#ffffff12; }
.placa-taller-centrada { background:linear-gradient(130deg,#ffffff08,transparent 45%),var(--tejido),linear-gradient(145deg,#202322,#111713 65%,#0b0d0c); border-color:#b8c3bc4a; }
.placa-taller-centrada::before { background:linear-gradient(90deg,transparent,#ff7a1a70,transparent); height:1px; inset:0 8% auto; opacity:.8; }
.banner-separado-negro { background:linear-gradient(180deg,#080909,#030404); border-color:#9da8a138; border-bottom-color:#ff7a1a55; }
.taller-chip-gris { background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),linear-gradient(120deg,#2b2f2d,#1b1f1d); border-color:#a9b1ad38; color:#d0d5d2; }
.taller-galleta-contenido { background:var(--tejido),#090d0b; border-color:#a4b7ac26; }
.galleta-kicker { color:var(--naranja-2); }
.placa-taller { background:var(--superficie); border-top-color:#b7c0ba60; border-bottom-color:#ff7a1a40; }
.filtros { background:var(--superficie); border-top-color:#9ba69e55; border-bottom-color:#ff7a1a35; }
.filtros :is(select,input) { background-color:#0a0d0b; border-color:#b3c0b22e; }
.dashboard-nav-tabs { border-bottom-color:#ff7a1a35; }
.galleta-serie, .ficha-cajita { background:linear-gradient(145deg,#252827ed,#0e1210f5); border-top-color:#b7bdb955; }
.galleta-serie-preview, .ficha-cajita-img { border-color:#a7b3ab30; }
.galleta-serie-badge:not(.fixed) { background:#2ee57a0a; border-color:#2ee57a33; }
.galleta-serie-chip { background:#ffffff03; border-color:#c1c8c11c; }
.galleta-serie-btn { color:var(--naranja-2); border-color:#ff7a1a55; background:#ff7a1a06; }
.galleta-serie:hover .galleta-serie-btn { color:var(--naranja-2); border-color:#ff7a1aaa; background:#ff7a1a12; }
.galleta-serie:hover, .ficha-cajita:hover { border-color:#ff7a1a80; box-shadow:0 12px 28px #0007,inset 0 1px #ffffff10; }
.capa-coche-banner { background:var(--tejido),#111813; border-color:#a7b3ab30; border-left:2px solid var(--naranja); }
.tarjeta-coche-capa { background:var(--superficie); }
.tarjeta-plan-taller { background:var(--superficie); border-top-color:#a6afa75c; }
.tarjeta-plan-taller.plan-destacado { background:radial-gradient(ellipse at top right,#2ee57a0a,transparent 65%),var(--superficie); border-color:#ff7a1a65; box-shadow:var(--sombra-taller); }
.btn-social { background:linear-gradient(170deg,#242825,#111512); border-color:#b8c0ba38; }
.btn-social:hover { background:linear-gradient(170deg,#303631,#171e19); }
.pack-visual { border-color:#b5c0b43d; }
.pack-compact { background:linear-gradient(145deg,color-mix(in srgb,var(--estilo) 3%,#202321),#0d100f); }
.pack-dock { background:var(--tejido),linear-gradient(130deg,#202622,#101612); border-color:#a5b5a838; border-top-color:#c8d0c550; }
.pack-dock .btn { background:linear-gradient(120deg,#ff9b45,#ff7a1a); border-color:#ffd2a66b; color:#180d04; box-shadow:inset 0 1px #ffffff40,0 3px 10px #0004; }
.pack-dock .btn:hover { background:#ffa65c; box-shadow:0 4px 18px #ff7a1a25; }
.modal-taller-contenido { background:var(--superficie); border-color:#a7b3ab40; box-shadow:0 25px 70px #000a; }
#pagPie { background:var(--tejido),#0a0d0b; border-top-color:#ff7a1a40; }

body { background-size:auto,256px 256px,auto; }

/* Luz ambiental y superficies limpias. Sin remaches ni patrón de copos. */
body { background:radial-gradient(ellipse at 15% 0%,#14332324,transparent 50%),radial-gradient(ellipse at 95% 60%,#ff7a1a06,transparent 48%),#080a09; background-size:auto; }
.placa-taller-remaches { display:none; }
.placa-taller-centrada { isolation:isolate; background:linear-gradient(125deg,#1b201ddd,#101411f5); border:1px solid #d0ddd026; box-shadow:0 25px 80px #0006,inset 0 1px #ffffff0d; }
.placa-taller-centrada::after { content:''; position:absolute; inset:-20%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 15% 12%,#2ee57a16,transparent 42%),radial-gradient(ellipse at 90% 85%,#ff7a1a14,transparent 42%); animation:atelier-lumiere 9s ease-in-out infinite alternate; }
.placa-taller-centrada::before { content:''; position:absolute; inset:0 0 auto; height:1px; width:100%; background:linear-gradient(90deg,transparent 5%,#2ee57a88 25%,#d8e4dd77 50%,#ff7a1aaa 75%,transparent 95%); opacity:.8; animation:atelier-reflet 7s ease-in-out infinite alternate; }
.taller-galleta-contenido { background:#090e0b60; border-color:#cbd5cd1a; }
.pack-dock { background:linear-gradient(110deg,#1a211c,#101512); }
.galleta-serie, .ficha-cajita { background:linear-gradient(135deg,#222724,#111612); }
#pagPie { margin-top:30px; padding:34px 0 22px; background:linear-gradient(180deg,#111612,#090c0a); border-top:1px solid #b5c2b71c; }
#pagPie::before { background:linear-gradient(90deg,transparent,#2ee57a66 30%,#ff7a1a88 70%,transparent); opacity:.6; }
.footer-studio { max-width:1280px; padding:0 32px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:center; }
.footer-identity .marca { font-size:13px; gap:10px; letter-spacing:.05em; }
.footer-identity p { margin:10px 0 0; font-size:12px; color:#93a198; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:26px; }
.footer-links a { font:500 12px var(--f-cuerpo); color:#c2ccc5; transition:color .2s, text-shadow .2s; }
.footer-links a:hover { color:var(--naranja-2); text-shadow:0 0 18px #ff7a1a44; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:20px; border-top:1px solid #c5d0c317; font:10px var(--f-cuerpo); color:#85958a; }
.footer-bottom nav { display:flex; gap:22px; }
.footer-bottom a { color:#a2b1a7; }.footer-bottom a:hover { color:var(--verde); }
.footer-trademark { grid-column:1/-1; max-width:80ch; color:#718077; font:10px/1.5 var(--f-cuerpo); margin:-10px 0 0; }
.registro-legal { border:1px solid #b0c5b22e; border-radius:6px; padding:16px; margin:16px 0; background:#0a100d; }
.registro-legal select { width:100%; margin:8px 0; padding:10px; background:#101b14; color:#e7efe9; border:1px solid #567061; border-radius:4px; font:13px var(--f-cuerpo); }
.registro-legal > label { font-size:12px; }.registro-legal .policy-check { font-size:12px; line-height:1.5; }
button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
@keyframes atelier-lumiere { from { transform:translate(-2%,-1%); opacity:.45; } to { transform:translate(3%,3%); opacity:1; } }
@keyframes atelier-reflet { from { transform:translateX(-15%); opacity:.4; } to { transform:translateX(15%); opacity:.9; } }
@media(max-width:640px) { .footer-studio { grid-template-columns:1fr; gap:22px; padding-inline:24px; }.footer-links { justify-content:flex-start; gap:22px; }.footer-bottom { gap:16px; }.footer-trademark { margin:0; } }
@media(prefers-reduced-motion:reduce) { .placa-taller-centrada::before,.placa-taller-centrada::after { animation:none; } }

/* Audited series branding and accessible multi-class car selection. */
.galleta-serie .serie-identidad { height:auto; aspect-ratio:16/9; background:#090c0b; overflow:hidden; border:1px solid rgba(225,234,228,.1); }
.galleta-serie .serie-identidad img { width:100%; height:100%; display:block; object-fit:contain; }
.galleta-serie .serie-identidad-texto { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:24px; background:radial-gradient(ellipse at 100% 0,rgba(233,123,30,.12),transparent 70%),#101413; }
.serie-identidad-texto span,.serie-identidad-texto small { font:10px var(--f-mono); letter-spacing:.12em; color:var(--texto-2); }
.serie-identidad-texto strong { color:#f1f4f2; font-size:21px; line-height:1.25; }
.clase-imsa + .clase-imsa { margin-top:24px; }
.clase-imsa-cabecera { display:flex; align-items:center; gap:12px; padding:10px 0; margin-bottom:10px; border-bottom:1px solid rgba(220,230,224,.14); }
.clase-imsa-cabecera h5 { margin:0; color:#f1f4f2; font:700 16px var(--f-mono); letter-spacing:.08em; }
.clase-imsa-cabecera::before { content:''; height:18px; width:3px; background:var(--naranja,#ff8a23); border-radius:2px; }
.clase-imsa-cabecera span { color:var(--texto-2); font:11px var(--f-mono); }
button.tarjeta-coche-capa { color:inherit; font:inherit; text-align:center; cursor:pointer; width:100%; min-width:0; }
.tarjeta-coche-capa img { aspect-ratio:16/9; width:100%; height:auto; object-fit:contain; background:#080b0a; }
.coche-capa-nombre { display:block; font-size:12px; font-weight:700; line-height:1.4; margin:8px 0 12px; }
.coche-capa-datos { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; font:10px var(--f-mono); color:var(--verde); }
.coche-capa-datos .estado { font-size:8px; padding:2px 5px; }
.galleta-serie:focus-visible,.tarjeta-coche-capa:focus-visible { outline:2px solid var(--naranja,#ff8a23); outline-offset:4px; }
@media(max-width:600px) { .clase-imsa .capa-coche-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .coche-capa-datos { flex-wrap:wrap; } }

.admin-huella-panel{padding:22px;margin-bottom:24px;border:1px solid #526059;border-radius:10px;background:#101513;display:grid;gap:12px}
.admin-huella-panel h3,.admin-huella-panel p{margin:0}.admin-huella-panel p{color:var(--texto-2);font-size:13px}
.admin-huella-panel label{display:grid;gap:6px;font-size:13px}.admin-huella-panel input{width:100%;min-width:0;padding:10px;background:#080c0a;color:#fff;border:1px solid #526059;border-radius:6px}
.admin-huella-acciones{display:flex;gap:10px;flex-wrap:wrap}.admin-huella-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px var(--f-mono);margin:0;color:var(--texto-2)}
.pack-topline #bFavorito{appearance:none;background:#101713;color:var(--verde,#21df78);border:1px solid #3a5346;border-radius:6px;padding:6px 12px;font:600 11px var(--f-mono);max-width:150px;cursor:pointer;transition:border-color .2s,background .2s}
.pack-topline #bFavorito:hover,.pack-topline #bFavorito[aria-pressed="true"]{border-color:var(--naranja,#ff8a23);background:#242017;color:var(--naranja,#ff8a23)}
.pack-topline #bFavorito:focus-visible{outline:2px solid var(--naranja,#ff8a23);outline-offset:3px}
/* Prioridad sobre el estilo compacto: naranja en reposo y verde al guardar. */
.pack-variant .btn-voto,.pack-compact .btn-voto { color:var(--naranja); }
.pack-variant .btn-voto.activo,.pack-compact .btn-voto.activo { color:var(--verde); border-color:var(--naranja); }
@media (pointer:coarse) { .pack-compact .btn-voto { min-width:44px; min-height:44px; } }
#bFavorito { display:inline-flex; align-items:center; gap:7px; color:var(--naranja); border-color:rgba(255,138,39,.4); }
#bFavorito[aria-pressed="true"] { color:var(--verde); border-color:var(--naranja); }
#bFavorito[aria-pressed="true"] svg { fill:rgba(46,229,122,.15); }
.pack-topline #bFavorito { color:var(--naranja); border-color:rgba(255,138,39,.4); }
.pack-topline #bFavorito[aria-pressed="true"] { color:var(--verde); border-color:var(--naranja); }
#formCorreo.cuenta-rejilla { display:block; max-width:680px; }
/* Evidencias de biblioteca: avance e historial separados de la variante. */
.pack-car { grid-template-rows:minmax(140px,1fr) auto auto; }
.pack-car > .pack-visual { grid-row:1; }
.pack-car > .pack-specs { grid-row:2; }
.pack-evidence { grid-column:1 / -1; grid-row:3; min-width:0; font:12px/1.5 var(--f-cuerpo); color:var(--texto-2); padding-top:10px; }
.pack-evidence summary { cursor:pointer; color:var(--naranja,#ff8b22); font-size:12px; }
.pack-evidence p { margin:7px 0 0; font-size:12px; line-height:1.5; }
@media(max-width:1000px) {
 .pack-stage { grid-template-rows:auto minmax(0,1fr); }
 .pack-car { grid-template-rows:180px auto; }
 .pack-car > .pack-visual { grid-column:1; grid-row:1; }
 .pack-car > .pack-specs { grid-column:2; grid-row:1; }
 .pack-evidence { grid-row:2; }
}
@media(max-width:600px) {
 .pack-workspace { height:auto; min-height:calc(100dvh - 80px); }
 .pack-car { grid-template-rows:145px auto; }
}
/* Móvil: tres variantes por fila; el banco y los pulgares bajan a dos líneas dentro de su tarjeta. */
@media(max-width:540px) {
 .pack-compact:not(.pack-qualy) .pack-compact-bottom { flex-wrap:wrap; }
 .pack-compact:not(.pack-qualy) .pack-rating { flex-basis:100%; padding-left:0; overflow-wrap:anywhere; }
 .pack-compact:not(.pack-qualy) .voto-btn-group { width:100%; justify-content:space-between; }
}

/* Título MECANIC SETUPS: el cromado de siempre con una franja de carreras verde en
   MECANIC y naranja en SETUPS, y un brillo suave de su color (orden de Patxi, 21-oct). */
.typewriter-word .tw-mecanic, .typewriter-word .tw-setups {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-repeat: no-repeat; background-size: 100% 18%, 100% 9%, 100% 100%;
  background-position: 0 58%, 0 86%, 0 0;
}
.typewriter-word .tw-mecanic {
  background-image: linear-gradient(90deg, #2ee57a 0 70%, #2ee57a00 100%), linear-gradient(90deg, #2ee57a 0 40%, #2ee57a00 75%),
    linear-gradient(#fff 30%, #becbc4 55%, #f0f5f2 80%);
  text-shadow: 0 2px 1px #000, 0 0 18px #2ee57a40;
}
.typewriter-word .tw-setups {
  background-image: linear-gradient(270deg, #ff7a1a 0 70%, #ff7a1a00 100%), linear-gradient(270deg, #ff7a1a 0 40%, #ff7a1a00 75%),
    linear-gradient(#fff 30%, #becbc4 55%, #f0f5f2 80%);
  text-shadow: 0 2px 1px #000, 0 0 18px #ff7a1a40;
}

/* La tarjeta de la portada deja ver un poco las chispas de js/chispas.js por debajo. */
.hero-mecanic .placa-taller-centrada { background:linear-gradient(125deg,#1b201da6,#101411c4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

/* Botón de pagar: naranja y en varios sitios (orden de Patxi, 21-oct). Quien ya tiene
   acceso no lo ve (body.con-acceso, lo pone app.js). */
.btn-pagar { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:8px; border:1px solid #ffb070; background:linear-gradient(180deg,#ff8f33,#ff6a00); color:#160900; font:inherit; font-size:14px; font-weight:800; letter-spacing:.02em; line-height:1.2; text-decoration:none; cursor:pointer; box-shadow:0 0 0 1px #ff7a1a33,0 8px 24px #ff7a1a40; transition:filter .15s,box-shadow .15s; }
.btn-pagar:hover { filter:brightness(1.08); box-shadow:0 0 0 1px #ff7a1a66,0 10px 30px #ff7a1a66; }
.btn-pagar:focus-visible { outline:2px solid #ffd0a8; outline-offset:3px; }
.btn-pagar:disabled { opacity:.55; cursor:default; filter:grayscale(.3); }
.btn-pagar-nav { padding:6px 14px; font-size:12px; margin-left:6px; }
body.con-acceso .solo-sin-acceso, body.con-sesion .solo-sin-sesion { display:none !important; }
/* Portada: lo primero es que registrarse es gratis; el pago va en las páginas de dentro. */
.btn-gratis-grande { display:flex; width:100%; justify-content:center; align-items:center; gap:8px; margin-top:12px; padding:15px 20px; border:1px solid #2ee57a88; border-radius:8px; background:#2ee57a14; color:#eafff2; font-size:16px; font-weight:700; letter-spacing:.02em; text-decoration:none; text-align:center; }
.btn-gratis-grande:hover { background:#2ee57a26; border-color:var(--verde); }
.btn-gratis-grande b { color:var(--verde); font-weight:800; }

/* Mi cuenta: primero Google y «Crear cuenta»; la contraseña, aparte, para quien ya la
   tiene (la gente nueva no entendía que le pidiera contraseña, 21-oct). */
#cuRegistro .cuenta-paso { margin:6px 0 10px; color:var(--texto-2); font-size:14px; }
#cuRegistro .btn-crear-cuenta { display:flex; width:100%; justify-content:center; margin-top:12px; padding:13px 18px; font-weight:800; }
#cuRegistro .cuenta-separador { display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--texto-2); font-size:13px; }
#cuRegistro .cuenta-separador::before, #cuRegistro .cuenta-separador::after { content:''; flex:1; height:1px; background:#ffffff1f; }
/* En móvil .btn va a todo lo ancho: «Mostrar» se comía la casilla de la contraseña. */
.password-fila .btn { width:auto; flex:0 0 auto; }
/* El botón naranja del menú no lleva el estilo ni la flecha de los botones del menú. */
.nav-links > button.btn-pagar, .nav-links > button.btn-pagar:hover { color:#160900; background:linear-gradient(180deg,#ff8f33,#ff6a00); padding:6px 14px; }
.nav-links > button.btn-pagar::after { content:none; }
@media (max-width:860px) { .nav-links > button.btn-pagar { padding:12px 14px; margin:8px 0 0; font-size:15px; } }