:root{
  --bg:#050505;
  --fg:#f4f4f5;
  --muted:rgba(244,244,245,.72);
  --border:rgba(244,244,245,.12);
  --shadow:rgba(0,0,0,.55);
  --h1-size: 2.3125rem;
  --h1-responsive-size: 2.1125rem;
    --h2-size: 2.0000rem;
    --h2-responsive-size: 1.5000rem;
    --h3-size: 1.7500rem;
    --body1-size: 1.5000rem;
    --body2-size: 1.3125rem;
    --body3-size: 1.1250rem;
    --body4-size: 1.0rem;
    --caption1-size: 1.0000rem;
    --caption2-size: 0.8750rem;
    --caption3-size: 0.7500rem;
    --color-purple-dark: #562394;
    --color-purple-light: #54009E;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark-grey: #1a1a1a;
    --container-width: 1128px;
    --section-gap: 10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Audiowide', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}

span, a{
  font-family: 'Audiowide';
}

#smooth-wrapper{position:relative}
#smooth-content{position:relative}

/* Fixed background that covers whole page */
#bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 600px at 80% 30%, rgba(255,255,255,.04), transparent 65%),
              radial-gradient(900px 600px at 50% 90%, rgba(255,255,255,.03), transparent 70%),
              var(--bg);
}
#bg-layer{
  position:absolute;
  inset:-6vh -6vw; /* bleed for parallax */
  transform:translate3d(0,0,0);
}
#bg-layer .icon{
  position:absolute;
  width: var(--s, 44px);
  height: var(--s, 44px);
  opacity: var(--o, .18);
  filter: drop-shadow(0 10px 18px rgb(0, 0, 0));
  will-change: transform;
}
#bg-layer .icon img{
  width:100%;
  height:100%;
  display:block;
}

/* Overlays */
.vignette{
  position:absolute;
  inset:-1px;
  background: radial-gradient(80% 80% at 50% 30%, transparent 40%, rgb(0, 0, 0) 100%);
  mix-blend-mode:multiply;
}
.noise{
  position:absolute;
  inset:0;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
}

/* Content above background */
.section{
  position:relative;
  z-index:1;
  min-height:80vh;
  display:flex;
  align-items:center;
}
.hero{
  border-top:none;
}
.container{
  
  margin:0 auto;
}

#title-container{
    
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

h1{
  font-family: 'Audiowide';
  font-size: var(--h1-size);
  font-weight: 400;
  margin:0 0 16px 0;
}

h2{
  font-size: var(--h2-size);
  margin:0 0 16px 0;
  font-family: 'Audiowide';
    font-weight: 400;
}

.section-title {
    font-size: var(--h2-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    text-align: center;
}

.section-title.purple {
    color: var(--color-purple-dark);
}

.logo-header{
    margin-top: 2rem;
  }

.lead{
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  max-width:60ch;
  margin:0 0 24px 0;
}
.note{
  color:rgba(244,244,245,.58);
  font-size:13px;
  line-height:1.5;
  max-width:70ch;
  margin-top:18px;
}
p{
 
  font-size: var(--body3-size);
  line-height:1.7; 
  max-width:70ch
}

#container-p{
  color:var(--color-white); 
    text-align: center;
 
}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(244,244,245,.22);
  color:var(--fg);
  text-decoration:none;
  box-shadow:0 10px 24px var(--shadow);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.1)}
.btn.ghost{background:transparent}
.footer{
  margin-top:28px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(244,244,245,.6);
  font-size:13px;
}

.btn-primary {
    background: linear-gradient( var(--color-purple-dark), var(--color-purple-light));
    color: var(--color-white);
    font-family: 'Audiowide', sans-serif;
    font-size: var(--body3-size);
    font-weight: 400;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient( #6a2ba4, #6a00be);
    box-shadow: 0 4px 12px rgba(86, 35, 148, 0.4);
}


.btn-primary-small {
    background: linear-gradient( var(--color-purple-dark), var(--color-purple-light));
    color: var(--color-white);
    font-family: 'Audiowide', sans-serif;
    font-size: var(0.5rem);
    font-weight: 200;
    padding: 16px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 5px;
    transition: all 0.3s ease;
    width: 120px;
}

.btn-primary-small:hover {
    background: linear-gradient( #6a2ba4, #6a00be);
    box-shadow: 0 4px 12px rgba(86, 35, 148, 0.4);
}

/* Accent tint per section */
.section[data-accent="2"]{background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%)}
.section[data-accent="4"]{background: linear-gradient(180deg, transparent, rgba(255,255,255,.02) 55%, transparent)}
.section[data-accent="6"]{background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 55%)}


/* Intro overlay */
#intro{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background: radial-gradient(900px 600px at 50% 30%, rgba(142, 0, 255, .18), rgba(5,5,5,.92) 70%),
              #050505;
  pointer-events:none;
}
.intro-inner{
  display:grid;
  place-items:center;
  gap:18px;
  transform:translate3d(0,0,0);
  will-change: transform, opacity;
}
.intro-logo{
  width:min(180px, 28vw);
  height:auto;
  opacity:.92;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.55));
}
.intro-wordmark{
  font-family: 'Audiowide';
  font-size: clamp(34px, 6.2vw, 86px);
  letter-spacing:-.02em;
  line-height:1.0;
  
  color:rgba(245,245,255,.96);
  text-shadow: 0 18px 42px rgba(0,0,0,.6);
}
.intro-wordmark span{
  font-size: .55em;
  letter-spacing:.02em;
  color: rgba(208, 178, 255, .95);
}

#title-dev{
  font-family: sans-serif;

}

/* Hero purple->black gradient area */
.hero{
  position:relative;
  overflow:hidden;
}
.hero .container{
  position:relative;
  z-index:2;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.hero-grad{
  position:absolute;
  inset:-10% -10%;
  background:
    radial-gradient(1200px 600px at 50% 10%, rgb(12, 0, 34), transparent 100%),
    radial-gradient(900px 600px at 25% 25%, rgba(12, 0, 34), transparent 95%),
    linear-gradient(180deg, rgba(55, 5, 125) 0%, rgba(12, 0, 34) 36%, rgba(5,5,5) 90%, rgba(5,5,5,0) 50%);
  filter:saturate(1.55);
  transform:translate3d(0,0,0);
}
.hero-image{
  position:absolute;
  inset:-6% -6%;
  background-image:url("../assets/Background_Hero.png");
  background-size: cover;
  background-position: center top;
  opacity:.95;
  mix-blend-mode: screen;
  filter: blur(.2px) saturate(1.1);
  transform:translate3d(0,0,0);
}

/* Spark/cross pattern (only on hero purple area) */
.hero-sparks{
  position:absolute;
  inset:-6% -6%;
  opacity:.92;
}
.hero-sparks .spark{
  position:absolute;
  width: var(--sp, 18px);
  height: var(--sp, 18px);
  opacity: var(--so, .24);
  transform: translate3d(0,0,0);
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.hero-sparks .spark::before,
.hero-sparks .spark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 2px;
  height: 100%;
  background: rgba(216, 190, 255, .92);
  transform: translate(-50%,-50%);
  border-radius: 999px;
}
.hero-sparks .spark::after{
  width: 100%;
  height: 2px;
}
.hero-sparks .spark.x::before{
  transform: translate(-50%,-50%) rotate(45deg);
  width:2px;
  height:100%;
}
.hero-sparks .spark.x::after{
  transform: translate(-50%,-50%) rotate(45deg);
  width:100%;
  height:2px;
}
/* X needs the other diagonal too */
.hero-sparks .spark.x i{
  position:absolute;
  inset:0;
}
.hero-sparks .spark.x i::before,
.hero-sparks .spark.x i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background: rgba(216, 190, 255, .92);
  border-radius: 999px;
  transform: translate(-50%,-50%) rotate(-45deg);
}
.hero-sparks .spark.x i::before{ width:2px; height:100%; }
.hero-sparks .spark.x i::after{ width:100%; height:2px; }

/* Make hero text pop */
.hero h1{ text-shadow: 0 18px 42px rgba(0,0,0,.7); }
.hero .lead{ text-shadow: 0 12px 30px rgba(0,0,0,.55); }


/* ----------------------------- */
/* Navbar + menu bar (production) */
/* ----------------------------- */
.navbar{
  position:fixed;
  top:14px;
  left:0;
  right:0;
  z-index:50;
  pointer-events:none;
}
.nav-inner{
  width:min(1120px, calc(100% - 24px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 12px;
  border-radius:20px;
  border:1px solid rgba(244,244,245,.14);
  background: rgba(10,10,12,.36);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  pointer-events:auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:rgba(245,245,255,.96);
}
.brand img{width:26px;height:26px;opacity:.92}
.brand span{font-weight:600; letter-spacing:-.02em}

.nav-links{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav-links a{
  text-decoration:none;
  color: rgba(244,244,245,.78);
  font-size:13px;
  padding:8px 10px;
  border-radius:999px;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover{
  background: rgba(255,255,255,.06);
  color: rgba(244,244,245,.92);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Mobile */
.burger{
  width:44px;
  height:44px;
  border-radius:20px;
  display:grid; /*grid*/
  place-items:center;
  padding: 0;
}

#menu-icon{
  width:40%;
}

/* Drawer */
.drawer{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .18s ease, visibility .18s ease;
}
.drawer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.drawer-card{
  position:absolute;
  top:70px;
  right:16px;
  width:min(360px, calc(100% - 32px));
  border-radius:22px;
  border:1px solid rgba(244,244,245,.14);
  background: rgba(12,12,16,.62);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 64px rgba(0,0,0,.62);
  padding:14px;
}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: rgba(244,244,245,.85);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.drawer-close{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0;
}
.drawer-close span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(245,245,255,.92);
  border-radius:999px;
}
.drawer-close span:first-child{ transform: rotate(45deg) translateY(1px); }
.drawer-close span:last-child{ transform: rotate(-45deg) translateY(-1px); }

.drawer-links{
  display:grid;
  gap:6px;
  margin:10px 0 12px 0;
}
.drawer-links a{
  text-decoration:none;
  color: rgba(244,244,245,.84);
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.drawer-links a:hover{ background: rgba(255,255,255,.07); }

#unity-img{
      text-align: center;
}

/* Responsive behavior */
@media (max-width: 860px){
  .nav-links{ display:none; }
}


/* ----------------------------- */
/* Liquid crystal UI (buttons)   */
/* ----------------------------- */
.btn.liquid,
button.liquid{
  position:relative;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,255,.96);
  filter: url(#liquid-filter);
  overflow:hidden;
}
.btn.liquid::before,
button.liquid::before{
  content:"";
  position:absolute;
  inset:-40% -40%;
  background:
    radial-gradient(300px 180px at 30% 20%, rgba(210, 160, 255, .34), transparent 55%),
    radial-gradient(260px 180px at 70% 35%, rgba(120, 70, 255, .22), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 55%);
  transform: translate3d(var(--lx, -18px), var(--ly, -10px), 0) rotate(10deg);
  opacity:.85;
  mix-blend-mode: screen;
  will-change: transform;
}
.btn.liquid::after,
button.liquid::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03));
  opacity:.32;
  pointer-events:none;
}

.btn.liquid:hover,
button.liquid:hover{
  background: rgba(255,255,255,.085);
  transform: translateY(-1px);
}
.btn.liquid:active,
button.liquid:active{
  transform: translateY(0px) scale(.99);
}

.btn.small{ padding:10px 14px; font-size:13px; }
button.liquid{ cursor:pointer; }
button.liquid{ border-radius:999px; }

/* Ensure base .btn still works */
.btn{ border-radius:999px; }


/* Keep hero content clear under fixed navbar */
.hero{ padding-top: 120px; }


.btn.liquid.ghost{ background: transparent; }

.value-prop-section {
    width: var(--container-width);
    padding-bottom: 96px;
    margin-bottom: var(--section-gap);
}


/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */

.why-choose-section {
    width: var(--container-width);
    margin-bottom: var(--section-gap);
    padding: 40px 0;
}

.why-choose-content {
    display: flex;
    flex-direction: column;
}

.why-choose-item {
    margin-bottom: 5px;
    margin-left: 10%;
}

.why-choose-heading {
    font-size: var(--body2-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 10px;
}

.why-choose-text {
    font-size: var(--body3-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
}

.why{
  margin-left: 25%;
}

/* ============================================
   METHOD SECTION
   ============================================ */

.method-section {
    width: var(--container-width);
    margin-bottom: var(--section-gap);
    padding: 40px 0;
}

.method-steps {
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
}

.method-steps::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 0;     /* separación respecto al primer círculo */
    bottom: 0;  /* separación respecto al último círculo */
    width: 4px;
    background: var(--color-white);
    transform: translateX(-50%);
}

.method-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.step-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--color-purple-dark);
    border: 10px solid var(--color-black); /* contorno negro */
    color: var(--color-white);
    font-size: var(--body3-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateX(-50%);
}

.step-content {
    flex: 1;
    padding-left: 10%; /* espacio entre el círculo y el número */
}

.step-heading {
    font-size: var(--body2-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 5px;
}

.step-description {
    font-size: var(--body3-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
}

/* ============================================
   CTA PRE-FORM SECTION
   ============================================ */

.cta-pre-section {
    width: var(--container-width);
    margin-bottom: var(--section-gap);
    padding: 40px 0;
    text-align: center;
}

.cta-text {
    font-size: var(--body2-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    margin-bottom: 20px;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

/* ============================================
   CTA FORM SECTION
   ============================================ */

.cta-form-section {
    width: var(--container-width);
    margin-bottom: var(--section-gap);
    padding: 40px 0 80px;
    background-color: var(--color-black);
}

.form-intro {
    font-size: var(--body3-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 30px;
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: var(--caption1-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--color-dark-grey);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--color-white);
    font-size: var(--body3-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-purple-light);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form .btn-primary {
    margin-top: 20px;
    align-self: flex-end;
}

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

.footer {
    width: 100%
    padding: 60px 0 40px;
    margin-top: var(--section-gap);
    position: relative;
    background: var(--color-black);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--color-black);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    z-index: -1;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer-content .footer-column:first-child {
    align-items: center;
    text-align: center;
    gap: 0;
}

.footer-logo-img {
    margin-bottom: 0;
}

.footer-content .footer-column:first-child .footer-logo-img {
    margin-bottom: 0;
}

.footer-logo-img img {
    max-width: 150px;
    height: auto;
}

.footer-logo-text {
    font-size: var(--caption1-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    margin-bottom: 0;
}

.footer-content .footer-column:first-child .footer-logo-text {
    margin-bottom: 0;
}

.footer-copyright {
    font-size: var(--caption2-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
}

.footer-heading {
    font-size: var(--caption1-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 10px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links li a {
    font-size: var(--caption1-size);
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links li a:hover {
    color: var(--color-purple-dark);
}

@media screen and (max-width: 700px) {
  /* CSS styles to apply when the viewport width is 600 pixels or less */
  h1 {
    font-size: var(--h1-responsive-size);
    text-align: center;
  }

  h2{
    margin-top:25px;
    font-size: var(--h2-responsive-size);
    text-align: center;
  }

  .logo-header{
    width: 95%;
  }
  
  .value-prop-section{
    
    white-space: normal;          /* permite saltos de línea */
    overflow-wrap: anywhere;      /* rompe si es necesario */
    hyphens: auto;                /* opcional: guiones en navegadores que soportan */
    line-height: 1.05;            /* ajusta según tu diseño */
    text-wrap: balance; 
    }

    #unity-img{
      width:90%; 
      height:600px;
      padding-left:8%;
    }

    .why-choose-section,
    .footer {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .why-choose-section{
      padding-left: 1%;
    }

    .why{
      margin-left: 8%;
    }

    

    #subtitle{
        text-align: center;
        padding: 5%;          /* por si algún padre lo está cortando */
   
    }



    

  .section-title{
    line-height: 1.05;          /* importante para que no “corte” arriba/abajo */
  overflow: visible;           /* por si algún padre lo está cortando */
  word-break: normal;          /* evita cortes raros */
  overflow-wrap: normal;       /* evita “anywhere” */
  hyphens: none;
  }

  .nowrap{ 
    white-space: nowrap; 
  }

  .step-content {
    padding-left: 15%; /* espacio entre el círculo y el número */
}

.step-number {
    left: 20px;
    top: 20px;
}

.method-steps::before {
    left: 45px;
}

.footer-content {
        grid-template-columns: 1fr;
    }
    
  }