/* ========================================================== 1 · TOKENS DE MARCA ========================================================== */ :root{ /* Tonalidad del arte de marca: celeste-royal, blanco predominante */ --tinta: #0B3E7E; /* azul royal profundo: textos y footer */ --marino: #0D4FA0; /* azul royal del arte */ --azur: #1B87C9; /* azure medio (círculos de íconos) */ --turquesa: #2EC6F0; /* cian celeste brillante — CTAs */ --turquesa-2: #1FAFDC; /* hover del cian */ --lago: #0D6EAE; /* azure legible sobre blanco (acentos de texto) */ --miel: #F2B25C; /* dorado atardecer, usar muy poco */ --bruma: #E9F4FE; /* celeste cielo tenue para bandas claras */ --papel: #FBFDFE; /* fondo general, blanco frío */ --blanco: #FFFFFF; --radius-xl: 28px; --radius-lg: 20px; --radius-pill: 999px; --sombra-suave: 0 18px 50px -22px rgba(11,62,126,.28); --sombra-card: 0 10px 34px -18px rgba(11,62,126,.22); --ancho: 1180px; --f-display: "Fraunces", Georgia, serif; --f-ui: "Figtree", "Segoe UI", sans-serif; } /* ========================================================== 2 · BASE ========================================================== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--f-ui); color:var(--tinta); background:var(--papel); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--lago);outline-offset:3px;border-radius:6px} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px} /* Tipografía de sección */ .ceja{ font-family:var(--f-display); font-style:italic; font-weight:380; font-size:1.05rem; color:var(--lago); display:block; margin-bottom:14px; } .titulo{ font-family:var(--f-display); font-weight:420; font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.12; letter-spacing:-.01em; } .subtitulo{ font-size:clamp(1rem, 1.4vw, 1.15rem); color:rgba(11,62,126,.72); max-width:640px; margin:18px auto 0; } .centrado{text-align:center} .centrado .subtitulo{margin-left:auto;margin-right:auto} /* Botones (pastilla, como la referencia) */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:var(--radius-pill); padding:15px 32px; font-weight:600;font-size:1rem; border:2px solid transparent; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primario{background:var(--turquesa);color:var(--tinta)} .btn-primario:hover{background:var(--turquesa-2);color:var(--tinta)} .btn-fantasma-oscuro{border-color:rgba(11,62,126,.35);color:var(--tinta);background:transparent} .btn-fantasma-oscuro:hover{border-color:var(--tinta);background:rgba(11,62,126,.05)} .btn-fantasma-claro{border-color:rgba(11,62,126,.28);color:var(--tinta);background:transparent} .btn-fantasma-claro:hover{border-color:var(--tinta)} .btn-grande{padding:12px 24px;font-size:1.05rem} section{padding:50px 0} @media (max-width:760px){section{padding:64px 0}} /* ========================================================== 3 · BARRA DE ANUNCIO + NAVEGACIÓN ========================================================== */ .anuncio{ background:var(--tinta);color:#E7F2FD; text-align:center;font-size:.9rem;padding:9px 16px; } .anuncio a{color:var(--miel);font-weight:600;margin-left:8px;text-decoration:underline;text-underline-offset:3px} /* Barra opaca: el contenido no debe teñirla al pasar por debajo */ .nav{ position:sticky;top:0;z-index:60; background:#FFFDFB; border-bottom:1px solid rgba(11,62,126,.08); } .nav-inner{ max-width:var(--ancho);margin:0 auto;padding:0 24px; display:flex;align-items:center;gap:28px;height:76px; } .logo{display:flex;flex-direction:column;gap:4px;line-height:1.05;align-items:flex-start} .logo img{height:38px;width:auto;object-fit:contain;flex:0 0 auto} .logo span{font-size:.62rem;letter-spacing:.05em;color:rgba(11,62,126,.62)} @media (max-width:520px){.logo span{display:none}.logo img{height:34px}} .menu{display:flex;gap:6px;margin-left:8px} .menu > li{position:relative} .menu > li > a{ display:inline-flex;align-items:center;gap:6px; padding:10px 14px;border-radius:12px;font-weight:500;font-size:.97rem; } .menu > li > a:hover{background:var(--bruma)} .menu .flecha{font-size:.62rem;opacity:.55;transition:transform .18s} .menu > li:hover .flecha, .menu > li:focus-within .flecha{transform:rotate(180deg)} /* Submenús */ .submenu{ position:absolute;top:calc(100% + 10px);left:0; min-width:280px;background:var(--blanco); border:1px solid rgba(11,62,126,.08); border-radius:var(--radius-lg); box-shadow:var(--sombra-suave); padding:10px; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; } .menu > li:hover .submenu, .menu > li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)} .submenu a{ display:block;padding:11px 14px;border-radius:12px; } .submenu a:hover{background:var(--bruma)} .submenu a b{display:block;font-weight:600;font-size:.95rem} .submenu a small{display:block;color:rgba(11,62,126,.6);font-size:.8rem;line-height:1.35;margin-top:2px} .submenu .ver-todo{border-top:1px solid rgba(11,62,126,.08);margin-top:6px;padding-top:12px;color:var(--lago);font-weight:600} .nav-acciones{margin-left:auto;display:flex;align-items:center;gap:14px} .nav-acciones .entrar{font-weight:600;font-size:.95rem} .nav-acciones .entrar:hover{color:var(--lago)} .nav .btn{padding:11px 22px;font-size:.93rem} /* Iconos redondos de la barra (idioma, soporte, cerrar) */ .icono-nav{ display:flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%; color:var(--tinta);flex:0 0 auto; background:none;border:0;padding:0; transition:background .18s ease, color .18s ease; } .icono-nav svg{width:21px;height:21px;display:block} .icono-nav:hover{background:var(--bruma);color:var(--lago)} .icono-nav[aria-current="page"]{background:var(--bruma);color:var(--lago)} /* Menú móvil */ .hamburguesa{display:none;background:none;border:0;width:44px;height:44px;position:relative} .hamburguesa span{position:absolute;left:10px;right:10px;height:2px;background:var(--tinta);transition:.2s} .hamburguesa span:nth-child(1){top:15px} .hamburguesa span:nth-child(2){top:22px} .hamburguesa span:nth-child(3){top:29px} .panel-movil{display:none} @media (max-width:1020px){ /* En móvil la barra deja solo el logo y los iconos: el CTA baja al panel */ .menu, .nav-acciones .entrar, .nav-acciones .btn{display:none} .hamburguesa{display:block} .nav-acciones{gap:2px} .panel-movil{ display:none;position:fixed;inset:0;z-index:70; background:var(--blanco); overflow:auto; flex-direction:column; } .panel-movil.abierto{display:flex} /* Cabecera propia, alineada con la barra que sustituye */ .panel-cabecera{ display:flex;align-items:center;justify-content:space-between;gap:16px; height:76px;padding:0 18px 0 24px;flex:0 0 auto; border-bottom:1px solid rgba(11,62,126,.1); } .panel-cabecera .logo img{height:34px} .panel-cabecera-iconos{display:flex;align-items:center;gap:2px} /* Lista de secciones */ .panel-lista{flex:1 1 auto;padding:10px 10px 10px 0;display:flex;flex-direction:column;gap:2px} .panel-item{display:flex;flex-direction:column} .panel-fila{ display:flex;align-items:center;gap:16px;width:100%; padding:12px 10px;border:0;background:none;border-radius:16px; font-family:var(--f-ui);font-size:1.06rem;font-weight:600; color:var(--tinta);text-align:left; transition:background .16s ease; } .panel-fila:hover{background:var(--bruma)} .panel-fila[aria-current="page"]{color:var(--lago)} .panel-icono{ width:45px;height:45px;border-radius:15px;flex:0 0 auto; background:var(--bruma); display:flex;align-items:center;justify-content:center; color:var(--tinta); } .panel-icono svg{width:25px;height:25px;display:block} .panel-texto{flex:1 1 auto} .panel-flecha{ font-size:1.5rem;line-height:1;color:rgba(11,62,126,.4);flex:0 0 auto; transition:transform .2s ease; } .panel-fila[aria-expanded="true"] .panel-flecha{transform:rotate(90deg)} .panel-fila[aria-expanded="true"]{background:var(--bruma)} /* Submenú desplegable, alineado bajo el texto de su sección */ .panel-sub{display:flex;flex-direction:column;padding:2px 10px 10px 45px} /* Sin esto el display:flex de arriba anularía el atributo hidden y las secciones nacerían abiertas. */ .panel-sub[hidden]{display:none} .panel-sub a{ padding:10px 2px;font-size:.98rem;color:rgba(11,62,126,.78); border-bottom:1px solid rgba(11,62,126,.07); } .panel-sub a:last-child{border-bottom:0} .panel-sub a:hover{color:var(--lago)} /* Botones fijos al pie del panel */ .panel-botones{ flex:0 0 auto;display:flex;gap:12px; padding:16px 20px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid rgba(11,62,126,.1); background:var(--blanco); } .panel-botones .btn{flex:1 1 0;padding:10px;font-size:.98rem} .btn-suave{background:var(--bruma);color:var(--tinta)} .btn-suave:hover{background:#DCEBFB} } /* En escritorio el panel nunca se muestra */ @media (min-width:1021px){.panel-movil{display:none !important}} /* ========================================================== 4 · HERO [FOTO] Fondo: video corto (10–15 s, loop, sin audio) de momentos familiares reales con luz de atardecer — un abrazo, una risa, manos de madre e hijo. Si no hay video, usar el degradado "aurora" incluido, que ya se ve premium. ========================================================== */ /* Portada en azul de marca, con los mismos destellos "aurora" del original pero sobre fondo profundo. El texto pasa a claro. */ .hero{ position:relative;overflow:hidden; background: radial-gradient(1100px 600px at 88% -12%, rgba(46,198,240,.32), transparent 62%), radial-gradient(900px 520px at 8% 8%, rgba(27,135,201,.30), transparent 60%), linear-gradient(180deg, var(--tinta) 0%, var(--marino) 100%); color:#F2F9FF; padding:56px 0; text-align:center; } .hero h1{ font-family:var(--f-display); font-weight:420; font-size:clamp(2.4rem, 5.4vw, 4.1rem); line-height:1.04; letter-spacing:-.015em; max-width:22ch;margin:0 auto; } .hero h1 em{font-style:italic;font-weight:380} .hero p{ max-width:560px;margin:16px auto 0; font-size:clamp(1rem, 1.4vw, 1.15rem); color:rgba(255,255,255,.82); } /* Columnas iguales: con width:max-content, el 1fr reparte el ancho del botón más largo entre los dos, así que ambos salen del mismo tamaño. */ .hero-cta{ display:grid;grid-auto-flow:column;grid-auto-columns:1fr; gap:14px; width:max-content;max-width:100%; margin:26px auto 0; } .hero-cta .btn{min-width:220px} @media (max-width:680px){ .hero-cta{grid-auto-flow:row;width:100%} .hero-cta .btn{min-width:0;width:100%} } .hero-nota{margin-top:26px;font-size:.9rem;color:rgba(255,255,255,.62)} /* El botón secundario del hero era de borde oscuro: sobre azul va en claro */ .hero .btn-fantasma-oscuro{border-color:rgba(255,255,255,.45);color:#F2F9FF} .hero .btn-fantasma-oscuro:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12)} /* ========================================================== 5 · FRANJA DE PRENSA ("Han hablado de nosotros") Como en la referencia: una etiqueta centrada y los logos quietos en una sola fila. Los SVG van a 26–32 px de alto. ========================================================== */ .prensa-franja{ background:var(--papel); padding:34px 0 38px; border-bottom:1px solid rgba(11,62,126,.06); } .prensa-etiqueta{ text-align:center; font-size:.95rem;font-weight:600; color:rgba(11,62,126,.78); margin-bottom:24px; } .prensa-logos{ display:flex;flex-wrap:wrap; align-items:center;justify-content:center; gap:18px 46px; max-width:var(--ancho);margin:0 auto;padding:0 24px; } /* Logos de medios, a color y a la misma altura óptica. Los archivos viven en public/img/prensa/ */ img.logo-prensa{ height:30px;width:auto;object-fit:contain; flex:0 0 auto; } @media (max-width:760px){ .prensa-logos{gap:14px 26px} img.logo-prensa{height:24px} } /* Compartida con la marquesina de herramientas (sección 9) */ @keyframes desplazar{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ========================================================== 6 · COMIENZA TU CAMINO HOY ========================================================== */ .comienza{background:var(--papel)} .comienza .btn{margin-top:34px} .contador{ margin-top:26px;font-family:var(--f-display);font-style:italic; color:rgba(11,62,126,.6);font-size:1rem; } /* ========================================================== 7 · EVENTO DESTACADO [FOTO · SOLO MAQUETA] public/img/eventos/congreso.jpg es una foto de banco (Unsplash, uso libre). Sustituir por una de Sadith en escenario, 1920×820, con el sujeto a la DERECHA: el degradado deja la izquierda en azul denso para que el texto se lea encima. ========================================================== */ .evento{padding-top:0} .evento-card{ border-radius:var(--radius-xl);overflow:hidden;position:relative; /* Velo azul denso a la izquierda para que el texto se lea, y casi limpio a la derecha para que se vea el público. */ background:linear-gradient(100deg, rgba(11,62,126,.97) 30%, rgba(11,62,126,.80) 52%, rgba(11,62,126,.42) 78%, rgba(11,62,126,.28) 100%), url('/img/eventos/congreso.jpg') center right/cover no-repeat, linear-gradient(35deg, var(--marino), var(--azur) 70%, var(--turquesa) 130%); color:var(--blanco); min-height:380px;display:flex;align-items:center; box-shadow:var(--sombra-suave); } .evento-contenido{padding:56px;max-width:560px} .evento-fecha{color:var(--miel);font-weight:600;font-size:.92rem;margin-bottom:12px} .evento-contenido h3{ font-family:var(--f-display);font-weight:460; font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1; } .evento-contenido p{margin:16px 0 26px;color:rgba(255,255,255,.82)} /* ========================================================== 8 · PROGRAMAS (rejilla de 4) [FOTO] Cada tarjeta: retrato editorial 1200×1500 relacionado con el programa (familia, madre-hijo, círculo de padres). Los degradados actuales son placeholders con jerarquía real. ========================================================== */ .programas{background:var(--bruma)} /* Los cuatro programas caben a la vez: rejilla, sin desplazamiento lateral */ .programas-grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:22px;padding:44px 24px 12px; max-width:calc(var(--ancho) + 48px);margin:0 auto; align-items:stretch; } @media (max-width:1020px){.programas-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.programas-grid{grid-template-columns:1fr}} .programa{ background:var(--blanco);border-radius:var(--radius-xl);overflow:hidden; box-shadow:var(--sombra-card); display:flex;flex-direction:column; transition:transform .2s ease; } .programa:hover{transform:translateY(-6px)} .programa-visual{ aspect-ratio:4/3;display:flex;align-items:flex-end;padding:18px; color:var(--blanco); } .programa-visual.v1{background:linear-gradient(180deg,rgba(11,62,126,0) 45%,rgba(11,62,126,.55)),url('https://images.unsplash.com/photo-1476703993599-0035a21b17a9?auto=format&fit=crop&w=1200&q=70') center/cover no-repeat,linear-gradient(160deg,#0D4FA0,#2EC6F0)} .programa-visual.v2{background:linear-gradient(180deg,rgba(11,62,126,0) 45%,rgba(11,62,126,.55)),url('https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=1200&q=70') center/cover no-repeat,linear-gradient(160deg,#1B87C9,#2EC6F0)} .programa-visual.v3{background:linear-gradient(180deg,rgba(11,62,126,0) 45%,rgba(11,62,126,.55)),url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1200&q=70') center/cover no-repeat,linear-gradient(160deg,#0B3E7E,#0D4FA0 60%,#2EC6F0)} .programa-visual.v4{background:linear-gradient(180deg,rgba(11,62,126,0) 45%,rgba(11,62,126,.55)),url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=1200&q=70') center/cover no-repeat,linear-gradient(160deg,#1B87C9,#0B3E7E)} .pill{ background:rgba(255,255,255,.18);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); border-radius:var(--radius-pill);padding:5px 13px;font-size:.78rem;font-weight:600; } .programa-cuerpo{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .programa-cuerpo h4{font-family:var(--f-display);font-weight:520;font-size:1.28rem;line-height:1.2} .programa-cuerpo .meta{font-size:.82rem;color:var(--lago);font-weight:600} .programa-cuerpo p{font-size:.94rem;color:rgba(11,62,126,.72);flex:1} .programa-cuerpo a{font-weight:600;color:var(--lago)} .programa-cuerpo a:hover{text-decoration:underline;text-underline-offset:4px} .programas .acciones{text-align:center;margin-top:38px} /* ========================================================== 9 · HERRAMIENTAS PARA CADA MOMENTO (marquesina de tarjetas) [FOTO] Cada azulejo: ilustración o foto cuadrada 640×640 del micro-momento (cocina, auto, hora de dormir). Estilo cálido, consistente, sin stock genérico. ========================================================== */ .herramientas{background:var(--blanco);color:var(--tinta);overflow:hidden} .herramientas .subtitulo{color:rgba(11,62,126,.7)} .hero .ceja,.boletin .ceja,.herramientas .ceja,.metas .ceja{color:var(--lago)} .filas{margin-top:52px;display:flex;flex-direction:column;gap:18px} .fila{overflow:hidden} .fila-pista{display:flex;gap:18px;width:max-content;animation:desplazar 46s linear infinite} .fila.inversa .fila-pista{animation-direction:reverse;animation-duration:52s} .fila:hover .fila-pista{animation-play-state:paused} .azulejo{ width:210px;height:210px;border-radius:var(--radius-lg); padding:18px;display:flex;align-items:flex-end; font-family:var(--f-display);font-weight:460;font-size:1.05rem;line-height:1.25; color:var(--blanco); text-shadow:0 1px 8px rgba(11,62,126,.45); background:linear-gradient(165deg,#0D4FA0,#0B3E7E); border:1px solid rgba(11,62,126,.10); box-shadow:0 8px 22px -14px rgba(11,62,126,.25); } .azulejo:nth-child(4n+1){background:linear-gradient(165deg,#0D4FA0,#0B3E7E)} .azulejo:nth-child(4n+2){background:linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo:nth-child(4n+3){background:linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo:nth-child(4n+4){background:linear-gradient(165deg,#0B3E7E,#1B87C9)} .herramientas .acciones{text-align:center;margin-top:48px} /* ========================================================== 10 · DISPOSITIVOS [FOTO] Mockups reales de la plataforma en celular, tablet y laptop (usar capturas del campus virtual). Composición en niveles, laptop al centro. ========================================================== */ .dispositivos{background:var(--papel)} .dispositivos-grid{ margin-top:52px;display:grid;grid-template-columns:1.4fr 1fr;gap:22px; } .pantalla{ border-radius:var(--radius-xl);min-height:300px; background:linear-gradient(150deg,var(--bruma),#D6EAFC); background-size:cover;background-position:center; border:1px solid rgba(11,62,126,.07); box-shadow:var(--sombra-card); } .pantalla.p-laptop{background-image:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1800&q=70'),linear-gradient(150deg,var(--bruma),#D6EAFC)} .pantalla.p-celular{background-image:url('https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=1200&q=70'),linear-gradient(150deg,var(--bruma),#D6EAFC)} .pantalla.p-tablet{background-image:url('https://images.unsplash.com/photo-1588075592446-265fd1e6e76f?auto=format&fit=crop&w=1200&q=70'),linear-gradient(150deg,var(--bruma),#D6EAFC)} .pantalla.grande{grid-row:span 2;min-height:0} @media (max-width:760px){.dispositivos-grid{grid-template-columns:1fr}} /* ========================================================== 11 · SELECTOR DE METAS ========================================================== */ .metas{background:linear-gradient(180deg,var(--bruma),var(--blanco));color:var(--tinta)} .metas .subtitulo{color:rgba(11,62,126,.72)} .chips{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center; max-width:760px;margin:40px auto 0; } .chip{ border-radius:var(--radius-pill); border:1.5px solid rgba(11,62,126,.30); background:var(--blanco);color:var(--tinta); padding:12px 24px;font-size:.98rem;font-weight:500; transition:.18s; } .chip:hover{border-color:var(--tinta)} .chip[aria-pressed="true"]{background:var(--turquesa);color:var(--tinta);border-color:var(--turquesa);font-weight:600} .metas .acciones{text-align:center;margin-top:38px} /* ========================================================== 12 · EL LIBRO [FOTO] Foto real del libro físico "Crianza en la Era Digital" sostenido por manos, o composición 3D de la portada. Mientras tanto, portada dibujada en CSS. ========================================================== */ .libro{background:var(--bruma)} .libro-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center} @media (max-width:860px){.libro-grid{grid-template-columns:1fr;gap:44px}} .portada-escena{display:flex;justify-content:center;perspective:1200px} .portada{ width:min(300px,70vw);aspect-ratio:2/3;border-radius:8px 16px 16px 8px; background:linear-gradient(165deg,var(--tinta) 0%,var(--marino) 45%,var(--azur) 80%,var(--turquesa) 125%); color:var(--blanco);padding:34px 26px; display:flex;flex-direction:column;justify-content:space-between; transform:rotateY(-14deg) rotateZ(-1deg); box-shadow:28px 40px 70px -30px rgba(11,62,126,.5), inset 6px 0 0 rgba(255,255,255,.14); } .portada .sello{font-size:.7rem;letter-spacing:.08em;color:rgba(255,255,255,.75)} .portada h3{font-family:var(--f-display);font-weight:460;font-size:2rem;line-height:1.08;margin-top:14px} .portada .autora{font-size:.95rem;font-weight:600} .libro-texto h2{text-align:left} .libro-texto .ceja{text-align:left} .libro-lista{margin:26px 0 32px;display:grid;gap:14px} .libro-lista li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:rgba(11,62,126,.8)} .libro-lista li::before{ content:"✦";color:var(--lago);font-size:.9rem;margin-top:3px; } .libro-cta{display:flex;gap:14px;flex-wrap:wrap} /* ========================================================== 13 · HISTORIAS (testimonios) [FOTO] Retratos reales de familias de la comunidad (con consentimiento). Círculo 96×96, luz natural. ========================================================== */ .historias{background:var(--papel)} .testimonios{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px; } @media (max-width:900px){.testimonios{grid-template-columns:1fr}} .testimonio{ background:var(--blanco);border:1px solid rgba(11,62,126,.07); border-radius:var(--radius-xl);padding:32px;box-shadow:var(--sombra-card); display:flex;flex-direction:column;gap:18px; } .testimonio blockquote{ font-family:var(--f-display);font-weight:400;font-size:1.12rem;line-height:1.45; } .testimonio blockquote::before{content:"“";color:var(--lago)} .testimonio blockquote::after{content:"”";color:var(--lago)} .autor{display:flex;align-items:center;gap:14px;margin-top:auto} .avatar{ width:52px;height:52px;border-radius:50%; background:linear-gradient(140deg,var(--marino),var(--azur)); display:flex;align-items:center;justify-content:center; color:var(--blanco);font-weight:700;font-size:1.05rem; } .autor b{display:block;font-size:.95rem} .autor span{font-size:.82rem;color:rgba(11,62,126,.6)} .historias .acciones{text-align:center;margin-top:40px} /* ========================================================== 14 · BANDA CTA MEMBRESÍA ========================================================== */ .banda{ background: radial-gradient(800px 400px at 85% 20%, rgba(46,198,240,.22), transparent 60%), radial-gradient(600px 340px at 8% 90%, rgba(27,135,201,.10), transparent 60%), linear-gradient(120deg,var(--bruma),var(--blanco) 65%); color:var(--tinta);text-align:center; padding:50px 24px; border-top:1px solid rgba(11,62,126,.07);border-bottom:1px solid rgba(11,62,126,.07); } .banda h2{font-family:var(--f-display);font-weight:440;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.12} .banda p{max-width:560px;margin:18px auto 34px;color:rgba(11,62,126,.75)} .banda .btn-primario{background:var(--tinta);color:var(--blanco)} .banda .btn-primario:hover{background:var(--marino)} /* ========================================================== 15 · PROGRAMAS AVANZADOS (trío de banners) [FOTO] Tres banners 2400×1080: (1) aula/campus con alumnos, (2) facilitadora certificada acompañando a un grupo, (3) evento en vivo con público. ========================================================== */ .avanzados{background:var(--papel)} .trio{display:grid;gap:22px;margin-top:52px} .avanzado{ border-radius:var(--radius-xl);color:var(--blanco); min-height:250px; display:flex;flex-direction:column; justify-content:center;align-items:center; text-align:center; padding:48px 40px;position:relative;overflow:hidden; text-shadow:0 1px 10px rgba(11,62,126,.55); box-shadow:var(--sombra-card); transition:transform .2s ease; } .avanzado:hover{transform:translateY(-5px)} .avanzado.a1{background:linear-gradient(180deg,rgba(11,62,126,.60) 0%,rgba(11,62,126,.78) 100%),url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=1800&q=70') center/cover no-repeat,linear-gradient(115deg,#0B3E7E 20%,#0D4FA0 60%,#2EC6F0)} .avanzado.a2{background:linear-gradient(180deg,rgba(11,62,126,.60) 0%,rgba(11,62,126,.78) 100%),url('https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1800&q=70') center/cover no-repeat,linear-gradient(115deg,#0D4FA0 25%,#1FAFDC 70%,#F2B25C 130%)} .avanzado.a3{background:linear-gradient(180deg,rgba(11,62,126,.60) 0%,rgba(11,62,126,.78) 100%),url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1800&q=70') center/cover no-repeat,linear-gradient(115deg,#1B87C9 15%,#2EC6F0 65%,#F2B25C 125%)} .avanzado h3{font-family:var(--f-display);font-weight:480;font-size:1.6rem} .avanzado p{color:rgba(255,255,255,.86);max-width:520px;margin:10px auto 22px;font-size:.98rem} .avanzado .enlace{font-weight:700;color:var(--blanco);text-decoration:underline;text-underline-offset:5px} /* ========================================================== 16 · PREGUNTAS FRECUENTES ========================================================== */ .faq{background:var(--bruma)} .faq-lista{max-width:820px;margin:48px auto 0;display:grid;gap:14px} .faq details{ background:var(--blanco);border:1px solid rgba(11,62,126,.07); border-radius:var(--radius-lg);padding:6px 26px; } .faq summary{ list-style:none;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:20px; padding:18px 0;font-weight:600;font-size:1.05rem; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";font-family:var(--f-display);font-size:1.6rem;font-weight:400; color:var(--lago);transition:transform .2s; } .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 22px;color:rgba(11,62,126,.75);max-width:64ch} /* ========================================================== 17 · FUNDADORA [FOTO] Retrato editorial de Sadith Avellaneda 1536×2300: fondo neutro cálido, actitud cercana y serena, luz suave. Este es EL retrato de la marca: invertir en esta sesión. ========================================================== */ .fundadora{background:var(--blanco);color:var(--tinta)} .fundadora-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center} @media (max-width:860px){.fundadora-grid{grid-template-columns:1fr;gap:40px}} .retrato{ aspect-ratio:3/4;border-radius:var(--radius-xl); background:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1400&q=70') center/cover no-repeat, linear-gradient(160deg,#0D4FA0,#2EC6F0 90%); box-shadow:var(--sombra-suave); } .fundadora .ceja{color:var(--lago)} .fundadora h2{font-family:var(--f-display);font-weight:440;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.1} .fundadora .rol{margin-top:10px;color:rgba(11,62,126,.62);font-size:.95rem} .fundadora .bio{margin-top:22px;color:rgba(11,62,126,.82)} .fundadora blockquote{ margin-top:28px;padding-left:22px;border-left:3px solid var(--miel); font-family:var(--f-display);font-style:italic;font-size:1.2rem;line-height:1.5; } .fundadora .btn{margin-top:32px} /* ========================================================== 18 · NEWSLETTER ========================================================== */ .boletin{background:var(--papel);text-align:center} .boletin-form{ margin:36px auto 0;max-width:520px;display:flex;gap:10px; background:var(--blanco);border:1.5px solid rgba(11,62,126,.14); border-radius:var(--radius-pill);padding:7px 7px 7px 24px; box-shadow:var(--sombra-card); } .boletin-form input{ flex:1;border:0;outline:0;font-family:inherit;font-size:1rem;background:transparent;min-width:0; } .boletin-form .btn{padding:13px 26px} .boletin .nota{margin-top:16px;font-size:.85rem;color:rgba(11,62,126,.55)} @media (max-width:520px){ .boletin-form{flex-direction:column;border-radius:var(--radius-xl);padding:14px} .boletin-form input{padding:10px 4px} } /* ========================================================== 19 · FOOTER ========================================================== */ footer{background:var(--tinta);color:rgba(255,255,255,.78);padding:76px 0 40px} .footer-grid{ display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px; } @media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.footer-grid{grid-template-columns:1fr}} .footer-marca .logo-blanco{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:8px} .footer-marca span{font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.5)} .footer-marca p{margin-top:18px;font-size:.92rem;max-width:280px} /* Iconos de redes: círculos, con el nombre solo para lectores de pantalla */ .redes{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap} .redes a{ width:40px;height:40px;border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.85); transition:background .18s ease, border-color .18s ease, color .18s ease; } .redes a svg{width:18px;height:18px;display:block} .redes a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); color:var(--blanco); } .footer-col h5{color:var(--blanco);font-size:.95rem;margin-bottom:16px;font-weight:700} .footer-col a{display:block;padding:6px 0;font-size:.92rem} .footer-col a:hover{color:var(--miel)} .footer-base{ margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:.82rem;color:rgba(255,255,255,.5); } /* ========================================================== 20 · MOVIMIENTO REDUCIDO ========================================================== */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto} } /* ========================================================== 21 · COMPONENTES DE PÁGINAS INTERIORES ========================================================== */ /* Hero compacto de página */ .pagina-hero{ background: radial-gradient(900px 480px at 85% -10%, rgba(46,198,240,.20), transparent 60%), linear-gradient(180deg, var(--blanco) 0%, var(--bruma) 100%); color:var(--tinta);text-align:center;padding:88px 0 76px; } .pagina-hero .subtitulo{color:rgba(11,62,126,.75)} .pagina-hero .ceja{color:var(--lago)} .pagina-hero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px} .pagina-hero.clara{ background:linear-gradient(178deg,var(--bruma),var(--papel));color:var(--tinta); } .pagina-hero.clara .subtitulo{color:rgba(11,62,126,.72)} .pagina-hero.clara .ceja{color:var(--lago)} /* Hero dividido (detalle de programa / libro) */ .split{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;text-align:left} .split .ceja{color:var(--lago)} .split .subtitulo{margin-left:0} @media (max-width:900px){.split{grid-template-columns:1fr;gap:40px}} .split-visual{ border-radius:var(--radius-xl);aspect-ratio:4/3; background-size:cover;background-position:center; box-shadow:var(--sombra-suave); } .datos-clave{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px} .dato-clave{ border:1px solid rgba(11,62,126,.28);border-radius:var(--radius-pill); padding:8px 18px;font-size:.88rem;font-weight:600; } .pagina-hero.clara .dato-clave{border-color:rgba(11,62,126,.22)} /* Rejillas utilitarias */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:900px){.grid-3{grid-template-columns:1fr}} @media (max-width:760px){.grid-2{grid-template-columns:1fr}} /* Tarjeta genérica y beneficios */ .tarjeta{ background:var(--blanco);border:1px solid rgba(11,62,126,.08); border-radius:var(--radius-xl);padding:32px;box-shadow:var(--sombra-card); text-align:left; } .tarjeta h4{font-family:var(--f-display);font-weight:520;font-size:1.22rem;margin-bottom:10px} .tarjeta p{font-size:.95rem;color:rgba(11,62,126,.75)} .beneficio .icono{ width:46px;height:46px;border-radius:14px;margin-bottom:18px; background:linear-gradient(140deg,var(--turquesa),var(--azur)); display:flex;align-items:center;justify-content:center; color:var(--blanco);font-size:1.2rem; } /* Pasos numerados (procesos reales en secuencia) */ .pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:paso} @media (max-width:860px){.pasos{grid-template-columns:1fr}} .paso{position:relative;background:var(--blanco);border:1px solid rgba(11,62,126,.08); border-radius:var(--radius-xl);padding:30px;text-align:left;box-shadow:var(--sombra-card)} .paso::before{ counter-increment:paso;content:counter(paso); display:flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%; background:var(--tinta);color:var(--turquesa); font-family:var(--f-display);font-weight:560;font-size:1.1rem;margin-bottom:16px; } .paso h4{font-family:var(--f-display);font-weight:520;font-size:1.15rem;margin-bottom:8px} .paso p{font-size:.93rem;color:rgba(11,62,126,.72)} /* Planes de membresía */ .planes{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:24px;justify-content:center;margin-top:52px} @media (max-width:820px){.planes{grid-template-columns:1fr}} .plan{ background:var(--blanco);border:1.5px solid rgba(11,62,126,.1); border-radius:var(--radius-xl);padding:38px 34px;text-align:left; box-shadow:var(--sombra-card);position:relative;display:flex;flex-direction:column; } .plan.destacado{border-color:var(--lago);box-shadow:0 24px 60px -24px rgba(13,110,174,.35)} .plan .insignia{ position:absolute;top:-14px;left:34px; background:var(--turquesa);color:var(--tinta); border-radius:var(--radius-pill);padding:5px 16px;font-size:.78rem;font-weight:700; } .plan h4{font-family:var(--f-display);font-weight:540;font-size:1.35rem} .plan .precio{font-family:var(--f-display);font-weight:560;font-size:2.6rem;margin:16px 0 2px} .plan .precio small{font-size:1rem;font-weight:400;color:rgba(11,62,126,.6)} .plan .nota-precio{font-size:.85rem;color:rgba(11,62,126,.6);margin-bottom:20px} .plan ul{margin:10px 0 26px;display:grid;gap:10px} .plan li{display:flex;gap:12px;font-size:.95rem;color:rgba(11,62,126,.8)} .plan li::before{content:"✓";color:var(--lago);font-weight:700} .plan .btn{margin-top:auto;width:100%} /* Listas sí / no */ .lista-si li,.lista-no li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:.98rem;color:rgba(11,62,126,.82)} .lista-si li::before{content:"✓";color:var(--lago);font-weight:700;margin-top:1px} .lista-no li::before{content:"✕";color:rgba(11,62,126,.35);font-weight:700;margin-top:1px} /* Filtros de catálogo */ .filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px} .chip-claro{ border-radius:var(--radius-pill);border:1.5px solid rgba(11,62,126,.25); background:transparent;color:var(--tinta);padding:10px 22px;font-size:.93rem;font-weight:500;transition:.18s; } .chip-claro:hover{border-color:var(--tinta)} .chip-claro[aria-pressed="true"]{background:var(--tinta);color:var(--blanco);border-color:var(--tinta);font-weight:600} .catalogo{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px} @media (max-width:820px){.catalogo{grid-template-columns:1fr}} .catalogo .programa[hidden]{display:none} /* Agenda / eventos */ .agenda{max-width:820px;margin:48px auto 0;display:grid;gap:14px;text-align:left} .agenda-item{ display:flex;gap:22px;align-items:flex-start; background:var(--blanco);border:1px solid rgba(11,62,126,.08); border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--sombra-card); } .fecha-bloque{ flex:0 0 auto;width:74px;border-radius:14px;background:var(--tinta);color:var(--blanco); text-align:center;padding:10px 6px; } .fecha-bloque b{display:block;font-family:var(--f-display);font-size:1.4rem;line-height:1;color:var(--turquesa)} .fecha-bloque span{font-size:.72rem;letter-spacing:.04em} .agenda-item h4{font-family:var(--f-display);font-weight:520;font-size:1.15rem} .agenda-item p{font-size:.92rem;color:rgba(11,62,126,.72);margin-top:4px} .agenda-item .btn{margin-left:auto;flex:0 0 auto;padding:10px 20px;font-size:.88rem} @media (max-width:640px){.agenda-item{flex-wrap:wrap}.agenda-item .btn{margin-left:0}} /* Blog y podcast */ .articulos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px} @media (max-width:900px){.articulos{grid-template-columns:1fr}} .articulo{background:var(--blanco);border:1px solid rgba(11,62,126,.08);border-radius:var(--radius-xl); overflow:hidden;box-shadow:var(--sombra-card);text-align:left;display:flex;flex-direction:column;transition:transform .2s} .articulo:hover{transform:translateY(-5px)} .articulo-visual{aspect-ratio:16/9} .articulo-visual.b1{background:linear-gradient(150deg,#0D4FA0,#2EC6F0)} .articulo-visual.b2{background:linear-gradient(150deg,#1B87C9,#0D4FA0)} .articulo-visual.b3{background:linear-gradient(150deg,#0B3E7E,#1B87C9)} .articulo-cuerpo{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1} .tag{align-self:flex-start;background:var(--bruma);color:var(--lago);border-radius:var(--radius-pill); padding:4px 13px;font-size:.75rem;font-weight:700} .articulo h4{font-family:var(--f-display);font-weight:520;font-size:1.18rem;line-height:1.25} .articulo p{font-size:.92rem;color:rgba(11,62,126,.72);flex:1} .articulo .leer{font-weight:600;color:var(--lago)} /* Cita grande */ .cita{ max-width:760px;margin:0 auto;text-align:center; font-family:var(--f-display);font-style:italic;font-weight:400; font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.5; } .cita footer{margin-top:22px;font-family:var(--f-ui);font-style:normal;font-size:.95rem;color:rgba(11,62,126,.6)} /* Formularios */ .formulario{max-width:560px;margin:44px auto 0;display:grid;gap:16px;text-align:left} .campo label{display:block;font-weight:600;font-size:.92rem;margin-bottom:7px} .campo input,.campo textarea,.campo select{ width:100%;border:1.5px solid rgba(11,62,126,.18);border-radius:14px; padding:13px 16px;font-family:inherit;font-size:1rem;background:var(--blanco);color:var(--tinta); } .campo input:focus,.campo textarea:focus{border-color:var(--lago);outline:none} .formulario .btn{justify-self:start} /* Currículum (reutiliza el estilo del acordeón FAQ) */ .curriculum{max-width:820px;margin:48px auto 0;display:grid;gap:14px;text-align:left} .curriculum details{background:var(--blanco);border:1px solid rgba(11,62,126,.08);border-radius:var(--radius-lg);padding:6px 26px} .curriculum summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-weight:600;font-size:1.02rem} .curriculum summary::-webkit-details-marker{display:none} .curriculum summary::after{content:"+";font-family:var(--f-display);font-size:1.6rem;color:var(--lago);transition:transform .2s} .curriculum details[open] summary::after{transform:rotate(45deg)} .curriculum details p{padding:0 0 20px;color:rgba(11,62,126,.75)} .curriculum .lecciones{color:var(--lago);font-size:.82rem;font-weight:700;white-space:nowrap;margin-left:auto;margin-right:16px} /* Banda secundaria clara */ .banda-clara{background:var(--bruma);text-align:center;padding:72px 24px;border-radius:0} .banda-clara h2{font-family:var(--f-display);font-weight:440;font-size:clamp(1.7rem,3vw,2.4rem)} .banda-clara p{max-width:560px;margin:16px auto 30px;color:rgba(11,62,126,.72)} /* Legal */ .legal-cuerpo{max-width:780px;margin:0 auto;text-align:left} .legal-cuerpo h3{font-family:var(--f-display);font-weight:520;font-size:1.5rem;margin:56px 0 14px} .legal-cuerpo p,.legal-cuerpo li{color:rgba(11,62,126,.78);font-size:.97rem;margin-bottom:12px} .legal-cuerpo ul{list-style:disc;padding-left:22px} .aviso-editar{ background:var(--bruma);border-left:4px solid var(--miel); border-radius:0 14px 14px 0;padding:16px 20px;font-size:.9rem;color:rgba(11,62,126,.75);margin:22px 0; } /* ── Azulejos de herramientas con foto referencial (respaldo: degradado) ── */ .azulejo.az-calma5{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#0D4FA0,#0B3E7E)} .azulejo.az-berrinche{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo.az-pantallas{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1588075592446-265fd1e6e76f?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo.az-noches{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1476703993599-0035a21b17a9?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#0B3E7E,#1B87C9)} .azulejo.az-palabras{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1516627145497-ae6968895b74?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#0D4FA0,#0B3E7E)} .azulejo.az-pausa{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo.az-mananas{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo.az-limites{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#0B3E7E,#1B87C9)} .azulejo.az-volver{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1499209974431-9dddcece7f88?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#0D4FA0,#0B3E7E)} .azulejo.az-conversa{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo.az-adolescentes{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#1B87C9,#0D4FA0)} .azulejo.az-perdon{background:linear-gradient(180deg, rgba(11,62,126,0) 52%, rgba(11,62,126,.74) 100%),url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=900&q=70') center/cover no-repeat,linear-gradient(165deg,#0B3E7E,#1B87C9)} /* ── Testimonios en video ── */ .videos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px} @media (max-width:900px){.videos{grid-template-columns:1fr}} .video-card{ display:block;text-align:left;border-radius:var(--radius-xl);overflow:hidden; background:var(--blanco);border:1px solid rgba(11,62,126,.08); box-shadow:var(--sombra-card);transition:transform .2s; } .video-card:hover{transform:translateY(-5px)} .video-miniatura{ position:relative;aspect-ratio:16/9; background-size:cover;background-position:center; display:flex;align-items:center;justify-content:center; } .video-miniatura::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,62,126,.12),rgba(11,62,126,.38))} .video-play{ position:relative;width:58px;height:58px;border-radius:50%; background:var(--turquesa);color:var(--tinta); display:flex;align-items:center;justify-content:center; font-size:1.15rem;padding-left:4px; box-shadow:0 14px 34px rgba(11,62,126,.4);transition:transform .2s; } .video-card:hover .video-play{transform:scale(1.12)} .video-duracion{ position:absolute;right:12px;bottom:12px; background:rgba(11,62,126,.78);color:var(--blanco); border-radius:var(--radius-pill);padding:4px 11px;font-size:.74rem;font-weight:600; } .video-info{padding:16px 20px 18px;display:flex;flex-direction:column;gap:3px} .video-info b{font-size:1rem} .video-info span{font-size:.82rem;color:var(--lago);font-weight:600} /* ── Video protagonista del inicio (estilo plataforma) ── */ .video-hero{ display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; max-width:980px;margin:40px auto 0; aspect-ratio:16/9;border-radius:var(--radius-xl); background:url('https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=2000&q=72') center/cover no-repeat, linear-gradient(150deg,var(--marino),var(--azur)); box-shadow:0 34px 90px -34px rgba(11,62,126,.5); } .video-hero::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(11,62,126,0) 55%, rgba(11,62,126,.5) 100%); } .video-hero .video-play{position:relative;width:86px;height:86px;font-size:1.7rem;padding-left:6px} .video-hero:hover .video-play{transform:scale(1.1)} .video-etiqueta{ position:absolute;left:20px;bottom:18px; background:rgba(255,255,255,.92);color:var(--tinta); border-radius:var(--radius-pill);padding:8px 18px; font-size:.85rem;font-weight:600; } /* El ingeniero solo pega el iframe o el