/* ========================================================= 1) RESETEO GENERAL - Elimina márgenes y rellenos predeterminados del navegador - box-sizing: border-box hace que padding/border no aumenten el tamaño total ========================================================= */ * { margin: 0; /* Sin margen externo en ningún elemento */ padding: 0; /* Sin relleno interno en ningún elemento */ box-sizing: border-box; /* El padding y border se incluyen dentro del ancho/alto */ } /* ========================================================= AJUSTE VISUAL GLOBAL En vez de usar zoom en body, compactamos un poco el sistema reduciendo levemente el tamaño base de fuente. ========================================================= */ html { font-size: 90%; /* Hace que el sistema se vea un poco más compacto sin romper fixed/sidebar */ } /* ========================================================= 2) VARIABLES GLOBALES - Definidas en :root para usarse en todo el CSS con var(--nombre) - Cambia estos valores para personalizar colores, tamaños, etc. ========================================================= */ :root { --bg: #f5f5f7; /* Color de fondo de la página (gris muy claro) */ --white: #ffffff; /* Blanco puro */ --text: #1d1d1f; /* Color de texto principal (casi negro) */ --muted: #6e6e73; /* Color de texto secundario (gris medio) */ --line: rgba(0, 0, 0, 0.08); /* Color para líneas divisorias sutiles */ --blue: #0071e3; /* Azul principal de la marca - MODIFICA para cambiar el color clave */ --blue-dark: #005bb5; /* Azul más oscuro para hover de botones */ --shadow: 0 20px 50px rgba(0, 0, 0, 0.10); /* Sombra suave estilo Apple para tarjetas */ --radius-xl: 28px; /* Radio de borde grande para tarjetas */ --radius-lg: 22px; /* Radio de borde mediano */ --nav-height: 64px; /* Altura del navbar - MODIFICA si quieres una barra más alta o baja */ --transition: all 0.35s ease; /* Transición suave global para animaciones */ --max-width: 1380px; /* Ancho máximo del contenedor - MODIFICA según tu diseño */ /* Ajustes del banner principal */ --hero-height: 450px; /* Altura del banner hero - MODIFICA para agrandarlo/achicarlo */ --hero-top-gap: 28px; /* Separación entre el navbar y el banner */ /* Colores del botón flotante de WhatsApp */ --whatsapp: #25D366; /* Verde oficial de WhatsApp */ --whatsapp-dark: #1ebe5b; /* Verde más oscuro para el hover */ /* ========================================================= NUEVAS VARIABLES PARA EL CHAT GPT - Modifica estos valores para cambiar colores del chat ========================================================= */ --chat-bg: #ffffff; /* Fondo blanco del panel del chat */ --chat-header-bg: var(--blue); /* Color del encabezado del chat (usa el azul de la marca) */ --chat-bubble-bot: #f0f4ff; /* Color de burbuja del agente/bot (azul muy claro) */ --chat-bubble-user: var(--blue); /* Color de burbuja del usuario (azul de la marca) */ --chat-btn-size: 56px; /* Tamaño del botón flotante del chat */ --chat-width: 450px; /* Ancho del panel de chat - MODIFICA si quieres más/menos ancho ----- */ --chat-height: 580px; /* Alto del panel de chat - MODIFICA para ajustar el tamaño ------ */ --chat-radius: 20px; /* Radio de los bordes del panel de chat */ --chat-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); /* Sombra del panel de chat */ } /* ========================================================= 3) BASE DEL DOCUMENTO - Estilos base para body, links y el contenedor centrado ========================================================= */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI"; /* Fuente del sistema (se ve nativa en cada OS) */ background: var(--bg); /* Fondo de la página */ color: var(--text); /* Color de texto por defecto */ overflow-x: hidden; /* Evita scroll horizontal no deseado */ } a { text-decoration: none; /* Elimina el subrayado de los enlaces */ color: inherit; /* El enlace hereda el color del texto padre */ } .container { width: min(var(--max-width), 92%); /* Ancho máximo o 92% de la pantalla (el menor de los dos) */ margin: 0 auto; /* Centrado horizontal automático */ } /* ========================================================= 4) HEADER / NAVBAR - Barra fija en la parte superior al hacer scroll - Con efecto de cristal (glassmorphism) y tornasol - overflow: visible es CRUCIAL para que el mega menú se despliegue hacia abajo sin quedar recortado ========================================================= */ .site-header { position: sticky; /* Se queda fija en la parte superior al hacer scroll */ top: 0; /* Pegada al borde superior de la ventana */ z-index: 2000; /* Por encima del contenido (el chat tiene 3500, WhatsApp 4000) */ /* Fondo con degradado tornasol + transparencia (efecto glassmorphism) */ background: linear-gradient( 90deg, rgba(255, 255, 255, 0.72) 0%, /* Blanco semi-transparente al inicio */ rgba(210, 235, 255, 0.18) 18%, /* Toque azul claro */ rgba(220, 210, 255, 0.14) 36%, /* Toque violeta muy suave */ rgba(255, 220, 245, 0.12) 54%, /* Toque rosado muy suave */ rgba(210, 255, 245, 0.14) 72%, /* Toque verde menta muy suave */ rgba(255, 255, 255, 0.72) 100% /* Vuelve a blanco semi-transparente */ ); backdrop-filter: blur(18px); /* Desenfoca lo que está detrás (efecto cristal) */ -webkit-backdrop-filter: blur(18px); /* Versión para Safari */ border-bottom: 1px solid rgba(255, 255, 255, 0.28); /* Línea sutil en la parte inferior */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); /* Sombra muy suave */ overflow: visible; /* ¡IMPORTANTE! Sin esto, el mega menú quedará recortado */ } /* ========================================================= CAPA EXTRA TORNASOL SOBRE EL HEADER - Pseudo-elemento ::before para añadir brillo iridiscente - pointer-events: none para que no interfiera con clicks ========================================================= */ .site-header::before { content: ""; /* Necesario para que el pseudo-elemento exista */ position: absolute; /* Se posiciona dentro del header */ inset: 0; /* Cubre todo el header (top, right, bottom, left = 0) */ pointer-events: none; /* No intercepta clics del usuario */ background: linear-gradient( 120deg, rgba(255, 255, 255, 0.10) 0%, rgba(120, 200, 255, 0.10) 20%, rgba(170, 120, 255, 0.08) 40%, rgba(255, 140, 220, 0.06) 60%, rgba(120, 255, 220, 0.08) 80%, rgba(255, 255, 255, 0.08) 100% ); /* Degradado diagonal tornasol encima del header */ opacity: 0.95; /* Casi totalmente visible */ } /* ========================================================= LÍNEA BRILLANTE EN LA PARTE SUPERIOR DEL HEADER - Pseudo-elemento ::after para simular brillo tipo cristal ========================================================= */ .site-header::after { content: ""; /* Necesario para el pseudo-elemento */ position: absolute; /* Posicionado dentro del header */ top: 0; /* En el borde superior */ left: 0; /* Desde la izquierda */ width: 100%; /* Ancho completo */ height: 1px; /* Solo 1px de alto (línea de luz) */ background: rgba(255, 255, 255, 0.45); /* Blanco semi-transparente */ pointer-events: none; /* No intercepta clics */ } /* ========================================================= CONTENEDOR INTERNO DE LA NAVBAR - Flex para alinear logo y menú en una fila ========================================================= */ .nav { height: var(--nav-height); /* Altura definida en variables */ display: flex; /* Flexbox para alinear items horizontalmente */ align-items: center; /* Centra verticalmente logo y links */ justify-content: center; /* Centra el menú horizontalmente */ position: relative; /* Para que el logo en absolute sea relativo a este */ z-index: 2; /* Encima de los pseudo-elementos del header */ } /* ========================================================= LOGO - Posicionado en absolute para no afectar el centrado del menú ========================================================= */ .logo { position: absolute; /* Sale del flujo normal para no empujar el menú */ left: 0; /* Pegado al lado izquierdo del .nav */ display: inline-flex; align-items: center; justify-content: center; height: 100%; /* Ocupa toda la altura del navbar */ z-index: 5; /* Encima de otros elementos del nav */ } .logo-img { display: block; /* Bloque para evitar espacio extra debajo */ height: 58px; /* Altura del logo - MODIFICA para hacerlo más grande o pequeño */ width: auto; /* Ancho automático para mantener proporción */ max-width: 290px; /* Ancho máximo para logos muy anchos */ object-fit: contain; /* La imagen se escala sin recortarse */ opacity: 0.95; /* Ligera transparencia para suavizar */ transition: transform 0.25s ease, opacity 0.25s ease; /* Animación al hover */ } .logo:hover .logo-img { transform: scale(1.02); /* Ligero zoom al pasar el cursor */ opacity: 1; /* Totalmente opaco en hover */ } /* ========================================================= MENÚ PRINCIPAL - Lista horizontal con gap entre items ========================================================= */ .nav-links { list-style: none; /* Sin viñetas de lista */ display: flex; /* Items en fila horizontal */ align-items: center; /* Centrados verticalmente */ gap: 34px; /* Espacio entre items del menú - MODIFICA para más/menos separación */ } .nav-item { position: relative; /* Necesario para que el mega menú sea relativo a este item */ } .nav-link { height: 42px; /* Alto tipo botón para que no ocupe toda la barra */ display: inline-flex; /* Permite centrar el texto vertical y horizontalmente */ align-items: center; /* Centra verticalmente el texto */ justify-content: center; /* Centra horizontalmente el texto */ padding: 0 14px; /* Espacio lateral del enlace */ border-radius: 999px; /* Forma tipo pastilla estilo iOS */ font-size: 0.94rem; /* Tamaño de fuente del menú */ color: #222; /* Color base del texto */ cursor: pointer; /* Cursor de mano al pasar sobre el link */ text-decoration: none; /* Quita subrayado del enlace */ background: transparent; /* Fondo limpio por defecto */ transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .nav-link:hover, .nav-link.active { color: var(--blue); /* Color azul al hacer hover o al estar activo */ background: rgba(0, 113, 227, 0.09);/* Fondo suave para indicar navegación */ transform: translateY(-1px); /* Pequeño levantamiento visual */ } /* ========================================================= 5) MEGA MENÚ - Panel que se despliega al hacer hover en un .nav-item - Centrado respecto al viewport con translateX(-50%) - La animación de entrada es con opacity + translateY ========================================================= */ .mega-menu { position: absolute; /* Sale del flujo normal */ top: 100%; /* Justo debajo del navbar */ left: 50%; /* Empieza en el centro del nav-item */ transform: translateX(-50%) translateY(-12px); /* Centrado horizontal + desplazado hacia arriba para la animación */ width: min(1400px, 100vw); /* Ancho máximo o 100% de la pantalla */ background: rgba(255, 255, 255, 0.96); /* Fondo casi blanco con leve transparencia */ backdrop-filter: blur(20px); /* Efecto cristal */ -webkit-backdrop-filter: blur(20px); /* Safari */ border-top: 1px solid rgba(0,0,0,0.04); /* Línea superior muy sutil */ border-bottom: 1px solid rgba(0,0,0,0.07); /* Línea inferior sutil */ box-shadow: 0 18px 45px rgba(0,0,0,0.09); /* Sombra suave */ opacity: 0; /* Invisible por defecto */ visibility: hidden; /* No ocupa espacio cuando está oculto */ transition: var(--transition); /* Animación suave */ pointer-events: none; /* No intercepta clicks cuando está oculto */ z-index: 2500; /* Por encima del contenido pero debajo del chat */ } /* Estado activo del mega menú al hacer hover en el nav-item */ .nav-item:hover .mega-menu { opacity: 1; /* Totalmente visible */ visibility: visible; /* Ocupa espacio y es interactuable */ transform: translateX(-50%) translateY(0); /* Baja suavemente a su posición final */ pointer-events: auto; /* Ahora sí intercepta clicks */ } /* Grid interior del mega menú: columna grande + 2 columnas medianas */ .mega-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; /* 3 columnas: la izquierda es 20% más ancha */ gap: 50px; /* Espacio entre columnas */ padding: 38px 40px 46px; /* Relleno interno del panel */ } /* Columna izquierda con texto descriptivo */ .mega-feature h2 { font-size: 2.2rem; /* Título grande */ line-height: 1.05; /* Interlineado compacto */ margin-bottom: 12px; /* Separación debajo del título */ font-weight: 700; /* Negrita */ } .mega-feature p { color: var(--muted); /* Texto gris secundario */ max-width: 440px; /* Ancho máximo del párrafo */ line-height: 1.6; /* Interlineado cómodo */ font-size: 1rem; } /* Columnas de enlaces del mega menú */ .mega-col h4 { font-size: 0.78rem; /* Pequeño para el subtítulo */ color: var(--muted); /* Gris secundario */ margin-bottom: 14px; /* Espacio debajo del subtítulo */ letter-spacing: 0.12em; /* Letras separadas para efecto de etiqueta */ text-transform: uppercase; /* Mayúsculas */ } .mega-col a { display: block; /* Cada enlace ocupa su propia línea */ padding: 7px 0; /* Espacio vertical entre enlaces */ font-size: 1.02rem; /* Tamaño legible */ transition: 0.2s ease; /* Animación suave */ } .mega-col a:hover { color: var(--blue); /* Azul al hacer hover */ transform: translateX(4px); /* Se desplaza 4px hacia la derecha - efecto de profundidad */ } /* ========================================================= MEGA MENÚ DESACTIVADO - La navegación ya no usa submenús desplegables. - Se conserva esta regla como protección por si algún HTML viejo conserva un .mega-menu por error. ========================================================= */ .mega-menu { display: none !important; } /* ========================================================= 6) CONTENEDOR DEL HERO (BANNER) - Wrapper que añade un gap superior entre navbar y banner ========================================================= */ .hero-wrap { position: relative; /* Para posicionar el overlay dentro */ padding-top: var(--hero-top-gap); /* Espacio entre navbar y banner */ } /* ========================================================= 7) CAPA OSCURA DEL HERO - Se activa al hacer hover en el menú de navegación - Genera efecto de oscurecimiento del banner al abrir mega menús ========================================================= */ .hero-overlay { position: absolute; /* Sobre el banner */ top: var(--hero-top-gap); /* Comienza después del gap */ left: 0; width: 100%; height: var(--hero-height); /* Misma altura que el banner */ background: rgba(0, 0, 0, 0.45); /* Negro semi-transparente (45% opacidad) */ opacity: 0; /* Invisible por defecto */ pointer-events: none; /* No bloquea clicks cuando está invisible */ transition: opacity 0.35s ease; /* Animación de aparición */ z-index: 10; /* Sobre el banner pero debajo de otros elementos */ } /* Se activa desde JavaScript (script.js) al hacer hover en el navbar */ .hero-overlay.active { opacity: 1; /* Totalmente visible */ } .hero-content { position: relative; /* Sobre el overlay */ z-index: 1; transition: filter 0.35s ease; /* Preparado para un posible efecto blur si se quiere */ } /* ========================================================= 8) BANNER PRINCIPAL (HERO) - Imagen de fondo configurable - MODIFICA background-image para cambiar la imagen del banner ========================================================= */ .hero { min-height: var(--hero-height); /* Altura mínima del banner */ display: flex; align-items: center; /* Centra verticalmente la tarjeta */ justify-content: flex-end; /* La tarjeta va a la derecha */ text-align: left; padding: 40px 7% 40px 5%; /* Relleno interno del banner */ background-image: url("../img/banner.png"); /* MODIFICA: ruta de tu imagen de banner */ background-repeat: no-repeat; /* No repite la imagen */ background-size: cover; /* Cubre todo el espacio disponible */ background-position: center 12%; /* Posición de la imagen - MODIFICA para reencuadrar */ position: relative; /* Para el pseudo-elemento ::after */ } /* Degradado oscuro sobre el banner para mejorar legibilidad del texto */ .hero::after { content: ""; position: absolute; inset: 0; /* Cubre todo el banner */ background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.18)); /* Degradado de transparente a oscuro */ pointer-events: none; /* No bloquea interacciones */ } /* ========================================================= 9) TARJETA DEL BANNER - Tarjeta con efecto glassmorphism sobre la imagen ========================================================= */ .hero-card { position: relative; z-index: 2; /* Sobre el degradado del banner */ width: min(720px, 48%); /* Ancho responsivo - MODIFICA para cambiar el tamaño */ margin-right: 2%; /* Separación del borde derecho */ margin-left: auto; /* Se empuja a la derecha */ background: rgba(255, 255, 255, 0.14); /* Fondo blanco casi transparente */ backdrop-filter: blur(14px); /* Efecto cristal */ -webkit-backdrop-filter: blur(14px); /* Safari */ border: 1px solid rgba(255,255,255,0.38); /* Borde blanco sutil */ box-shadow: var(--shadow); /* Sombra definida en variables */ border-radius: 28px; /* Bordes redondeados */ padding: 28px 30px; /* Relleno interno de la tarjeta */ text-align: center; } /* ========================================================= 10) TEXTO DEL BANNER ========================================================= */ .hero-label { display: inline-block; margin-bottom: 12px; font-size: 0.74rem; /* Texto pequeño tipo etiqueta */ letter-spacing: 0.18em; /* Letras muy separadas */ text-transform: uppercase; /* Mayúsculas */ color: rgba(255, 255, 255, 0.78); /* Blanco con transparencia */ } .hero-card h1 { font-size: clamp(2.1rem, 4.2vw, 4rem); /* Tamaño fluido entre 2.1rem y 4rem */ line-height: 1.03; margin-bottom: 14px; font-weight: 800; /* Extra negrita */ color: #ffffff; /* Blanco puro */ text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); /* Sombra para legibilidad */ } .hero-card p { font-size: 1rem; color: rgba(255, 255, 255, 0.88); /* Blanco con leve transparencia */ line-height: 1.75; max-width: 560px; margin: 0 auto 22px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); } /* ========================================================= 11) BOTONES DEL BANNER ========================================================= */ .hero-actions { display: flex; justify-content: center; /* Botones centrados */ gap: 14px; /* Separación entre botones */ flex-wrap: wrap; /* Se apilan en pantallas pequeñas */ } .btn { border: none; cursor: pointer; border-radius: 999px; /* Totalmente redondeado (tipo píldora) */ padding: 13px 24px; /* Tamaño del botón - MODIFICA para hacerlos más grandes */ font-size: 0.95rem; transition: 0.25s ease; } .btn-primary { background: var(--blue); /* Fondo azul de la marca */ color: #fff; /* Texto blanco */ } .btn-primary:hover { background: var(--blue-dark); /* Azul más oscuro en hover */ transform: translateY(-1px); /* Sube ligeramente */ } .btn-secondary { background: rgba(255, 255, 255, 0.92); /* Casi blanco */ color: var(--blue); /* Texto azul */ border: 1px solid rgba(255,255,255,0.45); } .btn-secondary:hover { background: #ffffff; transform: translateY(-1px); } /* ========================================================= 12) CARRUSEL - Sección de slides con 3 tarjetas por slide ========================================================= */ .carousel-section { padding: 82px 0 40px; /* Espaciado superior e inferior de la sección */ } .section-head { text-align: center; /* Centra el encabezado */ margin-bottom: 28px; /* Espacio debajo del encabezado */ } .section-head span { display: inline-block; color: var(--muted); /* Gris para el subtítulo */ font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; } .section-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); /* Título grande y fluido */ line-height: 1.08; } .section-head__description { width: min(720px, 92%); /* Limita el ancho del texto */ margin: 14px auto 0; /* Centra el párrafo */ color: var(--muted); /* Color sobrio */ line-height: 1.7; /* Lectura cómoda */ } /* ========================================================= CARRUSEL DINÁMICO TIPO TIKTOK - No usa slides fijos. - Cada .dynamic-card viene de un objeto Carrusel en la BD. - Se mueve con flechas y también permite scroll horizontal. ========================================================= */ .dynamic-carousel { position: relative; /* Permite ubicar flechas absolutas */ margin-top: 28px; /* Separación respecto al encabezado */ } .dynamic-carousel__viewport { overflow-x: auto; /* Scroll horizontal real */ overflow-y: hidden; /* Evita scroll vertical interno */ scroll-behavior: smooth; /* Desplazamiento suave */ scroll-snap-type: x mandatory; /* Encaja cada tarjeta al desplazarse */ scrollbar-width: none; /* Oculta scrollbar en Firefox */ padding: 16px 8px 24px; /* Aire alrededor de tarjetas */ } .dynamic-carousel__viewport::-webkit-scrollbar { display: none; /* Oculta scrollbar en Chrome/Edge/Safari */ } .dynamic-carousel__track { display: flex; /* Tarjetas en una sola línea */ gap: 22px; /* Separación entre tarjetas */ align-items: stretch; /* Todas ocupan misma altura visual */ } .dynamic-card { flex: 0 0 clamp(245px, 26vw, 320px); /* Ancho tipo tarjeta vertical */ min-height: 520px; /* Altura similar a formato vertical */ border-radius: 30px; /* Esquinas estilo iOS */ overflow: hidden; /* Recorta imagen al borde redondeado */ background: rgba(255, 255, 255, 0.72); /* Fondo glass claro */ border: 1px solid rgba(255, 255, 255, 0.72); /* Borde translúcido */ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); /* Sombra flotante */ backdrop-filter: blur(18px); /* Efecto blur tipo iPhone */ -webkit-backdrop-filter: blur(18px); /* Compatibilidad Safari */ display: flex; /* Imagen arriba, cuerpo abajo */ flex-direction: column; /* Distribución vertical */ scroll-snap-align: start; /* Cada tarjeta se alinea al inicio */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .dynamic-card:hover { transform: translateY(-7px); /* Elevación al pasar el mouse */ box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18); } .dynamic-card__media { position: relative; /* Contiene overlay absoluto */ display: block; /* Si es enlace, se comporta como bloque */ min-height: 330px; /* Zona visual vertical */ background-size: cover; /* Imagen cubriendo todo */ background-position: center; /* Imagen centrada */ text-decoration: none; /* Quita subrayado si es enlace */ color: #fff; /* Texto blanco sobre imagen */ } .dynamic-card__media--empty { background: radial-gradient(circle at 20% 20%, rgba(0, 113, 227, 0.30), transparent 32%), linear-gradient(145deg, #111827, #1f2937 55%, #020617); /* Fondo elegante si no hay imagen */ } .dynamic-card__media::before { content: ""; /* Capa invisible */ position: absolute; /* Cubre toda la imagen */ inset: 0; /* Top/right/bottom/left en 0 */ background: linear-gradient( 180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.72) 100% ); /* Degradado para legibilidad */ } .dynamic-card__overlay { position: absolute; /* Se coloca encima de la imagen */ left: 18px; /* Separación izquierda */ right: 18px; /* Separación derecha */ bottom: 18px; /* Separación inferior */ z-index: 1; /* Encima del degradado */ } .dynamic-card__eyebrow { display: inline-flex; /* Etiqueta pequeña */ width: fit-content; /* Ancho según contenido */ margin-bottom: 10px; /* Separación del título */ padding: 6px 11px; /* Relleno interno */ border-radius: 999px; /* Forma píldora */ background: rgba(255, 255, 255, 0.20); /* Transparente sobre imagen */ border: 1px solid rgba(255, 255, 255, 0.30); /* Borde sutil */ backdrop-filter: blur(12px); /* Blur sobre imagen */ -webkit-backdrop-filter: blur(12px); /* Safari */ font-size: 0.72rem; /* Texto pequeño */ font-weight: 800; /* Alto contraste */ letter-spacing: 0.12em; /* Estilo editorial */ text-transform: uppercase; /* Mayúsculas */ } .dynamic-card__overlay h3 { font-size: 1.38rem; /* Título de tarjeta */ line-height: 1.12; /* Compacto */ color: #fff; /* Blanco sobre imagen */ text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); /* Legibilidad */ } .dynamic-card__body { padding: 20px 20px 22px; /* Relleno inferior */ display: flex; /* Permite empujar botón abajo */ flex-direction: column; /* Texto y acción vertical */ justify-content: space-between; /* Acción al fondo */ gap: 18px; /* Separación interna */ flex: 1; /* Ocupa resto de tarjeta */ } .dynamic-card__body p { color: var(--muted); /* Descripción en gris */ line-height: 1.58; /* Lectura cómoda */ margin: 0; /* Sin margen extra */ } .dynamic-card__actions { display: flex; /* Botones en fila */ flex-wrap: wrap; /* Permite salto si no cabe */ gap: 10px; /* Separación entre acciones */ } /* Botones pequeños dentro de las tarjetas */ .mini-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; /* Forma de píldora */ font-size: 0.9rem; border: none; cursor: pointer; transition: 0.25s ease; text-decoration: none; } .mini-btn.primary { background: var(--blue); /* Botón azul */ color: #fff; } .mini-btn.primary:hover { background: var(--blue-dark); /* Azul oscuro en hover */ } .mini-btn.light { background: #f2f2f4; /* Botón gris claro */ color: #1d1d1f; } .mini-btn.light:hover { background: #e7e7ea; } .dynamic-carousel__button { position: absolute; /* Flota sobre el carrusel */ top: 50%; /* Centrado vertical */ z-index: 5; /* Encima de tarjetas */ width: 48px; /* Tamaño circular */ height: 48px; /* Tamaño circular */ border: none; /* Sin borde por defecto */ border-radius: 50%; /* Círculo */ background: rgba(255, 255, 255, 0.84); /* Glass claro */ color: #1d1d1f; /* Ícono oscuro */ box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18); /* Sombra */ backdrop-filter: blur(16px); /* Blur iOS */ -webkit-backdrop-filter: blur(16px); /* Safari */ cursor: pointer; /* Cursor de botón */ transform: translateY(-50%); /* Ajuste fino de centrado */ transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease; } .dynamic-carousel__button:hover { background: rgba(255, 255, 255, 0.96); /* Más sólido en hover */ transform: translateY(-50%) scale(1.06); /* Pequeña ampliación */ } .dynamic-carousel__button:disabled { opacity: 0.32; /* Se ve inactiva */ cursor: not-allowed; /* Cursor bloqueado */ transform: translateY(-50%); /* Evita crecer si está disabled */ } .dynamic-carousel__button--prev { left: -12px; /* Sale un poco del carrusel */ } .dynamic-carousel__button--next { right: -12px; /* Sale un poco del carrusel */ } .dynamic-carousel-empty { width: 100%; /* Ocupa el ancho disponible */ min-height: 220px; /* Altura visible */ padding: 36px; /* Aire interno */ border-radius: 30px; /* Bordes redondeados */ background: rgba(255, 255, 255, 0.72); /* Fondo glass */ border: 1px solid rgba(255, 255, 255, 0.72); /* Borde glass */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10); /* Sombra */ text-align: center; /* Texto centrado */ } .dynamic-carousel-empty h3 { margin-bottom: 10px; /* Separación del párrafo */ } .dynamic-carousel-empty p { color: var(--muted); /* Texto secundario */ line-height: 1.7; /* Lectura cómoda */ } /* ========================================================= 13) SECCIONES INFERIORES - Grid de bloques informativos debajo del carrusel ========================================================= */ .info-section { padding: 30px 0 80px; /* Espacio de la sección */ } .double-grid { display: grid; grid-template-columns: 1fr 1fr; /* Dos columnas iguales */ gap: 24px; margin-bottom: 24px; /* Espacio debajo del grid doble */ } .info-box, .wide-box { background: linear-gradient(180deg, #ffffff, #f8f8fa); /* Degradado blanco sutil */ border-radius: 30px; box-shadow: var(--shadow); padding: 40px 28px; min-height: 420px; /* Altura mínima - MODIFICA para cajas más altas/bajas */ display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; position: relative; } .wide-box { min-height: 300px; /* La caja ancha es más baja que las dobles */ } /* Decoración circular de fondo en las cajas */ .info-box::before, .wide-box::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; /* Círculo perfecto */ background: radial-gradient(circle, rgba(0,113,227,0.08), transparent 70%); /* Azul muy tenue */ top: -80px; right: -80px; pointer-events: none; /* Solo decorativo */ } .box-content { position: relative; /* Sobre la decoración */ z-index: 2; width: 100%; } .box-content span { display: inline-block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 10px; } .box-content h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); /* Título fluido */ margin-bottom: 12px; } .box-content p { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 520px; margin: 0 auto 18px; } .info-box .mini-btn, .wide-box .mini-btn { margin-top: 8px; /* Espacio encima de los botones dentro de cajas */ } /* ========================================================= 14) BOTÓN FLOTANTE DE WHATSAPP - Fijo en la esquina inferior derecha - El chat flotante está encima (bottom: 96px) ========================================================= */ .whatsapp-float { position: fixed; right: 22px; bottom: 22px; /* Pegado al fondo derecho */ width: 62px; height: 62px; border-radius: 50%; /* Circular */ display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #32d96b 0%, #25D366 100%); /* Degradado verde WhatsApp */ box-shadow: 0 10px 24px rgba(37, 211, 102, 0.30), /* Sombra verde tenue */ 0 3px 8px rgba(0, 0, 0, 0.16), /* Sombra oscura */ inset 0 1px 0 rgba(255, 255, 255, 0.25); /* Brillo interno superior */ z-index: 4000; /* MAYOR z-index: encima de todo incluyendo el chat */ transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; -webkit-tap-highlight-color: transparent; /* Sin resaltado en móviles */ } .whatsapp-float:hover { transform: translateY(-2px) scale(1.03); /* Sube y agranda en hover */ box-shadow: 0 14px 30px rgba(37, 211, 102, 0.34), 0 5px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28); filter: saturate(1.02); /* Colores ligeramente más vívidos */ } .whatsapp-float:active { transform: scale(0.97); /* Se comprime al hacer clic */ } /* Brillo circular decorativo sobre el botón */ .whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 38%); /* Reflejo de luz */ pointer-events: none; } .whatsapp-inner { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .whatsapp-icon { width: 30px; height: 30px; display: block; color: #ffffff; /* El SVG hereda este color para el fill="currentColor" */ flex-shrink: 0; /* No se comprime */ } /* ========================================================= ✨ NUEVOS ESTILOS: BOTÓN FLOTANTE DE CHAT - Se ubica encima del botón de WhatsApp - MODIFICA bottom para ajustar la posición vertical - MODIFICA right para ajustar la posición horizontal ========================================================= */ .chat-float-btn { position: fixed; /* Fijo en la pantalla, no desaparece al hacer scroll */ right: 22px; /* Misma posición horizontal que WhatsApp */ bottom: 96px; /* Encima del botón de WhatsApp (22px + 62px + 12px de espacio) */ width: var(--chat-btn-size); /* Tamaño del botón (56px definido en variables) */ height: var(--chat-btn-size); /* Mismo alto que ancho para hacerlo circular */ border-radius: 50%; /* Circular */ border: none; /* Sin borde */ cursor: pointer; /* Cursor de mano al pasar el mouse */ background: var(--blue); /* Fondo azul de la marca */ color: #fff; /* Color del ícono SVG (usa currentColor) */ display: flex; /* Para centrar el ícono */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra horizontalmente */ box-shadow: 0 8px 24px rgba(0, 113, 227, 0.28), /* Sombra azul tenue */ 0 3px 8px rgba(0, 0, 0, 0.14); /* Sombra oscura */ z-index: 3500; /* Entre WhatsApp (4000) y el mega menú (2500) */ transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; -webkit-tap-highlight-color: transparent; /* Sin resaltado en móvil */ } .chat-float-btn:hover { transform: translateY(-2px) scale(1.04); /* Sube y agranda en hover */ box-shadow: 0 12px 32px rgba(0, 113, 227, 0.34), 0 5px 12px rgba(0, 0, 0, 0.18); background: var(--blue-dark); /* Azul más oscuro en hover */ } .chat-float-btn:active { transform: scale(0.96); /* Se comprime al hacer clic */ } /* Ícono de "abrir chat" (burbuja de diálogo) */ .chat-icon-open { width: 26px; /* Tamaño del ícono - MODIFICA para hacerlo más grande/pequeño */ height: 26px; display: block; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease; /* Animación al alternar */ } /* Ícono de "cerrar chat" (X) - oculto por defecto */ .chat-icon-close { width: 22px; height: 22px; display: none; /* Oculto hasta que el chat esté abierto */ flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease; } /* Cuando el chat está abierto, intercambia los íconos */ .chat-float-btn.is-open .chat-icon-open { display: none; /* Oculta la burbuja */ } .chat-float-btn.is-open .chat-icon-close { display: block; /* Muestra la X */ } /* ========================================================= ✨ NUEVOS ESTILOS: PANEL DE CHAT - Ventana flotante de conversación - Oculta por defecto, se muestra al hacer clic en el botón ========================================================= */ .chat-window { position: fixed; /* Fijo en la pantalla */ right: 22px; /* Alineado a la derecha */ bottom: 164px; /* Encima del botón del chat (96 + 56 + 12 de margen) */ width: var(--chat-width); /* Ancho del panel (340px) */ height: var(--chat-height); /* Alto del panel (480px) */ background: var(--chat-bg); /* Fondo blanco */ border-radius: var(--chat-radius); /* Bordes redondeados */ box-shadow: var(--chat-shadow); /* Sombra pronunciada */ display: flex; /* Para apilar cabecera + mensajes + footer */ flex-direction: column; /* Apilado verticalmente */ overflow: hidden; /* Nada se sale del panel */ z-index: 3400; /* Debajo del botón del chat pero encima del contenido */ /* Estado inicial: oculto y hacia abajo */ opacity: 0; /* Invisible */ visibility: hidden; /* No interactuable */ transform: translateY(16px); /* Desplazado 16px hacia abajo */ transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Animación de apertura */ pointer-events: none; /* No intercepta clicks cuando está oculto */ } /* Estado activo: el chat está abierto */ .chat-window.is-open { opacity: 1; /* Totalmente visible */ visibility: visible; /* Interactuable */ transform: translateY(0); /* En su posición final */ pointer-events: auto; /* Intercepta clicks */ } /* ========================================================= CABECERA DEL CHAT - Barra superior azul con avatar, nombre y botón cerrar ========================================================= */ .chat-header { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.72) 0%, /* Blanco semi-transparente al inicio */ rgba(36, 131, 203, 0.18) 18%, /* Toque azul claro */ rgba(84, 51, 203, 0.14) 36%, /* Toque violeta muy suave */ rgba(211, 59, 168, 0.12) 54%, /* Toque rosado muy suave */ rgba(36, 194, 160, 0.14) 72%, /* Toque verde menta muy suave */ rgba(255, 255, 255, 0.72) 100% /* Vuelve a blanco semi-transparente */ ); backdrop-filter: blur(18px); /* Desenfoca lo que está detrás (efecto cristal) */ -webkit-backdrop-filter: blur(18px); /* Versión para Safari */ border-bottom: 1px solid rgba(196, 192, 192, 0.796); /* Línea sutil en la parte inferior */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); /* Sombra muy suave */ overflow: visible; /* ¡IMPORTANTE! Sin esto, el mega menú quedará recortado */ padding: 14px 16px; /* Relleno interior */ display: flex; /* Logo, info y botón en fila */ align-items: center; /* Centrados verticalmente */ justify-content: space-between; /* Info a la izquierda, botón a la derecha */ flex-shrink: 0; /* No se comprime aunque el panel sea pequeño */ } .chat-header-info { display: flex; /* Avatar e info en fila */ align-items: center; gap: 10px; /* Separación entre avatar y texto */ } /* Avatar circular del agente */ .chat-avatar { width: 38px; /* Tamaño del avatar - MODIFICA al gusto */ height: 38px; border-radius: 50%; /* Circular */ background: rgba(255,255,255,0.25); /* Fondo blanco semi-transparente */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* No se comprime */ } .chat-avatar svg { width: 22px; /* Tamaño del ícono de persona dentro del avatar */ height: 22px; color: #141313; /* Color blanco del ícono */ } /* Nombre del agente o empresa GPT*/ .chat-agent-name { font-size: 0.92rem; /* Tamaño del nombre */ font-weight: 600; /* Semi-negrita */ color: #282727; /* Texto blanco */ line-height: 1.2; } /* Indicador de estado ("En línea") GPT*/ .chat-status { display: flex; align-items: center; gap: 5px; /* Separación entre punto y texto */ font-size: 0.95rem; /* Texto pequeño GPT */ color: rgba(29, 27, 27, 0.82); /* Blanco con leve transparencia */ margin-top: 1px; } /* Punto verde animado que indica disponibilidad */ .chat-status-dot { width: 7px; /* Tamaño del punto */ height: 7px; border-radius: 50%; /* Circular */ background: #4ade80; /* Verde brillante - MODIFICA para cambiar color del indicador */ animation: pulse-dot 2s ease-in-out infinite; /* Animación de pulso */ flex-shrink: 0; } /* Animación del punto de estado */ @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } /* Visible y normal */ 50% { opacity: 0.6; transform: scale(0.8); } /* Semi-transparente y más pequeño */ } /* Botón X para cerrar el chat desde la cabecera */ .chat-close-btn { width: 30px; height: 30px; border-radius: 50%; /* Circular */ border: none; background: rgba(255,255,255,0.18); /* Blanco muy transparente */ color: #ffffff; /* Ícono blanco */ cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; flex-shrink: 0; } .chat-close-btn:hover { background: rgba(255,255,255,0.30); /* Un poco más visible en hover */ } .chat-close-btn svg { width: 16px; /* Tamaño del ícono X */ height: 16px; } /* ========================================================= ÁREA DE MENSAJES - Zona scrollable donde aparecen los mensajes ========================================================= */ .chat-messages { flex: 1; /* Ocupa todo el espacio disponible entre cabecera y footer */ overflow-y: auto; /* Scroll vertical cuando hay muchos mensajes */ padding: 16px 14px; /* Relleno interior */ display: flex; flex-direction: column; /* Mensajes apilados de arriba a abajo */ gap: 10px; /* Separación entre mensajes */ /* Estilo sutil del scrollbar para Chrome/Edge */ scrollbar-width: thin; /* Scrollbar delgado (Firefox) */ scrollbar-color: #e0e0e5 transparent; /* Color del thumb y el track (Firefox) */ } /* Scrollbar personalizado para Chrome */ .chat-messages::-webkit-scrollbar { width: 4px; /* Ancho del scrollbar */ } .chat-messages::-webkit-scrollbar-thumb { background: #e0e0e5; /* Color del "pulgar" del scrollbar */ border-radius: 4px; /* Bordes redondeados */ } /* Burbuja de mensaje genérica */ .chat-msg { display: flex; /* Para alinear a izquierda (bot) o derecha (usuario) */ max-width: 85%; /* Las burbujas no ocupan más del 85% del ancho */ } /* Mensaje del bot/agente: alineado a la izquierda */ .chat-msg--bot { align-self: flex-start; /* Va a la izquierda */ justify-content: flex-start; } /* Mensaje del usuario: alineado a la derecha */ .chat-msg--user { align-self: flex-end; /* Va a la derecha */ justify-content: flex-end; } /* Burbuja de texto */ .chat-bubble { padding: 10px 14px; /* Relleno interno de la burbuja */ border-radius: 16px; /* Bordes redondeados */ font-size: 1.1rem; /* Tamaño del texto de los mensajes GPT*/ line-height: 1.5; /* Interlineado cómodo */ max-width: 100%; word-break: break-word; /* Rompe palabras muy largas para no desbordar */ } /* Burbuja del bot: fondo azul claro, texto oscuro */ .chat-msg--bot .chat-bubble { background: var(--chat-bubble-bot); /* Azul muy claro */ color: var(--text); /* Texto oscuro */ border-bottom-left-radius: 4px; /* Esquina inferior izquierda más pequeña (efecto de cola) */ } /* Burbuja del usuario: fondo azul de marca, texto blanco */ .chat-msg--user .chat-bubble { background: var(--chat-bubble-user); /* Azul de la marca */ color: #ffffff; /* Texto blanco */ border-bottom-right-radius: 4px; /* Esquina inferior derecha más pequeña (efecto de cola) */ } /* ========================================================= FOOTER DEL CHAT - Input + botón de envío ========================================================= */ .chat-footer { padding: 12px 14px; /* Relleno del área de input */ border-top: 1px solid rgba(0,0,0,0.07); /* Línea divisoria sutil */ display: flex; /* Input y botón en fila */ align-items: center; /* Alineados verticalmente al centro */ gap: 8px; /* Separación entre input y botón */ flex-shrink: 0; /* No se comprime */ background: #ffffff; /* Fondo blanco */ } /* Campo de texto del chat */ .chat-input { flex: 1; /* Ocupa todo el espacio disponible */ border: 1px solid rgba(0,0,0,0.12); /* Borde sutil */ border-radius: 999px; /* Forma de píldora */ padding: 9px 14px; /* Relleno interior */ font-size: 0.88rem; /* Tamaño del texto */ outline: none; /* Sin borde de focus del navegador */ background: #f7f7f9; /* Fondo gris muy claro */ color: var(--text); /* Texto oscuro */ transition: border-color 0.2s ease; } .chat-input:focus { border-color: var(--blue); /* Borde azul cuando el input está activo */ background: #ffffff; /* Fondo blanco cuando está activo */ } /* Botón circular de envío */ .chat-send-btn { width: 36px; /* Tamaño del botón de envío */ height: 36px; border-radius: 50%; /* Circular */ border: none; background: var(--blue); /* Azul de la marca */ color: #ffffff; /* Ícono blanco */ cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* No se comprime */ transition: background 0.2s ease, transform 0.15s ease; } .chat-send-btn:hover { background: var(--blue-dark); /* Azul oscuro en hover */ transform: scale(1.06); /* Ligeramente más grande */ } .chat-send-btn:active { transform: scale(0.94); /* Se comprime al hacer clic */ } .chat-send-btn svg { width: 16px; /* Tamaño del ícono de flecha */ height: 16px; margin-left: 2px; /* Pequeño ajuste visual para centrar la flecha óptica */ } /* ========================================================= 15) FOOTER DE LA PÁGINA ========================================================= */ footer { padding: 30px 0 50px; text-align: center; color: var(--muted); font-size: 0.94rem; } /* ========================================================= 16) RESPONSIVE TABLET (hasta 1100px) - Los grids se vuelven de 1 columna - El nav se desplaza horizontalmente con scroll ========================================================= */ @media (max-width: 1100px) { /* Todos los grids pasan a 1 columna en tablet */ .slide-grid, .double-grid { grid-template-columns: 1fr; } /* El nav se mueve con scroll horizontal */ .nav { justify-content: flex-start; padding-left: 210px; /* Deja espacio para el logo */ overflow-x: auto; } .nav-links { white-space: nowrap; /* Los items no saltan de línea */ gap: 22px; } .dynamic-card { min-height: 500px; /* Mantiene formato vertical pero más flexible en tablet */ } /* El hero centra su contenido en tablet */ .hero { justify-content: center; padding: 34px 20px; background-position: center 16%; } .hero-card { width: min(760px, 92%); margin: 0 auto; } .logo-img { height: 50px; max-width: 250px; } /* El chat en tablet se ajusta al ancho de pantalla si es necesario */ .chat-window { right: 16px; /* Pegado a la derecha */ } .chat-float-btn { right: 16px; /* Botón del chat a 16px del borde */ } } /* ========================================================= 17) RESPONSIVE MÓVIL (hasta 768px) ========================================================= */ @media (max-width: 768px) { :root { --hero-height: 470px; /* Banner más alto en móvil */ --hero-top-gap: 16px; /* Chat más ancho en móvil */ --chat-width: calc(100vw - 32px); /* Ocupa casi todo el ancho de la pantalla */ --chat-height: 440px; /* Un poco más bajo */ } .hero { min-height: var(--hero-height); padding: 50px 16px; justify-content: center; background-position: center 18%; } .hero-overlay { top: var(--hero-top-gap); height: var(--hero-height); } .hero-card { width: 100%; max-width: 100%; margin: 0 auto; padding: 24px 20px; } .hero-card h1 { font-size: clamp(2rem, 9vw, 3rem); } .hero-card p { font-size: 0.98rem; } .dynamic-card { flex-basis: 82vw; /* En móvil se ve una tarjeta principal por pantalla */ } .dynamic-card__media { min-height: 300px; /* Imagen vertical más compacta en móvil */ } .dynamic-carousel__button { width: 42px; height: 42px; } .dynamic-carousel__button--prev { left: 2px; } .dynamic-carousel__button--next { right: 2px; } .info-box, .wide-box { min-height: 280px; padding: 30px 20px; } .nav { padding-left: 160px; } .logo-img { height: 44px; max-width: 220px; } /* WhatsApp en móvil más pegado al borde */ .whatsapp-float { right: 16px; bottom: 16px; width: 58px; height: 58px; } .whatsapp-inner { width: 32px; height: 32px; } .whatsapp-icon { width: 28px; height: 28px; } /* Chat en móvil alineado a la izquierda para aprovechar más espacio */ .chat-window { right: 0; /* Toca el borde derecho */ left: 0; /* Toca el borde izquierdo */ bottom: 0; /* Pegado al fondo */ width: 100%; /* Ancho completo de la pantalla */ height: 70vh; /* 70% del alto de la pantalla */ border-radius: var(--chat-radius) var(--chat-radius) 0 0; /* Solo bordes superiores redondeados */ max-height: 500px; /* Máximo de 500px aunque la pantalla sea muy grande */ } /* El botón del chat se acerca al WhatsApp en móvil */ .chat-float-btn { right: 16px; bottom: 88px; /* Ajustado para la nueva posición del WhatsApp en móvil */ width: 52px; /* Ligeramente más pequeño en móvil */ height: 52px; } .chat-icon-open, .chat-icon-close { width: 22px; /* Íconos más pequeños en móvil */ height: 22px; } } /* ========================================================= 18) RESPONSIVE MUY PEQUEÑO (hasta 560px) ========================================================= */ @media (max-width: 560px) { .nav { padding-left: 140px; } .nav-link { font-size: 0.88rem; } .hero { background-position: center 20%; } .hero-card p { font-size: 1rem; } .carousel-section { padding-top: 60px; } .logo-img { height: 40px; max-width: 200px; } } /* ========================================================= CARRUSEL SIN EXPANSIÓN DE TARJETAS Mantiene solo una elevación suave al pasar el cursor. ========================================================= */ .dynamic-carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 8px 24px; } .dynamic-carousel__viewport::-webkit-scrollbar { display: none; } .dynamic-carousel__track { display: flex; gap: 22px; align-items: stretch; } .dynamic-card { flex: 0 0 clamp(245px, 26vw, 320px); min-height: 520px; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Ya NO cambia el ancho */ .dynamic-card:hover { flex-basis: clamp(245px, 26vw, 320px); transform: translateY(-7px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18); } /* Evita que al hacer hover se convierta en horizontal */ @media (min-width: 981px) { .dynamic-card:hover { flex-direction: column; } .dynamic-card:hover .dynamic-card__media { flex: 0 0 auto; min-height: 330px; transform: none; } .dynamic-card:hover .dynamic-card__body { padding: 20px 20px 22px; justify-content: space-between; background: transparent; } .dynamic-card:hover .dynamic-card__overlay h3 { font-size: 1.38rem; line-height: 1.12; } .dynamic-card:hover .dynamic-card__body p { font-size: inherit; line-height: 1.58; } .dynamic-card:hover .mini-btn { padding: 10px 18px; font-weight: inherit; } } @media (max-width: 980px) { .dynamic-card:hover { flex-basis: 82vw; transform: translateY(-5px); } }