/* ==========================================================================
   BAHÍA DUNAS · Pack legal en ventana (pack-legal.js) · revisión 2026-11-02
   El contenido del PDF acomodado en horizontal y adaptable a cualquier pantalla.
   01 Ventana · 02 Franja (título y descarga) · 03 Carpeta, QR y documentos · 04 Pie y QR
   05 Tablet · 06 Teléfono · 07 Visor de documentos
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;1,900&display=swap');

/* 01 · VENTANA */
.pl{--coral:#E2694A;--coral-dk:#C9583A;--navy:#1F3566;--gris:#5A6680;--turq:#2BA3B3;--sol:#FABA54;--crema:#FFE7D8;
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:clamp(8px,2vw,28px);font-family:'Montserrat',system-ui,sans-serif;color:var(--navy)}
.pl[hidden]{display:none}
.pl *,.pl *::before,.pl *::after{box-sizing:border-box}
.pl__fondo{position:absolute;inset:0;background:rgba(11,17,22,.78);backdrop-filter:blur(4px)}
.pl__caja{position:relative;display:flex;flex-direction:column;width:min(1240px,100%);max-height:calc(100vh - 2 * clamp(8px,2vw,28px));max-height:calc(100dvh - 2 * clamp(8px,2vw,28px));
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:26px;background:linear-gradient(90deg,#F8ECE3,#FAF1E9 50%,#FEFCFA);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);animation:pl-entra .35s ease}
@keyframes pl-entra{from{opacity:0;transform:translateY(14px) scale(.985)}}
html.pl-abierto{overflow:hidden}
.pl svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl :focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* 02 · FRANJA: logo, título y la acción principal (descargar) */
.pl__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);padding:clamp(14px,2.2vh,24px) clamp(18px,3vw,40px);color:#fff;
  background:var(--coral) var(--hojas,none) center/cover no-repeat}
.pl__logo{display:block;width:clamp(96px,10vw,140px);height:auto;flex:none}
.pl__tit{flex:1;min-width:0}
.pl__tit p{margin:0;font-size:clamp(11px,1vw,13px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--crema)}
.pl__tit h2{margin:4px 0 0;font-family:'Montserrat',sans-serif;font-style:italic;font-weight:900;font-size:clamp(34px,4.6vw,60px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.pl__bajar{flex:none;display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;text-decoration:none;
  font:700 13px 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-dk);background:#fff;
  box-shadow:0 14px 28px -14px rgba(90,30,15,.7);transition:transform .2s,background .2s}
.pl__bajar:hover{transform:translateY(-2px);background:#FFF4E6}
.pl__bajar:focus-visible{outline-color:#fff}
.pl__cerrar{flex:none;width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(58,53,51,.55);transition:background .2s}
.pl__cerrar:hover{background:#3A3533}
.pl__cerrar:focus-visible{outline-color:#fff}

/* 03 · CARPETA Y DOCUMENTOS (lado a lado) */
.pl__cuerpo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);align-items:center;padding:clamp(16px,2.6vh,30px) clamp(18px,3vw,40px) 0}
.pl__izq{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px);min-width:0}
.pl__carpeta{margin:0;width:100%}
.pl__carpeta img{display:block;width:100%;height:auto;max-height:38vh;object-fit:contain}
.pl__docs{display:flex;flex-direction:column;gap:12px;min-width:0}
.pl__hint{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--navy)}
.pl__hint svg{color:var(--coral)}
.pl__docs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pl__doc{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;padding:14px 16px;border:0;border-radius:18px;font:inherit;text-align:left;cursor:pointer;text-decoration:none;color:var(--gris);background:#fff;
  box-shadow:0 10px 22px -14px rgba(40,30,20,.5);transition:transform .2s,box-shadow .2s}
.pl__doc:hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(40,30,20,.55)}
.pl__doc i{display:none}
.pl__doc span{flex:1;font-size:12px;line-height:1.4}
.pl__doc b{display:block;margin-bottom:3px;font-size:15px;font-weight:800;line-height:1.2;color:var(--navy)}
.pl__doc em,.pl__insejupy a{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;font-style:normal;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--coral)}
.pl__doc em svg,.pl__insejupy a svg{width:16px;height:16px}
.pl__insejupy{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 10px 22px -14px rgba(40,30,20,.5)}
.pl__insejupy > i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--turq);background:#E3F5F7}
.pl__insejupy > div{flex:1;min-width:0}
.pl__insejupy b{font-size:15px;font-weight:800;color:var(--navy)}
.pl__insejupy p{margin:3px 0 0;font-size:11.5px;line-height:1.4;color:var(--gris)}
.pl__insejupy strong{color:var(--coral)}
.pl__insejupy a{flex:none;align-self:center;text-decoration:none;background:var(--turq);transition:transform .2s}
.pl__insejupy a:hover,.pl__doc:hover em{transform:translateY(-1px)}

/* 04 · PIE: nota legal y QR */
.pl__pie{margin-top:auto;padding:clamp(12px,2vh,22px) clamp(18px,3vw,40px)}
.pl__pie p{margin:0;font-size:11px;line-height:1.5;color:#7A6A62}
.pl__qr{flex:none;margin:0;display:flex;align-items:center;gap:16px;padding:10px 18px 10px 10px;border-radius:20px;background:#fff;box-shadow:0 10px 22px -14px rgba(40,30,20,.5)}
.pl__qr-img{width:clamp(130px,20vh,180px);padding:10px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--sol)}
.pl__qr-img svg{display:block;width:100%;height:auto}
.pl__qr-img svg path{fill:var(--navy)}
.pl__qr figcaption{max-width:160px;font-size:13px;font-weight:600;line-height:1.35;color:var(--gris)}

/* 05 · TABLET: la carpeta arriba y los documentos abajo */
@media (max-width:980px){
  .pl__cuerpo{grid-template-columns:minmax(0,1fr)}
  .pl__carpeta img{max-height:34vh;margin:0 auto;width:auto;max-width:100%}
}

/* 06 · TELÉFONO: pantalla completa, tarjetas en una columna y «Descargar PDF» fijo abajo */
@media (max-width:640px){
  .pl{padding:0}
  .pl__caja{border-radius:0;height:100vh;height:100dvh;max-height:none}
  .pl__head{flex-wrap:wrap;gap:10px 14px;padding:12px 16px}
  .pl__logo{width:68px}
  .pl__tit p{font-size:10px;letter-spacing:.14em}
  .pl__tit h2{font-size:30px;white-space:nowrap}
  .pl__bajar{order:3;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;justify-content:center}
  .pl__cuerpo{padding:14px 16px 0}
  .pl__docs ul{grid-template-columns:minmax(0,1fr)}
  .pl__doc{flex-direction:row;align-items:center}
  .pl__doc em{align-self:center}
  .pl__insejupy{flex-wrap:wrap;align-items:flex-start}
  .pl__insejupy > div{flex:1 1 calc(100% - 58px)}
  .pl__insejupy a{margin-left:58px;align-self:flex-start}
  .pl__pie{padding:16px 16px calc(84px + env(safe-area-inset-bottom))}
  .pl__qr{display:none}
}
/* 07 · VISOR: el documento se abre dentro de la misma ventana (encima del pack o de la ventana del lote) */
.plv{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;padding:clamp(8px,2vw,28px);font-family:'Montserrat',system-ui,sans-serif}
.plv[hidden]{display:none}
.plv__fondo{position:absolute;inset:0;background:rgba(11,17,22,.82)}
.plv__caja{position:relative;display:flex;flex-direction:column;width:min(1240px,100%);height:calc(100vh - 2 * clamp(8px,2vw,28px));height:calc(100dvh - 2 * clamp(8px,2vw,28px));
  border-radius:22px;overflow:hidden;background:#FFFAF4;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);animation:pl-entra .3s ease}
.plv__barra{display:flex;align-items:center;gap:16px;padding:10px clamp(12px,2vw,20px);background:#E2694A;color:#fff}
.plv__volver{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:999px;cursor:pointer;
  font:700 12.5px 'Montserrat',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C9583A;background:#fff;transition:background .2s}
.plv__volver:hover{background:#FFF4E6}
.plv__volver svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plv__volver:focus-visible{outline:2px solid #fff;outline-offset:3px}
.plv__barra b{min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv__marco{flex:1;min-height:0;background:#525659;-webkit-overflow-scrolling:touch;overflow:auto}
.plv__marco iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.plv__marco iframe[hidden],.plv__hojas[hidden]{display:none}
.plv__hojas{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(10px,2vw,24px)}
.plv__hojas img{display:block;width:min(900px,100%);height:auto;background:#fff;box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
@media (max-width:640px){.plv{padding:0}.plv__caja{border-radius:0;height:100vh;height:100dvh}}
@media (prefers-reduced-motion:reduce){.plv__caja{animation:none}}
@media (prefers-reduced-motion:reduce){.pl__caja{animation:none}}