/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family: "Inter", sans-serif;font-optical-sizing: auto;font-style: normal;color:#1a2332;line-height:1.6;background:#fff}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
/* ===== TOKENS ===== */
:root{
  --navy:#1a2332;
  --navy-fg:#ffffff;
  --orange:#e85d26;
  --orange-fg:#ffffff;
  --bg:#ffffff;
  --fg:#1a2332;
  --muted:#64748b;
  --muted-bg:#f4f6f8;
  --border:#e2e8f0;
  --radius:0.5rem;
}
/* ===== UTILITIES ===== */
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;border:none;cursor:pointer;border-radius:var(--radius);padding:.625rem 1.5rem;transition:background .2s;}
.btn--orange{background:var(--orange);color:var(--orange-fg)}
.btn--orange:hover{background:#d14e1c}
.btn--lg{font-size:1.125rem;padding:.875rem 2.5rem;text-transform:uppercase}
.input{width:100%;height:3rem;padding:0 1rem;border:none;border-radius:var(--radius);font-size:.875rem;outline:none;background:#fff;color:var(--fg)}
.input::placeholder{color:var(--muted)}
/* ===== NAVBAR ===== */
.navbar{background: linear-gradient(180deg, #0A2463 0%, rgba(10, 36, 99, 0.00) 100%);
backdrop-filter: blur(0px);color:var(--navy-fg);position:absolute;top:0;z-index:50; width:100%; }
.navbar__inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.navbar__logo{font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
.navbar__links{display:none;align-items:center;gap:1.5rem;font-size:.875rem;font-weight:500}
.navbar__links a:hover{color:var(--orange)}
.navbar__cta{display:none}
.navbar__toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.navbar__toggle span{display:block;width:24px;height:2px;background:var(--navy-fg);border-radius:2px;transition:transform .3s,opacity .3s}
.navbar__toggle--active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__toggle--active span:nth-child(2){opacity:0}
.navbar__toggle--active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navbar__mobile{display:none;background:var(--navy);border-top:1px solid rgba(255,255,255,.1);padding:1rem}
.navbar__mobile--open{display:block}
.navbar__mobile ul{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;font-size:.875rem}
.navbar__mobile a:hover{color:var(--orange)}
@media(min-width:1024px){
  .navbar__links{display:flex}
  .navbar__cta{display:inline-flex}
  .navbar__toggle{display:none}
}
/* ===== HERO ===== */
.hero{background:url('https://static.07zr.com/images/webmarketing/landing/es/bg.jpg') no-repeat center;position:relative;overflow:hidden;padding:6rem 0 .1rem; background-size: cover;}
.hero__bg-icons{position:absolute;inset:0;pointer-events:none;opacity:.05}
.hero__icon{position:absolute;color:var(--navy-fg)}
.hero__icon--1{top:2.5rem;left:10%;transform:rotate(12deg)}
.hero__icon--2{top:5rem;right:15%;transform:rotate(-12deg);}
.hero__icon--3{bottom:2.5rem;left:20%;}
.hero__icon--4{bottom:4rem;right:10%;transform:rotate(6deg)}
.hero__content{position:relative;}
.hero h1{color:#fff;font-size: 34px; text-align: left; width: 55%;font-style: normal;font-weight: 800;line-height: normal;letter-spacing: 1.02px;text-transform: uppercase;}
.hero p{font-size:1.25rem;color:rgba(255,255,255,.7);max-width:720px;margin:0;}
/* ===== LEAD FORM ===== */
.lead-form{background:#0A2463;}
.lead-form__box{backdrop-filter:blur(8px);border-radius:.75rem;padding:1.5rem 2rem}
.lead-form__fields{display:flex;flex-direction:column;gap:.75rem}
.lead-form__note{color:rgba(255,255,255,.5);font-size:.75rem;text-align:left;margin-top:1rem}
@media(min-width:768px){
  .lead-form__fields{flex-direction:row}
}

.lead-form__box .btn {width: 100%;}
/* ===== CATEGORIES ===== */
.categories{ background-color: var(--muted-bg);background-image: url(https://static.07zr.com/images/webmarketing/landing/es/bg_bloc.jpg);padding: 4rem 0;background-size: 100%;background-repeat: no-repeat;}
.categories h2{color: #FFF;text-align: center;font-size: 34px;font-style: normal;font-weight: 800;line-height: normal;letter-spacing: 1.02px;text-transform: uppercase;}
.categories__subtitle{color: #FFF;text-align: center;font-size: 24px;font-style: normal;font-weight: 400;line-height: normal; margin:1rem 0 3rem;}
.categories__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.card--category{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;cursor:pointer;transition:border-color .2s}
.card--category:hover{border-color:var(--orange)}
.card__icon-wrap{width:3.5rem;height:3.5rem;border-radius:50%;background:rgba(232,93,38,.1);display:flex;align-items:center;justify-content:center;color:var(--orange);transition:background .2s}
.card--category:hover .card__icon-wrap{background:rgba(232,93,38,.2)}
.card--category span{font-size:.875rem;font-weight:600}
@media(min-width:768px){.categories__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.categories__grid{grid-template-columns:repeat(6,1fr)}}
/* ===== VALUE PROPOSITION ===== */
.value{padding:4rem 0}
.value__inner{display:grid;gap:0;align-items:start;justify-content: end;}
.value h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;text-transform:uppercase;margin-bottom:2rem}
.value__grid{display:grid;grid-template-columns:1fr;gap:1rem}
.card--feature{display: flex;background: #fff;min-width: 200px;border: 1px solid var(--border);border-radius: var(--radius);padding: 0 1rem;transition: border-color .2s;text-align: center;height: 170px;flex-direction: column;justify-content: center;}
.card--feature img {display: inline-block;}
.card--feature:hover{border-color:var(--orange)}
.card__icon-wrap--sm{width:2.5rem;height:2.5rem;border-radius:var(--radius);margin-bottom:.75rem}
.card--feature h3{font-weight:700;margin-bottom:.25rem}
.card--feature p{font-size:.875rem;color:var(--muted)}
.value__cta{margin-top:2rem; width: 100%;}
/* Mockup */
.value__mockup{display:flex;align-items:center;justify-content:center;position:relative}
.mockup-desktop{background:var(--navy);border-radius:.75rem;padding:1rem;width:100%;max-width:400px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.mockup-desktop__dots{display:flex;gap:6px;margin-bottom:.75rem}
.dot{width:10px;height:10px;border-radius:50%}
.dot--red{background:rgba(239,68,68,.7)}
.dot--yellow{background:rgba(232,93,38,.7)}
.dot--green{background:rgba(232,93,38,.4)}
.mockup-desktop__screen{background:var(--muted-bg);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;height:12rem}
.mockup__title{font-size:.875rem;font-weight:600;margin-top:.75rem}
.mockup__title--sm{font-size:.625rem;margin-top:.5rem}
.mockup__sub{font-size:.75rem;color:var(--muted)}
.mockup-phone{position:absolute;bottom:-2rem;right:-1rem;background:var(--navy);border-radius:1rem;padding:.75rem;width:8rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.mockup-phone__screen{background:var(--muted-bg);border-radius:var(--radius);padding:.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;height:7rem}
@media(min-width:768px){.value__grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.value__inner{grid-template-columns:1fr 1fr}}
/* ===== SERVICES ===== */
.services{background:var(--muted-bg);padding:4rem 0}
.services h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;text-transform:uppercase;text-align:center;margin-bottom:1rem; color: #0A2463;}
.services__grid{display:grid;gap:1.5rem}
.card--service{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;transition:border-color .2s}
.card--service:hover{border-color:var(--orange)}
.card--service .card__icon-wrap{width:4rem;height:4rem;margin:0 auto 1.25rem}
.card--service h3{font-weight:700;font-size:1.125rem;margin-top:1rem; color: #0A2463;}
.card--service p{font-size:.875rem;color:var(--muted)}
@media(min-width:768px){.services__grid{grid-template-columns:repeat(3,1fr)}}
/* ===== CONTACT CTA ===== */
.contact-cta{background:#fff;color:var(--navy-fg);padding:4rem 0}
.contact-cta__inner{display:grid;gap:2rem;align-items:center; background: #fff;padding: 0;border-radius: 1rem; border:2px solid #0A2463; overflow: hidden;}
.contact-cta h2{font-size:34px;font-weight:900;text-transform:uppercase;line-height:1.2;margin-bottom:1rem; color: #0A2463;}
.contact-cta p{color:#0052B4; font-size: 24px; text-transform: uppercase;line-height: normal; font-weight: 600;}
.contact-cta__action{display:flex}
.contact-cta__text {padding-left: 1rem;}
@media(min-width:768px){
  .contact-cta__inner{grid-template-columns:1fr auto}
  .contact-cta__action{justify-content:flex-end}
}
/* ===== FOOTER ===== */
.footer{background:#0A2463;color:var(--navy-fg); border-top: 18px solid #FB5736;}
.footer__contact{border-bottom:1px solid rgba(255,255,255,.1);padding:1.5rem 0; text-align: center;}
.footer__contact h7{color: #FB5736;font-size: 20px;font-style: normal;font-weight: 900;line-height: 150%; /* 30px */letter-spacing: 2px;text-transform: uppercase;}
.footer__contact-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:.875rem}
.footer__item{display:flex;align-items:center;gap:.5rem}
.footer__copy{text-align:center;font-size:.75rem;color:rgba(255,255,255,.4);padding:1rem 0}
@media(min-width:768px){.footer__contact-inner{flex-direction:row;justify-content:center;gap:3rem}}

/*** added styles ***/
.marketrecambios {background-color: #fff;background-image: url(https://static.07zr.com/images/webmarketing/landing/es/bg_blue.png);padding: 1rem 0;background-size: inherit; background-repeat: repeat-x; }
.marketrecambios .value__features {margin-top: 3rem;}
.marketrecambios .value__features h2 {color: #fff; font-size: 30px; line-height: normal; font-weight: 800; margin: 0;}
.marketrecambios .value__features p.sub {color: #fff; font-size: 20px; line-height: normal; font-weight: 600; margin: .5rem 0 2rem;}
.marketrecambios .value__features .card--feature h3 {color: #0A2463;font-size: 16px; line-height: normal; font-weight: 700;}
.marketrecambios .icone-service {display: flex;height: 60px;justify-content: center;align-items: center;margin-bottom: 10px;}
.marketrecambios .value__mockup {}
.marketrecambios .value__mockup img {max-width:606px;}
.hero .elements {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-evenly;align-items: flex-start;}
.hero .elements .text {margin-top: 2rem;}
.hero .elements .text h1 {color: #FFF;font-size: 34px;font-style: normal;font-weight: 800;line-height: normal;letter-spacing: 1.02px;text-transform: uppercase; width: 100%;}
.hero .elements .image img {max-width: 545px;}

@media (max-width:740px) {
  .hero .elements {display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-evenly;align-items: center;}
  .value__mockup {order: 2;}
  .categories {background-size: cover;}
  .marketrecambios {background-size: cover;}
.marketrecambios .value__mockup img {max-width:100%;}
}

.tva:focus {box-shadow: 0 0 15px rgb(4 123 252);transform: scale(1.02);background-color: #f0f8ff;}
.tva-animation {animation: shake 0.3s ease-in-out;}