/* ==========================================================================
   IngeGlass  |  Sistema de diseno
   --------------------------------------------------------------------------
   Lenguaje visual derivado de la marca: el rombo rojo, los chevrones negros
   y el eje horizontal del logotipo. De ahi salen las tres constantes:

   1. BISEL  : las superficies se cortan a 45 grados en la esquina superior
               izquierda y la inferior derecha (nunca esquinas redondeadas).
   2. NODO   : el cuadrado rotado 45 grados marca inicios, pasos y vinetas.
   3. EJE    : una linea fina interrumpida por un nodo abre cada seccion.

   Tema unico claro. Un solo acento: #a63532.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fuentes */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- 2. Tokens */

:root {
  /* Superficies frias, nunca crema ni beige: el sitio habla de vidrio. */
  --paper:        #f4f6f7;
  --paper-2:      #e9eef1;
  --surface:      #ffffff;

  --ink:          #111214;
  --ink-2:        #363c42;
  --muted:        #6a727a;
  --muted-soft:   #98a1a9;

  --line:         #dce2e7;
  --line-strong:  #c3ccd4;

  --accent:       #a63532;
  --accent-deep:  #7f2724;
  --accent-soft:  #f7edec;

  --cold:         #cddfeb;
  --cold-deep:    #7ea8c4;

  /* Bisel: la constante de forma de todo el sitio.
     Se escriben planos, sin var() anidado, para que la sustitucion no
     dependa de dos niveles de resolucion. */
  --bevel: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --bevel-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);

  --shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 12px 32px -12px rgba(29, 41, 51, .16);
  --shadow-lg: 0 2px 4px rgba(17, 18, 20, .05), 0 32px 64px -24px rgba(29, 41, 51, .26);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --nav-h: 76px;
}

/* --------------------------------------------------------------- 3. Reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
figure, blockquote { margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--ink); color: #fff;
  padding: .85rem 1.4rem; font-size: .9rem;
  font-variation-settings: 'wght' 600, 'wdth' 96;
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------- 4. Tipos */

.display {
  font-size: clamp(2.6rem, 6.1vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  font-variation-settings: 'wght' 700, 'wdth' 112;
}

.h2 {
  font-size: clamp(1.95rem, 3.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.026em;
  font-variation-settings: 'wght' 700, 'wdth' 110;
}

.h3 {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -.014em;
  font-variation-settings: 'wght' 650, 'wdth' 104;
}

.lede {
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

.body-muted { color: var(--muted); max-width: 62ch; }

.label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variation-settings: 'wght' 640, 'wdth' 92;
  color: var(--muted);
}

.num {
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wght' 620, 'wdth' 88;
  letter-spacing: -.01em;
}

.accent-text { color: var(--accent); }

/* --------------------------------------------------------------- 5. Layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); }
.section--tint { background: var(--paper-2); }
.section--surface { background: var(--surface); }

/* Eje de marca: linea fina + nodo romboidal. Abre cada seccion. */
.axis {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.6rem;
}
.axis::before {
  content: '';
  width: clamp(36px, 5vw, 62px);
  height: 2px;
  background: var(--accent);
  flex: none;
}
.axis__node {
  width: 9px; height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}
.axis::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.axis .label { flex: none; margin-left: .35rem; }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .h2 + p { margin-top: 1.15rem; }


/* --------------------------------------------- 5b. El bisel, dos tecnicas

   El bisel es la constante de forma del sitio, pero no se puede dibujar
   siempre igual:

   - clip-path se usa en cajas cuyo contenido ya existe en el primer
     pintado: botones, fichas, el diagrama SVG, la tarjeta del formulario.
   - .cut se usa en cualquier caja que contenga una <img>. Chrome no
     reinvalida el recorte cuando la imagen llega despues del primer
     pintado (lazy, o preload ya decodificado) y la caja queda en blanco.
     Dibujar el corte con dos triangulos opacos del color del fondo evita
     por completo ese camino: son solidos, se pintan de inmediato y nunca
     dependen de que llegue nada.

   Cada contexto declara detras que color hay, con --cut-bg.               */

.cut { position: relative; --cut: 14px; --cut-bg: var(--paper); }
.cut::before,
.cut::after {
  content: '';
  position: absolute;
  width: var(--cut);
  height: var(--cut);
  background: var(--cut-bg);
  z-index: 3;
  pointer-events: none;
}
.cut::before { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cut::after { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cut--sm { --cut: 8px; }

/* --------------------------------------------------------------- 6. Botones */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  font-size: .95rem;
  line-height: 1.1;
  white-space: nowrap;
  font-variation-settings: 'wght' 620, 'wdth' 98;
  clip-path: var(--bevel-sm);
  cursor: pointer;
  border: 0;
  transition: transform .18s var(--ease), background-color .22s var(--ease),
              color .22s var(--ease);
}
.btn i { font-size: 1.05em; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; }

/* Contorno biselado: el fondo del elemento hace de borde,
   el pseudo-elemento recorta el interior 1px hacia dentro. */
.btn--ghost { background: var(--line-strong); color: var(--ink); }
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--paper);
  clip-path: var(--bevel-sm);
  transition: background-color .22s var(--ease);
}
.btn--ghost > span, .btn--ghost > i { position: relative; z-index: 1; }
.btn--ghost:hover { background: var(--ink); }
.btn--ghost:hover::before { background: var(--paper-2); }

.btn--on-red { background: #fff; color: var(--accent-deep); }
.btn--on-red:hover { background: #fdf3f2; }

.btn--lg { padding: 1.1rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Enlace con nodo: microinteraccion de marca */
.link-node {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-variation-settings: 'wght' 600, 'wdth' 98;
  color: var(--ink);
}
.link-node::after {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.link-node:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* --------------------------------------------------------------- 7. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(244, 246, 247, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(244, 246, 247, .94);
}
@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--paper); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand__mark { height: 38px; width: auto; }
.brand__word { height: 19px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-left: auto;
}
.nav__link {
  position: relative;
  font-size: .93rem;
  font-variation-settings: 'wght' 520, 'wdth' 98;
  color: var(--ink-2);
  padding-block: .4rem;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--ink); }

.nav__cta { flex: none; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 0;
  padding: .5rem;
  margin-right: -.5rem;
  cursor: pointer;
  color: var(--ink);
}
.nav__burger { position: relative; width: 22px; height: 14px; flex: none; }
.nav__burger span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 6px; }
.nav__burger span:nth-child(3) { top: 12px; }
[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav__burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel movil */
.nav__panel {
  position: fixed;
  inset: var(--nav-h) 0 0 auto;
  width: min(88vw, 400px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 2rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility .42s;
  z-index: 95;
  overflow-y: auto;
}
.nav__panel.is-open { transform: translateX(0); visibility: visible; }
.nav__panel a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.15rem;
  font-variation-settings: 'wght' 600, 'wdth' 104;
}
.nav__panel a:not(.btn)::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
}
.nav__panel .btn { margin-top: 1.75rem; }
.nav__panel-meta { margin-top: auto; padding-top: 2rem; }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(17, 18, 20, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s;
  z-index: 92;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- 8. Hero */

.hero {
  position: relative;
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
/* Rombo de la marca asomando por la esquina, como filigrana estructural.
   Vive en la esquina y no cruza la fotografia: acompana, no compite. */
.hero::before {
  content: '';
  position: absolute;
  top: -170px;
  right: -150px;
  width: min(30vw, 380px);
  aspect-ratio: 1;
  background: var(--paper-2);
  transform: rotate(45deg);
  z-index: 0;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

/* Escala propia del hero: la del sistema (.display) parte el titular en
   tres lineas dentro de esta columna. Dos lineas es el limite. */
.hero__title {
  font-size: clamp(2.25rem, 4.5vw, 3.7rem);
  margin-bottom: 1.5rem;
}
.hero__title .accent-text { display: block; }
.hero__lede { margin-bottom: 2.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Marco de doble panel: la sombra desplazada es el segundo vidrio. */
.pane {
  position: relative;
  isolation: isolate;
}
.pane::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(16px, 16px);
  border: 1px solid var(--line-strong);
  clip-path: var(--bevel);
  z-index: -1;
  transition: transform .5s var(--ease);
}
.pane:hover::before { transform: translate(22px, 22px); }
/* El bisel se aplica al contenedor, nunca al <img>.
   Un <img> que ya viene decodificado del preload puede pintarse antes de
   que el recorte se resuelva contra su caja definitiva, y queda invisible.
   Un contenedor con fondo y aspect-ratio propios siempre tiene caja. */
.pane__glass {
  display: block;
  background: var(--paper-2);
  overflow: hidden;
}
.pane__glass img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media .pane__glass { aspect-ratio: 4 / 3; }

/* --------------------------------------------------- 9. Franja de cobertura */

.facts {
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: 0;
}
.facts__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.facts__item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.facts__item:last-child { border-bottom: 0; }
.facts__item .label { display: block; margin-bottom: .4rem; }
.facts__value {
  font-size: 1.08rem;
  line-height: 1.4;
  font-variation-settings: 'wght' 620, 'wdth' 102;
}
.facts__value i { color: var(--accent); margin-right: .5rem; }

/* --------------------------------------------------------- 10. Servicios */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cell__media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 10; }
.cell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.cell:hover .cell__media img { transform: scale(1.04); }
.cell__body { padding: 1.75rem clamp(1.4rem, 2.4vw, 2rem) 1.9rem; display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.cell__body .h3 + p { color: var(--muted); font-size: .97rem; }
.cell__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
  clip-path: var(--bevel-sm);
  margin-bottom: .2rem;
}
.cell__list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: 1.1rem; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: .34rem .7rem;
  font-size: .8rem;
  line-height: 1.3;
  font-variation-settings: 'wght' 540, 'wdth' 94;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
}

/* Celda sin foto: variacion de fondo dentro del bento. */
.cell--tint {
  background: linear-gradient(160deg, #1a1c1f 0%, #111214 62%);
  color: #f2f4f6;
}
.cell--tint .h3 { color: #fff; }
.cell--tint .cell__body p { color: #b6bec6; }
.cell--tint .cell__icon { background: rgba(255,255,255,.08); color: #fff; }
.cell--tint .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #d9dfe4; }
.cell--tint .cell__body { position: relative; }
.cell--tint .cell__body::after {
  content: '';
  position: absolute;
  right: -70px; bottom: -80px;
  width: 220px; aspect-ratio: 1;
  background: rgba(166, 53, 50, .28);
  transform: rotate(45deg);
  pointer-events: none;
}

/* --------------------------------------------------------- 11. Anatomia */

.anatomy__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.anatomy__figure {
  background: var(--surface);
  clip-path: var(--bevel);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow);
}
.anatomy__figure svg { width: 100%; height: auto; }
.anatomy__caption {
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Estados del diagrama */
.dg-layer { transition: opacity .3s var(--ease); }
.anatomy.is-focused .dg-layer { opacity: .28; }
.anatomy.is-focused .dg-layer.is-active { opacity: 1; }
.dg-node { transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.dg-layer.is-active .dg-node { transform: scale(1.45); }
.dg-label { font-family: 'Archivo', sans-serif; font-size: 13px; font-variation-settings: 'wght' 620, 'wdth' 90; }

.anatomy__list { display: flex; flex-direction: column; }
.anatomy__item { border-bottom: 1px solid var(--line); }
.anatomy__item:first-child { border-top: 1px solid var(--line); }
.anatomy__btn {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1rem;
  align-items: start;
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.anatomy__idx {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: 2px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: .78rem;
  font-variation-settings: 'wght' 660, 'wdth' 90;
  transform: rotate(45deg);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.anatomy__idx span { transform: rotate(-45deg); }
.anatomy__btn:hover .anatomy__idx,
.anatomy__btn[aria-pressed="true"] .anatomy__idx { background: var(--accent); color: #fff; }
.anatomy__name {
  font-size: 1.02rem;
  font-variation-settings: 'wght' 620, 'wdth' 102;
  display: block;
  margin-bottom: .2rem;
}
.anatomy__desc { font-size: .93rem; color: var(--muted); display: block; line-height: 1.55; }

/* Comparativa termica */
.ug {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.ug__item {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem 1.5rem;
  clip-path: var(--bevel-sm);
}
.ug__item--best { border-color: var(--accent); background: var(--accent-soft); }
.ug__val {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 700, 'wdth' 96;
  font-variant-numeric: tabular-nums;
  margin-bottom: .1rem;
}
.ug__item--best .ug__val { color: var(--accent); }
.ug__unit { font-size: .82rem; color: var(--muted); display: block; margin-bottom: .8rem; }
.ug__name { font-size: .95rem; font-variation-settings: 'wght' 580, 'wdth' 100; line-height: 1.4; }
.ug__note { margin-top: 1.25rem; font-size: .82rem; color: var(--muted); max-width: 70ch; }

/* -------------------------------------------------------- 12. Beneficios */

.benefits__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 4vw, 4rem);
  align-items: start;
}
.benefits__aside .btn { margin-top: 2rem; }

.benefit {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.25rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.benefit:last-child { border-bottom: 1px solid var(--line); }
.benefit__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 1.2rem;
  clip-path: var(--bevel-sm);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.benefit:hover .benefit__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.benefit h3 { font-size: 1.06rem; font-variation-settings: 'wght' 620, 'wdth' 102; margin-bottom: .3rem; }
.benefit p { color: var(--muted); font-size: .96rem; }
.benefit strong {
  font-variation-settings: 'wght' 650, 'wdth' 96;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 13. Proceso */

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 2rem 0 2rem 2.5rem;
  border-left: 1px solid var(--line);
}
.step::before {
  content: '';
  position: absolute;
  left: -7px; top: 2.55rem;
  width: 13px; height: 13px;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  transform: rotate(45deg);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.step:hover::before { background: var(--accent); border-color: var(--accent); }
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--muted); font-size: .96rem; max-width: 42ch; }
.step__meta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--accent);
  font-variation-settings: 'wght' 600, 'wdth' 94;
}

/* --------------------------------------------------------- 14. Cobertura */

.coverage__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.zone { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.zone:last-child { border-bottom: 1px solid var(--line); }
.zone__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.zone__title { font-size: 1.15rem; font-variation-settings: 'wght' 660, 'wdth' 104; }
.zone__tag {
  font-size: .78rem;
  color: var(--accent);
  font-variation-settings: 'wght' 620, 'wdth' 92;
  letter-spacing: .04em;
}
.zone__comunas { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------------------------------------------------------- 15. Aliados */

.partners__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
}
.partners__logo {
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
}
.partners__logo img {
  max-height: 46px;
  width: auto;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.partners__logo:hover img { filter: grayscale(0); opacity: 1; }

/* ------------------------------------------------------- 16. Testimonios */

.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.quote {
  background: var(--surface);
  clip-path: var(--bevel);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.quote--feature {
  background: var(--ink);
  color: #f2f4f6;
}
.quote__mark { color: var(--accent); font-size: 1.35rem; }
.quote--feature .quote__mark { color: #e8908d; }
.quote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.quote--feature blockquote {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -.014em;
  font-variation-settings: 'wght' 560, 'wdth' 104;
}
.quote figcaption { margin-top: auto; font-size: .89rem; }
.quote__name { display: block; font-variation-settings: 'wght' 640, 'wdth' 98; }
.quote__role { color: var(--muted); }
.quote--feature .quote__role { color: #9aa3ab; }

/* --------------------------------------------------------- 17. Nosotros */

.about__intro { max-width: 68ch; }
.about__intro p + p { margin-top: 1.1rem; }
.about__media { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.about__media .pane__glass { aspect-ratio: 21 / 9; }
.about__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.pillar { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.pillar h3 { font-size: 1rem; font-variation-settings: 'wght' 640, 'wdth' 100; margin-bottom: .45rem; }
.pillar p { font-size: .94rem; color: var(--muted); }

/* -------------------------------------------------------------- 18. FAQ */

.faq__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.04rem;
  line-height: 1.4;
  font-variation-settings: 'wght' 620, 'wdth' 102;
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__sign {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  margin-top: .42rem;
}
.faq__sign::before, .faq__sign::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: transform .3s var(--ease);
}
.faq__sign::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__sign::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item[open] .faq__sign::after { transform: rotate(90deg); }
.faq__answer { padding-bottom: 1.5rem; max-width: 68ch; }
.faq__answer p { color: var(--muted); font-size: .98rem; }
.faq__answer p + p { margin-top: .8rem; }

/* --------------------------------------------------------- 19. CTA final */

.cta {
  position: relative;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  left: -8%; top: -40%;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .05);
  transform: rotate(45deg);
  pointer-events: none;
}
.cta__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 4vw, 4rem);
  align-items: center;
}
.cta .h2 { color: #fff; }
.cta__lede { color: rgba(255, 255, 255, .88); margin-top: 1.15rem; max-width: 42ch; }
.cta__direct {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
}
.cta__direct a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-variation-settings: 'wght' 620, 'wdth' 100;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: .2rem;
  transition: border-color .25s var(--ease);
}
.cta__direct a:hover { border-bottom-color: #fff; }

/* Formulario: tarjeta blanca sobre rojo para asegurar contraste. */
.quoter {
  background: var(--surface);
  color: var(--ink);
  clip-path: var(--bevel);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.quoter__title { font-size: 1.2rem; font-variation-settings: 'wght' 660, 'wdth' 104; margin-bottom: .4rem; }
.quoter__hint { font-size: .89rem; color: var(--muted); margin-bottom: 1.6rem; }
.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.field > label {
  font-size: .82rem;
  font-variation-settings: 'wght' 620, 'wdth' 94;
  letter-spacing: .03em;
  color: var(--ink-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem .95rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: .97rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  background: var(--surface);
}
.field__help { font-size: .8rem; color: var(--muted); }
.field__error {
  font-size: .82rem;
  color: var(--accent-deep);
  font-variation-settings: 'wght' 580, 'wdth' 96;
  display: none;
}
.field.has-error input, .field.has-error select { border-color: var(--accent-deep); }
.field.has-error .field__error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.quoter__submit { margin-top: .6rem; }
.quoter__legal { margin-top: 1rem; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.quoter__status {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: .88rem;
  color: var(--accent-deep);
  display: none;
}
.quoter__status.is-visible { display: block; }

/* ----------------------------------------------------------- 20. Footer */

.site-footer {
  background: var(--ink);
  color: #c8cfd6;
  padding-top: clamp(3.5rem, 6vw, 5rem);
  font-size: .94rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer__brand .brand { margin-bottom: 1.1rem; }
.footer__brand .brand__word { filter: brightness(0) invert(1); }
.footer__brand p { color: #98a1a9; max-width: 34ch; font-size: .92rem; }
.footer__col h3 {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variation-settings: 'wght' 640, 'wdth' 92;
  color: #7d858d;
  margin-bottom: 1.1rem;
}
.footer__col li + li { margin-top: .6rem; }
.footer__col a { color: #c8cfd6; transition: color .2s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__contact li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-top: .75rem;
}
.footer__contact i { color: var(--accent); margin-top: .3rem; font-size: .95rem; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.6rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: #7d858d;
}
.footer__bottom a { color: #c8cfd6; }
.footer__bottom a:hover { color: #fff; }
.footer__credit strong { font-variation-settings: 'wght' 620, 'wdth' 98; color: #e4e9ed; }

/* ------------------------------------------------------- 21. WhatsApp

   Ojo con el nombre de la clase: Font Awesome ya ocupa "fab" para su
   familia Brands. Llamar fab a este boton hacia que Font Awesome le
   impusiera su display y su font-family, y el boton colapsaba a 37px.
   Por eso se llama wa-float.                                             */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.15rem;
  background: var(--ink);
  color: #fff;
  font-size: .9rem;
  font-variation-settings: 'wght' 620, 'wdth' 96;
  clip-path: var(--bevel-sm);
  box-shadow: var(--shadow-lg);
  transform: translateY(140%);
  transition: transform .5s var(--ease), background-color .25s var(--ease);
}
.wa-float.is-visible { transform: translateY(0); }
.wa-float:hover { background: var(--accent); }
.wa-float i { font-size: 1.3rem; }
.wa-float__text { display: none; }

/* ------------------------------------------- 21b. Selector de servicio */

.ask {
  width: min(30rem, calc(100vw - 2rem));
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.ask::backdrop { background: rgba(17, 18, 20, .55); }
.ask__box {
  position: relative;
  background: var(--surface);
  clip-path: var(--bevel);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.ask__title { font-size: 1.3rem; font-variation-settings: 'wght' 660, 'wdth' 104; }
.ask__hint { margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.ask__opts { margin-top: 1.5rem; display: grid; gap: .7rem; }
.ask__x {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.ask__x:hover { color: var(--ink); }

/* ------------------------------------------------------- 22. Animaciones */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wa-float { transform: none; }
}

/* ------------------------------------------------------ 23. Breakpoints */

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .wa-float__text { display: inline; }
  .ug { grid-template-columns: repeat(3, 1fr); }
  .facts__grid { grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
  .facts__item { border-bottom: 0; }
  .facts__item + .facts__item { border-left: 1px solid var(--line); padding-left: 2rem; }
}

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .partners__row { grid-template-columns: repeat(3, 1fr); }
  .about__pillars { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .process { grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem 2rem; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: clamp(3rem, 5vw, 5rem); }
  .anatomy__layout { grid-template-columns: 1.15fr .85fr; }
  .benefits__layout { grid-template-columns: .82fr 1.18fr; }
  .benefits__aside { position: sticky; top: calc(var(--nav-h) + 3rem); }
  .coverage__layout { grid-template-columns: .8fr 1.2fr; }
  .faq__layout { grid-template-columns: .8fr 1.2fr; }
  .faq__aside { position: sticky; top: calc(var(--nav-h) + 3rem); }
  .cta__layout { grid-template-columns: 1fr .9fr; }
  .quotes { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; }
  .quote--feature { grid-row: span 2; }
  .process { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .step { padding: 0 1.75rem 0 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 2.5rem; }
  .step::before { left: -7px; top: -7px; }
  .step:last-child { padding-right: 0; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1060px) {
  .nav__toggle { display: none !important; }
}

@media (max-width: 1059px) {
  .nav__links, .nav > .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

@media (min-width: 1060px) {
  .nav__panel, .scrim { display: none; }
}

/* Bento: la celda destacada ocupa toda la fila superior en escritorio. */
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .cell--wide { grid-column: span 3; }
  .cell--half { grid-column: span 3; }
}

/* ------------------------------------- 24. Reserva de espacio para iconos

   Font Awesome se carga sin bloquear el render, asi que sus glifos llegan
   despues del primer pintado. Reservando el ancho por adelantado, la llegada
   de la fuente no mueve nada: el CLS se queda en cero.                     */

.btn i,
.facts__value i,
.footer__contact i,
.step__meta i,
.cta__direct i,
.wa-float i {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  flex: none;
}
.btn i, .facts__value i, .cta__direct i { width: 1.15em; text-align: center; }
.footer__contact i, .step__meta i { width: 1em; text-align: center; }
.wa-float i { width: 1.3rem; text-align: center; }
.cell__icon i, .benefit__icon i { display: inline-block; font-style: normal; }