/* ═══════════════════════════════════════════════════════════════
   Inergia Calculadora — CSS front-end v1.1
   Prefijo ic- para evitar conflictos con el tema WordPress.
   
   CORRECCIONES v1.1:
   - Reset margin/padding SOLO dentro del root, sin afectar herencia
   - Hero con fondo oscuro corporativo restaurado
   - Espaciado general ampliado para no verse compacto
   - Wrapper que rompe el contenedor del tema (full-bleed)
   - Tipografía escalada para mejor legibilidad
   - Protección extra contra estilos globales de WordPress/temas
═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts (Barlow) ─────────────────────────────────────
   Se carga desde el plugin PHP, pero por si acaso:           */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
#inergia-calculadora-root {
  --ic-primary:    #3BAFDA;
  --ic-primary-dk: #2196B8;
  --ic-primary-lt: #62C8E8;
  --ic-dark:       #111318;
  --ic-dark2:      #1C1F26;
  --ic-accent:     #1A2540;
/*  --ic-success:    #1A8A4A;*/
  --ic-text:       #1A1D24;
  --ic-mid:        #5A5F70;
  --ic-light:      #8C92A4;
  --ic-border:     #E2E5EC;
  --ic-bg:         #FFFFFF;
  --ic-bg2:        #F7F8FA;
  --ic-bg3:        #EFF1F5;
  --ic-r:          8px;
  --ic-rl:         14px;
  --ic-shadow:     0 8px 48px rgba(0,0,0,.13);
  --ic-font-head:  'Barlow Condensed', sans-serif;
  --ic-font:       'Barlow', sans-serif;
}

/* ── Reset limpio — SOLO dentro del root ────────────────────── */
/* No usamos margin:0/padding:0 en * porque rompe inputs y botones
   del tema. En su lugar neutralizamos propiedad a propiedad.   */
#inergia-calculadora-root *,
#inergia-calculadora-root *::before,
#inergia-calculadora-root *::after {
  box-sizing: border-box;
}

/* Protección contra estilos globales de WordPress/temas */
#inergia-calculadora-root h1,
#inergia-calculadora-root h2,
#inergia-calculadora-root h3,
#inergia-calculadora-root p,
#inergia-calculadora-root ul,
#inergia-calculadora-root ol,
#inergia-calculadora-root li {
  margin:  0;
  padding: 0;
}

/* ── Wrapper raíz ───────────────────────────────────────────── */
/* Ocupa el ancho del viewport rompiendo el contenedor del tema */
#inergia-calculadora-root {
  font-family:      var(--ic-font);
  color:            var(--ic-text);
  background:       var(--ic-bg);
  /* Rompe el contenedor estrecho del tema WordPress */
  width:            100vw;
  position:         relative;
  left:             50%;
  right:            50%;
  margin-left:      -50vw;
  margin-right:     -50vw;
  /* Padding interno para que el contenido no toque los bordes */
  padding-bottom:   48px;
  line-height:      1.5;
}

/* ── HERO — fondo oscuro corporativo ────────────────────────── */
.ic-hero {
  background: var(--ic-bg);
    padding: 52px 40px 44px;
    position: relative;
    overflow: hidden;
    margin: -10px; /* para compensar el padding del root y que el fondo llegue a los bordes */
}
.ic-hero::before {
  content:       '';
  position:      absolute;
  top:           -80px;
  right:         -80px;
  width:         360px;
  height:        360px;
  background:    var(--ic-bg);
  opacity:       .06;
  border-radius: 50%;
}
/*.ic-hero::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     3px;
  background: linear-gradient(90deg, var(--ic-primary) 0%, transparent 70%);
}*/
.ic-hero-inner {
  display:     flex;
  align-items: center;
  gap:         24px;
  max-width:   1200px;
  margin:      0 auto;
  position:    relative;
}
.ic-hero-logo img {
  width:       76px;
  height:      76px;
  object-fit:  contain;
  flex-shrink: 0;
}
.ic-eyebrow {
  font-family:    var(--ic-font-head);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--ic-primary);
  margin-bottom:  10px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.ic-eyebrow::before {
  content:    '';
  width:      24px;
  height:     2px;
  background: var(--ic-primary);
}
/* Hero title — sobreescribe h1 del tema */
.ic-hero .ic-title {
  font-family:   var(--ic-font-head) !important;
  font-size:     40px !important;
  font-weight:   800 !important;
  color:         var(--ic-dark) !important;
  line-height:   1.1 !important;
  margin-bottom: 10px !important;
  margin-top:    0 !important;
  padding:       0 !important;
  border:        none !important;
  text-shadow:   none !important;
}
.ic-hero .ic-title em {
  font-style: normal;
  color:      var(--ic-primary);
}
.ic-sub {
  font-size:   14px;
  color:       #8C96AA;
  line-height: 1.6;
  margin:      0;
}

/* ── Layout principal ───────────────────────────────────────── */
.ic-main {
  display:    flex;
  gap:        36px;
  padding:    40px 40px 0;
  max-width:  1200px;
  margin:     0 auto;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.ic-sidebar {
  width:      230px;
  flex-shrink: 0;
  position:   sticky;
  top:        90px; /* respeta la barra de admin de WordPress */
  align-self: flex-start;
}
.ic-sidebar-title {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ic-light);
  margin-bottom:  16px;
  padding:        0;
}
.ic-step-nav {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.ic-step-section {
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--ic-light);
  padding:        14px 10px 5px;
  margin:         0;
}
.ic-step-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 12px;
  border-radius: var(--ic-r);
  cursor:      pointer;
  transition:  all .2s;
  border:      1px solid transparent;
  font-size:   13px;
  font-weight: 500;
  color:       var(--ic-mid);
  margin:      0;
}
.ic-step-item:hover { background: var(--ic-bg2); }
/*.ic-step-item.ic-active {
  background:   #EFF8FC;
  border-color: #B8DFF0;
  color:        var(--ic-primary-dk);
  font-weight:  600;
}*/
/* El estado "hecho" es para pasos anteriores al actual, que ya se completaron
se puede modificar el color o simpemente eliminar y modificar el color  a uno más claro/ oscuro, para que simule que has pasado la página */
/*.ic-step-item.ic-done .ic-step-dot {
  background:   transparent    !important;
  border-color: var(--ic-primary) !important;
  color:        var(--ic-primary) !important;
}*/
.ic-step-dot {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  border:        2px solid var(--ic-border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     11px;
  font-weight:   700;
  color:         var(--ic-light);
  flex-shrink:   0;
  transition:    all .2s;
  margin:        0;
  padding:       0;
}
/*.ic-step-item.ic-active .ic-step-dot {
  background:   var(--ic-primary);
  border-color: var(--ic-primary);
  color:        white;
}*/

/* ── TARJETA PRINCIPAL ──────────────────────────────────────── */
.ic-card {
  flex:          1;
  background:    var(--ic-bg);
  border:        1px solid var(--ic-border);
  border-radius: var(--ic-rl);
  box-shadow:    var(--ic-shadow);
  overflow:      hidden;
  min-width:     0; /* evita desbordamiento en flex */
}

/* ── Barra de progreso ──────────────────────────────────────── */
.ic-topbar {
  background:    var(--ic-dark);
  border-bottom: 1px solid #2C3040;
  padding:       14px 28px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
}
.ic-step-counter {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          #6C7485;
  white-space:    nowrap;
  margin:         0;
  padding:        0;
}
.ic-step-counter span { color: var(--ic-primary); }
.ic-progress-wrap {
  flex:          1;
  height:        5px;
  background:    #2C3040;
  border-radius: 5px;
  overflow:      hidden;
}
.ic-progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--ic-primary), var(--ic-primary-lt));
  border-radius: 5px;
  transition:    width .5s cubic-bezier(.4,0,.2,1);
}
.ic-progress-pct {
  font-size:   13px;
  font-weight: 700;
  color:       var(--ic-primary);
  margin:      0;
  padding:     0;
}

/* ── PÁGINAS ────────────────────────────────────────────────── */
.ic-page {
  display:   none;
  padding:   36px 36px 28px;
  animation: icFade .3s ease;
}
.ic-page.ic-active { display: block; }
@keyframes icFade {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ic-eyebrow { margin: 10px; }

/* Título de pregunta — protección contra h2 del tema */
.ic-title-q {
  font-family:   var(--ic-font-head) !important;
  font-size:     27px !important;
  font-weight:   700 !important;
  color:         var(--ic-text) !important;
  line-height:   1.2 !important;
  margin-bottom: 6px !important;
  margin-top:    0 !important;
  padding:       0 !important;
  border:        none !important;
}
.ic-hint {
  font-size:     13px;
  color:         var(--ic-mid);
  margin-bottom: 24px;
  margin-top:    0;
  line-height:   1.55;
}
.ic-divider {
  border:     none;
  border-top: 1px solid var(--ic-border);
  margin:     26px 0;
}
.ic-sub-title {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ic-mid);
  margin:  10px;
  /*margin-top:     0;*/
  padding:        2px 0;
}

/* ── OPCIONES (grid 2 columnas) ─────────────────────────────── */
.ic-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-top: 10px;
}
.ic-opt {
  border:        2px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       18px 20px;
  cursor:        pointer;
  transition:    all .17s;
  background:    var(--ic-bg);
  position:      relative;
}
.ic-opt:hover {
  border-color: var(--ic-primary);
  background:   #F0F9FD;
  transform:    translateY(-2px);
}
.ic-opt.ic-selected {
  border-color: var(--ic-primary);
  background:   #EFF8FC;
  box-shadow:   0 0 0 3px rgba(59,175,218,.12);
}
.ic-opt.ic-selected::after {
  content:         '✓';
  position:        absolute;
  top:             10px;
  right:           12px;
  width:           18px;
  height:          18px;
  background:      var(--ic-primary);
  color:           white;
  border-radius:   50%;
  font-size:       10px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     18px;
  text-align:      center;
}
.ic-opt-label {
  font-family:   var(--ic-font-head);
  font-size:     16px;
  font-weight:   700;
  color:         var(--ic-text);
  display:       block;
  margin-bottom: 2px;
  padding:       0;
}
.ic-opt.ic-selected .ic-opt-label { color: var(--ic-primary-dk); }
.ic-opt-sub {
  font-size:   12px;
  color:       var(--ic-light);
  display:     block;
  line-height: 1.4;
  margin:      0;
  padding:     0;
}
.ic-opt-badge {
  display:       inline-block;
  background:    var(--ic-bg3);
  border:        1px solid var(--ic-border);
  border-radius: 4px;
  font-size:     10px;
  font-weight:   600;
  color:         var(--ic-mid);
  padding:       3px 7px;
  margin-top:    6px;
}
.ic-opt.ic-selected .ic-opt-badge {
  background:   var(--ic-primary);
  border-color: var(--ic-primary);
  color:        white;
}

/* ── TOGGLE ─────────────────────────────────────────────────── */
.ic-toggle-wrap {
  background:    var(--ic-bg2);
  border:        1px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       18px 22px;
  margin: 10px; /*Antes era margin-bottom: 18px*/
}
.ic-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.ic-toggle-label {
  font-size:   14px;
  font-weight: 600;
  color:       var(--ic-text);
  margin:      0;
  padding:     0;
}
.ic-toggle-sub {
  font-size:  12px;
  color:      var(--ic-light);
  margin-top: 3px;
  padding:    0;
}
.ic-toggle {
  position:   relative;
  width:      46px;
  height:     24px;
  flex-shrink: 0;
}
.ic-toggle input { opacity: 0; width: 0; height: 0; }
.ic-toggle-track {
  position:      absolute;
  inset:         0;
  background:    var(--ic-border);
  border-radius: 24px;
  cursor:        pointer;
  transition:    background .2s;
}
.ic-toggle-track::after {
  content:       '';
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         20px;
  height:        20px;
  background:    white;
  border-radius: 50%;
  transition:    transform .2s;
  box-shadow:    0 1px 4px rgba(0,0,0,.2);
}
.ic-toggle input:checked + .ic-toggle-track { background: var(--ic-primary); }
.ic-toggle input:checked + .ic-toggle-track::after { transform: translateX(22px); }

/* ── DIMENSIONES ────────────────────────────────────────────── */
.ic-dim-fields {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   14px;
  transition:            opacity .3s;
}
.ic-dim-fields.ic-locked { opacity: .3; pointer-events: none; }
.ic-field label {
  display:        block;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ic-mid);
  margin-bottom:  6px;
  padding:        0;
}
.ic-field-wrap { position: relative; }
.ic-field-wrap input {
  width:          100%;
  border:         1.5px solid var(--ic-border);
  border-radius:  var(--ic-r);
  padding:        10px 44px 10px 14px;
  font-size:      15px;
  font-weight:    600;
  color:          var(--ic-text);
  background:     var(--ic-bg);
  font-family:    var(--ic-font);
  -moz-appearance:  textfield;
  appearance:       textfield;
  transition:     border-color .15s;
  margin:         0;
}
.ic-field-wrap input::-webkit-outer-spin-button,
.ic-field-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ic-field-wrap input:focus {
  outline:    none;
  border-color: var(--ic-primary);
  box-shadow: 0 0 0 3px rgba(59,175,218,.1);
}
.ic-field-wrap input.ic-err { border-color: #D32F2F; }
.ic-unit {
  position:   absolute;
  right:      12px;
  top:        50%;
  transform:  translateY(-50%);
  font-size:  10px;
  font-weight: 700;
  color:      var(--ic-light);
  pointer-events: none;
}
.ic-readonly input { background: var(--ic-bg2) !important; color: var(--ic-mid) !important; }
.ic-fnote   { font-size: 11px; color: var(--ic-primary-dk); margin-top: 5px; font-weight: 500; padding: 0; }
.ic-fnote-g { font-size: 11px; color: var(--ic-light); margin-top: 5px; padding: 0; }
.ic-field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── IP ─────────────────────────────────────────────────────── */
.ic-info-banner {
  background:    #EEF8FD;
  border:        1px solid #B8DFF0;
  border-radius: var(--ic-r);
  padding:       10px 14px;
  font-size:     12px;
  color:         var(--ic-primary-dk);
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 16px;
  margin-top:    0;
}
.ic-info-note {
  display:       none;
  background:    #EEF8FD;
  border:        1px solid #B8DFF0;
  border-radius: var(--ic-r);
  padding:       10px 14px;
  font-size:     12px;
  color:         var(--ic-primary-dk);
  margin-top:    14px;
  align-items:   center;
  gap:           8px;
}
.ic-ip-locked   { opacity: .3; pointer-events: none; transition: opacity .3s; }
.ic-ip-unlocked { opacity: 1; pointer-events: auto; transition: opacity .3s; }
.ic-ip-wrap {
  background:     var(--ic-bg2);
  border:         1px solid var(--ic-border);
  border-radius:  var(--ic-rl);
  padding:        28px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
}
.ic-ip-display {
  font-family:    var(--ic-font-head);
  font-size:      64px;
  font-weight:    800;
  letter-spacing: -2px;
  line-height:    1;
  margin:         0;
  padding:        0;
}
.ic-ip-pre { color: var(--ic-light); font-size: 36px; }
.ic-ip-d1  { color: var(--ic-primary); }
.ic-ip-d2  { color: var(--ic-accent); }
.ic-ip-controls {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   22px;
  width:                 100%;
  margin-top:            14px;
}
.ic-ip-lbl {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--ic-mid);
  margin-bottom:  8px;
  display:        flex;
  align-items:    center;
  gap:            5px;
  padding:        0;
}
.ic-dot       { width: 8px; height: 8px; border-radius: 50%; background: var(--ic-primary); display: inline-block; }
.ic-dot.ic-blue { background: var(--ic-accent); }
.ic-ip-btns { display: flex; gap: 7px; }
.ic-ip-btn {
  flex:          1;
  padding:       10px 4px;
  border:        2px solid var(--ic-border);
  border-radius: var(--ic-r);
  background:    var(--ic-bg);
  font-family:   var(--ic-font-head);
  font-size:     17px;
  font-weight:   700;
  color:         var(--ic-mid);
  cursor:        pointer;
  transition:    all .15s;
  text-align:    center;
  margin:        0;
}
.ic-ip-btn:hover { border-color: var(--ic-primary); color: var(--ic-primary); background: #F0F9FD; }
.ic-ip-btn.ic-active { border-color: var(--ic-primary); background: var(--ic-primary); color: white; }
.ic-ip-btn.ic-active.ic-blue { border-color: var(--ic-accent); background: var(--ic-accent); }
.ic-ip-desc {
  background:    var(--ic-bg3);
  border-radius: var(--ic-r);
  padding:       13px 16px;
  margin-top:    16px;
  width:         100%;
}
.ic-ip-desc-t { font-size: 13px; font-weight: 700; color: var(--ic-text); margin-bottom: 3px; padding: 0; }
.ic-ip-desc-s { font-size: 12px; color: var(--ic-mid); line-height: 1.5; margin: 0; padding: 0; }
.ic-info-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  background:      var(--ic-primary);
  color:           white;
  border-radius:   50%;
  text-decoration: none;
  font-size:       12px;
  font-weight:     700;
  font-family:     serif;
  margin-left:     7px;
  vertical-align:  middle;
  transition:      all .2s;
}
.ic-info-link:hover { background: var(--ic-primary-dk); transform: scale(1.1); }

/* ── VOLTAJE / ARRANQUE ─────────────────────────────────────── */
.ic-volt {
  border:        2px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       20px 22px;
  cursor:        pointer;
  transition:    all .17s;
  background:    var(--ic-bg);
  text-align:    center;
}
.ic-volt:hover { border-color: var(--ic-primary); background: #F0F9FD; transform: translateY(-2px); }
.ic-volt.ic-selected { border-color: var(--ic-primary); background: #EFF8FC; box-shadow: 0 0 0 3px rgba(59,175,218,.12); }
.ic-volt-val { font-family: var(--ic-font-head); font-size: 26px; font-weight: 800; color: var(--ic-text); margin: 0; padding: 0; }
.ic-volt.ic-selected .ic-volt-val { color: var(--ic-primary-dk); }
.ic-volt-type { font-size: 12px; color: var(--ic-light); margin-top: 3px; padding: 0; }

.ic-arr-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   10px;
}
.ic-arr {
  border:        2px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       18px 12px;
  cursor:        pointer;
  transition:    all .17s;
  background:    var(--ic-bg);
  text-align:    center;
}
.ic-arr:hover { border-color: var(--ic-primary); background: #F0F9FD; }
.ic-arr.ic-selected { border-color: var(--ic-primary); background: #EFF8FC; box-shadow: 0 0 0 3px rgba(59,175,218,.12); }
.ic-arr-label { font-family: var(--ic-font-head); font-size: 15px; font-weight: 700; color: var(--ic-text); margin: 0; padding: 0; }
.ic-arr.ic-selected .ic-arr-label { color: var(--ic-primary-dk); }
.ic-arr-sub { font-size: 11px; color: var(--ic-light); margin-top: 3px; padding: 0; line-height: 1.3; }

/* ── MULTI-SELECT ───────────────────────────────────────────── */
.ic-multi-stack { display: flex; flex-direction: column; gap: 10px; }
.ic-multi {
  border:        2px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       16px 18px;
  cursor:        pointer;
  transition:    all .17s;
  background:    var(--ic-bg);
  position:      relative;
  margin-top: 10px;
}
.ic-multi:hover { border-color: var(--ic-primary); background: #F0F9FD; }
.ic-multi.ic-selected { border-color: var(--ic-primary); background: #EFF8FC; }
.ic-mcheck {
  position:      absolute;
  top:           15px;
  right:         15px;
  width:         20px;
  height:        20px;
  border:        2px solid var(--ic-border);
  border-radius: 5px;
  background:    var(--ic-bg);
  transition:    all .15s;
}
.ic-multi.ic-selected .ic-mcheck { background: var(--ic-primary); border-color: var(--ic-primary); }
.ic-multi.ic-selected .ic-mcheck::after {
  content:     '✓';
  color:       white;
  font-size:   11px;
  font-weight: 700;
  line-height: 20px;
  text-align:  center;
  display:     block;
}
.ic-mlabel { font-family: var(--ic-font-head); font-size: 15px; font-weight: 700; color: var(--ic-text); margin-bottom: 3px; padding-right: 32px; padding-left: 0; padding-top: 0; padding-bottom: 0; }
.ic-multi.ic-selected .ic-mlabel { color: var(--ic-primary-dk); }
/* Elemento dependiente desactivado */
.ic-multi.ic-disabled {
  opacity:        0.4;
  pointer-events: none;
  cursor:         not-allowed;
}
/* Subopciones anidadas dentro de un subpanel */
.ic-multi.ic-multi-sub {
  margin-top:    6px;
  padding:       12px 14px;
  background:    white;
  border-radius: 8px;
  border:        1.5px solid var(--ic-border);
}
.ic-multi.ic-multi-sub:hover { border-color: var(--ic-primary); background: #F5FBFE; }
.ic-multi.ic-multi-sub.ic-selected { border-color: var(--ic-primary); background: #EFF8FC; }
.ic-multi.ic-multi-sub .ic-mcheck { top: 12px; right: 12px; width: 17px; height: 17px; }
.ic-msub { font-size: 12px; color: var(--ic-light); line-height: 1.4; padding-right: 32px; margin: 0; padding-left: 0; padding-top: 0; padding-bottom: 0; }

.ic-subpanel {
  display:       none;
  margin-top:    13px;
  background:    var(--ic-bg2);
  border:        1px solid var(--ic-border);
  border-radius: var(--ic-r);
  padding:       14px 16px;
}
.ic-subpanel.ic-sp-show { display: block; }
.ic-sp-title { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ic-mid); margin-bottom: 10px; padding: 0; }
.ic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-chip {
  padding:       7px 15px;
  border:        1.5px solid var(--ic-border);
  border-radius: 20px;
  background:    var(--ic-bg);
  font-size:     13px;
  font-weight:   600;
  color:         var(--ic-mid);
  cursor:        pointer;
  transition:    all .15s;
  user-select:   none;
  margin:        0;
}
.ic-chip:hover { border-color: var(--ic-primary); color: var(--ic-primary); }
.ic-chip.ic-chip-sel { border-color: var(--ic-primary); background: var(--ic-primary); color: white; }

.ic-qty { display: flex; align-items: center; gap: 12px; }
.ic-qbtn {
  width:         32px;
  height:        32px;
  border:        1.5px solid var(--ic-border);
  border-radius: 6px;
  background:    var(--ic-bg);
  font-size:     18px;
  font-weight:   700;
  color:         var(--ic-mid);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all .15s;
  margin:        0;
  padding:       0;
  line-height:   1;
}
.ic-qbtn:hover { border-color: var(--ic-primary); color: var(--ic-primary); }
.ic-qval { font-family: var(--ic-font-head); font-size: 22px; font-weight: 800; color: var(--ic-text); min-width: 28px; text-align: center; margin: 0; padding: 0; }
.ic-qlbl { font-size: 12px; color: var(--ic-light); margin: 0; padding: 0; }

/* ── NOTAS ──────────────────────────────────────────────────── */
.ic-notes-hint {
  background:    linear-gradient(135deg, #EFF8FC, #E3F4FC);
  border:        1px solid #B8DFF0;
  border-radius: var(--ic-rl);
  padding:       16px 20px;
  margin-bottom: 20px;
  margin-top:    0;
  display:       flex;
  gap:           14px;
  align-items:   flex-start;
}
.ic-notes-hint span { font-size: 22px; flex-shrink: 0; }
.ic-notes-hint div  { font-size: 13px; color: var(--ic-mid); line-height: 1.6; margin: 0; padding: 0; }
.ic-notes-wrap { position: relative; }
#ic-notas {
  width:         100%;
  min-height:    150px;
  border:        1.5px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       16px;
  font-size:     14px;
  color:         var(--ic-text);
  background:    var(--ic-bg);
  resize:        vertical;
  transition:    border-color .15s;
  line-height:   1.6;
  font-family:   var(--ic-font);
  margin:        0;
}
#ic-notas:focus { outline: none; border-color: var(--ic-primary); box-shadow: 0 0 0 3px rgba(59,175,218,.1); }
.ic-notes-count { position: absolute; bottom: 10px; right: 14px; font-size: 11px; color: var(--ic-light); pointer-events: none; }

/* ── CONTACTO ───────────────────────────────────────────────── */
.ic-contact-box {
  background:    var(--ic-bg2);
  border:        1px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       28px;
}
.ic-contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
  margin-bottom:         16px;
}
.ic-cf label {
  display:        block;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ic-mid);
  margin-bottom:  6px;
  padding:        0;
}
.ic-cf label span { color: var(--ic-primary); }
.ic-cf input {
  width:         100%;
  border:        1.5px solid var(--ic-border);
  border-radius: var(--ic-r);
  padding:       11px 14px;
  font-size:     14px;
  color:         var(--ic-text);
  background:    var(--ic-bg);
  transition:    border-color .15s;
  font-family:   var(--ic-font);
  margin:        0;
}
.ic-cf input:focus { outline: none; border-color: var(--ic-primary); box-shadow: 0 0 0 3px rgba(59,175,218,.1); }
.ic-cf input.ic-err { border-color: #D32F2F; }
.ic-cf.ic-full { grid-column: 1 / -1; }

.ic-copy-check {
  display:     flex;
  align-items: center;
  gap:         12px;
  background:  #EFF8FC;
  border:      1.5px solid #B8DFF0;
  border-radius: var(--ic-r);
  padding:     14px 18px;
  margin-top:  16px;
  cursor:      pointer;
}
.ic-copy-check:hover { background: #E3F4FC; }
.ic-copy-box {
  width:         20px;
  height:        20px;
  border:        2px solid var(--ic-primary);
  border-radius: 4px;
  background:    white;
  flex-shrink:   0;
  transition:    all .15s;
  margin:        0;
  padding:       0;
}
.ic-copy-box.ic-checked { background: var(--ic-primary); }
.ic-copy-box.ic-checked::after { content: '✓'; color: white; font-size: 12px; font-weight: 700; line-height: 15px; text-align: center; display: block; }
.ic-copy-lbl { font-size: 14px; font-weight: 600; color: var(--ic-text); margin: 0; padding: 0; }
.ic-copy-sub { font-size: 12px; color: var(--ic-mid); margin-top: 2px; padding: 0; }
.ic-privacy { font-size: 11px; color: var(--ic-light); line-height: 1.5; margin-top: 12px; padding: 0; }
.ic-privacy a { color: var(--ic-primary); text-decoration: none; }

/* ── CAPTCHA ────────────────────────────────────────────────── */
.ic-captcha-wrap {
  background:    var(--ic-bg2);
  border:        1.5px solid var(--ic-border);
  border-radius: var(--ic-rl);
  padding:       18px 22px;
  margin-top:    20px;
}
.ic-captcha-title {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ic-mid);
  margin-bottom:  13px;
  margin-top:     0;
  padding:        0;
  display:        flex;
  align-items:    center;
  gap:            6px;
}
.ic-captcha-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ic-captcha-q {
  font-family:   var(--ic-font-head);
  font-size:     22px;
  font-weight:   800;
  color:         var(--ic-dark);
  background:    white;
  border:        1.5px solid var(--ic-border);
  border-radius: var(--ic-r);
  padding:       10px 20px;
  letter-spacing: 1px;
  margin:        0;
}
.ic-captcha-ans {
  width:         80px;
  border:        1.5px solid var(--ic-border);
  border-radius: var(--ic-r);
  padding:       10px 14px;
  font-size:     18px;
  font-weight:   700;
  text-align:    center;
  font-family:   var(--ic-font);
  margin:        0;
}
.ic-captcha-ans:focus { outline: none; border-color: var(--ic-primary); box-shadow: 0 0 0 3px rgba(59,175,218,.1); }
.ic-captcha-ans.ic-err { border-color: #D32F2F; }
.ic-captcha-hint { font-size: 12px; color: var(--ic-light); margin: 0; padding: 0; }
.ic-captcha-ref {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--ic-primary);
  font-size:   18px;
  padding:     4px;
  border-radius: 4px;
  transition:  transform .2s;
  margin:      0;
  line-height: 1;
}
.ic-captcha-ref:hover { transform: rotate(180deg); }

/* ── MENSAJES DE ERROR ──────────────────────────────────────── */
.ic-err-msg {
  display:       none;
  align-items:   center;
  gap:           8px;
  background:    #FFF3F0;
  border:        1px solid #FFCBBF;
  border-radius: var(--ic-r);
  padding:       10px 14px;
  font-size:     13px;
  color:         #C43515;
  font-weight:   500;
  margin-top:    14px;
}

/* ── RESUMEN (página 9) ─────────────────────────────────────── */
.ic-budget-box {
  background:    linear-gradient(135deg, var(--ic-dark) 0%, #252830 50%, var(--ic-accent) 100%);
  border-radius: var(--ic-rl);
  padding:       28px 32px;
  text-align:    center;
  margin-bottom: 20px;
  position:      relative;
  overflow:      hidden;
}
.ic-budget-box::before {
  content:       '';
  position:      absolute;
  top:           -30px;
  right:         -30px;
  width:         130px;
  height:        130px;
  background:    var(--ic-primary);
  opacity:       .14;
  border-radius: 50%;
}
.ic-budget-box::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(90deg, var(--ic-primary), transparent);
}
.ic-budget-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #6C7485; margin-bottom: 8px; margin-top: 0; padding: 0; }
.ic-budget-amount { font-family: var(--ic-font-head); font-size: 52px; font-weight: 800; color: white; line-height: 1; margin-bottom: 6px; margin-top: 0; padding: 0; }
.ic-currency { font-size: 28px; color: var(--ic-primary); margin-right: 3px; }
.ic-budget-note { font-size: 12px; color: #6C7485; margin: 0; padding: 0; }

.ic-summary-section { margin-bottom: 20px; }
.ic-sum-title {
  font-family:   var(--ic-font-head);
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:         white;
  background:    var(--ic-dark);
  padding:       8px 14px;
  border-radius: var(--ic-r);
  margin-bottom: 10px;
  margin-top:    0;
  display:       flex;
  align-items:   center;
  gap:           7px;
}
.ic-sum-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-primary); flex-shrink: 0; }
.ic-sum-table { width: 100%; border-collapse: collapse; }
.ic-sum-table tr { border-bottom: 1px solid var(--ic-border); }
.ic-sum-table tr:last-child { border-bottom: none; }
.ic-sum-table td { padding: 10px 14px; font-size: 13px; vertical-align: top; margin: 0; }
.ic-sum-table td:first-child { font-weight: 700; color: var(--ic-mid); width: 40%; background: var(--ic-bg2); }
.ic-sum-table td:last-child { color: var(--ic-text); background: var(--ic-bg); }

.ic-client-box {
  background:    var(--ic-dark);
  border-radius: var(--ic-rl);
  padding:       20px 26px;
  margin-bottom: 20px;
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           12px 22px;
}
.ic-ci-lbl { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #6C7485; margin-bottom: 3px; margin-top: 0; padding: 0; }
.ic-ci-val { font-size: 14px; font-weight: 600; color: white; margin: 0; padding: 0; }

.ic-cta-box {
  background:    linear-gradient(90deg, #EFF8FC, #E3F4FC);
  border:        1.5px solid #B8DFF0;
  border-radius: var(--ic-rl);
  padding:       18px 24px;
  margin-bottom: 20px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
  flex-wrap:     wrap;
}
.ic-cta-text { font-size: 14px; color: var(--ic-text); margin: 0; padding: 0; }
.ic-cta-text strong { font-weight: 700; color: var(--ic-primary-dk); }
.ic-cta-btn {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  padding:     12px 22px;
  background:  var(--ic-dark);
  color:       white;
  border-radius: var(--ic-r);
  font-size:   13px;
  font-weight: 700;
  text-decoration: none;
  transition:  all .17s;
  white-space: nowrap;
}
.ic-cta-btn:hover { background: var(--ic-accent); transform: translateY(-1px); color: white; text-decoration: none; }

/* ── ESTADO DE ENVÍO ────────────────────────────────────────── */
.ic-status {
  border-radius: var(--ic-rl);
  padding:       20px 24px;
  margin-top:    18px;
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
}
.ic-loading { background: var(--ic-bg2); border: 1px solid var(--ic-border); }
.ic-success { background: #F0FBF4; border: 1px solid #A8DDB9; }
.ic-error   { background: #FFF3F0; border: 1px solid #FFCBBF; }
.ic-st-title { font-family: var(--ic-font-head); font-size: 17px; font-weight: 700; color: var(--ic-text); margin-bottom: 3px; margin-top: 0; padding: 0; }
.ic-st-txt   { font-size: 13px; color: var(--ic-mid); line-height: 1.5; margin: 0; padding: 0; }
.ic-spinner  {
  display:       inline-block;
  width:         24px;
  height:        24px;
  border:        3px solid var(--ic-border);
  border-top-color: var(--ic-primary);
  border-radius: 50%;
  animation:     icSpin .8s linear infinite;
  flex-shrink:   0;
  margin:        0;
}
@keyframes icSpin { to { transform: rotate(360deg); } }

/* ── BOTONES ANTERIOR / SIGUIENTE ───────────────────────────── */
.ic-card-footer {
  padding:         18px 36px 24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-top:      1px solid var(--ic-border);
  background:      var(--ic-bg2);
}
.ic-btn {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  padding:     12px 28px;
  border-radius: var(--ic-r);
  font-size:   14px;
  font-weight: 600;
  cursor:      pointer;
  transition:  all .17s;
  border:      none;
  font-family: var(--ic-font);
  margin:      0;
  line-height: 1.4;
}
.ic-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.ic-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ic-btn-ghost {
  background:  transparent;
  color:       var(--ic-mid);
  border:      1.5px solid var(--ic-border);
}
.ic-btn-ghost:hover:not(:disabled) { border-color: var(--ic-mid); color: var(--ic-text); background: var(--ic-bg); }
.ic-btn-primary {
  background:  var(--ic-primary);
  color:       white;
  box-shadow:  0 4px 14px rgba(59,175,218,.32);
}
.ic-btn-primary:hover:not(:disabled) { background: var(--ic-primary-dk); transform: translateY(-1px); }
.ic-btn-outline {
  background: white;
  color:      var(--ic-primary);
  border:     1.5px solid var(--ic-primary);
}
.ic-btn-outline:hover:not(:disabled) { background: #EFF8FC; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  #inergia-calculadora-root {
    /* En móvil no necesitamos el full-bleed agresivo */
    width:       100%;
    left:        auto;
    right:       auto;
    margin-left: auto;
    margin-right: auto;
  }
  .ic-main       { flex-direction: column; padding: 20px 20px 0; gap: 20px; }
  .ic-sidebar    { width: 100%; position: static; }
  .ic-step-nav   { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .ic-step-item  { flex-direction: column; text-align: center; padding: 8px 6px; gap: 4px; font-size: 11px; }
  .ic-step-section { display: none; }
  .ic-hero       { padding: 28px 20px 22px; }
  .ic-hero .ic-title { font-size: 28px !important; }
  .ic-hero-inner { flex-direction: column; gap: 12px; align-items: flex-start; }
  .ic-page       { padding: 22px 18px 18px; }
  .ic-card-footer { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .ic-grid-2     { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ic-arr-grid   { grid-template-columns: 1fr 1fr; }
  .ic-dim-fields { grid-template-columns: 1fr; }
  .ic-field-row-2 { grid-template-columns: 1fr; }
  .ic-contact-grid { grid-template-columns: 1fr; }
  .ic-ip-display { font-size: 52px; }
  .ic-client-box { grid-template-columns: 1fr; }
  .ic-budget-amount { font-size: 40px; }
  .ic-main { padding: 20px 16px 0; }
}

@media (max-width: 480px) {
  .ic-grid-2     { grid-template-columns: 1fr; }
  .ic-btn        { padding: 10px 18px; font-size: 13px; }
  .ic-budget-amount { font-size: 34px; }
  .ic-ip-display { font-size: 44px; }
}