/* ========================================================= Lifewise Capital — styles.css Paleta: - Azul Profundo #003049 - Azul Calma #2b7aa5 - Gris #acb4bb - Blanco #ffffff Tipografía: Montserrat ========================================================= */ :root{ --deep: #003049; --calm: #2b7aa5; --gray: #acb4bb; --white: #ffffff; --ink: #102a43; /* texto principal */ --muted: #5b6b7a; /* texto secundario */ --bg: #ffffff; /* fondo predominante */ --soft: #f5f8fb; /* secciones claras */ --radius: 0px; --shadow: 0 10px 28px rgba(16,42,67,.12); --shadow-sm: 0 6px 18px rgba(16,42,67,.10); --gradient: linear-gradient(135deg, var(--calm) 0%, var(--deep) 88%); } /* ========= Reset pequeño ========= */ *{box-sizing:border-box} html,body{height:100%} html:focus-within{scroll-behavior:smooth} img{max-width:100%;height:auto;display:block} a{color:inherit} button{font:inherit} /* ========= Base ========= */ body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } .container{ width:min(1160px,92%); margin-inline:auto; } .eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--soft); margin:0 0 .25rem; font-size:.9rem; } h1,h2,h3,h4{margin:0 0 .6rem} h1{font-weight:800;color:var(--white);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15} h2{font-weight:800;font-size:clamp(1.4rem,2.6vw,2.2rem)} h3{font-weight:700;font-size:1.25rem} p{margin:.35rem 0 1rem;color:var(--white)} /*textos pequeños abajo del slide*/ .accent{color:var(--white)} .hashtag{ background:var(--deep); color:#fff; padding:.15em .45em; border-radius:12px; } /* ========= Botones ========= */ .btn{ display:inline-block; padding:.85rem 1.15rem; border-radius:999px; border:2px solid transparent; font-weight:700; text-decoration:none; transition:transform .15s ease, filter .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; user-select:none; cursor:pointer; } .btn:hover{transform:translateY(-1px);filter:brightness(1.03)} .btn:active{transform:translateY(0)} .btn.primary{background:var(--gradient);color:#fff;box-shadow:var(--shadow)} .btn.ghost{background:transparent;border-color:var(--white);color:var(--white)} .btn.cta{background:#83caed;color:#00263b;box-shadow:var(--shadow-sm)} /* ========= Topbar ========= */ .topbar{ text-align:center; background:#83caed; color:#00263b; padding:.55rem .75rem; font-weight:700; font-size:.95rem; } /* ========= Header / Nav ========= */ .site-header{ position:sticky; top:0; z-index:50; background:var(--deep); color:#e9f4ff; border-bottom:3px solid rgba(255,255,255,.06); } .nav{ display:flex; align-items:center; gap:18px; padding:.85rem 0; } /* Logo adaptable */ .logo-img { height: clamp(36px, 5vw, 64px); /* min 36px, escala hasta 64px */ width: auto; max-width: 100%; /* evita desbordes */ } /* En pantallas muy pequeñas (móvil), un poquito más chico */ @media (max-width: 480px) { .logo-img { height: clamp(28px, 8vw, 44px); } } /* Estilo normal (desktop/tablet) ya lo tienes con .btn.cta */ /* Ajustes solo en móvil */ @media (max-width: 680px) { .btn.cta { font-size: 0.85rem; /* texto más pequeño */ padding: 0.6rem 0.9rem; /* reduce el tamaño del botón */ border-radius: 999px; /* mantiene el pill redondeado */ } } .nav-links{display:flex; gap:22px; margin-left:auto} .nav-links a{ color:#cfe7f7; text-decoration:none; font-weight:600; padding:.35rem .25rem; border-radius:10px; } .nav-links a:hover{color:#fff} .nav-toggle{ display:none; margin-left:8px; background:transparent; border:0; padding:4px; cursor:pointer; } .nav-toggle span{ display:block; width:26px; height:3px; border-radius:3px; background:#cfe7f7; margin:5px 0; } /* Mobile menu (activado con .nav-open en ) */ @media (max-width: 1024px){ .nav-links{display:none} .nav-toggle{display:block} body.nav-open .nav-links{ display:flex; flex-direction:column; gap:10px; position:fixed; inset:64px 0 auto 0; background:var(--deep); padding:14px 20px 20px; border-bottom:1px solid rgba(255,255,255,.1); } body.nav-open{overflow:hidden} } /* ========= Hero / Slider ========= */ .section-hero{ padding: 0; /* sin márgenes */ background: transparent; } /* El container no limita el ancho en el hero */ .section-hero .container{ width: 100%; max-width: none; padding: 0; } /* Padding interno solo para el bloque de texto del hero */ .section-hero .slide-copy{ padding-bottom: 48px; /* agrega aire debajo del texto/botones */ } .btn.primary{ background: var(--gradient); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); /* sombra más marcada */ } .slide-copy .actions .btn{ margin-bottom: 12px; /* aire debajo del botón */ } .slider{ position:relative; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; background: radial-gradient(1200px 600px at 85% 15%, rgba(43,122,165,.28) 0%, rgba(43,122,165,0) 60%), radial-gradient(900px 480px at 10% 90%, rgba(0,48,73,.30) 0%, rgba(0,48,73,0) 65%), linear-gradient(145deg, #2b7aa5 0%, #1d628a 45%, #003049 100%); } .slider.small{box-shadow:none;background:transparent} .slides{position:relative} .slide{display:none; align-items:center; gap:28px; padding:28px; min-height:420px} .slide.is-active{display:grid; grid-template-columns:1.05fr .95fr} .slide-media{ order:2; /* imagen a la derecha en escritorio */ display:flex; align-items:center; justify-content:center; } .slide-media img{ width:100%; height:auto; border-radius:14px; } .slide-copy{order:1} .slide-copy .actions{display:flex; gap:10px; margin-top:12px} /* Controles del slider */ .slider-btn{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:0; color:#fff; background:var(--gradient); box-shadow:var(--shadow-sm); cursor:pointer; z-index:2; } .slider-btn.prev{left:12px} .slider-btn.next{right:12px} /* aqui se hacen a los lados los botones del carrusel*/ .slider-btn:hover{filter:brightness(1.05)} .dots{display:flex; gap:8px; justify-content:center; padding:10px 0 16px} .dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#cbd5e1; cursor:pointer; } .dots button[aria-current="true"]{background:var(--calm)} /* Variante del slider pequeño (Nosotros) */ .about .slider .slide{min-height:auto; grid-template-columns:64px 1fr; align-items:center} .about .slider .icon{width:52px; height:52px} .about .slider .slide-text h3{margin:0 0 .2rem} .about .slider .slide-text p{margin:0} /* ========= Nosotros ========= */ .section{padding:70px 0} .about{background:var(--soft)} .about-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:center} /* ========= Productos ========= */ .products{background:#fff} .section-head{text-align:left; margin-bottom:18px} .product-layout{ display:grid; grid-template-columns:1fr 1.2fr; gap:26px; align-items:start; } .product-list{ list-style:none; padding:0; margin:0; border-top:2px solid #e6edf4; } .product-list li{border-bottom:2px solid #e6edf4} .product-tab{ width:100%; text-align:left; background:#fff; border:0; font-weight:700; color:var(--deep); padding:14px 16px; cursor:pointer; position:relative; } .product-tab:is(:hover,.is-active){ background:linear-gradient(0deg,#f4faff 0%, #ffffff 60%); color:var(--calm); } .product-tab.is-active::after{ content:"➜"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--deep); font-weight:800; } .product-panels{min-height:320px} .product-panel{ background:var(--deep); color:#e9f4ff; border-radius:26px; padding:26px; box-shadow:var(--shadow); } .product-panel[hidden]{display:none} .product-panel h3{color:#fff; margin-bottom:.6rem} .product-panel .disclaimer{font-size:.9rem; opacity:.9} .product-panel .links a{color:#aee0ff; text-decoration:underline} /* ========= Requisitos / Proceso ========= */ .requirements{background:#fff} .req-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start} .req-box{ background:#ffffff; border:1px solid #e6edf4; border-radius:20px; padding:18px; box-shadow:var(--shadow-sm); } .req-box h3{color:var(--deep)} .req-list, .proc-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:12px} .req-list li, .proc-list li{ display:grid; grid-template-columns:56px 1fr; align-items:center; gap:12px; padding:10px 12px; border:1px solid #eaf1f7; border-radius:14px; background:#fbfdff; } .req-list img, .proc-list img{width:56px; height:56px; border-radius:50%; background:#0b3049; padding:8px} /* ========= FAQ ========= */ .faq{background:#fff} .faq-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:start} .faq-left .faq-img{max-width:360px} .faq-right details{ background:#ffffff; border:1px solid #e6edf4; border-radius:16px; padding:12px 14px; margin:10px 0; box-shadow:var(--shadow-sm); } .faq-right summary{ list-style:none; cursor:pointer; font-weight:700; color:#0d2a3c; position:relative; padding-right:26px; } .faq-right summary::-webkit-details-marker{display:none} .faq-right summary:after{ content:"+"; position:absolute; right:6px; top:0; color:var(--calm); font-weight:800 } .faq-right details[open] summary:after{content:"–";} .faq-right .answer{color:var(--muted)} .links.mini a{color:var(--calm)} /* ========= Reguladores ========= */ .regulators{margin-top:8px} .reg-items{display:flex; gap:22px; align-items:center} .reg-link{ display:inline-flex; align-items:center; justify-content:center; width:82px; height:82px; border-radius:18px; background:#f2f8ff; border:1px solid #e6edf4; box-shadow:var(--shadow-sm) } .reg-link img{max-height:46px} .reg-note{font-size:.9rem; color:var(--muted); margin-top:12px} /* ========= CTA Sueños ========= */ .dreams{background:#fff} .dreams-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; text-align:center; } .dream-img{max-width:280px; margin-inline:auto} .dreams-copy h2{margin-bottom:.3rem} /* ========= Mapa ========= */ .map-embed{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid #e6edf4; } .map-embed iframe{width:100%; height:380px; border:0} .map-address{margin:.6rem 0 0; color:var(--muted); text-align:center} /* ========= Contacto ========= */ .contact{background:var(--soft)} .contact-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:24px; align-items:center} .contact-left .lead{font-weight:700; color:var(--deep); margin:.8rem 0 0} .form{ background:#eef3f7; border:1px solid #e1e8f0; border-radius:20px; padding:18px; box-shadow:var(--shadow-sm) } .form h2{margin-top:0; margin-bottom:.4rem} .form label{display:grid; gap:6px; font-weight:600; color:#0d2a3c} .form input,.form textarea{ width:100%; padding:.75rem .9rem; border-radius:12px; border:1px solid #cfd9e3; background:#fff; color:var(--ink); } .form input:focus,.form textarea:focus{outline:2px solid var(--calm); border-color:var(--calm)} .form-status{min-height:1.2em; margin:.3rem 0 0; color:var(--calm); font-weight:600} /* ========= Footer ========= */ .site-footer{ background:#082334; color:#e9f4ff; padding:30px 0 18px; border-top:4px solid rgba(255,255,255,.06); } .footer-grid{ display:grid; grid-template-columns:auto 1fr 1.2fr; gap:24px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12); } .footer-logo{height:40px} .footer-col h4{margin:0 0 .3rem; color:#fff} .footer-col a{color:#aee0ff} .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; padding-top:12px; } .legal-links{display:flex; flex-wrap:wrap; gap:14px} .legal-links a{color:#aee0ff; text-decoration:underline} /* Oculta el honeypot sin usar display:none (evita autocompletado y foco) */ .hp-trap{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; } /* ========= RESPONSIVE ========= */ @media (max-width: 1180px){ .slide.is-active{grid-template-columns:1fr 1fr} } @media (max-width: 1024px){ .slide{min-height:unset} .slide.is-active{grid-template-columns:1fr} .slide-media{order:1} .slide-copy{order:2} .about-grid, .product-layout, .req-grid, .faq-grid, .contact-grid{grid-template-columns:1fr} .product-panel{margin-top:6px} .footer-grid{grid-template-columns:1fr; text-align:left} .dreams-grid{grid-template-columns:1fr; text-align:center} .dream-img{max-width:220px} } @media (max-width: 680px){ .section{padding:54px 0} .topbar{font-size:.85rem} .btn{width:100%} .slide{padding:18px} .slider-btn{display:none} .about .slider .slide{grid-template-columns:48px 1fr} .product-tab{padding:12px 14px} .map-embed iframe{height:300px} } /* HERO – dots centrados, arriba y circulares */ .section-hero .dots{ position: absolute; /* saca los dots del flujo */ left: 50%; bottom: 26px; /* espacio que hay debajo de las bolitas en desktop*/ transform: translateX(-50%); display: flex; gap: 10px; padding: 0; /* sin padding extra que los empuje */ margin: 0; z-index: 2; /* por encima de imágenes */ } .section-hero .dots button{ width: 10px; /* círculos "normales" */ height: 10px; border-radius: 50%; border: 0; background: #d7e0ea; /* inactivo */ cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; /* mejora contraste sobre fondos oscuros */ } /* Activo también circular (evita deformación tipo pastilla) */ .section-hero .dots button[aria-current="true"]{ width: 9.1px; height: 10px; border-radius: 50%; background: var(--calm); box-shadow: 0 0 0 1.8px rgba(255,255,255,.55) inset; } /* Ajuste en móvil para que no estorben */ @media (max-width: 680px){ .section-hero .dots{ bottom: 26px; gap: 8px; } } /* SOMBRA DE LOS BOTONES DEL CARRUSEL PRINCIPAL */ .section-hero .slide-copy .btn.primary{ /* antes: var(--shadow) => 0 10px 28px rgba(16,42,67,.12) */ box-shadow: 10px 12px 10px rgba(0,0,0,.22); /* menos spread, más contraste */ border: 0.2px solid rgba(255,255,255,.16); /* filo suave para separar del fondo */ } /* Ajuste de espacio a la izquierda solo en escritorio */ @media (min-width: 1025px){ .section-hero .slide-copy { padding-left: 90px; /* puedes probar 40px, 60px o 80px */ } } /* ========================= NOSOTROS – slider pequeño con estilo "tarjeta" oscura ========================= */ /* Fondo claro de la sección y respiro */ .about{ background: #a8cce1; /* fondo color de soluciones flexibles */ } /* La tarjeta/slider */ .about .slider.small{ border-radius: 20px; overflow: hidden; box-shadow: 0 14px 38px rgba(0,0,0,.18); background: radial-gradient(800px 420px at 85% 20%, rgba(64,144,196,.25) 0%, rgba(64,144,196,0) 60%), radial-gradient(700px 360px at 10% 85%, rgba(0,48,73,.28) 0%, rgba(0,48,73,0) 60%), linear-gradient(140deg, #0b2a3e 0%, #0a3a57 45%, #062838 100%); position: relative; } /* Cada slide: texto a la izquierda, ilustración/icono a la derecha */ .about .slider .slide{ display: grid !important; grid-template-columns: 1.35fr .65fr; /* más espacio al texto */ align-items: center; gap: 24px; padding: 28px 32px; min-height: 260px; /* altura agradable como el mock */ } /* Icono/ilustración grande a la derecha */ .about .slider .icon{ width: clamp(120px, 18vw, 220px); height: auto; justify-self: end; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); } /* Tipografía del texto dentro del slide */ .about .slider .slide-text h3{ margin: 0 0 .35rem; font-weight: 800; line-height: 1.08; font-size: clamp(1.25rem, 3.2vw, 2.35rem); /* grande como en la imagen */ /* Degradado azul brillante sutil sobre título */ background: linear-gradient(135deg, #dff4ff 0%, #76b7e8 35%, #45a0df 60%, #dff4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(69,160,223,.28); } .about .slider .slide-text p{ margin: 0; color: #cfe8f7; /* copy claro */ font-weight: 600; } /* Flechas minimalistas (círculos semitransparentes) */ .about .slider .slider-btn{ width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 10px 20px rgba(0,0,0,.22); } .about .slider .slider-btn:hover{ filter: brightness(1.08); } .about .slider .slider-btn.prev{ left: 16px; } .about .slider .slider-btn.next{ right: 16px; } /* Bolitas centradas y legibles sobre fondo oscuro */ .about .slider .dots{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; padding: 0; margin: 0; z-index: 2; } .about .slider .dots button{ width: 9px; height: 9px; border-radius: 50%; border: 0; background: #cfd9e3; box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; opacity: .9; cursor: pointer; } .about .slider .dots button[aria-current="true"]{ background: #6cc1ff; /* activo */ box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset; } /* Espaciado superior e inferior del bloque de intro */ .about .about-copy{ text-align: center; } .about .about-copy .eyebrow{ color: #0b2a3e; } .about .about-copy h2{ color: #12a3ff; font-weight: 800; } .about .about-copy p{ color: #5b6b7a; max-width: 780px; margin-inline: auto; } /* Responsive: una columna en móvil y flechas fuera */ @media (max-width: 1024px){ .about .slider .slide{ grid-template-columns: 1fr; text-align: left; min-height: 220px; padding: 24px; } .about .slider .icon{ justify-self: start; margin-top: 10px; } } @media (max-width: 680px){ .about .slider .slider-btn{ display:none; } /* como en tu hero */ .about .slider .dots{ bottom: 10px; } .about .slider .slide-text h3{ font-size: clamp(1.2rem, 6vw, 1.6rem); } } /* ================================ NOSOTROS — mostrar 3 tarjetas (no slider) ================================ */ /* 0) Oculta navegación del carrusel */ .about .slider.small .slider-btn, .about .slider.small .dots{ display: none !important; } /* 1) El contenedor ya no es una sola tarjeta */ .about .slider.small{ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } /* 2) Muestra TODOS los slides y apílalos con separación */ .about .slider.small .slides{ display: grid; grid-template-columns: 1fr; gap: 18px; /* espacio entre tarjetas */ } /* 3) Cada slide se convierte en una TARJETA con el estilo oscuro */ .about .slider.small .slides .slide{ display: grid !important; /* anula el "solo first-child" anterior */ grid-template-columns: 1.35fr .65fr; align-items: center; gap: 24px; padding: 28px 32px; min-height: 260px; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 38px rgba(0,0,0,.18); background: radial-gradient(800px 420px at 85% 20%, rgba(64,144,196,.25) 0%, rgba(64,144,196,0) 60%), radial-gradient(700px 360px at 10% 85%, rgba(0,48,73,.28) 0%, rgba(0,48,73,0) 60%), linear-gradient(140deg, #0b2a3e 0%, #0a3a57 45%, #062838 100%); } /* 4) Imagen/icono a la derecha con sombra */ .about .slider.small .icon{ width: clamp(120px, 18vw, 220px); height: auto; justify-self: end; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); } /* 5) Tipografía del contenido */ .about .slider.small .slide-text h3{ margin: 0 0 .35rem; font-weight: 800; line-height: 1.08; font-size: clamp(1.25rem, 3.2vw, 2.35rem); color: #ffffff; text-shadow: 0 0 10px rgba(0,0,0,.22); } .about .slider.small .slide-text p{ margin: 0; color: #cfe8f7; font-weight: 600; } /* 6) Color del título "Soluciones flexibles" (arriba de las tarjetas) */ .about .about-copy .accent{ color: #2583bd; /* cambia aquí si quieres otro tono */ } /* 7) Centrar textos en móvil y apilar contenido */ @media (max-width: 1024px){ .about .about-copy{ text-align: center; } .about .slider.small .slides .slide{ grid-template-columns: 1fr; text-align: center; min-height: 220px; padding: 24px; } .about .slider.small .icon{ justify-self: center; margin-top: 10px; } } .about-illustration{ margin-top: 20px; text-align: center; } .about-illustration img{ width: 100%; max-width: 1100px; /* evita que se haga gigante en monitores grandes */ height: auto; border-radius: 16px; box-shadow: var(--shadow); } /* Móvil: que quede centrado y con respiro lateral si lo necesitas */ @media (max-width: 680px){ .about-illustration{ margin-top: 16px; } .about-illustration img{ border-radius: 14px; } } /* La sección será el ancla del sello/overlay */ .about{ position: relative; /* tenías .section{padding:70px 0}; sumamos ~100px extra abajo */ padding-bottom: 170px; /* 70 base + 100 extra de respiro */ } /* Imagen transparente “encima de todo”, pegada al fondo de la sección */ .about .about-stamp{ position: absolute; left: 14%; bottom: 0; /* pegada al final de la sección */ transform: translateX(20%); width: min(800px, 35%); /* escala responsiva y centrada */ height: auto; z-index: 5; /* por encima del contenido */ pointer-events: none; /* no bloquea clics del contenido */ /* si tu PNG es muy fuerte, puedes bajar opacidad: */ /* opacity: .95; */ } /* 1) Botones a 100% SOLO en contenidos, NO en el header */ @media (max-width: 680px){ /* Reglas específicas donde sí quieres botones “block” */ .section-hero .slide-copy .btn, .form .btn, .product-panel .btn { width: 100%; } /* En el header, que el CTA NO sea 100% */ .site-header .btn, .nav .btn { width: auto; max-width: 70vw; /* opcional: límite razonable */ } /* (opcional) un poco menos de gap en el header */ .nav { gap: 10px; } } /* 2) Corrige el overlay de Nosotros en móvil para que no desborde */ @media (max-width: 680px){ .about{ /* Ajustes en un solo lugar */ --base-space: 30vh; /* respiro base de la sección */ --stamp-offset: 28px; /* lo que mueves con translateY */ --stamp-drop: 15vh; /* lo que bajas con bottom negativo */ /* La sección crece lo mismo que bajas la imagen */ padding-bottom: calc(var(--base-space) + var(--stamp-offset) + var(--stamp-drop)); } .about .about-stamp{ left: 50%; right: auto; width: 97%; transform: translate(-50%, var(--stamp-offset)); bottom: calc(var(--stamp-drop) * -15vh); /* == -17vh */ } } /* 480–599 px (phablets Android en vertical) */ /* 3) Cinturón de seguridad general (por si algo más se escapa) */ html, body { overflow-x: hidden; } /* 2) Corrige el overlay de Nosotros en móvil para que no desborde */ @media (max-width: 680px){ .about{ overflow: hidden; /* ← recorta lo que se salga */ --base-space: 30dvh; --stamp-offset: -40px; --stamp-drop: 15dvh; padding-bottom: calc( var(--base-space) + var(--stamp-offset) + var(--stamp-drop) ); } .about .about-stamp{ left: 50%; right: auto; width: 97%; transform: translate(-50%, var(--stamp-offset)); bottom: calc(var(--stamp-drop) * -1); } } /* --- Sin sombra en la imagen (opcional, por si sigue apareciendo) --- */ .contact-left img{ box-shadow: none; filter: none; } /* ========================= CONTACTO (estilos exclusivos) HTML esperado:
… ========================= */ /* --- Fondo exclusivo del apartado contacto --- */ #contacto.section.contact{ /* alto mínimo para lucir el fondo */ min-height: 70vh; /* capa 1: degradado para contraste capa 2: imagen de fondo */ background: linear-gradient(180deg, rgba(10,35,55,.55), rgba(10,35,55,.18) 40%, rgba(10,35,55,0)), url("imagenes/fondo-finanzas.webp"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; /* espaciado vertical */ padding: clamp(2rem, 4vw, 4rem) 0 clamp(3rem, 5vh, 4rem); /* no invadir otras secciones */ overflow: hidden; } /* --- Contenedor y grid --- */ #contacto .container{ max-width: 1200px; margin-inline: auto; padding: 0 clamp(1rem, 2.5vw, 2rem); } #contacto .contact-grid{ display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(360px, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; position: relative; isolation: isolate; /* evita que algo externo tape el form */ z-index: 1; } /* --- Columna izquierda: imagen + texto --- */ #contacto .contact-left{ position: relative; } /* Imagen sin sombra y sin interceptar clics */ #contacto .contact-left img{ display: block; max-width: min(520px, 90%); height: auto; border-radius: 0; /* sin esquinas si tu PNG/WebP no las necesita */ box-shadow: none; /* sin sombra */ filter: none; pointer-events: none; /* no bloquea clics del form */ } /* Texto lead (desktop) */ #contacto .contact-left .lead{ font-weight: 800; color: #ffffff; font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); margin: .75rem 0 0; text-wrap: balance; text-shadow: 0 3px 12px rgba(0,0,0,.35); } /* --- Formulario: arriba de cualquier decoración --- */ #contacto #contacto-form{ position: relative; z-index: 50; /* asegura enfoque al primer clic */ background: #eef3f7; border: 1px solid #e1e8f0; border-radius: 20px; padding: clamp(1rem, 2.2vw, 1.4rem); box-shadow: 0 10px 28px rgba(10,35,55,.12); } #contacto #contacto-form h2{ margin: 0 0 .5rem; color: #0b2d48; font-weight: 900; letter-spacing: .2px; } #contacto #contacto-form label{ display: grid; gap: 6px; font-weight: 600; color: #0d2a3c; margin-top: .6rem; } #contacto #contacto-form input, #contacto #contacto-form textarea{ width: 100%; padding: .85rem 1rem; border-radius: 12px; border: 1px solid #cfd9e3; background: #fff; color: #0a2337; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } #contacto #contacto-form textarea{ min-height: 140px; resize: vertical; } #contacto #contacto-form input:focus, #contacto #contacto-form textarea:focus{ outline: 2px solid rgba(47,162,255,.35); border-color: #98cdfa; background: #fff; } /* Botón principal */ #contacto #contacto-form .btn.primary{ display: inline-block; width: 100%; margin-top: 1rem; padding: 1rem 1.2rem; border: 0; border-radius: 999px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #0a56b5, #2a8df7); box-shadow: 0 12px 34px rgba(43,145,255,.35), inset 0 -2px 0 rgba(255,255,255,.15); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; } #contacto #contacto-form .btn.primary:hover{ transform: translateY(-1px); filter: saturate(1.06); box-shadow: 0 16px 40px rgba(43,145,255,.44); } #contacto #contacto-form .form-status{ min-height: 1.2em; margin-top: .35rem; color: #1f6fd6; font-weight: 600; } /* Honeypot oculto y accesible */ #contacto #contact_ref.hp-trap{ position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* ========================= Responsive (móvil) ========================= */ @media (max-width: 980px){ /* 1 sola columna */ #contacto .contact-grid{ grid-template-columns: 1fr; } /* En móvil usamos SOLO el fondo con imagen; ocultamos la interna */ #contacto .contact-left img{ display: none; } /* Texto centrado y con contraste sobre el fondo */ #contacto .contact-left .lead{ text-align: center; margin: clamp(.5rem, 3vh, 1.25rem) auto 1rem; max-width: 32ch; color: #fff; font-weight: 900; font-size: clamp(1.15rem, 1rem + 1.2vw, 1.6rem); text-shadow: 0 4px 16px rgba(0,0,0,.42); } /* Haz que la tarjeta respire sobre el fondo */ #contacto #contacto-form{ background: rgba(238,243,247,.95); backdrop-filter: saturate(120%) blur(2px); } } /* Movimiento reducido */ @media (prefers-reduced-motion: reduce){ #contacto #contacto-form .btn.primary{ transition: none; } } /* --- MÓVIL: texto centrado + fondo con imagen --- */ @media (max-width: 980px){ /* Fondo con imagen + overlay para legibilidad */ .section.contact{ /* alto mínimo para lucir el fondo; ajusta si quieres */ min-height: 70vh; /* capa 1: degradado (oscurece un poco abajo) capa 2: imagen de fondo */ background: linear-gradient(180deg, rgba(10,35,55,.55), rgba(10,35,55,.15) 40%, rgba(10,35,55,0)), url("imagenes/fondo-finanzas.webp"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } /* 1 sola columna en móvil */ .contact-grid{ grid-template-columns: 1fr; } /* Oculta la porque ya usamos fondo */ .contact-left img{ display: none; } /* Centra y realza el texto "Alcanza tus metas..." */ .contact-left .lead{ position: relative; left: auto; width: 100%; max-width: 32ch; /* línea cómoda */ margin: clamp(.5rem, 3vh, 1.25rem) auto 1rem; padding: 0 .5rem; text-align: center; color: #fff; font-weight: 800; font-size: clamp(1.15rem, 1rem + 1.2vw, 1.6rem); text-wrap: balance; text-shadow: 0 3px 12px rgba(0,0,0,.35); } /* (Opcional) que la tarjeta respire sobre el fondo */ .form{ background: rgba(238,243,247,.92); backdrop-filter: saturate(120%) blur(2px); } } /*DISEÑO DE SECCION PRODUCTOS FINANCIEROS */ /* ========================= PRODUCTOS — mejoras visuales, contraste y micro-interacciones ========================= */ /* 0) Tokens específicos para "Productos" (usa tu paleta) */ :root{ --prod-bg: #ffffff; --prod-line: #e6edf4; --prod-tint: #eef6ff; --prod-hover: #f7fbff; --prod-accent: #2b7aa5; /* calm */ --prod-accent-2: #003049; /* deep */ --prod-on-dark: #e6f2ff; /* texto sobre panel oscuro */ --prod-on-dark-weak: #cfe3f7; } /* 1) Header de sección: mejor legibilidad de subtítulo y ritmo vertical */ .products{ background: var(--prod-bg); } .products .section-head p{ color:#365166; } /* texto guía */ .products .section-head .accent{ background: linear-gradient(135deg,#6bb6e5 0%,#2b7aa5 45%,#003049 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* 2) Layout: margen respirable y ancho coherente */ .product-layout{ gap: 28px; align-items: stretch; } /* 3) Lista izquierda (tabs) — contraste + estados + micro UI */ .product-list{ border-top: 0; margin-top: 6px; display: grid; gap: 12px; } .product-list li{ border:0; } .product-tab{ display:flex; align-items:center; gap:14px; background: #fff; border: 1.5px solid var(--prod-line); border-radius: 14px; padding: 16px 18px; font-weight: 800; color: var(--prod-accent-2); letter-spacing:.2px; transition: transform .18s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease; position: relative; isolation:isolate; } .product-tab:hover{ background: var(--prod-hover); border-color: #d7e6f4; box-shadow: 0 10px 24px rgba(16,42,67,.08); transform: translateY(-1px); } .product-tab:active{ animation: tab-tap-bounce .32s ease; } .product-tab.is-active{ color: var(--prod-accent); background: linear-gradient(0deg,#f1f8ff 0%,#ffffff 60%); border-color: #c7deef; box-shadow: 0 12px 28px rgba(16,42,67,.10); } /* “flecha” e indicador activo */ .product-tab::after{ content:""; margin-left:auto; inline-size: 18px; block-size: 18px; mask: linear-gradient(#000 0 0); -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; background: currentColor; opacity:.55; transition:opacity .2s ease, transform .2s ease; } .product-tab:is(:hover,.is-active)::after{ opacity:.95; transform: translateX(2px); } /* barra de acento a la izquierda cuando está activo */ .product-tab.is-active::before{ content:""; position:absolute; inset:0 auto 0 0; width:6px; border-radius:14px 0 0 14px; background: linear-gradient(180deg, var(--prod-accent) 0%, var(--prod-accent-2) 100%); } /* foco accesible */ .product-tab:focus-visible{ outline: 3px solid #9fd4ff; outline-offset: 2px; } /* 4) Panel derecho — card oscuro con mejor contraste y animación de entrada */ .product-panels{ position: relative; min-height: 340px; } .product-panel{ background: radial-gradient(900px 520px at 85% 18%, rgba(64,144,196,.22) 0%, rgba(64,144,196,0) 60%), radial-gradient(700px 360px at 8% 90%, rgba(0,48,73,.30) 0%, rgba(0,48,73,0) 65%), linear-gradient(140deg, #0b2a3e 0%, #0a3a57 45%, #062838 100%); color: var(--prod-on-dark); border-radius: 24px; padding: 26px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s ease, transform .35s ease, filter .35s ease; position:absolute; inset:0; /* superponer para animar swap */ } .product-panel:not([hidden]){ opacity: 1; transform: translateY(0) scale(1); position: relative; } .product-panel h3{ color:#fff; margin-bottom:.45rem; letter-spacing:.2px; } .product-panel p{ color: var(--prod-on-dark-weak); } .product-panel .links a{ color:#aee0ff; text-decoration:underline; text-underline-offset: 3px; } .product-panel .links a:hover{ filter: brightness(1.1); } /* micro “pulse” al hacer hover sobre todo el panel */ .product-panel:hover{ filter: saturate(1.02) brightness(1.02); } /* 5) Botón dentro del panel (si agregas en el futuro) */ .product-panel .btn{ box-shadow: var(--shadow-sm); } /* 6) Animación de “rebote” al tocar un tab */ @keyframes tab-tap-bounce{ 0%{ transform: translateY(0) scale(1); } 45%{ transform: translateY(1px) scale(.98); } 100%{ transform: translateY(0) scale(1); } } /* 7) Mejoras responsive */ @media (max-width:1024px){ .product-panels{ min-height: unset; } .product-panel{ position: relative; } } @media (max-width:680px){ .product-tab{ padding: 14px 16px; border-radius: 12px; } } /* 8) Respeto a usuarios con “reducir movimiento” */ @media (prefers-reduced-motion: reduce){ .product-tab, .product-panel{ transition: none !important; animation: none !important; } } /* DISEÑO SECCION DE REQUISITOS Y PROCESOS*/ /* ========================= REQUISITOS & PROCESO — diseño mejorado Usa tu paleta: --deep, --calm, --gray, --white, --soft ========================= */ /* 0) Ajustes generales de la sección */ .requirements{ background: #cae1ee; } .requirements .section-head p{ color:#365166; } /* subtítulo legible */ .requirements .section-head .accent{ background: linear-gradient(135deg,#6bb6e5 0%, var(--calm) 45%, var(--deep) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* 1) Tarjetas contenedoras */ .req-grid{ gap: 28px; align-items: stretch; } .req-box{ background: linear-gradient(180deg,#ffffff 0%, #f9fbfe 100%); border: 1px solid #e6edf4; border-radius: 20px; padding: 22px 20px; box-shadow: 0 10px 24px rgba(16,42,67,.06); transition: box-shadow .25s ease, transform .18s ease, border-color .25s ease; } .req-box:hover{ box-shadow: 0 16px 36px rgba(16,42,67,.10); transform: translateY(-2px); border-color: #d8e7f5; } .req-box h3{ color: var(--deep); margin: 0 0 .5rem; font-weight: 800; letter-spacing: .2px; } /* 2) Listado de requisitos — chips visuales y micro-interacciones */ .req-list{ list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; } .req-list li{ display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: #fbfdff; border: 1px solid #eaf1f7; border-radius: 14px; transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } .req-list li:hover{ transform: translateY(-1px); background: #f6fbff; border-color: #dcecf8; box-shadow: 0 8px 18px rgba(16,42,67,.08); } .req-list img{ width: 56px; height: 56px; border-radius: 50%; background: #0b3049; padding: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); } .req-list strong{ color: var(--deep); } /* 3) PROCESO — timeline vertical con badges */ .proc-list{ list-style: none; padding: 8px 0 0; margin: 0; display: grid; gap: 14px; position: relative; } .proc-list::before{ content:""; position: absolute; left: 28px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--calm) 0%, rgba(43,122,165,.15) 100%); opacity: .25; } .proc-list li{ position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px 14px 12px 12px; background: #fbfdff; border: 1px solid #eaf1f7; border-radius: 14px; transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; animation: req-fade-in .45s ease both; } .proc-list li:hover{ transform: translateY(-1px); background: #f6fbff; border-color: #dcecf8; box-shadow: 0 8px 18px rgba(16,42,67,.08); } /* punto de la línea temporal */ .proc-list li::before{ content:""; position: absolute; left: 22px; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--calm); box-shadow: 0 0 0 3px rgba(43,122,165,.16); } /* badge numérico más visible (sustituye al 01. del texto si quieres) */ .proc-list li div strong{ display:inline-flex; align-items:center; justify-content:center; min-width: 34px; height: 26px; padding: 0 8px; margin-right: 6px; font-weight: 800; color:#fff; background: var(--calm); border-radius: 999px; box-shadow: 0 6px 12px rgba(43,122,165,.28); } /* iconos */ .proc-list img{ width: 56px; height: 56px; border-radius: 50%; background: #0b3049; padding: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); } /* 4) Animaciones de entrada (suaves) */ @keyframes req-fade-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } } /* 5) Estados de accesibilidad: foco visible */ .req-list li:focus-within, .proc-list li:focus-within{ outline: 3px solid #9fd4ff; outline-offset: 2px; } /* 6) Responsive */ @media (max-width:1024px){ .req-grid{ grid-template-columns: 1fr; } .proc-list::before{ left: 28px; } } @media (max-width:680px){ .req-list li, .proc-list li{ grid-template-columns: 48px 1fr; } .req-list img, .proc-list img{ width:48px; height:48px; } } /* 7) Respeto Reduce Motion */ @media (prefers-reduced-motion: reduce){ .req-box, .req-list li, .proc-list li{ transition:none !important; animation:none !important; } } /*preguntas seccion*/ /* ========================= FAQ — versión con recuadros coloreados al abrir ========================= */ /* Fondo general */ .faq{ background: radial-gradient(900px 520px at 85% 10%, rgba(43,122,165,.08) 0%, rgba(43,122,165,0) 60%), linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%); } /* Título con degradado */ .faq-left h2{ font-weight: 800; line-height: 1.2; background: linear-gradient(135deg, #dff4ff 0%, #76b7e8 35%, #45a0df 60%, #dff4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: .5rem; } .faq-left p{ color:#5b6b7a; font-size:1.05rem; margin-bottom:1.2rem; } /* Imagen sin sombra */ .faq-left .faq-img{ max-width: 420px; box-shadow: none; border-radius: 0; background: none; } /* Cada tarjeta FAQ */ .faq-right details{ background: #fff; border: 1px solid #e6edf4; border-radius: 16px; transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .3s ease; overflow: hidden; } .faq-right details:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16,42,67,.08); border-color: #cfe2f0; } /* Cuando se abre: color de fondo con degradado */ .faq-right details[open]{ background: linear-gradient(135deg, #e9f6fc 0%, #fafdff 100%); border-color: #b9dcf2; box-shadow: 0 14px 32px rgba(16,42,67,.12); } /* Cabecera */ .faq-right summary{ display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding: 16px 18px; cursor: pointer; list-style: none; color: var(--deep); } .faq-right summary::-webkit-details-marker{ display:none; } /* Icono cuadrado animado */ .faq-right summary::after{ content:""; width: 18px; height: 18px; border-radius: 4px; background: var(--calm); flex-shrink: 0; transition: transform .25s ease, background .25s ease; } .faq-right details[open] summary::after{ transform: rotate(90deg); background: var(--deep); } /* Respuesta */ .faq-right .answer{ padding: 0 18px 16px; font-size: .95rem; line-height: 1.55; color: #102a43; border-top: 1px solid rgba(255,255,255,.4); animation: faq-fade .35s ease; } @keyframes faq-fade{ from{opacity:0; transform: translateY(-4px);} to{opacity:1; transform: translateY(0);} } /* Responsive */ @media (max-width:1024px){ .faq-grid{ grid-template-columns: 1fr; } .faq-left{ text-align: center; } .faq-left .faq-img{ margin: 0 auto; } } /* SECCION LOGOS */ /* ========================= Reguladores — sección full width ========================= */ .regulators{ width: 100%; background: linear-gradient(135deg, var(--deep) 0%, var(--calm) 100%); padding: 60px 0 50px; text-align: center; color: #fff; } /* contenedor interno centrado */ .regulators .container{ max-width: 1160px; margin: 0 auto; padding: 0 20px; } /* logos */ .reg-items{ display: flex; justify-content: center; gap: 48px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; } .reg-link{ background: none !important; border: none !important; box-shadow: none !important; transition: transform .25s ease, filter .25s ease; } .reg-link img{ max-height: 75px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); } .reg-link:hover{ transform: scale(1.1); filter: brightness(1.2); } /* nota legal */ .reg-note{ font-size: .95rem; line-height: 1.6; max-width: 900px; margin: 0 auto; color: #e6f4ff; } /* ===== MAPA con marco desvanecido azul (auto-ajustable) ===== */ :root{ --brand:#003049; /* azul marca */ --ink:#0a2740; /* texto */ --sky-10:#f4f9ff; --sky-40:#d9eaff; --ring:rgba(0,102,204,.28); --map-offset:0px; /* alto de header fijo si aplica (p.ej. 72px) */ } /* Sección */ .section.map{ padding:clamp(1rem,2vw,2rem); background:linear-gradient(180deg,var(--sky-10),#fff); } /* Card contenedora que ENVUELVE mapa + dirección con un marco difuminado */ .section.map .container{ position:relative; max-width:min(1200px, 92vw); /* centrado y fluido en desktop */ margin-inline:auto; padding:clamp(10px, 1.6vw, 16px);/* espacio para el “bisel” interior */ border-radius:22px; background:linear-gradient(#fff,#fff) padding-box; /* fondo blanco dentro */ isolation:isolate; /* para controlar z-index del glow */ } /* Borde degradado (fino) usando máscara para que parezca un “marco” */ .section.map .container::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; /* grosor del borde */ background:conic-gradient( from 140deg, rgba(0,114,255,.85), rgba(0,190,255,.85), rgba(0,114,255,.85) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; z-index:0; } /* Resplandor azul suave (desvanecido) alrededor */ .section.map .container::after{ content:""; position:absolute; inset:-14px; border-radius:calc(22px + 14px); background:radial-gradient(40% 50% at 50% 100%, rgba(0,140,255,.22), transparent 70%); filter:blur(18px); z-index:-1; } /* Todo el contenido por encima del glow/borde */ .section.map .container > *{ position:relative; z-index:1; } /* ===== Mapa auto-ajustable ===== */ .map-embed{ position:relative; width:100%; height:clamp(360px, 56vw, calc(100dvh - var(--map-offset))); overflow:hidden; border-radius:18px 18px 0 0; /* esquinas superiores redondeadas */ background:linear-gradient(180deg,#e6f0ff,#f7fbff); outline:1px solid var(--sky-40); box-shadow:0 8px 24px rgba(0,0,0,.06); transition:box-shadow .3s ease, transform .3s ease; } .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(1.05) contrast(1.03); } .map-embed:hover{ transform:translateY(-1px); } .map-embed:focus-within{ box-shadow:0 0 0 4px var(--ring), 0 10px 30px rgba(0,0,0,.12); } /* Franja de dirección (parte inferior del “card”) */ .map-address{ margin:0; padding:1rem clamp(1rem,2.5vw,2rem); background:#fff; border:1px solid var(--sky-40); border-top:0; border-radius:0 0 18px 18px; /* esquinas inferiores redondeadas */ color:var(--ink); text-align:center; font-size:clamp(.95rem, .9rem + .2vw, 1.05rem); line-height:1.5; } .map-address strong{ color:var(--brand); font-weight:700; } /* Preferencias de movimiento */ @media (prefers-reduced-motion:reduce){ .map-embed{ transition:none; } .map-embed:hover{ transform:none; } } /* Dark mode */ @media (prefers-color-scheme:dark){ .section.map{ background:linear-gradient(180deg,#0b1320,#0f172a); } .section.map .container{ background:linear-gradient(#0b1320,#0b1320) padding-box; } .map-embed{ background:linear-gradient(180deg,#0a2040,#081526); outline-color:rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.55); } .map-address{ background:#0b1320; border-color:rgba(255,255,255,.08); color:#dbeafe; } .map-address strong{ color:#7cc0ff; } } /* ========================= REQUISITOS — Cruce al hacer scroll (solo CSS) Soporta Chrome/Edge 115+, Safari 17+. Fallback: sin efecto. ========================= */ /* 1) Ajuste fino del desplazamiento máximo (px) */ :root{ --cross-shift: 120px; } /* ↑ más/menos movimiento */ /* 2) Activa el efecto solo si el navegador soporta timelines */ @supports (animation-timeline: auto) { /* Solo en desktop (evita mareo en móvil/tablet) */ @media (min-width: 1024px){ /* Usamos el propio #requisitos como "línea de tiempo de vista" */ #requisitos{ view-timeline-name: --req-tl; view-timeline-axis: block; /* vertical */ } /* Ambas tarjetas se animan con esa timeline */ #requisitos .req-box{ animation-timeline: --req-tl; animation-range: cover 0% 100%; /* avanza de "entra a cubrir" a "termina de cubrir" la ventana */ animation-fill-mode: both; will-change: transform; } /* Izquierda: arranca arriba -> centro -> abajo */ #requisitos .req-grid .req-box:first-of-type{ animation-name: req-cross-down; } /* Derecha: arranca abajo -> centro -> arriba (inverso) */ #requisitos .req-grid .req-box:last-of-type{ animation-name: req-cross-up; } /* Keyframes del cruce (usan variable global --cross-shift) */ @keyframes req-cross-down{ 0% { transform: translateY(calc(var(--cross-shift) * -1)); } 50% { transform: translateY(0); } 100% { transform: translateY(var(--cross-shift)); } } @keyframes req-cross-up{ 0% { transform: translateY(var(--cross-shift)); } 50% { transform: translateY(0); } 100% { transform: translateY(calc(var(--cross-shift) * -1)); } } /* Para que el hover no "pelee" con la animación, mantenemos solo el cambio de sombra en desktop */ #requisitos .req-box:hover{ transform: none; /* la animación manda */ box-shadow: 0 16px 36px rgba(16,42,67,.10); border-color: #dcecf8; } } } /* Fallback (navegadores sin timelines): se conserva tu hover original en móvil/desktop */ @media (max-width: 1023px){ /* ya lo tienes, pero por claridad, sin transforms extra aquí */ .req-box:hover{ transform: translateY(-2px); } } /* ========================= COTIZADOR (look azul) ========================= */ :root{ --q-blue-800:#2b7aa5; --q-blue-700:#003049; --q-blue-600:#5596db; --q-ink:#0a2337; --q-card:#fff; --q-ring:rgba(47,162,255,.35); --q-r-xl:22px; --q-r-lg:16px; --q-shadow:0 18px 45px rgba(10,35,55,.14); --q-shadow-sm:0 8px 20px rgba(10,35,55,.10); } #cotizador.section.quote{ padding:clamp(2rem,4vw,4rem) 0; background: radial-gradient(70% 100% at 0% 0%, rgba(255,255,255,.15), transparent 60%), linear-gradient(135deg, var(--q-blue-700), var(--q-blue-600)); color:#fff; overflow:hidden; } #cotizador .container{ max-width:1100px; margin-inline:auto; padding:0 clamp(1rem,2.5vw,2rem); } .quote-grid{ display:grid; grid-template-columns:minmax(300px,1.15fr) minmax(360px,1fr); gap:clamp(1rem,3vw,3rem); align-items:start; } .quote-left h2{ margin:0 0 .5rem; font-weight:900; font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem); line-height:1.1; } .quote-left h2 span{ background:linear-gradient(180deg,#fff,#dff0ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 6px 20px rgba(0,0,0,.18); } .quote-left .sub{ margin:.25rem 0 1rem; font-size:clamp(1rem,.9rem + .4vw,1.15rem); color:#f2f8ff; } .pill-note{ display:inline-block; margin-top:.25rem; padding:.45rem .8rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:999px; font-weight:700; letter-spacing:.2px; backdrop-filter:saturate(120%) blur(2px); } /* ----- Card del cotizador ----- */ #cotizador .quote-card{ background:var(--q-card); color:var(--q-ink); border-radius:var(--q-r-xl); padding:clamp(1rem,2vw,1.5rem); box-shadow:var(--q-shadow); border:1px solid rgba(13,53,84,.06); } #cotizador .fields label{ display:block; font-weight:700; color:#0b2d48; margin:.6rem 0 .35rem; } #cotizador .fields input{ width:100%; padding:.9rem 1rem; border-radius:var(--q-r-lg); border:1.5px solid #e0e9f3; background:#fbfdff; color:var(--q-ink); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } #cotizador .fields input:focus{ outline:none; border-color:#bfe0ff; box-shadow:0 0 0 4px var(--q-ring); background:#fff; } #cotizador .fields .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } /* Resultados */ #cotizador .results{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1rem; } #cotizador .result{ background:#f4f8fc; border:1px solid #e4edf6; border-radius:var(--q-r-lg); padding:1rem; box-shadow:var(--q-shadow-sm); } #cotizador .result h3{ margin:0 0 .35rem; color:#0b2d48; font-weight:800; } #cotizador .result .amount{ margin:.1rem 0 .25rem; font-weight:900; font-size:clamp(1.4rem,1rem + 1.2vw,2rem); letter-spacing:.3px; color:#0a2337; } #cotizador .result .hint{ margin:0; color:#456; font-size:.92rem; } /* Nota legal */ #cotizador .legal{ margin:.8rem 0 0; font-size:.85rem; color:#4b6578; } /* Responsive */ @media (max-width: 980px){ .quote-grid{ grid-template-columns:1fr; } #cotizador .fields .two, #cotizador .results{ grid-template-columns:1fr; } } /*FINAL DE LA SECCION PONERLO, AJUSTE MOVIL*/ /* ========================= FAQ — FIXES RESPONSIVE (MÓVIL) ========================= */ /* Evita scroll horizontal accidental en la sección */ html, body, .faq { overflow-x: hidden; } /* Contenido 1 columna y paddings controlados */ @media (max-width: 680px){ .faq .container{ width: 100%; padding-inline: 16px; /* respiro lateral seguro */ } .faq-grid{ grid-template-columns: 1fr; /* fuerza 1 columna */ gap: 16px; } /* Título degradado: tamaño seguro en móvil */ .faq-left{ text-align: center; } .faq-left h2{ font-size: clamp(1.2rem, 6vw, 1.8rem); margin: 0 auto .5rem; } .faq-left p{ font-size: .98rem; max-width: 36ch; /* línea agradable para lectura */ margin: 0 auto 1rem; } /* Imagen: que nunca se “tape” ni sobresalga */ .faq-left .faq-img{ display: block; width: clamp(240px, 88vw, 420px); /* escala con el viewport */ max-width: 100%; height: auto; margin: 8px auto 12px; /* centrada */ box-shadow: none; /* por si algún estilo previo reaparece */ border-radius: 0; } .field-static{ padding:.9rem 1rem; border:1.5px solid #e0e9f3; background:#f3f7fb; border-radius:16px; font-weight:800; color:#0b2d48; } /* Tarjetas: compactas y sin “empujar” los bordes */ .faq-right{ gap: 12px; } .faq-right details{ border-radius: 14px; transform: translateY(0); /* evita sumar ancho por transform en algunos navegadores */ } .faq-right summary{ padding: 14px 14px; /* reduce padding lateral */ } .faq-right summary::after{ width: 16px; height: 16px; /* icono más acorde al tamaño */ } .faq-right .answer{ padding: 0 14px 14px; /* iguala padding con summary */ } } /* ========================================================= Lifewise Capital — SECCIÓN VIDEOS Estructura esperada en HTML:
…
Usa tokens de color y sombras ya definidos en tu hoja ========================================================= */ /* ---------- Contenedor de la sección ---------- */ .section.videos{ background:#f8f9fa; /* fondo suave */ padding:clamp(2.2rem,3vw,4rem) 1rem; /* respiración vertical */ text-align:center; } /* Título y subtítulo */ .section.videos .section-head h2{ margin:0 0 .5rem; font-weight:800; } .section.videos .section-head .accent{ /* mantiene tu look degradado si lo usas en títulos */ background: linear-gradient(135deg, #6bb6e5 0%, #2b7aa5 45%, #003049 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .section.videos .section-head p{ color:#5b6b7a; margin:0 auto; max-width:68ch; /* ancho legible */ } /* ---------- Grid de tarjetas ---------- */ .video-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:clamp(1rem,2.2vw,2rem); margin-top:clamp(1rem,2vw,2rem); } /* ---------- Tarjeta de video ---------- */ .video-card{ background:#fff; border-radius:14px; padding:clamp(.75rem,1.4vw,1rem); border:1px solid #e8eef5; box-shadow:0 10px 24px rgba(16,42,67,.08); text-align:left; transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease; } .video-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(16,42,67,.12); border-color:#d9e7f4; filter:saturate(1.02); } /* Accesibilidad: foco claro si se navega con teclado */ .video-card:focus-within{ outline:3px solid #9fd4ff; outline-offset:4px; } /* ---------- Media (iframe) ---------- */ .video-media{ position:relative; overflow:hidden; border-radius:10px; } /* “Esqueleto” simple mientras carga el player */ .video-media::before{ content:""; display:block; width:100%; aspect-ratio:16/9; background: linear-gradient(90deg, #e9eef5 25%, #f4f7fb 37%, #e9eef5 63%); background-size:400% 100%; animation:video-skeleton 1.1s ease-in-out infinite; border-radius:10px; } /* El iframe reemplaza al esqueleto al ocupar el mismo espacio */ .video-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; /* evita destello blanco */ border-radius:10px; } @keyframes video-skeleton{ 0%{ background-position:100% 50% } 100%{ background-position:0% 50% } } /* ---------- Meta (título + chip proveedor) ---------- */ .video-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:.75rem; } .video-meta h3{ margin:0; font-size:1.05rem; font-weight:800; color:var(--deep, #003049); line-height:1.3; } /* Chip proveedor (Vimeo / YouTube) */ .chip{ display:inline-flex; align-items:center; justify-content:center; padding:.25rem .55rem; border-radius:999px; font-size:.78rem; font-weight:800; color:#fff; background:var(--gradient, linear-gradient(135deg, #2b7aa5, #003049)); white-space:nowrap; box-shadow:0 6px 14px rgba(16,42,67,.14); } /* ---------- Acciones (Mostrar más / Fin de lista) ---------- */ .videos-actions{ margin-top:clamp(1rem,2.6vw,2rem); display:flex; flex-direction:column; align-items:center; gap:.6rem; } /* Reusa .btn.primary de tu hoja; aquí solo ajustes mínimos */ .btn.show-more{ min-width:240px; box-shadow:var(--shadow, 0 10px 28px rgba(16,42,67,.12)); } /* Mensaje “sin más videos” */ .videos-done{ margin:.1rem 0 0; color:#365166; font-weight:700; } /* ---------- Responsive ---------- */ @media (max-width:1024px){ .video-grid{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); } } @media (max-width:680px){ .video-grid{ grid-template-columns:1fr; gap:1rem; } .video-meta h3{ font-size:1rem; } .btn.show-more{ width:100%; } } /* ---------- Reduce Motion (respeta preferencias del usuario) ---------- */ @media (prefers-reduced-motion:reduce){ .video-card, .video-media::before{ animation:none !important; transition:none !important; } } /* ---------- Dark Mode opcional (si el sistema lo prefiere) ---------- */ @media (prefers-color-scheme:dark){ .section.videos{ background:linear-gradient(180deg, #0b1320, #0f172a); } .video-card{ background:#0c1a29; border-color:rgba(255,255,255,.08); box-shadow:0 12px 28px rgba(0,0,0,.45); } .video-meta h3{ color:#e6f2ff; } .videos-done{ color:#cfe2ff; } .video-media::before{ background: linear-gradient(90deg, #163047 25%, #0f263a 37%, #163047 63%); } } /* ========================================================= Lifewise Capital — SECCIÓN VIDEOS (portadas que enlazan) Portadas verticales 1080x1920: ¡sin recorte! ========================================================= */ /* ---------- Contenedor de la sección ---------- */ .section.videos{ background: radial-gradient(90% 120% at 0% 0%, rgba(107,182,229,.08), transparent 60%), linear-gradient(180deg, #f7fbff, #eef6ff); padding: clamp(2.2rem, 3vw, 4rem) 1rem; text-align: center; } /* Título/subtítulo */ .section.videos .section-head h2{ margin: 0 0 .5rem; font-weight: 800; } .section.videos .section-head .accent{ background: linear-gradient(135deg, #6bb6e5 0%, #2b7aa5 45%, #003049 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section.videos .section-head p{ color: #5b6b7a; margin: 0 auto; max-width: 68ch; } /* ---------- Grid ---------- */ .video-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1rem, 2.2vw, 2rem); margin-top: clamp(1rem, 2vw, 2rem); } /* ---------- Tarjeta ---------- */ .video-card{ background: #fff; border: 1px solid #e8eef5; border-radius: 14px; padding: clamp(.75rem, 1.4vw, 1rem); text-align: left; box-shadow: 0 10px 24px rgba(16,42,67,.08); transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease; } .video-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(16,42,67,.12); border-color: #d9e7f4; filter: saturate(1.02); } .video-card:focus-within{ outline: 3px solid #9fd4ff; outline-offset: 4px; } /* ---------- Enlace/clicable ---------- */ .video-link{ display: block; text-decoration: none; color: inherit; border-radius: 12px; } /* ---------- Media (portada) ---------- */ /* El contenedor define la relación de aspecto y el fondo de las “barras” */ .video-media{ position: relative; width: 100%; aspect-ratio: var(--ratio, 16/9); /* 16:9 por defecto; cambia con clase o variable */ overflow: hidden; border-radius: 12px; background: radial-gradient(120% 120% at 10% 90%, rgba(43,122,165,.18), transparent 60%), linear-gradient(145deg, #2b7aa5 0%, #1d628a 45%, #003049 100%); /* “letterbox” bonito */ box-shadow: 0 6px 16px rgba(0,0,0,.06) inset; } /* La imagen SIEMPRE completa, sin recorte */ .video-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; /* << clave: no recortar */ object-position: center !important; border-radius: inherit; /* Sombra sutil para despegue si quedan barras */ filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); } /* (Opcional) brillo suave al pasar el mouse */ .video-link:hover .video-media::after{ content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 50%, rgba(255,255,255,.12), transparent 60%); pointer-events:none; } /* ---------- Meta (título + chip) ---------- */ .video-meta{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: .75rem; } .video-meta h3{ margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--deep, #003049); line-height: 1.3; } .chip{ display: inline-flex; align-items: center; justify-content: center; padding: .25rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2b7aa5, #003049); white-space: nowrap; box-shadow: 0 6px 14px rgba(16,42,67,.14); } /* ---------- Acciones (Mostrar más / Fin) ---------- */ .videos-actions{ margin-top: clamp(1rem, 2.6vw, 2rem); display: flex; flex-direction: column; align-items: center; gap: .6rem; } .btn.show-more{ min-width: 240px; box-shadow: var(--shadow, 0 10px 28px rgba(16,42,67,.12)); } .videos-done{ margin: .1rem 0 0; color: #365166; font-weight: 700; } /* ---------- Relaciones de aspecto útiles ---------- */ /* Usa cualquiera de estas clases en
o en el wrapper .video-media para ajustar el alto sin recortar la portada */ .ratio-16x9 .video-media{ --ratio: 16/9; } .ratio-9x16 .video-media{ --ratio: 9/16; } /* vertical (recomendado para 1080x1920) */ .ratio-4x5 .video-media{ --ratio: 4/5; } .ratio-1x1 .video-media{ --ratio: 1/1; } /* ---------- Responsive ---------- */ @media (max-width:1024px){ .video-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width:680px){ .video-grid{ grid-template-columns: 1fr; gap: 1rem; } .video-meta h3{ font-size: 1rem; } .btn.show-more{ width: 100%; } } /* ---------- Reduce Motion ---------- */ @media (prefers-reduced-motion: reduce){ .video-card, .video-link:hover .video-media::after{ transition: none !important; } } /* ---------- Dark Mode ---------- */ @media (prefers-color-scheme: dark){ .section.videos{ background: radial-gradient(90% 120% at 0% 0%, rgba(107,182,229,.06), transparent 60%), linear-gradient(180deg, #0b1320, #0f172a); } .video-card{ background: #0c1a29; border-color: rgba(255,255,255,.08); box-shadow: 0 12px 28px rgba(0,0,0,.45); } .video-meta h3{ color: #e6f2ff; } .videos-done{ color: #cfe2ff; } .video-media{ background: radial-gradient(120% 120% at 10% 90%, rgba(64,144,196,.22), transparent 60%), linear-gradient(145deg, #0b2a3e 0%, #0a3a57 45%, #062838 100%); box-shadow: 0 6px 20px rgba(0,0,0,.25) inset; } }