/* ================================================================
GREMRO — Design System v3 | Parallax Edition
Inspirado en: Stryker · GE Healthcare · Philips · BD
Paleta: Gold #B88C36 | Amber #E9A73A | Navy #33334C | Mechan #0EA5E9 | Xishan #10B981
================================================================ */
/* ── Tokens ───────────────────────────────────────────────────── */
:root {
/* Brand palette — Gremro Branding Kit */
--gold: #B88C36;
--gold-100: #fdf5e4;
--gold-200: #f0d89a;
--gold-light: #E9A73A;
--gold-dark: #8A6A28;
--navy: #33334C;
--navy-mid: #3D3D5C;
--navy-light: #484868;
--navy-deep: #1A1A2E;
--navy-darkest: #0D0D18;
--mechan: #0EA5E9;
--mechan-light: #7DD3FC;
--mechan-dark: #0369A1;
--mechan-bg: #040e1c;
--xishan: #10B981;
--xishan-light: #6EE7B7;
--xishan-dark: #047857;
--xishan-bg: #030d08;
--white: #ffffff;
--off-white: #F7F6F3;
--gray-100: #F4F4F5;
--gray-200: #E4E4E7;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-700: #374151;
--gray-900: #111827;
/* Gotham → Barlow Condensed (display) + Barlow (body) */
--font: 'Barlow', system-ui, sans-serif;
--serif: 'Barlow Condensed', system-ui, sans-serif;
--r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
--shadow-lg: 0 10px 30px rgba(0,0,0,.13), 0 4px 8px rgba(0,0,0,.07);
--shadow-xl: 0 20px 60px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.10);
--shadow-2xl: 0 40px 100px rgba(0,0,0,.22);
--shadow-gold: 0 4px 20px rgba(184,140,54,.32);
--shadow-mechan: 0 4px 20px rgba(14,165,233,.32);
--shadow-xishan: 0 4px 20px rgba(16,185,129,.32);
--ease: cubic-bezier(.4,0,.2,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--t: 280ms var(--ease);
--t-slow: 500ms var(--ease);
/* Aliases para compatibilidad con templates */
--font-serif: 'Barlow Condensed', system-ui, sans-serif;
--radius: var(--r-md);
--gray-300: #D1D5DB;
}
/* ── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font);background:var(--navy-darkest);color:var(--gray-700);line-height:1.7;font-size:16px;overflow-x:hidden;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:visited{color:inherit}
button{cursor:pointer;font-family:inherit}
/* ── Utilities ────────────────────────────────────────────────── */
.container {max-width:1280px;margin:0 auto;padding:0 24px}
.container--md{max-width:960px;margin:0 auto;padding:0 24px}
/* ================================================================
HEADER
================================================================ */
.gremro-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
height: 68px;
border-bottom: 1px solid rgba(184,140,54,.15);
transition: box-shadow var(--t), border-color var(--t);
}
/* ::before maneja el efecto glass — evita que backdrop-filter en el padre
cree un containing block que trapa position:fixed hijos (bug iOS Safari) */
.gremro-header::before {
content: '';
position: absolute;
inset: 0;
background: rgba(13, 13, 24, .88);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
z-index: -1;
transition: background var(--t);
}
.gremro-header.scrolled {
box-shadow: 0 4px 32px rgba(0,0,0,.4);
border-bottom-color: rgba(184,140,54,.25);
}
.gremro-header.scrolled::before {
background: rgba(13, 13, 24, .97);
}
.gremro-header__inner {
max-width: 1280px; margin: 0 auto; padding: 0 24px;
height: 100%; display: flex; align-items: center; gap: 20px;
}
.gremro-header__logo {flex-shrink:0}
.gremro-header__logo img { height: 48px; width: auto; display: block; }
/* Nav — neutralizar estilos del tema padre que añaden puntos/separadores */
.gremro-nav>li::before,
.gremro-nav>li::after,
.gremro-nav li::before,
.gremro-nav li::after { content:none !important; display:none !important; }
.gremro-nav { list-style:none !important; }
.gremro-nav li { list-style:none !important; }
/* Desktop — nav-wrap es hijo flex del header__inner, se centra entre logo y CTA */
.gremro-nav-wrap {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.gremro-nav-wrap[hidden] { display: none; }
.gremro-nav {display:flex !important;align-items:center;gap:2px;pointer-events:auto}
.gremro-nav>li{position:relative}
.gremro-nav>li>a {
display: flex; align-items: center; gap: 5px;
color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600;
padding: 6px 13px; border-radius: var(--r-sm); transition: var(--t);
font-family: var(--serif); text-transform: uppercase; letter-spacing: 1px;
}
.gremro-nav>li>a:visited{color:rgba(255,255,255,.7)}
.gremro-nav>li>a:hover,
.gremro-nav>li.current-menu-item>a {color:var(--gold-light);background:rgba(255,255,255,.06)}
/* Dropdown arrow */
.gremro-nav .has-dropdown>a::after {
content:'';border:solid rgba(255,255,255,.4);border-width:0 1.5px 1.5px 0;
display:inline-block;padding:2.5px;transform:rotate(45deg);margin-top:-3px;
transition:transform var(--t),border-color var(--t)
}
.gremro-nav .has-dropdown:hover>a::after {transform:rotate(-135deg);margin-top:3px;border-color:var(--gold-light)}
/* Dropdown — el truco del puente invisible:
el dropdown cubre el gap entre el li y el menú con padding-top
para que el mouse no salga del elemento hover */
.gremro-dropdown {
position:absolute;
top:100%; /* pegado al borde inferior del li */
left:50%;
transform:translateX(-50%) translateY(-6px);
background:var(--navy-darkest);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-lg);
padding:16px 8px 8px; /* padding-top = bridge invisible */
min-width:240px;
box-shadow:var(--shadow-2xl);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--t),transform var(--t),visibility 0ms 200ms; /* delay en ocultar */
margin-top:0;
}
/* Puente transparente entre el nav item y el dropdown */
.gremro-dropdown::before {
content:'';position:absolute;
top:-12px;left:0;right:0;height:12px; /* cubre el gap */
background:transparent;
}
/* Flecha decorativa */
.gremro-dropdown::after {
content:'';position:absolute;top:6px;left:50%;
transform:translateX(-50%) rotate(45deg);
width:10px;height:10px;background:var(--navy-darkest);
border-top:1px solid rgba(255,255,255,.08);border-left:1px solid rgba(255,255,255,.08);
}
.gremro-nav .has-dropdown:hover .gremro-dropdown {
opacity:1;visibility:visible;pointer-events:auto;
transform:translateX(-50%) translateY(0);
transition:opacity var(--t),transform var(--t),visibility 0ms 0ms;
}
.gremro-dropdown li {list-style:none !important;}
.gremro-dropdown li::before,.gremro-dropdown li::after{content:none !important;display:none !important;}
.gremro-dropdown a {
display:flex;align-items:center;gap:12px;
padding:10px 12px;border-radius:var(--r-md);
color:rgba(255,255,255,.65);font-size:14px;transition:var(--t)
}
.gremro-dropdown a:visited { color: rgba(255,255,255,.65) }
.gremro-dropdown a:hover {background:rgba(255,255,255,.06);color:var(--white)}
.drop-icon {width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.drop-icon--mechan {background:rgba(14,165,233,.12)}
.drop-icon--xishan {background:rgba(16,185,129,.12)}
.drop-name {font-weight:700;color:var(--white);font-size:13px;display:block}
.drop-desc {color:rgba(255,255,255,.38);font-size:11px;display:block;margin-top:1px}
/* CTA — flex-shrink:0 para que no se comprima; nav-wrap flex:1 lo empuja a la derecha */
.gremro-header__cta {flex-shrink:0; display:flex; align-items:center; gap:12px;}
/* Hamburger */
.gremro-menu-toggle {
display:none;flex-direction:column;gap:5px;
background:none;border:none;padding:8px;border-radius:var(--r-sm);margin-left:auto;
position:relative;z-index:999
}
.gremro-menu-toggle span {
display:block;width:22px;height:2px;background:var(--white);
border-radius:2px;transition:transform .3s var(--ease), opacity .2s ease, transform-origin .3s;transform-origin:center
}
/* Hamburger → X cuando el menú está abierto */
.gremro-menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.gremro-menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.gremro-menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media(max-width:960px){
.gremro-menu-toggle { display:flex }
.gremro-header__cta { display:none }
/* ── Panel móvil full-screen ── */
.gremro-nav-wrap {
display: none !important; /* oculto por defecto en móvil */
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
height: auto !important; /* reset del height:68px de desktop */
background: #09090f !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
z-index: 998 !important;
pointer-events: all !important;
}
.gremro-nav-wrap.open {
display: flex !important;
animation: gremroNavIn .28s var(--ease) both;
}
@keyframes gremroNavIn {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
/* Lista — empuja contenido por debajo del header fijo */
.gremro-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
padding-top: 68px;
flex: 1;
margin: 0;
list-style: none;
}
/* Separadores entre items */
.gremro-nav > li { border-bottom: 1px solid rgba(255,255,255,.07); }
/* Links */
.gremro-nav > li > a {
display: flex !important;
align-items: center !important;
gap: 12px;
padding: 18px 28px !important;
min-height: 62px;
font-size: 18px !important;
font-weight: 600 !important;
font-family: var(--serif) !important;
letter-spacing: .2px !important;
text-transform: none !important;
color: rgba(255,255,255,.88) !important;
border-left: 3px solid transparent;
transition: color .2s ease, background .2s ease, border-color .2s ease, padding-left .2s ease;
text-decoration: none;
}
.gremro-nav > li > a:visited { color: rgba(255,255,255,.88) !important; }
.gremro-nav > li > a:hover,
.gremro-nav > li.current-menu-item > a {
color: var(--gold-light) !important;
background: rgba(184,140,54,.08) !important;
border-left-color: var(--gold) !important;
padding-left: 34px !important;
}
/* Quitar flecha de dropdown del desktop */
.gremro-nav .has-dropdown > a::after { display:none !important }
/* Dropdown plano dentro del panel */
.gremro-dropdown {
position: static !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
box-shadow: none !important;
border: none !important;
background: rgba(255,255,255,.03) !important;
padding: 4px 0 !important;
width: 100%;
border-top: 1px solid rgba(255,255,255,.06);
}
.gremro-dropdown::before { display:none !important }
.gremro-dropdown a {
font-size: 14px !important;
padding: 12px 28px 12px 44px !important;
min-height: 44px;
color: rgba(255,255,255,.55) !important;
display: flex !important;
align-items: center;
border-left: 3px solid transparent;
transition: color .2s, border-color .2s, padding-left .2s;
}
.gremro-dropdown a:hover {
color: var(--gold-light) !important;
border-left-color: var(--gold) !important;
padding-left: 50px !important;
background: rgba(184,140,54,.05) !important;
}
/* CTAs al fondo del panel */
.gremro-nav__mobile-ctas {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 24px max(28px, env(safe-area-inset-bottom, 28px));
}
.gremro-nav__mobile-cta {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 20px;
background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
color: var(--navy-deep) !important;
border-radius: var(--r-md);
font-weight: 800;
font-family: var(--serif);
font-size: 14px;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: filter .2s, transform .2s;
text-decoration: none;
}
.gremro-nav__mobile-cta--secondary {
background: transparent !important;
color: rgba(255,255,255,.65) !important;
border: 1px solid rgba(255,255,255,.18) !important;
font-weight: 600;
letter-spacing: .8px;
}
.gremro-nav__mobile-cta--secondary:visited { color: rgba(255,255,255,.65) !important; }
.gremro-nav__mobile-cta--secondary:hover { color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.4) !important; background: rgba(255,255,255,.06) !important; transform: translateY(-1px); }
.gremro-nav__mobile-cta:visited { color: var(--navy-deep) !important; }
.gremro-nav__mobile-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
}
/* ================================================================
HERO — PARALLAX MULTICAPA
================================================================ */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: center;
overflow: hidden;
background: var(--navy-darkest);
}
/* Layer 0: Slideshow fotográfico */
.hero__slideshow {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero__slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
opacity: 0;
animation: heroSlide 36s infinite;
will-change: opacity;
transform: scale(1);
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 12s; }
.hero__slide:nth-child(3) { animation-delay: 24s; }
@keyframes heroSlide {
0% { opacity: 0; }
5% { opacity: 1; }
33% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}
/* Overlay oscuro sobre el slideshow */
.hero__slideshow::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .72);
z-index: 1;
}
/* Layer 1: Floating Lines WebGL canvas */
#heroFloatingLines {
position: absolute;
inset: 0;
z-index: 2;
mix-blend-mode: screen;
pointer-events: none;
opacity: 0.65;
}
#heroFloatingLines canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
/* Layer 2: Background base */
.hero__bg {
position:absolute;inset:0;z-index:3;
}
.hero__bg-noise {
position:absolute;inset:0;opacity:.032;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__bg-grid {
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%)
}
/* Layer 3: Orbes de color (mouse parallax) */
.hero__orbs {position:absolute;inset:0;z-index:4;pointer-events:none}
.hero__orb {position:absolute;border-radius:50%}
.hero__orb--gold {width:640px;height:640px;top:-180px;right:-160px;background:radial-gradient(circle,rgba(184,140,54,.11) 0%,transparent 65%)}
.hero__orb--blue {width:480px;height:480px;bottom:-120px;left:-80px;background:radial-gradient(circle,rgba(14,165,233,.09) 0%,transparent 65%)}
.hero__orb--green {width:360px;height:360px;top:40%;left:55%;background:radial-gradient(circle,rgba(16,185,129,.06) 0%,transparent 65%)}
/* Layer 4: Líneas decorativas (parallax CSS) */
.hero__lines {position:absolute;inset:0;z-index:5;pointer-events:none;will-change:transform}
.hero__line {
position:absolute;height:1px;
background:linear-gradient(90deg,transparent,rgba(184,140,54,.2),transparent)
}
.hero__line--1{width:60%;top:25%;left:20%;transform:rotate(-15deg)}
.hero__line--2{width:40%;top:65%;left:10%;transform:rotate(-15deg);opacity:.5}
.hero__line--3{width:30%;top:45%;right:0;transform:rotate(-15deg);opacity:.3}
/* Layer 5: Contenido (parallax inverso) */
.hero__content {
position:relative;z-index:6;width:100%;
padding-top:68px; /* header height */
will-change:transform
}
.hero__inner {
max-width:840px;margin:0 auto;padding:100px 24px 90px;
text-align:center;display:flex;flex-direction:column;align-items:center
}
/* Badge */
.hero__badge {
display:inline-flex;align-items:center;gap:10px;
background:rgba(184,140,54,.07);border:1px solid rgba(184,140,54,.22);
border-radius:var(--r-full);padding:8px 20px;margin-bottom:36px;
font-size:11px;font-weight:700;color:var(--gold-light);
text-transform:uppercase;letter-spacing:2.2px;
animation:fadeSlideDown .9s var(--ease) both
}
.hero__badge-dot {
width:6px;height:6px;border-radius:50%;background:var(--gold);
position:relative;
}
/* Pulse via pseudo-element: only opacity + transform → GPU composited */
.hero__badge-dot::after {
content:'';
position:absolute;inset:-4px;border-radius:50%;
background:rgba(184,140,54,.35);
animation:badgePulse 2.5s ease infinite;
will-change:opacity,transform;
}
@keyframes badgePulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:0;transform:scale(2.2)}}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-16px)}}
/* Title */
.hero__title {
font-family:var(--serif);
font-size:clamp(46px,7.8vw,90px);
font-weight:700;color:var(--white);
line-height:1.06;letter-spacing:-0.5px;
margin-bottom:28px;
text-shadow:
0 1px 3px rgba(0,0,0,.6),
0 6px 24px rgba(0,0,0,.5),
0 20px 56px rgba(0,0,0,.35);
}
.hero__title-line {display:block}
.hero__title-accent {
display: block;
color: var(--gold-light);
-webkit-text-fill-color: var(--gold-light);
font-weight: 600;
position: relative;
animation: heroAccentIn 1s var(--ease) .35s both;
text-shadow:
0 1px 3px rgba(0,0,0,.55),
0 6px 20px rgba(0,0,0,.45),
0 0 48px rgba(184,140,54,.2);
}
@keyframes heroAccentIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__title-accent::after {
content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
width:64px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--gold),var(--gold-dark));opacity:.55
}
.hero__sub {
font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.80);
max-width:520px;line-height:1.9;margin-bottom:48px;
font-weight:400;letter-spacing:0.1px;
text-shadow:
0 1px 4px rgba(0,0,0,.65),
0 4px 18px rgba(0,0,0,.5);
}
/* Buttons */
.hero__actions {display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:56px}
.btn--hero-primary {
display:inline-flex;align-items:center;gap:10px;
background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
color:var(--white);font-weight:800;font-size:13px;
padding:14px 36px;border-radius:var(--r-md);
text-transform:uppercase;letter-spacing:1.4px;
box-shadow:var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.2);
transition:transform var(--t),box-shadow var(--t);
font-family:var(--serif)
}
.btn--hero-primary:visited {color:var(--white)}
.btn--hero-primary:hover {transform:translateY(-3px);box-shadow:0 12px 32px rgba(184,140,54,.5),inset 0 1px 0 rgba(255,255,255,.2);color:var(--white)}
.btn--hero-primary .btn__arrow {transition:transform var(--t)}
.btn--hero-primary:hover .btn__arrow {transform:translateX(4px)}
.btn--hero-secondary {
display:inline-flex;align-items:center;gap:10px;
background:rgba(255,255,255,.06);
border:1.5px solid rgba(255,255,255,.22);
color:rgba(255,255,255,.85);font-weight:600;font-size:13px;
padding:14px 36px;border-radius:var(--r-md);
text-transform:uppercase;letter-spacing:1.4px;
backdrop-filter:blur(8px);transition:var(--t);
font-family:var(--serif)
}
.btn--hero-secondary:visited {color:rgba(255,255,255,.85)}
.btn--hero-secondary:hover {background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:var(--white)}
/* Brand chips */
.hero__brands-row {display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.hero__brands-label {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.3)}
.hero__brand-chip {
display:inline-flex;align-items:center;gap:8px;
padding:7px 16px;border-radius:var(--r-full);
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:rgba(255,255,255,.7);transition:var(--t)
}
.hero__brand-chip:hover {background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:var(--white)}
.chip__dot {width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hero__brand-chip--mechan .chip__dot {background:var(--mechan);box-shadow:0 0 8px rgba(14,165,233,.7)}
.hero__brand-chip--xishan .chip__dot {background:var(--xishan);box-shadow:0 0 8px rgba(16,185,129,.7)}
/* Scroll cue */
.hero__scroll-cue {
position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5
}
.scroll-cue__mouse {
width:26px;height:40px;border:2px solid rgba(184,140,54,.3);
border-radius:13px;display:flex;justify-content:center;padding-top:6px
}
.scroll-cue__wheel {
width:3px;height:8px;background:var(--gold);border-radius:2px;
animation:scrollWheel 2s ease-in-out infinite
}
@keyframes scrollWheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}
.scroll-cue__label {
font-size:9px;text-transform:uppercase;letter-spacing:3px;
color:rgba(255,255,255,.25)
}
/* ================================================================
STATS STRIP
================================================================ */
.stats-strip {background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.06)}
.stats-strip__inner {
max-width:1280px;margin:0 auto;padding:0 24px;
display:flex;align-items:center;justify-content:center;flex-wrap:wrap
}
.stat-block {
display:flex;flex-direction:column;align-items:center;
padding:40px 48px;text-align:center;flex:1;min-width:140px
}
.stat-block__value {
font-family:var(--serif);font-size:clamp(40px,5vw,60px);
font-weight:900;color:var(--white);line-height:1;letter-spacing:0px;
display:flex;align-items:flex-start;gap:2px
}
.stat-block__value>span {
background:linear-gradient(135deg,var(--gold-light),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.stat-block__value>sup {
font-size:.45em;color:var(--gold);-webkit-text-fill-color:var(--gold);
margin-top:.3em;font-family:var(--font);font-weight:700
}
.stat-block__label {
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
color:rgba(255,255,255,.35);margin-top:10px
}
.stat-block__divider {
width:1px;height:60px;background:rgba(255,255,255,.07);flex-shrink:0;align-self:center
}
@media(max-width:680px){.stat-block{padding:28px 24px}.stat-block__divider:nth-child(4){display:none}}
/* ================================================================
BRAND SPLIT — Parallax image + content
================================================================ */
.brand-split {
display:grid;grid-template-columns:1fr 1fr;min-height:640px;
}
.brand-split--reverse {direction:rtl}
.brand-split--reverse>* {direction:ltr}
@media(max-width:768px){
.brand-split{grid-template-columns:1fr}
.brand-split--reverse{direction:ltr}
}
/* Visual panel */
.brand-split__visual {
position:relative;overflow:hidden;min-height:480px
}
.brand-split__visual-bg {
position:absolute;inset:-20%;background-size:cover;background-position:center;
will-change:background-position
}
.brand-split--mechan .brand-split__visual-bg {
background-image: url('../images/mechanshowcase.webp');
background-size: cover;
background-position: center;
}
.brand-split--xishan .brand-split__visual-bg {
background-image: url('../images/xishanshowcase.webp');
background-size: cover;
background-position: center;
}
.brand-split__visual-overlay {position:absolute;inset:0;pointer-events:none}
.brand-split--mechan .brand-split__visual-overlay {
background:
linear-gradient(135deg, rgba(14,165,233,.12) 0%, rgba(4,14,28,.60) 100%),
linear-gradient(to right, transparent 55%, rgba(4,14,28,.96) 100%);
}
.brand-split--reverse .brand-split__visual-overlay {
background:
linear-gradient(135deg, rgba(16,185,129,.12) 0%, rgba(3,13,8,.60) 100%),
linear-gradient(to left, transparent 55%, rgba(3,13,8,.96) 100%);
}
/* Brand logo centered inside visual panel */
.brand-split__logo-wrap {
position: absolute; inset: 0; z-index: 2;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.brand-split__logo-img {
width: clamp(120px, 42%, 230px);
object-fit: contain;
opacity: 0.85;
filter: drop-shadow(0 6px 40px rgba(0,0,0,.7));
}
/* Watermark */
.brand-split__wm {
position:absolute;bottom:-20px;right:-20px;
font-family:var(--serif);font-size:clamp(80px,14vw,160px);font-weight:900;
line-height:1;letter-spacing:-6px;pointer-events:none;user-select:none
}
.brand-split--mechan .brand-split__wm {color:rgba(14,165,233,.06)}
.brand-split--xishan .brand-split__wm {color:rgba(16,185,129,.06)}
/* Floating stat card inside visual */
.brand-split__stat-card {
display: none;
}
.brand-split--reverse .brand-split__stat-card {left:auto;right:32px}
.brand-split__stat-card-value {
font-family:var(--serif);font-size:28px;font-weight:900;
line-height:1;letter-spacing:1px;margin-bottom:4px
}
.brand-split__stat-card-label {font-size:12px;color:rgba(255,255,255,.5);font-weight:500}
/* Content panel */
.brand-split__content {
display:flex;align-items:center;
background:var(--navy-deep);
}
.brand-split--mechan .brand-split__content {background:var(--mechan-bg)}
.brand-split--xishan .brand-split__content {background:var(--xishan-bg)}
.brand-split__content-inner {
padding:72px 56px;max-width:520px
}
@media(max-width:960px){.brand-split__content-inner{padding:56px 40px}}
@media(max-width:768px){.brand-split__content-inner{padding:48px 28px;max-width:none}}
.brand-split__eyebrow {
display:inline-flex;align-items:center;gap:8px;
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;
padding:6px 14px;border-radius:var(--r-full);margin-bottom:22px
}
.brand-split__eyebrow--mechan {background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.2);color:var(--mechan-light)}
.brand-split__eyebrow--xishan {background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:var(--xishan-light)}
.eyebrow__dot {width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.brand-split__name {
font-family:var(--serif);
font-size:clamp(48px,7vw,72px);
font-weight:900;line-height:1;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px
}
.brand-split__tagline {
font-size:16px;font-weight:600;color:rgba(255,255,255,.45);
text-transform:uppercase;letter-spacing:2px;margin-bottom:20px
}
.brand-split__desc {
font-size:16px;color:rgba(255,255,255,.62);line-height:1.8;margin-bottom:28px
}
/* Pills */
.brand-split__pills {
display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:36px
}
.pill {
font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--r-full);
text-transform:uppercase;letter-spacing:.8px
}
.pill--mechan {background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.2);color:var(--mechan-light)}
.pill--xishan {background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:var(--xishan-light)}
/* Outline buttons */
.btn--mechan-outline,.btn--xishan-outline {
display:inline-flex;align-items:center;gap:8px;
background:transparent;font-weight:700;font-size:13px;
padding:11px 26px;border-radius:var(--r-md);
text-transform:uppercase;letter-spacing:.7px;transition:var(--t)
}
.btn--mechan-outline {border:2px solid rgba(14,165,233,.4);color:var(--mechan-light)}
.btn--mechan-outline:visited {color:var(--mechan-light)}
.btn--mechan-outline:hover {background:rgba(14,165,233,.1);border-color:var(--mechan);color:var(--white)}
.btn--xishan-outline {border:2px solid rgba(16,185,129,.4);color:var(--xishan-light)}
.btn--xishan-outline:visited {color:var(--xishan-light)}
.btn--xishan-outline:hover {background:rgba(16,185,129,.1);border-color:var(--xishan);color:var(--white)}
/* ================================================================
SECTION HEADERS
================================================================ */
.section-head {text-align:center;margin-bottom:56px}
.section-head__eyebrow {
display:inline-block;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:3px;color:var(--gold);margin-bottom:14px
}
.section-head__eyebrow--light {color:rgba(255,255,255,.4)}
.section-head__title {
font-family:var(--serif);font-size:clamp(30px,4.5vw,52px);
font-weight:800;color:var(--navy);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px
}
.section-head--light .section-head__title {color:var(--white);letter-spacing:2px}
.section-head__sub {
font-size:17px;color:var(--gray-500);max-width:520px;margin:0 auto;line-height:1.75
}
.divider-gold {width:36px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-dark));border-radius:2px;margin:12px auto 0}
/* ================================================================
CATEGORIES — Horizontal scroll
================================================================ */
.categories-section {
padding: 96px 0;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Background image at 40% opacity */
.categories-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../images/insumos-bg.webp');
background-size: cover;
background-position: center;
opacity: .40;
z-index: 0;
}
/* Dark overlay to ensure contrast */
.categories-section::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(10,14,30,.55) 0%,
rgba(10,14,30,.45) 50%,
rgba(10,14,30,.60) 100%
);
z-index: 1;
}
.categories-section .container,
.categories-section .h-scroll-wrap {
position: relative;
z-index: 2;
}
/* Override section-head text colors for dark bg */
.categories-section .section-head__eyebrow { color: var(--gold) !important; }
.categories-section .section-head__title { color: var(--white) !important; }
.categories-section .section-head__sub { color: rgba(255,255,255,.70) !important; }
.categories-section .container {padding-bottom:0}
.h-scroll-wrap {
position: relative;
margin-top: 48px;
overflow: hidden;
/* edge-fade mask */
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.h-scroll-track {
display: flex;
gap: 16px;
padding: 12px 0 28px;
width: max-content;
animation: gremro-marquee 38s linear infinite;
cursor: default;
}
.h-scroll-wrap:hover .h-scroll-track { animation-play-state: paused; }
@keyframes gremro-marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce) {
.h-scroll-track {
animation: none;
overflow-x: auto;
scrollbar-width: none;
cursor: grab;
}
}
/* Fade edges — kept for JS-drag fallback (reduced-motion) */
.h-scroll-fade { display: none; }
/* Category tile — designed for dark bg */
.cat-tile {
flex-shrink: 0;
width: 190px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.6);
border-radius: 20px;
padding: 28px 18px 22px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s, background .28s;
scroll-snap-align: start;
position: relative;
overflow: hidden;
box-shadow: none;
text-decoration: none;
}
/* Colored top bar */
.cat-tile::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent, var(--gold));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
border-radius: 20px 20px 0 0;
}
@media(hover:hover) {
.cat-tile:hover {
background: rgba(255,255,255,1);
border-color: color-mix(in srgb, var(--accent,var(--gold)) 50%, transparent);
transform: translateY(-8px);
box-shadow: none;
}
.cat-tile:hover::before { transform: scaleX(1); }
.cat-tile:hover .cat-tile__icon {
transform: translateY(-3px) scale(1.08);
background: color-mix(in srgb, var(--accent,var(--gold)) 18%, transparent);
}
.cat-tile:hover .cat-tile__arrow { opacity: 1; transform: translateX(0); }
}
/* Icon container — now holds SVG */
.cat-tile__icon {
width:58px;height:58px;border-radius:16px;margin-bottom:16px;
background:color-mix(in srgb, var(--accent,var(--gold)) 10%, transparent);
border:1.5px solid color-mix(in srgb, var(--accent,var(--gold)) 22%, transparent);
display:flex;align-items:center;justify-content:center;
color:var(--accent,var(--gold));
transition:transform .3s var(--ease), background .3s;
}
.cat-tile__icon svg {width:26px;height:26px;stroke:currentColor}
.cat-tile__name {
font-size:13px;font-weight:700;color:var(--navy);
margin-bottom:6px;line-height:1.35;
}
.cat-tile__count {
font-size:11px;color:var(--gray-400);font-weight:500;
background:var(--gray-100);padding:3px 9px;border-radius:20px;
display:inline-block;
}
.cat-tile__arrow {
margin-top:14px;color:var(--accent,var(--gold));
opacity:0;transform:translateX(-5px);
transition:opacity .25s, transform .25s;
display:flex;align-items:center;
}
/* ================================================================
PRODUCTS — Section wrapper
================================================================ */
.products-section {
padding: 96px 0;
background: #f4f5f7;
}
.products-section .container { padding-top: 0; }
.products-section .section-head__title,
.products-section .section-head__eyebrow { color: var(--navy) !important; }
/* ── Homepage custom product grid (no WooCommerce template) ── */
.gremro-products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0 0 8px;
}
@media(max-width: 900px) { .gremro-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 520px) { .gremro-products-grid { grid-template-columns: 1fr; gap: 16px; } }
.gremro-product-card {
background: var(--white);
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.03);
transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@media(hover: hover) {
.gremro-product-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
transform: translateY(-4px);
border-color: rgba(184,140,54,.3);
}
.gremro-product-card:hover .gremro-product-card__img { transform: scale(1.04); }
.gremro-product-card:hover::before { opacity: 1; }
}
/* Gold bar top */
.gremro-product-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold-light), var(--gold));
opacity: 0; transition: opacity .25s var(--ease); z-index: 2;
border-radius: 12px 12px 0 0; pointer-events: none;
}
.gremro-product-card__link {
display: flex; flex-direction: column;
flex: 1; text-decoration: none; color: inherit;
}
.gremro-product-card__img {
width: 100%; height: 200px;
object-fit: contain; padding: 20px;
background: #f8f9fb;
border-bottom: 1px solid #efefef;
display: block; flex-shrink: 0;
transition: transform .4s var(--ease);
}
.gremro-product-card__title {
font-family: var(--font);
font-size: 14px; font-weight: 600;
color: var(--gray-900);
padding: 14px 16px 4px; margin: 0;
line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: 42px;
}
.gremro-product-card__meta {
font-size: 11px; color: var(--gray-400);
font-family: var(--font); padding: 4px 16px 10px;
letter-spacing: .3px; font-weight: 500; margin: 0;
min-height: 28px;
}
.gremro-product-card__divider {
height: 1px; background: #f0f0f0; margin: 0;
}
.gremro-product-card__actions {
display: flex; flex-direction: column; gap: 8px;
padding: 14px 14px 16px; margin-top: auto;
}
.gremro-product-card__btn--primary {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 11px 16px; font-size: 12px; border-radius: 8px;
background: linear-gradient(135deg, var(--gold-light), var(--gold));
color: #1a1a1a; font-weight: 700; font-family: var(--font);
text-transform: uppercase; letter-spacing: .8px;
border: none; cursor: pointer; text-decoration: none;
transition: filter .2s, transform .2s, box-shadow .2s;
}
.gremro-product-card__btn--primary:hover {
filter: brightness(1.07); transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(184,140,54,.4);
}
/* ── Cotizar button global ── */
.btn-cotizar,
.gremro-btn-cotizar {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gold-light), var(--gold));
color: var(--navy-deep) !important; font-weight: 800; font-size: 11px;
padding: 10px 16px; border-radius: var(--r-full); transition: var(--t);
text-transform: uppercase; letter-spacing: 1.2px; font-family: var(--serif);
border: none; cursor: pointer; white-space: nowrap;
}
.btn-cotizar:visited,
.gremro-btn-cotizar:visited { color: var(--navy-deep) !important; }
.btn-cotizar:hover,
.gremro-btn-cotizar:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-gold); color: var(--navy-deep) !important; }
.gremro-btn-cotizar--lg { font-size: 13px; padding: 13px 24px; }
/* Hide WooCommerce cart / add-to-cart elements */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce .cart, .woocommerce-cart-form,
.widget_shopping_cart, .cart-contents { display: none !important; }
/* ================================================================
ABOUT — Parallax full-bleed
Referencia: BD About page, Philips Commitment sections
================================================================ */
.about-parallax {
position:relative;padding:120px 0;overflow:hidden;
min-height:640px;display:flex;align-items:center
}
.about-parallax__bg {
position:absolute;inset:-25%;
background:
radial-gradient(ellipse at 30% 60%, rgba(184,140,54,.10) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(14,165,233,.06) 0%, transparent 40%),
var(--navy);
background-size:cover;background-position:center;
will-change:background-position
}
.about-parallax__overlay {
position:absolute;inset:0;
background:linear-gradient(to right, rgba(26,26,46,.88) 45%, rgba(26,26,46,.55) 100%)
}
.about-parallax__inner {
position:relative;z-index:2;
display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:center
}
@media(max-width:960px){.about-parallax__inner{grid-template-columns:1fr;gap:48px}}
/* Text */
.about-parallax__eyebrow {
display:inline-block;color:var(--gold);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:2.5px;margin-bottom:18px
}
.about-parallax__title {
font-family:var(--serif);font-size:clamp(30px,4.5vw,50px);
font-weight:800;color:var(--white);letter-spacing:1px;text-transform:uppercase;
margin-bottom:20px;line-height:1.1
}
.about-parallax__desc {
font-size:16px;color:rgba(255,255,255,.62);line-height:1.82;margin-bottom:36px
}
/* Value rows */
.about-parallax__values {display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.about-parallax__value {
display:flex;align-items:flex-start;gap:14px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
border-radius:var(--r-md);padding:14px 16px;transition:background var(--t)
}
.about-parallax__value:hover {background:rgba(255,255,255,.07)}
.about-value-icon {
font-size:22px;flex-shrink:0;width:36px;height:36px;
display:flex;align-items:center;justify-content:center
}
.about-value-title {font-weight:700;color:var(--white);font-size:13px;margin-bottom:2px}
.about-value-desc {font-size:12px;color:rgba(255,255,255,.42);line-height:1.55}
/* Metric card */
.metric-card {
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-xl);padding:40px 32px;text-align:center;
box-shadow:var(--shadow-xl);
display:flex;flex-direction:column;align-items:center
}
.metric-card__number {
font-family:var(--serif);font-size:56px;font-weight:900;line-height:1;
background:linear-gradient(135deg,var(--gold-light),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
letter-spacing:0px
}
.metric-card__label {color:rgba(255,255,255,.45);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin:8px 0}
.metric-card__divider {
width:32px;height:1px;background:rgba(184,140,54,.3);
margin:16px 0
}
/* ================================================================
BLOG
================================================================ */
.blog-section {padding:96px 0;background:var(--off-white)}
.blog-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.blog-grid{grid-template-columns:1fr}}
.blog-card {
background:var(--white);border:1px solid var(--gray-200);
border-radius:var(--r-lg);overflow:hidden;
transition:var(--t);display:flex;flex-direction:column;
box-shadow:var(--shadow-sm)
}
.blog-card:hover {transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:transparent}
.blog-card__img-wrap {
display:block;height:200px;overflow:hidden;
background:var(--gray-100);position:relative
}
.blog-card__img-wrap img {
width:100%;height:100%;object-fit:cover;
transition:transform .6s var(--ease)
}
.blog-card:hover .blog-card__img-wrap img {transform:scale(1.07)}
.blog-card__img-placeholder {
height:100%;display:flex;align-items:center;justify-content:center;
font-size:56px;background:linear-gradient(135deg,var(--navy),var(--navy-mid))
}
.blog-card__cat {
position:absolute;top:12px;left:12px;
background:var(--navy);color:var(--gold-light);
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
padding:4px 10px;border-radius:var(--r-full)
}
.blog-card__body {padding:22px;flex:1;display:flex;flex-direction:column}
.blog-card__date {font-size:11px;color:var(--gray-400);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.blog-card__title {
font-family:var(--serif);font-size:18px;color:var(--navy);
line-height:1.3;margin-bottom:10px;transition:color var(--t);font-weight:700;letter-spacing:.5px
}
.blog-card:hover .blog-card__title {color:var(--gold-dark)}
.blog-card__excerpt {font-size:13px;color:var(--gray-500);line-height:1.65;flex:1}
.blog-card__readmore {
display:inline-flex;align-items:center;gap:6px;
margin-top:16px;color:var(--gold-dark);
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
transition:gap var(--t),color var(--t)
}
.blog-card:hover .blog-card__readmore {gap:10px;color:var(--gold)}
/* ================================================================
CTA BANNER
================================================================ */
.cta-banner {
padding:96px 24px;text-align:center;position:relative;overflow:hidden;
background: var(--navy-deep);
border-top: 1px solid rgba(184,140,54,.15);
border-bottom: 1px solid rgba(184,140,54,.15);
}
.cta-banner::before {
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 70% 80% at 50% 50%, rgba(184,140,54,.08) 0%, transparent 65%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
}
.cta-banner__inner {position:relative;z-index:1;max-width:600px;margin:0 auto}
.cta-banner h2 {font-family:var(--serif);font-size:clamp(28px,4vw,46px);color:var(--white);margin-bottom:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.cta-banner p {color:rgba(255,255,255,.55);font-size:17px;margin-bottom:36px}
.cta-banner__actions {display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Shared buttons */
.btn--navy-solid {
display:inline-flex;align-items:center;gap:8px;
background:var(--navy);color:var(--gold-light)!important;
font-weight:700;font-size:13px;padding:12px 28px;border-radius:var(--r-md);
text-transform:uppercase;letter-spacing:1px;transition:var(--t);
border:1.5px solid rgba(184,140,54,.3);
box-shadow:var(--shadow-md);font-family:var(--serif)
}
.btn--navy-solid:visited {color:var(--gold-light)!important}
.btn--navy-solid:hover {background:var(--navy-mid);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--gold-light)!important;border-color:var(--gold)}
.btn--gold-solid {
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
color:var(--navy)!important;font-weight:800;font-size:13px;
padding:12px 28px;border-radius:var(--r-md);
text-transform:uppercase;letter-spacing:1px;transition:var(--t);
box-shadow:var(--shadow-gold);font-family:var(--serif)
}
.btn--gold-solid:visited {color:var(--navy)!important}
.btn--gold-solid:hover {transform:translateY(-2px);box-shadow:0 8px 28px rgba(184,140,54,.5);color:var(--navy)!important}
/* ================================================================
FOOTER
================================================================ */
.gremro-footer {background:var(--navy-darkest);padding:72px 24px 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.footer-grid {
max-width:1280px;margin:0 auto;
display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.06)
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:28px}}
.footer-brand__logo {margin-bottom:16px}
.footer-brand__logo img {height:38px}
.footer-brand__desc {font-size:13px;line-height:1.75;color:rgba(255,255,255,.35);max-width:260px}
.footer-col__title {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--gold-light);margin-bottom:18px;font-family:var(--serif)}
.footer-links {list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a {font-size:13px;color:rgba(255,255,255,.42);transition:var(--t);display:inline-flex;align-items:center;gap:6px}
.footer-links a:visited {color:rgba(255,255,255,.42)}
.footer-links a:hover {color:var(--white);padding-left:4px}
.footer-contact-item {display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.footer-contact-item__icon {color:var(--gold);flex-shrink:0;margin-top:1px}
.footer-contact-item__text {font-size:13px;color:rgba(255,255,255,.45);line-height:1.5}
.footer-social {display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.footer-social__link {
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:9px;
color:rgba(255,255,255,.5);
border:1px solid rgba(255,255,255,.1);
transition:color .2s,border-color .2s,background .2s;
}
.footer-social__link:hover {
color:#fff;
border-color:rgba(184,140,54,.5);
background:rgba(184,140,54,.08);
}
.footer-social__link:focus { outline:none; }
.footer-social__link:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.footer-bottom {
max-width:1280px;margin:0 auto;padding:20px 0;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
font-size:12px;color:rgba(255,255,255,.22)
}
.footer-bottom a {color:rgba(255,255,255,.22);transition:color var(--t)}
.footer-bottom a:hover {color:var(--gold-light)}
/* ================================================================
BRAND PAGES (Mechan / Xishan)
================================================================ */
.brand-hero {
position:relative;min-height:90svh;display:flex;align-items:center;
overflow:hidden;padding:120px 24px 80px
}
.brand-hero--mechan {
background-image: url('../images/mechanshowcase.webp');
background-size: cover; background-position: center;
}
.brand-hero--mechan::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: linear-gradient(135deg, rgba(3,11,24,.90) 0%, rgba(14,165,233,.10) 100%);
}
.brand-hero--xishan {
background-image: url('../images/xishanshowcase.webp');
background-size: cover; background-position: center;
}
.brand-hero--xishan::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: linear-gradient(135deg, rgba(2,8,5,.90) 0%, rgba(16,185,129,.10) 100%);
}
/* Brand hero showcase logo (large watermark behind content) */
.brand-hero__showcase-logo {
position: absolute; inset: 0; z-index: 0;
display: flex; align-items: center; justify-content: flex-end;
padding-right: clamp(60px, 10vw, 160px);
pointer-events: none;
}
.brand-hero__showcase-logo img {
width: clamp(200px, 30vw, 400px);
object-fit: contain;
opacity: 0.20;
filter: drop-shadow(0 0 60px rgba(255,255,255,.15));
}
.brand-hero__glow {
position:absolute;border-radius:50%;pointer-events:none;
animation:glowBreath 6s ease-in-out infinite
}
.brand-hero--mechan .brand-hero__glow {
width:800px;height:800px;top:-300px;right:-200px;
background:radial-gradient(circle,rgba(14,165,233,.13) 0%,transparent 60%)
}
.brand-hero--xishan .brand-hero__glow {
width:800px;height:800px;bottom:-300px;left:-200px;
background:radial-gradient(circle,rgba(16,185,129,.13) 0%,transparent 60%)
}
@keyframes glowBreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.brand-hero__bg-wm {
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-family:var(--serif);font-size:clamp(130px,24vw,340px);
font-weight:900;white-space:nowrap;pointer-events:none;user-select:none;
letter-spacing:-12px;line-height:1
}
.brand-hero--mechan .brand-hero__bg-wm {color:rgba(14,165,233,.025)}
.brand-hero--xishan .brand-hero__bg-wm {color:rgba(16,185,129,.025)}
.brand-hero__inner {
max-width:1280px;margin:0 auto;width:100%;position:relative;z-index:2;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start
}
@media(max-width:768px){.brand-hero__inner{grid-template-columns:1fr;gap:48px}}
/* Brand pages feature cards */
.brand-features {display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:580px){.brand-features{grid-template-columns:1fr}}
.brand-feat {
background:var(--white);border:1px solid var(--gray-200);
border-radius:var(--r-lg);padding:26px;transition:var(--t);
box-shadow:var(--shadow-sm);position:relative;overflow:hidden
}
.brand-feat::before {
content:'';position:absolute;top:0;left:0;right:0;height:2px;
transform:scaleX(0);transition:transform var(--t);transform-origin:left
}
.brand-feat--mechan::before {background:var(--mechan)}
.brand-feat--xishan::before {background:var(--xishan)}
.brand-feat:hover {transform:translateY(-3px);box-shadow:var(--shadow-md)}
.brand-feat:hover::before {transform:scaleX(1)}
.brand-feat__icon {
width:46px;height:46px;border-radius:12px;
display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px
}
.brand-feat--mechan .brand-feat__icon {background:rgba(14,165,233,.09)}
.brand-feat--xishan .brand-feat__icon {background:rgba(16,185,129,.09)}
.brand-feat__title {font-weight:700;color:var(--navy);font-size:14px;margin-bottom:6px}
.brand-feat__desc {font-size:13px;color:var(--gray-500);line-height:1.65}
/* About / Contact / Nosotros sections */
.about-hero {
background:var(--navy-deep);padding:120px 24px 80px;
text-align:center;position:relative;overflow:hidden
}
.about-hero::before {
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse at 50% -10%,rgba(184,140,54,.09) 0%,transparent 60%)
}
.about-hero__inner {max-width:680px;margin:0 auto;position:relative;z-index:1}
.contact-layout {display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:40px}}
.contact-form-card {
background:var(--white);border:1px solid var(--gray-200);
border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-md)
}
.form-group {display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:580px){.form-row{grid-template-columns:1fr}}
.form-label {font-size:11px;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.8px}
.form-input,.form-select,.form-textarea {
padding:11px 14px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);
font-family:var(--font);font-size:14px;color:var(--gray-900);
background:var(--white);transition:border-color var(--t),box-shadow var(--t);
outline:none;width:100%
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,140,54,.12)
}
.form-textarea {resize:vertical;min-height:120px}
/* Timeline */
.timeline {position:relative;padding-left:48px}
.timeline::before {
content:'';position:absolute;left:12px;top:8px;bottom:8px;
width:1px;background:linear-gradient(to bottom,var(--gold),rgba(184,140,54,.1))
}
.timeline__item {display:flex;gap:24px;padding-bottom:36px;position:relative}
.timeline__dot {
position:absolute;left:-40px;top:4px;
width:16px;height:16px;border-radius:50%;
background:var(--navy);border:2.5px solid var(--gold);
box-shadow:0 0 0 4px rgba(184,140,54,.15),0 0 12px rgba(184,140,54,.2)
}
.timeline__year {font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap;padding-top:3px;min-width:44px}
.timeline__title {font-weight:700;color:var(--navy);font-size:15px;margin-bottom:4px}
.timeline__desc {font-size:13px;color:var(--gray-500);line-height:1.65}
/* Values grid */
.values-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:780px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.values-grid{grid-template-columns:1fr}}
.value-card {
background:var(--white);border:1px solid var(--gray-200);
border-radius:var(--r-lg);padding:28px 22px;text-align:center;
transition:var(--t);box-shadow:var(--shadow-sm);position:relative;overflow:hidden
}
.value-card::after {
content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--gold),var(--gold-dark));
transform:scaleX(0);transition:transform var(--t)
}
.value-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-md)}
.value-card:hover::after {transform:scaleX(1)}
.value-card__icon {
width:60px;height:60px;border-radius:18px;margin:0 auto 18px;
background:var(--gold-100);border:1px solid var(--gold-200);
display:flex;align-items:center;justify-content:center;font-size:26px;
transition:transform var(--t-slow) var(--ease-spring)
}
.value-card:hover .value-card__icon {transform:scale(1.1) rotate(-5deg)}
.value-card__title {font-family:var(--serif);font-size:16px;color:var(--navy);margin-bottom:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.value-card__desc {font-size:13px;color:var(--gray-500);line-height:1.65}
/* ================================================================
REVEAL ANIMATIONS — fade-in only, no transform, instant
================================================================ */
.reveal {
opacity:0;
transition:opacity .45s ease
}
.reveal.visible {opacity:1}
.reveal-delay-1,.reveal-delay-2,.reveal-delay-3,.reveal-delay-4{transition-delay:0s}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
.reveal{opacity:1}
}
/* ================================================================
MISC
================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ================================================================
ABOUT HERO — content classes
================================================================ */
.about-hero__title {
font-family: var(--serif);
font-size: clamp(32px, 5vw, 56px);
font-weight: 800; color: var(--white);
letter-spacing: 2px; text-transform: uppercase; line-height: 1.05; margin-bottom: 20px;
}
.about-hero__title span {
background: linear-gradient(135deg, var(--gold-light), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.about-hero__desc {
font-size: 17px; color: rgba(255,255,255,.58); line-height: 1.82; max-width: 600px; margin: 0 auto;
}
/* ================================================================
GREMRO STATS BAR (nosotros page)
================================================================ */
.gremro-stats { background: var(--navy-mid); border-bottom: 1px solid rgba(255,255,255,.06); }
.gremro-stats__inner {
max-width: 1280px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.gremro-stats__item {
display: flex; flex-direction: column; align-items: center;
padding: 40px 48px; text-align: center; flex: 1; min-width: 140px;
border-right: 1px solid rgba(255,255,255,.06);
}
.gremro-stats__item:last-child { border-right: none; }
.gremro-stats__number {
font-family: var(--serif); font-size: clamp(36px, 5vw, 56px);
font-weight: 900; color: var(--white); line-height: 1; letter-spacing: 0px;
background: linear-gradient(135deg, var(--gold-light), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gremro-stats__unit { font-size: .55em; -webkit-text-fill-color: var(--gold); color: var(--gold); }
.gremro-stats__label {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
color: rgba(255,255,255,.35); margin-top: 10px;
}
@media(max-width:680px) {
.gremro-stats__item { padding: 28px 24px; min-width: 50%; border-right: none; }
}
/* ================================================================
SECTION LAYOUT SYSTEM (gremro-section)
================================================================ */
.gremro-section { padding: 96px 0; }
.gremro-section--dark { background: var(--navy-deep); }
.gremro-section--gray { background: var(--off-white); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.gremro-section__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.gremro-section__inner--md { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.gremro-section__header { text-align: center; margin-bottom: 56px; }
.gremro-section__label {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px;
padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 14px;
background: rgba(184,140,54,.1); border: 1px solid rgba(184,140,54,.2); color: var(--gold-light);
}
.gremro-section__label--mechan { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.2); color: var(--mechan-light); }
.gremro-section__label--xishan { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: var(--xishan-light); }
.gremro-section__title {
font-family: var(--serif);
font-size: clamp(30px, 4.5vw, 52px);
font-weight: 800; color: var(--navy); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px;
}
.gremro-section--dark .gremro-section__title { color: var(--white); }
.gremro-section__desc {
font-size: 17px; color: var(--gray-500); max-width: 520px; margin: 0 auto; line-height: 1.75;
}
.gremro-section--dark .gremro-section__desc { color: rgba(255,255,255,.5); }
.gremro-section--navy { background: var(--navy); }
@media(max-width:768px) { .gremro-section { padding: 64px 0; } }
@media(max-width:480px) { .gremro-section { padding: 48px 0; } }
/* ================================================================
ABOUT TIMELINE (nosotros page)
================================================================ */
.about-timeline { position: relative; padding-left: 48px; }
.about-timeline::before {
content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px;
width: 1px; background: linear-gradient(to bottom, var(--gold), rgba(184,140,54,.1));
}
.about-timeline__item {
display: flex; gap: 20px; padding-bottom: 36px; position: relative;
}
.about-timeline__dot {
position: absolute; left: -40px; top: 5px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--navy); border: 2.5px solid var(--gold);
box-shadow: 0 0 0 4px rgba(184,140,54,.15), 0 0 12px rgba(184,140,54,.2);
flex-shrink: 0;
}
.about-timeline__year {
font-size: 12px; font-weight: 700; color: var(--gold);
white-space: nowrap; padding-top: 3px; min-width: 44px; flex-shrink: 0;
}
.about-timeline__content h4 { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.about-timeline__content p { font-size: 13px; color: var(--gray-500); line-height: 1.65; }
.gremro-section--navy .about-timeline__content h4 { color: var(--white); }
.gremro-section--navy .about-timeline__content p { color: rgba(255,255,255,.5); }
@media(max-width:580px) {
.about-timeline { padding-left: 36px; }
.about-timeline__dot { left: -30px; }
}
/* ================================================================
MISSION / VISION GRID (nosotros page)
================================================================ */
.mission-vision-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
}
@media(max-width:700px) { .mission-vision-grid { grid-template-columns: 1fr; } }
.mv-card {
border-radius: 20px; padding: 48px 40px; position: relative; overflow: hidden;
}
.mv-card--dark { background: var(--navy); }
.mv-card--light { background: var(--off-white); border: 1px solid var(--gray-200); }
.mv-card__wm {
position: absolute; top: -30px; right: -20px;
font-family: var(--serif); font-size: 140px; font-weight: 900;
line-height: 1; pointer-events: none; user-select: none; opacity: .04;
}
.mv-card--dark .mv-card__wm { color: var(--white); }
.mv-card--light .mv-card__wm { color: var(--navy); }
.mv-card__icon {
width: 52px; height: 52px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; margin-bottom: 24px;
}
.mv-card--dark .mv-card__icon {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
box-shadow: 0 6px 18px rgba(184,140,54,.3);
}
.mv-card--light .mv-card__icon {
background: rgba(184,140,54,.1); border: 1px solid rgba(184,140,54,.25);
}
.mv-card__title { font-family: var(--serif); font-size: 26px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
.mv-card--dark .mv-card__title { color: var(--white); }
.mv-card--light .mv-card__title { color: var(--navy); }
.mv-card__desc { font-size: 16px; line-height: 1.8; }
.mv-card--dark .mv-card__desc { color: rgba(255,255,255,.62); }
.mv-card--light .mv-card__desc { color: var(--gray-500); }
@media(max-width:480px) {
.mv-card { padding: 32px 24px; }
.mv-card__wm { font-size: 100px; }
}
/* ================================================================
BRAND HERO — Content classes
================================================================ */
.brand-hero__bg-text {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-family: var(--serif); font-size: clamp(130px, 24vw, 340px);
font-weight: 900; white-space: nowrap; pointer-events: none; user-select: none;
letter-spacing: -12px; line-height: 1; z-index: 0;
}
.brand-hero--mechan .brand-hero__bg-text { color: rgba(14,165,233,.025); }
.brand-hero--xishan .brand-hero__bg-text { color: rgba(16,185,129,.025); }
.brand-hero__tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 20px;
}
.brand-hero--mechan .brand-hero__tag {
color: var(--mechan-light); background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.2);
}
.brand-hero--xishan .brand-hero__tag {
color: var(--xishan-light); background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2);
}
.brand-hero__subtitle {
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px;
color: rgba(255,255,255,.4); margin-bottom: 14px; display: block;
}
.brand-hero__title {
font-family: var(--serif);
font-size: clamp(52px, 8vw, 88px);
font-weight: 900; color: var(--white);
line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px;
}
.brand-hero__desc {
font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.8; margin-bottom: 36px; max-width: 540px;
}
.brand-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media(max-width:480px) {
.brand-hero__actions { flex-direction: column; }
.brand-hero__actions a { width: 100%; justify-content: center; }
}
/* Brand stats column */
.brand-hero__stats { display: flex; flex-direction: column; gap: 12px; }
.brand-stat {
padding: 14px 20px;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.22);
border-radius: var(--r-lg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--t);
}
.brand-hero--mechan .brand-stat { border-color: rgba(14,165,233,.40); }
.brand-hero--xishan .brand-stat { border-color: rgba(16,185,129,.40); }
.brand-stat:hover { background: rgba(0,0,0,.70); transform: translateX(4px); }
.brand-stat__number {
font-family: var(--serif); font-size: clamp(32px, 4vw, 46px);
font-weight: 900; color: var(--white); line-height: 1; display: block; margin-bottom: 5px;
}
.brand-hero--mechan .brand-stat__number { color: var(--mechan-light); }
.brand-hero--xishan .brand-stat__number { color: var(--xishan-light); }
.brand-stat__label {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
color: rgba(255,255,255,.75); display: block;
}
/* ================================================================
BRAND FEATURE CARDS (brand-feature-card = alias for brand-feat)
================================================================ */
.brand-feature-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--r-lg); padding: 26px; transition: var(--t);
box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.brand-feature-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
transform: scaleX(0); transition: transform var(--t); transform-origin: left;
}
.brand-feature-card--mechan::before { background: var(--mechan); }
.brand-feature-card--xishan::before { background: var(--xishan); }
.brand-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.brand-feature-card:hover::before { transform: scaleX(1); }
.brand-feature-card__icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; margin-bottom: 16px;
}
.brand-feature-card--mechan .brand-feature-card__icon { background: rgba(14,165,233,.09); }
.brand-feature-card--xishan .brand-feature-card__icon { background: rgba(16,185,129,.09); }
.brand-feature-card__title { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 8px; }
.brand-feature-card__desc { font-size: 13px; color: var(--gray-500); line-height: 1.7; }
/* ================================================================
BUTTONS — Complete set
================================================================ */
.btn-gold {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
color: var(--navy) !important; font-weight: 800; font-size: 12px;
padding: 11px 28px; border-radius: var(--r-md);
text-transform: uppercase; letter-spacing: 1.2px;
box-shadow: var(--shadow-gold); transition: var(--t);
border: none; font-family: var(--serif);
}
.btn-gold:visited { color: var(--navy) !important; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(184,140,54,.5); color: var(--navy) !important; }
.btn-gold--lg { font-size: 14px; padding: 14px 36px; letter-spacing: 1.4px; }
.btn-navy {
display: inline-flex; align-items: center; gap: 10px;
background: var(--navy); color: var(--gold-light) !important;
font-weight: 700; font-size: 12px;
padding: 11px 28px; border-radius: var(--r-md);
border: 1.5px solid rgba(184,140,54,.3);
text-transform: uppercase; letter-spacing: 1.2px; transition: var(--t);
font-family: var(--serif);
}
.btn-navy:visited { color: var(--gold-light) !important; }
.btn-navy:hover { background: var(--navy-mid); border-color: var(--gold); color: var(--gold-light) !important; transform: translateY(-2px); }
.btn-mechan {
display: inline-flex; align-items: center; gap: 10px;
background: var(--mechan); color: var(--white) !important;
font-weight: 700; font-size: 12px; padding: 11px 28px; border-radius: var(--r-md);
text-transform: uppercase; letter-spacing: 1.2px;
box-shadow: var(--shadow-mechan); transition: var(--t); border: none;
font-family: var(--serif);
}
.btn-mechan:visited { color: var(--white) !important; }
.btn-mechan:hover { background: var(--mechan-dark); transform: translateY(-2px); color: var(--white) !important; }
.btn-xishan {
display: inline-flex; align-items: center; gap: 10px;
background: var(--xishan); color: var(--white) !important;
font-weight: 700; font-size: 12px; padding: 11px 28px; border-radius: var(--r-md);
text-transform: uppercase; letter-spacing: 1.2px;
box-shadow: var(--shadow-xishan); transition: var(--t); border: none;
font-family: var(--serif);
}
.btn-xishan:visited { color: var(--white) !important; }
.btn-xishan:hover { background: var(--xishan-dark); transform: translateY(-2px); color: var(--white) !important; }
.btn-outline-white {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.25);
color: rgba(255,255,255,.85) !important; font-weight: 600; font-size: 12px;
padding: 11px 28px; border-radius: var(--r-md);
text-transform: uppercase; letter-spacing: 1.2px;
backdrop-filter: blur(8px); transition: var(--t);
font-family: var(--serif);
}
.btn-outline-white:visited { color: var(--white) !important; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: var(--white) !important; }
/* ================================================================
WHY GRID (brand pages "Por qué..." section)
================================================================ */
.brand-why-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px;
}
.brand-why-card {
text-align: center; padding: 28px 24px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
border-radius: var(--r-lg); transition: var(--t);
}
.brand-why-card:hover { background: rgba(255,255,255,.06); transform: translateY(-4px); }
.brand-why-card__icon { font-size: 40px; margin-bottom: 16px; }
.brand-why-card__title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.brand-hero--mechan ~ section .brand-why-card__title,
.brand-why-card__title--mechan { color: var(--mechan-light); }
.brand-why-card__title--xishan { color: var(--xishan-light); }
.brand-why-card__desc { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.65; }
@media(max-width:768px) { .brand-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:480px) { .brand-why-grid { grid-template-columns: 1fr; } }
/* ================================================================
WORDPRESS ADMIN BAR OFFSET
================================================================ */
body.admin-bar .gremro-header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .gremro-header { top: 46px; }
body.admin-bar .gremro-nav .gremro-nav { padding-top: calc(68px + 46px); }
}
@media screen and (min-width: 783px) {
body.admin-bar .gremro-nav .gremro-nav { padding-top: calc(68px + 32px); }
}
/* ================================================================
RESPONSIVE — HERO
================================================================ */
@media(max-width:768px) {
.hero__inner { padding: 80px 20px 70px; }
.hero__title { letter-spacing: -1px; }
.hero__actions { flex-direction: column; align-items: center; }
.btn--hero-primary, .btn--hero-secondary { width: 100%; max-width: 320px; justify-content: center; }
.hero__brands-row { gap: 8px; }
.hero__scroll-cue { display: none; }
}
@media(max-width:480px) {
.hero__badge { font-size: 10px; letter-spacing: 1.6px; padding: 7px 16px; }
.hero__inner { padding: 72px 16px 60px; }
}
/* ================================================================
RESPONSIVE — STATS STRIP
================================================================ */
@media(max-width:480px) {
.stat-block { padding: 22px 16px; min-width: 50%; }
.stat-block__divider { display: none; }
}
/* ================================================================
RESPONSIVE — BRAND SPLIT
================================================================ */
@media(max-width:768px) {
.brand-split { min-height: auto; }
.brand-split__visual { min-height: 320px; }
.brand-split__stat-card { bottom: 16px; left: 16px; padding: 12px 16px; }
.brand-split__wm { font-size: 80px; }
}
/* (categories responsive moved to comprehensive block at end of file) */
/* ================================================================
RESPONSIVE — ABOUT PARALLAX
================================================================ */
@media(max-width:640px) {
.about-parallax__features { grid-template-columns: 1fr; }
.about-parallax__visual { min-height: 280px; }
}
/* ================================================================
RESPONSIVE — FOOTER
================================================================ */
@media(max-width:480px) {
.footer-grid { grid-template-columns: 1fr !important; }
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
/* Stat card más compacta en phones pequeños */
.brand-split__stat-card {
bottom: 10px; left: 10px;
padding: 8px 12px;
min-width: 0;
}
.brand-split--reverse .brand-split__stat-card { right: 10px; left: auto; }
.brand-split__stat-card-value { font-size: 17px; }
.brand-split__stat-card-label { font-size: 9px; }
}
/* ================================================================
RESPONSIVE — CTA BANNER
================================================================ */
@media(max-width:640px) {
.cta-banner__inner { padding: 48px 20px; }
.cta-banner__actions { flex-direction: column; align-items: center; }
.cta-banner__actions a { width: 100%; max-width: 300px; justify-content: center; }
}
/* ================================================================
RESPONSIVE — BRAND PAGES (Mechan / Xishan)
================================================================ */
@media(max-width:768px) {
.brand-hero { padding: 100px 20px 60px; }
/* Ocultar columna de stats/badge en móvil — el copy es suficiente */
.brand-hero__inner > div:last-child { display: none; }
.brand-why-grid { grid-template-columns: 1fr; }
}
@media(max-width:480px) {
.brand-features { grid-template-columns: 1fr; }
.brand-hero__badges { flex-wrap: wrap; }
}
/* ================================================================
CONTACT PAGE LAYOUT
================================================================ */
.contact-page {
display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start;
}
@media(max-width:900px) { .contact-page { grid-template-columns: 1fr; gap: 40px; } }
.contact-info__title {
font-family: var(--serif); font-size: 26px; font-weight: 700;
color: var(--navy); margin-bottom: 12px;
}
.contact-info__desc {
font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-bottom: 32px;
}
.contact-info__items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.contact-info__item {
display: flex; align-items: flex-start; gap: 14px;
}
.contact-info__item-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: var(--gold-100); border: 1px solid var(--gold-200);
display: flex; align-items: center; justify-content: center;
color: var(--gold-dark);
}
.contact-info__item-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: var(--gray-400); margin-bottom: 3px;
}
.contact-info__item-value {
font-size: 15px; font-weight: 600; color: var(--navy);
}
.contact-form-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--r-xl); padding: 40px;
box-shadow: var(--shadow-md);
}
@media(max-width:640px) {
.contact-form-wrap { padding: 28px 20px; }
}
/* ================================================================
RESPONSIVE — CONTACT PAGE
================================================================ */
@media(max-width:480px) {
.contact-form { padding: 28px 20px; }
.contact-sidebar { padding: 28px 20px; }
}
/* ================================================================
RENT PAGE — HERO
================================================================ */
.rent-hero {
position: relative; min-height: 100vh;
background-image: url('../images/backgroundinsumos.webp');
background-size: cover; background-position: center;
display: flex; align-items: center;
overflow: hidden; padding: 100px 24px 80px;
}
.rent-hero::before {
content: ''; position: absolute; inset: 0;
background: rgba(0,0,0,.60);
z-index: 0; pointer-events: none;
}
.rent-hero__glow {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse 70% 60% at 80% 20%, rgba(184,140,54,.08) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 20% 80%, rgba(14,165,233,.05) 0%, transparent 60%);
}
.rent-hero__bg-text {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-family: var(--serif); font-size: clamp(130px, 24vw, 340px);
font-weight: 900; white-space: nowrap; pointer-events: none; user-select: none;
letter-spacing: -12px; line-height: 1; z-index: 0;
color: rgba(184,140,54,.025);
}
.rent-hero__inner {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; width: 100%;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.rent-hero__bg-text { z-index: 1; }
.rent-hero__tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 20px;
color: var(--gold-light); background: rgba(184,140,54,.1); border: 1px solid rgba(184,140,54,.2);
}
@media(max-width:900px) {
.rent-hero__inner { grid-template-columns: 1fr; gap: 48px; }
.rent-hero { min-height: auto; padding: 100px 24px 60px; }
.rent-hero__bg-text { font-size: 80px; }
}
/* ================================================================
RENT BENEFITS GRID
================================================================ */
.rent-benefits-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media(max-width:900px) { .rent-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:520px) { .rent-benefits-grid { grid-template-columns: 1fr; } }
.rent-benefits-grid--two { grid-template-columns: repeat(2, 1fr) !important; max-width: 900px; margin-left: auto; margin-right: auto; }
@media(max-width:520px) { .rent-benefits-grid--two { grid-template-columns: 1fr !important; } }
.rent-benefit-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--r-lg); padding: 28px 24px;
box-shadow: var(--shadow-sm); transition: var(--t);
position: relative; overflow: hidden;
}
.rent-benefit-card::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark));
transform: scaleX(0); transition: transform var(--t);
}
.rent-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rent-benefit-card:hover::after { transform: scaleX(1); }
.rent-benefit-card__icon {
width: 56px; height: 56px; border-radius: 16px; margin-bottom: 18px;
background: var(--gold-100); border: 1px solid var(--gold-200);
display: flex; align-items: center; justify-content: center; font-size: 26px;
transition: transform var(--t-slow) var(--ease-spring);
}
.rent-benefit-card:hover .rent-benefit-card__icon { transform: scale(1.1) rotate(-5deg); }
.rent-benefit-card__title { font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 8px; }
.rent-benefit-card__desc { font-size: 13px; color: var(--gray-500); line-height: 1.7; }
/* ================================================================
RENT EQUIPMENT GRID
================================================================ */
.rent-equipment-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media(max-width:1024px) { .rent-equipment-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px) { .rent-equipment-grid { grid-template-columns: 1fr; } }
.rent-equip-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--r-xl); padding: 32px 28px;
box-shadow: var(--shadow-sm); transition: var(--t);
display: flex; flex-direction: column; gap: 0;
}
.rent-equip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-200); }
.rent-equip-card__icon {
font-size: 40px; margin-bottom: 16px;
width: 68px; height: 68px; background: var(--gold-100); border: 1px solid var(--gold-200);
border-radius: 18px; display: flex; align-items: center; justify-content: center;
transition: transform var(--t-slow) var(--ease-spring);
}
.rent-equip-card:hover .rent-equip-card__icon { transform: scale(1.08) rotate(-4deg); }
.rent-equip-card__name {
font-family: var(--serif); font-size: 19px; font-weight: 700;
color: var(--navy); margin-bottom: 10px; line-height: 1.25;
}
.rent-equip-card__desc {
font-size: 13px; color: var(--gray-500); line-height: 1.7; margin-bottom: 18px;
}
.rent-equip-card__specs {
list-style: none; padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.rent-equip-card__specs li {
font-size: 12px; color: var(--gray-700); font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
.rent-equip-card__specs li::before {
content: ''; display: block; width: 6px; height: 6px; border-radius: 50%;
background: var(--gold); flex-shrink: 0;
}
.rent-equip-card__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 20px; border-top: 1px solid var(--gray-200); margin-top: auto;
}
.rent-equip-card__price {
font-size: 12px; font-weight: 700; color: var(--gold-dark);
text-transform: uppercase; letter-spacing: .8px;
}
/* ================================================================
RENT EQUIP FULL (tarjeta horizontal de equipo real)
================================================================ */
.rent-equip-full {
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--t);
}
.rent-equip-full:hover { box-shadow: var(--shadow-lg); }
.rent-equip-full__img-wrap {
width: 100%; background: var(--gray-50);
display: flex; align-items: center; justify-content: center;
padding: 36px 48px; border-bottom: 1px solid var(--gray-200);
max-height: 360px; overflow: hidden;
}
.rent-equip-full__img {
max-height: 280px; max-width: 100%; width: auto;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,.12));
transition: transform .4s ease;
}
.rent-equip-full:hover .rent-equip-full__img { transform: scale(1.03); }
.rent-equip-full__header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; padding: 28px 32px 0; flex-wrap: wrap;
}
.rent-equip-full__name {
font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700; color: var(--navy); line-height: 1.15;
}
.rent-equip-full__badge {
font-size: 11px; font-weight: 600; letter-spacing: .8px;
text-transform: uppercase; padding: 4px 13px;
border-radius: 20px; background: var(--gold-50, #FFF9E6);
color: var(--gold-dark); border: 1px solid rgba(184,140,54,.25);
}
.rent-equip-full__body {
display: grid; grid-template-columns: 1fr 1fr;
gap: 32px; padding: 24px 32px 32px;
}
.rent-equip-full__specs {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px; margin-top: 20px;
}
.rent-equip-full__spec {
background: var(--gray-50); border-radius: 8px; padding: 10px 14px;
}
.rent-equip-full__spec-lbl {
font-size: 10px; color: var(--gray-400); text-transform: uppercase;
letter-spacing: 1px; margin-bottom: 3px; display: block;
}
.rent-equip-full__spec-val {
font-size: 13px; font-weight: 600; color: var(--navy); display: block;
}
.rent-equip-full__procs-col {
display: flex; flex-direction: column; padding-top: 4px;
}
@media(max-width: 768px) {
.rent-equip-full__body { grid-template-columns: 1fr; }
.rent-equip-full__header { padding: 20px 20px 0; }
.rent-equip-full__body { padding: 16px 20px 24px; }
}
/* ================================================================
RENT STEPS (¿Cómo funciona?)
================================================================ */
.rent-steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
margin-top: 48px; position: relative;
}
.rent-steps::before {
content: ''; position: absolute; top: 36px; left: 12.5%; right: 12.5%;
height: 1px; background: linear-gradient(90deg, transparent, rgba(184,140,54,.3), transparent);
}
.rent-step {
text-align: center; padding: 0 16px; position: relative;
}
.rent-step__number {
width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px;
background: var(--navy-mid); border: 1.5px solid rgba(184,140,54,.3);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 24px; font-weight: 900;
color: var(--gold-light); position: relative; z-index: 1;
transition: var(--t);
}
.rent-step:hover .rent-step__number {
background: rgba(184,140,54,.12); border-color: var(--gold);
box-shadow: 0 0 0 6px rgba(184,140,54,.08);
}
.rent-step__icon { font-size: 28px; margin-bottom: 14px; }
.rent-step__title {
font-weight: 700; font-size: 15px; color: var(--white); margin-bottom: 10px;
}
.rent-step__desc { font-size: 12.5px; color: rgba(255,255,255,.48); line-height: 1.7; }
@media(max-width:768px) {
.rent-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.rent-steps::before { display: none; }
}
@media(max-width:480px) {
.rent-steps { grid-template-columns: 1fr; }
}
/* ================================================================
RENT PLANS (pricing)
================================================================ */
.rent-plans {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
margin-top: 48px; align-items: start;
}
@media(max-width:900px) { .rent-plans { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
.rent-plan-card {
background: var(--white); border: 1.5px solid var(--gray-200);
border-radius: var(--r-xl); padding: 36px 28px;
box-shadow: var(--shadow-sm); transition: var(--t);
}
.rent-plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rent-plan-card--featured {
border-color: var(--gold); box-shadow: var(--shadow-gold);
transform: scale(1.03);
}
.rent-plan-card--featured:hover {
transform: scale(1.03) translateY(-4px);
box-shadow: 0 16px 48px rgba(184,140,54,.35);
}
.rent-plan-card__badge {
display: inline-block; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
padding: 5px 14px; border-radius: var(--r-full);
background: var(--gray-100); color: var(--gray-500);
margin-bottom: 16px;
}
.rent-plan-card__badge--gold {
background: linear-gradient(135deg, var(--gold-light), var(--gold));
color: var(--navy);
}
.rent-plan-card__period {
font-family: var(--serif); font-size: 32px; font-weight: 900;
color: var(--navy); margin-bottom: 12px; line-height: 1;
}
.rent-plan-card--featured .rent-plan-card__period { color: var(--gold-dark); }
.rent-plan-card__desc {
font-size: 13px; color: var(--gray-500); line-height: 1.7; margin-bottom: 24px;
padding-bottom: 24px; border-bottom: 1px solid var(--gray-200);
}
.rent-plan-card__features {
list-style: none; padding: 0; margin: 0 0 28px;
display: flex; flex-direction: column; gap: 10px;
}
.rent-plan-card__features li {
font-size: 13px; color: var(--gray-700); font-weight: 500;
}
.rent-plan-card--featured .rent-plan-card__features li { color: var(--navy); font-weight: 600; }
/* divider-gold utility (used in several pages) */
.divider-gold {
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark));
border-radius: 2px; margin: 0 auto;
}
/* ================================================================
RESPONSIVE — NOSOTROS PAGE
================================================================ */
@media(max-width:640px) {
.timeline::before { left: 20px; }
.timeline-item { padding-left: 52px; }
.timeline-item::before { left: 12px; }
.mission-vision { grid-template-columns: 1fr; }
}
/* ================================================================
GLOBAL TOUCH / MOBILE POLISH
================================================================ */
@media(hover:none) {
.brand-panel:hover { transform: none !important; }
/* NOTE: Do NOT hide .gremro-dropdown here — on mobile it's static
inside the open nav panel (see @media max-width:960px) */
}
/* Prevent horizontal overflow globally.
html background = footer color → overscroll/rubber-band area below footer matches */
html { max-width: 100%; overflow-x: hidden; background: var(--navy-darkest); }
body { max-width: 100%; overflow-x: hidden; }
/* ================================================================
PRODUCT MODAL
================================================================ */
.gremro-modal-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(13,13,24,.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .3s var(--ease), visibility 0ms .3s;
}
.gremro-modal-overlay.open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .3s var(--ease), visibility 0ms 0ms;
}
.gremro-modal {
background: var(--white);
border-radius: var(--r-xl);
max-width: 820px; width: 100%;
max-height: 90vh;
overflow-y: auto;
display: grid;
grid-template-columns: 340px 1fr;
position: relative;
box-shadow: var(--shadow-2xl);
transform: translateY(28px) scale(.97);
transition: transform .35s var(--ease-spring);
}
.gremro-modal-overlay.open .gremro-modal {
transform: translateY(0) scale(1);
}
/* Close button */
.gremro-modal__close {
position: absolute; top: 16px; right: 16px; z-index: 2;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: var(--gray-100); border: none; border-radius: 50%;
color: var(--gray-500); cursor: pointer;
transition: var(--t);
}
.gremro-modal__close:hover { background: var(--gray-200); color: var(--gray-900); }
/* Image panel */
.gremro-modal__img-wrap {
background: var(--gray-100);
border-radius: var(--r-xl) 0 0 var(--r-xl);
display: flex; align-items: center; justify-content: center;
padding: 32px;
min-height: 340px;
}
.gremro-modal__img {
max-width: 100%; max-height: 280px;
object-fit: contain;
display: block;
}
/* Body panel */
.gremro-modal__body {
padding: 40px 32px 32px;
display: flex; flex-direction: column; gap: 12px;
}
.gremro-modal__cat {
display: inline-block;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.8px; color: var(--gold);
background: rgba(184,140,54,.08);
border: 1px solid rgba(184,140,54,.2);
padding: 4px 12px; border-radius: var(--r-full);
align-self: flex-start;
}
.gremro-modal__name {
font-family: var(--serif);
font-size: clamp(20px, 2.5vw, 26px);
font-weight: 800;
color: var(--navy);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
.gremro-modal__meta {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 2px;
}
.gremro-modal__badge {
font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: var(--r-full);
background: var(--gray-100); color: var(--gray-700);
letter-spacing: .5px;
}
.gremro-modal__badge--sku {
background: var(--navy); color: var(--white);
font-family: monospace; letter-spacing: 1px;
}
.gremro-modal__desc {
font-size: 14px; line-height: 1.8;
color: var(--gray-500);
margin: 4px 0 0;
flex: 1;
}
.gremro-modal__actions {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 8px;
}
.gremro-modal__actions .btn-gold { flex: 1; justify-content: center; min-width: 160px; }
.gremro-modal__close-btn {
flex: 0 0 auto;
padding: 11px 20px;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-full);
background: transparent;
color: var(--gray-500);
font-size: 13px; font-weight: 600;
font-family: var(--serif);
cursor: pointer;
transition: var(--t);
}
.gremro-modal__close-btn:hover {
border-color: var(--gray-400); color: var(--gray-700);
}
/* Mobile modal */
@media(max-width: 640px) {
.gremro-modal {
grid-template-columns: 1fr;
max-height: 95vh;
}
.gremro-modal__img-wrap {
border-radius: var(--r-xl) var(--r-xl) 0 0;
min-height: 200px; padding: 24px;
}
.gremro-modal__img { max-height: 160px; }
.gremro-modal__body { padding: 24px 20px 24px; }
}
/* ================================================================
WOOCOMMERCE — Shop / Archive overrides (Gremro brand)
================================================================ */
/* Page wrapper */
.woocommerce-page .site-main,
.woocommerce .site-main {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 108px 32px 80px !important;
}
/* Breadcrumb */
.woocommerce-breadcrumb {
font-size: 12px !important;
color: var(--gray-400) !important;
margin-bottom: 28px !important;
font-family: var(--font) !important;
}
.woocommerce-breadcrumb a { color: var(--gold) !important; }
/* Results toolbar */
.woocommerce-result-count {
font-size: 13px !important;
color: var(--gray-400) !important;
font-family: var(--font) !important;
margin-bottom: 4px !important;
}
.woocommerce-ordering select {
font-family: var(--font) !important;
font-size: 13px !important;
border: 1.5px solid var(--gray-200) !important;
border-radius: var(--r-full) !important;
padding: 8px 18px !important;
color: var(--gray-700) !important;
outline: none !important;
background: var(--white) !important;
cursor: pointer !important;
}
/* ================================================================
WOOCOMMERCE PRODUCT GRID — Professional redesign
Inspired by: Mercado Libre, Amazon, Stryker.com
================================================================ */
/* ================================================================
WOOCOMMERCE PRODUCT GRID — Professional redesign
Inspired by: Mercado Libre, Amazon, Stryker.com
================================================================ */
/* ── Grid container — reset Solace floats, use CSS Grid ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 48px !important;
width: 100% !important;
float: none !important;
clear: both !important;
}
/* ── Hide ghost / clearfix / empty list items WooCommerce injects ──
WooCommerce adds after
every N products for its old float-based grid system.
We use CSS Grid everywhere, so these are purely visual garbage.
Selectors are intentionally broad (no parent-class requirement) since
ul.products is WooCommerce-exclusive markup and this bug appears on:
shop/archive, brand pages (shortcode), and any page using [products].
── */
/* Rule 1 — Clearfix ghost items: */
ul.products li[style*="clear"] {
display: none !important;
}
/* Rule 2 — Items WooCommerce injects for float resets (float:both variant) */
ul.products li[style*="float"] {
display: none !important;
}
/* Rule 3 — Products without featured image (become empty visual holes) */
ul.products li.product:not(.has-post-thumbnail) {
display: none !important;
}
/* Rule 4 — Items with no product link at all (completely empty cells, modern WC) */
@supports selector(:has(*)) {
ul.products li:not(:has(a.woocommerce-LoopProduct-link)) {
display: none !important;
}
}
/* Rule 5 — Keep with parent selector for legacy specificity on shop/archive */
.woocommerce ul.products li[style*="clear"],
.woocommerce-page ul.products li[style*="clear"] {
display: none !important;
}
/* ── Card shell ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
/* Reset Solace/WooCommerce float layout */
float: none !important;
width: auto !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
/* Card design */
background: var(--white) !important;
border: 1px solid #e0e0e0 !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.04) !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
transition: box-shadow .25s var(--ease), border-color .25s var(--ease) !important;
cursor: default !important;
}
/* Hover only on devices that support it — prevents stuck hover on mobile */
@media (hover: hover) {
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07) !important;
transform: translateY(-4px) !important;
border-color: rgba(184,140,54,.35) !important;
}
}
/* Top gold bar — shown on hover (pointer devices only) */
.woocommerce ul.products li.product::before,
.woocommerce-page ul.products li.product::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, var(--gold-light), var(--gold)) !important;
opacity: 0 !important;
transition: opacity .25s var(--ease) !important;
z-index: 2 !important;
border-radius: 12px 12px 0 0 !important;
pointer-events: none !important;
}
@media (hover: hover) {
.woocommerce ul.products li.product:hover::before,
.woocommerce-page ul.products li.product:hover::before { opacity: 1 !important; }
}
/* ── Image area ──
WooCommerce puts title inside the tag, so we use flex column
with a fixed-height img — no absolute positioning needed.
flex: 1 ensures the fills all card space, so margin-top:auto
on .gremro-card__actions always pins buttons to card bottom. ── */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
display: flex !important;
flex-direction: column !important;
flex: 1 !important; /* ← fills remaining card height */
text-decoration: none !important;
color: inherit !important;
overflow: visible !important;
background: transparent !important;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
width: 100% !important;
height: 200px !important;
object-fit: contain !important;
padding: 20px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #efefef !important;
border-radius: 11px 11px 0 0 !important;
display: block !important;
flex-shrink: 0 !important;
transition: transform .4s var(--ease) !important;
order: -1 !important; /* always first, even if DOM order varies */
}
@media (hover: hover) {
.woocommerce ul.products li.product:hover a img { transform: scale(1.05) !important; }
}
.woocommerce ul.products li.product mark.onsale { display: none !important; }
/* ── Card title (inside tag in WooCommerce) ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--gray-900) !important;
padding: 14px 16px 4px !important;
margin: 0 !important;
line-height: 1.35 !important;
text-transform: none !important;
letter-spacing: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 42px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-Price-amount { display: none !important; }
/* ── SKU / brand badge ── */
.woocommerce ul.products li.product .gremro-card__sku {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 11px !important;
color: var(--gray-400) !important;
font-family: var(--font) !important;
padding: 4px 16px 10px !important;
letter-spacing: .3px !important;
font-weight: 500 !important;
margin: 0 !important;
min-height: 30px !important; /* consistent height whether brand is present or not */
}
/* ── Divider ── */
.woocommerce ul.products li.product .gremro-card__divider {
height: 1px !important;
background: #f0f0f0 !important;
margin: 0 !important;
}
/* ── Action bar ── */
.woocommerce ul.products li.product .gremro-card__actions {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 14px 14px 16px !important;
margin-top: auto !important;
}
/* Primary CTA — Solicitar cotización */
.woocommerce ul.products li.product .gremro-btn-cotizar,
.woocommerce ul.products li.product .btn-cotizar {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 11px 16px !important;
font-size: 12px !important;
border-radius: 8px !important;
margin: 0 !important;
background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
color: #1a1a1a !important;
font-weight: 700 !important;
font-family: var(--font) !important;
text-transform: uppercase !important;
letter-spacing: .8px !important;
border: none !important;
cursor: pointer !important;
transition: filter .2s, transform .2s, box-shadow .2s !important;
}
.woocommerce ul.products li.product .gremro-btn-cotizar:hover,
.woocommerce ul.products li.product .btn-cotizar:hover {
filter: brightness(1.07) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 16px rgba(184,140,54,.4) !important;
}
/* Secondary CTA — Ver detalles */
.gremro-card__detail-btn {
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 9px 16px !important;
border: 1.5px solid #d4d4d4 !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--gray-500) !important;
font-size: 12px !important;
font-weight: 600 !important;
font-family: var(--font) !important;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer !important;
transition: border-color .2s, color .2s, background .2s !important;
}
.gremro-card__detail-btn:hover {
border-color: var(--navy) !important;
color: var(--navy) !important;
background: rgba(51,51,76,.04) !important;
}
/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 16px; }
.woocommerce nav.woocommerce-pagination ul {
display: flex !important;
gap: 6px !important;
list-style: none !important;
justify-content: center !important;
padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
border-radius: var(--r-md) !important;
font-size: 13px !important;
font-weight: 600 !important;
border: 1.5px solid var(--gray-200) !important;
color: var(--gray-700) !important;
transition: var(--t) !important;
text-decoration: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--gold) !important;
border-color: var(--gold) !important;
color: var(--white) !important;
}
/* Category archive heading */
.woocommerce-products-header__title.page-title {
font-family: var(--serif) !important;
font-size: clamp(28px, 4vw, 48px) !important;
font-weight: 800 !important;
color: var(--navy) !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
margin-bottom: 8px !important;
}
/* Dropdown productos — 2 columns wide */
.gremro-dropdown--wide {
min-width: 400px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px !important;
padding: 14px 8px 8px !important;
}
.gremro-dropdown--wide li { list-style: none !important; }
@media(max-width: 960px) {
.gremro-dropdown--wide {
display: flex !important;
flex-direction: column !important;
min-width: unset !important;
}
}
/* ================================================================
COMPREHENSIVE RESPONSIVE OVERRIDES
Standards: WCAG 2.1 touch targets (44px), fluid type (clamp),
Google Lighthouse mobile thresholds, Apple HIG safe areas
Breakpoints: 960 → 768 → 640 → 480 → 360
================================================================ */
/* ── 960px: Tablet landscape ── */
@media(max-width: 960px) {
.gremro-header__inner { gap: 12px; }
.hero__inner { padding: 80px 20px 72px; }
/* Stats: 2×2 grid */
.stats-strip__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.stat-block { padding: 32px 20px; min-width: auto; }
.stat-block__divider { display: none; }
/* About: single col */
.about-parallax { padding: 80px 0; min-height: auto; }
.about-parallax__inner { grid-template-columns: 1fr; gap: 40px; }
/* Categories: switch from marquee to wrapping grid */
.h-scroll-wrap {
mask-image: none; -webkit-mask-image: none;
}
.h-scroll-track {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
animation: none !important;
overflow-x: visible;
cursor: default;
padding: 12px 20px 20px;
width: auto !important;
}
/* Hide duplicated marquee tiles on mobile */
.cat-tile[aria-hidden="true"] { display: none !important; }
.cat-tile {
width: auto;
flex-shrink: unset;
}
/* Nosotros stats bar */
.gremro-stats__inner { flex-wrap: wrap; }
.gremro-stats__item { min-width: 45%; padding: 28px 20px; border-right: none; }
}
/* ── 768px: Tablet portrait ── */
@media(max-width: 768px) {
.hero__title { font-size: clamp(36px, 8vw, 60px); margin-bottom: 18px; }
.hero__sub { font-size: 15px; margin-bottom: 36px; }
.hero__badge { font-size: 9px; padding: 6px 14px; letter-spacing: 1.5px; }
.hero__actions { margin-bottom: 40px; }
.hero__brands-row { gap: 10px; }
/* Brand split: reduce visual height */
.brand-split__visual { min-height: 300px; }
.brand-split__stat-card { bottom: 16px; left: 16px; padding: 14px 16px; }
.brand-split--reverse .brand-split__stat-card { right: 16px; left: auto; }
/* Categories: 3 cols */
.h-scroll-track { grid-template-columns: repeat(3, 1fr) !important; }
.cat-tile { padding: 20px 14px 16px; border-radius: 14px; }
.cat-tile__icon { width: 46px; height: 46px; margin-bottom: 10px; border-radius: 12px; }
.cat-tile__icon svg { width: 22px; height: 22px; }
.cat-tile__name { font-size: 12px; }
.cat-tile__count { font-size: 10px; padding: 2px 7px; }
/* Sections: tighter vertical rhythm */
.products-section { padding: 64px 0; }
.categories-section { padding: 64px 0; }
.blog-section { padding: 64px 0; }
.cta-banner { padding: 64px 24px; }
.gremro-footer { padding: 48px 20px 0; }
/* Brand pages */
.brand-hero__inner { gap: 32px; }
/* Nosotros stats */
.gremro-stats__item { min-width: 45%; }
}
/* ── 640px: Large phone ── */
@media(max-width: 640px) {
.container, .container--md { padding: 0 16px; }
/* Hero: stack buttons */
.hero__inner { padding: 64px 16px 56px; }
.hero__actions { flex-direction: column; align-items: center; width: 100%; }
.hero__actions .btn--hero-primary,
.hero__actions .btn--hero-secondary {
width: 100%; max-width: 320px; justify-content: center;
padding: 13px 24px; font-size: 12px;
}
.hero__brands-row { flex-direction: column; gap: 8px; }
.hero__brands-label { margin-bottom: 4px; }
.hero__scroll-cue { display: none; }
/* Stats: 2-col stays, tighter */
.stat-block__value { font-size: clamp(28px, 7vw, 40px); }
.stat-block__label { font-size: 10px; letter-spacing: 1px; }
/* Brand split */
.brand-split__visual { min-height: 220px; }
.brand-split__wm { font-size: clamp(60px, 14vw, 100px); }
.brand-split__stat-card-value { font-size: 22px; }
.brand-split__stat-card-label { font-size: 10px; }
/* Categories: 2 cols */
.h-scroll-track { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.cat-tile__arrow { display: none; }
/* About */
.about-parallax { padding: 56px 0; }
.about-parallax__desc { font-size: 14px; }
.about-parallax__value { gap: 10px; }
.about-value-icon { width: 32px; height: 32px; font-size: 18px; }
/* Metric card */
.metric-card { padding: 28px 24px; }
.metric-card__number { font-size: 44px; }
/* Products: homepage cards */
.gremro-product-card__img { height: 180px; padding: 16px; }
/* CTA */
.cta-banner { padding: 48px 16px; }
.cta-banner__inner { text-align: center; }
.cta-banner h2 { font-size: clamp(22px, 5vw, 36px); letter-spacing: 1px; }
.cta-banner p { font-size: 14px; margin-bottom: 28px; }
.cta-banner__actions { flex-direction: column; align-items: center; }
.cta-banner__actions a { width: 100%; max-width: 280px; justify-content: center; }
/* Footer */
.footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
.footer-brand__desc { max-width: none; }
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
/* Modal */
.gremro-modal { grid-template-columns: 1fr; max-height: 95vh; }
.gremro-modal__img-wrap {
border-radius: var(--r-xl) var(--r-xl) 0 0;
min-height: 180px; padding: 20px;
}
.gremro-modal__img { max-height: 150px; }
.gremro-modal__body { padding: 20px 16px 24px; }
.gremro-modal__name { font-size: 20px; }
.gremro-modal__actions { flex-direction: column; }
.gremro-modal__actions .btn-gold,
.gremro-modal__actions .gremro-btn-cotizar { width: 100%; justify-content: center; }
.gremro-modal__close-btn { width: 100%; text-align: center; justify-content: center; }
/* WooCommerce shop/archive */
.woocommerce-page .site-main,
.woocommerce .site-main { padding: 88px 16px 48px !important; }
/* Nosotros page stats */
.gremro-stats__inner { grid-template-columns: 1fr 1fr; display: grid; }
.gremro-stats__item { border-right: none; padding: 24px 16px; }
.gremro-stats__divider { display: none; }
/* Shared buttons: min touch target 44px */
.btn--gold-solid, .btn--navy-solid, .btn-gold, .btn-navy,
.gremro-btn-cotizar, .gremro-product-card__btn--primary,
.gremro-card__detail-btn { min-height: 44px; }
/* Contact page */
.contact-layout { gap: 32px; }
.contact-form input, .contact-form textarea, .contact-form select { font-size: 16px; /* prevent iOS zoom */ }
/* Contact form: override inline grid-template-columns:1fr 1fr → stack */
#gremroContactForm > div { grid-template-columns: 1fr !important; }
/* Contact hero: reduce inline padding on mobile */
.page-template-page-contactanos #main > section:first-of-type,
#main > section[style*="navy-deep"] { padding: 72px 16px 48px !important; }
}
/* ── 480px: Medium phone ── */
@media(max-width: 480px) {
.hero__title { font-size: clamp(28px, 8vw, 42px); }
.hero__badge { font-size: 8px; letter-spacing: 1px; padding: 5px 10px; }
.hero__sub { font-size: 14px; line-height: 1.7; }
/* Stats: single column */
.stats-strip__inner { grid-template-columns: 1fr; }
.stat-block { padding: 20px 16px; }
/* Brand split */
.brand-split__content-inner { padding: 36px 20px; }
.brand-split__name { font-size: clamp(28px, 8vw, 40px); }
.brand-split__desc { font-size: 13px; }
.brand-split__tagline { font-size: 14px; }
.pill { font-size: 10px; padding: 5px 10px; }
.brand-split__pills { gap: 6px; }
/* Categories: still 2 cols but tighter */
.cat-tile { padding: 16px 10px 14px; border-radius: 12px; }
.cat-tile__icon { width: 38px; height: 38px; border-radius: 10px; }
.cat-tile__icon svg { width: 18px; height: 18px; }
/* Blog cards */
.blog-card__img-wrap { height: 160px; }
.blog-card__body { padding: 16px; }
.blog-card__title, .blog-card__title a { font-size: 15px; }
.blog-card__excerpt { font-size: 12px; }
/* Section headers */
.section-head { margin-bottom: 32px; }
.section-head__sub { font-size: 14px; }
.section-head__eyebrow { font-size: 9px; letter-spacing: 2px; }
/* Nosotros stats */
.gremro-stats__inner { grid-template-columns: 1fr !important; }
.gremro-stats__item { padding: 18px 16px; }
}
/* ── 360px: Small phone (Galaxy S, iPhone SE) ── */
@media(max-width: 360px) {
.hero__inner { padding: 56px 12px 48px; }
.hero__title { font-size: 26px; }
.hero__actions .btn--hero-primary,
.hero__actions .btn--hero-secondary { font-size: 11px; padding: 12px 16px; }
/* Product cards */
.gremro-product-card__img { height: 150px; padding: 12px; }
.gremro-product-card__title { font-size: 13px; padding: 12px 12px 3px; }
.gremro-product-card__meta { padding: 3px 12px 8px; }
.gremro-product-card__actions { padding: 10px 10px 12px; gap: 6px; }
/* About */
.about-parallax__value { padding: 10px 12px; }
.about-value-title { font-size: 12px; }
.about-value-desc { font-size: 11px; }
/* Blog */
.blog-card__img-wrap { height: 140px; }
/* Categories: single column */
.h-scroll-track { grid-template-columns: 1fr !important; }
/* WooCommerce */
.woocommerce-page .site-main,
.woocommerce .site-main { padding: 80px 12px 40px !important; }
/* Buttons: ensure readable */
.gremro-product-card__btn--primary { font-size: 11px; padding: 10px 12px; }
.gremro-card__detail-btn { font-size: 11px; padding: 8px 12px; }
}
/* .gremro-nav__mobile-cta — estilos en el bloque @media(max-width:960px) principal */
.gremro-nav__mobile-cta { display: none; }
/* ── iOS safe areas ── */
/* Footer: padding-bottom cubre la home bar del iPhone — requiere viewport-fit=cover */
.gremro-footer { padding-bottom: 20px; } /* fallback sin safe-area */
@supports(padding: max(0px)) {
.gremro-footer { padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)); }
.gremro-modal-overlay { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.gremro-nav__mobile-ctas { padding-bottom: max(28px, env(safe-area-inset-bottom, 28px)); }
}
/* ── Landscape phone ── */
@media(max-height: 500px) and (orientation: landscape) {
.hero { min-height: auto; }
.hero__inner { padding: 80px 24px 48px; }
.hero__scroll-cue { display: none; }
}
/* ================================================================
NAVBAR — Brand links (Mechan / Xishan directos)
================================================================ */
.gremro-nav__brand-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
letter-spacing: .5px;
transition: opacity .2s;
}
.gremro-nav__brand-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
transition: transform .2s;
}
.gremro-nav__brand-link--mechan { color: var(--mechan-light, #38BDF8); }
.gremro-nav__brand-link--mechan:visited { color: var(--mechan-light) }
.gremro-nav__brand-link--mechan .gremro-nav__brand-dot { background: var(--mechan, #0EA5E9); }
.gremro-nav__brand-link--xishan { color: var(--xishan-light, #34D399); }
.gremro-nav__brand-link--xishan:visited { color: var(--xishan-light) }
.gremro-nav__brand-link--xishan .gremro-nav__brand-dot { background: var(--xishan, #10B981); }
@media(hover:hover) {
.gremro-nav__brand-link:hover { opacity: .8; }
.gremro-nav__brand-link:hover .gremro-nav__brand-dot { transform: scale(1.4); }
}
/* Renta link */
.gremro-nav__rent-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--gold-light);
font-weight: 600;
}
.gremro-nav__rent-link:visited { color: var(--gold-light) }
/* Distribuidor button */
.btn-distribuidor {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: var(--r-md);
border: 1.5px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.85);
font-size: 12px;
font-weight: 700;
font-family: var(--serif);
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
backdrop-filter: blur(6px);
transition: var(--t);
text-decoration: none;
}
.btn-distribuidor:visited { color: rgba(255,255,255,.85) }
@media(hover:hover) {
.btn-distribuidor:hover {
background: rgba(255,255,255,.12);
border-color: var(--gold);
color: var(--gold-light);
}
}
@media(max-width: 1100px) { .btn-distribuidor { display: none; } }
/* ================================================================
TRUST SECTION — Marcas aliadas + Hospitales clientes
================================================================ */
.trust-section {
padding: 72px 0;
background: var(--white);
border-top: 1px solid var(--gray-200);
}
.trust-block { margin-bottom: 56px; }
.trust-block:last-child { margin-bottom: 0; }
.trust-block__label {
text-align: center;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--gray-400);
margin-bottom: 32px;
}
.trust-divider {
height: 1px;
background: var(--gray-200);
margin: 0 auto 56px;
max-width: 200px;
}
/* Marquee — mínimo absoluto */
.trust-marquee-wrap { overflow: hidden; }
.trust-marquee {
display: flex;
gap: 16px;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.trust-logo-card {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: 1px solid #e8e8e8;
border-radius: 12px;
background: #fff;
flex-shrink: 0;
transition: border-color .2s, box-shadow .2s;
}
.trust-logo-card img {
height: 36px;
width: auto;
max-width: 120px;
object-fit: contain;
filter: grayscale(100%) opacity(.6);
transition: filter .2s;
}
@media(hover:hover) {
.trust-logo-card:hover { border-color: rgba(184,140,54,.3); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.trust-logo-card:hover img { filter: grayscale(0%) opacity(1); }
}
/* Clients logo grid */
.trust-clients-logo-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.trust-client-logo-card {
background: #fff;
border: 1px solid #ebebeb;
border-radius: 14px;
padding: 20px 14px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 2;
}
.trust-client-logo-card img {
max-width: 100%;
max-height: 76px;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.75;
transition: opacity .2s;
}
.trust-client-logo-card:hover img { opacity: 1; }
@media(max-width: 960px) { .trust-clients-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 480px) {
.trust-clients-logo-grid { grid-template-columns: repeat(2, 1fr); }
.trust-section { padding: 48px 0; }
}
/* ================================================================
DISTRIBUIDOR PAGE
================================================================ */
.dist-hero {
position: relative;
min-height: 100vh;
background: linear-gradient(150deg, #030818 0%, #060f24 60%, #030818 100%);
display: flex; align-items: center;
overflow: hidden; padding: 100px 24px 80px;
}
.dist-hero__glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 80% 30%, rgba(184,140,54,.12) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 20% 70%, rgba(139,92,246,.08) 0%, transparent 60%);
}
.dist-hero__bg-text {
position: absolute; right: -40px; top: 50%;
transform: translateY(-50%);
font-family: var(--serif); font-weight: 900;
font-size: clamp(120px, 18vw, 220px);
color: rgba(255,255,255,.025);
letter-spacing: -8px; line-height: 1; z-index: 0; pointer-events: none;
user-select: none;
}
.dist-hero__inner {
position: relative; z-index: 1;
max-width: 840px; margin: 0 auto; text-align: center;
}
.dist-hero__tag {
display: inline-flex; align-items: center; gap: 8px;
color: var(--gold); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 24px;
}
.dist-hero__title {
font-family: var(--serif);
font-size: clamp(40px, 7vw, 80px);
font-weight: 900; color: var(--white);
line-height: 1.05; text-transform: uppercase;
letter-spacing: 1px; margin-bottom: 24px;
text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.dist-hero__title-accent {
color: var(--gold-light);
display: block;
}
.dist-hero__desc {
font-size: clamp(16px, 2vw, 19px);
color: rgba(255,255,255,.72);
max-width: 600px; margin: 0 auto 40px;
line-height: 1.75;
}
.dist-hero__actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-bottom: 56px;
}
.dist-hero__stats {
display: flex; gap: 0; justify-content: center;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px; overflow: hidden;
backdrop-filter: blur(8px);
background: rgba(255,255,255,.04);
max-width: 640px; margin: 0 auto;
}
.dist-stat {
flex: 1; padding: 24px 16px; text-align: center;
border-right: 1px solid rgba(255,255,255,.08);
}
.dist-stat:last-child { border-right: none; }
.dist-stat__number {
display: block;
font-family: var(--serif); font-size: clamp(28px, 4vw, 40px);
font-weight: 900; color: var(--gold-light);
line-height: 1; margin-bottom: 6px;
}
.dist-stat__label { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.4; }
/* Benefits grid */
.dist-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.dist-benefit-card {
padding: 28px 24px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 16px;
border-top: 3px solid var(--card-accent, var(--gold));
transition: transform .25s var(--ease), box-shadow .25s;
}
@media(hover:hover) {
.dist-benefit-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
}
.dist-benefit-card__icon {
width: 52px; height: 52px;
border-radius: 14px;
background: color-mix(in srgb, var(--card-accent, var(--gold)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--card-accent, var(--gold)) 20%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--card-accent, var(--gold));
margin-bottom: 18px;
}
.dist-benefit-card__title {
font-size: 15px; font-weight: 700; color: var(--navy);
margin-bottom: 8px;
}
.dist-benefit-card__desc { font-size: 13px; color: var(--gray-500); line-height: 1.65; }
/* Steps */
.dist-steps { max-width: 700px; margin: 0 auto; }
.dist-step {
display: flex; gap: 24px; margin-bottom: 0;
}
.dist-step__left {
display: flex; flex-direction: column; align-items: center;
flex-shrink: 0;
}
.dist-step__icon {
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(184,140,54,.12);
border: 1.5px solid rgba(184,140,54,.3);
display: flex; align-items: center; justify-content: center;
color: var(--gold-light);
flex-shrink: 0;
}
.dist-step__line {
width: 2px; flex: 1; min-height: 40px;
background: linear-gradient(to bottom, rgba(184,140,54,.3), rgba(184,140,54,.05));
margin: 8px 0;
}
.dist-step__body { padding-bottom: 40px; padding-top: 10px; }
.dist-step__meta {
display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.dist-step__num {
font-family: var(--serif); font-size: 13px; font-weight: 900;
color: var(--gold); letter-spacing: 1px;
}
.dist-step__time {
font-size: 11px; font-weight: 600;
color: rgba(255,255,255,.4);
background: rgba(255,255,255,.06);
padding: 2px 8px; border-radius: 20px;
letter-spacing: .5px;
}
.dist-step__title {
font-size: 17px; font-weight: 700; color: var(--white);
margin-bottom: 8px;
}
.dist-step__desc { font-size: 14px; color: rgba(255,255,255,.58); line-height: 1.7; }
/* Requirements */
.dist-req-section {
position: relative;
background-image: url('../images/distribuidorfoto.webp');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.dist-req-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(4, 10, 22, .78);
pointer-events: none;
}
.dist-req-section .gremro-section__inner--md { position: relative; z-index: 1; }
.dist-req-layout {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.dist-req-title {
font-family: var(--serif); font-size: clamp(26px, 3.5vw, 36px);
font-weight: 700; color: var(--white); margin: 12px 0 16px; line-height: 1.2;
}
.dist-req-desc { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.7; margin-bottom: 28px; }
.dist-req-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dist-req-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; color: rgba(255,255,255,.80); line-height: 1.5;
}
.dist-req-list li svg { flex-shrink: 0; margin-top: 2px; }
/* ══ FAQ ACCORDION ══════════════════════════════════════════════ */
.faq-list {
max-width: 760px;
margin: 48px auto 0;
}
.faq-item {
border-bottom: 1px solid var(--gray-200);
}
.faq-item:first-child {
border-top: 1px solid var(--gray-200);
}
.faq-item summary.faq-item__q {
list-style: none;
cursor: pointer;
padding: 22px 52px 22px 0;
font-family: var(--sans);
font-weight: 600;
font-size: 16px;
color: var(--navy);
line-height: 1.4;
position: relative;
user-select: none;
-webkit-user-select: none;
}
.faq-item summary.faq-item__q::-webkit-details-marker { display: none; }
.faq-item summary.faq-item__q::after {
content: '+';
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: 300;
color: var(--gold);
transition: transform 0.25s ease;
line-height: 1;
}
.faq-item[open] > summary.faq-item__q::after {
transform: translateY(-50%) rotate(45deg);
}
.faq-item[open] > summary.faq-item__q {
color: var(--gold);
}
.faq-item__a {
padding: 0 52px 22px 0;
}
.faq-item__a p {
font-size: 15px;
color: var(--gray-500);
line-height: 1.75;
margin: 0;
}
/* Countries */
.dist-countries {
background: var(--navy-deep);
border-radius: 20px; padding: 32px;
border: 1px solid rgba(255,255,255,.08);
}
.dist-countries__label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 2px; color: var(--gold); margin-bottom: 20px;
}
.dist-countries__grid {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.dist-country-tag {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.8);
font-size: 12px; font-weight: 600;
padding: 6px 12px; border-radius: 20px;
}
.dist-countries__more {
font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.5;
}
/* Form */
.dist-form {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px; padding: 40px;
}
.dist-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dist-form__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.dist-form__field:last-child { margin-bottom: 0; }
.dist-form__field label {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: rgba(255,255,255,.6);
}
.dist-form__field label span { color: var(--gold); }
.dist-form__field input,
.dist-form__field select,
.dist-form__field textarea {
width: 100%; padding: 12px 16px;
background: rgba(255,255,255,.06);
border: 1.5px solid rgba(255,255,255,.15);
border-radius: 10px;
color: var(--white); font-size: 14px;
font-family: inherit; transition: border-color .2s;
outline: none;
}
.dist-form__field input::placeholder,
.dist-form__field textarea::placeholder { color: rgba(255,255,255,.3); }
.dist-form__field input:focus,
.dist-form__field select:focus,
.dist-form__field textarea:focus { border-color: var(--gold); }
.dist-form__field select option { background: var(--navy-deep); color: var(--white); }
/* Success state */
.dist-success {
text-align: center; padding: 60px 40px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(184,140,54,.3);
border-radius: 20px;
}
.dist-success svg { margin-bottom: 20px; }
.dist-success h3 { font-family: var(--serif); font-size: 28px; color: var(--white); margin-bottom: 12px; }
.dist-success p { color: rgba(255,255,255,.65); font-size: 15px; }
/* Responsive distribuidor */
@media(max-width: 900px) {
.dist-benefits-grid { grid-template-columns: repeat(2, 1fr); }
.dist-req-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media(max-width: 640px) {
.dist-benefits-grid { grid-template-columns: 1fr; }
.dist-form { padding: 24px 16px; }
.dist-form__row { grid-template-columns: 1fr; gap: 0; }
.dist-hero__stats { flex-wrap: wrap; }
.dist-stat { min-width: 50%; }
}
/* ================================================================
DISTRIBUIDOR — NEW SECTIONS (brand strip, quien, marcas, incluye,
territorios, quote, faq, form perks)
================================================================ */
/* Número grande en benefit cards (replaces icon variant) */
.dist-benefit-card__num {
font-family: var(--serif);
font-size: 48px; font-weight: 700;
color: var(--gray-200);
line-height: 1; margin-bottom: 14px;
transition: color .25s;
}
.dist-benefit-card:hover .dist-benefit-card__num { color: color-mix(in srgb, var(--card-accent, var(--gold)) 25%, transparent); }
/* Hero subtitle line */
.dist-hero__title-sub {
display: block;
font-size: .68em; font-weight: 400;
color: rgba(255,255,255,.5);
margin-top: 6px;
}
/* Brand strip */
.dist-brand-strip {
background: var(--gold);
padding: 14px 5%;
display: flex; align-items: center; justify-content: center; gap: 0;
flex-wrap: wrap; overflow: hidden;
}
.dist-brand-strip__item {
white-space: nowrap;
font-size: 11.5px; font-weight: 700;
color: var(--navy);
letter-spacing: .6px;
padding: 2px 14px;
}
.dist-brand-strip__sep {
color: rgba(30,35,64,.35);
font-size: 16px; flex-shrink: 0;
}
/* Quién puede distribuir grid */
.dist-quien-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 40px;
}
.dist-quien-card {
display: flex; align-items: flex-start; gap: 16px;
padding: 22px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.04);
transition: background .2s, border-color .2s;
}
.dist-quien-card:hover {
background: rgba(255,255,255,.07);
border-color: rgba(var(--gold-rgb, 184,140,54), .25);
}
.dist-quien-card__icon {
width: 46px; height: 46px;
border-radius: 10px; flex-shrink: 0;
background: rgba(var(--gold-rgb, 184,140,54), .12);
border: 1px solid rgba(var(--gold-rgb, 184,140,54), .2);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.dist-quien-card__title {
font-size: 14.5px; font-weight: 600;
color: var(--white); margin-bottom: 6px;
}
.dist-quien-card__desc {
font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6;
}
/* Territorios list with badges */
.dist-terr-list {
display: flex; flex-direction: column; gap: 10px;
margin-top: 24px;
}
.dist-terr-item {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
background: var(--white);
border: 1px solid var(--gray-200);
transition: border-color .2s;
}
.dist-terr-item:hover { border-color: var(--gold); }
.dist-terr-item__name {
font-size: 13.5px; font-weight: 500; color: var(--navy);
}
.dist-terr-item__badge {
font-size: 11px; font-weight: 600;
padding: 3px 10px; border-radius: 20px;
white-space: nowrap; flex-shrink: 0;
}
.dist-terr-item__badge--open { background: #E1F5EE; color: #0F6E56; }
.dist-terr-item__badge--priority { background: var(--gold-light, #FDF6E3); color: #8B6914; }
/* Marcas grid */
.dist-marcas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 44px;
}
.dist-marca-card {
border-radius: 12px;
border: 1px solid var(--gray-200);
padding: 22px;
background: var(--white);
transition: border-color .2s, box-shadow .2s;
}
.dist-marca-card:hover {
border-color: var(--gold);
box-shadow: 0 4px 20px rgba(184,140,54,.12);
}
.dist-marca-card__name {
font-family: var(--serif);
font-size: 16px; font-weight: 700;
color: var(--navy); margin-bottom: 4px;
}
.dist-marca-card__cat {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--gold-dark, #8B6914);
margin-bottom: 10px;
}
.dist-marca-card__desc {
font-size: 13px; color: var(--gray-500);
line-height: 1.65; margin-bottom: 14px;
}
.dist-marca-card__refs {
display: flex; flex-wrap: wrap; gap: 5px;
}
.dist-ref-tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px; border-radius: 4px;
background: var(--gray-100, #F4F4F5);
color: var(--gray-500);
}
/* Qué incluye grid */
.dist-incluye-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin-top: 44px;
}
.dist-incluye-group {
background: var(--white);
border-radius: 16px;
padding: 28px;
border: 1px solid var(--gray-200);
}
.dist-incluye-group__title {
font-size: 15px; font-weight: 700;
color: var(--navy);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 2px solid var(--gray-100, #F4F4F5);
display: flex; align-items: center; gap: 10px;
}
.dist-incluye-list {
list-style: none;
display: flex; flex-direction: column; gap: 10px;
}
.dist-incluye-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px; color: var(--gray-500); line-height: 1.55;
}
.dist-incluye-item__check {
width: 20px; height: 20px;
border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 10px; margin-top: 1px;
}
.dist-incluye-item__check--ok { background: #E1F5EE; color: #0F6E56; }
.dist-incluye-item__check--gold { background: var(--gold-light, #FDF6E3); color: var(--gold-dark, #8B6914); }
/* Quote */
.dist-quote-wrap {
background: var(--navy-deep, #0d1117);
padding: 80px 5%;
text-align: center;
}
.dist-quote-mark {
font-family: var(--serif);
font-size: 80px; color: var(--gold);
line-height: .6; display: block;
margin-bottom: 24px; opacity: .6;
}
.dist-quote-text {
font-family: var(--serif);
font-size: clamp(18px, 2.2vw, 26px);
font-weight: 400; color: var(--white);
line-height: 1.55; font-style: italic;
max-width: 760px; margin: 0 auto 28px;
}
.dist-quote-source {
font-size: 12px; color: rgba(255,255,255,.4);
letter-spacing: 1.5px; text-transform: uppercase;
}
/* FAQ */
.dist-faq-section {
background: #fff;
border-top: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-200);
}
.dist-faq-list {
display: flex; flex-direction: column; gap: 0;
margin-top: 44px; max-width: 820px; margin-left: auto; margin-right: auto;
}
.dist-faq-item {
border-bottom: 1px solid var(--gray-200);
}
.dist-faq-item:first-child { border-top: 1px solid var(--gray-200); }
.dist-faq-q {
padding: 22px 6px;
font-size: 15.5px; font-weight: 600;
color: var(--navy);
cursor: pointer; list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
transition: color .15s;
line-height: 1.4;
user-select: none;
}
.dist-faq-q::-webkit-details-marker { display: none; }
.dist-faq-q::after {
content: '';
width: 28px; height: 28px; flex-shrink: 0;
border-radius: 50%;
background: var(--gray-100, #F4F4F5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2340' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
background-size: 14px; background-position: center; background-repeat: no-repeat;
transition: transform .25s, background-color .2s;
}
details[open] > .dist-faq-q {
color: var(--gold-dark, #8B6914);
}
details[open] > .dist-faq-q::after {
transform: rotate(45deg);
background-color: var(--gold-light, #FDF6E3);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6914' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.dist-faq-q:hover { color: var(--gold-dark, #8B6914); }
.dist-faq-a {
padding: 0 36px 24px 6px;
font-size: 15px; color: #4B5563; line-height: 1.85;
max-width: 680px;
}
/* ── CTA SECTION (formulario rediseñado) ────────────────────── */
.dist-cta-section {
background: var(--navy-deep, #0d1117);
position: relative;
overflow: hidden;
}
.dist-cta-section::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 80% at 5% 50%, rgba(184,140,54,.06) 0%, transparent 65%),
radial-gradient(ellipse 40% 60% at 95% 20%, rgba(14,165,233,.04) 0%, transparent 60%);
pointer-events: none;
}
.dist-cta-inner {
position: relative; z-index: 1;
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center;
padding: 96px 5%;
}
/* Left column */
.dist-cta-title {
font-family: var(--serif);
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 700; color: var(--white);
line-height: 1.12; margin-bottom: 20px;
}
.dist-cta-desc {
font-size: 15px; color: rgba(255,255,255,.55);
line-height: 1.85; font-weight: 300;
max-width: 440px; margin-bottom: 36px;
}
/* Perks list with stagger animation */
.dist-cta-perks {
list-style: none;
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 40px;
}
.dist-cta-perk {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; color: rgba(255,255,255,.45);
opacity: 0; transform: translateX(-16px);
transition: opacity .4s, transform .4s, color .2s;
}
.dist-cta-perk--visible {
opacity: 1; transform: translateX(0);
color: rgba(255,255,255,.75);
}
.dist-cta-perk__icon {
width: 30px; height: 30px; flex-shrink: 0;
border-radius: 50%;
background: rgba(184,140,54,.15);
border: 1px solid rgba(184,140,54,.25);
display: flex; align-items: center; justify-content: center;
color: var(--gold);
}
/* Direct contact links */
.dist-cta-contact {
display: flex; flex-direction: column; gap: 10px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.07);
}
.dist-cta-contact__item {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: rgba(255,255,255,.4);
transition: color .2s;
text-decoration: none;
}
.dist-cta-contact__item:hover { color: var(--gold); }
.dist-cta-contact__item svg { flex-shrink: 0; opacity: .6; }
/* Right column — form card */
.dist-cta-right { position: relative; }
.dist-form-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
padding: 36px;
backdrop-filter: blur(8px);
}
.dist-form-card__header {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.dist-form-card__title {
display: block;
font-size: 17px; font-weight: 700;
color: var(--white); margin-bottom: 4px;
}
.dist-form-card__sub {
font-size: 12px; color: rgba(255,255,255,.35);
letter-spacing: .5px;
}
/* Error banner */
.dist-form-error {
background: rgba(239,68,68,.1);
border: 1px solid rgba(239,68,68,.25);
border-radius: 10px; padding: 12px 16px;
color: #FCA5A5; font-size: 13px;
margin-bottom: 20px;
}
/* Floating-label fields */
.dist-form--v2 .dist-form__row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px; margin-bottom: 0;
}
.dist-fl-field {
position: relative;
margin-bottom: 18px;
}
.dist-fl-label {
position: absolute;
top: 50%; left: 14px;
transform: translateY(-50%);
font-size: 13px; color: rgba(255,255,255,.7);
pointer-events: none;
transition: top .18s ease, font-size .18s ease, color .18s ease, transform .18s ease;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: calc(100% - 28px);
line-height: 1;
z-index: 2;
}
.dist-fl-label span { color: var(--gold); }
/* textarea: label parte desde arriba */
.dist-fl-field:has(.dist-fl-textarea) .dist-fl-label {
top: 18px; transform: none;
}
/* Elevado: al hacer focus O cuando el campo tiene valor */
.dist-fl-field--focus .dist-fl-label,
.dist-fl-input--filled + .dist-fl-label {
top: 9px; transform: none;
font-size: 10px; letter-spacing: .3px;
color: var(--gold);
}
.dist-fl-field:has(.dist-fl-textarea).dist-fl-field--focus .dist-fl-label,
.dist-fl-field:has(.dist-fl-textarea) .dist-fl-input--filled + .dist-fl-label {
top: 9px; transform: none;
font-size: 10px; color: var(--gold);
}
.dist-fl-input {
width: 100% !important;
background: rgba(255,255,255,.09) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 10px !important;
padding: 24px 14px 8px !important;
font-size: 14px !important;
color: #ffffff !important;
font-family: var(--sans) !important;
transition: border-color .2s, background .2s, box-shadow .2s;
outline: none !important;
box-shadow: none;
-webkit-appearance: none; appearance: none;
}
.dist-fl-textarea {
padding-top: 28px !important;
resize: none !important; min-height: 96px;
line-height: 1.6;
}
.dist-fl-select { cursor: pointer; }
.dist-fl-select option { background: #1a1f36 !important; color: #fff !important; }
.dist-fl-input:focus {
border-color: rgba(184,140,54,.6) !important;
background: rgba(255,255,255,.13) !important;
box-shadow: 0 0 0 3px rgba(184,140,54,.1) !important;
}
.dist-fl-input::placeholder { color: transparent !important; }
/* autofill override */
.dist-fl-input:-webkit-autofill,
.dist-fl-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 100px #1e2340 inset !important;
-webkit-text-fill-color: #fff !important;
caret-color: #fff;
}
/* Submit button */
.dist-form-btn {
width: 100%; margin-top: 4px;
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 15px 28px;
background: var(--gold);
color: var(--navy-deep, #0d1117);
font-family: var(--sans);
font-size: 14px; font-weight: 700;
letter-spacing: .8px; text-transform: uppercase;
border: none; border-radius: 10px; cursor: pointer;
transition: transform .2s, box-shadow .2s, background .2s;
}
.dist-form-btn::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform .55s;
}
.dist-form-btn:hover::after { transform: translateX(100%); }
.dist-form-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(184,140,54,.4);
}
.dist-form-btn:active { transform: translateY(0); }
.dist-form-btn__loading { display: none; align-items: center; gap: 8px; }
.dist-form-btn--loading .dist-form-btn__text { display: none; }
.dist-form-btn--loading .dist-form-btn__loading { display: flex; }
.dist-form-btn--loading { opacity: .7; cursor: wait; }
/* Spinner */
@keyframes distSpin { to { transform: rotate(360deg); } }
.dist-form-btn__spinner { animation: distSpin .8s linear infinite; }
/* Success state */
.dist-success {
text-align: center; padding: 60px 32px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
}
.dist-success svg { margin-bottom: 24px; }
.dist-success h3 {
font-family: var(--serif); font-size: 26px;
color: var(--white); margin-bottom: 12px;
}
.dist-success p { color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.7; }
/* Responsive for new sections */
@media(max-width: 960px) {
.dist-marcas-grid { grid-template-columns: repeat(2, 1fr); }
.dist-quien-grid { grid-template-columns: 1fr; }
.dist-incluye-grid { grid-template-columns: 1fr; }
.dist-cta-inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 5%; }
.dist-form--v2 .dist-form__row { grid-template-columns: 1fr; }
}
@media(max-width: 640px) {
.dist-marcas-grid { grid-template-columns: 1fr; }
.dist-brand-strip__sep { display: none; }
.dist-brand-strip__item { padding: 3px 8px; }
.dist-terr-item { flex-direction: column; align-items: flex-start; gap: 6px; }
.dist-form-card { padding: 24px 18px; }
.dist-cta-inner { padding: 48px 5%; }
}
/* ================================================================
CERTIFICATIONS STRIP
================================================================ */
.cert-strip {
background: var(--navy-deep);
border-bottom: 1px solid rgba(255,255,255,.06);
padding: 13px 24px;
}
.cert-strip__inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; justify-content: center;
gap: 20px; flex-wrap: wrap;
}
.cert-strip__label {
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2px;
color: rgba(255,255,255,.35);
white-space: nowrap;
margin-right: 4px;
}
.cert-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 13px;
border: 1px solid rgba(184,140,54,.28);
border-radius: var(--r-full);
font-size: 10px; font-weight: 700;
color: rgba(255,255,255,.7);
letter-spacing: .8px;
background: rgba(184,140,54,.05);
white-space: nowrap;
transition: border-color .2s, color .2s;
}
.cert-badge::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
@media(hover:hover) {
.cert-badge:hover { border-color: var(--gold); color: var(--gold-light); }
}
@media(max-width: 768px) {
.cert-strip { padding: 10px 16px; }
.cert-strip__label { display: none; }
.cert-strip__inner { gap: 8px; }
.cert-badge { font-size: 9px; padding: 4px 10px; }
}
@media(max-width: 480px) {
.cert-strip__inner { gap: 6px; }
.cert-badge { font-size: 8px; padding: 3px 8px; letter-spacing: .4px; }
.cert-badge::before { width: 4px; height: 4px; }
}
/* ================================================================
BRAND VIDEO EMBED (expandable)
================================================================ */
.brand-video { margin-top: 24px; }
.brand-video__toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px;
border: 1.5px solid rgba(255,255,255,.2);
border-radius: var(--r-full);
background: transparent;
color: rgba(255,255,255,.7);
font-size: 12px; font-weight: 700;
font-family: var(--serif);
text-transform: uppercase; letter-spacing: 1px;
cursor: pointer;
transition: var(--t);
}
.brand-video__toggle:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.4);
color: var(--white);
}
.brand-video__toggle .bv-icon { transition: transform .3s var(--ease); flex-shrink: 0; }
.brand-video__toggle[aria-expanded="true"] .bv-icon { transform: rotate(90deg); }
.brand-video__embed {
margin-top: 20px;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 16/9;
max-width: 560px;
background: #000;
display: none;
}
.brand-video__embed.open { display: block; }
.brand-video__embed iframe {
width: 100%; height: 100%;
border: none; display: block;
}
/* ================================================================
TESTIMONIALS SECTION
================================================================ */
.testimonials-section {
padding: 96px 0;
background: var(--gray-100);
border-top: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-200);
}
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.testi-card {
background: var(--white);
border-radius: var(--r-xl);
padding: 32px 28px;
border: 1px solid var(--gray-200);
display: flex; flex-direction: column; gap: 14px;
transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
@media(hover:hover) {
.testi-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(184,140,54,.35);
}
}
.testi-card__quote {
font-size: 52px; line-height: .8;
color: var(--gold-200);
font-family: Georgia, serif;
user-select: none;
}
.testi-card__text {
font-size: 14px; line-height: 1.85;
color: var(--gray-500);
flex: 1;
}
.testi-card__stars {
display: flex; gap: 3px;
color: var(--gold-light);
font-size: 13px;
}
.testi-card__divider { height: 1px; background: var(--gray-200); }
.testi-card__author { display: flex; align-items: center; gap: 12px; }
.testi-card__avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 15px; font-weight: 800;
color: var(--gold-light); flex-shrink: 0;
}
.testi-card__name {
font-size: 13px; font-weight: 700;
color: var(--navy); margin-bottom: 2px;
}
.testi-card__role { font-size: 11px; color: var(--gray-400); line-height: 1.4; }
@media(max-width: 960px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 640px) {
.testi-grid { grid-template-columns: 1fr; }
.testimonials-section { padding: 64px 0; }
.testi-card { padding: 24px 20px; }
}
/* ================================================================
WHATSAPP FLOATING BUTTON
================================================================ */
.wa-float {
position: fixed;
bottom: 28px; right: 28px;
z-index: 9000;
width: 58px; height: 58px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 4px 24px rgba(37,211,102,.4), 0 2px 8px rgba(0,0,0,.18);
display: flex; align-items: center; justify-content: center;
color: #fff; text-decoration: none;
transition: transform .25s var(--ease-spring), box-shadow .25s;
animation: waPulse 3.5s ease-in-out infinite;
}
.wa-float:hover {
transform: scale(1.12);
box-shadow: 0 8px 40px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.2);
animation: none;
}
.wa-float__tooltip {
position: absolute;
right: calc(100% + 12px);
background: var(--navy-deep);
color: var(--white);
font-size: 12px; font-weight: 600;
padding: 6px 12px; border-radius: 8px;
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .2s;
box-shadow: var(--shadow-md);
}
.wa-float__tooltip::after {
content: '';
position: absolute;
left: 100%; top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: var(--navy-deep);
}
.wa-float:hover .wa-float__tooltip { opacity: 1; }
@keyframes waPulse {
0%, 100% { box-shadow: 0 4px 24px rgba(37,211,102,.4), 0 2px 8px rgba(0,0,0,.18); }
50% { box-shadow: 0 4px 36px rgba(37,211,102,.65), 0 2px 8px rgba(0,0,0,.18); }
}
@supports(padding: max(0px)) {
.wa-float { bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); }
}
@media(max-width: 640px) {
.wa-float { bottom: 20px; right: 16px; width: 52px; height: 52px; }
.wa-float__tooltip { display: none; }
}
/* ================================================================
CATALOG MODAL (lead magnet)
================================================================ */
.catalog-modal-overlay {
position: fixed; inset: 0; z-index: 9998;
background: rgba(13,13,24,.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .3s var(--ease), visibility 0ms .3s;
}
.catalog-modal-overlay.open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .3s var(--ease), visibility 0ms 0ms;
}
.catalog-modal {
background: var(--white);
border-radius: var(--r-xl);
max-width: 500px; width: 100%;
padding: 40px 36px;
position: relative;
box-shadow: var(--shadow-2xl);
transform: translateY(24px) scale(.97);
transition: transform .35s var(--ease-spring);
}
.catalog-modal-overlay.open .catalog-modal { transform: translateY(0) scale(1); }
.catalog-modal__close {
position: absolute; top: 16px; right: 16px;
width: 34px; height: 34px; border-radius: 50%;
background: var(--gray-100); border: none;
display: flex; align-items: center; justify-content: center;
color: var(--gray-500); cursor: pointer;
transition: var(--t);
}
.catalog-modal__close:hover { background: var(--gray-200); color: var(--gray-900); }
.catalog-modal__icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, var(--gold-light), var(--gold));
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px; color: var(--navy);
}
.catalog-modal__title {
font-family: var(--serif); font-size: clamp(20px, 3vw, 26px);
font-weight: 900; color: var(--navy);
text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.catalog-modal__sub {
font-size: 14px; color: var(--gray-500);
line-height: 1.7; margin-bottom: 28px;
}
.catalog-form { display: flex; flex-direction: column; gap: 12px; }
.catalog-form__input {
width: 100%; padding: 12px 16px;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-md);
font-family: var(--font); font-size: 14px;
color: var(--gray-900); background: var(--white);
outline: none; transition: border-color .2s;
}
.catalog-form__input:focus { border-color: var(--gold); }
.catalog-form__input::placeholder { color: var(--gray-400); }
.catalog-form__submit {
width: 100%; padding: 14px;
background: linear-gradient(135deg, var(--gold-light), var(--gold));
border: none; border-radius: var(--r-md);
font-family: var(--serif); font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.2px;
color: var(--navy-deep); cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: filter .2s, transform .2s, box-shadow .2s;
}
.catalog-form__submit:hover {
filter: brightness(1.07); transform: translateY(-1px);
box-shadow: var(--shadow-gold);
}
.catalog-form__note {
font-size: 11px; color: var(--gray-400);
text-align: center; margin-top: 2px;
}
.catalog-success {
display: none; text-align: center; padding: 8px 0;
}
.catalog-success__icon {
width: 64px; height: 64px; border-radius: 50%;
background: #dcfce7;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px; color: #16a34a;
}
.catalog-success h3 {
font-family: var(--serif); font-size: 22px; font-weight: 900;
color: var(--navy); text-transform: uppercase; margin-bottom: 8px;
}
.catalog-success p { font-size: 13px; color: var(--gray-500); line-height: 1.7; }
@media(max-width: 640px) { .catalog-modal { padding: 28px 20px; } }
/* Catalog trigger button (floating) */
.catalog-float-btn {
position: fixed;
bottom: 28px; left: 28px; z-index: 9000;
display: flex; align-items: center; gap: 9px;
padding: 12px 18px;
background: var(--navy-deep);
border: 1.5px solid rgba(184,140,54,.38);
border-radius: var(--r-full);
color: var(--gold-light);
font-size: 11px; font-weight: 700;
font-family: var(--serif); text-transform: uppercase; letter-spacing: 1px;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,.28);
transition: var(--t);
white-space: nowrap;
}
.catalog-float-btn:hover {
background: var(--navy); border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,.32);
}
@supports(padding: max(0px)) {
.catalog-float-btn { bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); }
}
@media(max-width: 640px) {
.catalog-float-btn { bottom: 20px; left: 16px; padding: 10px 14px; font-size: 10px; }
}
/* ================================================================
CATALOG — Filter bar + AJAX grid
================================================================ */
.gremro-catalog-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 40px 24px 80px;
}
/* Filter bar */
.gremro-filter-bar {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 36px;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.gremro-filter-bar__inner {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.gremro-filter-group {
flex: 1;
min-width: 180px;
}
.gremro-filter-input,
.gremro-filter-select {
width: 100%;
padding: 10px 14px;
font-size: 14px;
font-family: var(--sans);
color: var(--navy-deep);
background: #f7f7f8;
border: 1px solid #e0e0e0;
border-radius: 10px;
outline: none;
transition: border-color .2s, box-shadow .2s;
appearance: none;
-webkit-appearance: none;
}
.gremro-filter-input:focus,
.gremro-filter-select:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,140,54,.12);
background: #fff;
}
.gremro-filter-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.gremro-filter-reset {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
font-size: 13px;
font-family: var(--sans);
font-weight: 500;
color: #666;
background: transparent;
border: 1px solid #e0e0e0;
border-radius: 10px;
cursor: pointer;
white-space: nowrap;
transition: color .2s, border-color .2s;
}
.gremro-filter-reset:hover {
color: var(--navy-deep);
border-color: #bbb;
}
.gremro-filter-count {
margin: 12px 0 0;
font-size: 12px;
color: #888;
font-family: var(--sans);
}
/* Custom select dropdowns (reemplaza native ) */
.gf-select-wrap {
position: relative;
}
.gf-select-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
font-size: 14px;
font-family: var(--sans);
color: var(--navy-deep);
background: #f7f7f8;
border: 1px solid #e0e0e0;
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: border-color .2s, box-shadow .2s, background .2s;
white-space: nowrap;
overflow: hidden;
}
.gf-select-trigger__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.gf-select-trigger svg {
flex-shrink: 0;
color: #888;
transition: transform .2s;
}
.gf-select-trigger.is-open {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184,140,54,.12);
background: #fff;
}
.gf-select-trigger.is-open svg {
transform: rotate(180deg);
}
.gf-select-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--navy-darkest, #0D0D18);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
box-shadow: 0 10px 36px rgba(0,0,0,.4);
z-index: 500;
overflow: hidden;
max-height: 260px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.15) transparent;
}
.gf-select-panel::-webkit-scrollbar { width: 4px; }
.gf-select-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.gf-select-option {
padding: 10px 16px;
font-size: 13px;
font-family: var(--sans);
color: rgba(255,255,255,.7);
cursor: pointer;
transition: background .15s, color .15s;
}
.gf-select-option:hover {
background: rgba(255,255,255,.07);
color: #fff;
}
.gf-select-option.is-selected {
color: var(--gold, #B88C36);
font-weight: 600;
background: rgba(184,140,54,.08);
}
.gf-select-option:not(:last-child) {
border-bottom: 1px solid rgba(255,255,255,.04);
}
/* Grid */
.gremro-products-ajax ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Loading state */
.gremro-products-ajax.loading {
opacity: .5;
pointer-events: none;
transition: opacity .2s;
}
/* No results */
.gremro-no-results {
grid-column: 1 / -1;
text-align: center;
padding: 80px 24px;
color: #888;
}
.gremro-no-results svg { margin-bottom: 16px; opacity: .4; }
.gremro-no-results p { font-size: 15px; margin: 4px 0; }
/* Pagination — catálogo de productos */
.gremro-pagination {
display: flex;
justify-content: center;
margin-top: 48px;
}
/* nav y ul NO deben heredar el estilo de 40px */
.gremro-pagination nav.woocommerce-pagination { width: 100%; }
.gremro-pagination nav.woocommerce-pagination ul.page-numbers {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
}
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li {
display: block;
}
/* Botones individuales */
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: var(--sans) !important;
color: var(--navy) !important;
background: #fff !important;
border: 1.5px solid var(--gray-200) !important;
text-decoration: none !important;
transition: background .2s, color .2s, border-color .2s !important;
line-height: 1 !important;
}
/* Activo */
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li span.current {
background: var(--gold) !important;
border-color: var(--gold) !important;
color: #fff !important;
}
/* Hover en links */
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
background: var(--navy) !important;
border-color: var(--navy) !important;
color: #fff !important;
}
/* Puntos suspensivos */
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li span.dots {
background: transparent !important;
border: none !important;
color: var(--gray-400) !important;
pointer-events: none;
min-width: 28px !important;
padding: 0 4px !important;
}
/* Flechas anterior / siguiente */
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li a.prev,
.gremro-pagination nav.woocommerce-pagination ul.page-numbers li a.next {
font-size: 17px !important;
padding: 0 12px !important;
}
/* Responsive */
@media(max-width: 960px) {
.gremro-products-ajax ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
.gremro-filter-group { min-width: 140px; }
}
@media(max-width: 700px) {
.gremro-products-ajax ul.products {
grid-template-columns: 1fr !important;
}
}
@media(max-width: 600px) {
.gremro-products-ajax ul.products {
grid-template-columns: 1fr !important;
}
.gremro-filter-bar { padding: 16px; }
.gremro-filter-bar__inner { flex-direction: column; }
.gremro-filter-group { width: 100%; min-width: unset; }
.gremro-filter-reset { width: 100%; justify-content: center; }
}
/* ================================================================
PARTNER LOGOS — Marcas que confían en nosotros
================================================================ */
.partner-logos-section {
padding: 80px 0;
background: var(--white);
}
.partner-logos-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
margin-top: 48px;
}
/* Floating keyframes — cada card tiene un delay distinto para que no se muevan al unísono */
/* Sin animación floating — estática */
.partner-logo-card__inner {
background: #ffffff;
border: 1px solid #ebebeb;
border-radius: 16px;
padding: 20px 16px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 2;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
transition: box-shadow .3s ease, border-color .3s ease;
}
.partner-logo-card__inner:hover {
box-shadow: 0 8px 28px rgba(0,0,0,.10);
border-color: rgba(184,140,54,.3);
}
.partner-logo-card__inner img {
max-width: 100%;
max-height: 80px;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.7;
transition: opacity .2s;
}
.partner-logo-card__inner:hover img {
opacity: 1;
}
/* Responsive */
@media(max-width: 1024px) {
.partner-logos-grid { grid-template-columns: repeat(4, 1fr); }
}
@media(max-width: 640px) {
.partner-logos-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.partner-logo-card__inner { padding: 14px 10px; }
.partner-logo-card__inner img { max-height: 40px; }
.partner-logos-section { padding: 60px 0; }
}
/* ================================================================
TESTIMONIALES — rebuild estático
================================================================ */
.g-eyebrow {
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.g-title {
text-align: center;
font-family: var(--serif);
font-size: clamp(28px, 4vw, 42px);
color: var(--navy-deep);
margin-bottom: 48px;
}
.g-testi {
padding: 80px 0;
background: #f8f8f9;
}
.g-testi__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.g-testi__card {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.g-testi__text {
font-size: 15px;
line-height: 1.65;
color: #444;
flex: 1;
}
.g-testi__stars {
color: var(--gold);
font-size: 16px;
letter-spacing: 2px;
}
.g-testi__author {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid #eee;
padding-top: 16px;
}
.g-testi__avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--navy-deep);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.g-testi__author strong {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--navy-deep);
}
.g-testi__author span {
font-size: 11px;
color: #888;
}
@media(max-width: 900px) { .g-testi__grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 580px) { .g-testi__grid { grid-template-columns: 1fr; } .g-testi { padding: 56px 0; } }
/* ================================================================
LOGOS MARCAS Y HOSPITALES — rebuild estático
================================================================ */
.g-logos {
padding: 80px 0;
background: #fff;
}
.g-logos__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-bottom: 8px;
}
.g-logos__grid--6 {
grid-template-columns: repeat(6, 1fr);
}
.g-logos__card {
background: #fff;
border: 1px solid #ebebeb;
border-radius: 12px;
padding: 18px 14px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 2;
}
.g-logos__card img {
max-width: 100%;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
}
@media(max-width: 1024px) {
.g-logos__grid { grid-template-columns: repeat(4, 1fr); }
.g-logos__grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 600px) {
.g-logos__grid, .g-logos__grid--6 { grid-template-columns: repeat(2, 1fr); }
.g-logos { padding: 56px 0; }
}
/* ══════════════════════════════════════════════════════════════
BLOG — page-blog.php
══════════════════════════════════════════════════════════════ */
/* Hero */
.blog-hero {
background: var(--navy);
padding: 112px var(--px) 52px;
text-align: center;
position: relative;
overflow: hidden;
}
.blog-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(184,140,54,.10) 0%, transparent 70%);
pointer-events: none;
}
.blog-hero__inner {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto;
}
.blog-hero__title {
font-family: var(--serif);
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
color: #fff;
line-height: 1.1;
margin: 0;
letter-spacing: -0.5px;
}
.blog-hero__title::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: var(--gold);
margin: 14px auto 0;
border-radius: 2px;
}
.blog-hero__desc { display: none; }
/* Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-bottom: 56px;
}
@media(max-width: 960px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media(max-width: 600px) {
.blog-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* Card */
.blog-card {
background: #fff;
border-radius: 16px;
border: 1px solid rgba(0,0,0,.07);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .2s, transform .2s;
}
.blog-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.10);
transform: translateY(-3px);
}
.blog-card__img-wrap {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--navy);
flex-shrink: 0;
}
.blog-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s;
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--navy) 0%, #2a3060 100%);
color: rgba(255,255,255,.4);
}
.blog-card__body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.blog-card__cat {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--gold);
background: rgba(184,140,54,.1);
padding: 3px 10px;
border-radius: 20px;
}
.blog-card__date {
font-size: 12px;
color: var(--gray-500);
}
.blog-card__title {
font-family: var(--serif);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.35;
margin: 0 0 10px;
}
.blog-card__title a {
color: var(--navy);
text-decoration: none;
}
.blog-card__title a:hover { color: var(--gold); }
.blog-card__title a:visited { color: var(--navy); }
.blog-card__excerpt {
font-size: 14px;
color: var(--gray-500);
line-height: 1.65;
flex: 1;
margin: 0 0 20px;
}
.blog-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--gold);
text-decoration: none;
transition: gap .2s;
}
.blog-card__link:hover { gap: 10px; }
.blog-card__link:visited { color: var(--gold); }
/* Paginación */
.blog-pagination {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px;
}
.blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: var(--navy);
background: #fff;
border: 1px solid rgba(0,0,0,.1);
text-decoration: none;
transition: background .15s, color .15s;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
background: var(--gold);
color: #fff;
border-color: var(--gold);
}
.blog-pagination .page-numbers:visited { color: var(--navy); }
.blog-pagination .page-numbers.current:visited,
.blog-pagination .page-numbers:hover { color: #fff; }
/* Estado vacío */
.blog-empty {
text-align: center;
padding: clamp(64px, 10vw, 120px) 20px;
max-width: 520px;
margin: 0 auto;
}
.blog-empty__icon {
width: 80px;
height: 80px;
background: rgba(184,140,54,.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 28px;
color: var(--gold);
}
.blog-empty__title {
font-family: var(--serif);
font-size: clamp(24px, 3vw, 32px);
color: var(--navy);
margin: 0 0 12px;
}
.blog-empty__desc {
font-size: 16px;
color: var(--gray-500);
line-height: 1.7;
margin: 0 0 36px;
}
.blog-empty__actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ================================================================
UI/UX PRO MAX — Mobile Polish & Visual Coherence v1
Design System aplicado: Trust & Authority B2B Medical
Skill rules: Touch (22,23), Layout (19,20,21), Animation (7,9,13)
Breakpoints: 960 | 768 | 640 | 480 | 360
================================================================ */
/* ── Base: tap highlight & focus ──────────────────────────────── */
a, button, [role="button"], input, select, textarea, label {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* ── Touch targets mínimos — WCAG 2.5.5, 44×44px ────────────── */
.btn-gold, .btn-navy, .btn-mechan, .btn-xishan, .btn-outline-white,
.btn-cotizar, .gremro-btn-cotizar,
.btn--hero-primary, .btn--hero-secondary,
.btn--gold-solid, .btn--navy-solid,
.btn--mechan-outline, .btn--xishan-outline {
min-height: 44px;
}
.gremro-menu-toggle { min-width: 44px; min-height: 44px; }
.gremro-modal__close { width: 44px !important; height: 44px !important; }
/* ── iOS Safari: prevenir zoom automático en inputs ──────────── */
/* iOS hace zoom cuando font-size < 16px — rompe el layout */
@media(max-width:768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select, textarea {
font-size: 16px !important;
}
}
/* ── Related products — single product page ─────────────────── */
.gremro-related-products {
padding: 56px 24px 48px;
max-width: 1280px;
margin: 0 auto;
}
.gremro-related-products__title {
font-family: var(--serif);
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 28px;
}
/* ── Safe area insets — iPhone X+ notch / home indicator ─────── */
.gremro-header__inner {
padding-left: max(24px, env(safe-area-inset-left));
padding-right: max(24px, env(safe-area-inset-right));
}
@media(max-width:960px) {
/* Safe area horizontal — items tienen su propio padding */
.gremro-nav > li > a,
.gremro-nav__mobile-cta {
padding-left: max(28px, calc(env(safe-area-inset-left) + 16px));
padding-right: max(28px, calc(env(safe-area-inset-right) + 16px));
}
}
.gremro-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* ── Viewport — rent-hero: usar svh en lugar de vh ───────────── */
.rent-hero { min-height: 100svh; }
/* ── Hamburger — transición suave en las spans ───────────────── */
/* JS maneja el transform del X — solo añadir easing */
.gremro-menu-toggle span {
transition: transform .22s var(--ease), opacity .18s;
}
/* Animación + motion — nav móvil */
@media(prefers-reduced-motion: no-preference) and (max-width:960px) {
.gremro-nav-wrap.open { animation: gremroNavIn .28s var(--ease) both; }
}
/* ── Hero — refinamientos móvil ──────────────────────────────── */
@media(max-width:640px) {
.hero__inner { padding: 80px 20px 64px; }
.hero__sub { font-size: 16px; line-height: 1.75; margin-bottom: 36px; }
.hero__actions { gap: 10px; width: 100%; max-width: 360px; }
.btn--hero-primary, .btn--hero-secondary {
width: 100% !important; max-width: none !important;
min-height: 52px; font-size: 13px; justify-content: center;
}
}
@media(max-width:480px) {
.hero__badge { margin-bottom: 20px; font-size: 9px; padding: 7px 16px; }
.hero__inner { padding: 72px 16px 56px; }
.hero__actions { max-width: 100%; }
.hero__brands-row { gap: 6px; }
.hero__brand-chip { font-size: 11px; padding: 8px 14px; min-height: 36px; }
}
/* ── Stats strip — grid 2×2 en móvil pequeño ────────────────── */
@media(max-width:480px) {
.stats-strip__inner {
display: grid !important;
grid-template-columns: 1fr 1fr;
padding: 0;
}
.stat-block { padding: 28px 16px !important; border-right: 1px solid rgba(255,255,255,.06); }
.stat-block:nth-child(2n) { border-right: none; }
.stat-block:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.06); }
.stat-block__divider { display: none !important; }
}
/* ── Brand split — polish móvil ──────────────────────────────── */
@media(max-width:480px) {
.brand-split__content-inner { padding: 36px 20px; }
.brand-split__name { font-size: clamp(40px, 11vw, 60px); }
.brand-split__stat-card { min-width: 130px; padding: 14px 16px; }
.brand-split__stat-card-value { font-size: 22px; }
}
/* ── Category tiles — tamaño móvil ───────────────────────────── */
@media(max-width:480px) {
.cat-tile { width: 100%; padding: 20px 12px 16px; border-radius: 16px; }
.cat-tile__icon { width: 46px; height: 46px; margin-bottom: 12px; }
.cat-tile__icon svg { width: 22px; height: 22px; }
.cat-tile__name { font-size: 12px; }
}
/* ── Product cards — móvil ───────────────────────────────────── */
@media(max-width:480px) {
/* Homepage grid */
.gremro-product-card__img { height: 160px; }
/* WooCommerce — 1 columna en móvil (catálogo, archivo) */
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img { height: 140px !important; object-fit: contain !important; }
}
@media(max-width:340px) {
/* 1 columna en pantallas muy pequeñas */
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: 1fr !important; }
}
/* ── WooCommerce shop page — padding móvil ───────────────────── */
@media(max-width:640px) {
.woocommerce-page .site-main,
.woocommerce .site-main { padding: 96px 16px 60px !important; }
}
/* ── Blog — móvil ────────────────────────────────────────────── */
@media(max-width:480px) {
.blog-section { padding: 60px 0; }
.blog-card__img-wrap{ height: 180px; }
.blog-card__title { font-size: 17px; }
.blog-card__body { padding: 18px; }
}
/* ── CTA banner — botones full-width en móvil ────────────────── */
@media(max-width:480px) {
.cta-banner { padding: 60px 20px; }
.cta-banner__actions a,
.cta-banner__actions button {
width: 100%; max-width: 100% !important;
justify-content: center;
min-height: 52px; font-size: 14px;
}
}
/* ── Padding de sección — pantallas muy pequeñas ─────────────── */
@media(max-width:360px) {
.gremro-section { padding: 40px 0; }
.gremro-section__inner,
.container, .container--md { padding: 0 14px; }
}
/* ── Formularios — campos accesibles en móvil ────────────────── */
@media(max-width:768px) {
.form-input, .form-select, .form-textarea { min-height: 48px; padding: 14px; }
.form-textarea { min-height: 120px; }
.contact-form-wrap input,
.contact-form-wrap select,
.contact-form-wrap textarea { min-height: 48px; }
}
@media(max-width:640px) {
.contact-form-wrap { border-radius: var(--r-lg); padding: 24px 18px; }
}
@media(max-width:480px) {
.contact-page { gap: 32px; }
.contact-form-wrap { padding: 20px 16px; }
.contact-info__item-icon { width: 40px; height: 40px; }
.contact-info__items { gap: 16px; }
}
/* ── Modal — bottom sheet en móvil pequeño ───────────────────── */
/* UI/UX Pro Max: bottom sheet = patrón estándar iOS/Android en móvil */
@media(max-width:480px) {
.gremro-modal-overlay {
padding: 0 !important;
align-items: flex-end !important;
}
.gremro-modal {
grid-template-columns: 1fr !important;
border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
max-height: 88vh !important;
transform: translateY(40px) scale(1) !important;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gremro-modal-overlay.open .gremro-modal {
transform: translateY(0) scale(1) !important;
}
.gremro-modal__img-wrap {
border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
min-height: 180px !important;
padding: 20px !important;
}
.gremro-modal__img { max-height: 140px !important; }
.gremro-modal__body { padding: 20px 18px 28px !important; }
.gremro-modal__actions { flex-direction: column; }
.gremro-modal__actions .btn-gold { min-width: 0; min-height: 52px; }
.gremro-modal__close-btn { width: 100%; justify-content: center; min-height: 48px; }
}
/* ── Brand pages — hero móvil ────────────────────────────────── */
@media(max-width:480px) {
.brand-hero { padding: 90px 20px 48px; min-height: 100svh; }
.brand-hero__title { font-size: clamp(44px, 13vw, 72px); letter-spacing: 1px; }
.brand-hero__desc { font-size: 15px; line-height: 1.75; }
.brand-hero__actions { flex-direction: column; gap: 10px; }
.brand-hero__actions a {
width: 100%; justify-content: center; min-height: 52px;
}
/* Watermark gigante — ocultar en móvil para limpiar la composición */
.brand-hero__bg-wm, .brand-hero__bg-text { display: none; }
}
/* ── Brand features & why-grid — móvil ───────────────────────── */
@media(max-width:480px) {
.brand-features, .brand-why-grid { gap: 12px; }
.brand-feat, .brand-feature-card { padding: 18px; }
.brand-feat__icon,
.brand-feature-card__icon { width: 40px; height: 40px; font-size: 20px; }
.brand-why-card { padding: 20px 16px; }
.brand-why-card__icon { font-size: 32px; margin-bottom: 10px; }
}
/* ── Nosotros — móvil ────────────────────────────────────────── */
@media(max-width:480px) {
.gremro-stats__item { padding: 24px 16px; }
.mission-vision-grid { gap: 16px; }
.mv-card { padding: 28px 20px; }
.values-grid { gap: 12px; }
.value-card { padding: 22px 16px; }
.about-timeline { padding-left: 34px; }
.about-timeline::before { left: 12px; }
.about-timeline__dot { left: -26px; top: 6px; }
}
/* ── Renta — móvil ───────────────────────────────────────────── */
@media(max-width:480px) {
.rent-benefit-card { padding: 22px 18px; }
.rent-equip-card { padding: 24px 20px; }
.rent-step__number { width: 60px; height: 60px; font-size: 20px; margin-bottom: 14px; }
.rent-plan-card { padding: 28px 20px; }
.rent-plan-card--featured { transform: none; }
.rent-plan-card--featured:hover { transform: translateY(-4px); }
}
/* ── Section headers — compactos en móvil ────────────────────── */
@media(max-width:480px) {
.section-head, .gremro-section__header { margin-bottom: 36px; }
.section-head__sub, .gremro-section__desc { font-size: 15px; }
.gremro-section__label { font-size: 9px; padding: 5px 12px; }
}
/* ── Reservar espacio para imágenes — prevenir layout shift ─── */
.gremro-product-card__img,
.woocommerce ul.products li.product img,
.blog-card__img-wrap img { background-color: var(--gray-100); }
/* ═══════════════════════════════════════════════════════════════
BLOG — Post destacado + encabezado de feed
═══════════════════════════════════════════════════════════════ */
.blog-feed-header {
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 16px;
}
.blog-feed-header h2 {
font-family: var(--serif);
font-size: clamp(17px, 1.8vw, 20px);
font-weight: 700;
color: var(--navy);
margin: 0;
white-space: nowrap;
}
.blog-feed-header .divider-line {
flex: 1;
height: 1px;
background: var(--gray-200);
}
/* Post destacado */
.blog-featured {
display: grid;
grid-template-columns: 45% 1fr;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,.07);
border: 1px solid var(--gray-200);
margin-bottom: 56px;
transition: transform .25s, box-shadow .25s;
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0,0,0,.12); }
.blog-featured__img {
overflow: hidden;
background: var(--navy);
min-height: 360px;
}
.blog-featured__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-featured:hover .blog-featured__img img { transform: scale(1.04); }
.blog-featured__img-placeholder {
width: 100%; height: 100%; min-height: 360px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--navy) 0%, #1a3c5e 100%);
}
.blog-featured__body {
padding: 48px 52px 44px;
display: flex; flex-direction: column; justify-content: center;
}
.blog-featured__label {
font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.blog-featured__cat {
display: inline-block;
background: var(--navy); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
margin-bottom: 18px; text-decoration: none;
transition: background .2s;
}
.blog-featured__cat:hover { background: var(--gold-dark); }
.blog-featured__title {
font-family: var(--serif);
font-size: clamp(21px, 2.2vw, 30px);
font-weight: 700; line-height: 1.2;
color: var(--navy); margin: 0 0 14px;
}
.blog-featured__title a { color: inherit; text-decoration: none; }
.blog-featured__title a:hover { color: var(--gold-dark); }
.blog-featured__title a:visited { color: var(--navy); }
.blog-featured__excerpt {
font-size: 15px; color: var(--gray-500);
line-height: 1.73; margin-bottom: 28px; flex: 1;
}
.blog-featured__footer {
display: flex; align-items: center;
justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.blog-featured__meta {
font-size: 12px; color: var(--gray-400);
display: flex; align-items: center; gap: 8px;
}
.blog-featured__meta-sep { opacity: .4; }
.blog-featured__read {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--gold-dark);
text-decoration: none; transition: gap .2s;
}
.blog-featured__read:hover { gap: 10px; }
.blog-featured__read:visited { color: var(--gold-dark); }
@media (max-width: 860px) {
.blog-featured { grid-template-columns: 1fr; }
.blog-featured__img { min-height: 220px; aspect-ratio: 16/9; }
.blog-featured__body { padding: 28px 24px 24px; }
}
@media (max-width: 580px) {
.blog-featured { margin-bottom: 36px; }
}
/* ═══════════════════════════════════════════════════════════════
SINGLE POST — Layout de artículo
═══════════════════════════════════════════════════════════════ */
.post-breadcrumb {
background: #fff;
border-bottom: 1px solid var(--gray-200);
padding: 12px 0;
}
.post-breadcrumb__inner {
max-width: 1280px; margin: 0 auto; padding: 0 40px;
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: 12px; color: var(--gray-400);
}
.post-breadcrumb__inner a { color: var(--gray-400); text-decoration: none; transition: color .2s; }
.post-breadcrumb__inner a:hover { color: var(--navy); }
.post-breadcrumb__inner span:last-child { color: var(--navy); font-weight: 500; }
.post-header {
background: #fff;
padding: 56px 0 48px;
border-bottom: 1px solid var(--gray-200);
}
.post-header__inner {
max-width: 820px; margin: 0 auto; padding: 0 40px;
}
.post-header__cat {
display: inline-block;
background: var(--navy); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
text-decoration: none; margin-bottom: 20px;
transition: background .2s;
}
.post-header__cat:hover { background: var(--gold-dark); }
.post-header__title {
font-family: var(--serif);
font-size: clamp(26px, 4vw, 46px);
font-weight: 700; line-height: 1.15;
color: var(--navy); margin: 0 0 20px;
}
.post-header__meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
font-size: 13px; color: var(--gray-400);
}
.post-header__sep { opacity: .5; }
.post-featured-img { background: var(--gray-100); }
.post-featured-img__inner { max-width: 1280px; margin: 0 auto; }
.post-featured-img__img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.post-body { padding: 64px 0 80px; background: var(--off-white); }
.post-body__inner {
max-width: 1280px; margin: 0 auto; padding: 0 40px;
display: grid;
grid-template-columns: 1fr 300px;
gap: 48px;
align-items: start;
}
/* Contenido del artículo */
.post-content {
background: #fff;
border-radius: 14px;
padding: 52px 56px;
box-shadow: 0 2px 16px rgba(0,0,0,.06);
border: 1px solid var(--gray-200);
min-width: 0;
}
.post-content p {
font-size: 16px; color: #374151; line-height: 1.84;
margin: 0 0 20px;
}
.post-content .post-lead {
font-size: 18px; color: var(--navy);
font-weight: 500; line-height: 1.75;
border-left: 3px solid var(--gold);
padding-left: 20px; margin-bottom: 36px;
}
.post-content h2 {
font-family: var(--serif);
font-size: clamp(19px, 2vw, 25px);
font-weight: 700; color: var(--navy);
margin: 44px 0 16px; line-height: 1.2;
padding-bottom: 10px;
border-bottom: 1px solid var(--gray-200);
}
.post-content h2:first-child,
.post-content > *:first-child { margin-top: 0; }
.post-content h3 {
font-family: var(--serif);
font-size: clamp(16px, 1.6vw, 20px);
font-weight: 700; color: var(--navy);
margin: 28px 0 10px;
}
.post-content ul, .post-content ol {
margin: 0 0 20px 20px; padding: 0;
}
.post-content li {
font-size: 15px; color: #374151;
line-height: 1.78; margin-bottom: 8px;
padding-left: 4px;
}
.post-content ul li::marker { color: var(--gold); }
.post-content strong { color: var(--navy); }
.post-content a { color: var(--gold-dark); }
.post-content a:hover { color: var(--navy); }
.post-content blockquote {
margin: 28px 0; padding: 20px 24px;
background: var(--off-white);
border-left: 4px solid var(--gold);
border-radius: 0 8px 8px 0;
font-style: italic; font-size: 16px;
color: var(--gray-500); line-height: 1.7;
}
/* Sidebar del post */
.post-sidebar { position: sticky; top: 100px; }
.post-sidebar-cta {
background: #fff;
border-radius: 14px;
padding: 28px 24px 24px;
box-shadow: 0 2px 16px rgba(0,0,0,.07);
border: 1px solid var(--gray-200);
}
.post-sidebar-cta__logo { margin-bottom: 16px; }
.post-sidebar-cta__logo img { height: 30px; width: auto; }
.post-sidebar-cta__title {
font-family: var(--serif);
font-size: 18px; font-weight: 700;
color: var(--navy); margin: 0 0 8px;
}
.post-sidebar-cta__text {
font-size: 13px; color: var(--gray-500);
line-height: 1.65; margin-bottom: 16px;
}
.post-sidebar-cta__wa {
display: flex; align-items: center; justify-content: center;
gap: 8px; margin-top: 10px; padding: 10px 16px;
background: #25D366; color: #fff;
font-size: 13px; font-weight: 600;
border-radius: 8px; text-decoration: none;
transition: opacity .2s;
}
.post-sidebar-cta__wa:hover { opacity: .88; color: #fff; }
.post-sidebar-cta__divider { height: 1px; background: var(--gray-200); margin: 20px 0 16px; }
.post-sidebar-cta__links-title {
font-size: 10px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--gray-400); margin: 0 0 10px;
}
.post-sidebar-cta__links { list-style: none; margin: 0; padding: 0; }
.post-sidebar-cta__links li { margin-bottom: 8px; }
.post-sidebar-cta__links a {
font-size: 13px; color: var(--navy);
text-decoration: none;
display: flex; align-items: center; gap: 6px;
transition: color .2s;
}
.post-sidebar-cta__links a::before { content: '→'; color: var(--gold); font-size: 10px; }
.post-sidebar-cta__links a:hover { color: var(--gold-dark); }
/* Related posts */
.post-related {
background: #fff; padding: 64px 0;
border-top: 1px solid var(--gray-200);
}
.post-related__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.post-related__header { margin-bottom: 32px; }
.post-related__title {
font-family: var(--serif);
font-size: clamp(18px, 2vw, 24px);
font-weight: 700; color: var(--navy); margin: 8px 0 0;
}
.post-related__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
/* Responsive single */
@media (max-width: 1024px) {
.post-body__inner { grid-template-columns: 1fr; }
.post-sidebar { position: static; }
.post-related__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
.post-breadcrumb__inner,
.post-header__inner,
.post-related__inner { padding: 0 20px; }
.post-body__inner { padding: 0 20px; }
.post-content { padding: 28px 22px; }
.post-header { padding: 36px 0 28px; }
.post-body { padding: 32px 0 48px; }
.post-related { padding: 40px 0; }
.post-related__grid { grid-template-columns: 1fr; }
}
/* ── prefers-reduced-motion — overrides adicionales ──────────── */
@media(prefers-reduced-motion: reduce) {
.gremro-nav-wrap.open { animation: none; }
.hero__badge { animation: none; opacity: 1; transform: none; }
.hero__title-accent { animation: none; opacity: 1; transform: none; }
.h-scroll-track { animation: none; }
.brand-hero__glow { animation: none; }
.scroll-cue__wheel { animation: none; }
.hero__badge-dot { animation: none; box-shadow: 0 0 0 3px rgba(184,140,54,.2); }
}
/* ================================================================
TAP / CLICK RIPPLE FEEDBACK
Material-style ripple + press scale para mobile y desktop
================================================================ */
/* Habilitar clipping y eliminar tap highlight nativo del browser */
.btn-gold, .btn-navy, .btn-mechan, .btn-xishan, .btn-outline-white,
.gremro-nav__mobile-cta,
.gremro-product-card,
.brand-feature-card, .brand-why-card,
.rent-benefit-card, .rent-equip-card, .rent-equip-full,
.brand-panel, .dist-partner-card, .catalog-tab,
.brand-stat {
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Nav links: sin overflow:hidden (tiene ::after dropdown) */
.gremro-nav > li > a,
.gremro-nav__mobile-cta {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* ── Elemento ripple inyectado por JS ── */
.ripple-wave {
position: absolute;
border-radius: 50%;
pointer-events: none;
user-select: none;
transform: scale(0);
opacity: .55;
animation: gremro-ripple 580ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
z-index: 9999;
background: rgba(255,255,255,.28);
}
@keyframes gremro-ripple {
to { transform: scale(1); opacity: 0; }
}
/* Ripple oscuro para tarjetas con fondo blanco/claro */
.gremro-product-card .ripple-wave,
.brand-feature-card .ripple-wave,
.brand-why-card .ripple-wave,
.rent-benefit-card .ripple-wave,
.rent-equip-card .ripple-wave,
.rent-equip-full .ripple-wave,
.dist-partner-card .ripple-wave,
.catalog-tab .ripple-wave {
background: rgba(0,0,0,.055);
}
/* ── Press scale: respuesta táctil instantánea en botones ── */
.btn-gold:active, .btn-navy:active, .btn-mechan:active,
.btn-xishan:active, .btn-outline-white:active,
.gremro-nav__mobile-cta:active {
transform: scale(0.95) !important;
transition: transform 55ms ease !important;
box-shadow: none !important;
}
/* ── Sidebar nav: flash de fondo al tap ── */
@media (max-width: 960px) {
.gremro-nav > li > a:active {
background: rgba(255,255,255,.12) !important;
transition: background 55ms ease !important;
}
}