/* Estilos compartidos de soloairechile.cl
   Extraido de los 4 HTML principales, donde estaba duplicado (PERF-04).
   Los hovers son clases de componente, no contadores .hN (UI-06). */

/* --- Tokens de color (unica fuente de verdad) --- */
:root {
  /* Paleta de marca Soloaire: negro, amarillo, rojo y blanco, tomada del sol
     del logo (rojo #F01000 -> naranjo #F08000 -> amarillo #F0D000).
     Todos los pares de texto/fondo de aqui abajo pasan AA (>=4.5:1), salvo
     blanco sobre --brand-accent, que da 1.85 y por eso NUNCA se usa: sobre el
     amarillo el texto va en --ink. */
  --ink: #14110E;
  --ink-muted: #5C544B;
  --ink-soft: #6E655B;
  --ink-on-dark: #CFC7BC;
  --ink-topbar: #DED6CA;
  --brand: #C4210A;
  --brand-dark: #96190A;
  --brand-accent: #F5B301;
  --cta: #C4210A;
  --cta-hover: #96190A;
  --wa: #25D366;
  --bg: #FAF8F5;
  --bg-tint: #F5EFE5;
  --bg-footer: #F6F1E9;
  --surface-tint: #FBF1DA;
  --surface-hover: #FBF8F3;
  --field: #FCFAF7;
  --line: #E7E0D5;
  --line-soft: #EFE8DD;
  --line-strong: #D8CDBD;
  --line-cool: #E2DACE;
}

/* --- Base y chrome --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { font-family: 'Sora', system-ui, sans-serif; margin: 0; }
p { margin: 0; }
input, textarea, select, button { font: inherit; color: inherit; }
/* Sin esto, un <select> nativo se dimensiona por su opcion mas larga (no por
   el ancho de su celda de grid) y se sale del viewport en mobile: la opcion
   "Proyecto institucional / licitación" del formulario lo desbordaba ~80px. */
input, textarea, select { width: 100%; }

.nav-desktop { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nav-desktop a { white-space: nowrap; }
.mnav { display: none; margin-left: auto; position: relative; }
.mnav > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-soft); background: #fff; cursor: pointer; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav .bars { position: relative; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.mnav .bars::before, .mnav .bars::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.mnav .bars::before { top: -6px; }
.mnav .bars::after { top: 6px; }
.mnav[open] > summary { background: var(--surface-tint); border-color: var(--line-strong); }
.nav-drop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px -22px rgba(20,17,14,0.45); padding: 10px; display: grid; gap: 2px; z-index: 70; }
.nav-drop a { padding: 14px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.nav-drop a:hover { background: var(--surface-hover); }
.nav-drop a[aria-current] { background: var(--surface-tint); color: var(--brand); }
.nav-drop a.cta { margin-top: 6px; background: var(--cta); color: #fff; text-align: center; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 600; font-size: 14px; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 900px) { .nav-desktop { display: none; } .mnav { display: block; } }

/* Boton de red social: icono + nombre, con el color de marca de cada red en
   vez del mismo pill blanco generico para ambas. */
.social-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #fff; }
.social-instagram { background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); }
.social-facebook { background: #1877F2; }

/* Banda de logos de clientes: cada logo llega con proporcion y fondo propio
   (algunos JPG/PNG opacos, no todos con transparencia). Una tarjeta blanca
   de tamano fijo por logo evita que esas diferencias se noten, y el filtro
   a gris (a color solo en hover) unifica un set de 6 marcas de colores muy
   distintos entre si (verde, rojo, azul marino) en una sola franja prolija. */
.logo-chip { background: #fff; border: 1px solid var(--line); border-radius: 16px; height: 96px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px 18px; }
/* max-height en px, no en %: dentro de un grid/flex un % de max-height no
   siempre se resuelve contra el alto fijo del padre (aqui el logo de Salfa,
   mucho mas alto que ancho, se desbordaba igual con max-height:100%). Un
   valor fijo no depende de esa resolucion y no puede fallar igual. */
.logo-chip img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(0.72); transition: filter .25s; }
.logo-chip:hover img { filter: grayscale(0) opacity(1); }
@media (prefers-reduced-motion: reduce) { .logo-chip img { transition: none; } }

/* Footer: en vez de una sola columna larguisima en mobile, dos columnas.
   El bloque de marca (logo, descripcion, redes) ocupa el ancho completo
   arriba porque es mas pesado visualmente que un listado de links. */
/* El correo es una sola palabra de 23 caracteres: su ancho minimo estiraba
   la columna del grid (1fr no baja de min-content) y empujaba la pagina
   entera 8px a 320px de ancho. min-width:0 libera la pista y el quiebre de
   palabra evita que el texto se salga de su propia celda. */
.footer-grid > * { min-width: 0; }
.footer-grid a[href^="mailto:"] { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: clamp(22px,4vw,32px) 18px !important; }
  .footer-brand { grid-column: 1 / -1; }
}

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; background: var(--wa); color: var(--ink); font-weight: 600; font-size: 15px; box-shadow: 0 16px 34px -14px rgba(37,211,102,0.8); }
/* En mobile, queda como icono para no taparse con el texto de la pagina al
   hacer scroll (antes cubria titulos completos con la etiqueta "WhatsApp"). */
@media (max-width: 520px) {
  .wa-float { right: 14px; bottom: 14px; padding: 14px; }
  .wa-float-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wa-float::before { content: ''; width: 24px; height: 24px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5C10 9 9.4 7.6 9.1 7c-.2-.5-.5-.4-.7-.4h-.6c-.2 0-.5.1-.8.4C6.7 7.3 6 8 6 9.3c0 1.3.9 2.6 1.1 2.8.1.2 1.9 3 4.7 4.1 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask-repeat: no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5C10 9 9.4 7.6 9.1 7c-.2-.5-.5-.4-.7-.4h-.6c-.2 0-.5.1-.8.4C6.7 7.3 6 8 6 9.3c0 1.3.9 2.6 1.1 2.8.1.2 1.9 3 4.7 4.1 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--brand); flex: 0 0 auto; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* --- Nav: estado activo por atributo, no por estilo inline --- */
.nav-desktop > a { padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-muted); }
.nav-desktop > a[aria-current="page"] { font-weight: 600; color: var(--ink); background: var(--surface-tint); }

/* --- Hover por componente (reemplaza .h1-.h14) --- */
.nav-desktop > a:hover { background: var(--surface-tint); } /* sin color: el estilo inline previo lo anulaba por especificidad */
.btn-cta:hover { background: var(--cta-hover); }
.btn-lift:hover { transform: translateY(-2px); }
.btn-ghost:hover { border-color: var(--brand-accent); color: var(--brand); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(20,17,14,0.4); }
/* UI-01: sin color:#fff. Sobre el amarillo de marca el blanco da 1.85:1;
   el ink que trae el elemento da 5.98:1. */
.btn-accent:hover { background: var(--brand-accent); }
.btn-dark:hover { background: var(--ink); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); }
.row-slide:hover { transform: translateX(4px); }
.row-slide-dark:hover { background: rgba(255,255,255,0.16); transform: translateX(4px); }

/* ---- Paginas de detalle -------------------------------------------------
   Las paginas creadas en esta fase usan clases en vez de style="": mismo
   lenguaje visual que las 4 principales, sin repetir cientos de atributos
   inline. Todos los anchos usan minmax(min(100%,N)) para no desbordar a
   320px (el mismo fallo que UI-04 corrige en las paginas antiguas). */
.wrap { max-width: 1240px; margin: 0 auto; padding-left: clamp(16px,5vw,24px); padding-right: clamp(16px,5vw,24px); }
.sec { padding-top: clamp(44px,6vw,72px); padding-bottom: clamp(44px,6vw,72px); }
.sec-tint { background: var(--bg-tint); }

.crumbs { font-size: 13px; color: var(--ink-muted); padding-top: 18px; }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { opacity: .45; margin: 0 7px; }

.sec-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 38px; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.t-h1 { font-size: clamp(32px,5vw,58px); line-height: 1.0; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.t-h2 { font-size: clamp(26px,3.2vw,40px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.t-h3 { font-size: 20px; font-weight: 600; }
.lede { font-size: 17px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px), 1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: grid; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
/* aspect-ratio en vez de una altura fija: a un ancho fijo, un alto fijo
   recorta cada vez mas "en tira" a medida que la tarjeta se angosta (mobile).
   Con aspect-ratio el recorte es proporcional en cualquier ancho.
   height:auto es obligatorio: el atributo HTML height="" del <img> (puesto
   para reservar espacio antes de aspect-ratio) fija un alto en px que le
   gana a aspect-ratio si no se declara auto explicitamente. */
.card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: clamp(20px,4vw,24px) clamp(20px,4vw,24px) clamp(22px,4vw,28px); display: grid; gap: 10px; align-content: start; }
.card-body p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.prose { max-width: 68ch; display: grid; gap: 15px; }
.prose p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.prose ul { display: grid; gap: 9px; padding-left: 20px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.prose strong { color: var(--ink); font-weight: 600; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap: clamp(24px,4vw,44px); align-items: center; }
/* height:auto deja que el navegador derive la proporcion de los atributos
   width/height y reserve el alto ANTES de decodificar: sin esto la pagina
   salta cuando cargan las imagenes. */
.split > img { width: 100%; height: auto; border-radius: 22px; }

.spec-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.spec { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.spec th, .spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { font-weight: 600; color: var(--ink); width: 38%; }
.spec td { color: var(--ink-soft); line-height: 1.55; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px), 1fr)); gap: 16px; }
.gallery figure { display: grid; gap: 10px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); }
.gallery figcaption { font-size: 14px; color: var(--ink-muted); }

.steps { display: grid; gap: 16px; counter-reset: step; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.step-n { width: 34px; height: 34px; border-radius: 999px; background: var(--surface-tint); color: var(--brand); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.step p { font-size: 16px; line-height: 1.62; color: var(--ink-soft); }

.band { background: linear-gradient(160deg, var(--brand), var(--ink) 72%); color: #fff; }
.band .t-h2, .band .t-h3 { color: #fff; }
.band p { color: #E6DED2; font-size: 17px; line-height: 1.62; }
.band-in { display: grid; gap: 20px; max-width: 760px; padding-top: clamp(44px,6vw,68px); padding-bottom: clamp(44px,6vw,68px); }

.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .25s, border-color .25s; }
.btn-solid { background: var(--cta); color: #fff; }
.btn-solid:hover { background: var(--cta-hover); }
.btn-line { border: 1px solid var(--line-strong); color: var(--ink); background: #fff; }
.btn-line:hover { background: var(--surface-hover); }
.band .btn-line { border-color: rgba(255,255,255,.45); background: transparent; color: #fff; }
.band .btn-line:hover { background: rgba(255,255,255,.12); }

.quote { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.quote p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.quote .stars { color: #A87600; letter-spacing: .12em; font-size: 15px; }
.quote .who { font-size: 13.5px; color: var(--ink-muted); margin-top: auto; }

/* Visible solo para lectores de pantalla (captions de tabla, etiquetas). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Calculadora BTU (/aire-acondicionado) -------------------------------
   Va en el hero, en el lugar donde antes habia una foto de stock. Dos paneles
   en un grid auto-fit: en mobile se apilan (formulario arriba, resultado
   abajo) sin media query. */
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(20,17,14,0.55); }
.calc-form { padding: clamp(20px,3vw,28px); display: grid; gap: 14px; align-content: start; }
.calc-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.calc-lede { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin-top: -6px; }
.calc-field { display: grid; gap: 6px; }
.calc-field label { font-size: 14px; font-weight: 600; }
.calc-input { position: relative; }
.calc-input input { padding: 13px 42px 13px 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--field); font-size: 17px; font-weight: 600; }
.calc-input > span { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink-muted); pointer-events: none; }
.calc-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.calc-area { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line-strong); padding-top: 14px; font-size: 15px; color: var(--ink-muted); }
.calc-area strong { font-family: 'Sora', sans-serif; font-size: 19px; color: var(--ink); }

.calc-out { background: linear-gradient(155deg, var(--brand), var(--ink)); color: #fff; padding: clamp(20px,3vw,28px); display: grid; gap: 12px; align-content: start; }
.calc-out-label { font-size: 13px; letter-spacing: 0.04em; color: #E2D9CB; }
.calc-btu { font-family: 'Sora', sans-serif; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.calc-btu strong { font-size: clamp(40px, 6.5vw, 58px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.calc-btu > span { font-size: 19px; font-weight: 600; }
.calc-out.is-empty .calc-btu { opacity: .5; }
.calc-out.is-empty .calc-btu strong { font-size: clamp(32px,4.2vw,42px); }
.calc-sub { font-size: 14px; line-height: 1.5; color: #E6DDD0; margin-top: 8px; }
.calc-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); gap: 8px; }
.calc-chip { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 9px 6px; text-align: center; display: grid; gap: 2px; }
.calc-chip strong { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; }
.calc-chip span { font-size: 11px; color: #E2D9CB; }
.calc-chip.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.calc-chip.is-on span { color: var(--ink-muted); }
/* UI-01: sobre el amarillo de marca el texto va en --ink (10.1:1), nunca en blanco. */
.calc-cta { margin-top: 4px; display: block; text-align: center; padding: 14px 20px; border-radius: 999px; background: var(--brand-accent); color: var(--ink); font-weight: 700; font-size: 15.5px; transition: background .25s; }
.calc-cta:hover { background: #fff; color: var(--ink); }

.calc-note { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.calc-note::before { content: 'i'; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--brand); color: #fff; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; display: grid; place-items: center; }

/* --- Comparacion de consumo ---
   El grafico va en su propio panel tintado para que se lea como una unidad y
   no como texto suelto. La cifra grande es el gancho; las barras explican de
   donde sale. Sin librerias de grafico: son tres valores fijos. */
.consumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(20px,3vw,40px); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(20px,3.5vw,36px); }
.consumo-graf { background: linear-gradient(165deg, var(--surface-tint), #fff 65%); border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px,3vw,26px); }
.consumo-stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.consumo-stat strong { font-family: 'Sora', sans-serif; font-size: clamp(40px,6vw,56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--brand); }
/* El degradado sobre el texto necesita color:transparent, que dejaria la
   cifra invisible si background-clip no existe: por eso va tras @supports. */
@supports (-webkit-background-clip: text) {
  .consumo-stat strong { background: linear-gradient(95deg, var(--brand-dark), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.consumo-stat > span { flex: 1 1 170px; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }

.bars-title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.bars { display: grid; gap: 14px; }
.bar-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 7px; }
.bar-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-muted); }
.bar-ico svg { display: block; width: 100%; height: 100%; }
.bar-head strong { font-weight: 600; }
.bar-head b { margin-left: auto; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.bar.is-best .bar-ico, .bar.is-best b { color: var(--brand); }
.bar.is-best strong { color: var(--brand); }
.bar-track { display: block; height: 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.bar-fill { display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--line-strong); }
.bar.is-best .bar-fill { background: linear-gradient(90deg, var(--brand), var(--brand-accent)); }
/* data-anim lo pone el JS: sin JS las barras nacen con su ancho final. */
.bars[data-anim] .bar-fill { width: 0; transition: width .9s cubic-bezier(.2,.7,.3,1); }
.bars[data-anim].is-in .bar-fill { width: var(--w); }
.bars-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); margin-top: 16px; }

/* --- Certificados de marca ---
   La tarjeta es un <a> al PDF: sin JS igual se abre y se puede comprobar.
   object-position:top para que el encabezado con el logo de la marca sea lo
   que siempre queda a la vista al recortar la hoja. */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.cert-card { display: grid; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20,17,14,0.45); color: var(--ink); }
.cert-card img { width: 100%; height: auto; aspect-ratio: 1 / 1.25; object-fit: cover; object-position: top center; border-bottom: 1px solid var(--line); }
.cert-card-body { padding: 15px 18px 17px; display: grid; gap: 3px; }
.cert-card-body strong { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 600; }
.cert-card-body > span { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.cert-card-body em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--brand); margin-top: 5px; }

/* <dialog> nativo: el navegador ya resuelve foco, Escape y el backdrop. */
.lightbox { width: min(92vw, 640px); max-width: 92vw; max-height: 90vh; border: 0; border-radius: 20px; padding: 0; background: #fff; overflow: auto; }
.lightbox::backdrop { background: rgba(20,17,14,0.75); }
.lightbox img { width: 100%; height: auto; }
.lightbox-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); }
.lightbox-bar a { font-size: 14.5px; font-weight: 600; }
.lightbox-close { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.lightbox-close:hover { background: var(--surface-hover); }

/* --- Tarjetas de beneficio --- */
.benef { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.benef-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px,3vw,26px); display: grid; gap: 9px; align-content: start; }
.benef-card > span { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; color: var(--brand); }
.benef-card h3 { font-size: 19px; font-weight: 600; }
.benef-card p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* --- Ajustes de celular de la pagina de aire acondicionado ---
   Cada tarjeta de beneficio es una sola linea de texto: apiladas de a una
   daban una columna larguisima de puro aire. De a dos, la seccion completa
   entra casi en una pantalla. */
@media (max-width: 680px) {
  .benef { grid-template-columns: 1fr 1fr; gap: 10px; }
  .benef-card { padding: 15px 14px; gap: 5px; border-radius: 16px; }
  .benef-card h3 { font-size: 15.5px; line-height: 1.25; }
  .benef-card p { font-size: 13px; line-height: 1.45; }
  /* La hoja completa a 343px de ancho medía mas de 400px de alto por
     certificado. Se recorta al encabezado, que es donde esta la marca; el
     documento entero queda a un toque. */
  .cert-card img { aspect-ratio: 4 / 3; }
  .calc-out { padding-bottom: 22px; }
}

/* --- Como medir la ventana (/cortinas-roller) ---
   Los dos esquemas son SVG en linea, no archivos: pesan unos pocos KB, no
   agregan peticiones y toman los colores de los tokens del sitio, asi que
   siguen cualquier cambio de paleta sin reexportar nada. */
.medir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.medir-fig { margin: 0; display: grid; gap: 10px; }
.medir-svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
/* El tamano del texto va en unidades del viewBox: escala con el dibujo y se
   mantiene legible desde 320px hasta ancho completo. */
.medir-svg text { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; fill: var(--ink); }
/* La regla numerica va dentro del dibujo, como en los esquemas del cliente. */
.medir-svg text.mini { font-size: 10px; font-weight: 700; letter-spacing: .02em; fill: var(--brand); }
.medir-titulo { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.medir-fig figcaption { font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }

.medir-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.medir-paso { display: flex; gap: 12px; align-items: start; }
.medir-paso > span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-tint); color: var(--brand); display: grid; place-items: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13.5px; }
.medir-paso p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.medir-paso strong { color: var(--ink); font-weight: 600; }

/* --- Las cinco lineas de cortina (/cortinas-roller) ---
   Cinco es primo: con auto-fit cualquier ancho intermedio dejaba una tarjeta
   sola en la ultima fila. Por eso las columnas son explicitas y saltan de 5 a
   3, 2 y 1, sin pasar nunca por 4 (que dejaria 4+1). */
.lineas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.linea-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
/* height:auto es obligatorio: el atributo height="" del <img> gana a
   aspect-ratio si no se declara explicitamente. */
.linea-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.linea-body { padding: 16px 16px 20px; display: grid; gap: 7px; align-content: start; }
.linea-body h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.linea-body p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 760px)  { .lineas { grid-template-columns: repeat(2, 1fr); gap: 12px; } .linea-body { padding: 14px 14px 18px; } }
@media (max-width: 460px)  { .lineas { grid-template-columns: 1fr; } }

/* --- Como medir: encabezado con el CTA a la derecha ---
   Suelto al pie de la tarjeta el boton quedaba flotando sin anclaje; aqui
   cierra el encabezado y en celular pasa a ocupar el ancho completo. */
.medir-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
@media (max-width: 620px) { .medir-head > a { width: 100%; text-align: center; } }
.medir-fig figcaption strong { color: var(--ink); font-weight: 600; }
.medir-nota { margin-top: 18px; text-align: center; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); background: var(--surface-tint); border-radius: 14px; padding: 14px 18px; }

/* --- FAQ centrada en todo el sitio ---
   El bloque de preguntas es mas angosto que la grilla: pegado al borde
   izquierdo se leia como un error de maquetado. */
.faq-head { justify-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.faq-list { margin-left: auto; margin-right: auto; }

/* Velo del hero de /aire-acondicionado sobre la foto de ambiente.
   El pixel mas oscuro de la mitad izquierda (donde va el texto) es
   rgb(49,31,11): con 0.82 de velo el subtitulo queda en 4.9:1 incluso ahi.
   Hacia la derecha se abre, porque ese lado lo tapa la tarjeta opaca de la
   calculadora y asi la foto se alcanza a ver. */
.hero-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(250,248,245,0.88) 0%, rgba(250,248,245,0.82) 42%, rgba(250,248,245,0.56) 72%, rgba(245,239,229,0.42) 100%); }
/* Apilado en celular el texto puede caer sobre cualquier zona de la foto, asi
   que ahi el velo es parejo. */
@media (max-width: 900px) { .hero-veil { background: rgba(250,248,245,0.86); } }

/* --- Galeria de trabajos (/nuestros-trabajos) ---
   Las fotos vienen de terreno, con orientaciones mezcladas: verticales de
   telefono, apaisadas y cuadradas. Con columnas CSS cada una se muestra
   entera, sin recortes; una grilla uniforme obligaria a cortar la mitad de
   cada foto apaisada. */
.gal-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.gal-filtro { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-muted); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gal-filtro span { font-family: 'Sora', sans-serif; font-size: 12px; opacity: .7; }
.gal-filtro:hover { background: var(--surface-hover); color: var(--ink); }
.gal-filtro[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.galeria { columns: 4; column-gap: 16px; }
.gal-item { position: relative; display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; cursor: zoom-in; break-inside: avoid; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.gal-item img { display: block; width: 100%; height: auto; }
.gal-item:hover { transform: translateY(-4px); box-shadow: 0 22px 42px -26px rgba(20,17,14,0.5); }
.gal-tag { position: absolute; left: 10px; top: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(20,17,14,0.74); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
.gal-vacio { font-size: 15px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .gal-item { transition: none; } .gal-item:hover { transform: none; } }

/* Visor: fondo oscuro para que la foto mande, y la barra con los controles
   siempre visible bajo la imagen. */
.gal-lb { width: min(96vw, 1080px); max-width: 96vw; max-height: 94vh; border: 0; border-radius: 18px; padding: 0; background: var(--ink); color: #fff; overflow: hidden; }
.gal-lb::backdrop { background: rgba(20,17,14,0.9); }
.gal-lb img { display: block; width: 100%; max-height: 76vh; object-fit: contain; background: #000; }
.gal-lb-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.gal-lb-cap { flex: 1 1 auto; font-size: 13.5px; line-height: 1.45; color: var(--ink-on-dark); }
.gal-lb-num { flex: 0 0 auto; font-family: 'Sora', sans-serif; font-size: 13px; white-space: nowrap; color: var(--ink-on-dark); padding-left: 4px; }
.gal-nav { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; transition: background .2s; }
.gal-nav:hover { background: rgba(255,255,255,0.16); }
.gal-cerrar { margin-left: auto; }
@media (max-width: 560px) {
  .gal-lb img { max-height: 64vh; }
  .gal-lb-cap { font-size: 12.5px; }
}

@media (max-width: 1080px) { .galeria { columns: 3; } }
@media (max-width: 700px) {
  .galeria { columns: 2; column-gap: 10px; }
  .gal-item { margin-bottom: 10px; border-radius: 12px; }
  .gal-tag { left: 6px; top: 6px; padding: 3px 8px; font-size: 10px; letter-spacing: 0; }
  .gal-filtro { padding: 9px 14px; font-size: 13.5px; }
}
/* En el telefono el visor va a pantalla completa: la foto es el contenido,
   no tiene sentido dejarle margenes a un dialogo dentro de una pantalla de
   375px. */
@media (max-width: 640px) {
  .gal-lb { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
  .gal-lb img { flex: 1 1 auto; min-height: 0; max-height: none; }
  .gal-lb-bar { flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .gal-lb-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* --- Pagos (/pagos) --- */
.pasos-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.paso-pago { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px,3vw,26px); display: grid; gap: 9px; align-content: start; }
.paso-n { width: 34px; height: 34px; border-radius: 999px; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; }
.paso-pago h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.paso-pago p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.paso-pago a { font-weight: 600; }

/* Las capturas vienen del portal real y traen proporciones distintas: una
   caja comun con contain las alinea sin deformarlas ni recortarlas. */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.portal-fig { margin: 0; display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.portal-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-hover); border-bottom: 1px solid var(--line); }
.portal-fig figcaption { padding: 14px 18px 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.portal-fig figcaption strong { color: var(--brand); font-family: 'Sora', sans-serif; }
.portal-fig figcaption em { font-style: normal; font-weight: 600; color: var(--ink); }
.pago-nota { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; background: var(--surface-tint); border-radius: 14px; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.pago-nota::before { content: '🔒'; flex: 0 0 auto; font-size: 15px; line-height: 1.4; }