/* Real 72: diseño propio sobre la base (va después de marca.css).
   Granate #83302C y oro #DDB427 de su logo (el sol sobre la sierra). Letra: Urbanist fina, como las webs de
   referencia de javi (abeto, dhoce): titulares grandes y ligeros, etiquetas pequeñas con un punto de color.
   Paso 1 (22-10): la portada con el buscador escrito como una frase. */
:root {
  --r72-granate: #83302C;
  --r72-oro: #DDB427;
  --r72-oro-claro: #F0D47A;
}

/* ---------- Portada ---------- */
[data-personalidad] .hero__shade {
  background:
    radial-gradient(120% 75% at 0% 100%, rgba(22, 9, 7, .78) 0%, rgba(22, 9, 7, .5) 45%, rgba(22, 9, 7, 0) 80%),
    linear-gradient(180deg, rgba(22, 9, 7, .45) 0%, rgba(22, 9, 7, 0) 20%, rgba(22, 9, 7, 0) 30%,
      rgba(22, 9, 7, .45) 50%, rgba(22, 9, 7, .78) 70%, rgba(22, 9, 7, .9) 100%);
}
.hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font: 500 .72rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--r72-oro); flex: none;
}
[data-personalidad] .hero__title {
  max-width: 18em; margin-top: 18px;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height: 1.25; letter-spacing: 0;
  color: rgba(255, 255, 255, .9); text-shadow: 0 1px 18px rgba(0, 0, 0, .4);
}

/* El buscador: una frase grande, ligera, con las palabras que se eligen en oro */
.busca {
  position: relative; margin-top: clamp(10px, 1.4vw, 18px);
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 1.15rem + 3.6vw, 4.6rem); line-height: 1.12; letter-spacing: -.025em;
  animation: hero-sube 2.2s var(--ease-out) 1.2s both;
}
html:not(.js) .busca { animation: none; }
.busca__frase { max-width: 19em; text-wrap: pretty; text-shadow: 0 0 40px rgba(0, 0, 0, .25); }
.busca select,
.busca__medidor {
  font: inherit; letter-spacing: inherit; padding: 0 .62em 0 0;
}
.busca select {
  appearance: none; -webkit-appearance: none;
  max-width: 100%; margin: 0; border: 0; border-radius: 0; cursor: pointer;
  color: var(--r72-oro);
  background:
    linear-gradient(currentColor, currentColor) 0 calc(100% - .06em) / calc(100% - .62em) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23DDB427' stroke-width='1.6'/%3E%3C/svg%3E") right .08em center / .32em auto no-repeat;
  transition: color .2s var(--ease-out);
}
.busca select:hover { color: var(--r72-oro-claro); }
.busca select:focus-visible { outline: 2px solid var(--r72-oro); outline-offset: 4px; }
.busca option { color: #1b1414; background: #fff; font-size: 1rem; letter-spacing: 0; }
.busca__medidor { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; left: 0; top: 0; }
.busca__precio[hidden] { display: none; }

.busca__ir {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; margin-top: clamp(22px, 2.4vw, 34px);
  padding: 0 10px 0 26px; border-radius: 999px;
  background: var(--r72-oro); color: #2a0f0d;
  font: 600 1rem/1 var(--f-texto); letter-spacing: 0;
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.busca__ir:hover { background: var(--r72-oro-claro); }
.busca__ir:active { transform: scale(.98); }
.busca__ir .pill__arrow {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--r72-granate); color: #fff;
}
.busca__ir .pill__arrow::before { border-color: #fff; }
.busca__ir:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 640px) {
  .busca { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.4rem); line-height: 1.16; }
  .busca__ir { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .busca { animation: none; } }