/* ============================================================ TESTS BOMBEROS · SISTEMA DE DISEÑO Dirección: "Cuadro de mandos de intervención" Grafito + hi-vis (banda reflectante) + rojo señal. Tipos: Saira Condensed (display) · Inter (cuerpo) · JetBrains Mono (datos) Las fuentes se cargan con en el de cada página. ============================================================ */ :root { /* ---- Superficies ---- */ --carbon: #14171c; /* mando / hero (grafito, no negro puro) */ --carbon-2: #1c2027; /* elevado oscuro */ --carbon-3: #262b34; /* bordes sobre oscuro */ --paper: #dde1e6; /* fondo de la app (lectura) */ --surface: #ffffff; /* tarjetas */ --surface-2: #f7f8fa; /* relleno suave */ /* ---- Acentos operativos ---- */ --ignition: #e8442d; /* rojo señal / alarma */ --ignition-2: #c1331f; /* rojo profundo (hover) */ --ignition-soft:#fdeae6; /* fondo rojo suave */ --hivis: #f5c518; /* amarillo hi-vis (la firma) */ --hivis-deep: #d8a800; --go: #16a35a; /* verde "correcto" operativo */ --go-soft: #e6f5ec; /* ---- Texto ---- */ --ink: #14171c; --ink-soft: #59616d; --ink-faint: #8a929d; --on-dark: #f4f5f7; --on-dark-soft:#aab2bd; /* ---- Líneas / sombras ---- */ --line: #e3e6ea; --line-strong: #d2d7dd; --shadow-sm: 0 1px 2px rgba(20,23,28,.06), 0 2px 6px rgba(20,23,28,.05); --shadow-md: 0 6px 20px rgba(20,23,28,.10); --shadow-lg: 0 18px 50px rgba(20,23,28,.18); --shadow-hero: 0 24px 70px rgba(20,23,28,.45); /* ---- Geometría ---- */ --r-sm: 8px; --r: 14px; --r-lg: 20px; /* ---- Tipos ---- */ --f-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; /* ---- Chevron hi-vis (la firma) ---- */ --hazard: repeating-linear-gradient( -45deg, var(--hivis) 0 16px, var(--carbon) 16px 32px); --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--paper); color-scheme: light; } body { margin: 0; min-height: 100vh; font-family: var(--f-body); background: var(--paper); color: var(--ink); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } ::selection { background: var(--hivis); color: var(--carbon); } /* Etiqueta "instrumento" reutilizable (eyebrow / dato) */ .eyebrow { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .55em; } .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--ignition); border-radius: 2px; transform: rotate(45deg); flex-shrink: 0; } /* ============================================================ BANDA HAZARD (chevron hi-vis) — la firma, arriba del todo ============================================================ */ .hazard-band { height: 6px; background: var(--hazard); background-size: 45px 45px; } @media (prefers-reduced-motion: no-preference) { .hazard-band { animation: hazard-slide 14s linear infinite; } } @keyframes hazard-slide { to { background-position: 45px 0; } } /* ============================================================ CABECERA ============================================================ */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 4vw, 28px); background: rgba(20,23,28,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--carbon-3); } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-dark); } .brand-mark { height: 42px; width: auto; flex-shrink: 0; display: block; object-fit: contain; /* Contorno amarillo hi-vis que sigue la forma del escudo (no un recuadro) */ filter: drop-shadow( 1.5px 0 0 var(--hivis)) drop-shadow(-1.5px 0 0 var(--hivis)) drop-shadow(0 1.5px 0 var(--hivis)) drop-shadow(0 -1.5px 0 var(--hivis)) drop-shadow( 1px 1px 0 var(--hivis)) drop-shadow(-1px -1px 0 var(--hivis)) drop-shadow( 1px -1px 0 var(--hivis)) drop-shadow(-1px 1px 0 var(--hivis)); } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-title { font-family: var(--f-display); font-weight: 700; font-size: 1.32rem; letter-spacing: .04em; text-transform: uppercase; } .brand-sub { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); margin-top: 4px; } .brand-sub b { color: var(--hivis); font-weight: 600; } .site-nav { margin-left: auto; display: flex; gap: 4px; } .site-nav a { position: relative; color: var(--on-dark-soft); text-decoration: none; font-family: var(--f-mono); font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: var(--r-sm); transition: color .18s var(--ease), background .18s var(--ease); } .site-nav a { white-space: nowrap; } .site-nav a:hover { color: var(--on-dark); background: rgba(255,255,255,.06); } .site-nav a.activa { color: var(--carbon); background: var(--hivis); } .site-nav a.nav-acceso { color: #fff !important; background: #e8242d !important; font-weight: 700; border-radius: 6px; box-shadow: 0 2px 8px rgba(232,36,45,.45); } .site-nav a.nav-acceso:hover { background: #c0141c !important; box-shadow: 0 4px 14px rgba(232,36,45,.6); transform: translateY(-1px); } /* ============================================================ CONTENEDOR ============================================================ */ .contenedor { max-width: 860px; margin: 0 auto; padding: clamp(20px, 4vw, 34px) clamp(16px, 4vw, 22px) calc(72px + env(safe-area-inset-bottom)); } /* ============================================================ HERO — la tesis: titular condensado + lectura de instrumento ============================================================ */ .hero { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--carbon); color: var(--on-dark); padding: clamp(30px, 6vw, 56px) clamp(22px, 5vw, 46px); margin-bottom: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-hero); isolation: isolate; } /* foto del oficio — protagonista */ .hero::before { content: ""; position: absolute; inset: 0; background: url("hero-bomberos.jpg?v=8") center 30% / cover no-repeat; opacity: .85; filter: contrast(1.05) saturate(1.1); z-index: -2; } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 0%, rgba(232,68,45,.18), transparent 55%), linear-gradient(180deg, rgba(20,23,28,.55), rgba(20,23,28,.80)); z-index: -1; } /* chevron de firma anclado a una esquina */ .hero-chevron { position: absolute; top: 0; right: 0; width: 120px; height: 100%; background: var(--hazard); background-size: 34px 34px; opacity: .9; -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); z-index: -1; pointer-events: none; } .hero-eyebrow { color: var(--hivis); margin-bottom: 18px; } .hero-eyebrow::before { background: var(--hivis); } .hero h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.5rem, 9vw, 4.4rem); line-height: .94; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 16px; max-width: 13ch; } .hero h1 .hl { color: var(--hivis); } .hero-sub { font-size: clamp(1rem, 2.6vw, 1.15rem); color: var(--on-dark-soft); max-width: 46ch; margin: 0 0 30px; } .hero-sub-roja { color: var(--ignition); } .hero-panel { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 4vw, 30px); } /* lectura de manómetro: gran cifra mono */ .readout { display: flex; align-items: baseline; gap: 12px; padding: 12px 20px 12px 0; border-right: 1px solid var(--carbon-3); } .readout-num { font-family: var(--f-mono); font-weight: 700; font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1; color: var(--hivis); font-variant-numeric: tabular-nums; } .readout-label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); line-height: 1.35; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Hero portada — versión grande centrada, ancho completo de pantalla */ .hero-portada { padding: clamp(70px, 14vw, 130px) clamp(22px, 6vw, 60px) clamp(60px, 12vw, 100px); text-align: center; border-radius: 0; /* rompe fuera del contenedor: ocupa todo el ancho de la pantalla, de lado a lado */ width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; /* pega la foto a la cabecera: cancela el padding superior del contenedor */ margin-top: calc(-1 * clamp(20px, 4vw, 34px)); } .hero-portada::before { opacity: .80; background: url("hero-bomberos.jpg?v=8") center center / cover no-repeat; } .hero-portada::after { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(232,68,45,.15), transparent 70%), linear-gradient(180deg, rgba(20,23,28,.50) 0%, rgba(20,23,28,.88) 100%); } .hero-eyebrow-center { justify-content: center; } .hero-h1-grande { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 8vw, 5rem); line-height: .96; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 20px; max-width: 100%; } .hero-h1-grande .hl { color: var(--hivis); } .hero-sub-center { max-width: 52ch; margin: 0 auto 28px; text-align: center; } .hero-social-proof { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; } .hero-avatares { display: flex; } .avatar-circulo { width: 36px; height: 36px; border-radius: 50%; background: var(--carbon-3); border: 2px solid var(--carbon); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-left: -8px; } .hero-avatares .avatar-circulo:first-child { margin-left: 0; } .hero-estrellas { color: var(--hivis); font-size: 1rem; } .hero-nota { font-weight: 700; color: #fff; margin-left: 4px; } .hero-sub-nota { color: var(--on-dark-soft); font-size: .88rem; } .hero-actions-center { justify-content: center; } /* ============================================================ PORTADA — el bombero (protagonista) a la DERECHA, titular y botones a la IZQUIERDA. El degradado oscurece solo la izquierda para que se lea el texto y deje ver la figura, limpia, en el lado derecho. ============================================================ */ .hero-portada { text-align: left; min-height: clamp(480px, 86vh, 760px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: clamp(48px, 9vw, 88px); padding-inline: clamp(24px, 6vw, 120px); } .hero-portada::before { background-position: center 22%; opacity: .95; } .hero-portada::after { background: linear-gradient(90deg, rgba(18,20,25,.72) 0%, rgba(18,20,25,.60) 26%, rgba(18,20,25,.34) 50%, rgba(18,20,25,.08) 78%, rgba(18,20,25,0) 100%), linear-gradient(0deg, rgba(18,20,25,.42), transparent 40%); } /* con la capa mas clara, reforzamos legibilidad del texto */ .hero-portada h1, .hero-portada .hero-sub-center, .hero-portada .hero-eyebrow-center { text-shadow: 0 2px 14px rgba(10,12,15,.85), 0 1px 3px rgba(10,12,15,.9); } /* columna de texto: ancho de lectura fijo, no crece con la pantalla */ .hero-portada > * { max-width: 560px; width: 100%; } .hero-portada .hero-eyebrow-center { justify-content: flex-start; } .hero-portada .hero-sub-center { margin: 0 0 28px; text-align: left; max-width: 46ch; } .hero-portada .hero-actions-center { justify-content: flex-start; } /* Sin chevron en la portada: la foto va limpia, sin retícula a la derecha */ .hero-portada .hero-chevron { display: none; } /* En móvil no hay "derecha": figura visible al fondo y texto centrado */ @media (max-width: 760px) { .hero-portada { align-items: center; text-align: center; min-height: clamp(320px, 48vh, 420px); } /* En vertical el texto es más alto que ancho es la pantalla: si la foto (muy panorámica) cubriera todo el bloque, saldría recortada casi por completo. Se deja como una franja fija arriba, con su proporción real, y el texto cae sobre fondo oscuro liso debajo. */ .hero-portada::before { inset: 0 0 auto 0; height: clamp(220px, 34vh, 320px); background-position: center center; } .hero-portada::after { background: linear-gradient(180deg, rgba(18,20,25,.15) 0%, rgba(18,20,25,.75) clamp(220px, 34vh, 320px), rgba(18,20,25,.97) calc(clamp(220px, 34vh, 320px) + 40px)); } .hero-portada > * { max-width: 100%; margin-inline: auto; } .hero-portada .hero-eyebrow-center { justify-content: center; } .hero-portada .hero-sub-center { margin: 0 auto 26px; text-align: center; } .hero-portada .hero-actions-center { justify-content: center; } } /* Cuadrícula de servicios de bomberos */ .servicios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: clamp(22px, 4vw, 34px); } @media (max-width: 700px) { .servicios-grid { grid-template-columns: repeat(2, 1fr); } } .servicio-card { position: relative; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 8px 0; transition: transform .22s cubic-bezier(.22,1,.36,1); } .servicio-card:hover { transform: translateY(-8px); } .servicio-escudo { width: auto; height: clamp(120px, 20vw, 180px); object-fit: contain; flex-shrink: 0; /* SIN filtros CSS: en Safari, cualquier drop-shadow sobre una imagen que se mueve al pasar el ratón pinta un rectángulo blanco. El relieve, la sombra y el difuminado van horneados dentro de las propias imágenes. En hover solo se eleva el escudo con transform, que Safari maneja sin artefactos. */ transition: transform .22s cubic-bezier(.22,1,.36,1); } .servicio-card:hover .servicio-escudo { transform: scale(1.06) translateY(-3px); } /* El escudo de CEIS se dibuja a sangre (sin margen interno) y por eso se veía más grande que SEPEI/SCIS aun midiendo lo mismo de alto: se reduce un poco. */ .servicio-escudo-ceis { height: clamp(102px, 17vw, 153px); } .servicio-card:hover .servicio-escudo-ceis { transform: scale(1.06) translateY(-3px); } /* Los escudos con relieve traen la sombra/extrusión horneada: nada de filtros. */ .escudo-relieve { filter: none; } /* Tarjetas rectangulares (portada IVASPE y foto de Hidráulica): sombra con box-shadow, que NO sufre el artefacto de Safari al animarse. */ #sc-ivaspe .servicio-escudo, .servicio-escudo-lanza { box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 3px 6px rgba(0,0,0,.18); } .servicio-nombre { color: var(--carbon); font-family: var(--f-display); font-weight: 700; font-size: clamp(.82rem, 1.8vw, 1rem); text-transform: uppercase; text-align: center; line-height: 1.2; } .servicio-nombre small { display: block; font-family: var(--f-body); font-size: .78em; font-weight: 500; text-transform: none; color: var(--ignition); margin-top: 3px; } /* La foto de Hidráulica básica se recorta a un cuadro compacto, del mismo tamaño que los escudos, para que ocupe una sola columna y la fila quede alineada con Alicante y Consorcio. */ .servicio-escudo-lanza { width: clamp(120px, 20vw, 180px); height: clamp(120px, 20vw, 180px); object-fit: cover; border-radius: 16px; } /* El logo de Aena es apaisado: lo encajamos en el mismo recuadro de altura que los escudos, ajustado al ancho de su columna y centrado, para que la tarjeta tenga el mismo formato que las demás sin desbordar. */ .servicio-escudo-aena { width: 100%; height: clamp(120px, 20vw, 180px); object-fit: contain; } /* Subtítulo de grupo dentro de la lista de baterías de la primera prueba. */ .grupo-baterias { margin: 14px 0 4px; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .5px; color: var(--ignition); } .grupo-baterias:first-child { margin-top: 0; } /* Vista de carpetas del SEPEI: dos tarjetas centradas, no las cuatro columnas. */ .carpetas-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin: 8px auto 0; } /* Las portadas de los ejercicios son apaisadas: foto completa en un recuadro redondeado, sin recortar, dentro del mismo formato de tarjeta. El "wrap" mantiene la proporción exacta de la imagen para poder superponer encima un rótulo de texto siempre alineado con la etiqueta del cuaderno. */ .carpeta-foto-wrap { position: relative; display: block; width: 100%; aspect-ratio: 679 / 442; } .servicio-foto-carpeta { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.18); } @media (max-width: 700px) { .carpetas-grid { grid-template-columns: 1fr; } } /* ============================================================ SECCIÓN DE VALORES ============================================================ */ .valores-seccion { margin-bottom: clamp(28px, 5vw, 46px); text-align: center; } .valores-eyebrow { justify-content: center; margin-bottom: 12px; } .valores-titulo { font-family: var(--f-display); font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.15; color: var(--carbon); margin: 0 0 36px; } .hl-dark { color: var(--ignition); } .valores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 640px) { .valores-grid { grid-template-columns: 1fr; } } .valor-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .valor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .valor-icono { width: 72px; height: 72px; border-radius: 50%; background: var(--ignition-soft); display: flex; align-items: center; justify-content: center; color: var(--ignition); flex-shrink: 0; } .valor-icono svg { width: 38px; height: 38px; } .valor-titulo { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; color: var(--carbon); text-transform: uppercase; letter-spacing: .02em; margin: 0; } .valor-texto { font-size: .95rem; color: var(--ink-soft); line-height: 1.55; margin: 0; } /* ============================================================ BOTONES ============================================================ */ .btn { --btn-bg: var(--ignition); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--btn-bg); color: var(--btn-fg); border: none; border-radius: var(--r-sm); padding: 14px 22px; font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; text-decoration: none; line-height: 1.1; min-height: 48px; transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease); } .btn:hover { background: var(--ignition-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0) scale(.985); } .btn:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; } .btn:disabled { background: #c9ced5; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; } /* primario explícito (hero) con leve realce */ .btn-primary { --btn-bg: var(--ignition); } /* secundario: contorno */ .btn.secundario { --btn-bg: transparent; --btn-fg: var(--ignition); border: 2px solid var(--ignition); padding: 12px 20px; } .btn.secundario:hover { background: var(--ignition-soft); color: var(--ignition-2); } /* fantasma sobre oscuro (hero) */ .btn-ghost { --btn-bg: rgba(255,255,255,.06); --btn-fg: var(--on-dark); border: 1px solid rgba(255,255,255,.22); } .btn-ghost:hover { --btn-bg: rgba(255,255,255,.12); background: rgba(255,255,255,.12); color:#fff; } /* gris neutro (utilidades) */ .btn.gris { --btn-bg: var(--surface-2); --btn-fg: var(--ink); border: 1px solid var(--line); } .btn.gris:hover { background: #eceef1; color: var(--ink); } .btn-fila { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .icono-svg { width: 1.3em; height: 1.3em; flex-shrink: 0; } /* ============================================================ TARJETAS ============================================================ */ .tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 4vw, 28px); box-shadow: var(--shadow-sm); margin-bottom: 20px; } .tarjeta > h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 4vw, 1.7rem); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; } .tarjeta > h2::before { content: ""; width: 6px; height: 1.05em; background: var(--ignition); border-radius: 2px; flex-shrink: 0; } /* ============================================================ SELECCIÓN DE MODO (inicio) ============================================================ */ .modos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; } .modo-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 4vw, 30px) clamp(20px, 4vw, 26px); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } /* borde hi-vis que "se enciende" al pasar */ .modo-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--hivis); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ease); } .modo-card:hover, .modo-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); outline: none; } .modo-card:hover::before, .modo-card:focus-visible::before { transform: scaleY(1); } .modo-card .icono { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 12px; background: var(--carbon); color: var(--hivis); margin-bottom: 14px; } .modo-card .icono svg { width: 26px; height: 26px; } .modo-card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; } .modo-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; } /* ============================================================ LISTA DE TEMAS (checkboxes) ============================================================ */ .temas-lista { display: grid; gap: 10px; margin: 18px 0; } .tema-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--surface); transition: background .15s var(--ease), border-color .15s var(--ease); } .tema-item:hover { background: var(--surface-2); border-color: var(--line-strong); } .tema-item:has(input:checked) { border-color: var(--ignition); background: var(--ignition-soft); } .tema-item:has(input:disabled) { opacity: .5; cursor: not-allowed; } .tema-item input { width: 20px; height: 20px; accent-color: var(--ignition); cursor: pointer; flex-shrink: 0; } .tema-item .nombre { flex: 1; font-weight: 500; } .tema-item .cuenta { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 20px; white-space: nowrap; } /* ============================================================ CONTROLES ============================================================ */ .control-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; } .control-fila label { font-weight: 600; } .control-fila input[type="number"] { width: 96px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 1rem; font-family: var(--f-mono); font-weight: 600; } .control-fila input[type="number"]:focus-visible { outline: 3px solid var(--hivis); outline-offset: 1px; border-color: var(--ignition); } select { padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 1rem; font-family: var(--f-body); width: 100%; background: var(--surface); cursor: pointer; } select:focus-visible { outline: 3px solid var(--hivis); outline-offset: 1px; border-color: var(--ignition); } /* ============================================================ PANTALLA DE PREGUNTAS — progreso tipo manómetro ============================================================ */ .barra-progreso-fondo { position: relative; background: var(--carbon); border-radius: 20px; height: 12px; overflow: hidden; margin-bottom: 18px; } /* marcas de escala del "manómetro" */ .barra-progreso-fondo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.16) calc(10% - 1px) 10%); pointer-events: none; } .barra-progreso { position: relative; height: 100%; width: 0%; background: var(--hazard); background-size: 28px 28px; border-radius: 20px; transition: width .45s var(--ease); z-index: 1; } .meta-pregunta { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 14px; } .etiqueta-tema { background: var(--carbon); color: var(--hivis); padding: 4px 12px; border-radius: 20px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .enunciado { font-size: clamp(1.15rem, 3vw, 1.35rem); font-weight: 600; line-height: 1.4; margin: 8px 0 20px; } .imagen-pregunta { border-radius: var(--r-sm); margin-bottom: 18px; border: 1px solid var(--line); } .opciones { display: grid; gap: 11px; } .opcion { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 2px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--surface); text-align: left; font-size: 1.02rem; width: 100%; font-family: var(--f-body); color: var(--ink); transition: border-color .14s var(--ease), background .14s var(--ease), transform .08s var(--ease); } .opcion:hover { border-color: var(--ignition); transform: translateX(2px); } .opcion:focus-visible { outline: 3px solid var(--hivis); outline-offset: 1px; } .opcion .letra { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-weight: 700; font-size: 1rem; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); } .opcion.seleccionada { border-color: var(--ignition); background: var(--ignition-soft); } .opcion.seleccionada .letra { background: var(--ignition); color: #fff; border-color: var(--ignition); } .opcion.correcta { border-color: var(--go); background: var(--go-soft); } .opcion.correcta .letra { background: var(--go); color: #fff; border-color: var(--go); } .opcion.incorrecta { border-color: var(--ignition); background: var(--ignition-soft); } .opcion.incorrecta .letra { background: var(--ignition); color: #fff; border-color: var(--ignition); } .opcion:disabled { cursor: default; } .opcion:disabled:hover { transform: none; } @media (prefers-reduced-motion: no-preference) { .opcion.incorrecta { animation: shake .32s var(--ease); } } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ---- Feedback (estudio / repaso) ---- */ .feedback { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-sm); border-left: 5px solid var(--ink-soft); background: var(--surface-2); } .feedback.ok { border-left-color: var(--go); background: var(--go-soft); } .feedback.ko { border-left-color: var(--ignition); background: var(--ignition-soft); } .feedback h4 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .02em; text-transform: uppercase; } .feedback p { margin: 0 0 6px; } .feedback .ref { font-family: var(--f-mono); font-size: .82rem; color: var(--ink-soft); margin-top: 10px; } .navegacion { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; } .centrado { text-align: center; } .centrado .btn { margin-top: 16px; } .acciones-quiz { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; flex-wrap: wrap; } .acciones-quiz .btn { margin-top: 0; } /* Aviso de errata: mismo botón gris, pero en naranja muy tenue para diferenciarlo */ .btn-errata { --btn-bg: #fdf3e9; --btn-fg: var(--ink); border: 1px solid #f2ddc4; } .btn-errata:hover { background: #faead6; } /* ============================================================ RESULTADOS — veredicto APTO / NO APTO ============================================================ */ .veredicto { text-align: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: .06em; text-transform: uppercase; margin: 4px 0 2px; } .veredicto.apto { color: var(--go); } .veredicto.no-apto { color: var(--ignition); } .resultado-nota { text-align: center; font-family: var(--f-mono); font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; margin: 6px 0; } .resultado-sub { text-align: center; color: var(--ink-soft); margin: 0 0 6px; } .repaso-item { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r-sm); padding: 16px; margin-bottom: 12px; background: var(--surface); } .repaso-item .estado { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; } .repaso-item .estado.ok { color: var(--go); } .repaso-item .estado.ko { color: var(--ignition); } /* ============================================================ AVISOS ============================================================ */ .aviso, .aviso-ok { border-radius: var(--r-sm); padding: 14px 16px; font-size: .95rem; margin: 14px 0; border-left: 4px solid var(--hivis-deep); background: #fff8e1; } .aviso-ok { border-left-color: var(--go); background: var(--go-soft); } /* ============================================================ MODAL DE AYUDA ============================================================ */ .modal-fondo { position: fixed; inset: 0; background: rgba(20,23,28,.6); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow-y: auto; z-index: 60; } .modal-fondo.abierto { display: flex; } .modal { background: var(--surface); border-radius: var(--r); max-width: 720px; width: 100%; padding: clamp(22px, 5vw, 30px); box-shadow: var(--shadow-lg); border-top: 5px solid var(--ignition); } @media (prefers-reduced-motion: no-preference) { .modal-fondo.abierto .modal { animation: pop-in .28s var(--ease); } } @keyframes pop-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } .modal h2 { margin-top: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; letter-spacing: .02em; text-transform: uppercase; } .modal h3 { margin-bottom: 4px; font-family: var(--f-display); font-weight: 600; letter-spacing: .02em; } .modal code { background: var(--surface-2); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px; font-family: var(--f-mono); font-size: .82rem; word-break: break-all; } .modal ol, .modal ul { padding-left: 20px; } .modal li { margin-bottom: 8px; } /* ============================================================ UTILIDADES ============================================================ */ .oculto { display: none !important; } .texto-suave { color: var(--ink-soft); } .pie { text-align: center; color: var(--ink-faint); font-family: var(--f-mono); font-size: .76rem; letter-spacing: .03em; line-height: 1.7; margin-top: 34px; } /* ============================================================ CUENTAS · PRUEBA · PROGRESO ============================================================ */ /* Mensaje en el formulario de acceso */ .acceso-msg { border-radius: var(--r-sm); padding: 11px 14px; font-size: .9rem; margin-bottom: 16px; border-left: 4px solid var(--ink-soft); background: var(--surface-2); } .acceso-msg.error { border-left-color: var(--ignition); background: var(--ignition-soft); color: var(--ignition-2); } .acceso-msg.ok { border-left-color: var(--go); background: var(--go-soft); } /* Aviso de prueba gratuita en el hero */ .hero-prueba { margin: 22px 0 0; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .02em; color: var(--on-dark-soft); } .hero-prueba strong { color: var(--hivis); font-weight: 700; } .hero-prueba a { color: var(--hivis); text-decoration: underline; text-underline-offset: 2px; } /* Muro de registro */ .modal-prueba .eyebrow { color: var(--ignition); margin-bottom: 12px; } .lista-check { list-style: none; padding: 0; margin: 14px 0 0; } .lista-check li { position: relative; padding: 6px 0 6px 30px; } .lista-check li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 14px; height: 8px; border-left: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(-45deg); } /* Mi progreso */ .titulo-progreso { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 7vw, 3rem); letter-spacing: .02em; text-transform: uppercase; margin: 6px 0 22px; } .metrica-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .metrica { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); } .metrica .num { font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } .metrica .num.verde { color: var(--go); } .metrica .num.rojo { color: var(--ignition); } .metrica .lab { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; } .prog-tema { padding: 12px 0; border-bottom: 1px solid var(--line); } .prog-tema:last-child { border-bottom: none; } .prog-tema.vacio { opacity: .5; } .prog-tema-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; width: 100%; border: none; background: none; padding: 0; margin-top: 0; cursor: pointer; font-family: inherit; color: inherit; text-align: left; } .prog-tema-top:hover .prog-tema-nombre { color: var(--ignition-2); } .prog-tema-nombre { font-weight: 600; transition: color .15s var(--ease); } .prog-tema-cifras { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; } .prog-tema-chevron { font-size: .8rem; color: var(--ink-faint); transition: transform .2s var(--ease); flex-shrink: 0; } .prog-tema.abierta .prog-tema-chevron { transform: rotate(-180deg); } .prog-bar-fondo { display: flex; height: 10px; border-radius: 20px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .prog-bar-ok { background: var(--go); height: 100%; transition: width .5s var(--ease); } .prog-bar-ko { background: var(--ignition); height: 100%; transition: width .5s var(--ease); } .prog-materias { margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; } .prog-materia-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; } .prog-materia-nombre { font-size: .88rem; } .prog-materia-cifras { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-soft); white-space: nowrap; } .prog-bar-fondo-mini { height: 6px; } .prog-materias-vacio { font-size: .85rem; margin: 0; } @media (max-width: 620px) { .metrica-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ ANIMACIONES DE ENTRADA ============================================================ */ /* Animaciones de entrada DESACTIVADAS: el contenido se ve siempre completo y estático (no se mueve al anotar la vista previa). Para volver a activarlas, restaurar el bloque @media (prefers-reduced-motion) original. */ .has-reveal .reveal, .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; } .hero-eyebrow, .hero h1, .hero-sub, .hero-panel { animation: none !important; } @keyframes rise { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 620px) { .modos { grid-template-columns: 1fr; } .brand-sub { display: none; } .brand-title { font-size: 1.15rem; } .site-header { padding: 10px 16px; } .site-nav a { padding: 9px 11px; font-size: .72rem; } /* El menú no cabe en una fila junto al logo: lo bajamos a su propia fila, a todo el ancho y repartido, para que nada se corte ni se parta. */ .site-header { flex-wrap: wrap; gap: 10px 12px; } .site-nav { margin-left: 0; width: 100%; justify-content: space-between; gap: 8px; } .site-nav a { flex: 0 1 auto; text-align: center; } .navegacion { flex-direction: column-reverse; } .navegacion .btn { width: 100%; } .readout { border-right: none; border-bottom: 1px solid var(--carbon-3); padding: 0 0 16px; width: 100%; } .hero-actions { width: 100%; } .hero-actions .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }