/* =============================================
   VARIABLES — Identidad Grupo Océanos
   ============================================= */
:root {
  --go-dark:   #262a55;
  --go-mid:    #2e55a5;
  --go-light:  #4e60a9;
  --go-gray:   #898b8e;
  --go-white:  #ffffff;
  --go-offwhite: #f4f6fb;
  --go-border: #dce2f0;
  --go-input:  #eef1f8;
  --go-mist:   #b0b8cc;
  --go-gold:   #fef3c7;
  --go-goldborder: #fcd34d;
  --go-mid-dim:  rgba(46,85,165,0.10);
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --fs-xs:   13px;
  --fs-sm:   15px;
  --fs-base: 17px;
  --fs-md:   20px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  44px;
  --fs-3xl:  56px;
  --r:  10px;
  --r2: 16px;
  --r3: 22px;
  --max: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--go-white);
  color: var(--go-dark);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--go-border); border-radius: 3px; }

/* =============================================
   LAYOUT
   ============================================= */
.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* =============================================
   TOPBAR
   ============================================= */
.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 100px;
  padding: 0 32px;
  background: rgba(38, 42, 85, 0.96);
  border-bottom: 2px solid var(--go-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── Logo desktop — sobresale con overflow:visible ── */
.topbar > a:first-child {
  display: flex !important;
  align-items: center !important;
  width: 420px !important;
  min-width: 220px;
  height: 130px !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.topbar > a:first-child img {
  height: 130px !important;
  width: auto !important;
  max-width: 420px !important;
  object-fit: contain !important;
  display: block !important;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark  { width: 46px; height: 46px; flex-shrink: 0; }

.logo-icon {
  width: 40px; height: 40px;
  background: rgba(46,85,165,0.25);
  border: 1.5px solid rgba(123,167,232,0.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.logo-text  { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name  { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--go-white); letter-spacing: -0.5px; }
.logo-name em { color: #7ba7e8; font-style: normal; }
.logo-sub   { font-family: var(--font-display); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 1.6px; text-transform: uppercase; }

.logo-img {
  height: 110px;
  width: auto !important;
  max-width: 420px;
  object-fit: contain !important;
  display: block !important;
}

/* ── Nav links ── */
.topbar-right,
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.topbar-right .tbtn { width: auto; flex: 0 0 auto; white-space: nowrap; }

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--go-white); background: rgba(255,255,255,0.08); }
.nav-link.cta { background: var(--go-mid); color: var(--go-white); padding: 0 22px; }
.nav-link.cta:hover { background: var(--go-light); transform: translateY(-1px); }

.tbtn,
.nav-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: var(--r);
  border: none;
  padding: 0 18px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: all .2s;
}

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

.tbtn-norm  { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }
.tbtn-norm:hover { background: rgba(255,255,255,0.16); }
.tbtn-contact { background: var(--go-mid); color: var(--go-white); }
.tbtn-contact:hover { background: var(--go-light); }
.tbtn-wa, .nav-wa { background: #22c55e; color: var(--go-white); }
.tbtn-wa:hover, .nav-wa:hover { background: #16a34a; transform: translateY(-1px); }

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar { background: var(--go-dark); padding: 32px 0; display: flex; flex-direction: column; border-right: none; }
.sb-section { padding: 0 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; }
.sb-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 12px; padding: 0 4px; }

.nav {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r);
  cursor: pointer; color: rgba(255,255,255,0.65);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500;
  border: none; background: none; width: 100%; text-align: left;
  transition: all .2s; margin-bottom: 2px;
}
.nav:hover { background: rgba(255,255,255,0.07); color: var(--go-white); }
.nav.on { background: var(--go-mid); color: var(--go-white); font-weight: 700; }
.nav svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.nav.on svg { opacity: 1; }
.ndot { width: 7px; height: 7px; border-radius: 50%; background: #7ba7e8; margin-left: auto; opacity: 0; }
.nav.on .ndot { opacity: 1; }
.sb-foot { margin-top: auto; padding: 22px; }

.go-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r2); padding: 16px; text-align: center; }
.go-badge-name { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--go-white); margin-bottom: 3px; }
.go-badge-sub { font-size: var(--fs-xs); color: rgba(255,255,255,0.4); line-height: 1.4; }

/* =============================================
   MAIN CONTENT
   ============================================= */
.main { padding: 36px 44px 60px; overflow-y: auto; background: var(--go-offwhite); }
.breadcrumb { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--go-mist); margin-bottom: 8px; letter-spacing: 0.2px; }
.page-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--go-dark); margin-bottom: 6px; line-height: 1.15; letter-spacing: -0.5px; }
.page-title em { color: var(--go-mid); font-style: italic; }
.page-sub { font-size: var(--fs-md); color: var(--go-gray); margin-bottom: 32px; line-height: 1.5; }

.slbl { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--go-mid); margin-bottom: 14px; }

/* =============================================
   FORM BLOCKS
   ============================================= */
.fb { background: var(--go-white); border: 1px solid var(--go-border); border-radius: var(--r3); padding: 28px 28px 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(38,42,85,0.05); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg { display: flex; flex-direction: column; gap: 7px; }
.fg.full { grid-column: 1 / -1; }
.fg label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--go-dark); letter-spacing: 0.2px; }
.fg input, .fg select, .fg textarea { background: var(--go-input); border: 1.5px solid var(--go-border); border-radius: var(--r); color: var(--go-dark); font-family: var(--font-body); font-size: var(--fs-base); padding: 13px 16px; width: 100%; transition: border-color .2s, background .2s; line-height: 1.4; }
.fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--go-mid); background: #fff; box-shadow: 0 0 0 3px rgba(46,85,165,0.1); }
.fg input::placeholder { color: var(--go-mist); }
.fg textarea { resize: vertical; min-height: 80px; }
.fg select option { background: #fff; }
.fg .hint { font-size: var(--fs-xs); color: var(--go-gray); line-height: 1.4; }

/* =============================================
   TABLA DE ESPACIOS
   ============================================= */
.divline { height: 1px; background: var(--go-border); margin: 20px 0; }
.sublbl { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--go-mid); margin: 20px 0 10px; }

.sh { display: grid; grid-template-columns: 1fr 150px 32px; gap: 8px; padding: 0 6px 10px; border-bottom: 1.5px solid var(--go-border); }
.sh span { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--go-gray); text-transform: uppercase; letter-spacing: 1px; }

.sr { display: grid; grid-template-columns: 1fr 150px 32px; gap: 8px; margin-top: 10px; align-items: center; }
.sr input { background: var(--go-input); border: 1.5px solid var(--go-border); border-radius: var(--r); color: var(--go-dark); font-family: var(--font-body); font-size: var(--fs-base); padding: 11px 14px; width: 100%; }
.sr input:focus { outline: none; border-color: var(--go-mid); }

.rmbtn { background: none; border: none; border-radius: 8px; color: var(--go-mist); cursor: pointer; font-size: 20px; padding: 4px 8px; font-family: var(--font-body); transition: all .15s; line-height: 1; }
.rmbtn:hover { color: #dc2626; background: #fef2f2; }

.addbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px dashed var(--go-mid); border-radius: var(--r); color: var(--go-mid); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; padding: 8px 18px; cursor: pointer; margin-top: 12px; transition: background .15s; }
.addbtn:hover { background: rgba(46,85,165,0.06); }

/* =============================================
   INFO / WARN BOXES
   ============================================= */
.ibox  { background: #eff4ff; border: 1.5px solid #c3d4f5; border-radius: var(--r); padding: 14px 18px; font-size: var(--fs-base); color: #1e3a7a; line-height: 1.6; margin: 14px 0; }
.wbox  { background: var(--go-gold); border: 1.5px solid var(--go-goldborder); border-radius: var(--r); padding: 14px 18px; font-size: var(--fs-sm); color: #78350f; line-height: 1.5; margin-top: 14px; }
.o72box { background: #eff4ff; border: 1.5px solid #c3d4f5; border-radius: var(--r); padding: 14px 18px; font-size: var(--fs-base); color: #1e3a7a; line-height: 1.6; margin-bottom: 20px; }

/* =============================================
   BOTÓN CALCULAR
   ============================================= */
.cbtn { width: 100%; background: linear-gradient(135deg, var(--go-dark) 0%, var(--go-mid) 100%); border: none; border-radius: var(--r2); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; padding: 18px; cursor: pointer; margin-bottom: 20px; letter-spacing: 0.3px; transition: all .2s; box-shadow: 0 4px 20px rgba(38,42,85,0.25); }
.cbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(38,42,85,0.35); }
.cbtn:active { transform: translateY(0); }

/* =============================================
   PANEL RESULTADO
   ============================================= */
.rp { display: none; background: var(--go-white); border: 2px solid var(--go-mid); border-radius: var(--r3); padding: 28px; margin-bottom: 20px; box-shadow: 0 4px 24px rgba(46,85,165,0.12); }
.rp.vis { display: block; }

.rtag { display: inline-flex; align-items: center; background: var(--go-dark); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; padding: 6px 16px; border-radius: 30px; margin-bottom: 20px; letter-spacing: 0.3px; }

.mets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.met  { background: var(--go-offwhite); border: 1px solid var(--go-border); border-radius: var(--r2); padding: 18px 20px; }
.ml   { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--go-gray); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.mv   { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--go-dark); line-height: 1.1; }
.mv.ac { color: var(--go-mid); }
.mu   { font-size: var(--fs-xs); color: var(--go-gray); margin-top: 4px; font-weight: 500; }

.rnote { background: var(--go-gold); border: 1.5px solid var(--go-goldborder); border-radius: var(--r); padding: 14px 18px; font-size: var(--fs-base); color: #78350f; line-height: 1.7; margin-bottom: 16px; }

.ract { display: flex; gap: 10px; flex-wrap: wrap; }
.rpri { flex: 1; min-width: 160px; background: var(--go-mid); border: none; border-radius: var(--r); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; padding: 13px 20px; cursor: pointer; transition: background .15s; }
.rpri:hover { background: var(--go-dark); }
.rsec { flex: 1; min-width: 130px; background: none; border: 1.5px solid var(--go-border); border-radius: var(--r); color: var(--go-dark); font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; padding: 13px 20px; cursor: pointer; transition: all .15s; }
.rsec:hover { border-color: var(--go-mid); color: var(--go-mid); }

.fnote { font-size: var(--fs-sm); color: var(--go-gray); line-height: 1.6; padding: 16px 0; border-top: 1px solid var(--go-border); margin-top: 8px; }

/* =============================================
   MODALS
   ============================================= */
.modal-bg { position: fixed; inset: 0; background: rgba(8,16,36,0.82); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-bg.hidden { display: none !important; }

.modal { background: var(--go-white); border-radius: var(--r3); padding: 36px 36px 30px; width: 100%; max-width: 560px; box-shadow: 0 24px 80px rgba(10,15,40,0.35); position: relative; border-top: 5px solid var(--go-mid); }
.modal-close { position: absolute; top: 18px; right: 22px; background: none; border: none; font-size: 26px; color: var(--go-mist); cursor: pointer; line-height: 1; font-family: var(--font-display); }
.modal-close:hover { color: var(--go-dark); }
.modal-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; color: var(--go-dark); margin-bottom: 8px; line-height: 1.2; letter-spacing: -0.3px; }
.modal-title em { color: var(--go-mid); font-style: italic; }
.modal-sub { font-size: var(--fs-md); color: var(--go-gray); line-height: 1.6; margin-bottom: 24px; }
.modal-section { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--go-mid); margin: 20px 0 12px; border-bottom: 1px solid var(--go-border); padding-bottom: 8px; }
.modal-footer { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.btn-submit { flex: 1; background: linear-gradient(135deg, var(--go-dark), var(--go-mid)); border: none; border-radius: var(--r); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; padding: 14px; cursor: pointer; transition: all .2s; box-shadow: 0 3px 14px rgba(38,42,85,0.25); }
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(38,42,85,0.35); }
.btn-cancel { background: none; border: 1.5px solid var(--go-border); border-radius: var(--r); color: var(--go-gray); font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; padding: 14px 24px; cursor: pointer; transition: all .15s; }
.btn-cancel:hover { border-color: var(--go-mid); color: var(--go-mid); }

.success-msg { text-align: center; padding: 24px 0; }
.success-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--go-dark), var(--go-mid)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; }
.success-ttl { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; color: var(--go-dark); margin-bottom: 8px; }
.success-txt { font-size: var(--fs-md); color: var(--go-gray); line-height: 1.6; }

/* =============================================
   HOME — WRAPPER & HERO
   ============================================= */
.w { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

.hero {
  position: relative; overflow: hidden; min-height: 720px; padding: 75px 0 80px;
  background:
    linear-gradient(90deg, rgba(13,25,68,0.94) 0%, rgba(13,25,68,0.82) 34%, rgba(13,25,68,0.30) 62%, rgba(13,25,68,0.12) 100%),
    url("/static/img/fondo_arqueonaval.jpg");
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.hero::before { content:''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 82% 45%, rgba(46,85,165,0.10) 0%, transparent 70%); pointer-events: none; }
.hero::after  { content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--go-mid), #7ba7e8, var(--go-mid)); }

.hero-inner { position: relative; z-index: 2; width: 100%; margin: 0; padding: 0 40px; display: grid; grid-template-columns: minmax(720px, 880px) 420px; gap: 260px; align-items: center; }
.hero-inner > div:first-child { max-width: 880px; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(123,167,232,0.15); border: 1px solid rgba(123,167,232,0.3); border-radius: 30px; padding: 6px 16px; margin-bottom: 22px; }
.hero-eyebrow span { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: #7ba7e8; letter-spacing: 1.5px; text-transform: uppercase; }
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #7ba7e8; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

h1.hero-title { max-width: 880px; font-family: var(--font-display); font-size: clamp(42px,4.3vw,68px); font-weight: 900; color: var(--go-white); line-height: 1.05; margin-bottom: 30px; letter-spacing: -1px; }
h1.hero-title em { color: #7ba7e8; font-style: normal; }
.hero-sub { max-width: 720px; font-size: var(--fs-md); color: rgba(255,255,255,0.78); line-height: 1.65; margin-bottom: 34px; }

.hero-actions { display: flex; flex-direction: row; gap: 18px; flex-wrap: nowrap; }
.btn-hero-pri, .btn-hero-sec { min-height: 58px; white-space: nowrap; }

.btn-hero-pri { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--go-mid); border: none; border-radius: var(--r2); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; padding: 16px 32px; cursor: pointer; text-decoration: none; transition: all .2s; letter-spacing: 0.2px; }
.btn-hero-pri:hover { background: #3666c5; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(46,85,165,0.45); }

.btn-hero-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--r2); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; padding: 16px 28px; cursor: pointer; text-decoration: none; transition: all .2s; }
.btn-hero-sec:hover { background: rgba(255,255,255,0.18); }

.hero-note { margin-top: 20px; font-size: var(--fs-xs); color: rgba(255,255,255,0.45); letter-spacing: 0.3px; }

.hero-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r3); padding: 32px; backdrop-filter: blur(8px); transform: translateX(80px); min-width: 0 !important; }
.hero-card-title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; }
.hero-stat { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hero-stat:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.hero-stat-num { font-family: var(--font-display); font-size: 36px; font-weight: 900; color: var(--go-white); line-height: 1; }
.hero-stat-num em { color: #7ba7e8; font-style: normal; }
.hero-stat-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.55); margin-top: 4px; }

/* ── SECCIONES BASE ── */
section { padding: 88px 0; }
.section-eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--go-mid); margin-bottom: 12px; }
h2.section-title { font-family: var(--font-display); font-size: clamp(26px,3vw,38px); font-weight: 900; color: var(--go-dark); margin-bottom: 16px; line-height: 1.15; letter-spacing: -0.5px; }
h2.section-title em { color: var(--go-mid); font-style: normal; }
.section-sub { font-size: var(--fs-md); color: var(--go-gray); line-height: 1.7; max-width: 600px; }

/* ── EXPLICACIÓN ── */
.explain { background: var(--go-offwhite); }
.explain-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 56px; }
.explain-card { background: var(--go-white); border: 1px solid var(--go-border); border-radius: var(--r2); padding: 28px 24px; transition: all .2s; }
.explain-card:hover { border-color: var(--go-mid); box-shadow: 0 4px 24px rgba(46,85,165,0.1); transform: translateY(-3px); }
.explain-icon { width: 44px; height: 44px; background: var(--go-mid-dim); border-radius: var(--r); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.explain-icon svg { width: 22px; height: 22px; }
.explain-card h3 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 800; color: var(--go-dark); margin-bottom: 8px; }
.explain-card p  { font-size: var(--fs-sm); color: var(--go-gray); line-height: 1.6; }

/* ── TARJETAS CÁLCULO ── */
.calc-cards { background: var(--go-white); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }
.calc-card { border: 1.5px solid var(--go-border); border-radius: var(--r3); padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; transition: all .2s; position: relative; overflow: hidden; }
.calc-card::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.calc-card.nave::before { background: linear-gradient(90deg, var(--go-dark), var(--go-mid)); }
.calc-card.arte::before { background: linear-gradient(90deg, var(--go-mid), var(--go-light)); }
.calc-card:hover { border-color: var(--go-mid); box-shadow: 0 12px 48px rgba(38,42,85,0.12); transform: translateY(-4px); }
.calc-card-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--go-mid-dim); border: 1px solid rgba(46,85,165,0.2); border-radius: 30px; padding: 5px 14px; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--go-mid); letter-spacing: 1px; text-transform: uppercase; width: fit-content; }
.calc-card h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; color: var(--go-dark); line-height: 1.1; letter-spacing: -0.5px; }
.calc-card h3 em { color: var(--go-mid); font-style: normal; }
.calc-card p { font-size: var(--fs-md); color: var(--go-gray); line-height: 1.7; flex: 1; }
.calc-card-items { display: flex; flex-direction: column; gap: 8px; }
.calc-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--go-dark); }
.calc-item::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--go-mid); flex-shrink: 0; }
.btn-calc { display: inline-flex; align-items: center; gap: 8px; background: var(--go-dark); border: none; border-radius: var(--r); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; padding: 14px 28px; cursor: pointer; text-decoration: none; transition: all .2s; width: fit-content; margin-top: 8px; }
.btn-calc:hover { background: var(--go-mid); }
.btn-calc svg { transition: transform .2s; }
.btn-calc:hover svg { transform: translateX(4px); }

/* ── CÓMO FUNCIONA ── */
.how { background: var(--go-dark); padding: 88px 0; }
.how .section-eyebrow { color: #7ba7e8; }
.how .section-title { color: var(--go-white); }
.how .section-sub { color: rgba(255,255,255,0.55); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 56px; position: relative; }
.step { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r3); padding: 36px 30px; position: relative; z-index: 1; transition: border-color .2s; }
.step:hover { border-color: rgba(123,167,232,0.4); }
.step-num { width: 56px; height: 56px; background: linear-gradient(135deg, var(--go-mid), var(--go-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--go-white); margin-bottom: 24px; box-shadow: 0 4px 20px rgba(46,85,165,0.4); }
.step h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--go-white); margin-bottom: 12px; line-height: 1.2; }
.step p  { font-size: var(--fs-base); color: rgba(255,255,255,0.55); line-height: 1.7; }

/* ── SERVICIO PROFESIONAL ── */
.servicio { background: var(--go-offwhite); }
.servicio-inner { display: grid; grid-template-columns: 1fr 480px; gap: 72px; align-items: start; }
.servicio-form { background: var(--go-white); border: 1px solid var(--go-border); border-radius: var(--r3); padding: 40px; box-shadow: 0 4px 32px rgba(38,42,85,0.07); }



.form-error {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #991b1b;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}

.form-error span {
  flex: 1;
}

.form-error button {
  background: none !important;
  border: none !important;
  color: #991b1b;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 6px;
  opacity: 0.6;
  line-height: 1;
  border-radius: 4px;
}

.form-error button:hover {
  opacity: 1;
  background: rgba(153,27,27,0.1) !important;
}








.form-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--go-dark); margin-bottom: 6px; }




.form-sub { font-size: var(--fs-sm); color: var(--go-gray); margin-bottom: 28px; line-height: 1.6; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--go-dark); }
.form-group input, .form-group select, .form-group textarea { background: var(--go-input); border: 1.5px solid var(--go-border); border-radius: var(--r); color: var(--go-dark); font-family: var(--font-body); font-size: var(--fs-base); padding: 13px 16px; width: 100%; transition: border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--go-mid); background: #fff; box-shadow: 0 0 0 3px rgba(46,85,165,0.1); }
.form-group input::placeholder { color: var(--go-mist); }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.btn-form { width: 100%; background: linear-gradient(135deg, var(--go-dark), var(--go-mid)); border: none; border-radius: var(--r); color: var(--go-white); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; padding: 15px; cursor: pointer; margin-top: 8px; transition: all .2s; box-shadow: 0 4px 18px rgba(38,42,85,0.25); }
.btn-form:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(38,42,85,0.35); }
.form-legal { font-size: var(--fs-xs); color: var(--go-mist); text-align: center; margin-top: 12px; line-height: 1.5; }
.form-success { display: block; text-align: center; padding: 32px 0; }
.form-success-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--go-dark), var(--go-mid)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 26px; }
.form-success h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--go-dark); margin-bottom: 8px; }
.form-success p  { font-size: var(--fs-base); color: var(--go-gray); line-height: 1.6; }
.servicio-bullets { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; }
.s-bullet { display: flex; gap: 16px; align-items: flex-start; }
.s-bullet-icon { width: 40px; height: 40px; background: var(--go-mid-dim); border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-bullet-icon svg { width: 20px; height: 20px; }
.s-bullet-text h4 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; color: var(--go-dark); margin-bottom: 4px; }
.s-bullet-text p  { font-size: var(--fs-sm); color: var(--go-gray); line-height: 1.6; }

/* ── RESPALDO ── */
.respaldo { background: var(--go-white); padding: 80px 0; }
.respaldo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.respaldo-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.r-num { background: var(--go-offwhite); border: 1px solid var(--go-border); border-radius: var(--r2); padding: 28px 24px; text-align: center; }
.r-num-val   { font-family: var(--font-display); font-size: 44px; font-weight: 900; color: var(--go-mid); line-height: 1; }
.r-num-label { font-size: var(--fs-sm); color: var(--go-gray); margin-top: 6px; line-height: 1.4; }

/* ── NORMATIVA ── */
.normativa { background: var(--go-offwhite); padding: 72px 0; }
.norm-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.norm-tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.norm-tag { background: var(--go-mid-dim); border: 1px solid rgba(46,85,165,0.2); border-radius: 30px; padding: 7px 16px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--go-mid); }
.norm-box { background: var(--go-white); border: 1px solid var(--go-border); border-radius: var(--r2); padding: 32px; border-left: 4px solid var(--go-mid); }
.norm-box p { font-size: var(--fs-base); color: var(--go-dark); line-height: 1.8; }
.norm-box strong { color: var(--go-mid); }

/* ── FAQ ── */
.faq { background: var(--go-white); padding: 88px 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.faq-item { border: 1px solid var(--go-border); border-radius: var(--r2); overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; color: var(--go-dark); gap: 16px; user-select: none; transition: background .15s; }
.faq-q:hover { background: var(--go-offwhite); }
.faq-q.open { background: var(--go-mid-dim); color: var(--go-mid); }
.faq-chevron { flex-shrink: 0; transition: transform .25s; }
.faq-q.open .faq-chevron { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 28px 22px; font-size: var(--fs-base); color: var(--go-gray); line-height: 1.8; }
.faq-a.open { display: block; }

/* ── WHATSAPP ── */
.wa-section { background: linear-gradient(135deg,#1a4d2e,#166534); padding: 72px 0; }
.wa-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.wa-text h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; color: #fff; margin-bottom: 12px; line-height: 1.2; }
.wa-text p  { font-size: var(--fs-md); color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 560px; }
.wa-note { margin-top: 12px; font-size: var(--fs-xs); color: rgba(255,255,255,0.45); line-height: 1.5; }
.btn-wa-big { display: flex; align-items: center; gap: 12px; background: #22c55e; border: none; border-radius: var(--r2); color: #fff; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; padding: 20px 36px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all .2s; box-shadow: 0 4px 24px rgba(34,197,94,0.4); }
.btn-wa-big:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(34,197,94,0.5); }
.btn-wa-big svg { width: 28px; height: 28px; flex-shrink: 0; }

.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 200; display: flex; align-items: center; gap: 10px; background: #22c55e; border: none; border-radius: 50px; color: #fff; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; padding: 13px 22px 13px 16px; cursor: pointer; text-decoration: none; box-shadow: 0 4px 20px rgba(34,197,94,0.45); transition: all .2s; animation: float-in .5s ease .8s both; }
@keyframes float-in { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.wa-float:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(34,197,94,0.55); }
.wa-float svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ── FOOTER ── */
footer { background: var(--go-dark); padding: 56px 0 36px; border-top: 3px solid var(--go-mid); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-brand .logo-name { font-size: 20px; }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,0.45); line-height: 1.7; margin-top: 14px; max-width: 280px; }
.footer-col h4 { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 10px; transition: color .15s; line-height: 1.5; }
.footer-col a:hover { color: var(--go-white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: var(--fs-xs); color: rgba(255,255,255,0.3); }

/* ── UTILS ── */
.hidden      { display: none !important; }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }

/* =============================================
   UNIFICACIÓN TIPOGRÁFICA — CALCULADORA
   ============================================= */
.main, .main input, .main select, .main textarea,
.main p, .main span, .main div { font-family: var(--font-body); }

.breadcrumb, .page-title, .slbl, .sublbl, .fg label,
.sh span, .addbtn, .cbtn, .rtag, .ml, .mv, .rpri, .rsec { font-family: var(--font-display); }

.page-title { font-weight: 800; letter-spacing: -0.7px; }
.page-title em { font-family: inherit; font-weight: 800; font-style: italic; }
.page-sub, .fb p, .fg .hint, .fnote { font-family: var(--font-body); font-weight: 400; }
.slbl, .sublbl, .sh span { font-weight: 700; letter-spacing: 1.8px; }
.fg label { font-weight: 700; }
.fg input, .fg select, .fg textarea, .sr input { font-family: var(--font-body); font-weight: 400; }

/* =============================================
   GLOBAL OVERFLOW FIX
   ============================================= */
html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
body * { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }

/* =========================================================
   RESPONSIVE — NOTEBOOK ≤ 1250px
   Logo: 130px → 100px
   ========================================================= */

/* =========================================================
   CALCULADORA — ELEMENTOS MÓVIL
   Definición base: se definen una sola vez aquí.
   ========================================================= */

/* Hamburguesa calculadora - oculto en desktop */
.calc-ham-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.calc-ham-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--go-white);
  border-radius: 2px;
  transition: all .25s ease;
  transform-origin: center;
}
.calc-ham-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.calc-ham-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.calc-ham-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú desplegable calculadora */
.calc-mob-menu {
  display: none;
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  z-index: 199;
  background: rgba(38, 42, 85, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--go-mid);
  flex-direction: column;
  padding: 12px 16px 20px;
  gap: 4px;
}

/* .calc-mob-menu.show { display: flex; } */

.calc-mob-menu.show {
  display: flex !important;
}

/* Selector tipo/modo - oculto en desktop, ocupa columna completa en grid */
.mob-calc-nav {
  display: none;
  grid-column: 1 / -1;
  background: var(--go-dark);
  border-bottom: 2px solid var(--go-mid);
  padding: 10px 14px;
  gap: 8px;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 90;
}
.mob-calc-group {
  display: flex;
  gap: 6px;
}
.mob-calc-btn {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--r);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 8px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.mob-calc-btn.active {
  background: var(--go-mid);
  border-color: var(--go-mid);
  color: var(--go-white);
  font-weight: 700;
}
.mob-calc-btn:not(.active):hover {
  background: rgba(255,255,255,0.14);
  color: var(--go-white);
}
.mob-link-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  background: none;
  border: none;
}

@media (max-width: 1250px) {

  .topbar {
    height: auto !important;
    min-height: 110px !important;
    padding: 10px 18px !important;
    gap: 14px !important;
  }

  .topbar > a:first-child {
    width: 300px !important;
    height: 100px !important;
    overflow: visible !important;
  }

  .topbar > a:first-child img {
    height: 100px !important;
    max-width: 300px !important;
  }

  .nav-links, .topbar-right { gap: 8px !important; }
  .nav-link, .nav-wa, .tbtn { height: 40px !important; font-size: 13px !important; padding: 0 12px !important; }

  .hero { min-height: auto !important; padding: 76px 0 70px !important; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important; gap: 60px !important; padding: 0 32px !important; width: 100% !important; }
  .hero-card { transform: none !important; width: 100% !important; }
  h1.hero-title { font-size: clamp(38px, 5vw, 58px) !important; }
  .explain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .servicio-inner, .respaldo-inner, .norm-inner { grid-template-columns: 1fr !important; }
}

/* =========================================================
   TABLET HORIZONTAL ≤ 980px
   Logo: 100px → 80px
   ========================================================= */
@media (max-width: 980px) {

  .topbar {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 90px !important;
    padding: 10px 20px !important;
  }

  .topbar > a:first-child {
    width: 280px !important;
    min-width: 200px !important;
    height: 86px !important;
    overflow: visible !important;
  }

  .topbar > a:first-child img,
  .topbar > a:first-child .logo-img,
  .logo-img {
    height: 78px !important;
    width: auto !important;
    max-width: 280px !important;
  }

  /* Hamburguesa activo en tablet */
  .nav-links { display: none !important; }
  .ham-btn   { display: flex !important; }

  .hero { padding: 64px 0 62px !important; background-position: 70% center !important; }
  .hero-inner { display: block !important; padding: 0 28px !important; width: 100% !important; }
  .hero-inner > div:first-child { max-width: 720px !important; margin: 0 !important; padding: 0 !important; }
  h1.hero-title { max-width: 720px !important; font-size: clamp(38px, 7vw, 54px) !important; line-height: 1.06 !important; }
  .hero-sub { max-width: 640px !important; }
  .hero-card { margin-top: 34px !important; max-width: 520px !important; transform: none !important; }

  .shell { display: block !important; width: 100% !important; min-height: 100vh !important; }
  .main { width: 100% !important; padding: 28px 24px 48px !important; overflow-x: hidden !important; }
  .sidebar { display: none; }
  .mob-calc-nav { display: flex; }
  #calc-ham-btn { display: flex; }
  #calc-nav-desktop { display: none; }

  .calc-grid, .steps-grid, .faq-grid, .footer-grid,
  .wa-inner, .servicio-inner, .respaldo-inner, .norm-inner { grid-template-columns: 1fr !important; }
}

/* =========================================================
   CELULAR ≤ 700px
   Logo: 80px → 60px
   ========================================================= */

/* Activar hamburguesa en móvil */

@media (min-width: 981px) {
  .mob-menu  { display: none !important; }
  .ham-btn   { display: none !important; }
}



@media (max-width: 700px) {

  /* Ajustar posición del menú móvil bajo topbar más chica */
  .mob-menu { top: 80px !important; }

  .topbar {
    min-height: 80px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .topbar > a:first-child {
    width: 210px !important;
    min-width: 160px !important;
    height: 80px !important;
    overflow: visible !important;
  }

  .topbar > a:first-child img,
  .topbar > a:first-child .logo-img,
  .logo-img {
    height: 62px !important;
    width: auto !important;
    max-width: 210px !important;
  }

  .ham-btn   { 
    display: flex !important; 
  }
  


  .nav-links {
    width: auto !important;
    max-width: calc(100% - 180px) !important;
    display: none !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .nav-links .nav-link:not(.cta) { display: none !important; }
  .nav-link.cta, .nav-wa { height: 36px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 8px !important; }

  .hero { padding: 42px 0 46px !important; min-height: auto !important; background-position: 72% center !important; }
  .hero-inner { display: block !important; padding: 0 18px !important; width: 100% !important; }
  .hero-inner > div:first-child { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .hero-eyebrow { max-width: 100% !important; margin: 0 0 16px !important; padding: 5px 12px !important; }
  .hero-eyebrow span { font-size: 11px !important; letter-spacing: 1px !important; }
  h1.hero-title { width: 100% !important; max-width: 100% !important; font-size: 34px !important; line-height: 1.06 !important; margin-bottom: 20px !important; letter-spacing: -0.6px !important; }
  .hero-sub { max-width: 100% !important; font-size: 16px !important; line-height: 1.55 !important; margin-bottom: 24px !important; }
  .hero-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; }
  .btn-hero-pri, .btn-hero-sec { width: 100% !important; min-height: 52px !important; justify-content: center !important; font-size: 15px !important; padding: 14px 18px !important; }
  .hero-note { font-size: 11px !important; line-height: 1.5 !important; }
  .hero-card { display: none !important; }

  .w { width: 100% !important; max-width: 100% !important; padding: 0 18px !important; }
  section { padding: 54px 0 !important; }
  h2.section-title { font-size: 28px !important; }
  .section-sub { font-size: 16px !important; }

  .explain-grid, .calc-grid, .steps-grid, .faq-grid,
  .footer-grid, .servicio-inner, .respaldo-inner, .norm-inner, .wa-inner {
    display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; width: 100% !important;
  }

  .explain-card, .calc-card, .step, .servicio-form, .norm-box, .r-num { width: 100% !important; max-width: 100% !important; }
  .shell { display: block !important; width: 100% !important; }
  .sidebar { width: 100% !important; display: block !important; padding: 14px 12px !important; }
  .sb-section { padding: 0 0 14px !important; margin-bottom: 12px !important; }
  .nav { font-size: 16px !important; padding: 10px 12px !important; }
  .main { width: 100% !important; padding: 22px 16px 42px !important; }
  .page-title { font-size: 34px !important; line-height: 1.1 !important; }
  .page-sub { font-size: 16px !important; }
  .g2, .form-row { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .fb { padding: 22px 18px !important; overflow: hidden !important; }

  .sr input { width: 100% !important; }
  .modal { max-width: calc(100vw - 28px) !important; padding: 28px 20px 24px !important; }
  .wa-float { right: 14px !important; bottom: 14px !important; padding: 11px 14px !important; font-size: 12px !important; }
}

/* =========================================================
   CELULAR MUY ANGOSTO ≤ 430px
   Logo: 60px → 46px
   ========================================================= */
@media (max-width: 430px) {

  .topbar > a:first-child {
    width: 170px !important;
    min-width: 140px !important;
    height: 62px !important;
  }

  .topbar > a:first-child img,
  .topbar > a:first-child .logo-img,
  .logo-img {
    height: 70px !important;
    width: auto !important;
    max-width: 170px !important;
  }

  .nav-link.cta { display: none !important; }
  .nav-links { max-width: calc(100% - 150px) !important; }
  .nav-wa { height: 34px !important; padding: 0 12px !important; }

  .hero { padding: 38px 0 42px !important; }
  h1.hero-title { font-size: 30px !important; }
  .hero-sub { font-size: 15px !important; }
  .hero-card { display: none !important; }
  .main { padding: 22px 16px 42px !important; }
  .sidebar { padding: 16px 12px !important; }
  .nav { font-size: 16px !important; padding: 10px 12px !important; }
  .fb, .calc-card, .explain-card, .servicio-form, .norm-box { padding: 22px 16px !important; }
  .sh, .sr { grid-template-columns: 1fr !important; }
  .rmbtn { justify-self: start; }
}

/* ── CUSTOM ALERT ─────────────────────────────────────────── */
.custom-alert-box {
  display: none;
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: var(--go-white);
  border: 2px solid var(--go-mid);
  border-radius: var(--r2);
  padding: 20px 28px;
  box-shadow: 0 8px 40px rgba(38,42,85,0.25);
  max-width: 480px;
  width: calc(100% - 40px);
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.custom-alert-box.show {
  display: flex;
}

.custom-alert-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.custom-alert-content {
  flex: 1;
}

.custom-alert-content h4 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--go-dark);
  margin-bottom: 4px;
}

.custom-alert-content p {
  font-size: var(--fs-sm);
  color: var(--go-gray);
  line-height: 1.5;
}

.custom-alert-box button {
  background: var(--go-mid);
  border: none;
  border-radius: var(--r);
  color: var(--go-white);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}

.custom-alert-box button:hover {
  background: var(--go-dark);
}

.sh label{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--go-dark);
  letter-spacing: 0.2px;
}

.sh .vol-label{
  text-align: right;
}





/* ── BOTON FLOTANTE : Volver arriba ── */

.back-to-top{
  position:fixed;
  right:28px;
  bottom:92px;
  z-index:300;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:var(--go-mid);
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(38,42,85,.28);
  transition:all .2s;
}

.back-to-top:hover{
  background:var(--go-dark);
  transform:translateY(-2px);
}

@media(max-width:700px){
  .back-to-top{
    right:16px;
    bottom:78px;
    width:42px;
    height:42px;
    font-size:22px;
  }
}



/* ── Mejoras de contraste Accessibility ─────────────────── */

.sidebar .sb-label{
  color: rgba(255,255,255,.72);
}

.go-badge-sub{
  color: rgba(255,255,255,.82);
}

.breadcrumb,
#bc.breadcrumb{
  color: #4f5f83;
}

.page-sub,
#psub.page-sub{
  color: #4f5f83;
}

.hint,
span.hint{
  color: #5f6f91;
}

.fb p,
.fnote{
  color: #4f5f83;
}

.tbtn-wa{
  color:#fff;
  background:#16a34a;
}
/* =========================================================
   MENÚ HAMBURGUESA — HOME MÓVIL
   ========================================================= */

/* Botón hamburguesa — oculto en desktop */
.ham-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  z-index: 201;
}

.ham-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--go-white);
  border-radius: 2px;
  transition: all .25s ease;
  transform-origin: center;
}

/* Animación a X cuando está abierto */
.ham-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú desplegable móvil */
.mob-menu {
  position: fixed;
  top: 90px;   /* justo debajo de la topbar en tablet */
  left: 0;
  right: 0;
  z-index: 199;
  background: rgba(38, 42, 85, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--go-mid);
  display: flex;
  flex-direction: column;
  padding: 12px 16px 20px;
  gap: 4px;
  animation: slideDown .2s ease;
}

.mob-menu.hidden { display: none !important; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mob-link {
  display: block;
  padding: 14px 16px;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: background .15s;
}

.mob-link:hover,
.mob-link:active { background: rgba(255,255,255,0.08); color: var(--go-white); }

.mob-cta {
  background: var(--go-mid);
  color: var(--go-white) !important;
  text-align: center;
  margin-top: 8px;
  font-weight: 700;
}

.mob-cta:hover { background: var(--go-light) !important; }

.mob-wa {
  background: #22c55e;
  color: var(--go-white) !important;
  text-align: center;
  font-weight: 700;
}

.mob-wa:hover { background: #16a34a !important; }



/* Ocultar descripción <p> en los pasos de "Cómo funciona" */
@media (max-width: 700px) {
  .how .step p {
    display: none !important;
  }

  .how .step {
    padding: 22px 18px !important;
  }

  .how .step-num {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .how .step h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   FIX RESPONSIVE — HERO CARD
   Evita que la tarjeta del hero se corte en tablet/notebook
   ========================================================= */

@media (max-width: 1366px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  .hero-card {
    display: none !important;
  }
}


/* =========================================================
   FIX RESPONSIVE — MODALES
   Evita cortes en alto y ancho en celulares/tablets
   ========================================================= */

.modal-bg {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding: 24px 14px !important;
}

.modal {
  width: 100% !important;
  max-width: 560px !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  margin: auto !important;
}

@media (max-width: 700px) {
  .modal-bg {
    padding: 16px 10px !important;
  }

  .modal {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 32px) !important;
    padding: 26px 20px 22px !important;
    border-radius: 16px !important;
  }

  .modal-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  .modal-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .modal-footer {
    flex-direction: column !important;
  }

  .btn-submit,
  .btn-cancel {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .modal {
    padding: 24px 18px 20px !important;
  }

  .modal-title {
    font-size: 24px !important;
  }

  .modal-sub {
    font-size: 15px !important;
  }

  .fg input,
  .fg select,
  .fg textarea {
    font-size: 15px !important;
    padding: 12px 14px !important;
  }
}

/* =========================================================
   FIX MOBILE — encabezado Nombre / Volumen
   ========================================================= */

@media (max-width: 700px) {

  .fb .sh {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 0 10px !important;
  }

  .fb .sh label {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .fb .sh .vol-label {
    text-align: right !important;
  }

  .fb .sh span {
    display: none !important;
  }
}

/* =========================================================
   FOOTER — definitivo compacto
   ========================================================= */

footer {
  padding: 24px 0 16px !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 150px 1fr 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  margin-bottom: 14px !important;
}

.footer-logo img {
  width: 120px !important;
}

.footer-brand p {
  display: none !important;
}

.footer-col h4 {
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}

.footer-col a,
.footer-col p {
  color: rgba(255,255,255,0.88) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin-bottom: 5px !important;
}

.footer-bottom {
  padding-top: 10px !important;
}

.footer-bottom p {
  font-size: 10px !important;
  color: rgba(255,255,255,0.55) !important;
}

@media (max-width: 430px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .footer-logo img {
    width: 135px !important;
  }
}

.hp-field{
    position:absolute;
    left:-9999px;
    opacity:0;
    pointer-events:none;
}