/* ========================================= Emprender en Comunidad – style.css (full) ========================================= */ /* ---------- Variables & Fonts ---------- */ :root{ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --main:#e6007e; /* brand */ --main-2:#ff2aa1; /* gradiente */ --dark:#1f1f28; --muted:#6b6b78; --bg:#fff; --light:#f7f7fb; --radius:16px; /* paleta rosa extra (efectos) */ --pink-50:#fff0f7; --pink-100:#ffd9ef; --pink-200:#ffb3d7; --pink-300:#ff8cc9; --pink-400:#ff58b5; --pink-500:#ff2aa1; --pink-600:#e6007e; --pink-700:#b80062; } /* ---------- Base ---------- */ *{box-sizing:border-box} html,body{height:100%} body{ font-family:var(--font-body); color:var(--dark); background:var(--bg); } h1,h2,h3,.section-title{ font-family:var(--font-heading); letter-spacing:.2px; } a{color:var(--main)} a:hover{color:#b80062} .navbar-brand img{height:40px} .badge-main{background:rgba(230,0,126,.1); color:var(--main)} /* ---------- Fondo general rosado sutil (opcional: ) ---------- */ .bg-soft-pink{ background-color:#fff6fb; background-image: radial-gradient(1100px 50% at 12% -12%, #ffe7f3 0%, transparent 60%), radial-gradient(900px 48% at 88% -10%, #ffe1f0 0%, transparent 60%), linear-gradient(180deg, #fff6fb 0%, #ffffff 140%); background-attachment: fixed, fixed, fixed; } /* ---------- Botones ---------- */ .btn{ border-radius:12px; } .btn-main{ background:linear-gradient(135deg, var(--pink-500), var(--pink-600)); color:#fff; border:0; box-shadow:0 10px 24px rgba(230,0,126,.28); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; padding:.48rem .9rem; font-size:.95rem; } .btn-main:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 14px 30px rgba(230,0,126,.33); } .btn-main:active{ transform:translateY(0); } .btn-light{ background:#fff; border:1px solid rgba(0,0,0,.08); color:#333; } .btn-light:hover{ border-color:rgba(0,0,0,.12); } /* ---------- Hero superior ---------- */ .hero{ position:relative; color:#fff; min-height:72vh; display:flex; align-items:center; background:url('assets/hero.jpg') center/cover no-repeat; clip-path:ellipse(85% 100% at 50% 0%); } .hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(1000px 60% at 15% -20%, rgba(255,140,201,.55), transparent 60%), radial-gradient(900px 55% at 85% -10%, rgba(255,88,181,.50), transparent 60%), linear-gradient(180deg, rgba(230,0,126,.62), rgba(230,0,126,.48) 55%, rgba(230,0,126,.38) 100%); } .hero::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='%23fff'/%3E%3Ccircle cx='5' cy='8' r='1' fill='%23e6007e' fill-opacity='.06'/%3E%3Ccircle cx='42' cy='42' r='1' fill='%23e6007e' fill-opacity='.06'/%3E%3Ccircle cx='120' cy='24' r='1' fill='%23e6007e' fill-opacity='.06'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; opacity:.5; clip-path:ellipse(85% 100% at 50% 0%); } .hero .content{position:relative; z-index:3; padding:4rem 0;} /* Partículas (mezcla normal para que las líneas se vean) */ #particles-js{ position:absolute; inset:0; z-index:1; clip-path:ellipse(85% 100% at 50% 0%); opacity:.45; /* un toque más visibles */ mix-blend-mode:normal; /* clave: no las aclara */ pointer-events:auto; } #particles-js canvas{ background-color:transparent!important; filter:none!important; } @media (max-width: 767.98px){ #particles-js{ pointer-events:none; } } /* Hero compact */ .hero--compact{ min-height:48vh; clip-path:ellipse(85% 85% at 50% 0%); } .hero--compact .content{ padding:2.5rem 0; } .hero--compact #particles-js{ clip-path:ellipse(85% 85% at 50% 0%); } @media (max-width:576px){ .hero--compact{ min-height:40vh; } .hero--compact .content{ padding:2rem 0; } } /* Título más arriba + efecto shine */ .hero--lift .content{ padding-top:.5rem; padding-bottom:2.5rem; } @media (min-width:992px){ .hero--lift .content{ padding-top:.25rem; } } .kicker{letter-spacing:.12em; text-transform:uppercase; font-weight:700} .hero .kicker{ color:#ffe3f2; letter-spacing:.14em; font-size:.78rem; opacity:.95; } .hero-title{ line-height:1.08; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.12); animation:heroFloatUp .75s ease-out both; } .hero-title .shine{ display:inline-block; background: linear-gradient(90deg, #fff 0%, #ffe6f3 25%, #fff 50%, #ffe6f3 75%, #fff 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shineSweep 3.2s linear infinite; } .hero .display-5{ font-size:clamp(1.6rem, 3.2vw, 2.25rem); } .hero .lead{ font-size:clamp(.95rem,1.4vw,1.05rem); opacity:.95; animation:heroFloatUp .85s ease-out .05s both; } .hero .btn{ animation:heroFloatUp .9s ease-out .10s both; } @keyframes shineSweep{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } @keyframes heroFloatUp{ from{transform:translateY(16px); opacity:0} to{transform:translateY(0); opacity:1} } /* ---------- Barra de búsqueda debajo del hero ---------- */ .search-hero{ max-width:980px; margin:18px auto 0; background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(6px); border-radius:16px; box-shadow:0 8px 26px rgba(230,0,126,.12), 0 1px 0 rgba(230,0,126,.06) inset; padding:.6rem; border:1.5px solid #ffd1ea; } .search-hero .form-control, .search-hero .form-select{ height:44px; border:1.5px solid #ffd1ea; background:#fff; border-radius:12px; box-shadow:none; } .search-hero .form-control:focus, .search-hero .form-select:focus{ border-color:#ff8cc9; box-shadow:0 0 0 .18rem rgba(230,0,126,.14); } .search-hero .btn{ height:44px; } /* ---------- Secciones / tarjetas ---------- */ .section{padding:4rem 0} .section-title{ font-weight:800; position:relative; display:inline-block; padding-bottom:.25rem; } .section-title::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:4px; background:linear-gradient(90deg, var(--pink-200), var(--main)); border-radius:999px; opacity:.35; } .card, .card-ghost{ background:#fff; } .card-ghost{ border:2px solid transparent; border-radius:var(--radius); transition:.25s; box-shadow:0 10px 30px rgba(30,30,60,.04); } .card-ghost:hover{ border-color:rgba(230,0,126,.28); transform:translateY(-3px); } .icon-bubble{ width:48px; height:48px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(230,0,126,.12); color:var(--main); margin-right:.5rem; } /* ---------- Footer ---------- */ footer{background:#faf9fb; color:#7b7b86} footer a{text-decoration:none} /* ---------- Imagen de servicio con efecto ---------- */ .service-card img{transition:transform .4s ease, filter .3s ease; filter:grayscale(40%) contrast(1.08); } .service-card:hover img{transform:scale(1.04); filter:none} /* ---------- WhatsApp FAB ---------- */ .whatsapp-fab{ position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:26px; text-decoration:none; box-shadow:0 12px 24px rgba(0,0,0,.15); z-index:1080; } /* ---------- Carrusel del Home ---------- */ #homeCarousel{ border-radius:var(--radius); overflow:hidden; } #homeCarousel .carousel-item{ min-height:clamp(260px, 44vw, 460px); } .banner-slide{ position:relative; min-height:clamp(260px, 44vw, 460px); background-size:cover; background-position:center; } .banner-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15)); } .banner-overlay .inner{ color:#fff; padding:22px 28px; max-width:620px; } .banner-overlay .badge{ backdrop-filter:blur(2px); background:rgba(255,255,255,.25); } #homeCarousel .carousel-indicators [data-bs-target]{ width:9px; height:9px; border-radius:999px; background:#fff; opacity:.65; } #homeCarousel .carousel-indicators .active{ opacity:1; } #homeCarousel .carousel-control-prev-icon, #homeCarousel .carousel-control-next-icon{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); } /* ---------- Tablas / alerts ---------- */ .table-clean tbody tr td, .table-clean thead th{vertical-align:middle} .alert-soft{background:#fff0f7; color:#6b0040; border-color:#ffd1ea} /* ---------- Grid / Lista catálogo ---------- */ .grid{display:grid; gap:16px; grid-template-columns:repeat(1,1fr)} @media(min-width:768px){ .grid{ grid-template-columns:repeat(3,1fr)} } .list-container{display:flex; flex-direction:column; gap:12px} .list-item{display:flex; gap:14px; align-items:stretch; text-decoration:none; color:inherit} .list-thumb{width:140px; height:100px; object-fit:cover; border-top-left-radius:16px; border-bottom-left-radius:16px} .list-body{padding:12px 14px} .view-toggle .btn.active{background:var(--main); color:#fff; border-color:var(--main)} .pagination .page-link{color:var(--dark)} .pagination .active .page-link{background:var(--main); border-color:var(--main); color:#fff} /* ======================================================= Header Glass + Efectos (navbar con scroll y progreso) ======================================================= */ .site-header{ position:sticky; top:0; z-index:1080; } #scrollbar-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, #ffb3d7, var(--main)); box-shadow:0 0 12px rgba(230,0,126,.35); z-index:2000; transition:width .15s ease-out; } .nav-glass{ background:rgba(255,255,255,.72); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid rgba(230,0,126,.18); transition:background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease; animation:navReveal .5s ease both; position:relative; } @keyframes navReveal{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} } .nav-glass::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg, var(--pink-100), var(--main)); opacity:.6; } .nav-glass.is-scrolled{ background:#fff; border-bottom-color:rgba(0,0,0,.06); box-shadow:0 12px 28px rgba(0,0,0,.08); } /* Links del menú */ .navbar .nav-link{ position:relative; font-weight:500; color:var(--dark); } .navbar .nav-link:hover{ color:var(--main); } .navbar .nav-link.active{ color:var(--main); } .navbar .nav-link.active::after{ content:""; position:absolute; left:.6rem; right:.6rem; bottom:-.35rem; height:3px; background:linear-gradient(90deg, var(--pink-300), var(--main)); border-radius:99px; } /* CTA del navbar */ .btn-nav-main{ box-shadow:0 10px 24px rgba(230,0,126,.25); border-radius:14px; } .btn-nav-main:hover{ box-shadow:0 14px 30px rgba(230,0,126,.35); transform:translateY(-1px); } .btn-nav-main:active{ transform:none; } /* Icono hamburguesa visible */ .navbar .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }