/* Sistema visual de ¡Muéstrales Anabella!
   Compartido por todas las páginas. Ver DESIGN.md para el porqué de cada valor.
   Los estilos estructurales siguen inline en cada .dc.html para que el canvas
   los pueda editar; aquí viven sólo los estados y lo que se repite. */

html,body{margin:0;padding:0;background:#FFFFFF;color:#000000;font-family:'Archivo',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box;border-radius:0}
a{color:#C09000;text-decoration:none;border-bottom:1px solid #C09000}
a:hover{color:#A87800;border-bottom-color:#A87800}
input,button,textarea{font-family:'Archivo',Helvetica,sans-serif;border-radius:0}
::selection{background:#C09000;color:#000}
/* Sección Colaborar: asimetría sólo cuando hay ancho para ella. */
.colaborar-reja{display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,72px);align-items:start}
@media (min-width:1000px){.colaborar-reja{grid-template-columns:.82fr 1.18fr;gap:clamp(48px,5vw,88px)}}
/* Ficha de ingreso: papelería impresa. Campos con filete, sin caja. */
.ficha input,.ficha textarea{width:100%;background:transparent;border:none;border-bottom:1px solid #C0C0C0;color:#0A0A0A;font-size:17px;letter-spacing:-0.005em;padding:9px 0 10px;outline:none;transition:border-color .18s cubic-bezier(.22,1,.36,1)}
.ficha textarea{min-height:118px;line-height:1.5;resize:vertical}
.ficha input::placeholder,.ficha textarea::placeholder{color:#A0A0A0}
.ficha input:hover,.ficha textarea:hover{border-bottom-color:#787878}
.ficha input:focus,.ficha textarea:focus{border-bottom-color:#C09000}
/* El file va oculto, pero presente: el teclado lo necesita. */
.ficha .ficha-zona input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:none}
.ficha-zona:has(input:focus-visible){outline:2px solid #C09000;outline-offset:2px}
/* La trama a 135° ya significa "aquí va material" en el resto del sitio. */
.ficha-zona{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:132px;padding:20px;text-align:center;border:1px solid #C0C0C0;background-image:repeating-linear-gradient(135deg,#F4F4F4 0 7px,#EBEBEB 7px 14px);cursor:pointer;transition:border-color .16s,background-color .16s}
.ficha-zona:hover{border-color:#C09000}
.ficha-zona--arrastrando{border-color:#C09000;background-image:repeating-linear-gradient(135deg,#F7F0D9 0 7px,#F1E5BF 7px 14px)}
.ficha-quitar{position:absolute;top:0;right:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;background:#0A0A0A;color:#FFFFFF;font-size:14px;line-height:1;padding:0;cursor:pointer}
.ficha-quitar:hover{background:#C09000;color:#0A0A0A}
.ficha-quitar:focus-visible{outline:2px solid #C09000;outline-offset:-2px}
.ficha-enviar{width:100%;border:1px solid #0A0A0A;background:#0A0A0A;color:#FFFFFF;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:19px 28px;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.ficha-enviar:hover{background:#C09000;border-color:#C09000;color:#0A0A0A}
.ficha-enviar:disabled{background:#C0C0C0;border-color:#C0C0C0;color:#FFFFFF;cursor:progress}
.ficha-otra{border:1px solid #C0C0C0;background:transparent;color:#0A0A0A;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:13px 20px;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.ficha-otra:hover{background:#0A0A0A;border-color:#0A0A0A;color:#FFFFFF}
.ficha-enviar:focus-visible,.ficha-otra:focus-visible{outline:2px solid #C09000;outline-offset:2px}
/* Acuse de recibo: el sello llega de golpe y se queda torcido. */
.ficha-sello{rotate:-3deg;animation:sello .42s cubic-bezier(.16,1,.3,1) both}
@keyframes sello{from{opacity:0;scale:1.6}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){
  .ficha-sello{animation:none}
  .ficha input,.ficha textarea,.ficha-zona,.ficha-enviar,.ficha-otra,.ficha-quitar{transition:none}
}

/* ── Navegación: las palabras enormes que son el menú ──────────────────── */
.menu{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(4px,1vw,14px)}
.menu a{
  border:none;color:#0A0A0A;
  font-size:clamp(52px,11vw,150px);font-weight:700;
  letter-spacing:-0.05em;line-height:.95;
  transition:color .16s cubic-bezier(.22,1,.36,1)
}
.menu a:hover{color:#C09000}
.menu a:focus-visible{outline:3px solid #C09000;outline-offset:4px;color:#C09000}
.menu--claro a{color:#FFFFFF}
.menu--claro a:hover,.menu--claro a:focus-visible{color:#C09000}

/* ── Esquinas: marca, volver, buscar y la cuenta ───────────────────────── */
.esquina{position:fixed;z-index:20;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.esquina a,a.esquina{border:none;color:inherit}
.esquina--ai{top:22px;left:28px}
.esquina--ad{top:22px;right:28px}
.esquina--bi{bottom:22px;left:28px}
.esquina--bd{bottom:22px;right:28px;text-align:right}
/* `a.subir` y no `.subir`: hace falta la misma especificidad que el
   `a.esquina{border:none}` de arriba, o el recuadro no aparece. */
a.subir{
  display:inline-block;border:1px solid currentColor;padding:11px 18px;
  background:#FFFFFF;
  transition:background-color .16s,color .16s,border-color .16s
}
/* Va fijo sobre el contenido, así que necesita fondo propio para leerse
   encima de una miniatura. En páginas oscuras se invierte. */
a.subir--oscuro{background:#0A0A0A}
a.subir:hover,a.subir:focus-visible{background:#C09000;border-color:#C09000;color:#0A0A0A;outline:none}
/* Abajo, las dos esquinas de cuenta.js: «buscar» a la izquierda y el ícono
   de perfil a la derecha. Sus estilos viajan con el módulo. */

/* ── Listado: miniatura + título, más nuevo arriba ─────────────────────── */
.listado{display:flex;flex-direction:column}
.entrada{
  display:grid;grid-template-columns:clamp(96px,14vw,188px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,34px);align-items:start;
  border:none;color:inherit;
  padding:clamp(18px,2.4vw,28px) 0;border-top:1px solid #C0C0C0
}
.listado .entrada:first-child{border-top:none}
/* Sin foto, el texto ocupa todo el ancho: si no, caía en la columna angosta
   reservada a la miniatura. */
.entrada:not(:has(.entrada__foto)){grid-template-columns:minmax(0,1fr)}
.entrada__foto{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background-image:repeating-linear-gradient(135deg,#F4F4F4 0 7px,#EBEBEB 7px 14px)
}
/* La trama es «aquí va una imagen» mientras carga. Una portada en PNG
   transparente (un dibujo de líneas) la dejaba ver a través y parecía un
   hueco sin foto: los formatos que pueden ser transparentes llevan papel
   detrás. Sólo ésos, para que una foto JPG siga enseñando la trama mientras
   llega. El filete, por encima, le da borde a una portada clara. */
.entrada__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.entrada__foto img:is([src$=".png" i],[src$=".webp" i],[src$=".gif" i],[src$=".svg" i]){background:#FFFFFF}
.entrada__foto::after{content:"";position:absolute;inset:0;border:1px solid rgba(10,10,10,.1);pointer-events:none}
.entrada:hover .entrada__foto img{transform:scale(1.04)}
.entrada__titulo{
  font-size:clamp(20px,2.6vw,34px);font-weight:600;
  letter-spacing:-0.03em;line-height:1.1;color:#0A0A0A;text-wrap:pretty;
  transition:color .16s
}
.entrada:hover .entrada__titulo{color:#C09000}
.entrada:focus-visible{outline:3px solid #C09000;outline-offset:3px}
.entrada__meta{margin-top:9px;display:flex;flex-wrap:wrap;gap:14px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#787878}
.entrada__sumario{margin:10px 0 0;max-width:56ch;font-size:15px;line-height:1.5;color:#303030}
/* Tarjeta con dos destinos: el título se estira sobre toda la tarjeta (va a la
   nota) y el nombre de la autora queda por encima (va a su perfil). */
article.entrada{position:relative}
.entrada__enlace{display:block;border:none;color:#0A0A0A}
.entrada__enlace::after{content:"";position:absolute;inset:0}
.entrada__enlace:hover{color:#C09000}
.entrada__enlace:focus-visible{outline:none}
article.entrada:has(.entrada__enlace:focus-visible){outline:3px solid #C09000;outline-offset:3px}
.entrada__autora{position:relative;z-index:1;color:#0A0A0A;border-bottom:1px solid #C09000}
.entrada__autora:hover,.entrada__autora:focus-visible{color:#C09000;outline:none}

@media (prefers-reduced-motion:reduce){
  .menu a,.subir,.entrada__foto img,.entrada__titulo{transition:none}
}

/* ── Portada: lo más reciente de cada sección ─────────────────────────── */
.recientes__reja{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,56px)}
.recientes__titulo{display:block;padding-bottom:12px;border:none;border-bottom:1px solid #0A0A0A;
  font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1;color:#0A0A0A}
.recientes__titulo:hover{color:#C09000}
.recientes__vacio{margin:18px 0 0;color:#787878;font-size:15px}
.entrada--corta{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:18px 0}
.entrada--corta .entrada__titulo{font-size:clamp(18px,1.8vw,22px)}
.entrada--corta .entrada__sumario{margin-top:6px;font-size:14px;color:#787878}
.entrada__cuenta{color:#787878}