/* ========================================================================= V24 — Correcciones de UX/UI y técnicas Este archivo se carga DE ÚLTIMO para sobrescribir lo necesario. Cambios: 1. Header fijo ya no invade los paneles de ZEALAB (scroll-margin-top). 2. Fuentes de marca reemplazadas por web fonts reales (cargadas en ). 3. Contraste AA en las tarjetas de SEGUROS. 4. Botón flotante "Contáctanos" con zona segura (no tapa contenido). 5. Ayuda visual en el estado inicial de ZEALAB. ========================================================================= */ /* --- 2. Sustitución de las familias de marca por web fonts reales --------- Marthin Slant / Roca Two Bold Italic / LEMON MILK son fuentes comerciales que no estaban cargadas (todo caía a Georgia/Arial). Se sustituyen por Playfair Display (display/script) y Epilogue (sans/UI), que sí se cargan desde Google Fonts en el de cada página. Así el sitio se ve igual en cualquier equipo y queda tipográficamente consistente con FLOWNEWS. */ :root { --font-script: "Playfair Display", Georgia, serif; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-sans: "Epilogue", "Helvetica Neue", Arial, sans-serif; } /* Reemplaza los usos hard-coded de Georgia por la display font de marca, para que los títulos italic usen Playfair de forma coherente. */ .lab-title-stage h1 { font-family: var(--font-display); letter-spacing: -.03em; } .lab-selector-band .lab-tabs button, .lab-visible-contact h2 { font-family: var(--font-display); } /* --- 1. Header fijo ya no tapa los paneles al desplegar ------------------- El JS hace scrollIntoView sobre el contenido; como el header es fixed, compensamos con scroll-margin-top igual a la altura del header + aire. */ [data-lab-content], .lab-content-shell { scroll-margin-top: 120px; } @media (max-width: 980px) { [data-lab-content], .lab-content-shell { scroll-margin-top: 96px; } } /* --- 3. Contraste AA en tarjetas de SEGUROS ------------------------------- Antes: rosa claro (#f2c5ce) sobre blanco = ilegible (~1.3:1). Ahora: verde profundo de marca sobre blanco (>7:1, cumple AA y AAA). */ .seguros-card span, .seguros-card h3, .lab-wireframe .seguros-card span, .lab-wireframe .seguros-card h3 { color: var(--green-dark); } /* --- 4. Botón flotante "Contáctanos": zona segura ------------------------- Antes tapaba el paso "LECTURA" del proceso en mobile. Le damos un fondo con leve sombra y, sobre todo, reservamos espacio al final de cada panel para que nunca solape el último contenido. */ .lab-wireframe .lab-panel { padding-bottom: 132px; } @media (max-width: 640px) { .lab-wireframe .lab-panel { padding-bottom: 116px; } /* En mobile el botón se centra abajo para no chocar con el texto lateral. */ .global-contact-cta { left: 50%; right: auto; transform: translateX(-50%); } .global-contact-cta:hover, .global-contact-cta:focus-visible { transform: translateX(-50%) translateY(-3px); } } /* --- 5. Estado inicial de ZEALAB: afordancia y menos vacío ---------------- Colapsado, la banda verde quedaba enorme y vacía sin decir qué hacer. Reducimos su altura y añadimos una pista visible sobre los botones. */ .lab-selector-band { min-height: clamp(200px, 22vw, 300px); padding: 40px 20px; position: relative; } .lab-selector-band::before { content: "Selecciona una línea de servicio"; position: absolute; top: 22px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .72); font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 640px) { .lab-selector-band::before { font-size: 11px; top: 16px; } } /* Cuando ya hay un panel activo, la pista deja de mostrarse. */ .lab-section.has-active-panel .lab-selector-band::before { content: none; } /* --- Menor: ocultar el icono de Spotify hasta tener URL real -------------- Estaba como href="#" (enlace muerto). Se oculta para no ofrecer un canal que no lleva a ningún sitio. Para reactivarlo: poner la URL en el y borrar esta regla. */ .footer-social-links a[href="#"] { display: none; } /* --- UX crítico: botón ENVIAR visible en los formularios inline de ZEALAB - Antes el único botón de envío era class="sr-only" (invisible): el usuario veía los campos pero no tenía forma clara de enviar. Ahora hay un botón real, estilizado igual que el del modal, alineado a la derecha del grid. */ .lab-inline-submit { justify-self: end; min-width: clamp(150px, 22vw, 200px); min-height: 44px; margin-top: 10px; padding: 11px 30px; border: 2px solid var(--green-dark); border-radius: 999px; background: var(--green-dark); color: var(--white); font-family: var(--font-sans); font-size: clamp(13px, 1.4vw, 16px); font-weight: 800; letter-spacing: .08em; line-height: 1; text-align: center; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .lab-inline-submit:hover, .lab-inline-submit:focus-visible { transform: translateY(-2px); background: var(--pink-strong); color: var(--green-dark); box-shadow: 0 12px 28px rgba(13, 53, 29, .22); } @media (max-width: 640px) { .lab-inline-submit { width: 100%; justify-self: stretch; min-width: 0; } }