/* Tipografías autoalojadas (Archivo + Archivo Black, SIL OFL 1.1) -------- */
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/archivo-latin-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Archivo Black"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/archivo-black-latin-400-normal.woff2") format("woff2"); }

/* ==========================================================================
   Urbanista Editorial — sistema visual
   Paleta y tipografía tomadas del rediseño en Canva (sept. 2026)
   ========================================================================== */

:root{
  /* Marca */
  --azul:        #006DFF;
  --azul-oscuro: #0055C7;
  --amarillo:    #FFE800;
  --amarillo-logo:#FFCC00;
  --tinta:       #1E1E1E;
  --tinta-suave: #2B2B2B;
  --crema:       #F7F5ED;
  --crema-hueso: #FFFDF6;
  --blanco:      #FFFFFF;

  /* Tipografía */
  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --texto:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida */
  --t-xs:  clamp(.72rem, .68rem + .2vw, .8rem);
  --t-sm:  clamp(.85rem, .8rem + .25vw, .95rem);
  --t-base:clamp(1rem, .95rem + .3vw, 1.125rem);
  --t-lg:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-2xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --t-3xl: clamp(2.6rem, 1.4rem + 5.6vw, 6rem);
  --t-mega:clamp(2.4rem, .2rem + 9.2vw, 8.5rem);

  /* Ritmo */
  --gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
  --seccion: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --ancho: 1280px;
  --radio: 14px;
  --radio-lg: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--texto);
  font-size:var(--t-base);
  line-height:1.62;
  color:var(--tinta);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.titulo-display{
  font-family:var(--display);
  font-weight:400;           /* Archivo Black ya es pesada */
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.contenedor{ width:min(100% - var(--gutter)*2, var(--ancho)); margin-inline:auto; }
.seccion{ padding-block:var(--seccion); position:relative; display:flow-root; }

/* Accesibilidad -------------------------------------------------------- */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amarillo); color:var(--tinta); padding:.8rem 1.2rem;
  font-weight:700; border-radius:0 0 var(--radio) 0;
}
.saltar:focus{ left:0; }
.vo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; border-radius:4px; }
.sobre-oscuro :focus-visible, .sobre-azul :focus-visible{ outline-color:var(--amarillo); }

/* Etiquetas / kickers -------------------------------------------------- */
.kicker{
  font-family:var(--texto);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:flex; width:fit-content; align-items:center; gap:.6rem;
  margin:0 0 1rem;
}
.kicker::before{ content:""; width:1.8rem; height:3px; background:currentColor; flex:none; }
.kicker--limpio::before{ display:none; }

/* Botones -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--texto); font-weight:700;
  font-size:var(--t-sm); letter-spacing:.06em; text-transform:uppercase;
  padding:.85em 1.6em; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background-color .15s ease, color .15s ease;
  line-height:1.15; text-align:center; text-wrap:balance;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--amarillo{ background:var(--amarillo); color:var(--tinta); }
.btn--amarillo:hover{ background:#FFF04D; }
.btn--azul{ background:var(--azul); color:#fff; }
.btn--azul:hover{ background:#2585FF; }
.btn--tinta{ background:var(--tinta); color:#fff; }
.btn--tinta:hover{ background:#000; }
.btn--fantasma{ background:transparent; color:currentColor; border-color:currentColor; }
.btn--fantasma:hover{ background:currentColor; }
.sobre-oscuro .btn--fantasma:hover{ color:var(--tinta); }
.sobre-azul .btn--fantasma:hover{ color:var(--azul); }
.btn--bloque{ width:100%; }

/* Fondos --------------------------------------------------------------- */
.sobre-oscuro{ background:var(--tinta); color:var(--crema); }
.sobre-azul{ background:var(--azul); color:#fff; }
#manuscrito, #cotiza{ scroll-margin-top:88px; }
.sobre-crema{ background:var(--crema); color:var(--tinta); }
.sobre-oscuro h1,.sobre-oscuro h2,.sobre-oscuro h3{ color:var(--crema); }
.amarillo{ color:var(--amarillo); }
.azul{ color:var(--azul); }

/* ======================================================================
   Encabezado
   ====================================================================== */
.sitio-header{
  position:sticky; top:0; z-index:100;
  background:rgba(30,30,30,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sitio-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:0;
  min-height:64px;
}
.marca{
  display:block; flex:none; overflow:hidden; text-decoration:none;
  height:64px; width:clamp(168px,38vw,210px);
}
.marca img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:6% 50%;
}

.nav-toggle{
  display:none; background:none; border:2px solid rgba(255,255,255,.35); color:#fff;
  border-radius:10px; padding:.45rem .7rem; cursor:pointer; align-items:center; gap:.5rem;
  font:700 var(--t-xs)/1 var(--texto); letter-spacing:.12em; text-transform:uppercase;
}
.nav-toggle svg{ width:18px; height:18px; }

.nav{ display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.6rem); }
.nav a{
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .2rem; border-bottom:2px solid transparent; white-space:nowrap;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--amarillo); }
.nav a[aria-current="page"]{ color:var(--amarillo); border-bottom-color:var(--amarillo); }
.nav .btn{ padding:.6em 1.2em; }
.nav .btn:hover{ border-bottom-color:transparent; }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:absolute; inset:100% 0 auto; flex-direction:column; align-items:stretch;
    gap:0; background:var(--tinta); padding:.5rem var(--gutter) 1.5rem;
    border-bottom:3px solid var(--amarillo);
    display:none;
  }
  .nav[data-abierto="true"]{ display:flex; }
  .nav a{ padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .nav .btn{ margin-top:1rem; justify-content:center; }
}

/* ======================================================================
   Hero
   ====================================================================== */
.hero{ position:relative; isolation:isolate; background:var(--tinta); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{                      /* velo para que el amarillo siempre se lea */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.25) 35%, rgba(20,20,20,.82) 100%);
}
.hero__inner{
  min-height:clamp(430px, 76vh, 760px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(4rem,10vh,7rem) clamp(2.2rem,5vh,3.5rem);
  color:#fff;
}
.hero h1{
  font-size:var(--t-3xl);
  color:var(--amarillo);
  text-shadow:0 2px 26px rgba(0,0,0,.45);
  max-width:15ch;
}
.hero__bajada{
  max-width:56ch; margin-top:1.4rem; font-size:var(--t-lg);
  color:rgba(255,255,255,.93); text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

/* Hero interior (páginas secundarias) ---------------------------------- */
.hero-pagina{ padding-block:clamp(3rem,8vw,6rem) clamp(2rem,5vw,3.5rem); position:relative; overflow:hidden; }
.hero-pagina h1{ font-size:var(--t-2xl); }
.hero-pagina__bajada{ max-width:62ch; margin-top:1.2rem; font-size:var(--t-lg); }

/* ======================================================================
   Marquesina
   ====================================================================== */
.marquesina{
  background:var(--amarillo); color:var(--tinta);
  border-block:3px solid var(--tinta);
  overflow:hidden; padding-block:.7rem;
}
.marquesina__pista{
  display:flex; gap:2.5rem; width:max-content;
  animation:desplazar 38s linear infinite;
  font-family:var(--display); font-size:var(--t-sm);
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.marquesina:hover .marquesina__pista{ animation-play-state:paused; }
@keyframes desplazar{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquesina__pista{ animation:none; width:100%; justify-content:center; overflow:hidden; }
}

/* ======================================================================
   Collage de servicios (home)
   ====================================================================== */
.collage{ position:relative; overflow:clip; }
.collage__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(.8rem,1.6vw,1.6rem);
  align-items:start;
}
.collage__texto{ grid-column:1 / 13; order:-1; margin-bottom:.5rem; }
.collage__texto h2{ font-size:var(--t-2xl); color:var(--amarillo); }
.collage__texto p{ max-width:52ch; margin-top:1rem; color:rgba(255,255,255,.92); }

.pieza{ position:relative; margin:0; }
.pieza img{
  width:100%; height:100%; object-fit:cover;
  border-radius:6px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.75);
}
.pieza figcaption{ margin-top:.7rem; }
.pieza__nombre{
  display:block; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amarillo);
  margin-bottom:.45rem;
}

/* Posiciones estilo collage — solo en pantallas anchas.
   La foto alta (b) va al centro ocupando dos filas; a/d a la izquierda y
   c/e a la derecha se acomodan bajo ella, sin dejar huecos. */
@media (min-width: 880px){
  .collage__grid{ row-gap:clamp(1.6rem,3vw,2.8rem); }
  .collage__texto{ grid-column:1 / 8; grid-row:1; order:0; margin-block:2rem 1rem; }
  .pieza--a{ grid-column:1 / 5;  grid-row:2; transform:rotate(-1.6deg); }
  .pieza--b{ grid-column:5 / 9;  grid-row:2 / 4; align-self:center; transform:rotate(1.1deg); }
  .pieza--c{ grid-column:9 / 13; grid-row:2; transform:rotate(-.9deg); margin-top:1.5rem; }
  .pieza--d{ grid-column:1 / 5;  grid-row:3; transform:rotate(1.3deg); margin-left:1.2rem; }
  .pieza--e{ grid-column:9 / 13; grid-row:3; transform:rotate(-1.4deg); margin-right:1rem; }
  .pieza--a img{ aspect-ratio:4/3; }
  .pieza--b img{ aspect-ratio:3/4; }
  .pieza--c img{ aspect-ratio:1/1; }
  .pieza--d img{ aspect-ratio:4/3; }
  .pieza--e img{ aspect-ratio:5/4; }
}
@media (max-width: 559px){
  .collage__grid{ grid-template-columns:1fr; }
  .pieza, .pieza--a, .collage__texto{ grid-column:1 / -1; }
  .pieza img, .pieza--a img{ aspect-ratio:4/3; }
}
@media (min-width: 560px) and (max-width: 879px){
  .collage__grid{ grid-template-columns:repeat(2,1fr); }
  .pieza{ grid-column:span 1; }
  .pieza img{ aspect-ratio:3/4; }
  .pieza--a{ grid-column:span 2; }
  .pieza--a img{ aspect-ratio:16/10; }
  .collage__texto{ grid-column:span 2; }
}

/* Decoración ----------------------------------------------------------- */
.deco{ position:absolute; pointer-events:none; user-select:none; z-index:0; opacity:.95; }
.deco img{ width:100%; height:auto; }
.deco--sup-der{ top:-3%; right:-4%; width:clamp(150px,22vw,340px); }
.deco--izq{ top:28%; left:-9%; width:clamp(130px,17vw,260px); }
.deco--inf-izq{ bottom:-5%; left:-5%; width:clamp(120px,16vw,240px); }
.deco--estrella{ width:clamp(90px,12vw,190px); }
@media (max-width: 700px){ .deco{ opacity:.5; } }

/* ======================================================================
   Bloque dividido (texto + imagen)
   ====================================================================== */
.dividido{
  display:grid; gap:clamp(1.8rem,4vw,4rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width: 900px){
  .dividido{ grid-template-columns:1fr 1fr; }
  .dividido--texto-der > :first-child{ order:2; }
}
.dividido h2{ font-size:var(--t-2xl); }
.dividido__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio); box-shadow:0 26px 60px -30px rgba(0,0,0,.6); }
.dividido__media{ position:relative; }

/* ======================================================================
   Tarjetas de servicio
   ====================================================================== */
.servicios-grid{
  display:grid; gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.tarjeta{
  display:flex; flex-direction:column;
  background:var(--crema-hueso);
  border-radius:var(--radio-lg);
  padding:clamp(1rem,1.6vw,1.35rem);
  box-shadow:0 20px 50px -34px rgba(0,0,0,.55);
  border:1px solid rgba(30,30,30,.07);
}
.tarjeta__media{ position:relative; border-radius:18px; overflow:hidden; }
.tarjeta__media img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.tarjeta__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.72) 100%);
}
.tarjeta__titulo{
  position:absolute; inset:auto 1rem 1rem; z-index:2;
  color:#fff; font-size:var(--t-lg); line-height:1.02;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.tarjeta__cuerpo{ padding:1.15rem .4rem 0; flex:1; }
.tarjeta__cuerpo p{ font-size:var(--t-sm); line-height:1.6; }
.tarjeta__pie{ padding:1.1rem .4rem .2rem; }

/* ======================================================================
   Ruta de publicación (KM)
   ====================================================================== */
.ruta{ display:grid; gap:clamp(1.2rem,2.4vw,1.8rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); counter-reset:km; }
.ruta__parada{
  position:relative; padding:1.6rem 1.3rem 1.4rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radio);
}
.ruta__km{
  display:inline-block; font-family:var(--display); font-size:var(--t-xs);
  letter-spacing:.14em; color:var(--tinta); background:var(--amarillo);
  padding:.3rem .65rem; border-radius:999px; margin-bottom:.9rem;
}
.ruta__parada h3{ font-size:var(--t-lg); margin-bottom:.7rem; }
.ruta__parada p{ font-size:var(--t-sm); color:rgba(255,255,255,.82); }

/* ======================================================================
   Banner Blue and Yellow
   ====================================================================== */
.banner-revista{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:clamp(340px,52vh,560px);
  text-decoration:none; color:#fff;
}
.banner-revista__media{ position:absolute; inset:0; z-index:-2; }
.banner-revista__media img{ width:100%; height:100%; object-fit:cover; }
.banner-revista::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,15,15,.35) 0%, rgba(15,15,15,.15) 45%, rgba(15,15,15,.88) 100%);
}
.banner-revista__inner{ padding-block:clamp(2.5rem,7vh,4.5rem); width:100%; }
.banner-revista__titulo{
  display:block;
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:-.02em;
  font-size:var(--t-mega); color:var(--amarillo); line-height:.82;
  text-shadow:0 4px 30px rgba(0,0,0,.5); margin-top:.5rem;
}
.banner-revista .btn{ margin-bottom:1.2rem; }

/* ======================================================================
   Revista — índice por categoría
   ====================================================================== */
.revista-portada img{ width:100%; aspect-ratio:2/1; object-fit:cover; }
@media (max-width:640px){ .revista-portada img{ aspect-ratio:4/3; } }
.revista-meta{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amarillo); padding-bottom:1.5rem;
}
.revista-titulo{ font-size:var(--t-mega); line-height:.82; }
.sobre-oscuro .revista-titulo{ color:var(--amarillo); }
.obra__numero{ letter-spacing:-.01em; }

.categoria{ margin-top:clamp(2.5rem,6vw,4.5rem); }
.categoria__titulo{ font-size:var(--t-2xl); margin-bottom:1.6rem; }
.sobre-oscuro .categoria__titulo--narrativa{ color:var(--amarillo); }
.sobre-oscuro .categoria__titulo--poesia{ color:#fff; }
.sobre-oscuro .categoria__titulo--ensayo{ color:var(--amarillo); }
.sobre-oscuro .categoria__titulo--entrevistas{ color:#4D9BFF; }

.obras{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr)); }
.obra{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:290px; padding:1.2rem;
  border:1px solid rgba(255,255,255,.16); border-radius:20px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px),
    rgba(255,255,255,.04);
}
.obra__numero{ display:block; font-family:var(--display); font-size:var(--t-xl); color:#fff; line-height:1; }
.obra__autor{ display:block; font-size:var(--t-xs); color:rgba(255,255,255,.55); letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; }
.obra__estado{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amarillo); margin-top:auto;
}
.obra__nota{ font-size:var(--t-sm); color:rgba(255,255,255,.72); margin-top:.5rem; }
.obra--tuya{ border-color:var(--amarillo); border-style:dashed; }
.obra--tuya .obra__numero{ color:var(--amarillo); }

/* ======================================================================
   Formularios
   ====================================================================== */
.formulario{
  background:var(--crema-hueso); color:var(--tinta);
  border-radius:var(--radio-lg); padding:clamp(1.3rem,3vw,2.2rem);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8);
}
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-size:var(--t-sm); font-weight:600; margin-bottom:.4rem; }
.campo input, .campo select, .campo textarea{
  width:100%; font:inherit; font-size:var(--t-sm); color:var(--tinta);
  padding:.75rem .9rem; border:1.5px solid rgba(30,30,30,.25);
  border-radius:10px; background:#fff;
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--azul); outline:none; box-shadow:0 0 0 3px rgba(0,109,255,.18); }
.campo__ayuda{ font-size:var(--t-xs); color:rgba(30,30,30,.6); margin-top:.35rem; }
.nota-form{ font-size:var(--t-xs); color:rgba(30,30,30,.6); margin-top:.9rem; text-align:center; }

/* Captura de correo en línea */
.captura{ display:flex; flex-wrap:wrap; gap:.7rem; max-width:560px; margin-top:1.5rem; }
.captura input{
  flex:1 1 240px; font:inherit; font-size:var(--t-base);
  padding:.9rem 1.2rem; border-radius:999px; border:2px solid transparent; background:#fff; color:var(--tinta);
}
.captura input:focus{ outline:none; border-color:var(--amarillo); }

/* ======================================================================
   Lista de requisitos
   ====================================================================== */
.lista-marcada{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem; }
.lista-marcada li{ position:relative; padding-left:1.8rem; font-size:var(--t-base); }
.lista-marcada li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.7rem; height:.7rem; background:var(--amarillo); transform:rotate(45deg);
}

/* ======================================================================
   Pie de página
   ====================================================================== */
.sitio-footer{ background:var(--tinta); color:rgba(255,255,255,.75); padding-block:clamp(2.5rem,5vw,4rem) 2rem; }
.sitio-footer__grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  padding-bottom:2.2rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.sitio-footer h3{ font-size:var(--t-xs); letter-spacing:.16em; color:var(--amarillo); margin-bottom:.9rem; }
.sitio-footer a{ color:rgba(255,255,255,.82); text-decoration:none; }
.sitio-footer a:hover{ color:var(--amarillo); text-decoration:underline; }
.sitio-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:var(--t-sm); }
.sitio-footer__base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.6rem; font-size:var(--t-xs); color:rgba(255,255,255,.55);
}
.sitio-footer__marca img{ height:44px; width:auto; margin-bottom:1rem; }
.sitio-footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.sitio-footer__legal a{ color:rgba(255,255,255,.72); text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); text-underline-offset:.22em; }
.sitio-footer__legal a:hover{ color:var(--amarillo); text-decoration-color:var(--amarillo); }

/* Consentimiento bajo los formularios */
.nota-legal{ font-size:var(--t-xs); margin:.7rem 0 0; color:rgba(30,30,30,.62); }
.nota-legal a{ color:var(--azul-oscuro); text-underline-offset:.2em; }
.sobre-oscuro .nota-legal, .hero .nota-legal{ color:rgba(255,255,255,.72); }
.sobre-oscuro .nota-legal a, .hero .nota-legal a{ color:var(--amarillo); }

/* Lectura ------------------------------------------------------------- */
.obra__titulo{ font-size:var(--t-lg); margin:.35rem 0 .45rem; }
.obra .btn{ margin-top:.8rem; }
.lectura{ max-width:72ch; }
.lectura h1{ font-size:var(--t-2xl); margin-bottom:.6rem; }
.lectura__autor{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); margin-bottom:2rem;
}
.lectura__cuerpo{ font-size:var(--t-lg); line-height:1.7; }
.lectura__cuerpo p{ margin:0 0 1.1em; }
.lectura__cuerpo h2{ font-size:var(--t-xl); margin:1.6rem 0 .8rem; }
.lectura__cuerpo blockquote{
  margin:1.4rem 0; padding-left:1rem; border-left:4px solid var(--amarillo);
}
.revista-intro strong{ color:var(--amarillo); }
.revista-intro a{ color:var(--amarillo); }

/* ======================================================================
   Revista — archivo de publicaciones (de la más nueva a la más antigua)
   ====================================================================== */
.revista-atajo{ margin:1.4rem 0 0; }
.archivo__cabeza{ margin-top:clamp(2.5rem,6vw,4.5rem); padding-top:clamp(2rem,5vw,3rem); border-top:1px solid rgba(255,255,255,.14); }
.archivo__titulo{ font-size:clamp(1.9rem, .6rem + 6.4vw, 6rem); color:var(--amarillo) !important; overflow-wrap:break-word; }
.archivo__resumen{ margin:1rem 0 0; color:rgba(255,255,255,.7); max-width:52ch; }

.destacada{
  position:relative; margin-top:2rem; padding:clamp(1.4rem,4vw,2.6rem);
  border-radius:var(--radio-lg); background:var(--azul); color:#fff; overflow:hidden;
}
.destacada::after{
  content:""; position:absolute; right:-40px; bottom:-60px; width:clamp(140px,22vw,280px); aspect-ratio:1;
  background:url("../img/estrella-halftone.svg") center/contain no-repeat; opacity:.25; pointer-events:none;
}
.destacada .kicker{ position:relative; }
.destacada__titulo{ position:relative; font-size:var(--t-2xl); max-width:20ch; color:#fff !important; }
.destacada__titulo a{ text-decoration:none; }
.destacada__titulo a:hover{ color:var(--amarillo); }
.destacada__bajada{ position:relative; max-width:52ch; margin:1rem 0 0; font-size:var(--t-lg); font-style:italic; color:rgba(255,255,255,.9); }
.destacada__meta{ position:relative; margin:1rem 0 1.4rem; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.destacada__meta strong{ color:var(--amarillo); }
.destacada .btn{ position:relative; }

.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; scroll-margin-top:90px; }
.filtro{
  display:inline-flex; align-items:center; gap:.5rem; min-height:40px;
  padding:.5rem 1rem; border-radius:999px; text-decoration:none;
  border:1.5px solid rgba(255,255,255,.28); color:#fff;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  scroll-margin-top:110px;
}
.filtro span{ font-weight:600; color:rgba(255,255,255,.55); letter-spacing:0; }
.filtro:hover{ border-color:var(--amarillo); }
.filtro[aria-current="true"]{ background:var(--amarillo); border-color:var(--amarillo); color:var(--tinta); }
.filtro[aria-current="true"] span{ color:rgba(30,30,30,.6); }
.filtros__bajada{ min-height:1.5em; margin:.9rem 0 0; color:rgba(255,255,255,.7); font-size:var(--t-sm); }

.archivo__lista{ margin-top:1.2rem; }
.archivo__mes{ margin-top:1.8rem; }
.archivo__mes[hidden]{ display:none; }
.archivo__mes-titulo{
  position:sticky; top:62px; z-index:2;
  padding:.7rem 0; background:var(--tinta);
  font-size:var(--t-sm); letter-spacing:.08em; color:rgba(255,255,255,.6) !important;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.entradas{ list-style:none; margin:0; padding:0; }
.entrada{ border-bottom:1px solid rgba(255,255,255,.1); }
.entrada[hidden]{ display:none; }
.entrada__enlace{
  display:grid; grid-template-columns:4.6rem minmax(0,1fr) auto; gap:clamp(.8rem,2.5vw,2rem);
  align-items:start; padding:1.4rem .4rem;
  color:#fff; text-decoration:none;
  transition:background-color .15s ease;
}
.entrada__enlace:hover{ background:rgba(255,255,255,.04); }
.entrada__fecha{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; padding-top:.2rem; }
.entrada__dia{ font-family:var(--display); font-size:var(--t-xl); color:var(--amarillo); }
.entrada__mesano{ margin-top:.35rem; font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.entrada__cuerpo{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.entrada__seccion{ font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.entrada[data-seccion="narrativa"] .entrada__seccion,
.entrada[data-seccion="ensayo"] .entrada__seccion{ color:var(--amarillo); }
.entrada[data-seccion="entrevistas"] .entrada__seccion{ color:#4D9BFF; }
.entrada[data-seccion="poesia"] .entrada__seccion{ color:#fff; }
.entrada__titulo{
  font-family:var(--display); font-size:var(--t-xl); line-height:1; text-transform:uppercase; letter-spacing:-.02em;
  overflow-wrap:break-word; transition:color .15s ease;
}
.entrada__enlace:hover .entrada__titulo{ color:var(--amarillo); }
.entrada__bajada{ max-width:62ch; font-style:italic; color:rgba(255,255,255,.78); }
.entrada__meta{ font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.entrada__meta strong{ color:#fff; letter-spacing:.08em; }
.entrada__flecha{ font-family:var(--display); font-size:var(--t-lg); color:var(--amarillo); padding-top:.3rem; transition:transform .15s ease; }
.entrada__enlace:hover .entrada__flecha{ transform:translateX(4px); }
@media (max-width:560px){
  .entrada__enlace{ grid-template-columns:3.4rem minmax(0,1fr); }
  .entrada__flecha{ display:none; }
}

.archivo__vacio{ margin:2rem 0 0; padding:1.4rem; border:1.5px dashed var(--amarillo); border-radius:var(--radio); color:rgba(255,255,255,.85); }
.archivo__vacio a{ color:var(--amarillo); font-weight:700; }
.archivo__mas{ margin:1.8rem 0 0; text-align:center; }
.archivo__mas .btn[hidden]{ display:none; }

.invitacion{
  margin-top:clamp(2.5rem,6vw,4rem); padding:clamp(1.4rem,4vw,2.4rem);
  border-radius:var(--radio-lg); background:var(--amarillo); color:var(--tinta);
}
.invitacion__titulo{ font-family:var(--display); font-size:var(--t-xl); line-height:1; text-transform:uppercase; margin:0 0 .6rem; }
.invitacion .btn{ margin-top:.6rem; }

/* Lectura dentro del estudio y avisos */
.lectura__cuerpo hr{ border:0; text-align:center; margin:1.6em 0; }
.lectura__cuerpo hr::before{ content:"✦   ✦   ✦"; white-space:pre; color:var(--azul); }
.lectura__cuerpo h3{ font-size:var(--t-lg); margin:1.4rem 0 .6rem; }

/* Pantallas de error -------------------------------------------------- */
.pagina-error{ min-height:calc(100vh - 74px); display:flex; align-items:center; }
.pagina-error__inner{ padding-block:clamp(3rem,8vw,6rem); max-width:18ch; }
.pagina-error__codigo{
  font-family:var(--display); font-size:var(--t-mega); line-height:.8;
  color:var(--amarillo); margin:0 0 .6rem;
}
.pagina-error h1{ font-size:var(--t-2xl); max-width:14ch; }
.pagina-error__texto{ max-width:42ch; margin-top:1rem; color:rgba(255,255,255,.82); }
.pagina-error .pagina-error__inner{ max-width:none; }

/* Estudio -------------------------------------------------------------- */
.estudio-login{ min-height:100vh; display:grid; place-items:center; padding:2rem var(--gutter); }
.estudio-login__caja{ width:min(100%, 440px); }
.estudio-login__caja img{ width:52px; height:auto; margin:0 auto 1rem; }
.estudio-login .formulario h1,
.estudio-login .formulario p,
.estudio-login .formulario label{ color:var(--tinta); }
.estudio-login h1{ font-size:var(--t-2xl); margin-bottom:.6rem; }
.estudio-error{
  background:#ffe8e6; color:#7a1d16; border-radius:10px;
  padding:.7rem .9rem; font-size:var(--t-sm); font-weight:600;
}
.estudio-usuario{ color:var(--amarillo); font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0; }
.estudio h1{ font-size:var(--t-2xl); }
.estudio-lead{ max-width:52ch; margin-top:.8rem; }
.estudio-app{
  display:grid; grid-template-columns:280px minmax(0,1fr);
  align-items:stretch; min-height:calc(100vh - 74px); background:var(--crema);
}
.estudio-barra{
  position:sticky; top:74px; align-self:start;
  min-height:calc(100vh - 74px);
  background:var(--tinta); color:#fff;
  padding:1.5rem 1rem 2rem;
  border-right:3px solid var(--amarillo);
}
.estudio-barra__kicker{
  margin:0 0 1rem; padding-inline:.4rem;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amarillo);
}
.estudio-tareas{ display:grid; gap:.55rem; }
.tarea{
  display:grid; grid-template-columns:auto 1fr; column-gap:.8rem; row-gap:.15rem;
  align-items:center; text-decoration:none; color:#fff;
  padding:.9rem .85rem; border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:background-color .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.tarea__indice{
  grid-row:span 2; font-family:var(--display); font-size:var(--t-lg); line-height:1; color:var(--amarillo);
}
.tarea__nombre{
  font-family:var(--display); font-size:var(--t-sm); letter-spacing:-.02em; text-transform:uppercase; line-height:1.05;
}
.tarea__detalle{ font-size:var(--t-xs); color:rgba(255,255,255,.62); line-height:1.3; }
.tarea:hover, .tarea:focus-visible{
  background:var(--amarillo); color:var(--tinta); border-color:var(--amarillo);
  transform:translateX(8px);
}
.tarea:hover .tarea__indice, .tarea:hover .tarea__detalle,
.tarea:focus-visible .tarea__indice, .tarea:focus-visible .tarea__detalle{ color:var(--tinta); }
.tarea:active{ transform:translateX(3px) scale(.98); }
.tarea[aria-current="page"]{
  background:var(--amarillo); color:var(--tinta); border-color:var(--amarillo);
}
.tarea[aria-current="page"] .tarea__indice,
.tarea[aria-current="page"] .tarea__detalle{ color:var(--azul-oscuro); }
.estudio-cuerpo{ min-width:0; }
.estudio-cuerpo .estudio{ width:min(100% - var(--gutter) * 2, 920px); margin-inline:clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 860px){
  .estudio-app{ grid-template-columns:1fr; }
  .estudio-barra{ position:sticky; top:64px; min-height:0; z-index:40; padding-block:.8rem 1rem; }
  .tarea:hover, .tarea:focus-visible{ transform:none; }
}
.estudio-publicacion{
  background:var(--crema-hueso); border:1px solid rgba(30,30,30,.08);
  border-radius:var(--radio); padding:1.1rem 1.15rem 1rem;
}
.estudio-publicacion dl{ margin:0; display:grid; gap:.7rem; }
.estudio-publicacion dt{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--azul);
}
.estudio-publicacion dd{ margin:.15rem 0 0; }
.estudio-publicacion__texto dd{
  max-height:220px; overflow:auto; padding:.7rem .8rem; background:#fff;
  border-radius:12px; border:1px solid rgba(30,30,30,.08);
}
.estudio-encabezado{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:end; margin-bottom:1.4rem; }
.estudio-aviso{ background:var(--tinta); color:var(--amarillo); border-radius:12px; padding:.8rem 1rem; font-weight:700; }
.estudio-lista{ display:grid; gap:.8rem; margin:1.2rem 0 2.5rem; }
.estudio-fila{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  background:var(--crema-hueso); border:1px solid rgba(30,30,30,.08);
  border-radius:var(--radio); padding:1rem 1.1rem;
}
.estudio-fila p{ margin:.25rem 0 0; font-size:var(--t-sm); color:rgba(30,30,30,.7); }
.estudio-fila__acciones{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.estudio-fila__acciones .btn{ padding:.45em .8em; }
.estudio-bloque{ margin-top:2.5rem; }
.estudio-bloque h2{ font-size:var(--t-xl); margin-bottom:.6rem; }
.estudio-form{ margin-top:1.2rem; }
.estudio-check{ display:flex; gap:.6rem; align-items:center; font-weight:700; margin:1rem 0 1.2rem; }
.editor{ margin:1rem 0 1.3rem; }
.editor__barra{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.45rem 0; }
.editor__barra button{
  font:700 var(--t-xs)/1 var(--texto); letter-spacing:.04em; text-transform:uppercase;
  background:#fff; border:1.5px solid rgba(30,30,30,.2); border-radius:999px;
  padding:.55rem .75rem; cursor:pointer;
}
.editor__barra button:hover{ border-color:var(--azul); color:var(--azul); }
.editor__hoja{
  min-height:220px; background:#fff; color:var(--tinta);
  border:1.5px solid rgba(30,30,30,.25); border-radius:12px;
  padding:1rem 1.1rem; font-size:var(--t-base); line-height:1.65;
}
.editor__hoja:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(0,109,255,.18); }
.sitio-header .btn--fantasma{ color:#fff; border-color:rgba(255,255,255,.45); }