/* ═══════════════════════════════════════════════════════════════════════
   /mreservas5 — ECOSISTEMA de la home (.eco-acc), 24/09/2026
   Copia literal de los estilos que usa esa sección en la home, en el mismo orden:
     1) base de .device_viewer (productos.css) y su degradado/margen de imagen (tpv.css)
     2) del <style> inline de index.php: funciones (#tpv-funciones), demo (.tpv-demo),
        botón (.eco-mos__cta) y el ecosistema (.eco-acc, .eco-card, .eco-info, .eco-demo-modal)
   Única diferencia: los negros (#1b1b1b, #1b1b1b, #1b1b1b, #1b1b1b…) pasan a #1b1b1b, el
   negro de la web. Si cambian en la home, hay que volver a copiarlos: no es un include.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) productos.css */
/*device_viewer*/

.device_viewer {
    padding: 25px;
    padding-bottom: 0;
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.device_viewer_container {
    margin: auto;
    background: #fff;
    border-radius: 10px;
}

.device_viewer_tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: space-around;
    gap: 10px;
    padding: 10px;
    background: #eaeaea;
    border-radius: 8px;
}

.device_viewer_tabs .device_tab {
    border: none;
    font-size: 1.25rem;
    color: #1b1b1b;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device_viewer_tabs .device_tab.active {
    background: #fff;
}

.device_viewer_sliders .slide {
    padding: 25px;
    padding-bottom: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;
}
.device_viewer_sliders .slide.active {
    display: flex;
}

.device_viewer_sliders .slide h4 {
    font-size: 1.87rem;
    font-weight: bold;
}

.device_viewer_sliders .slide p {
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
    /* text-wrap: balance; */
}

.device_viewer_sliders .slide.show h4 {
    animation: slideFromTop 2.6s forwards;
    -webkit-animation: slideFromTop 2.6s forwards;
}

.device_viewer_sliders .slide.show p {
    animation: slideFromTop 2s forwards;
    -webkit-animation: slideFromTop 2s forwards;
}

@media screen and (max-width: 800px) {
    .device_viewer {
        padding: 25px;
    }

    .device_viewer_tabs .device_tab {
        font-size: 0.87rem;
    }

    .device_viewer_sliders .slide {
        gap: 15px;
    }

    .device_viewer_sliders .slide h4 {
        font-size: 1.5rem;
    }

    .device_viewer_sliders .slide p {
        font-size: 1rem;
    }
}

@media (min-width: 680px) and (max-width: 1199px) {
    .device_viewer:not(#eco-dv-cajones):not(#eco-dv-cocina) .device_viewer_tabs {
        grid-template-columns: repeat(6, 1fr);
    }
    .device_viewer:not(#eco-dv-cajones):not(#eco-dv-cocina) .device_viewer_tabs .device_tab {
        font-size: 0.82rem;
        padding: 8px 6px;
        min-width: 0;
    }
    #eco-dv-cocina .device_viewer_tabs {
        grid-template-columns: repeat(4, 1fr);
    }
    #eco-dv-cocina .device_viewer_tabs .device_tab {
        font-size: 0.82rem;
        padding: 8px 6px;
        min-width: 0;
    }
}

/* 1) tpv.css */
  .device_viewer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Ajusta la altura de la sombra */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none; /* Evita que interfiera con otros elementos */
}

  .device_viewer_sliders .slide img {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin-bottom: -190px;
    }

    @media screen and (max-width: 800px) {
        .device_viewer_sliders .slide img {
            margin-bottom: -90px;
        }
    }
    
    @media (min-width: 680px) and (max-width: 1000px) {
        .device_viewer_sliders .slide img {
            margin-bottom: -150px;
        }
    }

/* 2) index.php — funciones */
/* ════════════════════════════════════
   SECCIÓN FUNCIONES (device_viewer) — vista enmarcada arriba + selector de funciones abajo
════════════════════════════════════ */
.sector_title{padding:clamp(44px,6vw,64px) 24px 16px;max-width:820px;margin:0 auto}
.sector_title h1,.sector_title h2{font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.15;font-family:'Montserrat',Arial,sans-serif;font-weight:800;letter-spacing:-.01em;text-align:center;color:#1b1b1b;margin:0}
#tpv-funciones{max-width:880px;padding:8px 24px clamp(46px,6vw,64px);overflow:visible}
#tpv-funciones::after{display:none}                 /* quita el degradado blanco inferior */
#tpv-funciones .device_viewer_container{background:transparent;border-radius:0}
/* Marco tipo "pantalla": lo que va cambiando */
#tpv-funciones .device_viewer_sliders{position:relative;background:linear-gradient(180deg,#fafafa,#f1f1f1);border:1px solid #e6e6e6;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.12);overflow:hidden}
#tpv-funciones .device_viewer_sliders .slide{padding:38px 34px 0;gap:14px}
/* alturas reservadas FIJAS para título y descripción -> la imagen no salta al cambiar de función */
#tpv-funciones .device_viewer_sliders .slide h4{font-size:1.6rem;line-height:1.2;min-height:1.2em;margin:0}
#tpv-funciones .device_viewer_sliders .slide p{font-size:1.05rem;max-width:54ch;color:#444;line-height:1.5;min-height:3em;margin:0 auto;display:flex;align-items:center;justify-content:center;text-align:center}
#tpv-funciones .device_viewer_sliders .slide img{margin:0;width:100%;max-width:600px;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center top;display:block}
/* Selector de funciones (abajo, pills claramente clicables) */
#tpv-funciones .device_viewer_tabs{background:transparent;padding:0;margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
#tpv-funciones .device_viewer_tabs .device_tab{flex:0 0 auto;min-width:0;font-size:1rem;font-weight:700;color:#444;background:#f0f0f0;border:1.5px solid #e2e2e2;border-radius:100px;padding:10px 20px;transition:background .15s ease,color .15s ease,border-color .15s ease}
#tpv-funciones .device_viewer_tabs .device_tab:hover{border-color:#FF8C20;color:#FF8C20}
#tpv-funciones .device_viewer_tabs .device_tab.active{background:linear-gradient(135deg,#FF8C20,#f97316);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(255,140,32,.4)}
@media (max-width:600px){
    #tpv-funciones{padding:16px}
    #tpv-funciones .device_viewer_sliders .slide{padding:22px 18px 0}
    #tpv-funciones .device_viewer_sliders .slide h4{font-size:1.3rem;min-height:1.2em}
    #tpv-funciones .device_viewer_sliders .slide p{font-size:.95rem;min-height:4em}
    #tpv-funciones .device_viewer_tabs{margin-top:20px}
    #tpv-funciones .device_viewer_tabs .device_tab{font-size:.85rem;padding:8px 14px}
}

/* 2) index.php — demo */
/* Sección demo — vídeo embebido protagonista, centrado e integrado.
   Va justo tras la barra de estadísticas: gancho del hero -> "míralo funcionando". */
.tpv-demo{background:#1b1b1b;color:#fff;padding:40px 24px 48px;text-align:center}
.tpv-demo__head{max-width:680px;margin:0 auto 22px}
.tpv-demo__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-demo__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-demo__head h2 em{font-style:normal;color:#FF8C20}
.tpv-demo__video{max-width:920px;margin:0 auto;width:100%;aspect-ratio:16/9;background:#1b1b1b;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.tpv-demo__video iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:768px){
    .tpv-demo{padding:30px 18px 36px}
    .tpv-demo__head{margin-bottom:18px}
    .tpv-demo__video{border-radius:12px}
}


/* 2) index.php — botón */
.eco-mos__cta{display:inline-block;background:linear-gradient(135deg,#FF8C20,#f97316);color:#fff;font-weight:800;font-size:1rem;padding:14px 26px;border-radius:100px;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.12);transition:transform .2s ease,box-shadow .2s ease}
.eco-mos__cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2);color:#fff}

/* 2) index.php — ecosistema */
/* ════════════════════════════════════
   ECOSISTEMA DESPLEGABLE — 3 bandas cinematográficas (corazón / operar / vender).
   Cerradas ya cuentan el ecosistema entero: foto protagonista fundida al negro,
   número gigante, título y chips con cada pieza. Solo una abierta a la vez.
════════════════════════════════════ */
.eco-acc{background:#fff;color:#1b1b1b;font-family:'Montserrat',Arial,sans-serif;padding:clamp(16px,2.5vw,26px) 16px clamp(36px,5vw,64px)}
.eco-acc__head{max-width:720px;margin:0 auto clamp(20px,3.5vw,32px);text-align:center}
.eco-acc__eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#FF8C20;margin:0 0 10px}
.eco-acc__head h2{font-size:clamp(1.65rem,4.5vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 8px;text-wrap:balance}
.eco-acc__head h2 em{font-style:normal;color:#FF8C20}
.eco-acc__head p{font-size:clamp(.95rem,2.3vw,1.08rem);color:#5b6370;line-height:1.5;margin:0}
.eco-acc__list{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,1.8vw,18px)}
/* Banda: tarjeta oscura cinematográfica con la foto fundida a la derecha (como el tile de origen) */
/* Fondo PLANO #1b1b1b: el mismo hex exacto que usan las veladuras de la cabecera,
   para que la foto pueda fundirse con el panel sin diferencia de tono */
.eco-acc__item{position:relative;background:#1b1b1b;border:1px solid #23242c;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.22);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.eco-acc__item:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.32)}
.eco-acc__item.is-open{border-color:rgba(255,140,32,.6);box-shadow:0 26px 70px rgba(0,0,0,.38)}
.eco-acc__toggle{position:relative;display:flex;align-items:center;gap:18px;width:100%;min-height:clamp(150px,20vw,210px);text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;color:#fff;padding:clamp(20px,3.5vw,34px) clamp(18px,3.5vw,38px)}
/* Foto protagonista: más de media banda, con zoom al pasar el ratón */
/* La foto se DISUELVE por su borde inferior e izquierdo con una máscara: no hay
   píxel opaco que forme canto, debajo asoma directamente el #1b1b1b del panel.
   Nada de overlays encima (cada capa creaba su propia línea). */
.eco-acc__bg{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:center;z-index:0;transition:transform .5s ease,opacity .35s ease;
    -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%),linear-gradient(90deg,transparent 0%,#000 42%);
    mask-image:linear-gradient(180deg,#000 30%,transparent 92%),linear-gradient(90deg,transparent 0%,#000 42%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
.eco-acc__item:hover .eco-acc__bg{transform:scale(1.05)}
/* Número fantasma gigante detrás del texto */
.eco-acc__num{position:absolute;left:clamp(8px,1.6vw,20px);top:50%;transform:translateY(-54%);z-index:2;font-size:clamp(4.6rem,11vw,8.5rem);font-weight:800;font-style:italic;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.06);pointer-events:none}
.eco-acc__txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;min-width:0;flex:1;padding-left:clamp(30px,5.5vw,72px)}
.eco-acc__tag{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#FF8C20}
.eco-acc__title{font-size:clamp(1.45rem,3.8vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
/* Chips: todas las piezas de la categoría, visibles sin desplegar */
/* Píldoras CRISTAL (translúcidas premium): pocas etiquetas condensadas +
   blur de fondo, que difumina la foto tras cada chip (sin él, cada píldora
   se teñía de un color distinto y ensuciaba el conjunto). */
.eco-acc__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.eco-acc__chips i{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.88);background:rgba(16,17,22,.42);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:6px 12px;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.eco-acc__chips i.is-price{color:#FF8C20;background:rgba(255,140,32,.1);border-color:rgba(255,140,32,.42)}
/* Botón circular de despliegue: se enciende en naranja al pasar/abrir */
.eco-acc__plus{position:relative;z-index:2;flex:0 0 auto;width:clamp(44px,5vw,56px);height:clamp(44px,5vw,56px);display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.38);color:#fff;transition:background .2s ease,border-color .2s ease,transform .3s ease}
.eco-acc__item:hover .eco-acc__plus{background:linear-gradient(135deg,#FF8C20,#f97316);border-color:transparent}
.eco-acc__item.is-open .eco-acc__plus{background:linear-gradient(135deg,#FF8C20,#f97316);border-color:transparent;transform:rotate(180deg)}
.eco-acc__chev{width:24px;height:24px}
/* Despliegue animado por JS: height 0 → altura del contenido (px) → auto.
   Más fluido que animar grid-template-rows, que recalcula todo el grid por frame. */
.eco-acc__body{height:0;overflow:hidden;transition:height .38s cubic-bezier(.4,0,.2,1)}
.eco-acc__inner{min-height:0}
@media(prefers-reduced-motion:reduce){.eco-acc__body,.eco-acc__bg,.eco-acc__plus,.eco-acc__item,.eco-acc__item:hover{transition:none;transform:none}}
/* Panel del TPV: demo y funciones sobre el fondo oscuro de la banda, con aire.
   Todo el contenido va en oscuro para que no haya saltos de fondo. */
.eco-acc__inner .tpv-demo{background:transparent;padding:clamp(22px,3.5vw,40px) 24px clamp(30px,4.5vw,52px)}
.eco-acc__inner .tpv-demo__head{margin-bottom:clamp(16px,2.2vw,22px)}
/* Textos escalados a la baja: el panel es más estrecho que la sección a pantalla
   completa, así que títulos y descripciones se ajustan al nuevo tamaño de la demo */
.eco-acc__inner .tpv-demo__eyebrow{font-size:.72rem}
.eco-acc__inner .tpv-demo__head h2{font-size:clamp(1.35rem,2.6vw,1.85rem)}
.eco-acc__inner .sector_title{padding:clamp(30px,5vw,56px) 24px clamp(8px,1.2vw,14px);border-top:1px solid rgba(255,255,255,.07)}
.eco-acc__inner .sector_title h2{color:#fff;font-size:clamp(1.25rem,2.6vw,1.7rem)}
.eco-acc__inner #tpv-funciones{padding-bottom:clamp(36px,5vw,60px)}
.eco-acc__inner #tpv-funciones .device_viewer_sliders .slide h4{font-size:clamp(1.15rem,2.2vw,1.4rem)}
.eco-acc__inner #tpv-funciones .device_viewer_sliders .slide p{font-size:clamp(.9rem,1.6vw,1rem)}
/* la "pantalla" de funciones pasa a oscuro: nada de bloque blanco en mitad de la banda */
.eco-acc__inner #tpv-funciones .device_viewer_sliders{background:#1b1b1b;border-color:#2e3039;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.eco-acc__inner #tpv-funciones .device_viewer_sliders .slide h4{color:#fff}
.eco-acc__inner #tpv-funciones .device_viewer_sliders .slide p{color:rgba(255,255,255,.72)}
.eco-acc__inner #tpv-funciones .device_viewer_tabs{margin-top:clamp(22px,3vw,32px)}
/* pills de funciones en versión oscura (sobre la banda) */
.eco-acc__inner #tpv-funciones .device_viewer_tabs .device_tab{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#ddd}
.eco-acc__inner #tpv-funciones .device_viewer_tabs .device_tab:hover{border-color:#FF8C20;color:#FF8C20}
.eco-acc__inner #tpv-funciones .device_viewer_tabs .device_tab.active{background:linear-gradient(135deg,#FF8C20,#f97316);color:#fff;border-color:transparent}
/* Fichas visuales con GIRO: el clic voltea la ficha en su sitio y muestra qué hace
   + precio. Sin popups ni salidas: tocar otra ficha devuelve sola la anterior.
   Mismo truco anti-parpadeo que el mosaico: giro lineal y cambio de cara a los 90°. */
.eco-acc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px clamp(16px,3vw,30px) clamp(20px,3vw,30px)}
/* Tiles cuadrados: NO giran. Al tocar abren el popup del producto. Las fotos del
   catálogo /montaje son 1:1; con 4/3 el cover recortaba los equipos. */
/* outline transparent + máscara radial: hack anti "línea blanca nuclear" de
   iOS Safari (clipping del border-radius bajo transform). NO quitar. */
.eco-card{position:relative;display:block;width:100%;aspect-ratio:1/1;cursor:pointer;border:0;outline:1px solid transparent;padding:0;margin:0;border-radius:16px;overflow:hidden;background:#1b1b1b;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);-webkit-tap-highlight-color:transparent;font-family:inherit;transition:transform .16s ease,box-shadow .16s ease}
.eco-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.28)}
/* Feedback de pulsación (el "gustirrín"): se hunde un pelín al tocar */
.eco-card:active{transform:scale(.965)}
.eco-card:focus-visible{outline:2px solid #FF8C20;outline-offset:2px}
.eco-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.eco-card:hover .eco-card__img{transform:scale(1.06)}
.eco-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.18) 46%,rgba(0,0,0,0) 65%)}
.eco-card__price{position:absolute;top:10px;right:10px;z-index:2;font-size:.74rem;font-weight:800;color:#FF8C20;background:rgba(10,10,12,.72);border:1px solid rgba(255,140,32,.4);border-radius:100px;padding:5px 10px;white-space:nowrap}
.eco-card__name{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;text-align:left;color:#fff;font-size:clamp(.95rem,1.6vw,1.12rem);font-weight:800;line-height:1.15}
@media(prefers-reduced-motion:reduce){.eco-card,.eco-card__img{transition:none}}
/* Tiles con demo: botón de play centrado como invitación */
.eco-card[data-demo]::before{content:"";position:absolute;z-index:2;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(10,10,12,.58) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M8 5v14l11-7z'/></svg>") center/20px no-repeat;transition:transform .2s ease,background-color .2s ease}
.eco-card[data-demo]:hover::before{transform:translate(-50%,-50%) scale(1.1);background-color:rgba(255,140,32,.85)}

/* ════ POPUP DE PRODUCTO del ecosistema (misma sensación "pop" que la ficha de /montaje) ════ */
/* z-index por encima de la barra flotante (9000): así el overlay la tapa y
   el popup queda centrado en el viewport, sin que el botón negro lo solape */
.eco-info{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:20px}
.eco-info.is-open{display:flex}
.eco-info__overlay{position:absolute;inset:0;background:rgba(10,10,12,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:ecoInfoFade .18s ease}
.eco-info__card{position:relative;z-index:1;width:100%;max-width:322px;max-height:calc(100dvh - 40px);overflow-y:auto;background:#fff;border-radius:20px;box-shadow:0 28px 70px rgba(0,0,0,.4);transform-origin:center;animation:ecoInfoPop .26s cubic-bezier(.16,.84,.34,1)}
@keyframes ecoInfoFade{from{opacity:0}to{opacity:1}}
/* Arranca al 50% y crece hasta su sitio: se ve el "pop", da gustito (no aparece de golpe) */
@keyframes ecoInfoPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.eco-info__card,.eco-info__overlay{animation:none}}
/* Media 4/3: las fotos ya vienen en 4:3, cover las llena a sangre sin recortar */
.eco-info__media{position:relative;width:100%;aspect-ratio:4/3;background:#1b1b1b;overflow:hidden}
.eco-info__media #ecoInfoImg{width:100%;height:100%;object-fit:cover;display:block}
.eco-info__close{position:absolute;top:11px;right:11px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(10,10,12,.5);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.eco-info__close svg{width:17px;height:17px}
.eco-info__body{padding:18px 18px 18px}
.eco-info__body h3{margin:0 0 8px;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:#1b1b1b;line-height:1.15}
.eco-info__desc{margin:0 0 16px;font-size:.87rem;line-height:1.55;color:#4b5563;font-weight:500}
.eco-info__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.eco-info__price{font-size:.95rem;font-weight:800;color:#1b1b1b}
.eco-info__demo{display:inline-flex;align-items:center;gap:5px;border:1.5px solid #e2e2e8;background:#fff;color:#1b1b1b;font-family:inherit;font-size:.78rem;font-weight:700;padding:7px 12px;border-radius:100px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,color .15s ease}
.eco-info__demo svg{width:12px;height:12px;color:#FF8C20}
.eco-info__demo:hover{border-color:#FF8C20;color:#FF8C20}
.eco-info__demo[hidden]{display:none}  /* si no, display:inline-flex anula el atributo hidden (salía en todos) */
.eco-info__cta{display:block;text-align:center;background:linear-gradient(135deg,#FF8C20,#f97316);color:#fff;font-weight:800;font-size:.92rem;padding:13px 16px;border-radius:13px;text-decoration:none;box-shadow:0 8px 22px rgba(249,115,22,.32)}
.eco-info__cta:hover{filter:brightness(1.04)}
/* ════ POPUP DEMO de producto: overlay oscuro + vídeo vertical 9:16 ════ */
.eco-demo-modal{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;background:rgba(6,6,8,.95);padding:20px}
.eco-demo-modal.is-open{display:flex}
.eco-demo-modal__box{position:relative;display:flex;flex-direction:column;gap:12px;align-items:center}
/* Vídeo vertical 9:16 a tamaño contenido (como en /kiosko): alto moderado y ancho derivado */
.eco-demo-modal__frame{position:relative;aspect-ratio:9/16;height:min(66vh,500px);max-width:calc(100vw - 40px);background:#1b1b1b;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.eco-demo-modal__holder{position:absolute;inset:0}
.eco-demo-modal__holder iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.eco-demo-modal__cap{color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:.95rem;font-weight:700;display:flex;align-items:baseline;gap:10px}
.eco-demo-modal__cap b{color:#FF8C20}
/* Cerrar: círculo oscuro translúcido con X blanca (formato estándar de modal de vídeo;
   neutro, no compite con el contenido ni tiñe de naranja) */
.eco-demo-modal__close{position:absolute;top:-16px;right:-16px;z-index:2;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(18,18,22,.72);color:#fff;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.eco-demo-modal__close:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);transform:scale(1.08)}
.eco-demo-modal__close svg{width:19px;height:19px}
@media(max-width:600px){
    .eco-demo-modal{padding:14px}
    .eco-demo-modal__frame{height:min(64vh,460px)}
    .eco-demo-modal__close{top:-12px;right:-8px}
}
/* Cierre de la sección: mismo CTA que el mosaico */
.eco-acc__foot{max-width:640px;margin:clamp(22px,3.5vw,34px) auto 0;text-align:center}
.eco-acc__foot p{font-size:clamp(1rem,2.8vw,1.18rem);font-weight:800;color:#1b1b1b;line-height:1.3;margin:0 0 14px}
.eco-acc__foot p em{font-style:normal;color:#FF8C20}
@media(max-width:900px){.eco-acc__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
    .eco-acc__toggle{min-height:0;gap:12px;padding:18px 14px 16px}
    /* En móvil la foto ocupa toda la banda; la máscara la disuelve por abajo y por
       la izquierda (bajo el texto), dejando ver el #1b1b1b → legible sin overlays */
    .eco-acc__bg{width:100%;opacity:.8;
        -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 94%),linear-gradient(90deg,transparent 18%,#000 74%);
        mask-image:linear-gradient(180deg,#000 20%,transparent 94%),linear-gradient(90deg,transparent 18%,#000 74%)}
    .eco-acc__num{left:auto;right:12px;top:8px;transform:none;font-size:3.2rem;color:rgba(255,255,255,.08)}
    .eco-acc__txt{padding-left:0;gap:7px}
    .eco-acc__title{font-size:1.32rem}
    .eco-acc__chips{gap:5px;margin-top:8px}
.eco-acc__chips i{font-size:.64rem;padding:4px 9px}
    .eco-acc__plus{width:40px;height:40px}
    .eco-acc__chev{width:20px;height:20px}
    /* En móvil: tiles de foto a 2 columnas, precio y nombre compactos */
    .eco-acc__grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:4px 12px 16px}
    .eco-card__price{top:7px;right:7px;font-size:.62rem;padding:4px 8px}
    .eco-card__name{padding:9px 10px;font-size:.85rem}
}

/* ── Ajuste propio de /mreservas5 ─────────────────────────────────────────
   mreservas5.css limita todo `.mr5-body h2` a 20ch y todo párrafo a 44ch. En la home
   estos titulares y párrafos no llevan tope: sin esto, "Todas las funciones que necesita
   tu restaurante" formaba una caja estrecha pegada a la izquierda en vez de centrarse. */
.mr5-body .eco-acc h2, .mr5-body .eco-acc p, .mr5-body .eco-info h3, .mr5-body .eco-info p { max-width: none; }

/* 25/09: sin filete encima (el precio, justo antes, va ya en gris y separa él solo);
   se mantiene el aire de arriba de una sección normal. */
#ecosistema-acc{padding-top:clamp(56px,7vw,88px)}
/* 25/09: titular y subtítulo del ecosistema con la misma escala que el resto de secciones
   de la página (.mr5-body h2 y su p): esta hoja carga después y los ponía a su tamaño de la
   home (h2 hasta 2,5rem, p a 15-17 px y en gris). */
#ecosistema-acc .eco-acc__head h2{font-size:clamp(1.8rem,3.6vw,2.2rem);letter-spacing:-.02em;line-height:1.15;margin:0}
#ecosistema-acc .eco-acc__head p{font-size:var(--mr5-text);line-height:1.6;color:var(--mr5-muted);font-weight:400;max-width:44ch;margin:16px auto 0}

/* 01/10: varios precios (comandera: sin cobros / con cobros): una píldora por precio, apiladas
   arriba a la derecha; en la ficha abierta, un precio por línea */
.eco-info__price{white-space:pre-line}
.eco-card__prices{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.eco-card__prices .eco-card__price{position:static}
@media (max-width:600px){.eco-card__prices{top:7px;right:7px;gap:4px}}