/* ===== Servicio Técnico Balay — hoja de estilos ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#0a3d6b;--accent:#0089cf;--cta:#0089cf;--cta-dark:#006ba6;
  --dark:#0b1b2b;--light:#f4f8fb;--text:#1f2d3d;--muted:#5b6b7b;--line:#e2ecf3;
  --radius:14px;--shadow:0 6px 24px rgba(10,61,107,.09);--shadow-lg:0 16px 48px rgba(10,61,107,.16);
  --wrap:1180px;--font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);line-height:1.65;background:#fff;font-size:17px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;color:var(--primary);font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,2.9rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.15rem}
.section{padding:clamp(2.6rem,6vw,4.5rem) 0}
.section--alt{background:var(--light)}
.eyebrow{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.83rem;margin-bottom:.5rem;display:block}
.lead{font-size:1.12rem;color:var(--muted)}
.center{text-align:center}
.mt-2{margin-top:2rem}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;border-radius:999px;padding:.9rem 1.6rem;border:0;cursor:pointer;font-size:1.02rem;transition:.18s;text-decoration:none;line-height:1}
.btn--cta{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(0,137,207,.32)}
.btn--cta:hover{background:var(--cta-dark);text-decoration:none;transform:translateY(-2px)}
.btn--ghost{background:#fff;color:var(--primary);border:2px solid var(--line)}
.btn--ghost:hover{border-color:var(--accent);text-decoration:none}
.btn--lg{padding:1.05rem 2rem;font-size:1.1rem}
.btn--block{width:100%;justify-content:center}

/* Header */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;max-width:var(--wrap);margin:0 auto;padding-left:1.15rem;padding-right:1.15rem}
.header__logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{color:var(--primary);font-weight:600;font-size:.98rem}
.nav__cities{position:relative}
.nav__cities-btn{background:none;border:0;font:inherit;color:var(--primary);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.35rem}
.nav__dropdown{position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1rem 1.2rem;display:none;grid-template-columns:repeat(4,minmax(108px,1fr));gap:.1rem 1.1rem;min-width:560px;max-height:72vh;overflow-y:auto}
.nav__cities:hover .nav__dropdown,.nav__cities:focus-within .nav__dropdown{display:grid}
.nav__dropdown a{font-weight:600;font-size:.92rem;padding:.28rem 0;white-space:nowrap}
.header__phone{display:inline-flex;align-items:center;gap:.5rem;background:var(--cta);color:#fff!important;font-weight:800;padding:.6rem 1.15rem;border-radius:999px;font-size:1.05rem}
.header__phone:hover{background:var(--cta-dark);text-decoration:none}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:.4rem}
.burger span{width:26px;height:3px;background:var(--primary);border-radius:2px}

/* Hero */
.hero{background:linear-gradient(115deg,rgba(10,61,107,.94) 0%,rgba(9,74,130,.86) 48%,rgba(0,137,207,.60) 100%),url("../img/slider-v2.jpg") center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;padding:clamp(2.4rem,5vw,4rem) 0}
.hero h1{color:#fff}
.hero__sub{font-size:1.18rem;opacity:.95;margin:1rem 0 1.5rem}
.hero__badges{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.4rem;font-weight:600}
.hero__badges span{display:inline-flex;align-items:center;gap:.45rem}
.hero__badges svg{width:20px;height:20px;flex:0 0 auto}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
.hero__phone-btn{background:#fff;color:var(--primary)}
.hero__phone-btn:hover{background:#eef6fc}

/* Tarjeta formulario */
.formcard{background:#fff;color:var(--text);border-radius:18px;box-shadow:var(--shadow-lg);padding:1.6rem}
.formcard h2{font-size:1.35rem;margin-bottom:.3rem}
.formcard p.small{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.field{margin-bottom:.8rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem;color:var(--primary)}
.field input,.field select,.field textarea{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:1rem;background:#fbfdff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,137,207,.15)}
.field--check{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.field--check input{width:auto;margin-top:.2rem}
.hp{position:absolute;left:-9999px}
.form-msg{padding:.85rem 1rem;border-radius:10px;margin-bottom:1rem;font-weight:600}
.form-msg--ok{background:#e6f7ec;color:#137a3b;border:1px solid #b7e6c7}
.form-msg--err{background:#fdeaea;color:#b3261e;border:1px solid #f3c3c0}

/* Trust bar */
.trust{background:var(--primary);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.4rem 0;text-align:center}
.trust__item strong{display:block;font-size:1.5rem;color:#fff}
.trust__item span{font-size:.9rem;opacity:.85}

/* Grid electrodomésticos */
.appliances{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.appliance{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s;box-shadow:var(--shadow)}
.appliance:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}
.appliance img{aspect-ratio:3/2;object-fit:cover;width:100%}
.appliance__body{padding:1rem 1.1rem 1.2rem}
.appliance__body h3{margin-bottom:.25rem;color:var(--primary)}
.appliance__body p{font-size:.92rem;color:var(--muted);margin:0}
.appliance__more{color:var(--accent);font-weight:700;font-size:.9rem;margin-top:.6rem;display:inline-block}

/* Bloques info con imagen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split--rev .split__media{order:2}
.vanpanel{background:linear-gradient(135deg,#eaf4fb,#d3e8f7);border-radius:var(--radius);padding:2.2rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.vanpanel img{box-shadow:none;filter:drop-shadow(0 10px 18px rgba(10,61,107,.18))}
.checklist{list-style:none;margin:1rem 0}
.checklist li{position:relative;padding-left:2rem;margin-bottom:.7rem}
.checklist li::before{content:"";position:absolute;left:0;top:.15rem;width:1.35rem;height:1.35rem;background:var(--accent);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");background-size:1rem;background-repeat:no-repeat;background-position:center}

/* Buscador provincias */
.provincias{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.provincias__map img{margin:0 auto}
.provincias__list{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.provincias__list a{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-weight:700;color:var(--primary);text-align:center;transition:.15s;font-size:.95rem}
.provincias__list a:hover{background:var(--accent);color:#fff;text-decoration:none;border-color:var(--accent)}

/* CTA band */
.ctaband{background:linear-gradient(120deg,var(--primary),var(--accent));color:#fff;text-align:center}
.ctaband h2{color:#fff}
.ctaband .btn--cta{background:#fff;color:var(--primary);margin-top:1rem}
.ctaband .btn--cta:hover{background:#eef6fc}

/* Testimonios */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.testimonial__stars{color:#ffb400;font-size:1.05rem;letter-spacing:2px}
.testimonial__text{font-style:italic;margin:.6rem 0 .9rem;color:var(--text)}
.testimonial__who{font-weight:700;color:var(--primary);font-size:.95rem}
.testimonial__who span{display:block;font-weight:500;color:var(--muted);font-size:.85rem}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq__item{border:1px solid var(--line);border-radius:12px;margin-bottom:.7rem;overflow:hidden;background:#fff}
.faq__q{width:100%;text-align:left;background:none;border:0;padding:1.05rem 1.2rem;font:inherit;font-weight:700;color:var(--primary);cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1.02rem}
.faq__q::after{content:"+";font-size:1.5rem;color:var(--accent);flex:0 0 auto;transition:.2s}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 1.2rem 1.1rem;color:var(--muted)}

/* Breadcrumb */
.breadcrumb{font-size:.85rem;color:var(--muted);padding:.8rem 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{color:var(--primary);font-weight:600}

/* Zonas */
.zonas{display:flex;flex-wrap:wrap;gap:.5rem}
.zonas span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.9rem;color:var(--primary);font-weight:600}

/* Prose (legal / blog) */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:1.4rem;margin:1.6rem 0 .6rem}
.prose h3{margin:1.2rem 0 .4rem}
.prose ul,.prose ol{margin:0 0 1rem 1.2rem}
.prose li{margin-bottom:.4rem}

/* Footer */
.footer{background:var(--dark);color:#c7d6e4;padding:3rem 0 1.5rem;font-size:.94rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer h4{color:#fff;margin-bottom:.9rem;font-size:1.02rem}
.footer a{color:#c7d6e4}
.footer a:hover{color:#fff}
.footer__links{list-style:none;display:grid;gap:.4rem}
.footer__logo{height:44px;margin-bottom:1rem}
.footer__phone{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;font-size:1.25rem;margin:.6rem 0}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.85rem;opacity:.8}

/* Barra móvil inferior */
.mobilebar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:#fff;border-top:1px solid var(--line);padding:.5rem;gap:.5rem;box-shadow:0 -4px 18px rgba(0,0,0,.08);padding-bottom:calc(.5rem + env(safe-area-inset-bottom))}
.mobilebar a{flex:1;justify-content:center}

/* Topbar */
.topbar{background:var(--primary);color:#fff;font-size:.85rem}
.topbar__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem 0}
.topbar__benefits{display:flex;gap:1.3rem;flex-wrap:wrap}
.topbar__benefits span{opacity:.95;white-space:nowrap}
.topbar__phone{color:#fff!important;font-weight:800;white-space:nowrap}
.topbar__phone:hover{text-decoration:none;opacity:.9}
.topbar__horario{font-weight:700}
/* Número de teléfono más nítido y elegante (cifras tabulares) */
.tel-num,.header__phone,.contact-info__phone,.footer__phone,.topbar__phone{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.tel-num{letter-spacing:.06em;font-weight:800}
.topbar__phone .tel-num{font-size:1.02rem}
.contact-info__phone,.footer__phone{letter-spacing:.04em}

/* Proceso — cómo funciona (valor real, sustituye stats vacías) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.step{position:relative;padding-left:.2rem}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:.7rem}
.step h3{color:#fff;font-size:1.08rem;margin-bottom:.35rem}
.step p{color:#d7e9f8;font-size:.94rem;margin:0}
.header__actions{display:flex;align-items:center;gap:.7rem}
.header__cta{padding:.58rem 1.15rem;font-size:.95rem;box-shadow:0 6px 16px rgba(0,137,207,.28)}

/* Bloque contacto (columna izq. con imagen y ventajas) */
.contact-info{display:flex;flex-direction:column;height:100%}
.contact-info__phone{display:inline-flex;align-items:center;gap:.5rem;color:var(--primary);font-weight:800;font-size:1.5rem;margin:.3rem 0}
.contact-info__phone:hover{text-decoration:none;color:var(--accent)}
.contact-info__horario{color:var(--muted);margin-bottom:.4rem}
.contact-info__list{margin:.6rem 0 1.2rem}
.contact-info__media{margin-top:auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.contact-info__media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.contact-form-col{display:flex}
.contact-form-col .formcard{width:100%;align-self:stretch}

/* Checkbox privacidad en una frase (no fragmentada) */
.field--check span{flex:1;line-height:1.45}

/* Mapa SVG interactivo de provincias */
.mapwrap{position:relative;max-width:680px;margin:0 auto 1.6rem}
.spain-map{width:100%;height:auto;display:block;overflow:visible}
.spain-map .prov path{fill:var(--accent);stroke:#fff;stroke-width:1;transition:fill .15s;cursor:pointer}
.spain-map a:hover path,.spain-map a:focus path{fill:var(--primary)}
.spain-map .prov--off{fill:#c9d6e2;stroke:#fff;stroke-width:1}
.maptip{position:absolute;transform:translate(-50%,-100%);background:var(--primary);color:#fff;padding:.25rem .6rem;border-radius:7px;font-size:.8rem;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-lg);z-index:5}
.provincias__list--full{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;max-width:980px;margin:0 auto}

/* Responsive */
@media(max-width:960px){
  .hero__grid,.split,.provincias{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .appliances{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:1rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow);gap:.2rem}
  .nav.open{display:flex}
  .nav a{padding:.7rem .4rem;border-bottom:1px solid var(--line)}
  .nav__dropdown{position:static;transform:none;display:grid;box-shadow:none;border:0;padding:.4rem 0 .4rem 1rem;min-width:0;grid-template-columns:1fr 1fr}
  .burger{display:flex}
  .header__phone span{display:none}
}
@media(max-width:560px){
  .provincias__list{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr 1fr}
  .mobilebar{display:flex}
  body{padding-bottom:70px}
}
/* Ajustes navbar nuevo */
@media(min-width:961px){ .header__phone{display:none} }
@media(max-width:960px){
  .header__phone{display:flex;background:var(--cta);color:#fff!important;justify-content:center}
  .header__phone span{display:inline}
}
@media(max-width:768px){ .topbar{display:none} .provincias__list--full{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .header__cta{display:none} }
@media(max-width:480px){ .provincias__list--full{grid-template-columns:repeat(2,1fr)} }
