/* =========================================================
   RS INGENIERIA — INDUSTRIAL PREMIUM UI SYSTEM
   OPTIMIZED VERSION 2026
========================================================= */

:root{

  /* =========================
     COLORS
  ========================= */

  --bg:#060b14;
  --bg-2:#0b1220;

  --panel:#111827;
  --panel-2:#182131;

  --line:rgba(255,255,255,.08);

  --text:#eaf2ff;

  --muted:#a9b7cf;
  --muted-2:#7f91af;

  /* INDUSTRIAL PREMIUM */
  --accent:#3ea6ff;
  --accent-2:#1f6feb;

  /* INDUSTRIAL AMBER */
  --accent-3:#ffb347;

  --success:#56d68b;

  --shadow:
    0 20px 60px rgba(0,0,0,.40);

  --radius:24px;
  --radius-sm:18px;

  --max:1180px;

  --transition:.28s ease;

  --header-height:78px;
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  max-width:100%;
  overflow-x:hidden;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure{
  margin:0;
  padding:0;
}

body{

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  font-weight:450;

  color:var(--text);

  letter-spacing:-0.01em;

  background:

    radial-gradient(
      1200px 700px at 12% 0%,
      rgba(62,166,255,.10),
      transparent 50%
    ),

    radial-gradient(
      1000px 700px at 90% 10%,
      rgba(31,111,235,.08),
      transparent 55%
    ),

    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.012'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2v2h-2V0zm0 4h2v2h-2V4zM4 40h2v2H4v-2zm0 4h2v2H4v-2z'/%3E%3C/g%3E%3C/svg%3E"),

    linear-gradient(
      180deg,
      #060b14 0%,
      #0b1220 40%,
      #0a111d 100%
    );

  line-height:1.6;

  max-width:100%;

  overflow-x:hidden;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,
picture,
video,
canvas,
svg{
  display:block;
  max-width:100%;
}

img{
  height:auto;
}

input,
button,
textarea,
select{
  font:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  border:none;
  background:none;
  cursor:pointer;
}

ul{
  list-style:none;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      var(--accent),
      var(--accent-2)
    );

  border-radius:999px;

  border:2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover{
  background:var(--accent);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.skip{
  position:absolute;
  left:-9999px;
  top:auto;

  width:1px;
  height:1px;

  overflow:hidden;
}

.skip:focus{

  left:20px;
  top:20px;

  width:auto;
  height:auto;

  overflow:visible;

  z-index:99999;

  padding:12px 18px;

  background:#fff;
  color:#000;

  border-radius:10px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.25);
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* =========================================================
   LAYOUT
========================================================= */

.wrap{
  width:min(var(--max), calc(100% - 32px));
  margin-inline:auto;
}

section{
  position:relative;
  padding:110px 0;
}

/* =========================================================
   HEADER
========================================================= */

header{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:var(--header-height);

  z-index:999;

  background:
    rgba(6,11,20,.82);

  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);

  border-bottom:
    1px solid rgba(255,255,255,.05);

  box-shadow:
    0 10px 40px rgba(0,0,0,.32);

  display:flex;
  align-items:center;
}

header .wrap{

  display:flex !important;

  flex-direction:row !important;

  align-items:center !important;

  justify-content:space-between !important;

  width:min(var(--max), calc(100% - 32px));

  margin-inline:auto;
}

nav ul{

  display:flex !important;

  flex-direction:row !important;

  align-items:center !important;

  gap:10px;

  margin:0;
  padding:0;
}

nav a{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  height:44px;

  padding:0 20px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:12px;

  color:#d7e5ff;

  font-weight:700;

  white-space:nowrap;

  transition:
    background-color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

nav a:hover{

  background:
    rgba(255,255,255,.10);

  border-color:
    rgba(62,166,255,.45);

  transform:translateY(-1px);
}

.nav-cta{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-2)
    ) !important;

  color:#04111a !important;

  border:none !important;
}

.nav-cta:hover{

  background:var(--accent) !important;

  box-shadow:
    0 0 20px rgba(62,166,255,.30);
}

/* =========================================================
   HERO
========================================================= */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  padding:140px 0 90px;

  overflow:hidden;

  background-image:

    linear-gradient(
      rgba(4,10,20,.60),
      rgba(4,10,20,.78)
    ),

    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.04'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2v2h-2V0zm0 4h2v2h-2V4zM4 40h2v2H4v-2zm0 4h2v2H4v-2z'/%3E%3C/g%3E%3C/svg%3E"),

    url("/imagen/heroe-industria-ia-2.webp");

  background-size:cover, auto, cover;

  background-position:center center;

  background-repeat:no-repeat, repeat, no-repeat;

  background-attachment:fixed;
}

.hero::before{

  content:"";

  position:absolute;
  inset:0;

  background:

    radial-gradient(
      circle at top left,
      rgba(62,166,255,.12),
      transparent 40%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(31,111,235,.10),
      transparent 40%
    );

  z-index:1;
}

.hero > *{
  position:relative;
  z-index:2;
}

.hero-grid{

  width:100%;

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:40px;

  align-items:center;
}

.eyebrow{

  display:inline-flex;

  align-items:center;

  padding:10px 18px;

  border-radius:999px;

  margin-bottom:24px;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid rgba(255,255,255,.08);

  color:#d8e7ff;

  font-size:.92rem;

  font-weight:700;

  letter-spacing:.04em;

  backdrop-filter:blur(10px);
}

h1{

  font-size:
    clamp(3rem,7vw,6rem);

  line-height:.95;

  font-weight:900;

  letter-spacing:-.05em;

  margin-bottom:24px;

  max-width:12ch;

  text-shadow:
    0 0 30px rgba(62,166,255,.10);
}

.accent{

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #9cd3ff,
      #3ea6ff
    );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
}

.value-prop{

  font-size:1.2rem;

  line-height:1.8;

  color:#d7e5ff;

  max-width:62ch;

  margin-bottom:32px;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{

  min-height:50px;

  padding:0 20px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border-radius:999px;

  font-weight:700;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.05);

  transition:
    transform var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-2)
    );

  color:#04111a;

  border:none;
}

/* =========================================================
   CARDS
========================================================= */

.card{

  position:relative;

  z-index:1;

  overflow:hidden;

  padding:32px;

  border-radius:var(--radius);

  background:
    linear-gradient(
      180deg,
      rgba(20,28,40,.96),
      rgba(12,18,28,.98)
    );

  border:
    1px solid rgba(255,255,255,.06);

  backdrop-filter:blur(12px);

  box-shadow:var(--shadow);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.card:hover{

  transform:translateY(-6px);

  border-color:
    rgba(62,166,255,.25);

  box-shadow:
    0 30px 60px rgba(0,0,0,.40);
}

.card h3{
  margin:14px 0 10px;
}

.card p{
  color:var(--muted);
}

.icon{
  font-size:2rem;
  margin-bottom:12px;
}

/* =========================================================
   TITLES
========================================================= */

.section-head{
  margin-bottom:40px;
}

.section-head p{

  margin-top:18px;

  color:var(--muted);

  max-width:800px;
}

.section-title,
.impact-title{

  display:inline-flex;

  align-items:center;

  padding:20px 30px;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      rgba(62,166,255,.12),
      rgba(31,111,235,.08)
    );

  border:
    1px solid rgba(255,255,255,.06);

  font-size:
    clamp(2rem, 4vw, 4rem);

  font-weight:900;

  letter-spacing:-0.06em;

  line-height:1;
}

.section-title span,
.impact-title span{

  margin-left:10px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #9cd3ff,
      #3ea6ff
    );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
}

/* =========================================================
   GRID
========================================================= */

.grid-3{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;
}

.grid-4{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}

.contact-grid,
.about-grid{

  display:grid;

  gap:24px;
}

.contact-grid,
.about-grid{

  grid-template-columns:1fr 1fr;

  align-items:stretch;
}

/* =========================================================
   TAGS
========================================================= */

.tags,
.chips{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:18px;
}

.tag,
.chip,
.pill{

  padding:8px 12px;

  border-radius:999px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.08);

  color:#dfe9f9;

  font-size:.88rem;
}

/* =========================================================
   IMAGES
========================================================= */

.contact-image,
.about-image{

  overflow:hidden;

  border-radius:28px;

  min-height:450px;

  display:flex;
}

.contact-image img,
.about-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:28px;

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 25px 50px rgba(0,0,0,.35);
}

/* =========================================================
   FORM
========================================================= */

form{
  display:grid;
  gap:14px;
}

.field{
  display:grid;
  gap:8px;
}

label{
  font-weight:600;
}

input,
select,
textarea{

  width:100%;

  padding:14px;

  border-radius:16px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid rgba(255,255,255,.10);

  color:var(--text);

  transition:
    border-color var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}

textarea{
  min-height:140px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:var(--muted-2);
}

input:focus,
select:focus,
textarea:focus{

  outline:none;

  border-color:var(--accent);

  background:
    rgba(15,27,47,.85);

  box-shadow:
    0 0 20px rgba(62,166,255,.15);
}

/* =========================================================
   FOOTER
========================================================= */

footer{

  margin-top:30px;

  padding:28px 0 42px;

  text-align:center;

  color:var(--muted-2);

  border-top:
    1px solid rgba(255,255,255,.06);
}

/* =========================================================
   WHATSAPP
========================================================= */

.floating-whatsapp{

  position:fixed;

  right:22px;
  bottom:22px;

  width:64px;
  height:64px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#25D366;

  color:#fff;

  z-index:9999;

  box-shadow:
    0 18px 40px rgba(0,0,0,.35);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.floating-whatsapp:hover{
  transform:translateY(-4px) scale(1.03);
}

.floating-whatsapp svg{
  width:32px;
  height:32px;
}

/* =========================================================
   CUSTOM SECTIONS
========================================================= */

#metodologia .card,
#caso-real .card,
#para-quien .card,
#desafios-resultados .card,
#proyectos-resultados .card{
  height:100%;
}

#caso-real hr{

  border:none;

  border-top:
    1px solid rgba(255,255,255,.08);
}

#desafios-resultados .mini-list,
#proyectos-resultados .mini-list{

  margin:0;

  padding-left:18px;

  opacity:.9;
}

#desafios-resultados .mini-list li,
#proyectos-resultados .mini-list li{
  margin-bottom:8px;
}

/* =========================================================
   INDUSTRIA VISUAL
========================================================= */

#industria-visual{
  position:relative;
}

.visual-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
}

.visual-card{
  overflow:hidden;
  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(18,33,58,.96),
      rgba(11,19,35,.96)
    );

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 25px 50px rgba(0,0,0,.35);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.visual-card:hover{
  transform:translateY(-8px);

  border-color:rgba(0,184,148,.35);

  box-shadow:
    0 35px 70px rgba(0,0,0,.45);
}

.visual-image{
  position:relative;
  overflow:hidden;
  height:280px;
}

.visual-image img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:
    transform .7s ease,
    filter .4s ease;
}

.visual-card:hover img{
  transform:scale(1.05);
}

.visual-image::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(4,10,20,.70),
      rgba(4,10,20,.10)
    );
}

.visual-content{
  padding:28px;
}

.visual-content h3{
  margin-bottom:14px;

  font-size:1.4rem;
  font-weight:800;

  color:#fff;
}

.visual-content p{
  color:var(--muted);

  line-height:1.7;
}

/* =========================================================
   SECTION INDUSTRIAL BANNERS
========================================================= */

.section-banner{
  position:relative;

  overflow:hidden;

  margin:34px 0 46px;

  border-radius:32px;

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 30px 60px rgba(0,0,0,.35);
}

.section-banner img{
  width:100%;
  height:420px;

  object-fit:cover;

  transition:
    transform .8s ease,
    filter .5s ease;
}

.section-banner::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(4,10,20,.15),
      rgba(4,10,20,.45)
    );
}

.section-banner:hover img{
  transform:scale(1.04);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:980px){

  .hero-grid,
  .grid-3,
  .grid-4,
  .contact-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  nav ul{
    display:none;
  }

  h1{
    max-width:100%;
    font-size:clamp(3rem, 10vw, 5rem);
  }

  section{
    padding:80px 0;
  }

  .card,
  .hero-panel{
    padding:24px;
  }

  .hero{
    min-height:auto;
    background-attachment:scroll;
  }

  .contact-image,
  .about-image{
    min-height:380px;
  }

  .visual-grid{
    grid-template-columns:1fr;
  }

  .visual-image{
    height:240px;
  }
}

@media (max-width:768px){

  .hero{
    padding:110px 0 70px;
    background-position:center center;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{
    width:100%;
  }

  .section-title,
  .impact-title{
    padding:18px 22px;
  }

  .section-banner img{
    height:260px;
  }
}

@media (max-width:640px){

  .floating-whatsapp{
    width:58px;
    height:58px;
  }

  .wrap{
    width:min(var(--max), calc(100% - 20px));
  }

  .hero-panel{
    padding:20px;
  }

  .card{
    padding:22px;
  }

  .value-prop{
    font-size:1rem;
  }

  .contact-image,
  .about-image{
    min-height:300px;
  }
}