/* ===== 10 · Contacto — A «Botón sobre vídeo» (única desde la ronda 8; antes H; ronda 11: + formulario directo y botón de WhatsApp). También se usa en los hubs. ===== */

.contact-ok{color:var(--u-blue);font-weight:600}

.contact-a{position:relative;background:var(--u-night);color:var(--u-paper);overflow:hidden}
.contact-a .sx-meta{color:var(--u-muted)}
.contact-a .sx-kicker{color:var(--u-blue)}

/* ---------- A · Botón sobre vídeo (antes H) ---------- */
.contact-a{min-height:min(100svh,980px);display:flex}
.contact-a__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.contact-a__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,29,.82) 0%,rgba(16,16,29,.35) 38%,rgba(16,16,29,.45) 62%,rgba(16,16,29,.92) 100%)}
/* Ronda 11: titular + WhatsApp a la izquierda, formulario directo a la derecha, vías abajo */
.contact-a__in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);grid-template-areas:"head form" "core form" "ways ways";grid-template-rows:auto 1fr auto;column-gap:clamp(32px,5vw,96px);row-gap:clamp(28px,3.4vw,52px);padding-block:clamp(96px,9vw,130px) clamp(84px,7vw,104px)}
.contact-a__head{grid-area:head;align-self:end}
.contact-a__ways{grid-area:ways}
.contact-a__title{font-family:var(--f-head);font-weight:900;font-size:clamp(2.8rem,7vw,7.4rem);line-height:.9;letter-spacing:-.06em;max-width:11ch;margin-top:.9rem;text-wrap:balance}
.contact-a__core{grid-area:core;position:relative;display:grid;place-items:center;justify-self:start;align-self:start;width:clamp(200px,17vw,270px);aspect-ratio:1}
.contact-a__ring{position:absolute;inset:0;width:100%;height:100%;animation:contactSpin 22s linear infinite;pointer-events:none}
.contact-a__ring text{font-family:var(--f-mono);font-size:11.4px;letter-spacing:.32em;text-transform:uppercase;fill:var(--u-paper)}
@keyframes contactSpin{to{transform:rotate(360deg)}}
.contact-a__btn{position:relative;display:grid;place-items:center;align-content:center;gap:.6rem;width:66%;aspect-ratio:1;border-radius:50%;background:var(--u-blue);color:var(--u-night);text-align:center;font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.05;letter-spacing:-.035em;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);transition:background .4s var(--ease);will-change:transform}
.contact-a__btn:hover,.contact-a__btn:focus-visible{background:var(--u-paper)}
.contact-a__btn svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .45s var(--ease)}
.contact-a__btn:hover svg{transform:translate(5px,-5px)}
.contact-a__btn>*{pointer-events:none}
.contact-a__btn svg.contact-a__wa{width:34px;height:34px;stroke-width:1.9}
.contact-a__btn:has(.contact-a__wa){width:72%;gap:.45rem;font-size:clamp(.95rem,1.1vw,1.15rem);letter-spacing:-.02em}
.contact-a__btn:hover svg.contact-a__wa{transform:none}
.contact-a__addr{display:grid;gap:.45rem;padding:1.3rem 0 0 1.2rem;border-left:1px solid rgba(255,255,255,.22)}
.contact-a__addr b{font-family:var(--f-head);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:-.025em}

/* Formulario directo (vidrio oscuro sobre el vídeo) */
.contact-a__form{grid-area:form;align-self:center;display:grid;gap:1.1rem;padding:clamp(22px,2.4vw,36px);border:1px solid rgba(255,255,255,.16);border-radius:var(--sx-r,10px);background:rgba(16,16,29,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.contact-a__ft{font-family:var(--f-head);font-weight:800;font-size:clamp(1.4rem,1.9vw,1.9rem);letter-spacing:-.035em;line-height:1}
.contact-a__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.contact-a__grid label{display:grid;gap:.35rem;min-width:0}
.contact-a__full{grid-column:1/-1}
.contact-a__grid span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#C9D1DE}
.contact-a__grid input,.contact-a__grid select,.contact-a__grid textarea{width:100%;min-height:46px;padding:.7rem .85rem;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.06);color:var(--u-paper);font:inherit;font-size:16px;transition:border-color .25s,background .25s}
.contact-a__grid textarea{resize:vertical;min-height:92px}
.contact-a__grid select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#C9D1DE 50%),linear-gradient(135deg,#C9D1DE 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.contact-a__grid select option{color:#10101D}
.contact-a__grid ::placeholder{color:rgba(201,209,222,.55)}
.contact-a__grid input:focus,.contact-a__grid select:focus,.contact-a__grid textarea:focus{outline:none;border-color:var(--u-blue);background:rgba(255,255,255,.1)}
.contact-a__grid :is(input,select,textarea)[aria-invalid="true"]{border-color:#FF8A8A}
.contact-a__check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:#C9D1DE;cursor:pointer}
.contact-a__check input{width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--u-blue);flex:none}
.contact-a__check a{color:var(--u-paper);text-decoration:underline;text-underline-offset:3px}
.contact-a__send{display:flex;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap}
.contact-a__note{font-size:.85rem;color:#C9D1DE}
.contact-a__ok{color:var(--u-blue);font-weight:600}
.contact-a__ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.22)}
.contact-a__ways a{display:grid;gap:.45rem;padding:1.3rem 1.2rem 0 0;min-height:44px}
.contact-a__ways li+li a{padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.22)}
.contact-a__ways b{font-family:var(--f-head);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:-.025em;transition:color .3s}
.contact-a__ways a:hover b,.contact-a__ways a:focus-visible b{color:var(--u-blue)}
@media (max-width:1100px){
  .contact-a__in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .contact-a__title{font-size:clamp(2.6rem,6vw,5rem)}
}
@media (max-width:860px){
  .contact-a__in{grid-template-columns:1fr;grid-template-areas:"head" "form" "core" "ways";grid-template-rows:auto}
  .contact-a__core{justify-self:center;margin:8px 0;width:min(70vw,280px)}
  .contact-a__btn:has(.contact-a__wa){font-size:1.1rem}
}
@media (max-width:760px){
  .contact-a__ways{grid-template-columns:1fr}
  .contact-a__ways a,.contact-a__ways li+li a,.contact-a__addr{padding:1rem 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.18)}
}
@media (max-width:520px){
  .contact-a__grid{grid-template-columns:1fr}
  .contact-a__send .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.contact-a__ring{animation:none}}