/* ==========================================================================
Sologísticos — estilos del tema
Los colores y tamaños base viven en theme.json (editables en Apariencia → Editor → Estilos).
========================================================================== */
:root {
--sl-ease: cubic-bezier(0.23, 1, 0.32, 1);
--sl-brand: var(--wp--preset--color--brand, #0b6187);
--sl-brand-deep: var(--wp--preset--color--brand-deep, #083f58);
--sl-brand-50: var(--wp--preset--color--brand-50, #e8f2f6);
--sl-sun: var(--wp--preset--color--sun, #ffc21a);
--sl-sun-deep: var(--wp--preset--color--sun-deep, #f0ae00);
--sl-ink: var(--wp--preset--color--ink, #10202a);
--sl-muted: var(--wp--preset--color--muted, #55636b);
--sl-paper: var(--wp--preset--color--paper, #f6f7f4);
--sl-line: var(--wp--preset--color--line, #dde3e6);
--sl-wa-svg: url("data:image/svg+xml;utf8,");
--sl-pin-svg: url("data:image/svg+xml;utf8,");
--sl-mail-svg: url("data:image/svg+xml;utf8,");
--sl-check-svg: url("data:image/svg+xml;utf8,");
--sl-star-svg: url("data:image/svg+xml;utf8,");
}
html {
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
body {
-webkit-font-smoothing: antialiased;
}
body ::selection {
background: var(--sl-sun);
color: var(--sl-ink);
}
body :focus-visible {
outline: 3px solid var(--sl-sun);
outline-offset: 2px;
}
/* ---------- Reset de espacios de WordPress en las secciones ---------- */
body .wp-site-blocks > *,
body .sl-main > *,
body .sl-page-content > * {
margin-block: 0;
}
body .sl-main figure {
margin-inline: 0;
margin-block-end: 0;
}
body .sl-main a {
text-decoration: none;
}
/* ---------- Utilidades ---------- */
body .sl-container {
box-sizing: border-box;
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 640px) {
body .sl-container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
body .sl-container { padding-inline: 2rem; }
}
body .sl-section {
padding-block: 4rem;
}
@media (min-width: 1024px) {
body .sl-section { padding-block: 6rem; }
}
body .sl-bg-white {
background: #fff;
}
body .sl-eyebrow,
body .is-style-etiqueta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sl-brand);
}
body .sl-dot::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--sl-sun);
}
body .sl-lead {
font-size: 1.125rem;
line-height: 1.65;
color: var(--sl-muted);
}
body .sl-muted { color: var(--sl-muted); }
body .sl-small { font-size: 0.875rem; }
body .sl-soft { color: rgb(255 255 255 / 0.85); }
body .sl-narrow { max-width: 16ch; }
body .sl-strong-lg { font-size: 1.125rem; font-weight: 600; margin: 0; }
/* Textos dentro de fondos azules */
body .is-style-tarjeta-azul,
body .sl-fleet {
color: #fff;
}
body .is-style-tarjeta-azul :is(h1, h2, h3, h4),
body .sl-fleet :is(h1, h2, h3, h4) {
color: #fff;
}
/* ---------- Estilos de grupo ---------- */
body .is-style-tarjeta-azul {
background: var(--sl-brand);
border-radius: 24px;
padding: 1.75rem;
}
body .is-style-tarjeta-blanca {
background: #fff;
border: 1px solid var(--sl-line);
border-radius: 24px;
padding: 1.75rem;
}
/* ---------- Botones ---------- */
body .wp-block-button .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3rem;
box-sizing: border-box;
padding: 0 1.375rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.9375rem;
white-space: nowrap;
text-decoration: none;
transition:
transform 160ms var(--sl-ease),
background-color 200ms var(--sl-ease),
color 200ms var(--sl-ease),
box-shadow 200ms var(--sl-ease);
}
body .wp-block-button .wp-block-button__link:active {
transform: scale(0.97);
}
body .wp-block-button:is(.is-style-amarillo, .is-style-amarillo-whatsapp) .wp-block-button__link {
background: var(--sl-sun);
color: var(--sl-ink);
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
}
body .wp-block-button:is(.is-style-oscuro, .is-style-oscuro-whatsapp) .wp-block-button__link {
background: var(--sl-ink);
color: #fff;
}
body .wp-block-button.is-style-borde .wp-block-button__link {
background: #fff;
color: var(--sl-ink);
box-shadow: inset 0 0 0 1.5px var(--sl-line);
}
body .wp-block-button.is-style-borde-claro .wp-block-button__link {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5);
}
body .wp-block-button:is(.is-style-amarillo-whatsapp, .is-style-oscuro-whatsapp) .wp-block-button__link::before {
content: "";
width: 1rem;
height: 1rem;
flex: none;
background: currentColor;
-webkit-mask: var(--sl-wa-svg) center / contain no-repeat;
mask: var(--sl-wa-svg) center / contain no-repeat;
}
body .wp-block-button:is(.is-style-amarillo:not(.is-style-amarillo-whatsapp)) .wp-block-button__link::after {
content: "→";
font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
body .wp-block-button:is(.is-style-amarillo, .is-style-amarillo-whatsapp) .wp-block-button__link:hover {
background: var(--sl-sun-deep);
}
body .wp-block-button:is(.is-style-oscuro, .is-style-oscuro-whatsapp) .wp-block-button__link:hover {
background: var(--sl-brand-deep);
}
body .wp-block-button.is-style-borde .wp-block-button__link:hover {
box-shadow: inset 0 0 0 1.5px var(--sl-ink);
}
body .wp-block-button.is-style-borde-claro .wp-block-button__link:hover {
background: rgb(255 255 255 / 0.1);
}
}
/* ---------- Listas con iconos ---------- */
body ul:is(.is-style-checks, .is-style-ubicaciones, .sl-contact-list, .sl-foot-list) {
list-style: none;
padding-left: 0;
}
body ul.is-style-checks li,
body ul.is-style-ubicaciones li,
body ul.sl-contact-list li {
display: flex;
align-items: center;
gap: 0.75rem;
}
body ul.is-style-checks {
display: grid;
gap: 0.75rem;
font-weight: 500;
}
body ul.is-style-checks li::before {
content: "";
flex: none;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
background: var(--sl-sun);
}
/* chulo oscuro dentro del círculo amarillo */
body ul.is-style-checks li {
position: relative;
}
body ul.is-style-checks li::after {
content: "";
position: absolute;
left: 0.3125rem;
top: 50%;
width: 0.875rem;
height: 0.875rem;
transform: translateY(-50%);
background: var(--sl-ink);
-webkit-mask: var(--sl-check-svg) center / contain no-repeat;
mask: var(--sl-check-svg) center / contain no-repeat;
}
body ul.is-style-ubicaciones {
display: grid;
gap: 0.75rem;
margin-top: 1.25rem;
font-size: 1.125rem;
font-weight: 600;
}
body ul.is-style-ubicaciones li::before {
content: "";
flex: none;
width: 1.25rem;
height: 1.25rem;
background: var(--sl-brand);
-webkit-mask: var(--sl-pin-svg) center / contain no-repeat;
mask: var(--sl-pin-svg) center / contain no-repeat;
}
body .is-style-tarjeta-azul ul.is-style-ubicaciones li::before,
body .sl-fleet ul.is-style-ubicaciones li::before {
background: var(--sl-sun);
}
/* ==========================================================================
Encabezado
========================================================================== */
body header.sl-site-header {
position: sticky;
top: -40px;
z-index: 40;
}
body.admin-bar header.sl-site-header {
top: -8px;
}
body .sl-topbar {
background: var(--sl-brand);
color: #fff;
font-size: 13px;
}
body .sl-topbar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 40px;
}
body .sl-topbar-inner > * {
margin: 0;
}
body .sl-topbar-msg {
display: none;
}
body .sl-topbar-link a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
@media (min-width: 640px) {
body .sl-topbar-inner { justify-content: space-between; }
body .sl-topbar-msg { display: block; }
}
body .sl-header {
background: rgb(246 247 244 / 0.92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--sl-line);
}
body .sl-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
height: 72px;
}
body .sl-header-inner > * {
margin: 0;
}
body .sl-logo-header img {
height: 44px;
width: auto;
}
body .sl-nav {
font-size: 15px;
font-weight: 500;
--navigation-layout-justification-setting: center;
}
body .sl-nav .wp-block-navigation__container {
gap: 2rem;
}
body .sl-nav .wp-block-navigation-item__content {
color: rgb(16 32 42 / 0.8);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
body .sl-nav .wp-block-navigation-item__content:hover {
color: var(--sl-ink);
text-decoration: underline;
text-decoration-color: var(--sl-sun);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
}
body .sl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--sl-line);
color: var(--sl-ink);
}
body .sl-nav .wp-block-navigation__responsive-container.is-menu-open {
background: var(--sl-paper);
padding: 1.5rem;
}
body .sl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
}
body .sl-header-cta {
display: none;
}
@media (min-width: 1100px) {
body .sl-header-cta { display: flex; }
}
@media (max-width: 599px) {
body .sl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-grid; }
}
/* ==========================================================================
Portada (hero)
========================================================================== */
body .sl-hero {
padding-top: 2.5rem;
padding-bottom: 4rem;
}
@media (min-width: 1024px) {
body .sl-hero { padding-top: 3.5rem; padding-bottom: 6rem; }
}
body .sl-hero-inner {
position: relative;
}
body .sl-hero-text {
max-width: 720px;
padding-bottom: 2.5rem;
}
body .sl-hero-text > * { margin-block: 0; }
body .sl-hero-text > h1 { margin-top: 1.25rem; }
body .sl-hero-text > .sl-lead { margin-top: 1.5rem; max-width: 540px; }
body .sl-hero-text > .wp-block-buttons { margin-top: 2rem; }
@media (min-width: 1024px) {
body .sl-hero-text { padding-bottom: 3.5rem; }
body .sl-solo-movil { display: none; }
}
body .sl-hero-inner > * { margin-block: 0; }
body figure.sl-hero-img {
position: relative;
height: 300px;
border-radius: 28px;
overflow: hidden;
}
body figure.sl-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
body figure.sl-hero-img::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 33%;
background: linear-gradient(to top, rgb(0 0 0 / 0.35), transparent);
pointer-events: none;
}
body figure.sl-hero-img figcaption {
display: none;
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
z-index: 1;
margin: 0;
padding: 0.5rem 1rem;
border-radius: 999px;
background: rgb(255 255 255 / 0.95);
color: var(--sl-ink);
font-size: 0.875rem;
font-weight: 600;
}
@media (min-width: 640px) {
body figure.sl-hero-img { height: 420px; }
body figure.sl-hero-img figcaption { display: block; }
}
@media (min-width: 1024px) {
body figure.sl-hero-img { height: 520px; }
}
body .sl-hero-inner > .sl-hero-card {
position: relative;
z-index: 10;
box-sizing: border-box;
max-width: 28rem;
margin: -4rem auto 0;
padding: 1.5rem;
border: 1px solid var(--sl-line);
border-radius: 24px;
background: #fff;
box-shadow: 0 24px 60px -20px rgb(8 63 88 / 0.35);
}
@media (min-width: 640px) {
body .sl-hero-inner > .sl-hero-card { padding: 1.75rem; }
}
@media (min-width: 1024px) {
body .sl-hero-inner > .sl-hero-card {
position: absolute;
top: 1rem;
right: 2rem;
width: 400px;
max-width: none;
margin: 0;
}
}
body .sl-hero-card > * { margin-block: 0; }
body .sl-hero-card .sl-card-title { font-size: 1.5rem; letter-spacing: -0.02em; }
body .sl-hero-card .sl-small { margin-top: 0.375rem; color: var(--sl-muted); }
body .sl-hero-card .sl-cotizador { margin-top: 1.25rem; }
/* ---------- Cotizador ---------- */
body .sl-cot-form {
display: grid;
gap: 1rem;
}
body .sl-cot-form .sl-field {
display: grid;
gap: 0.375rem;
}
body .sl-cot-form label {
font-size: 0.875rem;
font-weight: 600;
color: var(--sl-ink);
}
body .sl-cot-form :is(input, select) {
box-sizing: border-box;
width: 100%;
min-height: 2.875rem;
padding: 0 0.875rem;
border: 1.5px solid var(--sl-line);
border-radius: 0.625rem;
background-color: #fff;
color: var(--sl-ink);
font: inherit;
font-size: 1rem;
transition: border-color 150ms var(--sl-ease);
}
body .sl-cot-form select {
appearance: none;
padding-right: 2.5rem;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
}
body .sl-cot-form input::placeholder {
color: #8a969c;
}
body .sl-cot-form :is(input, select):focus {
outline: none;
border-color: var(--sl-brand);
}
body .sl-cot-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 3rem;
border: 0;
border-radius: 999px;
background: var(--sl-sun);
color: var(--sl-ink);
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
font: inherit;
font-weight: 700;
font-size: 0.9375rem;
cursor: pointer;
transition: transform 160ms var(--sl-ease), background-color 200ms var(--sl-ease);
}
body .sl-cot-submit::after {
content: "→";
}
body .sl-cot-submit:active {
transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
body .sl-cot-submit:hover { background: var(--sl-sun-deep); }
}
body .sl-cot-error {
margin: 0;
color: #b91c1c;
font-size: 0.875rem;
font-weight: 500;
}
body .sl-cot-note {
margin: 0;
text-align: center;
font-size: 0.75rem;
color: var(--sl-muted);
}
/* ==========================================================================
Encabezados de sección en dos columnas
========================================================================== */
body .sl-split-head {
display: grid;
gap: 1.5rem;
}
body .sl-split-head > * { margin: 0; }
body .sl-split-head > * > * { margin-block: 0; }
body .sl-split-head > * > h2 { margin-top: 1rem; }
@media (min-width: 1024px) {
body .sl-split-head {
grid-template-columns: 7fr 5fr;
align-items: end;
gap: 2rem;
}
}
body .sl-split-end {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
}
body .sl-split-end > .sl-muted {
max-width: 38ch;
}
body .sl-trust .sl-split-head h2 {
margin: 0;
}
/* Fotos genéricas */
body figure.sl-photo {
position: relative;
overflow: hidden;
border-radius: 24px;
}
body figure.sl-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--sl-ease);
}
@media (hover: hover) and (pointer: fine) {
body figure.sl-photo:hover img { transform: scale(1.03); }
}
/* ==========================================================================
Confianza (mosaico)
========================================================================== */
body .sl-trust-grid {
display: grid;
gap: 1rem;
margin-top: 3rem;
}
body .sl-trust-grid > * { margin: 0; }
body .sl-trust-grid > figure { height: 250px; }
body .sl-trust-grid > figure.sl-trust-big { height: 320px; }
@media (min-width: 640px) {
body .sl-trust-grid { grid-template-columns: repeat(2, 1fr); }
body .sl-trust-grid > .sl-trust-big,
body .sl-trust-grid > .sl-trust-card { grid-column: span 2; }
}
@media (min-width: 1024px) {
body .sl-trust-grid {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto;
}
body .sl-trust-grid > figure.sl-trust-big {
grid-column: span 6;
grid-row: span 2;
height: auto;
min-height: 520px;
}
body .sl-trust-grid > figure { grid-column: span 3; }
body .sl-trust-grid > .sl-trust-card { grid-column: span 6; }
}
body .sl-trust-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
}
body .sl-trust-card > * { margin: 0; }
body .sl-card-quote {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.35;
}
@media (min-width: 640px) {
body .sl-card-quote { font-size: 1.5rem; }
}
body .sl-card-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
body .sl-card-foot > *,
body .sl-person > * { margin: 0; }
body .sl-person > .sl-small { color: rgb(255 255 255 / 0.75); }
/* ==========================================================================
Nosotros
========================================================================== */
body .sl-about {
display: grid;
gap: 3rem;
}
body .sl-about > * { margin: 0; }
@media (min-width: 1024px) {
body .sl-about {
grid-template-columns: 7fr 5fr;
gap: 4rem;
}
}
body .sl-about-main > * { margin-block: 0; }
body .sl-about-main > h2 { margin-top: 1rem; }
body figure.sl-about-img {
min-height: 420px;
}
body figure.sl-about-img img {
position: absolute;
inset: 0;
}
body .sl-about-row {
display: grid;
gap: 1.5rem;
margin-top: 2.5rem;
}
@media (min-width: 640px) {
body .sl-about-row { grid-template-columns: 220px 1fr; }
}
body .sl-about-row > * { margin: 0; }
body .sl-stat-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
}
@media (min-width: 640px) {
body .sl-stat-card { min-height: 220px; }
}
body .sl-stat-card > * { margin: 0; }
body .sl-stat-card .sl-small { margin-top: 1.5rem; color: rgb(255 255 255 / 0.85); font-weight: 500; }
body .sl-stat-big {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
body .sl-about-copy {
color: var(--sl-muted);
line-height: 1.7;
}
body .sl-about-copy > * { margin-block: 0; }
body .sl-about-copy > * + * { margin-top: 1rem; }
body .sl-about-copy > .wp-block-buttons { margin-top: 1.5rem; }
body .sl-mv {
display: grid;
gap: 1.5rem;
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--sl-line);
}
@media (min-width: 640px) {
body .sl-mv { grid-template-columns: 1fr 1fr; }
}
body .sl-mv > * { margin: 0; }
body .sl-mv > * > * { margin-block: 0; }
body .sl-mv p { margin-top: 0.75rem; color: var(--sl-muted); line-height: 1.7; }
body .sl-kicker {
font-size: 0.875rem !important;
font-weight: 700;
letter-spacing: 0.1em !important;
text-transform: uppercase;
color: var(--sl-brand);
line-height: 1.4;
}
body .is-style-tarjeta-azul .sl-kicker { color: var(--sl-sun); }
/* ==========================================================================
Cifras
========================================================================== */
body .sl-stats {
background: #fff;
border-block: 1px solid var(--sl-line);
}
body .sl-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
body .sl-stats-grid > .sl-stat {
margin: 0;
padding: 2.5rem 1rem 2.5rem 0;
}
body .sl-stats-grid > .sl-stat:nth-child(even) {
padding-left: 1.5rem;
border-left: 1px solid var(--sl-line);
}
body .sl-stats-grid > .sl-stat:nth-child(n + 3) {
border-top: 1px solid var(--sl-line);
}
@media (min-width: 1024px) {
body .sl-stats-grid { grid-template-columns: repeat(4, 1fr); }
body .sl-stats-grid > .sl-stat { padding-block: 3.5rem; }
body .sl-stats-grid > .sl-stat:nth-child(n + 3) { border-top: 0; }
body .sl-stats-grid > .sl-stat:nth-child(3) { padding-left: 1.5rem; border-left: 1px solid var(--sl-line); }
}
body .sl-stat > * { margin: 0; }
body .sl-stat-num {
font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
}
body .sl-stat-label {
margin-top: 0.5rem !important;
max-width: 22ch;
font-size: 0.875rem;
color: var(--sl-muted);
}
/* ==========================================================================
Servicios
========================================================================== */
body .sl-services-feature {
position: relative;
margin-top: 3rem;
}
body .sl-services-feature > * { margin: 0; }
body figure.sl-services-img {
height: 280px;
}
body figure.sl-services-img img { object-position: center 45%; }
@media (min-width: 640px) {
body figure.sl-services-img { height: 380px; }
}
@media (min-width: 1024px) {
body figure.sl-services-img { height: 480px; }
}
body .sl-services-feature > .sl-services-cards {
position: relative;
z-index: 1;
display: grid;
gap: 1rem;
margin-top: -5rem;
padding-inline: 1rem;
}
@media (min-width: 640px) {
body .sl-services-feature > .sl-services-cards { padding-inline: 2rem; }
}
@media (min-width: 768px) {
body .sl-services-feature > .sl-services-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
body .sl-services-feature > .sl-services-cards { margin-top: -9rem; padding-inline: 2.5rem; }
}
body .sl-service-card {
margin: 0;
padding: 1.5rem;
box-shadow: 0 20px 40px -20px rgb(8 63 88 / 0.6);
}
body .sl-service-card > * { margin-block: 0; }
body .sl-service-card > h3 { margin-top: 1.25rem; }
body .sl-service-card > .sl-sun-text { margin-top: 0.25rem; }
body .sl-service-card > .sl-small { margin-top: 0.75rem; line-height: 1.6; }
body .sl-sun-text {
color: var(--sl-sun);
font-size: 0.875rem;
font-weight: 600;
}
body figure.sl-icon-box {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 16px;
background: #fff;
}
body figure.sl-icon-box img {
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}
body .sl-services-list {
display: grid;
margin-top: 3.5rem;
border-top: 1px solid var(--sl-line);
}
@media (min-width: 768px) {
body .sl-services-list { grid-template-columns: 1fr 1fr; }
}
body .sl-service-row {
display: flex;
gap: 1.25rem;
margin: 0;
padding-block: 1.75rem;
border-bottom: 1px solid var(--sl-line);
}
@media (min-width: 768px) {
body .sl-service-row:nth-child(odd) { padding-right: 2.5rem; }
body .sl-service-row:nth-child(even) { padding-left: 2.5rem; border-left: 1px solid var(--sl-line); }
}
body .sl-service-row > * { margin: 0; }
body .sl-service-row > * > * { margin-block: 0; }
body .sl-service-row h3 { font-size: 1.125rem; }
body .sl-service-row p { margin-top: 0.375rem; line-height: 1.65; }
body figure.sl-row-icon {
flex: none;
width: 3.5rem;
height: 3.5rem;
}
body figure.sl-row-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ==========================================================================
Banda azul con video
========================================================================== */
body .sl-fleet {
overflow: hidden;
background: var(--sl-brand);
}
body .sl-fleet-grid {
display: grid;
}
body .sl-fleet-grid > * { margin: 0; }
@media (min-width: 1024px) {
body .sl-fleet-grid { grid-template-columns: 1fr 1fr; }
}
body .sl-fleet-text {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 1rem;
}
@media (min-width: 640px) {
body .sl-fleet-text { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
body .sl-fleet-text {
justify-self: end;
width: 100%;
max-width: 640px;
padding: 6rem 4rem 6rem 2rem;
}
}
body .sl-fleet-text > * { margin-block: 0; }
body .sl-fleet-text > h2 { margin-top: 1.5rem; }
body .sl-fleet-text > .sl-lead { margin-top: 1.25rem; max-width: 48ch; color: rgb(255 255 255 / 0.85); }
body .sl-fleet-text > ul { margin-top: 1.75rem; }
body .sl-fleet-text > .wp-block-buttons { margin-top: 2.25rem; }
body .sl-pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.5rem;
padding: 0.375rem 0.875rem;
border-radius: 999px;
background: rgb(255 255 255 / 0.1);
font-size: 0.875rem;
font-weight: 600;
}
body .sl-pill::before {
content: "";
width: 1rem;
height: 1rem;
background: var(--sl-sun);
-webkit-mask: var(--sl-star-svg) center / contain no-repeat;
mask: var(--sl-star-svg) center / contain no-repeat;
}
/* El video se muestra COMPLETO (formato vertical 9:16), sin recortes */
body .sl-fleet-media {
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 1rem;
background:
radial-gradient(120% 80% at 50% 40%, rgb(255 255 255 / 0.08), transparent 70%),
var(--sl-brand-deep);
}
@media (min-width: 1024px) {
body .sl-fleet-media { padding: 3.5rem 2rem; }
}
body figure.sl-fleet-video {
width: min(100%, 360px);
margin: 0;
aspect-ratio: 9 / 16;
border-radius: 24px;
overflow: hidden;
background: #000;
box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
}
body figure.sl-fleet-video video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (min-width: 1024px) {
body figure.sl-fleet-video { width: min(100%, 380px); }
}
/* ==========================================================================
Galería de equipos
========================================================================== */
body .sl-gallery {
margin-top: 2.5rem;
columns: 2;
column-gap: 0.75rem;
}
@media (min-width: 640px) {
body .sl-gallery { column-gap: 1rem; }
}
@media (min-width: 1024px) {
body .sl-gallery { columns: 3; margin-top: 3rem; }
}
body .sl-equipo {
display: grid;
grid-template-rows: 1fr auto auto;
margin: 0 0 0.75rem;
break-inside: avoid;
border-radius: 16px;
overflow: hidden;
color: #fff;
}
@media (min-width: 640px) {
body .sl-equipo { margin-bottom: 1rem; border-radius: 24px; }
}
body .sl-equipo > * { margin: 0; }
body .sl-equipo > figure {
grid-row: 1 / -1;
grid-column: 1;
}
body .sl-equipo > figure img {
display: block;
width: 100%;
height: auto;
transition: transform 600ms var(--sl-ease);
}
@media (hover: hover) and (pointer: fine) {
body .sl-equipo:hover > figure img { transform: scale(1.03); }
}
body .sl-equipo::after {
content: "";
grid-row: 2 / -1;
grid-column: 1;
margin-top: -3rem;
background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.25) 60%, transparent);
pointer-events: none;
}
body .sl-equipo > p {
position: relative;
z-index: 1;
grid-column: 1;
padding-inline: 0.75rem;
}
body .sl-equipo > .sl-equipo-tag {
grid-row: 2;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sl-sun);
}
body .sl-equipo > .sl-equipo-title {
grid-row: 3;
padding-top: 0.125rem;
padding-bottom: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.3;
}
@media (min-width: 640px) {
body .sl-equipo > p { padding-inline: 1.25rem; }
body .sl-equipo > .sl-equipo-tag { font-size: 0.75rem; }
body .sl-equipo > .sl-equipo-title { font-size: 1.125rem; padding-bottom: 1.25rem; }
}
/* el degradado va bajo el texto pero sobre la foto */
body .sl-equipo::after { z-index: 0; }
body .sl-gallery-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-top: 2rem;
padding: 1.5rem;
}
body .sl-gallery-cta > * { margin: 0; }
@media (min-width: 640px) {
body .sl-gallery-cta { flex-direction: row; align-items: center; }
}
/* ==========================================================================
Clientes — cinta de logos (se mueve de izquierda a derecha)
========================================================================== */
body .sl-clients {
padding-block: 3rem;
background: #fff;
border-block: 1px solid var(--sl-line);
}
body .sl-clients > * { margin: 0; }
body .sl-clients-title {
margin: 0;
text-align: center;
font-size: 0.875rem !important;
font-weight: 700;
letter-spacing: 0.1em !important;
text-transform: uppercase;
color: var(--sl-muted);
line-height: 1.4;
}
body .sl-marquee {
margin-top: 2rem !important;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
body .sl-marquee-track {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
body .sl-marquee.is-running .sl-marquee-track {
flex-wrap: nowrap;
justify-content: flex-start;
width: max-content;
animation: sl-marquee var(--sl-marquee-duration, 30s) linear infinite;
}
@media (hover: hover) and (pointer: fine) {
body .sl-marquee.is-running:hover .sl-marquee-track { animation-play-state: paused; }
}
@keyframes sl-marquee {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
body .sl-marquee-track > figure.sl-logo {
flex: none;
margin: 0;
padding-inline: 2.5rem;
}
body .sl-marquee-track > figure.sl-logo img {
display: block;
height: 64px;
width: auto;
max-width: none;
object-fit: contain;
}
@media (min-width: 640px) {
body .sl-marquee-track > figure.sl-logo { padding-inline: 3.5rem; }
body .sl-marquee-track > figure.sl-logo img { height: 80px; }
}
/* ==========================================================================
Cobertura
========================================================================== */
body .sl-coverage {
display: grid;
gap: 2.5rem;
}
body .sl-coverage > * { margin: 0; }
body .sl-coverage > * > * { margin-block: 0; }
body .sl-coverage > * > h2 { margin-top: 1rem; }
body .sl-coverage > * > .sl-lead { margin-top: 1.25rem; max-width: 42ch; }
@media (min-width: 1024px) {
body .sl-coverage { grid-template-columns: 5fr 7fr; }
}
body .sl-coverage-cards {
display: grid;
gap: 1rem;
}
@media (min-width: 640px) {
body .sl-coverage-cards { grid-template-columns: 1fr 1fr; }
}
body .sl-coverage-cards > * { margin: 0 !important; }
body .sl-coverage-cards > * > * { margin-block: 0; }
body .sl-coverage-cards ul.is-style-ubicaciones { margin-top: 1.25rem; }
/* ==========================================================================
Contacto (bloque amarillo)
========================================================================== */
body .sl-contact {
padding-top: 0;
}
body .sl-cta {
position: relative;
overflow: hidden;
padding: 3rem 1.5rem;
border-radius: 32px;
background: var(--sl-sun);
color: var(--sl-ink);
}
@media (min-width: 640px) {
body .sl-cta { padding-inline: 3rem; }
}
@media (min-width: 1024px) {
body .sl-cta { padding: 4rem; }
}
body .sl-cta > * { margin: 0; }
body figure.sl-cta-deco {
display: none;
position: absolute;
right: -1.5rem;
bottom: -1.5rem;
width: 300px;
opacity: 0.9;
pointer-events: none;
}
body figure.sl-cta-deco img { width: 100%; height: auto; }
@media (min-width: 768px) {
body figure.sl-cta-deco { display: block; }
}
@media (min-width: 1024px) {
body figure.sl-cta-deco { width: 360px; }
}
body .sl-cta-body {
position: relative;
max-width: 640px;
}
body .sl-cta-body > * { margin-block: 0; }
body .sl-cta-body > .sl-lead { margin-top: 1rem; color: rgb(16 32 42 / 0.8); }
body .sl-cta-body > .wp-block-buttons { margin-top: 2rem; }
body ul.sl-contact-list {
display: grid;
gap: 1rem;
margin-top: 2.5rem;
font-weight: 600;
}
@media (min-width: 640px) {
body ul.sl-contact-list { grid-template-columns: 1fr 1fr; }
}
body ul.sl-contact-list li::before {
content: "";
flex: none;
width: 1.25rem;
height: 1.25rem;
background: var(--sl-ink);
-webkit-mask: var(--sl-pin-svg) center / contain no-repeat;
mask: var(--sl-pin-svg) center / contain no-repeat;
}
body ul.sl-contact-list li:first-child::before {
-webkit-mask-image: var(--sl-mail-svg);
mask-image: var(--sl-mail-svg);
}
body ul.sl-contact-list a {
color: inherit;
word-break: break-all;
}
/* ==========================================================================
Pie de página
========================================================================== */
body .sl-footer {
background: #fff;
border-top: 1px solid var(--sl-line);
}
body .sl-footer-grid {
display: grid;
gap: 2.5rem;
padding-block: 3rem;
}
@media (min-width: 768px) {
body .sl-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
body .sl-footer-grid > * { margin: 0; }
body .sl-footer-grid > * > * { margin-block: 0; }
body .sl-footer-grid > * > * + * { margin-top: 1rem; }
body .sl-logo-footer img {
height: 48px;
width: auto;
}
body .sl-footer .sl-small {
max-width: 36ch;
line-height: 1.6;
}
body .sl-foot-title {
font-size: 0.875rem !important;
font-weight: 700;
letter-spacing: 0.1em !important;
text-transform: uppercase;
line-height: 1.4;
}
body ul.sl-foot-list {
display: grid;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--sl-muted);
}
body .sl-footer a {
color: inherit;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
body .sl-footer a:hover,
body .sl-cta a:hover,
body .sl-topbar a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
}
body .sl-footer-bottom {
border-top: 1px solid var(--sl-line);
}
body .sl-footer-bottom-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-block: 1.5rem;
text-align: center;
font-size: 0.875rem;
color: var(--sl-muted);
}
body .sl-footer-bottom-inner > * { margin: 0; }
@media (min-width: 640px) {
body .sl-footer-bottom-inner { flex-direction: row; }
}
/* ---------- Botón flotante de WhatsApp ---------- */
body .sl-wa-float {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 50;
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
margin: 0 !important;
border-radius: 999px;
background: #25d366;
color: #fff;
box-shadow: 0 12px 30px -8px rgb(0 0 0 / 0.4);
transition: transform 160ms var(--sl-ease);
}
body .sl-wa-float:active {
transform: scale(0.97);
}
body .sl-wa-icon {
display: inline-block;
width: 1.75rem;
height: 1.75rem;
background: currentColor;
-webkit-mask: var(--sl-wa-svg) center / contain no-repeat;
mask: var(--sl-wa-svg) center / contain no-repeat;
}
/* Vista del botón flotante dentro del editor */
body .sl-wa-float-preview {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 12px;
background: #25d366;
color: #fff;
font-size: 0.875rem;
font-weight: 600;
}
/* ==========================================================================
Animaciones (solo en la web, nunca dentro del editor)
========================================================================== */
html.sl-js body .sl-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms var(--sl-ease),
transform 700ms var(--sl-ease);
}
html.sl-js body .sl-reveal.is-visible {
opacity: 1;
transform: none;
}
html.sl-js body .sl-hero-text > *,
html.sl-js body .sl-hero-inner > .sl-hero-card {
opacity: 0;
animation: sl-hero-in 700ms var(--sl-ease) forwards;
}
html.sl-js body .sl-hero-text > :nth-child(2) { animation-delay: 60ms; }
html.sl-js body .sl-hero-text > :nth-child(3) { animation-delay: 120ms; }
html.sl-js body .sl-hero-text > :nth-child(4) { animation-delay: 180ms; }
html.sl-js body .sl-hero-inner > .sl-hero-card { animation-delay: 200ms; }
@keyframes sl-hero-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.sl-js body .sl-reveal { transform: none; transition: opacity 400ms linear; }
html.sl-js body .sl-hero-text > *,
html.sl-js body .sl-hero-inner > .sl-hero-card { animation-name: sl-fade; }
body figure.sl-photo img,
body .sl-equipo > figure img { transition: none; }
@keyframes sl-fade { to { opacity: 1; } }
}