/* ==========================================================
   ETERNA — Ajustes de header y banner principal
   Pegar en: Apariencia → Personalizar → CSS adicional
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

/* El !important es necesario: el <img> del logo tiene
   style="height:56px" inline y sin esto gana el inline. */
.eterna .logo-img {
  height: 44px !important;
  width: auto !important;
  object-fit: contain;
  display: block;
}

.eterna-header .eterna-wrap {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


/* ----------------------------------------------------------
   MÓVIL Y TABLET (≤ 720px)
   720px es el breakpoint que ya usa el sitio para el menú
   hamburguesa. No lo cambies o el menú se rompe.
   ---------------------------------------------------------- */
@media (max-width: 720px) {

  /* --- HEADER: más bajo y con más aire a los costados --- */
  .eterna-header .eterna-wrap {
    padding: 6px 24px !important;
  }

  .eterna .logo-img {
    height: 32px !important;
  }

  .eterna-burger {
    padding: 6px !important;
  }

  .eterna-burger span {
    width: 22px !important;
  }


  /* --- BANNER PRINCIPAL ---
     El h1 del sitio usa font-size: clamp(2.4rem, 6vw, 4.2rem).
     En un celular de 390px el clamp agarra el mínimo (2.4rem = 38px)
     y nunca baja de ahí. Este !important es lo único que lo rompe. */
  .eterna-hero h1 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    padding: 0 18px !important;
    overflow-wrap: break-word !important;
  }

  .eterna-hero p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .eterna-hero .eterna-wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}