/* ============================================================================
   Qartscan — hoja de estilo de la web informativa (SUSTITUYE a web.css).
   La carga web/layout.php cuando existe web/assets/<marca>.css.

   Por qué un tema entero y no un cambio de color: la web de MovilMenu está
   construida sobre un acento CÁLIDO Y CLARO (naranja) sobre barra gris oscura.
   El acento de Qartscan es petróleo #0A5F82 — un color OSCURO —, así que ese
   mismo diseño daba azul oscuro sobre gris oscuro: menú a 2.15:1 y logotipo
   perdido en la barra.

   TIPOGRAFÍA. DOS familias, cada una con su trabajo:
     · TITULARES en INSTRUMENT SANS (--font-h), la letra elegida para la marca.
       Solo tiene hasta Bold, así que la escala de pesos es 700 en H1/H2 y 600
       en el resto de titulares — no hay 800 en ninguna parte.
     · CUERPO en el stack de siempre (--font): Avenir si el sistema la tiene
       (macOS/iOS) y Lexend como sustituto libre en el resto.
   Los .woff2 se sirven desde aquí, no desde Google: una petición menos a un
   tercero.

   ESCALA. Cuerpo a 17px en escritorio (16px en móvil) y titulares grandes: la
   primera versión se quedaba corta de tamaño en las dos pantallas.

   PROFUNDIDAD. Superficies con sombra suave y elevación al pasar el cursor,
   iconos sobre disco de color y radios de 8px. La versión plana de 2px de radio
   y cero sombra se leía como una web antigua.
   ========================================================================== */

/* --- Instrument Sans (titulares) -------------------------------------------- */
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- Lexend (sustituto libre de Avenir) ------------------------------------- */
@font-face{font-family:'Lexend';src:url('fonts/lexend-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lexend';src:url('fonts/lexend-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --petroleo:#0A5F82;
  --petroleo-d:#074157;
  --petroleo-xd:#052F3F;
  --petroleo-l:#3C87A6;
  --petroleo-soft:#E7F1F6;
  --cobre:#C0733C;         /* reglas, marcos y detalles SIN texto encima */
  /* Cobre oscuro para superficies con texto blanco: el cobre de marca sobre
     blanco da 3.65:1, insuficiente para el texto de un botón. Este da 5.03:1. */
  --cobre-d:#A25E2E;
  --cobre-dd:#8A4F26;
  --cobre-l:#E7C3A2;
  --cobre-soft:#F7ECE2;
  --crema:#FBF7F1;
  --crema-d:#F4EDE4;
  --tinta:#16242E;
  --gris:#54646E;
  --linea:#E6DCCF;
  --blanco:#FFFFFF;
  --maxw:1180px;
  --r:8px;                 /* radio base */
  --r-s:6px;
  --sh-s:0 1px 2px rgba(7,65,87,.06), 0 4px 12px rgba(7,65,87,.06);
  --sh-m:0 2px 6px rgba(7,65,87,.08), 0 14px 32px rgba(7,65,87,.10);
  --sh-l:0 20px 60px rgba(5,47,63,.28);
  --font:'Avenir Next','Avenir','Lexend',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-h:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:17px}
body{margin:0;font-family:var(--font);color:var(--tinta);background:var(--crema);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:1rem}
img{max-width:100%;display:block}
a{color:var(--petroleo);text-decoration:none;transition:color .15s}
a:hover{color:var(--cobre-d)}
/* Titulares: H1/H2 a 700, el resto a 600. Instrument Sans no llega a 800. */
h1,h2,h3,h4{font-family:var(--font-h);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 .5em}
h1,h2{font-weight:700}
p{margin:0 0 1em}
.wb-container,.qs-container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wb-muted{color:var(--gris)}
.wb-center{text-align:center}
.wb-narrow{max-width:780px;margin:0 auto}
.wb-mt{margin-top:32px}
.wb-hidden{display:none}
.wb-link{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- CABECERA -- */
.qs-head{position:sticky;top:0;z-index:60;background:rgba(251,247,241,.92);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--linea);box-shadow:0 1px 0 rgba(192,115,60,.25)}
.qs-head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.qs-brand{display:flex;align-items:center}
.qs-logo{height:32px;width:auto}
.qs-nav{display:flex;align-items:center;gap:26px}
.qs-nav a{color:var(--petroleo);font-weight:600;font-size:1rem;padding:6px 0;border-bottom:2px solid transparent}
.qs-nav a:hover{color:var(--cobre-d);border-bottom-color:var(--cobre)}
.qs-nav a.is-active{color:var(--tinta);border-bottom-color:var(--cobre)}
.qs-nav a.qs-lang{border:1px solid var(--linea);border-radius:var(--r-s);padding:5px 11px;font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--gris)!important;border-bottom:1px solid var(--linea)!important}
.qs-nav a.qs-lang:hover{border-color:var(--cobre);color:var(--cobre-d)!important}
.qs-login{color:var(--gris)!important;font-weight:600}
.qs-nav a.qs-cta{background:var(--cobre-d);color:var(--blanco)!important;padding:12px 28px;border-radius:var(--r-s);font-weight:700;font-size:.98rem;border-bottom:none!important;box-shadow:0 2px 8px rgba(162,94,46,.28)}
.qs-nav a.qs-cta:hover{background:var(--cobre-dd);color:var(--blanco)!important;box-shadow:0 4px 14px rgba(162,94,46,.34)}
.qs-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.qs-burger span{width:24px;height:2px;background:var(--petroleo);border-radius:2px}
.qs-navtoggle{display:none}

/* ------------------------------------------------------------------- BOTONES -- */
.wb-btn,.qs-btn{display:inline-block;padding:14px 28px;font-weight:700;font-size:1.02rem;border-radius:var(--r-s);border:2px solid transparent;transition:background .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s}
.wb-btn-primary,.qs-btn-primary{background:var(--cobre-d);color:var(--blanco)!important;border-color:var(--cobre-d);box-shadow:0 4px 14px rgba(162,94,46,.3)}
.wb-btn-primary:hover,.qs-btn-primary:hover{background:var(--cobre-dd);border-color:var(--cobre-dd);color:var(--blanco)!important;box-shadow:0 8px 22px rgba(162,94,46,.36);transform:translateY(-1px)}
.wb-btn-ghost,.qs-btn-ghost{background:transparent;color:var(--petroleo)!important;border-color:var(--petroleo)}
.wb-btn-ghost:hover,.qs-btn-ghost:hover{background:var(--petroleo);color:var(--blanco)!important;transform:translateY(-1px)}
.wb-btn-lg{padding:16px 34px;font-size:1.08rem}
/* Fila de botones (FAQ, 404): eran <a> inline-block separados solo por el
   espacio del HTML — 4 px en escritorio y PEGADOS al apilarse en móvil,
   porque el salto de línea no deja hueco vertical. */
.wb-btnrow{display:flex;flex-wrap:wrap;gap:16px 20px;justify-content:center}
.qs-btn-onDark{background:rgba(255,255,255,.1);color:var(--blanco)!important;border-color:rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.qs-btn-onDark:hover{background:var(--blanco);color:var(--petroleo-d)!important;border-color:var(--blanco);transform:translateY(-1px)}

/* ---------------------------------------------------------------------- HERO -- */
/* Foto a sangre con gente + velo de marca: el punto humano funciona y es lo que
   pedía la marca. El mockup del teléfono se superpone a la derecha y sobresale
   sobre la banda siguiente, que es lo que le quita planitud a la portada. */
.qs-hero{position:relative;background-size:cover;background-position:center 60%;color:var(--blanco);padding:96px 0 104px;overflow:visible}
.qs-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,47,63,.95) 0%,rgba(7,65,87,.88) 42%,rgba(7,65,87,.55) 72%,rgba(7,65,87,.35) 100%)}
.qs-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.qs-kicker{display:inline-block;font-family:var(--font-h);font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cobre-l);margin-bottom:16px}
.qs-hero h1{font-size:clamp(2.4rem,4.8vw,3.7rem);margin-bottom:.3em;color:var(--blanco);text-shadow:0 2px 20px rgba(0,0,0,.25)}
.qs-hero-sub{font-size:1.22rem;color:rgba(255,255,255,.92);max-width:32em}
.qs-hero-list{list-style:none;margin:26px 0 32px;padding:0;display:grid;gap:12px}
.qs-hero-list li{position:relative;padding-left:32px;font-weight:600;font-size:1.06rem;color:var(--blanco)}
.qs-hero-list li::before{content:"";position:absolute;left:0;top:.46em;width:18px;height:18px;border-radius:50%;background:var(--cobre);box-shadow:0 0 0 4px rgba(192,115,60,.25)}
.qs-hero-list li::after{content:"";position:absolute;left:5px;top:.72em;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.qs-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.qs-hero-art{position:relative;z-index:3}
.qs-hero-art img{width:100%;height:auto;border-radius:14px;box-shadow:var(--sh-l);border:5px solid rgba(255,255,255,.9)}
.qs-hero-note{margin-top:20px;font-size:.98rem;font-weight:700;color:rgba(255,255,255,.92)}

/* ------------------------------------------------------------------- PILARES -- */
.qs-band{background:var(--petroleo-d);color:var(--blanco)}
.qs-band h2,.qs-band h3{color:var(--blanco)}
.qs-pillars{padding:56px 0}
.qs-pillars-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.qs-pillar{border-top:3px solid var(--cobre);padding-top:18px}
.qs-pillar b{display:block;font-family:var(--font-h);font-size:1.14rem;font-weight:600;margin-bottom:6px}
.qs-pillar span{font-size:.98rem;color:rgba(255,255,255,.84);line-height:1.55}

/* ------------------------------------------------------------------ SECCIONES -- */
.wb-section,.qs-section{padding:80px 0}
.wb-section-alt,.qs-section-alt{background:linear-gradient(180deg,var(--crema-d) 0%,var(--crema) 100%)}
.wb-h1,.qs-h1{font-size:clamp(2.1rem,3.8vw,2.9rem);margin-bottom:.4em}
.wb-h2,.qs-h2{font-size:clamp(1.75rem,3vw,2.35rem);margin-bottom:.7em}
.wb-lead,.qs-lead{font-size:1.16rem;color:var(--gris);max-width:62ch}
.wb-intro{margin-bottom:38px}
.wb-intro-left{max-width:70ch}
.qs-eyebrow{font-family:var(--font-h);font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cobre-d);margin-bottom:10px}

/* ---------------------------------------------------------------------- PASOS -- */
.wb-steps,.qs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.wb-step,.qs-step{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:30px 26px;box-shadow:var(--sh-s);transition:box-shadow .18s,transform .18s}
.wb-step:hover,.qs-step:hover{box-shadow:var(--sh-m);transform:translateY(-2px)}
.wb-step-n,.qs-step-n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--cobre-soft);color:var(--cobre-d);font-family:var(--font-h);font-size:1.2rem;font-weight:700;margin-bottom:16px}
.wb-step h3,.qs-step h3{font-size:1.22rem;margin-bottom:.35em}
.wb-step p,.qs-step p{color:var(--gris);margin:0;font-size:1.02rem}

/* ------------------------------------------------------------------- TARJETAS -- */
.wb-grid,.qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wb-card,.qs-card{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:28px 24px;box-shadow:var(--sh-s);transition:box-shadow .18s,transform .18s,border-color .18s}
.wb-card:hover,.qs-card:hover{box-shadow:var(--sh-m);transform:translateY(-3px);border-color:var(--cobre-l)}
.wb-card.is-feat,.qs-card.is-feat{border-top:3px solid var(--cobre)}
.wb-card h3,.qs-card h3{font-size:1.16rem;margin-bottom:.35em}
.wb-card p,.qs-card p{color:var(--gris);font-size:1.02rem;margin:0}
.wb-card-ico,.qs-card-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--petroleo-soft);color:var(--petroleo);margin-bottom:16px}
.wb-card.is-feat .wb-card-ico,.qs-card.is-feat .qs-card-ico{background:var(--cobre-soft);color:var(--cobre-d)}
.wb-card-ico svg,.qs-card-ico svg{width:26px;height:26px}
.wb-feat-badge{position:absolute;top:14px;right:14px;background:var(--cobre-d);color:#fff;font-family:var(--font-h);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px}

/* --------------------------------------------------------------------- PRECIO -- */
.qs-price-box{max-width:620px;margin:0 auto;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:46px 38px;text-align:center;box-shadow:var(--sh-m)}
.qs-price-fig{font-family:var(--font-h);font-size:4rem;font-weight:700;line-height:1;color:var(--petroleo);letter-spacing:-.03em}
.qs-price-per{font-size:1.1rem;color:var(--gris)}
.qs-price-note{color:var(--gris);font-size:1rem;margin-top:8px}
.qs-price-trial{color:var(--tinta);font-weight:700}
.qs-price-list{list-style:none;margin:28px 0;padding:0;text-align:left;display:grid;gap:12px}
.qs-price-list li{position:relative;padding-left:30px;color:var(--tinta)}
.qs-price-list li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--cobre-d);font-weight:700}
.wb-price,.wb-plan-price{font-family:var(--font-h);font-size:3rem;font-weight:700;color:var(--petroleo);letter-spacing:-.03em}
.wb-plan{max-width:620px;margin:0 auto;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:40px 38px;box-shadow:var(--sh-m)}
.wb-plan-list,.wb-plan-lines,.wb-legal-list,.qs-list{list-style:none;margin:22px 0;padding:0;display:grid;gap:12px}
.wb-plan-list li,.wb-plan-lines li,.qs-list li{position:relative;padding-left:30px}
.wb-plan-list li::before,.wb-plan-lines li::before,.qs-list li::before{content:"✓";position:absolute;left:0;color:var(--cobre-d);font-weight:700}
.wb-plan-iva,.wb-plan-below,.wb-plan-all,.wb-cta-note{color:var(--gris);font-size:.98rem}
/* Las 4 líneas bajo el precio y las 3 de encima del botón: son bloques de <p>,
   así que sumaban el gap de la rejilla y el margen inferior del párrafo. Se
   anula el margen y se aprieta el interlineado; el aire queda ENTRE bloques. */
.wb-plan-iva{margin:4px 0 0}
.wb-plan-lines{gap:4px;margin:20px 0 0;line-height:1.45}
.wb-plan-lines p{margin:0}
.wb-plan-below{margin:22px 0 26px;display:grid;gap:4px;line-height:1.45}
.wb-plan-below p{margin:0}
.wb-plan-all{padding-top:8px}
.wb-plan-trial{margin:0 0 18px;color:var(--tinta);font-weight:700}
/* La lista de lo incluido se lee como lista, no centrada: el bloque va centrado
   dentro de la ficha, pero el texto alineado a la izquierda y pegado al ✓. */
.wb-plan-list{text-align:left;display:inline-grid;justify-items:start;margin:26px 0;gap:10px}
.wb-plan-list li{padding-left:24px;line-height:1.5}
.wb-plan-list li::before{top:0}
/* Fondo muy suave bajo la ficha: la foto se adivina, no compite. */
.qs-plan-band{position:relative;background-size:cover;background-position:center;isolation:isolate}
.qs-plan-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(251,247,241,.86) 0%,rgba(251,247,241,.62) 45%,rgba(251,247,241,.86) 100%)}
.wb-check{color:var(--cobre-d);font-weight:700}

/* ------------------------------------------------------------------ CIERRE/CTA -- */
.qs-closing{position:relative;padding:96px 0;background-size:cover;background-position:center;color:var(--blanco)}
.qs-closing::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,47,63,.95) 0%,rgba(7,65,87,.82) 55%,rgba(7,65,87,.5) 100%)}
.qs-closing-in{position:relative;z-index:2;max-width:680px}
.qs-closing h2{color:var(--blanco);font-size:clamp(1.9rem,3.4vw,2.6rem)}
.qs-closing p{color:rgba(255,255,255,.9);font-size:1.14rem}
.qs-closing .qs-hero-cta{margin-top:28px}
.wb-cta-band{background:linear-gradient(180deg,var(--crema-d) 0%,var(--crema) 100%)}
.wb-cta-box{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-m)}
.wb-cta-box-img{background-size:cover;background-position:center;min-height:300px}
.wb-cta-box-txt{padding:40px 36px}
.wb-cta-price{font-family:var(--font-h);font-size:2.8rem;font-weight:700;color:var(--petroleo);margin:6px 0;letter-spacing:-.03em}

/* ---------------------------------------------------- CABECERA DE SECUNDARIAS -- */
.wb-chero{position:relative;padding:88px 0;background-size:cover;background-position:center;color:var(--blanco)}
.wb-chero-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,47,63,.93),rgba(7,65,87,.6))}
.wb-chero-in{position:relative;z-index:2;max-width:760px}
.wb-chero h1,.wb-chero .wb-h1{color:var(--blanco)}
.wb-chero-sub{color:rgba(255,255,255,.9);font-size:1.14rem}

/* --------------------------------------------------------- HERO GENÉRICO (wb) -- */
.wb-hero{padding:70px 0;border-bottom:1px solid var(--linea)}
.wb-hero--photo{background-size:cover;background-position:center;color:var(--blanco);position:relative}
.wb-hero-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,47,63,.94),rgba(7,65,87,.55))}
.wb-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.wb-hero-copy h1{font-size:clamp(2.2rem,4.2vw,3.2rem)}
.wb-hero-sub{font-size:1.18rem;color:var(--gris)}
.wb-hero--photo .wb-hero-sub{color:rgba(255,255,255,.92)}
.wb-hero-bullets{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:10px}
.wb-hero-bullets li{position:relative;padding-left:30px;font-weight:600}
.wb-hero-bullets li::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:50%;background:var(--cobre)}
.wb-hero-art,.wb-phone,.wb-phone-screen,.wb-hero-spill{display:none}

/* ------------------------------------------------------------------ SPLIT/FOTO -- */
.wb-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.wb-split-img{width:100%;height:100%;min-height:320px;background-size:cover;background-position:center;border-radius:var(--r);box-shadow:var(--sh-m)}
/* Variante con foto VERTICAL (mockup de la carta en el celular, en Precios y en la
   FAQ): la foto manda sobre la caja — se ve entera y limitada en alto, porque una
   vertical a ancho completo dejaría la sección larguísima. */
.wb-split--tall{grid-template-columns:.82fr 1.18fr}
.wb-split--tall .wb-split-img{min-height:0;box-shadow:none;border-radius:0}
.wb-split--tall .wb-split-img img{width:auto;max-width:100%;max-height:560px;margin:0 auto;border-radius:var(--r);box-shadow:var(--sh-m)}
.wb-split--tall .wb-btnrow{justify-content:flex-start}
.wb-stripe{height:4px;background:var(--cobre);width:76px;margin:0 0 24px;border-radius:2px}

/* ------------------------------------------------------------------------ FAQ -- */
.wb-faq-h2{font-size:1.5rem;margin:42px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--cobre)}
.wb-faq-item{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:20px 22px;margin-bottom:12px;box-shadow:var(--sh-s)}
.wb-faq-item h3{font-size:1.1rem;margin-bottom:.3em}
.wb-faq-item p{color:var(--gris);margin:0}
.wb-faq-toc{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.wb-faq-toc a{border:1px solid var(--linea);border-radius:100px;padding:7px 16px;font-size:.94rem;background:var(--blanco)}
.wb-faq-toc a:hover{border-color:var(--cobre);color:var(--cobre-d);box-shadow:var(--sh-s)}

/* ------------------------------------------------------------------ CONTACTO -- */
.wb-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.wb-form{display:grid;gap:18px}
.wb-field label{display:block;font-weight:600;font-size:.98rem;margin-bottom:7px}
.wb-input{width:100%;padding:13px 15px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--blanco);font:inherit;font-size:1rem;color:var(--tinta)}
.wb-input:focus{outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(10,95,130,.15)}
.wb-req{color:var(--cobre-d)}
.wb-msg{padding:14px 16px;border:1px solid var(--linea);border-left:4px solid var(--cobre);border-radius:var(--r-s);background:var(--blanco)}
.wb-msg.ok{border-left-color:#2e7d52}
.wb-msg.err{border-left-color:#b3402c}
.wb-hours,.wb-contact-k{color:var(--gris);font-size:1rem}
/* Pie de la foto de Contacto: vive dentro del recuadro de la imagen, que no
   tiene relleno propio, así que el texto tocaba el borde izquierdo. */
.wb-split-img .wb-hours{padding:0 20px;margin-top:14px}
.wb-split-img .wb-hours:last-child{padding-bottom:20px}
/* Columna izquierda de Contacto. Antes era una lista suelta con el email y
   dejaba medio ancho vacío junto a la foto: ahora se sostiene sola con
   entradilla, vías de contacto en filas y los dos botones de acción. */
.qs-contact-col{align-self:center}
.qs-contact-col .qs-h2{font-size:clamp(1.5rem,2.4vw,1.95rem)}
.qs-contact-list{display:grid;gap:10px;margin:26px 0 28px}
.qs-contact-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sh-s);transition:box-shadow .18s,transform .18s,border-color .18s}
.qs-contact-row:hover{box-shadow:var(--sh-m);transform:translateY(-2px);border-color:var(--cobre-l)}
.qs-contact-row > span:last-child{display:grid;line-height:1.35;min-width:0}
.qs-contact-row b{font-family:var(--font-h);font-weight:600;color:var(--tinta)}
.qs-contact-row span span{color:var(--gris);font-size:.94rem;overflow-wrap:anywhere}
.qs-contact-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--petroleo-soft);color:var(--petroleo)}
.qs-contact-ico.is-wa{background:#E3F6E8;color:#128C7E}
.qs-contact-cta{display:flex;flex-wrap:wrap;gap:12px}
/* Botón de WhatsApp: verde de la propia aplicación, no el cobre de la marca —
   se reconoce antes por el color que por el rótulo. */
.qs-btn-wa{background:#128C7E;color:var(--blanco)!important;border-color:#128C7E;box-shadow:0 4px 14px rgba(18,140,126,.3)}
.qs-btn-wa:hover{background:#0e6f64;border-color:#0e6f64;color:var(--blanco)!important;transform:translateY(-1px)}
.wb-result-ico{color:var(--cobre-d)}

/* ---------------------------------------------------------------------- LEGAL -- */
.wb-legal{max-width:840px}
.wb-legal h2{font-size:1.4rem;margin-top:36px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.wb-legal h3{font-size:1.12rem;margin-top:24px}

/* ------------------------------------------------------------------------ 404 -- */
.wb-404-code{font-family:var(--font-h);font-size:5.5rem;font-weight:700;color:var(--cobre);line-height:1;letter-spacing:-.04em}
.wb-404-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}

/* ------------------------------------------------------------------------- PIE -- */
.qs-foot{background:var(--petroleo-xd);color:rgba(255,255,255,.8);padding:60px 0 0}
.qs-foot a{color:rgba(255,255,255,.8)}
.qs-foot a:hover{color:var(--cobre-l)}
.qs-foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:44px}
.qs-foot-logo{height:30px;width:auto;margin-bottom:16px}
.qs-foot h4{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobre-l);margin:0 0 16px}
.qs-foot-nav{display:grid;gap:10px;font-size:1rem}
.qs-foot-tag{font-size:1rem;max-width:34ch;color:rgba(255,255,255,.7)}
.qs-copy{border-top:1px solid rgba(255,255,255,.13);padding:20px 24px;font-size:.92rem;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* -------------------------------------------------------------------- WHATSAPP -- */
.qs-wa{position:fixed;right:20px;bottom:20px;z-index:70;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .16s}
.qs-wa:hover{background:#1da851;color:#fff;transform:scale(1.06)}

/* ------------------------------------------------------------------- RESPONSIVE -- */
@media (max-width:1000px){
  .qs-hero-in,.wb-hero-in,.wb-split,.wb-contact-grid,.wb-cta-box{grid-template-columns:1fr}
  .qs-hero-art{max-width:420px;margin:8px auto 0}
  .qs-pillars-grid{grid-template-columns:repeat(2,1fr)}
  .wb-split--tall{grid-template-columns:1fr}   /* gana a la de escritorio: dos clases */
  .wb-split--tall .wb-split-img img{max-height:430px}
  .wb-split--tall .wb-btnrow{justify-content:center}
  .wb-grid,.qs-grid,.wb-steps,.qs-steps{grid-template-columns:repeat(2,1fr)}
  .qs-foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  html{font-size:16px}
  .qs-burger{display:flex}
  .qs-nav{position:absolute;top:76px;left:0;right:0;background:var(--crema);border-bottom:3px solid var(--cobre);flex-direction:column;align-items:flex-start;gap:0;padding:10px 24px 20px;display:none;box-shadow:var(--sh-m)}
  .qs-navtoggle:checked ~ .qs-nav{display:flex}
  .qs-nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--linea)}
  .qs-nav a.qs-cta{width:100%;text-align:center;margin-top:14px;padding:14px 28px}
  .qs-nav a.qs-lang{width:auto;padding:8px 14px;margin-top:12px;border-bottom:1px solid var(--linea)!important}
  .qs-pillars-grid,.wb-grid,.qs-grid,.wb-steps,.qs-steps,.qs-foot-in{grid-template-columns:1fr}
  .qs-hero{padding:64px 0 72px}
  .qs-hero h1{font-size:clamp(2.1rem,7vw,2.6rem)}
  .qs-hero-sub{font-size:1.12rem}
  .wb-section,.qs-section{padding:56px 0}
  .qs-price-box{padding:34px 24px}
}