:root{
      --bg:#f1f1f1;
      --text:#102b3c;
      --muted:#9f9f9f;
      --primary:#102b3c;   /* azul sobrio */
      --primary-contrast:#ffffff;
      --accent:#eec65f;    /* dorado suave para detalles */
      --maxw:1120px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --radius:14px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
    a{color:var(--primary);text-decoration:none}
    img{max-width:100%;display:block}
    .container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

    #inicio {
     background-image: url("fondo.jpg");
     background-size: cover;     /* La ajusta a todo el ancho/alto */
     background-position: center; /* Centra la imagen */
     background-repeat: no-repeat; /* Evita que se repita */

     
    }
    .btn:hover {
      color: white;
      background-color: #102b3c;
    }

    #bio {
      text-align: justify;
    }

    .hero{
            max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
    }

    .hero-text {
    grid-column: 1; /* lo ubica en la columna 1 de la grilla */
    }

    blockquote p {
      font-style: italic;
    }

    blockquote span {
      font-weight: 800;
    }

    .price-btn {
      font-style: italic;
      font-weight: 400;
    }

    .stars {
  font-size: 1.2rem;      /* tamaño de las estrellas */
  color: #FFD700;         /* amarillo dorado */
  margin-bottom: 8px;     /* espacio debajo de las estrellas */
}


    .hero-card {
    grid-column: 2; /* opcional: asegura que la imagen vaya en la columna 2 */
    }

    /* NAV */
    .nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eee}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
    .brand{font-weight:800;letter-spacing:.3px}
    .menu{display:flex;gap:22px}
    .menu a{font-weight:600;color:#222}
    .menu a.cta{background:var(--primary);color:var(--primary-contrast);padding:10px 14px;border-radius:9px}

    /* HERO */
    .hero{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;padding:54px 0}
    .hero .eyebrow{font-weight:700;color:var(--muted);text-transform:uppercase;font-size:.85rem;letter-spacing:.12em}
    .hero h1{
          font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 3.5rem;
    line-height: normal;
    color: #48aec6;
    margin: 10px 0;
    }
    .hero p.lead{font-size:1.05rem;color:#102b3c;margin:0 0 2.5rem 0; font-style: italic;}
    .badges{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
    .btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--primary);color:var(--primary);padding:12px 16px;border-radius:10px;font-weight:700}
    .btn.primary{background:var(--primary);color:var(--primary-contrast); margin-bottom: 10px; margin-right: 5px;}
    .btn.primary:hover{background-color: var(--primary-contrast); color: var(--primary);}
    .hero-card{padding:18px;}

    /* SECTIONS */
    section{padding:64px 0;border-top:1px solid #f2f2f2}
    .section-title{font-family:Lora,serif;font-weight:600;font-size:2rem;margin:0 0 14px}
    .section-sub{color:var(--muted);margin:-6px 0 26px}

    /* DESCRIPCIÓN */
    .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
    blockquote{margin:0;padding:18px 20px;border-left:4px solid #48aec6;background:#d8eef3;border-radius:8px}
    blockquote footer{color:var(--muted);margin-top:8px;font-size:.95rem}

    /* AUTOR */
    .author{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
    .avatar{border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
    #review {
          align-self: center;
    }
    #review1{
      margin-bottom: 40px;
    }
    #sinopsis {
      color: #102b3c;
      text-align: justify;
    }

    .card img {
      height: 100px;
      margin-right: 15px;
    }

    .card div:first-child {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    /* COMPRAR */
    .store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{border:1px solid #eee;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
    .card .content{padding:16px}
    .card h4{margin:0 0 0px}
    .card p{margin:0 0 14px;color:var(--muted)}
    .card .actions{padding:0 16px 16px}

    /* GALERÍA/REDES */
    .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .gallery .tile{aspect-ratio:1/1;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
    .loadmore{margin-top:16px;text-align:center}

    /* CONTACTO */
    .contact{display:grid;grid-template-columns:1fr 1fr;gap:24px}
    .form{border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;background:#fff}
    .form label{display:block;font-weight:600;margin:10px 0 6px}
    .form input,.form textarea{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:10px;font:inherit}
    .form button{margin-top:12px}


    /* RESPONSIVE */
    @media (max-width: 980px){
      .hero{grid-template-columns:1fr}
      .cols-2{grid-template-columns:1fr}
      .author{grid-template-columns:1fr}
      .store-grid{grid-template-columns:1fr 1fr}
      .gallery{grid-template-columns:repeat(3,1fr)}
      .contact{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .menu{display:none} /* simplifica para móvil; puedes añadir un menú hamburguesa si quieres */
      .gallery{grid-template-columns:repeat(2,1fr)}
      .store-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      section {
    padding: 30px 0;   
}
 .hero-card {
    grid-column: 1;
    grid-row: 1;
}

h1 {
  display: none;
}
.hero .eyebrow {
   margin: 0 10px;
   color: #102b3c;
   text-align: center;
}
.lead {
  display: none;
}

#batch {
  justify-content: center;
  padding-top: 10px;
}



    }