/* Hosteate · Dominios v4. Encima de /estilo-v4.css: sólo lo propio de esta página
   (buscador del hero, anillo 3D de extensiones, tabla de precios y el calendario
   del aviso de renovación). Blanco y negro estricto, como el resto. */

/* ── Hero: render volteado para que la esfera quede a la derecha ── */
.dm-hero .hero-ft{left:38%;width:62%;object-position:50% 45%;-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
.dm-hero::before{background:linear-gradient(90deg,var(--fondo) 30%,color-mix(in srgb,var(--fondo) 40%,transparent) 60%,transparent 85%)}
.dm-hero .env{position:relative;z-index:1}
/* titular del hero: mismo tamaño que el resto (estilo-v4.css) */

/* Anillo de extensiones girando alrededor de la esfera */
.dm-anillo{position:absolute;z-index:-1;left:72%;top:36%;width:clamp(300px,30vw,480px);aspect-ratio:1;transform:translate(-50%,-50%);perspective:1100px;pointer-events:none}
.dm-anillo .giro{position:absolute;inset:0;transform-style:preserve-3d;animation:dm-gira 26s linear infinite}
.dm-anillo span{position:absolute;left:50%;top:50%;font:500 clamp(14px,1.3vw,19px)/1 var(--mono);letter-spacing:.06em;color:var(--tinta);padding:9px 12px;border:1px solid var(--linea-2);background:color-mix(in srgb,var(--fondo) 55%,transparent);backface-visibility:hidden;-webkit-backface-visibility:hidden;white-space:nowrap;
  transform:translate(-50%,-50%) rotateY(calc(var(--k) * 45deg)) translateZ(clamp(140px,15vw,230px))}
@keyframes dm-gira{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(-360deg)}}

/* Buscador grande */
.dm-busca{margin-top:clamp(32px,5vh,52px);display:flex;align-items:center;max-width:860px;height:76px;border:1px solid var(--linea-2);background:color-mix(in srgb,var(--fondo) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:0 8px 0 0;position:relative;transition:border-color .25s}
.dm-busca:focus-within{border-color:var(--tinta)}
.dm-busca::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:28%;background:linear-gradient(90deg,transparent,var(--tinta),transparent);animation:barrido 5s linear infinite;pointer-events:none}
.dm-busca .pre{flex:none;padding:0 4px 0 24px;font:500 15px/1 var(--mono);color:var(--tinta-3);letter-spacing:.04em}
.dm-busca input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--tinta);font:500 clamp(20px,2.2vw,28px)/1 var(--disp);letter-spacing:-.02em;padding:0 12px 0 2px;outline:none}
.dm-busca input::placeholder{color:var(--tinta-3);opacity:1}
.dm-busca .btn{height:58px;font-size:16px;padding:0 10px 0 22px}
.dm-sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:860px}
.dm-sug .dm-ext{display:inline-flex;align-items:baseline;gap:10px;height:36px;padding:0 13px;border:1px solid var(--linea-2);background:color-mix(in srgb,var(--fondo) 60%,transparent);font:500 13.5px/34px var(--mono);color:var(--tinta);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dm-sug .dm-ext i{font-style:normal;font-size:11.5px;color:var(--tinta-3)}
.dm-sug .dm-ext:hover,.dm-sug .dm-ext[aria-pressed="true"]{background:var(--inv);color:var(--inv-t);border-color:var(--inv)}
.dm-sug .dm-ext:hover i,.dm-sug .dm-ext[aria-pressed="true"] i{color:inherit;opacity:.6}

/* ── Tabla de precios (rejilla de 1 px) ── */
.dm-tabla{border:1px solid var(--linea);display:grid;gap:1px;background:var(--linea)}
.dm-tabla .fila{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:24px;background:var(--fondo);padding:20px 26px;position:relative;transition:background .25s}
.dm-tabla .fila.cabeza{padding-top:14px;padding-bottom:14px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.dm-tabla .fila:not(.cabeza){opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s,background .25s;transition-delay:var(--r),var(--r),0s}
.dm-tabla.dentro .fila:not(.cabeza){opacity:1;transform:none}
.dm-tabla .fila:not(.cabeza):hover{background:var(--fondo-2)}
.dm-tabla .fila:not(.cabeza)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tinta);transform:scaleY(0);transition:transform .35s}
.dm-tabla .fila:not(.cabeza):hover::before{transform:scaleY(1)}
.dm-tabla .ext{display:flex;align-items:baseline;gap:18px;font:500 clamp(30px,3.4vw,48px)/1 var(--disp);letter-spacing:-.04em}
.dm-tabla .ext .n{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--tinta-3)}
.dm-tabla .num{font:500 clamp(20px,1.9vw,26px)/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dm-tabla .num small{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--tinta-3);margin-left:8px}
.dm-tabla .ir .btn{white-space:nowrap}

/* ── Calendario del aviso de renovación ── */
.dm-aviso{justify-content:space-between}
.dm-aviso .cal{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);margin:28px 28px 0}
.dm-aviso .cal i{aspect-ratio:1;background:var(--fondo);position:relative}
.dm-aviso .cal i::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--linea-2)}
.dm-aviso .cal i.av{background:var(--inv)}
.dm-aviso .cal i.av::after{background:var(--inv-t);width:8px;height:8px;margin:-4px 0 0 -4px;animation:latido 1.6s infinite}
.dm-aviso .cal i.fin::after{background:var(--tinta-3)}
.dm-aviso .cal i:last-child{outline:1px solid var(--tinta);outline-offset:-1px}

/* Cierre: la llave a la derecha */
.dm-cierre{grid-template-columns:minmax(0,1fr);min-height:480px}
.dm-cierre .ft img{object-position:70% 50%}
.dm-cierre .tx{max-width:640px}

/* ── Responsive ── */
@media (max-width:1100px){
  .dm-anillo{opacity:.5;left:78%}
}
@media (max-width:860px){
  .dm-anillo{display:none}
  .dm-hero .hero-ft{left:0;width:100%;-webkit-mask:none;mask:none;object-position:50% 35%;opacity:.5}
  .dm-tabla .fila{grid-template-columns:minmax(0,1fr) auto auto;gap:14px 18px}
  .dm-tabla .fila>:nth-child(3){display:none}
  .dm-tabla .ir{grid-column:1/-1}
  .dm-tabla .fila.cabeza .ir{display:none}
  .dm-tabla .ir .btn{width:100%;justify-content:space-between}
  .dm-cierre::before{background:linear-gradient(180deg,var(--fondo) 30%,color-mix(in srgb,var(--fondo) 40%,transparent))}
}
@media (max-width:560px){
  .dm-busca{height:62px;padding-right:6px}
  .dm-busca .pre{display:none}
  .dm-busca input{padding-left:16px;font-size:19px}
  .dm-busca .btn{height:48px;padding:0 6px 0 14px;gap:10px;font-size:15px}
  .dm-sug .dm-ext{height:32px;padding:0 10px;font-size:12.5px;line-height:30px}
  .dm-tabla .fila{padding:18px;grid-template-columns:minmax(0,1fr) auto}
  .dm-tabla .fila.cabeza>:nth-child(2){text-align:right}
  .dm-tabla .ext{gap:12px}
  .dm-aviso .cal{margin:22px 22px 0}
}
@media (prefers-reduced-motion:reduce){
  .dm-anillo .giro{animation:none;transform:rotateX(-14deg)}
  .dm-tabla .fila:not(.cabeza){opacity:1;transform:none}
}
@media (max-width:560px){.dm-largo{display:none}}