/* Estudio de contenido. Los colores y letras salen de /marca.css (la marca de cada cliente). Móvil primero. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--letra);font-weight:300;font-size:15px;line-height:1.55;color:var(--tinta);background:var(--fondo);min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
button,input,textarea{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}

.cab{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;border-bottom:1px solid color-mix(in srgb,var(--tinta) 10%,transparent);background:var(--fondo)}
.cab-logo{height:34px;width:auto}
.cab-t{display:flex;flex-direction:column;line-height:1.2}
.cab-ante{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--suave)}
.cab-nombre{font-family:var(--letra-titulos);font-size:17px;font-weight:500}

main{max-width:560px;margin:0 auto;padding:22px 16px 30px}
.tit{font-family:var(--letra-titulos);font-weight:500;font-size:27px;line-height:1.15;letter-spacing:.01em;margin-bottom:6px}
.tit em{font-family:var(--letra-acento);font-style:normal;font-weight:400;font-size:1.25em;color:var(--acento2);letter-spacing:0}
.sub{color:var(--suave);font-size:14px;margin-bottom:20px}
.eti{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--suave);margin:20px 0 8px}
textarea{width:100%;border:1px solid color-mix(in srgb,var(--tinta) 18%,transparent);background:#fff8;border-radius:2px;padding:12px 14px;resize:vertical;font-size:16px;line-height:1.45;font-weight:300}
textarea:focus{outline:none;border-color:var(--acento)}
.nota{font-size:12.5px;color:var(--suave);margin-top:8px}
.aviso{font-size:13.5px;margin-top:12px;min-height:1.2em;color:var(--acento2)}

.formatos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.formatos button{border:1px solid color-mix(in srgb,var(--tinta) 16%,transparent);background:transparent;padding:10px 4px;border-radius:2px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer}
.formatos b{font-weight:400;font-size:13.5px}
.formatos small{font-size:10.5px;color:var(--suave)}
.formatos button.on{border-color:var(--acento2);background:color-mix(in srgb,var(--acento2) 9%,transparent)}
.formatos button.on b{color:var(--acento2)}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--tinta);background:transparent;padding:11px 16px;border-radius:2px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;font-weight:400;text-align:center}
.bt.pri{background:var(--oscuro);color:var(--sobre-oscuro);border-color:var(--oscuro)}
.bt.sec{border-color:color-mix(in srgb,var(--tinta) 30%,transparent)}
.bt.ancho{width:100%;margin-top:22px;padding:15px}
.bt.peq{padding:8px 14px;font-size:11px}
.bt:disabled{opacity:.5}
.fila-bt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fila-bt .bt{padding:11px 6px;font-size:11px;letter-spacing:.14em}

.elegidas{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px}
.elegidas:empty{display:none}
.mini{position:relative;flex:0 0 72px;height:90px;background:#0001;overflow:hidden}
.mini img,.mini video{width:100%;height:100%;object-fit:cover}
.mini button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:14px;line-height:22px}
.mini .vid{position:absolute;left:4px;bottom:3px;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}

.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:16px}
.celda{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0001;border:0;padding:0;cursor:pointer}
.celda img{width:100%;height:100%;object-fit:cover}
.celda .vid{position:absolute;left:5px;bottom:4px;font-size:10px;color:#fff;letter-spacing:.1em;text-shadow:0 1px 3px #000}
.celda.sel::after{content:"✓";position:absolute;inset:0;background:color-mix(in srgb,var(--acento2) 45%,transparent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px}
.celda.pend{opacity:.55}
.celda.pend::before{content:"Guardando…";position:absolute;left:0;right:0;bottom:0;padding:3px;font-size:10px;background:#0008;color:#fff;text-align:center;z-index:1}

/* tarjetas de publicaciones */
.pieza{border-top:1px solid color-mix(in srgb,var(--tinta) 12%,transparent);padding:22px 0 26px}
.pieza:first-child{border-top:0;padding-top:8px}
.p-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.p-tit{font-family:var(--letra-titulos);font-size:19px;font-weight:500;line-height:1.2}
.p-meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);white-space:nowrap}
.p-cambios{font-size:13px;color:var(--suave);margin:-2px 0 10px;font-style:italic}
.carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;background:#0001}
.carrusel::-webkit-scrollbar{display:none}
.carrusel img{flex:0 0 100%;width:100%;scroll-snap-align:center;aspect-ratio:4/5;object-fit:cover}
.carrusel.vertical img{aspect-ratio:9/16}
.puntos{display:flex;justify-content:center;gap:6px;margin:8px 0 2px}
.puntos i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--tinta) 22%,transparent)}
.puntos i.on{background:var(--acento2)}
.reel{width:100%;aspect-ratio:9/16;background:#000;object-fit:contain}
.post{margin-top:14px;background:#fff7;border:1px solid color-mix(in srgb,var(--tinta) 10%,transparent);padding:12px 14px;font-size:14px;white-space:pre-wrap;max-height:9.5em;overflow:hidden;position:relative}
.post.abierto{max-height:none}
.post-mas{background:none;border:0;color:var(--acento2);font-size:12.5px;padding:4px 0;cursor:pointer}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.acciones .bt{font-size:10.5px;letter-spacing:.14em;padding:11px 4px}
.voto{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.voto .bt{font-size:11px;letter-spacing:.16em}
.voto .bt.hecho{background:color-mix(in srgb,var(--acento2) 14%,transparent);border-color:var(--acento2);color:var(--acento2)}
.cambio{margin-top:10px}
.cambio textarea{font-size:15px}
.cambio .bt{margin-top:8px;width:100%}

.espera{border:1px solid color-mix(in srgb,var(--acento2) 35%,transparent);background:color-mix(in srgb,var(--acento2) 6%,transparent);padding:16px;margin:4px 0 18px}
.espera b{display:block;font-family:var(--letra-titulos);font-weight:500;font-size:18px;margin-bottom:2px}
.espera p{font-size:13.5px;color:var(--suave)}
.espera .q{font-size:13px;margin-top:6px;font-style:italic}
.barra{height:2px;background:color-mix(in srgb,var(--acento2) 18%,transparent);margin-top:12px;overflow:hidden;position:relative}
.barra i{position:absolute;inset:0;width:35%;background:var(--acento2);animation:ir 1.8s ease-in-out infinite}
@keyframes ir{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.espera.error{border-color:color-mix(in srgb,var(--tinta) 25%,transparent);background:#0000000a}
.vacio{color:var(--suave);font-size:14px;padding:24px 0}

.tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--fondo);border-top:1px solid color-mix(in srgb,var(--tinta) 12%,transparent);padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:10}
.tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);padding:6px 0;position:relative;cursor:pointer}
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2}
.tabs button.on{color:var(--acento2)}
.tabs i{position:absolute;top:3px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;background:var(--acento2)}

.capa{position:fixed;inset:0;background:#0006;z-index:20;display:flex;align-items:flex-end}
.capa-in{background:var(--fondo);width:100%;max-height:86vh;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));border-radius:10px 10px 0 0}
.capa-cab{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-16px;background:var(--fondo);padding:4px 0 8px;z-index:1}
.capa-cab b{font-family:var(--letra-titulos);font-weight:500;font-size:19px}
.capa.oscura{background:#000e;align-items:center;justify-content:center;flex-direction:column}
#visor-in{width:100%;max-width:560px;padding:0 10px}
#visor-in img,#visor-in video{max-height:76vh;margin:0 auto;object-fit:contain}
#visor-in .bt{margin:14px auto 0;display:flex;width:calc(100% - 20px);background:var(--fondo);border-color:var(--fondo)}
.cerrar{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:40px;height:40px;border:0;background:none;color:#fff;font-size:32px;line-height:1;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--oscuro);color:var(--sobre-oscuro);padding:10px 18px;font-size:13px;z-index:30;border-radius:2px;max-width:90vw}
@media (min-width:700px){main{padding-top:34px}.tit{font-size:32px}}