/* ================================================================
   PAWPrints — Librería
   inicio.css: Estilos específicos de la página principal (index.html)
   ================================================================ */

/* ================================================================
   1. HERO (Presentación de la Librería)
   ================================================================ */
.page-inicio main > section:nth-of-type(1) {
  padding: var(--sp-20) var(--gutter);
  background: var(--white);
  max-width: calc(var(--max-w) + 2 * var(--gutter));
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: var(--sp-16);
  row-gap: var(--sp-6);
  align-items: start;
}

/* Eyebrow: fila 1, col 1 */
.page-inicio main > section:nth-of-type(1) > p:first-child {
  grid-column: 1;
  grid-row: 1;
}

.page-inicio main > section:nth-of-type(1) > p:first-child small {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v700);
}

.page-inicio main > section:nth-of-type(1) > p:first-child small::before {
  content: '—— ';
  letter-spacing: -0.04em;
}

/* H1: fila 2, col 1 (Tipografía EB Garamond) */
.page-inicio main > section:nth-of-type(1) > h1 {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dark);
  line-height: 1.0;
}

/* Párrafo descriptivo: fila 3, col 1 */
.page-inicio main > section:nth-of-type(1) > p:nth-of-type(2) {
  grid-column: 1;
  grid-row: 3;
  font-size: var(--text-base);
  color: var(--muted);
  max-width: 42ch;
  line-height: 1.7;
}

/* Lista de CTAs: fila 4, col 1 */
.page-inicio main > section:nth-of-type(1) > ul {
  grid-column: 1;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Botón primario — violeta sólido */
.page-inicio main > section:nth-of-type(1) > ul li:first-child a {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--v700);
  border: 2px solid var(--v700);
  border-radius: var(--r-md);
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.page-inicio main > section:nth-of-type(1) > ul li:first-child a:hover {
  background: var(--v600);
  border-color: var(--v600);
  box-shadow: var(--sh-md);
}

.page-inicio main > section:nth-of-type(1) > ul li:first-child small {
  display: none;
}

/* Botón secundario — violeta outline */
.page-inicio main > section:nth-of-type(1) > ul li:last-child a {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v700);
  background: transparent;
  border: 2px solid var(--v700);
  border-radius: var(--r-md);
  transition: background var(--ease), box-shadow var(--ease);
}

.page-inicio main > section:nth-of-type(1) > ul li:last-child a:hover {
  background: var(--v50);
  box-shadow: var(--sh-sm);
}

.page-inicio main > section:nth-of-type(1) > ul li:last-child small {
  display: none;
}

/* Imagen Hero: col 2 */
.page-inicio main > section:nth-of-type(1) > figure {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-v);
  background: var(--v50);
  aspect-ratio: 4 / 3;
}

.page-inicio main > section:nth-of-type(1) > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-inicio main > section:nth-of-type(1) > figure figcaption {
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  background: var(--white);
}

/* ================================================================
   2. RECOMENDACIONES DEL LIBRERO
   ================================================================ */
.page-inicio main > section:nth-of-type(2) {
  background: var(--cream);
  padding: var(--sp-16) var(--gutter);
}

.page-inicio main > section:nth-of-type(2) > p:first-child,
.page-inicio main > section:nth-of-type(2) > h2 {
  max-width: var(--max-w);
  margin-inline: auto;
  display: block;
}

.page-inicio main > section:nth-of-type(2) > p:first-child {
  margin-bottom: var(--sp-2);
}

.page-inicio main > section:nth-of-type(2) > p:first-child small {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v700);
}

.page-inicio main > section:nth-of-type(2) > h2 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: var(--sp-10);
}

/* Grid de 4 tarjetas de libros */
.page-inicio main > section:nth-of-type(2) > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  max-width: var(--max-w);
  margin-inline: auto;
}

/* Tarjeta individual de libro */
.page-inicio main > section:nth-of-type(2) article {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}

.page-inicio main > section:nth-of-type(2) article:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-4px);
  border-color: var(--border-v);
}

/* Portada del libro */
.page-inicio main > section:nth-of-type(2) article figure {
  aspect-ratio: 3 / 4;
  background: var(--v50);
  overflow: hidden;
  flex-shrink: 0;
}

.page-inicio main > section:nth-of-type(2) article figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.page-inicio main > section:nth-of-type(2) article:hover figure img {
  transform: scale(1.05);
}

/* Cuerpo de la tarjeta */
.page-inicio main > section:nth-of-type(2) article > p,
.page-inicio main > section:nth-of-type(2) article > h3 {
  padding-inline: var(--sp-4);
}

/* Género (eyebrow) */
.page-inicio main > section:nth-of-type(2) article > p:first-of-type {
  padding-top: var(--sp-4);
  padding-bottom: 0;
}

.page-inicio main > section:nth-of-type(2) article > p:first-of-type small {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v500);
}

/* Título del libro (EB Garamond) */
.page-inicio main > section:nth-of-type(2) article h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin-block: var(--sp-2);
  line-height: 1.3;
}

.page-inicio main > section:nth-of-type(2) article h3 a {
  color: var(--dark);
  transition: color var(--ease);
}

.page-inicio main > section:nth-of-type(2) article h3 a:hover {
  color: var(--v700);
}

/* Datos de autor y precio */
.page-inicio main > section:nth-of-type(2) article > p {
  font-size: var(--text-sm);
  color: var(--muted);
  padding-bottom: var(--sp-2);
  max-width: 100%;
}

.page-inicio main > section:nth-of-type(2) article > p strong {
  color: var(--dark);
}

/* Fila inferior de precio y acción */
.page-inicio main > section:nth-of-type(2) article > p:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.page-inicio main > section:nth-of-type(2) article > p:last-child a {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--v700);
  transition: color var(--ease);
}

.page-inicio main > section:nth-of-type(2) article > p:last-child a:hover {
  color: var(--v600);
  text-decoration: underline;
}

/* ================================================================
   3. PRÓXIMOS EVENTOS Y PROMOCIONES
   ================================================================ */
.page-inicio main > section:nth-of-type(3) {
  padding: var(--sp-16) var(--gutter);
  background: var(--white);
  max-width: calc(var(--max-w) + 2 * var(--gutter));
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-6);
}

/* Encabezado centrado */
.page-inicio main > section:nth-of-type(3) > h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0;
}

/* Tarjeta de Promoción destacada */
.page-inicio main > section:nth-of-type(3) > article {
  grid-column: 1;
  grid-row: 2;
  background: var(--v50);
  border: 2px solid var(--border-v);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.page-inicio main > section:nth-of-type(3) > article p:first-child strong {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v700);
}

.page-inicio main > section:nth-of-type(3) > article h3 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
}

.page-inicio main > section:nth-of-type(3) > article > p:nth-of-type(2) {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.65;
  max-width: 100%;
  flex: 1;
}

.page-inicio main > section:nth-of-type(3) > article > p:last-child a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--v700);
  transition: gap var(--ease), color var(--ease);
}

.page-inicio main > section:nth-of-type(3) > article > p:last-child a:hover {
  gap: var(--sp-2);
  color: var(--v600);
}

/* Lista de Eventos */
.page-inicio main > section:nth-of-type(3) > ul {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.page-inicio main > section:nth-of-type(3) > ul article {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.page-inicio main > section:nth-of-type(3) > ul article:hover {
  border-color: var(--border-v);
  box-shadow: var(--sh-sm);
}

.page-inicio main > section:nth-of-type(3) > ul article p:first-child time {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v500);
}

.page-inicio main > section:nth-of-type(3) > ul article h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
}

.page-inicio main > section:nth-of-type(3) > ul article > p:nth-of-type(2) {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.65;
  max-width: 100%;
  flex: 1;
}

.page-inicio main > section:nth-of-type(3) > ul article p:last-child a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--v700);
  transition: gap var(--ease), color var(--ease);
}

.page-inicio main > section:nth-of-type(3) > ul article p:last-child a:hover {
  gap: var(--sp-2);
  color: var(--v600);
}

/* ================================================================
   4. NUESTRA HISTORIA (Preview en Inicio)
   ================================================================ */
.page-inicio main > section:nth-of-type(4) {
  padding: var(--sp-20) var(--gutter);
  background: var(--white);
  max-width: calc(var(--max-w) + 2 * var(--gutter));
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "img eyebrow"
    "img title"
    "img desc"
    "img cta";
  column-gap: var(--sp-16);
  row-gap: var(--sp-5);
  align-items: start;
}

.page-inicio main > section:nth-of-type(4) > p:first-child    { grid-area: eyebrow; }
.page-inicio main > section:nth-of-type(4) > h2               { grid-area: title;   }
.page-inicio main > section:nth-of-type(4) > figure           { grid-area: img; align-self: center; }
.page-inicio main > section:nth-of-type(4) > p:nth-of-type(2) { grid-area: desc;    }
.page-inicio main > section:nth-of-type(4) > p:last-child     { grid-area: cta;     }

.page-inicio main > section:nth-of-type(4) > p:first-child small {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v700);
}

.page-inicio main > section:nth-of-type(4) > h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, var(--text-3xl));
  font-weight: 800;
}

.page-inicio main > section:nth-of-type(4) > figure {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--v50);
  border: 1px solid var(--border-v);
}

.page-inicio main > section:nth-of-type(4) > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-inicio main > section:nth-of-type(4) > figure figcaption {
  display: none;
}

.page-inicio main > section:nth-of-type(4) > p:nth-of-type(2) {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.7;
  max-width: 50ch;
}

/* Botón CTA "Conocer más" */
.page-inicio main > section:nth-of-type(4) > p:last-child a {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--v700);
  border: 2px solid var(--v700);
  border-radius: var(--r-md);
  transition: background var(--ease), box-shadow var(--ease);
}

.page-inicio main > section:nth-of-type(4) > p:last-child a:hover {
  background: var(--v600);
  box-shadow: var(--sh-md);
}

/* ================================================================
   5. RESPONSIVE ESPECÍFICO DE INICIO
   ================================================================ */
@media (max-width: 1024px) {
  :root {
    --text-hero: 3rem;
  }

  /* Libros: 2 columnas */
  .page-inicio main > section:nth-of-type(2) > ul {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Eventos: promo full width, eventos en 2 col abajo */
  .page-inicio main > section:nth-of-type(3) {
    grid-template-columns: 1fr 1fr;
  }

  .page-inicio main > section:nth-of-type(3) > article {
    grid-column: 1 / -1;
  }

  .page-inicio main > section:nth-of-type(3) > ul {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  :root {
    --text-hero: 2.5rem;
    --text-4xl:  1.9rem;
    --text-3xl:  1.6rem;
    --gutter:    1rem;
    --sp-20:     2.5rem;
    --sp-16:     2rem;
  }

  /* Hero Mobile */
  .page-inicio main > section:nth-of-type(1) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    padding-block: var(--sp-10);
    gap: var(--sp-5);
  }

  .page-inicio main > section:nth-of-type(1) > figure {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
  }

  .page-inicio main > section:nth-of-type(1) > p:first-child   { grid-column: 1; grid-row: 2; }
  .page-inicio main > section:nth-of-type(1) > h1              { grid-column: 1; grid-row: 3; }
  .page-inicio main > section:nth-of-type(1) > p:nth-of-type(2){ grid-column: 1; grid-row: 4; }
  .page-inicio main > section:nth-of-type(1) > ul              { grid-column: 1; grid-row: 5; flex-direction: column; }

  .page-inicio main > section:nth-of-type(1) > ul li a {
    display: block;
    text-align: center;
    width: 100%;
  }

  /* Libros en 1 columna */
  .page-inicio main > section:nth-of-type(2) > ul {
    grid-template-columns: 1fr;
  }

  /* Eventos y promociones en 1 columna */
  .page-inicio main > section:nth-of-type(3) {
    grid-template-columns: 1fr;
  }

  .page-inicio main > section:nth-of-type(3) > article {
    grid-column: 1;
  }

  .page-inicio main > section:nth-of-type(3) > ul {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  /* Historia preview en 1 columna */
  .page-inicio main > section:nth-of-type(4) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "eyebrow"
      "title"
      "desc"
      "cta";
    gap: var(--sp-5);
  }
}

@media (max-width: 480px) {
  .page-inicio main > section:nth-of-type(1) > h1 {
    font-size: 2.2rem;
  }

  .page-inicio main > section:nth-of-type(2) > ul {
    grid-template-columns: 1fr;
  }
}