/* ══ HERO — split layout ══ */
    .hero {
      min-height: 100vh;
      display: grid; grid-template-columns: 1fr 1fr;
      padding-top: 0; overflow: hidden;
    }

/* Lado izquierdo — contenido */
    .hero-left {
      display: flex; flex-direction: column; justify-content: center;
      padding: 80px 64px 80px 52px;
      position: relative;
    }

.hero-left-bg {
      position: absolute; inset: 0;
      /* ▼ REEMPLAZAR: background-image: url('../img/energia-hero.jpg'); background-size: cover; */
      background: linear-gradient(160deg, #100a00 0%, #0a0a0a 60%);
    }

.hero-left-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to right, rgba(10,10,10,.2) 0%, rgba(10,10,10,.95) 100%);
    }

.hero-left-inner { position: relative; }

.breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: rgba(255,255,255,.3); margin-bottom: 40px;
    }

.breadcrumb-sep { color: rgba(255,255,255,.2); }

.breadcrumb-cur { color: var(--orange); font-weight: 500; }

.eyebrow {
      display: flex; align-items: center; gap: 12px;
      font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--orange); margin-bottom: 24px;
    }

.hero h1 {
      font-size: clamp(40px, 4.5vw, 68px);
      font-weight: 900; line-height: .92; letter-spacing: -2.5px;
      color: #f0f0f0; margin-bottom: 28px;
    }

.hero h1 em { font-style: normal; color: var(--orange); display: block; }

.hero-sub {
      font-size: clamp(14px, 1.3vw, 16px); color: var(--muted);
      line-height: 1.75; max-width: 420px; margin-bottom: 48px;
    }

/* Puntos de valor rápidos */
    .hero-puntos { display: flex; flex-direction: column; gap: 0; }

.hero-punto {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 0; border-bottom: 1px solid var(--line);
      font-size: 14px; color: var(--soft);
    }

.hero-punto:last-child { border-bottom: none; }

.hp-check {
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.2);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

.hp-check svg { width: 10px; height: 10px; color: var(--orange); }

/* Lado derecho — formulario */
    .hero-right {
      background: var(--surface);
      border-left: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      padding: 80px 52px 80px 64px;
    }

.form-card { width: 100%; max-width: 440px; }

.form-title {
      font-size: 22px; font-weight: 800; letter-spacing: -.5px;
      color: #f0f0f0; margin-bottom: 6px;
    }

.form-sub { font-size: 13px; color: var(--muted); margin-bottom: 32px; line-height: 1.5; }

/* Formulario */
    .form { display: flex; flex-direction: column; gap: 14px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field input, .field select, .field textarea {
      background: #0a0a0a; border: 1px solid var(--line2);
      border-radius: 6px; padding: 12px 14px;
      font-size: 14px; color: #f0f0f0; font-family: inherit;
      transition: border-color .2s;
      appearance: none; -webkit-appearance: none;
    }

.field input::placeholder, .field textarea::placeholder { color: #333; }

.field input:focus, .field select:focus, .field textarea:focus {
      outline: none; border-color: var(--orange);
    }

.field textarea { resize: vertical; min-height: 80px; }

/* Tipo de cliente tabs */
    .tipo-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 4px; }

.tipo-tab {
      padding: 10px; text-align: center;
      font-size: 13px; font-weight: 600; color: var(--muted);
      background: #0a0a0a; cursor: pointer; transition: background .15s, color .15s;
      border: none; font-family: inherit;
    }

.tipo-tab.active { background: rgba(245,166,35,.1); color: var(--orange); }

.form-submit {
      background: var(--orange); color: #000;
      font-size: 15px; font-weight: 700; letter-spacing: -.1px;
      padding: 16px; border-radius: 6px; border: none;
      cursor: pointer; width: 100%; font-family: inherit;
      transition: opacity .2s, transform .2s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin-top: 4px;
    }

.form-submit:hover { opacity: .88; transform: translateY(-1px); }

.form-legal {
      font-size: 11px; color: #333; text-align: center; line-height: 1.5; margin-top: 4px;
    }

.form-legal a { color: #555; text-decoration: underline; }

/* Estado enviado */
    .form-success {
      display: none; text-align: center; padding: 40px 20px;
    }

.form-success.show { display: block; }

.success-icon {
      width: 56px; height: 56px; background: rgba(91,168,90,.1);
      border: 1px solid rgba(91,168,90,.2); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
    }

.success-icon svg { width: 24px; height: 24px; color: var(--green); }

.success-title { font-size: 20px; font-weight: 800; color: #f0f0f0; margin-bottom: 10px; }

.success-sub { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ══ CÓMO FUNCIONA ══ */
    .s-como {
      padding: 90px 52px;
      max-width: 1400px; margin: 0 auto;
    }

.como-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 0; margin-top: 72px;
      border-top: 1px solid var(--line);
    }

.como-step {
      padding: 40px 36px 40px 0;
      border-right: 1px solid var(--line);
    }

.como-step:last-child { border-right: none; padding-right: 0; }

.step-n {
      font-size: clamp(52px,5vw,72px); font-weight: 900; letter-spacing: -3px;
      color: rgba(245,166,35,.12); line-height: 1; margin-bottom: 20px;
    }

.step-title { font-size: 17px; font-weight: 700; color: #f0f0f0; margin-bottom: 10px; letter-spacing: -.3px; }

.step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ══ POR QUÉ CAMBIAR ══ */
    .s-porque {
      background: var(--surface);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 90px 52px;
    }

.porque-inner { max-width: 1400px; margin: 0 auto; }

.porque-layout {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
      align-items: center; margin-top: 72px;
    }

/* Factura ficticia animada */
    .factura-visual {
      border: 1px solid var(--line2); border-radius: 8px;
      background: #0a0a0a; overflow: hidden;
    }

.factura-header {
      background: var(--line); padding: 16px 24px;
      display: flex; justify-content: space-between; align-items: center;
    }

.factura-header span { font-size: 12px; color: var(--muted); font-weight: 500; }

.factura-header strong { font-size: 13px; color: #f0f0f0; }

.factura-body { padding: 24px; }

.factura-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 0; border-bottom: 1px solid var(--line);
      font-size: 13px;
    }

.factura-row:last-child { border-bottom: none; }

.fr-label { color: var(--muted); }

.fr-val { font-weight: 600; color: #f0f0f0; }

.fr-val.red { color: #e05555; }

.fr-val.green { color: var(--green); }

.factura-total {
      margin-top: 20px; padding: 16px 24px;
      background: rgba(224,85,85,.06);
      border-top: 1px solid rgba(224,85,85,.1);
      display: flex; justify-content: space-between; align-items: center;
    }

.factura-total span { font-size: 13px; color: var(--muted); }

.factura-total strong { font-size: 24px; font-weight: 900; color: #e05555; letter-spacing: -1px; }

.factura-nueva {
      margin-top: 8px; padding: 16px 24px;
      background: rgba(91,168,90,.06);
      border: 1px solid rgba(91,168,90,.1); border-radius: 0 0 8px 8px;
      display: flex; justify-content: space-between; align-items: center;
    }

.factura-nueva span { font-size: 13px; color: var(--green); font-weight: 500; }

.factura-nueva strong { font-size: 24px; font-weight: 900; color: var(--green); letter-spacing: -1px; }

/* Lista de razones */
    .porque-razones { display: flex; flex-direction: column; gap: 0; }

.razon {
      display: flex; gap: 20px; padding: 24px 0;
      border-bottom: 1px solid var(--line); align-items: flex-start;
    }

.razon:last-child { border-bottom: none; }

.razon-num {
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      color: var(--orange); width: 24px; flex-shrink: 0; margin-top: 3px;
    }

.razon-body strong { font-size: 16px; font-weight: 700; color: #f0f0f0; display: block; margin-bottom: 4px; letter-spacing: -.2px; }

.razon-body p { font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ══ TIPOS DE CLIENTE ══ */
    .s-tipos {
      padding: 90px 52px;
      max-width: 1400px; margin: 0 auto;
    }

.tipos-grid {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 2px; background: var(--line); margin-top: 72px;
    }

.tipo-card {
      background: #0a0a0a; padding: 48px 40px;
      display: flex; flex-direction: column; gap: 16px;
      position: relative; overflow: hidden; transition: background .25s;
    }

.tipo-card:hover { background: #0d0d0d; }

.tipo-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
      background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s;
    }

.tipo-card:hover::before { transform: scaleX(1); }

/* Placeholder foto */
    .tipo-img {
      width: 100%; aspect-ratio: 16/9;
      border: 1px dashed rgba(255,255,255,.07); border-radius: 4px;
      background: rgba(255,255,255,.01);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    }

.tipo-img-ph { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.12); }

.tipo-img-icon {
      width: 32px; height: 32px; border: 1px dashed rgba(255,255,255,.1); border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
    }

.tipo-img-icon svg { color: rgba(255,255,255,.15); }

.tipo-tag { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }

.tipo-title { font-size: clamp(18px,1.8vw,24px); font-weight: 800; letter-spacing: -.5px; color: #f0f0f0; line-height: 1.1; }

.tipo-desc { font-size: 13px; color: var(--muted); line-height: 1.7; flex: 1; }

.tipo-incluye { display: flex; flex-direction: column; gap: 0; }

.tipo-item {
      display: flex; align-items: center; gap: 10px;
      font-size: 12px; color: var(--soft); padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }

.tipo-item:last-child { border-bottom: none; }

.tipo-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

/* ══ CTA SECUNDARIO ══ */
    .s-cta-sec {
      background: var(--surface);
      border-top: 1px solid var(--line);
      padding: 90px 52px; text-align: center; position: relative; overflow: hidden;
    }

.s-cta-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(245,166,35,.07) 0%, transparent 70%);
    }

.s-cta-inner { position: relative; max-width: 680px; margin: 0 auto; }

.s-cta-sec h2 {
      font-size: clamp(36px,5vw,64px);
      font-weight: 900; letter-spacing: -2.5px; line-height: .92; color: #f0f0f0; margin-bottom: 20px;
    }

.s-cta-sec h2 em { font-style: normal; color: var(--orange); }

.s-cta-sec p { font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 44px; }

.btn-orange {
      display: inline-flex; align-items: center; gap: 9px;
      background: var(--orange); color: #000;
      font-size: 14px; font-weight: 700; padding: 16px 30px; border-radius: 5px;
      transition: opacity .2s, transform .2s;
    }

.btn-orange:hover { opacity: .88; transform: translateY(-1px); }

.btn-orange svg { width: 14px; height: 14px; }

/* ══ FAQ ══ */
    .s-faq { padding: 90px 52px; max-width: 1400px; margin: 0 auto; }

.faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; margin-top: 64px; }

.faq-sidebar { position: sticky; top: 24px; }

.faq-sidebar-title { font-size: clamp(24px,2.8vw,36px); font-weight: 900; letter-spacing: -1.5px; color: #f0f0f0; margin-bottom: 16px; line-height: 1.05; }

.faq-sidebar-sub { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }

.faq-sidebar-cta {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 600; color: var(--orange); transition: gap .2s;
    }

.faq-sidebar-cta:hover { gap: 11px; }

.faq-sidebar-cta svg { width: 13px; height: 13px; }

.faq-list { display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 24px 0; gap: 20px; text-align: left; font-family: inherit;
    }

.faq-q-text { font-size: 15px; font-weight: 600; color: #f0f0f0; letter-spacing: -.2px; line-height: 1.3; }

.faq-icon {
      width: 28px; height: 28px; flex-shrink: 0;
      border: 1px solid var(--line2); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s, border-color .2s, transform .3s;
    }

.faq-icon svg { width: 12px; height: 12px; color: var(--muted); }

.faq-item.open .faq-icon { background: var(--orange); border-color: var(--orange); transform: rotate(45deg); }

.faq-item.open .faq-icon svg { color: #000; }

.faq-a { overflow: hidden; max-height: 0; transition: max-height .4s ease, padding .3s; font-size: 14px; color: var(--muted); line-height: 1.75; }

.faq-item.open .faq-a { padding-bottom: 24px; }

/* ══ REVEAL ══ */
/* ══ RESPONSIVE ══ */
    @media (max-width: 1100px) {
      .hero { grid-template-columns: 1fr; }
      .hero-left { min-height: 60vh; padding: 100px 24px 60px; }
      .hero-right { border-left: none; border-top: 1px solid var(--line); padding: 60px 24px; }
      .porque-layout { grid-template-columns: 1fr; gap: 48px; }
      .tipos-grid { grid-template-columns: 1fr 1fr; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-sidebar { position: static; }
    }

@media (max-width: 900px) {
      .nav { padding: 0 24px; }
      .nav-links { display: none; }
      .ham { display: flex; }
      .s-como { padding: 80px 24px; }
      .como-grid { grid-template-columns: 1fr 1fr; }
      .como-step { padding: 32px 24px 32px 0; border-right: none; border-bottom: 1px solid var(--line); }
      .como-step:nth-child(odd) { border-right: 1px solid var(--line); }
      .como-step:nth-child(3), .como-step:last-child { border-bottom: none; }
      .s-porque { padding: 80px 24px; }
      .s-tipos { padding: 80px 24px; }
      .tipos-grid { grid-template-columns: 1fr; }
      .s-cta-sec { padding: 80px 24px; }
      .s-faq { padding: 80px 24px; }
}

@media (max-width: 560px) {
      .form-row { grid-template-columns: 1fr; }
.como-grid { grid-template-columns: 1fr; }
      .como-step { border-right: none !important; }
    }