/* ============================================================
   KIOSKO 2 — Landing page
   Prefix: k2-
   ============================================================ */

:root {
    --k2-orange: #ff8c20;
    --k2-orange-hover: #ff7a00;
    --k2-dark: #1a1a1a;
    --k2-dark-2: #272727;
    --k2-gray: #f3f3f3;
    --k2-gray-card: #efefef;
    --k2-green: #22c55e;
    --k2-red: #ef4444;
    --k2-text: #1f1f1f;
    --k2-text-muted: #6b6b6b;
    --k2-radius: 14px;
}

.k2-page {
    font-family: 'Montserrat', sans-serif;
    color: var(--k2-text);
    background: #fff;
}

.k2-page * {
    box-sizing: border-box;
}

/* Ocultar flechas y dots del carrusel de reseñas — no están enganchadas
   con JS en esta landing y dan sensación de roto. */
.k2-page .google_reviews_footer {
    display: none !important;
}

.k2-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   HERO
   ============================================================ */
.k2-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    color: #fff;
    overflow: hidden;
    background-color: #0e0e0e;
}

.k2-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/productos/kiosko2/kiosko_camarero.webp');
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    z-index: 0;
}

.k2-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.25) 35%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.15) 100%
    );
}

.k2-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 130px 24px 90px;
    min-height: 760px;
    display: flex;
    align-items: center;
}

.k2-hero-content {
    max-width: 460px;
}

.k2-hero h1 {
    font-size: clamp(2.4rem, 4.2vw, 3.5rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.k2-hero-accent {
    color: var(--k2-orange);
}

.k2-hero p.k2-hero-sub {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 28px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.k2-hero-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 28px;
}

.k2-hero-price-amount {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

.k2-hero-price-period {
    font-size: 0.42em;
    font-weight: 700;
    opacity: 0.9;
}

.k2-hero-price-foot {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--k2-orange, #FF8C20);
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.k2-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 28px;
    background: var(--k2-orange);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255,140,32,0.25);
    transition: transform .15s ease, filter .15s ease;
    letter-spacing: 0.02em;
}

.k2-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ============================================================
   TESTIMONIAL — José Antonio Guerra
   ============================================================ */
.k2-testimonial {
    padding: 36px 0;
    background: #fff;
}

.k2-testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.k2-testimonial-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0,0,0,0.14);
    background: #111;
    aspect-ratio: 16 / 10;
}

.k2-testimonial-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k2-testimonial-content {
    position: relative;
}

.k2-testimonial-quote {
    width: 36px;
    height: 36px;
    color: var(--k2-orange);
    margin-bottom: 16px;
    opacity: 0.9;
}

.k2-testimonial-quote-text {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 32px;
    color: var(--k2-dark-2);
    letter-spacing: -0.01em;
}

.k2-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.k2-testimonial-author img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.k2-testimonial-author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.k2-testimonial-author-meta strong {
    font-weight: 700;
    color: var(--k2-dark-2);
    font-size: 1rem;
}

.k2-testimonial-author-meta span {
    font-size: 0.88rem;
    color: var(--k2-text-muted);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .k2-testimonial {
        padding: 36px 0;
    }
    .k2-testimonial-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .k2-testimonial-media {
        aspect-ratio: 16 / 10;
    }
    .k2-testimonial-quote-text {
        font-size: 1.2rem;
        margin-bottom: 22px;
    }
    .k2-testimonial-author img {
        width: 48px;
        height: 48px;
    }
}

/* ============================================================
   DEVICE VIEWER + SECTOR TITLE — clon del diseño original (productos.css)
   ============================================================ */
.k2-page .sector_title {
    padding: clamp(28px, 3.8vw, 44px) 24px 16px;
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    place-content: center;
    text-align: center;
}

.k2-page .sector_title h1 {
    /* título potente: domina sobre el contenido de abajo (más grande, más bold y más oscuro) */
    font-size: clamp(1.55rem, 5.5vw, 3rem);
    font-weight: 800;
    color: #16181c;
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

/* Acento de color en el título de funciones: resalta la parte clave en naranja Turbopos */
.k2-page .sector_title h1 em {
    font-style: normal;
    color: #FF8C20;
}

/* Configurador de funciones — escenario oscuro potente: a la izquierda el copy (encima)
   y el kiosko (debajo); a la derecha la botonera. */
.k2-page .device_viewer {
    padding: 8px 20px clamp(40px, 6vw, 60px);
    max-width: 560px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

/* ESCENARIO vertical CLARO (gris suave) — la demo va oscura y esta sección clara para alternar */
.k2-page .device_viewer_container {
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.8vw, 20px);
    padding: clamp(22px, 4vw, 36px) clamp(16px, 3.4vw, 30px) 0;
    border-radius: clamp(22px, 4vw, 28px);
    overflow: hidden;
    background:
        radial-gradient(62% 48% at 45% 58%, rgba(255, 140, 32, .07), transparent 70%),
        linear-gradient(180deg, #f6f7f9 0%, #e9ebef 100%);
    border: 1px solid #e4e6ea;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
}

/* FILA: kiosko protagonista (izq) + botonera estrecha (dcha), a la misma altura */
.k2-page .dv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(12px, 3.5vw, 28px);
    width: 100%;
}

/* Kiosko: área protagonista de alto fijo. overflow visible para NO recortar la sombra del
   kiosko en el límite con la botonera (eso causaba el cambio de color). El pie se recorta
   igualmente por el overflow:hidden de la tarjeta (.device_viewer_container). */
.k2-page .device_viewer_sliders {
    position: relative;
    height: clamp(510px, 62vw, 560px);
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.k2-page .device_viewer_sliders .slide {
    display: none;
}

.k2-page .device_viewer_sliders .slide.active {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centrado en su columna (antes -7% -> se cortaba por la izquierda y quedaba muy pegado en móvil) */
    transform: translateX(0);
}

/* Cuerpo del kiosko: grande, vertical. Alto fijo + aspect-ratio -> sin saltos al cambiar. */
.k2-page .device_viewer_sliders .slide img {
    width: auto;
    max-width: 100%;
    height: clamp(470px, 57vw, 520px);
    aspect-ratio: 807 / 1776;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .26));
}

/* Pie/pedestal: columna blanca limpia bajo el kiosko (como la referencia), más estrecha y
   centrada; se recorta por el borde inferior de la tarjeta. */
.k2-page .device_viewer_sliders .slide.active::after {
    content: "";
    width: 38%;
    height: clamp(200px, 26vw, 240px);
    /* la imagen del kiosko tiene ~2,4% transparente abajo; subimos el pie para que enganche
       con la base real del equipo (queda detrás por el z-index, sin hueco) */
    margin-top: -16px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #d3d8df 0%, #f1f3f6 22%, #ffffff 50%, #eceef2 78%, #cbd0d8 100%);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .14);
    z-index: 0;
}

/* (La penumbra de suelo ahora va en el fondo de la tarjeta, a todo el ancho, para que no
   haya un cambio de color entre la zona del kiosko y la de la botonera.) */

/* Botonera lateral: columna ESTRECHA tipo menú premium, glass oscuro, a la altura del kiosko.
   Los 6 botones se reparten de arriba abajo (misma altura visual que el kiosko). */
.k2-page .device_viewer_tabs {
    align-self: start;
    /* misma altura que el CUERPO del kiosko (la imagen). El padding superior/inferior mete
       los botones dentro de la superficie (Promos y Pago no se salen) y los junta un poco. */
    height: clamp(470px, 57vw, 520px);
    width: clamp(96px, 24vw, 128px);
    min-width: 0;
    margin: 0;
    padding: clamp(36px, 9vw, 44px) 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(8px, 1.4vw, 10px);
    z-index: 3;
}

.k2-page .device_viewer_tabs .device_tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    white-space: nowrap;
    font-size: clamp(.72rem, 2.3vw, .84rem);
    font-weight: 600;
    letter-spacing: .01em;
    color: #3a3d44;
    text-align: center;
    background: #ffffff;
    border: 1.5px solid #e2e4e9;
    border-radius: 12px;
    padding: clamp(12px, 3vw, 14px) 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.k2-page .device_viewer_tabs .device_tab:hover {
    border-color: #FF8C20;
    color: #FF8C20;
}

.k2-page .device_viewer_tabs .device_tab.active {
    color: #fff;
    background: linear-gradient(135deg, #FF8C20, #f97316);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(255, 140, 32, .5);
}

/* Copy integrado en el escenario, ENCIMA del kiosko (texto oscuro sobre fondo claro).
   Altura reservada + centrado vertical -> al cambiar de función no salta nada. */
.k2-page .device_viewer_copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* el texto baja a pegarse al kiosko (antes centrado -> dejaba aire debajo) */
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    min-height: clamp(110px, 13vw, 124px);
    text-align: center;
}

.k2-page .device_viewer_copy .dv-copy {
    display: none;
}

.k2-page .device_viewer_copy .dv-copy.active {
    display: block;
}

.k2-page .device_viewer_copy .dv-copy h4 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    font-weight: 800;
    color: #1c1f24;
    line-height: 1.14;
    letter-spacing: -0.015em;
    margin: 0 0 9px;
}

.k2-page .device_viewer_copy .dv-copy p {
    font-size: clamp(.98rem, 1.5vw, 1.12rem);
    font-weight: 400;
    color: #565b63;
    line-height: 1.5;
    max-width: 42ch;
    margin: 0 auto;
}

/* Móvil: tarjeta a todo el ancho; botonera un poco más estrecha */
@media screen and (max-width: 600px) {
    .k2-page .device_viewer {
        padding: 8px 14px clamp(30px, 7vw, 44px);
    }
    .k2-page .dv-row {
        gap: clamp(10px, 3.5vw, 18px);
    }
    .k2-page .device_viewer_tabs {
        width: clamp(86px, 26vw, 116px);
    }
}

@media screen and (max-width: 680px) {
    .k2-page .sector_title {
        padding: 30px 22px 14px;
    }
}

/* ============================================================
   DEMO INLINE — vídeo embebido visible (estilo tpv-software-hosteleria).
   El vídeo del kiosko es un Short vertical -> marco 9/16.
   ============================================================ */
.k2-demo {
    background: #0e0e0e;
    color: #fff;
    padding: clamp(40px, 5vw, 60px) 24px clamp(34px, 4.5vw, 50px);
    text-align: center;
}
.k2-demo__head {
    max-width: 680px;
    margin: 0 auto 24px;
}
.k2-demo__eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FF8C20;
    margin: 0 0 8px;
}
.k2-demo__head h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0;
    color: #fff;
}
.k2-demo__head h2 em {
    font-style: normal;
    color: #FF8C20;
}
.k2-demo__video {
    width: 100%;
    /* Marco 9:16 con tamaño ESTABLE: medido por ancho (no por alto de ventana), así no
       cambia con la barra del navegador in-app de Instagram. ~260px equivale al 55vh
       original en un móvil típico. */
    max-width: min(68vw, 260px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.k2-demo__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media screen and (max-width: 600px) {
    .k2-demo {
        padding: 32px 16px 32px;
    }
    .k2-demo__video {
        border-radius: 12px;
    }
}

/* ============================================================
   CASOS DE ÉXITO — selector de vídeos testimonio (copiado de tpv-software-hosteleria)
   ============================================================ */
.tpv-casos { background: #0e0e0e; color: #fff; padding: clamp(44px, 6vw, 72px) 24px clamp(52px, 7vw, 80px); text-align: center; }
.tpv-casos__head { max-width: 680px; margin: 0 auto 24px; }
.tpv-casos__eyebrow { display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FF8C20; margin: 0 0 8px; }
.tpv-casos__head h2 { font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin: 0; color: #fff; }
.tpv-casos__head h2 em { font-style: normal; color: #FF8C20; }
.tpv-casos__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto 28px; }
.tpv-casos__tab { flex: 0 0 auto; white-space: nowrap; font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 700; color: #ddd; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 100px; padding: 10px 20px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.tpv-casos__tab:hover { border-color: #FF8C20; color: #FF8C20; }
.tpv-casos__tab.active { background: linear-gradient(135deg, #FF8C20, #f97316); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(255, 140, 32, .4); }
.tpv-casos__video { position: relative; max-width: 920px; margin: 0 auto; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); transition: max-width .3s ease; }
.tpv-casos__video #casoExitoVideo, .tpv-casos__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tpv-casos__tap { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tpv-casos__fs { position: absolute; bottom: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 9px; background: rgba(0, 0, 0, .55); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.tpv-casos__fs:hover { background: rgba(0, 0, 0, .82); transform: scale(1.06); }
.tpv-casos__fs svg { width: 26px; height: 26px; fill: #fff; }
/* Vídeo vertical (YouTube Short): marco 9:16 con ancho ESTABLE (medido por ancho de
   viewport, no por alto), para que no cambie con la barra del navegador in-app. */
.tpv-casos__video--vertical { aspect-ratio: 9/16; max-width: min(68vw, 260px); }
/* Override móvil (igual que en tpv-software-hosteleria) — botones más compactos */
@media screen and (max-width: 600px) {
    .tpv-casos { padding: 34px 18px 40px; }
    .tpv-casos__tabs { gap: 10px; margin-bottom: 22px; }
    .tpv-casos__tab { font-size: .85rem; padding: 8px 14px; }
    .tpv-casos__video { border-radius: 12px; }
}

/* ============================================================
   OPINIONES / AUTORIDAD — valoración Google + logos + reseñas (copiado de tpv-software-hosteleria).
   El marquee de logos (brands_marquee*) usa CSS global de style.css.
   ============================================================ */
.tpv-autoridad { padding: clamp(48px, 6vw, 80px) 0; background: #fff; color: #1b1b1b; overflow: hidden; }
.tpv-autoridad__head { max-width: 760px; margin: 0 auto 28px; padding: 0 24px; text-align: center; }
.tpv-autoridad__title { font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 18px; }
.tpv-autoridad__title em { font-style: normal; color: #FF8C20; }
.g-rating { display: inline-flex; align-items: center; gap: 12px; font-family: 'Montserrat', Arial, sans-serif; flex-wrap: wrap; justify-content: center; }
.g-rating__score { font-size: 1.7rem; font-weight: 800; color: #1b1b1b; line-height: 1; }
.g-rating__stars { display: inline-flex; align-items: center; }
.g-rating__stars svg { height: 20px; width: auto; display: block; }
.g-rating__meta { display: inline-flex; align-items: center; gap: 7px; color: #666; font-size: .95rem; }
.g-rating__meta img { height: 18px; width: auto; }
.tpv-autoridad .brands_marquee { margin: 10px 0; }
.rev-strip { margin-top: 30px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.rev-strip::-webkit-scrollbar { display: none; }
.rev-strip.is-dragging { cursor: grabbing; }
.rev-strip.is-dragging .rev-card { pointer-events: none; }
.rev-strip__track { display: flex; gap: 20px; padding: 8px 24px 18px; align-items: stretch; }
.rev-card { flex: 0 0 320px; width: 320px; box-sizing: border-box; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.rev-card__head { display: flex; align-items: center; gap: 12px; }
.rev-card__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #eee; }
.rev-card__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.rev-card__name { font-weight: 700; font-size: .95rem; color: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-card__stars svg { height: 14px; width: auto; display: block; }
.rev-card__g { height: 22px; width: auto; flex: 0 0 auto; align-self: flex-start; }
.rev-card__text { margin: 0; font-size: .92rem; line-height: 1.5; color: #444; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media screen and (max-width: 600px) {
    .rev-strip__track { padding: 8px 18px 16px; gap: 14px; }
    .rev-card { flex: 0 0 80vw; width: 80vw; }
}

/* ============================================================
   ECOSISTEMA — selector de productos (copiado de tpv-software-hosteleria)
   ============================================================ */
.eco-sel { background: #0e0e0e; color: #fff; padding: clamp(48px, 6vw, 84px) 24px; font-family: 'Montserrat', Arial, sans-serif; text-align: center; }
.eco-sel__head { max-width: 720px; margin: 0 auto 26px; }
.eco-sel__eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FF8C20; margin: 0 0 8px; }
.eco-sel__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin: 0; color: #fff; }
.eco-sel__head h2 em { font-style: normal; color: #FF8C20; }
.eco-sel__head p { font-size: clamp(1rem, 1.8vw, 1.15rem); color: rgba(255, 255, 255, .75); margin: 12px 0 0; line-height: 1.5; }
.eco-sel__sub { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #fff; margin: 0 auto 20px; max-width: 680px; }
.eco-sel__sub em { font-style: normal; color: #FF8C20; }
.eco-sel__head + .eco-sel__sub { margin-top: 34px; }
.eco-sel + .eco-sel { padding-top: 0; }
.eco-sel__panel { max-width: 980px; margin: 0 auto; display: flex; align-items: stretch; gap: 0; background: linear-gradient(180deg, #1a1c22, #141519); border: 1px solid #2e3039; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); text-align: left; }
.eco-sel__media { flex: 0 0 52%; min-width: 0; background: #000; }
.eco-sel__media img { width: 100%; height: 100%; min-height: clamp(240px, 28vw, 350px); object-fit: cover; display: block; }
.eco-sel__info { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; padding: clamp(24px, 3.5vw, 42px); }
.eco-sel__info h3 { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 800; color: #fff; margin: 0; line-height: 1.12; letter-spacing: -.01em; }
.eco-sel__info p { font-size: clamp(.95rem, 1.6vw, 1.05rem); line-height: 1.55; color: rgba(255, 255, 255, .78); margin: 0; }
.eco-sel__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 14px auto 0; }
.eco-sel__tab { flex: 0 0 auto; white-space: nowrap; font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 700; color: #ddd; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 100px; padding: 12px 24px; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.eco-sel__tab:hover { border-color: #FF8C20; color: #FF8C20; }
.eco-sel__tab.active { background: linear-gradient(135deg, #FF8C20, #f97316); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(255, 140, 32, .4); }

/* Ecosistema en bloques (tarjetas de producto) */
.k2-eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1180px; margin: 30px auto 0; }
.k2-eco-card { position: relative; display: block; height: 420px; border-radius: 8px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); transition: transform .25s ease, box-shadow .25s ease; }
.k2-eco-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }
.k2-eco-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.k2-eco-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .82) 100%); }
.k2-eco-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px 28px; gap: 4px; }
.k2-eco-card__title { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; line-height: 1.1; color: #fff; }
.k2-eco-card__price { font-size: 1.35rem; font-weight: 800; margin: 0; color: #fff; }
.k2-eco-card__initial { font-size: 1rem; font-weight: 400; margin: 0 0 14px; color: rgba(255, 255, 255, .9); }
.k2-eco-card__cta { display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: .92rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #FF8C20, #f97316); border-radius: 100px; padding: 11px 26px; transition: filter .15s ease; }
.k2-eco-card:hover .k2-eco-card__cta { filter: brightness(1.08); }
@media screen and (max-width: 980px) {
    .k2-eco-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .k2-eco-card { height: 360px; }
}
@media screen and (max-width: 560px) {
    .k2-eco-grid { grid-template-columns: 1fr; max-width: 420px; gap: 14px; }
    .k2-eco-card { height: 320px; }
}

/* ============================================================
   CTA FINAL — banner con imagen + título + botón
   ============================================================ */
.k2-cta { padding: 25px; background: #0e0e0e; }
.k2-cta__container { position: relative; height: 320px; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; place-content: center; overflow: hidden; border-radius: 8px; padding: 25px; }
.k2-cta__bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.k2-cta__container::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)); }
.k2-cta__container .img_mobile { display: none; }
.k2-cta__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.k2-cta__text h2 { font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.15; color: #fff; margin: 0; max-width: 24ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.k2-cta__btn { display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #FF8C20, #f97316); border: none; border-radius: 100px; padding: 16px 38px; text-decoration: none; box-shadow: 0 12px 30px rgba(255, 140, 32, .5); transition: transform .2s ease, box-shadow .2s ease; }
.k2-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(255, 140, 32, .66); color: #fff; }
@media screen and (max-width: 980px) {
    .k2-cta__container { min-height: 480px; height: auto; }
    .k2-cta__container .img_desktop { display: none; }
    .k2-cta__container .img_mobile { display: block; }
}

@media screen and (max-width: 768px) {
    .eco-sel { padding: 36px 18px 44px; }
    .eco-sel__panel { flex-direction: column; text-align: center; }
    .eco-sel__media { flex: 0 0 auto; width: 100%; }
    .eco-sel__media img { min-height: 0; height: 230px; }
    .eco-sel__info { align-items: center; padding: 20px 18px 24px; }
    .eco-sel__tabs { gap: 10px; margin-top: 12px; }
    .eco-sel__tab { font-size: .85rem; padding: 8px 14px; }
}

/* ============================================================
   PRICE BAND — tarjeta premium centrada (propuesta 03)
   ============================================================ */
.k2-price-band {
    background: #fff;
    padding: 30px 24px 26px;
    display: flex;
    justify-content: center;
}

.k2-price-card {
    padding: 0;
    text-align: center;
}

.k2-price-card-amount {
    font-size: clamp(2.8rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--k2-dark-2);
}

.k2-price-card-period {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--k2-text-muted);
    margin-left: 4px;
    letter-spacing: 0;
}

.k2-price-card-foot {
    margin: 14px 0 0;
    font-size: 0.92rem;
    color: var(--k2-text-muted);
    line-height: 1.4;
}

.k2-price-card-foot strong {
    color: var(--k2-dark-2);
    font-weight: 700;
}

@media (max-width: 720px) {
    .k2-price-band {
        padding: 22px 18px 20px;
    }
    .k2-price-card {
        padding: 0;
        width: 100%;
    }
    .k2-price-card-amount {
        font-size: 2.3rem;
    }
}

/* ============================================================
   ICON ROW
   ============================================================ */
.k2-iconrow {
    background: #e8e8e8;
    padding: 28px 0;
}

.k2-iconrow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
    text-align: center;
}

.k2-iconrow-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    color: var(--k2-dark-2);
}

.k2-iconrow-item img {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.k2-iconrow-item-text {
    text-align: left;
    line-height: 1.15;
}

.k2-iconrow-item-text strong {
    font-size: 1.3rem;
    display: block;
    font-weight: 700;
}

.k2-iconrow-item-text span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--k2-text-muted);
}

/* ============================================================
   CARACTERÍSTICAS (statistics) — mismo bloque y formato que TPV software hostelería.
   Base tomada de productos.css; override móvil de tpv-software-hosteleria (3 en fila,
   se oculta el 2º "Fácil", iconos ocultos y divisores).
   ============================================================ */
/* ===== Barra de stats igual que la de datafono_comandera (escritorio): fondo gris,
   icono a la izquierda 46px, texto 28px #272727, agrupada al centro con divisores ===== */
.statistics_section {
    background: #f4f5f7;
    padding: 24px;
}
.statistics_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    justify-items: stretch;
    align-items: stretch;
    gap: 0;
}
/* Igual que datafono: se muestran 3 (se oculta el 2º item) */
.statistics-data:nth-child(2) {
    display: none;
}
.statistics-data {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 34px;
    width: 100%;
}
/* Divisor de altura fija, centrado verticalmente (mismo largo en las dos barras) */
.statistics-data + .statistics-data::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 42px;
    background: #272727;
}
.statistics-data .statistics_icon {
    height: auto;
    max-height: 38px;
    max-width: 38px;
}
.statistics-data .statistics_icon img {
    width: auto;
    height: auto;
    max-width: 38px;
    max-height: 38px;
    display: block;
}
.statistics-data .statistics-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.statistics-data h5 {
    font-size: 30px;
    font-weight: 700;
    color: #272727;
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
}
.statistics-data p {
    font-size: 16px;
    font-weight: 700;
    color: #272727;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .statistics_section {
        padding: 18px 12px;
    }
    .statistics_container {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        align-items: start;
    }
    .statistics-data {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 3px;
        text-align: center;
        justify-content: flex-start;
        padding: 2px 6px;
    }
    .statistics-data:nth-child(2) {
        display: none;
    }
    .statistics-data .statistics_icon {
        display: block;
        margin: 0 auto;
        max-height: 46px;
        max-width: 46px;
    }
    .statistics-data + .statistics-data {
        border-left: 2px solid #272727;
    }
    .statistics-data + .statistics-data::before {
        display: none;
    }
    .statistics-data .statistics-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    .statistics-data h5 {
        font-size: 20px;
        font-weight: 800;
        color: #272727;
        line-height: 1.1;
        letter-spacing: -.01em;
        white-space: nowrap;
    }
    .statistics-data p {
        font-size: 12px;
        font-weight: 600;
        color: #272727;
        line-height: 1.2;
        margin: 0;
        white-space: normal;
    }
}

/* ============================================================
   PAIN POINTS
   ============================================================ */
.k2-pain {
    background: var(--k2-gray);
    padding: 36px 0;
}

.k2-eyebrow {
    text-align: center;
    color: var(--k2-orange);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.k2-section-title {
    text-align: center;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 700;
    margin: 0 0 40px;
    color: var(--k2-dark-2);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.k2-pain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.k2-pain-card {
    background: var(--k2-dark-2);
    color: #fff;
    border-radius: var(--k2-radius);
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.k2-pain-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.k2-pain-card p {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
    color: #c9c9c9;
}

/* ============================================================
   SOLUTION GRID
   ============================================================ */
.k2-solution {
    padding: 36px 0;
    background: #fff;
}

.k2-sol-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: 560px;
}

.k2-sol-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--k2-radius);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    cursor: default;
    isolation: isolate;
}

.k2-sol-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
}

.k2-sol-card .k2-sol-label {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 2;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.k2-sol-card.k2-ventas {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background-image: url('/assets/images/productos/kiosko2/kiosk-ventas.webp');
}

.k2-sol-card.k2-idiomas {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-image: url('/assets/images/productos/kiosko2/kiosk-idioma.webp');
}

.k2-sol-card.k2-promos {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-image: url('/assets/images/productos/kiosko2/kiosk-promo.webp');
}

.k2-sol-card.k2-personal {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
    background-image: url('/assets/images/productos/kiosko2/kiosk-personal.webp');
}

.k2-sol-card.k2-tiempos {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-image: url('/assets/images/productos/kiosko2/kiosk-tiempo.webp');
}

.k2-sol-card.k2-mesa {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-image: url('/assets/images/productos/kiosko2/kiosk-pedido.webp');
}

/* ============================================================
   DEMO BANNER (dark with image bg)
   ============================================================ */
.k2-demo-banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 36px 0;
    background-color: #111;
}

.k2-demo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/productos/kiosko2/kiosk-demo.webp');
    background-size: cover;
    background-position: center 30%;
    opacity: 0.55;
    z-index: 0;
}

.k2-demo-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
    z-index: 0;
}

.k2-demo-banner .k2-wrap {
    position: relative;
    z-index: 1;
    text-align: center;
}

.k2-demo-banner h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 28px;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* ============================================================
   COMPARISON
   ============================================================ */
.k2-compare {
    padding: 36px 0;
    background: #fff;
}

.k2-compare-title {
    text-align: center;
    font-size: clamp(1.7rem, 2.8vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 40px;
    letter-spacing: -0.01em;
}

.k2-compare-title .k2-vs {
    color: var(--k2-orange);
    font-weight: 700;
}

.k2-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
}

.k2-compare-card {
    background: var(--k2-gray-card);
    border-radius: var(--k2-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.k2-compare-header {
    text-align: center;
    padding: 22px 16px 6px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--k2-dark-2);
}

.k2-compare-rows {
    padding: 16px 22px 22px;
    flex: 1;
}

.k2-compare-row {
    text-align: center;
    padding: 12px 0;
}

.k2-compare-row + .k2-compare-row {
    border-top: 1px solid rgba(0,0,0,0.07);
}

.k2-compare-row .k2-row-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--k2-text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.k2-compare-row .k2-row-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--k2-dark-2);
}

.k2-row-value svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.k2-compare-footer {
    text-align: center;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 18px 16px;
}

.k2-compare-card.k2-cam .k2-compare-footer {
    background: var(--k2-red);
}

.k2-compare-card.k2-kiosko .k2-compare-footer {
    background: var(--k2-green);
}

/* ============================================================
   DARK CTA WITH PHONE INPUT
   ============================================================ */
.k2-cta-call {
    margin: 56px auto 0;
    max-width: 880px;
    background: var(--k2-dark-2);
    border-radius: var(--k2-radius);
    padding: 40px 32px;
    text-align: center;
    color: #fff;
}

.k2-cta-call h3 {
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 700;
    margin: 0 0 24px;
}

/* ============================================================
   HERO CTAs stack (Ver demo + Llamadme)
   ============================================================ */
.k2-hero-ctas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.k2-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.k2-btn-ghost:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.85);
    transform: translateY(-1px);
}

.k2-btn-ghost svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================================
   VIDEO MODAL (YouTube Shorts demo)
   ============================================================ */
.k2-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(8,8,8,0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.k2-video-modal.open {
    display: flex;
    animation: k2VideoFade 0.18s ease-out;
}

@keyframes k2VideoFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.k2-video-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
    z-index: 2;
}

.k2-video-close:hover {
    background: rgba(255,255,255,0.22);
}

.k2-video-close svg {
    width: 22px;
    height: 22px;
}

.k2-video-frame {
    position: relative;
    height: min(156vw, 900px);
    aspect-ratio: 9 / 16;
    width: auto;
    max-width: 100%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.k2-video-iframe {
    position: absolute;
    inset: 0;
}

.k2-video-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 560px) {
    .k2-video-modal {
        padding: 0;
    }
    .k2-video-frame {
        height: 100svh;
        max-height: 100svh;
        border-radius: 0;
    }
    .k2-video-close {
        top: 14px;
        right: 14px;
    }
}

/* ============================================================
   SOCIAL PROOF (stars + brands)
   ============================================================ */
.k2-proof {
    padding: 40px 0 60px;
    text-align: center;
}

.k2-proof h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 14px;
}

.k2-proof-rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.k2-proof-rating-link {
    color: var(--k2-text);
    text-decoration: underline;
    font-weight: 600;
    font-size: 0.95rem;
}

.k2-proof-rating-link:hover {
    color: var(--k2-orange);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 980px) {
    .k2-hero {
        /* Altura FIJA (no svh/vh/dvh) para que el navegador in-app de
           Instagram/Facebook no la redimensione al mostrar/ocultar su barra.
           Un pelin mas baja que la pantalla tipica para que asome la
           siguiente seccion e invite a hacer scroll, igual que el 94svh de
           escritorio pero estable. */
        min-height: 600px;
        background: #0e0e0e;
    }
    .k2-hero-bg {
        background-image: url('/assets/images/productos/kiosko2/kiosko_camarero-mov.webp');
        background-position: center bottom;
        background-size: cover;
    }
    .k2-hero-bg::after {
        background:
            linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 22%, rgba(0,0,0,0.0) 42%, rgba(0,0,0,0.0) 100%);
    }
    .k2-hero-inner {
        padding: 92px 22px 28px;
        min-height: 600px;
        align-items: stretch;
    }
    .k2-hero-content {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .k2-hero-ctas {
        margin-top: auto;
        padding-top: 32px;
        align-items: center;
    }
    .k2-hero h1 {
        font-size: clamp(2rem, 7.2vw, 2.5rem);
        line-height: 1.08;
        margin-bottom: 14px;
    }
    .k2-hero p.k2-hero-sub {
        margin-bottom: 22px;
        font-size: 0.98rem;
    }
    .k2-pain {
        padding: 36px 0;
    }
    .k2-solution {
        padding: 36px 0;
    }
    .k2-compare {
        padding: 36px 0;
    }
    .k2-section-title {
        margin: 0 0 40px;
    }
    .k2-compare-title {
        margin: 0 0 40px;
    }
    .k2-cta-call {
        margin: 40px auto 0;
        padding: 32px 22px;
    }
    .k2-iconrow-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 8px;
    }
    .k2-iconrow-item {
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        text-align: center;
    }
    .k2-iconrow-item img {
        width: 38px;
        height: 38px;
    }
    .k2-iconrow-item-text {
        text-align: center;
    }
    /* En móvil ocultamos "No se queja" (4º item) -> quedan 3 en una fila limpia, como en TPV */
    .k2-iconrow-item:nth-child(4) {
        display: none;
    }
    .k2-pain-grid {
        grid-template-columns: 1fr 1fr;
    }
    .k2-sol-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6, 140px);
        height: auto;
    }
    .k2-sol-card.k2-ventas {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        background-image: url('/assets/images/productos/kiosko2/kiosk-ventas-mov.webp');
    }
    .k2-sol-card.k2-idiomas {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        background-image: url('/assets/images/productos/kiosko2/kiosk-idioma-mov.webp');
    }
    .k2-sol-card.k2-promos {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        background-image: url('/assets/images/productos/kiosko2/kiosk-promo-mov.webp');
    }
    .k2-sol-card.k2-personal {
        grid-column: 1 / 3;
        grid-row: 4 / 6;
        background-image: url('/assets/images/productos/kiosko2/kiosk-personal-mov.webp');
    }
    .k2-sol-card.k2-tiempos {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
        background-image: url('/assets/images/productos/kiosko2/kiosk-tiempo-mov.webp');
    }
    .k2-sol-card.k2-mesa {
        grid-column: 2 / 3;
        grid-row: 6 / 7;
        background-image: url('/assets/images/productos/kiosko2/kiosk-pedido-mov.webp');
    }
    .k2-sol-card .k2-sol-label {
        font-size: 1.05rem;
        left: 14px;
        bottom: 12px;
    }
    .k2-compare-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .k2-cta-call-form {
        flex-direction: column;
    }
    .k2-cta-call-form input[type="tel"],
    .k2-cta-call-form button {
        width: 100%;
    }
    .k2-demo-banner {
        padding: 36px 0;
    }
    .k2-demo-banner::before {
        background-image: url('/assets/images/productos/kiosko2/kiosk-demo-mov.webp');
    }
}

@media (max-width: 560px) {
    .k2-pain-grid {
        grid-template-columns: 1fr;
    }
    .k2-iconrow-item-text strong {
        font-size: 1.1rem;
    }
}

/* ===== Vídeo de fondo del hero de kiosko (igual que heladería): vídeo bajo el degradado y el contenido ===== */
.k2-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.k2-hero-bg { background-image: none; }

/* ===== Hero de kiosko (tamaños como datafono): mismo alto, contenido centrado, precio en el hero, espacios como datafono ===== */
/* Alto del hero igual que datafono (100svh menos la barra inferior) */
/* Un pelin mas bajo que el viewport para que asome la siguiente seccion e invite a hacer scroll.
   SOLO escritorio: en movil mandan los px fijos de la media query (max-width:980px), porque
   el navegador in-app de Instagram/Facebook redimensiona con svh al mostrar/ocultar su barra
   y todo "salta" al hacer scroll. NO usar svh/vh/dvh para el alto del hero en movil. */
@media (min-width: 981px) {
    .k2-hero { min-height: 94svh; }
    .k2-hero-inner { min-height: 94svh; }
}
/* Mas aire entre bloques del hero para que no quede apelotonado */
.k2-hero-content { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
.k2-hero .k2-hero-content > * { margin: 0; }
.k2-hero h1 { font-size: clamp(2.6rem, 7vw, 5.125rem); font-weight: 800; line-height: 1.08; }
/* Primer titular ("Tus clientes ya no esperan.") como antetitulo: mucho mas pequeno
   que el remate naranja ("Pon un kiosko."), que conserva el tamano grande del h1. */
.k2-hero h1 .k2-hero-pre { display: inline-block; font-size: .47em; font-weight: 700; line-height: 1.2; margin-bottom: .35em; }
/* El naranja se confundia con el fondo: halo oscuro detras para despegarlo sin cambiar color */
.k2-hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.45); }
/* Naranja saturado y brillante, a juego con el CTA. SIN reflejo dorado claro (se iba al
   blanco) y SIN el naranja oscuro del final (apagaba el texto): tono naranja uniforme. */
.k2-hero .k2-hero-accent {
    background: linear-gradient(180deg, #ffb257 0%, #ff9a30 55%, #ff8c20 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    /* Sombra mas suave: despega el texto del fondo sin oscurecerlo */
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
}
/* CTA a juego con el titular metalizado: mismo degradado naranja */
.k2-hero .k2-hero-ctas .cta_info_btn {
    background: linear-gradient(180deg, #ffb257 0%, #ff9a30 40%, #ff8c20 70%, #ff7a00 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(255,122,0,.35);
    border: 0;
}
.k2-hero .k2-hero-ctas .cta_info_btn:hover {
    background: linear-gradient(180deg, #ffc06e 0%, #ffa642 40%, #ff9526 70%, #ff8410 100%);
}
.k2-hero p.k2-hero-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 400; margin: 0; }
.k2-hero-ctas { margin: 0; padding: 0; }
.k2-hero-content .k2-btn-primary { display: inline-flex; align-items: center; gap: .55rem; min-width: 270px; height: auto; padding: 1rem 1.7rem; font-size: 1rem; text-transform: uppercase; border-radius: 100px; }
.k2-hero-content .k2-btn-primary svg { flex: 0 0 auto; }
/* Precio dentro del hero (mismo tamaño que datafono: 32px / 16px) */
.k2-hero-priceblock { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.k2-hero-price-main { font-size: 32px; font-weight: 800; line-height: 1; color: #fff; }
.k2-hero-price-sub { font-size: 16px; font-weight: 400; color: #fff; }
.k2-hero-trust { font-size: .92rem; color: #fff; }
.k2-hero-trust b { color: #fff; }
/* Ocultar la barra gris (tpoffer) y su efecto */
.tpoffer { display: none !important; }
/* Degradado vertical (como heladería/datafono) para texto centrado legible sobre el vídeo */
.k2-hero-bg::after { background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), linear-gradient(180deg, rgba(20,14,9,.55) 0%, rgba(20,14,9,.2) 35%, rgba(20,14,9,.45) 70%, rgba(20,14,9,.85) 100%); }

/* ===== Badges del hero de kiosko (copiados tal cual de datafono): blanco translúcido ===== */
/* Badges mas pegados al titular (anula parte del gap de 30px del contenido) */
.k2-hero .rl-hero-badges { display: flex; gap: 10px; flex-wrap: nowrap; justify-content: center; margin: -18px 0 0; }
.k2-hero .rl-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.30); border-radius: 10px; padding: 8px 18px; width: auto; }
.k2-hero .rl-hero-badge .rl-badge-ic { width: 20px; height: 20px; flex-shrink: 0; background-color: #fff; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.k2-hero .rl-badge-ic--key { -webkit-mask-image: url(/assets/images/icons/no_key.svg); mask-image: url(/assets/images/icons/no_key.svg); }
.k2-hero .rl-badge-ic--verifactu { -webkit-mask-image: url(/assets/images/icons/ic_hacienda.svg); mask-image: url(/assets/images/icons/ic_hacienda.svg); }
.k2-hero .rl-hero-badge span { font-size: 1.01rem; color: #fff; font-weight: 600; white-space: nowrap; }
@media (max-width: 980px) {
  .k2-hero .rl-hero-badge { padding: 6px 12px; gap: 6px; }
  .k2-hero .rl-hero-badge span { font-size: .82rem; }
  .k2-hero .rl-hero-badge .rl-badge-ic { width: 16px; height: 16px; }
}