/* ============================================================
   Lucía Cavasin — Tema "libro de otoño"
   ============================================================ */
:root{
  --terracota:#9a4b2e;
  --terracota-osc:#7c3a23;
  --crema:#f5ecdc;
  --papel:#fbf6ec;
  --tinta:#3a2e23;
  --tinta-suave:#7a6a58;
  --verde:#5b7a6b;
  --dorado:#c9a45c;
  --linea:#e3d6c4;
  --sombra:0 10px 30px rgba(80,50,20,.15);
  --radio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Lora',Georgia,serif;
  color:var(--tinta);
  line-height:1.7;
  background-color:var(--crema);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201,164,92,.10), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(154,75,46,.08), transparent 35%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.contenedor{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--terracota);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ---------- Cabecera ---------- */
.cabecera{
  background:rgba(251,246,236,.85);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:50;
}
.cabecera__inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.marca{display:flex;flex-direction:column;line-height:1.1}
.marca__nombre{font-family:'Dancing Script',cursive;font-size:1.9rem;color:var(--terracota);font-weight:700}
.marca__sub{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.nav a{margin-left:22px;color:var(--tinta);font-size:.95rem}
.nav__cta{background:var(--terracota);color:#fff!important;padding:8px 16px;border-radius:8px}
.nav__cta:hover{background:var(--terracota-osc);text-decoration:none!important}

/* Botón hamburguesa (solo se ve en mobile) */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:11px;margin:-6px -8px -6px 0;
  background:transparent;border:none;cursor:pointer;border-radius:10px;
}
.nav-toggle span{
  display:block;height:2.5px;width:100%;background:var(--terracota);border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-abierto .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-abierto .nav-toggle span:nth-child(2){opacity:0}
.nav-abierto .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Auth (login / registro) ---------- */
.auth{max-width:430px;margin:54px auto;padding:38px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.auth h1{font-family:'Dancing Script',cursive;color:var(--terracota);font-size:2.4rem;margin:0 0 6px;text-align:center}
.auth .sub{text-align:center;color:var(--tinta-suave);margin:0 0 24px}
.auth .alt{text-align:center;margin-top:18px;font-size:.95rem;color:var(--tinta-suave)}
.error-box{background:#fdeee9;border:1px solid #e6b9a8;color:#a8401f;border-radius:9px;padding:12px 14px;margin-bottom:16px;font-size:.95rem}
.ok-box{background:#eef5f0;border:1px solid #b9d4c4;color:#3f6553;border-radius:9px;padding:12px 14px;margin-bottom:16px;font-size:.95rem}

/* ---------- Mi cuenta / biblioteca ---------- */
.cuenta-cab{padding:40px 0 10px}
.cuenta-cab h1{font-family:'Dancing Script',cursive;color:var(--terracota);font-size:2.8rem;margin:0}
.cuenta-cab p{color:var(--tinta-suave);margin:2px 0 0}
.biblioteca{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px;padding:24px 0 10px}
.bib-item{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;display:flex;gap:16px;padding:16px}
.bib-item img{width:96px;height:auto;border-radius:5px;box-shadow:0 6px 16px rgba(0,0,0,.22);align-self:flex-start}
.bib-item__cuerpo{display:flex;flex-direction:column;flex:1;min-width:0}
.bib-item__titulo{font-family:'Dancing Script',cursive;color:var(--terracota);font-size:1.5rem;margin:0 0 2px;line-height:1.05}
.barra-progreso{height:7px;background:#e7dcc8;border-radius:4px;overflow:hidden;margin:8px 0 4px}
.barra-progreso span{display:block;height:100%;background:var(--verde)}
.bib-item small{color:var(--tinta-suave);font-size:.8rem}
.bib-item .btn{margin-top:auto;align-self:flex-start}
.vacio{text-align:center;padding:50px 20px;color:var(--tinta-suave)}
.perfil-card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:24px;box-shadow:var(--sombra);max-width:520px}
.perfil-card .dato{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--linea)}
.perfil-card .dato:last-child{border-bottom:none}
.chip{display:inline-block;background:var(--dorado);color:#3a2e23;font-size:.72rem;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- Hero ---------- */
.hero{padding:70px 0 40px;text-align:center}
.hero h1{
  font-family:'Dancing Script',cursive;
  font-size:clamp(2.6rem,6vw,4.4rem);
  color:var(--terracota);
  margin:0 0 .2em;font-weight:700;line-height:1.05;
}
.hero p{font-size:1.18rem;color:var(--tinta-suave);max-width:640px;margin:0 auto;font-style:italic}
.hero__cita{
  max-width:680px;margin:34px auto 0;padding:22px 26px;
  border-left:4px solid var(--dorado);background:rgba(255,255,255,.5);
  border-radius:0 var(--radio) var(--radio) 0;text-align:left;font-style:italic;color:var(--tinta)
}

/* ---------- Grilla de libros ---------- */
.seccion{padding:46px 0}
.seccion__titulo{font-family:'Dancing Script',cursive;font-size:2.4rem;color:var(--terracota);text-align:center;margin:0 0 8px}
.seccion__bajada{text-align:center;color:var(--tinta-suave);margin:0 auto 36px;max-width:600px}
.libros{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px}
.card-libro{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-libro:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(80,50,20,.22)}
.card-libro__tapa{position:relative;padding:30px;background:
   radial-gradient(circle at 50% 30%, #fff7, transparent 60%), linear-gradient(160deg,#efe2cd,#e7d6bb)}
.card-libro__tapa img{margin:auto;max-height:340px;border-radius:6px;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.card-libro__cuerpo{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.card-libro__titulo{font-family:'Dancing Script',cursive;font-size:1.9rem;color:var(--terracota);margin:0 0 2px;line-height:1.05}
.card-libro__meta{font-size:.85rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.card-libro__desc{color:var(--tinta);font-size:1rem;flex:1}
.card-libro__pie{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:14px;flex-wrap:wrap}
.precio{font-size:1.55rem;font-weight:600;color:var(--verde)}
.precio small{display:block;font-size:.7rem;color:var(--tinta-suave);font-weight:400;letter-spacing:.05em}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  background:var(--terracota);color:#fff;border:none;cursor:pointer;
  padding:13px 26px;border-radius:10px;font-family:'Lora',serif;font-size:1rem;font-weight:600;
  text-decoration:none;transition:background .2s,transform .1s;
}
.btn:hover{background:var(--terracota-osc);text-decoration:none;transform:translateY(-1px)}
.btn--verde{background:var(--verde)}
.btn--verde:hover{background:#496255}
.btn--linea{background:transparent;color:var(--terracota);border:1.5px solid var(--terracota)}
.btn--linea:hover{background:var(--terracota);color:#fff}
.btn--bloque{width:100%}
.btn--grande{padding:16px 34px;font-size:1.1rem}

/* ---------- Página de libro ---------- */
.libro-detalle{display:grid;grid-template-columns:340px 1fr;gap:48px;padding:50px 0}
.libro-detalle__tapa{position:sticky;top:96px;align-self:start}
.libro-detalle__tapa img{border-radius:8px;box-shadow:var(--sombra)}
.libro-detalle h1{font-family:'Dancing Script',cursive;font-size:3rem;color:var(--terracota);margin:0 0 4px;line-height:1.02}
.libro-detalle .sub{font-style:italic;color:var(--tinta-suave);font-size:1.1rem;margin-bottom:6px}
.libro-detalle .meta{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-suave);margin-bottom:24px}
.reseña{font-size:1.08rem}
.reseña p{margin:0 0 1em}
.reseña .firma{font-style:italic;color:var(--verde);font-weight:600;margin-top:1.4em}
.compra-box{
  margin:30px 0;padding:26px;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra)
}
.compra-box .precio{font-size:2rem;margin-bottom:6px}
.compra-box .incluye{list-style:none;padding:0;margin:14px 0 20px;font-size:.96rem}
.compra-box .incluye li{padding:5px 0 5px 28px;position:relative}
.compra-box .incluye li::before{content:'✦';position:absolute;left:0;color:var(--dorado)}
.aclaracion{font-size:.85rem;color:var(--tinta-suave);margin-top:16px;line-height:1.55}

/* ---------- Formularios ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.9rem;font-weight:600;margin-bottom:5px}
.campo input{
  width:100%;padding:12px 14px;border:1.5px solid var(--linea);border-radius:9px;
  font-family:'Lora',serif;font-size:1rem;background:#fffdf8;color:var(--tinta)
}
.campo input:focus{outline:none;border-color:var(--terracota)}

/* ---------- Mensajes / estados ---------- */
.aviso{max-width:620px;margin:60px auto;padding:40px;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);text-align:center}
.aviso h1{font-family:'Dancing Script',cursive;color:var(--terracota);font-size:2.6rem;margin:0 0 10px}
.aviso .iconote{font-size:3rem;margin-bottom:6px}
.aviso .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.estado-ok{color:var(--verde)} .estado-pend{color:var(--dorado)} .estado-mal{color:#b3402a}

/* ---------- Sección autora ---------- */
.autora{display:grid;grid-template-columns:1fr;gap:24px;background:rgba(255,255,255,.45);
  border:1px solid var(--linea);border-radius:var(--radio);padding:38px;max-width:820px;margin:0 auto}
.autora h2{font-family:'Dancing Script',cursive;color:var(--terracota);font-size:2.2rem;margin:0 0 10px;text-align:center}
.autora p{margin:0 0 1em}

/* ---------- Pie ---------- */
.pie{margin-top:60px;background:var(--terracota-osc);color:#f3e7d6}
.pie__inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:36px 22px}
.pie__nombre{font-family:'Dancing Script',cursive;font-size:1.8rem;margin:0 0 4px}
.pie__txt{margin:0;color:#e4cdb6;font-size:.92rem}
.pie__soporte p{margin:0 0 4px;font-size:.9rem;color:#e4cdb6}
.pie a{color:#fff;text-decoration:underline}
.pie__copy{text-align:center;border-top:1px solid rgba(255,255,255,.15);margin:0;padding:14px;font-size:.8rem;color:#dcc3aa}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .libro-detalle{grid-template-columns:1fr;gap:30px}
  .libro-detalle__tapa{position:static;max-width:280px;margin:0 auto}

  /* Sin blur en la cabecera para que el menú fijo se posicione sobre el viewport */
  .cabecera{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--papel);z-index:100}
  .nav-toggle{display:flex;position:relative;z-index:3}

  /* El menú pasa a ser un panel lateral que entra desde la derecha */
  .nav{
    position:fixed;top:0;right:0;z-index:2;
    height:100vh;height:100dvh;width:min(84vw,320px);
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    padding:86px 24px 30px;
    background:var(--papel);border-left:1px solid var(--linea);
    box-shadow:-14px 0 44px rgba(80,50,20,.28);
    transform:translateX(100%);transition:transform .28s ease;
    overflow-y:auto;
  }
  .nav-abierto .nav{transform:translateX(0)}
  .nav a{
    margin-left:0;padding:14px 14px;font-size:1.08rem;
    border-bottom:1px solid var(--linea);border-radius:8px;
  }
  .nav a:last-child{border-bottom:none}
  .nav__cta{text-align:center;margin-top:14px;padding:14px 16px;color:#fff!important}

  /* Fondo oscuro detrás del panel (pseudo-elemento de la cabecera = mismo contexto) */
  .nav-abierto .cabecera::after{
    content:'';position:fixed;inset:0;z-index:1;background:rgba(40,25,12,.5);
  }
  body.nav-abierto{overflow:hidden}
}

@media (max-width:560px){
  .contenedor{padding:0 16px}
  .marca__nombre{font-size:1.55rem}
  .marca__sub{font-size:.6rem;letter-spacing:.1em}
  .hero{padding:46px 0 26px}
  .hero p{font-size:1.05rem}
  .seccion{padding:34px 0}
  .seccion__titulo{font-size:2rem}
  .libros{grid-template-columns:1fr;gap:22px}
  .card-libro__tapa{padding:24px}
  .card-libro__tapa img{max-height:300px}
  .card-libro__cuerpo{padding:20px 20px 24px}
  .biblioteca{grid-template-columns:1fr;gap:18px}
  .cuenta-cab{padding:30px 0 6px}
  .cuenta-cab h1{font-size:2.2rem}
  .compra-box{padding:20px}
  .libro-detalle{padding:30px 0}
  .libro-detalle h1{font-size:2.3rem}
  .auth{margin:30px auto;padding:26px 22px}
  .aviso{margin:36px auto;padding:30px 22px}
  .pie__inner{flex-direction:column;gap:16px;padding:30px 16px}
}