/* ==========================================================================
   CRISLEFILMS — Ajustes responsive
   Se carga DESPUÉS de style.css, paginas.css y privado.css, así que afina
   todo lo demás. Objetivo: que se vea bien en cualquier pantalla, desde un
   móvil pequeño hasta un monitor grande, y también en horizontal.
   ========================================================================== */

/* ------------------------------------------------ áreas seguras (notch) --- */
:root{
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Nada debe salirse de la pantalla */
html, body{ max-width:100%; }
img, video{ max-width:100%; }

/* =============================================================== barra fija */
.hud,
.pg__bar{
  padding-left:max(var(--pad), var(--safe-l));
  padding-right:max(var(--pad), var(--safe-r));
}
.hud{ padding-top:max(clamp(14px,1.5vw,22px), var(--safe-t)); }
.pg__bar{ padding-top:max(clamp(14px,1.5vw,22px), var(--safe-t)); }
.hud__mark{ flex:0 0 auto; }
.hud__nav{ flex-wrap:wrap; justify-content:flex-end; min-width:0; }

@media (max-width:820px){
  .hud{ gap:12px; }
  .hud__mark{ font-size:clamp(1rem,3.6vw,1.25rem); }
  .hud__nav{ gap:10px; font-size:clamp(8px,.9vw,9.5px); letter-spacing:.1em; }
  .hud__nav .hud__clientes{ margin-left:0; padding:6px 10px; }
}
@media (max-width:430px){
  .hud{ gap:8px; }
  .hud__mark{ font-size:.98rem; }
  .hud__nav{ gap:7px; font-size:7.6px; letter-spacing:.05em; }
  .hud__nav .hud__clientes{ padding:5px 8px; }
  /* En pantallas muy pequeñas la onda no cabe */
  .hero__wave{ display:none; }
}

/* ============================================== cabeceras de página (phero) */
@media (max-width:820px){
  .phero{ min-height:76vh; min-height:76svh; }
  .phero--short{ min-height:60vh; min-height:60svh; }
  .phero__inner{ padding-top:clamp(96px,15vh,150px); padding-bottom:clamp(28px,5vh,54px); }
  .phero__title{ font-size:clamp(2.7rem,17vw,8rem); }
  .phero__lead{ font-size:clamp(.98rem,3vw,1.1rem); max-width:38ch; }
}
@media (max-width:430px){
  .phero__title{ font-size:clamp(2.3rem,16vw,4rem); }
}
/* Móvil en horizontal: la cabecera no puede pedir toda la altura */
@media (orientation:landscape) and (max-height:560px){
  .phero{ min-height:auto; }
  .phero__inner{ padding-top:clamp(78px,13vh,120px); padding-bottom:clamp(24px,5vh,44px); }
  .phero__title{ font-size:clamp(2.2rem,10vh,5rem); }
  .phero__lead{ display:none; }
  .phero__rule{ margin-top:clamp(14px,2.4vh,24px); margin-bottom:clamp(10px,2vh,18px); }
}

/* ================================================================ mosaico --- */
/* Las columnas del mosaico se ajustan en paginas.css; aquí solo el pie de foto
   en pantallas táctiles, donde no hay hover. */
@media (hover:none){
  .mosaico__cap{ opacity:1; transform:none; }
  /* Sin hover, el velo se queda para que el pie se lea sobre fotos claras */
  .mosaico__item::after{ opacity:.55; }
}

/* ====================================================== portfolio de bodas --- */
/* El muro de vídeo y la mampostería de fotos son a sangre en escritorio. En
   tablet y móvil bajan de columnas para que cada pieza siga teniendo tamaño. */
@media (max-width:980px){
  .mosaico{ columns:2; }
}
@media (max-width:620px){
  .mosaico{ columns:1; }
  /* En una sola columna, un ratio estable evita un scroll de alturas locas */
  .mosaico__item:nth-child(n) img{ aspect-ratio:4/3; }
  .vmotion__grid{ grid-template-columns:1fr; }
  .vmotion__item:nth-child(even){ margin-top:0; }
  .vmotion__head,
  .mosaico-intro{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
  /* En móvil el ancho útil manda: 46ch/44ch se salían del margen */
  .vmotion__sub,
  .mosaico-intro p{ max-width:100%; }
  .vmotion__head h2,
  .mosaico-intro h2{ margin-bottom:2px; }
}

/* ==================================================== espacio de la pareja --- */
@media (max-width:820px){
  .piezas{ padding:clamp(56px,9vh,110px) 0 clamp(48px,7vh,90px); }
  .piezas__sub{ font-size:9px; letter-spacing:.14em; }
  .pieza__meta{ font-size:9px; letter-spacing:.14em; }
}
@media (max-width:430px){
  .piezas__head{ gap:10px; }
  .pieza__play{ width:64px; }
}

/* ================================================================ contacto --- */
@media (max-width:820px){
  .cpag__wrap{ gap:clamp(30px,7vw,56px); }
  .cpag__valor{ font-size:clamp(1.05rem,4vw,1.4rem); }
  .contacto__pie{ gap:14px; }
}

/* ============================================================== panel admin --- */
@media (max-width:980px){
  .adm__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  /* En el panel, el correo ocupa mucho en móvil */
  .pg__bar #quien{ display:none; }
  .adm__stats{ grid-template-columns:1fr; }
  /* Las pestañas se deslizan en horizontal en vez de apilarse */
  .adm__tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .adm__tabs::-webkit-scrollbar{ display:none; }
  .adm__tab{ flex:0 0 auto; }
  .adm__head{ gap:16px; }
  .adm__actions{ width:100%; }
  .adm__actions .boton{ flex:1 1 auto; }
  .adm__credenciales strong{ font-size:.95rem; word-break:break-all; }
}

/* =============================================================== reproductor */
.player__stage{ padding-bottom:var(--safe-b); }
@media (max-width:720px){
  .player__stage{ width:min(96vw,1500px); }
  .player__bar{ gap:10px; font-size:9px; }
  .player__video,
  .player__hit{ max-height:64vh; }
  .player__hit{ height:calc(64vh - 66px); }
}

/* ====================================================== pie y áreas seguras */
.footer{ padding-bottom:max(clamp(26px,4vh,40px), var(--safe-b)); }
.pg__bar{ padding-left:max(var(--pad), var(--safe-l)); padding-right:max(var(--pad), var(--safe-r)); }

/* ============================================ táctil: controles más cómodos */
@media (hover:none){
  .hud__nav a{ padding-top:8px; padding-bottom:8px; }
  .boton,
  .contacto__boton,
  .pcta__boton,
  .acceso__card .boton{ min-height:48px; }
  .adm__tab{ padding-top:13px; padding-bottom:13px; }
}

/* iOS hace zoom al enfocar un campo con letra menor de 16px */
@media (max-width:820px){
  .campo__input,
  .campo__select,
  .campo__area,
  .contacto__input{ font-size:16px; }
}

/* ========================================================= pantallas grandes */
@media (min-width:1800px){
  :root{ --pad:clamp(20px,4.6vw,110px); }
  .mosaico,
  .piezas__list,
  .vmotion__grid{ max-width:1900px; margin-left:auto; margin-right:auto; }
}

/* ===================================================== pantallas muy pequeñas */
@media (max-width:360px){
  :root{ --pad:16px; --gap:12px; }
  .phero__title{ font-size:clamp(2rem,15vw,3rem); }
  .hero__labels{ gap:10px; }
  .contacto__boton,
  .pcta__boton{ padding-left:24px; padding-right:24px; }
}

/* Sin movimiento: nada debe quedar oculto esperando una animación */
@media (prefers-reduced-motion:reduce){
  .mosaico__cap{ opacity:1 !important; transform:none !important; }
}