/* ==========================================================================
   home.css — estilos exclusivos de la página de inicio (front-page.php).
   Cargado condicionalmente solo en is_front_page() desde inc/enqueue.php.
   Sistema de 4 fuentes:
     --font-titulo  → Playfair Display  (encabezados)
     --font-cuerpo  → Cormorant Garamond (lectura — mín. 18px, line-height 1.9)
     --font-ui      → DM Sans           (nav, labels, botones, bullets)
     --font-small   → Lato              (textos muy pequeños / legales)
   ========================================================================== */

/* ==========================================================================
   Animaciones al scroll — clases aplicadas por animations.js
   ========================================================================== */

.will-animate {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   1.1s ease-out,
    transform 1.1s ease-out;
}

.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .will-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Contenedor home — elimina padding genérico de site-main
   ========================================================================== */

.site-main--home {
  padding-block: 0;
}

/* ==========================================================================
   Utilidades compartidas entre secciones
   ========================================================================== */

.home-section {
  padding-block: var(--space-16);
}

/* Eyebrow — DM Sans, uppercase, cobre */
.section-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cobre);
  margin-bottom: var(--space-3);
}

/* Título de sección — Playfair */
.section-title {
  font-family: var(--font-titulo);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-marron);
  line-height: 1.2;
  margin-bottom: var(--space-8);
}

/* ==========================================================================
   S1 — Hero
   Grid: texto (izq) / foto placeholder (der) en desktop.
   ========================================================================== */

.hero {
  min-height: 90svh;
  display: flex;
  align-items: center;
  padding-block: var(--space-16);
  background-color: var(--color-marfil);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* Línea decorativa cobre sobre el titular */
.hero__accent {
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--color-cobre);
  margin-bottom: var(--space-6);
}

/* Titular — Playfair Display */
.hero__headline {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-marron);
  letter-spacing: 0;
  margin-bottom: var(--space-6);
}

.hero__headline em {
  font-style: italic;
  color: var(--color-cobre);
  display: block;
}

/* Propuesta de valor — Cormorant Garamond, cómodo */
.hero__sub {
  font-family: var(--font-cuerpo);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  line-height: 1.9;
  margin-bottom: var(--space-4);
  max-width: 52ch;
}

/* Frase humana — Cormorant, itálica, tenue */
.hero__human {
  font-family: var(--font-cuerpo);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-texto-claro);
  line-height: 1.85;
  margin-bottom: var(--space-8);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Foto / placeholder */
.hero__media {
  width: 100%;
}

.hero__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  background-color: var(--color-beige);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-4);
  overflow: hidden;
}

/* Label del placeholder — Lato (texto muy pequeño) */
.hero__placeholder-label {
  font-family: var(--font-small);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-taupe);
  font-weight: 400;
}

/* Foto real — mismas proporciones que el placeholder */
.hero__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   S2 — Bienvenida humana
   ========================================================================== */

.bienvenida {
  background-color: var(--color-beige);
}

/* Título — Playfair */
.bienvenida__title {
  font-family: var(--font-titulo);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-marron);
  line-height: 1.2;
  margin-bottom: var(--space-6);
}

.bienvenida__body {
  margin-bottom: var(--space-8);
}

/* Párrafos — Cormorant Garamond, generoso */
.bienvenida__body p {
  font-family: var(--font-cuerpo);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  line-height: 1.95;
  margin-bottom: var(--space-4);
}

.bienvenida__body p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   S3 — Buyer personas
   ========================================================================== */

.buyer-personas {
  background-color: var(--color-marfil);
  /* Reduce el padding superior respecto al .home-section genérico */
  padding-block-start: var(--space-12);
}

/* Título central — Playfair */
.buyer-personas__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.75rem, 4vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-marron);
  line-height: 1.2;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.buyer-personas__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Reduce el hueco entre las columnas y el bloque de cierre */
  margin-bottom: var(--space-6);
}

.persona {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-beige);
}

/* Sin border-bottom en el último: el cierre ya pone su propia línea */
.persona:last-child {
  border-bottom: none;
}

/* Número decorativo — Playfair Light */
.persona__number {
  display: block;
  font-family: var(--font-titulo);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--color-beige);
  line-height: 1;
  margin-bottom: var(--space-3);
}

/* Subtítulo de situación — Playfair itálica */
.persona__subtitle {
  font-family: var(--font-titulo);
  font-size: var(--text-xl);
  font-weight: 600;
  font-style: italic;
  color: var(--color-marron);
  line-height: 1.3;
  margin-bottom: var(--space-4);
}

/* Cuerpo — Cormorant Garamond */
.persona__body {
  font-family: var(--font-cuerpo);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  line-height: 1.9;
  margin: 0;
  max-width: 62ch;
}

.buyer-personas__closing {
  text-align: center;
  border-top: 1px solid var(--color-beige);
  padding-top: var(--space-6);
}

/* Cierre — Cormorant itálica */
.buyer-personas__closing p {
  font-family: var(--font-cuerpo);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-texto-suave);
  margin-bottom: var(--space-6);
  max-width: none;
}

/* ==========================================================================
   S4 — Ejes temáticos
   ========================================================================== */

.ejes {
  background-color: var(--color-marfil);
}

.ejes__header {
  margin-bottom: var(--space-8);
}

.ejes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.eje {
  padding: var(--space-8);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Código/número — DM Sans */
.eje__code {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Título del eje — Playfair */
.eje__title {
  font-family: var(--font-titulo);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* Descripción — Cormorant Garamond */
.eje__desc {
  font-family: var(--font-cuerpo);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.9;
  margin: 0;
  flex: 1;
}

/* CTA del eje — DM Sans */
.eje__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  align-self: flex-start;
  margin-top: var(--space-2);
  transition: opacity var(--transition-base);
}

.eje__link:hover {
  opacity: 0.65;
  color: inherit;
}

/* CP — verde + marfil/cobre */
.eje--cp { background-color: var(--color-verde); }
.eje--cp .eje__code  { color: var(--color-cobre); }
.eje--cp .eje__title { color: var(--color-marfil); }
.eje--cp .eje__desc  { color: rgba(247, 243, 236, 0.82); }
.eje--cp .eje__link  { color: var(--color-cobre); }

/* T — vino + marfil/cobre */
.eje--t { background-color: var(--color-vino); }
.eje--t .eje__code  { color: var(--color-cobre); }
.eje--t .eje__title { color: var(--color-marfil); }
.eje--t .eje__desc  { color: rgba(247, 243, 236, 0.82); }
.eje--t .eje__link  { color: var(--color-cobre); }

/* LC — marrón + cobre */
.eje--lc { background-color: var(--color-marron); }
.eje--lc .eje__code  { color: var(--color-cobre); }
.eje--lc .eje__title { color: var(--color-marfil); }
.eje--lc .eje__desc  { color: rgba(247, 243, 236, 0.82); }
.eje--lc .eje__link  { color: var(--color-cobre); }

/* ==========================================================================
   S5 — Últimas entradas del blog
   ========================================================================== */

.latest-home {
  background-color: var(--color-beige);
}

.latest-home__header {
  margin-bottom: var(--space-8);
}

.latest-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.post-card {
  background-color: var(--color-marfil);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.post-card__thumbnail {
  overflow: hidden;
}

.post-card__thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 400ms ease;
}

.post-card:hover .post-card__thumbnail img {
  transform: scale(1.03);
}

.post-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* Meta row: categoría + fecha — DM Sans */
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.post-card__cat {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cobre);
}

.post-card__cat a {
  color: inherit;
  text-decoration: none;
}

.post-card__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-texto-claro);
  letter-spacing: 0.02em;
}

/* Título de post — Playfair */
.post-card__title {
  font-family: var(--font-titulo);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-marron);
  line-height: 1.3;
  margin: 0;
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.post-card__title a:hover {
  color: var(--color-cobre);
}

/* Extracto — Cormorant Garamond */
.post-card__excerpt {
  font-family: var(--font-cuerpo);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  line-height: 1.85;
  margin: 0;
  flex: 1;
}

/* CTA — DM Sans */
.post-card__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-verde);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color var(--transition-base);
}

.post-card__link:hover {
  color: var(--color-cobre);
}

/* Mensaje vacío — DM Sans itálica */
.latest-home__empty {
  font-family: var(--font-ui);
  font-style: italic;
  color: var(--color-texto-claro);
  margin-bottom: var(--space-8);
}

.latest-home__cta {
  margin-top: var(--space-12);
  text-align: center;
}

/* ==========================================================================
   S6 — Newsletter — layout centrado, fondo verde
   ========================================================================== */

.newsletter-block {
  background-color: var(--color-verde);
  padding-block: var(--space-16);
}

/* Cuerpo centrado */
.newsletter-block__body {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow — DM Sans */
.newsletter-block__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-3);
}

/* Título — Playfair */
.newsletter-block__title {
  font-family: var(--font-titulo);
  font-size: clamp(1.75rem, 4vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-marfil);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-8);
}

/* Dos columnas de beneficios */
.newsletter-block__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  text-align: left;
}

/* Heading de beneficio — DM Sans */
.newsletter-benefit__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-3);
}

/* Lista de beneficios — DM Sans */
.newsletter-benefit__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
}

.newsletter-benefit__list li {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  color: rgba(247, 243, 236, 0.85);
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-2);
  line-height: 1.65;
}

/* Icono ✦ en cobre */
.newsletter-benefit__list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--color-cobre);
  font-size: 0.6em;
  top: 0.4em;
}

/* Nota "Sin spam..." — Lato (texto pequeño) */
.newsletter-benefit__note {
  font-family: var(--font-small);
  font-size: var(--text-xs);
  font-weight: 300;
  color: rgba(247, 243, 236, 0.5);
  font-style: italic;
  margin: 0;
}

/* Label del campo — DM Sans */
.newsletter-block__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(247, 243, 236, 0.7);
  margin-bottom: var(--space-3);
  text-align: left;
}

/* Row: input + botón */
.newsletter-block__form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.newsletter-block__input {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-texto);
  background-color: var(--color-marfil);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color var(--transition-base);
}

.newsletter-block__input:focus {
  border-color: var(--color-cobre);
}

.newsletter-block__input::placeholder {
  color: var(--color-texto-claro);
}

/* Nota legal — Lato */
.newsletter-block__note {
  font-family: var(--font-small);
  font-size: var(--text-xs);
  font-weight: 300;
  color: rgba(247, 243, 236, 0.45);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   Media queries — tablet (768px)
   ========================================================================== */

@media (min-width: 768px) {

  /* Hero: texto más ancho que foto */
  .hero__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
  }

  /* Bienvenida */
  .bienvenida__title {
    font-size: var(--text-3xl);
  }

  /* Buyer personas: 3 columnas con separadores verticales */
  .buyer-personas__grid {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-beige);
    border-bottom: 1px solid var(--color-beige);
  }

  .persona {
    padding: var(--space-8);
    border-top: none;
    border-bottom: none;
    border-left: 1px solid var(--color-beige);
  }

  .persona:first-child {
    border-left: none;
  }

  .persona__subtitle {
    min-height: 3.9em;
  }

  /* Ejes: 3 columnas */
  .ejes__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Últimas entradas: 3 columnas */
  .latest-home__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* section-title más grande */
  .section-title {
    font-size: var(--text-3xl);
  }

  /* Newsletter: beneficios en 2 cols + formulario inline */
  .newsletter-block__benefits {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .newsletter-block__form-row {
    flex-direction: row;
    align-items: stretch;
  }

  .newsletter-block__input {
    flex: 1;
  }

  .newsletter-block__form-row .btn {
    flex-shrink: 0;
  }

  .newsletter-block__note {
    text-align: left;
  }
}

/* ==========================================================================
   Media queries — desktop (1100px)
   ========================================================================== */

@media (min-width: 1100px) {
  .newsletter-block__title {
    font-size: var(--text-3xl);
  }
}