Preview de mixed.css
/* MIXED CSS PACK */
/* Template: quiñonesconstrucciones.com.ar/index.html */
/* Template mtime: 2026-04-08 11:32:23 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
--accent:#497474;
--accent-2:#497474;
--accent-light:rgba(73,116,116,.08);
--accent-glow:rgba(73,116,116,.15);
--bg:#f7f4ef;
--surface:#ffffff;
--text:#1f1f1f;
--muted:#5a5a5a;
--line:rgba(0,0,0,.06);
--footer:#497474;
--shadow-sm:0 4px 20px rgba(0,0,0,.04);
--shadow:0 24px 48px rgba(0,0,0,.08);
--shadow-lg:0 32px 64px rgba(0,0,0,.10);
--shadow-accent:0 20px 40px rgba(73,116,116,.20);
--radius:24px;
--radius-sm:16px;
--radius-xs:12px;
--nav-h:90px;
--font-display:'Playfair Display', Georgia, serif;
--font-body:'DM Sans', system-ui, sans-serif;
--transition-fast:.2s cubic-bezier(.4,0,.2,1);
--transition:.4s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
color:var(--text);
background:var(--bg);
overflow-x:hidden;
line-height:1.7;
font-size:16px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Fondo sutil con textura */
body::before{
content:'';
position:fixed;
top:0;left:0;right:0;bottom:0;
background:
radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-glow), transparent),
linear-gradient(180deg, #fcfbf8 0%, var(--bg) 50%, #f0ebe3 100%);
z-index:-2;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;transition:color var(--transition-fast)}
html, body{
max-width:100%;
overflow-x:clip;
}
body{
width:100%;
}
.navbar,
.navbar .container-custom,
.navbar-collapse,
.navbar-nav,
.hero,
.section,
.site-footer{
max-width:100%;
}
.container-custom{
width:min(1200px, calc(100% - 48px));
margin-inline:auto;
}
/* Secciones */
.section{
padding:120px 0;
position:relative;
}
/* Eyebrow badge premium */
.eyebrow{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:.6rem 1.2rem;
border-radius:100px;
background:linear-gradient(135deg, var(--accent-light), rgba(176,109,44,.04));
border:1px solid rgba(176,109,44,.12);
color:var(--accent-2);
font-size:.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.14em;
margin-bottom:1.5rem;
backdrop-filter:blur(8px);
}
.eyebrow::before{
content:'';
width:6px;height:6px;
background:var(--accent);
border-radius:50%;
animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{opacity:.4;transform:scale(1)}
50%{opacity:1;transform:scale(1.2)}
}
/* Títulos con tipografía editorial */
.section-title{
font-family:var(--font-display);
font-size:clamp(2.2rem, 4.5vw, 3.5rem);
line-height:1.1;
font-weight:700;
margin:0 0 1rem;
letter-spacing:-.02em;
color:var(--text);
}
.section-title span{
background:linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.section-subtitle{
font-size:1.1rem;
color:var(--muted);
max-width:640px;
margin:0 auto;
line-height:1.8;
}
/* ========== NAVBAR PREMIUM ========== */
.navbar{
min-height:var(--nav-h);
background:rgba(255,255,255,.75);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid rgba(0,0,0,.04);
transition:all var(--transition);
}
.navbar.scrolled{
background:rgba(255,255,255,.95);
box-shadow:var(--shadow-sm);
}
.navbar .container-custom{
display:flex;
align-items:center;
justify-content:space-between;
min-height:var(--nav-h);
position:relative;
gap:16px;
}
.navbar-brand{
display:flex;
align-items:center;
gap:1rem;
color:var(--text);
font-weight:700;
transition:transform var(--transition-fast);
}
.navbar-brand:hover{transform:scale(1.02)}
.navbar-brand img{
height:48px;
width:auto;
transition:transform var(--transition);
}
.navbar-brand span{
font-family:var(--font-display);
font-size:.95rem;
line-height:1.2;
letter-spacing:.02em;
max-width:100%;
}
.navbar-toggler{
border:none;
background:var(--accent-light);
padding:.65rem .85rem;
border-radius:var(--radius-xs);
transition:all var(--transition-fast);
margin-left:auto;
flex-shrink:0;
}
.navbar-toggler-icon{
display:block;
width:1.5rem;
height:1.5rem;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831,31,31,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-repeat:no-repeat;
background-position:center;
background-size:100%;
}
.navbar-toggler:hover{background:var(--accent-glow)}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--accent);outline-offset:2px}
.nav-link{
color:var(--text);
font-weight:600;
font-size:.9rem;
padding:1rem 1.1rem !important;
position:relative;
letter-spacing:.01em;
}
.nav-link::after{
content:'';
position:absolute;
bottom:.6rem;
left:50%;
width:0;
height:2px;
background:linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius:2px;
transition:all var(--transition-fast);
transform:translateX(-50%);
}
.nav-link:hover::after,.nav-link:focus::after{width:calc(100% - 2.2rem)}
.nav-link:hover,.nav-link:focus{color:var(--accent)}
/* ========== BOTONES PREMIUM ========== */
.btn-main,.btn-outline-main{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
min-height:56px;
padding:1rem 2rem;
border-radius:100px;
font-weight:700;
font-size:.95rem;
letter-spacing:.02em;
transition:all var(--transition);
cursor:pointer;
border:none;
}
.btn-main{
color:#fff;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
box-shadow:var(--shadow-accent);
position:relative;
overflow:hidden;
}
.btn-main::before{
content:'';
position:absolute;
top:0;left:-100%;
width:100%;height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
transition:left .5s ease;
}
.btn-main:hover::before{left:100%}
.btn-main:hover{
transform:translateY(-3px);
box-shadow:0 28px 50px rgba(176,109,44,.3);
color:#fff;
}
.btn-outline-main{
color:var(--accent-2);
background:rgba(255,255,255,.9);
border:2px solid rgba(176,109,44,.2);
backdrop-filter:blur(10px);
}
.btn-outline-main:hover{
background:var(--surface);
border-color:var(--accent);
color:var(--accent);
transform:translateY(-2px);
box-shadow:var(--shadow);
}
/* ========== HERO SECTION ========== */
.hero{
padding-top:calc(var(--nav-h) + 60px);
padding-bottom:100px;
min-height:100vh;
display:flex;
align-items:center;
}
.hero-copy{
animation:fadeInUp .8s ease-out;
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}
.hero-copy p{
font-size:1.15rem;
color:var(--muted);
margin-bottom:1.2rem;
line-height:1.85;
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-top:2.5rem;
}
.hero-media{
position:relative;
animation:fadeInRight .8s ease-out .2s both;
}
@keyframes fadeInRight{
from{opacity:0;transform:translateX(40px)}
to{opacity:1;transform:translateX(0)}
}
.hero-media-inner{
position:relative;
min-height:540px;
border-radius:32px;
overflow:hidden;
background:linear-gradient(145deg, #f5efe5, #ebe5da);
box-shadow:var(--shadow-lg);
padding:12px;
}
/* Decorador flotante */
.hero-media::before{
content:'';
position:absolute;
top:-20px;right:-20px;
width:120px;height:120px;
background:linear-gradient(135deg, var(--accent-glow), transparent);
border-radius:50%;
filter:blur(40px);
z-index:-1;
}
.hero-media::after{
content:'';
position:absolute;
bottom:-30px;left:-30px;
width:160px;height:160px;
background:linear-gradient(135deg, rgba(141,84,32,.1), transparent);
border-radius:50%;
filter:blur(50px);
z-index:-1;
}
.hero-media img{
width:100%;
height:100%;
object-fit:cover;
border-radius:24px;
}
.hero-badge{
position:absolute;
left:24px;
right:24px;
bottom:24px;
background:rgba(255,255,255,.95);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8);
border-radius:20px;
padding:1.25rem 1.5rem;
box-shadow:0 16px 32px rgba(0,0,0,.1);
animation:slideUp .6s ease-out .5s both;
}
@keyframes slideUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.hero-badge strong{
display:block;
font-size:1.05rem;
font-weight:700;
margin-bottom:.3rem;
color:var(--text);
}
.hero-badge span{
font-size:.95rem;
color:var(--muted);
line-height:1.6;
}
/* ========== ABOUT SECTION ========== */
.about-card{
background:rgba(255,255,255,.9);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:48px;
position:relative;
overflow:hidden;
}
.about-card::before{
content:'';
position:absolute;
top:0;left:0;
width:100%;height:4px;
background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
background-size:200% 100%;
animation:gradientMove 3s ease infinite;
}
@keyframes gradientMove{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
.about-card p{
font-size:1.1rem;
color:var(--muted);
line-height:1.9;
margin-bottom:1.5rem;
}
.about-card p:last-child{margin-bottom:0}
/* ========== SERVICE CARDS ========== */
.services-grid{margin-top:1rem}
.service-card{
height:100%;
background:rgba(255,255,255,.85);
backdrop-filter:blur(16px);
border:1px solid rgba(0,0,0,.04);
border-radius:var(--radius);
padding:36px 32px;
box-shadow:var(--shadow-sm);
transition:all var(--transition);
position:relative;
overflow:hidden;
}
.service-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:0;
background:linear-gradient(180deg, var(--accent-light), transparent);
transition:height var(--transition);
}
.service-card:hover::before{height:100%}
.service-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow);
border-color:rgba(176,109,44,.15);
}
.service-card .icon-badge{
width:64px;
height:64px;
border-radius:20px;
background:linear-gradient(135deg, var(--accent-light), rgba(176,109,44,.05));
border:1px solid rgba(176,109,44,.1);
color:var(--accent-2);
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:1.5rem;
font-family:var(--font-display);
font-size:1.1rem;
font-weight:700;
position:relative;
z-index:1;
transition:all var(--transition);
}
.service-card:hover .icon-badge{
background:linear-gradient(135deg, var(--accent), var(--accent-2));
color:#fff;
transform:scale(1.05);
}
.service-card h3{
font-family:var(--font-display);
font-size:1.25rem;
font-weight:700;
margin-bottom:.8rem;
color:var(--text);
position:relative;
z-index:1;
}
.service-card p{
margin:0;
color:var(--muted);
line-height:1.7;
position:relative;
z-index:1;
}
/* ========== REASON CARDS ========== */
.reason-card{
height:100%;
background:rgba(255,255,255,.9);
backdrop-filter:blur(16px);
border:1px solid rgba(0,0,0,.04);
border-radius:var(--radius);
padding:36px 28px;
box-shadow:var(--shadow-sm);
text-align:center;
transition:all var(--transition);
position:relative;
}
.reason-card::after{
content:'';
position:absolute;
inset:0;
border-radius:var(--radius);
padding:2px;
background:linear-gradient(135deg, transparent 40%, var(--accent-glow));
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:opacity var(--transition);
}
.reason-card:hover::after{opacity:1}
.reason-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow);
}
.reason-card .icon-badge{
width:72px;
height:72px;
border-radius:50%;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:1.5rem;
font-size:1.5rem;
box-shadow:var(--shadow-accent);
transition:transform var(--transition);
}
.reason-card:hover .icon-badge{transform:scale(1.1) rotate(5deg)}
.reason-card h3{
font-family:var(--font-display);
font-size:1.2rem;
font-weight:700;
margin-bottom:.7rem;
color:var(--text);
}
.reason-card p{
margin:0;
color:var(--muted);
font-size:.95rem;
line-height:1.7;
}
/* ========== GALERÍA (sin cambios) ========== */
.gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
.gal-frame{
height:clamp(220px,48vh,500px);
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,.12);
display:flex;
align-items:center;
justify-content:center;
padding:8px;
}
.gal-img{
width:auto !important;
max-width:100%;
height:auto !important;
max-height:100%;
object-fit:contain !important;
object-position:center;
display:block;
cursor:zoom-in;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{
z-index:20;
width:50px;
height:50px;
top:50%;
transform:translateY(-50%);
opacity:1;
background:rgba(0,0,0,.55);
border-radius:50%;
margin:0 12px;
}
.gal-gallery .carousel-control-prev{left:0}
.gal-gallery .carousel-control-next{right:0}
.gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
.gal-gallery .carousel-indicators{z-index:10;bottom:-50px}
.gal-gallery .carousel-indicators button{
width:10px;
height:10px;
border-radius:50%;
background:rgba(0,0,0,.5);
border:none;
}
.gal-gallery .carousel-indicators button.active{background:#000}
.gal-gallery{padding-bottom:56px}
#galLightbox .modal-content{background:#000}
#galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
.gal-lightbox-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
border:0;
width:44px;
height:44px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:#fff;
font-size:30px;
line-height:44px;
text-align:center;
z-index:5;
cursor:pointer;
}
.gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
.gal-lightbox-nav.gal-prev{left:10px}
.gal-lightbox-nav.gal-next{right:10px}
/* ========== FAQ SECTION ========== */
.faq-wrap{
background:rgba(255,255,255,.9);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:48px;
max-width:900px;
margin:0 auto;
}
.accordion-item{
border:none;
background:transparent;
border-bottom:1px solid var(--line);
}
.accordion-item:last-child{border-bottom:none}
.accordion-button{
background:transparent;
box-shadow:none !important;
font-family:var(--font-display);
font-weight:600;
font-size:1.1rem;
padding:1.5rem 0;
color:var(--text);
transition:all var(--transition-fast);
}
.accordion-button:not(.collapsed){
color:var(--accent-2);
background:transparent;
}
.accordion-button::after{
background-size:1rem;
transition:transform var(--transition);
}
.accordion-button:hover{color:var(--accent)}
.accordion-body{
padding:0 0 1.5rem;
color:var(--muted);
line-height:1.8;
font-size:1.02rem;
}
/* ========== CONTACT SECTION ========== */
.contact-card{
background:rgba(255,255,255,.9);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:40px;
}
.contact-card label{
font-weight:700;
font-size:.88rem;
margin-bottom:.6rem;
color:var(--text);
letter-spacing:.02em;
}
.form-control,.form-select{
min-height:56px;
border-radius:var(--radius-sm);
border:2px solid var(--line);
background:rgba(255,255,255,.8);
font-size:1rem;
padding:1rem 1.25rem;
transition:all var(--transition-fast);
}
.form-control:focus,.form-select:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px var(--accent-light);
background:#fff;
}
textarea.form-control{
min-height:160px;
resize:vertical;
}
.contact-info-card{
display:flex;
flex-direction:column;
height:100%;
}
.contact-info-card h3{
font-family:var(--font-display);
font-size:1.5rem;
font-weight:700;
margin-bottom:.6rem;
color:var(--text);
}
.contact-list{
display:grid;
gap:16px;
margin-top:1.5rem;
flex:1;
}
.contact-item{
display:flex;
gap:1rem;
align-items:flex-start;
padding:1.25rem;
border-radius:var(--radius-sm);
background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(247,244,239,.5));
border:1px solid var(--line);
transition:all var(--transition);
}
.contact-item:hover{
transform:translateX(6px);
border-color:rgba(176,109,44,.15);
box-shadow:var(--shadow-sm);
}
.contact-item .icon-badge{
width:52px;
height:52px;
border-radius:var(--radius-xs);
background:linear-gradient(135deg, var(--accent-light), rgba(176,109,44,.05));
color:var(--accent-2);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
font-weight:700;
flex-shrink:0;
margin-bottom:0;
}
.contact-item strong{
display:block;
font-size:1rem;
font-weight:700;
color:var(--text);
margin-bottom:.2rem;
}
.contact-item span,.contact-item a{
color:var(--muted);
font-size:.95rem;
transition:color var(--transition-fast);
}
.contact-item a:hover{color:var(--accent)}
/* ========== FOOTER PREMIUM ========== */
.site-footer{
background:#497474;
color:#fff;
padding:80px 0 32px;
position:relative;
overflow:hidden;
}
.site-footer::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}
/* Patrón sutil */
.site-footer::after{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity:.5;
pointer-events:none;
}
.footer-content{position:relative;z-index:1}
.footer-brand{
display:flex;
align-items:center;
gap:1rem;
color:#fff;
margin-bottom:1.25rem;
}
.footer-brand img{
height:48px;
width:auto;
}
.footer-brand span{
font-family:var(--font-display);
font-size:1rem;
font-weight:600;
line-height:1.2;
}
.footer-desc{
color:rgba(255,255,255,.8);
line-height:1.8;
font-size:.95rem;
}
.footer-head{
font-family:var(--font-display);
font-size:1.1rem;
font-weight:700;
margin-bottom:1.25rem;
position:relative;
display:inline-block;
}
.footer-head::after{
content:'';
position:absolute;
bottom:-6px;
left:0;
width:30px;
height:2px;
background:rgba(255,255,255,.4);
border-radius:2px;
}
.footer-nav,.footer-contact{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:.8rem;
}
.footer-nav a,.footer-contact a,.footer-copy a{
color:rgba(255,255,255,.85);
transition:all var(--transition-fast);
font-size:.95rem;
}
.footer-nav a:hover,.footer-contact a:hover,.footer-copy a:hover{
color:#fff;
padding-left:6px;
}
.footer-contact li{
color:rgba(255,255,255,.85);
font-size:.95rem;
}
.footer-copy{
margin-top:50px;
padding-top:28px;
border-top:1px solid rgba(255,255,255,.12);
font-size:.9rem;
color:rgba(255,255,255,.7);
}
/* ========== RESPONSIVE ========== */
@media (max-width:991.98px){
:root{--nav-h:80px}
.navbar{
overflow-x:clip;
}
.navbar .container-custom{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
min-height:var(--nav-h);
padding-top:10px;
padding-bottom:10px;
gap:12px;
}
.navbar-brand{
min-width:0;
max-width:100%;
margin-right:0;
}
.navbar-brand span{
display:block;
word-break:normal;
overflow-wrap:normal;
}
.navbar-toggler{
margin-left:0;
align-self:center;
}
.navbar-collapse{
grid-column:1 / -1;
flex-basis:auto;
min-width:0;
width:100%;
max-width:100%;
margin-top:0;
overflow:hidden;
background:rgba(255,255,255,.98);
backdrop-filter:blur(20px);
border:1px solid var(--line);
border-radius:var(--radius);
padding:16px;
box-shadow:var(--shadow);
}
.navbar-collapse.collapse:not(.show){
display:none !important;
}
.navbar-collapse.collapsing{
overflow:hidden;
}
.navbar-nav{
width:100%;
align-items:stretch !important;
}
.nav-link{
display:block;
width:100%;
padding:.9rem 1rem !important;
}
.nav-link::after{
display:none;
}
.hero{
padding-top:calc(var(--nav-h) + 40px);
min-height:auto;
}
.hero-media{margin-top:40px}
.hero-media-inner{min-height:420px}
.section{padding:80px 0}
.about-card,.faq-wrap,.contact-card{padding:32px}
}
.hero-media-mobile{display:none}
@media (max-width:575.98px){
.section{padding:64px 0}
.container-custom{width:calc(100% - 32px)}
.navbar .container-custom{grid-template-columns:minmax(0,1fr) auto;gap:10px}
.navbar-brand{gap:.65rem;min-width:0}
.navbar-brand img{height:38px;flex-shrink:0}
.navbar-brand span{font-size:.72rem;line-height:1.08;letter-spacing:0;white-space:normal}
.brand-text{min-width:0}
.brand-top,.brand-bottom{display:block;max-width:100%}
.brand-top{font-size:.86rem;line-height:1.02}
.brand-bottom{font-size:.58rem;letter-spacing:1.2px}
.navbar-toggler{padding:.55rem .72rem}
.navbar-collapse{padding:14px}
.nav-item{width:100%}
.section-title{font-size:1.9rem}
.hero-copy p{font-size:1.02rem}
.hero-actions{flex-direction:column}
.hero-actions .btn-main,.hero-actions .btn-outline-main{width:100%}
.hero-media-mobile{display:block;margin-top:22px;margin-bottom:22px}
.hero-media-mobile .hero-media-inner{min-height:260px;padding:10px}
.hero-media-mobile .hero-badge{position:static;margin-top:12px}
.hero > .container-custom > .row > .col-lg-6:last-child{display:none}
.hero-media-inner{min-height:320px}
.hero-badge{position:static;margin-top:16px}
.service-card,.reason-card{padding:28px 24px}
.about-card,.faq-wrap,.contact-card{padding:24px}
.gal-frame{height:clamp(200px,40vh,360px)}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{width:44px;height:44px;margin:0 8px}
.site-footer{padding:60px 0 24px}
}
/* Animaciones de scroll reveal */
.reveal{
opacity:0;
transform:translateY(40px);
transition:all .7s cubic-bezier(.4,0,.2,1);
}
.reveal.visible{
opacity:1;
transform:translateY(0);
}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}
.reveal-delay-6{transition-delay:.6s}
/* ===== INLINE <style> BLOCK #2 ===== */
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:2147483647;
display:flex;
flex-direction:column;
align-items:flex-end;
font-family:inherit;
}
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 30px rgba(37,211,102,.45);
transition:transform .25s, box-shadow .25s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(37,211,102,.55);
}
.wa-card{
position:absolute;
right:0;
bottom:74px;
max-width:calc(100vw - 24px);
width:min(360px,92vw);
background:#fff;
border-radius:18px;
border:1px solid #e3e6ea;
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.25s ease;
}
.wa-card[aria-modal="true"]{
transform:none;
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;
}
.wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
}
.wa-avatar img{
width:26px;
height:26px;
object-fit:contain;
}
.wa-title{
font-weight:800;
font-size:.95rem;
line-height:1.2;
}
.wa-status{
font-size:.85rem;
opacity:.9;
}
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
opacity:.9;
}
.wa-close:hover{
opacity:1;
background:rgba(255,255,255,.14);
}
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background:#fff;
border:1px solid #e3e6ea;
align-self:flex-start;
}
.wa-user{
background:#eaf7f0;
border:1px solid #cfeedd;
align-self:flex-end;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid #e3e6ea;
background:#fff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid #e3e6ea;
font-family:inherit;
outline:none;
}
.wa-send{
background:#25D366;
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{
background:#1fb85a;
}
@media (max-width:480px){
.wa-float{
right:12px;
bottom:12px;
}
.wa-card{
width:min(360px, calc(100vw - 24px));
max-width:calc(100vw - 24px);
}
}
.navbar-brand {
display: flex;
align-items: center;
gap: 12px;
}
.navbar-brand img {
height: 46px;
}
/* BLOQUE TEXTO */
.brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
/* QUIÑONES (principal) */
.brand-top {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--text);
}
/* CONSTRUCCIONES (secundario) */
.brand-bottom {
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: #6c757d;
margin-top: 2px;
}