Preview de mixed.css
/* MIXED CSS PACK */
/* Template: gruashbm.com.ar/index.html */
/* Template mtime: 2026-04-28 11:49:03 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
: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-media img {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
object-position: center;
display: block;
}
.hero-media-mobile {
display: none;
}
.hero-badge {
position: absolute;
bottom: 2.5rem;
left: 2rem;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: .75rem 1.1rem;
display: flex;
align-items: center;
gap: .7rem;
box-shadow: var(--shadow-md);
z-index: 4;
}
.hero-badge-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
flex: 0 0 10px;
box-shadow: 0 0 0 3px rgba(34,197,94,.2);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,.1); }
}
.hero-badge-text {
font-size: .82rem;
font-weight: 700;
color: var(--ink);
line-height: 1.2;
}
.hero-badge-sub {
font-size: .74rem;
font-weight: 500;
color: var(--muted);
}
.quick-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
margin-top: 1.8rem;
}
.quick-fact {
display: flex;
align-items: center;
gap: .65rem;
min-height: 50px;
border: 1.5px solid var(--line);
border-radius: var(--radius);
background: var(--white);
padding: .75rem 1rem;
color: var(--ink-mid);
font-size: .9rem;
font-weight: 600;
box-shadow: var(--shadow-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}
.quick-fact:hover {
border-color: rgba(198,74,26,.3);
box-shadow: var(--shadow-md);
}
.dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--accent);
}
/* ─── ABOUT SECTION ─── */
.about-divider {
width: 48px;
height: 3px;
background: var(--accent);
border-radius: 999px;
margin: 1.4rem 0;
}
/* ─── SERVICE CARDS ─── */
.service-card {
height: 100%;
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
background: var(--white);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
position: relative;
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s cubic-bezier(.4,0,.2,1);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.service-card:hover {
transform: translateY(-5px);
border-color: rgba(198,74,26,.22);
box-shadow: var(--shadow-lg);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card h3 {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 800;
margin-bottom: .65rem;
letter-spacing: .01em;
}
.service-card p {
color: var(--muted);
line-height: 1.68;
margin: 0;
font-size: .95rem;
}
/* ─── WHY CARDS ─── */
.why-card {
height: 100%;
border: 1.5px solid var(--line);
border-radius: var(--radius-lg);
background: var(--white);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.why-card:hover {
transform: translateY(-4px);
border-color: rgba(198,74,26,.22);
box-shadow: var(--shadow-lg);
}
.why-card h3 {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 800;
margin-bottom: .65rem;
letter-spacing: .01em;
}
.why-card p {
color: var(--muted);
line-height: 1.68;
margin: 0;
font-size: .95rem;
}
/* ─── ICON BOX ─── */
.icon-box {
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--accent);
background: rgba(198,74,26,.1);
margin-bottom: 1.1rem;
flex: 0 0 50px;
}
.icon-box svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ─── EQUIPMENT ─── */
.equipment-block {
padding: 2.5rem;
border: 1.5px solid var(--line);
border-radius: var(--radius-xl);
background: var(--white);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.equipment-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
}
.equipment-block + .equipment-block { margin-top: 2.5rem; }
.equipment-title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.2vw, 2.5rem);
font-weight: 900;
line-height: 1.08;
margin-bottom: .55rem;
letter-spacing: -.01em;
}
.equipment-subtitle {
color: var(--ink-mid);
font-weight: 700;
font-size: 1.02rem;
margin-bottom: 1.2rem;
}
.detail-list {
display: grid;
gap: .6rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.detail-list li {
display: flex;
align-items: flex-start;
gap: .7rem;
color: var(--ink-mid);
font-weight: 600;
font-size: .95rem;
}
.detail-list li::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--accent);
margin-top: .48rem;
}
/* ─── EQUIPMENT CAROUSEL ─── */
.equipment-carousel {
border-radius: var(--radius-lg);
background: var(--soft);
overflow: hidden;
border: 1.5px solid var(--line);
box-shadow: var(--shadow-md);
}
.equipment-frame {
height: clamp(300px, 34vw, 460px);
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
}
.equipment-frame img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
padding: 12px;
cursor: zoom-in;
transition: transform var(--transition), filter var(--transition);
}
.equipment-frame img:hover {
transform: scale(1.015);
filter: brightness(.97);
}
.equipment-carousel .carousel-control-prev,
.equipment-carousel .carousel-control-next {
width: 44px;
height: 44px;
top: 50%;
transform: translateY(-50%);
border-radius: 999px;
background: rgba(13,15,18,.55);
backdrop-filter: blur(8px);
opacity: 1;
margin: 0 .85rem;
transition: background var(--transition);
}
.equipment-carousel .carousel-control-prev:hover,
.equipment-carousel .carousel-control-next:hover {
background: rgba(13,15,18,.75);
}
/* ─── GALLERY ─── */
.gal-gallery .carousel {
max-width: 980px;
margin-inline: auto;
position: relative;
}
.gal-frame {
height: clamp(240px, 50vh, 460px);
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: 1.5px solid var(--line);
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
cursor: zoom-in;
border-radius: var(--radius);
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 50px;
height: 50px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(13,15,18,.55);
backdrop-filter: blur(8px);
border-radius: 50%;
margin: 0 12px;
transition: background var(--transition);
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover {
background: rgba(13,15,18,.78);
}
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .gal-ctrl-icon {
width: 2.5rem;
height: 2.5rem;
background-size: 60% 60%;
}
.gal-gallery .carousel-indicators {
z-index: 10;
bottom: -48px;
}
.gal-gallery .carousel-indicators button {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(13,15,18,.3);
border: none;
transition: background var(--transition), transform var(--transition);
}
.gal-gallery .carousel-indicators button.active {
background: var(--accent);
transform: scale(1.3);
}
.gal-gallery { padding-bottom: 60px; }
/* ─── LIGHTBOX ─── */
#galLightbox .modal-content { background: #000; }
#galLightboxImg {
max-height: 86vh;
width: 100%;
height: auto;
object-fit: contain;
background: #000;
}
.gal-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 48px;
height: 48px;
border-radius: 999px;
background: rgba(255,255,255,.16);
color: #fff;
font-size: 28px;
line-height: 48px;
text-align: center;
z-index: 5;
cursor: pointer;
transition: background var(--transition);
backdrop-filter: blur(8px);
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev { left: 12px; }
.gal-lightbox-nav.gal-next { right: 12px; }
/* ─── ACCORDION ─── */
.accordion {
--bs-accordion-border-color: var(--line);
--bs-accordion-border-radius: var(--radius-lg);
--bs-accordion-inner-border-radius: var(--radius-lg);
--bs-accordion-active-color: var(--ink);
--bs-accordion-active-bg: rgba(198,74,26,.07);
--bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(198,74,26,.15);
}
.accordion-item {
border-radius: var(--radius-lg) !important;
overflow: hidden;
margin-bottom: .75rem;
box-shadow: var(--shadow-sm);
border: 1.5px solid var(--line) !important;
background: var(--white);
}
.accordion-button {
font-family: var(--font-body);
font-weight: 700;
font-size: .98rem;
letter-spacing: 0;
background: var(--white);
}
.accordion-button:not(.collapsed) {
color: var(--ink);
background: rgba(198,74,26,.07);
}
.accordion-body {
color: var(--muted);
line-height: 1.74;
font-size: .95rem;
}
/* ─── CONTACT ─── */
.contact-panel {
border: 1.5px solid var(--line);
border-radius: var(--radius-xl);
background: var(--white);
padding: 2.5rem;
box-shadow: var(--shadow-md);
height: 100%;
}
.contact-list {
display: grid;
gap: .95rem;
margin: 1.6rem 0 0;
padding: 0;
list-style: none;
}
.contact-list li {
display: flex;
gap: .75rem;
align-items: flex-start;
color: var(--ink-mid);
font-weight: 600;
overflow-wrap: anywhere;
font-size: .95rem;
}
.contact-list li a {
color: var(--accent);
font-weight: 700;
transition: opacity var(--transition);
}
.contact-list li a:hover { opacity: .8; }
/* ─── FORMS ─── */
.form-label {
font-size: .88rem;
font-weight: 700;
letter-spacing: .02em;
color: var(--ink-mid);
margin-bottom: .4rem;
text-transform: uppercase;
}
.form-control,
.form-select {
border-radius: var(--radius);
border: 1.5px solid #dfe3e8;
min-height: 50px;
color: var(--ink);
font-size: .96rem;
background: var(--soft);
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:focus,
.form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(198,74,26,.12);
background: var(--white);
}
textarea.form-control {
min-height: 142px;
resize: vertical;
}
.hp-field {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* ─── FOOTER ─── */
.site-footer {
background: var(--ink);
color: rgba(255,255,255,.88);
padding: 72px 0 28px;
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
}
.footer-brand {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1.1rem;
}
.footer-logo {
width: 40px;
height: 40px;
object-fit: contain;
flex: 0 0 40px;
}
.footer-brand-name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--white);
line-height: 1.3;
}
.site-footer p {
color: rgba(255,255,255,.6);
font-size: .9rem;
line-height: 1.7;
}
.site-footer h3 {
color: var(--white);
font-family: var(--font-display);
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 1.2rem;
}
.footer-list {
display: grid;
gap: .6rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer-list li,
.footer-list a {
color: rgba(255,255,255,.62);
font-size: .9rem;
transition: color var(--transition);
}
.footer-list a:hover {
color: var(--white);
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-bottom {
margin-top: 2.5rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(255,255,255,.1);
font-size: .86rem;
color: rgba(255,255,255,.45);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
}
.footer-bottom a {
color: rgba(255,255,255,.7);
font-weight: 700;
transition: color var(--transition);
}
.footer-bottom a:hover { color: var(--white); }
/* ─── STAT STRIP ─── */
.stat-strip {
background: var(--accent);
padding: 0;
}
.stat-strip-inner {
display: flex;
align-items: stretch;
}
.stat-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.6rem 1rem;
border-right: 1px solid rgba(255,255,255,.18);
text-align: center;
}
.stat-item:last-child { border-right: 0; }
.stat-value {
font-family: var(--font-display);
font-size: 2.1rem;
font-weight: 900;
color: var(--white);
line-height: 1;
letter-spacing: -.02em;
}
.stat-label {
color: rgba(255,255,255,.82);
font-size: .78rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
margin-top: .35rem;
}
/* ─── FIX MOBILE NAV / OVERFLOW ─── */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
position: relative;
}
.navbar,
.navbar > .container {
max-width: 100vw;
}
.navbar > .container {
min-width: 0;
}
.navbar-brand {
min-width: 0;
max-width: calc(100vw - 92px);
flex-shrink: 1;
}
.navbar-brand span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navbar-toggler {
flex: 0 0 auto;
margin-left: auto;
background: var(--white);
position: relative;
z-index: 1101;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.35em;
height: 1.35em;
vertical-align: middle;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2813, 15, 18, .9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar-collapse {
min-width: 0;
}
/* ─── DESKTOP NAVBAR CENTERING ─── */
@media (min-width: 992px) {
.navbar > .container {
width: min(calc(100% - clamp(48px, 6vw, 96px)), 1320px);
max-width: 1320px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
}
/* ─── RESPONSIVE ─── */
@media (max-width: 991.98px) {
.navbar > .container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.navbar-collapse {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.navbar-collapse:not(.show) {
display: none;
}
.navbar-collapse.collapsing {
display: block;
height: 0;
overflow: hidden;
transition: height .25s ease;
}
.navbar-collapse.show {
display: block;
}
.navbar-nav {
width: 100%;
align-items: stretch !important;
}
.navbar-nav .nav-item,
.navbar-nav .nav-link {
width: 100%;
}
.navbar-nav .btn {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.navbar-collapse {
padding: .9rem 0 1rem;
border-top: 1px solid var(--line);
margin-top: .5rem;
}
.navbar-nav { gap: .15rem; }
.navbar-nav .nav-link {
padding: .65rem .5rem;
}
.navbar-nav .nav-link::after { display: none; }
.hero { padding-top: 46px; }
.hero-inner { padding-bottom: 64px; }
.section { padding: 72px 0; }
.equipment-block { padding: 1.75rem; }
.equipment-frame { height: clamp(250px, 54vw, 400px); }
.stat-strip-inner {
display: grid;
grid-template-columns: 1fr 1fr;
}
.stat-item:nth-child(2) { border-right: 0; }
}
@media (max-width: 575.98px) {
html { scroll-padding-top: 78px; }
.brand-logo { height: 38px; }
.navbar-brand { font-size: 1rem; }
.hero { padding-top: 26px; }
.hero-inner { padding-bottom: 52px; }
.hero h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
.hero-text { margin-bottom: 0; }
.hero-visual-col {
display: none;
}
.hero-media-mobile {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: .85rem;
min-height: 0;
margin: 1.45rem 0 1.55rem;
overflow: visible;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.hero-media-mobile::before,
.hero-media-mobile::after {
display: none;
}
.hero-media-mobile img {
width: 100%;
height: auto;
min-height: 0;
max-height: 330px;
object-fit: contain;
object-position: center;
border-radius: var(--radius-lg);
background: var(--soft);
box-shadow: var(--shadow-lg);
}
.hero-media-mobile .hero-badge {
position: static;
width: 100%;
justify-content: center;
padding: .82rem 1rem;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.quick-facts { grid-template-columns: 1fr; }
.btn-accent,
.btn-outline-accent { width: 100%; text-align: center; }
.section { padding: 58px 0; }
.contact-panel { padding: 1.5rem; }
.equipment-block { padding: 1.25rem 1rem; }
.gal-frame { height: clamp(200px, 42vh, 380px); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
width: 42px;
height: 42px;
margin: 0 6px;
}
.stat-strip-inner { grid-template-columns: 1fr; }
.stat-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.stat-item:last-child { border-bottom: 0; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
.text-muted-small {
font-size: 0.99rem;
color: #999;
font-weight: 400;
margin: 0;
line-height: 1.2;
text-align: center; /* centrado */
}
/* ===== INLINE <style> BLOCK #3 ===== */
: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;
}
}