/* ==========================================================================
   Home — front-page.php. Estructura mobile-first replicando el frame Figma 1439:219.
   ========================================================================== */

/* Quitar el padding del <main> para que el hero pueda ir full-bleed.
   Doble selector para batir la specificity de `.site-main` en 07-layout.css. */
.site-main.site-main--home {
  padding-block: 0;
  padding-inline: 0;
  max-width: none;
}

/* Wrapper interno reutilizable por sección — recupera el contenedor centrado. */
.section {
  padding-block: var(--section-padding-y);
}

.section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
}

.section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-section-title-size);
  line-height: var(--line-height-display);
  color: var(--color-primary);
  margin: 0 0 1.5rem;
}

/* ==========================================================================
   Hero — banda marrón con título grande blanco + ellipse-image a la derecha
   ========================================================================== */
.hero--home {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding-block: calc(var(--spacing-unit) * 2.5);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
}

.hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-hero-size);
  line-height: var(--line-height-display);
  color: var(--color-text-on-dark);
  margin: 0 0 1rem;
}

.hero__body {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text-on-dark);
  margin-bottom: 1.5rem;
}

.hero__body p {
  margin-bottom: 1em;
}

.hero__image img {
  width: 100%;
  height: auto;
}

/* Botón sobre fondo oscuro: invertimos colores del default */
.obrador-btn--on-dark {
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}

.obrador-btn--on-dark:hover,
.obrador-btn--on-dark:focus {
  background-color: var(--color-text-on-dark);
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .hero--home {
    padding-block: 4rem;
  }
  .hero__inner {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: 3rem;
  }
  .hero__content {
    max-width: 650px;
  }
  .hero__image {
    justify-self: end;
    max-width: 661px;
  }
}

/* ==========================================================================
   Objetivos — grid de 6 cards numerados
   ========================================================================== */
.objectives-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.objective-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-bg);
  border: var(--border-width-card) solid var(--color-primary);
  border-radius: var(--border-radius-card);
  min-height: 135px;
  color: var(--color-text);
}

.objective-card__number {
  font-family: var(--font-numeral);
  font-size: var(--font-numeral-size);
  line-height: 0.6;
  letter-spacing: var(--letter-spacing-numeral);
  color: var(--color-primary);
  flex-shrink: 0;
}

.objective-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.objective-card__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: var(--font-card-title-size);
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

.objective-card__desc {
  font-family: var(--font-body);
  font-size: var(--font-card-body-size);
  line-height: 1.3;
  color: inherit;
  margin: 0;
}

.objective-card--filled {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary);
}

.objective-card--filled .objective-card__number {
  color: var(--color-text-on-dark);
}

@media (min-width: 768px) {
  .objectives-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }
}

/* ==========================================================================
   Galletas con propósito — texto + imagen central
   ========================================================================== */
.galletas-proposito__grid {
  display: grid;
  gap: 1.5rem;
}

.galletas-proposito__text {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-primary);
  margin: 0;
}

/* Las imágenes ahora vienen ya con las dimensiones de diseño desde Figma —
   se preserva el aspect-ratio natural y solo aplicamos border-radius. */
.galletas-proposito__media {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.galletas-proposito__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 1024px) {
  .galletas-proposito__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kitchen  right"
      "left     shop";
    column-gap: 3rem;
    row-gap: 2.5rem;
    align-items: start;
  }
  .galletas-proposito__media--kitchen {
    grid-area: kitchen;
  }
  .galletas-proposito__text--right {
    grid-area: right;
    align-self: center;
  }
  .galletas-proposito__text--left {
    grid-area: left;
    align-self: center;
  }
  .galletas-proposito__media--shop {
    grid-area: shop;
  }
}

/* ==========================================================================
   Historia — 3 tarjetas: imagen + título + texto
   ========================================================================== */
.historia-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.historia-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.historia-card__image {
  /* Las fotos son 622x666 (≈311/333 del Figma); fijamos el ratio para que las
     3 tarjetas queden a la misma altura aunque se sustituya alguna imagen. */
  aspect-ratio: 311 / 333;
  overflow: hidden;
  border-radius: var(--border-radius-image);
}

.historia-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.historia-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.historia-card__title {
  font-family: var(--font-ui);
  font-style: normal;                  /* anula el italic por defecto de h1–h6 (01-base.css) */
  font-weight: 700;
  font-size: var(--font-card-title-size);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0;
}

.historia-card__text {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-primary);
  margin: 0;
}

.historia-card__text a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .historia-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* ==========================================================================
   ODS — iconos oficiales UN (Obrador cumple 9 ODS: 1, 2, 3, 5, 8, 10, 12, 16, 17).
   Cada PNG es cuadrado (1:1) con su color e ilustración propia, listos para usar
   sin background extra.
   ========================================================================== */
.ods-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

.ods-badge {
  display: block;
  aspect-ratio: 1 / 1;
}

.ods-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .ods-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
  }
}

@media (min-width: 1024px) {
  /* 9 ODS caben perfectamente en una sola fila */
  .ods-grid {
    grid-template-columns: repeat(9, 1fr);
    gap: 1rem;
  }
}

/* ==========================================================================
   "¡Por cierto!" — banda marrón full-bleed: nota de membresía (envío gratis)
   con ilustración de megáfono a la izquierda y CTA "Hazte Miembro!".
   ========================================================================== */
.por-cierto {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.por-cierto__inner {
  position: relative;                  /* ancla para el megáfono que sobresale en desktop */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.por-cierto__media {
  width: 170px;
  max-width: 60%;
  margin-inline: auto;                 /* centrado sobre el texto en móvil */
}

.por-cierto__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-section-title-size);
  line-height: var(--line-height-display);
  color: var(--color-text-on-dark);
  margin: 0 0 1rem;
}

.por-cierto__text {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text-on-dark);
  margin: 0 0 1.5rem;
}

/* "Somos Genios" en rojo sobre la banda marrón — el helper .text-accent define
   el color; aquí solo aseguramos el peso normal del resto del párrafo. */
.por-cierto__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.por-cierto__cta {
  align-self: center;
}

/* Tablet: megáfono | contenido, con el megáfono contenido (sin sobresalir). */
@media (min-width: 768px) {
  .por-cierto__inner {
    grid-template-columns: minmax(0, 300px) 1fr;   /* megáfono | contenido */
    gap: 3rem;
  }
  .por-cierto__media {
    width: 100%;
    max-width: 300px;
    margin-inline: 0;
  }
}

/* Desktop: el megáfono sobresale un poco por arriba y por abajo de la banda.
   Absoluto y centrado en vertical, más alto que el contenido. width fija +
   height auto => mantiene la proporción. */
@media (min-width: 1024px) {
  .por-cierto {
    position: relative;
    z-index: 1;                        /* el megáfono que sobresale queda por encima de las secciones vecinas */
    overflow: visible;
  }
  .por-cierto__inner {
    grid-template-columns: 360px 1fr;  /* col 1 reservada para el megáfono (absoluto) | contenido */
  }
  /* El megáfono es absoluto, así que el contenido (único item en flujo) caería
     en la col 1; lo forzamos a la col 2 para que no quede bajo el megáfono. */
  .por-cierto__content {
    grid-column: 2;
  }
  .por-cierto__media {
    position: absolute;
    top: 50%;
    left: var(--content-padding-x);
    transform: translateY(-50%);
    width: 360px;
    max-width: none;
    margin: 0;
  }
}

/* ==========================================================================
   CTA "¿Quieres nuestras galletas en tu casa?" — banda marrón centrada.
   ========================================================================== */
.cta-galletas {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  text-align: center;
}

.cta-galletas__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cta-galletas__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-section-title-size);
  line-height: var(--line-height-display);
  color: var(--color-text-on-dark);
  margin: 0;
}