/* ============================================================= ASOCIACIÓN ESPÍRITU SANTO DE CHACAYÁN — Portal institucional style.css — Sistema de diseño: variables, tipografía, componentes ============================================================= */ /* ---------- 1. Variables de marca ---------- Paleta anclada en el sello oficial de la Asociación: azul institucional + oro del escudo, con celeste como acento. */ :root{ --azul-institucional: #14213D; /* navy del sello — header, footer, textos fuertes */ --azul-noche: #0F1830; /* variante más profunda — fondos oscuros */ --azul-medio: #1F3358; --celeste: #4A8FC2; /* acento vivo — enlaces, hover, íconos */ --celeste-suave: #DCEBF5; /* tinte claro — alternancia de secciones */ --oro: #C9A227; /* oro del escudo — sol, fiesta, prestigio */ --oro-suave: #E4C567; --tierra: #7A4B32; /* acento menor — productos y naturaleza */ --verde-andino: #3F5F4C; /* acento menor — productos y naturaleza */ --piedra: #F7F9FB; /* blanco frío — fondo principal */ --piedra-media: #E7EEF3; --gris-suave: #55607A; --blanco: #FFFFFF; /* Semántica de tema (modo claro por defecto) */ --fondo: var(--piedra); --fondo-alterno: var(--blanco); --texto: #16213A; --texto-suave: var(--gris-suave); --superficie: var(--blanco); --borde: #DCE4EC; --gris-volcanico: var(--azul-institucional); /* alias de compatibilidad */ /* Tipografía */ --fuente-titulo: 'Playfair Display', Georgia, serif; --fuente-texto: 'Inter', -apple-system, Segoe UI, sans-serif; /* Ritmo y forma */ --radio-s: 8px; --radio-m: 16px; --radio-l: 28px; --sombra-s: 0 4px 16px rgba(38,38,42,.06); --sombra-m: 0 16px 40px rgba(38,38,42,.12); --sombra-l: 0 30px 70px rgba(38,38,42,.22); --contenedor: 1240px; --dur-1: .25s; --dur-2: .5s; --dur-3: .9s; --ease: cubic-bezier(.22,.61,.36,1); } /* Modo oscuro (activado por JS añadiendo data-tema="oscuro" al ) */ html[data-tema="oscuro"]{ --fondo: #0E1524; --fondo-alterno: #131C30; --texto: #EEF2F7; --texto-suave: #AEB9CC; --superficie: #17203A; --borde: #263251; } /* ---------- 2. Reset y base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--fuente-texto); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none;margin:0;padding:0} h1,h2,h3,h4{ font-family:var(--fuente-titulo); color:var(--texto); font-weight:600; line-height:1.18; margin:0 0 .5em; letter-spacing:-.01em; } p{margin:0 0 1em;color:var(--texto-suave)} :focus-visible{outline:3px solid var(--oro);outline-offset:3px} ::selection{background:var(--oro-suave);color:var(--gris-volcanico)} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important;transition:none !important} } .contenedor{max-width:var(--contenedor);margin:0 auto;padding:0 28px} .ancho-lectura{max-width:640px} section{position:relative} .seccion{padding:110px 0} @media (max-width:720px){.seccion{padding:72px 0}} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--fuente-texto); font-size:.76rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--tierra); margin-bottom:16px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--oro)} .encabezado{max-width:680px;margin-bottom:52px} .encabezado.centro{margin-left:auto;margin-right:auto;text-align:center} .encabezado h2{font-size:clamp(1.9rem,3.6vw,2.8rem)} /* ---------- 3. Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px; border-radius:999px; font-family:var(--fuente-texto); font-weight:600;font-size:.96rem; border:1.5px solid transparent; cursor:pointer; transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); white-space:nowrap; } .btn:hover{transform:translateY(-3px)} .btn-oro{background:var(--oro);color:var(--gris-volcanico)} .btn-oro:hover{box-shadow:0 14px 30px rgba(201,162,39,.38)} .btn-linea{border-color:rgba(255,255,255,.55);color:var(--blanco);background:transparent} .btn-linea:hover{background:rgba(255,255,255,.12)} .btn-oscuro{background:var(--gris-volcanico);color:var(--blanco)} .btn-oscuro:hover{box-shadow:0 14px 30px rgba(38,38,42,.3)} .btn-fantasma{border-color:var(--borde);color:var(--texto);background:transparent} .btn-fantasma:hover{border-color:var(--tierra);color:var(--tierra)} .btn-sm{padding:10px 20px;font-size:.86rem} /* ---------- 4. Header / navegación (glass) ---------- */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; padding:20px 0; transition:padding var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .header .contenedor{display:flex;align-items:center;justify-content:space-between} .header.flotante{ padding:12px 0; background:rgba(247,249,251,.82); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:var(--sombra-s); } html[data-tema="oscuro"] .header.flotante{background:rgba(19,28,48,.82)} .marca{display:flex;align-items:center;gap:12px} .marca .emblema{width:42px;height:42px;flex:none} .emblema-marco{ width:60px;height:60px;flex:none;border-radius:50%; background:var(--blanco); box-shadow:0 3px 12px rgba(0,0,0,.25), 0 0 0 3px rgba(201,162,39,.6); display:flex;align-items:center;justify-content:center;overflow:hidden; } .emblema-marco img{width:100%;height:100%;object-fit:cover;display:block} .pie .emblema-marco{width:78px;height:78px} @media (max-width:600px){.emblema-marco{width:50px;height:50px}} .marca .texto-marca{font-family:var(--fuente-titulo);line-height:1.05;color:var(--blanco);transition:color var(--dur-2) var(--ease)} .header.flotante .texto-marca{color:var(--texto)} .marca .texto-marca strong{display:block;font-size:1.05rem} .marca .texto-marca span{display:block;font-family:var(--fuente-texto);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-suave)} .header.flotante .marca .texto-marca span{color:var(--tierra)} .nav-principal{display:flex;align-items:center;gap:4px} .nav-principal a{ padding:10px 16px;border-radius:999px; font-size:.92rem;font-weight:600; color:var(--blanco); transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .header.flotante .nav-principal a{color:var(--texto)} .nav-principal a:hover,.nav-principal a[aria-current="page"]{background:rgba(201,162,39,.16);color:var(--oro)} .header.flotante .nav-principal a:hover,.header.flotante .nav-principal a[aria-current="page"]{color:var(--tierra)} .acciones-header{display:flex;align-items:center;gap:10px} .btn-tema{ width:38px;height:38px;border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:transparent;color:var(--blanco); display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .header.flotante .btn-tema{color:var(--texto);border-color:var(--borde)} .btn-tema:hover{background:var(--oro);color:var(--gris-volcanico);border-color:var(--oro)} .btn-tema svg{width:18px;height:18px} .btn-tema .icono-luna{display:none} html[data-tema="oscuro"] .btn-tema .icono-sol{display:none} html[data-tema="oscuro"] .btn-tema .icono-luna{display:block} .btn-menu{ display:none;width:42px;height:42px;border-radius:10px; border:1.5px solid rgba(255,255,255,.5);background:transparent;color:var(--blanco); cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px; } .header.flotante .btn-menu{color:var(--texto);border-color:var(--borde)} .btn-menu span{width:18px;height:2px;background:currentColor;border-radius:2px} @media (max-width:960px){ .nav-principal{ position:fixed;inset:0 0 0 30%; background:var(--gris-volcanico); flex-direction:column;align-items:stretch;justify-content:center;gap:2px; padding:40px;transform:translateX(100%); transition:transform var(--dur-2) var(--ease); } .nav-principal.abierto{transform:translateX(0)} .nav-principal a{color:var(--blanco);font-size:1.15rem;padding:14px 18px} .btn-menu{display:flex} } /* ---------- 4b. Banner de páginas internas ---------- */ .banner-pagina{ position:relative;padding:170px 0 90px; background:linear-gradient(150deg,var(--azul-institucional),var(--azul-noche)); color:var(--blanco); overflow:hidden; } .banner-pagina::before{ content:"";position:absolute;inset:0; background:radial-gradient(60% 80% at 85% 0%, rgba(201,162,39,.18), transparent 60%); } .banner-pagina .migas{position:relative;font-size:.82rem;color:#B9C6DC;margin-bottom:14px} .banner-pagina .migas a{color:var(--oro-suave)} .banner-pagina h1{position:relative;color:var(--blanco);font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch} .banner-pagina p{position:relative;color:#D9E1EC;max-width:56ch;font-size:1.08rem;margin:0} .tira-en-construccion{ display:inline-flex;align-items:center;gap:8px; background:rgba(228,197,103,.16);border:1px solid rgba(228,197,103,.4); color:var(--oro-suave);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:8px 16px;border-radius:999px;margin-bottom:18px;position:relative; } .tira-en-construccion svg{width:14px;height:14px} .lista-planeada{margin-top:26px;display:grid;gap:12px;max-width:560px} .lista-planeada li{ display:flex;gap:12px;align-items:flex-start; padding:14px 18px;background:var(--fondo-alterno);border:1px solid var(--borde);border-radius:var(--radio-m); color:var(--texto-suave);font-size:.94rem; } .lista-planeada li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--celeste)} /* ---------- 4c. Línea de tiempo, fotos pendientes, directiva ---------- */ .linea-tiempo{position:relative;max-width:760px;margin:0 auto;padding-left:34px} .linea-tiempo::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--borde)} .hito{position:relative;padding-bottom:38px} .hito:last-child{padding-bottom:0} .hito::before{ content:"";position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%; background:var(--oro);box-shadow:0 0 0 4px var(--celeste-suave); } .hito .fecha{display:block;font-weight:700;color:var(--celeste);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px} .hito h4{font-size:1.1rem;margin:0 0 .3em} .hito p{margin:0;color:var(--texto-suave)} .marco-foto-pendiente{ position:relative;border-radius:var(--radio-m);overflow:hidden;aspect-ratio:4/3; display:flex;align-items:flex-end;color:var(--blanco); box-shadow:var(--sombra-s); } .marco-foto-pendiente .num{ position:absolute;top:16px;left:16px; background:rgba(8,13,24,.55);backdrop-filter:blur(4px); padding:6px 14px;border-radius:999px;font-weight:700;font-size:.8rem;letter-spacing:.04em; } .marco-foto-pendiente .etiqueta{position:relative;padding:16px;font-size:.86rem;background:linear-gradient(0deg,rgba(8,13,24,.75),transparent)} .malla-directiva{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:36px} .tarjeta-directiva{text-align:center} .tarjeta-directiva .foto-circular{ position:relative; width:120px;height:120px;border-radius:50%;margin:0 auto 16px; display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85); box-shadow:0 0 0 4px var(--celeste-suave); } .tarjeta-directiva .foto-circular .num{ position:absolute;bottom:-2px;right:-2px; background:var(--azul-institucional);color:var(--blanco); width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.72rem;font-weight:700;border:2px solid var(--fondo-alterno); } .tarjeta-directiva .foto-circular svg{width:34px;height:34px} .tarjeta-directiva h4{font-size:1.02rem;margin:0 0 .2em} .tarjeta-directiva span{font-size:.84rem;color:var(--texto-suave)} /* ---------- 5. Hero ---------- */ .hero{ position:relative;min-height:100vh; display:flex;align-items:center; overflow:hidden; color:var(--blanco); background: radial-gradient(130% 140% at 20% 55%, rgba(8,13,24,.82) 0%, rgba(8,13,24,.38) 45%, rgba(8,13,24,0) 74%), linear-gradient(180deg, rgba(9,14,26,.05) 0%, rgba(9,14,26,.18) 60%, var(--azul-noche) 100%), url('img/hero/plaza-iglesia-chacayan.jpg') center 62% / cover no-repeat; } .hero-capa-video{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-capa-video iframe, .hero-capa-video video{ position:absolute;top:50%;left:50%; width:177.78vh;min-width:100%;height:56.25vw;min-height:100%; transform:translate(-50%,-50%); pointer-events:none; } .hero-ilustracion{position:absolute;inset:0;z-index:0;opacity:.9} .hero-contenido{position:relative;z-index:2;padding:180px 0 120px} .hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--oro-suave);margin-bottom:22px; text-shadow:0 2px 14px rgba(0,0,0,.55); } .hero h1{ font-size:clamp(2.4rem,6vw,4.4rem); color:var(--blanco);max-width:18ch; text-shadow:0 4px 26px rgba(0,0,0,.6); } .hero .lead{ font-size:1.22rem;max-width:52ch;color:#F3F1E6; text-shadow:0 2px 16px rgba(0,0,0,.55); } .hero-acciones{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px} .hero-acciones .btn-linea{ background:rgba(8,13,24,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } position:absolute;bottom:34px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:8px; font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#D8D2BE; z-index:2; } .hero-indicador .flecha{width:16px;height:16px;border-right:2px solid var(--oro);border-bottom:2px solid var(--oro);transform:rotate(45deg)} /* ---------- 6. Tarjetas de descubrimiento (home) ---------- */ .malla-descubre{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media (max-width:1080px){.malla-descubre{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.malla-descubre{grid-template-columns:1fr}} .tarjeta-descubre{ position:relative;border-radius:var(--radio-l);overflow:hidden; aspect-ratio:3/4;color:var(--blanco); box-shadow:var(--sombra-s); transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .tarjeta-descubre:hover{transform:translateY(-8px);box-shadow:var(--sombra-l)} .tarjeta-descubre .fondo-ilustrado{position:absolute;inset:0} .tarjeta-descubre .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,20,.05) 40%,rgba(20,20,18,.86) 100%)} .tarjeta-descubre .info{position:absolute;left:0;right:0;bottom:0;padding:26px} .tarjeta-descubre .info span.num{font-family:var(--fuente-titulo);font-size:.8rem;color:var(--oro-suave);letter-spacing:.12em} .tarjeta-descubre .info h3{color:var(--blanco);font-size:1.3rem;margin:.2em 0 .3em} .tarjeta-descubre .info p{color:#E7E2D2;font-size:.88rem;margin:0} .tarjeta-descubre .flecha-mas{ position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.14);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center; transition:background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .tarjeta-descubre:hover .flecha-mas{background:var(--oro);transform:rotate(45deg)} .tarjeta-descubre .flecha-mas svg{width:16px;height:16px;color:var(--blanco)} .tarjeta-descubre:hover .flecha-mas svg{color:var(--gris-volcanico)} /* ---------- 7. Cifras / contadores ---------- */ .franja-cifras{ background:var(--gris-volcanico);color:var(--blanco); padding:80px 0; } .malla-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center} @media (max-width:760px){.malla-cifras{grid-template-columns:repeat(2,1fr)}} .cifra strong{ display:block;font-family:var(--fuente-titulo);font-size:clamp(2rem,4vw,3.2rem); color:var(--oro-suave); } .cifra span{font-size:.82rem;letter-spacing:.06em;color:#C9C4B2} /* ---------- 8. Banda CTA ---------- */ .banda-cta{ background:linear-gradient(120deg,var(--azul-institucional),var(--azul-medio)); color:var(--blanco);border-radius:var(--radio-l); padding:64px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap; box-shadow:var(--sombra-m); } .banda-cta h2{color:var(--blanco);margin-bottom:.2em} .banda-cta p{color:#EFE9D8;margin:0;max-width:46ch} /* ---------- 9. Íconos flotantes de redes ---------- */ .social-flotante{ position:fixed;right:22px;bottom:22px;z-index:90; display:flex;flex-direction:column;gap:10px; } .social-flotante a{ width:46px;height:46px;border-radius:50%; background:var(--superficie);color:var(--texto); display:flex;align-items:center;justify-content:center; box-shadow:var(--sombra-m);border:1px solid var(--borde); transition:transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .social-flotante a svg{width:20px;height:20px} .social-flotante a:hover{transform:translateY(-4px) scale(1.05);background:var(--oro);color:var(--gris-volcanico)} .social-flotante a.whatsapp:hover{background:#25D366;color:var(--blanco)} /* ---------- 10. Footer ---------- */ .pie{background:var(--gris-volcanico);color:#C9C4B2;padding:70px 0 28px} .pie .malla-pie{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:50px} @media (max-width:820px){.pie .malla-pie{grid-template-columns:1fr 1fr}} @media (max-width:520px){.pie .malla-pie{grid-template-columns:1fr}} .pie h4{color:var(--blanco);font-size:.95rem;font-family:var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1em} .pie ul li{margin-bottom:.6em} .pie a:hover{color:var(--oro-suave)} .pie .marca .texto-marca{color:var(--blanco)} .pie-inferior{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem} /* ---------- 11. Modal de video ---------- */ .modal-video{ position:fixed;inset:0;z-index:200; background:rgba(9,13,24,.9); display:none;align-items:center;justify-content:center;padding:24px; } .modal-video.abierto{display:flex} .modal-video .caja{width:100%;max-width:940px;aspect-ratio:16/9;position:relative} .modal-video iframe{width:100%;height:100%;border-radius:var(--radio-m)} .modal-video .cerrar{ position:absolute;top:-46px;right:0;background:none;border:none;color:var(--blanco); font-size:1.8rem;cursor:pointer;line-height:1; } /* ---------- 11b. Video destacado (home) ---------- */ .marco-video-destacado{ max-width:900px;margin:0 auto; aspect-ratio:16/9; border-radius:var(--radio-l); overflow:hidden; box-shadow:var(--sombra-l); border:1px solid rgba(255,255,255,.1); } .marco-video-destacado iframe{width:100%;height:100%;border:0} /* ---------- 12. Placeholder ilustrado genérico (sin fotos) ---------- */ .placeholder-img{ position:relative;overflow:hidden; background:linear-gradient(135deg,var(--azul-medio),var(--azul-noche)); } .placeholder-img.tono-celeste{background:linear-gradient(135deg,var(--celeste),var(--azul-noche))} .placeholder-img.tono-oro{background:linear-gradient(135deg,#8a6c1c,var(--azul-noche))} .placeholder-img.tono-tierra{background:linear-gradient(135deg,var(--tierra),var(--azul-noche))}