/* ============================================================
   Casa Editora Los Hermanos Gómez · "Elevando el libro"
   Palette: tinta (ink), papel (paper), cielo (sky), ocre (kite sun)
   Display: Fraunces · Texto: Spectral
   ============================================================ */

:root{
  --ink:#15294a;        /* deep navy — emblem ring, body text */
  --ink-2:#28548a;      /* lighter ink for gradients */
  --ink-soft:#42526f;
  --paper:#f4ecd9;      /* warm manila ground */
  --paper-2:#efe4cd;    /* card paper */
  --paper-edge:#e3d6b8; /* hairline on paper */
  --sky:#cfe0eb;        /* pale sky (gradient top) */
  --sky-ink:#3d7197;    /* sky-blue accent / links */
  --ochre:#cf9633;      /* the kite, the string — the one bold note */
  --ochre-deep:#b07d1f;
  --clay:#9a4f2c;       /* santander earth — used sparingly */
  --leaf:#5d7a42;       /* the hill — used sparingly */
  --mute:#806f52;       /* captions */

  --maxw:1180px;
  --r:4px;
  --shadow:0 18px 40px -22px rgba(21,41,74,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-padding-top:90px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Spectral", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* faint paper grain */
  background-image:
    radial-gradient(rgba(122,96,40,.05) 1px, transparent 1.4px);
  background-size:4px 4px;
}

img{ display:block; max-width:100%; }
a{ color:var(--sky-ink); text-underline-offset:3px; text-decoration-thickness:1px; }

::selection{ background:var(--ochre); color:#fff; }

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

.skip{
  position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:.6rem 1.1rem; border-radius:0 0 var(--r) var(--r);
  text-decoration:none; z-index:200; transition:top .2s;
}
.skip:focus{ top:0; }

/* ---------- shared typography devices ---------- */
.h-display{
  font-family:"Fraunces", Georgia, serif;
  font-weight:900;
  font-optical-sizing:auto;
  font-size:clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:.1em 0 .6em;
  text-wrap:balance;
}
.h-display--invert{ color:var(--paper); }

.eyebrow{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-style:italic;
  font-size:.92rem;
  letter-spacing:.04em;
  color:var(--clay);
  margin:0 0 .4rem;
  display:flex; align-items:center; gap:.55rem;
}
.eyebrow--light{ color:var(--ochre-deep); }
/* the knot: a small bead on the kite string */
.knot{
  width:11px; height:11px; flex:0 0 auto; border-radius:50%;
  background:var(--ochre);
  box-shadow:0 0 0 4px rgba(207,150,51,.18);
}

.prose p{ margin:0 0 1.05em; }
.prose strong{ font-weight:600; color:var(--ink); }

.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-block; font-family:"Fraunces",serif; font-weight:600;
  font-size:1rem; letter-spacing:.01em;
  padding:.7rem 1.3rem; border-radius:999px; text-decoration:none;
  border:1.5px solid var(--bg); background:var(--bg); color:var(--fg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn--solid:hover{ transform:translateY(-3px); box-shadow:0 12px 24px -12px rgba(21,41,74,.6); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-3px); }
.btn--lg{ font-size:1.15rem; padding:.85rem 1.7rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem clamp(1rem,4vw,2.4rem);
  background:rgba(244,236,217,.86);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--paper-edge);
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand img{ width:44px; height:44px; object-fit:contain; border-radius:50%; box-shadow:0 0 0 1.5px var(--paper-edge); }
.brand__txt{ font-family:"Fraunces",serif; font-weight:600; font-size:.96rem; line-height:1.1; }
.brand__txt em{ font-style:italic; color:var(--clay); }
.nav{ display:flex; gap:1.6rem; }
.nav a{
  font-family:"Fraunces",serif; font-size:1rem; color:var(--ink);
  text-decoration:none; position:relative; padding:.2rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--ochre); transition:right .28s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }

.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center; gap:2rem;
  padding:clamp(3rem,7vw,6rem) clamp(1.2rem,5vw,3rem) clamp(4rem,8vw,7rem);
  max-width:var(--maxw); margin-inline:auto;
}
/* the rising sky: cool at the top, warm paper at the foot = elevation */
.hero__sky{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--sky) 0%, #e2e7df 38%, var(--paper) 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
}
.hero__sky::after{ /* wind streaks, echoing the emblem */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 60% at 80% 8%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(98deg, transparent 0 34px, rgba(61,113,151,.05) 34px 35px);
  opacity:.7;
}
.hero__wrap{ position:relative; z-index:2; }
.hero__title{
  font-family:"Fraunces",serif; font-weight:900; font-optical-sizing:auto;
  font-size:clamp(2.4rem, 1.1rem + 5.4vw, 4.6rem);
  line-height:.96; letter-spacing:-.02em; margin:.15em 0 .35em;
  color:var(--ink);
}
.hero__title span{ display:block; color:var(--clay); font-style:italic; font-weight:600; }
.hero__lead{ max-width:34ch; font-size:1.16rem; color:var(--ink-soft); margin:0 0 1.7rem; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* the emblem, lifted */
.hero__medallion{ position:relative; margin:0; justify-self:center; z-index:2; }
.medallion__img{
  width:min(40vw,420px); height:auto; aspect-ratio:1 / 1;
  object-fit:contain;            /* never distort the emblem */
  border-radius:50%;
  box-shadow:0 30px 60px -28px rgba(21,41,74,.55), 0 0 0 10px rgba(255,255,255,.6), 0 0 0 11px var(--paper-edge);
  animation:sway 9s ease-in-out infinite;
  transform-origin:50% 8%;
}
.medallion__halo{
  position:absolute; inset:-7% ; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(207,150,51,.28), transparent 72%);
}
@keyframes sway{ 0%,100%{ transform:rotate(-1.6deg);} 50%{ transform:rotate(1.6deg);} }

/* ============================================================
   BANDS (sections)
   ============================================================ */
.band{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,5vw,3rem);
}
.col-narrow{ max-width:60ch; }
.band__lead{ font-size:1.18rem; color:var(--ink-soft); max-width:52ch; margin:.2rem 0 0; }

/* ---------- Editorial ---------- */
.editorial__grid{
  display:grid; grid-template-columns:1.4fr .85fr; gap:clamp(1.5rem,4vw,3.4rem);
  margin-top:1.6rem; align-items:start;
}
.children{
  background:var(--ink); color:var(--paper); border-radius:var(--r);
  padding:1.5rem 1.6rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.children::before{ /* a little kite tail of color, echoing the emblem */
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  background:conic-gradient(from 20deg, var(--ochre), var(--clay), var(--sky-ink), var(--leaf), var(--ochre));
  filter:blur(2px); opacity:.22; border-radius:50%;
}
.children__head{
  font-family:"Fraunces",serif; font-style:italic; color:var(--ochre);
  margin:0 0 .7rem; font-size:1.05rem;
}
.children ul{ list-style:none; margin:0; padding:0; }
.children li{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.18rem; line-height:1.5;
  padding-left:1.3rem; position:relative;
}
.children li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%;
  background:var(--ochre);
}
.children li span{ color:var(--sky); font-weight:400; font-style:italic; }
.children__call{
  font-family:"Fraunces", serif; font-style:italic; font-weight:600;
  font-size:1.18rem; color:var(--ochre); line-height:1.4;
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid rgba(244,236,217,.18);
}

/* ============================================================
   CATÁLOGO
   ============================================================ */
.catalog .grid{
  list-style:none; margin:2.4rem 0 0; padding:0;
  display:grid; gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
}
.card{ display:flex; flex-direction:column; }
.card__cover{
  display:block; border-radius:var(--r); overflow:hidden;
  background:var(--paper-2); box-shadow:var(--shadow);
  aspect-ratio:3/4.2; position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card__cover img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.card__cover::after{ /* subtle spine shadow on the left edge of every cover */
  content:""; position:absolute; inset:0 auto 0 0; width:10px;
  background:linear-gradient(90deg, rgba(0,0,0,.16), transparent);
}
.card:hover .card__cover{ transform:translateY(-6px) rotate(-.5deg); box-shadow:0 26px 46px -22px rgba(21,41,74,.6); }

/* typographic cover plates for books with no cover scan */
.card__cover--type .plate{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  text-align:center; padding:1.5rem 1.2rem; gap:.6rem;
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), transparent 60%),
    var(--plate-bg, var(--ink));
  color:var(--paper);
  border:1px solid rgba(255,255,255,.14);
}
.card__cover--type[data-cat="poesia"]{ --plate-bg:linear-gradient(160deg,#b07d1f,#8a4f15); }
.card__cover--type[data-cat="semblanza"]{ --plate-bg:linear-gradient(160deg,#2f5470,#163049); }
.plate__glyph{ font-size:2rem; color:var(--ochre); opacity:.9; }
.card__cover--type[data-cat="semblanza"] .plate__glyph{ color:var(--sky); }
.plate__title{ font-family:"Fraunces",serif; font-weight:900; font-size:1.28rem; line-height:1.12; }
.plate__author{ font-family:"Fraunces",serif; font-style:italic; font-size:.95rem; opacity:.85; }

.card__body{ padding:.9rem .1rem 0; }
.tag{
  display:inline-block; font-family:"Fraunces",serif; font-weight:600; font-style:italic;
  font-size:.78rem; letter-spacing:.03em; color:var(--clay);
  border:1px solid var(--paper-edge); border-radius:999px; padding:.12rem .7rem; margin-bottom:.5rem;
  background:rgba(255,255,255,.4);
}
.card__title{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.14rem; line-height:1.18;
  margin:.1rem 0 .25rem; color:var(--ink); text-wrap:balance;
}
.card__author{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.card__year{ margin:.05rem 0 .55rem; font-size:.82rem; color:var(--mute); font-style:italic; }
.card__desc{ margin:0; font-size:.96rem; color:var(--ink-soft); line-height:1.55; }

/* ============================================================
   FUNDADOR
   ============================================================ */
.founder{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
}
.founder__photo{ margin:0; }
.founder__photo img{
  width:100%; height:auto; aspect-ratio:520 / 785;
  object-fit:cover;             /* never distort the portrait */
  border-radius:var(--r); box-shadow:var(--shadow);
  filter:saturate(.92);
}
.prose-lead{
  font-family:"Fraunces",serif; font-style:italic; font-size:1.25rem;
  color:var(--clay); margin:.2rem 0 1rem;
}
.link-arrow{
  display:inline-block; margin-top:1rem; font-family:"Fraunces",serif; font-weight:600;
  color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ochre); padding-bottom:2px;
}
.link-arrow::after{ content:" →"; color:var(--ochre); }
.link-arrow:hover{ color:var(--clay); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{ max-width:none; padding-inline:0; }
.contact__card{
  max-width:var(--maxw); margin-inline:auto;
  background:
    radial-gradient(120% 120% at 85% 0%, #1d3a63, var(--ink) 55%);
  color:var(--paper); text-align:center;
  padding:clamp(3rem,7vw,5.5rem) 1.5rem; border-radius:var(--r);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.contact__card::before{ /* drifting wind streaks */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(100deg, transparent 0 40px, rgba(207,150,51,.06) 40px 41px);
}
.contact__card > *{ position:relative; }
.contact .eyebrow{ justify-content:center; }
.contact__lead{ max-width:46ch; margin:.2rem auto 1.8rem; color:#e8ddc6; font-size:1.15rem; }
.contact .btn--solid{ --bg:var(--ochre); --fg:#1c1303; border-color:var(--ochre); }
.contact .btn--solid:hover{ --bg:#e0a943; }
.contact__place{
  margin:1.6rem 0 0; font-family:"Fraunces",serif; font-style:italic; letter-spacing:.06em;
  color:var(--sky);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  text-align:center; padding:3rem 1.5rem 3.5rem; color:var(--ink-soft);
  border-top:1px solid var(--paper-edge); margin-top:1rem;
}
.foot__mark{ width:64px; height:64px; object-fit:contain; border-radius:50%; margin:0 auto .8rem; box-shadow:0 0 0 1.5px var(--paper-edge); }
.foot__name{ font-family:"Fraunces",serif; font-weight:900; font-size:1.25rem; color:var(--ink); margin:0; }
.foot__motto{ font-family:"Fraunces",serif; font-style:italic; color:var(--clay); margin:.2rem 0 .9rem; }
.foot__legal{ font-size:.85rem; margin:0; }
.foot__legal a{ color:var(--ink-soft); }

/* ============================================================
   REVEAL + RESPONSIVE + MOTION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (max-width:880px){
  .hero{ grid-template-columns:1fr; text-align:center; padding-top:2.5rem; }
  .hero .eyebrow{ justify-content:center; }
  .hero__lead{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__medallion{ order:-1; }
  .medallion__img{ width:min(62vw,320px); }
  .editorial__grid{ grid-template-columns:1fr; }
  .founder{ grid-template-columns:1fr; }
  .founder__photo{ max-width:330px; }

  .nav{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--paper-edge);
    padding:.5rem 0; transform:translateY(-100%);
    visibility:hidden; box-shadow:none;
    transition:transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.open{
    transform:none; visibility:visible; box-shadow:var(--shadow);
    transition:transform .3s var(--ease), visibility 0s;
  }
  .nav a{ padding:.85rem clamp(1rem,5vw,2.4rem); }
  .nav a::after{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; width:42px; height:38px;
    justify-content:center; align-items:center; background:none; border:0; cursor:pointer;
  }
  .nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:.25s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}