@font-face{font-family:Jost;src:url(/fonts/jost-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Bricolage;src:url(/fonts/bricolage-ui.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Literata;src:url(/fonts/literata-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Literata;src:url(/fonts/literata-italic.woff2) format("woff2");font-style:italic;font-display:swap}

:root{
  --azul:#1A5A75;--azul-2:#12415A;--azul-claro:#DCE7EA;--almagra:#8C3A2B;--albero:#D6A23A;--albero-claro:#F0CE7A;
  --cal:#ECEBE4;--cal-2:#E2E0D6;--cal-3:#F4F3EE;--blanco:#FBFAF6;--tinta:#22261F;--tinta-2:#55595B;--linea:#D3D0C4;
  --ok:#2E6B47;--j:Jost,"Trebuchet MS",sans-serif;--d:Bricolage,system-ui,sans-serif;--t:Literata,Georgia,serif;
  --r:18px;--sombra:0 1px 0 rgba(34,38,31,.06),0 8px 24px -12px rgba(18,65,90,.25);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{font:17px/1.5 var(--d);color:var(--tinta);background:var(--cal);min-height:100dvh;
  background-image:radial-gradient(120% 60% at 100% 0,rgba(26,90,117,.08),transparent 60%),radial-gradient(90% 50% at 0 100%,rgba(214,162,58,.10),transparent 60%);background-attachment:fixed}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--azul)}
:focus-visible{outline:3px solid var(--albero);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cabecera */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));
  background:var(--azul);color:var(--blanco);box-shadow:0 6px 18px -10px rgba(18,65,90,.6)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font:600 22px/1 var(--j);letter-spacing:.01em}
.marca svg{width:30px;height:30px;flex:none}
.marca small{display:block;font:500 12px/1.2 var(--d);opacity:.75;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.barra .atras{display:none}
.barra.sub .atras{display:grid}
.barra.sub .marca small{display:none}
.icono-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:inherit;cursor:pointer}
.icono-btn svg{width:22px;height:22px}
.icono-btn:active{background:rgba(255,255,255,.22)}
.barra .ver-web{margin-left:auto}

main{max-width:640px;margin:0 auto;padding:20px 16px calc(110px + env(safe-area-inset-bottom))}
h1{font:600 clamp(28px,7.4vw,36px)/1.1 var(--j);letter-spacing:-.005em;color:var(--azul-2)}
h2{font:600 21px/1.2 var(--j);color:var(--azul-2);margin:30px 0 12px}
.lead{font:italic 17px/1.5 var(--t);color:var(--tinta-2);margin-top:6px}

/* inicio */
.acciones{display:grid;gap:14px;margin-top:22px}
.accion{position:relative;display:flex;align-items:center;gap:16px;min-height:104px;padding:18px 20px;border-radius:24px;text-decoration:none;
  color:var(--blanco);background:var(--azul);box-shadow:var(--sombra);overflow:hidden;transition:transform .15s}
.accion:nth-child(2){background:var(--almagra)}
.accion:active{transform:scale(.98)}
.accion::after{content:"";position:absolute;right:-40px;bottom:-60px;width:150px;height:170px;border-radius:50%;background:rgba(255,255,255,.08)}
.accion svg{width:46px;height:46px;flex:none}
.accion b{display:block;font:600 22px/1.15 var(--j)}
.accion span{font-size:15px;opacity:.85}

.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini{position:relative;aspect-ratio:4/5;border-radius:50%/42%;overflow:hidden;background:var(--cal-2);border:3px solid var(--blanco);box-shadow:var(--sombra)}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.mini.oculta img{opacity:.35;filter:grayscale(1)}
.etq{display:inline-block;font:600 12px/1 var(--d);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:99px;background:var(--azul-claro);color:var(--azul-2)}
.etq.oculta,.etq.borrador{background:var(--cal-2);color:var(--tinta-2)}
.mini .etq{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap}
.vacio{padding:22px;border:2px dashed var(--linea);border-radius:var(--r);text-align:center;color:var(--tinta-2);font:italic 16px/1.5 var(--t)}

/* formularios */
.tarjeta{background:var(--cal-3);border-radius:24px;padding:20px;box-shadow:var(--sombra);margin-top:18px}
.campo{display:block;margin-top:18px}
.campo:first-child{margin-top:0}
.campo>span{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:6px}
.campo>span em{font:normal 14px var(--d);color:var(--tinta-2)}
.campo input[type=text],.campo textarea,.campo input[type=password]{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--linea);border-radius:14px;background:var(--blanco);font-size:17px;transition:border-color .15s}
.campo textarea{min-height:240px;resize:vertical;font:17px/1.6 var(--t)}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--azul)}
.ayuda{font-size:14px;color:var(--tinta-2);margin-top:6px}
.contador.cerca{color:var(--almagra)}

.elegir{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:200px;border:2px dashed var(--azul);border-radius:24px;
  background:rgba(26,90,117,.05);color:var(--azul-2);font:600 19px/1.2 var(--j);cursor:pointer;text-align:center;padding:20px}
.elegir svg{width:52px;height:52px}
.elegir small{font:400 14px var(--d);color:var(--tinta-2)}
.vista{display:grid;place-items:center;gap:12px}
.ovalo{width:min(70vw,280px);aspect-ratio:4/5;border-radius:50%/42%;overflow:hidden;border:5px solid var(--blanco);box-shadow:var(--sombra);background:var(--cal-2)}
.ovalo img{width:100%;height:100%;object-fit:cover;display:block}
.vista .pie{font:italic 16px/1.4 var(--t);color:var(--tinta-2);text-align:center;min-height:1.4em}
.vista .pie b{font:600 18px var(--j);font-style:normal;color:var(--azul-2);display:block}
.portada-vista{width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--cal-2)}
.portada-vista img{width:100%;height:100%;object-fit:cover;display:block}

.casilla{display:flex;gap:14px;align-items:flex-start;margin-top:20px;padding:14px;border-radius:16px;background:rgba(214,162,58,.14);cursor:pointer}
.casilla input{appearance:none;flex:none;width:30px;height:30px;border:2px solid var(--azul);border-radius:9px;background:var(--blanco);display:grid;place-items:center;cursor:pointer;margin-top:1px}
.casilla input:checked{background:var(--azul)}
.casilla input:checked::after{content:"";width:9px;height:16px;border:solid var(--blanco);border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.casilla span{font-weight:600;line-height:1.35}
.casilla small{display:block;font-weight:400;font-size:14px;color:var(--tinta-2);margin-top:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border:0;border-radius:16px;background:var(--azul);color:var(--blanco);
  font:600 18px/1 var(--j);letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .12s,background .15s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ancho{width:100%}
.btn.claro{background:var(--blanco);color:var(--azul-2);border:2px solid var(--linea)}
.btn.rojo{background:var(--almagra)}
.btn svg{width:22px;height:22px}
.fila-btn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.fila-btn .ancho{grid-column:1/-1}
.cargando{position:relative;color:transparent!important;pointer-events:none}
.cargando::after{content:"";position:absolute;width:24px;height:24px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
.btn.claro.cargando::after{border-color:rgba(26,90,117,.25);border-top-color:var(--azul)}
@keyframes gira{to{transform:rotate(1turn)}}

/* editor */
.herr{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.herr button{min-width:48px;min-height:44px;padding:0 14px;border:2px solid var(--linea);border-radius:12px;background:var(--blanco);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.herr button svg{width:18px;height:18px}
.herr button:active{background:var(--cal-2)}
.estado-guardado{font-size:14px;color:var(--tinta-2);margin-top:8px;min-height:1.3em}

/* gestionar */
.pestanas{display:flex;gap:6px;padding:5px;border-radius:16px;background:var(--cal-2);margin-top:18px}
.pestanas button{flex:1;min-height:46px;border:0;border-radius:12px;background:transparent;font-weight:600;cursor:pointer;color:var(--tinta-2)}
.pestanas button[aria-selected=true]{background:var(--blanco);color:var(--azul-2);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.lista{list-style:none;padding:0;display:grid;gap:12px;margin-top:16px}
.item{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:12px;border-radius:20px;background:var(--cal-3);box-shadow:var(--sombra)}
.item .mini{border-width:2px;box-shadow:none;width:72px}
.item .cuadro{width:72px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--azul-claro);display:grid;place-items:center;color:var(--azul)}
.item .cuadro img{width:100%;height:100%;object-fit:cover}
.item .cuadro svg{width:30px;height:30px}
.item h3{font:600 17px/1.25 var(--j);color:var(--tinta);overflow-wrap:anywhere}
.item p{font-size:14px;color:var(--tinta-2);margin-top:2px}
.item .botones{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.item .botones button{min-height:46px;border:2px solid var(--linea);border-radius:12px;background:var(--blanco);font-weight:600;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.item .botones button svg{width:18px;height:18px}
.item .botones .borrar{color:var(--almagra)}
.item.fuera{opacity:.55}
.enlace-papelera{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;min-height:48px;color:var(--tinta-2);font-weight:600}
.enlace-papelera svg{width:20px;height:20px}

/* éxito */
.exito{text-align:center;padding:30px 10px}
.exito .sello{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--ok);display:grid;place-items:center;animation:sello .5s cubic-bezier(.2,1.4,.4,1)}
.exito .sello svg{width:48px;height:48px;color:#fff}
.exito p{font:italic 17px/1.5 var(--t);color:var(--tinta-2);margin:8px 0 22px}
.exito .fila-btn{grid-template-columns:1fr}
@keyframes sello{from{transform:scale(.3);opacity:0}}

/* aviso flotante */
.aviso{position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;max-width:600px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;background:var(--tinta);color:var(--blanco);box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transform:translateY(200%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s .3s}
.aviso.ver{transform:none;visibility:visible;transition-delay:0s}
.aviso.mal{background:var(--almagra)}
.aviso p{flex:1;line-height:1.35}
.aviso button{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:rgba(255,255,255,.16);color:var(--albero-claro);font-weight:700;cursor:pointer}

/* vista previa del artículo */
.previa{position:fixed;inset:0;z-index:40;background:var(--blanco);overflow:auto;padding:0 0 100px}
.previa header{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:var(--albero-claro);font-weight:600}
.previa header button{margin-left:auto}
.articulo{max-width:640px;margin:0 auto;padding:24px 18px}
.articulo .portada-vista{margin-bottom:22px}
.articulo h1{font-size:clamp(30px,8vw,40px)}
.articulo .fecha{font-size:14px;color:var(--tinta-2);margin:8px 0 20px;text-transform:uppercase;letter-spacing:.06em}
.cuerpo{font:18px/1.7 var(--t)}
.cuerpo p,.cuerpo ul{margin-bottom:1em}
.cuerpo ul{padding-left:1.2em}
.cuerpo strong{font-weight:700;color:var(--azul-2)}

/* entrar */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--azul);background-image:radial-gradient(90% 60% at 50% 0,rgba(240,206,122,.18),transparent 70%)}
.entrar .caja{width:100%;max-width:400px;background:var(--cal-3);border-radius:28px;padding:30px 22px 26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.entrar .huella{display:block;width:64px;height:64px;margin:0 auto 12px;color:var(--azul)}
.entrar h1{text-align:center;font-size:40px}
.entrar .lead{text-align:center;margin-bottom:22px}
.entrar .error{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(140,58,43,.12);color:var(--almagra);font-weight:600;line-height:1.35}
.ver-clave{position:relative}
.ver-clave input{padding-right:58px!important}
.ver-clave button{position:absolute;right:4px;top:4px;width:48px;height:44px;border:0;background:none;color:var(--tinta-2);cursor:pointer;display:grid;place-items:center}
.ver-clave button svg{width:22px;height:22px}
.entrar .nota{text-align:center;font-size:14px;color:var(--tinta-2);margin-top:18px}

.pantalla{animation:entra-a .28s cubic-bezier(.2,.8,.3,1)}
.pantalla.atras{animation-name:entra-b}
@keyframes entra-a{from{opacity:0;transform:translateX(18px)}}
@keyframes entra-b{from{opacity:0;transform:translateX(-18px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-width:700px){.rejilla{grid-template-columns:repeat(6,1fr)}.acciones{grid-template-columns:1fr 1fr}}
.mt10{margin-top:10px}.mt20{margin-top:20px}.mt22{margin-top:22px!important}
#fila-enlace{margin:0 0 8px}
.url{grid-column:1/-1;min-height:52px;padding:0 14px;border:2px solid var(--linea);border-radius:14px;background:var(--blanco);font-size:17px}
.item .botones.uno{grid-template-columns:1fr}

/* --- mejoras --- */
body.fijo{overflow:hidden}
.cifras{font-size:15px;color:var(--tinta-2);margin:-6px 0 12px}
a.item{text-decoration:none;color:inherit}
.item.corto{grid-template-columns:56px 1fr}
.item.corto .cuadro{width:56px}
.item.saliendo{transition:opacity .25s,transform .25s;opacity:0;transform:translateX(40px)}
.num{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;margin-left:4px;border-radius:99px;background:var(--cal-2);font-size:13px;color:var(--tinta-2)}
.num:empty{display:none}
[aria-selected=true] .num{background:var(--azul);color:var(--blanco)}
.centro{text-align:center}
.fila-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.fila-mini .btn{min-height:48px;font-size:16px;padding:0 18px}
.btn.verde{background:#1F7A4D}
.progreso{height:10px;border-radius:99px;background:var(--cal-2);overflow:hidden;margin-top:20px}
.progreso div{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--azul),var(--albero));transition:width .2s}
/* esqueletos de carga */
.esq{background:linear-gradient(100deg,var(--cal-2) 30%,var(--cal-3) 50%,var(--cal-2) 70%);background-size:300% 100%;animation:brilla 1.3s linear infinite;border-radius:18px}
.esq.mini{border-radius:50%/42%;border:0;box-shadow:none}
.esq.item-esq{height:134px;list-style:none}
.esq.titulo-esq{height:40px;width:60%;margin-bottom:22px}
.esq.tarjeta-esq{height:420px;border-radius:24px}
@keyframes brilla{from{background-position:100% 0}to{background-position:-100% 0}}
/* huellas al publicar */
.huellita{position:fixed;z-index:60;width:26px;height:26px;pointer-events:none}
.huellita svg{width:100%;height:100%}
/* aviso instalar */
.instalar{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px;border-radius:20px;background:var(--cal-3);border:2px solid var(--albero-claro)}
.instalar>svg{width:34px;height:34px;flex:none;color:var(--azul)}
.instalar b{display:block;font:600 18px var(--j);color:var(--azul-2)}
.instalar span{font-size:15px;color:var(--tinta-2)}
/* ideas para el blog */
.ideas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ideas .ayuda{width:100%;margin:0}
.ideas button{min-height:44px;padding:8px 14px;border:2px solid var(--linea);border-radius:99px;background:var(--blanco);font-size:15px;cursor:pointer;text-align:left;line-height:1.25}
.ideas button:active{background:var(--azul-claro)}
.cuerpo h2{font:600 24px/1.2 var(--j);color:var(--azul-2);margin:1.4em 0 .5em}
/* ayuda */
.consejos{display:grid;gap:10px;margin-top:20px}
.consejo{background:var(--cal-3);border-radius:18px;box-shadow:var(--sombra)}
.consejo summary{list-style:none;cursor:pointer;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;font:600 18px/1.25 var(--j);color:var(--azul-2)}
.consejo summary::-webkit-details-marker{display:none}
.consejo summary::after{content:"+";font-size:26px;color:var(--albero);transition:transform .2s}
.consejo[open] summary::after{transform:rotate(45deg)}
.consejo p{padding:0 18px 18px;font:17px/1.6 var(--t);color:var(--tinta-2)}
/* entrar */
.entrar .huella ellipse{transform-box:fill-box;transform-origin:center;animation:pisa .5s cubic-bezier(.2,1.5,.4,1) backwards}
.entrar .huella g:nth-child(1) ellipse{animation-delay:.05s}.entrar .huella g:nth-child(2) ellipse{animation-delay:.12s}
.entrar .huella g:nth-child(3) ellipse{animation-delay:.19s}.entrar .huella g:nth-child(4) ellipse{animation-delay:.26s}.entrar .huella g:nth-child(5) ellipse{animation-delay:.36s}
@keyframes pisa{from{transform:scale(0)}}
.mayus{font-size:14px;color:var(--almagra);font-weight:600;margin-top:6px}
.entrar .caja{animation:sube .5s cubic-bezier(.2,.8,.3,1)}
@keyframes sube{from{opacity:0;transform:translateY(16px)}}
.entrar .caja.tiembla{animation:tiembla .4s}
@keyframes tiembla{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.esq{animation:none}}
.fila-btn:has(#quitar[hidden]) #poner{grid-column:1/-1}