/* ========================================================= BiVA Reading Program - base.css v3.3 (UI refresh 2025/26) - Paleta institucional con variables CSS - Sin cambios de HTML/JS: respeta ids y clases existentes - Respeta el switch de temas via [data-theme] en ========================================================= */ /* ------------------------- Design tokens (colores) ------------------------- */ :root { /* Brand / Primary */ --brand-50: #eef3ff; --brand-100: #dfe8ff; --brand-200: #bfd1ff; --brand-300: #9db9ff; --brand-400: #6f95ff; --brand-500: #3b6cff; --brand-600: #0b5fff; /* principal */ --brand-700: #064ae6; --brand-800: #083ab4; --brand-900: #0a2a7e; /* Accent (amarillo institucional suave) */ --accent-400: #ffd566; --accent-500: #ffc432; --accent-600: #f2b000; /* Neutrales (modo claro por defecto) */ --bg: #f6f8fb; --surface: #ffffff; --text: #111317; --muted: #6b7280; --border: #e5e7eb; /* Interacción */ --ring: rgba(11, 95, 255, .35); --shadow-1: 0 1px 2px rgba(16, 24, 40, .04); --shadow-2: 0 4px 12px rgba(16, 24, 40, .08); --radius: 14px; /* Tipografías */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Tamaños base */ --container: 1100px; } html[data-theme="dark"] { --bg: #0f1116; --surface: #151923; --text: #e8eaf1; --muted: #a6acc3; --border: #232836; --ring: rgba(111, 149, 255, .45); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 16px rgba(0,0,0,.35); } html[data-theme="contrast"] { --bg: #ffffff; --surface: #ffffff; --text: #000000; --muted: #222222; --border: #000000; --ring: rgba(0,0,0,.6); } /* ------------------------- Reseteos suaves ------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, canvas { max-width: 100%; display: block; } /* ------------------------- Layout base ------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding: 16px; } .header { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: saturate(130%) blur(8px); border-bottom: 1px solid var(--border); } .navbar { display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { width: 28px; height: 28px; border-radius: 6px; } .brand #brand-title { font-weight: 700; letter-spacing: .2px; } .nav { margin-left: 12px; display: flex; gap: 8px; } .nav [data-route] { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .04s ease, background .2s ease, border-color .2s ease; } .nav [data-route]:hover { background: var(--brand-50); border-color: var(--brand-200); } .nav [data-route].active { background: var(--brand-50); border-color: var(--brand-300); box-shadow: 0 0 0 1.5px var(--brand-200) inset; } .controls { margin-left: auto; display: flex; gap: 8px; align-items: center; } .select { padding: 8px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; outline: none; } .select:focus-visible { box-shadow: 0 0 0 4px var(--ring); border-color: transparent; } /* ------------------------- Vistas y tarjetas ------------------------- */ .view { padding: 18px 0 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-1); } /* Hero (home) */ .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: stretch; } @media (max-width: 900px){ .hero { grid-template-columns: 1fr; } } /* Banner visual sin tocar HTML: pseudo ilustración a la derecha */ #view-home .hero { position: relative; overflow: hidden; border-radius: var(--radius); padding: 0; background: radial-gradient(90% 120% at 110% -10%, var(--brand-50) 10%, transparent 60%), radial-gradient(80% 130% at 120% 20%, color-mix(in srgb, var(--brand-600), white 80%) 0%, transparent 60%), var(--surface); border: 1px solid var(--border); } #view-home .hero > div { padding: 24px; } #view-home .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-500); color: #232323; font-weight: 800; letter-spacing: .2px; border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow-1); } #view-home h1 { margin: 12px 0 6px; font-size: clamp(22px, 3.2vw, 30px); } #view-home p { color: var(--muted); margin: 0 0 14px; } /* Botones */ .btn { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .04s ease; } .btn:hover { background: var(--brand-50); border-color: var(--brand-200); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } .btn.primary { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } .btn.primary:hover { background: var(--brand-700); border-color: var(--brand-700); } /* Progress bar */ .progressbar { height: 8px; background: #eef1f5; border-radius: 999px; overflow: hidden; } .progressbar > div { height: 100%; background: linear-gradient(90deg, var(--brand-600), color-mix(in srgb, var(--brand-600), #00d4ff 35%)); border-radius: 999px; transition: width .3s ease; } #overall-label { color: var(--muted); } /* ------------------------- Lector (Reader) ------------------------- */ .reader-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; } .reader-toolbar .btn { white-space: nowrap; } .reader-canvas { max-width: 100%; max-height: calc(100vh - 220px); overflow: auto; background: transparent; border-radius: 12px; } #pdf-canvas { display: block; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: var(--shadow-2); } /* ------------------------- Agenda (Planner) ------------------------- */ .planner-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } #lbl-planview { color: var(--muted); margin-right: 4px; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } @media (max-width: 1100px){ .calendar-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 820px){ .calendar-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px){ .calendar-grid { grid-template-columns: repeat(2, 1fr); } } .calendar-cell { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s ease, transform .04s ease, border-color .2s ease; } .calendar-cell:hover { box-shadow: var(--shadow-2); border-color: var(--brand-200); } .calendar-cell header { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; } .calendar-cell header span:first-child { font-weight: 600; } .calendar-cell .actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .calendar-cell.done { background: linear-gradient(180deg, var(--brand-50), transparent 60%); border-color: var(--brand-200); position: relative; } .calendar-cell.done::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--brand-200); pointer-events: none; } .sec-meta { font-size: 13px; color: var(--muted); background: #f4f6fb; border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; margin-left: 8px; } /* ------------------------- Preferencias (Prefs) ------------------------- */ .grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px){ .grid.two { grid-template-columns: 1fr; } } /* Checkbox fila (creada dinámicamente para sync) */ .check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-600); } /* ------------------------- Accesibilidad / Focus visible ------------------------- */ :where(button, [role="button"], .btn, .select):focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } /* ------------------------- Footer ------------------------- */ .footer { border-top: 1px solid var(--border); margin-top: 26px; } .footer .container { padding: 16px; color: var(--muted); font-size: 14px; } /* Extra opcional si agregas
*/ #view-home .hero .hero-art { display: none; } @media (min-width: 901px){ #view-home .hero .hero-art { display: block; padding: 0; background: radial-gradient(70% 70% at 80% 20%, color-mix(in srgb, var(--brand-600), white 85%), transparent 60%); border-left: 1px dashed var(--border); border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } #view-home .hero .hero-art img { width: 92%; max-width: 480px; margin: 28px auto 0; filter: drop-shadow(0 8px 30px rgba(0,0,0,.12)); border-radius: 12px; } } /* Utilities */ .hidden { display: none !important; } /* Hacer las tarjetas un poquito más anchas para evitar corte del rango */ .calendar-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } /* Encabezado con mejor distribución y números más legibles */ .calendar-cell header{ display:flex; justify-content:space-between; align-items:flex-end; gap:8px; } .calendar-cell header span:first-child{ font-weight:700; } .calendar-cell header span:last-child{ font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === BiVA 2026 palette / overrides === */ :root{ --biva-teal: #2d8087; /* turquesa del banner */ --biva-teal-600: #256970; --biva-teal-50: #eaf3f4; --biva-yellow: #f7b500; /* acento */ --biva-ink: #0f1a1b; --biva-ink-60: #516064; --biva-teal-700: #2F7E83; /* referencia: banner/primario */ --biva-teal-150: #CFE7E5; /* NUEVO: fondo de sección (intermedio) */ --biva-teal-150-bd: #B8D6D3;/* borde de sección */ /* asignaciones a UI existente */ --btn-primary-bg: var(--biva-teal); --btn-primary-bg-hover: var(--biva-teal-600); --btn-primary-text: #fff; --chip-active-bg: var(--biva-teal-50); --link: var(--biva-teal); --focus: var(--biva-yellow); } /* oculto visualmente pero accesible */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* header / nav chips */ .header{background:#fff} .nav .active{ background: var(--chip-active-bg); border-color: var(--biva-teal); color: var(--biva-teal); } /* botones */ .btn.primary{ background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); } .btn.primary:hover{ background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); } /* enfoque accesible */ :focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; } /* vínculos / énfasis */ a{ color: var(--link); } a:hover{ text-decoration: underline; } /* tarjetas */ .card{ border-radius: 16px; } /* hero */ .hero-card{ padding: 14px; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, white 72%, var(--biva-teal-50)) 0%, var(--card) 55%); } .hero-banner-wrap{ position: relative; overflow: hidden; border-radius: 18px; } .hero-banner{ display:block; width:100%; height:auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } .hero-actions{ display:grid; gap:14px; padding: 18px 6px 2px; } .hero-buttons{ display:flex; gap:10px; flex-wrap:wrap; } .hero-progress small{ color: var(--biva-ink-60); } /* progress bar en color BiVA */ .progressbar{ background:#eef3f5; } .progressbar>div{ background: linear-gradient(90deg, var(--biva-teal), var(--biva-teal-600)); } /* planner chips */ .planner-controls .btn[aria-pressed="true"]{ background: var(--biva-teal); color:#fff; border-color: var(--biva-teal); } /* celdas de agenda (toque sutil) */ .calendar-cell{ border-color:#e6ecec; background: #fff; } .calendar-cell.done{ box-shadow: inset 0 0 0 2px var(--biva-teal-50); opacity:.9; } .calendar-cell header span:first-child{ color: var(--biva-ink); } /* tema oscuro/alto contraste: ajustes mínimos */ html[data-theme="dark"] .btn.primary{ background:#0f5b61; border-color:#0f5b61; } html[data-theme="contrast"] .btn.primary{ outline:3px solid #000; } /* === Brand Logo (cápsula turquesa para logo blanco) === */ :root{ --biva-teal-700:#0F666D; /* oscuro */ --biva-teal-600:#1B7A81; /* medio */ } .brand { display:flex; align-items:center; gap:10px; } .brand .logo-wrap{ display:inline-flex; align-items:center; background: var(--biva-teal-700); padding: 6px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); } #biva-logo{ display:block; height:28px; /* puedes subir a 32px si quieres más presencia */ width:auto; } /* Accesible pero oculto visualmente */ .sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* Responsive tweak */ @media (max-width: 640px){ #biva-logo{ height:24px; } .brand .logo-wrap{ padding:5px 10px; } } /* Brand capsule - logo ancho sin recortes */ .header .brand img, .brand-capsule img, #brand-logo { height: 308px; /* controla la altura visible */ width: auto; /* mantiene proporción */ max-width: 320px; /* evita que invada la navegación */ object-fit: contain; /* nada de recortes */ border-radius: 0; /* que no se redondee como icono */ display: block; } /* si el header tiene cápsula, permite que el logo respire */ .brand-capsule { overflow: visible; /* por si había hidden */ } /* ================= THEME TOKENS ================= */ :root{ --bg: #f7f9fb; --card: #ffffff; --text: #0b1220; --muted: #5b667a; --ring: #d6e3ea; --brand: #0a8a83; /* turquesa BiVA */ --brand-2: #f6a800; /* amarillo BiVA */ --btn-fg: #fff; } html[data-theme="dark"]{ --bg:#0f141a; --card:#111820; --text:#e9eef5; --muted:#9aa7b3; --ring:#243041; --brand:#0fb4ab; --brand-2:#ffc84d; --btn-fg:#0f141a; } html[data-theme="contrast"]{ --bg:#ffffff; --card:#ffffff; --text:#000000; --muted:#222; --ring:#000; --brand:#000000; --brand-2:#ffcc00; --btn-fg:#000; } /* Aplicación de tokens a tus superficies principales */ body{ background:var(--bg); color:var(--text); } .card{ background:var(--card); border-color:var(--ring); } .btn.primary{ background:var(--brand); border-color:var(--brand); color:var(--btn-fg); } .nav .active{ background:color-mix(in oklab, var(--brand) 12%, #fff); border-color:color-mix(in oklab, var(--brand) 25%, #d4e2ff); } .reader-toolbar button.primary{ background:var(--brand); border-color:var(--brand); color:var(--btn-fg); } .progressbar{ background:color-mix(in oklab, var(--brand) 12%, var(--ring)); } .progressbar>div{ background:var(--brand); } /* Header brand logo (evita cortes y pixelado) */ .brand img{ height:32px; width:auto; object-fit:contain; image-rendering:-webkit-optimize-contrast; } /* ================= MOBILE TUNING ================= */ @media (max-width: 640px){ .navbar{ flex-wrap:wrap; gap:10px; } .nav{ order:3; width:100%; overflow-x:auto; padding-bottom:4px; } .reader-toolbar{ flex-wrap:wrap; gap:8px; } #page-label{ font-size:.95rem; } .hero img, .hero picture, .hero-card img{ width:100%; height:auto; display:block; } .card{ border-radius:12px; } .btn{ padding:10px 14px; } } /* ====== Fix lector móvil: toolbar envolvente ====== */ .reader-toolbar{ flex-wrap: wrap; gap:12px; } #page-label{ font-weight:600; } @media (max-width: 640px){ .reader-toolbar{ justify-content:flex-start; } .reader-toolbar .btn{ padding:8px 12px; font-size:14px; } #page-label{ order:3; width:100%; margin-top:4px; font-size:18px; } } /* ====== Tema oscuro: botones legibles y estados ====== */ html[data-theme="dark"] body{ background:#0b1017; color:#e5eef2; } html[data-theme="dark"] .card{ background:#0f172a; border-color:#1f2a3a; } html[data-theme="dark"] .btn{ background:#0f172a; color:#e5eef2; border-color:#324253; } html[data-theme="dark"] .btn:hover{ background:#1a2331; border-color:#3e5368; color:#ffffff; } html[data-theme="dark"] .btn.primary{ background:#0ea5a3; border-color:#0ea5a3; color:#0b1017; } html[data-theme="dark"] .btn.primary:hover{ filter:brightness(0.95); } /* Selector de idioma “cápsula” bien contrastado en oscuro */ html[data-theme="dark"] .controls .select{ background:#0f172a; color:#e5eef2; border-color:#324253; } /* Pastillas/etiquetas (agenda/toolbar) más legibles en oscuro */ html[data-theme="dark"] .calendar-cell header{ color:#cfe7ee; } /* ===== Reader toolbar: responsive ===== */ .reader-toolbar{ display:flex; /* por si no lo tenía */ flex-wrap:wrap; /* permite romper a varias filas */ gap:12px; align-items:center; justify-content:space-between; min-width:0; /* evita desbordes por flex */ } .reader-toolbar > div{ display:flex; /* override a los inline styles */ gap:8px; align-items:center; flex-wrap:wrap; /* los botones también pueden bajar de línea */ min-width:0; } #page-label{ font-weight:600; white-space:nowrap; } /* Tablets y teléfonos */ @media (max-width: 720px){ .reader-toolbar{ gap:8px; } .reader-toolbar > div{ flex:1 1 100%; /* cada grupo ocupa toda la fila */ justify-content:center; } #page-label{ order:3; /* que el contador quede en su propia fila */ flex:1 1 100%; text-align:center; font-size:18px; margin-top:2px; } .reader-toolbar .btn{ padding:8px 12px; font-size:14px; white-space:nowrap; /* evita que se corte el texto de cada botón */ } } /* Teléfonos pequeños */ @media (max-width: 420px){ .reader-toolbar .btn{ padding:6px 10px; font-size:13px; } } /* --- Planner: tarjetas de sección con fondo turquesa suave --- */ :root{ /* por si no existían aún */ --teal-50: #E6F3F2; --teal-100: #CFE8E6; --teal-900: #0E4A47; } /* SOLO las tarjetas que crea Planner dentro del contenedor */ #planner-container > section.card{ background: var(--teal-50); border-color: var(--teal-100); box-shadow: 0 1px 0 rgba(14,74,71,.04), 0 8px 24px rgba(14,74,71,.06); } #planner-container > section.card h3{ color: var(--teal-900); } /* “vacío / todo hecho” */ #planner-container .empty-hint{ color: var(--teal-900); opacity:.75; padding: 12px 0 18px; font-weight: 600; } /* Secciones del planner */ #planner-container > section.card{ background: var(--biva-teal-150); border-color: var(--biva-teal-150-bd); box-shadow: 0 1px 0 rgba(47,126,131,.06) inset; } /* Contraste de las tarjetitas (días) sobre el fondo turquesa */ #planner-container .calendar-cell{ background:#fff; } /* Tema oscuro */ [data-theme="dark"] #planner-container > section.card{ background: color-mix(in srgb, var(--biva-teal-700) 16%, #0f1417); border-color: color-mix(in srgb, var(--biva-teal-700) 28%, #0f1417); } @supports not (color-mix(in srgb, white 50%, black 50%)){ [data-theme="dark"] #planner-container > section.card{ background:#16393C; border-color:#1F4F53; } } /* Descargas debajo del hero */ .download-card { margin-top: 1rem; } .download-buttons { display: flex; gap: .75rem; flex-wrap: wrap; } .download-title { margin: 0 0 .5rem 0; } /* Opcional (mejor alineación en pantallas pequeñas) */ @media (max-width: 520px) { .download-buttons { justify-content: center; } } /* ===== Descargas: estilo pill como el menú ===== */ #view-home .download-card { margin-top: 1rem; } #view-home .download-title { margin: 0 0 .5rem 0; } #view-home .download-buttons { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; } /* Botón pill con doble borde sutil y sombra */ #view-home .download-buttons .btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none; line-height: 1; border: 1px solid color-mix(in oklab, var(--biva-teal-600) 24%, transparent); background: color-mix(in oklab, var(--biva-teal-50) 85%, white); color: var(--biva-teal-900); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.04); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } /* “Borde doble” ultra sutil */ #view-home .download-buttons .btn::after { content: ""; position: absolute; inset: -2px; border-radius: 9999px; border: 1px solid rgba(0,0,0,.06); pointer-events: none; } /* Hover / Active */ #view-home .download-buttons .btn:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--biva-teal-100) 70%, white); box-shadow: 0 2px 10px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.6) inset; } #view-home .download-buttons .btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.6) inset; } /* Accesibilidad: focus visible */ #view-home .download-buttons .btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--biva-teal-600) 70%, transparent); outline-offset: 2px; } /* Íconos por botón (SVG como máscara, hereda currentColor) */ #btn-program::before, #btn-poster::before { content: ""; width: 1.1em; height: 1.1em; display: inline-block; mask-size: 100% 100%; mask-repeat: no-repeat; background-color: currentColor; } /* icono “document” para Programa */ #btn-program::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); } /* icono “image/poster” para Afiche */ #btn-poster::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-4-4a2 2 0 0 0-2.8 0L7 18'/%3E%3Cpath d='m16 21 5-5'/%3E%3C/svg%3E"); } /* Modo oscuro: ajuste de contraste si usas data-theme="dark" */ :root[data-theme="dark"] #view-home .download-buttons .btn { background: color-mix(in oklab, var(--biva-teal-900) 12%, black); border-color: color-mix(in oklab, var(--biva-teal-400) 30%, transparent); color: white; } :root[data-theme="dark"] #view-home .download-buttons .btn:hover { background: color-mix(in oklab, var(--biva-teal-800) 22%, black); } /* ===== Lema debajo del hero ===== */ .hero-motto { position: relative; z-index: 1; width: min(92%, 760px); margin: -2.25rem auto 0; padding: 1rem 1.5rem .65rem; text-align: center; } .hero-motto-top { width: min(100%, 980px); margin: 0 auto 1.25rem; padding: .25rem 1rem 0; } .hero-motto-bottom { width: min(100%, 980px); margin: 1.15rem auto 0; padding: .45rem 1rem 0; } .hero-motto p { margin: 0; font-family: "Allura", "Brush Script MT", "Segoe Script", cursive; font-size: clamp(2rem, 4.3vw, 3.7rem); font-style: normal; font-weight: 400; line-height: 1.15; color: var(--biva-teal-700); letter-spacing: .2px; text-wrap: balance; text-shadow: 0 6px 18px rgba(15, 102, 109, .12); } /* detalle visual sutil */ .hero-motto p::before, .hero-motto p::after { color: color-mix(in oklab, var(--biva-teal-700) 70%, white); } .event-countdown { margin: 1.2rem auto 0; width: min(100%, 860px); padding: 1.4rem 1rem 0; text-align: center; } .event-kicker { margin: 0 0 .85rem; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--biva-teal-700); } .countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: .85rem; } .countdown-unit { padding: 1rem .7rem .85rem; border-radius: 18px; border: 1px solid color-mix(in oklab, var(--biva-teal-600) 18%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--biva-teal-50) 94%, white) 0%, white 100%); box-shadow: 0 12px 24px rgba(15, 102, 109, .08), inset 0 1px 0 rgba(255,255,255,.75); } .countdown-unit span { display: block; font-size: clamp(1.8rem, 3.3vw, 2.7rem); font-weight: 800; line-height: 1; color: var(--biva-teal-700); font-variant-numeric: tabular-nums; } .countdown-unit small { display: block; margin-top: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--biva-ink-60); } .event-date { display: block; margin: 2.35rem 0 0; padding-top: .6rem; font-size: .98rem; font-weight: 600; color: var(--biva-ink-60); } /* Modo oscuro */ :root[data-theme="dark"] .hero-motto p { color: color-mix(in oklab, white 88%, var(--biva-teal-200)); } :root[data-theme="dark"] .hero-card{ background: linear-gradient(180deg, color-mix(in oklab, var(--biva-teal-700) 16%, #0f172a) 0%, #0f172a 52%); } :root[data-theme="dark"] .event-kicker, :root[data-theme="dark"] .countdown-unit span { color: color-mix(in oklab, white 90%, var(--biva-teal-150)); } :root[data-theme="dark"] .countdown-unit { background: color-mix(in oklab, var(--biva-teal-700) 20%, #0f172a); border-color: color-mix(in oklab, var(--biva-teal-150) 18%, transparent); box-shadow: 0 10px 24px rgba(0,0,0,.22); } :root[data-theme="dark"] .countdown-unit small, :root[data-theme="dark"] .event-date { color: color-mix(in oklab, white 82%, var(--biva-teal-150)); } /* Responsive */ @media (max-width: 768px) { .hero-motto { width: min(94%, 560px); margin-top: -1.45rem; padding: .85rem 1rem .2rem; } .hero-motto-top { width: min(100%, 760px); margin: 0 auto 1rem; padding-top: 0; } .hero-motto-bottom { width: min(100%, 760px); margin: .95rem auto 0; padding-top: .2rem; } .hero-motto p { font-size: clamp(1.9rem, 10vw, 3rem); line-height: 1.1; } .event-countdown { padding-top: .75rem; } .countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .countdown-unit { padding: .9rem .6rem .8rem; } .countdown-unit span { font-size: 1.8rem; } }