Preview de mixed.css
/* MIXED CSS PACK */
/* Template: feriando.com.ar/index.html */
/* Template mtime: 2026-04-17 17:16:58 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ─── TOKENS ──────────────────────────────────────────────── */
:root{
--accent:#c8a891;
--accent-2:#b6947d;
--accent-3:#a07d68;
--accent-soft:#f6efe9;
--accent-pale:#fdf8f5;
--text:#171717;
--text-soft:#6b6560;
--text-muted:#9e9590;
--white:#ffffff;
--line:#ece3dc;
--line-strong:#dfd1c7;
--bg:#fffdfb;
--bg-2:#faf6f2;
--bg-3:#f5ede6;
--shadow-xs:0 2px 8px rgba(18,18,18,.04);
--shadow-sm:0 8px 28px rgba(18,18,18,.06);
--shadow-md:0 18px 50px rgba(18,18,18,.09);
--shadow-lg:0 32px 80px rgba(18,18,18,.12);
--shadow-xl:0 48px 120px rgba(18,18,18,.16);
--radius-sm:16px;
--radius-md:24px;
--radius-lg:32px;
--radius-xl:40px;
--container:1320px;
--font-display:'Playfair Display', Georgia, serif;
--font-body:'DM Sans', system-ui, sans-serif;
}
*{ box-sizing:border-box; min-width:0; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--font-body);
color:var(--text);
background:var(--bg);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; }
.container-xxl{ max-width:var(--container); }
/* ─── NOISE TEXTURE OVERLAY ───────────────────────────────── */
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:9999;
opacity:.018;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px;
}
/* ─── EYEBROW ─────────────────────────────────────────────── */
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 14px 7px 10px;
border-radius:999px;
background:var(--accent-soft);
border:1px solid rgba(200,168,145,.28);
color:var(--accent-3);
font-size:.72rem;
letter-spacing:.2em;
text-transform:uppercase;
font-weight:700;
margin-bottom:20px;
}
.eyebrow::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:var(--accent-2);
flex-shrink:0;
}
/* ─── SECTION BASE ────────────────────────────────────────── */
.section{ position:relative; padding:120px 0; }
.section-head{
max-width:780px;
margin:0 auto 60px;
text-align:center;
}
.section-title{
margin:0 0 18px;
font-family:var(--font-display);
font-size:clamp(2.4rem,4.2vw,4rem);
line-height:1.05;
letter-spacing:-.02em;
font-weight:800;
color:var(--text);
}
.section-title em{
font-style:italic;
color:var(--accent-2);
}
.section-subtitle{
margin:0 auto;
max-width:680px;
font-size:1.05rem;
line-height:1.85;
color:var(--text-soft);
font-weight:300;
}
/* ─── DIVIDER ─────────────────────────────────────────────── */
.section-divider{
width:48px;
height:2px;
background:linear-gradient(90deg, var(--accent) 0%, transparent 100%);
margin:20px auto 0;
border-radius:999px;
}
/* ─── NAVBAR ──────────────────────────────────────────────── */
.navbar{
padding:0;
background:rgba(255,253,251,.88);
backdrop-filter:blur(24px) saturate(1.4);
-webkit-backdrop-filter:blur(24px) saturate(1.4);
border-bottom:1px solid rgba(223,209,199,.35);
transition:box-shadow .3s ease, background .3s ease;
}
.navbar.scrolled{
background:rgba(255,253,251,.96);
box-shadow:0 8px 40px rgba(18,18,18,.06);
}
.navbar .container-xxl{ padding-top:14px; padding-bottom:14px; }
.navbar-brand{
display:flex;
align-items:center;
gap:11px;
color:var(--text) !important;
font-weight:700;
line-height:1;
}
.navbar-brand img{
height:42px;
width:auto;
object-fit:contain;
flex-shrink:0;
}
.navbar-brand-text{
display:flex;
flex-direction:column;
}
.navbar-brand-name{
font-family:var(--font-display);
font-size:1.25rem;
font-weight:800;
letter-spacing:-.01em;
line-height:1;
color:var(--text);
}
.navbar-brand-tag{
font-size:.65rem;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--accent-2);
line-height:1;
margin-top:3px;
}
.navbar-nav{ gap:2px; }
.navbar-nav .nav-link{
color:var(--text-soft);
font-size:.88rem;
font-weight:500;
padding:.65rem .95rem !important;
border-radius:999px;
transition:.2s ease;
letter-spacing:.01em;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
color:var(--text);
background:rgba(200,168,145,.10);
}
.navbar-toggler{
border:none;
padding:.3rem .4rem;
box-shadow:none !important;
}
.nav-cta{ margin-left:10px; }
/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn-main,
.btn-soft,
.btn-outline-soft{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
border:none;
border-radius:999px;
font-weight:600;
font-size:.92rem;
min-height:52px;
padding:13px 26px;
transition:all .25s cubic-bezier(.4,0,.2,1);
letter-spacing:.01em;
position:relative;
overflow:hidden;
}
.btn-main{
color:#fff;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
box-shadow:0 10px 28px rgba(160,125,104,.30);
}
.btn-main::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
border-radius:inherit;
pointer-events:none;
}
.btn-main:hover{
color:#fff;
transform:translateY(-2px) scale(1.01);
box-shadow:0 18px 36px rgba(160,125,104,.38);
}
.btn-main:active{ transform:translateY(0); }
.btn-soft{
color:var(--text);
background:rgba(255,255,255,.9);
border:1.5px solid var(--line);
box-shadow:var(--shadow-xs);
}
.btn-soft:hover{
color:var(--accent-2);
border-color:rgba(200,168,145,.5);
background:#fff;
transform:translateY(-2px);
box-shadow:var(--shadow-sm);
}
.btn-outline-soft{
color:var(--accent-2);
background:rgba(200,168,145,.08);
border:1.5px solid rgba(200,168,145,.32);
}
.btn-outline-soft:hover{
color:#fff;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(160,125,104,.28);
}
.btn-arrow{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--accent-2);
font-size:.92rem;
font-weight:600;
transition:.2s ease;
padding:0;
background:none;
border:none;
}
.btn-arrow svg{
transition:transform .22s ease;
}
.btn-arrow:hover{
color:var(--accent-3);
}
.btn-arrow:hover svg{
transform:translateX(4px);
}
/* ─── HERO ────────────────────────────────────────────────── */
#inicio{
position:relative;
min-height:clamp(440px,78vh,860px);
padding:0;
overflow:hidden;
background:
linear-gradient(180deg, rgba(23,23,23,.18) 0%, rgba(23,23,23,.08) 34%, rgba(23,23,23,.22) 100%),
url("img/hero.jpeg") center center / cover no-repeat;
}
#inicio::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(255,255,255,.10) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.08) 100%),
radial-gradient(circle at top right, rgba(255,255,255,.18) 0%, transparent 38%);
pointer-events:none;
}
.hero-content-block{
padding:72px 0 100px;
overflow:hidden;
position:relative;
background:
radial-gradient(ellipse 70% 60% at 80% -10%, rgba(200,168,145,.14) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at -10% 60%, rgba(200,168,145,.10) 0%, transparent 55%),
var(--bg);
}
.hero-content-block::before{
content:"";
position:absolute;
inset:0;
background-image:
repeating-linear-gradient(
90deg,
rgba(200,168,145,.04) 0px,
rgba(200,168,145,.04) 1px,
transparent 1px,
transparent 120px
);
pointer-events:none;
}
.hero-content-block .container-xxl{
position:relative;
z-index:2;
}
.hero-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:64px;
align-items:center;
}
.hero-copy{ position:relative; z-index:2; }
.hero-title{
margin:0 0 22px;
font-family:var(--font-display);
font-size:clamp(2.8rem,5.2vw,5.2rem);
line-height:1.02;
font-weight:800;
letter-spacing:-.03em;
color:var(--text);
}
.hero-title em{
font-style:italic;
color:var(--accent-2);
position:relative;
}
.hero-copy > p{
margin:0;
max-width:580px;
color:var(--text-soft);
font-size:1.05rem;
line-height:1.9;
font-weight:300;
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:32px;
}
.hero-note{
margin-top:24px;
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
border-radius:999px;
background:rgba(200,168,145,.07);
color:var(--text-soft);
border:1px solid rgba(200,168,145,.18);
font-size:.83rem;
font-weight:500;
}
.hero-note .dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--accent-2);
box-shadow:0 0 0 5px rgba(200,168,145,.18);
animation:pulse-dot 2.2s ease infinite;
flex-shrink:0;
}
@keyframes pulse-dot{
0%,100%{ box-shadow:0 0 0 5px rgba(200,168,145,.18); }
50%{ box-shadow:0 0 0 9px rgba(200,168,145,.06); }
}
.hero-points{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:36px;
max-width:720px;
}
.hero-point{
padding:20px 16px;
border-radius:20px;
background:rgba(255,255,255,.82);
border:1px solid rgba(223,209,199,.58);
box-shadow:0 4px 16px rgba(18,18,18,.04);
backdrop-filter:blur(8px);
transition:.25s ease;
}
.hero-point:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-sm);
border-color:rgba(200,168,145,.35);
}
.hero-point-icon{
width:34px;
height:34px;
border-radius:10px;
background:linear-gradient(135deg, rgba(200,168,145,.2) 0%, rgba(200,168,145,.08) 100%);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
color:var(--accent-2);
}
.hero-point strong{
display:block;
font-size:.87rem;
line-height:1.5;
font-weight:600;
color:var(--text);
}
/* Hero Visual */
.hero-visual{
position:relative;
z-index:2;
display:flex;
justify-content:center;
align-items:center;
}
.hero-shell{
position:relative;
width:min(100%,580px);
}
/* Soft blurred blob behind card */
.hero-blob{
position:absolute;
width:110%;
height:110%;
top:-5%;
left:-5%;
border-radius:50% 45% 55% 40% / 45% 50% 40% 55%;
background:radial-gradient(ellipse, rgba(200,168,145,.22) 0%, rgba(200,168,145,.04) 60%, transparent 80%);
filter:blur(24px);
pointer-events:none;
animation:blob-drift 8s ease-in-out infinite alternate;
}
@keyframes blob-drift{
0%{ border-radius:50% 45% 55% 40% / 45% 50% 40% 55%; }
100%{ border-radius:42% 58% 45% 55% / 52% 44% 56% 48%; }
}
.hero-card{
position:relative;
z-index:2;
border-radius:var(--radius-xl);
background:linear-gradient(160deg, #ffffff 0%, #fdf7f3 100%);
border:1px solid rgba(223,209,199,.8);
box-shadow:
0 2px 0 rgba(255,255,255,.9) inset,
var(--shadow-xl);
padding:16px;
overflow:hidden;
}
.hero-card-inner{
border-radius:calc(var(--radius-xl) - 10px);
overflow:hidden;
position:relative;
}
.hero-card-inner::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
pointer-events:none;
}
.hero-card img{
width:100%;
aspect-ratio:1/1;
object-fit:contain;
object-position:center;
display:block;
background:linear-gradient(180deg, #f9f4f0 0%, #fff 100%);
}
/* Float badges */
.hero-float{
position:absolute;
z-index:3;
background:rgba(255,255,255,.92);
border:1px solid rgba(223,209,199,.6);
box-shadow:var(--shadow-md);
border-radius:18px;
padding:14px 16px;
backdrop-filter:blur(14px);
min-width:155px;
}
.hero-float::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg, rgba(255,255,255,.6) 0%, transparent 60%);
pointer-events:none;
}
.hero-float small{
display:block;
color:var(--accent-2);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.62rem;
font-weight:700;
margin-bottom:5px;
}
.hero-float strong{
display:block;
color:var(--text);
line-height:1.35;
font-size:.88rem;
font-weight:700;
}
.hero-float.top{
top:28px;
left:-40px;
animation:float-a 4s ease-in-out infinite;
}
.hero-float.bottom{
right:-36px;
bottom:32px;
animation:float-b 4.5s ease-in-out infinite;
}
@keyframes float-a{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-8px); }
}
@keyframes float-b{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(7px); }
}
/* ─── ABOUT ──────────────────────────────────────────────── */
#quienes-somos{
background:
radial-gradient(ellipse 60% 40% at 0% 50%, rgba(200,168,145,.07) 0%, transparent 60%),
var(--bg);
}
.about-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
border-radius:var(--radius-xl);
overflow:hidden;
box-shadow:var(--shadow-lg);
border:1px solid rgba(223,209,199,.6);
}
.about-accent-col{
background:linear-gradient(160deg, #f0e6de 0%, #e8d8cd 50%, #f5ece5 100%);
padding:52px 44px;
display:flex;
flex-direction:column;
justify-content:space-between;
position:relative;
overflow:hidden;
}
.about-accent-col::before{
content:"";
position:absolute;
width:320px;
height:320px;
border-radius:50%;
bottom:-120px;
right:-100px;
background:radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 70%);
pointer-events:none;
}
.about-quote{
font-family:var(--font-display);
font-size:clamp(1.9rem,3vw,2.8rem);
font-weight:700;
font-style:italic;
line-height:1.18;
color:var(--accent-3);
position:relative;
z-index:1;
}
.about-quote::before{
content:"\201C";
font-size:6rem;
line-height:.7;
display:block;
color:rgba(160,125,104,.25);
font-family:Georgia, serif;
margin-bottom:8px;
}
.about-sig{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:14px;
margin-top:32px;
}
.about-sig-avatar{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-family:var(--font-display);
font-size:1.4rem;
font-weight:800;
flex-shrink:0;
border:2px solid rgba(255,255,255,.6);
box-shadow:0 6px 20px rgba(160,125,104,.3);
}
.about-sig-name{
font-weight:700;
font-size:1rem;
color:var(--accent-3);
line-height:1.2;
}
.about-sig-role{
font-size:.78rem;
color:var(--accent-2);
opacity:.8;
margin-top:2px;
font-weight:500;
letter-spacing:.04em;
}
.about-stat-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:32px;
position:relative;
z-index:1;
}
.about-stat{
background:rgba(255,255,255,.5);
border:1px solid rgba(255,255,255,.7);
border-radius:16px;
padding:16px;
backdrop-filter:blur(8px);
}
.about-stat-num{
font-family:var(--font-display);
font-size:2rem;
font-weight:800;
color:var(--accent-3);
line-height:1;
}
.about-stat-label{
font-size:.75rem;
color:var(--accent-2);
font-weight:500;
margin-top:4px;
line-height:1.4;
}
.about-text-col{
background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(252,249,247,.95) 100%);
padding:52px 44px;
}
.about-text-col p{
margin:0 0 20px;
font-size:1.02rem;
line-height:1.92;
color:var(--text-soft);
font-weight:300;
}
.about-text-col p:last-child{ margin-bottom:0; }
.about-text-col p strong{
color:var(--text);
font-weight:600;
}
/* ─── SERVICES ───────────────────────────────────────────── */
#servicios{
background:
radial-gradient(ellipse 70% 50% at 100% 100%, rgba(200,168,145,.08) 0%, transparent 55%),
var(--bg-2);
}
.services-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
.service-card{
position:relative;
padding:36px 32px;
border-radius:var(--radius-lg);
background:#fff;
border:1px solid rgba(223,209,199,.6);
box-shadow:var(--shadow-sm);
overflow:hidden;
transition:all .28s cubic-bezier(.4,0,.2,1);
}
.service-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(200,168,145,.06) 0%, transparent 50%);
border-radius:inherit;
pointer-events:none;
}
.service-card-bg-num{
position:absolute;
bottom:-12px;
right:16px;
font-family:var(--font-display);
font-size:6rem;
font-weight:900;
color:rgba(200,168,145,.08);
line-height:1;
pointer-events:none;
user-select:none;
}
.service-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
border-color:rgba(200,168,145,.35);
}
.icon-chip{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, rgba(200,168,145,.18) 0%, rgba(200,168,145,.06) 100%);
border:1px solid rgba(200,168,145,.24);
color:var(--accent-2);
margin-bottom:22px;
position:relative;
z-index:1;
}
.service-card h3{
margin:0 0 12px;
font-family:var(--font-display);
font-size:1.35rem;
line-height:1.15;
font-weight:700;
letter-spacing:-.02em;
color:var(--text);
position:relative;
z-index:1;
}
.service-card p{
margin:0;
color:var(--text-soft);
line-height:1.8;
font-size:.97rem;
font-weight:300;
position:relative;
z-index:1;
}
/* ─── WHY US ──────────────────────────────────────────────── */
#porque-elegirnos{
background:
linear-gradient(180deg, rgba(248,242,236,.7) 0%, rgba(255,255,255,.8) 100%),
radial-gradient(ellipse 50% 60% at 20% 50%, rgba(200,168,145,.10) 0%, transparent 60%);
}
.choose-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.choose-card{
padding:32px 26px;
border-radius:var(--radius-md);
background:rgba(255,255,255,.85);
border:1px solid rgba(223,209,199,.6);
box-shadow:0 4px 20px rgba(18,18,18,.05);
transition:all .26s cubic-bezier(.4,0,.2,1);
position:relative;
overflow:hidden;
}
.choose-card::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
opacity:0;
transition:.26s ease;
}
.choose-card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-md);
border-color:rgba(200,168,145,.35);
}
.choose-card:hover::after{
opacity:1;
}
.choose-card h3{
margin:16px 0 10px;
font-family:var(--font-display);
font-size:1.18rem;
line-height:1.2;
font-weight:700;
letter-spacing:-.02em;
color:var(--text);
}
.choose-card p{
margin:0;
color:var(--text-soft);
line-height:1.78;
font-size:.95rem;
font-weight:300;
}
/* ─── GALLERY ─────────────────────────────────────────────── */
#trabajos{
background:
linear-gradient(180deg, rgba(250,246,242,.8) 0%, rgba(255,255,255,.9) 50%, rgba(249,245,241,.7) 100%);
}
.gal-gallery .carousel{
max-width:1040px;
margin-inline:auto;
position:relative;
}
.gal-frame{
position:relative;
height:clamp(340px,56vh,560px);
background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(249,245,241,.96) 100%);
border-radius:30px;
overflow:hidden;
box-shadow:var(--shadow-lg);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
border:1px solid rgba(223,209,199,.72);
}
.gal-frame::before{
content:"";
position:absolute;
inset:14px;
border-radius:22px;
border:1px solid rgba(223,209,199,.45);
pointer-events:none;
}
.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;
position:relative;
z-index:1;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{
z-index:20;
width:58px;
height:58px;
top:50%;
transform:translateY(-50%);
opacity:1;
background:rgba(23,23,23,.76);
backdrop-filter:blur(10px);
border-radius:50%;
margin:0 14px;
box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.gal-gallery .carousel-control-prev{ left:0; }
.gal-gallery .carousel-control-next{ right:0; }
.gal-gallery .gal-ctrl-icon{
width:2.4rem;
height:2.4rem;
background-size:58% 58%;
}
.gal-gallery .carousel-indicators{
z-index:10;
bottom:-56px;
margin-bottom:0;
gap:8px;
}
.gal-gallery .carousel-indicators button{
width:10px;
height:10px;
border-radius:999px;
background:rgba(23,23,23,.26);
border:none;
transition:.22s ease;
}
.gal-gallery .carousel-indicators button.active{
width:32px;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}
.gal-gallery{ padding-bottom:82px; }
#galLightbox .modal-content{
background:#000;
border-radius:22px;
overflow:hidden;
}
#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:48px;
height:48px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:#fff;
font-size:30px;
line-height:48px;
text-align:center;
z-index:5;
cursor:pointer;
backdrop-filter:blur(10px);
}
.gal-lightbox-nav:hover{ background:rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev{ left:12px; }
.gal-lightbox-nav.gal-next{ right:12px; }
/* ─── FAQs ────────────────────────────────────────────────── */
#faqs{
background:var(--bg);
}
.faq-shell{
max-width:860px;
margin:0 auto;
}
.accordion-item{
border:none;
margin-bottom:10px;
background:transparent;
}
.accordion-button{
border:none !important;
border-radius:18px !important;
background:rgba(255,255,255,.95);
box-shadow:none !important;
outline:none !important;
border:1.5px solid rgba(223,209,199,.65) !important;
color:var(--text);
font-size:1rem;
font-family:var(--font-body);
font-weight:600;
line-height:1.5;
padding:22px 28px;
transition:all .22s ease;
}
.accordion-button::after{
background-size:16px;
width:16px;
height:16px;
flex-shrink:0;
}
.accordion-button:not(.collapsed){
background:linear-gradient(160deg, rgba(250,246,242,.98) 0%, rgba(255,255,255,.95) 100%);
color:var(--accent-3);
border-color:rgba(200,168,145,.4) !important;
border-bottom-color:transparent !important;
border-radius:18px 18px 0 0 !important;
}
.accordion-button:hover{
background:rgba(252,248,245,.98);
border-color:rgba(200,168,145,.35) !important;
}
.accordion-collapse{
border:1.5px solid rgba(200,168,145,.3);
border-top:none;
border-radius:0 0 18px 18px;
overflow:hidden;
}
.accordion-collapse.collapse:not(.show){ border:none; }
.accordion-body{
background:rgba(255,255,255,.9);
padding:20px 28px 24px;
color:var(--text-soft);
line-height:1.9;
font-size:.98rem;
font-weight:300;
}
/* Number style for FAQs */
.faq-num{
display:inline-flex;
width:28px;
height:28px;
border-radius:50%;
background:rgba(200,168,145,.15);
color:var(--accent-2);
font-size:.72rem;
font-weight:700;
align-items:center;
justify-content:center;
flex-shrink:0;
margin-right:12px;
}
/* ─── CONTACT ─────────────────────────────────────────────── */
#contacto{
background:
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(200,168,145,.10) 0%, transparent 60%),
var(--bg-2);
}
.contact-shell{
overflow:hidden;
border-radius:var(--radius-xl);
box-shadow:var(--shadow-xl);
border:1px solid rgba(223,209,199,.6);
background:#fff;
}
.contact-info{
height:100%;
padding:48px 44px;
background:
radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,255,255,.5) 0%, transparent 60%),
linear-gradient(160deg, #f2e6dd 0%, #ecddd3 50%, #f5ece5 100%);
position:relative;
overflow:hidden;
}
.contact-info::before{
content:"";
position:absolute;
top:-60px;
right:-60px;
width:260px;
height:260px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.45) 0%, transparent 70%);
pointer-events:none;
}
.contact-info-label{
font-family:var(--font-display);
font-size:clamp(1.6rem,2.8vw,2.2rem);
font-weight:700;
font-style:italic;
color:var(--accent-3);
line-height:1.15;
margin:0 0 12px;
position:relative;
z-index:1;
}
.contact-info > p{
margin:0 0 32px;
color:var(--accent-2);
line-height:1.82;
font-size:.97rem;
font-weight:300;
position:relative;
z-index:1;
max-width:320px;
}
.contact-list{
display:grid;
gap:0;
position:relative;
z-index:1;
}
.contact-item{
display:flex;
align-items:center;
gap:14px;
padding:18px 0;
border-bottom:1px solid rgba(160,125,104,.15);
}
.contact-item:first-child{ padding-top:0; }
.contact-item:last-child{ border-bottom:none; padding-bottom:0; }
.contact-item .icon-chip{
width:46px;
height:46px;
border-radius:14px;
margin-bottom:0;
flex-shrink:0;
background:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.7);
box-shadow:0 4px 12px rgba(160,125,104,.12);
}
.contact-item strong{
display:block;
margin-bottom:2px;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--accent-3);
font-weight:700;
}
.contact-item span,
.contact-item a{
color:var(--accent-3);
line-height:1.6;
font-size:.97rem;
word-break:break-word;
font-weight:500;
}
.contact-item a:hover{ text-decoration:underline; }
/* Contact form */
.contact-form{
padding:48px 44px;
background:linear-gradient(160deg, #ffffff 0%, #fdfaf8 100%);
}
.contact-form-title{
font-family:var(--font-display);
font-size:1.5rem;
font-weight:700;
letter-spacing:-.02em;
color:var(--text);
margin:0 0 28px;
}
.form-label{
margin-bottom:7px;
color:var(--text);
font-size:.84rem;
font-weight:600;
letter-spacing:.02em;
text-transform:uppercase;
}
.form-control,
.form-select{
min-height:52px;
border-radius:14px;
border:1.5px solid rgba(223,209,199,.8);
background:#fff;
color:var(--text);
padding:12px 16px;
font-size:.97rem;
font-family:var(--font-body);
box-shadow:none !important;
transition:border-color .2s ease, box-shadow .2s ease;
}
textarea.form-control{
min-height:140px;
resize:vertical;
}
.form-control:focus,
.form-select:focus{
border-color:rgba(200,168,145,.75);
box-shadow:0 0 0 4px rgba(200,168,145,.10) !important;
background:#fff;
}
.form-control::placeholder{ color:var(--text-muted); font-weight:300; }
.visually-hidden-field{
position:absolute !important;
left:-9999px !important;
opacity:0 !important;
pointer-events:none !important;
}
/* ─── FOOTER ─────────────────────────────────────────────── */
footer{
position:relative;
overflow:hidden;
background:linear-gradient(135deg, #2e1f17 0%, #3d2a1f 40%, #4a3428 100%);
color:#fff;
padding:80px 0 28px;
}
footer::before{
content:"";
position:absolute;
top:0; left:0; right:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(200,168,145,.4) 50%, transparent);
}
footer::after{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:480px;
height:480px;
border-radius:50%;
background:radial-gradient(circle, rgba(200,168,145,.12) 0%, transparent 65%);
pointer-events:none;
}
.footer-bottom-blob{
position:absolute;
bottom:-80px;
left:-80px;
width:320px;
height:320px;
border-radius:50%;
background:radial-gradient(circle, rgba(200,168,145,.08) 0%, transparent 70%);
pointer-events:none;
}
.footer-brand{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}
.footer-brand img{
height:40px;
width:auto;
object-fit:contain;
flex-shrink:0;
}
.footer-brand-name{
font-family:var(--font-display);
font-size:1.3rem;
font-weight:800;
color:#fff;
line-height:1;
}
.footer-brand-tag{
font-size:.63rem;
color:rgba(200,168,145,.8);
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
margin-top:3px;
}
.footer-text{
color:rgba(255,255,255,.6);
line-height:1.9;
max-width:340px;
margin:0 0 24px;
font-size:.95rem;
font-weight:300;
}
.footer-social{
display:flex;
gap:10px;
}
.footer-social-link{
width:40px;
height:40px;
border-radius:12px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,.7);
transition:.2s ease;
}
.footer-social-link:hover{
background:rgba(200,168,145,.25);
border-color:rgba(200,168,145,.35);
color:#fff;
transform:translateY(-2px);
}
.footer-title{
font-size:.78rem;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
margin:0 0 20px;
color:rgba(200,168,145,.9);
}
.footer-links,
.footer-contact{
display:grid;
gap:10px;
}
.footer-links a,
.footer-contact a,
.footer-contact span{
color:rgba(255,255,255,.6);
font-size:.93rem;
line-height:1;
font-weight:300;
transition:.2s ease;
}
.footer-links a:hover,
.footer-contact a:hover{
color:rgba(200,168,145,.9);
}
.footer-divider{
height:1px;
background:rgba(255,255,255,.08);
margin:40px 0 24px;
}
.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
color:rgba(255,255,255,.38);
font-size:.82rem;
}
.footer-bottom a{
color:rgba(200,168,145,.8);
font-weight:600;
transition:.2s ease;
}
.footer-bottom a:hover{ color:var(--accent); }
/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal{
opacity:0;
transform:translateY(28px);
transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.visible{
opacity:1;
transform:none;
}
/* stagger children */
.reveal-stagger > *{
opacity:0;
transform:translateY(20px);
transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.reveal-stagger.visible > *:nth-child(1){ opacity:1; transform:none; transition-delay:.0s; }
.reveal-stagger.visible > *:nth-child(2){ opacity:1; transform:none; transition-delay:.08s; }
.reveal-stagger.visible > *:nth-child(3){ opacity:1; transform:none; transition-delay:.16s; }
.reveal-stagger.visible > *:nth-child(4){ opacity:1; transform:none; transition-delay:.24s; }
.reveal-stagger.visible > *:nth-child(5){ opacity:1; transform:none; transition-delay:.32s; }
.reveal-stagger.visible > *:nth-child(6){ opacity:1; transform:none; transition-delay:.40s; }
/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1199.98px){
.hero-grid{
grid-template-columns:1fr;
gap:50px;
}
.hero-copy{ max-width:780px; }
.hero-shell{ width:min(100%,680px); }
.hero-float.top{ left:8px; }
.hero-float.bottom{ right:8px; }
.about-layout{ grid-template-columns:1fr; }
.about-accent-col{ padding:44px 36px; }
.about-text-col{ padding:44px 36px; }
}
@media (max-width:991.98px){
.section{ padding:90px 0; }
#inicio{ min-height:clamp(360px,64vh,620px); }
.hero-content-block{ padding:60px 0 90px; }
.navbar-collapse{
margin-top:12px;
padding:16px;
border-radius:22px;
background:rgba(255,253,251,.96);
border:1px solid rgba(223,209,199,.55);
box-shadow:var(--shadow-md);
}
.nav-cta{ margin-left:0; margin-top:8px; }
.services-grid{ grid-template-columns:1fr; }
.choose-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px){
.section{ padding:78px 0; }
.section-head{ margin-bottom:40px; }
.hero-title{ font-size:clamp(2.4rem,9.5vw,3.8rem); }
#inicio{ min-height:clamp(300px,48vh,460px); }
.hero-content-block{ padding:50px 0 78px; }
.hero-points{ grid-template-columns:1fr; }
.choose-grid{ grid-template-columns:1fr; }
.contact-info{ padding:36px 28px; }
.contact-form{ padding:36px 28px; }
.footer-bottom{ flex-direction:column; align-items:flex-start; }
.gal-frame{ height:clamp(260px,42vh,420px); }
}
@media (max-width:575.98px){
.navbar-brand img{ height:38px; }
#inicio{ min-height:260px; background-position:center center; }
.hero-content-block{ padding-top:42px; }
.hero-actions{ flex-direction:column; align-items:stretch; }
.btn-main,.btn-soft,.btn-outline-soft{ width:100%; }
.hero-card{ padding:10px; border-radius:32px; }
.hero-card img{ border-radius:24px; aspect-ratio:auto; max-height:400px; }
.hero-float{ position:static; margin-top:12px; }
.hero-shell{ display:grid; }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{ width:46px; height:46px; margin:0 6px; }
.contact-shell{ border-radius:var(--radius-lg); }
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
--wa:#25D366;
--wa-dark:#1fb85a;
--wa-darker:#189a4a;
--light-bg:#ffffff;
--light-bg-soft:#f8f5f2;
--light-border:#e7ddd6;
--dark-text:#171717;
--muted-text:#7a6f68;
}
.ig-float{
position:fixed;
right:18px;
bottom:92px;
z-index:9998;
width:54px;
height:54px;
border-radius:50%;
display:grid;
place-items:center;
color:#fff;
text-decoration:none;
background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:transform .25s, box-shadow .25s, opacity .25s;
}
.ig-float:hover{
transform:translateY(-2px) scale(1.04);
box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
background:var(--wa);
color:#fff;
border:0;
width:60px;
height:60px;
border-radius:50%;
display:grid;
place-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.22);
cursor:pointer;
transition:transform .3s, box-shadow .3s, filter .3s;
position:relative;
overflow:hidden;
z-index:9999;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(0,0,0,.28);
filter:brightness(.98);
}
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--light-bg);
color:var(--dark-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--light-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
z-index:10000;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
background:linear-gradient(135deg, #ffffff, #f6efe9);
border-bottom:1px solid var(--light-border);
}
.wa-avatar{
width:40px;
height:40px;
border-radius:10px;
background:#f6efe9;
display:grid;
place-items:center;
border:1px solid #ead8cb;
overflow:hidden;
}
.wa-title{
font-weight:800;
font-size:1.02rem;
color:var(--dark-text);
}
.wa-status{
font-size:.85rem;
color:var(--muted-text);
display:flex;
align-items:center;
gap:6px;
}
.wa-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--wa);
}
.wa-close{
margin-left:auto;
background:transparent;
color:var(--muted-text);
border:0;
font-size:24px;
cursor:pointer;
opacity:.75;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.wa-close:hover{
opacity:1;
background:rgba(0,0,0,.04);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:var(--light-bg-soft);
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:9px 11px;
border-radius:14px;
line-height:1.35;
box-shadow:0 3px 10px rgba(0,0,0,.06);
animation:fadeIn .25s ease;
font-size:0.9rem;
}
@keyframes fadeIn{
from{opacity:0; transform:translateY(5px)}
to{opacity:1; transform:none}
}
.wa-bot{
background:#ffffff;
border:1px solid var(--light-border);
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background:var(--wa);
color:#fff;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px 12px;
background:#ffffff;
border-top:1px solid var(--light-border);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--light-border);
background:#fbfaf8;
color:var(--dark-text);
outline:none;
min-height:44px;
font-family:inherit;
font-size:0.9rem;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:var(--wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
background:#ffffff;
}
.wa-send{
background:var(--wa);
color:#ffffff;
border:0;
border-radius:12px;
padding:0 16px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.wa-send:hover{
background:var(--wa-dark);
transform:scale(1.04);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.03); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.18); }
@media (max-width:480px){
.ig-float{
right:12px;
bottom:86px;
width:52px;
height:52px;
}
.wa-float{
right:12px;
bottom:12px;
}
.wa-card{
width:calc(100vw - 24px);
right:0;
}
}