/* Osprey — portada: hero, campo, trabajo, nube de etiquetas y cierre. */

/* ══════════════════════════════ hero ════════════════════════════════ */

.principal { position: relative; z-index: 1; }

.hero {
  max-width: var(--ancho-hero);
  margin: 0 auto;
  padding: 24px 0 0;
  text-align: center;
}

.antetitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--cian-texto);
}
.antetitulo i {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--acento);
  opacity: .55;
}

.hero h1 {
  font-size: clamp(37px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -.028em;
  margin: 0 auto;
  max-width: 720px;
}
.hero h1 span { display: block; }
.hero h1 .acento { color: var(--acento); }

/* Debajo del campo, no encima: primero se pide la URL, despues se explica.
   Por eso va en letra mas pequena que el resto del hero. */
.hero .explicacion {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-suave);
  font-weight: 400;
  text-wrap: pretty;
}

/* ════════════════════════════ el campo ══════════════════════════════ */

.campo { margin: 30px auto 0; max-width: 840px; }

.campo form {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 74px;
  padding: 0 7px 0 24px;
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: 999px;
  box-shadow: 0 12px 35px rgba(20, 60, 80, .06);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.campo form:focus-within {
  border-color: var(--acento);
  box-shadow: 0 12px 38px rgba(0, 120, 160, .13);
}

.campo .icono-enlace { flex: none; width: 24px; height: 24px; color: #2C6A82; }

.campo input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 19px;
  color: var(--tinta);
}
.campo input::placeholder { color: #8293A5; }

.analizar {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.analizar:hover { background: var(--acento-hover); box-shadow: 0 6px 18px rgba(0, 157, 208, .3); }
.analizar[disabled] { opacity: .55; cursor: progress; }
.analizar svg { width: 24px; height: 24px; }

.recado {
  margin: 18px auto 0;
  max-width: 780px;
  font-size: 15px;
  color: var(--critico);
}
.recado[hidden] { display: none; }

/* ═══════════════════════ nube de etiquetas ══════════════════════════ */

.nube {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 1000px;
  margin: 32px auto 0;
  padding: 0 20px;
}
.nube span {
  padding: 9px 20px;
  border: 1px solid #D3E0E6;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-size: 15px;
  line-height: 1.2;
  color: var(--tinta-media);
  white-space: nowrap;
}
.nube span.area {
  border-color: #00A4D6;
  color: var(--cian-texto);
  background: var(--acento-lavado);
  font-weight: 600;
}

/* ═════════════════════════ cierre conceptual ════════════════════════ */

.cierre-idea { text-align: center; margin: 40px 0 0; padding: 0 20px 64px; }
.cierre-idea .eje {
  width: 1px;
  height: 38px;
  margin: 0 auto 22px;
  background: linear-gradient(to bottom, transparent, var(--acento));
  opacity: .6;
}
.cierre-idea p {
  /* `margin: 0 auto` y sin limite de ancho. La regla global `p{max-width:70ch}`
     dejaba esta caja pegada a la izquierda, con el texto centrado dentro de
     ella: parecia centrado y no lo estaba. */
  margin: 0 auto;
  max-width: none;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--tinta);
}
.cierre-idea small {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* El trabajo (el cargador del analisis) vive en trabajo.css. */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════ responsive ══════════════════════════════ */

@media (max-width: 1024px) {
  .hero { padding-top: 44px; }
  .campo { max-width: 90%; }
}

@media (max-width: 720px) {
  .hero { padding-top: 34px; }
  /* El antetitulo tiene que caber en una linea: partido en dos pierde el
     ritmo tipografico y parece un error, no una decision. */
  .antetitulo { font-size: 10px; letter-spacing: .2em; gap: 9px; margin-bottom: 20px; }
  .antetitulo i { width: 14px; }
  /* Y el titular tiene que romper por donde esta escrito, no a mitad de
     «buscadores de IA». */
  .hero h1 { font-size: 34px; }
  .hero .explicacion { font-size: 14.5px; margin-top: 18px; }

  .campo { max-width: 100%; margin-top: 26px; }
  .campo form { height: 66px; padding: 0 6px 0 18px; gap: 10px; }
  .campo .icono-enlace { width: 20px; height: 20px; }
  .campo input { font-size: 16px; }
  .analizar { width: 54px; height: 54px; }
  .analizar svg { width: 22px; height: 22px; }

  .nube { margin-top: 34px; gap: 8px; }
  .nube span { font-size: 14px; padding: 8px 16px; }

  .cierre-idea { margin-top: 68px; padding-bottom: 64px; }
  .cierre-idea small { letter-spacing: .34em; font-size: 11px; }
}