@font-face {
  font-family: 'Glober';
  src: url('../fonts/glober/glober_regular-webfont.woff2') format('woff2'),
       url('../fonts/glober/glober_regular-webfont.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Glober';
  src: url('../fonts/glober/glober_regular_italic-webfont.woff2') format('woff2'),
       url('../fonts/glober/glober_regular_italic-webfont.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Glober';
  src: url('../fonts/glober/glober_bold-webfont.woff2') format('woff2'),
       url('../fonts/glober/glober_bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Glober';
  src: url('../fonts/glober/glober_bold_italic-webfont.woff2') format('woff2'),
       url('../fonts/glober/glober_bold_italic-webfont.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {

  --azul: #1e5e7e;
  --verde: #47af4c;
  --rojo: #e72b2d;
  --naranja: #f1832d;
  --gris: #9fa5af;

  --verde-txt: #2f7a34;
  --rojo-txt: #cc2224;
  --naranja-txt: #a85b10;

  --noche: #0c1e28;
  --noche-2: #123545;
  --tinta: #10222c;
  --tinta-suave: #5a666e;
  --papel: #ffffff;
  --tapiz: #f1f5f7;
  --linea: #dde5e9;
  --linea-noche: rgba(255, 255, 255, 0.16);

  --radio: 4px;
  --fuente: 'Glober', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --bs-body-font-family: var(--fuente);
  --bs-body-color: var(--tinta);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-border-radius: var(--radio);
  --bs-link-color: var(--azul);
  --bs-link-hover-color: var(--noche);
  --bs-primary-rgb: 30, 94, 126;
}

body {
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.022em; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2.15rem, 4.1vw, 3.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.6rem); line-height: 1.1; }
h3 { font-size: 1.375rem; line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.35; }
p { max-width: 66ch; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
::selection { background: var(--azul); color: #fff; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 2px; }

.seccion { padding: 6rem 0; position: relative; }
.seccion--tapiz { background: var(--tapiz); }
.seccion--corta { padding: 4rem 0; }
section[id] { scroll-margin-top: 74px; }

.noche { background: var(--noche); color: #fff; }
.noche h1, .noche h2, .noche h3, .noche h4 { color: #fff; }
.noche p { color: rgba(255, 255, 255, 0.74); }

.entradilla { font-size: clamp(1.0625rem, 1.45vw, 1.25rem); line-height: 1.55; color: var(--tinta-suave); }
.noche .entradilla { color: rgba(255, 255, 255, 0.78); }

.titular { max-width: 20ch; }
.titular--ancho { max-width: 28ch; }

.tejido { display: flex; height: 3px; width: 92px; margin-bottom: 1.75rem; }
.tejido span { flex: 1; }
.tejido span:nth-child(1) { background: var(--azul); }
.tejido span:nth-child(2) { background: var(--verde); }
.tejido span:nth-child(3) { background: var(--naranja); }
.tejido span:nth-child(4) { background: var(--rojo); }

.btn-td {
  display: inline-block;
  font-size: 1rem; font-weight: 700; line-height: 1.2;
  padding: 0.9rem 1.6rem; border-radius: var(--radio);
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-td:hover { text-decoration: none; transform: translateY(-1px); }
.btn-td--verde { background: var(--verde); border-color: var(--verde); color: #06222b; }
.btn-td--verde:hover { background: #3d9b41; border-color: #3d9b41; color: #06222b; }
.btn-td--azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-td--azul:hover { background: var(--noche-2); border-color: var(--noche-2); color: #fff; }
.btn-td--fantasma { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-td--fantasma:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.btn-td--linea { background: transparent; border-color: var(--linea); color: var(--tinta); }
.btn-td--linea:hover { border-color: var(--azul); color: var(--azul); }
.noche .btn-td--linea, .modal .btn-td--linea { border-color: var(--linea-noche); color: rgba(255,255,255,0.8); }
.noche .btn-td--linea:hover, .modal .btn-td--linea:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }

.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 1040;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.cabecera .navbar { padding: 1rem 0; }
.cabecera .navbar-brand { padding: 0; }
.cabecera .logo-claro { display: none; }
.cabecera .logo-oscuro { display: block; }

.cabecera .nav-link { font-size: 0.9375rem; color: rgba(255,255,255,0.78); padding: 0.5rem 0.85rem; }
.cabecera .nav-link:hover, .cabecera .nav-link.activo { color: #fff; }
.cabecera .navbar-toggler { border-color: rgba(255,255,255,0.3); color: #fff; padding: 0.35rem 0.6rem; }
.cabecera .navbar-toggler:focus { box-shadow: none; }

.cabecera.fija {
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 var(--linea);
}
.cabecera.fija .navbar { padding: 0.65rem 0; }
.cabecera.fija .logo-claro { display: block; }
.cabecera.fija .logo-oscuro { display: none; }
.cabecera.fija .nav-link { color: var(--tinta-suave); }
.cabecera.fija .nav-link:hover, .cabecera.fija .nav-link.activo { color: var(--azul); }
.cabecera.fija .navbar-toggler { border-color: var(--linea); color: var(--tinta); }

.hero { position: relative; padding: 9.5rem 0 0; background: var(--noche); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 70% 35%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--verde); }

.hero-rotativo {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.5rem; min-height: 3.2em;
}
.hero-rotativo b { font-weight: 700; color: #fff; }
.typed-cursor { color: var(--verde); font-weight: 400; }

.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.rombo { position: relative; width: 100%; max-width: 470px; margin: 0 auto; aspect-ratio: 1; }
.rombo svg { position: absolute; top: 50%; left: 50%; width: 52%; transform: translate(-50%, -50%); }

.rombo-etiqueta { position: absolute; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.rombo-etiqueta small {
  display: block; font-size: 0.8125rem; font-weight: 400;
  color: rgba(255,255,255,0.55); margin-top: 0.15rem;
}
.rombo-etiqueta--arriba { top: 1%; left: 50%; transform: translateX(-50%); text-align: center; color: var(--verde); }
.rombo-etiqueta--derecha { right: 0; top: 50%; transform: translateY(-50%); text-align: right; color: #ff5f61; }
.rombo-etiqueta--abajo { bottom: 1%; left: 50%; transform: translateX(-50%); text-align: center; color: var(--naranja); }
.rombo-etiqueta--izquierda { left: 0; top: 50%; transform: translateY(-50%); color: #57a9cd; }

.pieza { opacity: 0; animation: pieza-entra 0.75s cubic-bezier(.2,.7,.3,1) forwards; }
.pieza--arriba    { animation-delay: 0.15s; --dx: 0px;   --dy: -34px; }
.pieza--derecha   { animation-delay: 0.28s; --dx: 34px;  --dy: 0px; }
.pieza--abajo     { animation-delay: 0.41s; --dx: 0px;   --dy: 34px; }
.pieza--izquierda { animation-delay: 0.54s; --dx: -34px; --dy: 0px; }
.pieza--centro    { animation-delay: 0.72s; --dx: 0px;   --dy: 0px; }
@keyframes pieza-entra {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.94); }
  to   { opacity: 1; transform: translate(0,0) scale(1); }
}

.rombo-etiqueta { opacity: 0; animation: etiqueta-entra 0.6s ease forwards; }
.rombo-etiqueta--arriba    { animation-delay: 0.85s; }
.rombo-etiqueta--derecha   { animation-delay: 0.95s; }
.rombo-etiqueta--abajo     { animation-delay: 1.05s; }
.rombo-etiqueta--izquierda { animation-delay: 1.15s; }
@keyframes etiqueta-entra { from { opacity: 0; } to { opacity: 1; } }

.cifras { margin-top: 5rem; padding-bottom: 1rem; }
.cifra { border-top: 3px solid var(--c); padding-top: 1.125rem; height: 100%; }
.cifra b {
  display: block; font-weight: 700; color: var(--c);
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1;
  letter-spacing: -0.022em; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums;
}
.cifra > span { display: block; font-size: 0.9375rem; line-height: 1.45; color: rgba(255,255,255,0.62); }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li { position: relative; padding: 0.45rem 0 0.45rem 1.65rem; line-height: 1.5; }
.lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 8px; height: 8px; background: var(--vineta, var(--azul));
  transform: rotate(45deg); border-radius: 1px;
}
.noche .lista li::before { background: var(--vineta, var(--verde)); }
.lista--sep li { border-bottom: 1px solid var(--linea); padding-top: 0.7rem; padding-bottom: 0.7rem; }
.lista--sep li:last-child { border-bottom: 0; }

.brecha { display: grid; grid-template-columns: 1fr auto 0.8fr; gap: 1.5rem; align-items: start; }
.col-brecha { padding-top: 3.25rem; }
.brecha-tit {
  font-size: 1rem; font-weight: 700; color: var(--tinta);
  margin: 0 0 0.9rem; max-width: none;
}
.brecha-tit::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 8px; height: 8px; margin-right: 0.55rem;
  background: var(--azul); transform: rotate(45deg); border-radius: 1px;
}
.brecha-flecha { color: #c8d2d8; font-size: 1.5rem; align-self: center; padding-top: 1.5rem; }
.brecha-pie { grid-column: 1 / -1; margin: 1.5rem 0 0; font-size: 1rem; color: var(--tinta); font-weight: 700; }

.ficha {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.25rem 1.125rem 1rem; box-shadow: 0 12px 28px rgba(16,34,44,0.07);
}
.ficha--plana { background: #f6f8f9; box-shadow: none; }
.ficha--visita { text-align: center; padding: 1.75rem 1.25rem; }
.visita-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--tapiz); color: var(--azul); font-size: 1.375rem; margin-bottom: 0.9rem;
}
.visita-tit { margin: 0; font-size: 1.25rem; font-weight: 700; }
.visita-sub { margin: 0.35rem auto 0; font-size: 0.875rem; color: var(--tinta-suave); max-width: 22ch; }
.ficha-fila { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.ficha-punto { flex: 0 0 auto; width: 8px; height: 8px; background: var(--c, #c8d2d8); transform: rotate(45deg); border-radius: 1px; }
.ficha-etq { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; color: var(--c, var(--tinta-suave)); width: 6.4rem; }
.ficha--plana .ficha-etq { width: auto; color: var(--tinta-suave); }
.ficha-barras { display: flex; gap: 4px; flex: 1; min-width: 0; }
.ficha-barras i {
  display: block; height: 7px; border-radius: 1px; background: var(--c, #c8d2d8);
  opacity: 0.5; width: var(--w); animation: barra-crece 0.85s cubic-bezier(.2,.7,.3,1) both;
}
.ficha--plana .ficha-barras i { background: #c8d2d8; opacity: 1; }
.ficha-fila:nth-child(2) .ficha-barras i { animation-delay: 0.08s; }
.ficha-fila:nth-child(3) .ficha-barras i { animation-delay: 0.16s; }
.ficha-fila:nth-child(4) .ficha-barras i { animation-delay: 0.24s; }
@keyframes barra-crece { from { width: 0; } to { width: var(--w); } }
.ficha-pie {
  margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px dashed var(--linea);
  font-size: 0.75rem; color: var(--tinta-suave); max-width: none;
}

.nota { font-size: 0.8125rem; color: var(--tinta-suave); }

.apunte {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.125rem 1.25rem;
}
.apunte i { flex: 0 0 auto; color: var(--verde-txt); font-size: 1.125rem; margin-top: 0.2rem; }
.apunte p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-suave); }

.mapa { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--linea); }
.mapa-tit { font-size: 1.0625rem; font-weight: 700; margin: 0 0 1.75rem; max-width: 62ch; }
.mapa-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.mapa-rombo {
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: 0.35rem;
  background: var(--c); transform: rotate(45deg); border-radius: 1px;
}
.mapa-item p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-suave); }
.mapa-pie { margin: 2.5rem auto 0; font-size: 1rem; font-weight: 700; color: var(--tinta); text-align: center; max-width: 60ch; }

.tatami-caja { position: relative; }
.tatami { background: var(--noche); padding: 6px; border-radius: var(--radio); }
.tatami-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

.celda {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--papel); border: 0; border-radius: 2px;
  padding: 1.5rem 1.375rem 1.75rem; min-height: 150px; color: var(--tinta);
  transition: background-color 0.2s ease;
}
.celda { cursor: pointer; }
.celda:hover { background: #f7fafb; }
.celda:hover .celda-mas { border-color: var(--color); color: var(--color); }

.celda-mas {
  position: absolute; top: 1rem; right: 1rem;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--linea); color: var(--tinta-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; transition: all 0.2s ease;
}
.celda[aria-selected="true"] .celda-mas {
  background: var(--color); border-color: var(--color); color: #fff;
}

.pista {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.875rem; font-weight: 700; color: var(--azul);
  margin: 0 0 0.9rem; max-width: none;
}
.pista i { font-size: 0.875rem; animation: pista-late 2.4s ease-in-out infinite; }
@keyframes pista-late {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(-3px); }
  90% { transform: translateY(0); }
}
.celda[aria-selected="true"] { background: var(--tinte); }
.celda-nombre { display: block; font-size: 1.125rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--color); }
.celda-pregunta { display: block; font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }
.celda-barra {
  position: absolute; left: 1.375rem; right: 1.375rem; bottom: 0.9rem; height: 2px;
  background: var(--color); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
}
.celda[aria-selected="true"] .celda-barra { transform: scaleX(1); }

.tatami-centro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 86px; height: 86px; border-radius: 50%; background: var(--noche); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.75rem; line-height: 1.15; font-weight: 700; pointer-events: none;
  box-shadow: 0 0 0 6px var(--tapiz);
}

.tatami-detalle { margin-top: 1.5rem; border-left: 3px solid var(--color, var(--azul)); padding-left: 1.25rem; min-height: 168px; }
.tatami-detalle h3 { font-size: 1.125rem; color: var(--color, var(--azul)); margin-bottom: 0.9rem; }
.ejemplos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.ejemplos li { font-size: 0.9375rem; line-height: 1.4; color: var(--tinta-suave); padding: 0.3rem 0; animation: ejemplo-entra 0.4s ease both; }
@keyframes ejemplo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.splide { visibility: visible; }
.slider-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.slider-flechas { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.flecha {
  width: 44px; height: 44px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.flecha:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.flecha:disabled { opacity: 0.3; }
.noche .flecha { border-color: var(--linea-noche); color: #fff; }
.noche .flecha:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }

.rol-slide { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; padding-top: 0.5rem; }
.rol-etiqueta {
  font-size: 0.9375rem; font-weight: 700; color: var(--c, var(--verde));
  margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.55rem;
}
.rol-etiqueta i { font-size: 0.875rem; }
.rol-slide .lista { --vineta: var(--c); }
.rol-slide h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.rol-figura { text-align: center; }
.rol-figura img { border-radius: var(--radio); border: 1px solid var(--linea-noche); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.rol-figura img.movil { max-width: 228px; border-radius: 16px; }
.rol-pie { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin: 0.85rem auto 0; max-width: 36ch; }

.etapas-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.etapas-resumen div { border-top: 3px solid var(--linea); padding-top: 0.75rem; }
.etapas-resumen div:nth-child(1) { border-top-color: var(--azul); }
.etapas-resumen div:nth-child(2) { border-top-color: var(--naranja); }
.etapas-resumen div:nth-child(3) { border-top-color: var(--verde); }
.etapas-resumen b { display: block; font-size: 0.8125rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.etapas-resumen span { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; margin-top: 0.2rem; }

.linea-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.linea-lista li { position: relative; }
.linea-lista li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--linea); }
.linea-lista li:first-child::before { left: 50%; }
.linea-lista li:last-child::before { right: 50%; }
.linea-nodo {
  position: relative; z-index: 1; background: none; border: 0; padding: 0 0.4rem; width: 100%;
  text-align: center; font-size: 0.8125rem; font-weight: 700; color: var(--tinta-suave);
  transition: color 0.2s ease;
}
.linea-nodo span {
  display: block; width: 12px; height: 12px; margin: 0 auto 0.75rem;
  background: var(--tapiz); border: 2px solid var(--linea); border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.linea-nodo:hover { color: var(--tinta); }
.linea-nodo:hover span { border-color: var(--c); }
.linea-nodo.activo { color: var(--c); }
.linea-nodo.activo span { background: var(--c); border-color: var(--c); transform: scale(1.35); }

.etapa {
  height: 100%; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.75rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; --vineta: var(--c);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.etapa:hover { border-color: var(--c); box-shadow: 0 16px 36px rgba(16,34,44,0.09); transform: translateY(-2px); }
.etapa { position: relative; overflow: hidden; }
.etapa > * { position: relative; z-index: 1; }
.etapa-filigrana {
  position: absolute; z-index: 0; right: -2.25rem; bottom: -2rem;
  font-size: 12rem; line-height: 1; color: var(--c); opacity: 0.07;
  pointer-events: none;
}
.etapa-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radio); margin-bottom: 1.25rem;
  background: var(--c); color: #fff; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.etapa h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

.etapa .lista li { font-size: 0.875rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.etapa .lista li::before { top: 0.68em; width: 7px; height: 7px; }
.etapa-lema {
  font-size: 0.9375rem; font-weight: 700; color: var(--c);
  margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--linea);
}

.splide__pagination { padding: 0; margin-top: 2.25rem; gap: 0.4rem; }
.splide__pagination__page {
  width: 28px; height: 3px; border: 0; border-radius: 0; padding: 0;
  background: var(--linea); opacity: 1; margin: 0; box-shadow: none;
  transition: background-color 0.2s ease;
}
.splide__pagination__page:focus-visible { outline-offset: 4px; }
.splide__pagination__page.is-active { background: var(--azul); transform: none; }
.noche .splide__pagination__page { background: var(--linea-noche); }
.noche .splide__pagination__page.is-active { background: var(--verde); }

.marca-suelta { display: block; margin-top: 2.25rem; opacity: 0.9; }

.punto { display: flex; gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--linea); align-items: flex-start; }
.punto:last-child { border-bottom: 0; }
.punto i {
  flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: var(--radio);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.375rem; color: var(--c, var(--azul));
  background: color-mix(in srgb, var(--c, var(--azul)) 12%, transparent);
}
.punto h4 { font-size: 1.125rem; }
.punto h4 { margin-bottom: 0.25rem; }
.punto p { margin: 0; font-size: 0.9375rem; color: var(--tinta-suave); }

.conseguir-cab { margin-bottom: 3rem; }
.conseguir-cab h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 20ch; }

.logro {
  position: relative; height: 100%;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--linea-noche); border-radius: var(--radio);
  background: linear-gradient(150deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.logro::after {
  content: ""; position: absolute; right: -2.75rem; bottom: -2.75rem;
  width: 8.5rem; height: 8.5rem; background: var(--c); opacity: 0.2;
  transform: rotate(45deg); border-radius: 8px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.logro:hover { border-color: var(--c); transform: translateY(-3px); }
.logro:hover::after { opacity: 0.26; transform: rotate(45deg) scale(1.06); }
.logro-num {
  display: block; width: 14px; height: 14px; margin-bottom: 1.25rem;
  background: var(--c); transform: rotate(45deg); border-radius: 2px;
}
.logro p {
  position: relative; z-index: 1; margin: 0;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.3;
  letter-spacing: -0.018em; color: rgba(255,255,255,0.82); max-width: 22ch;
}
.logro p b { color: #fff; font-weight: 700; }

.cierre {
  margin-top: 5rem; padding-top: 4rem; border-top: 1px solid var(--linea-noche); text-align: center;
}
.cierre img { display: block; margin: 0 auto 1.5rem; }
.cierre-marca { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.022em; margin: 0; color: #fff; }
.cierre-marca sup { font-size: 0.4em; top: -0.9em; font-weight: 400; }
.cierre-claim {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); color: rgba(255,255,255,0.8);
  margin: 0.75rem auto 2rem; max-width: 30ch;
}
.cierre-nota { font-size: 0.875rem; color: rgba(255,255,255,0.55); margin: 1.125rem auto 0; max-width: 40ch; }
.btn-td--grande { font-size: 1.0625rem; padding: 1.05rem 2.25rem; }

.modal-content {
  background: var(--noche); color: #fff;
  border: 1px solid var(--linea-noche); border-radius: var(--radio);
}
.modal-header {
  border-bottom: 1px solid var(--linea-noche);
  padding: 1.25rem 1.5rem; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.022em; margin: 0; }
.modal-body { padding: 1.375rem 1.5rem 1.5rem; }
.modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.6; margin: 0 0 0 auto; flex: 0 0 auto; padding: 0.5rem;
}
.modal .btn-close:hover { opacity: 1; }
.modal .btn-close:focus { box-shadow: none; }
.modal-backdrop.show { opacity: 0.7; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opcional { opacity: 0.65; }

.pie-form { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.verificacion { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.verificacion .form-label {
  margin: 0; white-space: nowrap; font-size: 0.9375rem; color: rgba(255,255,255,0.85);
}
.verificacion .form-label b { font-variant-numeric: tabular-nums; }
.verificacion .form-control { width: 4.25rem; padding: 0.5rem 0.6rem; text-align: center; }
.pie-form .form-check { flex: 1 1 16rem; margin: 0; }
.pie-form .form-check-label { font-size: 0.8125rem; line-height: 1.4; }
#errorPie { display: none; margin-top: 0.6rem; }
#errorPie.visible { display: block; }
.form-td .form-label { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin-bottom: 0.35rem; }
.form-td .form-control, .form-td .form-select {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radio); color: #fff; font-family: var(--fuente); font-size: 1rem; padding: 0.75rem 0.9rem;
}
.form-td .form-control::placeholder { color: rgba(255,255,255,0.4); }
.form-td .form-control:focus, .form-td .form-select:focus {
  background: rgba(255,255,255,0.12); border-color: var(--verde); box-shadow: none; color: #fff;
}
.form-td .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 14px 11px;
  padding-right: 2.5rem;
}
.form-td .form-select option { color: var(--tinta); background: #fff; }
.form-td .form-check-input { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); }
.form-td .form-check-input:checked { background-color: var(--verde); border-color: var(--verde); }
.form-td .form-check-input:focus { box-shadow: none; }
.form-td .form-check-label { font-size: 0.8125rem; color: rgba(255,255,255,0.75); }
.form-td a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.form-td a:hover { color: var(--verde); }
.form-td .invalid-feedback { color: #ffc9c4; font-size: 0.8125rem; }
.form-td .form-control.is-invalid, .form-td .was-validated .form-control:invalid { border-color: #ffc9c4; background-image: none; }
.form-td .was-validated .form-select:invalid { border-color: #ffc9c4; }
.form-td .was-validated .form-check-input:invalid { border-color: #ffc9c4; }

.aviso {
  display: none; border: 1px solid rgba(255,255,255,0.3); border-left: 3px solid var(--verde);
  border-radius: var(--radio); padding: 1rem 1.125rem; font-size: 0.9375rem; margin-top: 1rem; color: #fff;
}
.aviso.visible { display: block; }
.aviso--error { border-left-color: #ff5f61; }

.pie { padding: 2.25rem 0; border-top: 1px solid var(--linea); font-size: 0.875rem; color: var(--tinta-suave); }
.pie a { color: var(--tinta-suave); }
.pie a:hover { color: var(--azul); }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }

html:not(.js) [data-aos] { opacity: 1 !important; transform: none !important; }

@media (max-width: 991.98px) {
  .seccion { padding: 4rem 0; }
  .hero { padding-top: 7rem; }
  .cabecera .navbar-collapse {
    background: var(--noche); border: 1px solid var(--linea-noche);
    border-radius: var(--radio); padding: 0.75rem 1rem; margin-top: 0.75rem;
  }
  .cabecera.fija .navbar-collapse { background: #fff; border-color: var(--linea); }
  .cabecera .nav-link { padding-left: 0; padding-right: 0; }
  .rol-slide { grid-template-columns: 1fr; gap: 2rem; }
  .col-brecha { padding-top: 0; }
  .marca-suelta { width: 84px; height: 84px; }
  .brecha { grid-template-columns: 1fr; gap: 1rem; }
  .brecha-flecha { transform: rotate(90deg); text-align: center; }
  .linea-lista { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; }
  .linea-lista li:nth-child(3)::before { right: 50%; }
  .linea-lista li:nth-child(4)::before { left: 50%; }
  .rol-figura { order: -1; }
  .slider-cab { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
  .rombo { max-width: 320px; }
  .rombo-etiqueta { font-size: 0.8125rem; }
  .rombo-etiqueta small { display: none; }
  .celda { min-height: 128px; padding: 1.125rem 1rem 1.5rem; }
  .celda-barra { left: 1rem; right: 1rem; }
  .tatami-centro { width: 62px; height: 62px; font-size: 0.6875rem; }
  .ejemplos { grid-template-columns: 1fr; }
  .cifras { margin-top: 3rem; }
  .logro { padding: 1.75rem 1.5rem 1.5rem; }
  .etapa-filigrana { font-size: 9rem; right: -1.25rem; }
  .pie-form { gap: 0.9rem; }
  .etapas-resumen { grid-template-columns: 1fr; }
  .linea-lista { grid-template-columns: repeat(2, 1fr); }
  .linea-lista li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .pieza, .rombo-etiqueta, [data-aos], .ficha-barras i { opacity: 1 !important; transform: none !important; }
}