/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --cream:      #FBF5EC;
  --cream-2:    #F3E8D7;
  --ink:        #362A24;
  --ink-soft:   #6E5F53;

  --wine:       #7C2D3D;
  --wine-tint:  #F5E4E4;
  --wine-dark:  #5A1F2B;

  --coral:      #D97D4A;
  --coral-tint: #FBEBDD;
  --coral-dark: #B15E2F;

  --gold:       #C79A4B;

  --radius: 16px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Poppins', system-ui, sans-serif;
  --script: 'Caveat', cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family: var(--serif); font-weight:700; line-height:1.15; }
ul{ list-style:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.section-eyebrow{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; margin-bottom:.6rem;
}
.section-eyebrow--novela{ color:var(--wine); }
.section-eyebrow--cuentos{ color:var(--coral-dark); }

.section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; padding:0 5%; position:relative; }
.section-head h2{ font-size:2.2rem; position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; left:50%; bottom:-.5rem; width:70px; height:3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  animation: shimmerLine 2.4s ease-in-out infinite;
}
@keyframes shimmerLine{
  0%,100%{ width:50px; opacity:.6; }
  50%{ width:90px; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .section-head h2::after{ animation:none; width:70px; opacity:1; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 5%;
  background: rgba(251,245,236,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(54,42,36,.08);
}
.nav__brand{
  font-family: var(--serif); font-weight:700; font-size:1.3rem; color:var(--wine);
  display:flex; align-items:center; gap:.4rem;
}
.nav__feather{ font-size:1.1rem; transform:rotate(15deg); display:inline-block; }
.nav__links{ display:flex; gap:2.2rem; font-size:.92rem; font-weight:500; }
.nav__links a:hover{ color: var(--wine); }
.nav__toggle{ display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid; grid-template-columns: 1.15fr .85fr; align-items:center;
  gap: 3rem;
  padding: 4.5rem 5% 5rem;
  max-width:1280px; margin:0 auto;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute; top:-2rem; right:8%; width:380px; height:380px;
  background: radial-gradient(circle, rgba(217,125,74,.20), transparent 70%);
  z-index:0; pointer-events:none;
  animation: floatBlob 9s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute; bottom:-3rem; left:2%; width:340px; height:340px;
  background: radial-gradient(circle, rgba(232,160,180,.22), transparent 70%);
  z-index:0; pointer-events:none;
  animation: floatBlob 11s ease-in-out infinite reverse;
}
@keyframes floatBlob{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-16px,18px) scale(1.06); }
}
.hero__photo{ animation: floatPhoto 6s ease-in-out infinite; }
@keyframes floatPhoto{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after, .hero__photo{ animation:none; }
}
.hero__roots{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(199,154,75,.18), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(124,45,61,.10), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23C79A4B' opacity='0.28'%3E%3Cpath d='M20 10 L23 18 L31 18 L24 23 L27 31 L20 26 L13 31 L16 23 L9 18 L17 18 Z'/%3E%3C/g%3E%3Cg fill='%23D97D4A' opacity='0.22'%3E%3Ccircle cx='100' cy='90' r='3'/%3E%3C/g%3E%3Cg fill='%23E8A0B4' opacity='0.25'%3E%3Cpath d='M70 60 L72 65 L77 65 L73 68 L75 73 L70 70 L65 73 L67 68 L63 65 L68 65 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}
.hero__text{ position:relative; z-index:1; }
.hero__eyebrow{
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.8rem;
}
.hero__title{ font-size: clamp(3rem, 6vw, 4.6rem); color:var(--wine); margin-bottom:.4rem; }
.hero__tagline{
  font-family: var(--script); font-size:1.7rem; color:var(--coral-dark);
  margin-bottom:1.2rem;
}
.hero__sub{ font-size:1.05rem; color:var(--ink-soft); max-width:46ch; margin-bottom:2.2rem; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__photo{
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 24px 50px rgba(54,42,36,.18);
  position:relative; z-index:1;
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position: top center; }

.btn{
  display:inline-block; font-family:var(--sans); font-weight:500; font-size:.92rem;
  padding:.85rem 1.7rem; border-radius:999px; cursor:pointer; transition: all .18s ease;
}
.btn--solid{ background:var(--wine); color:#fff; border:1.5px solid var(--wine); }
.btn--solid:hover{ background:var(--wine-dark); border-color:var(--wine-dark); }
.btn--outline{ background:transparent; color:var(--wine); border:1.5px solid var(--wine); }
.btn--outline:hover{ background:var(--wine); color:#fff; }

/* ============================================================
   VALUES STRIP
   ============================================================ */
.values{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem;
  padding:1.6rem 5%; background:var(--cream-2);
  border-top:1px solid rgba(54,42,36,.06); border-bottom:1px solid rgba(54,42,36,.06);
}
.values__item{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:500; color:var(--ink-soft); }
.values__item span{ font-size:1.1rem; }

/* ============================================================
   NOVELA
   ============================================================ */
.novela{ padding:5.5rem 5%; background:var(--wine-tint); }

.feature-book{
  max-width:1050px; margin:0 auto;
  display:grid; grid-template-columns: 320px 1fr; gap:3rem; align-items:start;
  background:var(--cream); border-radius: var(--radius);
  padding:2.5rem; box-shadow: 0 20px 45px rgba(124,45,61,.12);
  transition: box-shadow .3s ease, transform .3s ease;
}
.feature-book:hover{
  box-shadow: 0 28px 60px rgba(124,45,61,.20);
  transform: translateY(-3px);
}
.feature-book__cover img{
  border-radius:10px; box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.feature-book__info h3{ font-size:2rem; color:var(--wine); margin-bottom:.3rem; }
.feature-book__tag{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin-bottom:.6rem;
}
.feature-book__price{
  font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--wine);
  margin-bottom:1.2rem;
}
.feature-book__synopsis{ color:var(--ink-soft); margin-bottom:1.8rem; }
.paypal-note{
  font-size:.82rem; color:var(--ink-soft); margin-top:.9rem;
  background:rgba(199,154,75,.14); border-left:3px solid var(--gold);
  padding:.6rem .9rem; border-radius:6px;
}
.paypal-note strong{ color:var(--ink); }

/* ============================================================
   BUY BUTTONS (shared)
   ============================================================ */
.buy-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.buy-btn{
  display:flex; align-items:center; gap:.45rem;
  font-size:.82rem; font-weight:600;
  padding:.55rem 1rem; border-radius:999px;
  border:1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.buy-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.14); }
.buy-btn img{ width:16px; height:16px; object-fit:contain; }
.buy-btn__icon{ font-family:var(--serif); font-weight:700; }

.buy-btn--amazon{ background:#111; color:#FF9900; }
.buy-btn--editorial{ background:#fff; color:var(--ink); border-color:rgba(0,0,0,.12); }
.buy-btn--firmado{ background:var(--gold); color:#3a2c10; }
.buy-btn--disabled{
  background:transparent; color:var(--ink-soft); border-color:rgba(110,95,83,.3);
  cursor:default; pointer-events:none; opacity:.75;
}

/* ============================================================
   CUENTOS
   ============================================================ */
.cuentos{ padding:5.5rem 5% 6rem; background:var(--coral-tint); }

.cuentos__banner{
  max-width:1100px; margin:0 auto 3.5rem;
  display:grid; grid-template-columns: .8fr 1.2fr; gap:2.5rem; align-items:center;
}
.cuentos__banner img{ border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0,0,0,.15); }
.cuentos__banner-text h2{ font-size:2rem; color:var(--coral-dark); margin:.4rem 0 1rem; }
.cuentos__banner-text p{ color:var(--ink-soft); }

.shelf__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:2.2rem; max-width:1250px; margin:0 auto;
}

.book-card{
  background: rgba(255,255,255,.55);
  border-radius: var(--radius);
  padding:1.2rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.book-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(54,42,36,.12); }
.cuentos .book-card:hover{ transform: translateY(-6px) rotate(-1.5deg); }
.cuentos .book-card:nth-child(even):hover{ transform: translateY(-6px) rotate(1.5deg); }
.book-card__cover{
  aspect-ratio: 2/3; border-radius: 9px; overflow:hidden; margin-bottom:.4rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
  background: var(--cream-2);
}
.book-card__cover img{ width:100%; height:100%; object-fit:cover; }
.book-card__cover--placeholder{
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--coral); color:var(--ink-soft); font-size:.78rem; font-style:italic;
  text-align:center; padding:1rem; box-shadow:none;
}
.book-card h3{ font-size:1.02rem; color:var(--coral-dark); }
.book-card__price{ font-family:var(--serif); font-weight:700; font-size:1rem; color:var(--wine); }
.book-card__synopsis{
  font-size:.82rem; color:var(--ink-soft); flex-grow:1;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.book-card .buy-row{ gap:.4rem; }
.book-card .buy-btn{ font-size:.72rem; padding:.4rem .7rem; }

/* ============================================================
   SOBRE MI
   ============================================================ */
.about{
  display:grid; grid-template-columns: 300px 1fr; gap:3.5rem;
  padding: 6rem 5%; max-width:1150px; margin:0 auto; align-items:start;
}
.about__photo img{ border-radius: var(--radius); box-shadow: 0 20px 40px rgba(54,42,36,.15); }
.about__text h2{ font-size:2rem; color:var(--wine); margin-bottom:1.1rem; }
.about__lead{ color:var(--ink-soft); margin-bottom:1.6rem; }
.about__subhead{ font-family:var(--serif); font-size:1.1rem; color:var(--wine); margin-bottom:.8rem; }
.about__highlights li{
  position:relative; padding-left:1.3rem; margin-bottom:.7rem; color:var(--ink-soft); font-size:.94rem;
}
.about__highlights li::before{
  content:"—"; position:absolute; left:0; color:var(--gold); font-weight:700;
}
.about__socials{ display:flex; gap:1.4rem; margin-top:1.6rem; font-size:.88rem; }
.about__socials a{ color:var(--wine); border-bottom:1px solid transparent; }
.about__socials a:hover{ border-color:var(--wine); }
.about__socials--cuentos a{ color:var(--coral-dark); }
.about__socials--cuentos a:hover{ border-color:var(--coral-dark); }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{ text-align:center; padding:6rem 5%; max-width:640px; margin:0 auto; }
.contact h2{ font-size:2rem; color:var(--wine); margin-bottom:1rem; }
.contact p{ color:var(--ink-soft); margin-bottom:1.4rem; }

.contact-form{ text-align:left; margin: 0 auto 1.6rem; }
.hidden-field{ position:absolute; left:-9999px; }
.contact-form__row{ display:flex; gap:1rem; margin-bottom:1rem; }
.contact-form__row input{ flex:1; }
.contact-form input,
.contact-form textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:#fff; border:1.5px solid rgba(124,45,61,.18); border-radius:10px;
  padding:.8rem 1rem; margin-bottom:1rem; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--wine);
}
.contact-form .btn{ border:1.5px solid var(--wine); }
.contact-form__status{ margin-top:1rem; font-size:.9rem; color:var(--wine); font-weight:500; }
.contact__or{ font-size:.85rem; color:var(--ink-soft); margin:1.6rem 0 .6rem; }
.contact__email{
  font-family:var(--serif); font-size:1.3rem; color:var(--wine);
  border-bottom:1.5px solid var(--wine); padding-bottom:2px;
}
.footer{
  text-align:center; padding:2rem 5%; font-size:.8rem; color:var(--ink-soft);
  border-top:1px solid rgba(54,42,36,.08);
}

/* ============================================================
   PROXIMAS FIRMAS
   ============================================================ */
.eventos{ padding:5.5rem 5%; background: var(--cream); }
.eventos__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content:center; gap:2.4rem; max-width:1200px; margin:0 auto;
}
.evento-card{
  background: rgba(255,255,255,.6); border-radius: var(--radius);
  overflow:hidden; box-shadow: 0 14px 32px rgba(54,42,36,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.evento-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 44px rgba(54,42,36,.18); }
.evento-card__poster{ position:relative; cursor:pointer; aspect-ratio: 3/4; overflow:hidden; }
.evento-card__poster img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.evento-card__poster:hover img{ transform: scale(1.05); }
.evento-card__badge{
  position:absolute; top:.9rem; left:.9rem; background:var(--wine); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.evento-card__play{
  position:absolute; bottom:.9rem; right:.9rem; width:46px; height:46px;
  border-radius:50%; border:none; background:rgba(124,45,61,.88); color:#fff;
  font-size:1rem; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; padding-left:3px;
  transition: transform .2s ease, background .2s ease;
}
.evento-card__play:hover{ background:var(--wine-dark); transform:scale(1.08); }
.evento-card__info{ padding:1.2rem 1.3rem 1.5rem; }
.evento-card__info h3{ font-size:1.05rem; color:var(--wine); margin-bottom:.5rem; }
.evento-card__fecha{ font-weight:600; color:var(--coral-dark); font-size:.9rem; margin-bottom:.2rem; }
.evento-card__lugar{ font-weight:500; font-size:.88rem; color:var(--ink); }
.evento-card__direccion{ font-size:.8rem; color:var(--ink-soft); margin-top:.1rem; }

/* ============================================================
   WAVE DIVIDERS
   ============================================================ */
.wave-divider{ width:100%; height:70px; overflow:hidden; line-height:0; }
.wave-divider svg{ width:100%; height:100%; display:block; }

/* ============================================================
   GALERIA
   ============================================================ */
.galeria{ padding:5.5rem 5% 6rem; background: var(--cream-2); }
.galeria__grid{
  columns: 4 220px; column-gap: 1rem; max-width:1300px; margin:0 auto;
}
.galeria__item{
  break-inside: avoid; margin-bottom:1rem; border-radius:12px; overflow:hidden;
  cursor:pointer; box-shadow:0 8px 20px rgba(54,42,36,.14); position:relative;
}
.galeria__item img{ width:100%; display:block; transition: transform .35s ease; }
.galeria__item:hover img{ transform:scale(1.07); }
.galeria__item::after{
  content:"🔍"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; background:rgba(124,45,61,0); opacity:0; transition: all .25s ease;
}
.galeria__item:hover::after{ background:rgba(124,45,61,.28); opacity:1; }

@media (max-width:640px){ .galeria__grid{ columns: 2 160px; } }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(24,14,18,.94);
  display:none; align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox__img{
  max-width:88vw; max-height:85vh; border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); object-fit:contain;
}
.lightbox__close{
  position:absolute; top:1.5rem; right:1.5rem; background:rgba(255,255,255,.12);
  border:none; color:#fff; font-size:1.4rem; width:44px; height:44px; border-radius:50%;
  cursor:pointer;
}
.lightbox__close:hover{ background:rgba(255,255,255,.25); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:2.2rem;
  width:54px; height:54px; border-radius:50%; cursor:pointer; line-height:1;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.25); }
.lightbox__nav--prev{ left:1.2rem; }
.lightbox__nav--next{ right:1.2rem; }
@media (max-width:640px){
  .lightbox__nav{ width:42px; height:42px; font-size:1.7rem; }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .hero__photo{ max-width:340px; margin:0 auto; order:-1; }
  .feature-book{ grid-template-columns:1fr; }
  .feature-book__cover{ max-width:240px; margin:0 auto; }
  .cuentos__banner{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__photo img{ max-width:260px; margin:0 auto; }
}
@media (max-width: 820px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--cream); flex-direction:column; gap:0;
    display:none; border-bottom:1px solid rgba(54,42,36,.08);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:1rem 5%; border-top:1px solid rgba(54,42,36,.06); }
  .nav__toggle{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .book-card, .buy-btn{ transition:none; }
}