:root{
  --navy:#164193; --navy-solid:#164193; --navy-deep:#0e2c66;
  --paper:#f5f6f4; --paper-raised:#ffffff; --paper-sunken:#e8eae6;
  --ink:#12203a; --ink-soft:#4a5872; --red:#bf0d0d; --red-soft:#f3d9d9;
  --whatsapp:#25d366; --whatsapp-deep:#1da851; --line:rgba(18,32,58,0.13); --focus:#1d6fa5;
  --font-display:'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#7fa4e8; --paper:#0d1420; --paper-raised:#161f2e; --paper-sunken:#0a0f18;
    --ink:#e8ebf0; --ink-soft:#aab4c6; --red:#e2564a; --red-soft:#3a1f1c;
    --whatsapp:#2fdb75; --whatsapp-deep:#25c266; --line:rgba(232,235,240,0.14); --focus:#6bb6e8;
  }
}
:root[data-theme="dark"]{
  --navy:#7fa4e8; --paper:#0d1420; --paper-raised:#161f2e; --paper-sunken:#0a0f18;
  --ink:#e8ebf0; --ink-soft:#aab4c6; --red:#e2564a; --red-soft:#3a1f1c;
  --whatsapp:#2fdb75; --whatsapp-deep:#25c266; --line:rgba(232,235,240,0.14); --focus:#6bb6e8;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; padding-bottom:4.4rem;}
::selection{background:var(--red-soft);}
a{color:inherit;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
img{max-width:100%; display:block;}
h1,h2,h3{font-family:var(--font-display); font-weight:800; text-wrap:balance; margin:0; color:var(--ink); letter-spacing:-0.01em;}
h1{font-size:clamp(1.8rem,7vw,2.6rem); line-height:1.1;}
h2{font-size:clamp(1.4rem,5vw,1.9rem); line-height:1.15;}
h3{font-size:1.02rem;}
p{margin:0;}
.wrap{max-width:1040px; margin:0 auto; padding:0 1.1rem;}
.eyebrow{font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); font-weight:700;}

header.site{position:sticky; top:0; z-index:20; background:var(--paper-raised); border-bottom:1px solid var(--line);}
.site-inner{display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.6rem 1.1rem; max-width:1040px; margin:0 auto;}
.logo-img{height:28px; width:auto;}
.logo-dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-dark{display:block;}
  :root:not([data-theme="light"]) .logo-light{display:none;}
}
:root[data-theme="dark"] .logo-dark{display:block;}
:root[data-theme="dark"] .logo-light{display:none;}
.header-actions{display:flex; align-items:center; gap:0.4rem;}
.theme-toggle{display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--line); background:var(--paper); cursor:pointer; flex-shrink:0; padding:0;}
.theme-toggle svg{width:17px; height:17px; stroke:var(--ink-soft); fill:none; stroke-width:1.8;}
.theme-toggle .icon-moon{display:block;} .theme-toggle .icon-sun{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;}
}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none;}
.agenda-link{display:inline-flex; align-items:center; gap:0.3rem; font-size:0.82rem; font-weight:700; color:var(--navy); text-decoration:none; padding:0.4rem 0.5rem; white-space:nowrap;}
.agenda-link svg{width:15px; height:15px; stroke:var(--navy); fill:none; stroke-width:1.8;}
.call-pill{display:inline-flex; align-items:center; gap:0.35rem; background:var(--navy-solid); color:#fff; font-weight:700; font-size:0.84rem; padding:0.5rem 0.75rem; border-radius:99px; text-decoration:none; white-space:nowrap;}
@media (max-width:380px){ .call-pill .txt{display:none;} .agenda-link .txt{display:none;} }

.hero{background:var(--navy-solid); color:#fff; padding:2.4rem 0 2.8rem; position:relative; overflow:hidden;}
.hero::after{content:""; position:absolute; right:-8%; bottom:-30%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), transparent 70%); pointer-events:none;}
.hero-inner{position:relative; display:flex; flex-direction:column; gap:1.6rem; max-width:640px;}
.hero-copy{display:flex; flex-direction:column; gap:1.1rem;}
.hero-photo{width:min(280px, 72%); height:auto; align-self:center; filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));}
.hero-photo--tech{width:min(320px, 78%);}
@media (min-width:860px){
  .hero-inner{flex-direction:row; align-items:center; justify-content:space-between; max-width:1000px; gap:2.4rem;}
  .hero-copy{max-width:520px;}
  .hero-photo{width:min(400px, 42%); align-self:auto; flex-shrink:0; filter:drop-shadow(0 14px 24px rgba(0,0,0,0.35));}
  .hero-photo--tech{width:min(560px, 56%);}
  /* Pages without a hero photo (brand & appliance pages): let the copy breathe instead of staying pinned to the 2-column width */
  .hero-inner:not(:has(.hero-photo)) .hero-copy{max-width:720px;}
  /* Bigger tech photo needs more room so hero-copy isn't squeezed below its 520px design width */
  .hero-inner:has(.hero-photo--tech){max-width:1140px;}
}
/* Hero con foto de fondo por página (--hero-img inline por sección). Overlay más fuerte del lado del texto (izquierda en desktop), más suave del otro lado para que la foto se note. */
.hero--photo{
  background-image:linear-gradient(100deg, rgba(14,44,102,0.88) 0%, rgba(14,44,102,0.6) 40%, rgba(14,44,102,0.2) 75%, rgba(14,44,102,0.35) 100%), var(--hero-img);
  background-size:cover;
  background-position:center;
}
/* Variante más oscura, solo para el home (convive con la foto flotante de la camioneta): oscuro donde va el texto, respiro claro en el medio, oscuro otra vez del lado de la camioneta para que resalte por contraste contra el fondo. */
.hero--photo.hero--dark{
  background-image:linear-gradient(100deg, rgba(14,44,102,0.94) 0%, rgba(14,44,102,0.78) 28%, rgba(14,44,102,0.32) 48%, rgba(14,44,102,0.78) 75%, rgba(14,44,102,0.9) 100%), var(--hero-img);
}
.hero h1{color:#fff;}
.hero p.lede{color:rgba(255,255,255,0.86); font-size:1.03rem; max-width:46ch;}
.hero-badges{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.2rem;}
.badge{font-size:0.76rem; font-weight:700; background:rgba(255,255,255,0.14); color:#fff; padding:0.32rem 0.7rem; border-radius:99px; letter-spacing:0.01em;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:0.4rem;}
.btn{font-family:var(--font-body); font-weight:700; font-size:0.95rem; padding:0.8rem 1.2rem; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; border:none; cursor:pointer;}
.btn-white{background:#fff; color:var(--navy-deep);}
.btn-whatsapp{background:var(--whatsapp); color:#06340f;}
.btn-whatsapp:hover{background:var(--whatsapp-deep);}

section{padding:2.8rem 0;}
.section-head{display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.6rem; max-width:60ch;}

.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0.8rem;}
@media (min-width:640px){ .services-grid{grid-template-columns:repeat(3,1fr);} }
.service-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1rem; display:flex; flex-direction:column; gap:0.6rem; text-decoration:none; color:var(--ink);}
.service-card svg{width:28px; height:28px; stroke:var(--navy); fill:none; stroke-width:1.6;}
.service-card h3{font-size:0.95rem;}
.service-card span{font-size:0.8rem; color:var(--ink-soft);}

/* Variante con foto de fondo (home): usa --card-img inline por tarjeta + overlay en gradiente navy para contraste garantizado del texto blanco, sin depender de light/dark mode. */
.service-card--photo{
  position:relative;
  min-height:172px;
  border:none;
  background-image:linear-gradient(195deg, rgba(14,44,102,0.28) 0%, rgba(14,44,102,0.62) 55%, rgba(14,44,102,0.94) 100%), var(--card-img);
  background-size:cover;
  background-position:center;
  color:#fff;
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.service-card--photo svg{stroke:#fff; background:rgba(255,255,255,0.18); border-radius:8px; padding:5px; margin:-5px -5px auto -5px; box-sizing:content-box; backdrop-filter:blur(2px);}
.service-card--photo h3{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.35);}
.service-card--photo span{color:rgba(255,255,255,0.9); text-shadow:0 1px 3px rgba(0,0,0,0.35);}
.service-card--photo:hover{box-shadow:0 10px 26px rgba(14,44,102,0.28); transform:translateY(-3px);}
@media (min-width:640px){ .service-card--photo{min-height:190px;} }

/* Alternativa B — "duotone" navy (más marca, menos foto real): reemplazar el gradient de arriba por esta línea.
.service-card--photo{ background-image:linear-gradient(rgba(14,44,102,0.78), rgba(14,44,102,0.78)), var(--card-img); background-blend-mode:multiply; }
*/

/* Alternativa C — foto arriba / panel sólido abajo (sin overlay sobre la foto, más "editorial", tarjeta más alta):
.service-card--photo{ background-image:none; background-color:var(--paper-raised); display:grid; grid-template-rows:96px 1fr; padding:0; color:var(--ink); }
.service-card--photo::before{ content:""; background-image:var(--card-img); background-size:cover; background-position:center; }
.service-card--photo svg,.service-card--photo h3,.service-card--photo span{ padding:0 1rem; }
.service-card--photo h3{ text-shadow:none; color:var(--ink); margin-top:0.6rem; }
.service-card--photo span{ text-shadow:none; color:var(--ink-soft); padding-bottom:1rem; }
*/

.trust{background:var(--paper-sunken); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2.4rem 0;}
.trust-head{display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.6rem;}
.trust-head b{font-family:var(--font-display); font-size:1.7rem; color:var(--navy);}
.trust-list{display:grid; grid-template-columns:1fr; gap:0.9rem;}
@media (min-width:640px){ .trust-list{grid-template-columns:repeat(2,1fr);} }
.trust-item{display:grid; grid-template-columns:1.5rem 1fr; gap:0.6rem; align-items:start;}
.trust-item .icon-dot{width:1.4rem; height:1.4rem; border-radius:50%; background:var(--navy-solid); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; flex-shrink:0; margin-top:0.05rem;}
.trust-item p{font-size:0.9rem; color:var(--ink-soft);}
.trust-item p b{color:var(--ink); font-weight:700;}
.brand-strip{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.4rem;}
.brand-chip{font-size:0.8rem; font-weight:600; color:var(--ink-soft); background:var(--paper-raised); border:1px solid var(--line); padding:0.3rem 0.7rem; border-radius:99px;}

.problems-list{display:grid; grid-template-columns:1fr; gap:0.9rem;}
@media (min-width:640px){ .problems-list{grid-template-columns:repeat(2,1fr);} }
.problem-item{display:grid; grid-template-columns:2.4rem 1fr; gap:0.8rem; align-items:start; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:1rem;}
.problem-item .picon{width:2.4rem; height:2.4rem; border-radius:8px; background:var(--paper-sunken); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.problem-item .picon svg{width:20px; height:20px; stroke:var(--navy); fill:none; stroke-width:1.7;}
.problem-item h3{font-size:0.94rem; margin-bottom:0.25rem;}
.problem-item p{font-size:0.86rem; color:var(--ink-soft);}

.process{display:flex; flex-direction:column; gap:0;}
.step{display:grid; grid-template-columns:2.6rem 1fr; gap:0.9rem; padding:1rem 0; border-top:1px solid var(--line);}
.step:first-child{border-top:none;}
.step-num{font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:1.1rem;}
.step p{font-size:0.9rem; color:var(--ink-soft); margin-top:0.2rem;}
@media (min-width:860px){
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:1.7rem;}
  .step{grid-template-columns:1fr; gap:0; border-top:none; padding:1.7rem 1.4rem; background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 14px rgba(18,32,58,0.07); position:relative; transition:box-shadow .15s ease, transform .15s ease;}
  .step:hover{box-shadow:0 10px 26px rgba(18,32,58,0.13); transform:translateY(-3px);}
  .step-num{display:flex; align-items:center; justify-content:center; width:2.7rem; height:2.7rem; border-radius:50%; background:var(--navy-solid); color:#fff; font-size:1.05rem; margin-bottom:1rem;}
  .step h3{font-size:1rem;}
  .step p{margin-top:0.4rem; font-size:0.86rem;}
  .step:not(:last-child)::after{content:"\2192"; position:absolute; top:3rem; right:-1.35rem; transform:translateY(-50%); font-size:1.4rem; font-weight:800; line-height:1; color:var(--navy); font-family:var(--font-display);}
}

.form-panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:1.5rem; display:grid; gap:1rem;}
.form-row{display:grid; gap:0.8rem;}
@media (min-width:560px){ .form-row.two{grid-template-columns:1fr 1fr;} }
.field{display:flex; flex-direction:column; gap:0.3rem;}
.field label{font-size:0.78rem; font-weight:700; color:var(--ink-soft);}
.field input, .field select{font:inherit; font-size:0.95rem; padding:0.65rem 0.7rem; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); width:100%;}
.form-note{font-size:0.78rem; color:var(--ink-soft);}

.testi-grid{display:grid; grid-template-columns:1fr; gap:0.9rem;}
@media (min-width:640px){ .testi-grid{grid-template-columns:repeat(2,1fr);} }
.testi-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:1.1rem; display:flex; flex-direction:column; gap:0.5rem;}
.testi-card p{font-size:0.88rem; color:var(--ink-soft); font-style:italic;}
.testi-head{display:flex; align-items:center; gap:0.6rem;}
.testi-avatar{width:2.2rem; height:2.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.9rem; flex-shrink:0;}
.testi-name{font-size:0.86rem; font-weight:700; color:var(--ink);}
.testi-zone{font-size:0.76rem; color:var(--ink-soft);}
.testi-stars{color:#f5a623; font-size:0.85rem; letter-spacing:0.1em;}
.testi-src{font-size:0.76rem; color:var(--ink-soft);}

.faq-item{border-top:1px solid var(--line); padding:0.9rem 0;}
.faq-item:first-child{border-top:none;}
.faq-item summary{font-weight:700; cursor:pointer; font-size:0.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-display); color:var(--navy); font-size:1.2rem; flex-shrink:0;}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{font-size:0.88rem; color:var(--ink-soft); margin-top:0.6rem; max-width:62ch;}

.related{display:flex; flex-wrap:wrap; gap:0.5rem;}
.related a{font-size:0.82rem; font-weight:600; color:var(--navy); background:var(--paper-sunken); border:1px solid var(--line); padding:0.4rem 0.8rem; border-radius:99px; text-decoration:none;}

footer.site{background:var(--navy-deep); color:rgba(255,255,255,0.86); padding:2.4rem 0 6rem;}
.footer-grid{display:grid; gap:1.6rem; grid-template-columns:1fr;}
@media (min-width:640px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr;} }
footer.site h3{color:#fff; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.6rem;}
footer.site a{color:rgba(255,255,255,0.86); text-decoration:none; font-size:0.88rem;}
footer.site .logo-white{height:26px; margin-bottom:0.8rem;}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem;}
.fine{font-size:0.76rem; color:rgba(255,255,255,0.55); margin-top:2rem; border-top:1px solid rgba(255,255,255,0.14); padding-top:1.2rem;}

.action-bar{position:fixed; bottom:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:1fr 1fr; background:var(--paper-raised); border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(0,0,0,0.08);}
.action-bar a{display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.9rem 0.5rem; font-weight:700; font-size:0.92rem; text-decoration:none;}
.action-bar a.call{background:var(--navy-solid); color:#fff;}
.action-bar a.wa{background:var(--whatsapp); color:#06340f;}
.action-bar svg{width:18px; height:18px;}

/* --- Brand logos (added) --- */
.brand-hero-badge{display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:0.7rem 1.1rem; box-shadow:0 2px 10px rgba(0,0,0,0.18);}
.brand-hero-badge--logo img{display:block; height:56px; width:auto; max-width:220px; object-fit:contain;}
.brand-hero-badge--text{font-family:var(--font-display); font-weight:800; font-size:0.85rem; letter-spacing:0.02em; color:var(--navy-deep);}
@media (min-width:860px){
  .brand-hero-badge{padding:0.85rem 1.3rem; border-radius:14px;}
  .brand-hero-badge--logo img{height:72px; max-width:280px;}
}

.brand-logo-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:0.9rem; margin-top:1.4rem;}
.brand-logo-tile{display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:12px; height:76px; padding:0.9rem 1.1rem; text-decoration:none; transition:box-shadow .15s ease, transform .15s ease;}
.brand-logo-tile:hover{box-shadow:0 6px 18px rgba(18,32,58,0.12); transform:translateY(-2px);}
.brand-logo-tile img{max-height:38px; max-width:82%; width:auto; object-fit:contain;}
.brand-logo-tile.text-only{font-family:var(--font-display); font-weight:800; font-size:0.95rem; color:var(--navy-deep);}

/* Footer "Marcas" column: force at least 2 columns so the brand list never renders as one long vertical column */
footer.site ul.marcas-list{display:grid; grid-template-columns:repeat(2, 1fr); column-gap:1.2rem; row-gap:0.5rem;}
@media (min-width:480px){ footer.site ul.marcas-list{grid-template-columns:repeat(3, 1fr);} }

.brand-note{font-size:0.85rem; color:var(--ink-soft); margin-top:0.9rem; max-width:60ch;}