/* ===== Terror en Monte Hermoso — estilos compartidos ===== */
:root{
  --bg-deep:#0b0712;
  --bg-panel:#1c1026;
  --violet-mid:#8B5FC7;
  --violet-line:#3a2159;
  --beam-glow:#b57bff;
  --beam-core:#ecdcff;
  --ink-pale:#efe7f7;
  --ink-dim:#b6a1d6;
  --accent:#c026d3;
  --hongo-cap:#a54fe0;
  --hongo-cap-dark:#6e1fae;
  --hongo-stem:#d9c1f5;
  --font-display:'Cinzel Decorative', serif;
  --font-title:'Cinzel', serif;
  --font-body:'EB Garamond', serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg-deep); color:var(--ink-pale);
  font-family:var(--font-body);
}
a{color:inherit;}
button{font-family:inherit;}


/* ---------- UTILIDADES ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- HEADER / NAV ---------- */

/* .logo-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
} */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem, 4vw, 3rem);
  border-bottom:1px solid var(--violet-line);
}
.site-header.on-hero{
  position:fixed; top:0; left:0; width:100%; z-index:50; border-bottom:none;
  background:linear-gradient(to bottom, rgba(6,4,10,0.85), transparent);
}
.logo{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.logo svg{ width:2.1rem; height:2.1rem; flex-shrink:0; }
.logo-icon{
  width:2rem; height:2rem; flex-shrink:0;
  object-fit:cover;
  object-position:top;
  border:1px solid var(--violet-mid);
}
.logo-text{ font-family:var(--font-title); line-height:1.1; }
.logo-text .l1{ font-size:0.62rem; letter-spacing:0.18em; color:var(--ink-dim); display:block; }
.logo-text .l2{ font-size:1rem; letter-spacing:0.06em; color:var(--beam-glow); font-weight:700; display:block; }

.site-nav{ display:flex; align-items:center; gap:clamp(0.9rem, 2vw, 1.8rem); flex-wrap:wrap; }
.site-nav a{
  text-decoration:none; color:var(--ink-pale); font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase; opacity:0.85;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"]{ color:var(--beam-glow); opacity:1; }


.header-social{ display:flex; gap:0.9rem; align-items:center; }
.header-social a{ color:var(--ink-pale); display:flex; opacity:0.85; }
.header-social a:hover{ color:var(--beam-glow); opacity:1; }
.header-social svg{ width:1.1rem; height:1.1rem; fill:currentColor; }

 @media (max-width: 860px){
  .site-header{ flex-direction:column; align-items:flex-start; gap:0.8rem; }
  .site-header.on-hero{ position:absolute; }
  .site-nav{ gap:0.9rem 1.1rem; }
} 


/* ---------- TIPOGRAFÍA / SECCIONES COMUNES ---------- */
section{ position:relative; padding:2.6rem 1.5rem; }
.eyebrow{
  display:block; text-transform:uppercase; letter-spacing:0.22em;
  font-size:0.78rem; color:var(--ink-dim);
}
.section-heading{
  font-family:var(--font-title); font-weight:700; font-size:clamp(1.6rem, 3.4vw, 2.3rem);
  margin:0.5rem 0 0.6rem;
}
.section-intro{ color:var(--ink-dim); max-width:34rem; margin:0 auto 2.8rem; line-height:1.7; }

/* Página de contenido simple (historia / relatos / opiniones) */
.page-header{ text-align:center; padding:4.5rem 1.5rem 1rem; max-width:38rem; margin:0 auto; }
.page-title{
  font-family:var(--font-title); font-weight:900; font-size:clamp(2rem, 5vw, 2.9rem);
  margin:0.5rem 0 1rem;
}
.content{ max-width:40rem; margin:0 auto; padding:1rem 1.5rem 6rem; color:var(--ink-dim); line-height:1.75; }
.content p{ margin:0 0 1.2rem; font-size:1.2rem; text-align:justify;}
/* En celulares */
@media (max-width: 700px) {
  .content p {
    text-align: left;
  }
}
.content a{ color:var(--beam-glow); }

.lugares-list{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:1rem; }
.lugares-list li{ border-left:2px solid var(--accent); padding-left:1rem; }
.lugares-list strong{ color:var(--ink-pale); font-family:var(--font-body); }

.testimonios{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); }
.testimonio{ background:var(--bg-panel); border:1px solid var(--violet-line); padding:1.3rem; border-radius:2px; }
.testimonio p{ margin:0 0 0.8rem; font-style:italic; color:var(--ink-pale); font-size:1rem; }
.testimonio span{ font-size:0.8rem; color:var(--ink-dim); letter-spacing:0.03em; }
.stars{ color:var(--beam-glow); letter-spacing:0.15em; margin-bottom:0.5rem; display:block; }

/* ---------- BOTONES ---------- */
.btn-outline{
  display:inline-block; text-decoration:none; text-transform:uppercase;
  font-family:var(--font-body); font-weight:600; letter-spacing:0.1em; font-size:0.82rem;
  color:var(--ink-pale); border:1px solid var(--beam-glow);
  padding:0.9rem 1.8rem; border-radius:2px;
}
.btn-outline:hover, .btn-outline:focus-visible{ background:var(--beam-glow); color:#150a26; }

.btn-buy{
  display:inline-block; text-decoration:none; font-weight:600;
  font-size:0.9rem; letter-spacing:0.02em; color:var(--ink-pale);
  background:linear-gradient(160deg, #a91fba, #7c1f9e); 
  /* background:linear-gradient(160deg, var(--accent), #7c1f9e); */
  padding:0.8rem 1.6rem; border-radius:3px;
  box-shadow:0 12px 24px rgba(192,38,211,0.25);
}
.btn-buy:hover, .btn-buy:focus-visible{ filter:brightness(1.12); }

.back-link:hover{ color:var(--beam-glow); }

/* ---------- TARJETAS TEASER (home) ---------- */
.teaser-grid{
  width:90%;
  max-width:75rem;
  margin:0 auto;
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
}
.teaser-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--bg-panel); border:1px solid var(--violet-line); border-radius:4px;
  padding:1.8rem; text-align:left;
  transition:border-color 0.35s ease, box-shadow 0.35s ease;
}
.teaser-card:hover, .teaser-card:focus-visible{
  border-color:var(--beam-glow);
  box-shadow:0 0 40px rgba(181,123,255,0.4);
}
.teaser-card .segment-eyebrow{ font-style:italic; color:var(--ink-dim); font-size:0.85rem; }
.teaser-card h3{ font-family:var(--font-title); font-size:1.15rem; margin:0.4rem 0 0.7rem; color:var(--ink-pale); }
.teaser-card p{ color:var(--ink-dim); font-size:0.95rem; line-height:1.6; margin:0; }



/* ---------- OPINIONES.HTML ---------- */

.reader-gallery-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));
}
.reader-gallery-grid figure{ margin:0; }
.reader-gallery-grid img{
  width:100%; height:14rem; object-fit:cover; border-radius:2px;
  border:1px solid var(--violet-line);
  display:block;
  transition:border-color 0.3s ease;
}
.reader-gallery-grid img:hover{ border-color:var(--beam-glow); }
.reader-gallery-grid figcaption{
  font-size:0.78rem; color:var(--ink-dim); margin-top:0.4rem; text-align:center;
}

.cta-final{
  display:flex; align-items:center; justify-content:center; gap:2rem;
  flex-wrap:wrap; margin-top:3rem;
}

.cta-final-img{
  width:15rem; height:auto; border-radius:2px;
  border:2px solid var(--violet-line);
}

.content--ancho{ max-width:56rem; }

.reader-gallery{ margin-top:3rem; }

.reader-gallery .eyebrow{ text-align:center; margin-bottom:1.2rem; }

.cta-final-link:hover{ text-decoration:underline; }


/* ---------- HISTORIA.HTML ---------- */

.content-photo-lg{
  display:block;
  width:min(25rem,100%);   /* antes: 25rem */
  height:auto;
  object-fit:cover;
  object-position:center;
  margin:0 auto 2rem;
  border-radius:2px;
  border:1px solid var(--violet-line);}

/* ---------- LUCINDA SUTTON ---------- */
.content-photo{
  display:block;
  width:min(25rem,100%);
  height:auto;
  object-position:center;
  margin:0 auto 2rem;
  border-radius:2px;
  border:1px solid var(--violet-line);
}


/* ---------- RELATOS.html ---------- */

  .libros-hero{
    position:relative; min-height:65vh; display:flex; align-items:center; justify-content:center;
    padding:5rem 1.5rem; isolation:isolate;
  }
  .libros-hero-bg{
    position:absolute; inset:0; z-index:-4;
    background-image:url('../assets/sello-estrella-light.webp');
    background-size:auto; background-position:center 30%;
  }
  .libros-hero-bg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(6,4,10,0.75), rgba(6,4,10,0.9));
  }
  .libros-books-row{ display:flex; gap:3rem; flex-wrap:wrap; justify-content:center; }
  .libro-card{ display:flex; flex-direction:column; align-items:center; gap:0.9rem; text-decoration:none; }
  .libro-card img{
    width:12rem; height:18rem; object-fit:cover; border:1px solid var(--violet-mid);
    border-radius:2px; box-shadow:0 25px 50px rgba(0,0,0,0.6);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .libro-card:hover img, .libro-card:focus-visible img{
    transform:translateY(-6px);
    box-shadow:0 0 45px rgba(181,123,255,0.5), 0 25px 50px rgba(0,0,0,0.6);
  }
  .libro-card .libro-label{
    font-family:var(--font-title); font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; font-size:0.95rem; color:var(--ink-pale);
  }
  .libro-card:hover .libro-label{ color:var(--beam-glow); }
/* ---------- LIBRO 1 Y 2 ---------- */

.page-header--libro { max-width: 56rem; }
.page-header--libro .page-title { font-size: clamp(1.7rem, 4.2vw, 2.6rem); }

/* ---------- FUENTES ---------- */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cinzel-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/cinzel-900.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/garamond-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/garamond-italic.woff2') format('woff2');
}


/* ---------- navegación al pie: divisor + tarjetas anterior / siguiente ---------- */
.pie-nav{ margin-top:2.5rem; }
.pie-nav-divider{ display:flex; align-items:center; gap:0.6rem; margin:0 0 1.5rem; }
.pie-nav-divider .line{ flex:1; height:1px; background:var(--violet-line); }
.pie-nav-divider .diamond{ width:7px; height:7px; background:var(--beam-glow); transform:rotate(45deg); flex-shrink:0; }
.pie-nav-cards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; }
.pie-nav-cards a{
  display:flex; flex-direction:column; gap:0.35rem; text-decoration:none; color:var(--ink-pale);
  background:var(--bg-panel); border:1px solid var(--violet-line); border-radius:4px;
  padding:1.2rem 1.5rem;
  transition:border-color 0.35s ease, box-shadow 0.35s ease;
}
.pie-nav-cards a:hover, .pie-nav-cards a:focus-visible{
  border-color:var(--beam-glow); box-shadow:0 0 36px rgba(181,123,255,0.35);
}
.pie-nav-cards a.next{ text-align:right; align-items:flex-end; }
.pie-nav-cards a.buy{ grid-column:1 / -1; align-items:center; text-align:center; }
.pie-nav-label{
  display:flex; align-items:center; gap:0.4rem; text-transform:uppercase;
  letter-spacing:0.2em; font-size:0.72rem; color:var(--ink-dim);
}
.pie-nav-label svg{ width:1rem; height:1rem; flex-shrink:0; }
.pie-nav-cards strong{ font-family:var(--font-title); font-size:1.1rem; font-weight:700; line-height:1.25; }
@media (max-width: 600px){
  .pie-nav-cards{ grid-template-columns:1fr; }
}
/* ---------- FOOTER ---------- */
.site-footer{
  text-align:center; padding:2.8rem 1.5rem 2.2rem;
  border-top:1px solid var(--violet-line); margin-top:0.5rem;
  scroll-margin-top:4rem;
}
.socials{ display:flex; justify-content:center; gap:1.3rem; margin-bottom:1.5rem; }
.socials a{
  width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--violet-mid); border-radius:50%; color:var(--ink-dim); text-decoration:none;
}
.socials a:hover, .socials a:focus-visible{ color:var(--beam-glow); border-color:var(--beam-glow); }
.socials svg{ width:1.1rem; height:1.1rem; fill:currentColor; }

.contact{ font-size:0.9rem; color:var(--ink-dim); margin:0 0 1.5rem; }
.contact a{ text-decoration:underline; text-underline-offset:3px; }
.contact a:hover{ color:var(--beam-glow); }

.footer-note{ font-size:0.78rem; color:var(--ink-dim); max-width:30rem; margin:0 auto; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ================= MENÚ HAMBURGUESA ================= */
.mobile-menu {
  display: none;
}

@media (max-width: 860px) {

  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
    /* ================= ESTO ES NUEVO ================= */
  .site-header.on-hero {
    position: absolute;
  }
     /* ================================== */
  .desktop-nav {
    display: none;
  }

  .header-social {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: auto;     /* ← empuja las redes a la derecha */
    margin-right: 0.6rem;  /* ← separa el ícono del ☰ */
  }

  .mobile-menu {
    display: block;
    position: relative;
  }

  .mobile-menu summary {
    list-style: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--ink-pale);
    line-height: 1;
    padding: 0.2rem;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu nav.site-nav {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    width: 200px;
    padding: 0.4rem 0;

    background: var(--bg-panel);
    border: 1px solid var(--violet-line);
    border-radius: 4px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }

  .mobile-menu nav.site-nav a {
    display: block;
    padding: 0.8rem 1.2rem;
    color: var(--ink-pale);
    text-decoration: none;
    white-space: nowrap;
  }
}

#site-header { min-height: 68px; }

@media (max-width: 860px) {
  #site-header { min-height: 71px; } /* ajustá al valor medido en móvil */
}