/* Piezas propias de la landing de Ohana (lo que no venía de Base44) */
html { scroll-padding-top: 6rem; }

.js-reveal .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.is-waiting { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { transition: none; } }

/* Inicio: el logo en lugar de la foto generada */
.oh-art {
  width: 100%; height: 100%;
  display: grid; place-items: center; padding: 12%;
  background:
    radial-gradient(60% 60% at 70% 20%, rgba(123, 210, 197, .35), transparent 70%),
    radial-gradient(50% 50% at 20% 85%, rgba(82, 160, 100, .18), transparent 70%),
    #ffffff;
}
.oh-art img { width: 100%; height: auto; max-width: 440px; }

/* Quiénes somos: definición de la palabra en lugar de la foto generada.
   El recuadro venía con proporción fija 4:3 (para una foto): acá crece según el texto,
   así en el celular no se corta. */
div:has(> .oh-def) { aspect-ratio: auto; }
.oh-def {
  width: 100%; height: 100%; min-height: 260px;
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  padding: clamp(1.75rem, 6%, 3.25rem);
  background: linear-gradient(160deg, #184640 0%, #2C8074 100%);
  color: #F4FBF9;
}
.oh-def-word { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1; margin: 0; }
.oh-def-meta { margin: 0; font-size: .95rem; letter-spacing: .08em; color: #7BD2C5; font-style: italic; font-family: var(--font-heading); }
.oh-def-text { margin: .75rem 0 0; font-size: 1.15rem; line-height: 1.55; max-width: 32ch; color: rgba(244, 251, 249, .92); }

/* En el celular el logo ya está en el encabezado: no repetirlo en el inicio */
@media (max-width: 639px) {
  #inicio .relative:has(> div > .oh-art) { display: none; }
}