/* styles.css */
:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --panel2:#0d1628;
  --text:#e8eefc;
  --muted:#b9c6e8;
  --border:rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius:18px;

  --acc:#6ee7ff;
  --acc2:#9b8cff;
  --ok:#34d399;
  --header-offset: 92px;

  /* Vertical rhythm tokens */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 22px;
  --space-5: 30px;
  --space-6: 40px;

  /* Type scale (fluid, consistent across pages) */
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-h1: clamp(34px, 4.2vw, 48px);
  --fs-h2: clamp(22px, 2.4vw, 28px);
  --fs-h3: clamp(18px, 1.8vw, 22px);
  --fs-h4: clamp(15px, 1.4vw, 18px);
  --lh-body: 1.55;
  --lh-head: 1.20;
  --lh-tight: 1.35;
}

html{scroll-behavior:smooth; scroll-padding-top: var(--header-offset);}
*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(110,231,255,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 20%, rgba(155,140,255,.16), transparent 55%),
    radial-gradient(900px 700px at 50% 90%, rgba(52,211,153,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:var(--lh-body);
}

a{color:inherit}
.container{width:min(1180px, 92%); margin:0 auto;}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.78);
  border-bottom: 1px solid var(--border);
}

.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  gap:14px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  min-width: 260px;
  flex: 0 0 auto;
}

.brand img{
  height:80px;
  width:auto;
  max-width: 100%;
  display:block;
  border-radius:0;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand strong{display:block; font-size:14px; letter-spacing:.2px}
.brand span{display:block; font-size:12px; color:var(--muted); margin-top:1px}

.nav{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
}
.nav a:hover{background: rgba(255,255,255,.06); color:var(--text);}

/* Mobile menu */
.menu-btn{
  display:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.mobile-menu{
  display:none;
  border-top:1px solid var(--border);
  background: rgba(11,18,32,.92);
}
.mobile-menu.open{display:block;}
.mobile-menu .container{padding:12px 0 16px;}
.mobile-links{display:flex; flex-direction:column; gap:8px;}
.mobile-links a{
  text-decoration:none;
  color: var(--muted);
  padding:10px 10px;
  border-radius:12px;
}
.mobile-links a:hover{background: rgba(255,255,255,.06); color: var(--text);}
.mobile-actions{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:10px;}

@media (max-width: 920px){
  .menu-btn{display:inline-flex; align-items:center; gap:8px;}
  .right-actions{gap:8px;}
}

/* Small phones: keep header clean (move primary CTA into the mobile menu) */
@media (max-width: 520px){
  .topbar-inner{padding:12px 0;}
  .brand img{height:44px;}
  .right-actions{gap:8px;}
  .right-actions > .btn-primary{display:none;}
  .menu-btn{padding:9px 10px; border-radius:12px;}
  .lang-switch button{padding:8px 9px;}

  /* Policy/mobile header polish: prevent crowding with long “Back to site” text */
  .topbar-inner{
    gap:10px;
  }

  .right-actions{
    flex-wrap:nowrap;
    justify-content:flex-end;
  }

  .right-actions .btn{
    padding:9px 10px;
    font-size:12px;
    border-radius:12px;
    max-width: 56vw; /* keeps the back button from taking the whole row */
    overflow:hidden;
    text-overflow: ellipsis;
  }

  .lang-switch{
    flex:0 0 auto;
  }

  .lang-switch button{
    padding:8px 9px;
    min-width: 40px;
  }
}

.btn{
  appearance:none; border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);}
.btn-primary{
  border-color: rgba(110,231,255,.35);
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(155,140,255,.16));
}
.btn-primary:hover{border-color: rgba(110,231,255,.55);}
.btn-ghost{background: transparent;}

.right-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* Language switch (supports <button> and <a>) */
.lang-switch{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  overflow:hidden;
}

.lang-switch button,
.lang-switch a{
  border:0;
  background: transparent;
  color: var(--muted);
  padding:8px 12px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  line-height: 1;
  min-width: 44px;
  text-align:center;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* divider between segments */
.lang-switch button + button,
.lang-switch a + a{
  border-left:1px solid rgba(255,255,255,.10);
}

.lang-switch button.active,
.lang-switch a.active{
  color: var(--text);
  background: rgba(255,255,255,.12);
}

.lang-switch button:focus-visible,
.lang-switch a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(110,231,255,.10);
}

.hero{padding:var(--space-5) 0 var(--space-4);}
@media (max-width: 520px){
  .hero{padding-top:var(--space-4);}
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width: 920px){
  .hero-grid{grid-template-columns: 1fr;}
  .nav{display:none;}
  .brand{min-width: unset;}
}

.pillrow{display:flex; gap:10px; row-gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.pill{
  font-size:11px;
  color:var(--muted);
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding:6px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.pill b{color:var(--text); font-weight:800}

/* Global headings: consistent size + rhythm */
h1{
  font-size: var(--fs-h1);
  line-height: 1.05;
  margin: var(--space-2) 0 var(--space-3);
  letter-spacing: -.7px;
}

h2, h3, h4{
  line-height: var(--lh-head);
  letter-spacing: -.2px;
  margin-top: var(--space-5);
}
h2{ font-size: var(--fs-h2); margin-bottom: var(--space-3); }
h3{ font-size: var(--fs-h3); margin-bottom: var(--space-2); }
h4{ font-size: var(--fs-h4); margin-bottom: var(--space-1); }

/* Avoid huge gaps when headings are the first thing in a block */
.card-inner > h2:first-child,
.card-inner > h3:first-child,
.card-inner > h4:first-child,
section > .container > h2:first-child,
section > .container > h3:first-child,
section > .container > h4:first-child{
  margin-top: 0;
}

/* Body text rhythm */
p{ margin: 0 0 var(--space-3); }
ul, ol{ margin: 0 0 var(--space-3); padding-left: 18px; }
li{ margin: 8px 0; }
.muted{ color: var(--muted); }

.lead{
  font-size: var(--fs-body);
  color:var(--muted);
  margin:0 0 var(--space-4);
  max-width: 62ch;
}

.checklist{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 18px;
  margin:var(--space-4) 0 var(--space-4);
  padding:0;
  list-style:none;
  color:var(--muted);
  font-size:13px;
}
@media (max-width: 520px){ .checklist{grid-template-columns: 1fr;} }
.checklist li{display:flex; gap:10px; align-items:flex-start;}
.dot{
  width:20px; height:20px; border-radius:7px;
  background: rgba(52,211,153,.14);
  border:1px solid rgba(52,211,153,.25);
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1px;
  flex:0 0 auto;
}
.dot svg{width:12px; height:12px; fill: var(--ok);}

.cta-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.smallnote{color:var(--muted); font-size:var(--fs-small); margin-top:10px;}
/* Use consistent vertical rhythm for the Tip note under the badge */
.smallnote--tight{
  margin-top:0;
  margin-bottom:0;
}

/* Simple text links (to reduce button clutter) */
.textlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(232,238,252,.92);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  padding:8px 2px;
  border-radius:10px;
}
.textlink:hover{ text-decoration: underline; }
.linkrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color: var(--muted); }
.linkrow .sep{ color: var(--muted); }

.card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;

  /* Ensure consistent body text sizing inside cards */
  font-size: 13px;
  line-height: var(--lh-body);
}
.card-inner{padding:22px;}
.card-inner > :first-child{margin-top:0;}
.card-inner > :last-child{margin-bottom:0;}
.card h3{margin:0 0 var(--space-1); font-size:var(--fs-h3); line-height: var(--lh-head);}
.card p{margin:0; color:var(--muted); font-size: inherit; line-height: inherit;}
.card li{ color: var(--muted); font-size: inherit; line-height: inherit; }

.mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media (max-width: 520px){ .mini-grid{grid-template-columns: 1fr;} }

.mini{
  border:1px solid var(--border);
  background: rgba(11,18,32,.35);
  border-radius: 16px;
  padding:12px;
}
.mini .k{font-size:12px; color:var(--muted); margin-bottom:6px;}
.mini .v{font-size:14px; font-weight:800;}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px;
  color:var(--muted);
  margin-top:var(--space-2);
  margin-bottom:var(--space-3); /* spacing under badge */
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.badge .spark{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 0 0 4px rgba(110,231,255,.12);
}

section{padding:var(--space-6) 0;}
@media (max-width: 520px){
  section{padding:var(--space-5) 0;}
}

/* Section bands (Flex-IT style rhythm) */
.band{position:relative;}
.band::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  pointer-events:none;
  opacity:.9;
}
.band > .container{position:relative; z-index:1;}

.band.alt::before{
  background: linear-gradient(180deg, rgba(11,18,32,.0), rgba(255,255,255,.03));
  opacity:.75;
}

/* Fix anchor navigation with sticky header (Servicios / Cómo trabajamos / Contacto)
   Ensures section headings land right under the topbar when clicking nav links. */
section[id], #top{ scroll-margin-top: var(--header-offset); }

@media (max-width: 920px){
  :root{ --header-offset: 84px; }
}
@media (max-width: 520px){
  :root{ --header-offset: 74px; }
}

.section-title{margin:0 0 var(--space-2); font-size:var(--fs-h2); letter-spacing:-.3px; line-height: var(--lh-head);}
.section-sub{
  margin:0 0 var(--space-4);
  color:var(--muted);
  max-width: 75ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.grid-3{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(330px, 1fr);
  gap:var(--space-3);
  overflow-x:auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.grid-3 > *{scroll-snap-align: start;}
.grid-3::-webkit-scrollbar{height:10px;}
.grid-3::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px;}
.grid-3::-webkit-scrollbar-track{background: rgba(255,255,255,.04); border-radius:999px;}
@media (max-width: 920px){
  .grid-3{grid-auto-flow: row; grid-auto-columns: initial; grid-template-columns: 1fr; overflow: visible;}
}

.service{
  padding:20px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
.service h4{margin:0 0 var(--space-1); font-size:var(--fs-h4); line-height: var(--lh-head);}
.service p{margin:0 0 var(--space-2); color:var(--muted); font-size:13px; line-height: var(--lh-body);}
.service ul{margin:0; padding-left:18px; color:var(--muted); font-size:13px; line-height: var(--lh-body);}
.service li{margin:6px 0}

.tag{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  margin-bottom:var(--space-2);
}
.tag strong{color:var(--text);}

.how{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 920px){ .how{grid-template-columns: 1fr;} }

.step{
  padding:16px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
}
.step b{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:10px;
  background: rgba(155,140,255,.16);
  border:1px solid rgba(155,140,255,.25);
  margin-right:8px;
}
.step h4{margin:0 0 var(--space-1); font-size:var(--fs-h4); line-height: var(--lh-head);}
.step p{margin:0; color:var(--muted); font-size:13px; line-height: var(--lh-body);}

.cta{padding:var(--space-5) 0 72px;}
@media (max-width: 520px){
  .cta{padding:var(--space-5) 0 60px;}
}
.cta-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 920px){ .cta-wrap{grid-template-columns: 1fr;} }

form{display:grid; gap:12px; margin-top:10px;}
label{font-size:12px; color:var(--muted); margin-bottom:2px;}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
textarea{min-height: 140px; resize: vertical;}
input:focus, textarea:focus, select:focus{
  border-color: rgba(110,231,255,.35);
  box-shadow: 0 0 0 4px rgba(110,231,255,.10);
}

/* Contact form layout */
.field{display:flex; flex-direction:column; gap:6px;}
.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
@media (max-width: 720px){
  .form-grid{grid-template-columns: 1fr;}
}

/* Make selects feel consistent */
select{
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(232,238,252,.7) 50%),
                    linear-gradient(135deg, rgba(232,238,252,.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* CTA section polish */
.cta .card-inner{padding:22px;}
.cta .section-sub{margin-bottom:var(--space-2);}
.cta .btn[type="submit"], .cta button.btn{width:100%; justify-content:center;}

.footer{
  padding:var(--space-5) 0 44px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}
.footer a{color:var(--muted); text-decoration:none;}
.footer a:hover{color:var(--text);}

.foot-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}

/* Footer links: render as “Privacy Policy • Fulfillment Policy” */
.footer .foot-row .u-flex.u-gap-12{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 0 !important; /* override utility gap */
}

.footer .foot-row .u-flex.u-gap-12 a{
  position:relative;
  padding:4px 0;
  white-space:nowrap;
  text-decoration:none;
}

/* Add separator before every link after the first */
.footer .foot-row .u-flex.u-gap-12 a + a::before{
  content:"•";
  display:inline-block;
  margin: 0 var(--space-2);
  color:var(--muted);
  opacity:.9;
}

/* Privacy / Policy: Effective date styling */
.top{
  display: flex;
  justify-content: flex-end; /* push to the right */
  margin-top: 12px;         /* space from header */
  margin-bottom: 12px;
  padding-right: 12px;      /* nudges content left slightly */
}

.top .muted{
  font-size: 13px;          /* smaller */
  line-height: 1.2;
  color: var(--muted);
  text-align: right;
}

/* Policy pages (privacy/fulfillment): smaller, document-like headings
   Scoped using the `.top` bar which only exists on policy pages */
.top ~ .container h1{
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  margin: var(--space-3) 0 var(--space-3);
  letter-spacing: -.6px;
}

/* Policy page title (H2) */
.top ~ .container h2{
  font-size: clamp(26px, 3.0vw, 36px);
  line-height: 1.12;
  margin: var(--space-4) 0 var(--space-4);
  letter-spacing: -.5px;
}

/* Policy section titles (H3) */
.top ~ .container h3{
  font-size: clamp(18px, 2.0vw, 22px);
  line-height: var(--lh-tight);
  margin: var(--space-5) 0 var(--space-3);
  letter-spacing: -.2px;
}

.top ~ .container p,
.top ~ .container li{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Policy pages: typography inside the big policy card
   (scoped via the .top bar that only exists on policy pages) */
.top ~ .container .card{
  font-size: var(--fs-body);
}

.top ~ .container .card p,
.top ~ .container .card li{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.top ~ .container .card ul,
.top ~ .container .card ol{
  margin-bottom: var(--space-4);
}
/* Prevent policy headings from sticking to content below */
.top ~ .container .card h3 + p{
  margin-top: 0;
}

.top ~ .container .card h3 + ul,
.top ~ .container .card h3 + ol{
  margin-top: 0;
}

/* Desktop: hero Summary mini-grid in 1 column (prevents awkward wraps) */
@media (min-width: 900px){
  .hero aside.card[aria-label="Summary"] .mini-grid{
    grid-template-columns: 1fr;
  }
}

/* Hero summary: inline label + value on one line (desktop only) */
@media (min-width: 900px){
  .hero aside.card[aria-label="Summary"] .mini{
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .hero aside.card[aria-label="Summary"] .mini .k{
    margin: 0;
    white-space: nowrap;
  }

  .hero aside.card[aria-label="Summary"] .mini .v{
    margin: 0;
  }
}

/* Hero summary: keep rows tight (no unnecessary empty space) */
@media (min-width: 900px){
  .hero aside.card[aria-label="Summary"]{
    max-width: 520px;
    justify-self: end;
  }

  .hero aside.card[aria-label="Summary"] .mini{
    width: fit-content;
    max-width: 100%;
    padding-right: 1.25rem;
  }
  
  /* EN: keep the 3rd row (Model) value on one line */
  html[lang="en"] .hero aside.card[aria-label="Summary"] .mini-grid .mini:nth-child(3) .v{
    white-space: nowrap;
  }

  }

/* Form status (moved out of media query) */
.form-ok, .form-err{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.form-err{
  background: rgba(255, 90, 90, .10);
  border-color: rgba(255, 90, 90, .25);
}
.form-ok{
  background: rgba(90, 220, 140, .10);
  border-color: rgba(90, 220, 140, .25);
}

/* Honeypot anti-spam: keep hidden from real users */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* =========================
   WordPress compatibility
   ========================= */

/* Evita márgenes/paddings inesperados que algunos estilos WP pueden introducir */
html, body { margin: 0; padding: 0; }
.wp-site-blocks, .site, .site-main, .entry-content { margin: 0; padding: 0; }

/* Cuando estás logueado, la WP Admin Bar ocupa espacio arriba.
   Esto evita que la topbar se esconda o quede mal alineada. */
body.admin-bar .topbar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
}

/* =========================
   Gravity Forms (ETF Minimal)
   Targets forms rendered inside .etf-form (front page)
   ========================= */
.etf-form .gform_wrapper,
.etf-form .gform_wrapper *{
  box-sizing: border-box;
}

.etf-form .gform_wrapper input[type="text"],
.etf-form .gform_wrapper input[type="email"],
.etf-form .gform_wrapper input[type="tel"],
.etf-form .gform_wrapper input[type="url"],
.etf-form .gform_wrapper input[type="number"],
.etf-form .gform_wrapper input[type="password"],
.etf-form .gform_wrapper select,
.etf-form .gform_wrapper textarea{
  background: rgba(18, 26, 38, 0.72) !important;
  color: #E6EDF6 !important;
  border: 1px solid rgba(230, 237, 246, 0.22) !important;
  caret-color: #E6EDF6 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  min-height: 52px;
}

.etf-form .gform_wrapper label,
.etf-form .gform_wrapper .gfield_label{
  color: rgba(230, 237, 246, 0.82) !important;
}

.etf-form .gform_wrapper input::placeholder,
.etf-form .gform_wrapper textarea::placeholder{
  color: rgba(230, 237, 246, 0.55) !important;
}

.etf-form .gform_wrapper input:focus,
.etf-form .gform_wrapper textarea:focus,
.etf-form .gform_wrapper select:focus{
  background: rgba(18, 26, 38, 0.92) !important;
  color: #E6EDF6 !important;
  border-color: rgba(140, 185, 255, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.28) !important;
  outline: none !important;
  -webkit-text-fill-color: #E6EDF6 !important;
}

.etf-form .gform_wrapper select option{
  background: #0f1720 !important;
  color: #E6EDF6 !important;
}

.etf-form .gform_wrapper input:-webkit-autofill,
.etf-form .gform_wrapper input:-webkit-autofill:hover,
.etf-form .gform_wrapper input:-webkit-autofill:focus{
  -webkit-text-fill-color: #E6EDF6 !important;
  box-shadow: 0 0 0px 1000px rgba(18, 26, 38, 0.92) inset !important;
  transition: background-color 9999s ease-out 0s;
}

.etf-form .gform_wrapper .gform_button,
.etf-form .gform_wrapper button,
.etf-form .gform_wrapper input[type="submit"]{
  border-radius: 16px !important;
  padding: 16px 22px !important;
  font-weight: 700;
}

.etf-form .gform_wrapper .gform_confirmation_message,
.etf-form .gform_wrapper .validation_error,
.etf-form .gform_wrapper .gfield_description.validation_message,
.etf-form .gform_wrapper .gform_validation_errors{
  background: rgba(18, 26, 38, 0.72) !important;
  border: 1px solid rgba(230, 237, 246, 0.22) !important;
  color: #E6EDF6 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}

.etf-form .gform_wrapper .gform_validation_errors{
  margin: 16px 0 8px !important;
}

/* reCAPTCHA wrapper (only wrapper is styleable) */
.etf-form .gform_wrapper .ginput_recaptcha{
  background: rgba(18, 26, 38, 0.72);
  border: 1px solid rgba(230, 237, 246, 0.22);
  border-radius: 14px;
  padding: 14px 16px;
  display: inline-block;
  margin: 14px 0 6px;
}

@media (max-width: 420px){
  .etf-form .gform_wrapper .ginput_recaptcha{
    transform: scale(.92);
    transform-origin: left top;
  }
}