/* =========================

   JELDU – styles.css

   ========================= */



/* ----- Reset / Base ----- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; scroll-behavior: smooth; }

body {

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

  color: #0c1b2a;

  background: #ffffff;

  line-height: 1.45;

}



img { max-width: 100%; display: block; }

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



:root{

  --ink: #0c1b2a;

  --muted: rgba(12,27,42,.72);

  --pink: #ef6f93;

  --pink-2: #ff7ea3;

  --navy: #0b1726;

  --navy-2:#0a1a2e;

  --card: #ffffff;

  --border: rgba(12,27,42,.12);

  --shadow: 0 16px 50px rgba(0,0,0,.14);

  --radius-xl: 18px;

  --radius-lg: 16px;

  --container: 1180px;

}



/* ----- Helpers ----- */

.container{

  width: min(var(--container), calc(100% - 64px));

  margin: 0 auto;

}

.center{ display:block; margin: 28px auto 0; width: fit-content; }

.eyebrow{

  display: inline-block;

  font-size: 12px;

  letter-spacing: .18em;

  text-transform: uppercase;

  font-weight: 700;

  color: var(--pink);

}

.eyebrow.dark{ color: rgba(255,255,255,.85); }



/* ----- Buttons ----- */

.btn{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 48px;

  padding: 0 22px;

  border-radius: 12px;

  font-weight: 700;

  letter-spacing: .02em;

  font-size: 14px;

  border: 1px solid transparent;

  transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;

  user-select: none;

}

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

.btn:active{ transform: translateY(0px); opacity: .92; }



.btn.primary{

  background: var(--pink);

  color: #0b1623;

  border-color: rgba(0,0,0,.06);

}

.btn.ghost{

  background: transparent;

  color: rgba(255,255,255,.92);

  border-color: rgba(255,255,255,.35);

}



/* =========================

   Header

   ========================= */

.header{

  position: fixed;

  inset: 0 0 auto 0;

  height: 72px;

  z-index: 50;

  background: rgba(9,16,26,.44);

  backdrop-filter: blur(8px);

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

}

.header-inner{

  width: min(var(--container), calc(100% - 64px));

  margin: 0 auto;

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.logo{

  display:flex;

  align-items:center;

  gap: 10px;

}

.logo img{

  height: 44px;

  width: auto;

  filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));

}

.header nav{

  display:flex;

  align-items:center;

  gap: 22px;

  color: rgba(255,255,255,.86);

  font-weight: 700;

  letter-spacing: .06em;

  font-size: 12px;

  text-transform: uppercase;

}

.header nav a{

  opacity: .92;

  padding: 10px 8px;

  border-radius: 10px;

  transition: background .12s ease, opacity .12s ease, color .12s ease;

}

.header nav a:hover{ background: rgba(255,255,255,.08); opacity: 1; }

.header nav a.active{ color: var(--pink); }

.header nav a.panel{

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

  padding: 10px 14px;

}



/* =========================

   Hero

   ========================= */

.hero{

  min-height: 92vh;

  padding-top: 72px; /* espacio del header fijo */

  

  

  

  min-height: 100vh;

  padding-top: 96px; /* altura REAL del header */

  display: flex;

  align-items: center;

  position: relative;

  

  



  background:

    linear-gradient(180deg, rgba(9,16,26,.62), rgba(9,16,26,.82)),

  url("/img/hero.webp") center / cover no-repeat;

}

.hero-overlay{

  position:absolute;

  inset:0;

  background: radial-gradient(1100px 680px at 40% 28%, rgba(255,255,255,.08), rgba(0,0,0,0));

  pointer-events: none;

}

.hero-content{

  width: min(var(--container), calc(100% - 64px));

  margin: 0 auto;

  position: relative;

  color: #ffffff;

  padding: 56px 0 120px;

  

}

.hero-content .eyebrow{

  margin-bottom: 10px;

}









.hero-content h1{

  margin: 0 0 14px;

  font-size: clamp(40px, 5.1vw, 64px);

  font-weight: 900;

  line-height: 1.05;

  letter-spacing: -0.015em;

  max-width: 100%;

  white-space: normal;

  word-break: normal;

  overflow-wrap: break-word;

  

  /* IMPORTANTE: mantener "Respuesta humana inmediata" en una línea */

 

}









.hero-content p{

  margin: 0 0 28px;

  max-width: 760px;

  color: rgba(255,255,255,.88);

  font-size: 15px;

}

.hero-actions{

  display:flex;

  gap: 16px;

  flex-wrap: wrap;

}



/* =========================

   Split Floating Section

   ========================= */

.split-wrapper{

  /* Este padding hace que el “bloque flotante” tenga aire debajo */

  padding: 0 0 60px;

  background: #000;

}

.split{

  width: min(var(--container), calc(100% - 64px));

  margin: 0 auto;



  /* La magia: flota sobre el hero SIN margin-top negativo */

  transform: translateY(-90px);



  display: grid;

  grid-template-columns: 1.15fr 1fr;

  border-radius: var(--radius-xl);

  overflow: hidden;

  background: var(--card);

  box-shadow: var(--shadow);

}

.split-left{

  background: var(--pink-2);

  padding: 58px 56px;

}

.split-left .eyebrow{ color: rgba(0,0,0,.7); }

.split-left h2{

  margin: 14px 0 14px;

  font-size: 46px;

  line-height: 1.04;

  letter-spacing: -0.03em;

  font-weight: 900;

}

.split-left p{

  margin: 0;

  max-width: 520px;

  color: rgba(0,0,0,.68);

  font-size: 14px;

}

.split-right{

  padding: 58px 56px;

  background: #fff;

}

.split-right .eyebrow{ color: rgba(12,27,42,.45); }

.split-right h3{

  margin: 14px 0 12px;

  font-size: 46px;

  line-height: 1.04;

  letter-spacing: -0.03em;

  font-weight: 900;

}

.split-right p{

  margin: 0;

  color: rgba(12,27,42,.72);

  max-width: 520px;

  font-size: 14px;

}



/* =========================

   Steps (3 cards with images)

   ========================= */

.steps{

  padding: 20px 0 80px;

  background: #fff;

}

.steps h2{

  margin: 10px 0 26px;

  font-size: 44px;

  letter-spacing: -0.03em;

  line-height: 1.1;

}

.steps-grid{

  display: grid;

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

  gap: 24px;

}

.step{

  background: #fff;

}

.step img{

  width: 100%;

  height: 300px;

  object-fit: cover;

  border-radius: 12px;

}

.step h4{

  margin: 16px 0 8px;

  font-size: 18px;

  font-weight: 900;

  letter-spacing: -0.01em;

}

.step p{

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  max-width: 360px;

}



/* =========================

   Operation split (dark / pink)

   ========================= */

.operation{

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 560px;

}

.operation-left{

  background:

    linear-gradient(180deg, rgba(10,23,38,.80), rgba(10,23,38,.92)),

    url("../img/izq.webp") center / cover no-repeat;

  padding: 74px 64px;

  color: #fff;

}

.operation-left .eyebrow{ color: rgba(255,255,255,.82); }

.operation-left h2{

  margin: 14px 0 14px;

  font-size: 48px;

  line-height: 1.06;

  font-weight: 900;

  letter-spacing: -0.03em;

}

.operation-left p{

  margin: 0 0 22px;

  color: rgba(255,255,255,.85);

  max-width: 560px;

  font-size: 14px;

}

.operation-right{

  background:

    linear-gradient(180deg, rgba(239,111,147,.90), rgba(239,111,147,.90)),

    url("../img/der.webp") center / cover no-repeat;

  padding: 74px 64px;

  color: #0b1623;

}

.operation-right h3{

  margin: 0 0 12px;

  font-size: 26px;

  font-weight: 900;

  letter-spacing: -0.01em;

}

.operation-right ul{

  margin: 18px 0 0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 14px;

}

.operation-right li{

  font-weight: 800;

  color: rgba(0,0,0,.78);

  position: relative;

  padding-left: 26px;

}

.operation-right li::before{

  content: "•";

  position: absolute;

  left: 8px;

  top: 0;

  font-size: 18px;

  line-height: 1;

  opacity: .7;

}



/* =========================

   Solutions

   ========================= */

.solutions{

  padding: 620px 0 140px;

  border-top: 4px solid transparent;

  padding-top: 18px;

}

.solution:nth-child(1) { border-color: #ef6f93; }

.solution:nth-child(2) { border-color: #0b1726; }

.solution:nth-child(3) { border-color: #0a1a2e; }

.solution:nth-child(4) { border-color: #ef6f93; }

.solutions h2{

  margin: 10px 0 28px;

  font-size: 46px;

  letter-spacing: -0.03em;

  line-height: 1.08;

}



.solution h4 {

  font-size: 17px;

  font-weight: 900;

  margin-bottom: 10px;

}



.solutions-grid{

  display: grid;

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

  gap: 18px;

  margin-top: 26px;

}

.card{

  border: 1px solid var(--border);

  background: #fff;

  padding: 22px;

  border-radius: 0; /* como tus capturas: más “recto” */

}

.card h4{

  margin: 0 0 10px;

  font-size: 18px;

  font-weight: 900;

}

.card p{

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.55;

}



/* =========================

   FAQ section

   ========================= */

.faq{

  padding: 70px 0 100px;

  background: #d7dbe1;

  

}

.two-cols{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 28px;

  align-items: start;

}

.faq-left{

  background: var(--navy-2);

  border-radius: 0; /* como tus capturas */

  padding: 62px 54px;

  color: #d7dbe1;

  min-height: 520px;

  display:flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 10px;

}

.faq-left h2{

  margin: 0 0 12px;

  font-size: 44px;

  font-weight: 900;

  letter-spacing: -0.03em;

  line-height: 1.08;

}

.faq-left p{

  margin: 0 0 18px;

  color: rgba(255,255,255,.85);

  max-width: 520px;

  font-size: 14px;

}

.faq-right h3{

  margin: 0 0 16px;

  font-size: 42px;

  font-weight: 900;

  letter-spacing: -0.03em;

}

details{

  border: 1px solid var(--border);

  padding: 16px 18px;

  margin-bottom: 10px;

  background: #d7dbe1;

}

summary{

  cursor: pointer;

  font-weight: 900;

  list-style: none;

}

summary::-webkit-details-marker{ display:none; }

details p{

  margin: 12px 0 0;

  color: var(--muted);

  font-size: 14px;

}



/* =========================

   Responsive

   ========================= */

@media (max-width: 1100px){

  .hero-content h1{

  white-space: normal;

  max-width: 980px;

} /* en pantallas medianas permitimos salto */

  .split-left h2, .split-right h3{ font-size: 40px; }

  .solutions-grid{ grid-template-columns: repeat(2, 1fr); }

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

  .step img{ height: 320px; }

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

}

@media (max-width: 720px){

  .header-inner, .hero-content, .container, .split{

    width: calc(100% - 28px);

  }

  .header nav{ gap: 10px; }

  .header nav a{ padding: 8px 10px; font-size: 11px; }



  .hero-content{ padding: 56px 0 110px; }

  .split{ grid-template-columns: 1fr; transform: translateY(-70px); }

  .split-left, .split-right{ padding: 34px 26px; }

  .split-left h2, .split-right h3{ font-size: 34px; }



  .two-cols{ grid-template-columns: 1fr; }

  .faq-left{ min-height: auto; }

}



/* ===============================

   FIX SECCIÓN SOLUTIONS (OVERRIDE)

   =============================== */



section.solutions {

  padding: 120px 0 140px !important;

}



section.solutions .section-eyebrow {

  display: block;

  margin-bottom: 16px;

}



section.solutions h2 {

  margin-bottom: 56px;

  max-width: 760px;

}



/* GRID DESKTOP */

section.solutions .solutions-grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 48px !important;

}



/* TARJETAS */

section.solutions .solution {

  padding-top: 8px;

}



section.solutions .solution h4 {

  margin-bottom: 12px;

  line-height: 1.25;

}



section.solutions .solution p {

  line-height: 1.55;

  max-width: 42ch;

}



/* CTA */

section.solutions .btn.center {

  margin-top: 64px;

}



/* ================================

   espacio entre el header y los LINK

================================ */



#como-funciona {

  scroll-margin-top: 160px; /* igual o un poco más que la altura del header */

}

#respuesta {

  scroll-margin-top: 90px; /* igual o un poco más que la altura del header */

}

#contact {

  scroll-margin-top: 75px; /* igual o un poco más que la altura del header */

}









/* ================================

   FIELD APP (App + Botón BLE)

================================ */



.field-app{

  background:#d7dbe1;

  padding:120px 0;

}



.field-grid{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:80px;

  align-items:center;

}



.field-text h2{

  font-size:42px;

  line-height:1.15;

  margin:12px 0 16px;

}



.field-text p{

  font-size:16px;

  max-width:420px;

  color:#4a5568;

}



/* ================================
   FIELD APP (App + Botón BLE) – PRO
================================ */

.field-media{
  position: relative;
  display: flex;
  justify-content: flex-end;
}

/* SIN marco rosado, sin padding */
.phone-mock{
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 640px;            /* ajusta tamaño del bloque */
  width: 100%;
}

/* Foto protagonista, look pro */
.phone-mock img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow:
    0 26px 70px rgba(0,0,0,.20),
    0 10px 26px rgba(0,0,0,.14);
  outline: 1px solid rgba(255,255,255,.08); /* borde súper sutil */
}

/* BLE flotante más elegante */
.ble-mock{
  position: absolute;
  right: -26px;
  bottom: -22px;
  width: 110px;
}

.ble-mock img{
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow:
    0 18px 46px rgba(0,0,0,.22),
    0 8px 18px rgba(0,0,0,.16);
  outline: 1px solid rgba(255,255,255,.10);
}



/* ================================

   PANEL PREVIEW

================================ */



.panel-preview{

  background:#ffffff;

  padding:140px 0;

}



.panel-grid{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:80px;

  align-items:center;

}





.panel-media{
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;

  max-width: 720px;   /* controla tamaño del monitor */
  width: 100%;
}

/* Imagen protagonista, look pro */
.panel-media img{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 18px;
  box-shadow:
    0 26px 70px rgba(0,0,0,.20),
    0 10px 26px rgba(0,0,0,.14);
  outline: 1px solid rgba(12,27,42,.10); /* borde sutil, pro */
}



.panel-text h2{

  font-size:42px;

  line-height:1.15;

  margin:12px 0 16px;

}



.panel-text p{

  font-size:16px;

  max-width:420px;

  color:#4a5568;

}









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



.footer{

  background:#0b1726;

  color:rgba(255,255,255,.85);

  padding:80px 0 32px;

}



.footer-inner{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:60px;

  align-items:center;

}



.footer-brand img{

  height:44px; /* más grande que el header */

  width:auto;

  margin-bottom:14px;

}



.footer-brand p{

  max-width:320px;

  font-size:14px;

  color:rgba(255,255,255,.65);

}



.footer-links{

  display:flex;

  gap:28px;

  justify-content:flex-end;

  font-size:17px;

  letter-spacing:.04em;

}



.footer-links a{

  color:rgba(255,255,255,.75);

}



.footer-links a:hover{

  color:#ffffff;

}



.footer-bottom{

  margin-top:56px;

  padding-top:24px;

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

  text-align:center;

  font-size:12px;

  color:rgba(255,255,255,.5);

}



/* ================= MOBILE ================= */



@media(max-width: 720px){

  .footer-inner{

    grid-template-columns:1fr;

    text-align:center;

  }



  .footer-links{

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

  }



  .footer-brand p{

    margin:0 auto;

  }

}





/* ===== FIX FOOTER MOBILE ALIGNMENT ===== */

@media (max-width: 768px){



  .footer{

    text-align:center;

  }



  .footer-inner{

    grid-template-columns: 1fr;

    gap:32px;

    justify-items:center;

  }



  .footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

  }



  .footer-brand img{

    margin:0 auto 12px;

  }



  .footer-brand p{

    margin:0 auto;

    max-width:260px;

  }



  .footer-links{

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

  }



  .footer-bottom{

    text-align:center;

  }

}







/* =========================

   CONTACT CTA – CENTERED

========================= */



.contact-cta--center{

  background: #cecece; /* gris suave */

  padding: 96px 0;

  text-align: center;

}



.contact-cta--center h2{

  font-size: clamp(28px, 4vw, 40px);

  margin-bottom: 14px;

  color: #0b1623;

}



.contact-cta--center p{

  max-width: 560px;

  margin: 0 auto 28px;

  font-size: 16px;

  color: rgba(11,22,35,.75);

}



.contact-cta--center .btn{

  margin-bottom: 14px;

}



.contact-cta--center .contact-note{

  display: block;

  font-size: 12px;

  letter-spacing: .04em;

  color: rgba(11,22,35,.5);

}



/* Mobile */

@media (max-width: 768px){

  .contact-cta--center{

    padding: 64px 0;

  }

}













/* ================================

   Responsive

================================ */



@media(max-width: 900px){

  .field-grid,

  .panel-grid{

    grid-template-columns:1fr;

  }



  .ble-mock{

    position:relative;

    right:auto;

    bottom:auto;

    margin-top:24px;

  }

}







/* ===============================

   RESPONSIVE (CRÍTICO)

   =============================== */



@media (max-width: 1024px) {

  section.solutions .solutions-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 32px !important;

  }

}



@media (max-width: 640px) {

  section.solutions {

    padding: 80px 0 100px !important;

  }



  section.solutions .solutions-grid {

    grid-template-columns: 1fr !important; /* UNA COLUMNA SÍ O SÍ */

    gap: 28px !important;

  }



  section.solutions h2 {

    margin-bottom: 40px;

  }

}



/* =========================
   FOOTER POWER — JELDU
========================= */

.j-footerX{
  position: relative;
  margin-top: 0px;
  background: #04080b;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

/* glow sutil + pulso radial MUY controlado */
.j-footerX::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(680px 280px at 18% 18%, rgba(222,214,200,.10), transparent 62%),
    radial-gradient(460px 220px at 28% 65%, rgba(222,214,200,.06), transparent 70%),
    radial-gradient(760px 280px at 82% 22%, rgba(255,255,255,.05), transparent 64%);
  opacity: .95;
}

/* línea premium arriba */
.j-footerX::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(222,214,200,.24), transparent);
  pointer-events:none;
}

.j-footerX__inner{
  position: relative;
  padding: 64px 0 44px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 44px;
}

/* Marca */
.j-footerX__brand{
  display:flex;
  flex-direction: column;   /* 🔥 cambia a vertical */
  align-items:flex-start;
  gap: 18px;
  min-width: 360px;
}

.j-footerX__logo{
  height: 46px;
  width:auto;
  opacity: .92;
  flex: 0 0 auto;
}

.j-footerX__brandText{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.j-footerX__tagline{
  margin:0;
  line-height: 1.05;
}

.j-footerX__tagline strong{
  display:block;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.94);
  font-weight: 950;
}

.j-footerX__tagline span{
  display:block;
  font-size: 14px;
  color: rgba(255,255,255,.70);
  letter-spacing: .01em;
  margin-top: 6px;
}

/* chips */
.j-footerX__meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.j-footerX__chip{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(222,214,200,.18);
  background: rgba(222,214,200,.06);
  color: rgba(255,255,255,.72);
}

/* nav */
.j-footerX__nav{
  display:flex;
  gap: 54px;
}

.j-footerX__col{
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-width: 150px;
}

.j-footerX__title{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 10px;
}

.j-footerX__col a{
  color: rgba(255,255,255,.76);
  font-size: 14px;
  text-decoration:none;
  padding: 4px 0;
}

.j-footerX__col a:hover{
  color: rgba(222,214,200,.95);
}

.j-footerX__hint{
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.52);
  line-height: 1.45;
}

/* bottom */
.j-footerX__bottom{
  position: relative;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(0,0,0,.22);
  padding: 16px 0;
}

.j-footerX__bottomInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: rgba(255,255,255,.46);
  font-size: 13px;
}

.j-footerX__sep{ opacity: .55; }

/* responsive */
@media (max-width: 980px){
  .j-footerX__inner{
    flex-direction: column;
    gap: 26px;
    padding: 48px 0 34px;
  }
  .j-footerX__brand{
    min-width: auto;
  }
  .j-footerX__nav{
    width: 100%;
    gap: 34px;
    flex-wrap: wrap;
  }
  .j-footerX__bottomInner{
    flex-direction: column;
    gap: 6px;
  }
}

footer.j-footerX{ margin-top: 0 !important; }

/* Aire premium, pero donde corresponde (antes del footer) */
.contact-cta--center{ padding-bottom: 120px; }