/* MOKHUBA · puente visual con el CSS general del sitio. Aislado del formulario para no alterar su lógica. */
:root{
  --ivory:#f7efe5;
  --beige:#ead9c4;
  --coal:#13100d;
  --gold:#b58b54;
  --muted:#6f6257;
  --line:rgba(120,84,45,.20);
  --site-shadow:0 25px 60px rgba(68,43,23,.16);
}
html{background:var(--ivory)!important}
body{
  color:#2d241d!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(181,139,84,.10),transparent 26%),
    linear-gradient(180deg,#f7efe5 0%,#efe1d1 100%)!important;
  font-family:Georgia,'Times New Roman',serif!important;
  padding:32px 18px 42px!important;
}
body:before{
  background:linear-gradient(90deg,rgba(120,84,45,.025) 1px,transparent 1px),linear-gradient(rgba(120,84,45,.018) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
}
body:after{
  color:rgba(120,84,45,.035)!important;
  font-family:Arial,sans-serif!important;
}
h1{
  color:#2d241d!important;
  font-size:clamp(2rem,4.6vw,3.8rem)!important;
  letter-spacing:-.035em!important;
  text-shadow:none!important;
}
h1:after{background:linear-gradient(90deg,transparent,var(--gold),transparent)!important}
h2{
  color:#f7efe5!important;
  border:1px solid rgba(181,139,84,.34)!important;
  background:linear-gradient(135deg,#17110d 0%,#2b1c12 100%)!important;
  box-shadow:0 14px 34px rgba(32,21,15,.16)!important;
}
h2:before{
  background:linear-gradient(135deg,#d7b071,#9c713f)!important;
  box-shadow:0 0 0 6px rgba(181,139,84,.12)!important;
}
.tabs-container,.section{
  border:1px solid var(--line)!important;
  background:linear-gradient(180deg,#fffaf5,#f8efe5)!important;
  box-shadow:var(--site-shadow)!important;
}
.tabs-container:before,.section:before{
  background:linear-gradient(135deg,rgba(255,255,255,.75),transparent 42%,rgba(181,139,84,.06))!important;
}
.tab{
  border:1px solid rgba(120,84,45,.15)!important;
  background:#f5e9dc!important;
  color:#6a5746!important;
}
.tab:hover{
  border-color:rgba(181,139,84,.70)!important;
  background:#fffaf5!important;
  box-shadow:0 10px 24px rgba(68,43,23,.08)!important;
}
.tab.active{
  color:#f7efe5!important;
  border-color:#b58b54!important;
  background:linear-gradient(135deg,#17110d 0%,#2b1c12 100%)!important;
  box-shadow:0 14px 30px rgba(32,21,15,.19),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.tab-indicator{
  color:#5e4b3a!important;
  background:#efe0cf!important;
  border-color:rgba(181,139,84,.28)!important;
}
label{color:#49392d!important}
input,select,textarea{
  border:1px solid rgba(120,84,45,.20)!important;
  background:#fffaf5!important;
  color:#2d241d!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 7px 16px rgba(68,43,23,.035)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#b58b54!important;
  background:#fffdf9!important;
  box-shadow:0 0 0 4px rgba(181,139,84,.13),0 14px 28px rgba(68,43,23,.08)!important;
}
select option{color:#2d241d!important;background:#fffaf5!important}
select option:checked{color:#f7efe5!important;background:#2b1c12!important}
p em{color:var(--muted)!important}
.navigation-buttons{border-top-color:rgba(120,84,45,.18)!important}
.nav-button,.submit-button,.btn-primary{
  border:1px solid rgba(181,139,84,.34)!important;
  color:#f8ead8!important;
  font-family:Arial,sans-serif!important;
  letter-spacing:.12em!important;
  background:#20150f!important;
  box-shadow:0 12px 28px rgba(32,21,15,.20)!important;
}
.nav-button:hover:not(:disabled),.submit-button:hover,.btn-primary:hover:not(:disabled){
  transform:translateY(-2px)!important;
  box-shadow:0 16px 32px rgba(32,21,15,.28)!important;
}
.submit-button{
  color:#20150f!important;
  background:linear-gradient(92deg,#9c713f,#e3c68f 45%,#b58b54 76%,#d9b978)!important;
  border-color:rgba(120,84,45,.28)!important;
}
.required{color:#9e2b23!important}
.age-modal{background:rgba(12,9,7,.90)!important;backdrop-filter:blur(8px)}
.age-modal-content{
  color:#f7efe5!important;
  border:1px solid rgba(181,139,84,.42)!important;
  background:linear-gradient(180deg,#21160f,#15100c)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.42)!important;
}
.age-modal-logo{filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))}
.age-modal-text,.age-modal-text p{color:#efe3d6!important}
.button,.button.gold,.w-button{
  border-radius:999px!important;
  color:#20150f!important;
  background:linear-gradient(92deg,#9c713f,#e3c68f 45%,#b58b54 76%,#d9b978)!important;
}
@media(max-width:560px){
  body{padding:15px 6px 28px!important}
  h1{font-size:1.75rem!important}
}

/* V88 · ajuste exclusivo cuando el configurador vive dentro de la modal principal */
html,body{min-height:100%!important}
body{padding:18px 18px 32px!important;background:linear-gradient(180deg,#f7efe5 0%,#efe2d3 100%)!important}
body:after{opacity:.55!important}
form{max-width:1080px!important;margin:0 auto!important}
.submit-button{min-height:50px!important;padding:13px 24px!important}
@media(max-width:560px){body{padding:10px 5px 22px!important}.tabs-container,.section{border-radius:18px!important}}


/* V89 · compactación final de producción */
html{scroll-padding-top:8px!important}
body{padding:10px 10px 18px!important}
form{max-width:920px!important}
h1{max-width:900px!important;font-size:clamp(1.65rem,3.1vw,2.65rem)!important;line-height:1.04!important;margin:0 auto 12px!important}
h1:after{width:110px!important;margin-top:10px!important}
.tabs-container,.section{max-width:920px!important;width:min(920px,calc(100% - 10px))!important;border-radius:18px!important}
.tabs-container{padding:10px!important;margin-bottom:12px!important}
.tabs{gap:7px!important;margin-bottom:8px!important}
.tab{min-height:38px!important;padding:8px 7px!important;border-radius:11px!important;font-size:.76rem!important;line-height:1.15!important}
.tab-indicator{padding:5px 12px!important;font-size:.74rem!important}
.section{padding:16px 18px!important}
h2{margin-bottom:14px!important;padding:10px 14px 10px 42px!important;border-radius:13px!important;font-size:.82rem!important;letter-spacing:.06em!important}
h2:before{left:15px!important;width:14px!important;height:14px!important;box-shadow:0 0 0 4px rgba(181,139,84,.12)!important}
.form-grid{gap:8px 14px!important}
label{margin-bottom:4px!important;font-size:.80rem!important;line-height:1.25!important}
input,select,textarea{min-height:38px!important;margin-bottom:7px!important;padding:8px 10px!important;border-radius:10px!important;font-size:.88rem!important;line-height:1.25!important}
select{cursor:pointer!important;color-scheme:light!important;background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px!important;background-size:5px 5px,5px 5px!important;padding-right:34px!important}
textarea{min-height:60px!important}
select option,select option:checked,select option:hover{color:#2d241d!important;background:#fffaf5!important;font-weight:400!important}
.navigation-buttons{max-width:920px!important;width:min(920px,calc(100% - 10px))!important;margin-top:10px!important;padding-top:10px!important;gap:10px!important}
.nav-button{min-width:126px!important;min-height:38px!important;padding:9px 15px!important;font-size:.72rem!important}
.submit-button{max-width:280px!important;min-height:42px!important;margin-top:14px!important;padding:10px 18px!important;font-size:.78rem!important}
p em{font-size:.82rem!important}

/* Evita que al cambiar de etapa el usuario quede visualmente perdido dentro del iframe. */
.tab,.nav-button,.submit-button,select{touch-action:manipulation!important}

@media(max-width:760px){
  body{padding:8px 6px 16px!important}
  h1{font-size:clamp(1.45rem,6.5vw,2rem)!important;margin-bottom:9px!important}
  .tabs-container,.section,.navigation-buttons{width:100%!important;max-width:none!important}
  .tabs-container{padding:8px!important;overflow:hidden!important}
  .tabs{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;margin-bottom:7px!important;padding-bottom:2px!important;scrollbar-width:thin!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important}
  .tab{flex:0 0 auto!important;min-width:102px!important;min-height:38px!important;padding:8px 10px!important;font-size:.72rem!important;scroll-snap-align:start!important}
  .section{padding:12px!important;border-radius:14px!important}
  h2{margin-bottom:10px!important;padding:9px 11px 9px 37px!important;border-radius:11px!important;font-size:.78rem!important}
  h2:before{left:13px!important;width:13px!important;height:13px!important}
  .form-grid{grid-template-columns:1fr!important;gap:2px!important}
  .form-grid .full-width{grid-column:1!important}
  label{font-size:.79rem!important}
  input,select,textarea{min-height:44px!important;margin-bottom:7px!important;padding:10px 11px!important;border-radius:10px!important;font-size:16px!important}
  textarea{min-height:72px!important}
  .navigation-buttons{flex-direction:row!important;margin-top:8px!important;padding-top:8px!important}
  .nav-button{width:auto!important;min-width:0!important;flex:1 1 0!important;min-height:42px!important;padding:9px 10px!important;font-size:.68rem!important}
  .submit-button{max-width:none!important;min-height:44px!important;font-size:.74rem!important}
}
@media(max-width:420px){
  body{padding:6px 4px 12px!important}
  h1{font-size:1.38rem!important}
  .tabs-container{padding:7px!important}
  .tab{min-width:94px!important;font-size:.67rem!important}
  .section{padding:10px!important}
  h2{font-size:.73rem!important;padding-right:9px!important}
  .navigation-buttons{gap:7px!important}
  .nav-button{font-size:.64rem!important;letter-spacing:.035em!important}
}
@media(pointer:coarse){
  select{-webkit-appearance:auto!important;appearance:auto!important;background-image:none!important;padding-right:10px!important}
  select option{font-size:16px!important}
}

/* V91 · desplegables inequívocos en escritorio, tablet y móvil */
select{
  -webkit-appearance:none!important;
  appearance:none!important;
  cursor:pointer!important;
  background-image:url("../images/ui-chevron-down.svg")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:18px 18px!important;
  padding-right:42px!important;
}
select:hover{border-color:rgba(180,143,85,.72)!important}
select:focus{background-image:url("../images/ui-chevron-down.svg")!important}
@media(pointer:coarse){
  select{
    -webkit-appearance:none!important;
    appearance:none!important;
    background-image:url("../images/ui-chevron-down.svg")!important;
    background-repeat:no-repeat!important;
    background-position:right 12px center!important;
    background-size:18px 18px!important;
    padding-right:42px!important;
  }
  select option{font-size:16px!important}
}
@media(max-width:480px){select{background-size:17px 17px!important;background-position:right 10px center!important;padding-right:38px!important}}

/* V92 · FIX DEFINITIVO SELECTS · usar indicador nativo del navegador una sola vez */
select{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  background-image:none!important;
  background-repeat:no-repeat!important;
  background-position:initial!important;
  background-size:auto!important;
  padding-right:12px!important;
  color:#2d241d!important;
  color-scheme:light!important;
}
select:focus,
select:hover{
  background-image:none!important;
}
select option{
  background-image:none!important;
  color:#2d241d!important;
  background:#fffaf5!important;
}
@media(pointer:coarse){
  select{
    -webkit-appearance:auto!important;
    appearance:auto!important;
    background-image:none!important;
    padding-right:10px!important;
  }
}


/* V93 · FORMULARIO MOBILE-FIRST FINAL
   Cargado al final del <head>; prioridad explícita sobre el CSS histórico del formulario. */
html{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
body{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:10px 10px 18px!important;
  overflow-x:hidden!important;
}
form{width:100%!important;max-width:900px!important;margin:0 auto!important}
.tabs-container,.section,.navigation-buttons{
  width:100%!important;
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.tabs-container,.section{box-shadow:0 12px 32px rgba(68,43,23,.10)!important}
h1{
  max-width:850px!important;
  margin:0 auto 10px!important;
  font-size:clamp(1.5rem,3vw,2.3rem)!important;
  line-height:1.04!important;
}
h1:after{margin-top:8px!important;width:86px!important}
.tabs-container{padding:8px!important;margin-bottom:9px!important;border-radius:15px!important}
.tabs{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0 0 7px!important;
  overflow:visible!important;
}
.tab{
  min-width:0!important;
  min-height:36px!important;
  padding:7px 5px!important;
  border-radius:10px!important;
  font-size:.70rem!important;
  line-height:1.1!important;
}
.tab-indicator{padding:4px 11px!important;font-size:.70rem!important}
.section{padding:13px 14px!important;border-radius:15px!important}
h2{
  min-height:39px!important;
  display:flex!important;
  align-items:center!important;
  margin:0 0 11px!important;
  padding:8px 12px 8px 38px!important;
  border-radius:11px!important;
  font-size:.76rem!important;
  line-height:1.15!important;
  letter-spacing:.055em!important;
}
h2:before{left:13px!important;width:12px!important;height:12px!important;box-shadow:0 0 0 4px rgba(181,139,84,.12)!important}
.form-grid{gap:4px 12px!important}
label{margin:0 0 4px!important;font-size:.77rem!important;line-height:1.22!important}
input,select,textarea{
  min-height:40px!important;
  margin:0 0 7px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  font-size:.88rem!important;
  line-height:1.22!important;
}
textarea{min-height:62px!important}
.navigation-buttons{margin-top:8px!important;padding-top:8px!important;gap:8px!important}
.nav-button{
  min-height:38px!important;
  min-width:116px!important;
  padding:8px 12px!important;
  font-size:.68rem!important;
}
.submit-button{
  min-height:42px!important;
  max-width:260px!important;
  margin-top:10px!important;
  padding:9px 14px!important;
  font-size:.72rem!important;
}
select{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  background-image:none!important;
  padding-right:10px!important;
  color-scheme:light!important;
}
select:focus,select:hover{background-image:none!important}

@media(max-width:760px){
  body{padding:6px 6px 12px!important;background:#f7efe5!important}
  body:before,body:after{display:none!important}
  h1{display:none!important}
  .tabs-container{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    padding:6px!important;
    margin-bottom:7px!important;
    border-radius:0 0 13px 13px!important;
    box-shadow:0 7px 18px rgba(68,43,23,.10)!important;
  }
  .tabs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .tab{
    min-width:0!important;
    min-height:38px!important;
    padding:5px 2px!important;
    border-radius:9px!important;
    font-size:0!important;
    overflow:hidden!important;
  }
  .tab::after{
    content:attr(data-step)!important;
    font:700 11px/1 Arial,sans-serif!important;
    letter-spacing:.06em!important;
  }
  .tab-indicator{
    margin-top:5px!important;
    padding:3px 9px!important;
    font-size:.68rem!important;
  }
  .section{
    padding:10px!important;
    border-radius:13px!important;
    box-shadow:0 8px 22px rgba(68,43,23,.08)!important;
  }
  h2{
    min-height:38px!important;
    margin-bottom:9px!important;
    padding:8px 9px 8px 35px!important;
    border-radius:10px!important;
    font-size:.72rem!important;
    letter-spacing:.045em!important;
  }
  h2:before{left:12px!important;width:11px!important;height:11px!important}
  .form-grid{grid-template-columns:1fr!important;gap:0!important}
  .form-grid .full-width{grid-column:1!important}
  label{margin:0 0 3px!important;font-size:.76rem!important}
  input,select,textarea{
    min-height:42px!important;
    margin-bottom:7px!important;
    padding:9px 10px!important;
    border-radius:10px!important;
    font-size:16px!important;
    line-height:1.2!important;
  }
  textarea{min-height:68px!important}
  .navigation-buttons{
    position:relative!important;
    flex-direction:row!important;
    margin-top:7px!important;
    padding-top:7px!important;
    gap:7px!important;
  }
  .nav-button{
    width:auto!important;
    min-width:0!important;
    flex:1 1 0!important;
    min-height:42px!important;
    padding:8px 8px!important;
    font-size:.64rem!important;
  }
  .submit-button{
    width:100%!important;
    max-width:none!important;
    min-height:44px!important;
    margin-top:9px!important;
    font-size:.70rem!important;
  }
  p em{font-size:.74rem!important;line-height:1.45!important}
}
@media(max-width:380px){
  body{padding:5px 4px 10px!important}
  .tabs-container{padding:5px!important}
  .tab{min-height:36px!important}
  .tab::after{font-size:10px!important}
  .section{padding:9px!important}
  h2{font-size:.68rem!important}
  label{font-size:.72rem!important}
}

/* V95 language/mobile stability */
html,body,body *{-webkit-hyphens:none!important;hyphens:none!important;word-break:normal;}
@media(max-width:640px){
  .form-container,.form-wrapper,.container{max-width:100%!important;box-sizing:border-box!important;}
  input,select,textarea,button{max-width:100%!important;box-sizing:border-box!important;}
  label,p,h1,h2,h3,h4,.text-size-medium{overflow-wrap:normal!important;word-break:normal!important;}
}