@charset "utf-8"; /* ============================================================ MÓNICA VEYRAND — Administración de Consorcios Hoja de estilos principal ============================================================ */ :root{ --violet-dark:#2D0757; --purple:#63368B; --lila:#9259AD; --lavender:#B58AC8; --lavender-soft:#D2B9DD; --primary:var(--violet-dark); --secondary:var(--lavender); --light:#F8F3FB; --text:#333333; --white:#FFFFFF; --section-padding:100px; --section-padding-sm:70px; } /* ============================================================ BASE ============================================================ */ html{ /* El scroll suave ahora lo maneja el script (misma animación en todos los navegadores); dejamos esto en auto para que no compita con esa animación manual. */ scroll-behavior:auto; } body{ font-family:'Poppins',sans-serif; color:var(--text); overflow-x:hidden; /* Espacio reservado para el encabezado fijo (franja + menú). El valor real lo calcula el script al cargar la página; este es sólo un valor de respaldo por si el script no llegó a correr. */ /* Reserva sólo el alto del menú (sin la franja superior): la franja es un extra que se ve nada más arriba del todo, y ese espacio lo reserva el propio hero (ver más abajo), no toda la página — así el resto de las secciones no arrastran un hueco vacío cuando la franja está oculta. */ padding-top:var(--navbar-h, 150px); } h1,h2,h3,h4{ font-family:'Cormorant Garamond',serif; color:var(--primary); } a{ color:var(--purple); } a:hover{ color:var(--lila); } ::selection{ background:var(--lavender-soft); color:var(--violet-dark); } /* Ritmo vertical: TODAS las secciones respetan el mismo padding. No se combina con utilidades .py-* de Bootstrap para evitar que la especificidad de la clase pise esta regla. */ section{ padding-top:var(--section-padding); padding-bottom:var(--section-padding); } .bg-soft{ background:var(--light); } /* ============================================================ TÍTULOS DE SECCIÓN ============================================================ */ .section-title{ margin-bottom:56px; } .section-title h2{ font-size:2.6rem; } /* Separador gráfico (imagen), siempre centrado debajo del título sin importar el ancho del texto ni la alineación de la sección. */ .title-separator{ display:block; width:250px; max-width:70%; height:auto; margin:20px auto 0; } /* ============================================================ PRE-ENCABEZADO (franja superior con datos + tagline) Se oculta al bajar y reaparece al subir; el menú principal sigue siempre fijo. Ver script al final del HTML. ============================================================ */ /* El encabezado ahora es "fixed": no ocupa espacio dentro del flujo normal de la página. Antes era "sticky" (ocupa su lugar en el documento); al abrir/cerrar la franja superior, ese lugar cambiaba de tamaño y empujaba literalmente el resto de la página hacia abajo y hacia arriba — eso era el "salto"/temblor que se veía al scrollear con la rueda del mouse. Al sacarlo del flujo, mostrar u ocultar la franja ya no mueve ni un píxel el contenido de abajo: sólo cambia el propio encabezado. El espacio que el encabezado necesita se reserva aparte, en el (ver más abajo), con la altura máxima (franja + menú) para que nunca tape contenido. ============================================================ */ .site-header{ position:fixed; top:0; left:0; width:100%; z-index:1030; } .top-bar{ background:var(--violet-dark); color:rgba(255,255,255,.85); font-size:.85rem; padding:9px 0; overflow:hidden; max-height:60px; opacity:1; transition:max-height .35s ease, padding .35s ease, opacity .25s ease; } .top-bar a{ color:rgba(255,255,255,.85); text-decoration:none; } .top-bar a:hover{ color:var(--lavender-soft); } .top-bar-tagline{ font-weight:500; letter-spacing:.01em; } .site-header.hide-topbar .top-bar{ max-height:0; padding-top:0; padding-bottom:0; opacity:0; } /* ============================================================ NAVBAR ============================================================ */ .navbar{ background:rgba(255,255,255,.92); backdrop-filter:blur(10px); transition:all .3s ease; padding-top:10px; padding-bottom:10px; } .navbar.scrolled{ box-shadow:0 5px 20px rgba(0,0,0,.08); background:#fff; } .navbar-brand{ padding:0; height:auto; } .navbar-brand img{ height:120px; width:auto; } @media(min-width:992px){ .navbar-brand{ margin-left:32px; } } @media(max-width:768px){ .navbar-brand img{ height:80px; } } .navbar-nav .nav-link{ color:var(--violet-dark); font-weight:500; margin:0 4px; padding:8px 20px !important; border-radius:50px; border:2px solid transparent; transition:border-color .25s ease, color .25s ease; } .navbar-nav .nav-link:hover{ border-color:var(--purple); color:var(--purple); } .navbar-nav .nav-link.active{ border-color:var(--purple); color:var(--purple); } .navbar-collapse{ transition:.3s; } @media(max-width:991px){ .navbar-collapse{ background:#fff; margin-top:15px; border-radius:16px; padding:15px; box-shadow:0 10px 25px rgba(0,0,0,.08); } } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; overflow:hidden; display:flex; align-items:center; padding-top:calc(90px + var(--topbar-h, 60px)); padding-bottom:90px; background:linear-gradient(135deg,#ffffff 0%,#faf6fd 50%,#f5effb 100%); } /* El contenido va por encima de las ondas decorativas de fondo */ .hero > .container{ position:relative; z-index:1; } /* Ondas decorativas de fondo, inspiradas en las curvas de la tarjeta de presentación de la marca. Son puramente decorativas: no deben interceptar clics ni el hover de los botones. */ .hero-wave{ position:absolute; pointer-events:none; z-index:0; } .hero-wave-tl{ top:-40px; left:-60px; width:420px; height:auto; } .hero-wave-br{ bottom:-60px; right:-80px; width:480px; height:auto; } .hero h1{ font-size:4rem; line-height:1.1; } /* Pequeño antetítulo, en el mismo espíritu cursivo/elegante que el "Mónica" del isologo. Con margen ajustado para que el agregado no empuje el H1 ni el logo más abajo de donde estaban. */ .hero-pretitle{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:1.35rem; letter-spacing:.04em; color:var(--primary); margin-bottom:2px; } .hero p{ font-size:1.15rem; max-width:550px; } .hero-logo{ width:100%; max-width:460px; height:auto; animation:floatLogo 5s ease-in-out infinite; filter:drop-shadow(0 15px 30px rgba(77,31,114,.15)); /* Forzar renderizado por GPU para que la animación no se "pegue" */ will-change:transform; backface-visibility:hidden; } @media(min-width:992px){ /* Sube un poco el bloque de texto sin afectar al logo, que se mantiene centrado en la fila (su altura sigue marcando el centro vertical del hero). */ .hero-content{ margin-top:-28px; } } /* A partir de acá el hero pasa a una sola columna (el logo queda debajo del texto), así que las ondas decorativas se ven demasiado grandes si mantienen el tamaño de escritorio — achicamos ambas para que acompañen sin comerse el contenido apilado. */ @media(max-width:992px){ .hero-wave-tl{ width:260px; } .hero-wave-br{ width:300px; } } @keyframes floatLogo{ 0% { transform:translate3d(0, 0, 0); } 50% { transform:translate3d(0, -12px, 0); } 100% { transform:translate3d(0, 0, 0); } } /* ============================================================ BOTONES ============================================================ */ .btn-main{ background:linear-gradient(135deg,var(--violet-dark),var(--purple)); border:none; color:#fff; padding:14px 30px; border-radius:50px; font-weight:500; transition:all .3s ease; } .btn-main:hover{ background:linear-gradient(135deg,var(--purple),var(--violet-dark)); color:#fff; transform:translateY(-2px); box-shadow:0 10px 25px rgba(77,31,114,.25); } .btn-outline-main{ border:2px solid var(--purple); color:var(--purple); border-radius:50px; padding:12px 28px; font-weight:500; transition:all .3s ease; } .btn-outline-main:hover{ background:var(--purple); border-color:var(--purple); color:#fff; transform:translateY(-2px); } /* ============================================================ QUIÉNES SOMOS ============================================================ */ .building-showcase img{ box-shadow:0 20px 50px rgba(45,7,87,.18); } .building-showcase .lead{ color:var(--violet-dark); } .building-showcase .section-title{ text-align:center; margin-bottom:40px; } /* ============================================================ SERVICIOS ============================================================ */ .service-card{ border:none; border-radius:24px; background:#fff; padding:34px 30px; height:100%; text-align:center; transition:all .35s ease; box-shadow:0 8px 25px rgba(45,7,87,.07); } .service-card:hover{ transform:translateY(-10px); box-shadow:0 15px 40px rgba(77,31,114,.15); } .service-icon{ width:64px; height:64px; margin-left:auto; margin-right:auto; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--light); font-size:1.7rem; color:var(--lila); position:relative; } .service-icon::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--lavender-soft); opacity:0; transition:opacity .3s ease, transform .3s ease; transform:scale(.85); } .service-card:hover .service-icon::after{ opacity:1; transform:scale(1); } .service-card h4{ font-size:1.6rem; font-weight:600; margin-bottom:12px; } /* ============================================================ BANDA DE ESTADÍSTICAS (con imagen de fondo) ============================================================ */ .stats-banner{ position:relative; overflow:hidden; color:#fff; background: linear-gradient(135deg,rgba(45,7,87,.90),rgba(99,54,139,.82)), url('../img/stats-banner.svg') center/cover no-repeat fixed; } /* Transiciones curvas de entrada/salida, mismo recurso que ya usa el footer: evitan el corte recto entre la banda oscura y las secciones claras de alrededor. Van pegadas al borde de ADENTRO de la sección (no superpuestas hacia afuera), pintadas con el color de la sección vecina, para que se vea como si ese color se metiera un poco. */ .stats-wave{ position:absolute; left:0; width:100%; height:auto; line-height:0; z-index:1; pointer-events:none; } .stats-wave svg{ display:block; width:100%; height:50px; } .stats-wave-top{ top:0; } .stats-wave-bottom{ bottom:0; transform:scaleY(-1); } .stats-banner h2, .stats-banner h3{ color:#fff; } .stat-item h3{ font-family:'Poppins',sans-serif; font-size:3rem; font-weight:700; letter-spacing:.01em; margin-bottom:6px; } .stat-item p{ color:var(--lavender-soft); margin-bottom:0; font-size:1.1rem; } @media(max-width:768px){ .stats-banner{ background-attachment:scroll; } } /* ============================================================ TARJETAS DE CONTACTO / ATENCIÓN (usadas en "Siempre cerca de ti" y en "Contacto") ============================================================ */ .contact-card{ border:none; border-radius:20px; padding:28px; height:100%; background-color:rgba(146,89,173,.06); border-left:4px solid var(--lavender); box-shadow:0 5px 20px rgba(45,7,87,.06); transition:background-color .4s ease, transform .4s ease, box-shadow .4s ease; } .contact-card:hover{ background-color:#ffffff; transform:translateY(-6px); box-shadow:0 15px 40px rgba(77,31,114,.15); } .contact-card h4, .contact-card h5{ color:var(--purple); } .contact-card p{ color:var(--text); } /* La tarjeta puede ser un (para que todo el bloque sea clickeable); quitamos el subrayado/color de enlace por defecto. */ a.contact-card, a.contact-card:hover{ text-decoration:none; color:inherit; } .contact-card.text-center .contact-icon-badge{ width:72px; height:72px; margin:0 auto; border-radius:50%; background:var(--light); color:var(--lila); display:flex; align-items:center; justify-content:center; font-size:1.9rem; transition:background-color .3s ease, color .3s ease; } .contact-card.text-center:hover .contact-icon-badge{ background:var(--lila); color:#fff; } /* Evita que los correos largos bajen de renglón dentro de la tarjeta */ .contact-email{ /* Nunca se corta: si no entra en una línea, baja a la siguiente. Antes usábamos "nowrap" + puntos suspensivos y a partir de cierto ancho de pantalla el correo quedaba truncado. */ font-size:clamp(.8rem, 1.8vw, .95rem); white-space:normal; overflow-wrap:break-word; word-break:break-word; line-height:1.35; } /* Ícono/imagen de referencia a la izquierda de cada tarjeta en "Siempre cerca de ti" */ .care-icon{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:var(--light); color:var(--lila); display:flex; align-items:center; justify-content:center; font-size:1.7rem; } .section-intro{ max-width:640px; margin:0 auto 48px; color:var(--text); } /* "Siempre cerca de ti": el título tenía demasiado aire antes de la bajada, y la bajada quedaba pegada a las tarjetas. Reordenamos ese espacio. */ #siempre-cerca .section-title{ margin-bottom:18px; } /* ============================================================ FOOTER ============================================================ */ footer{ position:relative; background:var(--violet-dark); color:rgba(255,255,255,.85); padding-top:70px; padding-bottom:0; overflow:hidden; } /* Onda decorativa: el color de la sección de arriba "entrando" un poco al footer, en línea con las curvas de la tarjeta de presentación de la marca. */ .footer-wave{ position:absolute; top:0; left:0; width:100%; height:auto; line-height:0; z-index:1; pointer-events:none; } .footer-wave svg{ display:block; width:100%; height:50px; } footer h4, footer h5{ color:#fff; } footer h4{ font-size:1.6rem; } footer h5{ font-size:1.05rem; letter-spacing:.02em; margin-bottom:18px; } footer p{ color:rgba(255,255,255,.75); } footer a{ color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s ease; } footer a:hover{ color:var(--lavender-soft); } .footer-links{ list-style:none; padding:0; margin:0; } .footer-links li{ margin-bottom:10px; } .footer-contact p{ margin-bottom:12px; display:flex; gap:10px; align-items:flex-start; } .footer-contact i{ color:var(--lavender); margin-top:3px; } .footer-social{ display:flex; flex-direction:row; align-items:center; gap:12px; margin-top:22px; } .footer-social a{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:1.1rem; } .footer-social a:hover{ background:var(--purple); color:#fff; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:50px; padding:22px 0; font-size:.9rem; color:rgba(255,255,255,.6); text-align:center; } /* ============================================================ BOTÓN FLOTANTE DE WHATSAPP ============================================================ */ .whatsapp-float{ position:fixed; bottom:25px; right:25px; width:60px; height:60px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.85rem; z-index:9999; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.20); animation:pulseWhatsapp 2.5s infinite; } /* El ícono debe quedar siempre blanco: sin esta regla, la regla global "a:hover" (más específica que .whatsapp-float sola) le pintaba el ícono de color lila al pasar el mouse. */ .whatsapp-float:hover{ color:#fff; } @keyframes pulseWhatsapp{ 0%{transform:scale(1);} 50%{transform:scale(1.08);} 100%{transform:scale(1);} } /* ============================================================ BOTÓN "VOLVER ARRIBA" Sutil (blanco, con el violeta de marca) y animado: aparece con un fade + pequeño desplazamiento al scrollear, en vez de saltar de golpe. ============================================================ */ .back-to-top{ position:fixed; bottom:97px; right:25px; width:60px; height:60px; border-radius:50%; border:1px solid var(--lavender-soft); background:#fff; color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:1.4rem; z-index:9998; box-shadow:0 8px 20px rgba(45,7,87,.15); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease, background .25s ease, color .25s ease, visibility .3s; } .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{ background:var(--purple); color:#fff; border-color:var(--purple); } @media(max-width:768px){ .back-to-top{ bottom:87px; right:25px; width:52px; height:52px; font-size:1.25rem; } } /* ============================================================ ACCESIBILIDAD ============================================================ */ a:focus-visible, button:focus-visible{ outline:3px solid var(--lila); outline-offset:2px; } @media(prefers-reduced-motion:reduce){ .whatsapp-float{animation:none;} } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:768px){ section{ padding-top:var(--section-padding-sm); padding-bottom:var(--section-padding-sm); } } @media(max-width:992px){ .hero{ text-align:center; padding-top:calc(60px + var(--topbar-h, 60px)); padding-bottom:60px; } /* El contenedor de los botones es "flex", así que el text-align: center de arriba no lo alcanza (los flex-items se alinean con justify-content, no con text-align). Por eso quedaban pegados a la izquierda en tablet aunque el resto del texto sí se veía centrado. */ .hero-cta{ justify-content:center; } .hero h1{ font-size:3.2rem; } .hero p{ margin-left:auto; margin-right:auto; } .hero-logo{ max-width:320px; margin-top:40px; } .hero-pretitle{ font-size:1.15rem; } .section-title{ margin-bottom:40px; } } @media(max-width:768px){ .hero h1{ font-size:2.5rem; line-height:1.15; } .hero p{ font-size:1rem; } .hero-logo{ max-width:230px; margin-top:35px; } .display-5, .section-title h2{ font-size:2rem; } .btn-main, .btn-outline-main{ width:100%; } .service-card, .contact-card{ padding:25px; } .stat-item{ margin-bottom:24px; } .stat-item h3{ font-size:2.3rem; } .whatsapp-float{ width:52px; height:52px; font-size:1.6rem; } footer{ text-align:center; padding-top:50px; } .footer-contact p{ justify-content:center; } .footer-social{ justify-content:center; display:flex; } } @media(max-width:480px){ .hero h1{ font-size:2rem; } .hero p{ font-size:.95rem; } .service-card, .contact-card{ padding:20px; } .hero{ padding-top:calc(50px + var(--topbar-h, 60px)); padding-bottom:50px; } .contact-card.d-flex{ flex-direction:column; text-align:center; } .care-icon{ margin:0 auto 14px; } }