/* Hablemos (/hablemos/) — Hero with the office photo + the contact form in a dark liquid-glass panel, a direct-contact
   strip and Cobertura (shared map: globalvoip-cobertura.css, unchanged — only its container is adapted here).
   Rendered by docs/render-hablemos.cjs. Colours: #00010E base, #0095E5, #00B0D1, #CD0298; gradient #0688FF → #DA1FFF.
   The form's markup, validation and states are the site's (contact-layout.css / contact-page.css / contact-page.js);
   this file only restyles them inside .hb-panel. */
.hb-main{overflow-x:clip}
.hb-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Hero -------------------------------------------------------------------------------------------------------------- */
/* Starts behind the fixed header (negative margin = --header-height, measured by site-navigation.js) so the header glass
   shows the photo. Height comes from the content (copy + the whole form), never forced to the viewport. */
.hb-hero{position:relative;isolation:isolate;margin-top:calc(-1 * var(--header-height,74px));padding:calc(var(--header-height,74px) + clamp(40px,5vw,64px)) 0 clamp(72px,8vw,112px);overflow:hidden}
/* The photo, untouched (cover). Only dark overlays sit on top of it; the facade and the Globalvoip sign stay visible. */
.hb-hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:38% 62%;pointer-events:none;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
/* Overlays fade out at the bottom together with the photo, so the hero melts into the page base (no edge). */
.hb-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);background:
  linear-gradient(180deg,rgba(0,1,14,.55) 0,rgba(0,1,14,.12) 22%,rgba(0,1,14,0) 46%,rgba(0,1,14,.18) 72%,rgba(0,1,14,0) 100%),
  linear-gradient(90deg,rgba(0,1,14,.86) 0%,rgba(0,1,14,.62) 26%,rgba(0,1,14,.2) 44%,rgba(0,1,14,.08) 58%,rgba(0,1,14,.38) 80%,rgba(0,1,14,.6) 100%)}

.hb-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);column-gap:clamp(40px,6vw,96px);align-items:start}
.hb-hero-copy{max-width:520px;padding-top:clamp(12px,2.4vw,40px)}
.hb-hero .eyebrow{margin-bottom:24px;color:#00b0d1;letter-spacing:.18em}
.hb-hero h1{font-size:clamp(2.5rem,4vw,3.75rem);line-height:1.14;letter-spacing:-.045em;color:#f5f5fc}
.hb-hero h1 span{display:block;width:fit-content}
.hb-hero-lead{max-width:470px;margin-top:28px;color:#d0d9e8;font-size:1.02rem;line-height:1.85}

/* ---- Glass panel with the form --------------------------------------------------------------------------------------- */
.hb-panel{position:relative;padding:clamp(24px,2.6vw,34px);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:radial-gradient(ellipse 70% 40% at 0% 0%,rgba(0,149,229,.12),transparent 70%),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(205,2,152,.1),transparent 70%),linear-gradient(160deg,rgba(14,26,52,.7),rgba(4,9,26,.74));
  -webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 80px rgba(0,1,14,.55)}
.hb-panel .hb-required{margin:0 0 18px;color:#93a3bd;font-size:.72rem;line-height:1.5}
.hb-panel #project-form{padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.hb-panel #project-form::before{display:none}
.hb-panel .contact-fields{gap:18px 16px}
.hb-panel .contact-fields>div:has(>#contact-ciudad){grid-column:1/-1}
.hb-panel .contact-fields label{color:#e3e9f5}
.hb-panel .contact-fields :is(input,textarea){margin-top:8px;border-color:rgba(120,146,184,.3);border-radius:9px;background:rgba(2,6,18,.68)}
.hb-panel .contact-fields input{min-height:44px}
.hb-panel .contact-fields textarea{min-height:104px}
.hb-panel .contact-fields :is(input,textarea):hover{border-color:rgba(120,146,184,.48)}
.hb-panel .contact-fields :is(input,textarea):focus-visible{border-color:#0095e5;box-shadow:0 0 0 3px rgba(0,149,229,.18)}
.hb-panel .contact-interests legend{margin-bottom:12px;color:#e3e9f5;font-size:.75rem}
.hb-panel .interest-pills{gap:8px}
.hb-panel .interest-pill span{padding:8px 14px;border-color:rgba(120,146,184,.36);background:rgba(2,6,18,.45);color:#c7d3e5}
.hb-panel .interest-pill:hover span{border-color:rgba(0,176,209,.55)}
.hb-panel .interest-pill input:checked+span{border-color:#00b0d1;background:rgba(0,149,229,.14);color:#fff}
.hb-panel #project-form .contact-submit{margin-top:22px}
/* Honest, discreet state: delivery is not enabled yet (the text is the site's, unchanged). */
.hb-form-note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);color:#9eabc2;font-size:.75rem;line-height:1.65}
.hb-form-note svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:#00b0d1;stroke-width:1.6;stroke-linecap:round}

/* ---- Direct contact ---------------------------------------------------------------------------------------------------- */
.hb-direct{position:relative;padding:clamp(12px,2vw,24px) 0 clamp(24px,3vw,40px)}
.hb-direct-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);column-gap:clamp(32px,4vw,64px);align-items:center}
.hb-direct h2{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.35;letter-spacing:-.03em;color:#f5f5fc}
.hb-direct-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.hb-direct-card{display:flex;align-items:center;gap:18px;height:100%;padding:18px 22px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(6,14,32,.55);color:inherit;text-decoration:none;transition:border-color .25s ease,background-color .25s ease,transform .25s ease}
.hb-direct-card:hover{border-color:rgba(0,176,209,.4);background-color:rgba(8,22,46,.7)}
.hb-direct-card:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}
.hb-direct-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:rgba(0,149,229,.12);box-shadow:inset 0 0 0 1px rgba(0,176,209,.22)}
.hb-direct-icon svg{width:22px;height:22px;fill:none;stroke:#00b0d1;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hb-direct-text{display:grid;min-width:0}
.hb-direct-label{color:#8d98ae;font-size:.78rem;line-height:1.5}
.hb-direct-value{color:#f5f5fc;font-size:1.12rem;line-height:1.5;letter-spacing:-.01em;overflow-wrap:anywhere}

/* ---- Cobertura: the shared map, only its container adapted (it follows the direct strip, without a gap or edge) ------- */
.hb-main .gv-coverage{padding:clamp(56px,6vw,96px) 0 clamp(64px,7vw,104px)}
.hb-main .gv-coverage-head .eyebrow{color:#00b0d1;letter-spacing:.18em}

/* ---- Entrance (discreet; nothing is hidden with reduced motion or without the animation) ----------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hb-hero-photo{animation:hb-fade 1.1s ease both}
  .hb-hero .eyebrow{animation:hb-lift .8s cubic-bezier(.25,.8,.35,1) .1s backwards}
  .hb-hero h1 span{animation:hb-lift .9s cubic-bezier(.16,1,.3,1) .22s backwards}
  .hb-hero h1 span+span{animation-delay:.36s}
  .hb-hero-lead{animation:hb-lift .8s cubic-bezier(.25,.8,.35,1) .55s backwards}
  .hb-panel{animation:hb-lift .9s cubic-bezier(.25,.8,.35,1) .3s backwards}
  .hb-direct.is-ready :is(h2,li){opacity:0;translate:0 12px}
  .hb-direct.is-visible :is(h2,li){opacity:1;translate:0 0;transition:opacity .6s ease,translate .7s cubic-bezier(.22,.61,.36,1)}
  .hb-direct.is-visible li:nth-child(1){transition-delay:.1s}
  .hb-direct.is-visible li:nth-child(2){transition-delay:.2s}
}
@keyframes hb-lift{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes hb-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hb-direct-card,.hb-panel .interest-pill span{transition:none}
}

/* ---- Tablet and mobile: photo band → copy → form (one column) -------------------------------------------------------- */
@media (max-width:1024px){
  .hb-hero{padding-bottom:clamp(56px,8vw,88px)}
  .hb-hero-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,6vw,56px)}
  .hb-hero-copy{max-width:640px;padding-top:0}
  .hb-hero-lead{max-width:560px}
  /* Photo band on top (facade and sign visible, nothing over them), copy below it on the dark base, then the form. */
  .hb-hero{--hb-band:min(54vw,440px);padding-top:calc(var(--header-height,74px) + var(--hb-band))}
  .hb-hero-photo{height:calc(var(--header-height,74px) + var(--hb-band) + 120px);object-position:42% 58%;
    -webkit-mask-image:linear-gradient(#000 64%,transparent);mask-image:linear-gradient(#000 64%,transparent)}
  .hb-hero::before{background:linear-gradient(180deg,rgba(0,1,14,.5) 0,rgba(0,1,14,.08) calc(var(--header-height,74px) + 20px),rgba(0,1,14,0) calc(var(--header-height,74px) + var(--hb-band) * .6),rgba(0,1,14,.8) calc(var(--header-height,74px) + var(--hb-band) + 40px),#00010e calc(var(--header-height,74px) + var(--hb-band) + 120px))}
  .hb-panel{max-width:720px}
  .hb-direct-grid{grid-template-columns:minmax(0,1fr);row-gap:22px}
}
/* ---- Mobile: photo band on top (facade and sign visible), copy below it, then the form ----------------------------- */
@media (max-width:700px){
  .hb-hero{--hb-band:min(62vw,300px);padding-bottom:56px}
  .hb-hero .eyebrow{margin-bottom:16px}
  .hb-hero h1{font-size:clamp(1.9rem,8.4vw,2.5rem);letter-spacing:-.04em}
  .hb-hero h1 span{display:inline;width:auto}
  .hb-hero-lead{margin-top:20px;font-size:.96rem;line-height:1.8}
  .hb-panel{padding:22px 18px;border-radius:18px}
  .hb-panel .contact-fields{grid-template-columns:1fr}
  .hb-direct-list{grid-template-columns:minmax(0,1fr);gap:12px}
  .hb-direct-card{padding:16px 18px;gap:16px}
  .hb-direct-icon{width:46px;height:46px}
  .hb-direct-value{font-size:1.04rem}
}