/* Llivia Soft — sitio corporativo
   Colores del logo: degradado #F59E0B → #EA580C y azul noche #0F172A.
   El naranja del logo no llega a 4.5:1 sobre blanco, así que el texto y los
   enlaces sobre fondo claro usan #C2410C (5.2:1); sobre fondo oscuro, #FDBA74.
   Sin dependencias: la fuente es la del sistema y las animaciones son CSS. */

:root {
  --noche: #0B1120;
  --noche-2: #0F172A;
  --noche-3: #1E293B;
  --tinta: #0F172A;
  --texto: #334155;
  --texto-suave: #475569;
  --linea: #E2E8F0;
  --fondo: #FFFFFF;
  --fondo-suave: #F8FAFC;
  --ambar: #F59E0B;
  --naranja: #EA580C;
  --acento: #C2410C;
  --acento-hover: #9A3412;
  --acento-claro: #FDBA74;
  --degradado: linear-gradient(90deg, var(--ambar), var(--naranja));
  --foco: #C2410C;
  --radio: 20px;
  --sombra: 0 1px 2px rgb(15 23 42 / 0.05), 0 12px 32px -12px rgb(15 23 42 / 0.12);
  --sombra-alta: 0 2px 4px rgb(15 23 42 / 0.06), 0 24px 48px -16px rgb(15 23 42 / 0.22);
  --fuente: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cabecera: 72px;
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  color: var(--tinta);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 2.6vw + 1rem, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

p { margin: 0 0 1em; }

a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-hover); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}

.cabecera,
.portada,
.levent,
.pie,
.tarjeta--destacada { --foco: var(--acento-claro); }

.contenedor {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 640px) {
  .contenedor { padding-inline: 24px; }
}

.degradado-texto {
  background: linear-gradient(90deg, #FBBF24, #F97316 55%, #EA580C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .degradado-texto { background: none; color: inherit; }
}

.lead {
  font-size: 1.1875rem;
  color: #1E293B;
}

/* Saltar al contenido */
.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--fondo);
  color: var(--tinta);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus { top: 12px; color: var(--tinta); }

/* Etiqueta de sección */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}
.etiqueta::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--degradado);
}
.etiqueta--clara { color: var(--acento-claro); }

/* Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(11 17 32 / 0.94);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgb(248 250 252 / 0.08);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--cabecera);
}

.marca { display: inline-flex; flex-shrink: 0; border-radius: 8px; }
.marca img { height: 42px; width: auto; }

.navegacion ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navegacion a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  color: #E2E8F0;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.navegacion a:hover { background: rgb(248 250 252 / 0.08); color: #FFFFFF; }

.navegacion .boton-nav {
  margin-left: 8px;
  background: var(--degradado);
  color: var(--noche);
  font-weight: 700;
}
.navegacion .boton-nav:hover { color: var(--noche); filter: brightness(1.06); }

@media (max-width: 639px) {
  :root { --cabecera: 108px; }
  .cabecera__fila {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-block: 10px;
  }
  .marca { align-self: flex-start; }
  .marca img { height: 38px; }
  .navegacion ul { justify-content: space-between; gap: 2px; }
  .navegacion a { padding: 8px 10px; font-size: 0.875rem; }
  .navegacion .boton-nav { margin-left: 0; }
}

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.boton:hover { transform: translateY(-2px); }

.boton--primario {
  background: var(--degradado);
  color: var(--noche);
  box-shadow: 0 10px 30px -8px rgb(234 88 12 / 0.55);
}
.boton--primario:hover { color: var(--noche); box-shadow: 0 16px 36px -8px rgb(234 88 12 / 0.65); }

.boton--fantasma {
  border: 1px solid rgb(248 250 252 / 0.2);
  background: rgb(248 250 252 / 0.04);
  color: #F8FAFC;
}
.boton--fantasma:hover { background: rgb(248 250 252 / 0.1); color: #FFFFFF; }

.boton--oscuro { background: var(--noche); color: #FFFFFF; }
.boton--oscuro:hover { color: #FFFFFF; box-shadow: 0 12px 28px -10px rgb(11 17 32 / 0.6); }

.boton--claro { background: #FFFFFF; color: var(--noche); }
.boton--claro:hover { color: var(--noche); }

/* Portada */
.portada {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(52rem 32rem at 82% 18%, rgb(234 88 12 / 0.28), transparent 62%),
    radial-gradient(40rem 28rem at 8% 100%, rgb(245 158 11 / 0.14), transparent 60%),
    var(--noche);
  color: #CBD5E1;
}

.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(148 163 184 / 0.22) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 30%, transparent 75%);
}

.portada__fila {
  display: grid;
  gap: 48px;
  align-items: center;
  padding-block: 56px 72px;
}

@media (min-width: 960px) {
  .portada__fila {
    grid-template-columns: 1.15fr 1fr;
    min-height: min(calc(92vh - var(--cabecera)), 820px);
    padding-block: 72px 96px;
  }
}

.anuncio {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgb(248 250 252 / 0.14);
  border-radius: 999px;
  background: rgb(248 250 252 / 0.05);
  color: #E2E8F0;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.anuncio:hover { color: #FFFFFF; border-color: rgb(253 186 116 / 0.5); background: rgb(248 250 252 / 0.08); }

.anuncio__marca {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--degradado);
  color: var(--noche);
  font-weight: 800;
}

.portada h1 {
  color: #F8FAFC;
  font-size: clamp(2.5rem, 5.4vw + 1rem, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 24px;
}

.portada__lead {
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  max-width: 56ch;
  margin-bottom: 32px;
}

.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  color: #94A3B8;
  font-size: 0.875rem;
}
.confianza li { display: inline-flex; align-items: center; gap: 8px; }
.confianza li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--degradado);
  box-shadow: 0 0 12px rgb(245 158 11 / 0.8);
}

/* Escena del cubo */
.escena {
  position: relative;
  justify-self: center;
  width: min(480px, 100%);
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: center;
}

.escena__halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(234 88 12 / 0.45), transparent 65%);
  filter: blur(30px);
}

.escena__halo::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px dashed rgb(253 186 116 / 0.25);
}

.escena__cubo {
  position: relative;
  width: 52%;
  filter: drop-shadow(0 30px 50px rgb(234 88 12 / 0.35));
}

.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgb(248 250 252 / 0.14);
  border-radius: 999px;
  background: rgb(15 23 42 / 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #F1F5F9;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6);
}
.chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--degradado);
}
.chip--1 { top: 6%; left: 2%; }
.chip--2 { top: 24%; right: 0; }
.chip--2 i { background: #4ADE80; }
.chip--3 { bottom: 20%; left: 0; }
.chip--4 { bottom: 4%; right: 8%; }

@media (max-width: 959px) {
  .escena { width: min(400px, 100%); }
  .chip { font-size: 0.8125rem; padding: 7px 12px; }
}

/* Secciones */
.seccion { padding-block: 88px; }
.seccion--suave { background: var(--fondo-suave); }
.seccion--compacta { padding-block: 0 88px; }

@media (min-width: 960px) {
  .seccion { padding-block: 120px; }
  .seccion--compacta { padding-block: 0 120px; }
}

.seccion__cabeza { max-width: 720px; margin-bottom: 48px; }
.seccion__cabeza p:last-child { color: var(--texto-suave); font-size: 1.1875rem; margin: 0; }

/* Quiénes somos */
.nosotros {
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .nosotros { grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: center; }
}

.nosotros p { max-width: 62ch; }

.valores {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.valores li {
  position: relative;
  padding-left: 36px;
}
.valores strong { color: var(--tinta); }
.valores li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--degradado);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.5 17.2-5-5 1.8-1.8 3.2 3.2 6.9-6.9 1.8 1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.5 17.2-5-5 1.8-1.8 3.2 3.2 6.9-6.9 1.8 1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ficha {
  position: relative;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 24px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.ficha::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--degradado);
}

.ficha__cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px 8px;
}
.ficha__cabeza img { width: 26px; }
.ficha__cabeza h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -0.01em; }

.ficha dl { margin: 0; padding: 4px 28px 24px; }

.ficha__dato {
  display: grid;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--linea);
}
.ficha__dato:last-child { border-bottom: 0; }

.ficha dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ficha dd {
  margin: 0;
  color: var(--tinta);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Servicios: mosaico */
.bento {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tarjeta--destacada { grid-column: span 2; }
}

@media (min-width: 640px) and (max-width: 959px) {
  .bento > :last-child { grid-column: span 2; }
}

@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tarjeta--destacada { grid-row: span 2; }
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tarjeta:hover {
  transform: translateY(-4px);
  border-color: #FDBA74;
  box-shadow: var(--sombra-alta);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  color: var(--acento);
  box-shadow: inset 0 0 0 1px rgb(234 88 12 / 0.15);
}
.tarjeta__icono svg { width: 26px; height: 26px; }

.tarjeta h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.tarjeta p { color: var(--texto-suave); margin: 0; }

.tarjeta--destacada {
  overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(30rem 18rem at 100% 0%, rgb(234 88 12 / 0.35), transparent 60%),
    var(--noche);
  color: #CBD5E1;
}
.tarjeta--destacada:hover { border-color: rgb(253 186 116 / 0.4); }
.tarjeta--destacada h3 { color: #F8FAFC; font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); }
.tarjeta--destacada p { color: #CBD5E1; font-size: 1.0625rem; }
.tarjeta--destacada .tarjeta__icono {
  background: var(--degradado);
  color: var(--noche);
  box-shadow: none;
}

.tarjeta__codigo {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 18px 20px;
  border: 1px solid rgb(248 250 252 / 0.1);
  border-radius: 14px;
  background: rgb(2 6 23 / 0.55);
  color: #E2E8F0;
  font-family: var(--mono);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.tarjeta--destacada p { margin-bottom: 28px; }
.tarjeta__codigo b { color: #FDBA74; font-weight: 600; }
.tarjeta__codigo em { color: #86EFAC; font-style: normal; }

/* Cómo trabajamos */
.pasos {
  display: grid;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

@media (min-width: 960px) {
  .pasos { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

.paso {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
}
.paso::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--degradado);
}

.paso__numero {
  display: block;
  margin-bottom: 12px;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.paso h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.paso p { color: var(--texto-suave); margin: 0; }

/* Levent */
.levent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 88px;
  background:
    radial-gradient(48rem 30rem at 100% 30%, rgb(234 88 12 / 0.25), transparent 60%),
    radial-gradient(36rem 24rem at 0% 0%, rgb(245 158 11 / 0.10), transparent 60%),
    var(--noche);
  color: #CBD5E1;
}

@media (min-width: 960px) {
  .levent { padding-block: 120px; }
}

.levent__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(148 163 184 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 163 184 / 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, #000 20%, transparent 75%);
}

.levent__fila {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 960px) {
  .levent__fila { grid-template-columns: 1.05fr 1fr; gap: 72px; }
}

.levent h2 { color: #F8FAFC; }
.levent .lead { color: #CBD5E1; }
.levent a { color: var(--acento-claro); font-weight: 600; }
.levent a:hover { color: #FED7AA; }

.destacado {
  display: flex;
  gap: 16px;
  margin: 8px 0 28px;
  padding: 20px;
  border: 1px solid rgb(251 146 60 / 0.35);
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(234 88 12 / 0.14), rgb(245 158 11 / 0.04));
}
.destacado p { margin: 0; }

.destacado__icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--degradado);
  color: var(--noche);
}
.destacado__icono svg { width: 24px; height: 24px; }

.destacado__titulo {
  color: #F8FAFC;
  font-weight: 800;
  font-size: 1.125rem;
  margin-bottom: 4px !important;
}

.funciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.funciones li {
  padding: 6px 14px;
  border: 1px solid rgb(248 250 252 / 0.12);
  border-radius: 999px;
  background: rgb(248 250 252 / 0.04);
  color: #E2E8F0;
  font-size: 0.875rem;
  font-weight: 500;
}
.funciones li:first-child {
  border-color: rgb(251 146 60 / 0.6);
  background: rgb(234 88 12 / 0.15);
  color: #FED7AA;
  font-weight: 700;
}

.levent__estado { margin: 0; }

.insignia {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--degradado);
  color: var(--noche);
  font-size: 0.8125rem;
  font-weight: 800;
}

/* Maqueta ilustrativa de la app */
.maqueta {
  width: 100%;
  max-width: 560px;
  justify-self: center;
  border: 1px solid rgb(248 250 252 / 0.12);
  border-radius: 20px;
  background: linear-gradient(180deg, #131C31, #0E1527);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(0 0 0 / 0.3);
  overflow: hidden;
}

@media (min-width: 960px) {
  .maqueta { transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); }
}

.maqueta__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(248 250 252 / 0.08);
}
.maqueta__barra i { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.maqueta__barra i:nth-child(2) { background: #FBBF24; }
.maqueta__barra i:nth-child(3) { background: #4ADE80; }
.maqueta__barra span { margin-left: 10px; color: #94A3B8; font-size: 0.8125rem; font-weight: 600; }

.maqueta__cuerpo {
  display: grid;
  grid-template-columns: 52px 1fr;
}

.maqueta__menu {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 12px;
  border-right: 1px solid rgb(248 250 252 / 0.08);
}
.maqueta__menu b {
  height: 28px;
  border-radius: 8px;
  background: rgb(248 250 252 / 0.07);
}
.maqueta__menu b.activo { background: var(--degradado); }

.maqueta__contenido {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.maqueta__factura {
  padding: 18px;
  border-radius: 14px;
  background: #FFFFFF;
}

.maqueta__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.maqueta__fila strong { color: var(--tinta); font-size: 0.9375rem; }

.maqueta__estado {
  padding: 2px 10px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 800;
}

.linea {
  display: block;
  height: 8px;
  margin-block: 8px;
  border-radius: 4px;
  background: #E2E8F0;
}
.l40 { width: 40%; } .l60 { width: 60%; } .l70 { width: 70%; }
.l80 { width: 80%; } .l85 { width: 85%; } .l90 { width: 90%; }

.maqueta__items {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dashed #CBD5E1;
}

.maqueta__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.maqueta__total .linea { background: #FED7AA; height: 10px; }

.maqueta__boton {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--degradado);
  color: var(--noche);
  font-size: 0.8125rem;
  font-weight: 800;
}

.maqueta__graficas {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.maqueta__barras {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  padding: 14px;
  border-radius: 14px;
  background: rgb(248 250 252 / 0.05);
}
.maqueta__barras i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--ambar), var(--naranja));
  opacity: 0.9;
}

.maqueta__anillo {
  background:
    radial-gradient(circle at center, #172036 0 25px, transparent 26px),
    conic-gradient(from 0deg, var(--ambar) 0 68%, rgb(248 250 252 / 0.12) 68% 100%);
  border-radius: 50%;
  width: 84px;
  height: 84px;
  align-self: center;
  padding: 0;
}

/* Llamada a la acción */
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 40px 28px;
  border-radius: 28px;
  background:
    radial-gradient(30rem 16rem at 90% 0%, rgb(255 255 255 / 0.28), transparent 60%),
    linear-gradient(120deg, var(--ambar), var(--naranja));
  box-shadow: 0 30px 60px -30px rgb(234 88 12 / 0.7);
  --foco: var(--noche);
}

@media (min-width: 960px) {
  .cta { padding: 56px 64px; }
}

.cta h2 { color: var(--noche); margin-bottom: 8px; }
.cta p { color: #1C1917; font-size: 1.125rem; font-weight: 500; margin: 0; max-width: 48ch; }

/* Contacto */
.contacto {
  display: grid;
  gap: 20px;
}

@media (min-width: 960px) {
  .contacto { grid-template-columns: repeat(3, 1fr); }
}

.via {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.via:hover {
  transform: translateY(-4px);
  border-color: #FDBA74;
  box-shadow: var(--sombra-alta);
  color: var(--tinta);
}

.via__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--noche);
  color: var(--acento-claro);
}
.via__icono svg { width: 22px; height: 22px; }

.via__tipo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.via__valor {
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  font-style: normal;
  overflow-wrap: anywhere;
}
a.via .via__valor { color: var(--acento); }
a.via:hover .via__valor { color: var(--acento-hover); }

.nota {
  margin: 28px 0 0;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

/* Pie */
.pie {
  background: var(--noche);
  color: #CBD5E1;
  padding-block: 56px 32px;
  font-size: 0.9375rem;
}

.pie a { color: var(--acento-claro); }
.pie a:hover { color: #FED7AA; }

.pie__fila {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .pie__fila { grid-template-columns: 1fr auto; align-items: end; }
}

.pie__logo { height: 40px; width: auto; margin-bottom: 20px; }

.pie address { font-style: normal; }
.pie address p { margin: 0 0 4px; }
.pie__legal { color: #F8FAFC; font-weight: 700; }

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__base {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgb(248 250 252 / 0.1);
  color: #94A3B8;
  font-size: 0.875rem;
}
.pie__base p { margin: 0; }

/* Aviso de privacidad */
.documento { padding-block: 56px 96px; }
.documento article { max-width: 72ch; }
.documento h1 {
  font-size: clamp(2.2rem, 3vw + 1rem, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.documento h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2em;
}
.documento ul { padding-left: 1.25em; }
.documento li { margin-bottom: 0.4em; }
.documento__fecha { color: var(--texto-suave); }

.volver {
  display: inline-flex;
  margin-bottom: 24px;
  font-weight: 600;
}

/* Movimiento: solo si la persona no pidió reducirlo */
@media (prefers-reduced-motion: no-preference) {
  .escena__cubo { animation: flotar 7s ease-in-out infinite; }
  .chip { animation: flotar 8s ease-in-out infinite; }
  .chip--2 { animation-delay: -2s; }
  .chip--3 { animation-delay: -4s; }
  .chip--4 { animation-delay: -6s; }

  @supports (animation-timeline: view()) {
    .revelar {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes aparecer {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}