/* =========================================================
   CONTRA HUELLA - MAIN.CSS
   100% basado en variables entregadas (variables.css)
   No usa colores hardcodeados fuera de :root
   HERO SLIDER dedicado como HERO principal
   ========================================================= */
@import url('./variables.css');

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-primary);
  font-size:var(--font-size-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* Tipografía - usa variables de tamaño */
.font-brand{font-family:var(--font-secondary);letter-spacing:.06em}
.font-editorial{font-family:var(--font-primary);font-weight:700}
.font-sans{font-family:var(--font-primary)}

/* Layout */
.container{max-width:var(--container-width);margin-inline:auto;padding-inline:var(--space-sm)}
@media(min-width:768px){.container{padding-inline:var(--space-md)}}

/* Header */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:40;
  height:5rem;
  background:color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border);
  transition:var(--transition-base);
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--space-sm)}
.logo{display:flex;align-items:center;gap:var(--space-sm)}
.logo__img{height:42px;width:auto;object-fit:contain;transition:var(--transition-fast)}
.logo__img:hover{opacity:.85}
.logo__title{font-family:var(--font-secondary);font-weight:700;letter-spacing:.08em;font-size:var(--font-size-base);color:var(--color-text)}
.logo__subtitle{font-family:var(--font-secondary);font-size:var(--font-size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary);font-weight:600}

/* Nav */
.nav{display:none;gap:var(--space-md);font-size:var(--font-size-sm);font-weight:500}
.nav__link{padding-block:var(--space-xs);border-bottom:2px solid transparent;transition:var(--transition-fast);color:var(--color-text)}
.nav__link:hover,.nav__link.is-active{color:var(--color-accent);border-color:var(--color-accent)}
@media(min-width:1024px){.nav{display:flex}}
.btn-cta{display:none}
@media(min-width:640px){.btn-cta{display:inline-flex}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);
  font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  transition:var(--transition-fast);border:1px solid transparent;white-space:nowrap;
}
.btn--primary{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}
.btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);box-shadow:var(--shadow-sm)}
.btn--dark{background:var(--color-primary);color:var(--color-text-inverse)}
.btn--dark:hover{background:var(--color-accent-hover)}
.btn--ghost{background:transparent;border-color:color-mix(in srgb, var(--color-text-inverse) 40%, transparent);color:var(--color-text-inverse)}
.btn--ghost:hover{border-color:var(--color-text-inverse);background:rgba(255,255,255,.08)}
.btn--light{background:var(--color-text-inverse);color:var(--color-primary);border-color:var(--color-border)}
.btn--light:hover{background:var(--color-background-soft)}
.btn--outline{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.btn--outline:hover{border-color:var(--color-border-dark)}

/* Mobile */
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--color-text)}
@media(min-width:1024px){.burger{display:none}}
.mobile-drawer{display:none;border-top:1px solid var(--color-border);background:var(--color-background);padding:var(--space-sm);box-shadow:var(--shadow-md)}
.mobile-drawer.is-open{display:block}
@media(min-width:1024px){.mobile-drawer{display:none !important}}

/* =========================================================
   HERO - SLIDER HERO (100% HERO)
   Ocupa viewport, es el HERO principal de la landing
   ========================================================= */
.hero{
  position:relative;
  background:var(--color-primary);
  color:var(--color-text-inverse);
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:5rem;
  isolation:isolate;
}
.hero__slider{
  position:relative;
  width:100%;
  min-height:calc(100vh - 5rem);
  display:flex;
  align-items:center;
}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .7s ease;
  display:flex;align-items:center;
  pointer-events:none;
}
.hero__slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.32;
  filter:grayscale(100%);
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, var(--color-primary) 18%, color-mix(in srgb, var(--color-primary) 88%, transparent) 58%, transparent 82%);
  z-index:1;
}
.hero__content{
  position:relative;z-index:2;
  padding-block:var(--space-xl);
  max-width:42rem;
}
.badge{
  display:inline-block;
  padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-sm);
  font-family:var(--font-secondary);
  font-size:var(--font-size-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.badge--dark{background:var(--color-accent);color:var(--color-text-inverse)}
.badge--light{background:var(--color-background);color:var(--color-primary)}
.badge--soft{background:var(--color-background-soft);color:var(--color-text);border:1px solid var(--color-border)}
.hero__title{
  font-family:var(--font-primary);
  font-weight:700;
  line-height:1.05;
  margin:var(--space-sm) 0 var(--space-sm);
  font-size:clamp(1.9rem,5vw,var(--font-size-3xl));
  color:var(--color-text-inverse);
}
.hero__desc{
  color:var(--color-text-muted);
  font-weight:300;
  font-size:var(--font-size-lg);
  line-height:1.6;
  margin-bottom:var(--space-lg);
}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;
  background:color-mix(in srgb, var(--color-primary) 60%, transparent);
  border:1px solid color-mix(in srgb, var(--color-border) 22%, transparent);
  color:var(--color-text-inverse);
  display:grid;place-items:center;
  transition:var(--transition-fast);
}
.hero__arrow:hover{background:var(--color-accent);border-color:var(--color-accent)}
.hero__arrow--prev{left:var(--space-sm)}
.hero__arrow--next{right:var(--space-sm)}
.hero__dots{
  position:absolute;bottom:var(--space-lg);left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:var(--space-xs);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:color-mix(in srgb, var(--color-text-inverse) 35%, transparent);
  border:0;transition:var(--transition-fast);
}
.dot.is-active{background:var(--color-text-inverse);width:24px;border-radius:999px}
@media(max-width:640px){
  .hero{min-height:92vh}
  .hero__slider{min-height:calc(92vh - 5rem)}
  .hero__overlay{background:linear-gradient(180deg, var(--color-primary) 10%, color-mix(in srgb, var(--color-primary) 78%, transparent) 65%, transparent)}
  .hero__arrow{width:40px;height:40px}
}

/* Sections */
.section{padding:var(--space-2xl) 0;border-bottom:1px solid var(--color-border)}
.section--soft{background:var(--color-background-soft)}
.section__eyebrow{color:var(--color-text-secondary);font-family:var(--font-secondary);font-size:var(--font-size-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.section__title{font-family:var(--font-primary);font-weight:700;color:var(--color-text);font-size:clamp(1.6rem,3.5vw,var(--font-size-2xl));margin-top:var(--space-xs)}
.section__desc{color:var(--color-text-secondary);margin-top:var(--space-xs);max-width:36rem;font-size:var(--font-size-base)}

/* Card base */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.tabs{display:flex;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-md)}
.tabs__btn{flex:1;padding:var(--space-sm);text-align:center;font-family:var(--font-primary);font-weight:700;font-size:var(--font-size-base);border:0;background:transparent;border-bottom:2px solid transparent;color:var(--color-text-muted);transition:var(--transition-fast)}
.tabs__btn.is-active{border-color:var(--color-accent);color:var(--color-text)}
.tabs__panel{padding:0 0 var(--space-sm)}
.tabs__panel[hidden]{display:none !important}

/* Grid */
.grid{display:grid;gap:var(--space-md)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:640px){.grid--3{grid-template-columns:repeat(2,1fr)} .grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)}}

/* Value cards */
.value-card{padding:var(--space-lg);transition:var(--transition-base);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.value-card:hover{border-color:var(--color-border-dark);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.value-card__icon{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-background-soft);color:var(--color-text);font-size:var(--font-size-lg);margin-bottom:var(--space-md);transition:var(--transition-fast);border:1px solid var(--color-border)}
.value-card:hover .value-card__icon{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.value-card__title{font-family:var(--font-primary);font-weight:700;color:var(--color-text);margin-bottom:var(--space-xs)}
.value-card__text{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1.6}

/* Book cards */
.book-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:var(--transition-base)}
.book-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-dark)}
.book-card__media{position:relative;height:18rem;overflow:hidden;background:var(--color-background-soft)}
.book-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:grayscale(100%)}
.book-card:hover .book-card__media img{transform:scale(1.05);filter:grayscale(0%)}
.book-card__tag{position:absolute;top:var(--space-sm);right:var(--space-sm);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-border)}
.tag--dark{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.tag--light{background:var(--color-background);color:var(--color-text);border-color:var(--color-border)}
.book-card__body{padding:var(--space-md);flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}
.book-card__footer{margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}

/* Posts */
.post{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition-base)}
.post:hover{box-shadow:var(--shadow-md)}
.post__img{height:12rem;object-fit:cover;width:100%;filter:grayscale(100%)}
.post:hover .post__img{filter:grayscale(0%)}
.post__body{padding:var(--space-md)}

/* Equipo */
.member{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);text-align:center}
.member__avatar{width:7rem;height:7rem;border-radius:50%;object-fit:cover;margin:0 auto var(--space-sm);border:2px solid var(--color-border-dark);filter:grayscale(100%)}

/* Logos */
.logos{padding:var(--space-xl) 0;background:var(--color-background-soft);overflow:hidden;border-bottom:1px solid var(--color-border)}
.marquee{display:flex;width:200%;animation:scroll 25s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Contacto */
.contact-grid{display:grid;gap:var(--space-lg)}
@media(min-width:1024px){.contact-grid{grid-template-columns:7fr 5fr}}
.form{display:grid;gap:var(--space-sm)}
.field{display:grid;gap:var(--space-xs)}
.field__label{font-family:var(--font-secondary);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--color-text)}
.field__input{width:100%;padding:var(--space-sm) var(--space-sm);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-family:var(--font-primary);transition:var(--transition-fast);color:var(--color-text)}
.field__input:focus{outline:none;border-color:var(--color-border-dark);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent)}
.field__input:invalid:not(:placeholder-shown){border-color:#c0392b}

/* Footer */
.footer{background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-xl) 0 var(--space-lg);border-top:1px solid var(--color-border-dark)}
.footer__grid{display:grid;gap:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid color-mix(in srgb, var(--color-text-inverse) 10%, transparent)}
@media(min-width:768px){.footer__grid{grid-template-columns:2fr 1fr 1fr}}
.footer__brand{font-family:var(--font-secondary);font-weight:700;letter-spacing:.08em;color:var(--color-text-inverse)}
.social{display:flex;gap:var(--space-xs)}
.social__link{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb, var(--color-text-inverse) 10%, transparent);display:grid;place-items:center;font-size:var(--font-size-xs);transition:var(--transition-fast);color:var(--color-text-inverse)}
.social__link:hover{background:var(--color-text-inverse);color:var(--color-primary)}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:color-mix(in srgb, var(--color-primary) 80%, transparent);backdrop-filter:blur(4px);padding:var(--space-sm);overflow-y:auto}
.modal.is-open{display:flex}
.modal__box{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;max-width:42rem;max-height:90vh;overflow:auto;padding:var(--space-md);position:relative;box-shadow:var(--shadow-lg)}
@media(min-width:640px){.modal__box{padding:var(--space-lg)}}
.modal__close{position:absolute;top:var(--space-sm);right:var(--space-sm);width:40px;height:40px;border:0;background:transparent;font-size:var(--font-size-lg);color:var(--color-text)}
.modal__close:hover{color:var(--color-text-secondary)}

/* Toast */
.toast{position:fixed;bottom:var(--space-md);right:var(--space-md);z-index:60;display:none;align-items:center;gap:var(--space-sm);background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:1px solid var(--color-border-dark)}
.toast.is-visible{display:flex}
.toast i{color:var(--color-text-inverse)}

/* =========================================================
   CATALOGO PREMIUM - 37 libros reales
   ========================================================= */
.catalog-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}
.search-box{position:relative;flex:1;min-width:260px;max-width:420px}
.search-box input{width:100%;padding:var(--space-sm) var(--space-sm) var(--space-sm) 2.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-primary);font-size:var(--font-size-sm);color:var(--color-text);transition:var(--transition-fast)}
.search-box input:focus{outline:none;border-color:var(--color-border-dark);box-shadow:var(--shadow-sm)}
.search-box i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:var(--font-size-sm)}
.filter-pills{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.pill{padding:var(--space-xs) var(--space-sm);border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.04em;color:var(--color-text-secondary);transition:var(--transition-fast);cursor:pointer;font-family:var(--font-primary)}
.pill:hover{border-color:var(--color-border-dark);color:var(--color-text)}
.pill.is-active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.premium-grid{display:grid;gap:var(--space-md);grid-template-columns:1fr}
@media(min-width:600px){.premium-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.premium-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1400px){.premium-grid{grid-template-columns:repeat(4,1fr)}}
.premium-card{group:premium;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:var(--transition-base);position:relative;box-shadow:var(--shadow-sm)}
.premium-card:hover{border-color:var(--color-border-dark);box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.premium-card__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--color-background-soft)}
.premium-card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05) brightness(1.02);transition:transform .6s ease, filter .5s ease}
.premium-card:hover .premium-card__media img{transform:scale(1.04);filter:grayscale(0%) contrast(1) brightness(1)}
.premium-card__overlay{position:absolute;inset:0;background:linear-gradient(to top, color-mix(in srgb, var(--color-primary) 78%, transparent) 12%, color-mix(in srgb, var(--color-primary) 32%, transparent) 38%, transparent 62%);opacity:0;transition:var(--transition-base);display:flex;align-items:end;justify-content:center;padding:var(--space-sm)}
.premium-card:hover .premium-card__overlay{opacity:1}
.premium-card__cta{background:var(--color-background);color:var(--color-primary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.premium-card__meta{position:absolute;top:var(--space-xs);left:var(--space-xs);display:flex;gap:var(--space-xs)}
.premium-card__tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:var(--radius-sm);background:var(--color-background);border:1px solid var(--color-border);color:var(--color-text)}
.premium-card__tag--cat{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.premium-card__body{padding:var(--space-sm) var(--space-sm) var(--space-sm);display:flex;flex-direction:column;gap:4px;flex:1;border-top:1px solid var(--color-border)}
.premium-card__title{font-family:var(--font-primary);font-weight:700;font-size:var(--font-size-sm);line-height:1.25;color:var(--color-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.premium-card__author{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-card__has-back{position:absolute;bottom:var(--space-xs);right:var(--space-xs);background:color-mix(in srgb, var(--color-primary) 88%, transparent);color:var(--color-text-inverse);font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 6px;border-radius:999px;border:1px solid color-mix(in srgb, var(--color-text-inverse) 14%, transparent);backdrop-filter:blur(6px)}
.premium-card__year{font-size:10px;color:var(--color-text-muted);letter-spacing:.06em}
.premium-modal__grid{display:grid;gap:var(--space-md)}
@media(min-width:768px){.premium-modal__grid{grid-template-columns:42% 58%}}
.premium-modal__gallery{position:sticky;top:0;display:grid;gap:var(--space-xs)}
.premium-modal__cover{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-background-soft);box-shadow:var(--shadow-sm)}
.premium-modal__cover img{width:100%;height:100%;object-fit:cover;transition:filter .4s ease}
.premium-modal__cover img.is-bw{filter:grayscale(100%)}
.premium-modal__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}
.premium-modal__thumb{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;opacity:.92;transition:var(--transition-fast);position:relative;background:var(--color-background-soft)}
.premium-modal__thumb:hover{opacity:1;border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.premium-modal__thumb.is-active{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent)}
.premium-modal__thumb img{width:100%;height:100%;object-fit:cover}
.premium-modal__thumb-label{position:absolute;bottom:4px;left:4px;background:var(--color-primary);color:var(--color-text-inverse);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px}
.premium-modal__info h2{font-family:var(--font-primary);font-weight:700;font-size:var(--font-size-xl);line-height:1.15;color:var(--color-text);margin-bottom:var(--space-xs)}
.premium-modal__author{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-xs)}
.premium-modal__author a{color:var(--color-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.premium-modal__author a:hover{color:var(--color-accent-hover)}
.premium-modal__desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.7;margin:var(--space-sm) 0}
.premium-modal__facts{display:grid;gap:var(--space-xs);background:var(--color-background-soft);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm);font-size:var(--font-size-xs)}
.premium-modal__facts span{color:var(--color-text-secondary)}
.premium-modal__facts strong{color:var(--color-text)}
.catalog-count{font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:.06em}

/* Zoom de portadas (lupa + visor) */
.cover-zoom{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.cover-zoom__badge{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--color-primary) 88%, transparent);color:var(--color-text-inverse);font-size:14px;opacity:0;transform:scale(.9);transition:var(--transition-fast)}
.cover-zoom:hover .cover-zoom__badge,.cover-zoom:focus-visible .cover-zoom__badge{opacity:1;transform:scale(1)}
.modal__box--zoom{max-width:64rem;background:#141414;border-color:#333}
.zoom-stage{overflow:hidden;max-height:76vh;display:grid;place-items:center;background:#141414;border-radius:var(--radius-sm);cursor:grab;touch-action:none}
.zoom-stage.is-panning{cursor:grabbing}
.zoom-stage img{max-width:100%;max-height:76vh;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center center}
.zoom-toolbar{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);margin-top:var(--space-sm)}
.zoom-toolbar button{width:38px;height:38px;border-radius:50%;border:1px solid #444;background:#222;color:#fff;font-size:14px;cursor:pointer}
.zoom-toolbar button:hover{background:#333}
#zoom-level{font-size:var(--font-size-sm);min-width:3.5rem;text-align:center;color:#ddd}

/* Accesibilidad */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* Autores y Autoras (3 categorías) + Conecta */
.autores-grid{display:grid;gap:var(--space-md);grid-template-columns:1fr}
@media(min-width:640px){.autores-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.autores-grid{grid-template-columns:repeat(3,1fr)}}
.autor-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);display:flex;gap:var(--space-sm);transition:var(--transition-base)}
.autor-card:hover{border-color:var(--color-border-dark);box-shadow:var(--shadow-md)}
.autor-card__photo{flex:0 0 auto}
.autor-card__photo img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-dark)}
.autor-card__initials{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--color-background-soft);border:2px solid var(--color-border-dark);font-weight:700;font-size:1.5rem}
.autor-card__body{display:grid;gap:4px;align-content:start}
.autor-card__tipo{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary)}
.autor-card__name{font-weight:700;line-height:1.25}
.autor-card__bio{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.6}
.autor-card__count{font-size:var(--font-size-xs);color:var(--color-text-muted)}
.autor-card__link{background:none;border:0;padding:0;font-size:var(--font-size-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.autor-card__link:hover{text-decoration:underline}
.conecta-card{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;justify-content:space-between;padding:var(--space-lg)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .marquee{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
}