/* PlanAppetit · Página "Descarga la app" (descargar.css)
   AUTÓNOMO: ya NO depende de collections.css. Lo que antes se tomaba de ahí (verificado, selector por selector,
   contra los elementos de descargar.html y las clases que descargar.js agrega) está copiado abajo en la sección
   "BASE", en el mismo orden y antes de las reglas propias, así el resultado es idéntico al de antes.
   Resto del archivo = el descargar.css original, sin cambios. */

/* ===================== BASE (antes en collections.css) ===================== */


/* Fuentes (líneas 34, 43, 46 de collections.css; misma ruta relativa porque este archivo vive en la misma carpeta) */

@font-face{
      font-family:"poppinsRegular";
      src:url("../filesCss/fonts/Poppins-Regular.ttf");
  }

@font-face{
      font-family:"poppinsSemiBold";
      src:url("../filesCss/fonts/Poppins-SemiBold.ttf");
  }

@font-face{
      font-family:"poppinsLight";
      src:url("../filesCss/fonts/Poppins-Light.ttf");
  }


/* Animaciones usadas por .mnDv y .bckPgs */

@keyframes div-animation-Btn-To-Top{
  0%{
    transform: translateY(50%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}


/* Reglas usadas (número = línea en collections.css) */

/* collections.css L18 */
body {
    margin: 0;
      background-size:cover;
      background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
  }

/* collections.css L75 */
.oculto {
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }

/* collections.css L80 */
.visible {
          opacity: 1;
          visibility: visible;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }

/* collections.css L116 */
.plnAppttNvBr{
           width: 251px;
          height: 70px;
          position: absolute;
          top: 12px;
          left: 50%; 
            transform: translateX(-50%); 
        }

/* collections.css L287 */
.mnDv{
    display: block;
    margin: auto;
    min-width: 374px; 
    max-width: 1920px;
    margin-left: 7%;
    margin-right: 7%;
    min-height: 400px;
    animation: div-animation-Btn-To-Top 2700ms ease-in;
    animation-fill-mode: forwards;
    border-radius: 25px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.751);
    border-bottom: 2px solid #b7b7b7;
    border-top: 2px solid #b7b7b7;
    border-left: 2px solid #b7b7b7;
    border-right: 2px solid #b7b7b7;
    box-shadow: 2px 4px 2px #cfcfcf;
}

/* collections.css L318 */
.bckPgs{
  color:  #888;
  font-size: 34px;
  position: -webkit-sticky; 
  position: absolute;
  top: 10px;
  left:2%;
  border-radius: 50%;
  padding: 5px 12px 5px 12px;
  z-index: 2;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  animation: div-animation-Left-To-Right 1500ms ease-in;
  animation-fill-mode: forwards;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
}

/* collections.css L337 */
.txtAmbgMx{
  font-family:"poppinsLight";
  font-size: 14px;
  position: -webkit-sticky; 
  position: absolute;
  top: 60px;
  left:2.3%;
}

/* collections.css L1353 */
.dvRcpClt{
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    border-radius: 25px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.751);
    border-bottom: 2px solid #b7b7b7;
    border-top: 2px solid #b7b7b7;
    border-left: 2px solid #b7b7b7;
    border-right: 2px solid #b7b7b7;
    box-shadow: 2px 4px 2px #cfcfcf;
    padding:20px 20px 20px 20px;
  }

/* collections.css L1685 */
a{
      text-decoration: none;
    }


/* ===================== PROPIO DE ESTA PÁGINA (descargar.css original) ===================== */

[hidden]{display:none !important}

.plnAppttNvBr{
          display: none;
           width: 251px;
          height: 70px;
          position: absolute;
          top: 12px;
          left: 50%; /* Mueve el borde izquierdo del div al centro horizontal del padre */
            transform: translateX(-50%); /* Mueve el div hacia la izquierda la mitad de su propio ancho, centrándolo */
        }
        
html,body{max-width:100%;overflow-x:hidden}
.wrapDsc,.wrapDsc *,.wrapDsc *::before,.wrapDsc *::after{box-sizing:border-box}

/* La base trae min-width:374px y una barra de 470px fijos: aquí se adaptan al ancho real de la pantalla */
.mnDv{min-width:0;margin-left:clamp(8px,3vw,7%);margin-right:clamp(8px,3vw,7%)}
.bottom-nav{max-width:calc(100vw - 20px)}

.wrapDsc{width:100%;max-width:900px;margin:0 auto;padding:96px clamp(10px,3vw,16px) 70px}
.dvRcpClt.dscBox{width:100%;padding:34px clamp(14px,4vw,26px)}
.dscIco{width:clamp(68px,18vw,84px);height:clamp(68px,18vw,84px);border-radius:22px;object-fit:cover;display:block;margin:0 auto 14px;box-shadow:0 8px 20px rgba(72,136,170,.35);background:#fff}
.dscTit{font-family:'poppinsSemiBold';font-size:clamp(20px,5.6vw,26px);color:#2D3E45;line-height:1.25}
.dscTxt{font-family:'poppinsRegular';font-size:clamp(13.5px,3.7vw,15px);color:#8CA9B3;max-width:460px;margin:8px auto 0;line-height:1.6}
.dscRec{font-family:'poppinsRegular';margin:22px 0 4px;font-size:13px;color:#3d7691;min-height:20px}

.dscBtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.st{position:relative;display:inline-flex;align-items:center;gap:12px;background:#2D3E45;color:#fff;border-radius:14px;padding:11px 24px 11px 16px;text-decoration:none;min-width:200px;text-align:left;border:2px solid #2D3E45;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}
.st:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(45,62,69,.3);color:#fff}
.st svg{width:28px;height:28px;fill:#fff;flex:0 0 28px}
.st small{display:block;font-family:'poppinsLight';font-size:10.5px;opacity:.85;line-height:1.1}
.st b{display:block;font-family:'poppinsSemiBold';font-size:17px;line-height:1.2;font-weight:normal}
.st.pendiente{opacity:.55;cursor:default;pointer-events:none}
.dscPend{position:absolute;top:-10px;right:12px;background:#4888AA;color:#fff;font-family:'poppinsRegular';font-size:10.5px;border-radius:12px;padding:2px 10px}

.dscSeg{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px;font-family:'poppinsRegular';font-size:12.5px;color:#8CA9B3;text-align:center;line-height:1.5}
.dscSeg svg{width:15px;height:15px;stroke:#2e9e5b;fill:none;stroke-width:2.2;flex:0 0 15px}

.dscQrBox{display:flex;margin:22px auto 0;align-items:center;gap:16px;background:#F0F7FB;border:1.5px dashed #C8E3EC;border-radius:18px;padding:14px 18px;max-width:440px;text-align:left}
.dscQrBox[hidden]{display:none !important}
.dscQR{width:104px;height:104px;background:#fff;border-radius:10px;padding:6px;flex:0 0 104px}
.dscQR svg{width:100%;height:100%;display:block}
.dscQR svg path{fill:#2D3E45}
.dscQrTxt b{font-family:'poppinsSemiBold';font-size:14px;font-weight:normal;display:block}
.dscQrTxt span{display:block;font-family:'poppinsRegular';font-size:12.5px;color:#6F8791;line-height:1.5;margin-top:2px}

/* Pasos: las columnas se acomodan solas (3 -> 2 -> 1 según el ancho disponible) */
.dscPasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-top:30px;text-align:left}
.dscPaso{display:flex;gap:12px;align-items:flex-start;background:#F8FBFC;border:1px solid #E1EEF3;border-radius:14px;padding:12px 14px;font-family:'poppinsRegular';font-size:13px;color:#7A8A91;line-height:1.5;min-width:0}
.dscPaso em{font-style:normal;flex:0 0 28px;height:28px;border-radius:50%;background:#4888AA;color:#fff;font-family:'poppinsSemiBold';display:flex;align-items:center;justify-content:center;font-size:13px}
.dscPaso b{display:block;color:#2D3E45;font-family:'poppinsSemiBold';font-weight:normal;font-size:14px}

/* Pantallas pequeñas */
@media(max-width:600px){
  .wrapDsc{padding-top:84px}
  .dscBtns{flex-direction:column;align-items:stretch}
  .st{width:100%;min-width:0}
  .dscQrBox{flex-direction:column;text-align:center;padding:18px 14px}
}
@media(max-width:360px){
  .st{padding:10px 14px 10px 12px;gap:10px}
  .st b{font-size:16px}
  .dscPaso{padding:10px 12px}
}

/* v5: sin cuadro exterior; el contenido vive directo en .wrapDsc (diseño interior mejorado) */
.wrapDsc{max-width:900px}
.dvRcpClt.dscBox{background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin-top:0}
.dscIco{width:clamp(80px,20vw,104px);height:clamp(80px,20vw,104px);border-radius:28px;margin-bottom:18px;box-shadow:0 10px 26px rgba(72,136,170,.28)}
.dscTit{font-size:clamp(24px,6.2vw,34px);color:#1B2B33}
.dscTxt{max-width:640px;font-size:clamp(14px,3.8vw,17px);color:#5F7480}
.dscRec{margin:28px 0 14px;font-size:clamp(14px,3.8vw,16px);color:#1B2B33}
.dscBtns{width:100%;flex-wrap:nowrap;gap:18px;margin-top:14px}
.dscBtns .st{flex:1 1 0;min-width:0;max-width:340px;justify-content:flex-start;padding:14px 22px;border-radius:16px;background:#3E474D;border-color:#3E474D}
.st.pendiente{opacity:1}
.st svg{width:32px;height:32px;flex-basis:32px}
.st b{font-size:19px}
.dscPend{top:-12px;right:14px;font-size:11px;padding:3px 11px;background:#8AA3BD}
#bIos .dscPend{background:#D9886B}
.dscSeg{margin-top:20px;font-size:13.5px}
.dscQrBox{width:100%;max-width:600px;justify-content:center;gap:24px;padding:22px 28px;margin-top:28px;background:#fff;border:0;border-radius:18px;box-shadow:0 10px 30px rgba(45,62,69,.12)}
.dscQR{width:128px;height:128px;flex:0 0 128px;padding:0;background:none}
.dscQrTxt b{font-size:17px;color:#1B2B33}
.dscQrTxt span{font-size:14px;color:#4E6470}
.dscPasos{gap:18px;margin-top:38px}
.dscPaso{background:rgba(255,255,255,.85);border:1px solid #DDEBF1;border-radius:16px;padding:16px 18px;align-items:flex-start;font-size:14.5px;color:#4E6470}
.dscPaso em{flex-basis:34px;height:34px;background:linear-gradient(145deg,#6A8FB5,#3F6C93);box-shadow:0 3px 8px rgba(63,108,147,.35)}
.dscPaso b{font-size:16px;color:#1B2B33}
.dscPaso b i{font-size:14px;margin-left:6px;color:#3F6C93}
@media(max-width:600px){.dscBtns{flex-wrap:wrap}.dscBtns .st{flex:1 1 100%;max-width:none}.dscQrBox{flex-direction:column;gap:14px;text-align:center}}