cooperativamanodelaribera.com.ar
https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css/* ═══════════════════════════════════════
VARIABLES & RESET
═══════════════════════════════════════ */
:root {
--accent: #efb208;
--accent-dark: #c99a00;
--accent-glow: rgba(252,197,1,.18);
--ink: #0b0b0b;
--muted: #5d5d5d;
--line: #e8e8e8;
--soft: #f8f8f8;
--white: #ffffff;
--shadow: 0 20px 60px rgba(0,0,0,.09);
--shadow-xl:0 32px 80px rgba(0,0,0,.13);
--radius: 10px;
--radius-lg:18px;
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'DM Sans', sans-serif;
--nav-h: 70px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--white);
overflow-x: hidden;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ═══════════════════════════════════════
NAVBAR
═══════════════════════════════════════ */
.site-navbar {
height: var(--nav-h);
background: rgba(255,255,255,.92);
border-bottom: 1px solid rgba(0,0,0,.06);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.04);
transition: box-shadow .3s;
}
.site-navbar .container {
height: 100%;
display: flex;
align-items: center;
}
.navbar-brand {
display: flex;
align-items: center;
gap: .7rem;
font-family: var(--font-body);
font-weight: 700;
color: var(--ink);
flex-shrink: 0;
}
.brand-logo {
height: 40px;
width: auto;
object-fit: contain;
flex: 0 0 auto;
}
.brand-text {
font-size: .82rem;
line-height: 1.2;
max-width: 240px;
font-weight: 600;
letter-spacing: -.01em;
}
.navbar-toggler {
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: .42rem .6rem;
background: transparent;
margin-left: auto;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-glow); outline: none; }
.navbar-nav { gap: .1rem; }
.nav-link {
color: var(--ink);
font-weight: 600;
font-size: .9rem;
padding: .5rem .9rem !important;
border-radius: 6px;
transition: background .18s, color .18s;
letter-spacing: -.01em;
}
.nav-link:hover { background: var(--soft); color: var(--ink); }
.nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .55rem 1.15rem !important;
background: var(--accent);
color: var(--ink) !important;
border-radius: var(--radius);
font-weight: 800;
font-size: .88rem;
border: 1.5px solid var(--accent-dark);
letter-spacing: -.01em;
transition: background .18s, transform .18s, box-shadow .18s;
margin-left: .4rem;
}
.nav-cta:hover {
background: #ffd633;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(252,197,1,.35);
}
/* ═══════════════════════════════════════
SHARED SECTION
═══════════════════════════════════════ */
.section {
padding: 96px 0;
scroll-margin-top: var(--nav-h);
}
.section-soft { background: var(--soft); }
/* ═══════════════════════════════════════
EYEBROW
═══════════════════════════════════════ */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
color: #7a5e00;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: .9rem;
}
.eyebrow::before {
content: "";
display: block;
width: 28px;
height: 2.5px;
background: var(--accent);
border-radius: 99px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════
SECTION HEADINGS
═══════════════════════════════════════ */
.section-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 900;
line-height: 1.0;
letter-spacing: -.01em;
color: var(--ink);
text-transform: uppercase;
}
.section-subtitle {
max-width: 680px;
margin: 1rem auto 0;
color: var(--muted);
font-size: 1.02rem;
line-height: 1.7;
}
/* ═══════════════════════════════════════
HERO
═══════════════════════════════════════ */
.hero {
min-height: 100vh;
padding-top: calc(var(--nav-h) + 64px);
padding-bottom: 80px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: #fff;
}
/* subtle grain */
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)' opacity='0.025'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: .4;
}
.hero .container { position: relative; z-index: 1; }
/* accent stripe top */
.hero-stripe {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--accent);
color: var(--ink);
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
padding: .38rem .85rem;
border-radius: 99px;
margin-bottom: 1.4rem;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(2.8rem, 7.5vw, 6.2rem);
line-height: .95;
font-weight: 900;
color: var(--ink);
letter-spacing: -.02em;
text-transform: uppercase;
margin-bottom: 1.4rem;
}
.hero-title em {
font-style: normal;
color: var(--accent);
-webkit-text-stroke: 0;
}
.hero-lead {
max-width: 580px;
color: #2c2c2c;
font-size: clamp(1rem, 1.4vw, 1.12rem);
margin-bottom: .85rem;
line-height: 1.7;
}
.hero-support {
max-width: 560px;
color: var(--muted);
font-size: .96rem;
margin-bottom: 2.2rem;
line-height: 1.65;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: .9rem;
align-items: ce
/* ...cortado... */
:root {
--wa: #25D366;
--wa-dark: #1fb85a;
--wa-light-bg: #ffffff;
--wa-soft: #f6f8f7;
--wa-border: #dde4df;
--wa-text: #1c1f1d;
--wa-muted: #6c756f;
}
.wa-float {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
font-family: inherit;
}
.wa-btn {
width: 62px;
height: 62px;
border: 0;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--wa);
color: #fff;
cursor: pointer;
box-shadow: 0 12px 34px rgba(0,0,0,.26);
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
animation: waPulse 2.8s ease-out infinite;
}
.wa-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 16px 42px rgba(0,0,0,.32);
filter: brightness(.98);
}
@keyframes waPulse {
0% {
box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 0 rgba(37,211,102,.42);
}
70% {
box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 14px rgba(37,211,102,0);
}
100% {
box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 0 rgba(37,211,102,0);
}
}
.wa-card {
position: absolute;
right: 0;
bottom: 78px;
width: min(360px, 92vw);
background: var(--wa-light-bg);
color: var(--wa-text);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 60px rgba(0,0,0,.25);
border: 1px solid var(--wa-border);
transform: translateY(10px);
opacity: 0;
transition: transform .28s ease, opacity .28s ease;
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, #ecf6f0);
border-bottom: 1px solid var(--wa-border);
}
.wa-avatar {
width: 42px;
height: 42px;
border-radius: 12px;
background: #e9f7ef;
display: grid;
place-items: center;
border: 1px solid #cfeeda;
overflow: hidden;
flex: 0 0 auto;
}
.wa-avatar img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.wa-meta {
min-width: 0;
}
.wa-title {
font-weight: 800;
font-size: 1rem;
color: var(--wa-text);
line-height: 1.15;
}
.wa-status {
font-size: .84rem;
color: var(--wa-muted);
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.wa-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wa);
flex: 0 0 auto;
}
.wa-close {
margin-left: auto;
background: transparent;
color: var(--wa-muted);
border: 0;
font-size: 25px;
cursor: pointer;
opacity: .75;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, opacity .2s ease;
}
.wa-close:hover {
opacity: 1;
background: rgba(0,0,0,.05);
}
.wa-body {
padding: 13px 14px;
max-height: 40vh;
overflow: auto;
background: var(--wa-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: waFadeIn .25s ease;
font-size: .9rem;
}
@keyframes waFadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: none;
}
}
.wa-bot {
background: #ffffff;
border: 1px solid var(--wa-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(--wa-border);
}
.wa-compose textarea {
resize: none;
border-radius: 12px;
padding: 10px 12px;
border: 1px solid var(--wa-border);
background: #f9fbfa;
color: var(--wa-text);
outline: none;
min-height: 44px;
font-family: inherit;
font-size: .9rem;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.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: background .2s ease, transform .2s ease;
}
.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,.14);
border-radius: 3px;
}
@media (max-width: 480px) {
.wa-float {
right: 12px;
bottom: 12px;
}
.wa-btn {
width: 58px;
height: 58px;
}
.wa-card {
width: calc(100vw - 24px);
right: 0;
bottom: 72px;
}
}
gruashbm.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap:root {
--accent: #cc2132;
--accent-dark: #551b20;
--accent-glow: rgba(198, 74, 26, .18);
--ink: #0d0f12;
--ink-mid: #1c1f24;
--muted: #5a5f6a;
--line: #e4e7ed;
--line-strong: #cdd1d9;
--soft: #f4f5f8;
--soft-2: #eceef2;
--white: #ffffff;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 22px;
--shadow-sm: 0 2px 8px rgba(13,15,18,.06);
--shadow-md: 0 8px 24px rgba(13,15,18,.09);
--shadow-lg: 0 20px 50px rgba(13,15,18,.11);
--shadow-xl: 0 32px 72px rgba(13,15,18,.14);
--transition: .22s cubic-bezier(.4,0,.2,1);
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
background: var(--white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* ─── TYPOGRAPHY ─── */
.section-title {
font-family: var(--font-display);
font-size: clamp(2.1rem, 4.5vw, 3.2rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -.01em;
margin: 0 0 1rem;
}
.section-subtitle {
color: var(--muted);
font-size: 1.06rem;
line-height: 1.72;
max-width: 720px;
margin: 0 auto;
}
.text-block {
color: var(--muted);
font-size: 1rem;
line-height: 1.82;
}
.text-block p + p { margin-top: .9rem; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--accent);
font-family: var(--font-display);
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: .9rem;
}
.eyebrow::before {
content: "";
width: 24px;
height: 2.5px;
background: var(--accent);
border-radius: 999px;
flex: 0 0 24px;
}
/* ─── SECTIONS ─── */
.section { padding: 96px 0; }
.section-soft { background: var(--soft); }
.section-soft-2 { background: var(--soft-2); }
/* ─── BUTTONS ─── */
.btn-accent {
--bs-btn-color: #fff;
--bs-btn-bg: var(--accent);
--bs-btn-border-color: var(--accent);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--accent-dark);
--bs-btn-hover-border-color: var(--accent-dark);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--accent-dark);
--bs-btn-active-border-color: var(--accent-dark);
border-radius: var(--radius);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: .03em;
padding: .8rem 1.6rem;
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
box-shadow: 0 4px 16px rgba(198,74,26,.25);
}
.btn-accent:hover {
box-shadow: 0 6px 22px rgba(198,74,26,.38);
transform: translateY(-1px);
}
.btn-outline-accent {
--bs-btn-color: var(--accent);
--bs-btn-border-color: rgba(198,74,26,.4);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--accent);
--bs-btn-hover-border-color: var(--accent);
border-radius: var(--radius);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: .03em;
padding: .8rem 1.6rem;
background: var(--white);
transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-outline-accent:hover { transform: translateY(-1px); }
/* ─── NAVBAR ─── */
.navbar {
background: rgba(255,255,255,.97);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: box-shadow var(--transition);
padding-top: .6rem;
padding-bottom: .6rem;
}
.navbar.scrolled {
box-shadow: var(--shadow-md);
}
.navbar-brand {
gap: .7rem;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.brand-logo {
width: auto;
height: 42px;
object-fit: contain;
}
.navbar-nav .nav-link {
color: var(--ink-mid);
font-family: var(--font-body);
font-size: .88rem;
font-weight: 600;
letter-spacing: .01em;
padding-inline: .75rem;
padding-block: .45rem;
border-radius: 6px;
transition: color var(--transition), background var(--transition);
position: relative;
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
bottom: 2px;
left: .75rem;
right: .75rem;
height: 2px;
background: var(--accent);
border-radius: 999px;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: var(--accent);
background: var(--accent-glow);
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }
.navbar-toggler {
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
padding: .42rem .55rem;
}
/* ─── HERO ─── */
.hero {
padding: 64px 0 0;
background: var(--white);
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 95% 10%, rgba(198,74,26,.07) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 5% 80%, rgba(198,74,26,.04) 0%, transparent 70%);
pointer-events: none;
}
.hero-inner {
padding-bottom: 82px;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 5.2rem);
line-height: 1;
font-weight: 900;
letter-spacing: -.02em;
margin-bottom: 1.1rem;
}
.hero h1 em {
color: var(--accent);
font-style: normal;
}
.hero-subtitle {
color: var(--ink-mid);
font-family: var(--font-display);
font-size: clamp(1.1rem, 2.2vw, 1.38rem);
font-weight: 600;
letter-spacing: .01em;
margin-bottom: 1rem;
}
.hero-text {
color: var(--muted);
font-size: 1.02rem;
line-height: 1.78;
max-width: 600px;
margin-bottom: 2rem;
}
.hero-media {
position: relative;
border-radius: var(--radius-xl);
background: var(--soft);
box-shadow: var(--shadow-xl);
overflow: hidden;
min-height: clamp(320px, 44vw, 560px);
display: flex;
align-items: center;
justify-content: center;
}
.hero-media::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1.5px solid rgba(255,255,255,.6);
z-index: 2;
pointer-events: none;
}
.hero-media::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 5px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
z-index: 3;
}
.hero-
/* ...cortado... */
.text-muted-small {
font-size: 0.99rem;
color: #999;
font-weight: 400;
margin: 0;
line-height: 1.2;
text-align: center; /* centrado */
}
:root{
--wa:#25D366;
--wa-dark:#1fb85a;
--wa-bg:#ffffff;
--wa-soft:#f6f8f7;
--wa-border:#dde4df;
--wa-text:#1c1f1d;
--wa-muted:#6c756f;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
width:60px;
height:60px;
border:0;
border-radius:50%;
background:var(--wa);
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.22);
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.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(--wa-bg);
color:var(--wa-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--wa-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s ease, opacity .3s ease;
}
.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, #ecf6f0);
border-bottom:1px solid var(--wa-border);
}
.wa-avatar{
width:40px;
height:40px;
border-radius:10px;
background:#e9f7ef;
display:grid;
place-items:center;
border:1px solid #cfeeda;
overflow:hidden;
flex:0 0 auto;
}
.wa-avatar img{
width:28px;
height:28px;
object-fit:contain;
display:block;
}
.wa-title{
font-weight:800;
font-size:1rem;
color:var(--wa-text);
line-height:1.1;
}
.wa-status{
font-size:.84rem;
color:var(--wa-muted);
display:flex;
align-items:center;
gap:6px;
margin-top:2px;
}
.wa-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--wa);
}
.wa-close{
margin-left:auto;
width:32px;
height:32px;
border:0;
border-radius:50%;
background:transparent;
color:var(--wa-muted);
font-size:24px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s ease;
}
.wa-close:hover{
background:rgba(0,0,0,.05);
color:var(--wa-text);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:var(--wa-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);
font-size:.9rem;
}
.wa-bot{
background:#ffffff;
border:1px solid var(--wa-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(--wa-border);
}
.wa-compose textarea{
resize:none;
min-height:44px;
max-height:120px;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--wa-border);
background:#f9fbfa;
color:var(--wa-text);
outline:none;
font-family:inherit;
font-size:.9rem;
transition:.2s ease;
}
.wa-compose textarea:focus{
border-color:var(--wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
background:#ffffff;
}
.wa-send{
border:0;
border-radius:12px;
background:var(--wa);
color:#ffffff;
padding:0 16px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s ease;
}
.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,.14);
border-radius:3px;
}
@media (max-width:480px){
.wa-float{
right:12px;
bottom:12px;
}
.wa-btn{
width:56px;
height:56px;
}
.wa-card{
width:calc(100vw - 24px);
right:0;
bottom:70px;
}
}
dracoteamargentina.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=BioRhyme:wght@400;700;800&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@500;600;700&display=swap@font-face {
font-family: 'Ziggurat';
src:
local('Ziggurat'),
local('Ziggurat HTF'),
local('Ziggurat HTF Black'),
local('Ziggurat-HTF-Black'),
url('fonts/Ziggurat.woff2') format('woff2'),
url('fonts/Ziggurat.woff') format('woff'),
url('fonts/Ziggurat.ttf') format('truetype'),
url('fonts/ziggurat.woff2') format('woff2'),
url('fonts/ziggurat.woff') format('woff'),
url('fonts/ziggurat.ttf') format('truetype');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
:root {
--accent: #feda00;
--accent-strong: #d0b200;
--dark: #1b171b;
--ink: #111111;
--paper: #ffffff;
--soft: #f6f3ee;
--muted: #666666;
--line: rgba(27,23,27,.12);
--nav-h: 76px;
--display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
--original-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
--ziggurat: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
--body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
--mono: 'SFMono-Regular', Consolas, monospace;
--ease: cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6,
.brand-text,
.nav-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit,
.service-card h3,
.why-card h3,
.featured-product-title,
.footer-brand-name,
.footer-list a {
font-family: var(--display);
}
p,
.lead-copy,
.section-subtitle,
.hero-lead,
.hero-secondary,
.service-card p,
.why-card p,
.accordion-body,
.contact-detail,
.footer-tagline {
font-family: var(--body);
}
.brand-text,
.nav-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit,
.hero-title,
.section-title,
.service-card h3,
.why-card h3,
.featured-product-title,
.footer-brand-name {
font-weight: 400 !important;
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: .022;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 256px;
}
.site-nav {
min-height: var(--nav-h);
background: rgba(255,255,255,.9);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border-bottom: 1px solid var(--line);
transition: background .25s var(--ease), box-shadow .25s var(--ease);
z-index: 1040;
}
.site-nav.is-scrolled {
background: rgba(255,255,255,.98);
box-shadow: 0 2px 0 var(--line), 0 12px 34px rgba(27,23,27,.08);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { height: 42px; width: auto; object-fit: contain; flex: 0 0 auto; }
.brand-text { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .035em; line-height: 1; color: var(--dark); text-transform: uppercase; white-space: nowrap; }
.navbar-toggler {
width: 44px;
height: 44px;
border: 1.5px solid var(--dark);
border-radius: 4px;
padding: 0;
background: transparent;
box-shadow: none !important;
display: grid;
place-items: center;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(254,218,0,.28) !important; }
.toggler-bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.toggler-bars span { display: block; height: 1.5px; background: var(--dark); }
.nav-link {
font-family: var(--display);
font-size: 14px;
font-weight: 700;
letter-spacing: .055em;
text-transform: uppercase;
color: var(--dark);
padding: .6rem .72rem !important;
transition: color .18s var(--ease);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: .72rem;
right: .72rem;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .22s var(--ease);
}
.nav-link:hover { color: var(--accent-strong); }
.nav-link:hover::after { transform: scaleX(1); }
.btn-accent, .btn-outline-dark-brand {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
border-radius: 0;
font-family: var(--display);
font-size: 14px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-accent {
background: var(--dark);
color: #fff !important;
border: 1px solid var(--dark);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.btn-accent:hover { background: var(--accent); border-color: var(--accent); color: var(--dark) !important; transform: translateY(-1px); }
.btn-outline-dark-brand {
color: var(--dark);
border: 1.5px solid var(--dark);
background: transparent;
}
.btn-outline-dark-brand:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); transform: translateY(-1px); }
.hero {
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: stretch;
padding: var(--nav-h) 0 0;
position: relative;
isolation: isolate;
overflow: hidden;
background: #030303;
color: #fff;
}
.hero::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: clamp(190px, 28vh, 310px);
background: linear-gradient(180deg, rgba(3,3,3,0), #030303 34%, #030303 100%);
z-index: -1;
}
.hero-shell {
min-height: calc(100vh - var(--nav-h));
min-height: calc(100svh - var(--nav-h));
align-items: stretch;
row-gap: 0;
}
.hero-copy {
max-width: 650px;
min-height: calc(100vh - var(--nav-h));
min-height: calc(100svh - var(--nav-h));
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(48px, 6vw, 86px) 0;
position: relative;
z-index: 2;
}
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::before { background: var(--accent); }
.hero-title {
font-family: var(--display);
font-size: clamp(68px, 9.6vw, 148px);
font-weight: 700;
line-height: .84;
letter-spacing: .03em;
text-transform: uppercase;
color: #fff;
margin: 0 0 22px;
text-wrap: balance;
}
.hero-lead {
max-width: 610px;
font-size: clamp(17px, 1.55vw, 20px);
line-height: 1.65;
color: rgba(255,255,255,.86);
font-weight: 400;
margin-bottom: 18px;
/* ...cortado... */
.hero {
width: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
overflow: hidden;
isolation: isolate;
padding: var(--nav-h) 0 0;
background: #030303;
color: #fff;
}
.hero::before { display: none; }
.hero-video-wrap {
position: relative;
z-index: 0;
width: 100%;
height: clamp(420px, 58vh, 680px);
margin-top: 0;
overflow: hidden;
pointer-events: none;
background: #181f20;
display: flex;
align-items: center;
justify-content: center;
}
.hero-img {
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: center center;
transform: none;
filter: contrast(1.04) saturate(1.02);
background: #181f20;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.03) 56%, rgba(3,3,3,.62) 86%, #030303 100%);
pointer-events: none;
}
.hero-noise {
position: absolute;
inset: 0;
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)' opacity='0.035'/%3E%3C/svg%3E");
background-size: 200px;
opacity: .45;
pointer-events: none;
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
max-width: none;
min-height: clamp(225px, 30vh, 350px);
margin-top: clamp(4px, 1.2vw, 18px);
padding: clamp(24px, 3.2vw, 42px) 24px clamp(30px, 3.8vw, 52px);
background: #030303;
box-shadow: 0 -18px 54px rgba(0,0,0,.7);
text-align: center;
}
.hero-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
}
.hero-kicker::before,
.hero-kicker::after {
content: '';
width: 28px;
height: 1px;
background: rgba(254,218,0,.7);
}
.hero-title {
width: 100%;
max-width: 100%;
font-family: var(--display);
font-size: clamp(90px, 19vw, 255px);
font-weight: 700;
line-height: .76;
letter-spacing: .02em;
text-transform: uppercase;
text-align: center;
color: #fff;
margin: 0;
overflow-wrap: normal;
white-space: nowrap;
text-shadow: none;
}
.hero-title.is-looping { animation: fadeUpLoop 5s cubic-bezier(.22,1,.36,1) infinite; will-change: transform,opacity; }
.hero-title .char { display: inline-block; opacity: 1; filter: blur(0); transform: none; will-change: transform,opacity,filter; }
.hero-title.is-looping .char { animation: charInLoop 5s cubic-bezier(.22,1,.36,1) infinite; }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-title .space { display: inline-block; width: .12em; }
.hero-line {
width: clamp(70px, 7vw, 124px);
height: 3px;
background: var(--accent);
margin: 16px auto 0;
}
.hero-scroll {
margin-top: 18px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.44);
display: flex;
align-items: center;
gap: 12px;
}
.hero-scroll::before {
content: '';
width: 36px;
height: 1px;
background: rgba(255,255,255,.2);
}
@keyframes fadeUpLoop { 0% { opacity: .001; transform: translateY(40px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes charInLoop { 0% { opacity: .001; filter: blur(12px); transform: translateY(12px); } 14%, 100% { opacity: 1; filter: blur(0); transform: none; } }
@media (min-width: 1400px) {
.hero-video-wrap {
width: 100%;
height: clamp(470px, 59vh, 720px);
margin-top: 0;
}
.hero-content {
min-height: 330px;
padding-bottom: 50px;
}
.hero-title { font-size: clamp(170px, 16vw, 285px); }
}
@media (max-width: 1199.98px) {
.hero-video-wrap {
width: 100%;
height: clamp(330px, 52vh, 560px);
margin-top: 0;
}
.hero-content { min-height: clamp(205px, 30vh, 310px); }
.hero-title { font-size: clamp(86px, 18vw, 190px); }
}
@media (max-width: 767.98px) {
.hero {
min-height: auto;
padding: var(--nav-h) 0 0;
}
.hero-video-wrap {
width: 100%;
height: clamp(285px, 48vh, 430px);
margin-top: 0;
}
.hero-img {
object-fit: cover !important;
object-position: center center;
background: #181f20;
}
.hero-overlay {
height: auto;
background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.04) 62%, rgba(3,3,3,.68) 92%, #030303 100%);
}
.hero-content {
min-height: auto;
margin-top: 0;
padding: 12px 16px 26px;
box-shadow: 0 -10px 34px rgba(0,0,0,.68);
}
.hero-kicker {
font-size: 9px;
letter-spacing: .14em;
margin-bottom: 9px;
}
.hero-kicker::before,
.hero-kicker::after { width: 18px; }
.hero-title {
font-size: clamp(78px, 25vw, 116px);
line-height: .8;
letter-spacing: .03em;
}
.hero-line { margin-top: 10px; }
.hero-scroll { margin-top: 12px; font-size: 9px; }
}
@media (max-width: 390px) {
.hero-video-wrap { height: clamp(260px, 45vh, 360px); }
.hero-title { font-size: clamp(68px, 24vw, 96px); letter-spacing: .025em; }
}
#servicios,
#contacto {
background: #181f20 !important;
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
}
#servicios::before,
#contacto::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 12% 10%, rgba(254,218,0,.16), transparent 34%),
radial-gradient(circle at 88% 18%, rgba(254,218,0,.09), transparent 30%),
linear-gradient(180deg, #181f20 0%, #121819 100%);
pointer-events: none;
}
#servicios::after,
#contacto::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: .22;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
}
#servicios .eyebrow,
#contacto .eyebrow,
#contacto .form-label {
color: var(--accent);
}
#servicios .eyebrow::before,
#contacto .eyebrow::before {
background: var(--accent);
}
#servicios .section-title,
#contacto .section-title {
color: #fff;
text-shadow: 0 16px 42px rgba(0,0,0,.28);
}
#servicios .section-subtitle,
#contacto .section-subtitle {
color: rgba(255,255,255,.72);
}
#servicios .service-card {
background: rgba(255,255,255,.045);
color: #fff;
border-color: rgba(254,218,0,.46);
box-shadow: 0 18px 46px rgba(0,0,0,.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#servicios .service-card::after {
box-shadow: 5px 5px 0 rgba(254,218,0,.34);
}
#servicios .service-card h3 {
color: #fff;
}
#servicios .service-card p {
color: rgba(255,255,255,.68);
}
#servicios .service-num {
color: rgba(254,218,0,.2);
}
#servicios .service-card:hover {
background: var(--accent);
color: var(--dark);
border-color: var(--accent);
box-shadow: 0 24px 56px rgba(0,0,0,.24);
}
#servicios .service-card:hover h3 {
color: var(--dark);
}
#servicios .service-card:hover p {
color: rgba(27,23,27,.78);
}
#servicios .service-card:hover .service-num {
color: rgba(27,23,27,.18);
}
#contacto .contact-big-label {
color: rgba(254,218,0,.08);
}
#contacto .contact-details {
gap: 12px;
}
#contacto .contact-detail {
background: rgba(255,255,255,.055);
color: rgba(255,255,255,.9);
border-left-color: var(--accent);
border-top: 1px solid rgba(254,218,0,.18);
border-right: 1px solid rgba(254,218,0,.18);
border-bottom: 1px solid rgba(254,218,0,.18);
box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
#contacto .contact-detail strong {
color: var(--accent);
}
#contacto .contact-detail a {
color: #fff;
transition: color .18s var(--ease);
}
#contacto .contact-detail a:hover {
color: var(--accent);
}
#contacto .contact-panel {
background: rgba(3,3,3,.36);
border: 1px solid rgba(254,218,0,.35);
box-shadow: 8px 8px 0 rgba(254,218,0,.86), 0 26px 70px rgba(0,0,0,.24);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#contacto .form-control,
#contacto .form-select {
background: rgba(255,255,255,.075);
border-color: rgba(255,255,255,.2);
color: #fff;
}
#contacto .form-control::placeholder {
color: rgba(255,255,255,.38);
}
#contacto .form-control:focus,
#contacto .form-select:focus {
border-color: var(--accent);
background: rgba(255,255,255,.12);
color: #fff;
}
#contacto .form-select option {
background: #181f20;
color: #fff;
}
#contacto .btn-submit {
background: var(--accent);
color: #181f20;
box-shadow: none;
}
#contacto .btn-submit:hover {
background: #fff;
color: #181f20;
box-shadow: 4px 4px 0 rgba(254,218,0,.45);
}
@media (max-width: 575.98px) {
#contacto .contact-panel {
box-shadow: 6px 6px 0 rgba(254,218,0,.86), 0 18px 46px rgba(0,0,0,.22);
}
}
#destacados.featured-products {
background: #181f20 !important;
color: #fff !important;
position: relative;
overflow: hidden;
isolation: isolate;
}
#destacados.featured-products::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 14% 8%, rgba(254,218,0,.15), transparent 34%),
radial-gradient(circle at 86% 22%, rgba(254,218,0,.09), transparent 30%),
linear-gradient(180deg, #181f20 0%, #121819 100%);
pointer-events: none;
}
#destacados.featured-products::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: .22;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 92%);
}
#destacados .eyebrow,
#destacados .featured-product-kicker {
color: var(--accent) !important;
}
#destacados .eyebrow::before,
#destacados .featured-product-kicker::before {
background: var(--accent) !important;
}
#destacados .section-title,
#destacados .featured-product-title {
color: #fff !important;
text-shadow: 0 16px 42px rgba(0,0,0,.28);
}
#destacados .featured-products-head p,
#destacados .featured-product-desc {
color: rgba(255,255,255,.72) !important;
}
#destacados .featured-product-row {
border-top-color: rgba(254,218,0,.22) !important;
}
#destacados .featured-chip {
background: rgba(255,255,255,.055) !important;
border-color: rgba(254,218,0,.34) !important;
color: rgba(255,255,255,.92) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#destacados .featured-product-link {
background: var(--accent) !important;
color: #181f20 !important;
box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
#destacados .featured-product-link:hover {
background: #fff !important;
color: #181f20 !important;
transform: translateY(-2px);
}
#destacados .featured-product-frame {
background: #101617 !important;
border-color: rgba(254,218,0,.28) !important;
box-shadow: 14px 14px 0 rgba(254,218,0,.86), 0 24px 70px rgba(0,0,0,.38) !important;
}
#destacados .featured-product-img-wrap,
#destacados .featured-product-img {
background: #101617 !important;
}
#destacados.featured-products .carousel-control-prev,
#destacados.featured-products .carousel-control-next {
background: rgba(254,218,0,.86) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.26);
}
#destacados.featured-products .carousel-control-prev:hover,
#destacados.featured-products .carousel-control-next:hover {
background: #fff !important;
}
#destacados.featured-products .carousel-indicators button {
background: rgba(254,218,0,.48) !important;
}
#destacados.featured-products .carousel-indicators button.active {
background: #fff !important;
}
@media (max-width: 991.98px) {
#destacados .featured-product-frame {
box-shadow: 10px 10px 0 rgba(254,218,0,.86), 0 18px 48px rgba(0,0,0,.34) !important;
}
}
.hero-title,
.section-title,
.featured-product-title,
.contact-big-label,
.footer-bg-text {
font-weight: 800;
letter-spacing: .006em;
}
.brand-text,
.nav-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit,
.featured-product-link,
.featured-chip,
.service-card h3,
.why-card h3,
.accordion-button,
.footer-brand-name,
.footer-list a {
letter-spacing: .045em;
}
.hero-kicker,
.eyebrow,
.featured-product-kicker,
.form-label,
.footer-col-title {
font-family: var(--mono);
}
#inicio .hero-title {
font-family: var(--original-display) !important;
font-weight: 700 !important;
letter-spacing: .045em;
}
.site-nav .brand-text {
font-family: var(--original-display) !important;
font-weight: 700 !important;
letter-spacing: .035em;
}
#quienes-somos .section-title,
#quienes-somos .quote-line,
#quienes-somos .fact-card {
font-family: var(--original-display) !important;
font-weight: 700 !important;
}
#quienes-somos .section-title,
#quienes-somos .quote-line {
letter-spacing: .018em;
}
#quienes-somos .ziggurat-phrase-title {
font-family: var(--ziggurat) !important;
font-weight: 800 !important;
font-size: clamp(42px, 5.15vw, 72px);
line-height: .94;
letter-spacing: .006em;
max-width: 520px;
margin-bottom: 30px;
}
#quienes-somos .fact-card {
letter-spacing: .06em;
}
#quienes-somos .row {
align-items: center !important;
}
#quienes-somos .about-copy-stack {
width: 100%;
max-width: 620px;
margin-left: clamp(0px, 1vw, 18px);
}
#quienes-somos .about-media-wrap {
width: min(100%, 380px);
margin: 0 0 24px;
}
#quienes-somos .about-fade-ticker {
position: relative;
width: 100%;
height: 218px;
overflow: hidden;
background: #181f20;
border: 1px solid rgba(27,23,27,.14);
box-shadow: 7px 7px 0 var(--accent), 0 16px 38px rgba(27,23,27,.11);
isolation: isolate;
}
#quienes-somos .about-fade-ticker::before {
content: '';
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: radial-gradient(circle at 18% 18%, rgba(254,218,0,.12), transparent 36%);
}
#quienes-somos .about-fade-ticker::after {
content: '';
position: absolute;
inset: 9px;
z-index: 4;
border: 1px solid rgba(255,255,255,.16);
pointer-events: none;
}
#quienes-somos .about-fade-ticker img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
opacity: 0;
padding: 16px;
transform: scale(.985);
filter: contrast(1.03) saturate(1.02);
animation: aboutImageDissolve 12s infinite;
}
#quienes-somos .about-fade-ticker img:nth-child(1) { animation-delay: 0s; }
#quienes-somos .about-fade-ticker img:nth-child(2) { animation-delay: 4s; }
#quienes-somos .about-fade-ticker img:nth-child(3) { animation-delay: 8s; }
#quienes-somos .about-fade-caption {
display: flex;
align-items: center;
min-height: 34px;
margin-top: 8px;
padding: 0 12px;
background: #1b171b;
color: #fff;
border-left: 4px solid var(--accent);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .105em;
line-height: 1.2;
text-transform: uppercase;
box-shadow: 4px 4px 0 rgba(254,218,0,.22);
}
#quienes-somos .lead-copy {
max-width: 620px;
}
#quienes-somos .lead-copy p {
margin-bottom: 22px;
}
@keyframes aboutImageDissolve {
0% { opacity: 0; transform: scale(.98); }
9% { opacity: 1; transform: scale(1); }
32% { opacity: 1; transform: scale(1); }
42% { opacity: 0; transform: scale(1.01); }
100% { opacity: 0; transform: scale(.98); }
}
@media (max-width: 991.98px) {
#quienes-somos .about-copy-stack {
max-width: 100%;
margin-left: 0;
}
#quienes-somos .about-media-wrap {
width: min(100%, 420px);
margin-top: 0;
}
#quienes-somos .about-fade-ticker {
height: clamp(200px, 38vw, 255px);
box-shadow: 7px 7px 0 var(--accent), 0 14px 34px rgba(27,23,27,.11);
}
#quienes-somos .ziggurat-phrase-title {
max-width: 620px;
}
}
@media (max-width: 575.98px) {
#quienes-somos .ziggurat-phrase-title {
font-size: clamp(40px, 13vw, 58px);
line-height: .96;
margin-bottom: 24px;
}
#quienes-somos .about-media-wrap {
width: min(100%, 340px);
margin: 0 auto 24px;
}
#quienes-somos .about-fade-ticker {
height: 205px;
box-shadow: 6px 6px 0 var(--accent), 0 12px 28px rgba(27,23,27,.12);
}
#quienes-somos .about-fade-ticker img { padding: 14px; }
#quienes-somos .about-fade-ticker::after { inset: 8px; }
#quienes-somos .about-fade-caption {
min-height: 32px;
font-size: 8.2px;
letter-spacing: .08em;
padding-inline: 10px;
}
}
@media (max-width: 991.98px) {
.site-nav {
max-width: 100vw;
overflow-x: clip;
}
.site-nav > .container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.site-nav .navbar-brand {
flex: 1 1 auto;
min-width: 0;
max-width: calc(100% - 56px);
margin-right: 8px;
}
.site-nav .brand-logo {
flex: 0 0 auto;
}
.site-nav .brand-text {
display: block;
flex: 1 1 auto;
min-width: 0;
max-width: calc(100vw - 142px) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-nav .navbar-toggler {
flex: 0 0 44px;
width: 44px;
margin-left: auto;
}
.site-nav .navbar-collapse {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.site-nav .navbar-collapse.collapse:not(.show) {
display: none;
}
.site-nav .navbar-collapse.collapsing {
height: 0;
overflow: hidden;
}
.site-nav .navbar-nav {
width: 100%;
align-items: stretch !important;
}
.site-nav .navbar-nav .nav-link,
.site-nav .navbar-nav .nav-cta {
width: 100%;
}
}
@media (max-width: 390px) {
.site-nav .brand-text {
font-size: 15px !important;
letter-spacing: .025em !important;
max-width: calc(100vw - 132px) !important;
}
}
@media (max-width: 575.98px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
main,
section,
footer,
.container,
.row,
[class*="col-"] {
min-width: 0;
}
.section-title,
.featured-product-title,
#quienes-somos .ziggurat-phrase-title,
.service-card h3,
.why-card h3,
.accordion-button,
.contact-detail strong,
.footer-brand-name,
.footer-list a,
.featured-chip,
.featured-product-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit {
max-width: 100%;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
.section-title {
font-size: clamp(34px, 10.4vw, 46px) !important;
line-height: 1;
letter-spacing: .004em;
}
#servicios .section-title,
#destacados .section-title,
#trabajos .section-title,
#contacto .section-title {
font-size: clamp(32px, 9.8vw, 42px) !important;
line-height: 1.03;
}
#quienes-somos .ziggurat-phrase-title {
font-size: clamp(36px, 11.2vw, 50px) !important;
line-height: .98;
letter-spacing: .002em;
}
.featured-product-copy,
.featured-product-media,
.featured-product-row,
.featured-products-head {
width: 100%;
max-width: 100%;
min-width: 0;
}
.featured-product-title {
font-size: clamp(34px, 10.6vw, 44px) !important;
line-height: .98;
letter-spacing: .002em;
text-wrap: balance;
}
.featured-product-desc,
.featured-products-head p,
.section-subtitle,
.lead-copy {
max-width: 100%;
overflow-wrap: break-word;
}
.featured-product-meta {
width: 100%;
max-width: 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.featured-chip {
min-width: 0;
max-width: 100%;
min-height: 32px;
padding: 8px 11px;
font-size: 11.5px;
line-height: 1.15;
letter-spacing: .04em !important;
text-align: center;
}
.featured-product-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit {
min-width: 0;
line-height: 1.18;
text-align: center;
}
.featured-product-link {
padding: 13px 14px;
letter-spacing: .045em !important;
}
.service-card h3,
.why-card h3 {
font-size: 18px;
line-height: 1.16;
letter-spacing: .025em !important;
}
.accordion-button {
gap: 8px;
line-height: 1.18;
}
.faq-num {
flex: 0 0 auto;
}
}
@media (max-width: 390px) {
.section-title {
font-size: clamp(30px, 9.5vw, 38px) !important;
}
#servicios .section-title,
#destacados .section-title,
#trabajos .section-title,
#contacto .section-title {
font-size: clamp(29px, 9.2vw, 36px) !important;
}
.featured-product-title {
font-size: clamp(30px, 9.7vw, 38px) !important;
line-height: 1;
}
#quienes-somos .ziggurat-phrase-title {
font-size: clamp(32px, 10.5vw, 44px) !important;
}
.featured-chip {
font-size: 11px;
letter-spacing: .032em !important;
padding-inline: 9px;
}
}
:root {
--accent: #feda00;
--accent-strong: #d0b200;
--dark: #050505;
--ink: #111111;
--paper: #ffffff;
--soft: #f7f7f2;
--muted: #5d5d5d;
--line: rgba(5,5,5,.12);
}
body {
background: #fff;
color: #111;
}
.site-nav {
background: rgba(255,255,255,.94);
}
.brand-logo,
.footer-logo {
height: 42px;
}
.brand-text {
font-size: 18px;
}
.hero {
background: #050505;
}
.hero-video-wrap {
background: #050505;
}
.hero-img {
object-fit: cover !important;
object-position: center center;
background: #050505;
}
.hero-content {
background: #050505;
}
.hero-kicker,
.eyebrow,
#servicios .eyebrow,
#contacto .eyebrow,
.featured-product-kicker {
color: var(--accent) !important;
}
.hero-kicker::before,
.hero-kicker::after,
.eyebrow::before,
.featured-product-kicker::before {
background: var(--accent) !important;
}
.hero-intro {
width: min(100%, 820px);
margin: 18px auto 0;
color: rgba(255,255,255,.78);
font-size: clamp(15px, 1.45vw, 18px);
line-height: 1.7;
font-family: var(--body);
}
.hero-actions-centered {
justify-content: center;
margin-top: 24px;
}
.hero-actions-centered .btn-outline-dark-brand {
color: #fff;
border-color: rgba(255,255,255,.55);
}
.hero-actions-centered .btn-outline-dark-brand:hover {
background: var(--accent);
border-color: var(--accent);
color: #050505;
}
#servicios,
#contacto {
background: #ffffff !important;
color: #111111 !important;
}
#servicios::before,
#servicios::after,
#contacto::before,
#contacto::after {
display: none !important;
}
#servicios .section-title,
#contacto .section-title {
color: #050505 !important;
text-shadow: none !important;
}
#servicios .section-subtitle,
#contacto .section-subtitle {
color: var(--muted) !important;
}
#servicios .service-card {
background: #fff !important;
color: #111 !important;
border-color: #050505 !important;
box-shadow: none !important;
}
#servicios .service-card h3 {
color: #050505 !important;
}
#servicios .service-card p {
color: var(--muted) !important;
}
#servicios .service-card::after {
box-shadow: 5px 5px 0 #050505 !important;
}
#servicios .service-card:hover {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #050505 !important;
}
#destacados.featured-products {
background: #050505 !important;
}
#destacados .featured-product-frame {
background: #101010 !important;
border-color: rgba(254,218,0,.32) !important;
box-shadow: 14px 14px 0 rgba(254,218,0,.86), 0 24px 70px rgba(0,0,0,.38) !important;
}
.featured-product-img {
object-fit: contain !important;
background: #101010;
}
#contacto .contact-panel {
background: #050505 !important;
border: 1px solid rgba(254,218,0,.55) !important;
box-shadow: 8px 8px 0 var(--accent), 0 26px 70px rgba(0,0,0,.18) !important;
}
#contacto .contact-detail {
background: #fff !important;
color: #111 !important;
border: 1px solid var(--line) !important;
border-left: 4px solid var(--accent) !important;
box-shadow: 0 8px 28px rgba(0,0,0,.06) !important;
}
#contacto .contact-detail strong {
color: #050505 !important;
}
#contacto .contact-detail a {
color: #111 !important;
}
#contacto .contact-detail a:hover {
color: #c2a600 !important;
}
#contacto .form-label {
color: var(--accent) !important;
}
.footer {
background: var(--accent);
}
.footer-brand-name {
font-size: 20px;
}
.footer-tagline,
.footer-list li:not(:has(a)),
.footer-list a,
.footer-bottom,
.footer-bottom a {
color: rgba(5,5,5,.86);
}
.footer-list a:hover,
.footer-bottom a:hover {
color: #fff;
}
.wa-avatar img {
object-fit: contain;
}
@media (max-width: 767.98px) {
.brand-logo { height: 38px; }
.brand-text { font-size: 16px; }
.hero-intro { font-size: 14.5px; line-height: 1.58; }
.hero-actions-centered {
display: grid;
grid-template-columns: 1fr;
width: min(100%, 420px);
}
}
/* FIX FINAL HERO: no agrandar/cortar la imagen principal */
#inicio.hero {
min-height: auto !important;
padding-top: var(--nav-h) !important;
background: #050505 !important;
overflow: hidden !important;
}
#inicio .hero-video-wrap {
position: relative !important;
width: 100% !important;
height: clamp(430px, 54vh, 640px) !important;
max-height: calc(100vh - var(--nav-h) - 255px) !important;
min-height: 390px !important;
overflow: hidden !important;
background: #050505 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#inicio .hero-video-wrap::before {
content: '' !important;
position: absolute !important;
inset: -34px !important;
z-index: 0 !important;
background-image:
linear-gradient(90deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.22) 26%, rgba(5,5,5,.22) 74%, rgba(5,5,5,.86) 100%),
url('img/hero.png') !important;
background-size: cover !important;
background-position: center center !important;
filter: blur(18px) saturate(1.04) contrast(1.04) !important;
transform: scale(1.06) !important;
opacity: .46 !important;
}
#inicio .hero-img {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
max-width: min(100%, 1420px) !important;
object-fit: contain !important;
object-position: center center !important;
padding: clamp(12px, 1.5vw, 22px) !important;
background: transparent !important;
transform: none !important;
filter: contrast(1.04) saturate(1.04) !important;
}
#inicio .hero-overlay {
z-index: 3 !important;
background:
linear-gradient(180deg, rgba(5,5,5,.04) 0%, rgba(5,5,5,0) 48%, rgba(5,5,5,.48) 84%, #050505 100%),
linear-gradient(90deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 18%, rgba(5,5,5,0) 82%, rgba(5,5,5,.55) 100%) !important;
}
#inicio .hero-noise { z-index: 4 !important; opacity: .28 !important; }
#inicio .hero-content {
min-height: 0 !important;
margin-top: 0 !important;
padding: clamp(20px, 2.4vw, 34px) 20px clamp(30px, 3vw, 42px) !important;
background: #050505 !important;
box-shadow: 0 -18px 54px rgba(0,0,0,.72) !important;
}
#inicio .hero-title {
font-size: clamp(76px, 12.2vw, 172px) !important;
line-height: .86 !important;
letter-spacing: .035em !important;
white-space: nowrap !important;
max-width: 100% !important;
}
#inicio .hero-kicker { margin-bottom: 10px !important; }
#inicio .hero-line { margin-top: 14px !important; }
#inicio .hero-intro { margin-top: 16px !important; }
#inicio .hero-actions-centered { margin-top: 20px !important; }
#inicio .hero-scroll { display: none !important; }
@media (min-width: 1400px) {
#inicio .hero-video-wrap {
height: clamp(480px, 55vh, 660px) !important;
max-height: calc(100vh - var(--nav-h) - 280px) !important;
}
#inicio .hero-title { font-size: clamp(120px, 11vw, 180px) !important; }
}
@media (max-width: 991.98px) {
#inicio .hero-video-wrap {
height: clamp(330px, 48vh, 500px) !important;
max-height: none !important;
min-height: 300px !important;
}
#inicio .hero-img { max-width: min(100%, 980px) !important; padding: 10px !important; }
#inicio .hero-title { font-size: clamp(66px, 16vw, 126px) !important; }
}
@media (max-width: 767.98px) {
#inicio.hero { padding-top: var(--nav-h) !important; }
#inicio .hero-video-wrap {
height: clamp(250px, 42vh, 360px) !important;
min-height: 245px !important;
}
#inicio .hero-video-wrap::before {
inset: -22px !important;
filter: blur(14px) saturate(1.03) contrast(1.03) !important;
opacity: .54 !important;
}
#inicio .hero-img {
object-fit: contain !important;
object-position: center center !important;
padding: 8px !important;
}
#inicio .hero-overlay {
background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,.22) 70%, #050505 100%) !important;
}
#inicio .hero-content { padding: 14px 16px 28px !important; }
#inicio .hero-title {
font-size: clamp(54px, 18vw, 90px) !important;
line-height: .9 !important;
letter-spacing: .028em !important;
}
#inicio .hero-intro { font-size: 14.5px !important; line-height: 1.56 !important; }
}
@media (max-width: 420px) {
#inicio .hero-video-wrap { height: clamp(220px, 38vh, 320px) !important; min-height: 220px !important; }
#inicio .hero-title { font-size: clamp(46px, 17vw, 72px) !important; }
#inicio .hero-kicker { font-size: 8.5px !important; letter-spacing: .11em !important; }
}
:root {
--accent: #c89500;
--accent-bright: #f4c313;
--accent-strong: #725500;
--accent-rgb: 200, 149, 0;
--dark: #0d1314;
--dark-2: #151c1d;
--ink: #111314;
--paper: #fbf8ef;
--soft: #eee7d9;
--muted: #585858;
--line: rgba(13,19,20,.14);
}
html,
body {
background: var(--paper) !important;
color: var(--ink) !important;
}
body::after { opacity: .018 !important; }
.site-nav {
background: rgba(251,248,239,.94) !important;
border-bottom-color: rgba(13,19,20,.12) !important;
}
.site-nav.is-scrolled {
background: rgba(251,248,239,.985) !important;
box-shadow: 0 2px 0 rgba(13,19,20,.10), 0 14px 38px rgba(13,19,20,.10) !important;
}
.navbar-collapse { background: var(--paper) !important; }
.navbar-toggler:focus,
.accordion-button:focus,
.form-control:focus,
.form-select:focus {
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .24) !important;
}
.nav-link:hover,
.eyebrow,
.featured-product-kicker { color: var(--accent-strong) !important; }
.nav-link::after,
.eyebrow::before,
.featured-product-kicker::before,
.hero-line,
.fact-card::before,
.why-card::before { background: var(--accent) !important; }
.btn-accent,
.btn-outline-dark-brand:hover,
.fact-card:hover,
.service-card:hover,
.featured-product-link,
.btn-submit {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: var(--dark) !important;
}
.btn-accent:hover,
.featured-product-link:hover,
.btn-submit:hover {
background: var(--dark) !important;
border-color: var(--dark) !important;
color: #fff !important;
}
.section,
#quienes-somos,
#por-que-elegirnos,
#faqs {
background:
radial-gradient(circle at 8% 10%, rgba(var(--accent-rgb), .055), transparent 30%),
linear-gradient(180deg, var(--paper) 0%, #f7f2e7 100%) !important;
}
.section-paper,
#trabajos.section-paper {
background:
radial-gradient(circle at 92% 0%, rgba(var(--accent-rgb), .075), transparent 28%),
linear-gradient(180deg, var(--soft) 0%, #e9dfce 100%) !important;
}
.section-title,
.featured-product-title,
.service-card h3,
.why-card h3,
.accordion-button,
.brand-text { color: var(--dark) !important; }
.section-subtitle,
.lead-copy,
.service-card p,
.why-card p,
.accordion-body,
.featured-product-desc,
.featured-products-head p { color: rgba(17,19,20,.72) !important; }
.quote-line,
.service-card,
.why-card,
.accordion-item,
.accordion-button,
.gal-frame,
.contact-detail {
background: #fffdf7 !important;
border-color: rgba(13,19,20,.16) !important;
}
.quote-line {
border-left-color: var(--accent) !important;
box-shadow: 5px 5px 0 rgba(var(--accent-rgb), .24) !important;
}
.fact-card,
.icon-mark {
background: var(--dark) !important;
color: #fff !important;
}
.why-card:hover { border-color: rgba(var(--accent-rgb), .45) !important; }
.why-card:hover .icon-mark { background: var(--accent) !important; color: var(--dark) !important; }
.accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--accent) !important; }
.accordion-button:not(.collapsed) { box-shadow: inset 0 -2px 0 var(--accent) !important; }
.faq-num { color: rgba(var(--accent-rgb), .72) !important; }
#inicio.hero,
#inicio .hero-content,
#inicio .hero-video-wrap,
.hero,
.hero-content,
.hero-video-wrap { background: #050708 !important; }
#inicio .hero-video-wrap::before {
background-image:
linear-gradient(90deg, rgba(5,7,8,.88) 0%, rgba(5,7,8,.18) 26%, rgba(5,7,8,.18) 74%, rgba(5,7,8,.88) 100%),
url('img/hero.png') !important;
}
#inicio .hero-overlay {
background:
linear-gradient(180deg, rgba(5,7,8,.04) 0%, rgba(5,7,8,0) 48%, rgba(5,7,8,.56) 84%, #050708 100%),
linear-gradient(90deg, rgba(5,7,8,.58) 0%, rgba(5,7,8,0) 18%, rgba(5,7,8,0) 82%, rgba(5,7,8,.58) 100%) !important;
}
.hero-kicker,
#inicio .hero-kicker,
.hero .eyebrow,
#inicio .eyebrow { color: var(--accent-bright) !important; }
.hero-kicker::before,
.hero-kicker::after,
.hero .eyebrow::before,
#inicio .eyebrow::before,
#inicio .hero-line { background: var(--accent-bright) !important; }
.hero .btn-accent,
#inicio .btn-accent {
background: var(--accent-bright) !important;
border-color: var(--accent-bright) !important;
color: #050708 !important;
}
.hero .btn-accent:hover,
#inicio .btn-accent:hover {
background: #fff !important;
border-color: #fff !important;
color: #050708 !important;
}
.hero .btn-outline-dark-brand,
#inicio .btn-outline-dark-brand {
color: #fff !important;
border-color: rgba(255,255,255,.52) !important;
}
.hero .btn-outline-dark-brand:hover,
#inicio .btn-outline-dark-brand:hover {
background: var(--accent-bright) !important;
border-color: var(--accent-bright) !important;
color: #050708 !important;
}
#servicios,
#destacados.featured-products,
#contacto {
background:
radial-gradient(circle at 14% 8%, rgba(244,195,19,.135), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(244,195,19,.08), transparent 30%),
linear-gradient(180deg, #111819 0%, #080c0d 100%) !important;
color: #fff !important;
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
}
#servicios::before,
#destacados.featured-products::before,
#contacto::before {
background:
radial-gradient(circle at 12% 10%, rgba(244,195,19,.16), transparent 34%),
radial-gradient(circle at 88% 18%, rgba(244,195,19,.075), transparent 30%),
linear-gradient(180deg, #111819 0%, #080c0d 100%) !important;
}
#servicios::after,
#destacados.featured-products::after,
#contacto::after {
opacity: .16 !important;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
}
#servicios .eyebrow,
#destacados .eyebrow,
#destacados .featured-product-kicker,
#contacto .eyebrow,
#contacto .form-label { color: var(--accent-bright) !important; }
#servicios .eyebrow::before,
#destacados .eyebrow::before,
#destacados .featured-product-kicker::before,
#contacto .eyebrow::before { background: var(--accent-bright) !important; }
#servicios .section-title,
#destacados .section-title,
#destacados .featured-product-title,
#contacto .section-title {
color: #fff !important;
text-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
}
#servicios .section-subtitle,
#destacados .featured-products-head p,
#destacados .featured-product-desc,
#contacto .section-subtitle { color: rgba(255,255,255,.74) !important; }
#servicios .service-card,
#destacados .featured-chip,
#contacto .contact-detail {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.92) !important;
border-color: rgba(244,195,19,.34) !important;
box-shadow: 0 18px 46px rgba(0,0,0,.23) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#servicios .service-card::after { box-shadow: 5px 5px 0 rgba(244,195,19,.32) !important; }
#servicios .service-card h3,
#contacto .contact-detail strong { color: #fff !important; }
#servicios .service-card p,
#contacto .contact-detail,
#contacto .contact-detail a { color: rgba(255,255,255,.74) !important; }
#servicios .service-num { color: rgba(244,195,19,.24) !important; }
#servicios .service-card:hover {
background: var(--accent-bright) !important;
border-color: var(--ac
/* ...cortado... */
.featured-products {
background: #fff;
color: #1b171b;
overflow: hidden;
}
.featured-products-head {
max-width: 780px;
margin: 0 auto 64px;
text-align: center;
}
.featured-products-head p {
margin: 18px auto 0;
max-width: 660px;
font-size: 17px;
line-height: 1.75;
color: #666;
}
.featured-product-row {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
padding: clamp(42px, 5vw, 76px) 0;
border-top: 1px solid rgba(27,23,27,.12);
}
.featured-product-row:first-of-type {
border-top: 0;
padding-top: 0;
}
.featured-product-row:nth-of-type(even) .featured-product-copy {
order: 2;
}
.featured-product-row:nth-of-type(even) .featured-product-media {
order: 1;
}
.featured-product-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #d0b200;
}
.featured-product-kicker::before {
content: "";
width: 24px;
height: 2px;
background: #feda00;
}
.featured-product-title {
font-family: var(--display, system-ui, sans-serif);
font-size: clamp(44px, 7vw, 92px);
line-height: .9;
letter-spacing: .02em;
text-transform: uppercase;
color: #1b171b;
margin: 0 0 18px;
}
.featured-product-desc {
max-width: 560px;
font-size: 16px;
line-height: 1.78;
color: #565656;
margin: 0 0 24px;
}
.featured-product-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.featured-chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(27,23,27,.16);
background: #f6f3ee;
color: #1b171b;
font-family: var(--display, system-ui, sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.featured-product-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
background: #1b171b;
color: #fff;
font-family: var(--display, system-ui, sans-serif);
font-size: 14px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
transition: transform .2s ease, background .2s ease, color .2s ease;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.featured-product-link:hover {
background: #feda00;
color: #1b171b;
transform: translateY(-2px);
}
.featured-product-frame {
background: #181f20;
padding: clamp(10px, 1.8vw, 18px);
box-shadow: 14px 14px 0 #feda00, 0 24px 70px rgba(27,23,27,.18);
border: 1px solid rgba(27,23,27,.12);
overflow: hidden;
}
.featured-product-img-wrap {
width: 100%;
aspect-ratio: 4 / 5.55;
background: #181f20;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.featured-product-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background: #181f20;
}
.featured-products .carousel-control-prev,
.featured-products .carousel-control-next {
width: 46px;
height: 46px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(27,23,27,.72);
border-radius: 999px;
margin: 0 10px;
}
.featured-products .carousel-control-prev-icon,
.featured-products .carousel-control-next-icon {
width: 2rem;
height: 2rem;
background-size: 60% 60%;
}
.featured-products .carousel-indicators {
bottom: 12px;
margin-bottom: 0;
}
.featured-products .carousel-indicators button {
width: 9px;
height: 9px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,.62);
}
.featured-products .carousel-indicators button.active {
background: #fff;
}
@media (max-width: 991.98px) {
.featured-product-row {
grid-template-columns: 1fr;
gap: 30px;
}
.featured-product-row:nth-of-type(even) .featured-product-copy,
.featured-product-row:nth-of-type(even) .featured-product-media {
order: initial;
}
.featured-product-frame {
box-shadow: 10px 10px 0 #feda00, 0 18px 48px rgba(27,23,27,.16);
}
}
@media (max-width: 575.98px) {
.featured-products-head {
margin-bottom: 42px;
}
.featured-product-row {
padding: 46px 0;
}
.featured-product-title {
font-size: clamp(42px, 15vw, 62px);
}
.featured-product-desc {
font-size: 15px;
}
.featured-product-link {
width: 100%;
}
.featured-product-img-wrap {
aspect-ratio: 4 / 5.6;
}
.featured-products .carousel-control-prev,
.featured-products .carousel-control-next {
width: 40px;
height: 40px;
margin: 0 6px;
}
}
microcerveceriamuon.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=BioRhyme:wght@400;700;800&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@500;600;700&display=swap@font-face {
font-family: 'Ziggurat';
src:
local('Ziggurat'),
local('Ziggurat HTF'),
local('Ziggurat HTF Black'),
local('Ziggurat-HTF-Black'),
url('fonts/Ziggurat.woff2') format('woff2'),
url('fonts/Ziggurat.woff') format('woff'),
url('fonts/Ziggurat.ttf') format('truetype'),
url('fonts/ziggurat.woff2') format('woff2'),
url('fonts/ziggurat.woff') format('woff'),
url('fonts/ziggurat.ttf') format('truetype');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
:root {
--accent: #b9a887;
--accent-strong: #9f8d6c;
--dark: #1b171b;
--ink: #111111;
--paper: #ffffff;
--soft: #f6f3ee;
--muted: #666666;
--line: rgba(27,23,27,.12);
--nav-h: 76px;
--display: 'BioRhyme', 'Barlow', ui-serif, Georgia, serif;
--original-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
--ziggurat: 'Ziggurat', 'Barlow Condensed', 'Barlow', ui-serif, Georgia, serif;
--body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
--mono: 'SFMono-Regular', Consolas, monospace;
--ease: cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6,
.brand-text,
.nav-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit,
.service-card h3,
.why-card h3,
.muon-product-title,
.footer-brand-name,
.footer-list a {
font-family: var(--display);
}
p,
.lead-copy,
.section-subtitle,
.hero-lead,
.hero-secondary,
.service-card p,
.why-card p,
.accordion-body,
.contact-detail,
.footer-tagline {
font-family: var(--body);
}
.brand-text,
.nav-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit,
.hero-title,
.section-title,
.service-card h3,
.why-card h3,
.muon-product-title,
.footer-brand-name {
font-weight: 400 !important;
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: .022;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 256px;
}
.site-nav {
min-height: var(--nav-h);
background: rgba(255,255,255,.9);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border-bottom: 1px solid var(--line);
transition: background .25s var(--ease), box-shadow .25s var(--ease);
z-index: 1040;
}
.site-nav.is-scrolled {
background: rgba(255,255,255,.98);
box-shadow: 0 2px 0 var(--line), 0 12px 34px rgba(27,23,27,.08);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { height: 42px; width: auto; object-fit: contain; flex: 0 0 auto; }
.brand-text { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .035em; line-height: 1; color: var(--dark); text-transform: uppercase; white-space: nowrap; }
.navbar-toggler {
width: 44px;
height: 44px;
border: 1.5px solid var(--dark);
border-radius: 4px;
padding: 0;
background: transparent;
box-shadow: none !important;
display: grid;
place-items: center;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(185,168,135,.28) !important; }
.toggler-bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.toggler-bars span { display: block; height: 1.5px; background: var(--dark); }
.nav-link {
font-family: var(--display);
font-size: 14px;
font-weight: 700;
letter-spacing: .055em;
text-transform: uppercase;
color: var(--dark);
padding: .6rem .72rem !important;
transition: color .18s var(--ease);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: .72rem;
right: .72rem;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .22s var(--ease);
}
.nav-link:hover { color: var(--accent-strong); }
.nav-link:hover::after { transform: scaleX(1); }
.btn-accent, .btn-outline-dark-brand {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
border-radius: 0;
font-family: var(--display);
font-size: 14px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-accent {
background: var(--dark);
color: #fff !important;
border: 1px solid var(--dark);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.btn-accent:hover { background: var(--accent); border-color: var(--accent); color: var(--dark) !important; transform: translateY(-1px); }
.btn-outline-dark-brand {
color: var(--dark);
border: 1.5px solid var(--dark);
background: transparent;
}
.btn-outline-dark-brand:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); transform: translateY(-1px); }
.hero {
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: stretch;
padding: var(--nav-h) 0 0;
position: relative;
isolation: isolate;
overflow: hidden;
background: #030303;
color: #fff;
}
.hero::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: clamp(190px, 28vh, 310px);
background: linear-gradient(180deg, rgba(3,3,3,0), #030303 34%, #030303 100%);
z-index: -1;
}
.hero-shell {
min-height: calc(100vh - var(--nav-h));
min-height: calc(100svh - var(--nav-h));
align-items: stretch;
row-gap: 0;
}
.hero-copy {
max-width: 650px;
min-height: calc(100vh - var(--nav-h));
min-height: calc(100svh - var(--nav-h));
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(48px, 6vw, 86px) 0;
position: relative;
z-index: 2;
}
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::before { background: var(--accent); }
.hero-title {
font-family: var(--display);
font-size: clamp(68px, 9.6vw, 148px);
font-weight: 700;
line-height: .84;
letter-spacing: .03em;
text-transform: uppercase;
color: #fff;
margin: 0 0 22px;
text-wrap: balance;
}
.hero-lead {
max-width: 610px;
font-size: clamp(17px, 1.55vw, 20px);
line-height: 1.65;
color: rgba(255,255,255,.86);
font-weight: 400;
margin-bottom: 18px;
}
.hero-secondary
/* ...cortado... */
.hero {
width: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
overflow: hidden;
isolation: isolate;
padding: var(--nav-h) 0 0;
background: #030303;
color: #fff;
}
.hero::before { display: none; }
.hero-video-wrap {
position: relative;
z-index: 0;
width: 100%;
height: clamp(420px, 58vh, 680px);
margin-top: 0;
overflow: hidden;
pointer-events: none;
background: #181f20;
display: flex;
align-items: center;
justify-content: center;
}
.hero-img {
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: center center;
transform: none;
filter: contrast(1.04) saturate(1.02);
background: #181f20;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.03) 56%, rgba(3,3,3,.62) 86%, #030303 100%);
pointer-events: none;
}
.hero-noise {
position: absolute;
inset: 0;
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)' opacity='0.035'/%3E%3C/svg%3E");
background-size: 200px;
opacity: .45;
pointer-events: none;
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
max-width: none;
min-height: clamp(225px, 30vh, 350px);
margin-top: clamp(4px, 1.2vw, 18px);
padding: clamp(24px, 3.2vw, 42px) 24px clamp(30px, 3.8vw, 52px);
background: #030303;
box-shadow: 0 -18px 54px rgba(0,0,0,.7);
text-align: center;
}
.hero-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
}
.hero-kicker::before,
.hero-kicker::after {
content: '';
width: 28px;
height: 1px;
background: rgba(185,168,135,.7);
}
.hero-title {
width: 100%;
max-width: 100%;
font-family: var(--display);
font-size: clamp(90px, 19vw, 255px);
font-weight: 700;
line-height: .76;
letter-spacing: .02em;
text-transform: uppercase;
text-align: center;
color: #fff;
margin: 0;
overflow-wrap: normal;
white-space: nowrap;
text-shadow: none;
}
.hero-title.is-looping { animation: fadeUpLoop 5s cubic-bezier(.22,1,.36,1) infinite; will-change: transform,opacity; }
.hero-title .char { display: inline-block; opacity: 1; filter: blur(0); transform: none; will-change: transform,opacity,filter; }
.hero-title.is-looping .char { animation: charInLoop 5s cubic-bezier(.22,1,.36,1) infinite; }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-title .space { display: inline-block; width: .12em; }
.hero-line {
width: clamp(70px, 7vw, 124px);
height: 3px;
background: var(--accent);
margin: 16px auto 0;
}
.hero-scroll {
margin-top: 18px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.44);
display: flex;
align-items: center;
gap: 12px;
}
.hero-scroll::before {
content: '';
width: 36px;
height: 1px;
background: rgba(255,255,255,.2);
}
@keyframes fadeUpLoop { 0% { opacity: .001; transform: translateY(40px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes charInLoop { 0% { opacity: .001; filter: blur(12px); transform: translateY(12px); } 14%, 100% { opacity: 1; filter: blur(0); transform: none; } }
@media (min-width: 1400px) {
.hero-video-wrap {
width: 100%;
height: clamp(470px, 59vh, 720px);
margin-top: 0;
}
.hero-content {
min-height: 330px;
padding-bottom: 50px;
}
.hero-title { font-size: clamp(170px, 16vw, 285px); }
}
@media (max-width: 1199.98px) {
.hero-video-wrap {
width: 100%;
height: clamp(330px, 52vh, 560px);
margin-top: 0;
}
.hero-content { min-height: clamp(205px, 30vh, 310px); }
.hero-title { font-size: clamp(86px, 18vw, 190px); }
}
@media (max-width: 767.98px) {
.hero {
min-height: auto;
padding: var(--nav-h) 0 0;
}
.hero-video-wrap {
width: 100%;
height: clamp(285px, 48vh, 430px);
margin-top: 0;
}
.hero-img {
object-fit: cover !important;
object-position: center center;
background: #181f20;
}
.hero-overlay {
height: auto;
background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.04) 62%, rgba(3,3,3,.68) 92%, #030303 100%);
}
.hero-content {
min-height: auto;
margin-top: 0;
padding: 12px 16px 26px;
box-shadow: 0 -10px 34px rgba(0,0,0,.68);
}
.hero-kicker {
font-size: 9px;
letter-spacing: .14em;
margin-bottom: 9px;
}
.hero-kicker::before,
.hero-kicker::after { width: 18px; }
.hero-title {
font-size: clamp(78px, 25vw, 116px);
line-height: .8;
letter-spacing: .03em;
}
.hero-line { margin-top: 10px; }
.hero-scroll { margin-top: 12px; font-size: 9px; }
}
@media (max-width: 390px) {
.hero-video-wrap { height: clamp(260px, 45vh, 360px); }
.hero-title { font-size: clamp(68px, 24vw, 96px); letter-spacing: .025em; }
}
#cervezas,
#contacto {
background: #181f20 !important;
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
}
#cervezas::before,
#contacto::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 12% 10%, rgba(185,168,135,.16), transparent 34%),
radial-gradient(circle at 88% 18%, rgba(185,168,135,.09), transparent 30%),
linear-gradient(180deg, #181f20 0%, #121819 100%);
pointer-events: none;
}
#cervezas::after,
#contacto::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: .22;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
}
#cervezas .eyebrow,
#contacto .eyebrow,
#contacto .form-label {
color: var(--accent);
}
#cervezas .eyebrow::before,
#contacto .eyebrow::before {
background: var(--accent);
}
#cervezas .section-title,
#contacto .section-title {
color: #fff;
text-shadow: 0 16px 42px rgba(0,0,0,.28);
}
#cervezas .section-subtitle,
#contacto .section-subtitle {
color: rgba(255,255,255,.72);
}
#cervezas .service-card {
background: rgba(255,255,255,.045);
color: #fff;
border-color: rgba(185,168,135,.46);
box-shadow: 0 18px 46px rgba(0,0,0,.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#cervezas .service-card::after {
box-shadow: 5px 5px 0 rgba(185,168,135,.34);
}
#cervezas .service-card h3 {
color: #fff;
}
#cervezas .service-card p {
color: rgba(255,255,255,.68);
}
#cervezas .service-num {
color: rgba(185,168,135,.2);
}
#cervezas .service-card:hover {
background: var(--accent);
color: var(--dark);
border-color: var(--accent);
box-shadow: 0 24px 56px rgba(0,0,0,.24);
}
#cervezas .service-card:hover h3 {
color: var(--dark);
}
#cervezas .service-card:hover p {
color: rgba(27,23,27,.78);
}
#cervezas .service-card:hover .service-num {
color: rgba(27,23,27,.18);
}
#contacto .contact-big-label {
color: rgba(185,168,135,.08);
}
#contacto .contact-details {
gap: 12px;
}
#contacto .contact-detail {
background: rgba(255,255,255,.055);
color: rgba(255,255,255,.9);
border-left-color: var(--accent);
border-top: 1px solid rgba(185,168,135,.18);
border-right: 1px solid rgba(185,168,135,.18);
border-bottom: 1px solid rgba(185,168,135,.18);
box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
#contacto .contact-detail strong {
color: var(--accent);
}
#contacto .contact-detail a {
color: #fff;
transition: color .18s var(--ease);
}
#contacto .contact-detail a:hover {
color: var(--accent);
}
#contacto .contact-panel {
background: rgba(3,3,3,.36);
border: 1px solid rgba(185,168,135,.35);
box-shadow: 8px 8px 0 rgba(185,168,135,.86), 0 26px 70px rgba(0,0,0,.24);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#contacto .form-control,
#contacto .form-select {
background: rgba(255,255,255,.075);
border-color: rgba(255,255,255,.2);
color: #fff;
}
#contacto .form-control::placeholder {
color: rgba(255,255,255,.38);
}
#contacto .form-control:focus,
#contacto .form-select:focus {
border-color: var(--accent);
background: rgba(255,255,255,.12);
color: #fff;
}
#contacto .form-select option {
background: #181f20;
color: #fff;
}
#contacto .btn-submit {
background: var(--accent);
color: #181f20;
box-shadow: none;
}
#contacto .btn-submit:hover {
background: #fff;
color: #181f20;
box-shadow: 4px 4px 0 rgba(185,168,135,.45);
}
@media (max-width: 575.98px) {
#contacto .contact-panel {
box-shadow: 6px 6px 0 rgba(185,168,135,.86), 0 18px 46px rgba(0,0,0,.22);
}
}
/* Corrección: la sección completa de estilos/productos también queda oscura */
#estilos.muon-products {
background: #181f20 !important;
color: #fff !important;
position: relative;
overflow: hidden;
isolation: isolate;
}
#estilos.muon-products::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 14% 8%, rgba(185,168,135,.15), transparent 34%),
radial-gradient(circle at 86% 22%, rgba(185,168,135,.09), transparent 30%),
linear-gradient(180deg, #181f20 0%, #121819 100%);
pointer-events: none;
}
#estilos.muon-products::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: .22;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 92%);
}
#estilos .eyebrow,
#estilos .muon-product-kicker {
color: var(--accent) !important;
}
#estilos .eyebrow::before,
#estilos .muon-product-kicker::before {
background: var(--accent) !important;
}
#estilos .section-title,
#estilos .muon-product-title {
color: #fff !important;
text-shadow: 0 16px 42px rgba(0,0,0,.28);
}
#estilos .muon-products-head p,
#estilos .muon-product-desc {
color: rgba(255,255,255,.72) !important;
}
#estilos .muon-product-row {
border-top-color: rgba(185,168,135,.22) !important;
}
#estilos .muon-chip {
background: rgba(255,255,255,.055) !important;
border-color: rgba(185,168,135,.34) !important;
color: rgba(255,255,255,.92) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#estilos .muon-product-link {
background: var(--accent) !important;
color: #181f20 !important;
box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
#estilos .muon-product-link:hover {
background: #fff !important;
color: #181f20 !important;
transform: translateY(-2px);
}
#estilos .muon-product-frame {
background: #101617 !important;
border-color: rgba(185,168,135,.28) !important;
box-shadow: 14px 14px 0 rgba(185,168,135,.86), 0 24px 70px rgba(0,0,0,.38) !important;
}
#estilos .muon-product-img-wrap,
#estilos .muon-product-img {
background: #101617 !important;
}
#estilos.muon-products .carousel-control-prev,
#estilos.muon-products .carousel-control-next {
background: rgba(185,168,135,.86) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.26);
}
#estilos.muon-products .carousel-control-prev:hover,
#estilos.muon-products .carousel-control-next:hover {
background: #fff !important;
}
#estilos.muon-products .carousel-indicators button {
background: rgba(185,168,135,.48) !important;
}
#estilos.muon-products .carousel-indicators button.active {
background: #fff !important;
}
@media (max-width: 991.98px) {
#estilos .muon-product-frame {
box-shadow: 10px 10px 0 rgba(185,168,135,.86), 0 18px 48px rgba(0,0,0,.34) !important;
}
}
/* Ajuste tipográfico: BioRhyme da imprenta/slab old school sin caer en western */
.hero-title,
.section-title,
.muon-product-title,
.contact-big-label,
.footer-bg-text {
font-weight: 800;
letter-spacing: .006em;
}
.brand-text,
.nav-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit,
.muon-product-link,
.muon-chip,
.service-card h3,
.why-card h3,
.accordion-button,
.footer-brand-name,
.footer-list a {
letter-spacing: .045em;
}
.hero-kicker,
.eyebrow,
.muon-product-kicker,
.form-label,
.footer-col-title {
font-family: var(--mono);
}
/* Excepciones tipográficas solicitadas:
BioRhyme queda como base general, pero el hero y Quienes somos conservan la fuente original. */
#inicio .hero-title {
font-family: var(--original-display) !important;
font-weight: 700 !important;
letter-spacing: .045em;
}
.site-nav .brand-text {
font-family: var(--original-display) !important;
font-weight: 700 !important;
letter-spacing: .035em;
}
#quienes-somos .section-title,
#quienes-somos .quote-line,
#quienes-somos .fact-card {
font-family: var(--original-display) !important;
font-weight: 700 !important;
}
#quienes-somos .section-title,
#quienes-somos .quote-line {
letter-spacing: .018em;
}
/* Solo esta frase usa Ziggurat dentro de Quienes somos */
#quienes-somos .ziggurat-phrase-title {
font-family: var(--ziggurat) !important;
font-weight: 800 !important;
font-size: clamp(42px, 5.15vw, 72px);
line-height: .94;
letter-spacing: .006em;
max-width: 520px;
margin-bottom: 30px;
}
#quienes-somos .fact-card {
letter-spacing: .06em;
}
/* Fade/ticker visual para Quienes somos: compacto, sin deformar imágenes y con zócalo fuera de la foto */
#quienes-somos .row {
align-items: center !important;
}
#quienes-somos .about-copy-stack {
width: 100%;
max-width: 620px;
margin-left: clamp(0px, 1vw, 18px);
}
#quienes-somos .about-media-wrap {
width: min(100%, 380px);
margin: 0 0 24px;
}
#quienes-somos .about-fade-ticker {
position: relative;
width: 100%;
height: 218px;
overflow: hidden;
background: #181f20;
border: 1px solid rgba(27,23,27,.14);
box-shadow: 7px 7px 0 var(--accent), 0 16px 38px rgba(27,23,27,.11);
isolation: isolate;
}
#quienes-somos .about-fade-ticker::before {
content: '';
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: radial-gradient(circle at 18% 18%, rgba(185,168,135,.12), transparent 36%);
}
#quienes-somos .about-fade-ticker::after {
content: '';
position: absolute;
inset: 9px;
z-index: 4;
border: 1px solid rgba(255,255,255,.16);
pointer-events: none;
}
#quienes-somos .about-fade-ticker img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
opacity: 0;
padding: 16px;
transform: scale(.985);
filter: contrast(1.03) saturate(1.02);
animation: aboutImageDissolve 12s infinite;
}
#quienes-somos .about-fade-ticker img:nth-child(1) { animation-delay: 0s; }
#quienes-somos .about-fade-ticker img:nth-child(2) { animation-delay: 4s; }
#quienes-somos .about-fade-ticker img:nth-child(3) { animation-delay: 8s; }
#quienes-somos .about-fade-caption {
display: flex;
align-items: center;
min-height: 34px;
margin-top: 8px;
padding: 0 12px;
background: #1b171b;
color: #fff;
border-left: 4px solid var(--accent);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .105em;
line-height: 1.2;
text-transform: uppercase;
box-shadow: 4px 4px 0 rgba(185,168,135,.22);
}
#quienes-somos .lead-copy {
max-width: 620px;
}
#quienes-somos .lead-copy p {
margin-bottom: 22px;
}
@keyframes aboutImageDissolve {
0% { opacity: 0; transform: scale(.98); }
9% { opacity: 1; transform: scale(1); }
32% { opacity: 1; transform: scale(1); }
42% { opacity: 0; transform: scale(1.01); }
100% { opacity: 0; transform: scale(.98); }
}
@media (max-width: 991.98px) {
#quienes-somos .about-copy-stack {
max-width: 100%;
margin-left: 0;
}
#quienes-somos .about-media-wrap {
width: min(100%, 420px);
margin-top: 0;
}
#quienes-somos .about-fade-ticker {
height: clamp(200px, 38vw, 255px);
box-shadow: 7px 7px 0 var(--accent), 0 14px 34px rgba(27,23,27,.11);
}
#quienes-somos .ziggurat-phrase-title {
max-width: 620px;
}
}
@media (max-width: 575.98px) {
#quienes-somos .ziggurat-phrase-title {
font-size: clamp(40px, 13vw, 58px);
line-height: .96;
margin-bottom: 24px;
}
#quienes-somos .about-media-wrap {
width: min(100%, 340px);
margin: 0 auto 24px;
}
#quienes-somos .about-fade-ticker {
height: 205px;
box-shadow: 6px 6px 0 var(--accent), 0 12px 28px rgba(27,23,27,.12);
}
#quienes-somos .about-fade-ticker img { padding: 14px; }
#quienes-somos .about-fade-ticker::after { inset: 8px; }
#quienes-somos .about-fade-caption {
min-height: 32px;
font-size: 8.2px;
letter-spacing: .08em;
padding-inline: 10px;
}
}
/* FIX puntual navbar mobile: no toca containers/rows/secciones del sitio */
@media (max-width: 991.98px) {
.site-nav {
max-width: 100vw;
overflow-x: clip;
}
.site-nav > .container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.site-nav .navbar-brand {
flex: 1 1 auto;
min-width: 0;
max-width: calc(100% - 56px);
margin-right: 8px;
}
.site-nav .brand-logo {
flex: 0 0 auto;
}
.site-nav .brand-text {
display: block;
flex: 1 1 auto;
min-width: 0;
max-width: calc(100vw - 142px) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-nav .navbar-toggler {
flex: 0 0 44px;
width: 44px;
margin-left: auto;
}
.site-nav .navbar-collapse {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.site-nav .navbar-collapse.collapse:not(.show) {
display: none;
}
.site-nav .navbar-collapse.collapsing {
height: 0;
overflow: hidden;
}
.site-nav .navbar-nav {
width: 100%;
align-items: stretch !important;
}
.site-nav .navbar-nav .nav-link,
.site-nav .navbar-nav .nav-cta {
width: 100%;
}
}
@media (max-width: 390px) {
.site-nav .brand-text {
font-size: 15px !important;
letter-spacing: .025em !important;
max-width: calc(100vw - 132px) !important;
}
}
/* FIX mobile fino: textos largos sin ensanchar el sitio */
@media (max-width: 575.98px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
main,
section,
footer,
.container,
.row,
[class*="col-"] {
min-width: 0;
}
.section-title,
.muon-product-title,
#quienes-somos .ziggurat-phrase-title,
.service-card h3,
.why-card h3,
.accordion-button,
.contact-detail strong,
.footer-brand-name,
.footer-list a,
.muon-chip,
.muon-product-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit {
max-width: 100%;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
.section-title {
font-size: clamp(34px, 10.4vw, 46px) !important;
line-height: 1;
letter-spacing: .004em;
}
#cervezas .section-title,
#estilos .section-title,
#trabajos .section-title,
#contacto .section-title {
font-size: clamp(32px, 9.8vw, 42px) !important;
line-height: 1.03;
}
#quienes-somos .ziggurat-phrase-title {
font-size: clamp(36px, 11.2vw, 50px) !important;
line-height: .98;
letter-spacing: .002em;
}
.muon-product-copy,
.muon-product-media,
.muon-product-row,
.muon-products-head {
width: 100%;
max-width: 100%;
min-width: 0;
}
.muon-product-title {
font-size: clamp(34px, 10.6vw, 44px) !important;
line-height: .98;
letter-spacing: .002em;
text-wrap: balance;
}
.muon-product-desc,
.muon-products-head p,
.section-subtitle,
.lead-copy {
max-width: 100%;
overflow-wrap: break-word;
}
.muon-product-meta {
width: 100%;
max-width: 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.muon-chip {
min-width: 0;
max-width: 100%;
min-height: 32px;
padding: 8px 11px;
font-size: 11.5px;
line-height: 1.15;
letter-spacing: .04em !important;
text-align: center;
}
.muon-product-link,
.btn-accent,
.btn-outline-dark-brand,
.btn-submit {
min-width: 0;
line-height: 1.18;
text-align: center;
}
.muon-product-link {
padding: 13px 14px;
letter-spacing: .045em !important;
}
.service-card h3,
.why-card h3 {
font-size: 18px;
line-height: 1.16;
letter-spacing: .025em !important;
}
.accordion-button {
gap: 8px;
line-height: 1.18;
}
.faq-num {
flex: 0 0 auto;
}
}
@media (max-width: 390px) {
.section-title {
font-size: clamp(30px, 9.5vw, 38px) !important;
}
#cervezas .section-title,
#estilos .section-title,
#trabajos .section-title,
#contacto .section-title {
font-size: clamp(29px, 9.2vw, 36px) !important;
}
.muon-product-title {
font-size: clamp(30px, 9.7vw, 38px) !important;
line-height: 1;
}
#quienes-somos .ziggurat-phrase-title {
font-size: clamp(32px, 10.5vw, 44px) !important;
}
.muon-chip {
font-size: 11px;
letter-spacing: .032em !important;
padding-inline: 9px;
}
}
.muon-products {
background: #fff;
color: #1b171b;
overflow: hidden;
}
.muon-products-head {
max-width: 780px;
margin: 0 auto 64px;
text-align: center;
}
.muon-products-head p {
margin: 18px auto 0;
max-width: 660px;
font-size: 17px;
line-height: 1.75;
color: #666;
}
.muon-product-row {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
padding: clamp(42px, 5vw, 76px) 0;
border-top: 1px solid rgba(27,23,27,.12);
}
.muon-product-row:first-of-type {
border-top: 0;
padding-top: 0;
}
.muon-product-row:nth-of-type(even) .muon-product-copy {
order: 2;
}
.muon-product-row:nth-of-type(even) .muon-product-media {
order: 1;
}
.muon-product-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #9f8d6c;
}
.muon-product-kicker::before {
content: "";
width: 24px;
height: 2px;
background: #b9a887;
}
.muon-product-title {
font-family: var(--display, system-ui, sans-serif);
font-size: clamp(44px, 7vw, 92px);
line-height: .9;
letter-spacing: .02em;
text-transform: uppercase;
color: #1b171b;
margin: 0 0 18px;
}
.muon-product-desc {
max-width: 560px;
font-size: 16px;
line-height: 1.78;
color: #565656;
margin: 0 0 24px;
}
.muon-product-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.muon-chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(27,23,27,.16);
background: #f6f3ee;
color: #1b171b;
font-family: var(--display, system-ui, sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.muon-product-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
background: #1b171b;
color: #fff;
font-family: var(--display, system-ui, sans-serif);
font-size: 14px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
transition: transform .2s ease, background .2s ease, color .2s ease;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.muon-product-link:hover {
background: #b9a887;
color: #1b171b;
transform: translateY(-2px);
}
.muon-product-frame {
background: #181f20;
padding: clamp(10px, 1.8vw, 18px);
box-shadow: 14px 14px 0 #b9a887, 0 24px 70px rgba(27,23,27,.18);
border: 1px solid rgba(27,23,27,.12);
overflow: hidden;
}
.muon-product-img-wrap {
width: 100%;
aspect-ratio: 4 / 5.55;
background: #181f20;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.muon-product-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background: #181f20;
}
.muon-products .carousel-control-prev,
.muon-products .carousel-control-next {
width: 46px;
height: 46px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(27,23,27,.72);
border-radius: 999px;
margin: 0 10px;
}
.muon-products .carousel-control-prev-icon,
.muon-products .carousel-control-next-icon {
width: 2rem;
height: 2rem;
background-size: 60% 60%;
}
.muon-products .carousel-indicators {
bottom: 12px;
margin-bottom: 0;
}
.muon-products .carousel-indicators button {
width: 9px;
height: 9px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,.62);
}
.muon-products .carousel-indicators button.active {
background: #fff;
}
@media (max-width: 991.98px) {
.muon-product-row {
grid-template-columns: 1fr;
gap: 30px;
}
.muon-product-row:nth-of-type(even) .muon-product-copy,
.muon-product-row:nth-of-type(even) .muon-product-media {
order: initial;
}
.muon-product-frame {
box-shadow: 10px 10px 0 #b9a887, 0 18px 48px rgba(27,23,27,.16);
}
}
@media (max-width: 575.98px) {
.muon-products-head {
margin-bottom: 42px;
}
.muon-product-row {
padding: 46px 0;
}
.muon-product-title {
font-size: clamp(42px, 15vw, 62px);
}
.muon-product-desc {
font-size: 15px;
}
.muon-product-link {
width: 100%;
}
.muon-product-img-wrap {
aspect-ratio: 4 / 5.6;
}
.muon-products .carousel-control-prev,
.muon-products .carousel-control-next {
width: 40px;
height: 40px;
margin: 0 6px;
}
}
serviciosfunerarioselarca.com
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css.contact-icon {
width: 34px;
height: 34px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.6);
border: 1px solid rgba(0,0,0,.12);
}
.contact-icon svg {
width: 16px;
height: 16px;
stroke: #000;
}
/* ─── Design Tokens ─── */
:root {
--accent: #ffa90f;
--accent-deep: #db8d00;
--accent-soft: #fff3d6;
--accent-glow: rgba(255,169,15,.18);
--text: #111111;
--muted: #5f5f5f;
--muted-lt: #8a8a8a;
--line: #ece7de;
--surface: #ffffff;
--surface-soft: #faf7f1;
--surface-warm: #f5f0e8;
--shadow-xs: 0 2px 8px rgba(17,17,17,.05);
--shadow-sm: 0 8px 24px rgba(17,17,17,.07);
--shadow-md: 0 16px 40px rgba(17,17,17,.09);
--shadow-lg: 0 28px 72px rgba(17,17,17,.12);
--shadow-xl: 0 40px 100px rgba(17,17,17,.15);
--shadow-accent: 0 16px 40px rgba(255,169,15,.30);
--radius: 28px;
--radius-sm: 18px;
--radius-xs: 12px;
--container: 1240px;
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.45,0,.55,1);
}
/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0;
font-family: "Manrope", sans-serif;
color: var(--text);
background: #fff;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
width: 100%;
position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container-xl { max-width: var(--container); }
/* ─── Section base ─── */
.section { padding: 108px 0; }
/* ─── Eyebrow ─── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .42rem 1rem .42rem .65rem;
border-radius: 999px;
background: var(--accent-soft);
border: 1.5px solid rgba(255,169,15,.25);
color: #8a5c00;
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* ─── Section Heading ─── */
.section-heading { max-width: 780px; margin-bottom: 4rem; }
.section-title {
margin: .9rem 0 1rem;
font-family: "Cormorant Garamond", serif;
font-size: clamp(2.4rem, 4.5vw, 4rem);
line-height: 1.05;
letter-spacing: -.02em;
font-weight: 700;
}
.section-title em { font-style: italic; color: var(--accent-deep); }
.section-subtitle {
margin: 0;
font-size: 1.06rem;
color: var(--muted);
max-width: 640px;
line-height: 1.7;
}
/* ─── TOPBAR / NAVBAR ─── */
.topbar {
position: sticky;
top: 0;
z-index: 1040;
padding: 14px 0;
transition: background .3s, box-shadow .3s;
}
.topbar.scrolled {
background: rgba(255,255,255,.94);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
box-shadow: 0 1px 0 rgba(17,17,17,.06), var(--shadow-sm);
}
.navbar { padding: 0; }
.navbar-shell {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 10px 18px;
border-radius: 22px;
background: rgba(255,255,255,.96);
box-shadow: var(--shadow-md);
border: 1.5px solid rgba(255,255,255,.9);
outline: 1px solid rgba(17,17,17,.04);
}
.navbar, .navbar > .container, .navbar > .container-fluid { max-width: 100%; }
.navbar-brand, .brand-name { min-width: 0; }
.navbar-collapse { min-width: 0; }
.navbar-brand {
display: inline-flex;
align-items: center;
gap: .8rem;
flex-shrink: 0;
}
.brand-logo { height: 42px; width: auto; object-fit: contain; }
.brand-name {
font-size: .92rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
color: var(--text);
}
.brand-name span {
display: block;
font-size: .72rem;
font-weight: 500;
color: var(--muted);
letter-spacing: .01em;
}
.navbar-nav { gap: .15rem; margin: 0 auto; }
.nav-link {
color: var(--muted);
font-size: .88rem;
font-weight: 600;
padding: .6rem .9rem !important;
border-radius: 999px;
transition: all .2s ease;
letter-spacing: -.01em;
}
.nav-link:hover, .nav-link.active-link {
background: var(--accent-soft);
color: var(--text);
}
.navbar-toggler {
border: 1.5px solid var(--line);
box-shadow: none !important;
padding: .45rem .6rem;
border-radius: 12px;
background: var(--surface-soft);
transition: all .2s;
}
.navbar-toggler:hover { background: var(--accent-soft); border-color: rgba(255,169,15,.3); }
/* ─── BUTTONS ─── */
.btn {
border-radius: 999px;
padding: .88rem 1.6rem;
font-weight: 700;
font-size: .92rem;
letter-spacing: -.01em;
border-width: 1.5px;
transition: all .25s var(--ease-out);
position: relative;
overflow: hidden;
}
.btn::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255,255,255,.15);
opacity: 0;
transition: opacity .2s;
border-radius: inherit;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-accent {
background: var(--accent);
border-color: var(--accent);
color: #111;
box-shadow: var(--shadow-accent);
}
.btn-accent:hover, .btn-accent:focus {
background: var(--accent-deep);
border-color: var(--accent-deep);
color: #111;
box-shadow: 0 20px 50px rgba(219,141,0,.35);
}
.btn-outline-dark {
border-color: rgba(17,17,17,.15);
color: var(--text);
background: rgba(255,255,255,.8);
backdrop-filter: blur(8px);
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
background: #111;
border-color: #111;
color: #fff;
}
.btn-dark-soft { background: #111; border-color: #111; color: #fff; }
.btn-dark-soft:hover { background: #000; color: #fff; border-color: #000; }
.btn-light-soft { background: rgba(255,255,255,.7); border-color: rgba(17,17,17,.12); color: #111; }
.btn-light-soft:hover { background: #fff; color: #111; }
/* ─── HERO ─── */
.hero {
padding: 48px 0 96px;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 700px;
height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,169,15,.12) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
bottom: 0;
left: -5%;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,169,15,.07) 0%, transparent 70%);
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 3rem;
align-items: center
/* ...cortado... */
:root{
--wa:#25D366;
--wa-dark:#1fb85a;
--wa-darker:#189a4a;
--light-bg:#ffffff;
--light-bg-soft:#f6f8f7;
--light-border:#dde4df;
--dark-text:#1c1f1d;
--muted-text:#6c756f;
}
.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, #ecf6f0);
border-bottom:1px solid var(--light-border);
}
.wa-avatar{
width:40px;
height:40px;
border-radius:10px;
background:#e9f7ef;
display:grid;
place-items:center;
border:1px solid #cfeeda;
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:.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:#f9fbfa;
color:var(--dark-text);
outline:none;
min-height:44px;
font-family:inherit;
font-size:.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){
.wa-float{
right:12px;
bottom:12px;
}
.wa-card{
width:calc(100vw - 24px);
right:0;
}
}
smartproject.com.ar
https://fonts.googleapis.com/css2?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,400&family=Playfair+Display:wght@600;700&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
--accent: #d86248;
--accent2: #1a4a7a;
--gold: #c9a84c;
--text: #0d0d0d;
--muted: #5a5a6a;
--soft: #f4f6f9;
--line: #e2e6ee;
--white: #ffffff;
--shadow-xs: 0 2px 8px rgba(10,43,74,.06);
--shadow-sm: 0 8px 24px rgba(10,43,74,.09);
--shadow-md: 0 20px 52px rgba(10,43,74,.13);
--shadow-lg: 0 32px 80px rgba(10,43,74,.18);
--r-xl: 28px;
--r-lg: 20px;
--r-md: 14px;
--container: 1240px;
scroll-behavior: smooth;
}
/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
margin: 0;
font-family: "DM Sans", sans-serif;
color: var(--text);
background: #ffffff;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); }
/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.display-font { font-family: "Playfair Display", serif; }
/* ─── EYEBROW ────────────────────────────────────────────────── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .42rem 1rem;
border-radius: 999px;
background: rgba(10,43,74,.07);
border: 1px solid rgba(10,43,74,.12);
color: var(--accent);
font-size: .75rem;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
/* ─── SECTION ────────────────────────────────────────────────── */
.section { padding: 100px 0; position: relative; }
.section-title {
margin: .9rem 0 1rem;
font-family: "Playfair Display", serif;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.08;
letter-spacing: -.02em;
font-weight: 700;
color: var(--text);
}
.section-subtitle {
margin: 0;
max-width: 640px;
color: var(--muted);
font-size: 1.05rem;
}
/* ─── HEADER / NAVBAR ────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 1040;
padding: 0;
backdrop-filter: saturate(200%) blur(20px);
background: rgba(255,255,255,.88);
border-bottom: 1px solid rgba(10,43,74,.07);
transition: box-shadow .3s;
}
.site-header.scrolled {
box-shadow: 0 4px 24px rgba(10,43,74,.10);
}
.navbar { padding: 16px 0; }
.brand {
display: inline-flex;
align-items: center;
gap: .85rem;
}
.brand img {
width: 40px; height: 40px;
object-fit: contain;
}
.brand-mark { display: flex; flex-direction: column; }
.brand-name {
font-size: .95rem;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--accent);
}
.brand-sub {
font-size: .70rem;
color: var(--muted);
line-height: 1.2;
}
.navbar-toggler { border: none; padding: .4rem .25rem; box-shadow: none!important; }
.navbar-nav { gap: .1rem; }
.nav-link {
color: var(--text)!important;
font-size: .92rem;
font-weight: 500;
padding: .65rem .95rem!important;
border-radius: 999px;
transition: background .2s, color .2s;
position: relative;
}
.nav-link::after {
content: "";
position: absolute;
bottom: 4px; left: 50%; right: 50%;
height: 2px;
background: var(--gold);
border-radius: 2px;
transition: left .25s, right .25s;
}
.nav-link:hover::after,
.nav-link:focus::after { left: 18%; right: 18%; }
.nav-link:hover,
.nav-link:focus { color: var(--accent)!important; background: rgba(10,43,74,.05); }
/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
border-radius: 999px;
padding: .82rem 1.55rem;
font-weight: 600;
font-size: .94rem;
letter-spacing: -.005em;
transition: transform .22s, box-shadow .22s, background .22s, border-color .22s, color .22s;
display: inline-flex;
align-items: center;
gap: .5rem;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-accent {
color: #fff;
background: var(--accent);
border: 1.5px solid var(--accent);
box-shadow: 0 8px 24px rgba(10,43,74,.28), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-accent:hover, .btn-accent:focus {
color: #fff;
background: #0d3560;
border-color: #0d3560;
box-shadow: 0 14px 34px rgba(10,43,74,.38);
}
.btn-outline-dark {
border: 1.5px solid rgba(10,43,74,.22);
color: var(--text);
background: transparent;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: var(--shadow-sm);
}
/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
padding: 70px 0 100px;
position: relative;
overflow: hidden;
}
/* Decorative background shapes */
.hero::before {
content: "";
position: absolute;
top: -120px; right: -120px;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(10,43,74,.06) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
bottom: -80px; left: -60px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
pointer-events: none;
}
.hero-eyebrow-wrap { margin-bottom: 1.4rem; }
.hero-title {
font-family: "Playfair Display", serif;
font-size: clamp(2.6rem, 6vw, 5rem);
line-height: 1.02;
letter-spacing: -.03em;
font-weight: 700;
color: var(--text);
margin: 0 0 1.3rem;
}
.hero-title em {
font-style: italic;
color: var(--accent);
}
.hero-text {
font-size: 1.07rem;
color: var(--muted);
max-width: 560px;
margin: 0 0 2rem;
line-height: 1.75;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: .85rem;
margin-bottom: 2.2rem;
}
.hero-stats {
display: flex;
gap: 2.4rem;
flex-wrap: wrap;
padding-top: 1.8rem;
border-top: 1px solid var(--line);
/* ...cortado... */
:root{
--wa:#25D366;
--wa-dark:#1fb85a;
--light-bg:#ffffff;
--light-bg-soft:#f6f8f7;
--light-border:#dde4df;
--dark-text:#1c1f1d;
--muted-text:#6c756f;
}
.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,#ecf6f0);border-bottom:1px solid var(--light-border)}
.wa-avatar{width:40px;height:40px;border-radius:10px;background:#e9f7ef;display:grid;place-items:center;border:1px solid #cfeeda;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);font-size:.9rem}
.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:#f9fbfa;color:var(--dark-text);outline:none;min-height:44px;font-family:inherit;font-size:.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)}
@media (max-width:480px){
.wa-float{right:12px;bottom:12px}
.wa-card{width:calc(100vw - 24px);right:0}
}