/* ==========================================================================
Alan Remodelaciones — Soluciones Integrales
Sistema de diseño: navy de obra + terracota de teja + piedra clara
========================================================================== */
/* Las tipografías (Big Shoulders / Work Sans) ya no se cargan acá con @import:
ahora están en un dentro del del HTML, con solo los pesos
realmente usados (600/700/800 y 400/500/600/700). Un @import dentro del CSS
obliga al navegador a descubrir la hoja de Google Fonts recién después de
descargar y parsear este archivo, agregando un salto de red en cadena antes
de poder pedir las fuentes. Con el en el head, el navegador descubre
y empieza a descargar las fuentes en paralelo con este CSS, no en cadena. */
:root{
/* Color */
--navy: #16283D; /* azul del logo — estructura, header, footer */
--navy-2: #1F3A57; /* variante más clara del navy, para degradés sutiles */
--stone: #EFEBE2; /* piedra clara — fondo general, cercano al revoque */
--stone-2: #E4DECF; /* piedra un poco más oscura, para separar secciones */
--white: #FFFFFF;
--ink: #1B1B18; /* casi negro, con temperatura cálida */
--ink-soft: #52514C; /* texto secundario */
--clay: #A6472E; /* terracota de teja colonial — acento de marca */
--clay-dark: #7E3521;
--line: rgba(27,27,24,0.12);
/* Tipografía */
--f-display: 'Big Shoulders', sans-serif;
--f-body: 'Work Sans', sans-serif;
/* Layout */
--container-max: 1200px;
--radius-sm: 3px;
--radius-md: 6px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: var(--f-body);
color: var(--ink);
background: var(--stone);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.container-narrow{
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
/* Que el navbar fijo no tape el título de la sección al llegar por ancla */
section[id], header[id]{ scroll-margin-top: 84px; }
/* ---------- Tipografía general ---------- */
h1,h2,h3,h4{
font-family: var(--f-display);
font-weight: 700;
color: var(--navy);
line-height: 1.05;
margin: 0;
letter-spacing: 0.01em;
}
.section-title{
font-size: clamp(2rem, 4.2vw, 3rem);
font-weight: 700;
color: var(--navy);
}
.section-kicker{
display:inline-flex;
align-items:center;
gap:10px;
color: var(--clay);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 10px;
}
.section-kicker::before{
content:"";
width: 26px;
height: 2px;
background: var(--clay);
display:inline-block;
}
.section-lead{
color: var(--ink-soft);
font-size: 1.08rem;
max-width: 620px;
}
.section-pad{ padding: 96px 0; }
@media (max-width: 767.98px){
.section-pad{ padding: 64px 0; }
}
.bg-white{ background: var(--white); }
.bg-stone2{ background: var(--stone-2); }
.bg-navy{ background: var(--navy); color: var(--white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4{ color: var(--white); }
/* ---------- Botones ---------- */
.btn-clay{
background: var(--clay);
border: none;
color: var(--white);
font-weight: 600;
padding: 14px 30px;
border-radius: var(--radius-sm);
transition: background .2s ease, transform .2s ease;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.btn-clay:hover{ background: var(--clay-dark); color: var(--white); transform: translateY(-1px); }
.btn-outline-light-custom{
border: 1.5px solid rgba(255,255,255,.55);
color: var(--white);
font-weight: 600;
padding: 13px 28px;
border-radius: var(--radius-sm);
transition: all .2s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-outline-light-custom:hover{ background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }
.btn-navy{
background: var(--navy);
border: none;
color: var(--white);
font-weight: 600;
padding: 13px 28px;
border-radius: var(--radius-sm);
transition: background .2s ease;
}
.btn-navy:hover{ background: var(--navy-2); color: var(--white); }
/* ==========================================================================
NAVBAR
========================================================================== */
.navbar-custom{
background: var(--white);
padding: 12px 0;
border-bottom: 1px solid var(--line);
transition: box-shadow .2s ease, padding .2s ease;
}
.navbar-custom.is-scrolled{
box-shadow: 0 4px 18px rgba(22,40,61,0.08);
padding: 8px 0;
}
.navbar-custom .navbar-brand{
display:flex;
align-items:center;
gap:12px;
}
.navbar-custom .navbar-brand img{
height: 46px;
width: auto;
transition: height .2s ease;
}
.navbar-custom.is-scrolled .navbar-brand img{ height: 38px; }
.navbar-brand-text{
font-family: var(--f-display);
font-weight: 700;
color: var(--navy);
font-size: 1.18rem;
line-height: 1.1;
}
.navbar-brand-text small{
display:block;
font-family: var(--f-body);
font-weight: 500;
color: var(--ink-soft);
font-size: 0.68rem;
letter-spacing: 0.04em;
}
.navbar-custom .nav-link{
color: var(--ink);
font-weight: 500;
padding: 8px 16px !important;
position: relative;
}
.navbar-custom .nav-link:hover{ color: var(--clay); }
.navbar-custom .nav-cta{
background: var(--navy);
color: var(--white) !important;
border-radius: var(--radius-sm);
padding: 10px 20px !important;
margin-left: 8px;
font-weight: 600;
}
.navbar-custom .nav-cta:hover{ background: var(--clay); }
.offcanvas-header .btn-close{ background-color: rgba(0,0,0,0.5); }
/* ==========================================================================
HERO
========================================================================== */
.hero{
position: relative;
background: var(--navy);
}
.hero-carousel{
/* 100vh como base (compatibilidad); dvh pisa ese valor donde el navegador
lo soporta, para que en mobile el hero ocupe la pantalla real y no
el alto "teórico" que incluye la barra de direcciones */
height: 100vh;
height: 100dvh;
min-height: 640px;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{ height: 100%; }
.hero-carousel .carousel-item img{
width:100%;
height:100%;
object-fit: cover;
filter: saturate(1.02);
}
.hero-carousel .carousel-item::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(16,28,41,.55) 0%, rgba(16,28,41,.25) 38%, rgba(16,28,41,.82) 100%);
}
/* Controles: siempre clicables y por encima de cualquier otro elemento del hero */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{
width: 10%;
opacity: .45;
transition: opacity .25s ease;
z-index: 20;
pointer-events: auto;
}
.hero-carousel:hover .carousel-control-prev,
.hero-carousel:hover .carousel-control-next,
.hero-carousel:focus-within .carousel-control-prev,
.hero-carousel:focus-within .carousel-control-next{ opacity: .9; }
/* En pantallas táctiles no existe :hover, así que los dejamos siempre visibles */
@media (hover: none){
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ opacity: .55; }
}
.hero-carousel .carousel-indicators{
margin-bottom: 2.4rem;
z-index: 20;
pointer-events: auto;
}
.hero-carousel .carousel-indicators [data-bs-target]{
width: 34px; height: 3px; border-radius: 2px; background-color: rgba(255,255,255,.5); opacity:1;
cursor: pointer;
}
.hero-carousel .carousel-indicators .active{ background-color: var(--clay); }
/* El panel de texto no debe tapar los clics sobre el carrusel: solo el CTA es interactivo */
.hero-plate{
position: absolute;
left: 0;
bottom: 0;
z-index: 5;
width: 100%;
pointer-events: none;
}
.hero-plate-inner{
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px 64px;
pointer-events: none;
}
.hero-cta-row{ pointer-events: auto; }
.hero-eyebrow{
color: var(--clay);
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 14px;
font-size: 1.02rem;
}
.hero-title{
color: var(--white);
font-size: clamp(2.4rem, 6vw, 4.6rem);
font-weight: 800;
max-width: 900px;
text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.hero-sub{
color: rgba(255,255,255,.86);
font-size: 1.15rem;
max-width: 560px;
margin-top: 18px;
font-weight: 400;
}
.hero-cta-row{
margin-top: 32px;
display:flex;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 575.98px){
.hero-carousel{ min-height: 560px; }
/* Más aire abajo del botón "Ver servicios" para que las barritas
indicadoras no le queden pegadas ni tapadas */
.hero-plate-inner{ padding-bottom: 76px; }
.hero-cta-row{ margin-top: 22px; }
.hero-carousel .carousel-indicators{ margin-bottom: 0.35rem; }
}
/* ==========================================================================
PRESENTACIÓN (sobre Alan)
========================================================================== */
.about-photo-wrap{
position: relative;
}
.about-photo-frame{
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4/5;
padding: 0 40px; /* margen a los costados */
display: flex;
align-items: center;
justify-content: center;
background: var(--stone-2); /* opcional: fondo suave detrás del logo */
}
.about-photo-frame img{
width: 100%;
height: 100%;
object-fit: contain; /* antes: cover, que recortaba el logo */
}
.about-badge{
position: absolute;
bottom: -28px;
right: -18px;
background: var(--clay);
color: var(--white);
padding: 22px 26px;
border-radius: var(--radius-md);
box-shadow: 0 14px 30px rgba(122,45,26,.28);
max-width: 200px;
}
.about-badge .num{
font-family: var(--f-display);
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
}
.about-badge .lbl{
font-size: 0.85rem;
font-weight: 500;
margin-top: 4px;
}
@media (max-width: 767.98px){
.about-photo-frame{ padding: 0 24px; }
.about-badge{ right: 12px; bottom: -20px; padding: 16px 20px; }
.about-badge .num{ font-size: 2rem; }
}
.about-points{
list-style: none;
padding: 0;
margin: 28px 0 0;
display: grid;
gap: 18px;
}
.about-points li{
display:flex;
gap: 14px;
align-items:flex-start;
}
.about-points .icon{
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--stone-2);
color: var(--clay);
display:flex;
align-items:center;
justify-content:center;
font-size: 1rem;
}
.about-points strong{ color: var(--navy); }
.about-points p{ margin: 2px 0 0; color: var(--ink-soft); }
/* ==========================================================================
SERVICIOS
========================================================================== */
.service-row{
border-top: 1px solid var(--line);
padding: 30px 0;
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 24px;
align-items: center;
transition: background .2s ease;
}
.service-row:first-child{ border-top: 1px solid var(--line); }
.service-row:hover{ background: rgba(166,71,46,0.045); }
.service-num{
font-family: var(--f-display);
font-size: 1.5rem;
color: var(--line);
font-weight: 700;
}
.service-icon{
width: 52px; height: 52px;
border-radius: 50%;
background: var(--navy);
color: var(--white);
display:flex; align-items:center; justify-content:center;
font-size: 1.35rem;
flex: none;
}
.service-row-content{
display:flex;
align-items:center;
gap: 20px;
}
.service-row h3{
font-size: 1.35rem;
margin-bottom: 4px;
}
.service-row p{
color: var(--ink-soft);
margin: 0;
max-width: 560px;
}
.service-arrow{
color: var(--clay);
font-size: 1.3rem;
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}
.service-row:hover .service-arrow{ opacity: 1; transform: translateX(4px); }
@media (max-width: 767.98px){
.service-row{ grid-template-columns: 1fr; gap: 14px; }
.service-row-content{ align-items:flex-start; }
.service-arrow{ display:none; }
}
/* ==========================================================================
ENFOQUE — ¿TENÉS UN PROBLEMA?
========================================================================== */
.problem-section{
background: var(--navy);
color: var(--white);
position: relative;
}
.problem-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,.14);
margin-top: 46px;
border-radius: var(--radius-md);
overflow: hidden;
}
.problem-card{
background: var(--navy-2);
padding: 34px 28px;
min-height: 190px;
}
.problem-card h4{
color: var(--white);
font-size: 1.15rem;
margin-bottom: 10px;
}
.problem-card p{
color: rgba(255,255,255,.72);
margin: 0;
font-size: 0.96rem;
}
.problem-card .tag{
color: var(--clay);
font-weight: 600;
font-size: 0.85rem;
display:block;
margin-bottom: 10px;
}
@media (max-width: 991.98px){
.problem-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
.problem-grid{ grid-template-columns: 1fr; }
}
/* ==========================================================================
COMPROMISO / CONFIANZA (reemplaza a "antes y después")
========================================================================== */
.trust-band{
background: var(--navy);
color: var(--white);
border-radius: var(--radius-md);
padding: 56px;
position: relative;
overflow: hidden;
}
.trust-quote-mark{
font-family: var(--f-display);
font-size: 5rem;
line-height: 1;
color: var(--clay);
opacity: .9;
margin-bottom: -10px;
}
.trust-quote{
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(1.35rem, 2.6vw, 1.9rem);
color: var(--white);
max-width: 780px;
line-height: 1.3;
}
.trust-quote-source{
color: rgba(255,255,255,.62);
margin-top: 16px;
font-size: 0.95rem;
}
.trust-stats{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,.14);
margin-top: 44px;
border-radius: var(--radius-md);
overflow: hidden;
}
.trust-stat{
background: var(--navy-2);
padding: 28px 26px;
}
.trust-stat .num{
font-family: var(--f-display);
font-size: 2.4rem;
font-weight: 800;
color: var(--white);
line-height: 1;
}
.trust-stat .lbl{
color: rgba(255,255,255,.72);
font-size: 0.92rem;
margin-top: 6px;
}
@media (max-width: 767.98px){
.trust-band{ padding: 36px 26px; }
.trust-stats{ grid-template-columns: 1fr; }
}
/* ==========================================================================
TRABAJOS REALIZADOS / GALERÍA
========================================================================== */
.gallery-item{
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.gallery-item:hover img{ transform: scale(1.045); }
.gallery-item .gallery-overlay{
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16,28,41,0) 45%, rgba(16,28,41,.78) 100%);
display:flex;
align-items:flex-end;
padding: 18px;
opacity: 0;
transition: opacity .3s ease;
}
.gallery-item:hover .gallery-overlay{ opacity: 1; }
.gallery-overlay span{
color: var(--white);
font-weight: 600;
}
.gallery-mosaic{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 190px;
gap: 14px;
}
.gallery-mosaic .gallery-item:nth-child(1){ grid-column: span 2; grid-row: span 2; }
.gallery-mosaic .gallery-item:nth-child(4){ grid-column: span 2; }
.gallery-mosaic .gallery-item:nth-child(6){ grid-row: span 2; }
@media (max-width: 991.98px){
.gallery-mosaic{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
.gallery-mosaic .gallery-item:nth-child(1){ grid-column: span 2; grid-row: span 1; }
.gallery-mosaic .gallery-item:nth-child(6){ grid-row: span 1; }
}
.work-tabs{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin: 28px 0 34px;
}
.work-tab{
border: 1px solid var(--line);
background: transparent;
color: var(--ink-soft);
padding: 9px 20px;
border-radius: 30px;
font-weight: 500;
font-size: 0.92rem;
transition: all .2s ease;
cursor: pointer;
}
.work-tab:hover{ border-color: var(--clay); color: var(--clay); }
.work-tab.active{ background: var(--navy); color: var(--white); border-color: var(--navy); }
/* ==========================================================================
STEEL FRAMING
========================================================================== */
.steel-section{
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--white);
padding: 46px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
}
.steel-tagline{
display:inline-block;
font-size: 0.8rem;
font-weight: 600;
color: var(--clay);
background: rgba(166,71,46,0.09);
padding: 5px 14px;
border-radius: 30px;
margin-bottom: 14px;
}
.steel-section h3{ font-size: 1.5rem; margin-bottom: 12px; }
.steel-section p{ color: var(--ink-soft); max-width: 620px; margin: 0; }
@media (max-width: 767.98px){
.steel-section{ grid-template-columns: 1fr; padding: 32px 24px; text-align:left; }
}
/* ==========================================================================
PROCESO DE TRABAJO
========================================================================== */
.process-row{
display:flex;
gap: 26px;
padding: 30px 0;
border-top: 1px solid var(--line);
align-items: baseline;
}
.process-row:last-child{ border-bottom: 1px solid var(--line); }
.process-step-num{
font-family: var(--f-display);
font-size: 2.6rem;
font-weight: 800;
color: var(--clay);
width: 90px;
flex: none;
}
.process-row h4{ font-size: 1.2rem; margin-bottom: 6px; }
.process-row p{ color: var(--ink-soft); margin: 0; max-width: 540px; }
@media (max-width: 575.98px){
.process-row{ flex-direction: column; gap: 8px; }
.process-step-num{ width: auto; }
}
/* ==========================================================================
CTA PRESUPUESTO
========================================================================== */
.cta-band{
background: linear-gradient(120deg, var(--clay) 0%, var(--clay-dark) 100%);
color: var(--white);
border-radius: var(--radius-md);
padding: 56px 48px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.cta-band h3{ color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 560px; }
.cta-band p{ color: rgba(255,255,255,.85); margin-top: 8px; max-width: 480px; }
.cta-band .btn-clay{ background: var(--white); color: var(--clay-dark); }
.cta-band .btn-clay:hover{ background: var(--stone); color: var(--clay-dark); }
/* ==========================================================================
CONTACTO
========================================================================== */
.contact-card{
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 30px;
height: 100%;
}
.contact-card .icon{
width: 46px; height: 46px;
border-radius: 50%;
background: var(--stone-2);
color: var(--clay);
display:flex; align-items:center; justify-content:center;
font-size: 1.2rem;
margin-bottom: 16px;
}
.contact-card h4{ font-size: 1.1rem; margin-bottom: 8px; }
.contact-card p{ color: var(--ink-soft); margin: 0; }
.contact-card a.contact-link{ color: var(--navy); font-weight: 600; }
.contact-card a.contact-link:hover{ color: var(--clay); }
.contact-map-note{
border-radius: var(--radius-md);
overflow: hidden;
background: var(--navy);
color: var(--white);
padding: 40px 34px;
height: 100%;
display:flex;
flex-direction: column;
justify-content: center;
}
.contact-map-note h4{ color: var(--white); }
.contact-map-note p{ color: rgba(255,255,255,.75); }
/* ---------- Formulario de contacto (envía por WhatsApp) ---------- */
#whatsappForm .form-label{
font-weight: 600;
color: var(--navy);
font-size: 0.9rem;
margin-bottom: 6px;
}
#whatsappForm .form-control,
#whatsappForm .form-select{
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-family: var(--f-body);
background: var(--stone);
color: var(--ink);
}
#whatsappForm .form-control:focus,
#whatsappForm .form-select:focus{
border-color: var(--clay);
box-shadow: 0 0 0 3px rgba(166,71,46,0.15);
outline: none;
}
#whatsappForm .form-control::placeholder{ color: var(--ink-soft); opacity: .7; }
#whatsappForm button[type="submit"]{
border: none;
width: 100%;
justify-content: center;
}
@media (min-width: 576px){
#whatsappForm button[type="submit"]{ width: auto; }
}
.form-hint{
color: var(--ink-soft);
font-size: 0.85rem;
margin-top: 10px;
}
/* ==========================================================================
FOOTER
========================================================================== */
.footer-main{
background: var(--navy);
color: rgba(255,255,255,.82);
padding: 80px 0 0;
}
.footer-main h5{
color: var(--white);
font-family: var(--f-body);
font-weight: 600;
font-size: 1.02rem;
margin-bottom: 20px;
}
.footer-brand-row{
display:flex;
align-items:center;
gap: 14px;
margin-bottom: 18px;
}
.footer-brand-row img{ height: 44px; }
.footer-main p{ color: rgba(255,255,255,.66); line-height: 1.7; }
.footer-main ul{ list-style:none; padding:0; margin:0; display:grid; gap: 12px; }
.footer-main ul a{ color: rgba(255,255,255,.72); transition: color .2s ease; }
.footer-main ul a:hover{ color: var(--clay); }
.footer-social{ display:flex; gap: 12px; margin-top: 18px; }
.footer-social a{
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.24);
display:flex; align-items:center; justify-content:center;
transition: all .2s ease;
}
.footer-social a:hover{ background: var(--clay); border-color: var(--clay); }
.footer-bottom{
border-top: 1px solid rgba(255,255,255,.14);
margin-top: 56px;
padding: 22px 0;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 0.88rem;
color: rgba(255,255,255,.55);
}
.footer-bottom a{ color: rgba(255,255,255,.75); font-weight: 600; }
.footer-bottom a:hover{ color: var(--clay); }
/* ==========================================================================
WhatsApp flotante
========================================================================== */
.whatsapp-float{
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
width: 58px;
height: 58px;
background: #25D366;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
color: var(--white);
font-size: 1.6rem;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); color: var(--white); }
/* ==========================================================================
Reveal on scroll (una sola vez, sutil)
========================================================================== */
.reveal{
opacity: 0;
transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1; transform:none; transition:none; }
html{ scroll-behavior:auto; }
}
/* Foco visible accesible */
a:focus-visible, button:focus-visible{
outline: 2px solid var(--clay);
outline-offset: 2px;
}
/* Utilidad: sin scroll horizontal */
.no-overflow{ overflow-x: hidden; }