*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --yellow:#f4b400;
  --black:#111111;
  --white:#ffffff;
  --gray:#f6f6f6;
  --text:#222;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, sans-serif;
  background:var(--white);
  color:var(--black);
  overflow-x:hidden;
}

/* BANDA DE PRECIOS */
.price-ticker{
  width:100%;
  background:var(--black);
  overflow:hidden;
  padding:10px 0;
  border-bottom:2px solid var(--yellow);
}

.ticker-track{
  display:flex;
  gap:45px;
  width:max-content;
  animation:tickerMove 24s linear infinite;
}

.ticker-track span{
  color:var(--yellow);
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}

@keyframes tickerMove{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* NAVBAR */
.navbar{
  width:100%;
  padding:22px 8%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid #eee;
}

.nav-logo{
  font-size:26px;
  font-weight:900;
}

.nav-logo span{
  color:var(--yellow);
}

.navbar nav{
  display:flex;
  gap:34px;
}

.navbar nav a{
  text-decoration:none;
  color:var(--black);
  font-weight:800;
  font-size:15px;
}

.nav-button{
  background:var(--black);
  color:var(--white);
  padding:13px 24px;
  border-radius:100px;
  text-decoration:none;
  font-weight:900;
}

/* HERO */
.hero{
  min-height:650px;
  padding:60px 8%;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  position:relative;
  background:linear-gradient(135deg,#fff 0%,#fff7d8 100%);
  overflow:hidden;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  background:var(--yellow);
  border-radius:50%;
  filter:blur(100px);
  opacity:.25;
  z-index:0;
  animation:blob 10s ease-in-out infinite alternate;
}

.hero::before{
  top:80px;
  left:5%;
}

.hero::after{
  bottom:80px;
  right:12%;
  animation-delay:2s;
}

@keyframes blob{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-35px) scale(1.12);}
}

.hero-content,
.hero-visual{
  position:relative;
  z-index:2;
}

.tag{
  display:inline-block;
  background:var(--black);
  color:var(--yellow);
  padding:10px 20px;
  border-radius:100px;
  font-size:14px;
  font-weight:900;
  margin-bottom:24px;
}

.hero h1{
  font-size:68px;
  line-height:1.02;
  letter-spacing:-2px;
  margin-bottom:24px;
}

.hero p{
  font-size:21px;
  line-height:1.6;
  color:#444;
  max-width:620px;
  margin-bottom:34px;
}

.main-button{
  display:inline-block;
  background:var(--yellow);
  color:var(--black);
  padding:17px 34px;
  border-radius:100px;
  text-decoration:none;
  font-size:17px;
  font-weight:900;
  box-shadow:0 18px 38px rgba(244,180,0,.35);
}

.main-button.dark{
  background:var(--black);
  color:var(--white);
}

.hero-note{
  margin-top:18px;
  color:#555;
  font-weight:800;
}

/* CELULAR */
.hero-visual{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin-top:-60px;
  position:relative;
}

.phone-card{
  width:360px;
  height:700px;
  background:#000;
  border-radius:46px;
  padding:14px;
  position:relative;
  transform:rotate(-8deg);
  box-shadow:0 45px 90px rgba(0,0,0,.32);
  animation:phoneFloat 5s ease-in-out infinite;
}

@keyframes phoneFloat{
  0%,100%{transform:rotate(-8deg) translateY(0);}
  50%{transform:rotate(-8deg) translateY(-18px);}
}

.phone-notch{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:95px;
  height:24px;
  background:#000;
  border-radius:0 0 18px 18px;
  z-index:5;
}

.phone-slider{
  width:100%;
  height:100%;
  border-radius:34px;
  overflow:hidden;
  position:relative;
  background:#000;
}

.phone-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease;
}

.phone-slide.active{
  opacity:1;
}

/* TARJETAS FLOTANTES */
.floating-card{
  position:absolute;
  background:#fff;
  padding:15px 20px;
  border-radius:18px;
  font-weight:900;
  box-shadow:0 18px 42px rgba(0,0,0,.14);
  z-index:5;
  animation:cardFloat 4s ease-in-out infinite;
}

.card-one{
  top:110px;
  left:20px;
}

.card-two{
  right:0;
  top:330px;
  animation-delay:1s;
}

.card-three{
  bottom:140px;
  left:10px;
  animation-delay:2s;
}

@keyframes cardFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* STATS */
.stats{
  padding:80px 8%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  background:#fff;
}

.stats article{
  background:#fafafa;
  padding:36px;
  border-radius:28px;
  text-align:center;
  border:1px solid #eee;
  transition:.35s;
}

.stats article:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 45px rgba(0,0,0,.08);
}

.stats h3{
  font-size:28px;
  margin-bottom:14px;
}

.stats p{
  color:#555;
  line-height:1.6;
}

/* COMO FUNCIONA */
.how{
  padding:110px 8%;
  background:var(--black);
  color:#fff;
  text-align:center;
}

.how h2{
  font-size:48px;
  line-height:1.12;
  max-width:820px;
  margin:0 auto 55px;
}

.steps{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.steps article{
  background:#1b1b1b;
  padding:36px 28px;
  border-radius:30px;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  transition:.35s;
}

.steps article:hover{
  background:var(--yellow);
  color:var(--black);
  transform:translateY(-10px);
}

.steps span{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--yellow);
  color:var(--black);
  border-radius:50%;
  font-weight:900;
  margin-bottom:28px;
}

.steps article:hover span{
  background:var(--black);
  color:var(--yellow);
}

.steps h3{
  font-size:23px;
  margin-bottom:14px;
}

.steps p{
  color:#ccc;
  line-height:1.6;
}

.steps article:hover p{
  color:#222;
}

/* BENEFICIOS */
.benefits{
  padding:110px 8%;
  background:#f6f6f6;
  text-align:center;
}

.benefits h2{
  font-size:48px;
  margin-bottom:50px;
}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin:auto;
}

.benefit-grid article{
  background:#fff;
  padding:38px;
  border-radius:30px;
  text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,.05);
}

.benefit-grid h3{
  font-size:24px;
  margin-bottom:14px;
}

.benefit-grid p{
  color:#555;
  line-height:1.7;
}

/* CATEGORÍAS INDUSTRIALES */
.industrial-section{
  padding:100px 8%;
  background:#f6f6f6;
  text-align:center;
}

.industrial-badge{
  display:inline-block;
  background:#111;
  color:#f4b400;
  padding:12px 26px;
  border-radius:40px;
  font-weight:800;
  font-size:15px;
  margin-bottom:25px;
}

.industrial-section h2{
  font-size:44px;
  color:#111;
  margin-bottom:15px;
}

.industrial-section p{
  font-size:19px;
  color:#555;
  max-width:720px;
  margin:0 auto 50px;
}

.industrial-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}

.industrial-card{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:22px;
  padding:35px 20px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:.3s ease;
}

.industrial-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.10);
}

.industrial-card i{
  font-size:30px;
  color:#111;
  margin-bottom:18px;
}

.industrial-card h3{
  font-size:18px;
  color:#111;
  line-height:1.3;
  margin:0;
}

/* PUBLICAR */
.publish-section{
    padding:110px 8% 180px;
    background:#111;
    color:#fff;
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:60px;
    align-items:center;
}

.publish-badge{
  display:inline-block;
  background:#f4b400;
  color:#111;
  padding:12px 25px;
  border-radius:40px;
  font-weight:800;
  margin-bottom:25px;
}

.publish-content h2{
  font-size:44px;
  line-height:1.1;
  margin-bottom:25px;
}

.publish-content p{
  color:#d8d8d8;
  font-size:19px;
  line-height:1.6;
  max-width:760px;
}

.publish-list{
  margin-top:40px;
  display:grid;
  gap:22px;
}

.publish-list div{
  border-left:4px solid #f4b400;
  padding-left:20px;
}

.publish-list strong{
  display:block;
  font-size:20px;
  margin-bottom:5px;
}

.publish-list span{
  color:#cfcfcf;
}

.publish-card{
  background:#fff;
  color:#111;
  border-radius:28px;
  padding:40px;
}

.publish-card h3{
  font-size:26px;
  margin-bottom:25px;
}

.publish-card ul{
  list-style:none;
  padding:0;
  margin:0;
}

.publish-card li{
  padding:14px 0;
  border-bottom:1px solid #eee;
  font-weight:700;
}

/* DESCARGA */
.download{
  padding:120px 8%;
  background:#f4b400;
  text-align:center;
}

.download h2{
  font-size:56px;
  color:#111;
  margin-bottom:20px;
}

.download p{
  max-width:700px;
  margin:0 auto 35px;
  font-size:21px;
  color:#222;
  line-height:1.6;
}

.download .main-button{
  background:#111;
  color:#fff;
  box-shadow:none;
}

.download small{
  display:block;
  margin-top:25px;
  font-size:15px;
  font-weight:700;
  color:#111;
}

.footer-top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  padding:35px;
  border-top:1px solid #e8e8e8;
}

.footer-top a{
  color:#444;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  transition:.3s;
}

.footer-top a:hover{
  color:#f4b400;
}

.footer-top i{
  color:#f4b400;
}

.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  padding:22px;
  background:#f8f8f8;
  font-size:14px;
  color:#777;
}

.footer-bottom a{
  color:#777;
  text-decoration:none;
}

.footer-bottom a:hover{
  color:#f4b400;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .industrial-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .industrial-section h2{
    font-size:34px;
  }
}

@media(max-width:950px){
  .navbar{
    flex-direction:column;
    gap:18px;
    padding:18px 6%;
  }

  .navbar nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
  }

  .navbar nav a{
    font-size:14px;
  }

  .nav-button{
    padding:12px 22px;
    font-size:14px;
  }

  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:70px 6%;
  }

  .hero p{
    margin-left:auto;
    margin-right:auto;
  }

  .hero h1{
    font-size:44px;
  }

  .phone-card{
    width:280px;
    height:560px;
  }

  .floating-card{
    display:none;
  }

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

  .how h2,
  .benefits h2,
  .download h2{
    font-size:36px;
  }

  .publish-section{
    grid-template-columns:1fr;
    padding:80px 25px;
  }

  .publish-content h2{
    font-size:34px;
  }

  .footer-top,
  .footer-bottom{
    flex-direction:column;
    gap:18px;
  }
}

@media(max-width:520px){
  .industrial-grid{
    grid-template-columns:1fr;
  }

  .industrial-section{
    padding:75px 22px;
  }

  .download{
    padding:90px 25px;
  }

  .download h2{
    font-size:34px;
  }

  .download p{
    font-size:18px;
  }
}

/* =========================
PÁGINA NOSOTROS
========================= */

.about-hero{
  padding:110px 8%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  background:#fff;
}

.about-badge{
  display:inline-block;
  color:#f4b400;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:22px;
}

.about-text h1{
  font-size:58px;
  line-height:1.05;
  color:#111;
  margin-bottom:28px;
}

.about-text p{
  font-size:19px;
  line-height:1.8;
  color:#444;
  margin-bottom:22px;
}

.about-text strong{
  display:block;
  font-size:19px;
  line-height:1.7;
  color:#111;
  margin-top:20px;
}

.about-image img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 22px 50px rgba(0,0,0,.12);
}

.about-path{
  padding:100px 8%;
  background:#fafafa;
  text-align:center;
}

.about-path h2{
  font-size:42px;
  max-width:850px;
  margin:0 auto 18px;
  color:#111;
}

.about-intro{
  color:#555;
  font-size:18px;
  max-width:720px;
  margin:0 auto 70px;
  line-height:1.7;
}

.path-item{
  max-width:1100px;
  margin:0 auto 35px;
  display:grid;
  grid-template-columns:80px 1fr 360px;
  gap:35px;
  align-items:center;
  text-align:left;
  background:#fff;
  padding:28px;
  border-radius:26px;
  border:1px solid #eee;
}

.path-number{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#111;
  color:#f4b400;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.path-content h3{
  font-size:25px;
  color:#111;
  margin-bottom:12px;
}

.path-content p{
  font-size:17px;
  color:#555;
  line-height:1.7;
}

.path-item img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:20px;
}

.about-cta{
  margin:90px 8%;
  padding:45px;
  border-radius:30px;
  background:#f7f7f7;
  display:grid;
  grid-template-columns:160px 1fr auto;
  align-items:center;
  gap:35px;
}

.phone-mini{
  width:95px;
  height:170px;
  border:6px solid #111;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.phone-mini span{
  font-size:30px;
  font-weight:900;
  color:#111;
}

.phone-mini small{
  color:#f4b400;
  font-weight:800;
}

.about-cta h2{
  font-size:32px;
  margin-bottom:12px;
  color:#111;
}

.about-cta p{
  font-size:17px;
  color:#555;
  line-height:1.7;
}

@media(max-width:900px){
  .about-hero{
    grid-template-columns:1fr;
    padding:80px 25px;
  }

  .about-text h1{
    font-size:40px;
  }

  .about-image img{
    height:360px;
  }

  .path-item{
    grid-template-columns:1fr;
    text-align:center;
  }

  .path-number{
    margin:auto;
  }

  .about-cta{
    grid-template-columns:1fr;
    text-align:center;
    margin:70px 25px;
  }

  .phone-mini{
    margin:auto;
  }
}
/* =========================
VENDE CON NOSOTROS
========================= */

.sell-hero{
  padding:130px 8%;
  background:#fff;
}

.sell-hero h1{
  font-size:68px;
  max-width:880px;
  line-height:1.02;
  color:#111;
  margin-bottom:25px;
}

.sell-hero p{
  font-size:22px;
  color:#555;
  max-width:650px;
  line-height:1.6;
  margin-bottom:35px;
}

.sell-badge{
  display:inline-block;
  color:#f4b400;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:20px;
}

.sell-industries{
  padding:100px 8%;
  background:#f7f7f7;
  text-align:center;
}

.sell-industries h2,
.sell-models h2,
.plans h2{
  font-size:46px;
  color:#111;
  margin-bottom:18px;
}

.sell-industries p{
  color:#555;
  font-size:19px;
  max-width:720px;
  margin:0 auto 55px;
  line-height:1.6;
}

.sell-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.sell-grid article{
  background:#fff;
  border:1px solid #eee;
  border-radius:24px;
  padding:34px 24px;
  text-align:left;
  transition:.3s;
}

.sell-grid article:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.sell-grid h3{
  font-size:22px;
  color:#111;
  margin-bottom:12px;
}

.sell-grid span{
  font-size:15px;
  color:#666;
  line-height:1.6;
}

.sell-models{
  padding:110px 8%;
  background:#fff;
  text-align:center;
}

.model-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  max-width:1000px;
  margin:45px auto 0;
}

.model-grid article{
  background:#111;
  color:#fff;
  border-radius:30px;
  padding:55px 40px;
  text-align:left;
}

.model-grid h3{
  font-size:32px;
  margin-bottom:18px;
  color:#f4b400;
}

.model-grid p{
  font-size:18px;
  color:#ddd;
  line-height:1.7;
}

.plans{
  padding:110px 8%;
  background:#f7f7f7;
  text-align:center;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:55px;
}

.plans-grid article{
  background:#fff;
  border-radius:28px;
  padding:42px 32px;
  border:1px solid #eee;
  text-align:left;
  transition:.3s;
}

.plans-grid article:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.09);
}

.plans-grid h3{
  font-size:26px;
  color:#111;
  margin-bottom:15px;
}

.plans-grid strong{
  display:block;
  font-size:42px;
  color:#111;
  margin-bottom:10px;
}

.plans-grid p{
  color:#666;
  margin-bottom:25px;
}

.plans-grid ul{
  list-style:none;
}

.plans-grid li{
  padding:12px 0;
  border-bottom:1px solid #eee;
  font-weight:700;
  color:#333;
}

.featured-plan{
  background:#111 !important;
  color:#fff;
}

.featured-plan h3,
.featured-plan strong{
  color:#f4b400;
}

.featured-plan p,
.featured-plan li{
  color:#fff;
}

.sell-final{
  padding:110px 8%;
  background:#111;
  color:#fff;
  text-align:center;
}

.sell-final h2{
  font-size:44px;
  max-width:950px;
  margin:0 auto 35px;
  line-height:1.15;
}

@media(max-width:950px){
  .sell-hero h1{
    font-size:42px;
  }

  .sell-grid,
  .plans-grid,
  .model-grid{
    grid-template-columns:1fr;
  }

  .sell-industries h2,
  .sell-models h2,
  .plans h2,
  .sell-final h2{
    font-size:34px;
  }
}
/* =========================
PÁGINAS SEO
========================= */

.seo-hero{
  padding:120px 8%;
  background:#fff;
}

.seo-badge{
  display:inline-block;
  color:#f4b400;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:22px;
}

.seo-hero h1{
  font-size:64px;
  max-width:900px;
  line-height:1.05;
  color:#111;
  margin-bottom:25px;
}

.seo-hero p{
  font-size:21px;
  color:#555;
  max-width:760px;
  line-height:1.7;
  margin-bottom:35px;
}

.seo-section{
  padding:100px 8%;
  background:#f7f7f7;
  text-align:center;
}

.seo-section h2,
.seo-dark h2,
.seo-steps h2,
.seo-final h2{
  font-size:44px;
  color:#111;
  margin-bottom:45px;
}

.seo-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.seo-grid article{
  background:#fff;
  padding:24px;
  border-radius:18px;
  font-weight:800;
  border:1px solid #eee;
}

.seo-dark{
  padding:110px 8%;
  background:#111;
  text-align:center;
}

.seo-dark h2{
  color:#fff;
}

.seo-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.seo-benefits article{
  background:#1b1b1b;
  padding:38px;
  border-radius:28px;
  text-align:left;
}

.seo-benefits h3{
  color:#f4b400;
  font-size:25px;
  margin-bottom:14px;
}

.seo-benefits p{
  color:#ddd;
  line-height:1.7;
}

.seo-steps{
  padding:110px 8%;
  background:#fff;
  text-align:center;
}

.seo-final{
  padding:110px 8%;
  background:#f4b400;
  text-align:center;
}

.seo-final h2{
  max-width:900px;
  margin:0 auto 35px;
}

@media(max-width:950px){
  .seo-hero h1{
    font-size:40px;
  }

  .seo-grid,
  .seo-benefits{
    grid-template-columns:1fr;
  }
}