/**
 * Marco de kar-logistics.com.pe: cabecera (franja roja, logo, menú de
 * PowerPack con corchetes al pasar el mouse, selector de idioma), menú a
 * pantalla completa en tablet y celular, pie y WhatsApp. Más las piezas de
 * maqueta que copian a Elementor (secciones, columnas, títulos, separadores).
 * La base es Hello Elementor (assets/vendor/hello). Medidas de producción.
 * Puntos de quiebre: tablet ≤ 1024, celular ≤ 767.
 */

:root {
    --kar-rojo: #DC0B1C;
    --kar-roboto: "Roboto", sans-serif;
    --kar-caja: 1140px;
}

body { overflow-x: hidden; }

/* ── Cabecera ────────────────────────────────────────────────────────── */

.kar-cab { position: relative; z-index: 50; }
.kar-cab__barra { height: 15px; background: var(--kar-rojo); }
.kar-cab__fila { background: #fff; padding: 0 20px; }
.kar-cab__dentro {
    max-width: var(--kar-caja);
    min-height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.kar-cab__logo { width: 120px; flex: none; }
.kar-cab__logo a { display: block; }
.kar-cab__logo img { display: inline-block; width: 120px; height: auto; vertical-align: middle; }

/* Menú principal (escritorio) */
.kar-cab__menu { display: flex; align-items: center; }
.kar-cab__nav .kar-menu { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.kar-menu li { position: relative; list-style: none; }
.kar-cab__nav .kar-menu > li > .kar-menu__enlace {
    position: relative;
    display: flex;
    align-items: center;
    padding: 13px 8px;
    font-size: 14px;
    line-height: 1.82;
    color: #000;
    white-space: nowrap;
}
/* Puntero «corchetes» de PowerPack: [ ] rojos que entran al pasar el mouse. */
.kar-cab__nav .kar-menu > li > .kar-menu__enlace::before,
.kar-cab__nav .kar-menu > li > .kar-menu__enlace::after {
    position: absolute;
    top: 13px;
    font-size: 14px;
    line-height: 1.82;
    color: #dc0c1c;
    opacity: 0;
    transition: transform .3s, opacity .2s;
}
.kar-cab__nav .kar-menu > li > .kar-menu__enlace::before { content: "["; left: 0; transform: translateX(20px); }
.kar-cab__nav .kar-menu > li > .kar-menu__enlace::after { content: "]"; right: 0; transform: translateX(-20px); }
.kar-cab__nav .kar-menu > li > .kar-menu__enlace:hover::before,
.kar-cab__nav .kar-menu > li > .kar-menu__enlace:hover::after,
.kar-cab__nav .kar-menu > li:focus-within > .kar-menu__enlace::before,
.kar-cab__nav .kar-menu > li:focus-within > .kar-menu__enlace::after { opacity: 1; transform: none; }

.kar-flecha { display: inline-flex; margin-left: 11.3px; font-size: 14px; line-height: 1; }

.kar-cab__nav .kar-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--kar-rojo);
    display: none;
}
.kar-cab__nav li:hover > .kar-sub,
.kar-cab__nav li:focus-within > .kar-sub { display: block; }
.kar-cab__nav .kar-sub .kar-menu__enlace {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 13px 20px;
    font-family: var(--kar-roboto);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.82;
    color: #fff;
    white-space: nowrap;
}

/* Botón rojo de tres rayas (tablet y celular) */
.kar-cab__boton {
    display: none;
    padding: 5.5px;
    border: 0;
    border-radius: 3px;
    background: #FF0000;
    cursor: pointer;
}
.kar-cab__boton:hover, .kar-cab__boton:focus { background: #FF0000; }
.kar-hamburguesa { position: relative; display: block; width: 26px; height: 26px; }
.kar-hamburguesa__linea,
.kar-hamburguesa__linea::before,
.kar-hamburguesa__linea::after {
    position: absolute;
    left: 0;
    width: 26px;
    height: 4px;
    border-radius: 4px;
    background: #fff;
}
.kar-hamburguesa__linea { top: 11px; }
.kar-hamburguesa__linea::before, .kar-hamburguesa__linea::after { content: ""; }
.kar-hamburguesa__linea::before { top: -8px; }
.kar-hamburguesa__linea::after { top: 8px; }

/* Menú a pantalla completa */
.kar-pantalla {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    overflow-y: auto;
}
.kar-pantalla[hidden] { display: none; }
.kar-pantalla .kar-menu { display: block; margin: 0; padding: 0; list-style: none; }
.kar-pantalla .kar-menu__enlace {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1.82;
    color: #fff;
}
.kar-pantalla .kar-menu__enlace:hover { color: #FF0000; }
.kar-pantalla .kar-sub { display: none; margin: 0; padding: 0; list-style: none; background: #fff; }
.kar-pantalla li.abierto > .kar-sub { display: block; }
.kar-pantalla .kar-sub .kar-menu__enlace { color: #494c4f; }
.kar-pantalla__cerrar {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.kar-pantalla__cerrar::before, .kar-pantalla__cerrar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 19px;
    width: 2px;
    height: 40px;
    background: #fff;
}
.kar-pantalla__cerrar::before { transform: rotate(45deg); }
.kar-pantalla__cerrar::after { transform: rotate(-45deg); }
.kar-pantalla__cerrar:hover, .kar-pantalla__cerrar:focus { background: transparent; }

@media (max-width: 1024px) {
    .kar-cab__nav { display: none; }
    .kar-cab__boton { display: block; }
}

/* Selector de idioma */
.kar-cab__idioma { flex: none; }
.kar-idioma { position: relative; font-family: var(--kar-roboto); font-size: 16px; font-weight: 600; }
.kar-idioma a { display: block; color: #7a7a7a; background: #fff; white-space: nowrap; }
.kar-idioma__actual { text-align: right; cursor: pointer; }
.kar-idioma__actual a { min-height: 25px; }
.kar-idioma__bandera { display: inline-block; vertical-align: middle; line-height: 8px; }
.kar-idioma__bandera img { width: 20px; height: 15px; }
.kar-idioma__codigo { display: inline-block; padding-left: 10px; line-height: 24px; }
.kar-idioma__flecha { padding-left: 10px; font-size: 16px; line-height: 1; color: #7a7a7a; }
.kar-idioma__lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}
.kar-idioma.abierto .kar-idioma__lista { display: block; }
.kar-idioma__lista a, .kar-idioma__lista .kar-idioma__codigo { line-height: normal; }
/* Abierto: la flecha se voltea y el idioma bajo el mouse se marca (como el selector de Polylang). */
.kar-idioma.abierto .kar-idioma__flecha { display: inline-block; transform: rotateX(180deg); }
.kar-idioma.abierto a:hover, .kar-idioma.abierto a:focus-visible { color: #61ce70; background: #d9d9d9; }

/* ── Pie ─────────────────────────────────────────────────────────────── */

.kar-pie { background: #000; padding: 10px 20px; }
.kar-pie__dentro { max-width: var(--kar-caja); margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.kar-pie__col { padding: 10px; }
.kar-pie__col--logo, .kar-pie__col--texto { width: calc(50% - 5px); }
.kar-pie__logo { line-height: 0; }
.kar-pie__logo img { display: block; width: auto; height: 45px; }
.kar-pie__texto {
    margin: 0;
    font-family: var(--kar-roboto);
    font-size: 14px;
    line-height: 1;
    color: #fff;
    text-align: right;
}

/* ── WhatsApp ────────────────────────────────────────────────────────── */

.kar-wa {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 99999999;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 0;
}
.kar-wa__icono { display: block; width: 50px; height: 50px; }

/* ── Maqueta (como las secciones y columnas de Elementor) ───────────── */

.kar-sec { padding: 100px 20px; }
.kar-sec--roja { background: var(--kar-rojo); }
.kar-sec__caja { max-width: var(--kar-caja); margin: 0 auto; display: flex; }
.kar-sec--ancha > .kar-sec__caja { max-width: none; }
.kar-col { width: 100%; padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; }
.kar-col > * { width: 100%; }
.kar-col--mitad { width: 50%; }
.kar-col--tercio { width: 33.333%; }
.kar-col--cuarto { width: 25%; }
.kar-col--foto { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.kar-col--centro { align-content: center; }
.kar-fila { display: flex; width: 100%; }
.kar-fila--caja { max-width: var(--kar-caja); margin: 0 auto; }

/* Separación entre piezas de una columna: 20 px (la del kit de Elementor). */
.kar-col > :not(:last-child),
.kar-tarifario > :not(:last-child) { margin-bottom: 20px; }
.kar-col > .kar-fila { margin-bottom: 0; }
.kar-tarifario { display: flex; flex-wrap: wrap; align-content: flex-start; }
.kar-tarifario > * { width: 100%; }
.kar-tarifario > .kar-titulo:first-child { margin-top: 60px; }

.kar-titulo {
    margin: 0;
    font-family: var(--kar-roboto);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: var(--kar-rojo);
}
.kar-titulo--aparte { margin-top: 60px; }
.kar-separador { height: 4px; line-height: 0; }
.kar-separador span { display: inline-block; width: 200px; border-top: 4px solid var(--kar-rojo); }
.kar--centro { text-align: center; }
.kar--blanco.kar-titulo { color: #fff; }
.kar--blanco.kar-separador span { border-color: #fff; }

.kar-texto { font-family: var(--kar-roboto); font-size: 16px; line-height: 1.5; color: #000; }
.kar-texto--justo { text-align: justify; }

.kar-boton {
    display: inline-block;
    text-align: center;
    padding: 12px 24px;
    border-radius: 3px;
    background: var(--kar-rojo);
    color: #fff;
    font-family: var(--kar-roboto);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}
.kar-boton:hover, .kar-boton:focus { color: #fff; }
.kar-boton span { display: inline-block; }

@media (max-width: 767px) {
    .kar-sec__caja, .kar-fila { flex-wrap: wrap; }
    .kar-titulo, .kar-separador, .kar-w:has(> .kar-boton) { text-align: center; }
    .kar-texto { text-align: justify; }
    .kar-col--foto.kar-foto--200 { min-height: 220px; }
    .kar-col--foto.kar-foto--250 { min-height: 270px; }
    .kar-pie__logo, .kar-pie__texto { text-align: center; }
    .kar-pie__logo img { display: inline-block; vertical-align: top; }
    .kar-col--mitad, .kar-col--tercio, .kar-col--cuarto { width: 100%; }
    .kar-pie__dentro { flex-direction: column; }
    .kar-pie__col--logo, .kar-pie__col--texto { width: 100%; }
}

/* Entrada del título del carrusel: «fadeInUp» de Elementor (1,25 s). */
@keyframes kar-sube { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
.kar-hero__contenido { animation: kar-sube 1.25s ease; }
@media (prefers-reduced-motion: reduce) { .kar-hero__contenido { animation: none; } }

/* Enlace «Ir al contenido» y textos solo para lectores de pantalla. */
.kar-saltar:not(:focus), .kar-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.kar-saltar:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 10px 16px; background: #fff; color: #000; font-size: 15px; }