/* ==== from index.html ==== */
/* =============================
TOKENS
============================= */
:root{
--asfalto:#000000; /* fondo oscuro, base — negro emoko */
--asfalto-2:#141414; /* fondo oscuro, capa */
--concreto:#FFFFFF; /* fondo claro, blanco */
--papel:#F5F5F5; /* tarjetas sobre claro */
--grafito:#0A0A0A; /* texto sobre claro */
--hueso:#B3B3B3; /* texto secundario sobre oscuro, verde grisáceo */
--carril:#FF4200; /* naranja emoko, acento primario */
--voltaje:#8C8C8C; /* gris neutro, acento secundario */
--linea:rgba(10,10,10,0.10);
--linea-osc:rgba(255,255,255,0.12);
--display: 'Syne', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--maxw: 1180px;
--radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:var(--body);
color:var(--grafito);
background:var(--concreto);
-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{
font-family:var(--mono);
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--voltaje);
}
.eyebrow.on-light{color:#CC3600;}
/* Botones */
.btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:15px 26px;
border-radius:100px;
font-family:var(--body);
font-weight:600;
font-size:15px;
border:1px solid transparent;
cursor:pointer;
transition:transform .15s ease, background .2s ease, border-color .2s ease;
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--carril);color:var(--concreto);}
.btn-primary:hover{background:#FF6A33;}
.btn-outline-dark{border-color:var(--linea-osc);color:var(--concreto);}
.btn-outline-dark:hover{border-color:var(--carril);}
.btn-outline-light{border-color:var(--linea);color:var(--grafito);}
.btn-outline-light:hover{border-color:var(--asfalto);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:11px 18px;font-size:13.5px;}
/* =============================
ELEMENTO SIGNATURE: "El Carril"
Línea de progreso tipo señalización de
ciclovía que acompaña el scroll y conecta
cada sección — metáfora del "recorrido
acompañado" que es la propuesta del negocio.
============================= */
.carril-track{
position:fixed;
top:0; left:0;
width:5px; height:100%;
background:repeating-linear-gradient(
to bottom,
rgba(0,0,0,.16) 0 10px,
transparent 10px 20px
);
z-index:60;
}
.carril-fill{
position:absolute;top:0;left:0;width:100%;height:0%;
background:var(--carril);
box-shadow:0 0 12px 1px rgba(255,66,0,.55);
transition:height .08s linear;
}
@media (max-width:780px){ .carril-track{width:3px;} }
/* =============================
HEADER
============================= */
header{
position:sticky;top:0;z-index:50;
background:#0a0a0a;
border-bottom:1px solid var(--linea-osc);
transform:translateZ(0);
-webkit-transform:translateZ(0);
isolation:isolate;
}
.nav{
display:flex;align-items:center;justify-content:space-between;
padding:16px 24px 16px 32px;
max-width:var(--maxw);margin:0 auto;
}
.brand{
font-family:var(--display);font-weight:800;font-size:16.5px;
color:var(--concreto);letter-spacing:.01em;white-space:nowrap;
}
.brand span{color:var(--carril);}
@media (max-width:480px){ .brand{font-size:14px;} }
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{
color:var(--hueso);font-size:14.5px;font-weight:500;
transition:color .2s ease;
}
.nav-links a:hover{color:var(--concreto);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--concreto);margin:5px 0;}
@media (max-width:900px){
.nav-links{
position:fixed;top:64px;left:0;right:0;
background:var(--asfalto);
flex-direction:column;align-items:flex-start;
padding:20px 32px 28px;gap:18px;
border-bottom:1px solid var(--linea-osc);
transform:translateY(-8px);
opacity:0;pointer-events:none;
transition:all .2s ease;
}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.nav-toggle{display:block;}
.nav-cta .btn-sm-label{display:none;}
}
/* =============================
HERO
============================= */
.hero{
background:
radial-gradient(ellipse at 15% 20%, rgba(255,66,0,.14), transparent 55%),
radial-gradient(ellipse at 85% 75%, rgba(140,140,140,.16), transparent 55%),
linear-gradient(180deg, var(--asfalto) 0%, var(--asfalto-2) 100%);
color:var(--concreto);
padding:96px 0 88px;
overflow:hidden;
}
.hero .wrap{
display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
padding-left:56px;
}
.hero h1{
font-size:clamp(38px,5vw,64px);
color:var(--concreto);
margin:18px 0 22px;
}
.hero h1 em{
font-style:normal;color:var(--carril);
}
.hero-copy p{
font-size:18px;line-height:1.6;color:var(--hueso);
max-width:480px;margin-bottom:34px;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
/* Panel visual del hero: impacto real (CO2, ahorro de gastos, ahorro de tiempo) */
.hero-visual{
position:relative;
display:flex;align-items:center;justify-content:center;
}
.hero-stat{
width:100%;
background:rgba(255,255,255,.04);
border:1px solid var(--linea-osc);
border-radius:var(--radius);
padding:38px 36px 30px;
}
.hero-stat .eyebrow{display:block;margin-bottom:22px;}
.hero-stat-list{ display:flex;flex-direction:column;gap:22px; }
.hero-stat-item{ display:flex;align-items:flex-start;gap:16px; }
.hsi-icon{
flex:none;width:40px;height:40px;border-radius:8px;
background:rgba(255,66,0,.12);
display:flex;align-items:center;justify-content:center;
font-size:19px;
}
.hsi-num{
font-family:var(--display);font-weight:800;font-size:26px;
color:var(--concreto);line-height:1.1;letter-spacing:-0.01em;
}
.hsi-num .stat-count{ color:var(--carril); }
.hsi-label{ font-size:13.5px;color:var(--hueso);margin-top:3px;max-width:260px;line-height:1.4; }
.hero-stat-caption{
font-family:var(--mono);font-size:11.5px;color:var(--hueso);
letter-spacing:.01em;margin-top:24px;padding-top:20px;border-top:1px solid var(--linea-osc);
line-height:1.6;
}
.hero-stat-caption a{ color:var(--carril);text-decoration:underline; }
@media (max-width:900px){
.hero .wrap{grid-template-columns:1fr;padding-left:24px;text-align:left;}
.hero-visual{max-width:340px;margin-top:12px;}
}
/* =============================
SECCIÓN GENÉRICA (claro)
============================= */
.section{padding:104px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:14px;}
.section-head p{font-size:17px;color:#4A4A4A;margin-top:16px;line-height:1.6;}
.section.on-dark{background:var(--asfalto);color:var(--concreto);}
.section.on-dark .section-head p{color:var(--hueso);}
/* =============================
BENEFICIOS
============================= */
.benefits-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--linea);border:1px solid var(--linea);border-radius:var(--radius);
overflow:hidden;
}
.benefit{
background:var(--papel);padding:34px 26px;
}
.benefit .icon{width:34px;height:34px;color:var(--asfalto);margin-bottom:22px;}
.benefit h3{font-size:17px;margin-bottom:10px;color:var(--grafito);}
.benefit p{font-size:14.5px;line-height:1.55;color:#4A4A4A;}
@media (max-width:900px){
.benefits-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
.benefits-grid{grid-template-columns:1fr;}
}
/* =============================
CATÁLOGO / ASESORAMIENTO (bici vs monopatín)
============================= */
.split{
display:grid;grid-template-columns:1fr 1fr;
border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;
}
.split-col{
padding:52px 44px;position:relative;
display:flex;flex-direction:column;justify-content:flex-end;
min-height:420px;
}
.split-col:first-child{
background:linear-gradient(160deg,#1A1A1A,#000000);
color:var(--concreto);border-right:1px solid var(--linea-osc);
}
.split-col:last-child{
background:linear-gradient(160deg,#FFFFFF,#E8E8E8);
color:var(--grafito);
}
.split-icon{
position:absolute;top:40px;left:44px;width:64px;height:64px;opacity:.9;
}
.split-col:first-child .split-icon{color:var(--carril);}
.split-col:last-child .split-icon{color:#CC3600;}
.split-col h3{font-size:28px;margin-bottom:12px;}
.split-col p{font-size:15.5px;line-height:1.6;max-width:380px;margin-bottom:26px;}
.split-col:first-child p{color:var(--hueso);}
.split-col:last-child p{color:#55565A;}
@media (max-width:780px){
.split{grid-template-columns:1fr;}
.split-col:first-child{border-right:0;border-bottom:1px solid var(--linea-osc);}
}
/* =============================
MODELOS
============================= */
.filters{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;}
.filter-btn{
font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
padding:9px 18px;border-radius:100px;border:1px solid var(--linea);
background:transparent;color:var(--grafito);cursor:pointer;
transition:all .18s ease;
}
.filter-btn.active,.filter-btn:hover{background:var(--asfalto);color:var(--concreto);border-color:var(--asfalto);}
.models-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.model-card{
background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius);
overflow:hidden;display:flex;flex-direction:column;position:relative;
transition:transform .2s ease, box-shadow .2s ease;
}
.model-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.1);}
.model-media{
aspect-ratio:4/3;background:linear-gradient(135deg,#E8E8E8,#FFFFFF);
display:flex;align-items:center;justify-content:center;position:relative;
overflow:hidden;
}
.model-media img{
width:100%;height:100%;object-fit:cover;object-position:center;
transition:transform .3s ease;
}
.model-card:hover .model-media img{ transform:scale(1.04); }
.model-media .icon{width:56px;height:56px;color:#8A8A8A;}
.model-badge{
position:absolute;top:14px;left:14px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
background:var(--carril);color:var(--concreto);
padding:5px 10px;border-radius:100px;text-transform:uppercase;
}
.model-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.model-body h3{font-size:19px;margin-bottom:14px;}
.model-specs{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.model-specs span{
font-family:var(--mono);font-size:12px;color:#4A4A4A;
display:flex;align-items:center;gap:6px;
}
.model-specs svg{width:14px;height:14px;color:#CC3600;}
.model-desc{font-size:14px;line-height:1.5;color:#4A4A4A;margin-bottom:20px;}
.model-card .btn{margin-top:auto;}
@media (max-width:900px){ .models-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .models-grid{grid-template-columns:1fr;} }
/* Imagen de las tarjetas de modelo en el patrón de WordPress
(bloque nativo core/image, distinto del .model-media de las
páginas HTML standalone, pero con el mismo criterio visual) */
.model-card-image{
aspect-ratio:4/3;background:linear-gradient(135deg,#E8E8E8,#FFFFFF);
overflow:hidden;margin:0;
}
.model-card-image img{
width:100%;height:100%;object-fit:contain;object-position:center;
transition:transform .3s ease;
}
.model-card:hover .model-card-image img{ transform:scale(1.04); }
.models-close{
margin-top:52px;padding-top:44px;border-top:1px solid var(--linea);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.models-close p{font-size:17px;font-family:var(--display);font-weight:700;max-width:440px;}
/* =============================
CONFIANZA / CÓMO TRABAJAMOS
============================= */
.steps{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
counter-reset:step;
border-top:1px solid var(--linea-osc);
}
.step{
padding:40px 36px 0;position:relative;border-left:1px solid var(--linea-osc);
}
.step:first-child{border-left:0;}
.step::before{
counter-increment:step;
content:"0" counter(step);
font-family:var(--mono);font-size:13px;color:var(--carril);
display:block;margin-bottom:22px;letter-spacing:.05em;
}
.step h3{font-size:19px;color:var(--concreto);margin-bottom:12px;}
.step p{font-size:15px;line-height:1.6;color:var(--hueso);}
@media (max-width:780px){
.steps{grid-template-columns:1fr;}
.step{border-left:0;border-top:1px solid var(--linea-osc);padding-top:32px;}
.step:first-child{border-top:0;}
}
.trust-line{
margin-top:52px;padding-top:32px;border-top:1px solid var(--linea-osc);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.trust-line p{font-family:var(--display);font-size:20px;font-weight:700;color:var(--concreto);max-width:460px;}
/* =============================
CONTACTO / FOOTER
============================= */
.contact{
display:grid;grid-template-columns:1.1fr .9fr;gap:64px;
}
.form-card{
background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius);
padding:40px;
}
.field{margin-bottom:20px;}
.field label{
display:block;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
letter-spacing:.06em;color:#4A4A4A;margin-bottom:8px;
}
.field input,.field select{
width:100%;padding:13px 14px;border:1px solid var(--linea);border-radius:2px;
font-family:var(--body);font-size:15px;background:#fff;color:var(--grafito);
}
.field input:focus,.field select:focus{outline:2px solid var(--voltaje);outline-offset:1px;}
.contact-side{display:flex;flex-direction:column;gap:28px;justify-content:center;}
.whatsapp-box{
background:var(--asfalto);color:var(--concreto);border-radius:var(--radius);
padding:32px;
}
.whatsapp-box p{color:var(--hueso);font-size:15px;line-height:1.6;margin:12px 0 22px;}
.info-list{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:#4A4A4A;}
.info-list b{color:var(--grafito);}
@media (max-width:900px){ .contact{grid-template-columns:1fr;} }
footer{
background:var(--asfalto);color:var(--hueso);padding:48px 0 28px;
border-top:1px solid var(--linea-osc);
}
.footer-top{
display:flex;justify-content:space-between;align-items:flex-start;
flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc);
}
.footer-tagline{font-family:var(--display);font-size:15px;color:var(--concreto);margin-top:8px;max-width:280px;}
.footer-brand-note{font-size:12.5px;color:#8A8A8A;margin-top:8px;max-width:280px;}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col h4{
font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
color:#8A8A8A;margin-bottom:14px;
}
.footer-col ul{display:flex;flex-direction:column;gap:9px;font-size:14.5px;}
.footer-col a:hover{color:var(--carril);}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
padding-top:24px;font-size:13px;color:#8A8A8A;
}
.social{display:flex;gap:14px;}
.social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-osc);
display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;}
.social a:hover{border-color:var(--carril);}
.social svg{width:15px;height:15px;color:var(--concreto);}
/* WhatsApp flotante */
.wa-float{
position:fixed;bottom:26px;right:26px;z-index:55;
width:58px;height:58px;border-radius:50%;
background:#25D366;color:#FFFFFF;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(37,211,102,.35);
transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px;height:26px;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
.reveal{opacity:1;transform:none;transition:none;}
}
/* ==== from calculadora.html ==== */
/* =============================
TOKENS (mismos que la Home)
============================= */
:root{
--asfalto:#000000;
--asfalto-2:#141414;
--concreto:#FFFFFF;
--papel:#F5F5F5;
--grafito:#0A0A0A;
--hueso:#B3B3B3;
--carril:#FF4200;
--voltaje:#8C8C8C;
--linea:rgba(10,10,10,0.10);
--linea-osc:rgba(255,255,255,0.12);
--display: 'Syne', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--maxw: 1180px;
--radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;font-family:var(--body);color:var(--grafito);
background:var(--concreto);-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--voltaje);}
.eyebrow.on-light{color:#CC3600;}
.btn{
display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
font-family:var(--body);font-weight:600;font-size:15px;border:1px solid transparent;
cursor:pointer;transition:transform .15s ease, background .2s ease, border-color .2s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--carril);color:var(--concreto);}
.btn-primary:hover{background:#FF6A33;}
.btn-outline-dark{border-color:var(--linea-osc);color:var(--concreto);}
.btn-outline-dark:hover{border-color:var(--carril);}
.btn-outline-light{border-color:var(--linea);color:var(--grafito);}
.btn-outline-light:hover{border-color:var(--asfalto);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:11px 18px;font-size:13.5px;}
/* Carril de progreso (igual que la Home) */
.carril-track{position:fixed;top:0;left:0;width:5px;height:100%;
background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 10px, transparent 10px 20px);z-index:60;}
.carril-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--carril);
box-shadow:0 0 12px 1px rgba(255,66,0,.55);transition:height .08s linear;}
@media (max-width:780px){ .carril-track{width:3px;} }
/* Header (igual que la Home) */
header{position:sticky;top:0;z-index:50;background:#0a0a0a;border-bottom:1px solid var(--linea-osc);transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 16px 32px;max-width:var(--maxw);margin:0 auto;}
.brand{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--concreto);letter-spacing:.01em;white-space:nowrap;}
.brand span{color:var(--carril);}
@media (max-width:480px){ .brand{font-size:14px;} }
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{color:var(--hueso);font-size:14.5px;font-weight:500;transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--carril);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--concreto);margin:5px 0;}
@media (max-width:900px){
.nav-links{position:fixed;top:64px;left:0;right:0;background:var(--asfalto);flex-direction:column;
align-items:flex-start;padding:20px 32px 28px;gap:18px;border-bottom:1px solid var(--linea-osc);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.nav-toggle{display:block;}
.nav-cta .btn-sm-label{display:none;}
}
/* Hero de página (más compacto que el de la Home) */
.page-hero{
background:
radial-gradient(ellipse at 12% 25%, rgba(255,66,0,.16), transparent 55%),
linear-gradient(180deg, var(--asfalto) 0%, var(--asfalto-2) 100%);
color:var(--concreto);padding:72px 0 64px;
}
.page-hero h1{font-size:clamp(32px,4.6vw,50px);margin:16px 0 18px;color:var(--concreto);}
.page-hero p{font-size:17px;line-height:1.6;color:var(--hueso);max-width:560px;}
/* Secciones genéricas (mismas reglas que la Home) */
.section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(26px,3.2vw,38px);margin-top:14px;}
.section-head p{font-size:16.5px;color:#4A4A4A;margin-top:16px;line-height:1.6;}
.section.on-dark{background:var(--asfalto);color:var(--concreto);}
.section.on-dark .section-head p{color:var(--hueso);}
/* =============================
CALCULADORA
============================= */
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
@media (max-width:900px){ .calc-layout{grid-template-columns:1fr;} }
.calc-card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius);padding:36px;}
.mode-tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap;}
.mode-btn{
flex:1;min-width:100px;font-family:var(--body);font-size:13.5px;font-weight:600;
padding:12px 10px;border-radius:6px;border:1px solid var(--linea);background:transparent;
color:var(--grafito);cursor:pointer;transition:all .18s ease;text-align:center;
}
.mode-btn.active{background:var(--asfalto);color:var(--concreto);border-color:var(--asfalto);}
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
letter-spacing:.06em;color:#4A4A4A;margin-bottom:8px;}
.field .helper{font-size:12.5px;color:#6B6B6B;margin-top:6px;}
.field-input-wrap{position:relative;}
.field-input-wrap span{position:absolute;left:14px;top:50%;transform:translateY(-50%);
font-family:var(--mono);color:#8A8A8A;font-size:15px;}
.field input[type="number"]{
width:100%;padding:13px 14px 13px 30px;border:1px solid var(--linea);border-radius:2px;
font-family:var(--mono);font-size:16px;background:#fff;color:var(--grafito);
}
.field input:focus{outline:2px solid var(--carril);outline-offset:1px;}
#kmDiarios{padding-left:14px;}
.checkbox-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;cursor:pointer;user-select:none;}
.checkbox-row input{width:16px;height:16px;accent-color:var(--carril);}
.checkbox-row span{font-size:14px;color:var(--grafito);}
.calc-result{
background:var(--asfalto);color:var(--concreto);border-radius:var(--radius);
padding:36px;position:sticky;top:96px;
}
.calc-result .eyebrow{margin-bottom:14px;display:block;}
.result-num{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--carril);}
.result-sub{font-size:14.5px;color:var(--hueso);margin-top:8px;}
.result-annual{
margin-top:20px;padding-top:20px;border-top:1px solid var(--linea-osc);
font-size:15px;color:var(--concreto);
}
.result-annual strong{font-family:var(--mono);color:var(--carril);}
.bars{margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.bar-row .bar-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--hueso);
font-family:var(--mono);margin-bottom:6px;}
.bar-track{height:8px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden;}
.bar-fill{height:100%;border-radius:100px;transition:width .5s ease;}
.bar-fill.actual{background:#8A8A8A;}
.bar-fill.electrico{background:var(--carril);}
.result-note{font-size:12px;color:var(--hueso);margin-top:22px;line-height:1.5;}
@media (max-width:900px){ .calc-result{position:static;} }
/* Tabla comparativa */
.compare-table{width:100%;border-collapse:collapse;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;}
.compare-table th,.compare-table td{padding:16px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--linea);}
.compare-table th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#4A4A4A;background:#EFEFEF;}
.compare-table tr:last-child td{border-bottom:0;}
.compare-table tr.highlight td{background:rgba(255,66,0,.06);font-weight:600;}
.compare-table td.center, .compare-table th.center{text-align:center;}
.table-note{font-size:12.5px;color:#6B6B6B;margin-top:14px;}
/* Ventajas (grid de 4, mismo patrón que Beneficios en la Home) */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea-osc);border:1px solid var(--linea-osc);border-radius:var(--radius);overflow:hidden;}
.adv{background:var(--asfalto-2);padding:30px 24px;}
.adv .icon{width:30px;height:30px;color:var(--carril);margin-bottom:18px;}
.adv h3{font-size:16px;margin-bottom:8px;color:var(--concreto);}
.adv p{font-size:14px;line-height:1.5;color:var(--hueso);}
@media (max-width:900px){ .adv-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .adv-grid{grid-template-columns:1fr;} }
.trust-line{margin-top:48px;padding-top:32px;border-top:1px solid var(--linea-osc);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.trust-line p{font-family:var(--display);font-size:20px;font-weight:700;color:var(--concreto);max-width:460px;}
/* Footer (igual que la Home) */
footer{background:var(--asfalto);color:var(--hueso);padding:48px 0 28px;border-top:1px solid var(--linea-osc);}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc);}
.footer-tagline{font-family:var(--display);font-size:15px;color:var(--concreto);margin-top:8px;max-width:280px;}
.footer-brand-note{font-size:12.5px;color:#8A8A8A;margin-top:8px;max-width:280px;}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#8A8A8A;margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;font-size:14.5px;}
.footer-col a:hover{color:var(--carril);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13px;color:#8A8A8A;}
.social{display:flex;gap:14px;}
.social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-osc);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;}
.social a:hover{border-color:var(--carril);}
.social svg{width:15px;height:15px;color:var(--concreto);}
.wa-float{position:fixed;bottom:26px;right:26px;z-index:55;width:58px;height:58px;border-radius:50%;
background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(37,211,102,.35);transition:transform .2s ease;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px;height:26px;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }
/* ==== from faq.html ==== */
/* =============================
TOKENS (mismos que la Home)
============================= */
:root{
--asfalto:#000000;
--asfalto-2:#141414;
--concreto:#FFFFFF;
--papel:#F5F5F5;
--grafito:#0A0A0A;
--hueso:#B3B3B3;
--carril:#FF4200;
--voltaje:#8C8C8C;
--linea:rgba(10,10,10,0.10);
--linea-osc:rgba(255,255,255,0.12);
--display: 'Syne', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--maxw: 1180px;
--radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--grafito);background:var(--concreto);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--voltaje);}
.eyebrow.on-light{color:#CC3600;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
font-family:var(--body);font-weight:600;font-size:15px;border:1px solid transparent;
cursor:pointer;transition:transform .15s ease, background .2s ease, border-color .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--carril);color:var(--concreto);}
.btn-primary:hover{background:#FF6A33;}
.btn-outline-dark{border-color:var(--linea-osc);color:var(--concreto);}
.btn-outline-dark:hover{border-color:var(--carril);}
.btn-sm{padding:11px 18px;font-size:13.5px;}
/* Carril de progreso */
.carril-track{position:fixed;top:0;left:0;width:5px;height:100%;
background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 10px, transparent 10px 20px);z-index:60;}
.carril-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--carril);
box-shadow:0 0 12px 1px rgba(255,66,0,.55);transition:height .08s linear;}
@media (max-width:780px){ .carril-track{width:3px;} }
/* Header */
header{position:sticky;top:0;z-index:50;background:#0a0a0a;border-bottom:1px solid var(--linea-osc);transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 16px 32px;max-width:var(--maxw);margin:0 auto;}
.brand{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--concreto);letter-spacing:.01em;white-space:nowrap;}
.brand span{color:var(--carril);}
@media (max-width:480px){ .brand{font-size:14px;} }
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--hueso);font-size:14px;font-weight:500;transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--carril);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--concreto);margin:5px 0;}
@media (max-width:900px){
.nav-links{position:fixed;top:64px;left:0;right:0;background:var(--asfalto);flex-direction:column;
align-items:flex-start;padding:20px 32px 28px;gap:18px;border-bottom:1px solid var(--linea-osc);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.nav-toggle{display:block;}
.nav-cta .btn-sm-label{display:none;}
}
/* Hero de página */
.page-hero{
background:radial-gradient(ellipse at 12% 25%, rgba(255,66,0,.16), transparent 55%),
linear-gradient(180deg, var(--asfalto) 0%, var(--asfalto-2) 100%);
color:var(--concreto);padding:72px 0 64px;
}
.page-hero h1{font-size:clamp(32px,4.6vw,50px);margin:16px 0 18px;color:var(--concreto);}
.page-hero p{font-size:17px;line-height:1.6;color:var(--hueso);max-width:560px;}
.section{padding:80px 0;}
.section.tight{padding-top:0;}
/* Buscador simple (filtro por texto, sin backend) */
.faq-search{margin-bottom:44px;}
.faq-search input{
width:100%;padding:16px 20px;border:1px solid var(--linea);border-radius:100px;
font-family:var(--body);font-size:15px;background:var(--papel);color:var(--grafito);
}
.faq-search input:focus{outline:2px solid var(--carril);outline-offset:1px;}
/* Grupos y acordeón */
.faq-group{margin-bottom:52px;}
.faq-group:last-child{margin-bottom:0;}
.faq-group-title{
font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
color:#CC3600;margin-bottom:6px;display:block;
}
.faq-item{border-bottom:1px solid var(--linea);}
.faq-item summary{
list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;
align-items:center;gap:20px;font-weight:600;font-size:16px;font-family:var(--body);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{width:18px;height:18px;position:relative;flex:none;}
.faq-plus::before,.faq-plus::after{content:'';position:absolute;background:var(--carril);border-radius:2px;}
.faq-plus::before{width:12px;height:2px;top:8px;left:3px;}
.faq-plus::after{width:2px;height:12px;top:3px;left:8px;transition:opacity .2s ease;}
.faq-item[open] .faq-plus::after{opacity:0;}
.faq-item p{padding:0 34px 24px 0;color:#4A4A4A;font-size:14.5px;line-height:1.65;max-width:660px;}
.faq-item[data-hide="true"]{display:none;}
.faq-empty{display:none;padding:32px 0;color:#6B6B6B;font-size:14.5px;}
.faq-empty.show{display:block;}
.cta-band{
margin-top:56px;padding:36px;border-radius:var(--radius);
background:var(--asfalto);color:var(--concreto);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band p{font-family:var(--display);font-size:19px;font-weight:700;max-width:420px;}
.cta-band span{display:block;font-family:var(--body);font-size:14px;font-weight:400;color:var(--hueso);margin-top:6px;}
footer{background:var(--asfalto);color:var(--hueso);padding:48px 0 28px;border-top:1px solid var(--linea-osc);}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc);}
.footer-tagline{font-family:var(--display);font-size:15px;color:var(--concreto);margin-top:8px;max-width:280px;}
.footer-brand-note{font-size:12.5px;color:#8A8A8A;margin-top:8px;max-width:280px;}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#8A8A8A;margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;font-size:14.5px;}
.footer-col a:hover{color:var(--carril);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13px;color:#8A8A8A;}
.social{display:flex;gap:14px;}
.social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-osc);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;}
.social a:hover{border-color:var(--carril);}
.social svg{width:15px;height:15px;color:var(--concreto);}
.wa-float{position:fixed;bottom:26px;right:26px;z-index:55;width:58px;height:58px;border-radius:50%;
background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(37,211,102,.35);transition:transform .2s ease;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px;height:26px;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }
/* ==== from distribuidores.html ==== */
:root{
--asfalto:#000000;
--asfalto-2:#141414;
--concreto:#FFFFFF;
--papel:#F5F5F5;
--grafito:#0A0A0A;
--hueso:#B3B3B3;
--carril:#FF4200;
--voltaje:#8C8C8C;
--linea:rgba(10,10,10,0.10);
--linea-osc:rgba(255,255,255,0.12);
--display: 'Syne', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--maxw: 1180px;
--radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--grafito);background:var(--concreto);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--voltaje);}
.eyebrow.on-light{color:#CC3600;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
font-family:var(--body);font-weight:600;font-size:15px;border:1px solid transparent;
cursor:pointer;transition:transform .15s ease, background .2s ease, border-color .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--carril);color:var(--concreto);}
.btn-primary:hover{background:#FF6A33;}
.btn-outline-dark{border-color:var(--linea-osc);color:var(--concreto);}
.btn-outline-dark:hover{border-color:var(--carril);}
.btn-outline-light{border-color:var(--linea);color:var(--grafito);}
.btn-outline-light:hover{border-color:var(--asfalto);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:11px 18px;font-size:13.5px;}
.carril-track{position:fixed;top:0;left:0;width:5px;height:100%;
background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 10px, transparent 10px 20px);z-index:60;}
.carril-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--carril);
box-shadow:0 0 12px 1px rgba(255,66,0,.55);transition:height .08s linear;}
@media (max-width:780px){ .carril-track{width:3px;} }
header{position:sticky;top:0;z-index:50;background:#0a0a0a;border-bottom:1px solid var(--linea-osc);transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 16px 32px;max-width:var(--maxw);margin:0 auto;}
.brand{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--concreto);letter-spacing:.01em;white-space:nowrap;}
.brand span{color:var(--carril);}
@media (max-width:480px){ .brand{font-size:14px;} }
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--hueso);font-size:14px;font-weight:500;transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--carril);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--concreto);margin:5px 0;}
@media (max-width:900px){
.nav-links{position:fixed;top:64px;left:0;right:0;background:var(--asfalto);flex-direction:column;
align-items:flex-start;padding:20px 32px 28px;gap:18px;border-bottom:1px solid var(--linea-osc);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.nav-toggle{display:block;}
.nav-cta .btn-sm-label{display:none;}
}
.page-hero{
background:radial-gradient(ellipse at 12% 25%, rgba(255,66,0,.16), transparent 55%),
linear-gradient(180deg, var(--asfalto) 0%, var(--asfalto-2) 100%);
color:var(--concreto);padding:72px 0 64px;
}
.page-hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;}
.page-hero h1{font-size:clamp(30px,4.2vw,46px);margin:16px 0 18px;color:var(--concreto);}
.page-hero p{font-size:16.5px;line-height:1.6;color:var(--hueso);max-width:520px;}
.page-hero-note{
font-family:var(--mono);font-size:12.5px;color:var(--hueso);border-left:2px solid var(--carril);
padding-left:16px;max-width:280px;line-height:1.6;
}
@media (max-width:820px){ .page-hero .wrap{grid-template-columns:1fr;} }
.section{padding:88px 0;}
.section.tight{padding-top:0;}
.section-head{max-width:620px;margin-bottom:44px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px);margin-top:14px;}
.section-head p{font-size:16px;color:#4A4A4A;margin-top:16px;line-height:1.6;}
.section.on-dark{background:var(--asfalto);color:var(--concreto);}
.section.on-dark .section-head p{color:var(--hueso);}
/* Ventajas de ser distribuidor */
.dist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;}
.dist-card{background:var(--papel);padding:30px 24px;}
.dist-card .icon{width:30px;height:30px;color:var(--asfalto);margin-bottom:18px;}
.dist-card h3{font-size:16px;margin-bottom:8px;}
.dist-card p{font-size:14px;line-height:1.5;color:#4A4A4A;}
@media (max-width:900px){ .dist-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .dist-grid{grid-template-columns:1fr;} }
/* Cómo funciona - pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:step;border-top:1px solid var(--linea-osc);}
.step{padding:36px 32px 0;position:relative;border-left:1px solid var(--linea-osc);}
.step:first-child{border-left:0;}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--mono);font-size:13px;color:var(--carril);display:block;margin-bottom:18px;}
.step h3{font-size:17px;color:var(--concreto);margin-bottom:10px;}
.step p{font-size:14.5px;line-height:1.6;color:var(--hueso);}
@media (max-width:780px){
.steps{grid-template-columns:1fr;}
.step{border-left:0;border-top:1px solid var(--linea-osc);padding-top:28px;}
.step:first-child{border-top:0;}
}
/* Formulario + contacto */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;}
.form-card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius);padding:38px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#4A4A4A;margin-bottom:8px;}
.field input,.field select,.field textarea{
width:100%;padding:13px 14px;border:1px solid var(--linea);border-radius:2px;
font-family:var(--body);font-size:15px;background:#fff;color:var(--grafito);resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--carril);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
.contact-side{display:flex;flex-direction:column;gap:22px;}
.info-card{background:var(--asfalto);color:var(--concreto);border-radius:var(--radius);padding:30px;}
.info-card .eyebrow{margin-bottom:10px;display:block;}
.info-card p{color:var(--hueso);font-size:14.5px;line-height:1.6;margin-bottom:18px;}
.info-card .btn{width:100%;justify-content:center;margin-bottom:10px;}
.info-card .btn:last-child{margin-bottom:0;}
@media (max-width:900px){ .contact{grid-template-columns:1fr;} }
footer{background:var(--asfalto);color:var(--hueso);padding:48px 0 28px;border-top:1px solid var(--linea-osc);}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc);}
.footer-tagline{font-family:var(--display);font-size:15px;color:var(--concreto);margin-top:8px;max-width:280px;}
.footer-brand-note{font-size:12.5px;color:#8A8A8A;margin-top:8px;max-width:280px;}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#8A8A8A;margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;font-size:14.5px;}
.footer-col a:hover{color:var(--carril);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13px;color:#8A8A8A;}
.social{display:flex;gap:14px;}
.social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-osc);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;}
.social a:hover{border-color:var(--carril);}
.social svg{width:15px;height:15px;color:var(--concreto);}
.wa-float{position:fixed;bottom:26px;right:26px;z-index:55;width:58px;height:58px;border-radius:50%;
background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(37,211,102,.35);transition:transform .2s ease;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px;height:26px;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }
/* ==== from manuales.html ==== */
:root{
--asfalto:#000000;
--asfalto-2:#141414;
--concreto:#FFFFFF;
--papel:#F5F5F5;
--grafito:#0A0A0A;
--hueso:#B3B3B3;
--carril:#FF4200;
--voltaje:#8C8C8C;
--linea:rgba(10,10,10,0.10);
--linea-osc:rgba(255,255,255,0.12);
--display: 'Syne', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--maxw: 1180px;
--radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--grafito);background:var(--concreto);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--voltaje);}
.eyebrow.on-light{color:#CC3600;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
font-family:var(--body);font-weight:600;font-size:15px;border:1px solid transparent;
cursor:pointer;transition:transform .15s ease, background .2s ease, border-color .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--carril);color:var(--concreto);}
.btn-primary:hover{background:#FF6A33;}
.btn-outline-light{border-color:var(--linea);color:var(--grafito);}
.btn-outline-light:hover{border-color:var(--asfalto);}
.btn-sm{padding:11px 18px;font-size:13.5px;}
.carril-track{position:fixed;top:0;left:0;width:5px;height:100%;
background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 10px, transparent 10px 20px);z-index:60;}
.carril-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--carril);
box-shadow:0 0 12px 1px rgba(255,66,0,.55);transition:height .08s linear;}
@media (max-width:780px){ .carril-track{width:3px;} }
header{position:sticky;top:0;z-index:50;background:#0a0a0a;border-bottom:1px solid var(--linea-osc);transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 16px 32px;max-width:var(--maxw);margin:0 auto;}
.brand{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--concreto);letter-spacing:.01em;white-space:nowrap;}
.brand span{color:var(--carril);}
@media (max-width:480px){ .brand{font-size:14px;} }
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--hueso);font-size:14px;font-weight:500;transition:color .2s ease;}
.nav-links a:hover{color:var(--carril);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--concreto);margin:5px 0;}
@media (max-width:900px){
.nav-links{position:fixed;top:64px;left:0;right:0;background:var(--asfalto);flex-direction:column;
align-items:flex-start;padding:20px 32px 28px;gap:18px;border-bottom:1px solid var(--linea-osc);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.nav-toggle{display:block;}
.nav-cta .btn-sm-label{display:none;}
}
.page-hero{
background:radial-gradient(ellipse at 12% 25%, rgba(255,66,0,.14), transparent 55%),
linear-gradient(180deg, var(--asfalto) 0%, var(--asfalto-2) 100%);
color:var(--concreto);padding:72px 0 64px;
}
.page-hero h1{ font-size:clamp(32px,4.6vw,50px);margin:16px 0 18px;color:var(--concreto); }
.page-hero p{ font-size:17px;line-height:1.6;color:var(--hueso);max-width:560px; }
.section{ padding:80px 0; }
.section.tight{ padding-top:0; }
.manual-list{ display:flex;flex-direction:column;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden; }
.manual-row{
background:var(--papel);padding:22px 28px;
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.manual-info{ display:flex;align-items:center;gap:16px; }
.manual-icon{
width:44px;height:44px;border-radius:8px;background:transparent;
display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;
}
.manual-info h3{ font-size:17px; }
.manual-info p{ font-size:13.5px;color:#6B6B6B;margin-top:3px; }
.cta-band{
margin-top:52px;padding:36px;border-radius:var(--radius);
background:var(--asfalto);color:var(--concreto);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band p{ font-family:var(--display);font-size:19px;font-weight:700;max-width:440px; }
.cta-band span{ display:block;font-family:var(--body);font-size:14px;font-weight:400;color:var(--hueso);margin-top:6px; }
footer{ background:var(--asfalto);color:var(--hueso);padding:48px 0 28px;border-top:1px solid var(--linea-osc); }
.footer-top{ display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc); }
.footer-tagline{ font-family:var(--display);font-size:15px;color:var(--concreto);margin-top:8px;max-width:280px; }
.footer-brand-note{ font-size:12.5px;color:var(--hueso);margin-top:8px;max-width:280px; }
.footer-links{ display:flex;gap:48px;flex-wrap:wrap; }
.footer-col h4{ font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--hueso);margin-bottom:14px; }
.footer-col ul{ display:flex;flex-direction:column;gap:9px;font-size:14.5px; }
.footer-col a:hover{ color:var(--carril); }
.footer-bottom{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13px;color:var(--hueso); }
.social{ display:flex;gap:14px; }
.social a{ width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-osc);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease; }
.social a:hover{ border-color:var(--carril); }
.social svg{ width:15px;height:15px;color:var(--concreto); }
.wa-float{ position:fixed;bottom:26px;right:26px;z-index:55;width:58px;height:58px;border-radius:50%;
background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(37,211,102,.35);transition:transform .2s ease; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:26px;height:26px; }
.reveal{ opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1;transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }
@media (max-width:600px){
.manual-row{ flex-direction:column;align-items:flex-start; }
.manual-row .btn{ width:100%;justify-content:center; }
}
/* ==== from modelo-c93.html ==== */
:root{
--asfalto:#000000;
--asfalto-2:#141414;
--concreto:#FFFFFF;
--papel:#F5F5F5;
--grafito:#0A0A0A;
--hueso:#B3B3B3;
--carril:#FF4200;
--voltaje:#8C8C8C;
--linea:rgba(10,10,10,0.10);
--linea-osc:rgba(255,255,255,0.12);
--display: 'Syne', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--maxw: 1180px;
--radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--grafito);background:var(--concreto);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--voltaje);}
.eyebrow.on-light{color:#CC3600;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
font-family:var(--body);font-weight:600;font-size:15px;border:1px solid transparent;
cursor:pointer;transition:transform .15s ease, background .2s ease, border-color .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--carril);color:var(--concreto);}
.btn-primary:hover{background:#FF6A33;}
.btn-outline-light{border-color:var(--linea);color:var(--grafito);}
.btn-outline-light:hover{border-color:var(--asfalto);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:11px 18px;font-size:13.5px;}
.carril-track{position:fixed;top:0;left:0;width:5px;height:100%;
background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 10px, transparent 10px 20px);z-index:60;}
.carril-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--carril);
box-shadow:0 0 12px 1px rgba(255,66,0,.55);transition:height .08s linear;}
@media (max-width:780px){ .carril-track{width:3px;} }
header{position:sticky;top:0;z-index:50;background:#0a0a0a;border-bottom:1px solid var(--linea-osc);transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 16px 32px;max-width:var(--maxw);margin:0 auto;}
.brand{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--concreto);letter-spacing:.01em;white-space:nowrap;}
.brand span{color:var(--carril);}
@media (max-width:480px){ .brand{font-size:14px;} }
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--hueso);font-size:14px;font-weight:500;transition:color .2s ease;}
.nav-links a:hover{color:var(--carril);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--concreto);margin:5px 0;}
@media (max-width:900px){
.nav-links{position:fixed;top:64px;left:0;right:0;background:var(--asfalto);flex-direction:column;
align-items:flex-start;padding:20px 32px 28px;gap:18px;border-bottom:1px solid var(--linea-osc);
transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;}
.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.nav-toggle{display:block;}
.nav-cta .btn-sm-label{display:none;}
}
/* Breadcrumb */
.breadcrumb{
padding:16px 0;font-family:var(--mono);font-size:12.5px;color:var(--voltaje);
display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.breadcrumb a:hover{ color:var(--carril); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--grafito); }
/* Hero de producto */
.product-hero{ padding:20px 0 72px; }
.product-hero .wrap{
display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.product-media{
background:linear-gradient(135deg,#F5F5F5,#E8E8E8);
border-radius:var(--radius);overflow:hidden;
aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
}
.product-media img{ width:100%;height:100%;object-fit:cover; }
.product-badge{
display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
background:var(--carril);color:var(--concreto);padding:6px 14px;border-radius:100px;margin-bottom:16px;
}
.product-info h1{ font-size:clamp(32px,4vw,46px);margin-bottom:14px; }
.product-info .lead{ font-size:17px;line-height:1.6;color:#4A4A4A;margin-bottom:26px;max-width:460px; }
.quick-specs{ display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px; }
.quick-specs span{
display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;
background:var(--papel);border:1px solid var(--linea);padding:9px 14px;border-radius:100px;
}
.product-ctas{ display:flex;gap:14px;flex-wrap:wrap; }
/* Secciones genéricas */
.section{ padding:80px 0; }
.section.tight{ padding-top:0; }
.section-head{ max-width:620px;margin-bottom:44px; }
.section-head h2{ font-size:clamp(26px,3.2vw,36px);margin-top:14px; }
.section-head p{ font-size:16px;color:#4A4A4A;margin-top:16px;line-height:1.6; }
.section.on-dark{ background:var(--asfalto);color:var(--concreto); }
.section.on-dark .section-head p{ color:var(--hueso); }
/* Grilla de especificaciones */
.specs-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--linea);border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;
}
.spec-card{ background:var(--papel);padding:28px 24px; }
.spec-card .spec-icon{ font-size:24px;margin-bottom:16px;display:block; }
.spec-card .spec-value{ font-family:var(--display);font-weight:800;font-size:20px;color:var(--grafito);margin-bottom:6px; }
.spec-card .spec-label{ font-size:13px;color:#6B6B6B;line-height:1.4; }
@media (max-width:900px){ .specs-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .specs-grid{grid-template-columns:1fr;} }
.specs-note{ font-size:12.5px;color:#6B6B6B;margin-top:18px; }
/* Ficha técnica completa (desplegable) */
.tech-panel{ border:1px solid var(--linea);border-radius:var(--radius);background:var(--papel); }
.tech-panel summary{
list-style:none;cursor:pointer;padding:28px 32px;
display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.tech-panel summary::-webkit-details-marker{ display:none; }
.tech-panel summary h2{ font-size:22px;margin-top:6px; }
.tech-plus{ width:20px;height:20px;position:relative;flex:none; }
.tech-plus::before,.tech-plus::after{ content:'';position:absolute;background:var(--carril);border-radius:2px; }
.tech-plus::before{ width:14px;height:2px;top:9px;left:3px; }
.tech-plus::after{ width:2px;height:14px;top:3px;left:9px;transition:opacity .2s ease; }
.tech-panel[open] .tech-plus::after{ opacity:0; }
.tech-body{ padding:0 32px 32px; }
.tech-group{ margin-bottom:28px; }
.tech-group:last-child{ margin-bottom:0; }
.tech-group h3{
font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
color:#CC3600;margin-bottom:12px;
}
.tech-table{ width:100%;border-collapse:collapse; }
.tech-table tr{ border-bottom:1px solid var(--linea); }
.tech-table tr:last-child{ border-bottom:0; }
.tech-table td{ padding:11px 4px;font-size:14.5px; }
.tech-table td:first-child{ color:#6B6B6B;width:55%; }
.tech-table td:last-child{ color:var(--grafito);font-weight:600;text-align:right; }
@media (max-width:600px){
.tech-panel summary{ padding:22px 20px; }
.tech-body{ padding:0 20px 24px; }
}
/* Para quién es */
.fit-block{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; }
.fit-block p{ font-size:16px;line-height:1.7;color:var(--hueso); }
.fit-list{ display:flex;flex-direction:column;gap:14px; }
.fit-item{ display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--concreto); }
.fit-item .dot{ flex:none;width:8px;height:8px;border-radius:50%;background:var(--carril);margin-top:7px; }
@media (max-width:820px){ .fit-block{grid-template-columns:1fr;} }
/* CTA final */
.cta-band{
margin-top:0;padding:36px;border-radius:var(--radius);
background:var(--papel);border:1px solid var(--linea);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band p{ font-family:var(--display);font-size:19px;font-weight:700;max-width:420px; }
/* Otros modelos */
.other-models{ display:flex;gap:14px;flex-wrap:wrap; }
.other-models a{
font-family:var(--mono);font-size:13px;padding:10px 18px;border-radius:100px;
border:1px solid var(--linea);color:var(--grafito);transition:all .18s ease;
}
.other-models a:hover{ background:var(--asfalto);color:var(--concreto);border-color:var(--asfalto); }
footer{ background:var(--asfalto);color:var(--hueso);padding:48px 0 28px;border-top:1px solid var(--linea-osc); }
.footer-top{ display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc); }
.footer-tagline{ font-family:var(--display);font-size:15px;color:var(--concreto);margin-top:8px;max-width:280px; }
.footer-brand-note{ font-size:12.5px;color:var(--hueso);margin-top:8px;max-width:280px; }
.footer-links{ display:flex;gap:48px;flex-wrap:wrap; }
.footer-col h4{ font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--hueso);margin-bottom:14px; }
.footer-col ul{ display:flex;flex-direction:column;gap:9px;font-size:14.5px; }
.footer-col a:hover{ color:var(--carril); }
.footer-bottom{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13px;color:var(--hueso); }
.social{ display:flex;gap:14px; }
.social a{ width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-osc);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease; }
.social a:hover{ border-color:var(--carril); }
.social svg{ width:15px;height:15px;color:var(--concreto); }
.wa-float{ position:fixed;bottom:26px;right:26px;z-index:55;width:58px;height:58px;border-radius:50%;
background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(37,211,102,.35);transition:transform .2s ease; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:26px;height:26px; }
.reveal{ opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1;transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }
@media (max-width:820px){
.product-hero .wrap{ grid-template-columns:1fr; }
}
/* =============================
Compatibilidad con bloques nativos usados en los patrones
(Detalles, Tabla, Grupo con clases propias)
============================= */
.wp-block-details{
border:1px solid var(--linea);border-radius:6px;background:var(--papel);
padding:28px 32px 32px;margin-bottom:14px;
}
.wp-block-details summary{
cursor:pointer;font-weight:700;font-size:17px;
padding:2px 0 4px;
}
.wp-block-details summary:hover{ color:var(--carril); }
/* Título de cada grupo (Motor y batería, Rendimiento, etc.) */
.wp-block-details h3{
font-size:14px;text-transform:uppercase;letter-spacing:.04em;
color:var(--carril);margin:32px 0 14px;
display:flex;align-items:center;gap:8px;
}
.wp-block-details h3:first-of-type{ margin-top:26px; }
/* Cada tabla como su propia tarjeta blanca, separada del fondo gris del panel */
.wp-block-details .wp-block-table{
margin:0 0 8px;background:#FFFFFF;border:1px solid var(--linea);
border-radius:6px;overflow:hidden;
}
.wp-block-details .wp-block-table table{ width:100%;border-collapse:collapse; }
.wp-block-details .wp-block-table tr{ border-bottom:1px solid var(--linea); }
.wp-block-details .wp-block-table tr:last-child{ border-bottom:0; }
.wp-block-details .wp-block-table tr:nth-child(even){ background:rgba(0,0,0,.02); }
.wp-block-details .wp-block-table td{
padding:13px 18px;font-size:14px;border-bottom:0;
}
.wp-block-details .wp-block-table td:first-child{ color:#6B6B6B;width:50%; }
.wp-block-details .wp-block-table td:last-child{ font-weight:700;text-align:right;color:var(--grafito); }
.wp-block-details > p{ font-size:13px;color:#6B6B6B;margin-top:18px;line-height:1.6; }
.faq-search{ margin-bottom:36px; }
.faq-search input{
width:100%;padding:16px 20px;border:1px solid var(--linea);border-radius:100px;
font-family:var(--body);font-size:15px;background:var(--papel);color:var(--grafito);
}
.cta-band{
padding:32px;border-radius:4px;background:var(--papel);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.manual-row{
background:var(--papel);border:1px solid var(--linea);border-radius:4px;
padding:20px 26px;margin-bottom:1px;
display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;
}
/* Foto: tamaño fijo, nunca se achica */
.manual-row > .manual-icon,
.manual-row > .wp-block-image{
flex:0 0 auto;
}
/* Nombre del modelo: ancho propio, no se estira */
.manual-row > .wp-block-heading{
flex:0 0 auto;
white-space:nowrap;
}
/* Descripción: ocupa el espacio libre y ajusta su propio texto */
.manual-row > p:not(.wp-block-heading){
flex:1 1 220px;
min-width:150px;
margin:0;
}
/* Botón: siempre pegado a la derecha, nunca salta de línea */
.manual-row > .wp-block-buttons{
flex:0 0 auto;
margin-left:auto;
}
@media (max-width:700px){
.manual-row{ flex-direction:column;align-items:flex-start; }
.manual-row > .wp-block-buttons{ margin-left:0;width:100%; }
.manual-row > .wp-block-buttons .wp-block-button{ width:100%; }
}
.breadcrumb{ font-family:var(--mono);font-size:12.5px;color:var(--voltaje);padding:16px 24px 0; }
.breadcrumb a{ color:var(--voltaje); }
.product-hero{ padding:0 24px 40px;align-items:center; }
.product-media img{ border-radius:4px; }
.product-badge{
display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
background:var(--carril);color:var(--concreto);padding:6px 14px;border-radius:100px;margin-bottom:12px;
}
.quick-specs{ display:flex;gap:10px;flex-wrap:wrap;margin:18px 0; }
.quick-specs span{
display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;
background:var(--papel);border:1px solid var(--linea);padding:9px 14px;border-radius:100px;
}
.specs-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--linea);border:1px solid var(--linea);border-radius:4px;overflow:hidden;margin:28px 0;
}
.spec-card{ background:var(--papel);padding:24px 20px; }
.spec-card .spec-icon{ font-size:22px;margin-bottom:14px;display:block; }
.spec-card .spec-value{ font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:4px; }
.spec-card .spec-label{ font-size:12.5px;color:#6B6B6B; }
@media (max-width:900px){ .specs-grid{grid-template-columns:1fr 1fr;} .product-hero{grid-template-columns:1fr;} }
@media (max-width:560px){ .specs-grid{grid-template-columns:1fr;} }
/* =============================
FIX: ancho máximo y centrado del contenido
(estas clases se usan directo en los Group de los patrones,
sin un div ".wrap" adentro, así que necesitan su propio padding
lateral que se achique en pantallas chicas y las mantenga
centradas en pantallas grandes)
============================= */
.site-hero,
.site-section,
.page-hero,
.product-hero,
.breadcrumb{
padding-left: max(24px, calc((100% - 1180px) / 2)) !important;
padding-right: max(24px, calc((100% - 1180px) / 2)) !important;
box-sizing: border-box;
}
/* .site-hero y .site-section (usadas solo en el patrón de la Home)
nunca tuvieron padding vertical propio — por eso todo se veía pegado
contra la sección anterior. Lo agregamos acá, igual que .hero/.section
en las páginas HTML standalone. */
.site-hero{
padding-top: 72px !important;
padding-bottom: 64px !important;
}
.site-section{
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* La miga de pan y el hero de producto no tenían ningún padding-top propio */
.breadcrumb{ padding-top:16px; }
/* Fondo del Hero: dos fotos (ciudad / naturaleza) en crossfade automático,
con overlay oscuro encima para que el texto se siga leyendo bien.
IMPORTANTE: se usa padding-top (no margin-top) a propósito. Un margin-top
en el primer hijo puede "colapsar" hacia el padre y terminar empujando
TODO el bloque .site-hero hacia abajo (dejando ver el fondo blanco de la
página arriba de la foto) — el padding nunca tiene ese problema. La foto
de fondo cubre toda la caja (incluida el área de padding), así que no hay
riesgo de que ese espacio se vea vacío/de otro color. */
.site-hero{
padding-top: 72px !important;
position: relative;
overflow: hidden;
min-height: 560px;
transform: translateZ(0);
-webkit-transform: translateZ(0);
isolation: isolate;
}
/* Anula del todo el color de fondo negro sólido que WordPress le pone al
bloque (clase has-negro-background-color, puesta desde el editor).
Selector con 2 clases para ganarle en especificidad a esa regla, aunque
ambas usen !important. Así, cualquier hueco mínimo de renderizado entre
las capas de la foto no deja ver negro por casualidad. */
.site-hero.has-negro-background-color{
background-color: #1c1a17 !important;
}
/* CAUSA RAÍZ REAL DE LA "FRANJA": WordPress le agrega automáticamente
margin-top a cualquier hijo de un bloque que no sea el primero (regla
global de espaciado entre bloques). Como .hero-bg-slides no es el primer
hijo del Hero (el texto va antes en el HTML), heredaba ~24px de margen
que, al ser position:absolute, se SUMABA al top:-2px en vez de ser
ignorado — corriendo la foto 22px hacia abajo y dejando ver el fondo del
bloque en ese hueco. Se neutraliza acá con margin:0 en todo lo que
flota sobre el fondo del Hero. */
.hero-bg-slides,
.hero-bg-dots,
.site-hero > .hero-stat{
margin: 0 !important;
}
.site-hero > *:not(.hero-bg-slides){
position: relative;
z-index: 2;
}
.hero-bg-slides{
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;
z-index: 0;
}
.hero-bg-slide{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
opacity: 0;
transition: opacity 1.8s ease;
}
.hero-bg-slide.is-active{
opacity: 1;
}
/* Botones para cambiar manualmente entre las fotos del hero (ciudad / naturaleza).
Van en el flujo normal del texto (no flotando sobre la foto), así nunca
se superponen con el párrafo de envío/cuotas sin importar cuánto texto
haya arriba. */
.hero-bg-dots{
display: flex;
gap: 16px;
margin-top: 22px !important;
}
.hero-bg-dot{
width: 34px;
height: 34px;
padding: 8px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,.4);
color: rgba(255,255,255,.75);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hero-bg-dot svg{ width: 100%; height: 100%; }
.hero-bg-dot:hover{ background: rgba(0,0,0,.6); color: #fff; }
.hero-bg-dot.is-active{
background: var(--carril);
color: #fff;
transform: scale(1.08);
}
@media (max-width:900px){
.hero-bg-dots{ gap: 12px; margin-top: 18px !important; }
.hero-bg-dot{ width: 30px; height: 30px; padding: 7px; }
}
.site-hero::before{
content: '';
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;
z-index: 1;
background-image:
radial-gradient(ellipse at 15% 20%, rgba(255,66,0,.14), transparent 55%),
radial-gradient(ellipse at 85% 75%, rgba(140,140,140,.16), transparent 55%),
linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.15) 100%);
}
@media (max-width:900px){
.site-hero{ min-height: 620px; }
}
/* Panel flotante "Tu impacto real", semitransparente sobre el fondo */
.hero-stat{
position: absolute;
top: 32px;
right: max(24px, calc((100% - 1180px) / 2));
width: 240px;
z-index: 3;
background:rgba(0,0,0,.55) !important;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border-radius: 10px;
padding: 22px 18px !important;
}
@media (max-width:900px){
.hero-stat{
position: static;
width: 100%;
margin-top: 28px;
}
}
/* =============================
FIX: alineación del contenido dentro de las secciones
Gutenberg centra automáticamente los bloques hijos de un Group
con layout "constrained" (los angosta a ~740px y los centra).
Nuestras secciones (.site-hero, .site-section, .page-hero,
.product-hero) están pensadas para que el texto ocupe todo el
ancho disponible, alineado a la izquierda — no centrado.
============================= */
.site-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.site-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.page-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.product-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* FIX: el reset global de "ul{list-style:none}" (pensado para menús de
navegación) también le sacaba las viñetas al bloque nativo "Lista"
que usamos en el contenido (ej. "¿Para quién es este modelo?").
Se la devolvemos específicamente a ese bloque. */
.wp-block-list{
list-style: disc !important;
padding-left: 1.3em !important;
margin: 0 0 1em !important;
}
.wp-block-list li{
margin-bottom: 10px;
padding-left: 4px;
}
/* Tarjeta de modelo clickeable completa: un link invisible cubre toda
la tarjeta y lleva a la ficha del producto. El botón de WhatsApp
queda por encima (z-index) para seguir funcionando con su propio link. */
.model-card .card-link-overlay{
position:absolute;inset:0;z-index:1;
}
.model-card .wp-block-buttons{
position:relative;z-index:2;
}
/* FIX: el header (.nav) usaba su propio ancho máximo + padding fijo
(32px), distinto del cálculo que usan las secciones del contenido
(.site-hero, .site-section, etc.), por eso el logo y el título del
Hero no quedaban alineados verticalmente. Unificamos ambos al mismo
cálculo de margen lateral. */
.nav{
max-width:none !important;
padding-left: max(24px, calc((100% - 1180px) / 2)) !important;
padding-right: max(24px, calc((100% - 1180px) / 2)) !important;
}
/* Mismo ajuste para el .wrap del footer, que tenía el mismo desfase */
footer .wrap{
max-width:none !important;
padding-left: max(24px, calc((100% - 1180px) / 2)) !important;
padding-right: max(24px, calc((100% - 1180px) / 2)) !important;
}
/* FIX: WordPress le agrega un margen propio por defecto a los bloques
Group (además del padding que ya le dimos a .site-hero/.site-section),
y eso duplicaba el espacio entre secciones. Lo anulamos. */
.site-hero,
.site-section{
margin-top:0 !important;
margin-bottom:0 !important;
}
/* Empalme a prueba de balas entre el header y el Hero: lo subimos 2px para
que se solape apenas con el borde inferior del header, así ningún
redondeo de píxeles del navegador puede dejar una línea visible entre
los dos. */
.site-hero{
margin-top: -2px !important;
}
/* Teaser de modelos en la Home (reemplaza la grilla completa, que
ahora vive en su propia página /modelos/) */
.models-teaser{
display:flex;align-items:center;gap:32px;flex-wrap:wrap;
background:var(--papel);border:1px solid var(--linea);border-radius:4px;
padding:28px;margin:24px 0;
}
.models-teaser-photos{ display:flex;flex:none; }
.models-teaser-photos img{
width:96px;height:96px;object-fit:cover;border-radius:8px;
border:3px solid var(--papel);background:#fff;
margin-left:-24px;box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.models-teaser-photos img:first-child{ margin-left:0; }
.models-teaser-body{ flex:1;min-width:220px; }
.models-teaser-body p{ font-size:15.5px;margin:0; }
@media (max-width:600px){
.models-teaser{ flex-direction:column;align-items:flex-start; }
}
/* Galería de fotos con lightbox (AR-18, HT4 PRO, HT4 MAX) */
.gallery-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.gallery-thumb{
aspect-ratio:1/1;border-radius:8px;overflow:hidden;cursor:pointer;
border:1px solid var(--linea);background:#fff;position:relative;
}
.gallery-thumb img{
width:100%;height:100%;object-fit:cover;transition:transform .25s ease;
}
.gallery-thumb:hover img{ transform:scale(1.06); }
@media (max-width:700px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
/* Isologo (bici) abajo a la izquierda del nombre. BICIS naranja, ELÉCTRICAS blanco.
Importante: el selector de color usa ".brand-text span" (no ".brand span") para
no pisar el color del propio .brand-text, que también es un y por lo
tanto también matchearía un selector más genérico. */
.brand{
display:flex !important;flex-direction:column !important;align-items:flex-start !important;
gap:3px !important;
color:var(--carril) !important;
}
.brand-icon{ width:20px;height:auto;color:var(--carril); }
.brand-text span{ color:var(--concreto) !important; }
/* Encabezado de página (page-hero) invertido: fondo claro, texto oscuro */
.page-hero{
background: radial-gradient(ellipse at 12% 25%, rgba(255,66,0,.08), transparent 55%), var(--concreto) !important;
color: var(--grafito) !important;
border-bottom: 1px solid var(--linea);
}
.page-hero h1, .page-hero .wp-block-heading{ color: var(--grafito) !important; }
.page-hero p{ color: #4A4A4A !important; }
.page-hero .eyebrow{ color: var(--carril) !important; }
/* Fotos de las tarjetas de modelo: tamaño completo, sin recortar.
(El padding vive solo acá — el contenedor .model-card-image ya no
agrega padding propio, para no sumarlo dos veces y achicar la foto
de más). */
.model-card-image img{
object-fit: contain !important;
padding: 16px;
box-sizing: border-box;
}
/* Panel "Tu impacto real": contenido interno (la posición/tamaño del
panel en sí vive en la regla .hero-stat definida más arriba) */
.hero-stat{
display:flex;flex-direction:column;justify-content:center;
}
.hero-stat-list{ display:flex;flex-direction:column;gap:18px; }
.hero-stat-item{ display:flex;flex-direction:column;gap:6px; }
.hsi-num{ font-size:19px !important; }
.hsi-label{ font-size:11.5px !important;max-width:none !important; }
.hero-stat-tagline{
font-family:var(--display);font-weight:700;font-size:13px;line-height:1.4;
margin-top:18px;padding-top:16px;border-top:1px solid var(--linea-osc);
color:var(--concreto);
}
.hero-perks{ margin-top:18px;font-size:13.5px;color:var(--hueso);font-family:var(--mono); }
/* Más contraste para el párrafo del Hero: el gris claro se leía poco
contra la foto de fondo. Casi blanco + sombra sutil para que se lea
bien sin importar qué parte de la foto quede detrás. */
.site-hero p.has-gris-claro-color{
color: #E8E8E8 !important;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Galería de fotos (producto): foto grande + miniaturas, reemplaza el
sistema anterior de grilla + lightbox */
.gallery-main{
width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
border:1px solid var(--linea);background:#fff;margin-bottom:14px;
}
.gallery-main img{ width:100%;height:100%;object-fit:contain;padding:20px;box-sizing:border-box; }
.gallery-thumbs{ display:grid;grid-template-columns:repeat(6,1fr);gap:10px; }
.gallery-thumb{
aspect-ratio:1/1;border-radius:6px;overflow:hidden;cursor:pointer;
border:2px solid transparent;background:#fff;box-sizing:border-box;
}
.gallery-thumb.active{ border-color:var(--carril); }
.gallery-thumb img{ width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box;transition:opacity .15s; }
.gallery-thumb:hover img{ opacity:.75; }
@media (max-width:700px){ .gallery-thumbs{grid-template-columns:repeat(4,1fr);} }
/* Botón de pago con Mercado Pago, en las 6 fichas de producto.
El precio y un ícono de pago quedan integrados adentro del botón. */
.mp-box {
display: inline-flex;
padding: 14px 0 4px;
font-family: system-ui, -apple-system, sans-serif;
}
.mp-boton {
background-color: #009EE3;
color: #FFFFFF !important;
padding: 10px 22px;
border-radius: 8px;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.mp-boton:hover {
background-color: #0081B8;
transform: translateY(-1px);
}
.mp-boton-icon {
height: 26px;
width: auto;
flex-shrink: 0;
}
.mp-boton-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.25;
}
.mp-boton-price {
font-size: 18px;
font-weight: 800;
}
.mp-boton-label {
font-size: 12.5px;
font-weight: 500;
opacity: .92;
}
/* Pasarela de pago: página propia (/finalizar-compra/) con precio + datos
del comprador antes de ir a Mercado Pago. */
.mp-checkout-vacio{
text-align: center;
padding: 60px 20px;
}
.mp-checkout-vacio .btn{
margin-top: 16px;
display: inline-block;
}
/* Checkout de 2 columnas: formulario + resumen del pedido */
.mp-checkout-grid{
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
align-items: start;
}
.mp-checkout-section{
margin-bottom: 20px;
}
.mp-checkout-section h4{
font-family: var(--display);
font-size: 15px;
font-weight: 700;
margin: 0 0 12px;
color: var(--grafito);
}
.mp-checkout-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.mp-checkout-grid form{
display: flex;
flex-direction: column;
gap: 12px;
}
.mp-checkout-grid label{
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13.5px;
font-weight: 600;
color: var(--grafito);
}
.mp-checkout-grid input,
.mp-checkout-grid select{
font-family: var(--body);
font-size: 15px;
padding: 11px 14px;
border: 1px solid var(--linea);
border-radius: 8px;
background: #fff;
color: var(--grafito);
}
.mp-checkout-grid input:focus,
.mp-checkout-grid select:focus{
outline: 2px solid var(--carril);
outline-offset: 1px;
}
.mp-modal-nota{
font-size: 12px;
color: var(--gris-texto, #4A4A4A);
margin: 4px 0 0;
}
.mp-modal-boton{
width: 100%;
justify-content: center;
margin-top: 14px;
}
.mp-modal-boton[aria-busy="true"]{
opacity: .65;
pointer-events: none;
}
/* Resumen del pedido, al costado */
.mp-checkout-summary{
background: var(--papel);
border-radius: 10px;
padding: 18px 18px 4px;
}
.mp-checkout-summary h4{
font-family: var(--display);
font-size: 14px;
font-weight: 700;
margin: 0 0 14px;
color: var(--grafito);
}
.mp-checkout-item{
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--linea);
}
.mp-checkout-item img{
width: 52px;
height: 52px;
object-fit: contain;
background: #fff;
border-radius: 8px;
flex: none;
}
.mp-checkout-item div{
display: flex;
flex-direction: column;
gap: 3px;
}
.mp-checkout-item strong{
font-size: 13.5px;
color: var(--grafito);
}
.mp-checkout-item span{
font-size: 13px;
color: var(--gris-texto, #4A4A4A);
}
.mp-checkout-line{
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--gris-texto, #4A4A4A);
padding: 6px 0;
}
.mp-checkout-total{
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--display);
font-weight: 800;
font-size: 17px;
color: var(--grafito);
border-top: 1px solid var(--linea);
margin-top: 8px;
padding: 12px 0;
}
@media (max-width: 720px){
.mp-checkout-grid{
grid-template-columns: 1fr;
}
.mp-checkout-row{
grid-template-columns: 1fr;
}
.mp-checkout-summary{
order: -1;
}
}