/* ============================================================ LANDINGS DE PRODUCTO — Busae Capa de diseño COMPARTIDA por todas las landings (GPS, Ticketing, Cámaras, Contador, Hardware, Referencias, Evoluziona…) en ES/EN/FR. Reutiliza los tokens de la home y de precios: azul corporativo #125781, acento naranja #FF7400, degradado azul con patrón de puntos, tarjetas blancas redondeadas y sombras suaves. TODO está scoped a .landing_page (clase del ), de modo que la home, precios y el blog no se ven afectados. Cualquier landing nueva solo tiene que añadir esa clase para heredar el diseño. ============================================================ */ .landing_page { --lp-blue: #125781; --lp-blue-soft: #1a6f9e; --lp-orange: #FF7400; --lp-ink: #1f2a36; --lp-muted: #5f7183; --lp-bg: #F4F7F9; --lp-line: rgba(18, 87, 129, 0.12); color: var(--lp-ink); background: var(--lp-bg); overflow-x: hidden; } /* ============================================================ 1. HERO ============================================================ */ .lp_hero { position: relative; overflow: hidden; padding: 62px 24px 74px; text-align: center; color: #fff; background: radial-gradient(900px 480px at 0% 0%, rgba(255, 116, 0, 0.16), transparent 60%), radial-gradient(900px 460px at 100% 100%, rgba(30, 122, 179, 0.45), transparent 60%), linear-gradient(180deg, #1a6f9e 0%, #125781 50%, #0f4d72 100%); } .lp_hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.55; pointer-events: none; } .lp_hero_inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .lp_overline { display: inline-block; text-transform: uppercase; letter-spacing: 0.2em; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; } .lp_hero h1 { font-size: 46px; font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 16px; color: #fff; } .lp_hero .lp_sub { max-width: 720px; margin: 0 auto; font-size: 17.5px; line-height: 1.62; color: rgba(255, 255, 255, 0.9); font-weight: 400; } /* ---------- Franja de puntos clave (bajo el hero) ---------- Los antiguos "chips" salían amontonados dentro del hero. Ahora viven en su propia franja blanca, con más aire, y aparecen de forma escalonada al hacer scroll. */ .landing_page .lp_highlights { position: relative; z-index: 2; max-width: 1152px; margin: -36px auto 0; padding: 0 24px; } .landing_page .lp_points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--lp-line); border-radius: 18px; box-shadow: 0 14px 38px rgba(10, 40, 64, 0.09); overflow: hidden; } .landing_page .lp_point { display: flex; align-items: center; gap: 14px; padding: 22px 26px; position: relative; /* El estado inicial oculto lo aplica .reveal_ready (lo añade el JS), de modo que sin JavaScript los puntos se ven siempre. */ } /* separador fino entre puntos */ .landing_page .lp_point + .lp_point::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--lp-line); } .landing_page .lp_point_icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(18, 87, 129, 0.1), rgba(26, 111, 158, 0.16)); } .landing_page .lp_point_icon svg { width: 16px; height: 16px; fill: var(--lp-blue); } .landing_page .lp_point_txt { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: #33414f; } /* Botones del hero */ .lp_hero_actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; } .lp_btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 11px; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease; } .lp_btn svg { width: 17px; height: 17px; fill: currentColor; } .lp_btn--primary { background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%); color: #fff; box-shadow: 0 12px 26px rgba(237, 111, 24, 0.32); } .lp_btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px rgba(237, 111, 24, 0.42); text-decoration: none; color: #fff; } .lp_btn--ghost { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; backdrop-filter: blur(4px); } .lp_btn--ghost:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); text-decoration: none; color: #fff; } /* ============================================================ 2. SECCIONES Y TÍTULOS ============================================================ */ .landing_page section { max-width: 1200px; margin: 0 auto; padding: 58px 24px 0; } .landing_page section:last-of-type { padding-bottom: 10px; } /* El separador azul grueso del diseño antiguo se sustituye por aire */ .landing_page .divider { height: 1px; background: var(--lp-line); max-width: 1152px; margin: 58px auto 0; opacity: 0.75; } /* Títulos de sección. Se excluye el footer: allí "Contáctenos" va en blanco sobre el bloque azul y no debe heredar el azul corporativo. */ .landing_page section .h2_title, .landing_page main .h2_title { font-size: 33px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--lp-blue); text-align: center; margin: 0 auto 10px; max-width: 900px; } .landing_page footer .h2_title { color: #fff; } /* Bajada opcional bajo el título de sección */ .landing_page .lp_lead { max-width: 720px; margin: 0 auto; text-align: center; font-size: 16.5px; line-height: 1.62; color: var(--lp-muted); } /* ---------- ESPACIADO UNIFORME título → contenido ---------- Se aplica al hermano siguiente sea cual sea (rejillas, acordeones, tablas, apps, galerías…), de modo que TODOS los bloques de TODAS las landings dejan exactamente el mismo aire bajo su título. */ .landing_page section > .h2_title, .landing_page section > .center_wrapper > .h2_title { margin-bottom: 0; } .landing_page section > .h2_title + .lp_lead, .landing_page section > .center_wrapper > .h2_title + .lp_lead { margin-top: 12px; } /* Varias bajadas seguidas: se separan entre sí, no con el hueco grande */ .landing_page .lp_lead + .lp_lead { margin-top: 14px; } .landing_page section > .h2_title + *:not(.lp_lead), .landing_page section > .lp_lead + *:not(.lp_lead), .landing_page section > .center_wrapper > .h2_title + *:not(.lp_lead), .landing_page section > .center_wrapper > .lp_lead + *:not(.lp_lead) { margin-top: 36px; } /* ============================================================ 3. TARJETAS DE CONTENIDO (listas de ventajas) ============================================================ */ .landing_page .flex_list_container { display: flex; flex-direction: column; gap: 26px; } /* auto-fit: con 2 hijos → 2 columnas; con 1 hijo → ocupa todo el ancho (evita la columna vacía que quedaba en secciones como "Materiales"). */ .landing_page .flex_list_item { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 30px; align-items: center; color: var(--lp-ink); font-size: 16px; font-weight: 400; background: #fff; border: 1px solid var(--lp-line); border-radius: 20px; padding: 26px; box-shadow: 0 8px 26px rgba(10, 40, 64, 0.05); } .landing_page .flex_list_item ul { list-style: none; margin: 0; padding: 0; flex: initial; display: flex; flex-direction: column; gap: 4px; } /* Cada ventaja es una fila propia: badge con check, texto legible y una sutil reacción al pasar el ratón. Más atractivo que el guion plano. */ .landing_page .flex_list_item li { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 11px 14px 11px 12px; border-radius: 12px; line-height: 1.45; font-size: 15.8px; color: #33414f; transition: background 0.28s ease, transform 0.28s ease; } .landing_page .flex_list_item li:hover { background: rgba(18, 87, 129, 0.05); transform: translateX(3px); } /* Badge con check (sustituye al guion antiguo) */ .landing_page .flex_list_item ul li::before { content: ""; position: static; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(18, 87, 129, 0.11), rgba(26, 111, 158, 0.18)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23125781' d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; background-color: rgba(18, 87, 129, 0.09); transition: background-color 0.28s ease; } .landing_page .flex_list_item li:hover::before { background-color: rgba(18, 87, 129, 0.17); } /* ---------- Aparición progresiva (patrón seguro) ---------- El estado oculto SOLO se aplica cuando el JS marca el grupo con .reveal_ready, así que sin JavaScript el contenido se ve siempre. */ .landing_page .reveal_ready > .r_item { opacity: 0; transform: translateY(14px); /* Sólo se animan opacity y transform: las compone la GPU, no provocan recálculo de maquetación y no afectan al tiempo de carga. */ transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* Liberamos will-change cuando la animación ya ha terminado */ .landing_page .reveal_ready > .r_item.is_visible { will-change: auto; } .landing_page .reveal_ready > .r_item.is_visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .landing_page .reveal_ready > .r_item { opacity: 1 !important; transform: none !important; } } /* Cuando el lateral contiene fichas de material, se reparten en rejilla para aprovechar el ancho en lugar de apilarse en una columna estrecha. */ .landing_page .flex_list_side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; } .landing_page .flex_list_item img { width: 100%; height: auto; /* anula el max-width:500px de main.css: el ancho lo marca la rejilla */ max-width: none; border-radius: 14px; display: block; } /* ============================================================ 4. VÍDEO — facade de YouTube (no carga el iframe hasta el click) ============================================================ */ .yt_facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b2033; box-shadow: 0 12px 30px rgba(10, 40, 64, 0.16); } .yt_btn { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; cursor: pointer; display: block; } /* Todas las miniaturas comparten el mismo encuadre 16:9. `cover` recorta las bandas negras que YouTube añade en hqdefault (4:3), de modo que todas se ven completas y con la misma proporción. max-width:none es imprescindible: main.css limita a 500px cualquier img dentro de .flex_list_item y dejaba una franja negra a la derecha. */ .landing_page .yt_facade .yt_thumb, .yt_facade .yt_thumb, .yt_thumb { width: 100%; height: 100%; max-width: none; min-width: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.45s ease, filter 0.3s ease; } .yt_btn:hover .yt_thumb { transform: scale(1.03); filter: brightness(0.9); } /* Evita el parpadeo del marcador gris de YouTube: la miniatura se revela cuando el JS confirma que es real. Sin JS se ve siempre. */ .yt_thumb.is_checking { opacity: 0; } .yt_thumb.is_checking.is_ready { opacity: 1; transition: opacity 0.25s ease; } .yt_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; transition: transform 0.25s ease; pointer-events: none; } .yt_btn:hover .yt_play { transform: translate(-50%, -50%) scale(1.09); } .yt_play svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); } .yt_play_bg { fill: #FF0000; opacity: 0.92; } .yt_btn:hover .yt_play_bg { opacity: 1; } .yt_btn:focus-visible { outline: 3px solid var(--lp-orange); outline-offset: -3px; } .yt_facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .yt_ns { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 20px; font-weight: 600; } /* ---------- HOME: mismos vídeos con facade ---------- La home ya envolvía sus vídeos en .video-wrapper (truco de padding-bottom). El facade se coloca en absoluto dentro de ese hueco, así la maquetación existente no cambia y sólo gana el nuevo diseño. No se usa :has() para no depender del soporte del navegador. */ .video-wrapper { border-radius: 16px; } .video-wrapper > .yt_facade { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 16px; box-shadow: none; } /* Vídeo de cabecera de la home: mismo ancho que tenía el iframe (800px) */ .yt_facade--home_hero { max-width: 800px; margin: 24px auto 0; } /* Casos de éxito de la home: era flex con justify-content:space-between, así que con 2 elementos quedaba un hueco enorme en el centro (parecía faltar un vídeo). Con rejilla se reparten el ancho a partes iguales. */ .home_reference_wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; justify-content: initial; } .home_reference_wrapper .reference_item { width: 100%; } .home_reference_wrapper .yt_facade { margin-top: 8px; } /* ============================================================ EQUIPO (home) — alineación con nombres de distinta longitud Unos nombres ocupan una línea y otros dos ("Fernando Cobo Balaguer", "Alejandro Martinez"…). Se reserva la altura de dos líneas y el texto se apoya abajo, de modo que el subrayado naranja y el cargo quedan alineados en toda la fila. ============================================================ */ .team_item h3 { display: flex; flex-direction: column; justify-content: flex-end; /* 2 líneas (2 × 1.25em) + el subrayado naranja (2px + 8px de margen) */ min-height: calc(2.5em + 10px); } /* ---------- Bloque a dos columnas: vídeo vertical + galería ---------- El short (9:16) manda a la izquierda y las fotos rellenan la derecha en rejilla, de modo que ambas columnas tienen una altura pareja y no queda espacio muerto. */ .landing_page .lp_split { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 20px 38px; align-items: stretch; } .landing_page .lp_split .lp_short { margin: 0; } .landing_page .lp_split_title { font-size: 19px; font-weight: 600; line-height: 1.32; color: var(--lp-blue); margin: 0 0 14px; } /* La galería de la derecha: dos fotos arriba y la comparativa abajo a todo el ancho. Las celdas usan proporción fija (no height:100%, que creaba una dependencia circular con la altura del vídeo) para que el alto del conjunto coincida con el del short y escale al redimensionar. */ .landing_page .lp_split .photo_grid { grid-template-columns: repeat(2, 1fr); gap: 16px; align-content: start; } .landing_page .lp_split .photo_grid > a { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } /* La última imagen (la comparativa de ambas cámaras) ocupa las 2 columnas */ .landing_page .lp_split .photo_grid > a:last-child { grid-column: 1 / -1; aspect-ratio: 2.76; } .landing_page .lp_split .photo_grid img { height: 100%; min-height: 0; } /* ---------- Short vertical (9:16) ---------- Cuando va suelto se presenta centrado. */ .landing_page .lp_short { display: grid; grid-template-columns: minmax(0, 330px); justify-content: center; margin: 0; } .yt_facade--vertical { aspect-ratio: 9 / 16; border-radius: 20px; box-shadow: 0 18px 44px rgba(10, 40, 64, 0.18); } .landing_page .lp_short figcaption { margin-top: 14px; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--lp-muted); } @media (max-width: 900px) { /* En tablet y móvil el vídeo pasa arriba, centrado, y las fotos debajo */ .landing_page .lp_split { grid-template-columns: 1fr; gap: 30px; } .landing_page .lp_split .lp_short { grid-template-columns: minmax(0, 300px); justify-content: center; text-align: center; } .landing_page .lp_split .photo_grid > a, .landing_page .lp_split .photo_grid > a:last-child { aspect-ratio: 4 / 3; grid-column: auto; } } @media (max-width: 640px) { .landing_page .lp_short { grid-template-columns: minmax(0, 280px); } .landing_page .lp_split .photo_grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .landing_page .lp_split .photo_grid img { height: 110px; } .yt_facade--vertical { border-radius: 16px; } } /* ---------- Modal del reproductor (vídeo a tamaño amplio) ---------- */ .v_modal { position: fixed; inset: 0; z-index: 100050; display: none; align-items: center; justify-content: center; padding: 32px 24px; background: rgba(6, 18, 28, 0.93); backdrop-filter: blur(3px); } .v_modal.is_open { display: flex; } body.v_modal_open { overflow: hidden; } .v_modal_box { width: 100%; max-width: 1240px; display: flex; align-items: center; justify-content: center; } .v_modal_frame { width: 100%; /* nunca más alto que la ventana, manteniendo 16:9 */ max-width: min(1240px, calc((100vh - 130px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } .v_modal_frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* Vídeo vertical (shorts): el reproductor pasa a 9:16 y se limita por la altura de la ventana para que se vea entero. */ .v_modal.is_vertical .v_modal_frame { aspect-ratio: 9 / 16; max-width: min(420px, calc((100vh - 130px) * 9 / 16)); } .v_modal_close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 27px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .v_modal_close:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); } .v_modal_close:focus-visible { outline: 3px solid var(--lp-orange); outline-offset: 3px; } @media (max-width: 640px) { .v_modal { padding: 16px 12px; } .v_modal_close { top: 10px; right: 12px; width: 40px; height: 40px; font-size: 24px; } .v_modal_frame { max-width: 100%; border-radius: 10px; } } /* Rejilla de vídeos: el mínimo permite 4 por fila en escritorio incluso en los contenedores más estrechos (4 × 230 + 3 × 24 = 992) y se reduce sola en tablet y móvil. */ .landing_page .row_items, .landing_page .video_container { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .landing_page .row_items iframe, .landing_page .video_container iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; flex: initial; } /* Bloque texto + vídeo */ .landing_page .content_with_video { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: #fff; border: 1px solid var(--lp-line); border-radius: 20px; padding: 28px; box-shadow: 0 8px 26px rgba(10, 40, 64, 0.05); } .landing_page .content_with_video .text_content, .landing_page .content_with_video .video_content { flex: initial; width: auto; } .landing_page .content_with_video.video_left .text_content { order: 2; } .landing_page .content_with_video.video_left .video_content { order: 1; } .landing_page .content_with_video .video_content iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; } /* ============================================================ 5. MATERIALES / EQUIPOS ============================================================ */ /* Ficha de material: tarjeta autónoma. Con imagen → 2 columnas; sin imagen → una sola columna a todo el ancho de la tarjeta. */ .landing_page .materials_item { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: center; background: #fff; border: 1px solid var(--lp-line); border-radius: 18px; padding: 26px 28px; box-shadow: 0 8px 24px rgba(10, 40, 64, 0.05); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .landing_page .materials_item:hover { transform: translateY(-3px); border-color: rgba(26, 111, 158, 0.28); box-shadow: 0 16px 34px rgba(10, 40, 64, 0.1); } /* Dentro de una rejilla de fichas cada tarjeta ocupa su celda entera */ .landing_page .flex_list_side .materials_item, .landing_page section > .materials_item { grid-template-columns: 1fr; height: 100%; align-content: start; gap: 0; } /* Cuando las fichas cuelgan directamente de la sección, la sección pasa a rejilla para repartirlas (en vez de apilarlas a todo el ancho). Si el navegador no soporta :has(), se mantiene el apilado actual. */ .landing_page section:has(> .materials_item) { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: stretch; } .landing_page section:has(> .materials_item) > .h2_title, .landing_page section:has(> .materials_item) > .lp_lead, .landing_page section:has(> .materials_item) > p:not([class]) { grid-column: 1 / -1; } /* En rejilla el espacio lo da el gap (18px): el título aporta 18px más para que el hueco total sea también de 36px, como en el resto. */ .landing_page section:has(> .materials_item) > .h2_title { margin-bottom: 18px; } .landing_page section:has(> .materials_item) > .h2_title + .materials_item { margin-top: 0; } .landing_page section:has(> .materials_item) > .lp_lead { margin-bottom: 18px; } .landing_page section:has(> .materials_item) > .lp_lead + .materials_item { margin-top: 0; } /* ============================================================ MATERIALES SIN IMAGEN → lista de bullets (sin tarjeta blanca) Cada material se presenta como una fila: badge numerado, título y descripción. Con animación de entrada escalonada. ============================================================ */ .landing_page .materials_item:not(:has(img)) { background: none; border: none; box-shadow: none; border-radius: 0; padding: 4px 0; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0 16px; counter-increment: lp_mat; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .landing_page .materials_item:not(:has(img)):hover { transform: none; box-shadow: none; border-color: transparent; } /* Badge con check, igual que el resto de bullets de las landings */ .landing_page .materials_item:not(:has(img))::before { content: ""; grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 4px; border-radius: 9px; background: rgba(18, 87, 129, 0.09); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23125781' d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; transition: background-color 0.28s ease; } .landing_page .materials_item:not(:has(img)):hover::before { background-color: rgba(18, 87, 129, 0.17); } /* La sección lleva el contador y una línea guía discreta */ .landing_page section:has(> .materials_item:not(:has(img))) { counter-reset: lp_mat; } .landing_page .materials_item:not(:has(img)) .materials_text { display: block; height: auto; padding-bottom: 4px; } /* Se elimina el icono genérico que llevaban las tarjetas */ .landing_page .materials_item:not(:has(img)) .materials_text h3 { padding-top: 0; margin: 6px 0 6px; font-size: 18.5px; } .landing_page .materials_item:not(:has(img)) .materials_text h3::before { content: none; } .landing_page .materials_item:not(:has(img)) .materials_text p { font-size: 15.4px; line-height: 1.6; color: #4a5866; margin: 0 0 8px; } /* En bullets el ritmo vertical lo marca el propio listado */ .landing_page section:has(> .materials_item:not(:has(img))) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px 40px; } /* Con 4 materiales (número par) se reparten en 2 columnas equilibradas, en vez de dejar una fila coja de 3 + 1. */ .landing_page section:has(> .materials_item ~ .materials_item ~ .materials_item ~ .materials_item) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .landing_page section:has(> .materials_item ~ .materials_item ~ .materials_item ~ .materials_item) { grid-template-columns: 1fr; } } @media (max-width: 640px) { .landing_page .materials_item:not(:has(img)) { gap: 0 13px; } .landing_page .materials_item:not(:has(img))::before { width: 33px; height: 33px; font-size: 15px; } .landing_page .materials_item:not(:has(img)) .materials_text h3 { font-size: 17px; } } .landing_page .materials_text { display: flex; flex-direction: column; height: 100%; } .landing_page .materials_text h3 { font-size: 19.5px; font-weight: 600; line-height: 1.3; color: var(--lp-blue); margin: 0 0 12px; padding-top: 46px; position: relative; } /* Distintivo circular con la letra del material (A, B, C…) */ .landing_page .materials_text h3::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgba(18, 87, 129, 0.12), rgba(26, 111, 158, 0.18)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23125781' d='M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H576c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM96 304c0-26.5 21.5-48 48-48H432c26.5 0 48 21.5 48 48v16c0 26.5-21.5 48-48 48H144c-26.5 0-48-21.5-48-48V304z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 17px 17px; background-color: rgba(18, 87, 129, 0.08); } .landing_page .materials_text p { padding-left: 0; margin: 0 0 12px; color: #4a5866; line-height: 1.6; font-size: 15.4px; } .landing_page .materials_text p:last-child { margin-bottom: 0; } /* El enlace de la ficha, como botón secundario claro */ .landing_page .materials_text .button, .landing_page .materials_text a.button { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; background: rgba(18, 87, 129, 0.07); border: 1px solid rgba(18, 87, 129, 0.16); color: var(--lp-blue); font-weight: 600; font-size: 14.6px; padding: 11px 18px; border-radius: 10px; text-decoration: none; transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease; } .landing_page .materials_text .button:hover { background: var(--lp-blue); color: #fff; transform: translateY(-2px); text-decoration: none; } .landing_page .materials_item img { width: 100%; height: auto; max-height: 280px; object-fit: contain; display: block; border-radius: 14px; } /* ============================================================ 6. ACORDEONES (funcionalidades y dudas) ============================================================ */ .landing_page .accordion_columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .landing_page .accordion_container { display: flex; flex-direction: column; gap: 12px; background: none; height: auto; } .landing_page .accordion_item { background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .landing_page .accordion_item:last-child { border: 1px solid var(--lp-line); } .landing_page .accordion_item:hover { border-color: rgba(26, 111, 158, 0.34); box-shadow: 0 8px 20px rgba(10, 40, 64, 0.07); } .landing_page .accordion { background: transparent; color: var(--lp-blue); font-size: 16.5px; font-weight: 600; line-height: 1.4; padding: 17px 20px; gap: 12px; align-items: flex-start; transition: color 0.2s ease; } .landing_page .accordion:before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; float: none; border-radius: 50%; background: rgba(18, 87, 129, 0.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23125781' d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E") center / 11px 11px no-repeat; transition: transform 0.3s ease, background-color 0.25s ease; } .landing_page .accordion.active:before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23125781' d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"); transform: rotate(180deg); } .landing_page .panel { padding: 0 20px; } .landing_page .panel p { padding: 0 0 16px 34px; margin: 0; color: #4a5866; line-height: 1.62; font-size: 15.5px; } .landing_page .panel_active { border-top: none; } /* Tema azul: se homogeneiza con el resto (tarjetas blancas) */ .landing_page .accordion_blue_theme { background: none; } .landing_page .accordion_blue_theme .accordion { background: transparent; color: var(--lp-blue); } .landing_page .accordion_blue_theme .accordion_item { border: 1px solid var(--lp-line); } .landing_page .accordion_blue_theme p { color: #4a5866; } .landing_page .accordion_blue_theme .panel_active { border-top: none; } /* ============================================================ 7. GALERÍA DE FOTOS ============================================================ */ .landing_page .photo_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .landing_page .photo_grid a { display: block; /* main.css fija width:18% (pensado para flex); en grid debe ocupar la celda */ width: 100%; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 12px; overflow: hidden; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .landing_page .photo_grid a:hover { transform: translateY(-4px); border-color: rgba(26, 111, 158, 0.3); box-shadow: 0 16px 32px rgba(10, 40, 64, 0.11); } .landing_page .photo_grid img { width: 100%; height: 170px; object-fit: contain; display: block; border-radius: 10px; cursor: zoom-in; } .landing_page .photo_grid img:hover { transform: none; } /* ============================================================ 8. APPS / FUNCIONES / ITEMS GENÉRICOS ============================================================ */ .landing_page .apps_items_wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; } /* Escritorio: las 4 apps en una sola línea. Por debajo, la rejilla auto-fit las reparte sola (2 en tablet, 1 en móvil). */ @media (min-width: 1000px) { .landing_page .apps_items_wrapper { grid-template-columns: repeat(4, 1fr); } } .landing_page .apps_item, .landing_page .apps_item_vertical { display: flex; flex-direction: column; gap: 14px; flex: initial; align-items: flex-start; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 20px rgba(10, 40, 64, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Icono arriba, a tamaño contenido: al ir 4 por fila no cabe en horizontal */ .landing_page .apps_item > img, .landing_page .apps_item_vertical > img { width: 62px; height: 62px; max-width: none; object-fit: contain; flex: 0 0 auto; margin: 0; } .landing_page .apps_item .apps_item_text { flex: 1 1 auto; } .landing_page .apps_item:hover, .landing_page .apps_item_vertical:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10, 40, 64, 0.1); } .landing_page .apps_item h3, .landing_page .apps_item_top h3 { font-size: 18px; font-weight: 600; color: var(--lp-blue); margin: 0 0 8px; } .landing_page .apps_item p { color: #4a5866; line-height: 1.6; margin: 0; } /* ============================================================ 9. TABLAS (comparativas / funciones) ============================================================ */ .landing_page .table_wrapper, .landing_page .lp_table_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; border: 1px solid var(--lp-line); background: #fff; box-shadow: 0 8px 26px rgba(10, 40, 64, 0.05); } .landing_page table { width: 100%; border-collapse: collapse; } .landing_page .table_wrapper table { min-width: 640px; } .landing_page .table_header { font-weight: 600; color: var(--lp-blue); text-align: center; padding: 16px 12px; font-size: 15.5px; } .landing_page .black_td { background: #f4f7fa; color: #33414f; font-weight: 500; padding: 13px 16px; font-size: 15px; border-top: 1px solid var(--lp-line); } .landing_page td { padding: 12px; text-align: center; border-top: 1px solid var(--lp-line); } .landing_page .table_icon { width: 19px; height: 19px; } /* Botón "comprar" dentro de las tablas */ .landing_page a.green_button { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ED6F18 0%, #F58E4A 100%); color: #fff; font-weight: 600; font-size: 14.5px; padding: 11px 20px; border-radius: 10px; text-decoration: none; box-shadow: 0 8px 18px rgba(237, 111, 24, 0.28); transition: transform 0.2s ease, filter 0.2s ease; } .landing_page a.green_button:hover { transform: translateY(-2px); filter: brightness(1.05); } /* Listado de fichas técnicas / enlaces en columnas → tarjetas */ .landing_page .link_columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; column-count: initial; } .landing_page .link_columns a { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px; padding: 14px 16px; color: var(--lp-blue); font-weight: 500; font-size: 15.3px; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .landing_page .link_columns a::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23125781' d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.65; } .landing_page .link_columns a:hover { transform: translateY(-2px); border-color: rgba(26, 111, 158, 0.34); box-shadow: 0 10px 22px rgba(10, 40, 64, 0.09); text-decoration: none; color: var(--lp-orange); } /* ============================================================ 9a. BLOQUE DE FUNCIONALIDADES (icono + texto) El diseño antiguo usaba flex con `flex: 1 1 45%`, así que las tarjetas se estiraban y el contenido quedaba pegado a la izquierda dejando un hueco a la derecha. Ahora las columnas se ajustan al contenido y el grupo se centra en la sección. ============================================================ */ .landing_page .functions_items_wrapper { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-items: center; gap: 30px 70px; } .landing_page .functions_item { flex: initial; display: flex; align-items: center; gap: 20px; } @media (max-width: 900px) { .landing_page .functions_items_wrapper { grid-template-columns: max-content; gap: 24px; } } @media (max-width: 640px) { .landing_page .functions_items_wrapper { grid-template-columns: 1fr; gap: 20px; } .landing_page .functions_item { gap: 15px; } .landing_page .functions_item svg { width: 78px; height: 78px; padding: 16px; } } /* ============================================================ 9b. LOGO DE EVOLUZIONA (logotipo blanco → necesita fondo oscuro) ============================================================ */ .landing_page .title_with_logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-bottom: 26px; } .landing_page .evoluziona_logo { height: auto; width: 250px; max-width: 100%; margin: 0; padding: 16px 22px; border-radius: 16px; background: linear-gradient(135deg, #0f4d72 0%, #125781 100%); box-shadow: 0 10px 26px rgba(10, 40, 64, 0.18); } @media (max-width: 640px) { .landing_page .title_with_logo { gap: 16px; } .landing_page .evoluziona_logo { width: 200px; padding: 13px 18px; } } /* ============================================================ 10. CTA FINAL ============================================================ */ .landing_page .lp_cta { max-width: 1152px; margin: 70px auto 10px; padding: 0 24px; } .lp_cta_inner { position: relative; overflow: hidden; border-radius: 22px; padding: 44px 40px; color: #fff; text-align: center; background: radial-gradient(700px 300px at 100% 0%, rgba(255, 116, 0, 0.14), transparent 60%), linear-gradient(120deg, #1a6f9e 0%, #125781 55%, #0f4d72 100%); } .lp_cta_inner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.5; pointer-events: none; } .lp_cta_inner > * { position: relative; z-index: 1; } .lp_cta_inner h2 { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; } .lp_cta_inner p { max-width: 640px; margin: 0 auto 26px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } .lp_cta_actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* ============================================================ 11. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .landing_page .lp_hero h1 { font-size: 38px; } .landing_page .materials_item { grid-template-columns: 1fr; } .landing_page .accordion_columns { grid-template-columns: 1fr; } } @media (max-width: 860px) { .landing_page .flex_list_item { grid-template-columns: 1fr; gap: 20px; } .landing_page .content_with_video { grid-template-columns: 1fr; gap: 22px; } .landing_page .content_with_video.video_left .text_content, .landing_page .content_with_video.video_left .video_content { order: initial; } } @media (max-width: 640px) { .landing_page section { padding: 40px 16px 0; } .landing_page .divider { margin-top: 40px; } .lp_hero { padding: 44px 18px 52px; } .landing_page .lp_hero h1 { font-size: 28px; line-height: 1.2; } .landing_page .lp_hero .lp_sub { font-size: 15.5px; } .lp_hero_actions { margin-top: 24px; gap: 10px; } .landing_page .lp_highlights { margin-top: -22px; padding: 0 16px; } .landing_page .lp_points { border-radius: 14px; } .landing_page .lp_point { padding: 16px 18px; gap: 12px; } .landing_page .lp_point + .lp_point::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; } .landing_page .lp_point_icon { width: 33px; height: 33px; border-radius: 9px; } .landing_page .lp_point_txt { font-size: 14.8px; } .lp_btn { width: 100%; justify-content: center; padding: 14px 20px; } .landing_page .h2_title { font-size: 25px; } .landing_page .lp_lead { font-size: 15.5px; margin-bottom: 26px; } .landing_page .flex_list_item { padding: 18px; border-radius: 16px; } .landing_page .flex_list_item li { font-size: 15.3px; padding-left: 29px; } .landing_page .materials_item { padding: 20px; border-radius: 16px; } .landing_page .materials_item img { max-height: 220px; } .landing_page .row_items, .landing_page .video_container { grid-template-columns: 1fr; gap: 16px; } .landing_page .apps_items_wrapper { grid-template-columns: 1fr; } .landing_page .photo_grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .landing_page .photo_grid a { padding: 8px; border-radius: 12px; } .landing_page .photo_grid img { height: 110px; } .landing_page .accordion { font-size: 15.5px; padding: 15px 16px; } .landing_page .panel { padding: 0 16px; } .landing_page .panel p { padding-left: 34px; font-size: 15px; } .yt_play { width: 54px; height: 38px; } .landing_page .lp_cta { margin-top: 48px; padding: 0 16px; } .lp_cta_inner { padding: 32px 22px; border-radius: 18px; } .lp_cta_inner h2 { font-size: 22px; } .lp_cta_inner p { font-size: 15.5px; } .lp_cta_actions .lp_btn { width: 100%; } } /* Respeta la preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .landing_page *, .landing_page *::before, .landing_page *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }