:root{--navy:#0a2142;--orange:#ff8500;--cream:#fffaf2;--muted:#53627a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--navy);font-family:Arial,Helvetica,sans-serif;background:#fff}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.container{max-width:1420px;margin:auto;padding-left:30px;padding-right:30px}
.site-header{background:white;position:relative;z-index:10;box-shadow:0 1px 10px #10203a0d}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo img{width:64px;height:56px;object-fit:contain}
.logo span{display:flex;flex-direction:column;line-height:1}
.logo strong{font-size:29px;letter-spacing:1px}
.logo small{font-size:12px;letter-spacing:5px;margin-top:4px;font-weight:700}
.desktop-nav{display:flex;align-items:center;gap:23px;font-size:14px}
.desktop-nav a:hover,.service-card a:hover{color:var(--orange)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:28px;padding:15px 26px;font-weight:700;cursor:pointer;text-align:center}
.orange{background:var(--orange);color:white}
.orange:hover{background:#e67500}
.header-cta{font-size:14px;white-space:nowrap}
.hero{position:relative;background:#d8eaf4 url('/images/terraza-portada.jpg') center center/cover no-repeat;min-height:540px}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(236,246,253,.91) 0%,rgba(236,246,253,.66) 33%,rgba(236,246,253,.04) 72%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:55px;align-items:center;padding-top:24px;padding-bottom:24px}
.hero-copy{max-width:640px;padding:25px 0}
.hero-kicker{font-size:12px;letter-spacing:2px;font-weight:800}
.hero-copy h1{font-size:clamp(38px,4vw,62px);line-height:1.08;letter-spacing:-2px;margin:15px 0 8px}
.hero-copy h2{font-size:clamp(25px,2.7vw,37px);line-height:1.12;letter-spacing:-1px;margin:0 0 18px}
.hero-copy p{font-size:18px;line-height:1.55;max-width:560px}
.hero-button{margin:10px 0 24px}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:13px;font-weight:700}
.hero-trust span{background:#ffffffa8;padding:7px 9px;border-radius:16px}
.quote-card{background:#fff;border-radius:14px;padding:25px;box-shadow:0 16px 45px #112d4c38}
.quote-card h2{font-size:25px;letter-spacing:-.7px;margin:0 0 5px}
.quote-card>p{margin:0 0 16px;color:var(--muted);font-size:14px}
.quote-card form{display:flex;flex-direction:column;gap:7px}
.quote-card form>label:not(.checkbox-line){font-size:12px;font-weight:700;margin-top:3px}
.quote-card input:not([type=checkbox]),.quote-card select,.quote-card textarea{width:100%;border:1px solid #cfd7e1;border-radius:6px;padding:11px 13px;background:#fff;color:var(--navy);min-height:42px}
.quote-card textarea{resize:vertical}
.quote-card input:focus,.quote-card textarea:focus,.quote-card select:focus{outline:2px solid #ffb04e;outline-offset:1px}
.checkbox-line{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.4;margin-top:5px}
.checkbox-line input{flex-shrink:0;margin:2px 0 0;accent-color:var(--orange)}
.checkbox-line a,.service-card a{color:#eb7800}
.submit-button{width:100%;margin-top:10px}
#form-status{font-size:13px;line-height:1.4;margin:4px 0 0}
.honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.benefits{background:var(--cream);border-bottom:1px solid #f1ece4}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:24px;padding-bottom:24px}
.benefits-grid>div{display:flex;gap:14px;align-items:center}
.benefit-icon{font-size:37px;color:var(--orange);min-width:42px;text-align:center}
.benefits-grid p{margin:0}
.benefits-grid strong{display:block;font-size:14px}
.benefits-grid small{display:block;font-size:12px;line-height:1.5;margin-top:4px;color:var(--muted)}
.section{padding:56px 0}
.section-title{text-align:center;margin-bottom:26px}
.section-title h2{font-size:34px;margin:0 0 6px;letter-spacing:-.8px}
.section-title p{color:var(--muted);margin:0}
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}
.service-card img{width:100%;height:180px;object-fit:cover;border-radius:9px;display:block}
.service-card h3{font-size:18px;margin:13px 0 5px}
.service-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 9px}
.service-card a{font-weight:700;font-size:14px}
.photo-disclaimer{color:#7b8795;font-size:11px;margin-top:22px}
.soft{background:#f7f9fc}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps article{background:white;border-radius:12px;padding:26px}
.steps b{font-size:30px;color:var(--orange)}
.steps h3{margin:12px 0}
.steps p,.zones p,.faq p{color:var(--muted);line-height:1.7}
.zones{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center}
.zones h2{font-size:34px;margin:10px 0}
.eyebrow{color:#e57900;font-size:12px;font-weight:800;letter-spacing:2px}
.zone-highlight{background:var(--cream);border-radius:16px;text-align:center;padding:55px 25px}
.zone-highlight span{font-size:56px;color:var(--orange)}
.faq{max-width:900px}
.faq h2{text-align:center;font-size:32px}
.faq details{border-bottom:1px solid #dce3ed;padding:16px 0}
.faq summary{cursor:pointer;font-weight:700}
footer{background:var(--navy);color:#fff;padding:45px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}
.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-grid p{font-size:13px;line-height:1.6;color:#c5d0dd;max-width:360px}
.footer-logo strong{font-size:23px}
.footer-logo small{font-size:9px;letter-spacing:4px}
.copyright{font-size:12px;color:#a9bacb;border-top:1px solid #ffffff24;margin-top:30px;padding-top:20px}
@media(max-width:1100px){
 .desktop-nav{gap:11px;font-size:12px}
 .header-cta{display:none}
 .hero-grid{grid-template-columns:1fr 370px;gap:20px}
 .services-grid{gap:15px}
}
@media(max-width:800px){
 .header-inner{flex-wrap:wrap;padding-top:10px;padding-bottom:12px}
 .desktop-nav{width:100%;overflow-x:auto;white-space:nowrap;padding:5px 0 8px}
 .hero-grid{grid-template-columns:1fr;padding-top:30px;padding-bottom:35px}
 .hero{background-position:60% center}
 .hero-overlay{background:linear-gradient(180deg,rgba(238,247,253,.92),rgba(238,247,253,.55))}
 .hero-copy{padding:0}
 .quote-card{max-width:560px;width:100%;margin:auto}
 .benefits-grid,.services-grid{grid-template-columns:repeat(2,1fr)}
 .steps{grid-template-columns:1fr}
 .zones{grid-template-columns:1fr}
}
@media(max-width:520px){
 .container{padding-left:18px;padding-right:18px}
 .logo img{width:49px;height:48px}
 .logo strong{font-size:23px}
 .logo small{font-size:9px;letter-spacing:4px}
 .hero-copy h1{font-size:38px}
 .hero-copy h2{font-size:26px}
 .hero-copy p{font-size:16px}
 .hero-trust{font-size:11px}
 .quote-card{padding:20px}
 .benefits-grid{gap:18px}
 .benefits-grid>div{align-items:flex-start}
 .benefit-icon{font-size:28px;min-width:28px}
 .services-grid{grid-template-columns:1fr}
 .service-card img{height:220px}
 .section{padding:40px 0}
 .section-title h2{font-size:29px}
 .footer-grid{grid-template-columns:1fr}
}

/* SEO-SERVICIOS-V1 */
.seo-service-directory {
  background: #fffaf2;
}
.seo-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.seo-service-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 22px 16px;
  background: white;
  border: 1px solid #f0e5d6;
  border-radius: 12px;
  color: #0a2142;
  font-weight: 700;
  font-size: 14px;
  transition: border-color .2s;
}
.seo-service-link span {
  color: #ff8500;
  font-size: 21px;
}
.seo-service-link:hover {
  border-color: #ff8500;
}
@media(max-width:1050px) {
  .seo-service-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media(max-width:650px) {
  .seo-service-grid {
    grid-template-columns: 1fr;
  }
}

/* IMAGENES-SEO-V1 */
@media(min-width:1101px){.services-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.service-card img{aspect-ratio:17/9;object-fit:cover;height:auto}

/* FORMULARIO-MOVIL-V2 */

html {
  scroll-behavior: smooth;
}

#presupuesto {
  scroll-margin-top: 105px;
}

.quote-card input:not([type=checkbox]),
.quote-card select,
.quote-card textarea {
  min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}

.quote-card textarea {
  min-height: 105px;
}

.quote-card .checkbox-line {
  line-height: 1.5;
}

.quote-card .checkbox-line input {
  width: 18px;
  height: 18px;
}

.submit-button {
  min-height: 52px;
  font-size: 15px;
}

.submit-button:disabled {
  opacity: .7;
  cursor: wait;
}

#form-status {
  min-height: 0;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.5;
}

#form-status:not(:empty) {
  padding: 13px 15px;
  margin-top: 12px;
}

#form-status.status-success {
  background: #e9f7ee;
  color: #17633a;
  border: 1px solid #b5e4c6;
}

#form-status.status-error {
  background: #fff0ed;
  color: #a33122;
  border: 1px solid #f2c5bc;
}

#form-status.status-loading {
  background: #eef4fc;
  color: #244c78;
  border: 1px solid #cbdcf1;
}

@media (max-width: 800px) {
  #presupuesto {
    scroll-margin-top: 20px;
  }

  .quote-card input:not([type=checkbox]),
  .quote-card select,
  .quote-card textarea {
    font-size: 16px;
  }

  .quote-card form {
    gap: 9px;
  }

  .quote-card form>label:not(.checkbox-line) {
    font-size: 13px;
  }

  .submit-button {
    min-height: 54px;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* MENU-MOVIL-V1 */

.mobile-menu-toggle,
.mobile-navigation {
  display: none;
}

@media (max-width: 800px) {

  .site-header {
    position: relative;
    z-index: 50;
  }

  .header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    gap: 12px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: #f4f7fb;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-menu-toggle span {
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: #0a2142;
    transition: transform .2s, opacity .2s;
  }

  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-navigation:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: 1px solid #e5ebf1;
    box-shadow: 0 14px 24px #10203a16;
    padding: 8px 18px 20px;
  }

  .mobile-navigation a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 10px;
    border-bottom: 1px solid #edf1f5;
    color: #0a2142;
    font-size: 15px;
    font-weight: 600;
  }

  .mobile-navigation a:focus-visible,
  .mobile-menu-toggle:focus-visible {
    outline: 3px solid #ff8500;
    outline-offset: 2px;
  }

  .mobile-navigation .mobile-budget-link {
    justify-content: center;
    margin-top: 14px;
    padding: 14px;
    border: none;
    border-radius: 25px;
    background: #ff8500;
    color: #fff;
    font-weight: 700;
  }
}

@media (min-width: 801px) {
  .mobile-menu-toggle,
  .mobile-navigation {
    display: none !important;
  }
}


/* MENU-FIJO-V1 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

html {
  scroll-padding-top: 95px;
}

#presupuesto,
#inicio,
#servicios,
#servicios-especializados,
#tipos,
#como-funciona,
#zonas,
#contacto,
#municipios-seo {
  scroll-margin-top: 95px;
}