/* WELLS Perú — Web Pública */
/* Extraído de index.html sin modificar ninguna regla — mismo diseño, solo reorganizado en archivo aparte */

:root{
    --wells-blue:#021939;
    --wells-blue-2:#153F6E;
    --wells-blue-deep:#010E24;
    --accent-amber:#E8A33D;
    --text-primary:#F2F1EC;
    --text-muted:#93A3B8;
    --border-hairline:rgba(242,241,236,0.14);
  }
  html,body{background:var(--wells-blue); font-family:'Manrope',sans-serif; color:var(--text-primary);}
  .font-display{font-family:'Rajdhani',sans-serif;}
  .tracked{letter-spacing:0.12em;}
  .tracked-wide{letter-spacing:0.2em;}
  .hero-bg{
    background:linear-gradient(180deg, rgba(2,25,57,.25) 0%, rgba(2,25,57,.55) 55%, rgba(2,25,57,.88) 100%), url('../img/hero.png');
    background-size:cover; background-position:center 20%;
    opacity:0;
    animation:heroFadeIn 1.6s ease forwards;
  }
  @keyframes heroFadeIn{
    from{ opacity:0; transform:scale(1.04); }
    to{ opacity:1; transform:scale(1); }
  }
  .card{background:var(--wells-blue-2); border:1px solid rgba(242,241,236,0.18); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
  .card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.35); border-color:rgba(232,163,61,.4);}
  .card img{transition:transform .6s ease;}
  .card:hover img{transform:scale(1.06);}

  /* Revelado suave al hacer scroll */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-delay-1{transition-delay:.1s;}
  .reveal-delay-2{transition-delay:.2s;}
  .reveal-delay-3{transition-delay:.3s;}

  /* Header reacciona al scroll */
  #site-header{transition:background .3s ease, box-shadow .3s ease;}
  #site-header.is-scrolled{background:rgba(2,25,57,0.97); box-shadow:0 4px 24px rgba(0,0,0,.3);}

  /* Botones con transición suave */
  a.btn-amber, a.btn-outline{transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
  a.btn-amber:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,163,61,.35);}
  a.btn-outline:hover{background:rgba(242,241,236,.08); transform:translateY(-2px);}

  /* Menú de navegación — hover estilo HUD/tecnológico */
  .nav-link{
    position:relative;
    padding:6px 3px;
    transition:color .25s ease, text-shadow .3s ease, letter-spacing .3s ease;
  }
  .nav-link::before, .nav-link::after{
    content:'';
    position:absolute;
    width:7px; height:7px;
    border:1px solid var(--accent-amber);
    opacity:0;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav-link::before{ top:-3px; left:-6px; border-right:none; border-bottom:none; transform:translate(5px,5px); }
  .nav-link::after{ bottom:-3px; right:-6px; border-left:none; border-top:none; transform:translate(-5px,-5px); }
  .nav-link:hover, .nav-link:focus-visible{
    color:var(--text-primary);
    text-shadow:0 0 10px rgba(232,163,61,.6);
    letter-spacing:0.16em;
  }
  .nav-link:hover::before, .nav-link:hover::after,
  .nav-link:focus-visible::before, .nav-link:focus-visible::after{
    opacity:1;
    transform:translate(0,0);
  }

  /* Parallax leve en fondos */
  .parallax-bg{background-attachment:fixed;}
  @media (max-width:768px){ .parallax-bg{background-attachment:scroll;} }

  /* ===== PRELOADER ===== */
  #preloader{
    position:fixed; inset:0; z-index:99999;
    background:#021939;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .7s ease, visibility .7s ease;
  }
  #preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .preloader-logo{
    width:min(46vw,320px);
    color:#F2F1EC;
    animation:logoBreathe 3.2s ease-in-out infinite;
  }
  @keyframes logoBreathe{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.035); opacity:.94; }
  }
  .preloader-dot{ fill:url(#dotFadePreloader); }
  .preloader-halo{
    fill:#E8A33D; opacity:.35; filter:url(#haloBlurPreloader);
    transform-origin:757px 448px;
    animation:preloaderPulse 1.4s ease-in-out infinite;
  }
  @keyframes preloaderPulse{
    0%,100%{ transform:scale(1); opacity:.28; }
    50%{ transform:scale(2.1); opacity:.7; }
  }


  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent-amber);
    outline-offset:3px;
    border-radius:2px;
  }


  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
    .reveal{ opacity:1 !important; transform:none !important; }
    .parallax-bg{ background-attachment:scroll !important; }
  }


  #whatsapp-float{
    position:fixed; right:20px; bottom:20px; z-index:9000;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    transition:transform .2s ease;
  }
  #whatsapp-float:hover{ transform:scale(1.08); }
  #whatsapp-float:focus-visible{ outline:2px solid var(--accent-amber); outline-offset:3px; }

  /* Acceso interno discreto (footer) — enlace directo al sistema, sin llamar la atención */
  .internal-access{
    display:inline-flex;
    color:var(--text-muted);
    opacity:.35;
    transition:opacity .25s ease, color .25s ease;
  }
  .internal-access:hover, .internal-access:focus-visible{
    opacity:.85;
    color:var(--text-primary);
  }

  /* Formulario de contacto — estética "consola/HUD" */
  .modal-status-bar{
    display:flex; align-items:center; gap:8px;
    font-family:'SFMono-Regular','Consolas','Menlo',monospace;
    font-size:.65rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:16px;
  }
  .modal-status-dot{
    width:6px; height:6px; border-radius:50%;
    background:#3FB27F;
    box-shadow:0 0 6px #3FB27F;
    animation:statusPulse 1.6s ease-in-out infinite;
  }
  @keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
  .modal-status-online{ color:#3FB27F; }

  .type-toggle-btn{
    padding:8px 20px;
    font-size:.7rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-family:'SFMono-Regular','Consolas','Menlo',monospace;
    font-weight:700;
    border:1px solid rgba(242,241,236,.16);
    background:rgba(1,14,36,.4);
    color:var(--text-muted);
    border-radius:2px;
    cursor:pointer;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
  }
  .type-toggle-btn::before{ content:''; }
  .type-toggle-btn.is-active::before{ content:'[ '; }
  .type-toggle-btn.is-active::after{ content:' ]'; }
  .type-toggle-btn.is-active{
    background:var(--accent-amber);
    color:#1A1305;
    border-color:var(--accent-amber);
  }
  .form-field label{
    display:block;
    font-family:'SFMono-Regular','Consolas','Menlo',monospace;
    font-size:.68rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:6px;
  }
  .form-field label::before{ content:'// '; color:var(--accent-amber); opacity:.75; }
  .form-field input, .form-field textarea{
    width:100%;
    background:rgba(1,14,36,.55);
    border:1px solid rgba(242,241,236,.12);
    border-bottom:2px solid rgba(232,163,61,.28);
    color:var(--text-primary);
    padding:10px 12px;
    border-radius:1px;
    font-family:'SFMono-Regular','Consolas','Menlo',monospace;
    font-size:.85rem;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .form-field input:focus, .form-field textarea:focus{
    outline:none;
    border-color:rgba(242,241,236,.2);
    border-bottom-color:var(--accent-amber);
    box-shadow:0 6px 16px -6px rgba(232,163,61,.5);
    background:rgba(1,14,36,.85);
  }
  .form-field.hidden{ display:none; }
  .opt-tag{ text-transform:none; letter-spacing:0; color:var(--text-muted); opacity:.7; }
  .field-hint{
    font-size:.72rem;
    color:var(--text-muted);
    margin-top:5px;
    line-height:1.4;
  }
  .field-hint::before{ content:'> '; color:var(--accent-amber); opacity:.8; }
  .hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  #form-feedback.is-error{ color:#E5484D; font-family:'SFMono-Regular','Consolas','Menlo',monospace; font-size:.78rem; }

  .btn-transmit{ display:inline-flex; align-items:center; gap:8px; }
  .btn-transmit svg{ transition:transform .25s ease; }
  .btn-transmit:hover svg{ transform:translateX(3px); }

  /* Modal de cotización */
  .quote-modal{
    position:fixed; inset:0; z-index:10000;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .quote-modal.is-open{ opacity:1; visibility:visible; }
  .quote-modal-overlay{
    position:absolute; inset:0;
    background:rgba(1,14,36,.6);
    backdrop-filter:blur(6px);
  }
  .quote-modal-panel{
    position:relative;
    max-width:640px; width:100%;
    max-height:90vh; overflow-y:auto; overflow-x:hidden;
    background-color:rgba(21,63,110,.78);
    background-image:
      linear-gradient(rgba(232,163,61,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232,163,61,.06) 1px, transparent 1px);
    background-size:26px 26px;
    backdrop-filter:blur(18px);
    border:1px solid rgba(232,163,61,.22);
    border-radius:2px;
    padding:36px;
    transform:translateY(16px);
    transition:transform .3s ease;
  }
  .modal-watermark{
    position:absolute;
    top:108px; right:36px;
    width:min(24%, 120px);
    color:var(--text-primary);
    opacity:.07;
    pointer-events:none;
    z-index:-1;
  }
  .quote-modal.is-open .quote-modal-panel{ transform:translateY(0); }
  .modal-corner{
    position:absolute;
    width:22px; height:22px;
    border:2px solid var(--accent-amber);
    opacity:.9;
    pointer-events:none;
  }
  .modal-corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .modal-corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
  .modal-corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
  .modal-corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
  .modal-scanline{
    position:absolute; left:0; right:0; top:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--accent-amber), transparent);
    opacity:0;
    pointer-events:none;
  }
  .quote-modal.is-open .modal-scanline{ animation:modalScan 1.6s ease-in-out 1; }
  @keyframes modalScan{
    0%{ top:0; opacity:0; }
    12%{ opacity:.9; }
    88%{ opacity:.9; }
    100%{ top:100%; opacity:0; }
  }
  .quote-modal-close{
    position:absolute; top:16px; right:16px;
    color:var(--text-muted);
    background:transparent; border:none; cursor:pointer;
    padding:6px;
    transition:color .2s ease;
  }
  .quote-modal-close:hover, .quote-modal-close:focus-visible{ color:var(--text-primary); }
  body.modal-open{ overflow:hidden; }

  /* Modal de confirmación — reutiliza el logo/punto/halo del preloader */
  .success-modal{
    position:fixed; inset:0; z-index:10001;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .success-modal.is-open{ opacity:1; visibility:visible; }
  .success-modal-overlay{
    position:absolute; inset:0;
    background:rgba(1,14,36,.85);
    backdrop-filter:blur(3px);
  }
  .success-modal-panel{
    position:relative;
    max-width:440px; width:100%;
    background:var(--wells-blue);
    border:1px solid rgba(232,163,61,.32);
    border-radius:2px;
    padding:52px 44px 44px;
    display:flex; flex-direction:column; align-items:center;
    box-shadow:0 0 70px -12px rgba(232,163,61,.28);
    transform:scale(.94);
    transition:transform .3s ease;
  }
  .success-modal.is-open .success-modal-panel{ transform:scale(1); }
  .success-logo{ width:min(42vw, 170px); }
  .success-divider{
    width:36px; height:2px;
    background:var(--accent-amber);
    opacity:.8;
    margin:18px 0 14px;
  }
  #success-modal-title{ color:var(--accent-amber); }
  /* Punto verde solo aquí — el preloader real se queda en rojo */
  .success-modal .preloader-dot{ fill:url(#dotFadeGreen); }
  .success-modal .preloader-halo{ fill:#3FB27F; }