/* =====================================================================
   PÁGINA INICIAL — A SECÇÃO DE DOMÍNIOS (dono, 19/09/2026: «melhore toda
   esta secção»). Igual nas 4 marcas; o HTML está nos 16 index.php.

   Antes: o fundo com o globo do tema, título fino, «www.» numa caixa
   cinzenta, campo quadrado e o botão azul colado, e uma ligação solta.
   Agora: o mesmo fundo do globo, título como o das
   outras secções (com o «//»), a caixa de pesquisa num cartão branco com o
   ícone da IA, a dica que abre a IA e três caminhos (registar, transferir,
   gerador com IA).

   O <form> TEM de manter a classe .domain-registration-main-input-text
   (ver dominio-resultado.css) — é por ela que o dominio-ia.js a encontra.
   ===================================================================== */
.home-domain-registration.hd-sec{
  --hd-carvao:#1f2835; --hd-vermelho:#d10303; --hd-vivo:#f00843; --hd-azul:#00acc8; --hd-azul-e:#0095ad;
  --hd-cinza:#6b737c; --hd-linha:#e2e6ea;
  position:relative; overflow:hidden;
  /* a imagem do globo de sempre (dono, 19/09/2026: «deve ter aquela imagem do
     fundo que tinha») — a cópia de cada marca, a mesma que o lw_main.css ia
     buscar à mozout.com */
  background:#e9ebee url(../images/home/home.png) center top no-repeat;
  padding:42px 0 38px; margin-bottom:60px; font-family:Ubuntu,arial,sans-serif;
}
.hd-sec .inner{max-width:880px;margin:0 auto;padding:0 20px;text-align:center}

/* o título como o das outras secções */
.hd-sec .domain-registration-title{margin:0;font:700 32px/1.3 Ubuntu,arial,sans-serif;color:var(--hd-carvao);
  text-wrap:balance;letter-spacing:-.2px}
.hd-sec .domain-registration-title strong{font-weight:700;color:var(--hd-vermelho)}
.hd-sec .hd-forma{display:block;margin:10px auto 0;width:auto;height:20px}
.hd-sec .domain-registration-subtitle{margin:10px auto 0;padding:0;max-width:700px;text-wrap:pretty;
  font:400 17px/1.55 Ubuntu,arial,sans-serif;color:var(--hd-cinza)}

/* ---- a caixa: um cartão branco, o botão dentro ---- */
.hd-sec .domain-registration-main-input{position:relative;left:auto;width:auto;max-width:760px;height:auto;
  margin:22px auto 0}
.hd-sec .domain-registration-main-input-text{display:flex;align-items:center;gap:6px;height:auto;line-height:normal;
  background:#fff;border:1px solid var(--hd-linha);border-radius:14px;padding:8px;
  box-shadow:0 16px 40px -12px rgba(31,40,53,.22);transition:border-color .18s,box-shadow .18s;
  font:400 17px/1.2 Ubuntu,arial,sans-serif}
.hd-sec .domain-registration-main-input-text:focus-within{border-color:var(--hd-azul);
  box-shadow:0 16px 40px -12px rgba(31,40,53,.22),0 0 0 4px rgba(0,172,200,.16)}
/* o dominio-ia.css estica os filhos (align-items:stretch) para o ícone da
   caixa antiga; aqui ficam ao centro, senão o «www.» subia ao topo */
.hd-sec form.domain-registration-main-input-text.dia-mini-cx{align-items:center}
.hd-sec .domain-registration-main-input-text > span:first-child{float:none;flex:0 0 auto;background:none;
  padding:0 2px 0 14px;line-height:normal;color:#8b939c;font:500 17px/1 Ubuntu,arial,sans-serif}
.hd-sec .domain-registration-main-input-text > input{float:none;flex:1 1 auto;min-width:0;width:auto;height:52px;
  margin:0;border:0;padding:0 56px 0 2px;background:transparent;color:var(--hd-carvao);
  font:400 17px/52px Ubuntu,arial,sans-serif;outline:0;box-shadow:none}
.hd-sec .domain-registration-main-input-text > input::placeholder{color:#9aa1a9}
.hd-sec .domain-registration-main-input-text .domain-registration-submit{float:none;flex:0 0 auto;height:52px;margin:0;
  padding:0 30px;border:0;border-radius:10px;background:var(--hd-azul);color:#fff;cursor:pointer;
  font:700 15px/52px Ubuntu,arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  transition:background .15s,transform .15s}
.hd-sec .domain-registration-main-input-text .domain-registration-submit:hover{background:var(--hd-azul-e)}
.hd-sec .domain-registration-main-input-text .domain-registration-submit:active{transform:scale(.98)}
.hd-sec .domain-registration-main-input-text .domain-registration-submit:focus-visible{outline:2px solid var(--hd-carvao);outline-offset:2px}

/* ---- a dica que abre a IA ---- */
.hd-sec .hd-ia{display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:5px 12px;border:0;
  border-radius:999px;background:transparent;color:var(--hd-carvao);cursor:pointer;
  font:400 15px/1.4 Ubuntu,arial,sans-serif;transition:background .15s}
.hd-sec .hd-ia svg{flex:0 0 auto;width:18px;height:18px;color:var(--hd-vermelho)}
.hd-sec .hd-ia b{font-weight:500;color:var(--hd-vermelho)}
.hd-sec .hd-ia:hover{background:rgba(209,3,3,.06)}
.hd-sec .hd-ia:hover b{text-decoration:underline}
.hd-sec .hd-ia:focus-visible{outline:2px solid var(--hd-vermelho);outline-offset:2px}
/* com a IA aberta a dica já não faz falta */
.hd-sec .domain-registration-main-input:has(.dia-mini-on) + .hd-ia{visibility:hidden}

/* ---- os três caminhos ---- */
.hd-sec .hd-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.hd-sec .hd-links a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--hd-linha);
  border-radius:999px;background:#fff;color:var(--hd-carvao);text-decoration:none;
  font:500 14.5px/1 Ubuntu,arial,sans-serif;transition:border-color .15s,color .15s,box-shadow .15s}
.hd-sec .hd-links a svg{width:16px;height:16px;color:var(--hd-cinza);transition:color .15s,transform .15s}
.hd-sec .hd-links a:hover{border-color:var(--hd-vermelho);color:var(--hd-vermelho);box-shadow:0 6px 16px -8px rgba(209,3,3,.35)}
.hd-sec .hd-links a:hover svg{color:var(--hd-vermelho);transform:translateX(2px)}
.hd-sec .hd-links a:focus-visible{outline:2px solid var(--hd-vermelho);outline-offset:2px}

/* ---- com a IA aberta: o cartão é o da IA (dominio-ia.css) ---- */
.hd-sec .domain-registration-main-input-text.dia-mini-on{border-radius:14px}

@media (prefers-reduced-motion: reduce){
  .hd-sec .hd-links a svg,.hd-sec .domain-registration-main-input-text .domain-registration-submit{transition:none}
}

/* ---- telemóvel ---- */
@media (max-width: 767px){
  .home-domain-registration.hd-sec{padding:32px 0 30px;margin-bottom:40px;background-size:auto 100%}
  .hd-sec .inner{padding:0 16px}
  .hd-sec .domain-registration-title{font-size:25px}
  .hd-sec .domain-registration-subtitle{font-size:15.5px}
  .hd-sec .domain-registration-main-input{margin-top:18px}
  /* uma linha para o nome (com o ícone da IA) e o botão por baixo, a toda a largura */
  .hd-sec .domain-registration-main-input-text{display:flex;flex-wrap:wrap;padding:6px}
  .hd-sec .domain-registration-main-input-text > span:first-child{display:none}
  .hd-sec .domain-registration-main-input-text > input{display:block;flex:1 1 0;width:auto;margin:0;height:50px;
    padding:0 50px 0 12px;line-height:50px;font-size:16px}
  .hd-sec .domain-registration-main-input-text .domain-registration-submit{display:block;flex:1 1 100%;width:100%;
    margin:6px 0 0;height:48px;line-height:48px}
  .hd-sec .hd-ia{font-size:14px}
  .hd-sec .hd-links{gap:8px}
  .hd-sec .hd-links a{padding:9px 14px;font-size:13.5px}
}

/* ---- o passar do rato (dono, 19/09/2026: «o hover deve ter animação») ----
   o cartão sobe um pouco e a sombra cresce; o botão escurece e sobe com ele */
.hd-sec .domain-registration-main-input-text{transition:border-color .2s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.hd-sec .domain-registration-main-input-text:not(.dia-mini-on):hover{border-color:#c9d2da;transform:translateY(-2px);
  box-shadow:0 22px 46px -14px rgba(31,40,53,.28)}
.hd-sec .domain-registration-main-input-text .domain-registration-submit{transition:background .2s,transform .2s,box-shadow .2s}
.hd-sec .domain-registration-main-input-text .domain-registration-submit:hover{transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(0,149,173,.7)}
@media (prefers-reduced-motion: reduce){
  .hd-sec .domain-registration-main-input-text:not(.dia-mini-on):hover{transform:none}
}