/* =========================
   HERO HOME
========================= */

/* Ajustes layout HOME (GeneratePress) */
body.home.one-container.both-right .site-main,
body.home.one-container.right-sidebar .site-main,
body.front-page.one-container.both-right .site-main,
body.front-page.one-container.right-sidebar .site-main {
  margin-right: 0;
}

.site-main > * {
  margin-bottom: 0px;
}

body.home .inside-article {
  padding: 0;
}

body.home .entry-content {
  margin: 0;
  padding: 0;
}

/* =========================
   HERO
========================= */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Imagen del hero (figure + img real para SEO) */
.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
  display: block;

  /* La imagen “mira” hacia el contenido */
  /* transform: scaleX(-1); */
}

/* Overlay de legibilidad (a ancho completo, no “parche”) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Gradiente que blanquea la zona derecha para que el texto se lea siempre */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.78) 62%,
    rgba(255, 255, 255, 0.92) 78%,
    rgba(255, 255, 255, 0.96) 100%
  );
}

/* Contenedor principal */
.hero__container {
  position: relative;
  z-index: 2;

  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter);

  min-height: 520px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Columna de contenido (derecha) */
.hero__content {
  grid-column: 2;
  max-width: 640px;
  justify-self: start;
}

/* Título */
.hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.08;
  color: var(--color-hero-title);
  font-weight: 800;
}

/* Subtítulo (ligeramente suavizado para mejor lectura) */
.hero__subtitle {
  margin: 0 0 var(--space-6);
  font-size: 1.05rem;
  line-height: var(--line-height-base);
  color: rgba(17, 24, 39, 0.88);
}

/* Acciones */
.hero__actions {
  display: flex;
  align-items: center;
}

/* Botón CTA (estado normal: transparente + borde negro) */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 34px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;

  background: transparent;
  color: #111;
  border: 2px solid #111;
  border-radius: 0;

  text-transform: uppercase;
  letter-spacing: 0.03em;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

/* Hover: azul corporativo */
.hero__cta:hover {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--color-cta-bg);
}

/* =========================
   Responsive HERO (breakpoints 825 / 648 / 520)
========================= */

/* <= 825px: mantenemos composición tipo desktop,
   pero colapsamos la columna izquierda para conservar el look */
@media (max-width: 825px) {
  .hero__container {
    grid-template-columns: minmax(0, 5rem) 1fr;
    align-items: end;
    min-height: 420px;
    padding: var(--space-6) var(--gutter);
  }

  .hero__content {
    grid-column: 2;
    max-width: 640px;
    justify-self: start;
  }

  .hero::before {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.35) 40%,
      rgba(255, 255, 255, 0.78) 62%,
      rgba(255, 255, 255, 0.92) 78%,
      rgba(255, 255, 255, 0.96) 100%
    );
  }

  /* NUEVO: caja para H1 + subtítulo (sin botón) */
  .hero__copy {
    display: inline-block;
    padding: 14px 16px;

    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 10px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Ajustes finos de separación dentro de la caja */
  .hero__title {
    margin: 0 0 10px;
  }

  .hero__subtitle {
    margin: 0;
  }

  /* Botón */
  .hero__actions {
    margin-top: 2rem;
  }
}

/* <= 640px: móvil real -> apilamos y ajustamos imagen/overlay */
@media (max-width: 648px) {
  .hero__container {
    grid-template-columns: minmax(0, 2rem) 1fr;
  }
}

@media (max-width: 590px) {
  .hero__container {
    grid-template-columns: minmax(0, 0) 1fr;
  }
}

/* =========================================================
   HERO compacto (Blog + Contacto)
   No afecta a HOME/Servicios/Cursos/Sobre mí
========================================================= */
body.hero--compact .hero__container {
  min-height: clamp(360px, 46vh, 520px);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}