/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 01 · HERO
========================================================= */

.adm-hero {
  position: relative;
  overflow: hidden;

  min-height: 94vh;

  display: flex;
  align-items: center;

  padding: 145px 24px 85px;

  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(20,139,80,.11),
      transparent 30%
    ),
    #f3f5f2;
}

.adm-hero__inner {
  width: min(1240px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, .9fr)
    minmax(520px, 1.1fr);

  gap: 75px;

  align-items: center;
}


/* =========================================================
   COPY
========================================================= */

.adm-hero__copy {
  position: relative;
  z-index: 5;
}

.adm-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 24px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #737d77;
}

.adm-hero__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-hero__title {
  margin: 0;

  font-size: clamp(50px, 5.9vw, 86px);
  line-height: .97;
  letter-spacing: -.055em;
  font-weight: 650;

  color: #151b18;
}

.adm-hero__title span {
  display: block;

  color: #148b50;
}

.adm-hero__lead {
  max-width: 650px;

  margin: 30px 0 0;

  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;

  color: #47524c;
}

.adm-hero__text {
  margin: 16px 0 0;

  font-size: 14px;
  line-height: 1.7;

  color: #7a847e;
}


/* =========================================================
   ACCIONES
========================================================= */

.adm-hero__actions {
  margin-top: 35px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 22px;
}

.adm-hero__button {
  min-height: 54px;

  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  gap: 18px;

  border-radius: 999px;

  background: #151b18;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

  color: #fff;

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.adm-hero__button span {
  font-size: 19px;

  transition: transform .3s ease;
}

.adm-hero__button:hover {
  transform: translateY(-3px);

  background: #148b50;

  box-shadow:
    0 18px 40px rgba(20,139,80,.15);
}

.adm-hero__button:hover span {
  transform: translateX(5px);
}

.adm-hero__micro {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #909993;
}


/* =========================================================
   VISUAL
========================================================= */

.adm-hero__visual {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   PANEL
========================================================= */

.adm-panel {
  position: relative;
  z-index: 3;

  width: min(660px, 100%);

  overflow: hidden;

  border-radius: 28px;

  background: #151b18;

  border:
    1px solid rgba(255,255,255,.06);

  box-shadow:
    0 40px 90px rgba(18,28,23,.18);

  transform: rotate(1.5deg);

  transition: transform .45s ease;
}

.adm-hero__visual:hover .adm-panel {
  transform:
    rotate(0deg)
    translateY(-5px);
}


/* =========================================================
   TOP
========================================================= */

.adm-panel__top {
  height: 72px;

  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}

.adm-panel__brand {
  display: block;

  font-size: 13px;
  font-weight: 700;

  color: #fff;
}

.adm-panel__top small {
  display: block;

  margin-top: 3px;

  font-size: 9px;
  letter-spacing: .11em;

  color: #758079;
}

.adm-panel__status {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;

  color: #7f8b84;
}

.adm-panel__status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #36b66d;

  box-shadow:
    0 0 0 5px rgba(54,182,109,.10);

  animation:
    admStatusPulse 2s ease-in-out infinite;
}

@keyframes admStatusPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

}


/* =========================================================
   CUERPO
========================================================= */

.adm-panel__body {
  display: grid;

  grid-template-columns:
    180px 1fr;

  min-height: 450px;
}


/* sidebar */

.adm-panel__sidebar {
  padding: 28px 16px;

  border-right:
    1px solid rgba(255,255,255,.06);

  background: #121814;
}

.adm-panel__sidebar-label {
  display: block;

  padding: 0 10px 14px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #5f6a64;
}

.adm-panel__nav {
  min-height: 45px;

  padding: 0 11px;

  display: grid;

  grid-template-columns:
    16px 1fr auto;

  gap: 7px;

  align-items: center;

  border-radius: 12px;

  margin-bottom: 5px;

  font-size: 10px;

  color: #7e8a83;

  transition:
    background .25s ease,
    color .25s ease;
}

.adm-panel__nav > span {
  font-size: 7px;

  color: #4e5953;
}

.adm-panel__nav strong {
  font-size: 9px;
  font-weight: 600;

  color: #5f6b64;
}

.adm-panel__nav:hover,
.adm-panel__nav--active {
  background: rgba(54,182,109,.08);

  color: #fff;
}

.adm-panel__nav--active > span {
  color: #36b66d;
}

.adm-panel__nav--active strong {
  color: #36b66d;
}


/* =========================================================
   EDITOR
========================================================= */

.adm-panel__content {
  padding: 28px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(54,182,109,.08),
      transparent 30%
    );
}

.adm-editor {
  height: 100%;

  padding: 25px;

  display: flex;
  flex-direction: column;

  border-radius: 20px;

  background: #1b231f;

  border:
    1px solid rgba(255,255,255,.06);
}

.adm-editor__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;
}

.adm-editor__head span {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;

  color: #66726b;
}

.adm-editor__head strong {
  font-size: 15px;
  font-weight: 600;

  color: #fff;
}

.adm-editor__draft {
  padding: 7px 9px;

  border-radius: 999px;

  background: rgba(242,140,40,.09);

  border:
    1px solid rgba(242,140,40,.15);

  color: #f28c28 !important;
}


/* campos */

.adm-editor__field {
  margin-top: 28px;
}

.adm-editor__field label {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  font-weight: 700;

  color: #7d8882;
}

.adm-editor__input {
  min-height: 45px;

  padding: 0 14px;

  display: flex;
  align-items: center;

  border-radius: 11px;

  background: rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);

  font-size: 11px;

  color: #d9dfdb;
}


/* efecto escritura */

.adm-editor__typing {
  position: relative;

  display: inline-block;

  overflow: hidden;

  white-space: nowrap;

  width: 0;

  animation:
    admTyping 4.8s steps(25,end) infinite;
}

.adm-editor__typing::after {
  content: "";

  display: inline-block;

  width: 1px;
  height: 13px;

  margin-left: 3px;

  vertical-align: middle;

  background: #36b66d;

  animation:
    admCursor .7s steps(1) infinite;
}

@keyframes admTyping {

  0%,
  15% {
    width: 0;
  }

  50%,
  88% {
    width: 190px;
  }

  100% {
    width: 0;
  }

}

@keyframes admCursor {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }

}


/* textarea */

.adm-editor__textarea {
  min-height: 110px;

  padding: 18px 14px;

  border-radius: 11px;

  background: rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);
}

.adm-editor__textarea span {
  display: block;

  width: 90%;
  height: 6px;

  margin-bottom: 10px;

  border-radius: 999px;

  background: rgba(255,255,255,.08);
}

.adm-editor__textarea span:nth-child(2) {
  width: 78%;
}

.adm-editor__textarea span.short {
  width: 46%;
}


/* pie editor */

.adm-editor__bottom {
  margin-top: auto;

  padding-top: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.adm-editor__saved {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #6d7a72;
}

.adm-editor__saved span {
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(54,182,109,.11);

  color: #36b66d;
}

.adm-editor__publish {
  padding: 10px 15px;

  border-radius: 999px;

  background: #148b50;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #fff;

  box-shadow:
    0 10px 25px rgba(20,139,80,.16);
}


/* =========================================================
   ELEMENTOS FLOTANTES
========================================================= */

.adm-floating {
  position: absolute;
  z-index: 5;

  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 20px 50px rgba(18,28,23,.13);
}

.adm-floating--change {
  left: -10px;
  bottom: 75px;

  padding: 15px 18px;

  display: flex;
  align-items: center;

  gap: 11px;

  animation:
    admFloatA 4.8s ease-in-out infinite;
}

.adm-floating__icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #148b50;

  font-size: 12px;

  color: #fff;
}

.adm-floating small {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;

  color: #9aa39e;
}

.adm-floating strong {
  display: block;

  font-size: 11px;

  color: #242c28;
}


.adm-floating--simple {
  right: -10px;
  top: 80px;

  padding: 13px 15px;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 8px;
  letter-spacing: .11em;

  color: #939c97;

  animation:
    admFloatB 5.5s ease-in-out infinite;
}

.adm-floating--simple strong {
  padding: 7px 9px;

  border-radius: 999px;

  background: #f28c28;

  font-size: 8px;

  color: #fff;
}


/* =========================================================
   FLOTACIÓN
========================================================= */

@keyframes admFloatA {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}

@keyframes admFloatB {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

  .adm-hero__inner {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .adm-hero__copy {
    max-width: 850px;
  }

  .adm-hero__visual {
    min-height: 620px;
  }

}


@media (max-width: 700px) {

  .adm-hero {
    min-height: auto;

    padding:
      125px 20px 65px;
  }

  .adm-hero__title {
    font-size:
      clamp(48px, 13vw, 72px);
  }

  .adm-hero__visual {
    min-height: auto;

    padding-top: 20px;
  }

  .adm-panel {
    transform: none;
  }

  .adm-panel__body {
    grid-template-columns: 1fr;
  }

  .adm-panel__sidebar {
    display: none;
  }

  .adm-panel__content {
    padding: 18px;
  }

  .adm-editor {
    min-height: 440px;

    padding: 20px;
  }

  .adm-floating {
    display: none;
  }

}


@media (max-width: 480px) {

  .adm-hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .adm-editor__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 02 · QUÉ SIGNIFICA ADMINISTRABLE
========================================================= */

.adm-meaning {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background: #151b18;
}

.adm-meaning__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-meaning__head {
  max-width: 900px;

  margin-bottom: 65px;
}

.adm-meaning__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #8e9992;
}

.adm-meaning__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-meaning__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #fff;
}

.adm-meaning__title span {
  display: block;

  color: #36b66d;
}

.adm-meaning__intro {
  max-width: 720px;

  margin: 25px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #9ba7a0;
}


/* =========================================================
   GRID
========================================================= */

.adm-meaning__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   TARJETAS
========================================================= */

.adm-meaning__card {
  position: relative;

  min-height: 540px;

  padding: 35px;

  overflow: hidden;

  border-radius: 28px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.adm-meaning__card:hover {
  transform: translateY(-5px);
}


/* cambio */

.adm-meaning__card--change {
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(54,182,109,.13),
      transparent 35%
    ),
    #1d2722;

  border:
    1px solid rgba(54,182,109,.20);
}

.adm-meaning__card--change:hover {
  border-color:
    rgba(54,182,109,.38);

  box-shadow:
    0 25px 65px rgba(0,0,0,.14);
}


/* estable */

.adm-meaning__card--stable {
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(242,140,40,.08),
      transparent 35%
    ),
    #1b221e;

  border:
    1px solid rgba(255,255,255,.07);
}

.adm-meaning__card--stable:hover {
  border-color:
    rgba(242,140,40,.20);
}


/* =========================================================
   ENCABEZADO DE TARJETA
========================================================= */

.adm-meaning__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.adm-meaning__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #89958e;
}

.adm-meaning__badge {
  padding: 7px 10px;

  border-radius: 999px;

  background:
    rgba(54,182,109,.10);

  border:
    1px solid rgba(54,182,109,.17);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #49c77f;
}

.adm-meaning__badge--dark {
  background:
    rgba(242,140,40,.08);

  border-color:
    rgba(242,140,40,.14);

  color: #f28c28;
}


/* =========================================================
   TEXTOS
========================================================= */

.adm-meaning__card h3 {
  max-width: 500px;

  margin: 70px 0 0;

  font-size: clamp(31px, 3.2vw, 45px);
  line-height: 1.04;
  letter-spacing: -.04em;

  color: #fff;
}

.adm-meaning__card h3 span {
  display: block;

  color: #76827b;
}

.adm-meaning__card--change h3 span {
  color: #36b66d;
}

.adm-meaning__card p {
  max-width: 500px;

  margin: 18px 0 0;

  font-size: 14px;
  line-height: 1.75;

  color: #939f98;
}


/* =========================================================
   LISTA DE CAMBIOS
========================================================= */

.adm-change-list {
  margin-top: 42px;

  display: flex;
  flex-direction: column;

  gap: 9px;
}

.adm-change-item {
  min-height: 66px;

  padding: 11px 13px;

  display: grid;

  grid-template-columns:
    40px 1fr auto;

  align-items: center;

  gap: 12px;

  border-radius: 15px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.05);

  transition:
    background .25s ease,
    transform .25s ease,
    border-color .25s ease;
}

.adm-change-item:hover {
  transform: translateX(4px);

  background:
    rgba(54,182,109,.06);

  border-color:
    rgba(54,182,109,.14);
}

.adm-change-item__icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(54,182,109,.09);

  font-size: 14px;

  color: #36b66d;
}

.adm-change-item strong {
  display: block;

  font-size: 11px;
  font-weight: 600;

  color: #fff;
}

.adm-change-item small {
  display: block;

  margin-top: 3px;

  font-size: 9px;

  color: #68746d;
}

.adm-change-item__status {
  padding: 6px 8px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.045);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #7e8a83;
}


/* =========================================================
   ESTRUCTURA ESTABLE
========================================================= */

.adm-stable {
  margin-top: 48px;
}

.adm-stable__core {
  min-height: 86px;

  padding: 17px;

  display: flex;
  align-items: center;

  gap: 15px;

  border-radius: 18px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);
}

.adm-stable__lock {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(242,140,40,.10);

  border:
    1px solid rgba(242,140,40,.13);

  color: #f28c28;
}

.adm-stable__core small {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;

  color: #66726b;
}

.adm-stable__core strong {
  font-size: 14px;

  color: #fff;
}


/* líneas */

.adm-stable__lines {
  margin-top: 20px;

  display: flex;
  flex-direction: column;

  gap: 17px;
}

.adm-stable__lines > div {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 12px;
}

.adm-stable__lines span,
.adm-stable__lines strong {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.adm-stable__lines span {
  color: #69756e;
}

.adm-stable__lines strong {
  color: #8c9790;
}

.adm-stable__lines i {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.04),
      rgba(242,140,40,.27)
    );
}


/* =========================================================
   MENSAJE INFERIOR
========================================================= */

.adm-meaning__message {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    48px minmax(0, 760px);

  gap: 20px;

  align-items: start;
}

.adm-meaning__message-number {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f28c28;

  font-size: 9px;
  font-weight: 800;

  color: #fff;
}

.adm-meaning__message p {
  margin: 3px 0 0;

  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
  letter-spacing: -.02em;

  color: #808c85;
}

.adm-meaning__message strong {
  color: #fff;
  font-weight: 500;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

  .adm-meaning {
    padding:
      90px 20px;
  }

  .adm-meaning__grid {
    grid-template-columns: 1fr;
  }

  .adm-meaning__card {
    min-height: auto;

    padding: 30px;
  }

  .adm-meaning__card h3 {
    margin-top: 50px;
  }

}


@media (max-width: 520px) {

  .adm-meaning__card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .adm-change-item {
    grid-template-columns:
      40px 1fr;
  }

  .adm-change-item__status {
    display: none;
  }

  .adm-meaning__message {
    grid-template-columns: 1fr;

    gap: 14px;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 03 · MÓDULOS
========================================================= */

.adm-modules {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background: #f4f6f4;
}

.adm-modules__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-modules__head {
  max-width: 900px;
  margin-bottom: 65px;
}

.adm-modules__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #747e78;
}

.adm-modules__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-modules__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #151b18;
}

.adm-modules__title span {
  display: block;
  color: #148b50;
}

.adm-modules__intro {
  max-width: 720px;

  margin: 24px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   LAYOUT
========================================================= */

.adm-modules__layout {
  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(480px, 1.1fr);

  gap: 45px;

  align-items: start;
}


/* =========================================================
   LISTA
========================================================= */

.adm-modules__list {
  display: flex;
  flex-direction: column;

  border-top:
    1px solid #d8ded9;
}

.adm-module {
  display: grid;

  grid-template-columns:
    42px 1fr 30px;

  gap: 17px;

  align-items: start;

  padding: 24px 5px;

  border-bottom:
    1px solid #d8ded9;

  transition:
    padding .3s ease,
    background .3s ease;
}

.adm-module:hover,
.adm-module--active {
  padding-left: 15px;
}

.adm-module__number {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid #cad2cd;

  font-size: 9px;
  font-weight: 800;

  color: #8d9691;

  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease;
}

.adm-module:hover .adm-module__number,
.adm-module--active .adm-module__number {
  background: #148b50;

  border-color: #148b50;

  color: #fff;
}

.adm-module__label {
  display: block;

  margin-bottom: 7px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #9ca59f;
}

.adm-module h3 {
  margin: 0;

  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;

  color: #18201c;
}

.adm-module p {
  max-width: 440px;

  margin: 8px 0 0;

  font-size: 13px;
  line-height: 1.65;

  color: #747e78;
}

.adm-module__arrow {
  margin-top: 7px;

  font-size: 17px;

  color: #a4ada8;

  transition:
    transform .3s ease,
    color .3s ease;
}

.adm-module:hover .adm-module__arrow,
.adm-module--active .adm-module__arrow {
  transform: translateX(5px);

  color: #f28c28;
}


/* =========================================================
   PREVIEW PANEL
========================================================= */

.adm-modules__preview {
  position: sticky;
  top: 110px;

  padding: 28px;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(54,182,109,.12),
      transparent 30%
    ),
    #151b18;

  box-shadow:
    0 30px 75px rgba(18,28,23,.14);
}


/* top */

.adm-modules__preview-top {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-bottom: 25px;
}

.adm-modules__preview-top span {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #68746d;
}

.adm-modules__preview-top strong {
  font-size: 15px;
  color: #fff;
}

.adm-modules__preview-status {
  padding: 7px 10px;

  border-radius: 999px;

  background:
    rgba(54,182,109,.10);

  border:
    1px solid rgba(54,182,109,.18);

  color: #36b66d !important;
}


/* =========================================================
   GRID PREVIEW
========================================================= */

.adm-modules__preview-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.adm-preview-card {
  position: relative;

  min-height: 150px;

  padding: 19px;

  display: flex;
  flex-direction: column;

  border-radius: 18px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);

  transition:
    transform .3s ease,
    border-color .3s ease;
}

.adm-preview-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(54,182,109,.20);
}

.adm-preview-card--large {
  min-height: 190px;

  background:
    linear-gradient(
      145deg,
      #1d2822,
      #223129
    );
}

.adm-preview-card--green {
  background:
    linear-gradient(
      145deg,
      #12874d,
      #19a15d
    );
}

.adm-preview-card--wide {
  grid-column: 1 / -1;

  min-height: 105px;

  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: center;
}

.adm-preview-card__label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;

  color: #6f7b74;
}

.adm-preview-card--green
.adm-preview-card__label {
  color: rgba(255,255,255,.60);
}

.adm-preview-card strong {
  margin-top: auto;

  font-size: 36px;
  line-height: 1;

  color: #fff;
}

.adm-preview-card--wide strong {
  display: block;

  margin-top: 7px;

  font-size: 15px;
}

.adm-preview-card small {
  margin-top: 5px;

  font-size: 9px;

  color: #77837c;
}

.adm-preview-card--green small {
  color: rgba(255,255,255,.62);
}


/* acción */

.adm-preview-card__action {
  width: fit-content;

  margin-top: 17px;
  padding: 7px 10px;

  border-radius: 999px;

  background: #f28c28;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #fff;
}


/* docs */

.adm-preview-docs {
  display: flex;
  gap: 6px;
}

.adm-preview-docs span {
  width: 28px;
  height: 36px;

  border-radius: 5px;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid rgba(255,255,255,.07);
}

.adm-preview-docs span:nth-child(2) {
  background:
    rgba(54,182,109,.10);

  border-color:
    rgba(54,182,109,.18);
}


/* =========================================================
   PIE PREVIEW
========================================================= */

.adm-modules__preview-bottom {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 12px;

  margin-top: 25px;
}

.adm-modules__preview-bottom span,
.adm-modules__preview-bottom strong {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.adm-modules__preview-bottom span {
  color: #69756e;
}

.adm-modules__preview-bottom strong {
  color: #36b66d;
}

.adm-modules__preview-bottom i {
  height: 1px;

  background:
    rgba(255,255,255,.07);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

  .adm-modules__layout {
    grid-template-columns: 1fr;
  }

  .adm-modules__preview {
    position: relative;
    top: auto;
  }

}


@media (max-width: 600px) {

  .adm-modules {
    padding: 85px 20px;
  }

  .adm-module {
    grid-template-columns:
      38px 1fr;
  }

  .adm-module__arrow {
    display: none;
  }

  .adm-modules__preview {
    padding: 20px;
  }

  .adm-modules__preview-grid {
    grid-template-columns: 1fr;
  }

  .adm-preview-card--wide {
    grid-column: auto;

    grid-template-columns: 1fr;

    gap: 20px;
  }

  .adm-modules__preview-bottom {
    grid-template-columns: 1fr;

    gap: 8px;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 04 · ADMINISTRADOR SIMPLE
========================================================= */

.adm-simple {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background: #ffffff;
}

.adm-simple__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-simple__head {
  max-width: 900px;
  margin-bottom: 65px;
}

.adm-simple__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #747e78;
}

.adm-simple__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-simple__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #151b18;
}

.adm-simple__title span {
  display: block;

  color: #148b50;
}

.adm-simple__intro {
  max-width: 720px;

  margin: 24px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   LAYOUT
========================================================= */

.adm-simple__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, .85fr);

  gap: 55px;

  align-items: start;
}


/* =========================================================
   EDITOR
========================================================= */

.adm-simple__editor {
  overflow: hidden;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(54,182,109,.10),
      transparent 32%
    ),
    #151b18;

  box-shadow:
    0 30px 80px rgba(18,28,23,.14);
}

.adm-simple__editor-top {
  min-height: 78px;

  padding: 0 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.adm-simple__editor-top span {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #68746d;
}

.adm-simple__editor-top strong {
  font-size: 15px;
  color: #fff;
}


/* autosave */

.adm-simple__autosave {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 11px;

  border-radius: 999px;

  background:
    rgba(54,182,109,.08);

  border:
    1px solid rgba(54,182,109,.14);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #36b66d;
}

.adm-simple__autosave span {
  width: 7px;
  height: 7px;

  margin: 0;

  border-radius: 50%;

  background: #36b66d;

  box-shadow:
    0 0 0 5px rgba(54,182,109,.08);

  animation:
    admSimplePulse 2s ease-in-out infinite;
}

@keyframes admSimplePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }

}


/* =========================================================
   FORMULARIO
========================================================= */

.adm-simple__form {
  padding: 32px;
}

.adm-simple__field {
  margin-bottom: 26px;
}

.adm-simple__field label {
  display: block;

  margin-bottom: 9px;

  font-size: 9px;
  font-weight: 700;

  color: #89948d;
}

.adm-simple__input {
  min-height: 52px;

  padding: 0 15px;

  display: flex;
  align-items: center;

  border-radius: 12px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.07);

  font-size: 12px;

  color: #dce2de;
}

.adm-simple__textarea {
  min-height: 125px;

  padding: 20px 15px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.07);
}

.adm-simple__textarea span {
  display: block;

  height: 6px;

  margin-bottom: 11px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.08);
}

.adm-simple__textarea span:nth-child(1) {
  width: 92%;
}

.adm-simple__textarea span:nth-child(2) {
  width: 80%;
}

.adm-simple__textarea span:nth-child(3) {
  width: 55%;
}


/* =========================================================
   UPLOAD
========================================================= */

.adm-simple__upload {
  min-height: 105px;

  padding: 17px;

  display: grid;

  grid-template-columns:
    46px 1fr auto;

  align-items: center;

  gap: 14px;

  border-radius: 14px;

  background:
    rgba(255,255,255,.03);

  border:
    1px dashed rgba(255,255,255,.12);

  transition:
    border-color .3s ease,
    background .3s ease;
}

.adm-simple__upload:hover {
  border-color:
    rgba(54,182,109,.35);

  background:
    rgba(54,182,109,.04);
}

.adm-simple__upload-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(54,182,109,.09);

  font-size: 17px;

  color: #36b66d;
}

.adm-simple__upload strong {
  display: block;

  font-size: 11px;
  color: #fff;
}

.adm-simple__upload small {
  display: block;

  margin-top: 4px;

  font-size: 9px;

  color: #718078;
}

.adm-simple__upload-button {
  padding: 8px 11px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.06);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #9aa49e;
}


/* =========================================================
   ACCIONES
========================================================= */

.adm-simple__actions {
  margin-top: 30px;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;
}

.adm-simple__draft {
  padding: 11px 14px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #85908a;
}

.adm-simple__publish {
  padding: 11px 16px;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  border-radius: 999px;

  background: #148b50;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #fff;

  box-shadow:
    0 12px 30px rgba(20,139,80,.18);
}

.adm-simple__publish strong {
  font-size: 14px;

  transition: transform .25s ease;
}

.adm-simple__publish:hover strong {
  transform: translateX(4px);
}


/* =========================================================
   LADO DERECHO
========================================================= */

.adm-simple__side {
  padding-top: 10px;
}

.adm-simple__point {
  display: grid;

  grid-template-columns:
    46px 1fr;

  gap: 18px;

  padding: 28px 0;

  border-bottom:
    1px solid #dfe4e0;
}

.adm-simple__point:first-child {
  padding-top: 0;
}

.adm-simple__point-number {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f3f5f3;

  border:
    1px solid #d8dfda;

  font-size: 9px;
  font-weight: 800;

  color: #7c8780;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.adm-simple__point:hover
.adm-simple__point-number {
  background: #148b50;

  color: #fff;

  transform: scale(1.08);
}

.adm-simple__point-label {
  display: block;

  margin-bottom: 7px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;

  color: #99a29d;
}

.adm-simple__point h3 {
  margin: 0;

  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.08;
  letter-spacing: -.03em;

  color: #17201b;
}

.adm-simple__point p {
  max-width: 440px;

  margin: 10px 0 0;

  font-size: 13px;
  line-height: 1.7;

  color: #727c76;
}


/* =========================================================
   FRASE FINAL
========================================================= */

.adm-simple__statement {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 12px;

  margin-top: 32px;
}

.adm-simple__statement span,
.adm-simple__statement strong {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.adm-simple__statement span {
  color: #9aa39e;
}

.adm-simple__statement strong {
  color: #148b50;
}

.adm-simple__statement i {
  height: 1px;

  background: #dce2de;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

  .adm-simple__layout {
    grid-template-columns: 1fr;
  }

  .adm-simple__side {
    padding-top: 0;
  }

}


@media (max-width: 600px) {

  .adm-simple {
    padding: 85px 20px;
  }

  .adm-simple__editor-top {
    align-items: flex-start;
    flex-direction: column;

    padding: 20px;
  }

  .adm-simple__form {
    padding: 22px;
  }

  .adm-simple__upload {
    grid-template-columns:
      42px 1fr;
  }

  .adm-simple__upload-button {
    grid-column: 1 / -1;

    width: fit-content;
  }

  .adm-simple__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .adm-simple__point {
    grid-template-columns:
      40px 1fr;
  }

  .adm-simple__statement {
    grid-template-columns: 1fr;

    gap: 8px;
  }

}

/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 05 · EQUILIBRIO
========================================================= */

.adm-balance {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background: #eef2ef;
}

.adm-balance__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-balance__head {
  max-width: 900px;
  margin-bottom: 70px;
}

.adm-balance__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #737d77;
}

.adm-balance__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-balance__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #151b18;
}

.adm-balance__title span {
  display: block;

  color: #148b50;
}

.adm-balance__intro {
  max-width: 720px;

  margin: 24px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   LAYOUT
========================================================= */

.adm-balance__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px
    minmax(0, 1fr);

  gap: 22px;

  align-items: stretch;
}


/* =========================================================
   PANELES
========================================================= */

.adm-balance__panel {
  min-height: 500px;

  padding: 34px;

  display: flex;
  flex-direction: column;

  border-radius: 28px;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.adm-balance__panel:hover {
  transform: translateY(-5px);
}


/* editable */

.adm-balance__panel--editable {
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(54,182,109,.11),
      transparent 32%
    ),
    #ffffff;

  border:
    1px solid rgba(20,139,80,.12);
}

.adm-balance__panel--editable:hover {
  border-color:
    rgba(20,139,80,.25);

  box-shadow:
    0 22px 55px rgba(20,139,80,.08);
}


/* protegido */

.adm-balance__panel--protected {
  background:
    radial-gradient(
      circle at 88% 6%,
      rgba(242,140,40,.10),
      transparent 32%
    ),
    #151b18;

  border:
    1px solid rgba(255,255,255,.06);

  box-shadow:
    0 25px 60px rgba(18,28,23,.11);
}


/* =========================================================
   TOP
========================================================= */

.adm-balance__panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
}

.adm-balance__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;

  color: #8d9791;
}

.adm-balance__panel--protected
.adm-balance__tag {
  color: #707b74;
}

.adm-balance__status {
  padding: 7px 10px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.adm-balance__status--green {
  background:
    rgba(20,139,80,.08);

  border:
    1px solid rgba(20,139,80,.13);

  color: #148b50;
}

.adm-balance__status--orange {
  background:
    rgba(242,140,40,.08);

  border:
    1px solid rgba(242,140,40,.13);

  color: #f28c28;
}


/* =========================================================
   TEXTOS
========================================================= */

.adm-balance__panel h3 {
  margin: 65px 0 0;

  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -.04em;

  color: #17201b;
}

.adm-balance__panel h3 span {
  display: block;

  color: #148b50;
}

.adm-balance__panel--protected h3 {
  color: #fff;
}

.adm-balance__panel--protected h3 span {
  color: #f28c28;
}

.adm-balance__panel > p {
  margin: 17px 0 0;

  font-size: 14px;
  line-height: 1.75;

  color: #717b75;
}

.adm-balance__panel--protected > p {
  color: #8e9a93;
}


/* =========================================================
   ITEMS
========================================================= */

.adm-balance__items {
  margin-top: auto;
  padding-top: 40px;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

.adm-balance__item {
  min-height: 67px;

  padding: 12px;

  display: grid;

  grid-template-columns:
    38px 1fr;

  align-items: center;

  gap: 12px;

  border-radius: 15px;

  background:
    rgba(20,30,25,.025);

  border:
    1px solid rgba(20,30,25,.05);

  transition:
    transform .25s ease,
    background .25s ease;
}

.adm-balance__item:hover {
  transform: translateX(4px);
}

.adm-balance__panel--editable
.adm-balance__item:hover {
  background:
    rgba(20,139,80,.04);
}

.adm-balance__panel--protected
.adm-balance__item {
  background:
    rgba(255,255,255,.025);

  border-color:
    rgba(255,255,255,.05);
}

.adm-balance__panel--protected
.adm-balance__item:hover {
  background:
    rgba(242,140,40,.04);
}


/* iconos */

.adm-balance__check,
.adm-balance__lock {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 11px;
}

.adm-balance__check {
  background:
    rgba(20,139,80,.09);

  color: #148b50;
}

.adm-balance__lock {
  background:
    rgba(242,140,40,.08);

  color: #f28c28;
}

.adm-balance__item strong {
  display: block;

  font-size: 11px;

  color: #222b26;
}

.adm-balance__panel--protected
.adm-balance__item strong {
  color: #fff;
}

.adm-balance__item small {
  display: block;

  margin-top: 4px;

  font-size: 9px;

  color: #7f8983;
}


/* =========================================================
   CENTRO
========================================================= */

.adm-balance__center {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}

.adm-balance__dial {
  position: relative;

  width: 130px;
  height: 130px;

  display: grid;
  place-items: center;
}

.adm-balance__dial-ring {
  position: absolute;
  inset: 0;

  border-radius: 50%;

  border:
    1px solid #ccd5cf;

  border-top-color: #148b50;
  border-right-color: #f28c28;

  animation:
    admBalanceRotate 8s linear infinite;
}

@keyframes admBalanceRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}

.adm-balance__dial-core {
  width: 95px;
  height: 95px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 15px 35px rgba(18,28,23,.08);
}

.adm-balance__dial-core span {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;

  color: #9aa39e;
}

.adm-balance__dial-core strong {
  margin-top: 3px;

  font-size: 12px;

  color: #17201b;
}

.adm-balance__dial-dot {
  position: absolute;

  top: 6px;
  left: 50%;

  width: 8px;
  height: 8px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: #148b50;

  box-shadow:
    0 0 0 5px rgba(20,139,80,.08);
}

.adm-balance__center p {
  max-width: 150px;

  margin: 22px 0 0;

  font-size: 11px;
  line-height: 1.6;

  color: #838d87;
}

.adm-balance__center strong {
  display: block;

  color: #17201b;
}


/* =========================================================
   MENSAJE FINAL
========================================================= */

.adm-balance__bottom {
  margin-top: 60px;

  display: grid;

  grid-template-columns:
    42px minmax(0, 780px);

  gap: 20px;

  align-items: start;
}

.adm-balance__bottom-number {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f28c28;

  font-size: 9px;
  font-weight: 800;

  color: #fff;
}

.adm-balance__bottom p {
  margin: 2px 0 0;

  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
  letter-spacing: -.02em;

  color: #737d77;
}

.adm-balance__bottom strong {
  color: #17201b;
  font-weight: 550;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  .adm-balance__layout {
    grid-template-columns: 1fr;
  }

  .adm-balance__center {
    min-height: 230px;
  }

  .adm-balance__center p {
    max-width: 300px;
  }

}


@media (max-width: 600px) {

  .adm-balance {
    padding: 85px 20px;
  }

  .adm-balance__panel {
    min-height: auto;

    padding: 28px;
  }

  .adm-balance__panel h3 {
    margin-top: 50px;
  }

  .adm-balance__items {
    margin-top: 35px;
    padding-top: 0;
  }

  .adm-balance__panel-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .adm-balance__bottom {
    grid-template-columns: 1fr;

    gap: 14px;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 06 · CMS VS DESARROLLO PERSONALIZADO
========================================================= */

.adm-cms {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background: #151b18;
}

.adm-cms__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-cms__head {
  max-width: 930px;
  margin-bottom: 65px;
}

.adm-cms__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #8e9992;
}

.adm-cms__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-cms__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #fff;
}

.adm-cms__title span {
  display: block;

  color: #36b66d;
}

.adm-cms__intro {
  max-width: 780px;

  margin: 25px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #9ba7a0;
}


/* =========================================================
   COMPARACIÓN
========================================================= */

.adm-cms__comparison {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   TARJETAS
========================================================= */

.adm-cms__card {
  position: relative;

  min-height: 610px;

  padding: 35px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 28px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.adm-cms__card:hover {
  transform: translateY(-5px);
}


/* genérico */

.adm-cms__card--generic {
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(242,140,40,.09),
      transparent 34%
    ),
    #1b221e;

  border:
    1px solid rgba(255,255,255,.07);
}

.adm-cms__card--generic:hover {
  border-color:
    rgba(242,140,40,.20);
}


/* personalizado */

.adm-cms__card--custom {
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(54,182,109,.16),
      transparent 34%
    ),
    #1d2822;

  border:
    1px solid rgba(54,182,109,.22);
}

.adm-cms__card--custom:hover {
  border-color:
    rgba(54,182,109,.42);

  box-shadow:
    0 25px 70px rgba(0,0,0,.15);
}


/* =========================================================
   TOP
========================================================= */

.adm-cms__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.adm-cms__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #89958e;
}

.adm-cms__badge {
  padding: 7px 10px;

  border-radius: 999px;

  background:
    rgba(242,140,40,.08);

  border:
    1px solid rgba(242,140,40,.13);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;

  color: #f28c28;
}

.adm-cms__badge--green {
  background:
    rgba(54,182,109,.09);

  border-color:
    rgba(54,182,109,.16);

  color: #36b66d;
}


/* =========================================================
   TEXTOS
========================================================= */

.adm-cms__card h3 {
  max-width: 520px;

  margin: 65px 0 0;

  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.04;
  letter-spacing: -.04em;

  color: #fff;
}

.adm-cms__card h3 span {
  display: block;

  color: #77847c;
}

.adm-cms__card--custom h3 span {
  color: #36b66d;
}

.adm-cms__card > p {
  max-width: 520px;

  margin: 18px 0 0;

  font-size: 14px;
  line-height: 1.75;

  color: #919d96;
}


/* =========================================================
   NOMBRES CMS
========================================================= */

.adm-cms__brands {
  margin-top: 32px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.adm-cms__brands span {
  padding: 9px 13px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);

  font-size: 10px;
  font-weight: 600;

  color: #8e9992;
}


/* =========================================================
   FLUJO CMS
========================================================= */

.adm-cms__flow {
  margin-top: 40px;

  display: flex;
  align-items: center;

  gap: 8px;
}

.adm-cms__flow-item {
  min-width: 0;

  text-align: center;
}

.adm-cms__flow-item span {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;

  color: #606c65;
}

.adm-cms__flow-item strong {
  font-size: 8px;
  letter-spacing: .08em;

  color: #9ba59f;
}

.adm-cms__flow i {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.05),
      rgba(242,140,40,.26)
    );
}


/* =========================================================
   NOTA
========================================================= */

.adm-cms__note {
  margin-top: auto;
  padding-top: 38px;

  display: grid;

  grid-template-columns:
    34px 1fr;

  gap: 12px;

  align-items: start;
}

.adm-cms__note > span {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(242,140,40,.08);

  font-size: 14px;

  color: #f28c28;
}

.adm-cms__note p {
  margin: 2px 0 0;

  font-size: 12px;
  line-height: 1.6;

  color: #747f78;
}

.adm-cms__note strong {
  color: #c0c8c3;
  font-weight: 500;
}


/* =========================================================
   FLUJO PERSONALIZADO
========================================================= */

.adm-cms__custom-flow {
  margin-top: 38px;

  display: grid;

  grid-template-columns:
    auto 1fr auto 1fr auto;

  align-items: center;

  gap: 10px;
}

.adm-cms__custom-node {
  min-width: 92px;

  padding: 12px;

  text-align: center;

  border-radius: 14px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);
}

.adm-cms__custom-node small {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;

  color: #66726b;
}

.adm-cms__custom-node strong {
  font-size: 8px;
  letter-spacing: .09em;

  color: #9da7a1;
}

.adm-cms__custom-node--active {
  background:
    rgba(54,182,109,.08);

  border-color:
    rgba(54,182,109,.18);
}

.adm-cms__custom-node--active strong {
  color: #36b66d;
}

.adm-cms__custom-flow > span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.05),
      rgba(54,182,109,.40)
    );
}


/* =========================================================
   BENEFICIOS
========================================================= */

.adm-cms__benefits {
  margin-top: auto;
  padding-top: 35px;

  display: flex;
  flex-direction: column;

  gap: 9px;
}

.adm-cms__benefits > div {
  min-height: 62px;

  padding: 11px 12px;

  display: grid;

  grid-template-columns:
    36px 1fr;

  align-items: center;

  gap: 11px;

  border-radius: 14px;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.05);
}

.adm-cms__benefits > div > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(54,182,109,.09);

  font-size: 10px;

  color: #36b66d;
}

.adm-cms__benefits strong {
  display: block;

  font-size: 11px;

  color: #fff;
}

.adm-cms__benefits small {
  display: block;

  margin-top: 3px;

  font-size: 9px;

  color: #737f78;
}


/* =========================================================
   FRASE FINAL
========================================================= */

.adm-cms__statement {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    52px minmax(0, 820px);

  gap: 20px;

  align-items: start;
}

.adm-cms__statement-mark {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f28c28;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;

  color: #fff;
}

.adm-cms__statement p {
  margin: 2px 0 0;

  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
  letter-spacing: -.02em;

  color: #7f8b84;
}

.adm-cms__statement strong {
  color: #fff;
  font-weight: 500;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .adm-cms__comparison {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .adm-cms {
    padding: 85px 20px;
  }

  .adm-cms__card {
    min-height: auto;
    padding: 28px;
  }

  .adm-cms__card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .adm-cms__card h3 {
    margin-top: 50px;
  }

  .adm-cms__flow {
    align-items: flex-start;
    flex-direction: column;

    gap: 12px;
  }

  .adm-cms__flow i {
    width: 1px;
    height: 22px;

    margin-left: 18px;
  }

  .adm-cms__custom-flow {
    grid-template-columns: 1fr;
  }

  .adm-cms__custom-flow > span {
    width: 1px;
    height: 20px;

    margin: auto;
  }

  .adm-cms__custom-node {
    width: 100%;
  }

  .adm-cms__statement {
    grid-template-columns: 1fr;

    gap: 14px;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 07 · USUARIOS Y CONTROL
========================================================= */

.adm-control {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background: #f4f6f4;
}

.adm-control__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-control__head {
  max-width: 920px;
  margin-bottom: 65px;
}

.adm-control__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #737d77;
}

.adm-control__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-control__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #151b18;
}

.adm-control__title span {
  display: block;
  color: #148b50;
}

.adm-control__intro {
  max-width: 760px;

  margin: 24px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   LAYOUT
========================================================= */

.adm-control__layout {
  display: grid;

  grid-template-columns:
    minmax(460px, 1.05fr)
    minmax(0, .95fr);

  gap: 18px;

  align-items: stretch;
}


/* =========================================================
   PANEL USUARIOS
========================================================= */

.adm-control__users {
  padding: 30px;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(54,182,109,.11),
      transparent 30%
    ),
    #151b18;

  box-shadow:
    0 30px 75px rgba(18,28,23,.13);
}

.adm-control__users-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-bottom: 25px;
}

.adm-control__users-top span {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #6b7770;
}

.adm-control__users-top strong {
  font-size: 15px;
  color: #fff;
}

.adm-control__secure {
  padding: 7px 10px;

  border-radius: 999px;

  background:
    rgba(54,182,109,.09);

  border:
    1px solid rgba(54,182,109,.16);

  color: #36b66d !important;
}


/* =========================================================
   USUARIO
========================================================= */

.adm-control__user {
  min-height: 74px;

  padding: 12px 14px;

  display: grid;

  grid-template-columns:
    44px 1fr auto;

  gap: 13px;

  align-items: center;

  margin-bottom: 9px;

  border-radius: 16px;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.05);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.adm-control__user:hover {
  transform: translateX(4px);

  background:
    rgba(54,182,109,.05);

  border-color:
    rgba(54,182,109,.14);
}

.adm-control__user--admin {
  background:
    rgba(54,182,109,.06);

  border-color:
    rgba(54,182,109,.13);
}

.adm-control__avatar {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.07);

  font-size: 10px;
  font-weight: 700;

  color: #fff;
}

.adm-control__user--admin
.adm-control__avatar {
  background: #148b50;
}

.adm-control__user-info strong {
  display: block;

  font-size: 11px;

  color: #fff;
}

.adm-control__user-info small {
  display: block;

  margin-top: 4px;

  font-size: 9px;

  color: #77837c;
}

.adm-control__role {
  padding: 7px 9px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.05);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;

  color: #929c96;
}

.adm-control__role--green {
  background:
    rgba(54,182,109,.09);

  color: #36b66d;
}

.adm-control__role--orange {
  background:
    rgba(242,140,40,.09);

  color: #f28c28;
}


/* =========================================================
   MATRIZ PERMISOS
========================================================= */

.adm-control__matrix {
  margin-top: 30px;

  overflow: hidden;

  border-radius: 17px;

  border:
    1px solid rgba(255,255,255,.06);
}

.adm-control__matrix-head,
.adm-control__matrix-row {
  display: grid;

  grid-template-columns:
    1fr 60px 60px 70px;

  align-items: center;
}

.adm-control__matrix-head {
  min-height: 42px;

  padding: 0 14px;

  background:
    rgba(255,255,255,.035);
}

.adm-control__matrix-head span {
  text-align: center;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .10em;

  color: #67736c;
}

.adm-control__matrix-head span:first-child {
  text-align: left;
}

.adm-control__matrix-row {
  min-height: 48px;

  padding: 0 14px;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.adm-control__matrix-row strong {
  font-size: 9px;
  font-weight: 500;

  color: #adb6b0;
}

.adm-control__matrix-row span {
  text-align: center;

  font-size: 10px;

  color: #36b66d;
}

.adm-control__matrix-row span:last-child {
  color: #f28c28;
}


/* =========================================================
   CARDS DERECHA
========================================================= */

.adm-control__side {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.adm-control__card {
  position: relative;

  min-height: 275px;

  padding: 26px;

  display: flex;
  flex-direction: column;

  border-radius: 24px;

  background: #fff;

  border:
    1px solid rgba(20,30,25,.06);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.adm-control__card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 20px 50px rgba(18,28,23,.07);
}

.adm-control__card--green {
  background:
    linear-gradient(
      145deg,
      #12874d,
      #19a15d
    );
}

.adm-control__card--dark {
  background:
    #1a221e;
}

.adm-control__card-number {
  position: absolute;

  top: 24px;
  right: 24px;

  font-size: 9px;
  font-weight: 800;

  color: #a1aaa5;
}

.adm-control__card--green
.adm-control__card-number,
.adm-control__card--dark
.adm-control__card-number {
  color: rgba(255,255,255,.50);
}

.adm-control__card-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-bottom: auto;

  border-radius: 50%;

  background: #f2f5f2;

  font-size: 15px;

  color: #148b50;
}

.adm-control__card--green
.adm-control__card-icon,
.adm-control__card--dark
.adm-control__card-icon {
  background:
    rgba(255,255,255,.10);

  color: #fff;
}

.adm-control__card-label {
  display: block;

  margin-bottom: 9px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;

  color: #929c96;
}

.adm-control__card--green
.adm-control__card-label,
.adm-control__card--dark
.adm-control__card-label {
  color: rgba(255,255,255,.58);
}

.adm-control__card h3 {
  margin: 0;

  font-size: 25px;
  line-height: 1.06;
  letter-spacing: -.03em;

  color: #17201b;
}

.adm-control__card--green h3,
.adm-control__card--dark h3 {
  color: #fff;
}

.adm-control__card p {
  margin: 13px 0 0;

  font-size: 12px;
  line-height: 1.65;

  color: #727c76;
}

.adm-control__card--green p,
.adm-control__card--dark p {
  color:
    rgba(255,255,255,.68);
}


/* =========================================================
   CIERRE
========================================================= */

.adm-control__bottom {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 18px;
}

.adm-control__bottom span,
.adm-control__bottom strong {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.adm-control__bottom span {
  color: #939c97;
}

.adm-control__bottom strong {
  color: #148b50;
}

.adm-control__bottom i {
  height: 1px;

  background: #dce2de;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

  .adm-control__layout {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 650px) {

  .adm-control {
    padding: 85px 20px;
  }

  .adm-control__users {
    padding: 22px;
  }

  .adm-control__side {
    grid-template-columns: 1fr;
  }

  .adm-control__matrix {
    overflow-x: auto;
  }

  .adm-control__matrix-head,
  .adm-control__matrix-row {
    min-width: 440px;
  }

  .adm-control__bottom {
    grid-template-columns: 1fr;

    gap: 8px;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 08 · TECNOLOGÍA A TU ALCANCE
========================================================= */

.adm-access {
  position: relative;
  overflow: hidden;

  padding: 130px 24px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(20,139,80,.09),
      transparent 30%
    ),
    #eef2ef;
}

.adm-access__inner {
  position: relative;
  z-index: 3;

  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   PALABRA DE FONDO
========================================================= */

.adm-access__bg-word {
  position: absolute;

  top: 80px;
  right: -30px;

  font-size: clamp(120px, 19vw, 310px);
  line-height: .8;
  font-weight: 750;
  letter-spacing: -.07em;

  color: rgba(20,30,25,.025);

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   CABECERA
========================================================= */

.adm-access__head {
  max-width: 980px;
}

.adm-access__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 22px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #747e78;
}

.adm-access__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.adm-access__title {
  margin: 0;

  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 1;
  letter-spacing: -.055em;

  color: #151b18;
}

.adm-access__title span {
  display: block;

  color: #148b50;
}


/* intro */

.adm-access__intro {
  max-width: 720px;

  margin-top: 28px;
}

.adm-access__intro p {
  margin: 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}

.adm-access__intro
.adm-access__intro-strong {
  margin-top: 8px;

  font-size: 22px;
  font-weight: 650;

  color: #151b18;
}


/* =========================================================
   GRAN FRASE
========================================================= */

.adm-access__statement {
  margin-top: 70px;

  display: grid;

  grid-template-columns:
    50px minmax(0, 900px);

  gap: 22px;

  align-items: start;
}

.adm-access__statement-number {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f28c28;

  font-size: 9px;
  font-weight: 800;

  color: #fff;
}

.adm-access__statement p {
  margin: 0;

  font-size: clamp(25px, 3.3vw, 43px);
  line-height: 1.15;
  letter-spacing: -.035em;

  color: #77817b;
}

.adm-access__statement strong {
  display: block;

  margin-top: 5px;

  font-weight: 600;

  color: #151b18;
}


/* =========================================================
   NIVELES
========================================================= */

.adm-access__scale {
  margin-top: 75px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;

  align-items: stretch;
}

.adm-access__level {
  position: relative;

  min-height: 520px;

  padding: 30px;

  display: flex;
  flex-direction: column;

  border-radius: 27px;

  background: #fff;

  border:
    1px solid rgba(20,30,25,.07);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.adm-access__level:hover {
  transform: translateY(-7px);

  box-shadow:
    0 25px 60px rgba(18,28,23,.08);
}


/* destacado */

.adm-access__level--featured {
  background:
    linear-gradient(
      150deg,
      #ffffff,
      #f1faf5
    );

  border-color:
    rgba(20,139,80,.25);

  box-shadow:
    0 25px 60px rgba(20,139,80,.08);
}


/* oscuro */

.adm-access__level--dark {
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(242,140,40,.10),
      transparent 35%
    ),
    #151b18;

  border-color:
    rgba(255,255,255,.06);

  box-shadow:
    0 25px 60px rgba(18,28,23,.12);
}


/* recomendado */

.adm-access__recommended {
  position: absolute;

  top: -13px;
  left: 50%;

  transform: translateX(-50%);

  padding: 8px 14px;

  white-space: nowrap;

  border-radius: 999px;

  background: #148b50;

  box-shadow:
    0 10px 25px rgba(20,139,80,.18);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;

  color: #fff;
}


/* =========================================================
   TOP NIVEL
========================================================= */

.adm-access__level-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;
}

.adm-access__level-number {
  font-size: 10px;
  font-weight: 800;

  color: #9ca59f;
}

.adm-access__level-tag {
  padding: 7px 10px;

  border-radius: 999px;

  background: #f3f5f3;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;

  color: #858f89;
}

.adm-access__level--dark
.adm-access__level-tag {
  background:
    rgba(242,140,40,.08);

  color: #f28c28;
}


/* =========================================================
   ICONO ABSTRACTO
========================================================= */

.adm-access__level-icon {
  height: 80px;

  margin: 45px 0 28px;

  display: flex;
  align-items: flex-end;

  gap: 7px;
}

.adm-access__level-icon span {
  width: 18px;
  height: 32px;

  border-radius: 6px;

  background: #dfe6e1;
}

.adm-access__level-icon--green span:first-child {
  height: 38px;

  background: #bce6cd;
}

.adm-access__level-icon--green span:last-child {
  height: 58px;

  background: #148b50;
}

.adm-access__level-icon--orange span:nth-child(1) {
  height: 30px;

  background:
    rgba(255,255,255,.10);
}

.adm-access__level-icon--orange span:nth-child(2) {
  height: 48px;

  background:
    rgba(242,140,40,.35);
}

.adm-access__level-icon--orange span:nth-child(3) {
  height: 70px;

  background: #f28c28;
}


/* =========================================================
   TEXTOS NIVEL
========================================================= */

.adm-access__level-label {
  display: block;

  margin-bottom: 9px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #9aa39e;
}

.adm-access__level h3 {
  margin: 0;

  font-size: clamp(26px, 2.6vw, 35px);
  line-height: 1.05;
  letter-spacing: -.035em;

  color: #17201b;
}

.adm-access__level h3 span {
  display: block;

  color: #148b50;
}

.adm-access__level--dark h3 {
  color: #fff;
}

.adm-access__level--dark h3 span {
  color: #f28c28;
}

.adm-access__level > p {
  margin: 17px 0 0;

  font-size: 13px;
  line-height: 1.7;

  color: #747e78;
}

.adm-access__level--dark > p {
  color: #8d9992;
}


/* =========================================================
   FEATURES
========================================================= */

.adm-access__features {
  margin-top: auto;
  padding-top: 35px;

  display: flex;
  flex-direction: column;

  gap: 13px;
}

.adm-access__features > span {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 10px;
  font-weight: 600;

  color: #657069;
}

.adm-access__features i {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  flex: 0 0 22px;

  border-radius: 50%;

  background:
    rgba(20,139,80,.08);

  font-style: normal;
  font-size: 8px;

  color: #148b50;
}

.adm-access__level--dark
.adm-access__features > span {
  color: #929e97;
}

.adm-access__level--dark
.adm-access__features i {
  background:
    rgba(242,140,40,.08);

  color: #f28c28;
}


/* =========================================================
   ACLARACIÓN
========================================================= */

.adm-access__clarification {
  max-width: 820px;

  margin: 35px auto 0;

  padding: 20px 24px;

  display: grid;

  grid-template-columns:
    40px 1fr;

  gap: 15px;

  align-items: center;

  border-radius: 18px;

  background:
    rgba(255,255,255,.65);

  border:
    1px solid rgba(20,30,25,.06);
}

.adm-access__clarification-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(242,140,40,.09);

  font-size: 17px;

  color: #f28c28;
}

.adm-access__clarification strong {
  display: block;

  margin-bottom: 4px;

  font-size: 12px;

  color: #17201b;
}

.adm-access__clarification p {
  margin: 0;

  font-size: 11px;
  line-height: 1.6;

  color: #747e78;
}


/* =========================================================
   CRECIMIENTO
========================================================= */

.adm-access__growth {
  margin-top: 90px;

  padding: 55px;

  display: grid;

  grid-template-columns:
    minmax(0, .8fr)
    minmax(420px, 1.2fr);

  gap: 60px;

  align-items: center;

  border-radius: 30px;

  background: #fff;

  border:
    1px solid rgba(20,30,25,.06);
}

.adm-access__growth-copy > span {
  display: block;

  margin-bottom: 14px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #9aa39e;
}

.adm-access__growth-copy h3 {
  margin: 0;

  font-size: clamp(30px, 3.5vw, 47px);
  line-height: 1.05;
  letter-spacing: -.04em;

  color: #17201b;
}

.adm-access__growth-copy strong {
  display: block;

  font-weight: 600;

  color: #148b50;
}


/* línea */

.adm-access__growth-line {
  display: grid;

  grid-template-columns:
    auto 1fr auto 1fr auto;

  align-items: center;

  gap: 10px;
}

.adm-access__growth-line > i {
  height: 2px;

  background:
    linear-gradient(
      90deg,
      #d9e0dc,
      #148b50
    );
}

.adm-access__growth-point {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 10px;
}

.adm-access__growth-point span {
  width: 17px;
  height: 17px;

  border-radius: 50%;

  background: #dce3de;

  border: 4px solid #fff;

  box-shadow:
    0 0 0 1px #d2dad5;
}

.adm-access__growth-point--active span {
  background: #148b50;

  box-shadow:
    0 0 0 1px #148b50,
    0 0 0 7px rgba(20,139,80,.07);

  animation:
    admAccessPulse 2s ease-in-out infinite;
}

@keyframes admAccessPulse {

  0%,
  100% {
    box-shadow:
      0 0 0 1px #148b50,
      0 0 0 5px rgba(20,139,80,.06);
  }

  50% {
    box-shadow:
      0 0 0 1px #148b50,
      0 0 0 10px rgba(20,139,80,.10);
  }

}

.adm-access__growth-point small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #8d9791;
}

.adm-access__growth-point--active small {
  color: #148b50;
}


/* =========================================================
   CIERRE
========================================================= */

.adm-access__closing {
  max-width: 950px;

  margin: 110px auto 0;

  text-align: center;
}

.adm-access__closing-label {
  width: fit-content;

  margin: 0 auto 25px;
  padding: 8px 12px;

  border-radius: 999px;

  background:
    rgba(242,140,40,.09);

  border:
    1px solid rgba(242,140,40,.13);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;

  color: #e47e1e;
}

.adm-access__closing h3 {
  margin: 0;

  font-size: clamp(42px, 5.5vw, 76px);
  line-height: .99;
  letter-spacing: -.055em;

  color: #151b18;
}

.adm-access__closing h3 span {
  display: block;

  color: #148b50;
}

.adm-access__closing > p {
  margin: 28px auto 0;

  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.6;

  color: #707a74;
}

.adm-access__closing > p strong {
  color: #151b18;
  font-weight: 600;
}


/* cierre inferior */

.adm-access__closing-bottom {
  max-width: 680px;

  margin: 38px auto 0;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 14px;
}

.adm-access__closing-pill {
  padding: 9px 12px;

  border-radius: 999px;

  background: #151b18;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #fff;
}

.adm-access__closing-bottom i {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #d3dbd6,
      #148b50
    );
}

.adm-access__closing-bottom strong {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #148b50;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

  .adm-access__scale {
    grid-template-columns: 1fr;
  }

  .adm-access__level {
    min-height: 450px;
  }

  .adm-access__growth {
    grid-template-columns: 1fr;

    gap: 50px;
  }

}


@media (max-width: 600px) {

  .adm-access {
    padding: 90px 20px;
  }

  .adm-access__statement {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .adm-access__scale {
    margin-top: 60px;
  }

  .adm-access__level {
    min-height: auto;

    padding: 27px;
  }

  .adm-access__features {
    margin-top: 35px;
  }

  .adm-access__clarification {
    grid-template-columns: 1fr;
  }

  .adm-access__growth {
    margin-top: 70px;

    padding: 30px 24px;
  }

  .adm-access__growth-line {
    grid-template-columns: 1fr;

    justify-items: center;
  }

  .adm-access__growth-line > i {
    width: 2px;
    height: 35px;
  }

  .adm-access__closing {
    margin-top: 80px;
  }

  .adm-access__closing-bottom {
    grid-template-columns: 1fr;

    justify-items: center;

    gap: 12px;
  }

  .adm-access__closing-bottom i {
    width: 70px;
  }

}
/* =========================================================
   04 · PÁGINAS WEB ADMINISTRABLES
   BLOQUE 09 · CIERRE
========================================================= */

.adm-final {
  position: relative;
  overflow: hidden;

  min-height: 850px;

  padding: 135px 24px 70px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(20,139,80,.10),
      transparent 30%
    ),
    #f3f5f2;
}

.adm-final__inner {
  position: relative;
  z-index: 3;

  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   PALABRA GIGANTE
========================================================= */

.adm-final__word {
  position: absolute;

  left: 50%;
  bottom: -4%;

  transform: translateX(-50%);

  white-space: nowrap;

  font-size: clamp(150px, 22vw, 360px);
  line-height: .75;
  font-weight: 750;
  letter-spacing: -.075em;

  color: rgba(20,30,25,.025);

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   EYEBROW
========================================================= */

.adm-final__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 42px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #78827c;
}

.adm-final__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}


/* =========================================================
   TOP
========================================================= */

.adm-final__top {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(260px, .5fr);

  gap: 70px;

  align-items: end;
}

.adm-final__title {
  margin: 0;

  font-size: clamp(58px, 7.6vw, 112px);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 650;

  color: #151b18;
}

.adm-final__title span,
.adm-final__title strong {
  display: block;
}

.adm-final__title span {
  color: #68736d;
}

.adm-final__title strong {
  font-weight: 650;

  color: #148b50;
}


/* =========================================================
   LADO DERECHO
========================================================= */

.adm-final__side {
  padding-bottom: 8px;
}

.adm-final__side-number {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  border-radius: 50%;

  background: #151b18;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;

  color: #fff;
}

.adm-final__side p {
  margin: 0;

  font-size: 14px;
  line-height: 1.75;

  color: #6d7771;
}


/* =========================================================
   MENSAJE
========================================================= */

.adm-final__message {
  display: grid;

  grid-template-columns:
    minmax(80px, 220px)
    minmax(0, 720px);

  gap: 28px;

  align-items: start;

  margin-top: 65px;
}

.adm-final__message > span {
  height: 1px;

  margin-top: 12px;

  background:
    linear-gradient(
      90deg,
      #f28c28,
      #148b50
    );
}

.adm-final__message p {
  margin: 0;

  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
  letter-spacing: -.02em;

  color: #6f7973;
}

.adm-final__message strong {
  color: #151b18;
  font-weight: 600;
}


/* =========================================================
   GRAN CTA
========================================================= */

.adm-final__action {
  margin-top: 65px;
}

.adm-final__button {
  position: relative;

  width: 100%;
  min-height: 160px;

  padding: 30px 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  overflow: hidden;

  border-radius: 30px;

  background: #151b18;

  text-decoration: none;

  box-shadow:
    0 30px 75px rgba(18,28,23,.13);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.adm-final__button::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: 50%;
  right: -220px;

  transform:
    translateY(-50%)
    scale(.15);

  border-radius: 50%;

  background: #148b50;

  opacity: 0;

  transition:
    transform .6s cubic-bezier(.2,.8,.2,1),
    opacity .4s ease;
}

.adm-final__button:hover {
  transform: translateY(-5px);

  box-shadow:
    0 35px 85px rgba(18,28,23,.18);
}

.adm-final__button:hover::before {
  transform:
    translateY(-50%)
    scale(1);

  opacity: 1;
}


/* CTA copy */

.adm-final__button-copy {
  position: relative;
  z-index: 2;
}

.adm-final__button-copy span {
  display: block;

  margin-bottom: 9px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #7e8a83;
}

.adm-final__button-copy strong {
  display: block;

  font-size: clamp(25px, 3.3vw, 48px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 550;

  color: #fff;
}


/* flecha */

.adm-final__button-arrow {
  position: relative;
  z-index: 2;

  flex: 0 0 76px;

  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f28c28;

  font-size: 29px;

  color: #fff;

  animation:
    admFinalArrow 3.7s ease-in-out infinite;

  transition:
    transform .4s ease,
    background .4s ease,
    color .4s ease;
}

@keyframes admFinalArrow {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 4px -4px;
  }

}

.adm-final__button:hover
.adm-final__button-arrow {
  animation: none;

  transform: rotate(45deg);

  background: #fff;

  color: #148b50;
}


/* =========================================================
   CONFIANZA
========================================================= */

.adm-final__trust {
  margin-top: 18px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}

.adm-final__trust-item {
  min-height: 95px;

  padding: 18px;

  display: grid;

  grid-template-columns:
    38px 1fr;

  gap: 12px;

  align-items: center;

  border-radius: 18px;

  background:
    rgba(255,255,255,.68);

  border:
    1px solid rgba(20,30,25,.06);
}

.adm-final__trust-item > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(20,139,80,.08);

  font-size: 8px;
  font-weight: 800;

  color: #148b50;
}

.adm-final__trust-item strong {
  display: block;

  font-size: 11px;

  color: #17201b;
}

.adm-final__trust-item small {
  display: block;

  margin-top: 4px;

  font-size: 9px;

  color: #818b85;
}


/* =========================================================
   PIE
========================================================= */

.adm-final__bottom {
  margin-top: 42px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.adm-final__disciplines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.adm-final__disciplines span,
.adm-final__disciplines strong {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

.adm-final__disciplines span {
  color: #8c958f;
}

.adm-final__disciplines strong {
  color: #148b50;
}

.adm-final__disciplines i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #f28c28;
}

.adm-final__brand {
  white-space: nowrap;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;

  color: #858f89;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

  .adm-final {
    min-height: auto;

    padding:
      100px 20px 60px;
  }

  .adm-final__top {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .adm-final__side {
    max-width: 520px;
  }

  .adm-final__trust {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .adm-final__title {
    font-size:
      clamp(50px, 14vw, 74px);
  }

  .adm-final__message {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .adm-final__message > span {
    width: 70px;
  }

  .adm-final__button {
    min-height: 190px;

    padding: 28px;

    align-items: flex-end;
  }

  .adm-final__button-arrow {
    flex-basis: 56px;

    width: 56px;
    height: 56px;

    font-size: 21px;
  }

  .adm-final__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .adm-final__word {
    bottom: 4%;

    font-size: 38vw;
  }

}