/* G44 USA · carros compactos · «Green light»: un semáforo fijo cuenta la semana del que va y viene a la oficina. Prefijo cc-. */
.p-compact-cars { --acento: #FFB020; --cc-rojo: #FF3B30; --cc-ambar: #FFB020; --cc-verde: #39FF14; }

@property --luz { syntax: '<color>'; inherits: true; initial-value: #FF3B30; }

/* ---------- semáforo genérico (hero, firma y cierre) */
.cc-sem { display: inline-flex; gap: 5px; padding: 5px 7px; border-radius: 11px; background: #050505; border: 1px solid #2c2c2c; box-shadow: inset 0 0 8px rgba(0, 0, 0, .8); }
.cc-sem i { width: 13px; height: 13px; border-radius: 50%; transition: background .25s, box-shadow .25s; }
.cc-sem__r { background: #3a1210; } .cc-sem__a { background: #3a2a0a; } .cc-sem__v { background: #0e2a09; }
.cc-sem.rojo .cc-sem__r, .rojo > .cc-sem .cc-sem__r, .rojo .cc-arr__cab .cc-sem__r { background: var(--cc-rojo); box-shadow: 0 0 12px var(--cc-rojo); }
.amarillo .cc-arr__cab .cc-sem__a { background: var(--cc-ambar); box-shadow: 0 0 12px var(--cc-ambar); }
.cc-sem.verde .cc-sem__v, .verde .cc-arr__cab .cc-sem__v { background: var(--cc-verde); box-shadow: 0 0 12px var(--cc-verde); }

/* ---------- hero */
.cc-hx .hx__fondo { background: radial-gradient(80% 50% at 85% 8%, rgba(255, 59, 48, .2), transparent 60%), radial-gradient(70% 50% at 10% 85%, rgba(255, 176, 32, .14), transparent 70%), var(--negro); }
.cc-hx .hx__titulo { font-size: clamp(42px, 12.2vw, 90px); }
.cc-hx .hx__titulo em { color: var(--cc-verde); text-shadow: 0 0 26px rgba(57, 255, 20, .5); }
.cc-hx__sem { position: absolute; right: 14px; top: 38%; }
.cc-hx__sem .cc-sem { flex-direction: column; padding: 7px 6px; gap: 6px; border-radius: 13px; box-shadow: 0 10px 26px rgba(0, 0, 0, .6); }
.cc-hx__sem .cc-sem i { width: 16px; height: 16px; }
.cc-hx__sem .cc-sem__r { animation: cc-ciclo-r 4.5s infinite; } .cc-hx__sem .cc-sem__a { animation: cc-ciclo-a 4.5s infinite; } .cc-hx__sem .cc-sem__v { animation: cc-ciclo-v 4.5s infinite; }
@keyframes cc-ciclo-r { 0%, 40% { background: var(--cc-rojo); box-shadow: 0 0 14px var(--cc-rojo); } 41%, 100% { background: #3a1210; box-shadow: none; } }
@keyframes cc-ciclo-a { 0%, 40%, 56%, 100% { background: #3a2a0a; box-shadow: none; } 41%, 55% { background: var(--cc-ambar); box-shadow: 0 0 14px var(--cc-ambar); } }
@keyframes cc-ciclo-v { 0%, 55% { background: #0e2a09; box-shadow: none; } 56%, 100% { background: var(--cc-verde); box-shadow: 0 0 14px var(--cc-verde); } }
.captura .cc-hx__sem .cc-sem i { animation: none !important; }
.captura .cc-hx__sem .cc-sem__v { background: var(--cc-verde); box-shadow: 0 0 14px var(--cc-verde); }
.p-compact-cars .hx__chip { width: 31%; right: -1%; bottom: -36px; }
.p-compact-cars .hx__antes { bottom: 12px; }
.cc-hx .hx__antes b { color: var(--cc-verde); }

/* ---------- la semana (contenedor con el HUD fijo) */
.cc-dia { position: relative; padding: 76px 0 30px; --luz: var(--cc-rojo); background: radial-gradient(100% 40% at 50% 0%, color-mix(in srgb, var(--luz) 9%, transparent), transparent 70%), var(--negro); transition: --luz .6s; }
.cc-dia[data-fase="amarillo"] { --luz: var(--cc-ambar); }
.cc-dia[data-fase="verde"] { --luz: var(--cc-verde); }
.cc-dia__intro .letrero { color: var(--cc-ambar); }
.cc-dia__intro .bajada { margin-bottom: 18px; }
.cc-dia__in { display: grid; gap: 0; }

/* HUD: semáforo + estado + reloj (barra fija arriba en el celular, columna fija en escritorio) */
.cc-hud { position: sticky; top: calc(var(--cab) + 8px); z-index: 6; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(10, 10, 10, .93); border: 1px solid color-mix(in srgb, var(--luz) 45%, #222); box-shadow: var(--sombra), 0 0 30px color-mix(in srgb, var(--luz) 14%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .5s, box-shadow .5s; }
.cc-hud__caja { display: flex; gap: 6px; padding: 6px 8px; border-radius: 13px; background: #040404; border: 1px solid #2a2a2a; }
.cc-l { position: relative; width: 20px; height: 20px; border-radius: 50%; transition: background .35s, box-shadow .35s; }
.cc-l--rojo { background: #3a1210; } .cc-l--amarillo { background: #3a2a0a; } .cc-l--verde { background: #0e2a09; }
.cc-dia[data-fase="rojo"] .cc-l--rojo { background: var(--cc-rojo); box-shadow: 0 0 16px var(--cc-rojo), inset 0 -4px 8px rgba(0, 0, 0, .25); }
.cc-dia[data-fase="amarillo"] .cc-l--amarillo { background: var(--cc-ambar); box-shadow: 0 0 16px var(--cc-ambar), inset 0 -4px 8px rgba(0, 0, 0, .25); }
.cc-dia[data-fase="verde"] .cc-l--verde { background: var(--cc-verde); box-shadow: 0 0 16px var(--cc-verde), inset 0 -4px 8px rgba(0, 0, 0, .2); }
.cc-hud__txt { display: grid; min-width: 0; }
.cc-hud__txt b { color: var(--luz); font-size: 13px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.cc-hud__txt small { color: var(--gris-2); font-size: 12.5px; line-height: 1.25; }
.cc-hud__reloj { display: grid; justify-items: end; line-height: 1.05; }
.cc-hud__reloj small { color: var(--gris-2); font-size: 10.5px; letter-spacing: .16em; }
.cc-hud__reloj b { color: #fff; font-size: 17px; white-space: nowrap; }
.cc-hud__reloj b.cambia { animation: cc-flip .45s ease; }
@keyframes cc-flip { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
.cc-hud__leyenda { display: none; }

/* momentos */
.cc-m { --acento: var(--cc-rojo); min-height: 74vh; padding: 64px 0 34px; display: flex; flex-direction: column; justify-content: center; }
.cc-m--amarillo { --acento: var(--cc-ambar); }
.cc-m--verde { --acento: var(--cc-verde); }
.cc-m__hora { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--acento); font-size: 13px; letter-spacing: .18em; }
.cc-m__hora i { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }
.cc-m .titulo-sec { font-size: clamp(32px, 8.6vw, 54px); }
.cc-m__txt { margin: 0 0 22px; max-width: 48ch; color: #cfd3cb; font-size: 17px; }
.cc-foto { position: relative; margin: 0; }
.cc-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; border: 1px solid #262626; box-shadow: var(--sombra); }
.cc-foto figcaption { position: absolute; left: 12px; bottom: 12px; display: grid; padding: 9px 13px; border-radius: 13px; background: rgba(8, 8, 8, .85); border: 1px solid color-mix(in srgb, var(--acento) 50%, transparent); backdrop-filter: blur(6px); }
.cc-foto figcaption span { color: var(--gris-2); font-size: 10px; letter-spacing: .16em; }
.cc-foto figcaption b { color: var(--acento); font-size: 28px; line-height: 1.05; text-shadow: 0 0 14px color-mix(in srgb, var(--acento) 50%, transparent); }

/* registro del día (lunes rojo · jueves verde) */
.cc-rojo, .cc-gas, .cc-inst, .cc-cambia { display: grid; gap: 22px; }
.cc-log { list-style: none; margin: 0 0 18px; padding: 0; }
.cc-log li { position: relative; display: grid; grid-template-columns: 50px 16px 1fr; align-items: start; gap: 10px; padding: 0 0 14px; transition-delay: calc(var(--k) * .1s); }
.cc-log li::before { content: ""; position: absolute; left: 67px; top: 16px; bottom: -2px; width: 2px; background: #262626; }
.cc-log li:last-child::before { display: none; }
.cc-log span { color: var(--gris-2); font-size: 14px; padding-top: 1px; }
.cc-log i { width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }
.cc-log p { margin: 0; color: #e6e9e2; font-size: 16px; line-height: 1.4; }
.cc-log--rojo li:last-child p { color: #fff; font-weight: 700; }
.cc-log--verde i { background: var(--cc-verde); box-shadow: 0 0 10px var(--cc-verde); }

/* el retraso (ilustración en bucle) */
.cc-lag { padding: 16px; border-radius: 18px; background: #121212; border: 1px solid #262626; }
.cc-lag__fila { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--gris-2); font: 11.5px var(--t-dato); letter-spacing: .1em; text-transform: uppercase; }
.cc-lag__fila > div { position: relative; height: 12px; border-radius: 6px; background: #1f1f1f; }
.cc-lag__p { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; opacity: 0; }
.cc-lag__p--luz { left: 12%; background: var(--cc-verde); box-shadow: 0 0 12px var(--cc-verde); animation: cc-luz 3.2s infinite; }
.cc-lag__p--pie { left: 22%; background: var(--cc-ambar); box-shadow: 0 0 12px var(--cc-ambar); animation: cc-pie 3.2s infinite; }
.cc-lag__p--auto { left: 66%; background: #fff; animation: cc-auto 3.2s infinite; }
.cc-lag__hueco { position: absolute; left: 22%; top: 0; bottom: 0; width: 0; border-radius: 6px; background: repeating-linear-gradient(45deg, rgba(255, 59, 48, .9) 0 6px, rgba(255, 59, 48, .45) 6px 12px); animation: cc-hueco 3.2s infinite; }
@keyframes cc-luz { 0%, 4% { opacity: 0; transform: scale(.4); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-pie { 0%, 16% { opacity: 0; transform: scale(.4); } 20%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-hueco { 0%, 20% { width: 0; } 58%, 88% { width: 44%; } 100% { width: 44%; opacity: 0; } }
@keyframes cc-auto { 0%, 56% { opacity: 0; transform: scale(.4); } 60%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cc-lag__pie { margin: 4px 0 0; color: #e6e9e2; font-size: 14.5px; }
.cc-lag__pie small { margin-left: 6px; color: var(--gris-2); font: 10.5px var(--t-dato); letter-spacing: .14em; text-transform: uppercase; }
.captura .cc-lag__p { opacity: 1; animation: none !important; }
.captura .cc-lag__hueco { width: 44%; animation: none !important; }

/* gasolinera: etiqueta de ventana de carro nuevo */
.cc-etiqueta { padding: 16px 18px; border-radius: 14px; background: #f2f1ea; color: #111; box-shadow: var(--sombra); transform: rotate(-1.2deg); }
.cc-etiqueta > span { display: block; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid #111; font-size: 10.5px; letter-spacing: .14em; }
.cc-etiqueta div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-etiqueta b { font: italic 900 22px/1 var(--t-titulo); font-stretch: 116%; text-transform: uppercase; }
.cc-etiqueta i { color: #c4251c; font: 700 28px/1 var(--t-dato); font-style: normal; }
.cc-etiqueta p { margin: 10px 0 0; color: #333; font-size: 14.5px; line-height: 1.45; }

/* instalación */
.cc-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cc-pasos li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 16px; border-radius: 18px; background: #131313; border: 1px solid #262626; transition-delay: calc(var(--k) * .12s); }
.cc-pasos li > b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--cc-ambar); color: var(--cc-ambar); font-size: 17px; box-shadow: 0 0 14px rgba(255, 176, 32, .25); }
.cc-pasos h3 { margin: 2px 0 4px; color: #fff; font: italic 800 18px/1.1 var(--t-titulo); font-stretch: 112%; text-transform: uppercase; }
.cc-pasos p { margin: 0; color: #bfc4bb; font-size: 15px; }

/* 8 arranques */
.cc-llaves { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-llaves li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico num" "hora hora" "que que"; align-items: center; column-gap: 8px; padding: 11px 12px; border-radius: 14px; background: #131313; border: 1px solid #262626; transition: background .4s, border-color .4s, box-shadow .4s; transition-delay: calc(var(--k) * .14s); }
.cc-llaves i { grid-area: ico; font-style: normal; font-size: 17px; filter: grayscale(1) brightness(.7); transition: filter .4s; transition-delay: calc(var(--k) * .14s); }
.cc-llaves b { grid-area: num; color: var(--gris-2); font-size: 20px; }
.cc-llaves span { grid-area: hora; margin-top: 6px; color: var(--gris-2); font-size: 11.5px; letter-spacing: .08em; }
.cc-llaves small { grid-area: que; color: #8f948b; font-size: 13px; }
.cc-llaves.visto li { background: rgba(255, 176, 32, .09); border-color: rgba(255, 176, 32, .6); box-shadow: 0 0 16px rgba(255, 176, 32, .12); }
.cc-llaves.visto i { filter: none; }
.cc-llaves.visto b { color: var(--cc-ambar); }
.cc-llaves.visto small { color: #e6e9e2; }
.cc-aprende { margin-bottom: 12px; }
.cc-aprende__barra { height: 12px; border-radius: 6px; background: #1f1f1f; overflow: hidden; }
.cc-aprende__barra i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cc-ambar), var(--cc-ambar) 70%, var(--cc-verde)); box-shadow: 0 0 12px rgba(255, 176, 32, .4); transition: width 1.6s cubic-bezier(.3, .8, .3, 1) .5s; }
.cc-llaves.visto ~ .cc-aprende .cc-aprende__barra i { width: 100%; }
.cc-aprende p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 8px 0 0; font-size: 11.5px; letter-spacing: .12em; }
.cc-aprende span { color: var(--cc-ambar); } .cc-aprende b { color: #e6e9e2; font-weight: 400; }

/* firma · la arrancada */
.cc-verde { display: grid; gap: 18px; margin-bottom: 10px; }
.cc-verde .cc-foto img { aspect-ratio: 16 / 9; }
.cc-arr { padding: 16px; border-radius: 22px; background: linear-gradient(165deg, #151515, #0c0c0c); border: 1px solid rgba(57, 255, 20, .3); box-shadow: var(--sombra), inset 0 0 40px rgba(57, 255, 20, .04); -webkit-user-select: none; user-select: none; }
.cc-arr__cab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-bottom: 14px; }
.cc-arr__cab b { display: block; color: #fff; font: italic 900 20px/1 var(--t-titulo); font-stretch: 116%; text-transform: uppercase; }
.cc-arr__cab small { display: block; margin-top: 4px; color: var(--gris-2); font-size: 13px; }
.cc-arr__ilus { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 7px; border: 1px solid #333; color: var(--gris-2); font-size: 9.5px; letter-spacing: .14em; }
.cc-arr__pista { display: grid; gap: 8px; margin-bottom: 14px; }
.cc-carril { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.cc-carril__et { color: var(--gris-2); font-size: 11px; letter-spacing: .14em; }
.cc-carril--g .cc-carril__et { color: var(--cc-verde); }
.cc-carril__via { position: relative; height: 54px; border-radius: 12px; overflow: hidden; background: linear-gradient(#1a1a1a, #141414); border: 1px solid #262626; }
.cc-carril__via::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: repeating-linear-gradient(90deg, #3a3a3a 0 14px, transparent 14px 28px); }
.cc-carril__linea { position: absolute; top: 0; bottom: 0; left: 82px; width: 4px; background: repeating-linear-gradient(#e8e8e8 0 6px, transparent 6px 10px); opacity: .55; }
.cc-auto { position: absolute; bottom: 8px; left: calc((100% - 82px) * var(--x, 0)); width: 78px; height: auto; will-change: left; }
.cc-auto__cuerpo { fill: #8d9299; } .cc-auto__vid { fill: #1d2833; } .cc-auto__rueda { fill: #0a0a0a; stroke: #333; stroke-width: 1.4; } .cc-auto__rin { fill: #777; }
.cc-auto__tras { fill: var(--cc-rojo); } .cc-auto__del { fill: #ffe08a; }
.cc-carril--g .cc-auto__cuerpo { fill: #e3e6ea; }
.cc-carril--g .cc-auto { filter: drop-shadow(0 4px 6px rgba(57, 255, 20, .55)); }
.cc-arr__barras { display: grid; gap: 10px; margin-bottom: 16px; }
.cc-arr__barras > div { display: grid; gap: 5px; }
.cc-arr__barras span { color: var(--gris-2); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.cc-arr__barras .g span { color: var(--cc-verde); }
.cc-arr__barras i { display: block; height: 10px; border-radius: 5px; background: #1f1f1f; overflow: hidden; }
.cc-arr__barras em { display: block; height: 100%; width: 0; border-radius: 5px; background: #9a9a9a; }
.cc-arr__barras .g em { background: var(--cc-verde); box-shadow: 0 0 12px rgba(57, 255, 20, .5); }
.cc-pedal { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 14px; border: 2px solid var(--cc-verde); border-radius: 16px; background: linear-gradient(#1d1d1d, #111); color: #fff; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 0 #0a3a02, 0 0 26px rgba(57, 255, 20, .22); transition: transform .08s, box-shadow .08s, background .2s; }
.cc-pedal b { font: italic 900 19px/1 var(--t-titulo); font-stretch: 116%; text-transform: uppercase; letter-spacing: .02em; }
.cc-pedal__placa { width: 26px; height: 40px; border-radius: 6px 6px 9px 9px; background: repeating-linear-gradient(#5a5a5a 0 3px, #2a2a2a 3px 7px); border: 1px solid #666; transform: perspective(60px) rotateX(18deg); }
.cc-pedal.pisado { transform: translateY(5px); box-shadow: 0 1px 0 #0a3a02, 0 0 40px rgba(57, 255, 20, .5); background: linear-gradient(#173d0f, #0c1f08); }
.cc-pedal:disabled { opacity: .55; }
.cc-pedal:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cc-arr__msg { min-height: 1.4em; margin: 12px 0 0; color: #e6e9e2; font-size: 14.5px; text-align: center; }

/* qué cambia */
.cc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-tile { padding: 16px 14px; border-radius: 18px; background: #131313; border: 1px solid #262626; border-top: 2px solid var(--cc-verde); transition-delay: calc(var(--k) * .08s); }
.cc-tile i { font-style: normal; font-size: 24px; }
.cc-tile b { display: block; margin: 8px 0 6px; color: #fff; font: italic 800 16.5px/1.08 var(--t-titulo); font-stretch: 112%; text-transform: uppercase; }
.cc-tile p { margin: 0; color: #bfc4bb; font-size: 14px; line-height: 1.42; }

/* prueba honesta */
.cc-citas { display: grid; gap: 12px; margin-bottom: 18px; }
.cc-cita { position: relative; margin: 0; padding: 18px 18px 16px 46px; border-radius: 18px; background: #131313; border: 1px solid #262626; transition-delay: calc(var(--k) * .1s); }
.cc-cita__luz { position: absolute; left: 18px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--cc-verde); box-shadow: 0 0 12px var(--cc-verde); }
.cc-cita blockquote { margin: 0 0 10px; color: #fff; font-size: 17px; line-height: 1.45; }
.cc-cita figcaption { color: var(--gris-2); font-size: 13px; }
.cc-cita figcaption b { display: block; color: #fff; font: italic 800 15px var(--t-titulo); font-stretch: 110%; text-transform: uppercase; }
.cc-honesto { display: grid; gap: 18px; padding: 20px 18px; border-radius: 22px; background: #101010; border: 1px solid #2a2a2a; border-left: 4px solid var(--cc-ambar); }
.cc-honesto .letrero { color: var(--cc-ambar); }
.cc-honesto blockquote { margin: 0 0 8px; color: #fff; font: italic 700 20px/1.3 var(--t-titulo); }
.cc-honesto__quien { margin: 0 0 12px; color: var(--gris-2); font-size: 13.5px; }
.cc-honesto__quien b { color: #fff; }
.cc-honesto__txt > p:last-child { margin: 0; color: #cfd3cb; font-size: 15.5px; }
.cc-medir { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cc-medir li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px; border-radius: 14px; background: #161616; }
.cc-medir li > b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cc-verde); color: #061200; font-size: 16px; }
.cc-medir h3 { margin: 2px 0 3px; color: #fff; font-size: 15.5px; }
.cc-medir p { margin: 0; color: #bfc4bb; font-size: 14px; line-height: 1.4; }

/* cierre */
.cc-final__sem { display: flex; justify-content: center; margin-bottom: 18px; }
.cc-final__sem .cc-sem { padding: 8px 10px; gap: 8px; border-radius: 14px; }
.cc-final__sem .cc-sem i { width: 22px; height: 22px; }
.cc-final__sem .cc-sem__v { background: var(--cc-verde); box-shadow: 0 0 20px var(--cc-verde); animation: latido 1.8s ease-in-out infinite; }
.cc-final .titulo-sec em { color: var(--cc-verde); text-shadow: 0 0 22px rgba(57, 255, 20, .45); }
.cc-final { background: radial-gradient(80% 60% at 50% 100%, rgba(57, 255, 20, .18), transparent 70%), #080808; }

/* ---------- escritorio */
@media (min-width: 900px) {
  .cc-dia__in { grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
  .cc-hud { top: calc(var(--cab) + 36px); grid-template-columns: 1fr; justify-items: center; gap: 16px; padding: 24px 20px; text-align: center; }
  .cc-hud__caja { flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 26px; }
  .cc-l { width: 58px; height: 58px; }
  .cc-l::before { content: ""; position: absolute; left: -8px; right: -8px; top: -6px; height: 22px; border-radius: 30px 30px 0 0; border-top: 6px solid #1a1a1a; }
  .cc-hud__txt b { font-size: 15px; white-space: normal; }
  .cc-hud__reloj { justify-items: center; }
  .cc-hud__reloj b { font-size: 30px; }
  .cc-hud__leyenda { display: grid; gap: 6px; width: 100%; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #222; text-align: left; }
  .cc-hud__leyenda li { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 8px; color: #6f6f6f; font-size: 13px; transition: color .3s; }
  .cc-hud__leyenda i { width: 10px; height: 10px; border-radius: 50%; background: #333; }
  .cc-hud__leyenda b { font: 400 11px var(--t-dato); letter-spacing: .14em; text-transform: uppercase; }
  .cc-dia[data-fase="rojo"] .cc-hud__leyenda [data-f="rojo"], .cc-dia[data-fase="amarillo"] .cc-hud__leyenda [data-f="amarillo"], .cc-dia[data-fase="verde"] .cc-hud__leyenda [data-f="verde"] { color: #fff; }
  .cc-hud__leyenda [data-f="rojo"] i { background: var(--cc-rojo); } .cc-hud__leyenda [data-f="amarillo"] i { background: var(--cc-ambar); } .cc-hud__leyenda [data-f="verde"] i { background: var(--cc-verde); }
  .cc-rojo, .cc-gas, .cc-inst { grid-template-columns: 1fr 1fr; align-items: start; }
  .cc-llaves { grid-template-columns: repeat(4, 1fr); }
  .cc-citas { grid-template-columns: repeat(3, 1fr); }
  .cc-honesto { grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px; }
}
@media (min-width: 1180px) { .cc-cambia { grid-template-columns: .9fr 1.1fr; align-items: start; } }

/* ---------- modo captura: todo visible y quieto */
.captura .cc-hud { position: relative !important; top: 0 !important; margin-bottom: 10px; }
.captura .cc-m { min-height: 0 !important; padding: 44px 0 16px !important; }
.captura .cc-aprende__barra i { transition: none; }
.captura .cc-hud__reloj b { animation: none !important; }