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

.container--narrow {
  max-width: var(--container-narrow);
}

 
.section {
  padding-block: var(--section-y);

   
  --atm-frio:
    radial-gradient(circle calc(var(--atm-size) / 2) at var(--atm-frio-en, 13% 22%),
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio)), transparent) 0%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.964), transparent) 7%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.928), transparent) 14%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.885), transparent) 21%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.825), transparent) 28%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.741), transparent) 35%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.633), transparent) 42%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.490), transparent) 49%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.352), transparent) 56%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.214), transparent) 63%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.121), transparent) 70%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.067), transparent) 78%,
      color-mix(in srgb, var(--c-vertical) calc(var(--atm-k) * var(--atm-a-frio) * 0.033), transparent) 86%,
      transparent 100%);

  --atm-calido:
    radial-gradient(circle calc(var(--atm-size) / 2) at var(--atm-calido-en, 90% 85%),
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido)), transparent) 0%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.964), transparent) 7%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.928), transparent) 14%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.885), transparent) 21%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.825), transparent) 28%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.741), transparent) 35%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.633), transparent) 42%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.490), transparent) 49%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.352), transparent) 56%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.214), transparent) 63%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.121), transparent) 70%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.067), transparent) 78%,
      color-mix(in srgb, var(--c-atm-calido) calc(var(--atm-k) * var(--atm-a-calido) * 0.033), transparent) 86%,
      transparent 100%);

   
  --atm-k: 0.5;
  --atm-frio-en: 88% 18%;

   
  --banda-luces: var(--atm-frio);
  background-image: var(--banda-luces);

   
  background-color: var(--c-bg);

   
  position: relative;
  isolation: isolate;
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

 
.section--larga {
  --atm-size: clamp(320px, 44vw, 660px);
  --atm-baldosa: 1520px;

   
  --atm-k: 1;

   
  --atm-frio-en: 15% 25%;
  --atm-calido-en: 88% 75%;

  background-image: var(--atm-frio), var(--atm-calido);
  background-repeat: repeat-y, repeat-y;
  background-size: 100% var(--atm-baldosa), 100% var(--atm-baldosa);
  background-position: 0 0, 0 0;
}

 

 
.section--luz {
   
  --atm-k: 0.65;

   
  --atm-frio-en: 13% 22%;
  --atm-calido-en: 90% 85%;

  --banda-luces: var(--atm-frio), var(--atm-calido);
}

 
.section--alza {
  background-color: var(--c-bg-elev);
  background-image:
    linear-gradient(180deg, var(--c-luz-derrame) 0%, transparent 45%),
    var(--banda-luces);
  box-shadow: var(--luz-caja);
}

 
.section--alza-doble {
   
  --atm-k: 0.15;

  background-color: var(--c-surface);
  background-image: var(--banda-luces);
  box-shadow: var(--luz-caja);
}

 
.section--regla:not(.section--alza):not(.section--alza-doble) {
  box-shadow: inset 0 var(--linea) 0 0 var(--c-border-soft);
}

 
.section--abre {
  padding-top: calc(var(--section-y) * 1.35);
}

.section--sigue {
  padding-top: calc(var(--section-y) * 0.7);
}

 
.section--band:not(.section--luz) {
  --atm-k: 1;
   
  --atm-frio-en: 13% 22%;
  --atm-calido-en: 90% 85%;
  --banda-luces: var(--atm-frio), var(--atm-calido);
}

 
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grano);
  background-size: 160px 160px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

 
.section--band > .container > * + * {
  margin-top: var(--sp-2xl);
}

 
.section__head {
  margin-bottom: var(--sp-xl);
  max-width: min(100%, 46rem);
}

 
.section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
  max-width: none;
  flex-wrap: wrap;
}

.section__head--split > div { max-width: min(100%, 34rem); }

.section__head h2 {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tight);
}

 
 
.section__eyebrow {
  display: block;
  margin-bottom: var(--sp-s);
}

.section__eyebrow::before {
  content: "";
  display: inline-block;

   
  width: var(--sp-l);
  height: var(--linea-fuerte);
  margin-right: var(--sp-2xs);
  background: var(--c-vertical);
  transform-origin: left center;

   
  vertical-align: 0.35em;
}

 
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal-cadena] .section__eyebrow::before {
    transform: scaleX(0);
  }

  html.js [data-reveal-cadena].is-visible .section__eyebrow::before {
    animation: antetitulo-traza var(--dur-slow) var(--ease-out) forwards;
  }
}

 
@keyframes antetitulo-traza {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

 
.lead {
  margin-top: var(--sp-s);
  color: var(--c-text-muted);
}

 
.lead--page { margin-top: var(--sp-m); }

 
.lead--large { font-size: var(--fs-lead); }

 

.grid {
  display: grid;
  gap: var(--sp-m);
}

 
 
 
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

 
.linegrid {
  display: grid;

   
  grid-template-columns: repeat(var(--linegrid-cols, 1), minmax(0, 1fr));
  background: var(--c-surface);
  overflow: clip;
}

.linegrid > * {
  min-width: 0;

   
  overflow-wrap: anywhere;
  box-shadow: calc(var(--linea) * -1) 0 0 var(--c-border-soft),
              0 calc(var(--linea) * -1) 0 var(--c-border-soft);
}

 

.top-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-marketing) 60%, transparent);
}

 
body[data-vertical] .top-accent {
  background: linear-gradient(90deg, var(--c-vertical), var(--c-vertical-soft) 55%, transparent);
}

 

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: var(--linea) solid var(--c-border-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
   
  flex-wrap: wrap;
  row-gap: var(--sp-2xs);

   
  min-height: 80px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  text-decoration: none;
}

.site-header__mark {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.site-header__mark svg { width: 100%; height: 100%; }

 
.site-header__marca {
  display: block;
  height: var(--marca-h);
  width: auto;
  flex-shrink: 0;
  color: var(--c-text);
}

 
.site-header__logo {
   
  display: block;
  height: calc(var(--marca-h) + 2px);
  width: auto;
  max-width: 200px;
  flex-shrink: 0;
}

.site-header__cta { display: none; }

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-l);
   
  flex-wrap: wrap;
  row-gap: var(--sp-2xs);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);

   
  min-height: var(--tap-target-min);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-parent > a {
  color: var(--c-text);
}

 

.site-nav .menu-item-has-children {
  position: relative;
}

.site-nav .menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 6px;
  display: grid;
  gap: 0;
  min-width: 230px;
  padding: var(--sp-2xs);
  background: var(--c-surface);
  border: var(--linea) solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}

.site-nav .menu-item-has-children:hover:not([data-open="false"]) > .sub-menu,
.site-nav .menu-item-has-children:focus-within:not([data-open="false"]) > .sub-menu,
.site-nav .menu-item-has-children[data-open="true"] > .sub-menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.site-nav .menu-item-has-children:hover:not([data-open="false"]) > a::after,
.site-nav .menu-item-has-children[data-open="true"] > a::after {
  transform: translateY(-4px) rotate(225deg);
}

.site-nav .sub-menu li { display: block; }

.site-nav .sub-menu a {
  display: block;
  padding: var(--sp-2xs) var(--sp-xs);
  border-radius: var(--radius-s);
  white-space: nowrap;
}

.site-nav .sub-menu a:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3xs);

   
  min-height: var(--control-h);
  padding: var(--sp-2xs) var(--sp-xs);
  background: transparent;
  border: var(--linea) solid var(--c-border);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

 
.nav-toggle:hover {
  border-color: var(--c-text-faint);
  background: var(--c-bg-elev);
}

.nav-toggle:active { transform: translateY(1px); }

@media (min-width: 1000px) {
   
  .site-nav {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header__cta { display: inline-flex; }
  .nav-toggle { display: none; }

   
  .site-header[data-nav="compact"] .site-nav:not([data-open="true"]) { display: none; }
  .site-header[data-nav="compact"] .nav-toggle { display: inline-flex; }
}

 
.site-nav[data-open="true"] {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding: var(--sp-m) var(--gutter);
  background: var(--c-bg);
  border-bottom: var(--linea) solid var(--c-border);

   
  max-height: calc(100dvh - var(--header-bottom, 80px));
  overflow: hidden auto;
  overscroll-behavior: contain;
}

 
.site-nav[data-open="true"] a { white-space: normal; }

.site-nav[data-open="true"] ul {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-s);
}

 
.site-nav[data-open="true"] .sub-menu {
  position: static;
  translate: none;
  opacity: 1;
  visibility: visible;
  min-width: 0;
  margin-top: var(--sp-2xs);
  padding: 0 0 0 var(--sp-s);
  background: transparent;
  border: 0;
  border-left: var(--linea) solid var(--c-border);
  border-radius: 0;
  box-shadow: none;
  gap: var(--sp-2xs);
}

 

 

.site-footer {
  padding-block: var(--sp-2xl) var(--sp-xl);
  border-top: var(--linea) solid var(--c-border-soft);
  background: var(--c-bg-elev);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

 

.pie-col {
  min-width: 0;
}

 
.pie-col__titulo {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.pie-col__lista {
  display: grid;
  gap: var(--sp-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-col__enlace {
  display: inline-flex;
  align-items: center;

   
  min-height: var(--tap-target-min);

   
  overflow-wrap: anywhere;

  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.pie-col__enlace:hover,
.pie-col__enlace:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

 

.pie-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-m);
  margin: var(--sp-s) 0 0;
  padding: 0;
  list-style: none;
}

.pie-redes__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.pie-redes__enlace:hover,
.pie-redes__enlace:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

 

 
.pie-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: var(--linea) solid var(--c-border-soft);
}

.pie-cierre__legal {
  min-width: 0;
  margin: 0;
  color: var(--c-text-muted);
}

.pie-cierre__privacidad {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pie-cierre__privacidad:hover,
.pie-cierre__privacidad:focus-visible {
  color: var(--c-text);
}

 
.pie-cierre__nota {
  display: block;
  color: var(--c-text-faint);
  overflow-wrap: anywhere;
}

 

 
.pie-a__marca {
  display: flow-root;
  overflow: clip;
}

.pie-a__marca .marca-pie {
   
  margin-top: 0;

   
  margin-bottom: calc(-1 * var(--pie-a-recorte));
}

 
.pie-a__grid {
  display: grid;
  gap: var(--sp-xl) var(--sp-l);
  padding-top: var(--sp-l);
  border-top: var(--linea) solid var(--c-border-soft);
}

@media (min-width: 560px) {
  .pie-a__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

 
@media (min-width: 1040px) {
  .pie-a__grid[data-cols="2"] { grid-template-columns: 1.5fr minmax(0, 1fr); }
  .pie-a__grid[data-cols="3"] { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); }
  .pie-a__grid[data-cols="4"] { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
}

 
.pie-a__logo {
  display: block;
  height: 26px;
  width: auto;
  margin-bottom: var(--sp-s);
  color: #fff;
}

.pie-a__intro {
  min-width: 0;
}

.pie-a__claim {
   
  max-width: 34ch;
  margin: 0 0 var(--sp-s);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.pie-a__estado {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-width: 0;
  margin: 0;
}

 
.pie-a__punto {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-vertical-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-vertical-soft) 20%, transparent);
}

.pie-a__estado-enlace {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--tap-target-min);
  color: var(--c-text-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}

.pie-a__estado-enlace:hover,
.pie-a__estado-enlace:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}