/* ============================================================
   Flujo movil (<=720px) — Home / Categorias / Mosaico / Reels /
   barra inferior + modales de descarga y contacto. Reutiliza los
   custom properties ya declarados en style.css (--paper, --ink, --mut,
   --line, --dark, --dark-line, --font-display, --font-body, --ease-soft)
   sin redeclarar nada. Sobre mi reutiliza #screen4 tal cual, sin CSS
   propio aqui.
   ============================================================ */

.m-screen{ display:none; }

@media (max-width: 720px){

.m-screen{
    position:fixed; inset:0; z-index:200;
    display:block; opacity:0; pointer-events:none;
}
.m-screen[aria-hidden="false"]{ opacity:1; pointer-events:auto; }

/* ---------- Home ---------- */
.m-home{ background:var(--paper); }
.m-home-name{
    position:absolute; top:14%; left:0; right:0; text-align:center;
    font-family:var(--font-display); font-weight:900; text-transform:uppercase;
    font-size:clamp(36px, 11vw, 56px); letter-spacing:0.01em;
    color:var(--ink); white-space:pre-line;
    /* line-height:1.35 (no el 0.92 de escritorio) -- alli el nombre va en
       UNA sola linea, un interlineado estrecho solo comprime el bloque
       vertical. Aqui son DOS lineas (nombre / apellido, ver <br> real en
       MobileHome.js _buildNameLetters); con 0.92 las letras subiendo por
       la ola (translateY(-16px), ver _playOneWave) invadian el espacio de
       la linea vecina y se solapaban entre si. */
    line-height:1.35;
}
/* Ola vertical letra a letra, identica a .screen1-name .char de
   escritorio mientras dura la carga (ver Preloader._startWaveLoop) --
   solo translateY animado por transition (no @keyframes), ver
   MobileHome.js _playOneWave()/_startWaveLoop(). */
.m-home-name .char{
    display:inline-block;
    transition:transform .22s ease;
}
.m-home-frame{
    position:absolute; top:35%; left:50%; transform:translateX(-50%);
    width:44vw; max-width:190px; aspect-ratio:3/4;
}
.m-home-photo{
    width:100%; height:100%; background-size:cover; background-position:center;
    background-color:var(--line);
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
    opacity:0; transition:opacity .35s ease;
}
.m-home-photo.is-shown{ opacity:1; }
.m-home-cta{
    position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
    background:var(--ink); color:var(--paper); border:1px solid var(--ink);
    padding:15px 42px; font:600 11px var(--font-body); letter-spacing:0.16em;
    text-transform:uppercase; white-space:nowrap; cursor:pointer;
}
.m-home-date{
    position:absolute; left:20px; bottom:24px;
    font-size:12px; letter-spacing:0.08em; color:var(--mut);
}
.m-home-percent{
    position:absolute; right:20px; bottom:24px;
    font-family:var(--font-display); font-size:22px; letter-spacing:0.03em;
    color:var(--mut); font-variant-numeric:tabular-nums;
}

/* ---------- Categorias ---------- */
.m-categorias{ background:var(--paper); }
.m-cat-head{
    padding:26px 0 14px; text-align:center;
    font:600 11px var(--font-body); letter-spacing:0.14em; text-transform:uppercase;
    color:var(--mut);
}
.m-cat-list{
    position:absolute; top:60px; left:8px; right:8px; bottom:64px;
    display:flex; flex-direction:column; gap:3px; padding-bottom:8px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    /* Scrollbar fina a juego con la paleta oscura -- mismo tono que en
       escritorio (ver .s2-mosaic-wrap en style.css). En movil normalmente
       no se ve (scrollbar transitoria del propio SO), pero cubre tablet/
       raton/trackpad. */
    scrollbar-width: thin;
    scrollbar-color: rgba(232,223,208,.35) transparent;
}
.m-cat-list::-webkit-scrollbar{ width:6px; }
.m-cat-list::-webkit-scrollbar-track{ background:transparent; }
.m-cat-list::-webkit-scrollbar-thumb{ background:rgba(232,223,208,.35); border-radius:3px; }
.m-cat-card{
    /* Alto FIJO (no flex:1) a proposito: con flex:1 las tarjetas se
       repartian SIEMPRE el alto disponible entre las que hubiera --
       con 4 llenaba la pantalla exacta y nunca habia nada que
       desplazar (el scroll de la lista no tenia ningun efecto que
       comprobar), y si algun dia se anaden mas categorias desde el
       admin, se irian encogiendo cada vez mas hasta quedar inutiles.
       Con alto fijo, el tamano de cada tarjeta no depende de cuantas
       haya, y la lista desborda y se puede desplazar de verdad en
       cuanto no caben todas. */
    position:relative; flex:0 0 200px; overflow:hidden; border:0; padding:0;
    background-size:cover; background-position:center;
    display:flex; align-items:flex-end; gap:10px; padding:16px;
    cursor:pointer; font-family:var(--font-body);
}
.m-cat-veil{
    position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(17,17,16,.75));
}
.m-cat-name{
    position:relative; z-index:1; font-family:var(--font-display); font-weight:900;
    text-transform:uppercase; font-size:20px; color:var(--paper);
}
.m-cat-count{
    /* FIX: align-self:baseline (lo que habia antes) alineaba este texto
       pequeño con el "baseline" tipografico del nombre -- en una
       tarjeta muy alta, con fuentes de tamano tan distinto (20px serif
       vs 11px), ese baseline calculaba una posicion cerca del TOP de la
       tarjeta, no junto al nombre como se veia en el diseño. Sin
       align-self, hereda el align-items:flex-end del padre = junto al
       nombre, abajo, que es lo que se querias. */
    position:relative; z-index:1; font-size:11px; letter-spacing:0.04em;
    color:rgba(232,223,208,.7);
}

/* Boton "volver" base, compartido por Mosaico (dentro de la cabecera,
   posicion normal en el flujo) y Reels (.m-reels-back lo posiciona
   flotante encima de la foto) -- sin esta clase base el de Mosaico
   quedaba con el boton nativo del navegador, sin estilo alguno. */
.m-back{
    position:relative; z-index:3;
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:rgba(232,223,208,.08); border:1px solid rgba(232,223,208,.3);
    color:var(--paper); font-size:22px; line-height:1; cursor:pointer;
    transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.m-back:active{ background:rgba(232,223,208,.18); transform:scale(.94); }

/* ---------- Mosaico ---------- */
.m-mosaico{ background:var(--dark); }
.m-mosaico-header{
    position:relative; height:56px; display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid var(--dark-line);
    padding:0 14px;
}
.m-mosaico-header .m-back{ position:absolute; left:14px; }
.m-mosaico-head{
    font:600 12px var(--font-body); letter-spacing:0.1em; text-transform:uppercase;
    color:var(--paper);
}
.m-mosaico-grid{
    position:absolute; top:56px; left:0; right:0; bottom:64px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:min-content;
    align-content:start; gap:10px;
    padding:12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,223,208,.35) transparent;
}
.m-mosaico-grid::-webkit-scrollbar{ width:6px; }
.m-mosaico-grid::-webkit-scrollbar-track{ background:transparent; }
.m-mosaico-grid::-webkit-scrollbar-thumb{ background:rgba(232,223,208,.35); border-radius:3px; }
.m-mosaico-cell{
    aspect-ratio:1/1; border:0; padding:0; cursor:pointer;
    background-size:cover; background-position:center; background-color:var(--dark-line);
    min-width:0; min-height:0; width:100%;
}
.m-mosaico-cell.is-current{ box-shadow:inset 0 0 0 2px var(--paper); }
.m-mosaico-cell{ position:relative; }
.m-mosaico-likes{
    position:absolute; right:4px; bottom:4px;
    font:600 9px var(--font-body); color:#fff;
    background:rgba(17,17,16,.55); padding:2px 5px; border-radius:3px;
    letter-spacing:0.01em;
}

/* ---------- Reels ---------- */
.m-reels{ background:var(--dark); overflow:hidden; }
.m-reels-stage{
    position:absolute; inset:0;
    /* El swipe lo gestiona bindAxisSwipe() al 100% en JS, nunca hay
       scroll nativo que hacer aqui -- sin esto, el navegador puede
       interpretar los primeros px del gesto como su propio scroll o
       pull-to-refresh (sobre todo al arrastrar hacia abajo) antes de
       que el JS tome el control, y se siente como resistencia. */
    touch-action:none;
}
.m-reels-photo{
    /* contain, no cover: la foto se ve SIEMPRE completa (igual que el
       visor de escritorio, que nunca recorta), con el fondo oscuro
       asomando arriba/abajo o a los lados si la proporcion no coincide
       con la pantalla -- perder parte de la composicion del fotografo
       por un "cover" edge-to-edge pesa mas que la inmersion total. */
    position:absolute; inset:0; background-size:contain; background-repeat:no-repeat;
    background-position:center; background-color:#000;
}
.m-reels-photo-fade{ opacity:0; transition:opacity .3s ease; }
.m-reels-photo-fade.is-shown{ opacity:1; }
.m-reels-spinner{
    position:absolute; top:50%; left:50%; z-index:1;
    width:28px; height:28px; margin:-14px 0 0 -14px;
    border:2px solid rgba(232,223,208,.25); border-top-color:var(--paper);
    border-radius:50%;
    animation:m-reels-spin .8s linear infinite;
    transition:opacity .2s ease;
}
.m-reels-spinner.is-hidden{ opacity:0; pointer-events:none; }
@keyframes m-reels-spin{ to{ transform:rotate(360deg); } }
.m-reels-veil-top{
    position:absolute; top:0; left:0; right:0; height:130px; z-index:2;
    background:linear-gradient(180deg, rgba(17,17,16,.6), transparent);
    pointer-events:none;
}
.m-reels-veil-bottom{
    /* bottom:63px (1px menos que la barra inferior, 64px) a proposito:
       solapa un pixel con ella para que no quede una linea sin cubrir
       por redondeo de subpixel entre ambas -- sin esto, en algunos
       anchos de pantalla se colaba una rendija de la foto sin oscurecer
       justo encima de la barra. */
    position:absolute; bottom:63px; left:0; right:0; height:191px; z-index:2;
    background:linear-gradient(0deg, rgba(17,17,16,.8), transparent);
    pointer-events:none;
}
.m-reels-back{
    /* Flota sobre la foto (fondo mas oscuro detras via .m-reels-veil-top)
       -- el aspecto del boton en si (circulo, borde, colores) ya lo da
       .m-back, aqui solo se ajusta la posicion sobre la foto. */
    position:absolute; top:16px; left:12px;
}
.m-reels-cat{
    position:absolute; top:22px; left:0; right:0; z-index:2; text-align:center;
    font:600 12px var(--font-body); letter-spacing:0.16em; text-transform:uppercase; color:var(--paper);
}
.m-reels-grid-btn{
    position:absolute; top:16px; right:14px; z-index:3; cursor:pointer;
    background:none; border:1px solid rgba(232,223,208,.4); color:var(--paper);
    padding:7px 12px; font:600 10px var(--font-body); letter-spacing:0.1em; text-transform:uppercase;
}
.m-reels-footer{
    /* FIX "se solapa en movil": .m-reels-info y .m-reels-fabs vivian
       como DOS elementos con position:absolute independientes, cada uno
       con un left/right fijo a ojo -- el hueco que .m-reels-info dejaba
       libre a la derecha (right:112px) tenia que coincidir A MANO con
       el ancho real de los FABs (max-width:96px + respiro), y en cuanto
       el contenido real de los botones (icono+texto+padding) media mas
       que ese numero inventado, se solapaban con el titulo/EXIF -- ya
       paso una vez (ver el historial: antes era right:130px, se corrigio
       a 112px, y aun asi seguia sin coincidir con 3 FABs mas anchos que
       los 2 originales). Un unico contenedor flex con justify-content
       space-between reparte el ancho segun el contenido REAL de cada
       lado en cada pantalla, sin ningun numero que se pueda desincronizar.
    */
    position:absolute; left:20px; right:14px; bottom:150px; z-index:3;
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.m-reels-info{
    min-width:0; /* imprescindible para que un hijo flex respete overflow/ellipsis en vez de forzar el ancho del contenedor */
}
.m-reels-title{
    font-family:var(--font-display); font-style:italic; font-weight:700; font-size:20px;
    color:var(--paper); margin-bottom:6px; line-height:1.15;
    /* Evita que un titulo largo crezca en altura hasta invadir el
       espacio vertical de los FABs (que estan al lado, no debajo, en el
       mismo flex row) -- se trunca a 2 lineas con elipsis en vez de
       seguir creciendo sin limite. */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.m-reels-meta{
    font-size:11px; letter-spacing:0.02em; color:rgba(232,223,208,.65);
    line-height:1.4;
}
.m-reels-next-hint{
    position:absolute; left:50%; bottom:120px; transform:translateX(-50%) translateY(6px);
    z-index:4; padding:8px 16px; background:rgba(17,17,16,.7); color:var(--paper);
    font:600 11px var(--font-body); letter-spacing:0.08em; text-transform:uppercase;
    opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none;
    white-space:nowrap;
}
.m-reels-next-hint.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.m-reels-fabs{
    flex:0 0 auto; /* nunca se encoge -- si algo cede espacio bajo presion, es .m-reels-info (min-width:0 + ellipsis) */
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.m-fab{
    /* Solo icono (+ contador para Me gusta) -- antes eran pildoras
       icono+texto ("ME GUSTA"/"COMPARTIR"/"DESCARGAR"), el ancho real de
       3 apiladas competia por espacio horizontal con el titulo/EXIF al
       lado (ver .m-reels-footer). El nombre completo sigue en aria-label
       (ver index.php) para lectores de pantalla, ya que el texto visible
       desaparece del todo.
    */
    cursor:pointer; background:rgba(17,17,16,.35);
    border:1px solid rgba(232,223,208,.4); color:var(--paper);
    width:42px; height:42px; border-radius:50%; padding:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    transition:background .2s ease, color .2s ease;
}
.m-fab svg{ flex:0 0 auto; }
.m-fab-label{ display:none; }
.m-fab.is-liked, .m-fab.is-copied{ background:var(--paper); color:var(--dark); border-color:var(--paper); }
.m-fab-count{
    font:600 9px var(--font-body); letter-spacing:0.02em; line-height:1;
}
.m-fab-count:empty{ display:none; }

/* ---------- Barra inferior ---------- */
.m-bottomnav{
    position:fixed; left:0; right:0; bottom:0; z-index:250; height:60px;
    background:var(--dark); border-top:1px solid var(--dark-line);
    display:flex; align-items:center; justify-content:space-around;
    /* transform en vez de display:none/flex -- permite animar la salida
       deslizandose hacia abajo (ver BottomNav.hide()) en vez de
       desaparecer en seco. pointer-events se apaga aparte para que no
       intercepte toques mientras esta fuera de la vista. */
    transform:translateY(0);
    transition:transform .28s cubic-bezier(.3,.7,.4,1);
}
.m-bottomnav[aria-hidden="true"]{ transform:translateY(100%); pointer-events:none; }
.m-nav-btn{
    background:none; border:0; cursor:pointer; color:rgba(232,223,208,.55);
    font:600 10px var(--font-body); letter-spacing:0.08em; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:4px;
}
.m-nav-btn.is-active{ color:var(--paper); }

/* ---------- Modales (descarga / contacto) ---------- */
.m-modal{
    position:fixed; inset:0; z-index:300; display:none;
    align-items:flex-end; justify-content:center;
    background:rgba(17,17,16,.55);
}
.m-modal[aria-hidden="false"]{ display:flex; }
.m-modal-box{
    width:100%; max-width:420px; background:var(--paper); color:var(--ink);
    padding:22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; gap:10px;
}
.m-modal-question{
    margin:0 0 6px; font-family:var(--font-display); font-weight:700; font-size:17px;
}
.m-modal-btn{
    display:block; width:100%; text-align:center; text-decoration:none;
    padding:13px; font:600 12px var(--font-body); letter-spacing:0.06em;
    border:1px solid var(--ink); color:var(--ink); background:none; cursor:pointer;
}
.m-modal-btn-primary{ background:var(--ink); color:var(--paper); }
.m-modal-btn-ghost{ border-color:var(--line); color:var(--mut); }
.m-modal-input, .m-modal-textarea{
    padding:11px 12px; border:1px solid var(--line); font-family:var(--font-body);
    font-size:13px; background:#fff; color:var(--ink); resize:vertical;
}
.m-modal-status{ margin:0; font-size:12px; color:var(--mut); min-height:16px; }

}