/* ============================================================================ SITIO v2 · The BIM Co-Work · thebimcowork.cl Hoja única del sitio público. Mismos tokens y componentes que el campus (LMS-METODO-TBC/public/assets/css/tbc-v2.css) más la estructura pública de la maqueta aprobada (Claude Design, sept 2026). Ordenada por capas: 01 Tokens 08 Listas numeradas, fichas 15 Avisos y modales 02 Base y acordeones 16 Utilidades 03 Movimiento 09 Oficina y equipo 17 BIMco web 04 Barra superior 10 Diálogos 18 Pantalla pública (404) 05 Estructura y pie 11 Botones y tarjetas 19 Tablet 06 Heros 12 Listas y tablas 20 Móvil (≤560px) 07 Secciones y textos 13 Pastillas y chips 14 Formularios Reglas: Helvetica en todo · 13 px el texto · 40 / 52 px los títulos · 64 / 72 px solo en heros · fucsia solo en acentos · verde lo aprobado · azul solo PayPal · sin estilos en línea: todo con clases de esta hoja. Páginas nuevas (Academia, Comunidad, Blog): agregar su bloque al final, con su propio @media (max-width: 560px), sin redefinir las clases de esta hoja. ============================================================================ */ /* ---------- 01 · Tokens ---------------------------------------------------- */ :root { --v2-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --v2-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --v2-text: #3a3a3a; --v2-text-2: #555555; --v2-muted: #9a9a9a; --v2-title: #1a1a1a; --v2-off: #c4c4c4; --v2-accent: #ED1B69; --v2-accent-06: rgba(237, 27, 105, 0.06); --v2-accent-10: rgba(237, 27, 105, 0.10); --v2-accent-12: rgba(237, 27, 105, 0.12); --v2-accent-14: rgba(237, 27, 105, 0.14); --v2-accent-30: rgba(237, 27, 105, 0.30); --v2-accent-45: rgba(237, 27, 105, 0.45); --v2-ok: #2E9E6B; --v2-ok-10: rgba(46, 158, 107, 0.10); --v2-ok-12: rgba(46, 158, 107, 0.12); --v2-paypal: #0070BA; --v2-zoom: #2D8CFF; --v2-youtube: #FF0033; --v2-bg: #ffffff; --v2-gray: #f4f4f4; --v2-gray-2: #f1f1f1; --v2-pink: #FCF4F7; --v2-dark: #0e0e0f; --v2-dark-2: #18181b; --v2-on-dark: #e6e6e6; --v2-line-05: rgba(17, 17, 17, 0.05); --v2-line-06: rgba(17, 17, 17, 0.06); --v2-line-07: rgba(17, 17, 17, 0.07); --v2-line-08: rgba(17, 17, 17, 0.08); --v2-line-09: rgba(17, 17, 17, 0.09); --v2-line-10: rgba(17, 17, 17, 0.10); --v2-line-12: rgba(17, 17, 17, 0.12); --v2-line-14: rgba(17, 17, 17, 0.14); --v2-r-pill: 999px; --v2-r-xl: 22px; --v2-r-media: 20px; --v2-r-card: 18px; --v2-r-card-sm: 16px; --v2-r-box: 14px; --v2-r-sm: 10px; --v2-sh-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 40px -26px rgba(17, 17, 17, 0.25); --v2-sh-float: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 32px -12px rgba(17, 17, 17, 0.14), 0 40px 80px -40px rgba(17, 17, 17, 0.18); --v2-sh-kpi: 0 1px 2px rgba(17, 17, 17, 0.03), 0 14px 30px -22px rgba(17, 17, 17, 0.25); --v2-sh-hover: 0 18px 36px -22px rgba(17, 17, 17, 0.3); --v2-sh-accent: 0 10px 24px -12px rgba(237, 27, 105, 0.6); --v2-sh-dark: 0 10px 22px -10px rgba(17, 17, 17, 0.45); --v2-sh-media: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 44px -22px rgba(17, 17, 17, 0.35), 0 60px 110px -60px rgba(17, 17, 17, 0.3); --v2-sh-media-hover: 0 2px 4px rgba(17, 17, 17, 0.05), 0 28px 60px -24px rgba(17, 17, 17, 0.42), 0 80px 140px -60px rgba(17, 17, 17, 0.35); --v2-sh-dialog: 0 2px 6px rgba(17, 17, 17, 0.05), 0 30px 70px -24px rgba(17, 17, 17, 0.35), 0 80px 140px -60px rgba(17, 17, 17, 0.35); --v2-sh-modal: 0 40px 80px -30px rgba(17, 17, 17, 0.45); --v2-ease: cubic-bezier(.2, .7, .2, 1); --v2-nav-h: 55px; --v2-wrap: 1240px; --v2-narrow: 880px; } /* ---------- 02 · Base ------------------------------------------------------ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { background: var(--v2-bg); } html.v2-dark, html.v2-dark body { background: var(--v2-dark); } body { font-family: var(--v2-font); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--v2-text); -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: var(--v2-text); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--v2-accent); } img, svg, video { max-width: 100%; } img { display: block; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } input, select, textarea { font: inherit; font-size: 13px; color: var(--v2-text); } input::placeholder, textarea::placeholder { color: var(--v2-muted); } input[type="checkbox"], input[type="radio"] { accent-color: var(--v2-accent); } strong, b { font-weight: 600; } ::selection { background: var(--v2-accent-14); } :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; } /* Los títulos no traen tamaño propio: el tamaño lo da la clase (.v2-h1, .v2-hero). */ h1, h2, h3, h4 { font-size: 13px; font-weight: 400; line-height: 1.4; } h3, h4 { font-weight: 600; color: var(--v2-title); } p { line-height: 1.6; text-wrap: pretty; } /* Salto al contenido (visible solo con teclado) */ .v2-skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--v2-r-pill); background: var(--v2-text); color: #fff; } .v2-skip:focus { top: 10px; color: #fff; } /* ---------- 03 · Movimiento ------------------------------------------------ */ /* La entrada (fade + blur + leve subida, escalonada) la hace assets/js/v2.js con la API de animaciones, como la maqueta. .v2-pending oculta una sección que aún no entra en pantalla (lo pone y lo quita v2.js). */ @keyframes v2-in { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes v2-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes v2-pulse { 0% { transform: scale(1); opacity: 0.35; } 60% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @keyframes v2-toast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .v2-anim-in { animation: v2-in 0.7s var(--v2-ease) both; } .v2-pending { opacity: 0; } @media print { .v2-pending { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .v2-pending { opacity: 1; } } /* ---------- 04 · Barra superior -------------------------------------------- */ /* Vidrio blanco, fija arriba. Enlaces: Home · Oficina · Academia · Quiénes somos · Comunidad · Blog · Campus ↗. En ≤860px los enlaces pasan a un panel que abre el botón de menú (popover nativo; v2.js pone el respaldo .is-open). */ .v2-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--v2-nav-h); padding: 14px 32px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--v2-line-07); } .v2-nav__brand { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; color: var(--v2-text); } .v2-nav__brand:hover { color: var(--v2-title); } .v2-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--v2-accent); } .v2-brand { letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .v2-links { display: flex; align-items: center; gap: 22px; } /* En escritorio el panel se muestra en línea: las reglas de autor ganan a las del navegador para [popover]. */ .v2-links[popover] { position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; background: none; color: inherit; display: flex; } .v2-links a { white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid transparent; color: var(--v2-text-2); transition: color 0.2s, border-color 0.2s; } .v2-links a:hover { color: var(--v2-title); } .v2-links a[aria-current="page"] { color: var(--v2-title); border-bottom-color: var(--v2-accent); } .v2-links .v2-nav__campus { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; padding: 7px 14px; border: 0; border-radius: var(--v2-r-pill); background: var(--v2-accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(237, 27, 105, 0.6); transition: transform 0.3s var(--v2-ease), opacity 0.2s; } .v2-links .v2-nav__campus:hover { color: #fff; transform: translateY(-1px); } .v2-nav__menu { display: none; position: relative; flex: none; width: 44px; height: 44px; margin-right: -8px; align-items: center; justify-content: center; border-radius: 50%; color: var(--v2-text); } .v2-nav__bars { position: relative; display: block; width: 18px; height: 8px; } .v2-nav__bars::before, .v2-nav__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--v2-ease), top 0.35s var(--v2-ease); } .v2-nav__bars::before { top: 0; } .v2-nav__bars::after { top: 6.5px; } .v2-nav.is-menu .v2-nav__bars::before { top: 3.25px; transform: rotate(45deg); } .v2-nav.is-menu .v2-nav__bars::after { top: 3.25px; transform: rotate(-45deg); } /* ---------- 05 · Estructura y pie ------------------------------------------ */ .v2-wrap { width: 100%; max-width: var(--v2-wrap); margin: 0 auto; padding-left: 32px; padding-right: 32px; } /* Página angosta (Quiénes somos, Comunidad, Blog): 880 px */ .v2-page { width: 100%; max-width: var(--v2-narrow); margin: 0 auto; padding: 96px 32px 120px; display: flex; flex-direction: column; } .v2-page--88 { padding-top: 88px; padding-bottom: 110px; } /* Página con índice lateral (Oficina; Academia): contenido + columna de 250 px */ .v2-split { width: 100%; max-width: var(--v2-wrap); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 48px; } .v2-split__main { min-width: 0; padding: 48px 0 120px; display: flex; flex-direction: column; } .v2-side { border-left: 1px solid var(--v2-line-07); } .v2-side__in { position: sticky; top: 70px; max-height: calc(100vh - 70px); overflow-y: auto; padding: 32px 0 32px 24px; display: flex; flex-direction: column; gap: 22px; } .v2-side__block { display: flex; flex-direction: column; gap: 6px; } .v2-side__svc { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; line-height: 1.45; color: var(--v2-text-2); } .v2-side__svc:hover { color: var(--v2-title); } /* Índice con la sección activa (v2.js marca .is-on) */ .v2-spy { display: flex; flex-direction: column; border-top: 1px solid var(--v2-line-08); } .v2-spy a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--v2-line-06); color: var(--v2-muted); transition: color 0.3s; } .v2-spy a::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: rgba(17, 17, 17, 0.15); transition: background 0.3s; } .v2-spy a:hover, .v2-spy a.is-on { color: var(--v2-title); } .v2-spy a.is-on::before { background: var(--v2-accent); } /* Pie común: marca · datos canónicos · contacto */ .v2-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 24px 32px; border-top: 1px solid var(--v2-line-07); color: var(--v2-muted); } .v2-footer a { color: var(--v2-muted); } .v2-footer a:hover { color: var(--v2-accent); } /* ---------- 06 · Heros ----------------------------------------------------- */ /* Home: hall oscuro con dos puertas (Oficina · Academia) */ .v2-hall { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--v2-dark); color: var(--v2-on-dark); } .v2-hall__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.05) brightness(0.8); opacity: 0.9; } .v2-hall__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 50% at 50% 40%, rgba(14, 14, 15, 0.35) 0%, rgba(14, 14, 15, 0.55) 60%, rgba(14, 14, 15, 0.75) 100%); } .v2-hall__veil2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 15, 0.7) 0%, rgba(14, 14, 15, 0) 18%, rgba(14, 14, 15, 0) 45%, rgba(14, 14, 15, 0.95) 72%, #0e0e0f 100%); } .v2-hall__main { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 32px 32px; text-align: center; } .v2-hall__logo { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); } .v2-hall__tag { margin-top: 26px; line-height: 1.6; letter-spacing: 0.28em; text-transform: uppercase; color: #d0d0d0; } .v2-hall__doors { margin-top: 64px; width: 100%; max-width: 580px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; text-align: left; } .v2-door { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 132px; padding: 18px 18px 16px; border-radius: var(--v2-r-card-sm); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(24, 24, 27, 0.78); color: var(--v2-on-dark); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 50px -18px rgba(0, 0, 0, 0.85), 0 60px 110px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.6s var(--v2-ease), box-shadow 0.6s var(--v2-ease), border-color 0.6s; } .v2-door:hover { color: var(--v2-on-dark); transform: translateY(-6px); border-color: var(--v2-accent-45); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 36px 70px -20px rgba(0, 0, 0, 0.9), 0 80px 140px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(237, 27, 105, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .v2-door__txt { display: flex; flex-direction: column; gap: 8px; } .v2-door__t { letter-spacing: 0.16em; text-transform: uppercase; color: #fff; } .v2-door__s { color: var(--v2-muted); } .v2-door__go { display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-accent); } .v2-door__arw { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--v2-accent); background: var(--v2-accent-12); letter-spacing: 0; } .v2-hall__foot { position: relative; z-index: 2; width: min(100% - 64px, 960px); margin: 0 auto; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #7a7a7a; } .v2-hall__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; } .v2-hall__links a, .v2-hall__brand { letter-spacing: 0.16em; text-transform: uppercase; } .v2-hall__links a { color: var(--v2-muted); } .v2-hall__links a:hover { color: var(--v2-accent); } .v2-hall__legal { line-height: 1.6; } .v2-hall__legal a { color: inherit; } .v2-hall__legal a:hover { color: var(--v2-accent); } /* Hero con imagen (Oficina): foto en gris, velo blanco desde la izquierda */ .v2-banner { position: relative; overflow: hidden; min-height: 560px; background: var(--v2-gray-2); border-bottom: 1px solid var(--v2-line-07); } .v2-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.05) brightness(1.02); } .v2-banner__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.2) 62%, rgba(255, 255, 255, 0) 100%); } .v2-banner__veil2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, #ffffff 100%); } .v2-banner__in { position: relative; max-width: var(--v2-wrap); min-height: 560px; margin: 0 auto; padding: 72px 32px 56px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 16px; } /* Píldora "Proyecto destacado" del hero (abre el proyecto) */ .v2-featured { margin-top: 10px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: var(--v2-r-pill); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--v2-line-08); box-shadow: 0 12px 28px -16px rgba(17, 17, 17, 0.4); color: var(--v2-title); text-align: left; transition: transform 0.3s var(--v2-ease), box-shadow 0.3s; } .v2-featured:hover { color: var(--v2-title); transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(17, 17, 17, 0.45); } /* ---------- 07 · Secciones y textos ---------------------------------------- */ .v2-sec { margin-top: 120px; display: flex; flex-direction: column; scroll-margin-top: 80px; } .v2-sec--first { margin-top: 0; } .v2-sec--96 { margin-top: 96px; } .v2-sec--48 { margin-top: 48px; } .v2-sec--24 { margin-top: 24px; } .v2-sec__head { display: flex; flex-direction: column; gap: 16px; } .v2-eyebrow { letter-spacing: 0.16em; text-transform: uppercase; color: var(--v2-accent); } .v2-eyebrow--muted { color: var(--v2-muted); } .v2-h1 { font-size: 52px; line-height: 1.02; letter-spacing: -0.045em; font-weight: 400; text-wrap: balance; } .v2-h1--40 { font-size: 40px; line-height: 1.02; } .v2-hero { font-size: 72px; line-height: 1; letter-spacing: -0.05em; font-weight: 400; text-wrap: balance; } .v2-hero--64 { font-size: 64px; } .v2-ink { color: var(--v2-title); } .v2-sub { color: var(--v2-text-2); line-height: 1.55; max-width: 70ch; } .v2-lead { color: var(--v2-muted); } .v2-text { line-height: 1.75; color: var(--v2-text-2); text-wrap: pretty; max-width: 62ch; } .v2-text--dark { color: var(--v2-text); } .v2-prose { display: flex; flex-direction: column; gap: 10px; color: var(--v2-text-2); } .v2-prose p { line-height: 1.75; } .v2-prose__key { color: var(--v2-text); } .v2-prose ul, .v2-prose ol { padding-left: 1.3em; line-height: 1.75; } .v2-prose ul { list-style: disc; } .v2-prose ol { list-style: decimal; } .v2-label { letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-text-2); } .v2-label--muted { color: var(--v2-muted); } .v2-label--accent { color: var(--v2-accent); } .v2-name { font-weight: 600; color: var(--v2-title); } .v2-big { font-size: 52px; line-height: 1; letter-spacing: -0.04em; color: var(--v2-accent); } /* Enlace con flecha en círculo ("Conoce al equipo →") */ .v2-go { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; color: var(--v2-text); } .v2-go:hover { color: var(--v2-accent); } .v2-go__arw { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--v2-accent); background: var(--v2-accent-06); color: var(--v2-accent); transition: transform 0.3s var(--v2-ease); } .v2-go:hover .v2-go__arw { transform: translateX(3px); } .v2-mail { align-self: flex-start; margin-top: 6px; color: var(--v2-text-2); } /* Columna de botones de contacto (Quiénes somos · "Hablemos.") */ .v2-cta-stack { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; } /* ---------- 08 · Listas numeradas, fichas y acordeones --------------------- */ /* Filas numeradas (principios, pasos): número tenue + texto */ .v2-numlist { display: flex; flex-direction: column; border-top: 1px solid var(--v2-line-09); list-style: none; } .v2-numrow { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--v2-line-09); } .v2-numrow--40 { grid-template-columns: 40px minmax(0, 1fr); } .v2-numrow__n { color: var(--v2-muted); } .v2-numrow--big .v2-numrow__t { font-size: 52px; line-height: 1.05; letter-spacing: -0.045em; } /* "Cómo funciona": pasos con título y descripción */ .v2-how { display: flex; flex-direction: column; border-top: 1px solid var(--v2-line-09); } .v2-how__k { padding: 14px 0 4px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v2-muted); } .v2-how__list { list-style: none; } .v2-how__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v2-line-07); line-height: 1.6; } .v2-how__n { color: var(--v2-muted); } .v2-how__txt { display: flex; flex-direction: column; gap: 2px; } .v2-how__t { color: var(--v2-title); } .v2-how__d { color: var(--v2-text-2); text-wrap: pretty; } /* Ficha clave · valor (contacto, datos) */ .v2-kv { display: flex; flex-direction: column; border-top: 1px solid var(--v2-line-09); } .v2-kv__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--v2-line-09); } .v2-kv__k, .v2-kv__row dt { color: var(--v2-muted); } .v2-kv__row dd { min-width: 0; overflow-wrap: anywhere; } /* Acordeón nativo:
P01Título
… Dentro de [data-acc-grupo] se abren de a uno (atributo name + v2.js). La rejilla va en un span interno: Safari no aplica bien grid a . */ .v2-accs { display: flex; flex-direction: column; border-top: 1px solid var(--v2-line-09); } .v2-acc { border-bottom: 1px solid var(--v2-line-09); } .v2-acc__head { display: block; padding: 16px 0; cursor: pointer; list-style: none; transition: color 0.2s; } .v2-acc__head::-webkit-details-marker { display: none; } .v2-acc__head::marker { content: ""; } .v2-acc__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: baseline; gap: 12px; } .v2-acc__head:hover, .v2-acc[open] > .v2-acc__head { color: var(--v2-title); } .v2-acc__n { color: var(--v2-muted); } .v2-acc__ico { position: relative; justify-self: end; align-self: center; width: 12px; height: 12px; color: var(--v2-muted); } .v2-acc__ico::before, .v2-acc__ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: currentColor; transition: transform 0.35s var(--v2-ease); } .v2-acc__ico::after { transform: rotate(90deg); } .v2-acc[open] .v2-acc__ico { color: var(--v2-accent); } .v2-acc[open] .v2-acc__ico::after { transform: rotate(0deg); } .v2-acc__body { padding: 0 36px 20px 60px; display: flex; flex-direction: column; gap: 12px; } .v2-acc__body p { line-height: 1.75; color: var(--v2-text-2); max-width: 62ch; } .v2-acc__list { list-style: none; display: flex; flex-direction: column; gap: 4px; } .v2-acc__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); line-height: 1.6; } .v2-acc__list li::before { content: "→"; color: var(--v2-accent); } /* ---------- 09 · Oficina y equipo ------------------------------------------ */ /* Servicio destacado: caja gris grande */ .v2-feature { padding: 32px; border-radius: var(--v2-r-xl); background: var(--v2-gray); border: 1px solid var(--v2-line-07); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 24px 50px -28px rgba(17, 17, 17, 0.3); display: flex; flex-direction: column; gap: 16px; } /* Casos (tarjetas que abren un proyecto) */ .v2-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .v2-case { padding: 18px; border-radius: var(--v2-r-card-sm); background: #fff; border: 1px solid var(--v2-line-08); display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--v2-text); box-shadow: 0 12px 28px -20px rgba(17, 17, 17, 0.35); transition: transform 0.5s var(--v2-ease), box-shadow 0.5s; } .v2-case:hover { color: var(--v2-text); transform: translateY(-3px); box-shadow: var(--v2-sh-hover); } .v2-case__k { letter-spacing: 0.16em; text-transform: uppercase; color: var(--v2-muted); } .v2-case__t { font-weight: 600; color: var(--v2-title); } .v2-case__d { line-height: 1.6; color: var(--v2-text-2); text-wrap: pretty; } .v2-case__go { color: var(--v2-text-2); } .v2-case:hover .v2-case__go { color: var(--v2-accent); } /* Portafolio: tarjetas 4:3 con foto en gris */ .v2-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; } .v2-project { display: flex; flex-direction: column; gap: 14px; text-align: left; color: var(--v2-text); } .v2-project:hover { color: var(--v2-text); } .v2-project__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--v2-r-media); background: var(--v2-gray-2); box-shadow: var(--v2-sh-media); transition: transform 0.7s var(--v2-ease), box-shadow 0.7s var(--v2-ease); } .v2-project:hover .v2-project__media { transform: translateY(-6px); box-shadow: var(--v2-sh-media-hover); } .v2-project__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.95); } .v2-project__n { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: var(--v2-r-pill); background: rgba(255, 255, 255, 0.9); color: var(--v2-text); } .v2-project__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 28px 28px; text-align: center; line-height: 1.7; color: var(--v2-muted); } .v2-project__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .v2-project__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .v2-project__t { font-weight: 600; color: var(--v2-title); } .v2-project__tag { color: var(--v2-text-2); } .v2-project__more { flex: none; color: var(--v2-accent); } /* Equipo: retratos 4:5 en gris; sin foto, iniciales */ .v2-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .v2-person { display: flex; flex-direction: column; gap: 12px; text-align: left; color: var(--v2-text); } .v2-person:hover { color: var(--v2-text); } .v2-person__photo { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--v2-r-card); background: var(--v2-gray-2); font-size: 52px; letter-spacing: -0.02em; color: var(--v2-accent); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 40px -22px rgba(17, 17, 17, 0.35); transition: transform 0.6s var(--v2-ease), box-shadow 0.6s var(--v2-ease); } .v2-person:hover .v2-person__photo { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 28px 56px -24px rgba(17, 17, 17, 0.4); } .v2-person__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } .v2-person__txt { display: flex; flex-direction: column; gap: 3px; } .v2-person__name { font-weight: 600; color: var(--v2-title); } .v2-person__role { line-height: 1.45; color: var(--v2-text-2); } .v2-person__more { margin-top: 4px; color: var(--v2-accent); } /* Encuadre de cada retrato: equivale al background-size/position de la maqueta (object-position = posición; scale = tamaño del fondo / tamaño "cover"). */ .v2-crop--rafael { object-position: 52% 45%; } .v2-crop--elias { object-position: 46.5% 28%; transform-origin: 46.5% 28%; transform: scale(2.42); } .v2-crop--jose { object-position: 51% 14%; transform-origin: 51% 14%; transform: scale(1.43); } .v2-bio__photo .v2-crop--elias { transform: scale(2.64); } /* Pilares ("Cómo funciona") */ .v2-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .v2-pillar { padding: 20px; border-radius: var(--v2-r-card); border: 1px solid var(--v2-line-09); background: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 150px; box-shadow: var(--v2-sh-card); transition: transform 0.5s var(--v2-ease), box-shadow 0.5s var(--v2-ease); } .v2-pillar:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 24px 48px -22px rgba(17, 17, 17, 0.3); } .v2-pillar__k { letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-accent); } .v2-pillar__v { line-height: 1.5; } /* ---------- 10 · Diálogos -------------------------------------------------- */ /*
… Abre: [data-v2-open="id"] · cierra: [data-v2-close], Esc o clic fuera (v2.js). El propio es el velo (vidrio claro) y ocupa toda la pantalla. */ .v2-dialog { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 32px; border: 0; color: var(--v2-text); background: rgba(250, 250, 250, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; overflow: hidden; } .v2-dialog[open] { display: flex; } .v2-dialog::backdrop { background: transparent; } html.v2-lock { overflow: hidden; } .v2-dialog__panel { position: relative; width: 100%; max-width: 960px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--v2-r-xl); background: #fff; border: 1px solid var(--v2-line-08); box-shadow: var(--v2-sh-dialog); } .v2-dialog__x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--v2-line-12); color: var(--v2-text-2); transition: border-color 0.25s, color 0.25s; } .v2-dialog__x:hover { border-color: var(--v2-text); color: var(--v2-text); } .v2-dialog__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; } .v2-dialog__body p { line-height: 1.75; color: var(--v2-text-2); max-width: 64ch; } .v2-dialog__links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; } /* Galería del proyecto: imagen grande + miniaturas (v2.js cambia la grande) */ .v2-gal__main { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; border-bottom: 1px solid var(--v2-line-06); } .v2-gal__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .v2-gal__thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 28px 0; } .v2-gal__thumb { width: 72px; height: 52px; flex: none; overflow: hidden; border-radius: var(--v2-r-sm); border: 1px solid var(--v2-line-09); background: var(--v2-gray); opacity: 0.6; transition: opacity 0.25s, border-color 0.25s; } .v2-gal__thumb img { width: 100%; height: 100%; object-fit: cover; } .v2-gal__thumb:hover { opacity: 0.9; } .v2-gal__thumb.is-on { opacity: 1; border-color: var(--v2-accent); } /* Ficha de una persona del equipo: retrato + bio */ .v2-dialog__panel--bio { max-width: 900px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 28px; } .v2-bio__photo { position: relative; display: flex; align-items: center; justify-content: center; width: 240px; height: 240px; overflow: hidden; border-radius: var(--v2-r-card-sm); background: var(--v2-gray-2); font-size: 52px; color: var(--v2-accent); box-shadow: 0 14px 30px -16px rgba(17, 17, 17, 0.4); } .v2-bio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v2-bio__txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-right: 30px; } .v2-bio__who { display: flex; flex-direction: column; gap: 4px; } .v2-bio__p { display: flex; flex-direction: column; gap: 10px; line-height: 1.75; color: var(--v2-text-2); } .v2-bio__p p { line-height: 1.75; } .v2-bio__links { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } /* ---------- 11 · Botones y tarjetas ---------------------------------------- */ .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 22px; border-radius: var(--v2-r-pill); background: var(--v2-accent); border: 1px solid var(--v2-accent); color: #fff; font-size: 13px; line-height: 1.3; white-space: nowrap; cursor: pointer; box-shadow: var(--v2-sh-accent); transition: transform 0.3s var(--v2-ease), opacity 0.2s, background 0.3s, border-color 0.3s, color 0.2s; } .v2-btn:hover { color: #fff; transform: translateY(-1px); } .v2-btn:active { transform: none; } .v2-btn .v2-arw { opacity: 0.7; } .v2-btn--ghost { background: #fff; color: var(--v2-text); border-color: var(--v2-line-14); box-shadow: none; } .v2-btn--ghost:hover { color: var(--v2-accent); border-color: var(--v2-accent); } .v2-btn--dark { background: var(--v2-text); border-color: var(--v2-text); box-shadow: var(--v2-sh-dark); } .v2-btn--ok { background: var(--v2-ok); border-color: var(--v2-ok); box-shadow: none; } .v2-btn--paypal { background: var(--v2-paypal); border-color: var(--v2-paypal); box-shadow: none; } .v2-btn--zoom { background: var(--v2-zoom); border-color: var(--v2-zoom); box-shadow: none; } .v2-btn--youtube { background: var(--v2-youtube); border-color: var(--v2-youtube); box-shadow: 0 10px 24px -12px rgba(255, 0, 51, 0.55); } .v2-btn--caps { letter-spacing: 0.12em; text-transform: uppercase; } .v2-btn--sm { padding: 8px 14px; gap: 8px; } .v2-btn--xs { padding: 5px 12px; gap: 6px; } .v2-btn--lg { padding: 14px 20px; } .v2-btn--block { display: flex; width: 100%; justify-content: space-between; } .v2-btn--center { justify-content: center; } .v2-btn[disabled], .v2-btn.is-off { background: var(--v2-off); border-color: var(--v2-off); color: #fff; box-shadow: none; pointer-events: none; } .v2-link { color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; } .v2-link:hover { color: var(--v2-accent); opacity: 0.85; } .v2-card { padding: 24px; border-radius: var(--v2-r-card); border: 1px solid var(--v2-line-09); background: #fff; box-shadow: var(--v2-sh-card); } .v2-card--sm { padding: 16px 18px; border-radius: var(--v2-r-card-sm); box-shadow: none; } .v2-card--flat { box-shadow: none; } .v2-card--pink { background: var(--v2-pink); border-color: var(--v2-accent-14); box-shadow: none; } .v2-card--gray { background: var(--v2-gray); border-color: transparent; box-shadow: none; } .v2-card--float { box-shadow: var(--v2-sh-float); } .v2-card--link { display: block; transition: transform 0.4s var(--v2-ease), box-shadow 0.4s; } .v2-card--link:hover { transform: translateY(-3px); box-shadow: var(--v2-sh-hover); } .v2-card--row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; } .v2-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .v2-kpi { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--v2-r-card-sm); border: 1px solid var(--v2-line-08); background: #fff; box-shadow: var(--v2-sh-kpi); } .v2-kpi__l { color: var(--v2-muted); } .v2-kpi__v { font-size: 32px; line-height: 1; letter-spacing: -0.04em; color: var(--v2-title); } .v2-kpi__v.is-accent { color: var(--v2-accent); } .v2-kpi__n { color: var(--v2-text-2); } .v2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .v2-stat { padding: 16px 18px; border-radius: var(--v2-r-card-sm); border: 1px solid var(--v2-line-09); } .v2-stat__k { letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); } .v2-stat__v { margin-top: 6px; } /* Tarjeta de curso con imagen (la imagen va como ) */ .v2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; } .v2-tile { position: relative; display: block; overflow: hidden; min-height: 170px; border-radius: var(--v2-r-card); border: 1px solid var(--v2-line-09); background: var(--v2-gray); box-shadow: var(--v2-sh-float); transition: transform 0.5s var(--v2-ease), box-shadow 0.5s var(--v2-ease), border-color 0.25s; } .v2-tile:hover { color: var(--v2-text); transform: translateY(-6px); box-shadow: 0 2px 4px rgba(17, 17, 17, 0.04), 0 24px 48px -16px rgba(17, 17, 17, 0.2), 0 60px 110px -50px rgba(17, 17, 17, 0.26); } .v2-tile.is-on { border-color: var(--v2-accent); } .v2-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; filter: grayscale(1) contrast(0.9) brightness(1.08); opacity: 0.55; } .v2-tile__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 22%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.85) 62%, #ffffff 82%); } .v2-tile__body { position: relative; min-height: 170px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .v2-tile__top { display: flex; justify-content: space-between; gap: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-text-2); } .v2-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .v2-mini { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 130px; padding: 16px; border-radius: var(--v2-r-card-sm); border: 1px solid var(--v2-line-09); background: #fff; transition: transform 0.4s var(--v2-ease), box-shadow 0.4s; } .v2-mini:hover { transform: translateY(-3px); box-shadow: var(--v2-sh-hover); color: var(--v2-text); } .v2-play { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; padding-left: 2px; border-radius: 50%; background: var(--v2-accent); color: #fff; } .v2-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--v2-r-card); border: 1px solid var(--v2-line-09); background: var(--v2-gray-2); box-shadow: var(--v2-sh-float); } .v2-video iframe, .v2-video video, .v2-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } /* ---------- 12 · Listas y tablas ------------------------------------------- */ .v2-list { border-top: 1px solid var(--v2-line-09); } .v2-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--v2-line-06); } .v2-row--2 { grid-template-columns: minmax(0, 1fr) auto; } .v2-row--ico { grid-template-columns: 18px minmax(0, 1fr) auto; } .v2-row--person { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 14px 4px; } .v2-row--stack { display: flex; flex-direction: column; gap: 4px; } .v2-row--link { transition: background 0.2s; } .v2-row--link:hover { background: rgba(17, 17, 17, 0.02); color: var(--v2-text); } .v2-row.is-dim { opacity: 0.55; } .v2-row__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--v2-muted); } .v2-row__end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .is-ok, .v2-ok { color: var(--v2-ok); } .is-accent, .v2-accent { color: var(--v2-accent); } .is-muted, .v2-muted { color: var(--v2-muted); } .v2-text-2 { color: var(--v2-text-2); } .v2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .v2-table { width: 100%; border-collapse: collapse; font-size: 13px; } .v2-table th { text-align: left; font-weight: 400; color: var(--v2-muted); white-space: nowrap; padding: 10px 12px 10px 4px; border-top: 1px solid var(--v2-line-09); border-bottom: 1px solid var(--v2-line-06); } .v2-table td { padding: 11px 12px 11px 4px; border-bottom: 1px solid var(--v2-line-05); vertical-align: middle; } .v2-table .is-num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- 13 · Pastillas y chips ----------------------------------------- */ .v2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--v2-r-pill); background: var(--v2-gray-2); color: var(--v2-text-2); white-space: nowrap; } .v2-pill--ok { background: var(--v2-ok-12); color: var(--v2-ok); } .v2-pill--warn, .v2-pill--accent { background: var(--v2-accent-10); color: var(--v2-accent); } .v2-pill--paypal { background: rgba(0, 112, 186, 0.1); color: var(--v2-paypal); } .v2-pill--line { background: #fff; border: 1px solid var(--v2-line-14); color: var(--v2-text); } .v2-pill--dark { background: var(--v2-text); color: #fff; padding: 4px 10px; } .v2-pill--md { padding: 6px 12px; } .v2-state { display: inline-flex; align-items: center; gap: 6px; } .v2-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .v2-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .v2-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line-14); background: #fff; color: var(--v2-text); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; } .v2-chip:hover { border-color: rgba(17, 17, 17, 0.3); color: var(--v2-text); } .v2-chip input { position: absolute; opacity: 0; pointer-events: none; } .v2-chip.is-on, .v2-chip:has(input:checked) { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; } .v2-chip--dark.is-on, .v2-chip--dark:has(input:checked) { background: var(--v2-text); border-color: var(--v2-text); } /* Chip informativo (sin acción) */ .v2-chip--static { cursor: default; border-color: var(--v2-line-10); } .v2-chip--static:hover { border-color: var(--v2-line-10); } .v2-chip__n { color: var(--v2-muted); } .v2-avatar { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--v2-accent-10); color: var(--v2-accent); font-size: 13px; } .v2-avatar--40 { width: 40px; height: 40px; } .v2-avatar--28 { width: 28px; height: 28px; font-size: 11px; } /* ---------- 14 · Formularios ----------------------------------------------- */ .v2-form { display: flex; flex-direction: column; gap: 14px; } .v2-form--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; } .v2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .v2-field__label { letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); } .v2-input { width: 100%; padding: 12px 16px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line-14); background: #fff; color: var(--v2-text); font-size: 13px; line-height: 1.4; outline: none; transition: border-color 0.2s; } .v2-input:focus { border-color: var(--v2-text); } .v2-input--lg { padding: 14px 18px; } .v2-input--sm { padding: 9px 14px; } .v2-input--box { border-radius: var(--v2-r-box); } textarea.v2-input { border-radius: var(--v2-r-box); padding: 14px 16px; line-height: 1.6; min-height: 110px; resize: vertical; } select.v2-input { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 14px center; } .v2-help { color: var(--v2-muted); } .v2-error { color: var(--v2-accent); } .v2-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .v2-check input { margin-top: 2px; width: 16px; height: 16px; flex: none; } .v2-search { width: 190px; max-width: 100%; padding: 9px 12px; } /* ---------- 15 · Avisos y modales ------------------------------------------ */ .v2-flash { margin-bottom: 18px; padding: 14px 18px; border-radius: var(--v2-r-box); background: var(--v2-gray); border: 1px solid transparent; } .v2-flash--ok { background: var(--v2-ok-10); color: var(--v2-ok); } .v2-flash--error { background: var(--v2-pink); color: var(--v2-accent); border-color: var(--v2-accent-14); } .v2-empty { padding: 20px; border-radius: var(--v2-r-card-sm); background: var(--v2-gray); color: var(--v2-text-2); line-height: 1.6; } .v2-note { color: var(--v2-muted); line-height: 1.7; max-width: 70ch; } .v2-callout { padding: 22px 24px; border-radius: var(--v2-r-card); background: var(--v2-gray); line-height: 1.6; } .v2-callout--pink { background: var(--v2-pink); border: 1px solid var(--v2-accent-14); } .v2-callout--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .v2-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translateX(-50%); padding: 12px 18px; border-radius: var(--v2-r-pill); background: var(--v2-text); color: #fff; box-shadow: 0 18px 40px -18px rgba(17, 17, 17, 0.5); animation: v2-toast 0.3s var(--v2-ease); max-width: calc(100vw - 32px); } /* ---------- 16 · Utilidades ------------------------------------------------ */ .v2-stack { display: flex; flex-direction: column; } .v2-stack--2 { gap: 2px; } .v2-stack--4 { gap: 4px; } .v2-stack--6 { gap: 6px; } .v2-stack--10 { gap: 10px; } .v2-stack--14 { gap: 14px; } .v2-stack--20 { gap: 20px; } .v2-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .v2-inline--6 { gap: 6px; } .v2-inline--14 { gap: 14px; } .v2-inline--nowrap { flex-wrap: nowrap; } .v2-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .v2-grid { display: grid; gap: 12px; } .v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v2-grid--auto-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .v2-grid--auto-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .v2-grow { flex: 1 1 auto; min-width: 0; } .v2-none { flex: none; } .v2-self-start { align-self: flex-start; } .v2-center { text-align: center; } .v2-right { text-align: right; } .v2-nowrap { white-space: nowrap; } .v2-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .v2-maxw-420 { max-width: 420px; } .v2-maxw-560 { max-width: 560px; } .v2-maxw-720 { max-width: 720px; } .v2-maxw-760 { max-width: 760px; } /* Medida del texto en caracteres (la maqueta usa max-width en ch) */ .v2-ch-14 { max-width: 14ch; } .v2-ch-16 { max-width: 16ch; } .v2-ch-18 { max-width: 18ch; } .v2-ch-20 { max-width: 20ch; } .v2-ch-22 { max-width: 22ch; } .v2-ch-46 { max-width: 46ch; } .v2-ch-52 { max-width: 52ch; } .v2-ch-56 { max-width: 56ch; } .v2-ch-62 { max-width: 62ch; } .v2-ch-64 { max-width: 64ch; } .v2-mt-4 { margin-top: 4px; } .v2-mt-6 { margin-top: 6px; } .v2-mt-8 { margin-top: 8px; } .v2-mt-10 { margin-top: 10px; } .v2-mt-12 { margin-top: 12px; } .v2-mt-14 { margin-top: 14px; } .v2-mt-16 { margin-top: 16px; } .v2-mt-18 { margin-top: 18px; } .v2-mt-20 { margin-top: 20px; } .v2-mt-22 { margin-top: 22px; } .v2-mt-24 { margin-top: 24px; } .v2-mt-26 { margin-top: 26px; } .v2-mt-28 { margin-top: 28px; } .v2-mt-32 { margin-top: 32px; } .v2-mt-36 { margin-top: 36px; } .v2-mt-44 { margin-top: 44px; } .v2-mt-48 { margin-top: 48px; } .v2-hidden, [hidden] { display: none !important; } .v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- 17 · BIMco web -------------------------------------------------- */ /* bimco-web.js inyecta su propio CSS (oscuro, ids #bimcow*). Aquí se redibuja con la estética v2 de la maqueta (burbuja fucsia con pulso, saludo oscuro, panel blanco). El "html" delante gana en especificidad al