/* ============ TOKENS ============ */
:root{
  --navy:#12294B;
  --navy-deep:#0E2140;
  --ink:#0C1B2A;
  --body:#5F7183;
  --blue:#4FA3F7;          /* acento vivo: iconos, botones, texto sobre oscuro */
  --blue-strong:#3E96F0;
  --accent-ink:#4FA3F7;    /* acento legible sobre fondo claro (texto pequeño) */
  --accent-soft:#8FC3F8;   /* acento claro sobre fondo oscuro */
  --accent-rgb:79,163,247; /* el acento en rgb, para los rgba() */

  /* fondos oscuros del hero, la seccion de emergencia y el pie */
  --hero-1:#0E2140;
  --hero-2:#12294B;
  --hero-3:#0B1A33;
  /* fondo de la ilustracion del servicio */
  --art-1:#EDF2F8;
  --art-2:#DCE6F2;
  /* piezas del dibujo del servicio (caldera / cuadro electrico) */
  --art-edge:#D8E2EE;
  --art-slot:#EDF2F8;
  --art-rail:#E4EBF3;
  --art-panel:#F3F7FB;
  --art-stroke:#C7D5E6;
  --art-detail:#9DB2C9;
  /* velo que oscurece la foto del hero, en rgb para los rgba() */
  --hero-veil:9,20,38;
  --soft:#EDF2F8;
  --card:#F2F5F9;
  --line:#E2E8F0;
  --white:#fff;

  --container:1120px;
  --radius:10px;

  --font: "Manrope", "Manrope Placeholder", sans-serif;
  --font-features: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-feature-settings:var(--font-features);
  color:var(--body);
  background:var(--white);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0}
p{margin:0}
button,input,select,textarea{font:inherit;font-feature-settings:var(--font-features)}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

/* ============ TIPOGRAFÍA ============ */
.title{
  font-family:var(--font);
  font-feature-settings:var(--font-features);
  font-size:38px;
  font-style:normal;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1em;
  color:var(--ink);
}
.title-light{color:#fff}

.eyebrow{
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:18px;
}
.eyebrow-light{color:var(--accent-soft)}

.lead{font-size:17px;color:var(--body);margin-top:18px;line-height:1.7}

.section{padding:100px 0}
.section-soft{background:var(--soft)}
.section-head{max-width:640px}
.section-head.center{margin:0 auto 56px;text-align:center}

/* ============ BOTONES (bubble arrow) ============ */
.btn-bubble-arrow{
  --bb:3.2em;                    /* diámetro del círculo = alto del botón */
  --bb-arrow-bg:var(--navy);     /* círculo que aparece al hacer hover */
  --bb-arrow-ink:#fff;
  --bb-dup-bg:var(--blue);       /* círculo visible en reposo */
  --bb-dup-ink:#fff;
  --bb-content-bg:var(--blue);
  --bb-content-ink:#fff;

  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10em;font-size:14px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.btn-bubble-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.btn-bubble-arrow__arrow{
  position:relative;display:flex;align-items:center;justify-content:center;flex:none;
  width:var(--bb);height:var(--bb);border-radius:10em;
  background:var(--bb-arrow-bg);color:var(--bb-arrow-ink);
  transform:scale(0) rotate(.001deg);transform-origin:left;
  transition:transform .735s cubic-bezier(.625,.05,0,1);
}
.btn-bubble-arrow__arrow.is--duplicate{
  position:absolute;right:0;z-index:2;transform-origin:right;
  background:var(--bb-dup-bg);color:var(--bb-dup-ink);
  transform:scale(1) rotate(.001deg);
}
.btn-bubble-arrow__arrow-svg{
  width:42%;transform:rotate(.001deg);
  transition:transform .735s cubic-bezier(.625,.05,0,1);
}
.btn-bubble-arrow__content{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:var(--bb);padding:0 1.7em;border-radius:10em;
  background:var(--bb-content-bg);color:var(--bb-content-ink);
  transform:translateX(calc(var(--bb) * -1)) rotate(.001deg);
  transition:transform .735s cubic-bezier(.625,.05,0,1);
}
.btn-bubble-arrow__content-text{line-height:1;white-space:nowrap}

/* hover / foco: el texto se corre a la derecha y los círculos se intercambian */
.btn-bubble-arrow:hover .btn-bubble-arrow__content,
.btn-bubble-arrow:focus-visible .btn-bubble-arrow__content{transform:translateX(0) rotate(.001deg)}
.btn-bubble-arrow:hover .btn-bubble-arrow__arrow,
.btn-bubble-arrow:focus-visible .btn-bubble-arrow__arrow{transform:scale(1) rotate(.001deg)}
.btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate,
.btn-bubble-arrow:focus-visible .btn-bubble-arrow__arrow.is--duplicate{transform:scale(0) rotate(.001deg)}
.btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg,
.btn-bubble-arrow:focus-visible .btn-bubble-arrow__arrow-svg{transform:rotate(-45deg)}

/* variantes de color */
.btn-bubble-arrow.is--navy{
  --bb-content-bg:var(--navy);--bb-content-ink:#fff;
  --bb-arrow-bg:var(--blue);--bb-arrow-ink:#fff;
  --bb-dup-bg:var(--blue);--bb-dup-ink:#fff;
}
.btn-bubble-arrow.is--blue{
  --bb-content-bg:var(--blue);--bb-content-ink:#fff;
  --bb-arrow-bg:var(--navy);--bb-arrow-ink:#fff;
  --bb-dup-bg:var(--navy);--bb-dup-ink:#fff;
}
.btn-bubble-arrow.is--white{
  --bb-content-bg:#fff;--bb-content-ink:var(--navy);
  --bb-arrow-bg:var(--blue);--bb-arrow-ink:#fff;
  --bb-dup-bg:var(--blue);--bb-dup-ink:#fff;
}
.btn-bubble-arrow.is--outline .btn-bubble-arrow__content{
  background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:600;
}
.btn-bubble-arrow.is--outline{--bb-arrow-bg:var(--blue);--bb-arrow-ink:#fff;--bb-dup-bg:var(--blue);--bb-dup-ink:#fff}

/* sobre fondo oscuro los círculos van en blanco para no perderse */
.btn-bubble-arrow.is--on-dark{--bb-arrow-bg:#fff;--bb-arrow-ink:var(--navy);--bb-dup-bg:#fff;--bb-dup-ink:var(--navy)}

/* variantes de tamaño */
.btn-bubble-arrow.is--sm{font-size:13px}
.btn-bubble-arrow.is--caps{font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.btn-bubble-arrow.is--block{width:100%}
.btn-bubble-arrow.is--block .btn-bubble-arrow__content{flex:1}

@media (prefers-reduced-motion:reduce){
  .btn-bubble-arrow *{transition-duration:.01ms}
}

/* cierre: el panel se va y las tarjetas caen (capa de "escombros") */
.menu.is-closing .menu__panel{
  opacity:0;transform:none;
  transition:opacity .28s ease;
}
.menu.is-closing .menu__scrim{transition:opacity .5s ease}
.menu__debris{position:fixed;inset:0;z-index:160;pointer-events:none;overflow:hidden}
.menu__debris .menu-card{
  position:fixed;margin:0;opacity:1;
  transition:none;will-change:transform;
}

/* ============ LOADER ============ */
.loader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--soft);
  animation:loader-fade .75s cubic-bezier(.65,0,.35,1) 2.05s forwards;
}
.loader__lockup{
  display:flex;align-items:center;
  font-size:34px;color:var(--ink);
  animation:loader-pop .75s cubic-bezier(.65,0,.35,1) 2.05s forwards;
}
.loader__badge{
  display:grid;place-items:center;flex:none;
  width:1.9em;height:1.9em;border-radius:.52em;
  border:3px solid var(--ink);color:var(--blue);
}
.loader__mark{
  width:62%;height:62%;
  animation:loader-spin 1.05s linear infinite;
}
/* el wordmark se despliega desde el badge (el padding va adentro para que el conjunto quede centrado) */
.loader__word{
  overflow:hidden;white-space:nowrap;width:0;
  animation:loader-word .9s cubic-bezier(.16,1,.3,1) .85s forwards;
}
.loader__word-text{
  display:block;padding-left:.34em;
  font-weight:800;letter-spacing:-.03em;line-height:1;
}

@keyframes loader-spin{to{transform:rotate(360deg)}}
@keyframes loader-word{to{width:var(--w,4.6em)}}
@keyframes loader-pop{to{transform:scale(1.07);opacity:0}}
@keyframes loader-fade{to{opacity:0;visibility:hidden}}

.loader.is--done{opacity:0;visibility:hidden}

@media (max-width:640px){.loader__lockup{font-size:26px}}
@media (prefers-reduced-motion:reduce){
  .loader{animation:none;opacity:0;visibility:hidden}
}

/* ============ NAV ============ */
.nav-wrap{position:absolute;top:22px;left:0;right:0;z-index:50}
.nav{
  width:calc(100% - 48px);max-width:var(--container);margin:0 auto;
  background:#fff;border-radius:8px;
  display:flex;align-items:center;gap:28px;
  padding:9px 9px 9px 20px;
  box-shadow:0 8px 30px rgba(10,25,50,.12);
}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.brand-icon{width:18px;height:18px;color:var(--blue)}
.brand-light{color:#fff}

.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{font-size:15.5px;font-weight:600;color:#4A5C6E}
.nav-links a:hover{color:var(--ink)}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-note{font-size:12.5px;line-height:1.3;color:#8494A5;font-weight:600;text-align:right}
.nav-toggle{display:flex;background:none;border:0;width:34px;height:34px;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;border-radius:8px}
.nav-toggle:hover span{background:var(--blue)}
.nav-toggle span{transition:background .2s ease}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}

/* ============ MENÚ OVERLAY ============ */
.menu{position:fixed;inset:0;z-index:150}
.menu[hidden]{display:none}
.menu__scrim{
  position:absolute;inset:0;background:rgba(6,14,28,.55);
  opacity:0;transition:opacity .45s ease;
}
.menu.is-open .menu__scrim{opacity:1}

.menu__panel{
  position:absolute;inset:0 0 0 max(0px, 9%);
  display:grid;grid-template-columns:1.02fr .98fr;gap:48px;
  padding:64px 56px 56px;
  background:var(--navy-deep);color:#fff;border-radius:22px 0 0 22px;
  box-shadow:0 40px 90px rgba(4,12,26,.45);
  overflow:auto;
  transform:scale(.62);opacity:0;transform-origin:top right;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
.menu.is-open .menu__panel{transform:scale(1);opacity:1}

.menu__close{
  position:absolute;top:20px;right:20px;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:0;border-radius:50%;color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.menu__close svg{width:17px;height:17px}
.menu__close:hover{background:var(--blue);transform:rotate(90deg)}

/* entrada escalonada de los bloques */
.menu-card,.menu__links li,.menu__meta{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,1) * 45ms + 120ms);
}
.menu.is-open .menu-card,
.menu.is-open .menu__links li,
.menu.is-open .menu__meta{opacity:1;transform:none}

/* columna izquierda: accesos a servicios + emergencia */
.menu__cards{display:flex;flex-direction:column;justify-content:center;gap:12px}
.menu-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:#fff;text-decoration:none;
}
a.menu-card{transition:background .25s ease,border-color .25s ease,opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
a.menu-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.menu-card__icon{flex:none;width:26px;height:26px;color:var(--blue)}
.menu-card__icon svg{width:26px;height:26px}
.menu-card__body{display:flex;flex-direction:column;gap:3px}
.menu-card strong{font-size:15px;font-weight:800;letter-spacing:-.02em}
.menu-card__body span,.menu-card.is--cta > div span{font-size:13px;color:rgba(255,255,255,.55)}
.menu-card__arrow{width:18px;height:18px;margin-left:auto;color:rgba(255,255,255,.4);transition:transform .3s ease,color .3s ease}
a.menu-card:hover .menu-card__arrow{transform:translateX(4px);color:#fff}

.menu-card.is--cta{
  flex-direction:column;align-items:stretch;gap:18px;margin-top:16px;
  background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.35);
}
.menu-card.is--cta strong{display:block;font-size:16px}
.menu-card.is--cta .btn-bubble-arrow__content-text{font-size:14px;color:inherit}
.menu-card.is--cta span{display:block;margin-top:6px}

/* columna derecha: navegación grande */
.menu__nav{display:flex;flex-direction:column;justify-content:center;gap:44px}
.menu__links{display:flex;flex-direction:column}
.menu__links a{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:6px 0;color:#fff;text-decoration:none;
  font-size:clamp(30px,3.6vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.menu__links a svg{width:.6em;height:.6em;opacity:0;transform:translateX(-14px);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
/* al apuntar un ítem, los demás se apagan */
.menu__links:hover a{opacity:.35}
.menu__links a:hover{opacity:1;transform:translateX(10px)}
.menu__links a:hover svg{opacity:1;transform:translateX(0)}

.menu__meta{display:flex;gap:56px}
.menu__meta > div{display:flex;flex-direction:column;gap:7px}
.menu__meta-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:4px}
.menu__meta a{font-size:13.5px;color:rgba(255,255,255,.68);text-decoration:none;transition:color .2s ease}
.menu__meta a:hover{color:var(--blue)}

@media (max-width:960px){
  .menu__panel{
    inset:0;grid-template-columns:1fr;gap:32px;padding:64px 24px 28px;
    border-radius:0;align-content:start;
  }
  .menu__nav{order:-1;justify-content:flex-start;gap:28px}
  .menu__links a{font-size:clamp(26px,7vw,38px)}
  .menu__meta{gap:32px}
  .menu-card.is--cta{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .menu__panel,.menu__scrim,.menu-card,.menu__links li,.menu__meta{transition-duration:.01ms}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:660px;display:flex;align-items:flex-end;padding:150px 0 46px;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(var(--hero-veil),.90) 0%,rgba(var(--hero-veil),.72) 38%,rgba(var(--hero-veil),.25) 72%,rgba(var(--hero-veil),.15) 100%);
}
.hero-inner{position:relative;z-index:2}
.hero-title{
  font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.05em;color:#fff;
  font-feature-settings:var(--font-features);
}
.hero-title .accent{color:var(--blue)}
.hero-copy{margin-top:20px;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.78);max-width:520px}
.hero .btn-bubble-arrow{margin-top:26px}

.hero-social{display:flex;align-items:center;gap:12px;margin-top:30px}
.avatars{display:flex}
.avatars img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);margin-left:-10px}
.avatars img:first-child{margin-left:0}
.stars{color:#FFB020;font-size:14px;letter-spacing:1.5px;line-height:1}
.hero-social-text p{font-size:14px;color:rgba(255,255,255,.72);margin-top:4px}

.hero-stats{display:flex;gap:56px;margin-top:36px;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:10px;color:var(--blue)}
.stat svg{width:20px;height:20px;flex:none}
.stat div{display:flex;flex-direction:column;line-height:1.35}
.stat strong{font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.stat span{font-size:13.5px;color:rgba(255,255,255,.62)}

/* ============ SERVICIOS (bento) ============ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:240px minmax(190px,auto);gap:16px}
.bento-img{grid-column:span 2;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--card);min-height:0}
.bento-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;
  transition:.2s ease;
}
.card:hover{border-color:#CFDCEA;transform:translateY(-2px)}
.card-icon{width:30px;height:30px;color:var(--accent-ink);margin-bottom:auto}
.card-icon svg{width:30px;height:30px}
.card h3{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:36px 0 8px}
.card p{font-size:14.5px;line-height:1.65;color:#8494A5}

/* ============ WHY US ============ */
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.why-grid{display:grid;grid-template-columns:1fr 1.28fr;gap:22px;align-items:start}
.why-img{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.6;background:#dfe7f0}
.why-img img{width:100%;height:100%;object-fit:cover}

.accordion{display:flex;flex-direction:column;gap:10px;padding-top:88px}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:16px 18px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.acc-sign{position:relative;width:13px;height:13px;flex:none;color:var(--accent-ink)}
.acc-sign::before,.acc-sign::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;transition:.2s ease;
}
.acc-sign::before{left:0;top:6px;width:13px;height:1.5px}
.acc-sign::after{top:0;left:5.75px;width:1.5px;height:13px}
.acc-item.is-open .acc-sign{transform:rotate(45deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.acc-item.is-open .acc-body{grid-template-rows:1fr}
.acc-body > *{overflow:hidden}
.acc-body p{font-size:14.5px;line-height:1.7;color:#8494A5;padding:0 18px;margin:0}
.acc-item.is-open .acc-body p{padding-bottom:18px}

/* ============ PROCESO ============ */
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--line);
}
.step-left{display:flex;align-items:center;gap:14px}
.step-icon{width:24px;height:24px;color:var(--blue);flex:none}
.step-icon svg{width:24px;height:24px}
.step h3{font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.step p{font-size:14.5px;line-height:1.7;color:#8494A5;max-width:460px}

/* ============ EMERGENCIA ============ */
.emergency{background:var(--navy);padding:96px 0}
.emergency-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.check-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.check-list li{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.8)}
.check-list svg{width:18px;height:18px;color:var(--blue);flex:none}
.check-list-dark li{color:var(--body)}
.check-list-dark svg{color:var(--accent-ink)}

.emergency-card{
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:28px;
  background:rgba(255,255,255,.03);
}
.emergency-card h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
.emergency-card p{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.62)}
.emergency-label{display:block;margin:22px 0 10px;font-size:14px;color:rgba(255,255,255,.5)}

/* ============ REVIEWS ============ */
.reviews{overflow:hidden;padding-bottom:110px}
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.reviews-score{font-size:14.5px;color:#8494A5}

.marquee{overflow:hidden;margin-bottom:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;--shift:1000px;animation:scroll 40s linear infinite}
.marquee-track.reverse{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(calc(var(--shift) * -1))}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

.review{
  width:320px;flex:none;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;
  display:flex;flex-direction:column;gap:12px;
}
.review-top{display:flex;align-items:center;gap:8px}
.review-top .stars{font-size:13px}
.review-top .score{font-size:14px;font-weight:700;color:var(--ink)}
.review-top .quote{width:19px;height:19px;margin-left:auto;color:#0C1B2A}
.review > p{font-size:14.5px;line-height:1.65;color:#6F7F90}
.review-user{display:flex;align-items:center;gap:9px;margin-top:auto}
.review-user img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.review-user strong{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.review-user span{font-size:13px;color:#9AA8B6}

/* ============ CONTACTO ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.form-card{background:#E9F0F8;border:1px solid #DCE6F1;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px}
.form-card label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--ink)}
.form-card input,.form-card select,.form-card textarea{
  background:#fff;border:1px solid #DCE6F1;border-radius:6px;
  padding:10px 12px;font-size:15px;color:var(--ink);outline:none;width:100%;
  font-weight:500;
}
.form-card textarea{resize:vertical;min-height:96px}
.form-card ::placeholder{color:#A9B6C4;font-weight:500}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--blue)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238494A5' stroke-width='2.5' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.form-card .btn-bubble-arrow{margin-top:6px}
.form-status{font-size:14.5px;color:#2F855A;text-align:center}

/* ============ FOOTER ============ */
.footer{background:var(--navy);color:rgba(255,255,255,.6);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.footer-brand p{margin-top:14px;font-size:14px;line-height:1.75;color:rgba(255,255,255,.5);max-width:320px}
.footer-col h4{font-size:14.5px;font-weight:800;color:#fff;letter-spacing:-.01em;margin-bottom:16px}
.footer-col li{font-size:14px;line-height:1.75;margin-bottom:9px;color:rgba(255,255,255,.5)}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:20px;padding-bottom:24px;
  font-size:13.5px;color:rgba(255,255,255,.4);
}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .nav-links,.nav-note{display:none}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
  .bento-img{aspect-ratio:16/9}
  .why-grid,.contact-grid,.emergency-grid{grid-template-columns:1fr;gap:32px}
  .accordion{padding-top:0}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  /* los saltos manuales son para desktop: en móvil el texto fluye */
  .title br,.lead br,.hero-copy br{display:none}
  .section{padding:70px 0}
  .title{font-size:30px}
  .hero-title{font-size:34px}
  .hero{min-height:auto;padding:130px 0 50px}
  .hero-stats{gap:24px}
  .bento,.bento-img{grid-template-columns:1fr;grid-column:auto}
  .why-head,.reviews-head{flex-direction:column;align-items:flex-start;gap:24px}
  .step{grid-template-columns:1fr;gap:12px;align-items:flex-start}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTES AÑADIDOS — landing Barcelona
   Usan los tokens de :root y los breakpoints existentes (960/640)
   ═══════════════════════════════════════════════════════════════ */

/* --- Hero: CTA doble y lista de argumentos --- */
.lead-light{ color:rgba(255,255,255,.86); }

.hero-cta{
  display:flex; flex-wrap:wrap; gap:.9rem; margin:1.8rem 0 1.6rem;
}

.hero-usp{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-size:.9rem; color:rgba(255,255,255,.82);
}
.hero-usp li{ position:relative; padding-left:1.15rem; }
.hero-usp li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:.42rem; height:.42rem; border-radius:50%; background:var(--blue);
}

/* --- Síntomas --- */
.symptoms{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin-top:2.2rem;
}

.symptom{
  display:flex; flex-direction:column; gap:.7rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.3rem; text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.symptom:hover, .symptom:focus-visible{
  border-color:var(--blue); transform:translateY(-3px);
  box-shadow:0 12px 28px -18px rgba(18,41,75,.5);
}

.symptom__icon{
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line); color:var(--blue);
}
.symptom__icon svg{ width:1.35rem; height:1.35rem; }

.symptom h3{ margin:0; font-size:1.12rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.symptom p{ margin:0; font-size:.94rem; line-height:1.55; color:var(--body); }

.symptom__cta{
  margin-top:auto; padding-top:.35rem;
  font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-ink);
}
.symptom__cta::after{ content:" →"; }

.symptoms__foot{
  margin:1.6rem 0 0; font-size:.95rem; color:var(--body);
}
.symptoms__foot a{ color:var(--accent-ink); font-weight:600; }

/* --- Marcas --- */
.brands{
  padding:2.6rem 0; background:var(--white); border-block:1px solid var(--line);
  text-align:center;
}
.brands__label{
  margin:0 0 1.2rem; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--body);
}
.brands__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .5rem;
}
.brands__list li{
  padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink);
  font-size:.92rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
}
.brands__note{ margin:1.2rem 0 0; font-size:.86rem; color:var(--body); }

/* --- Bento: tarjeta ancha --- */
.card--wide{ grid-column:span 2; }

/* --- Precio --- */
.pricing{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2.2rem;
}
.pricing__item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.4rem;
}
.pricing__item h3{
  margin:0; font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--body);
}
.pricing__figure{
  margin:.6rem 0 .7rem; font-size:1.75rem; font-weight:800;
  letter-spacing:-.02em; line-height:1.1; color:var(--ink);
}
.pricing__item p:last-child{ margin:0; font-size:.94rem; line-height:1.55; color:var(--body); }
.pricing__note{ margin:1.4rem 0 0; font-size:.88rem; color:var(--body); }

/* --- Zonas --- */
.zones{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:3rem; align-items:start; }
.zones__copy .title{ margin:.6rem 0 .9rem; }
.zones__copy .lead{ margin-bottom:1.6rem; }

.zones__lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.zones__group h3{
  margin:0 0 .8rem; font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--body);
}
.zones__group ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.zones__group li{ font-size:.96rem; color:var(--ink); }

/* --- Tarjeta de aviso: teléfono grande --- */
.emergency-card__label{
  margin:0 0 .5rem; font-size:.76rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--body);
}
.emergency-card__phone{
  display:block; margin:0 0 .35rem;
  font-size:2rem; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none;
}
.emergency-card__phone:hover{ color:var(--blue); }
.emergency-card__hours{ margin:0 0 1.3rem; font-size:.88rem; color:var(--body); }

/* --- Barra fija de llamada (móvil) --- */
.callbar{ display:none; }

@media (max-width:640px){
  .callbar{
    position:fixed; inset:auto 0 0 0; z-index:60;
    display:flex; align-items:center; gap:.8rem;
    padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background:var(--navy); color:#fff; text-decoration:none;
    box-shadow:0 -6px 22px -10px rgba(0,0,0,.55);
  }
  .callbar__icon{
    flex:none; width:2.35rem; height:2.35rem; border-radius:50%;
    display:grid; place-items:center; background:var(--blue); color:var(--navy);
  }
  .callbar__icon svg{ width:1.15rem; height:1.15rem; }
  .callbar__text{ display:flex; flex-direction:column; line-height:1.2; }
  .callbar__text strong{ font-size:.95rem; font-weight:700; }
  .callbar__text small{ font-size:.76rem; color:rgba(255,255,255,.72); }
  .callbar__num{ margin-left:auto; font-size:1rem; font-weight:800; letter-spacing:-.01em; }

  /* que la barra no tape el final de la página */
  .footer{ padding-bottom:5.5rem; }
}

/* --- Responsive de los bloques nuevos --- */
@media (max-width:960px){
  .card--wide{ grid-column:span 1; }
  .zones{ grid-template-columns:1fr; gap:2.2rem; }
}

@media (max-width:640px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-usp{ flex-direction:column; gap:.45rem; }
  .zones__lists{ grid-template-columns:1fr; gap:1.6rem; }
  .brands__list li{ font-size:.85rem; padding:.42rem .8rem; }
  .emergency-card__phone{ font-size:1.7rem; }
}

@media (prefers-reduced-motion:reduce){
  .symptom{ transition:none; }
  .symptom:hover, .symptom:focus-visible{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   REVISIÓN RESPONSIVE
   El botón de burbuja lleva white-space:nowrap y su ancho es
   texto + 1,7em de padding a cada lado + el círculo (3,2em).
   Con el padding de 24px del contenedor, en 320px se desbordaba.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:640px){
  /* más espacio útil: 24 -> 18px de padding lateral */
  .container{ padding:0 18px; }

  /* el componente escala entero desde su font-size */
  .btn-bubble-arrow{ font-size:13px; }
  .btn-bubble-arrow__content{ padding:0 1.35em; }
  .btn-bubble-arrow.is--sm{ font-size:12px; }

  /* en el hero los botones ocupan el ancho completo */
  .hero-cta .btn-bubble-arrow{ width:100%; }
  .hero-cta .btn-bubble-arrow__content{ flex:1; }

  /* rejillas a una sola columna: minmax no debe imponer ancho mínimo */
  .symptoms,
  .pricing{ grid-template-columns:1fr; }
}

@media (max-width:380px){
  .container{ padding:0 14px; }
  .btn-bubble-arrow{ font-size:12px; }
  .callbar__num{ font-size:.9rem; }
  .callbar__text small{ display:none; }
}

/* Red de seguridad: ningún elemento debe provocar scroll horizontal */
html, body{ max-width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; }


/* ═══════════════════════════════════════════════════════════════
   PASADA DE DISEÑO
   Fondo del hero: las fotos de stock disponibles eran de un
   electricista en un cuadro eléctrico, no de climatización. En vez
   de poner una imagen que contradice el mensaje, el hero se
   resuelve con degradado + patrón de corrientes de aire, el mismo
   lenguaje gráfico de la marca. Si llegan fotos reales del equipo,
   basta con descomentar el <img> del HTML.
   ═══════════════════════════════════════════════════════════════ */

.hero-bg{
  background:
    radial-gradient(1100px 620px at 78% 18%, rgba(var(--accent-rgb),.20) 0%, rgba(var(--accent-rgb),0) 62%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 46%, var(--hero-3) 100%);
}
/* La foto del hero se rebaja para que no compita con el azul de marca: el
   degradado del overlay ya tapa el 90% por la izquierda, y esto evita que el
   15% visible de la derecha se vaya de color. */
.hero-bg img{ filter:saturate(.55) brightness(.78) contrast(1.04); }
/* la de calderas es mucho más clara de origen y se salía del azul de marca */
.hero-bg img[src*="calderas"]{ filter:saturate(.4) brightness(.6) contrast(1.08); }

.hero-bg::after{
  content:""; position:absolute; inset:0;
  /* el patron de corrientes se pinta con el acento del servicio: el dibujo
     va como mascara (solo aporta la forma) y el color sale del token. */
  --hero-pattern:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22600%22%20viewBox%3D%220%200%20900%20600%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-40%2090h420a44%2044%200%201%200-44-44%22%2F%3E%3Cpath%20d%3D%22M-40%20190h560a52%2052%200%201%201-52%2052%22%2F%3E%3Cpath%20d%3D%22M-40%20290h300%22%2F%3E%3Cpath%20d%3D%22M-40%20390h640a44%2044%200%201%200-44-44%22%2F%3E%3Cpath%20d%3D%22M-40%20490h380a52%2052%200%201%201-52%2052%22%2F%3E%3Cpath%20d%3D%22M-40%20560h220%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-color:var(--blue);
  -webkit-mask-image:var(--hero-pattern);        mask-image:var(--hero-pattern);
  -webkit-mask-size:900px 600px;                 mask-size:900px 600px;
  -webkit-mask-position:right -60px top -40px;   mask-position:right -60px top -40px;
  -webkit-mask-repeat:no-repeat;                 mask-repeat:no-repeat;
  opacity:.9;
}
@media (max-width:960px){
  .hero-bg::after{ -webkit-mask-position:right -220px top -30px; mask-position:right -220px top -30px; opacity:.6; }
}

/* --- Confianza: distintivos --- */
.trust{ padding:2.4rem 0; background:var(--soft); }
.trust__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.1rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.trust__item{ display:flex; align-items:center; gap:.85rem; }
.trust__icon{
  flex:none; width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line); color:var(--blue);
}
.trust__icon svg{ width:1.3rem; height:1.3rem; }
.trust__text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.trust__text strong{ font-size:.94rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.trust__text small{ font-size:.82rem; color:var(--body); }

/* --- Muro de marcas: rejilla óptica, no píldoras sueltas --- */
.brands{ padding:3.2rem 0; }
.brands__list{
  display:grid; gap:1px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.brands__list li{
  background:var(--white); border:0; border-radius:0;
  padding:1.15rem .8rem; text-align:center;
  font-size:.95rem; font-weight:700; letter-spacing:-.015em; color:var(--ink);
  display:grid; place-items:center; min-height:3.9rem;
  white-space:normal; opacity:.62;
  transition:opacity .18s ease, color .18s ease;
}
.brands__list li:hover{ opacity:1; color:var(--accent-ink); }

/* --- Ilustración del split --- */
.unit-art{
  margin-top:1.4rem; border-radius:var(--radius);
  background:linear-gradient(160deg,var(--art-1) 0%,var(--art-2) 100%);
  border:1px solid var(--line); padding:1.2rem 1rem .4rem;
}
.unit-art svg{ display:block; width:100%; height:auto; }

@media (max-width:960px){
  .brands__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px){
  .brands__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brands__list li{ font-size:.86rem; min-height:3.4rem; padding:.9rem .5rem; }
  .trust__list{ grid-template-columns:1fr; gap:.9rem; }
  .trust__icon{ width:2.3rem; height:2.3rem; }
}

/* --- Corrección del bento ---
   La rejilla original tenía la primera fila bloqueada a 240px porque la
   imagen era una celda suelta. Ahora la ilustración vive dentro de la
   tarjeta ancha, así que las filas deben crecer con el contenido:
   tarjeta ancha 2×2 a la izquierda, las dos pequeñas apiladas a la derecha. */
.bento{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto;
  align-items:stretch;
}
.card--wide{ grid-column:span 2; grid-row:span 2; }
.card{ min-width:0; }
.card-icon{ margin-bottom:1rem; }
.card h3{ margin:0 0 .6rem; }
.check-list{ margin-top:1.1rem; }
.unit-art{ margin-top:auto; }

@media (max-width:960px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card--wide{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:640px){
  .bento{ grid-template-columns:1fr; }
  .card--wide{ grid-column:auto; }
}

/* --- Nav en pantallas muy estrechas ---
   A 320px el conjunto marca + botón con número no cabe: el botón se
   cortaba. Por debajo de 430px el número desaparece del nav (sigue en
   el hero y en la barra fija) y la píldora queda íntegra. */
@media (max-width:430px){
  .nav-num{ display:none; }
  .brand span{ font-size:1rem; }
}
@media (max-width:340px){
  .brand span{ display:none; }   /* solo la marca gráfica */
}

/* --- Pasos del proceso ---
   La rejilla original es 1fr 1fr y espera dos hijos: .step-left con el
   número y el título, y el <p> como hermano. Con el número dentro de
   .step-left junto al párrafo, el círculo ocupaba media columna y
   quedaba un hueco muerto. Aquí solo se afina el círculo. */
.step-icon{
  width:2rem; height:2rem; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  color:var(--accent-ink); font-size:.86rem; font-weight:800; letter-spacing:0;
}
.step-left h3{ margin:0; }
.step{ padding:1.4rem .25rem; }

@media (max-width:640px){
  .step-icon{ width:1.75rem; height:1.75rem; font-size:.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PROCESO — línea de tiempo
   La versión anterior era una lista de filas con separadores: se
   leía como tabla y no reforzaba el argumento. Como lo que
   diferencia al servicio es el tiempo, el módulo pasa a ser una
   línea temporal con el hito de cada paso.
   ═══════════════════════════════════════════════════════════════ */

.flow{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 1.6rem;
  counter-reset:flow;
}

.flow__step{
  position:relative;
  display:grid;
  grid-template-rows:auto var(--flow-node,2.6rem) auto 1fr;
  gap:0;
}

/* la línea que une los nodos, a la altura exacta del círculo */
.flow__step::before{
  content:""; position:absolute; z-index:0;
  left:calc(50% + 1.5rem); right:calc(-50% - 1.5rem);
  top:calc(var(--flow-label,1.9rem) + var(--flow-node,2.6rem) / 2);
  height:2px; background:var(--line);
}
.flow__step:last-child::before{ display:none; }

.flow__time{
  height:var(--flow-label,1.9rem);
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-ink);
}

.flow__node{
  position:relative; z-index:1;
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--navy); color:#fff;
  font-size:.95rem; font-weight:800; letter-spacing:0;
  box-shadow:0 0 0 6px var(--white);
}

.flow__step h3{
  margin:1.15rem 0 .5rem;
  font-size:1.06rem; font-weight:700; letter-spacing:-.015em; line-height:1.3; color:var(--ink);
}
.flow__step p{
  margin:0; font-size:.94rem; line-height:1.6; color:var(--body);
}

/* el segundo paso es la promesa: se destaca */
.flow__step:nth-child(2) .flow__node{ background:var(--blue); }
.flow__step:nth-child(2) .flow__time{ color:var(--ink); }

@media (max-width:960px){
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 1.6rem; }
  /* con dos columnas la línea solo une dentro de cada fila */
  .flow__step:nth-child(2n)::before{ display:none; }
}

@media (max-width:640px){
  /* vertical: la línea pasa a ser una espina a la izquierda */
  .flow{ grid-template-columns:1fr; gap:0; }
  .flow__step{
    grid-template-rows:auto auto 1fr;
    grid-template-columns:2.6rem 1fr;
    column-gap:1rem; padding-bottom:2rem;
  }
  .flow__step::before{
    display:block !important;
    left:calc(1.3rem - 1px); right:auto; top:2.6rem; bottom:0;
    width:2px; height:auto;
  }
  .flow__step:last-child::before{ display:none !important; }
  .flow__step:last-child{ padding-bottom:0; }
  .flow__time{
    grid-column:2; grid-row:1; height:auto;
    display:flex; align-items:center; min-height:2.6rem;
  }
  .flow__node{ grid-column:1; grid-row:1; }
  .flow__step h3{ grid-column:2; grid-row:2; margin:.4rem 0 .4rem; }
  .flow__step p{ grid-column:2; grid-row:3; }
}

/* Alineación entre columnas: cada paso es su propia rejilla, así que
   los títulos de distinta altura desalineaban los párrafos. Con subgrid
   las cuatro filas se comparten y todo queda a la misma altura. */
@supports (grid-template-rows: subgrid){
  @media (min-width:641px){
    .flow{ grid-template-rows:auto var(--flow-node,2.6rem) auto 1fr; }
    .flow__step{ grid-row:span 4; grid-template-rows:subgrid; }
  }
}

/* El desplazamiento gratis es el gancho de la sección: se destaca
   frente a las otras dos tarjetas, que son informativas. */
.pricing__item:first-child{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.pricing__item:first-child .pricing__figure{
  color:var(--accent-ink); font-size:2.1rem; letter-spacing:-.03em;
}

/* --- Compromisos ---
   Ocupa el lugar de las reseñas mientras no haya opiniones reales.
   El componente de reseñas sigue en este fichero y en script.js. */
.pledges{
  display:grid; gap:1rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:2.4rem;
}
.pledge{
  position:relative; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.6rem 1.5rem;
}
.pledge__num{
  display:block; margin-bottom:.7rem;
  font-size:.78rem; font-weight:800; letter-spacing:.14em;
  color:var(--accent-ink);
}
.pledge h3{
  margin:0 0 .55rem; font-size:1.1rem; font-weight:700;
  letter-spacing:-.015em; line-height:1.3; color:var(--ink);
}
.pledge p{ margin:0; font-size:.94rem; line-height:1.6; color:var(--body); }

@media (max-width:640px){
  .pledges{ grid-template-columns:1fr; }
  .pledge{ padding:1.4rem 1.25rem 1.25rem; }
}

/* --- Aviso de seguridad (fuga de gas) ---
   Solo en la landing de calderas. Es el único bloque de la página que
   pide al usuario que NO llame: primero seguridad, luego el aviso. */
.alert{
  display:flex; gap:1rem; align-items:flex-start;
  margin-top:2rem; padding:1.2rem 1.3rem;
  background:#FFF6ED; border:1px solid #F5D2A8; border-left-width:3px;
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem; line-height:1.6; color:#6B4A22;
}
.alert__icon{
  flex:none; width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center; background:#F7E2C8; color:#B4610F;
}
.alert__icon svg{ width:1.2rem; height:1.2rem; }
.alert strong{ color:#5A3C16; font-weight:700; }
.alert > div > strong:first-child{ display:block; margin-bottom:.15rem; }
.alert a{ color:#B4610F; font-weight:700; }

@media (max-width:640px){
  .alert{ flex-direction:column; gap:.7rem; padding:1.1rem 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TEMAS POR SERVICIO
   Las tres landings comparten esta hoja. El color no se repite en
   cada regla: se cambian los tokens en <body class="theme-…"> y
   todo lo que hereda de ahí (iconos, botones, cifras, enlaces, el
   degradado del hero, el pie y la sección de emergencia) va detrás.

   Aire acondicionado = azul (:root, sin clase). Es el frío.
   Calderas           = rojo fuego.
   Electricista       = ámbar / oro.

   Para cambiar un servicio de color solo hay que tocar su bloque.
   --blue es el acento vivo (iconos, botones, texto sobre oscuro) y
   --accent-ink el mismo color oscurecido para texto pequeño sobre
   fondo claro, que si no queda ilegible: el oro puro sobre blanco
   da 1,85:1 de contraste y el bronce de --accent-ink, 5,2:1.
   ═══════════════════════════════════════════════════════════════ */

/* --- Calderas: rojo fuego --- */
body.theme-calderas{
  --blue:#E2502F;
  --blue-strong:#CE4526;
  --accent-ink:#C8401F;
  --accent-soft:#F5A98F;
  --accent-rgb:226,80,47;

  --navy:#3A1C14;
  --navy-deep:#2A130E;
  --hero-1:#2E1611;
  --hero-2:#3D1D15;
  --hero-3:#200E0A;
  --art-1:#F8EFEA;
  --art-2:#EEDCD3;
  --hero-veil:34,13,9;
  /* los grises de la plantilla tiran a azul y chocan con el rojo:
     mismo valor de gris, temperatura cálida */
  --soft:#F8F1ED;
  --card:#FAF4F1;
  --line:#EFE3DD;
  --art-edge:#E7DAD3;
  --art-slot:#F6EDE8;
  --art-rail:#EFE3DC;
  --art-panel:#FBF6F3;
  --art-stroke:#DFCDC4;
  --art-detail:#C4A99C;
}
/* la foto era muy clara y se forzaba al azul de marca; con el hero
   granate puede conservar su propio calor */
body.theme-calderas .hero-bg img[src*="calderas"]{
  filter:saturate(.72) brightness(.6) contrast(1.06);
}

/* --- Electricista: ámbar / oro --- */
body.theme-electricista{
  --blue:#F5B324;
  --blue-strong:#E0A116;
  --accent-ink:#906200;
  --accent-soft:#FFD98A;
  --accent-rgb:245,179,36;

  --navy:#26262C;
  --navy-deep:#1A1A1F;
  --hero-1:#232329;
  --hero-2:#2C2C34;
  --hero-3:#17171B;
  --art-1:#F7F4EC;
  --art-2:#EDE5D4;
  --hero-veil:18,18,22;
  --soft:#F5F4EE;
  --card:#F9F8F2;
  --line:#E9E5DA;
  --art-edge:#E3DCCB;
  --art-slot:#F4F1E6;
  --art-rail:#EBE6D6;
  --art-panel:#FAF8F1;
  --art-stroke:#DAD1BB;
  --art-detail:#BCAF92;
}
/* sobre grafito la foto se va de amarillo si mantiene saturación */
body.theme-electricista .hero-bg img{
  filter:saturate(.38) brightness(.72) contrast(1.05);
}
/* La flecha y el texto de los botones van en blanco, que sobre el azul
   original se leía. Sobre el oro no (1,85:1), así que allí donde el oro
   es el fondo se cambia a tinta oscura. Los círculos que quedan sobre
   grafito conservan el blanco. */
body.theme-electricista .btn-bubble-arrow.is--blue{
  --bb-content-ink:#1A1A1F;
}
body.theme-electricista .btn-bubble-arrow.is--navy,
body.theme-electricista .btn-bubble-arrow.is--white,
body.theme-electricista .btn-bubble-arrow.is--outline{
  --bb-arrow-ink:#1A1A1F;
  --bb-dup-ink:#1A1A1F;
}