/* ============================================================
   EDICIONES NEMO — Sistema de diseño
   Estética: editorial náutica · profundidad marina + papel cálido
   Tipografías: Fraunces (display) + Hanken Grotesk (texto)
   ============================================================ */

:root{
  /* Paleta */
  --abismo:#0E2A3B;        /* azul marino profundo */
  --tinta:#122B3A;         /* texto principal */
  --tinta-suave:#52646E;   /* texto secundario */
  --tenue:#8295A0;         /* texto terciario / pistas */
  --laton:#C0822F;         /* oro/latón — acento */
  --laton-claro:#E0A857;   /* oro claro — by Nemo */
  --salvia:#7E9B86;        /* verde salvia — bienestar */
  --salvia-suave:#DCE6DC;
  --papel:#F6F0E2;         /* fondo crema papel */
  --papel-2:#EFE7D4;       /* fondo alterno */
  --tarjeta:#FCF8EE;       /* superficie de tarjeta */
  --linea:rgba(18,43,58,.14);
  --linea-fuerte:rgba(18,43,58,.28);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --ancho:1140px;
  --paso:cubic-bezier(.22,.61,.36,1);

  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--papel);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Textura sutil de profundidad arriba */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(14,42,59,.06), transparent 60%);
  pointer-events:none;z-index:0;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--tinta)}
h1{font-size:clamp(2.3rem,5.5vw,4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem);letter-spacing:-.01em}
h3{font-size:1.25rem}
p{max-width:64ch}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.seccion{padding:84px 0}
.centrado{text-align:center}
.eyebrow{
  font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--laton);
  display:inline-block;margin-bottom:14px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:.95rem;font-weight:700;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--paso),background .25s,color .25s,box-shadow .25s;
  letter-spacing:.01em;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:var(--abismo);color:var(--papel)}
.btn-primario:hover{box-shadow:0 12px 28px -14px rgba(14,42,59,.65)}
.btn-secundario{background:transparent;color:var(--abismo);border-color:var(--linea-fuerte)}
.btn-secundario:hover{border-color:var(--abismo);background:rgba(14,42,59,.04)}
.btn-oro{background:var(--laton);color:#231405}
.btn-oro:hover{box-shadow:0 12px 26px -14px rgba(192,130,47,.7)}
.btn-sm{padding:9px 16px;font-size:.82rem}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(246,240,226,.88);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.cabecera .barra{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
}
.marca{display:flex;align-items:center;gap:13px}
.marca .ojo{width:42px;height:42px;flex:none;color:var(--abismo)}
.marca .nombre{display:flex;flex-direction:column;line-height:1.05}
.marca .nombre strong{font-family:var(--serif);font-weight:500;font-size:1.32rem;color:var(--abismo)}
.marca .nombre span{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--laton);font-weight:700}

.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:.93rem;font-weight:500;color:var(--tinta-suave);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--laton);transition:width .3s var(--paso);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--abismo)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}

.menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--abismo);padding:6px}
.menu-btn svg{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,var(--papel) 0%,var(--papel-2) 100%);
  padding:96px 0 104px;
}
.hero .ojo-fondo{
  position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:min(620px,55vw);color:rgba(14,42,59,.05);pointer-events:none;
}
.hero-cont{max-width:780px;position:relative}
.hero h1{margin:10px 0 22px}
.hero h1 em{font-style:italic;color:var(--laton)}
.hero p.lead{font-size:1.22rem;color:var(--tinta-suave);max-width:54ch;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

.fade-up{opacity:0;transform:translateY(22px);animation:fadeUp .9s var(--paso) forwards}
.fade-up.d1{animation-delay:.08s}
.fade-up.d2{animation-delay:.18s}
.fade-up.d3{animation-delay:.28s}
.fade-up.d4{animation-delay:.38s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--paso),transform .7s var(--paso)}
.reveal.visible{opacity:1;transform:none}

/* ---------- Categorías ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:30px 22px;text-align:center;transition:transform .3s var(--paso),border-color .3s;
}
.cat:hover{transform:translateY(-5px);border-color:var(--linea-fuerte)}
.cat svg{width:34px;height:34px;color:var(--laton);margin-bottom:14px}
.cat h3{font-size:1.05rem;color:var(--abismo)}

/* ---------- Tarjetas de libro ---------- */
.grid-libros{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.libro{
  background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--paso),box-shadow .35s,border-color .35s;
}
.libro:hover{transform:translateY(-6px);box-shadow:0 22px 44px -28px rgba(14,42,59,.4);border-color:var(--linea-fuerte)}
.portada{
  aspect-ratio:3/4;background:linear-gradient(160deg,#16374A,#0E2A3B);
  display:flex;align-items:center;justify-content:center;position:relative;
  color:rgba(255,255,255,.42);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
}
.portada .ojo-marca{position:absolute;width:64px;height:64px;color:rgba(224,168,87,.34)}
.libro-cuerpo{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.tag{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:12px;
}
.tag.propia{background:rgba(14,42,59,.1);color:var(--abismo)}
.tag.reco{background:rgba(192,130,47,.16);color:#7A4E12}
.libro h3{font-size:1.15rem;margin-bottom:5px;color:var(--abismo)}
.libro .meta{font-size:.84rem;color:var(--tinta-suave);margin-bottom:14px}
.libro .desc{font-size:.92rem;color:var(--tinta-suave);margin-bottom:18px;flex:1}
.libro-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.precio{font-family:var(--serif);font-size:1.2rem;color:var(--abismo)}
.precio small{font-family:var(--sans);font-size:.78rem;color:var(--tenue)}

/* Filtros de catálogo */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 44px;justify-content:center}
.filtro{
  font-family:var(--sans);font-size:.86rem;font-weight:600;
  padding:9px 18px;border-radius:999px;border:1px solid var(--linea-fuerte);
  background:transparent;color:var(--tinta-suave);cursor:pointer;transition:all .25s;
}
.filtro:hover{border-color:var(--abismo);color:var(--abismo)}
.filtro.activo{background:var(--abismo);color:var(--papel);border-color:var(--abismo)}

/* ---------- Ficha de libro ---------- */
.ficha{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.ficha .portada{border-radius:var(--r-lg);border:1px solid var(--linea);max-width:380px}
.ficha h1{font-size:clamp(2rem,4vw,2.9rem);margin:14px 0 8px}
.ficha .autoria{font-size:1.05rem;color:var(--tinta-suave);margin-bottom:22px}
.ficha .cuerpo p{margin-bottom:18px;color:var(--tinta-suave)}
.ficha .compra{
  margin-top:30px;padding:24px;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.aviso-afiliado{
  font-size:.82rem;color:var(--tinta-suave);margin-top:16px;
  padding:14px 18px;border-left:3px solid var(--laton);background:rgba(192,130,47,.07);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ---------- Editorial ---------- */
.manifiesto{max-width:680px;margin:0 auto}
.manifiesto p{font-size:1.18rem;color:var(--tinta);margin-bottom:24px;line-height:1.8}
.manifiesto p.entrada{font-family:var(--serif);font-size:1.55rem;line-height:1.4;color:var(--abismo)}
.manifiesto p.entrada::first-letter{
  font-family:var(--serif);font-size:3.6rem;float:left;line-height:.82;
  padding:6px 14px 0 0;color:var(--laton);
}
.manifiesto .firma{font-family:var(--serif);font-style:italic;color:var(--laton);font-size:1.2rem}

/* ---------- Newsletter ---------- */
.newsletter{
  background:linear-gradient(165deg,#16374A,var(--abismo));
  color:var(--papel);border-radius:var(--r-xl);
  padding:64px 48px;text-align:center;position:relative;overflow:hidden;
}
.newsletter .ojo-fondo{position:absolute;left:-90px;bottom:-90px;width:340px;color:rgba(224,168,87,.08)}
.newsletter h2{color:var(--papel)}
.newsletter p{color:rgba(246,240,226,.78);max-width:50ch;margin:14px auto 30px}
.form-news{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.form-news input{
  flex:1;min-width:220px;padding:15px 20px;border-radius:999px;border:0;
  font-family:var(--sans);font-size:.98rem;background:var(--papel);color:var(--tinta);
}
.form-news input::placeholder{color:var(--tenue)}
.nota-news{font-size:.78rem;color:rgba(246,240,226,.6);margin-top:18px}
.placeholder-box{
  border:1.5px dashed rgba(224,168,87,.5);border-radius:var(--r-md);
  padding:16px;margin-top:22px;font-size:.82rem;color:rgba(246,240,226,.7);
}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.dato{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.dato svg{width:22px;height:22px;color:var(--laton);flex:none;margin-top:3px}
.dato strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--abismo)}
.dato a{color:var(--tinta-suave);border-bottom:1px solid var(--linea-fuerte)}

/* ---------- Páginas legales ---------- */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.5rem;margin:38px 0 14px;color:var(--abismo)}
.legal p,.legal li{color:var(--tinta-suave);margin-bottom:14px}
.legal ul{padding-left:22px}
.pendiente{
  background:rgba(192,130,47,.1);border:1px solid rgba(192,130,47,.4);
  border-radius:var(--r-md);padding:18px 22px;margin:22px 0;font-size:.92rem;color:#7A4E12;
}

/* ---------- Pie ---------- */
.pie{background:var(--abismo);color:rgba(246,240,226,.7);padding:64px 0 32px;margin-top:90px}
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:44px}
.pie .marca .nombre strong{color:var(--papel)}
.pie p{font-size:.92rem;max-width:38ch}
.pie h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--laton-claro);margin-bottom:16px;font-weight:700}
.pie ul{list-style:none}
.pie ul li{margin-bottom:10px}
.pie ul a{font-size:.92rem;color:rgba(246,240,226,.7);transition:color .2s}
.pie ul a:hover{color:var(--laton-claro)}
.pie-base{
  border-top:1px solid rgba(246,240,226,.14);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:.82rem;color:rgba(246,240,226,.5)
}
.divulgacion{font-size:.8rem;color:rgba(246,240,226,.5);max-width:70ch;margin-top:14px}

/* Enlace de salto accesible */
.skip{position:absolute;left:-999px;top:0;background:var(--abismo);color:var(--papel);padding:12px 18px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--laton);outline-offset:3px;border-radius:3px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pie-grid{grid-template-columns:1fr 1fr}
  .ficha{grid-template-columns:1fr;gap:34px}
  .ficha .portada{max-width:300px}
}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(82vw,320px);
    background:var(--papel);flex-direction:column;align-items:flex-start;
    padding:96px 34px;gap:8px;transform:translateX(100%);
    transition:transform .35s var(--paso);box-shadow:-20px 0 50px -28px rgba(14,42,59,.5);
  }
  .nav.abierto{transform:translateX(0)}
  .nav a{font-size:1.1rem;padding:12px 0;width:100%;border-bottom:1px solid var(--linea)}
  .nav a::after{display:none}
  .cats{grid-template-columns:repeat(2,1fr)}
  .grid-libros{grid-template-columns:repeat(2,1fr)}
  .contacto-grid{grid-template-columns:1fr;gap:34px}
  .seccion{padding:60px 0}
  .newsletter{padding:48px 26px}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid-libros,.cats{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr}
  .hero{padding:64px 0 72px}
  .hero-cta .btn{width:100%;justify-content:center}
}