/* ============================================================
   NEOTHEK — CORREO PROFESIONAL GESTIONADO
   CSS BASE

   Incluye:
   01. Open Sans
   02. Design Tokens
   03. Container
   04. Hero
   05. Trust Bar
   06. Infraestructura exclusiva
   07. Responsive
   08. Accessibility
============================================================ */


/* ============================================================
   01. OPEN SANS
============================================================ */

/* Light — 300 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/* Regular — 400 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* SemiBold — 600 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Bold — 700 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ExtraBold — 800 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* SemiBold Italic — 600 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-SemiBoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

/* Bold Italic — 700 */
@font-face {
  font-family: "Open Sans";
  src: url("/libs17/fonts/open_sans/OpenSans/OpenSans-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


/* ============================================================
   OPEN SANS CONDENSED
============================================================ */

@font-face {
  font-family: "Open Sans Condensed";
  src: url("/libs17/fonts/open_sans/OpenSans_Condensed/OpenSans_Condensed-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans Condensed";
  src: url("/libs17/fonts/open_sans/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans Condensed";
  src: url("/libs17/fonts/open_sans/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}


/* ============================================================
    DESIGN TOKENS
============================================================ */

:root {
  --mail-bg: #05070b;
  --mail-bg-soft: #090e16;
  --mail-card: #0d1420;
  --mail-card-soft: #111b2a;

  --mail-light: #f7f9fc;
  --mail-light-soft: #f2f6fa;

  --mail-border: #1d2a3a;
  --mail-border-light: rgba(255, 255, 255, .09);

  --mail-text: #f5f7fa;
  --mail-text-soft: #a8b4c5;
  --mail-text-muted: #7f8da1;

  --mail-dark-text: #101a29;
  --mail-dark-soft: #35465a;
  --mail-dark-muted: #617086;

  --mail-blue: #2388ff;
  --mail-blue-hover: #4ca0ff;
  --mail-cyan: #24d3ee;

  --mail-orange: #ff7a1a;
  --mail-orange-hover: #ff923d;

  --mail-green: #35d07f;
  --mail-red: #ff5263;
  --mail-yellow: #f5b942;

  --mail-radius: 18px;
  --mail-radius-sm: 10px;

  --mail-container: 1200px;

  --mail-font:
    "Open Sans",
    Arial,
    Helvetica,
    sans-serif;
}


/* ============================================================
   00. CONTAINER / BASE
============================================================ */

.mail-container {
  width: min(calc(100% - 48px), var(--mail-container));
  margin-inline: auto;
}


/* ============================================================
  01. HERO + TRUST BAR
   CORREO PROFESIONAL GESTIONADO
============================================================ */

/* ============================================================
   HERO + TRUST BAR
   CORREO PROFESIONAL GESTIONADO
============================================================ */

.mail-hero,
.mail-hero *,
.mail-trust,
.mail-trust * {
  box-sizing: border-box;
  font-family: "Open Sans", Arial, sans-serif;
}


/* ============================================================
   CONTAINER
============================================================ */

.mail-container {
  position: relative;

  width: min(1180px, calc(100% - 48px));

  margin: 0 auto;
}


/* ============================================================
   HERO
============================================================ */

.mail-hero {
  position: relative;

  overflow: hidden;

  padding: 96px 0 88px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #071b2c 0%,
      #092337 52%,
      #0a2a40 100%
    );
}


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

.mail-hero-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .13;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 28%,
      #000 76%,
      transparent
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 28%,
      #000 76%,
      transparent
    );
}


/* ============================================================
   AMBIENT GLOWS
============================================================ */

.mail-hero-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.mail-hero-glow--top {
  top: -340px;
  right: -160px;

  width: 650px;
  height: 650px;

  background:
    radial-gradient(
      circle,
      rgba(32, 145, 255, .17),
      rgba(32, 145, 255, .035) 45%,
      transparent 70%
    );

  animation:
    mailHeroGlowTop 14s ease-in-out infinite;
}


.mail-hero-glow--bottom {
  bottom: -300px;
  left: 22%;

  width: 480px;
  height: 480px;

  background:
    radial-gradient(
      circle,
      rgba(27, 198, 211, .10),
      transparent 68%
    );

  animation:
    mailHeroGlowBottom 17s ease-in-out infinite;
}


/* ============================================================
   DOT PATTERN
============================================================ */

.mail-hero-dots {
  position: absolute;

  top: 18%;
  right: 5%;

  width: 135px;
  height: 135px;

  opacity: .13;

  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      rgba(98, 190, 245, .9) 1px,
      transparent 1.4px
    );

  background-size: 15px 15px;

  animation:
    mailDotsMove 12s ease-in-out infinite;
}


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

.mail-hero-layout {
  position: relative;
  z-index: 3;

  display: grid;

  /*
   * Más espacio para el mensaje.
   * El gráfico deja de competir con el H1.
   */

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(330px, .72fr);

  align-items: center;

  gap: 86px;
  margin-top: 6rem;
}


/* ============================================================
   HERO CONTENT
============================================================ */

.mail-hero-content {
  min-width: 0;

  animation:
    mailHeroContentIn .7s ease-out both;
}


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

.mail-hero-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  padding: 8px 13px;

  border: 1px solid
    rgba(90, 180, 237, .20);

  border-radius: 20px;

  background:
    rgba(35, 136, 255, .065);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: .085em;

  color: #8dcef4;
}


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

.mail-hero-eyebrow-status {
  position: relative;

  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #3bc0d9;

  box-shadow:
    0 0 0 4px
    rgba(59, 192, 217, .09);
}


.mail-hero-eyebrow-status::after {
  content: "";

  position: absolute;

  inset: -5px;

  border: 1px solid
    rgba(59, 192, 217, .38);

  border-radius: 50%;

  animation:
    mailHeroStatusPulse 2.8s ease-out infinite;
}


/* ============================================================
   H1
============================================================ */

.mail-hero-title {
  max-width: 700px;

  margin: 0;

  font-size:
    clamp(
      48px,
      5vw,
      65px
    );

  font-weight: 700;
  line-height: 1.06;

  letter-spacing: -.045em;

  color: #ffffff;
}


.mail-hero-title > span {
  display: block;

  color: #3da8ef;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.mail-hero-description {
  max-width: 680px;

  margin: 24px 0 0;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.72;

  color: #b9ccd8;
}


/* ============================================================
   ACTIONS
============================================================ */

.mail-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


/* ============================================================
   BUTTON BASE
============================================================ */

.mail-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 54px;

  padding: 0 21px;

  border-radius: 9px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: none;

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


.mail-hero-btn i {
  font-size: 11px;

  transition:
    transform .2s ease;
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.mail-hero-btn--primary {
  border: 1px solid #f27a24;

  background:
    linear-gradient(
      135deg,
      #ff8c36,
      #f27622
    );

  box-shadow:
    0 10px 27px
    rgba(239, 115, 30, .20);

  color: #ffffff;
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.mail-hero-btn--secondary {
  border: 1px solid
    rgba(151, 196, 224, .25);

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

  color: #d8e7f0;

  backdrop-filter: blur(7px);
}


/* ============================================================
   BUTTON HOVER
============================================================ */

@media (hover: hover) {

  .mail-hero-btn--primary:hover {
    transform: translateY(-2px);

    background:
      linear-gradient(
        135deg,
        #ff9746,
        #ee701b
      );

    box-shadow:
      0 14px 31px
      rgba(239, 115, 30, .27);

    color: #ffffff;
  }


  .mail-hero-btn--primary:hover i {
    transform: translateX(3px);
  }


  .mail-hero-btn--secondary:hover {
    transform: translateY(-2px);

    border-color:
      rgba(111, 189, 237, .42);

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

    color: #ffffff;
  }

}


/* ============================================================
   BENEFITS
============================================================ */

.mail-hero-benefits {
  display: flex;
  flex-wrap: wrap;

  gap: 10px 21px;

  margin: 25px 0 0;
  padding: 0;

  list-style: none;
}


.mail-hero-benefits li {
  display: flex;
  align-items: center;

  gap: 8px;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;

  color: #b9cbd7;
}


.mail-hero-benefits i {
  color: #43bd91;

  font-size: 14px;
}


/* ============================================================
   CAPABILITIES
============================================================ */

.mail-hero-capabilities {
  margin-top: 29px;

  padding-top: 21px;

  border-top: 1px solid
    rgba(160, 200, 224, .12);
}


.mail-hero-capabilities-title {
  display: block;

  margin-bottom: 11px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: .04em;

  color: #7e9fb2;
}


.mail-hero-capabilities-list {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.mail-hero-capabilities-list > span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 8px 11px;

  border: 1px solid
    rgba(136, 188, 219, .13);

  border-radius: 7px;

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

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

  color: #a9c0cf;
}


.mail-hero-capabilities-list i {
  color: #4b9fd4;

  font-size: 11px;
}


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

.mail-hero-visual {
  position: relative;

  /*
   * Limitamos deliberadamente el gráfico.
   */

  width: 100%;
  max-width: 390px;

  justify-self: end;

  min-width: 0;

  padding: 16px 0 19px;

  animation:
    mailHeroVisualIn .8s .08s ease-out both;
}


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

.mail-visual-aura {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 370px;
  height: 370px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .14),
      rgba(35, 136, 255, .025) 48%,
      transparent 70%
    );

  animation:
    mailVisualAura 8s ease-in-out infinite;
}


/* ============================================================
   CONSOLE
============================================================ */

.mail-console {
  position: relative;
  z-index: 2;

  overflow: hidden;

  width: 100%;

  border: 1px solid
    rgba(111, 175, 214, .20);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 54, 78, .96),
      rgba(9, 36, 55, .98)
    );

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, .26),
    inset 0 1px 0
    rgba(255, 255, 255, .035);

  animation:
    mailConsoleFloat 8s ease-in-out infinite;
}


/* ============================================================
   CONSOLE HEADER
============================================================ */

.mail-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 15px 16px;

  border-bottom: 1px solid
    rgba(143, 192, 221, .10);
}


/* ============================================================
   BRAND
============================================================ */

.mail-console-brand {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.mail-console-brand-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid
    rgba(67, 159, 219, .20);

  border-radius: 8px;

  background:
    rgba(35, 136, 255, .08);

  color: #55abe0;

  font-size: 14px;
}


.mail-console-brand-copy {
  min-width: 0;
}


.mail-console-brand-copy span {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .075em;

  color: #7199b0;
}


.mail-console-brand-copy strong {
  display: block;

  overflow: hidden;

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

  color: #d2e3ec;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================
   CONSOLE STATUS
============================================================ */

.mail-console-status {
  display: flex;
  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  padding: 6px 8px;

  border: 1px solid
    rgba(54, 182, 132, .15);

  border-radius: 14px;

  background:
    rgba(54, 182, 132, .055);

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

  color: #6bc9a5;
}


.mail-console-status > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #42bd91;

  box-shadow:
    0 0 0 3px
    rgba(66, 189, 145, .08);

  animation:
    mailGreenPulse 2.6s ease-in-out infinite;
}


/* ============================================================
   SERVER
============================================================ */

.mail-console-server {
  margin: 15px 15px 0;

  padding: 13px;

  border: 1px solid
    rgba(127, 180, 210, .11);

  border-radius: 9px;

  background:
    rgba(3, 23, 36, .26);
}


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

.mail-server-top {
  display: grid;

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

  align-items: center;

  gap: 9px;

  margin-bottom: 11px;
}


.mail-server-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    rgba(35, 136, 255, .075);

  color: #489fd5;

  font-size: 12px;
}


.mail-server-info {
  min-width: 0;
}


.mail-server-info span {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .07em;

  color: #658ba2;
}


.mail-server-info strong {
  display: block;

  overflow: hidden;

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

  color: #bcd1dd;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.mail-server-active {
  display: flex;
  align-items: center;

  gap: 5px;

  font-size: 8px;

  color: #68b99b;
}


.mail-server-active > span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #42bd91;
}


/* ============================================================
   RACK
============================================================ */

.mail-server-rack {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.mail-rack-row {
  display: grid;

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

  align-items: center;

  gap: 8px;

  min-height: 38px;

  padding: 0 10px;

  border: 1px solid
    rgba(126, 177, 208, .09);

  border-radius: 5px;

  background:
    linear-gradient(
      180deg,
      rgba(30, 67, 91, .55),
      rgba(21, 54, 75, .55)
    );
}


.mail-rack-lights {
  display: flex;

  gap: 5px;
}


.mail-rack-lights > span {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #43b98e;
}


.mail-rack-lights > span:nth-child(2) {
  background: #4199d0;

  animation:
    mailBlueLed 3.5s ease-in-out infinite;
}


.mail-rack-lights > span:nth-child(3) {
  background: #607d90;
}


.mail-rack-lines {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.mail-rack-lines span {
  display: block;

  height: 3px;

  border-radius: 3px;

  background:
    rgba(138, 183, 210, .12);
}


.mail-rack-lines span:first-child {
  width: 84%;
}


.mail-rack-lines span:last-child {
  width: 63%;
}


.mail-rack-status {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #42bd91;

  box-shadow:
    0 0 7px
    rgba(66, 189, 145, .26);
}


/* ============================================================
   MAIL FLOW
============================================================ */

.mail-flow {
  margin: 12px 15px 0;

  padding: 12px 13px;

  border: 1px solid
    rgba(126, 178, 208, .09);

  border-radius: 8px;

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


.mail-flow-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 11px;
}


.mail-flow-title > span {
  font-size: 10px;
  font-weight: 600;

  color: #9ab5c5;
}


.mail-flow-title small {
  font-size: 8px;
  font-weight: 400;

  color: #628ba3;
}


/* ============================================================
   FLOW DIAGRAM
============================================================ */

.mail-flow-diagram {
  display: grid;

  grid-template-columns:
    auto
    minmax(25px, 1fr)
    auto
    minmax(25px, 1fr)
    auto;

  align-items: center;

  gap: 6px;
}


.mail-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 5px;
}


.mail-flow-node-icon {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border: 1px solid
    rgba(110, 168, 202, .12);

  border-radius: 7px;

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

  color: #579ac2;

  font-size: 11px;
}


.mail-flow-node--filter
.mail-flow-node-icon {
  border-color:
    rgba(60, 185, 142, .15);

  background:
    rgba(60, 185, 142, .06);

  color: #52bd97;
}


.mail-flow-node > span {
  font-size: 8px;

  color: #7698ac;
}


/* ============================================================
   FLOW LINE
============================================================ */

.mail-flow-line {
  position: relative;

  height: 1px;

  overflow: hidden;

  background:
    rgba(102, 162, 197, .20);
}


.mail-flow-line::after {
  content: "";

  position: absolute;

  top: -2px;
  right: 0;

  width: 5px;
  height: 5px;

  transform: rotate(45deg);

  border-top: 1px solid
    rgba(93, 167, 210, .45);

  border-right: 1px solid
    rgba(93, 167, 210, .45);
}


.mail-flow-packet {
  position: absolute;

  top: -1px;
  left: -7px;

  width: 7px;
  height: 3px;

  border-radius: 4px;

  background: #45a6dc;

  box-shadow:
    0 0 7px
    rgba(69, 166, 220, .5);

  animation:
    mailPacketMove 3.4s linear infinite;
}


.mail-flow-packet--delay {
  animation-delay: 1.1s;
}


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

.mail-console-features {
  display: grid;

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

  gap: 7px;

  margin: 12px 15px 15px;
}


.mail-console-feature {
  display: grid;

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

  align-items: center;

  gap: 7px;

  padding: 9px;

  border: 1px solid
    rgba(125, 177, 208, .09);

  border-radius: 7px;

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


.mail-console-feature-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 6px;

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

  color: #489fd5;

  font-size: 10px;
}


.mail-console-feature span {
  display: block;

  margin-bottom: 1px;

  font-size: 8px;

  color: #6e93a8;
}


.mail-console-feature strong {
  display: block;

  overflow: hidden;

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

  color: #b9ceda;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.mail-feature-check {
  color: #42b98d;

  font-size: 10px;
}


/* ============================================================
   CONSOLE FOOTER
============================================================ */

.mail-console-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  padding: 11px 15px;

  border-top: 1px solid
    rgba(143, 192, 221, .08);

  background:
    rgba(3, 20, 32, .13);

  font-size: 9px;

  color: #7193a7;
}


.mail-console-footer > span {
  display: flex;
  align-items: center;

  gap: 5px;
}


.mail-console-footer i {
  font-size: 5px;

  color: #42bd91;
}


/* ============================================================
   FLOATING PROTECTION CARD
============================================================ */

.mail-floating-card {
  position: absolute;
  z-index: 5;

  right: -20px;
  bottom: -4px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 10px 12px;

  border: 1px solid
    rgba(130, 185, 218, .18);

  border-radius: 9px;

  background:
    rgba(9, 37, 56, .95);

  box-shadow:
    0 12px 27px
    rgba(0, 0, 0, .22);

  backdrop-filter: blur(8px);

  animation:
    mailFloatingCard 6s ease-in-out infinite;
}


.mail-floating-card-icon {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 6px;

  background:
    rgba(65, 187, 143, .08);

  color: #51c198;

  font-size: 11px;
}


.mail-floating-card span {
  display: block;

  margin-bottom: 1px;

  font-size: 8px;

  color: #7395a9;
}


.mail-floating-card strong {
  display: block;

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

  color: #c4d7e1;
}


/* ============================================================
   TRUST BAR
============================================================ */

.mail-trust {
  position: relative;
  z-index: 5;

  border-top: 1px solid #d9e5ec;
  border-bottom: 1px solid #d9e5ec;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbfd
    );

  box-shadow:
    0 8px 30px
    rgba(29, 69, 96, .035);
}


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

.mail-trust-grid {
  display: grid;

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


/* ============================================================
   TRUST ITEM
============================================================ */

.mail-trust-item {
  position: relative;

  display: flex;
  align-items: center;

  gap: 14px;

  min-width: 0;
  min-height: 105px;

  padding: 22px 23px;

  transition:
    background .22s ease;
}


.mail-trust-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 25%;
  right: 0;

  width: 1px;
  height: 50%;

  background:
    linear-gradient(
      180deg,
      transparent,
      #d8e4eb,
      transparent
    );
}


/* ============================================================
   TRUST ICON
============================================================ */

.mail-trust-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid #d6e5ee;
  border-radius: 10px;

  background: #f4f9fc;

  color: #3488c1;

  font-size: 16px;

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


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

.mail-trust-copy {
  min-width: 0;
}


.mail-trust-copy strong {
  display: block;

  margin-bottom: 4px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;

  color: #31546c;
}


.mail-trust-copy span {
  display: block;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;

  color: #718796;
}


/* ============================================================
   TRUST HOVER
============================================================ */

@media (hover: hover) {

  .mail-trust-item:hover {
    background:
      rgba(35, 136, 255, .025);
  }


  .mail-trust-item:hover
  .mail-trust-icon {
    transform: translateY(-2px);

    border-color:
      rgba(35, 136, 255, .22);

    background:
      rgba(35, 136, 255, .065);
  }

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailHeroContentIn {

  from {
    opacity: 0;
    transform: translateY(13px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes mailHeroVisualIn {

  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes mailConsoleFloat {

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

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

}


@keyframes mailFloatingCard {

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

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

}


@keyframes mailVisualAura {

  0%,
  100% {
    opacity: .65;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50% {
    opacity: .95;

    transform:
      translate(-50%, -50%)
      scale(1.055);
  }

}


@keyframes mailHeroStatusPulse {

  0% {
    opacity: .7;
    transform: scale(.7);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.45);
  }

}


@keyframes mailGreenPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }

}


@keyframes mailBlueLed {

  0%,
  80%,
  100% {
    opacity: .35;
  }

  86%,
  94% {
    opacity: 1;
  }

}


@keyframes mailPacketMove {

  0% {
    left: -7px;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 4px);
    opacity: 0;
  }

}


@keyframes mailDotsMove {

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

  50% {
    transform: translate3d(-6px, 8px, 0);
  }

}


@keyframes mailHeroGlowTop {

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

  50% {
    transform:
      translate3d(-15px, 12px, 0)
      scale(1.04);
  }

}


@keyframes mailHeroGlowBottom {

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

  50% {
    transform:
      translate3d(17px, -10px, 0);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-hero {
    padding:
      88px 0
      82px;
  }


  .mail-hero-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, .72fr);

    gap: 48px;
  }


  .mail-hero-title {
    font-size:
      clamp(
        44px,
        5vw,
        58px
      );
  }


  .mail-hero-description {
    font-size: 17px;
  }


  .mail-hero-visual {
    max-width: 365px;
  }


  .mail-console-features {
    grid-template-columns: 1fr;
  }


  .mail-trust-item {
    padding:
      21px 15px;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 880px) {

  .mail-hero {
    padding:
      80px 0
      76px;
  }


  .mail-hero-layout {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .mail-hero-content {
    max-width: 720px;
  }


  .mail-hero-visual {
    width: min(100%, 390px);

    justify-self: center;
  }


  .mail-trust-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .mail-trust-item:nth-child(2)::after {
    display: none;
  }


  .mail-trust-item:nth-child(-n+2) {
    border-bottom:
      1px solid #e2eaf0;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 620px) {

  .mail-container {
    width:
      min(
        calc(100% - 34px),
        1180px
      );
  }


  .mail-hero {
    padding:
      66px 0
      64px;
  }


  .mail-hero-grid {
    background-size:
      42px 42px;
  }


  .mail-hero-dots {
    display: none;
  }


  /* EYEBROW */

  .mail-hero-eyebrow {
    margin-bottom: 17px;

    font-size: 11px;
  }


  /* H1 */

  .mail-hero-title {
    font-size:
      clamp(
        38px,
        12vw,
        49px
      );

    line-height: 1.08;
  }


  /* DESCRIPTION */

  .mail-hero-description {
    margin-top: 20px;

    font-size: 16px;
    line-height: 1.7;
  }


  /* ACTIONS */

  .mail-hero-actions {
    flex-direction: column;

    margin-top: 27px;
  }


  .mail-hero-btn {
    width: 100%;
    min-height: 53px;
  }


  /* BENEFITS */

  .mail-hero-benefits {
    flex-direction: column;

    gap: 9px;

    margin-top: 23px;
  }


  /* CAPABILITIES */

  .mail-hero-capabilities {
    margin-top: 25px;
  }


  .mail-hero-capabilities-list {
    display: grid;

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


  .mail-hero-capabilities-list > span {
    justify-content: center;

    min-height: 40px;
  }


  /* VISUAL */

  .mail-hero-layout {
    gap: 42px;
  }


  .mail-hero-visual {
    width: min(100%, 360px);
  }


  .mail-console-header {
    padding:
      14px;
  }


  .mail-console-status {
    font-size: 8px;
  }


  .mail-console-server {
    margin:
      13px 13px 0;
  }


  .mail-flow {
    margin:
      10px 13px 0;
  }


  .mail-console-features {
    margin:
      10px 13px 13px;
  }


  .mail-console-footer {
    padding:
      10px 13px;
  }


  .mail-floating-card {
    right: 5px;
    bottom: -8px;
  }


  /* TRUST */

  .mail-trust-grid {
    grid-template-columns: 1fr;
  }


  .mail-trust-item {
    min-height: 91px;

    padding:
      18px 4px;
  }


  .mail-trust-item:not(:last-child) {
    border-bottom:
      1px solid #e1eaf0;
  }


  .mail-trust-item::after {
    display: none;
  }


  .mail-trust-copy strong {
    font-size: 15px;
  }


  .mail-trust-copy span {
    font-size: 13px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

  .mail-hero-capabilities-list {
    grid-template-columns: 1fr;
  }


  .mail-console-status {
    display: none;
  }


  .mail-flow-diagram {
    gap: 4px;
  }


  .mail-console-footer {
    flex-direction: column;
    align-items: flex-start;
  }


  .mail-floating-card {
    position: relative;

    right: auto;
    bottom: auto;

    width: fit-content;

    margin:
      -5px 10px
      0 auto;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-hero-content,
  .mail-hero-visual,
  .mail-console,
  .mail-floating-card,
  .mail-visual-aura,
  .mail-hero-glow,
  .mail-hero-dots,
  .mail-hero-eyebrow-status::after,
  .mail-console-status > span,
  .mail-rack-lights > span,
  .mail-flow-packet {
    animation: none !important;
  }


  .mail-hero-btn,
  .mail-hero-btn i,
  .mail-trust-item,
  .mail-trust-icon {
    transition: none;
  }

}










/* ============================================================
   02. CORREO PROFESIONAL GESTIONADO
   INFRAESTRUCTURA EXCLUSIVA

   UI revision:
   - menor peso tipográfico
   - visual claro
   - mejor jerarquía
   - animaciones CSS sutiles
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

  /*--mail-font:
    "Open Sans",
    Arial,
    Helvetica,
    sans-serif;*/

  --mail-blue: #1677e8;
  --mail-blue-bright: #2388ff;
  --mail-cyan: #12b9d6;

  --mail-green: #22b573;

  --mail-dark: #101b2b;
  --mail-text: #26374b;
  --mail-muted: #63748a;

  --mail-border: #d9e5f1;

  --mail-container: 1200px;

}


/* ============================================================
   CONTAINER
============================================================ */

.mail-container {

  width: min(
    calc(100% - 48px),
    var(--mail-container)
  );

  margin-inline: auto;

}


/* ============================================================
   SECTION
============================================================ */

.mail-infra {

  position: relative;
  overflow: hidden;

  padding: 108px 0 100px;

  color: var(--mail-dark);

  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(35, 136, 255, .09),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f7f9fc 0%,
      #f2f6fa 100%
    );

}


/* Ambient light */

.mail-infra::before {

  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  top: -340px;
  right: -160px;

  border-radius: 50%;

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

  pointer-events: none;

}


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

.mail-infra-grid {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, .98fr)
    minmax(420px, 1.02fr);

  gap: 92px;

  align-items: center;

}


/* ============================================================
   CONTENT
============================================================ */

.mail-infra-content {

  max-width: 620px;

}


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

.mail-section-eyebrow {

  display: flex;
  align-items: center;

  gap: 11px;

  margin:
    0
    0
    18px;

  font-family:
    var(--mail-font);

  font-size: 12px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: .13em;

  text-transform: uppercase;

  color: #086bd7;

}


.mail-section-eyebrow-line {

  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24c9e5
    );

}


/* ============================================================
   H2
============================================================ */

.mail-section-title {

  max-width: 610px;

  margin: 0;

  font-family:
    var(--mail-font);

  /*
   * IMPORTANTE:
   * SemiBold en lugar de Bold.
   *
   * El H1 puede mantener 700.
   * Los H2 de contenido funcionan mejor en 600.
   */
  font-weight: 600;

  font-size:
    clamp(
      38px,
      3.25vw,
      50px
    );

  line-height: 1.12;

  letter-spacing: -.035em;

  color: #111c2d;

}


.mail-section-title span {

  color: var(--mail-blue);

}


/* ============================================================
   INTRO
============================================================ */

.mail-section-description {

  max-width: 600px;

  margin:
    25px
    0
    0;

  font-family:
    var(--mail-font);

  /*
   * Antes 600.
   * Ahora Regular.
   */
  font-size: 17px;

  font-weight: 400;

  line-height: 1.7;

  color: #34475d;

}


/*
 * Solo el nombre del producto o conceptos
 * importantes pueden enfatizarse.
 */

.mail-section-description strong {

  font-weight: 600;

  color: #24364a;

}


/* ============================================================
   SECONDARY TEXT
============================================================ */

.mail-infra-text {

  max-width: 610px;

  margin:
    14px
    0
    0;

  font-family:
    var(--mail-font);

  font-size: 15.5px;

  font-weight: 400;

  line-height: 1.78;

  color: #62748a;

}


/* ============================================================
   HIGHLIGHTS
============================================================ */

.mail-infra-highlights {

  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;

}


.mail-infra-highlight {

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

  gap: 8px;

  padding:
    9px
    13px;

  border:
    1px solid
    rgba(35, 136, 255, .18);

  border-radius: 8px;

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

  font-family:
    var(--mail-font);

  font-size: 11px;

  font-weight: 600;

  color: #38506a;

}


.mail-infra-highlight i {

  color:
    var(--mail-blue-bright);

}


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

.mail-infra-visual {

  position: relative;

  display: flex;
  justify-content: center;

  perspective: 1200px;

}


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

.mail-infra-panel {

  position: relative;

  width: 100%;

  max-width: 515px;

  padding:
    29px
    31px
    30px;

  overflow: visible;

  border:
    1px solid
    rgba(98, 149, 204, .22);

  border-radius: 22px;

  /*
   * Cambio fundamental:
   * deja de ser negro.
   */

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(35, 136, 255, .10),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #f9fcff 0%,
      #edf5fc 100%
    );

  box-shadow:

    0 32px 65px
    rgba(42, 79, 118, .12),

    0 7px 18px
    rgba(42, 79, 118, .06),

    inset 0 1px 0
    rgba(255, 255, 255, .9);

  transform-origin:
    center center;

  animation:
    mailPanelEntrance
    .85s
    cubic-bezier(.2,.8,.2,1)
    both;

}


/* Top highlight */

.mail-infra-panel::before {

  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 50%;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .42),
      transparent
    );

}


/* ============================================================
   ORGANIZATION
============================================================ */

.mail-infra-org {

  text-align: center;

}


.mail-infra-small-label {

  display: block;

  margin-bottom: 13px;

  font-family:
    var(--mail-font);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .13em;

  color: #8194a9;

}


.mail-infra-users {

  display: flex;
  justify-content: center;

  gap: 8px;

}


.mail-infra-users span {

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 11px;

  color: #227edb;

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

  border:
    1px solid
    rgba(35, 136, 255, .18);

  box-shadow:
    0 4px 12px
    rgba(35, 136, 255, .06);

}


.mail-infra-users span:nth-child(2) {

  color: #0877e5;

  background:
    rgba(35, 136, 255, .11);

  border-color:
    rgba(35, 136, 255, .27);

}


/* ============================================================
   CONNECTION
============================================================ */

.mail-infra-connection {

  position: relative;

  height: 75px;

  display: flex;
  flex-direction: column;
  align-items: center;

}


.mail-infra-line {

  width: 1px;

  flex: 1;

  background:
    linear-gradient(
      180deg,
      rgba(35, 136, 255, .15),
      rgba(18, 185, 214, .55)
    );

}


/* ============================================================
   LOCK
============================================================ */

.mail-infra-lock {

  position: relative;
  z-index: 3;

  width: 27px;
  height: 27px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 9px;

  color: #078da6;

  background: #e9fafd;

  border:
    1px solid
    rgba(18, 185, 214, .32);

  box-shadow:
    0 4px 12px
    rgba(18, 185, 214, .12);

}


/* ============================================================
   MOVING EMAIL PACKET
============================================================ */

.mail-infra-packet {

  position: absolute;

  z-index: 4;

  top: 8px;

  width: 17px;
  height: 17px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 6px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #14bcd7
    );

  box-shadow:
    0 3px 10px
    rgba(35, 136, 255, .25);

  animation:
    mailPacketFlow
    3.6s
    ease-in-out
    infinite;

}


/* ============================================================
   SERVER
============================================================ */

.mail-infra-server {

  padding: 19px;

  border:
    1px solid
    rgba(65, 126, 188, .18);

  border-radius: 14px;

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

  box-shadow:
    0 8px 24px
    rgba(39, 78, 117, .06),

    inset 0 1px 0
    #fff;

}


/* ============================================================
   SERVER HEAD
============================================================ */

.mail-infra-server-head {

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 13px;

}


.mail-infra-server-icon {

  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #0879e7;

  background:
    #edf6ff;

  border:
    1px solid
    #d3e8fb;

  font-size: 16px;

}


.mail-infra-server-title span {

  display: block;

  margin-bottom: 3px;

  font-family:
    var(--mail-font);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .09em;

  color: #899aab;

}


.mail-infra-server-title strong {

  display: block;

  font-family:
    var(--mail-font);

  font-size: 12px;

  font-weight: 600;

  color: #26394e;

}


/* ============================================================
   ONLINE
============================================================ */

.mail-infra-online {

  display: flex;
  align-items: center;

  gap: 5px;

  padding:
    5px
    8px;

  border-radius: 20px;

  font-family:
    var(--mail-font);

  font-size: 8px;

  font-weight: 600;

  color: #168557;

  background:
    rgba(34, 181, 115, .07);

  border:
    1px solid
    rgba(34, 181, 115, .17);

}


.mail-infra-online span {

  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--mail-green);

  box-shadow:
    0 0 0 0
    rgba(34, 181, 115, .35);

  animation:
    mailStatusPulse
    2.8s
    ease-out
    infinite;

}


/* ============================================================
   SERVER DATA
============================================================ */

.mail-infra-server-data {

  display: grid;

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

  margin-top: 17px;

  padding-top: 15px;

  border-top:
    1px solid
    #e6edf4;

}


.mail-infra-server-data > div {

  padding:
    0
    12px;

}


.mail-infra-server-data > div:first-child {

  padding-left: 0;

}


.mail-infra-server-data > div:last-child {

  padding-right: 0;

}


.mail-infra-server-data > div:not(:last-child) {

  border-right:
    1px solid
    #e5edf5;

}


.mail-infra-server-data span {

  display: block;

  margin-bottom: 4px;

  font-family:
    var(--mail-font);

  font-size: 7px;

  font-weight: 600;

  letter-spacing: .07em;

  color: #94a4b4;

}


.mail-infra-server-data strong {

  display: block;

  font-family:
    var(--mail-font);

  font-size: 10px;

  font-weight: 600;

  color: #34495f;

}


/* ============================================================
   OUTPUT
============================================================ */

.mail-infra-output {

  display: grid;

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

  gap: 8px;

  margin-top: 12px;

}


.mail-infra-output > div {

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

  gap: 7px;

  padding:
    10px
    7px;

  border-radius: 8px;

  background:
    #f5f9fd;

  border:
    1px solid
    #e1eaf3;

  font-family:
    var(--mail-font);

  font-size: 9px;

  font-weight: 600;

  color: #61758a;

}


.mail-infra-output i {

  color:
    var(--mail-blue-bright);

}


/* ============================================================
   PRIVATE BADGE
============================================================ */

.mail-infra-private {

  position: absolute;

  right: -24px;
  bottom: 65px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    11px
    14px;

  border-radius: 10px;

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

  border:
    1px solid
    rgba(34, 181, 115, .22);

  box-shadow:
    0 13px 30px
    rgba(42, 76, 108, .14);

  animation:
    mailBadgeFloat
    5s
    ease-in-out
    infinite;

}


.mail-infra-private-icon {

  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  color: #fff;

  background:
    var(--mail-green);

  font-size: 8px;

}


.mail-infra-private span,
.mail-infra-private strong {

  display: block;

  font-family:
    var(--mail-font);

}


.mail-infra-private span {

  margin-bottom: 2px;

  font-size: 7px;

  font-weight: 600;

  letter-spacing: .09em;

  color: #8b9bad;

}


.mail-infra-private strong {

  font-size: 9px;

  font-weight: 600;

  color: #35495d;

}


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

.mail-infra-features {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 76px;

  border:
    1px solid
    #dbe6f0;

  border-radius: 15px;

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

  box-shadow:
    0 12px 35px
    rgba(32, 57, 85, .035);

  overflow: hidden;

}


/* ============================================================
   FEATURE
============================================================ */

.mail-infra-feature {

  position: relative;

  display: grid;

  grid-template-columns:
    auto
    1fr;

  align-items: flex-start;

  gap: 13px;

  padding:
    26px
    22px;

  transition:
    background-color .25s ease;

}


.mail-infra-feature:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;
  top: 23%;

  width: 1px;
  height: 54%;

  background:
    #dce6ef;

}


/* ============================================================
   FEATURE ICON
============================================================ */

.mail-infra-feature-icon {

  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color:
    #1678d9;

  background:
    #edf6ff;

  border:
    1px solid
    #d4e8fa;

  font-size: 13px;

}


/* ============================================================
   FEATURE TITLE
============================================================ */

.mail-infra-feature h3 {

  margin:
    1px
    0
    6px;

  font-family:
    var(--mail-font);

  font-size: 14px;

  /*
   * SemiBold.
   * Evitamos sensación pesada.
   */
  font-weight: 600;

  line-height: 1.4;

  color: #26384c;

}


/* ============================================================
   FEATURE TEXT
============================================================ */

.mail-infra-feature p {

  margin: 0;

  font-family:
    var(--mail-font);

  font-size: 13px;

  font-weight: 400;

  line-height: 1.62;

  color: #718196;

}


/* ============================================================
   ACCENT FEATURE
============================================================ */

.mail-infra-feature-accent {

  background:
    linear-gradient(
      145deg,
      rgba(18, 185, 214, .025),
      rgba(35, 136, 255, .025)
    );

}


.mail-infra-feature-accent
.mail-infra-feature-icon {

  color:
    #078da6;

  background:
    #ebfafc;

  border-color:
    #cceef2;

}


/* ============================================================
   HOVER
============================================================ */

@media (hover: hover) {

  .mail-infra-feature:hover {

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

  }

}


/* ============================================================
   ANIMATIONS
============================================================ */


/*
 * Entrada inicial del panel.
 * Solo 0.85s. No se repite.
 */

@keyframes mailPanelEntrance {

  0% {

    opacity: 0;

    transform:
      translateY(18px)
      scale(.985);

  }

  100% {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


/*
 * Pequeño paquete que recorre la conexión.
 */

@keyframes mailPacketFlow {

  0% {

    opacity: 0;

    transform:
      translateY(0)
      scale(.75);

  }

  15% {

    opacity: 1;

  }

  55% {

    opacity: 1;

    transform:
      translateY(38px)
      scale(1);

  }

  75% {

    opacity: 0;

    transform:
      translateY(51px)
      scale(.8);

  }

  100% {

    opacity: 0;

    transform:
      translateY(51px)
      scale(.8);

  }

}


/*
 * Estado activo.
 */

@keyframes mailStatusPulse {

  0% {

    box-shadow:
      0 0 0 0
      rgba(34, 181, 115, .34);

  }

  60% {

    box-shadow:
      0 0 0 6px
      rgba(34, 181, 115, 0);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(34, 181, 115, 0);

  }

}


/*
 * Badge flotante.
 * Movimiento extremadamente pequeño.
 */

@keyframes mailBadgeFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-4px);

  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-infra {

    padding:
      90px
      0
      86px;

  }


  .mail-infra-grid {

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

    gap: 48px;

  }


  .mail-infra-private {

    right: -8px;

  }


  .mail-infra-features {

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

    margin-top: 64px;

  }


  .mail-infra-feature:nth-child(2)::after {

    display: none;

  }


  .mail-infra-feature:nth-child(-n+2) {

    border-bottom:
      1px solid
      #dce6ef;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 780px) {

  .mail-container {

    width:
      min(
        calc(100% - 34px),
        var(--mail-container)
      );

  }


  .mail-infra {

    padding:
      70px
      0
      66px;

  }


  .mail-infra-grid {

    grid-template-columns:
      1fr;

    gap: 48px;

  }


  .mail-section-title {

    font-size:
      clamp(
        34px,
        9.5vw,
        42px
      );

  }


  .mail-section-description {

    margin-top: 20px;

    font-size: 16px;

  }


  .mail-infra-text {

    font-size: 15px;

    line-height: 1.72;

  }


  .mail-infra-visual {

    padding:
      0
      4px;

  }


  .mail-infra-panel {

    padding:
      24px
      18px
      26px;

    border-radius: 18px;

  }


  .mail-infra-private {

    position: static;

    width: fit-content;

    margin:
      15px
      auto
      0;

  }


  .mail-infra-server-head {

    grid-template-columns:
      auto
      1fr;

  }


  .mail-infra-online {

    grid-column:
      1 / -1;

    width: fit-content;

    margin-top: 3px;

  }


  .mail-infra-server-data {

    grid-template-columns:
      1fr;

    gap: 10px;

  }


  .mail-infra-server-data > div {

    padding: 0;

  }


  .mail-infra-server-data
  > div:not(:last-child) {

    padding-bottom: 9px;

    border-right: 0;

    border-bottom:
      1px solid
      #e5edf5;

  }


  .mail-infra-output {

    grid-template-columns:
      1fr;

  }


  .mail-infra-features {

    grid-template-columns:
      1fr;

    margin-top: 50px;

  }


  .mail-infra-feature {

    padding:
      21px
      19px;

  }


  .mail-infra-feature::after {

    display:
      none !important;

  }


  .mail-infra-feature:not(:last-child) {

    border-bottom:
      1px solid
      #dce6ef;

  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

  .mail-infra {

    padding:
      60px
      0;

  }


  .mail-section-eyebrow {

    font-size: 10px;

  }


  .mail-section-title {

    font-size: 33px;

    letter-spacing:
      -.025em;

  }


  .mail-infra-highlights {

    flex-direction: column;

    align-items: flex-start;

  }


  .mail-infra-highlight {

    width: 100%;

  }


  .mail-infra-panel {

    padding-inline:
      14px;

  }


  .mail-infra-users span {

    width: 33px;
    height: 33px;

  }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-infra-panel,
  .mail-infra-packet,
  .mail-infra-online span,
  .mail-infra-private {

    animation: none;

  }


  .mail-infra-feature {

    transition: none;

  }

}








/* ============================================================
   3. POLÍTICAS PERSONALIZADAS
============================================================ */

/* ============================================================
   POLÍTICAS PERSONALIZADAS
   CORREO EMPRESARIAL GESTIONADO
============================================================ */

.mail-policies,
.mail-policies * {
  box-sizing: border-box;
  font-family: "Open Sans", Arial, sans-serif;
}


/* ============================================================
   SECTION
============================================================ */

.mail-policies {
  position: relative;
  overflow: hidden;

  padding: 108px 0 110px;

  color: #263f52;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(35, 136, 255, .06),
      transparent 31%
    ),
    #ffffff;
}


.mail-policies::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: 760px;
  height: 320px;

  transform: translateX(-50%);

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(35, 136, 255, .045),
      transparent 68%
    );
}


/* ============================================================
   HEADER
============================================================ */

.mail-policies-header {
  position: relative;
  z-index: 2;

  max-width: 880px;

  margin: 0 auto 47px;

  text-align: center;
}


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

.mail-policies-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0 0 18px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;

  letter-spacing: .11em;

  color: #1978cf;
}


.mail-policies-eyebrow > span {
  width: 25px;
  height: 1px;

  flex: 0 0 auto;

  background:
    linear-gradient(
      90deg,
      transparent,
      #2388ff
    );
}


.mail-policies-eyebrow > span:last-child {
  background:
    linear-gradient(
      90deg,
      #2388ff,
      transparent
    );
}


/* ============================================================
   H2
============================================================ */

.mail-policies-header h2 {
  margin: 0;

  font-size: clamp(40px, 3.6vw, 54px);

  font-weight: 600;
  line-height: 1.13;

  letter-spacing: -.035em;

  color: #172d3e;
}


.mail-policies-header h2 > span {
  color: #197bd4;
}


/* ============================================================
   INTRO
============================================================ */

.mail-policies-intro {
  max-width: 790px;

  margin: 20px auto 0;

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

  color: #60798b;
}


/* ============================================================
   MAIN HIGHLIGHT
============================================================ */

.mail-policies-highlight {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 20px;

  margin-bottom: 24px;

  padding: 25px 27px;

  border: 1px solid #cfe1ec;
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #f4f9fc 0%,
      #f8fbfd 52%,
      #f2f8fc 100%
    );

  box-shadow:
    0 10px 32px
    rgba(32, 77, 108, .05);
}


/* ============================================================
   HIGHLIGHT ICON
============================================================ */

.mail-policies-highlight-icon {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(35, 136, 255, .16);
  border-radius: 12px;

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

  color: #2383cb;

  font-size: 20px;
}


/* ============================================================
   HIGHLIGHT CONTENT
============================================================ */

.mail-policies-highlight-content {
  min-width: 0;
}


.mail-policies-highlight-label {
  display: block;

  margin-bottom: 5px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: .09em;

  color: #4386b5;
}


.mail-policies-highlight-content h3 {
  margin: 0;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;

  color: #294b62;
}


.mail-policies-highlight-content p {
  max-width: 740px;

  margin: 7px 0 0;

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

  color: #627b8c;
}


/* ============================================================
   STATUS
============================================================ */

.mail-policies-highlight-status {
  display: flex;
  align-items: center;

  gap: 8px;

  padding: 9px 12px;

  border: 1px solid rgba(36, 166, 116, .18);
  border-radius: 20px;

  background: rgba(36, 166, 116, .06);

  white-space: nowrap;

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

  color: #26835f;
}


.mail-policies-highlight-status > span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #2aae7d;

  box-shadow:
    0 0 0 4px
    rgba(42, 174, 125, .10);
}


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

.mail-policies-grid {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 16px;
}


/* ============================================================
   POLICY CARD
============================================================ */

.mail-policy-card {
  position: relative;

  display: grid;

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

  align-items: start;

  gap: 16px;

  min-width: 0;

  padding: 24px;

  border: 1px solid #d5e2ea;
  border-radius: 13px;

  background: #ffffff;

  box-shadow:
    0 8px 27px
    rgba(36, 72, 98, .045);

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


/* ============================================================
   FEATURED POLICY
============================================================ */

.mail-policy-card--featured {
  border-color: rgba(35, 136, 255, .31);

  background:
    linear-gradient(
      145deg,
      rgba(35, 136, 255, .035),
      #ffffff 58%
    );
}


.mail-policy-card--featured::before {
  content: "";

  position: absolute;

  top: 16px;
  right: 16px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #2388ff;

  box-shadow:
    0 0 0 5px
    rgba(35, 136, 255, .08);
}


/* ============================================================
   POLICY ICON
============================================================ */

.mail-policy-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid #d5e5ef;
  border-radius: 10px;

  background: #f5f9fc;

  color: #3586bd;

  font-size: 17px;
}


/* ============================================================
   POLICY CONTENT
============================================================ */

.mail-policy-content {
  min-width: 0;
}


.mail-policy-content h3 {
  margin: 1px 0 7px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: -.015em;

  color: #294b62;
}


.mail-policy-content > p {
  min-height: 49px;

  margin: 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;

  color: #617989;
}


/* ============================================================
   EXAMPLE
============================================================ */

.mail-policy-example {
  margin-top: 15px;

  padding-top: 13px;

  border-top: 1px solid #e3ebf0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  color: #607a8b;
}


.mail-policy-example > span {
  display: inline-block;

  margin-right: 6px;

  padding: 3px 7px;

  border-radius: 5px;

  background: #eef6fb;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  color: #367fab;
}


/* ============================================================
   CARD HOVER
============================================================ */

@media (hover: hover) {

  .mail-policy-card:hover {
    transform: translateY(-3px);

    border-color: #bcd8e8;

    box-shadow:
      0 14px 35px
      rgba(36, 72, 98, .075);
  }


  .mail-policy-card:hover
  .mail-policy-icon {
    border-color: rgba(35, 136, 255, .22);

    background: rgba(35, 136, 255, .065);

    color: #197bcf;
  }

}


/* ============================================================
   COMMERCIAL CTA
============================================================ */

.mail-policies-cta {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 20px;

  margin-top: 28px;

  padding: 27px 28px;

  border: 1px solid #cbdfea;
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #f2f8fc 0%,
      #f8fbfd 55%,
      #f1f8fc 100%
    );

  box-shadow:
    0 10px 30px
    rgba(33, 77, 108, .055);
}


/* ============================================================
   CTA ACCENT
============================================================ */

.mail-policies-cta::before {
  content: "";

  position: absolute;

  top: 17px;
  bottom: 17px;
  left: 0;

  width: 3px;

  border-radius: 0 4px 4px 0;

  background:
    linear-gradient(
      180deg,
      #2388ff,
      #24bdd6
    );
}


/* ============================================================
   CTA ICON
============================================================ */

.mail-policies-cta-icon {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(35, 136, 255, .18);
  border-radius: 12px;

  background: #ffffff;

  box-shadow:
    0 5px 15px
    rgba(39, 91, 126, .05);

  color: #2383cb;

  font-size: 19px;
}


/* ============================================================
   CTA CONTENT
============================================================ */

.mail-policies-cta-content {
  min-width: 0;
}


.mail-policies-cta-label {
  display: block;

  margin-bottom: 5px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: .09em;

  color: #4086b6;
}


.mail-policies-cta-content h3 {
  margin: 0;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: -.015em;

  color: #294b62;
}


.mail-policies-cta-content p {
  max-width: 690px;

  margin: 7px 0 0;

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

  color: #617b8c;
}


/* ============================================================
   CTA ACTIONS
============================================================ */

.mail-policies-cta-actions {
  display: flex;
  flex-direction: column;

  align-items: stretch;

  gap: 8px;

  min-width: 205px;
}


/* ============================================================
   CTA BUTTON BASE
============================================================ */

.mail-policies-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding: 0 17px;

  border-radius: 8px;

  white-space: nowrap;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: none;

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


.mail-policies-btn i {
  font-size: 9px;

  transition:
    transform .2s ease;
}


/* ============================================================
   PRIMARY CTA
============================================================ */

.mail-policies-btn--primary {
  border: 1px solid #f17a25;

  background:
    linear-gradient(
      135deg,
      #ff8b35,
      #f17722
    );

  box-shadow:
    0 8px 20px
    rgba(240, 118, 32, .17);

  color: #ffffff;
}


/* ============================================================
   SECONDARY CTA
============================================================ */

.mail-policies-btn--secondary {
  border: 1px solid #bfd8e7;

  background: #ffffff;

  color: #1979c9;
}


/* ============================================================
   CTA HOVER
============================================================ */

@media (hover: hover) {

  .mail-policies-btn--primary:hover {
    transform: translateY(-1px);

    border-color: #ed7420;

    background:
      linear-gradient(
        135deg,
        #ff9443,
        #ee701b
      );

    box-shadow:
      0 11px 25px
      rgba(240, 118, 32, .22);

    color: #ffffff;
  }


  .mail-policies-btn--primary:hover i {
    transform: translateY(2px);
  }


  .mail-policies-btn--secondary:hover {
    border-color: #8fc3e1;

    background: #f7fbfe;

    color: #1979c9;
  }


  .mail-policies-btn--secondary:hover i {
    transform: translateX(3px);
  }

}


/* ============================================================
   CTA NOTE
============================================================ */

.mail-policies-cta-note {
  position: relative;
  z-index: 2;

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

  gap: 8px;

  max-width: 800px;

  margin: 15px auto 0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  text-align: center;

  color: #718796;
}


.mail-policies-cta-note i {
  flex: 0 0 auto;

  color: #2aa777;

  font-size: 14px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-policies {
    padding:
      94px 0
      98px;
  }


  .mail-policies-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .mail-policies-highlight {
    grid-template-columns:
      58px
      minmax(0, 1fr);
  }


  .mail-policies-highlight-status {
    grid-column: 2;

    justify-self: start;
  }


  .mail-policies-cta {
    grid-template-columns:
      58px
      minmax(0, 1fr);
  }


  .mail-policies-cta-actions {
    grid-column: 2;

    flex-direction: row;

    justify-content: flex-start;

    min-width: 0;
  }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 760px) {

  .mail-policies-header {
    margin-bottom: 38px;
  }


  .mail-policies-grid {
    grid-template-columns: 1fr;
  }


  .mail-policy-content > p {
    min-height: 0;
  }


  .mail-policies-cta {
    grid-template-columns:
      52px
      minmax(0, 1fr);

    padding: 24px;
  }


  .mail-policies-cta-icon {
    width: 50px;
    height: 50px;
  }


  .mail-policies-cta-actions {
    grid-column: 1 / -1;

    flex-direction: row;

    width: 100%;
  }


  .mail-policies-btn {
    flex: 1;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-policies {
    padding:
      74px 0
      78px;
  }


  /* HEADER */

  .mail-policies-header {
    margin-bottom: 33px;
  }


  .mail-policies-eyebrow {
    gap: 8px;

    font-size: 11px;
  }


  .mail-policies-eyebrow > span {
    width: 17px;
  }


  .mail-policies-header h2 {
    font-size:
      clamp(
        32px,
        9vw,
        40px
      );
  }


  .mail-policies-intro {
    margin-top: 17px;

    font-size: 16px;
    line-height: 1.7;
  }


  /* HIGHLIGHT */

  .mail-policies-highlight {
    grid-template-columns: 1fr;

    gap: 13px;

    padding: 22px;
  }


  .mail-policies-highlight-icon {
    width: 50px;
    height: 50px;

    font-size: 18px;
  }


  .mail-policies-highlight-content h3 {
    font-size: 19px;
  }


  .mail-policies-highlight-content p {
    font-size: 15px;
  }


  .mail-policies-highlight-status {
    grid-column: auto;

    justify-self: start;
  }


  /* POLICY CARD */

  .mail-policy-card {
    grid-template-columns:
      45px
      minmax(0, 1fr);

    gap: 14px;

    padding: 21px 18px;
  }


  .mail-policy-icon {
    width: 45px;
    height: 45px;

    font-size: 16px;
  }


  .mail-policy-content h3 {
    font-size: 18px;
  }


  .mail-policy-content > p {
    font-size: 15px;
  }


  .mail-policy-example {
    font-size: 13px;
  }


  /* COMMERCIAL CTA */

  .mail-policies-cta {
    grid-template-columns: 1fr;

    gap: 13px;

    margin-top: 24px;

    padding: 22px 20px;
  }


  .mail-policies-cta::before {
    top: 20px;
    bottom: 20px;
  }


  .mail-policies-cta-icon {
    width: 50px;
    height: 50px;

    font-size: 18px;
  }


  .mail-policies-cta-content h3 {
    font-size: 20px;
  }


  .mail-policies-cta-content p {
    font-size: 15px;
  }


  .mail-policies-cta-actions {
    grid-column: auto;

    flex-direction: column;

    width: 100%;

    margin-top: 4px;
  }


  .mail-policies-btn {
    width: 100%;
    min-height: 51px;

    font-size: 14px;
  }


  .mail-policies-cta-note {
    align-items: flex-start;

    font-size: 13px;

    text-align: left;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

  .mail-policy-card {
    grid-template-columns: 1fr;
  }


  .mail-policy-example {
    margin-top: 13px;
  }

}


/* ============================================================
   SMOOTH SCROLL
============================================================ */

html {
  scroll-behavior: smooth;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  .mail-policy-card,
  .mail-policies-btn,
  .mail-policies-btn i {
    transition: none;
  }

}




/* ============================================================
  4. ANTISPAM Y SEGURIDAD
============================================================ */

.mail-security {

  position: relative;

  overflow: hidden;

  padding: 108px 0 104px;

  font-family:
    var(--mail-font);

  color: #111c2d;

  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(35,136,255,.075),
      transparent 26%
    ),
    radial-gradient(
      circle at 14% 78%,
      rgba(36,211,238,.045),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f7faff 0%,
      #f2f7fb 100%
    );

}


/* ============================================================
   DECORATIVE BACKGROUND
============================================================ */

.mail-security::before {

  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  right: -330px;
  top: 50px;

  border-radius: 50%;

  border:
    1px solid
    rgba(35,136,255,.055);

  box-shadow:

    0 0 0 90px
    rgba(35,136,255,.018),

    0 0 0 180px
    rgba(35,136,255,.012);

  pointer-events: none;

}


/* ============================================================
   HEADER
============================================================ */

.mail-security-header {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(310px, .72fr);

  gap: 95px;

  align-items: end;

  margin-bottom: 68px;

}


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

.mail-security-eyebrow {

  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    18px;

  font-size: 11px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: .14em;

  color: #0871df;

}


.mail-security-eyebrow-line {

  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24d3ee
    );

}


/* ============================================================
   TITLE
============================================================ */

.mail-security-title {

  max-width: 720px;

  margin: 0;

  font-family:
    var(--mail-font);

  font-size:
    clamp(
      39px,
      3.3vw,
      51px
    );

  font-weight: 600;

  line-height: 1.12;

  letter-spacing: -.035em;

  color: #111d2e;

}


.mail-security-title span {

  color: #1677e8;

}


/* ============================================================
   INTRO
============================================================ */

.mail-security-intro {

  max-width: 440px;

}


.mail-security-intro p {

  margin: 0;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.75;

  color: #687b90;

}


.mail-security-intro-lead {

  margin-bottom:
    10px !important;

  font-size:
    17px !important;

  font-weight:
    600 !important;

  line-height:
    1.5 !important;

  color:
    #2b4056 !important;

}


/* ============================================================
   SECURITY STAGE
============================================================ */

.mail-security-stage {

  position: relative;

  z-index: 2;

  display: grid;

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

  gap: 31px;

  align-items: center;

  padding:
    34px;

  border:
    1px solid
    #dce7f1;

  border-radius:
    20px;

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

  box-shadow:
    0 24px 65px
    rgba(37,72,109,.07);

}


/* ============================================================
   SOURCE LABEL
============================================================ */

.mail-security-source-label {

  display: block;

  margin-bottom:
    12px;

  text-align: center;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .13em;

  color: #8799ab;

}


/* ============================================================
   SOURCE
============================================================ */

.mail-security-source {

  position: relative;

}


/* ============================================================
   EMAIL CARD
============================================================ */

.mail-security-email-card {

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    15px;

  border:
    1px solid
    #dce6ef;

  border-radius:
    12px;

  background:
    #ffffff;

  box-shadow:
    0 10px 25px
    rgba(34,68,102,.06);

}


/* ============================================================
   EMAIL ICON
============================================================ */

.mail-security-email-icon {

  width: 38px;
  height: 38px;

  flex:
    0 0 auto;

  display: grid;

  place-items: center;

  border-radius:
    9px;

  border:
    1px solid
    #d7e9fa;

  background:
    #eef7ff;

  color:
    #1680ea;

  font-size:
    13px;

}


/* ============================================================
   EMAIL TEXT
============================================================ */

.mail-security-email-content span,
.mail-security-email-content strong,
.mail-security-email-content small {

  display: block;

}


.mail-security-email-content span {

  margin-bottom:
    3px;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    .10em;

  color:
    #8a9bac;

}


.mail-security-email-content strong {

  margin-bottom:
    3px;

  font-size:
    12px;

  font-weight:
    600;

  color:
    #34495e;

}


.mail-security-email-content small {

  font-size:
    12px;

  font-weight:
    400;

  color:
    #8b9bab;

}


/* ============================================================
   SOURCE STATUS
============================================================ */

.mail-security-source-status {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  margin-top:
    12px;

  font-size:
    12px;

  font-weight:
    600;

  color:
    #6c8297;

}


.mail-security-source-status span {

  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    #2388ff;

  animation:
    mailSecurityStatusPulse
    2.6s
    ease-out
    infinite;

}


/* ============================================================
   PIPELINE
============================================================ */

.mail-security-pipeline {

  position: relative;

  display: grid;

  gap: 8px;

}


/* ============================================================
   FLOW LINES
============================================================ */

.mail-security-flow-line {

  position: absolute;

  left: -31px;
  top: 50%;

  width: 31px;
  height: 1px;

  transform:
    translateY(-50%);

  background:
    linear-gradient(
      90deg,
      #cbd9e6,
      #2388ff
    );

}


.mail-security-flow-line-bottom {

  left: auto;
  right: -31px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #cbd9e6
    );

}


/* ============================================================
   FLOW PACKET
============================================================ */

.mail-security-flow-packet {

  position: absolute;

  top: 50%;
  left: 0;

  width: 16px;
  height: 16px;

  display: grid;

  place-items: center;

  border-radius:
    50%;

  transform:
    translateY(-50%);

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #24c9e5
    );

  color:
    #ffffff;

  font-size:
    5px;

  box-shadow:
    0 3px 10px
    rgba(35,136,255,.28);

  animation:
    mailSecurityHorizontalPacket
    3.4s
    ease-in-out
    infinite;

}


.mail-security-flow-packet-second {

  animation-delay:
    1.7s;

}


/* ============================================================
   SECURITY LAYER
============================================================ */

.mail-security-layer {

  position: relative;

  display: grid;

  grid-template-columns:
    25px
    38px
    1fr
    auto;

  gap: 11px;

  align-items: center;

  min-height:
    77px;

  padding:
    12px
    15px;

  border:
    1px solid
    #dfe8f0;

  border-radius:
    11px;

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

  transition:
    border-color .22s ease,
    background-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;

}


/* left accent */

.mail-security-layer::before {

  content: "";

  position: absolute;

  left: -1px;
  top: 19%;

  width: 2px;
  height: 62%;

  border-radius:
    0 4px 4px 0;

  opacity: 0;

  background:
    linear-gradient(
      #2388ff,
      #24d3ee
    );

  transition:
    opacity .2s ease;

}


/* ============================================================
   ACTIVE LAYER
============================================================ */

.mail-security-layer-active {

  border-color:
    rgba(35,136,255,.28);

  background:
    linear-gradient(
      100deg,
      rgba(35,136,255,.055),
      rgba(255,255,255,.92) 42%
    );

  box-shadow:
    0 8px 22px
    rgba(35,136,255,.055);

}


.mail-security-layer-active::before {

  opacity: 1;

}


/* ============================================================
   NUMBER
============================================================ */

.mail-security-layer-number {

  font-size:
    12px;

  font-weight:
    600;

  color:
    #9aacbd;

}


/* ============================================================
   LAYER ICON
============================================================ */

.mail-security-layer-icon {

  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #d7e9f9;

  border-radius:
    8px;

  background:
    #eff7ff;

  color:
    #197ee2;

  font-size:
    12px;

}


/* ============================================================
   LAYER CONTENT
============================================================ */

.mail-security-layer-category {

  display: block;

  margin-bottom:
    2px;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .09em;

  color:
    #8ba0b4;

}


.mail-security-layer h3 {

  margin:
    0
    0
    3px;

  font-family:
    var(--mail-font);

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.35;

  color:
    #293e53;

}


.mail-security-layer p {

  margin:
    0;

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.55;

  color:
    #7a8da0;

}


/* ============================================================
   LAYER STATE
============================================================ */

.mail-security-layer-state {

  min-width:
    65px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  padding:
    6px 7px;

  border:
    1px solid
    rgba(34,181,115,.16);

  border-radius:
    20px;

  background:
    rgba(34,181,115,.055);

  color:
    #24966a;

  font-size:
    11px;

  font-weight:
    600;

}


.mail-security-layer-state i {

  font-size:
    6px;

}


/* ============================================================
   AUTH BADGES
============================================================ */

.mail-security-auth {

  display: flex;

  gap: 4px;

}


.mail-security-auth span {

  padding:
    5px 6px;

  border:
    1px solid
    rgba(35,136,255,.16);

  border-radius:
    4px;

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

  font-size:
    8px;

  font-weight:
    600;

  color:
    #317ec8;

}


/* ============================================================
   TLS
============================================================ */

.mail-security-tls {

  display: flex;

  align-items: center;

  gap: 5px;

  padding:
    6px 8px;

  border:
    1px solid
    rgba(35,136,255,.17);

  border-radius:
    5px;

  background:
    rgba(35,136,255,.055);

  font-size:
    8px;

  font-weight:
    600;

  color:
    #287dce;

}


/* ============================================================
   DESTINATION
============================================================ */

.mail-security-destination {

  position: relative;

}


/* ============================================================
   SERVER
============================================================ */

.mail-security-server {

  position: relative;

  overflow: hidden;

  padding:
    18px;

  border:
    1px solid
    #d6e3ee;

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f4f9fd
    );

  box-shadow:
    0 16px 38px
    rgba(38,72,106,.08);

}


.mail-security-server::before {

  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -100px;
  right: -80px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(35,136,255,.09),
      transparent 70%
    );

}


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

.mail-security-server-top {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 9px;

  align-items: center;

  padding-bottom:
    14px;

  border-bottom:
    1px solid
    #e7eef4;

}


.mail-security-server-icon {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #d5e8fa;

  border-radius:
    8px;

  background:
    #edf7ff;

  color:
    #187fe7;

  font-size:
    12px;

}


.mail-security-server-top div > span {

  display: block;

  margin-bottom:
    2px;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    .09em;

  color:
    #8ca0b3;

}


.mail-security-server-top div > strong {

  display: block;

  font-size:
    10px;

  font-weight:
    600;

  color:
    #32485e;

}


/* ============================================================
   ONLINE
============================================================ */

.mail-security-server-online {

  display: flex;

  align-items: center;

  gap: 4px;

  padding:
    5px 7px;

  border-radius:
    20px;

  border:
    1px solid
    rgba(34,181,115,.15);

  background:
    rgba(34,181,115,.05);

  color:
    #21885f;

  font-size:
    10px;

  font-weight:
    600;

}


.mail-security-server-online i {

  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    #22b573;

  animation:
    mailSecurityStatusPulseGreen
    2.7s
    ease-out
    infinite;

}


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

.mail-security-shield {

  position: relative;

  width: 150px;
  height: 150px;

  margin:
    20px
    auto
    12px;

  display: grid;

  place-items: center;

}


/* ============================================================
   SHIELD RINGS
============================================================ */

.mail-security-shield-ring {

  position: absolute;

  border-radius:
    50%;

  border:
    1px solid
    rgba(35,136,255,.12);

}


.mail-security-shield-ring-1 {

  width: 145px;
  height: 145px;

  animation:
    mailSecurityRing
    4.8s
    ease-in-out
    infinite;

}


.mail-security-shield-ring-2 {

  width: 108px;
  height: 108px;

  border-color:
    rgba(35,136,255,.18);

}


.mail-security-shield-ring-3 {

  width: 75px;
  height: 75px;

  border-color:
    rgba(36,211,238,.22);

  background:
    rgba(35,136,255,.025);

}


/* ============================================================
   SHIELD CORE
============================================================ */

.mail-security-shield-core {

  position: relative;

  z-index: 3;

  width: 50px;
  height: 50px;

  display: grid;

  place-items: center;

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #1673da
    );

  color:
    #ffffff;

  font-size:
    20px;

  box-shadow:
    0 12px 28px
    rgba(35,136,255,.23);

}


/* ============================================================
   RESULT
============================================================ */

.mail-security-server-result {

  text-align:
    center;

}


.mail-security-server-result > span {

  display: block;

  margin-bottom:
    3px;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    .11em;

  color:
    #94a6b7;

}


.mail-security-server-result > strong {

  display: block;

  margin-bottom:
    5px;

  font-size:
    12px;

  font-weight:
    600;

  color:
    #2c4258;

}


.mail-security-server-result p {

  max-width:
    225px;

  margin:
    0 auto;

  font-size:
    11px;

  font-weight:
    400;

  line-height:
    1.55;

  color:
    #7c8fa2;

}


/* ============================================================
   SERVER METRICS
============================================================ */

.mail-security-server-metrics {

  display: grid;

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

  gap:
    5px;

  margin-top:
    16px;

  padding-top:
    13px;

  border-top:
    1px solid
    #e7eef4;

}


.mail-security-server-metrics > div {

  display: flex;

  align-items: center;

  gap:
    5px;

}


.mail-security-server-metrics i {

  color:
    #2788e8;

  font-size:
    7px;

}


.mail-security-server-metrics span {

  font-size:
    10px;

  color:
    #8a9dae;

}


.mail-security-server-metrics strong {

  display:
    block;

  margin-top:
    1px;

  font-size:
    10px;

  font-weight:
    600;

  color:
    #3b5268;

}


/* ============================================================
   SUMMARY
============================================================ */

.mail-security-summary {

  position: relative;

  z-index: 2;

  display: grid;

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

  gap:
    35px;

  align-items:
    center;

  margin-top:
    30px;

  padding:
    22px
    25px;

  border:
    1px solid
    #dce7f0;

  border-radius:
    13px;

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

}


/* ============================================================
   SUMMARY MAIN
============================================================ */

.mail-security-summary-main {

  display: flex;

  align-items:
    center;

  gap:
    15px;

}


.mail-security-summary-icon {

  width: 42px;
  height: 42px;

  display: grid;

  place-items:
    center;

  flex:
    0 0 auto;

  border:
    1px solid
    #d3e8fa;

  border-radius:
    9px;

  background:
    #eef7ff;

  color:
    #197fe6;

  font-size:
    14px;

}


.mail-security-summary-main span {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    .11em;

  color:
    #8399ae;

}


.mail-security-summary-main strong {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    14px;

  font-weight:
    600;

  color:
    #2d4258;

}


.mail-security-summary-main p {

  margin:
    0;

  max-width:
    600px;

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.55;

  color:
    #788b9e;

}


/* ============================================================
   SUMMARY TAGS
============================================================ */

.mail-security-summary-tags {

  display: flex;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    6px;

  max-width:
    300px;

}


.mail-security-summary-tags span {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    6px
    8px;

  border:
    1px solid
    #dce7f0;

  border-radius:
    5px;

  background:
    #ffffff;

  font-size:
    11px;

  font-weight:
    600;

  color:
    #637b91;

}


.mail-security-summary-tags i {

  color:
    #22a876;

}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover) {

  .mail-security-layer:hover {

    transform:
      translateX(3px);

    border-color:
      rgba(35,136,255,.27);

    background:
      #ffffff;

    box-shadow:
      0 8px 22px
      rgba(36,78,118,.07);

  }


  .mail-security-layer:hover::before {

    opacity:
      1;

  }

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailSecurityHorizontalPacket {

  0% {

    opacity:
      0;

    left:
      0;

    transform:
      translate(-30%, -50%)
      scale(.75);

  }

  15% {

    opacity:
      1;

  }

  70% {

    opacity:
      1;

    left:
      100%;

    transform:
      translate(-70%, -50%)
      scale(1);

  }

  90%,
  100% {

    opacity:
      0;

    left:
      100%;

  }

}


@keyframes mailSecurityStatusPulse {

  0% {

    box-shadow:
      0 0 0 0
      rgba(35,136,255,.30);

  }

  60% {

    box-shadow:
      0 0 0 6px
      rgba(35,136,255,0);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(35,136,255,0);

  }

}


@keyframes mailSecurityStatusPulseGreen {

  0% {

    box-shadow:
      0 0 0 0
      rgba(34,181,115,.30);

  }

  60% {

    box-shadow:
      0 0 0 5px
      rgba(34,181,115,0);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(34,181,115,0);

  }

}


@keyframes mailSecurityRing {

  0%,
  100% {

    transform:
      scale(.96);

    opacity:
      .45;

  }

  50% {

    transform:
      scale(1.03);

    opacity:
      .9;

  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-security {

    padding:
      90px 0;

  }


  .mail-security-header {

    gap:
      50px;

  }


  .mail-security-stage {

    grid-template-columns:
      145px
      minmax(390px,1fr)
      250px;

    gap:
      22px;

    padding:
      25px;

  }


  .mail-security-flow-line {

    left:
      -22px;

    width:
      22px;

  }


  .mail-security-flow-line-bottom {

    left:
      auto;

    right:
      -22px;

  }


  .mail-security-server-metrics {

    grid-template-columns:
      1fr;

    gap:
      7px;

  }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 900px) {

  .mail-security-header {

    grid-template-columns:
      1fr;

    gap:
      25px;

    margin-bottom:
      48px;

  }


  .mail-security-intro {

    max-width:
      650px;

  }


  .mail-security-stage {

    grid-template-columns:
      1fr;

    max-width:
      650px;

    margin-inline:
      auto;

  }


  .mail-security-source {

    max-width:
      260px;

    margin-inline:
      auto;

  }


  .mail-security-flow-line {

    position:
      relative;

    left:
      auto;

    top:
      auto;

    width:
      1px;

    height:
      30px;

    margin:
      0 auto;

    transform:
      none;

    background:
      linear-gradient(
        #cbd9e6,
        #2388ff
      );

  }


  .mail-security-flow-line-bottom {

    right:
      auto;

    background:
      linear-gradient(
        #2388ff,
        #cbd9e6
      );

  }


  .mail-security-flow-packet {

    top:
      0;

    left:
      50%;

    animation:
      mailSecurityVerticalPacket
      3.4s
      ease-in-out
      infinite;

  }


  .mail-security-flow-packet-second {

    animation-delay:
      1.7s;

  }


  .mail-security-destination {

    max-width:
      390px;

    width:
      100%;

    margin-inline:
      auto;

  }


  .mail-security-summary {

    grid-template-columns:
      1fr;

  }


  .mail-security-summary-tags {

    justify-content:
      flex-start;

    max-width:
      none;

  }

}


/* ============================================================
   MOBILE FLOW ANIMATION
============================================================ */

@keyframes mailSecurityVerticalPacket {

  0% {

    opacity:
      0;

    top:
      0;

    transform:
      translate(-50%, -30%)
      scale(.75);

  }

  15% {

    opacity:
      1;

  }

  70% {

    opacity:
      1;

    top:
      100%;

    transform:
      translate(-50%, -70%)
      scale(1);

  }

  90%,
  100% {

    opacity:
      0;

    top:
      100%;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-security {

    padding:
      70px 0;

  }


  .mail-security-title {

    font-size:
      clamp(
        33px,
        9vw,
        40px
      );

  }


  .mail-security-stage {

    padding:
      18px;

    border-radius:
      15px;

  }


  .mail-security-layer {

    grid-template-columns:
      20px
      35px
      1fr;

    padding:
      12px;

  }


  .mail-security-layer-state,
  .mail-security-auth,
  .mail-security-tls {

    grid-column:
      3;

    justify-self:
      start;

    margin-top:
      4px;

  }


  .mail-security-layer p {

    font-size:
      8px;

  }


  .mail-security-server {

    padding:
      16px;

  }


  .mail-security-server-top {

    grid-template-columns:
      auto
      1fr;

  }


  .mail-security-server-online {

    grid-column:
      1 / -1;

    width:
      fit-content;

  }


  .mail-security-summary {

    padding:
      19px;

  }


  .mail-security-summary-main {

    align-items:
      flex-start;

  }

}


/* ============================================================
   REDUCED MOTION / ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-security-flow-packet,
  .mail-security-source-status span,
  .mail-security-server-online i,
  .mail-security-shield-ring {

    animation:
      none;

  }


  .mail-security-layer {

    transition:
      none;

  }

}

/* ============================================================
   05. PROTECCIÓN DEL CORREO SALIENTE
============================================================ */

.mail-outbound {
  position: relative;
  overflow: hidden;

  padding: 108px 0 104px;

  font-family: var(--mail-font);

  color: #ffffff;

  background:
    radial-gradient(
      circle at 78% 10%,
      rgba(35, 136, 255, .13),
      transparent 29%
    ),
    radial-gradient(
      circle at 5% 82%,
      rgba(20, 191, 220, .07),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #0e1b2a 0%,
      #102238 55%,
      #0c1927 100%
    );
}


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

.mail-outbound::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: .16;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .025) 1px,
      transparent 1px
    );

  background-size: 50px 50px;
}


/* ============================================================
   HEADER — NUEVO DISEÑO CENTRADO
============================================================ */

.mail-outbound-header {
  position: relative;
  z-index: 2;

  max-width: 880px;

  margin:
    0
    auto
    62px;

  text-align: center;
}


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

.mail-outbound-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin:
    0
    0
    18px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: .14em;

  color: #5faeff;
}


.mail-outbound-eyebrow-line {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24d3ee
    );
}


.mail-outbound-eyebrow-line:last-child {
  background:
    linear-gradient(
      90deg,
      #24d3ee,
      #2388ff
    );
}


/* ============================================================
   TITLE
============================================================ */

.mail-outbound-title {
  max-width: 830px;

  margin:
    0
    auto;

  font-family: var(--mail-font);

  font-size:
    clamp(
      40px,
      4vw,
      54px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #f4f8fc;
}


.mail-outbound-title span {
  display: block;

  color: #48a5ff;
}


/* ============================================================
   INTRO — AHORA CENTRADA
============================================================ */

.mail-outbound-intro {
  max-width: 760px;

  margin:
    24px
    auto
    0;
}


.mail-outbound-intro p {
  margin:
    0
    auto
    10px;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;

  color: #9aafc2;
}


.mail-outbound-intro p:last-child {
  margin-bottom: 0;
}


.mail-outbound-claim {
  margin-bottom:
    10px !important;

  font-size:
    18px !important;

  font-weight:
    600 !important;

  line-height:
    1.45 !important;

  color:
    #ffffff !important;
}


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

.mail-outbound-visual {
  position: relative;
  z-index: 2;

  padding: 27px;

  border:
    1px solid
    rgba(99, 149, 199, .18);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 36, 56, .92),
      rgba(10, 24, 38, .92)
    );

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, .20),
    inset 0 1px 0
    rgba(255, 255, 255, .025);
}


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

.mail-outbound-visual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  padding-bottom: 20px;
  margin-bottom: 31px;

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


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

.mail-outbound-visual-title {
  display: flex;
  align-items: center;

  gap: 11px;
}


.mail-outbound-visual-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(35, 136, 255, .23);

  border-radius: 9px;

  background:
    rgba(35, 136, 255, .08);

  color: #4da6ff;

  font-size: 14px;
}


.mail-outbound-visual-title span,
.mail-outbound-visual-title strong {
  display: block;
}


.mail-outbound-visual-title span {
  margin-bottom: 3px;

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

  letter-spacing: .11em;

  color: #7691aa;
}


.mail-outbound-visual-title strong {
  font-size: 14px;
  font-weight: 600;

  color: #dce8f3;
}


/* ============================================================
   LIVE
============================================================ */

.mail-outbound-live {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  border:
    1px solid
    rgba(39, 200, 137, .16);

  border-radius: 20px;

  background:
    rgba(39, 200, 137, .055);

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

  color: #53d6a1;
}


.mail-outbound-live > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #27c889;

  animation:
    mailOutboundStatus
    2.8s
    ease-out
    infinite;
}


/* ============================================================
   FLOW
============================================================ */

.mail-outbound-flow {
  display: grid;

  grid-template-columns:
    1fr
    45px
    1fr
    45px
    1fr
    45px
    1fr
    45px
    1fr;

  align-items: center;
}


/* ============================================================
   NODE
============================================================ */

.mail-outbound-node {
  position: relative;

  min-height: 174px;

  display: flex;
  flex-direction: column;

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

  padding: 20px 14px;

  text-align: center;

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

  border-radius: 13px;

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

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


/* ============================================================
   NODE ICON
============================================================ */

.mail-outbound-node-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  margin-bottom: 14px;

  border:
    1px solid
    rgba(35, 136, 255, .21);

  border-radius: 10px;

  background:
    rgba(35, 136, 255, .075);

  color: #4aa5ff;

  font-size: 15px;
}


/* ============================================================
   NODE TEXT
============================================================ */

.mail-outbound-node > span {
  display: block;

  margin-bottom: 6px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: .09em;

  color: #7690aa;
}


.mail-outbound-node > strong {
  display: block;

  margin-bottom: 6px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  color: #e0e9f2;
}


.mail-outbound-node > small {
  display: block;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;

  color: #879caf;
}


/* ============================================================
   CONTROL NODE
============================================================ */

.mail-outbound-node-control {
  border-color:
    rgba(35, 136, 255, .24);

  background:
    linear-gradient(
      145deg,
      rgba(35, 136, 255, .08),
      rgba(255, 255, 255, .018)
    );
}


/* ============================================================
   NODE CHECK
============================================================ */

.mail-outbound-node-check {
  position: absolute;

  top: 10px;
  right: 10px;

  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(39, 200, 137, .10);

  color: #48d29c;

  font-size: 7px;
}


/* ============================================================
   SCAN NODE
============================================================ */

.mail-outbound-node-scan {
  overflow: hidden;
}


.mail-outbound-scan-line {
  position: absolute;

  left: 8%;
  top: 20%;

  width: 84%;
  height: 1px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #24d3ee,
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(36, 211, 238, .55);

  animation:
    mailOutboundScan
    4s
    ease-in-out
    infinite;
}


/* ============================================================
   SERVER
============================================================ */

.mail-outbound-node-server {
  border-color:
    rgba(36, 211, 238, .16);
}


/* ============================================================
   INTERNET
============================================================ */

.mail-outbound-node-internet
.mail-outbound-node-icon {
  color: #30bcd5;

  border-color:
    rgba(36, 211, 238, .18);

  background:
    rgba(36, 211, 238, .06);
}


/* ============================================================
   CONNECTORS
============================================================ */

.mail-outbound-connector {
  position: relative;

  height: 20px;
}


.mail-outbound-line {
  position: absolute;

  left: 0;
  top: 50%;

  width: 100%;
  height: 1px;

  transform:
    translateY(-50%);

  background:
    linear-gradient(
      90deg,
      rgba(67, 113, 155, .35),
      rgba(35, 136, 255, .75),
      rgba(67, 113, 155, .35)
    );
}


/* ============================================================
   PACKET
============================================================ */

.mail-outbound-packet {
  position: absolute;
  z-index: 2;

  top: 50%;
  left: 0;

  width: 17px;
  height: 17px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  transform:
    translateY(-50%);

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #24c7e2
    );

  color: #ffffff;

  font-size: 5px;

  box-shadow:
    0 0 13px
    rgba(35, 136, 255, .35);

  opacity: 0;

  animation:
    mailOutboundPacket
    5.2s
    ease-in-out
    infinite;
}


.mail-outbound-packet-2 {
  animation-delay: 1.1s;
}


.mail-outbound-packet-3 {
  animation-delay: 2.2s;
}


.mail-outbound-packet-4 {
  animation-delay: 3.3s;
}


/* ============================================================
   ALERT
============================================================ */

.mail-outbound-alert {
  display: grid;

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

  align-items: center;

  gap: 18px;

  margin-top: 27px;

  padding: 18px 20px;

  border:
    1px solid
    rgba(240, 174, 73, .17);

  border-radius: 12px;

  background:
    linear-gradient(
      100deg,
      rgba(240, 174, 73, .055),
      rgba(255, 255, 255, .015)
    );
}


/* ============================================================
   ALERT ICON
============================================================ */

.mail-outbound-alert-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(240, 174, 73, .18);

  border-radius: 9px;

  background:
    rgba(240, 174, 73, .07);

  color: #eeb65c;

  font-size: 14px;
}


/* ============================================================
   ALERT CONTENT
============================================================ */

.mail-outbound-alert-content > span {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: .09em;

  color: #ae8957;
}


.mail-outbound-alert-content > strong {
  display: block;

  margin-bottom: 6px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;

  color: #e2e7ec;
}


.mail-outbound-alert-content p {
  max-width: 610px;

  margin: 0;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;

  color: #8fa1b3;
}


/* ============================================================
   ALERT GRAPH
============================================================ */

.mail-outbound-alert-graphic {
  position: relative;

  height: 65px;

  padding: 5px 8px;

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


.mail-outbound-bars {
  height: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-around;

  gap: 6px;
}


.mail-outbound-bars span {
  width: 12px;

  height:
    var(--bar-height);

  border-radius:
    3px 3px 0 0;

  background:
    linear-gradient(
      180deg,
      rgba(79, 164, 247, .9),
      rgba(35, 136, 255, .32)
    );

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


.mail-outbound-bars span:nth-last-child(-n+2) {
  background:
    linear-gradient(
      180deg,
      rgba(239, 177, 82, .9),
      rgba(239, 177, 82, .30)
    );
}


.mail-outbound-limit-line {
  position: absolute;

  left: 8px;
  right: 8px;

  top: 27%;

  height: 1px;

  border-top:
    1px dashed
    rgba(239, 177, 82, .45);
}


.mail-outbound-limit-line small {
  position: absolute;

  right: 0;
  top: -14px;

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

  letter-spacing: .08em;

  color: #c29a61;
}


/* ============================================================
   BENEFITS
============================================================ */

.mail-outbound-benefits {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 13px;

  margin-top: 22px;
}


.mail-outbound-benefit {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 15px;

  padding: 23px;

  border:
    1px solid
    rgba(104, 145, 184, .16);

  border-radius: 12px;

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


.mail-outbound-benefit-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(35, 136, 255, .20);

  border-radius: 9px;

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

  color: #49a3ff;

  font-size: 14px;
}


.mail-outbound-benefit-label {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .09em;

  color: #6c86a0;
}


.mail-outbound-benefit h3 {
  margin:
    0
    0
    7px;

  font-family:
    var(--mail-font);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  color: #e4edf5;
}


.mail-outbound-benefit p {
  margin: 0;

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

  color: #8fa3b6;
}


/* ============================================================
   FEATURED BENEFIT
============================================================ */

.mail-outbound-benefit-featured {
  border-color:
    rgba(36, 211, 238, .16);

  background:
    linear-gradient(
      130deg,
      rgba(36, 211, 238, .045),
      rgba(255, 255, 255, .018)
    );
}


.mail-outbound-benefit-featured
.mail-outbound-benefit-icon {
  color: #34bfd8;

  border-color:
    rgba(36, 211, 238, .18);

  background:
    rgba(36, 211, 238, .055);
}


/* ============================================================
   CTA — NUEVO
============================================================ */

.mail-outbound-cta {
  position: relative;
  z-index: 2;

  overflow: hidden;

  display: grid;

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

  align-items: center;

  gap: 20px;

  max-width: 960px;

  margin:
    42px
    auto
    0;

  padding:
    25px
    27px;

  border:
    1px solid
    rgba(75, 161, 218, .20);

  border-radius: 15px;

  background:
    linear-gradient(
      120deg,
      rgba(35, 136, 255, .075),
      rgba(36, 211, 238, .025)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .025);
}


/* ============================================================
   CTA GLOW
============================================================ */

.mail-outbound-cta-glow {
  position: absolute;

  top: 50%;
  right: -70px;

  width: 240px;
  height: 240px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .11),
      transparent 70%
    );
}


/* ============================================================
   CTA ICON
============================================================ */

.mail-outbound-cta-icon {
  position: relative;
  z-index: 2;

  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(73, 163, 255, .20);

  border-radius: 11px;

  background:
    rgba(35, 136, 255, .08);

  color: #4ca6ff;

  font-size: 17px;
}


/* ============================================================
   CTA CONTENT
============================================================ */

.mail-outbound-cta-content {
  position: relative;
  z-index: 2;

  min-width: 0;
}


.mail-outbound-cta-eyebrow {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .10em;

  color: #5798d5;
}


.mail-outbound-cta-content h3 {
  margin:
    0
    0
    5px;

  font-family:
    var(--mail-font);

  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;

  color: #e8f0f7;
}


.mail-outbound-cta-content p {
  max-width: 580px;

  margin: 0;

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

  color: #8fa4b7;
}


/* ============================================================
   CTA ACTION
============================================================ */

.mail-outbound-cta-action {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 7px;
}


.mail-outbound-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 50px;

  padding:
    0
    20px;

  border:
    1px solid
    #f27a24;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #ff8c36,
      #f27622
    );

  box-shadow:
    0 10px 25px
    rgba(239, 115, 30, .18);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  color: #ffffff;

  text-decoration: none;
  white-space: nowrap;

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


.mail-outbound-cta-button i {
  font-size: 10px;

  transition:
    transform .2s ease;
}


.mail-outbound-cta-plans {
  font-size: 9px;
  font-weight: 600;

  letter-spacing: .06em;

  color: #66829c;
}


/* ============================================================
   HOVER
============================================================ */

@media (hover: hover) {

  .mail-outbound-node:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(35, 136, 255, .24);

    background:
      rgba(35, 136, 255, .045);
  }


  .mail-outbound-cta-button:hover {
    transform:
      translateY(-2px);

    background:
      linear-gradient(
        135deg,
        #ff9746,
        #ee701b
      );

    box-shadow:
      0 14px 30px
      rgba(239, 115, 30, .25);

    color: #ffffff;
  }


  .mail-outbound-cta-button:hover i {
    transform:
      translateX(3px);
  }

}


/* ============================================================
   ANIMATION — PACKET
============================================================ */

@keyframes mailOutboundPacket {

  0% {
    left: 0;

    opacity: 0;

    transform:
      translate(-30%, -50%)
      scale(.75);
  }

  12% {
    opacity: 1;
  }

  65% {
    left: 100%;

    opacity: 1;

    transform:
      translate(-70%, -50%)
      scale(1);
  }

  82%,
  100% {
    left: 100%;

    opacity: 0;

    transform:
      translate(-70%, -50%)
      scale(.8);
  }

}


/* ============================================================
   ANIMATION — SCAN
============================================================ */

@keyframes mailOutboundScan {

  0%,
  15% {
    top: 20%;

    opacity: 0;
  }

  28% {
    opacity: .8;
  }

  65% {
    top: 82%;

    opacity: .8;
  }

  80%,
  100% {
    top: 82%;

    opacity: 0;
  }

}


/* ============================================================
   ANIMATION — STATUS
============================================================ */

@keyframes mailOutboundStatus {

  0% {
    box-shadow:
      0 0 0 0
      rgba(39, 200, 137, .34);
  }

  60% {
    box-shadow:
      0 0 0 6px
      rgba(39, 200, 137, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(39, 200, 137, 0);
  }

}


/* ============================================================
   ANIMATION — GRAPH
============================================================ */

@keyframes mailOutboundBars {

  0%,
  100% {
    opacity: .68;
  }

  50% {
    opacity: 1;
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1080px) {

  .mail-outbound {
    padding:
      90px 0;
  }


  .mail-outbound-flow {
    grid-template-columns:
      1fr
      30px
      1fr
      30px
      1fr
      30px
      1fr
      30px
      1fr;
  }


  .mail-outbound-node {
    min-height: 168px;

    padding:
      17px 10px;
  }


  .mail-outbound-node > span {
    font-size: 8px;
  }


  .mail-outbound-node > strong {
    font-size: 11px;
  }


  .mail-outbound-node > small {
    font-size: 9px;
  }


  .mail-outbound-cta {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap: 17px;
  }


  .mail-outbound-cta-action {
    grid-column: 2;

    align-items: flex-start;
  }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 880px) {

  .mail-outbound-header {
    max-width: 720px;

    margin-bottom: 48px;
  }


  .mail-outbound-intro {
    max-width: 680px;
  }


  .mail-outbound-flow {
    max-width: 520px;

    margin-inline: auto;

    grid-template-columns: 1fr;
  }


  .mail-outbound-node {
    width: 100%;
    min-height: auto;

    padding: 21px 18px;
  }


  .mail-outbound-node > span {
    font-size: 9px;
  }


  .mail-outbound-node > strong {
    font-size: 13px;
  }


  .mail-outbound-node > small {
    font-size: 11px;
  }


  .mail-outbound-connector {
    width: 1px;
    height: 34px;

    margin-inline: auto;
  }


  .mail-outbound-line {
    left: 0;
    top: 0;

    width: 1px;
    height: 100%;

    transform: none;

    background:
      linear-gradient(
        180deg,
        rgba(67, 113, 155, .35),
        rgba(35, 136, 255, .75),
        rgba(67, 113, 155, .35)
      );
  }


  .mail-outbound-packet {
    top: 0;
    left: 50%;

    animation:
      mailOutboundPacketMobile
      4.6s
      ease-in-out
      infinite;
  }


  .mail-outbound-packet-2 {
    animation-delay: 1s;
  }


  .mail-outbound-packet-3 {
    animation-delay: 2s;
  }


  .mail-outbound-packet-4 {
    animation-delay: 3s;
  }


  .mail-outbound-alert {
    grid-template-columns:
      auto
      1fr;
  }


  .mail-outbound-alert-graphic {
    grid-column:
      1 / -1;

    width: 100%;

    border-left: 0;

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

    padding-top: 14px;
  }


  .mail-outbound-alert-content > strong {
    font-size: 14px;
  }


  .mail-outbound-alert-content p {
    font-size: 11px;
  }


  .mail-outbound-benefits {
    grid-template-columns: 1fr;
  }

}


/* ============================================================
   MOBILE PACKET
============================================================ */

@keyframes mailOutboundPacketMobile {

  0% {
    top: 0;

    opacity: 0;

    transform:
      translate(-50%, -30%)
      scale(.75);
  }

  15% {
    opacity: 1;
  }

  68% {
    top: 100%;

    opacity: 1;

    transform:
      translate(-50%, -70%)
      scale(1);
  }

  85%,
  100% {
    top: 100%;

    opacity: 0;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-outbound {
    padding:
      72px 0;
  }


  /* HEADER */

  .mail-outbound-header {
    margin-bottom: 40px;
  }


  .mail-outbound-eyebrow {
    gap: 8px;

    font-size: 9px;
    letter-spacing: .10em;
  }


  .mail-outbound-eyebrow-line {
    width: 18px;
  }


  .mail-outbound-title {
    font-size:
      clamp(
        34px,
        9vw,
        42px
      );
  }


  .mail-outbound-title span {
    display: inline;
  }


  .mail-outbound-intro {
    margin-top: 20px;
  }


  .mail-outbound-intro p {
    font-size: 13px;
    line-height: 1.7;
  }


  .mail-outbound-claim {
    font-size:
      17px !important;
  }


  /* VISUAL */

  .mail-outbound-visual {
    padding: 18px;

    border-radius: 15px;
  }


  .mail-outbound-visual-top {
    align-items: flex-start;
    flex-direction: column;

    margin-bottom: 25px;
  }


  /* ALERT */

  .mail-outbound-alert {
    grid-template-columns: 1fr;

    padding: 17px;
  }


  .mail-outbound-alert-icon {
    width: 38px;
    height: 38px;
  }


  .mail-outbound-alert-graphic {
    grid-column: auto;
  }


  /* BENEFITS */

  .mail-outbound-benefit {
    padding: 19px;
  }


  .mail-outbound-benefit h3 {
    font-size: 15px;
  }


  .mail-outbound-benefit p {
    font-size: 12px;
  }


  /* CTA */

  .mail-outbound-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 15px;

    margin-top: 34px;

    padding:
      23px
      20px;

    border-radius: 13px;
  }


  .mail-outbound-cta-icon {
    width: 45px;
    height: 45px;
  }


  .mail-outbound-cta-content h3 {
    font-size: 17px;
  }


  .mail-outbound-cta-content p {
    font-size: 12px;
  }


  .mail-outbound-cta-action {
    width: 100%;

    align-items: stretch;
  }


  .mail-outbound-cta-button {
    width: 100%;

    min-height: 52px;
  }


  .mail-outbound-cta-plans {
    text-align: center;
  }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-outbound-packet,
  .mail-outbound-scan-line,
  .mail-outbound-live > span,
  .mail-outbound-bars span {
    animation: none;
  }


  .mail-outbound-node,
  .mail-outbound-cta-button,
  .mail-outbound-cta-button i {
    transition: none;
  }

}


/****/

/* ============================================================
   6. PANEL DE ADMINISTRACIÓN PARA SUS CUENTAS DE CORREO
   CORREO PROFESIONAL GESTIONADO — NEOTHEK
============================================================ */

.mail-admin {
  position: relative;
  overflow: hidden;

  padding: 108px 0 104px;

  font-family: var(--mail-font);

  color: #152338;

  background:
    radial-gradient(
      circle at 8% 16%,
      rgba(35,136,255,.055),
      transparent 25%
    ),
    radial-gradient(
      circle at 91% 76%,
      rgba(36,211,238,.045),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #f8fbfe 0%,
      #f3f7fb 100%
    );
}


/* ============================================================
   DECORATIVE BACKGROUND
============================================================ */

.mail-admin::before {
  content: "";

  position: absolute;

  width: 560px;
  height: 560px;

  left: -350px;
  bottom: -280px;

  border-radius: 50%;

  border:
    1px solid
    rgba(35,136,255,.055);

  box-shadow:
    0 0 0 85px rgba(35,136,255,.015),
    0 0 0 170px rgba(35,136,255,.01);

  pointer-events: none;
}


/* ============================================================
   HEADER — CENTRADO
============================================================ */

.mail-admin-header {
  position: relative;
  z-index: 2;

  max-width: 900px;

  margin:
    0
    auto
    64px;

  text-align: center;
}


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

.mail-admin-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin:
    0
    0
    18px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: .14em;

  color: #0871df;
}


.mail-admin-eyebrow-line {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24d3ee
    );
}


.mail-admin-eyebrow-line:last-child {
  background:
    linear-gradient(
      90deg,
      #24d3ee,
      #2388ff
    );
}


/* ============================================================
   TITLE
============================================================ */

.mail-admin-title {
  max-width: 820px;

  margin:
    0
    auto;

  font-family: var(--mail-font);

  font-size:
    clamp(
      40px,
      4vw,
      54px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #111d2e;
}


.mail-admin-title span {
  display: block;

  color: #1677e8;
}


/* ============================================================
   INTRO
============================================================ */

.mail-admin-intro {
  max-width: 710px;

  margin:
    24px
    auto
    0;
}


.mail-admin-intro p {
  margin:
    0
    auto;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.72;

  color: #687d92;
}


.mail-admin-claim {
  margin-bottom:
    12px !important;

  font-size:
    18px !important;

  font-weight:
    600 !important;

  line-height:
    1.48 !important;

  color:
    #263d55 !important;
}


.mail-admin-claim span {
  color: #1677e8;
}


/* ============================================================
   WORKSPACE
============================================================ */

.mail-admin-workspace {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    44px
    minmax(320px, .72fr);

  gap: 25px;

  align-items: stretch;
}


/* ============================================================
   CLIENT / NEOTHEK WRAPPER
============================================================ */

.mail-admin-client,
.mail-admin-neothek {
  min-width: 0;
}


/* ============================================================
   SIDE HEADER
============================================================ */

.mail-admin-side-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 11px;
}


.mail-admin-side-icon {
  width: 46px;
  height: 46px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 10px;

  font-size: 15px;
}


.mail-admin-side-icon--client {
  border:
    1px solid
    #d2e7fa;

  background: #edf7ff;

  color: #167ce1;
}


.mail-admin-side-icon--neothek {
  border:
    1px solid
    rgba(35,136,255,.18);

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #1472d8
    );

  color: #ffffff;

  box-shadow:
    0 8px 20px
    rgba(35,136,255,.18);
}


.mail-admin-side-head span {
  display: block;

  margin-bottom: 4px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .12em;

  color: #8195a9;
}


.mail-admin-side-head h3 {
  margin: 0;

  font-family: var(--mail-font);

  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;

  color: #243a51;
}


/* ============================================================
   SIDE DESCRIPTION
============================================================ */

.mail-admin-side-description {
  max-width: 530px;

  min-height: 48px;

  margin:
    0
    0
    21px;

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

  color: #74889c;
}


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

.mail-admin-panel {
  overflow: hidden;

  border:
    1px solid
    #d9e5ef;

  border-radius: 15px;

  background: #ffffff;

  box-shadow:
    0 22px 48px
    rgba(35,72,108,.08);
}


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

.mail-admin-panel-top {
  display: flex;

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

  gap: 20px;

  min-height: 68px;

  padding:
    13px
    17px;

  border-bottom:
    1px solid
    #e8eef4;

  background: #fbfdff;
}


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

.mail-admin-panel-brand {
  display: flex;
  align-items: center;

  gap: 11px;
}


.mail-admin-panel-logo {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #1874d5
    );

  color: #ffffff;

  font-size: 13px;
}


.mail-admin-panel-brand span,
.mail-admin-panel-brand strong {
  display: block;
}


.mail-admin-panel-brand span {
  margin-bottom: 3px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .09em;

  color: #8297aa;
}


.mail-admin-panel-brand strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  color: #30475e;
}


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

.mail-admin-panel-user {
  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    7px
    10px;

  border:
    1px solid
    #e1eaf2;

  border-radius: 6px;

  background: #ffffff;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;

  color: #657c92;
}


.mail-admin-panel-status {
  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #28b77b;
}


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

.mail-admin-panel-body {
  display: grid;

  grid-template-columns:
    58px
    1fr;

  min-height: 325px;
}


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

.mail-admin-panel-nav {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding:
    17px
    8px;

  border-right:
    1px solid
    #e8eef4;

  background: #f8fbfd;
}


.mail-admin-nav-item {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  color: #93a6b7;

  font-size: 12px;
}


.mail-admin-nav-item--active {
  background: #eaf5ff;

  color: #167ce1;
}


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

.mail-admin-panel-content {
  min-width: 0;

  padding: 19px;
}


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

.mail-admin-panel-heading {
  display: flex;

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

  gap: 15px;

  margin-bottom: 16px;
}


.mail-admin-panel-heading span,
.mail-admin-panel-heading strong {
  display: block;
}


.mail-admin-panel-heading > div > span {
  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .10em;

  color: #8298aa;
}


.mail-admin-panel-heading > div > strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  color: #2d4359;
}


/* ============================================================
   ADD ACCOUNT
============================================================ */

.mail-admin-add-account {
  display: inline-flex !important;
  align-items: center;

  gap: 7px;

  padding:
    8px
    11px;

  border-radius: 6px;

  background: #2388ff;

  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3;

  letter-spacing: 0 !important;

  box-shadow:
    0 5px 13px
    rgba(35,136,255,.16);
}


/* ============================================================
   ACCOUNT
============================================================ */

.mail-admin-account {
  display: grid;

  grid-template-columns:
    auto
    minmax(155px, 1fr)
    130px
    auto;

  gap: 12px;

  align-items: center;

  min-height: 70px;

  padding:
    12px
    13px;

  margin-bottom: 8px;

  border:
    1px solid
    #e7edf3;

  border-radius: 9px;

  background: #ffffff;

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


/* ============================================================
   AVATAR
============================================================ */

.mail-admin-account-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: #edf6ff;

  color: #217fd8;

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


/* ============================================================
   ACCOUNT INFO
============================================================ */

.mail-admin-account-info {
  min-width: 0;
}


.mail-admin-account-info strong,
.mail-admin-account-info span {
  display: block;
}


.mail-admin-account-info strong {
  overflow: hidden;

  margin-bottom: 4px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #344a60;
}


.mail-admin-account-info span {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;

  color: #7e93a6;
}


/* ============================================================
   STORAGE
============================================================ */

.mail-admin-storage-label {
  display: flex;

  justify-content: space-between;

  gap: 8px;

  margin-bottom: 6px;
}


.mail-admin-storage-label span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  color: #536b82;
}


.mail-admin-storage-label small {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;

  color: #8fa2b3;
}


.mail-admin-storage-bar {
  position: relative;
  overflow: hidden;

  height: 5px;

  border-radius: 10px;

  background: #edf2f6;
}


.mail-admin-storage-bar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24c5e3
    );
}


/* ============================================================
   ACCOUNT MENU
============================================================ */

.mail-admin-account-menu {
  color: #8fa1b1;

  font-size: 13px;
}


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

.mail-admin-panel-footer {
  display: flex;

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

  gap: 15px;

  margin-top: 14px;

  padding-top: 13px;

  border-top:
    1px solid
    #edf1f5;
}


.mail-admin-panel-footer span {
  display: flex;
  align-items: center;

  gap: 6px;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;

  color: #7b90a4;
}


.mail-admin-panel-footer i {
  font-size: 6px;

  color: #2ab57b;
}


/* ============================================================
   CLIENT ACTIONS
============================================================ */

.mail-admin-client-actions {
  display: grid;

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

  gap: 9px;

  margin-top: 13px;
}


/* ============================================================
   ACTION
============================================================ */

.mail-admin-action {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
  min-height: 67px;

  padding:
    13px
    12px;

  border:
    1px solid
    #e0e9f1;

  border-radius: 9px;

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

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


.mail-admin-action > i {
  width: 30px;

  flex: 0 0 auto;

  text-align: center;

  color: #2683dd;

  font-size: 13px;
}


.mail-admin-action span {
  min-width: 0;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;

  color: #7f93a6;
}


.mail-admin-action strong {
  display: block;

  margin-bottom: 3px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;

  color: #415970;
}


/* ============================================================
   CENTER DIVIDER
============================================================ */

.mail-admin-divider {
  display: flex;
  flex-direction: column;

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

  gap: 10px;

  padding-top: 100px;
}


.mail-admin-divider-line {
  width: 1px;

  flex: 1;

  min-height: 80px;

  background:
    linear-gradient(
      transparent,
      #d4e2ed,
      #d4e2ed
    );
}


.mail-admin-divider-line:last-child {
  background:
    linear-gradient(
      #d4e2ed,
      #d4e2ed,
      transparent
    );
}


.mail-admin-divider-badge {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border:
    1px solid
    #d6e5f1;

  border-radius: 50%;

  background: #ffffff;

  color: #4d8bc7;

  font-size: 10px;

  box-shadow:
    0 5px 15px
    rgba(36,74,110,.07);
}


/* ============================================================
   NEOTHEK MANAGED BOX
============================================================ */

.mail-admin-managed {
  position: relative;
  overflow: hidden;

  min-height: 450px;

  padding: 20px;

  border:
    1px solid
    #d6e4ef;

  border-radius: 15px;

  background:
    linear-gradient(
      150deg,
      #ffffff 0%,
      #f4f9fd 100%
    );

  box-shadow:
    0 22px 48px
    rgba(35,72,108,.07);
}


/* ============================================================
   MANAGED HEAD
============================================================ */

.mail-admin-managed-head {
  position: relative;
  z-index: 2;

  display: flex;

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

  gap: 15px;

  padding-bottom: 15px;

  border-bottom:
    1px solid
    #e6edf3;
}


.mail-admin-managed-head span,
.mail-admin-managed-head strong {
  display: block;
}


.mail-admin-managed-head > div > span {
  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .10em;

  color: #8097aa;
}


.mail-admin-managed-head > div > strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  color: #30475e;
}


/* ============================================================
   MANAGED STATUS
============================================================ */

.mail-admin-managed-status {
  display: flex !important;
  align-items: center;

  gap: 7px;

  padding:
    7px
    9px;

  border:
    1px solid
    rgba(38,181,122,.16);

  border-radius: 20px;

  background:
    rgba(38,181,122,.055);

  color: #278f66 !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.3;

  letter-spacing: 0 !important;
}


.mail-admin-managed-status i {
  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #28b77b;

  animation:
    mailAdminStatusPulse
    2.8s
    ease-out
    infinite;
}


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

.mail-admin-server-visual {
  position: relative;

  width: 110px;
  height: 110px;

  display: grid;
  place-items: center;

  margin:
    15px
    auto;
}


/* ============================================================
   SERVER RINGS
============================================================ */

.mail-admin-server-ring {
  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(35,136,255,.12);
}


.mail-admin-server-ring--one {
  width: 106px;
  height: 106px;

  animation:
    mailAdminRing
    4.5s
    ease-in-out
    infinite;
}


.mail-admin-server-ring--two {
  width: 76px;
  height: 76px;

  border-color:
    rgba(36,196,227,.18);

  background:
    rgba(35,136,255,.025);
}


/* ============================================================
   SERVER CORE
============================================================ */

.mail-admin-server-core {
  position: relative;
  z-index: 2;

  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #1772d4
    );

  color: #ffffff;

  font-size: 17px;

  box-shadow:
    0 10px 25px
    rgba(35,136,255,.22);
}


.mail-admin-server-core span {
  position: absolute;

  right: 7px;
  bottom: 7px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  border:
    1px solid
    #ffffff;

  background: #39d391;
}


/* ============================================================
   MANAGED LIST
============================================================ */

.mail-admin-managed-list {
  display: grid;

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

  gap: 8px;
}


/* ============================================================
   MANAGED ITEM
============================================================ */

.mail-admin-managed-item {
  display: grid;

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

  gap: 9px;

  align-items: center;

  min-height: 64px;

  padding: 11px;

  border:
    1px solid
    #e2eaf1;

  border-radius: 8px;

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

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


.mail-admin-managed-item > i:first-child {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background: #edf7ff;

  color: #2582dd;

  font-size: 11px;
}


.mail-admin-managed-item span {
  min-width: 0;

  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.45;

  color: #7e92a5;
}


.mail-admin-managed-item strong {
  display: block;

  margin-bottom: 2px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;

  color: #405970;
}


.mail-admin-managed-check {
  color: #28ae78 !important;

  font-size: 11px !important;
}


/* ============================================================
   FEATURED MANAGED ITEM
============================================================ */

.mail-admin-managed-item--featured {
  border-color:
    rgba(35,136,255,.18);

  background:
    linear-gradient(
      110deg,
      rgba(35,136,255,.055),
      rgba(255,255,255,.88)
    );
}


/* ============================================================
   CLOSING MESSAGE
============================================================ */

.mail-admin-closing {
  position: relative;
  z-index: 2;

  max-width: 790px;

  display: flex;

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

  gap: 14px;

  margin:
    36px
    auto
    0;

  padding:
    18px
    23px;

  border:
    1px solid
    #dbe7f0;

  border-radius: 11px;

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

  box-shadow:
    0 8px 25px
    rgba(38,73,108,.045);
}


/* ============================================================
   CLOSING ICON
============================================================ */

.mail-admin-closing-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #1875d8
    );

  color: #ffffff;

  font-size: 11px;
}


/* ============================================================
   CLOSING TEXT
============================================================ */

.mail-admin-closing span {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .11em;

  color: #8195a8;
}


.mail-admin-closing strong {
  display: block;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;

  color: #344b61;
}


.mail-admin-closing em {
  font-style: normal;

  color: #1677e8;
}


/* ============================================================
   CTA — PLANES
============================================================ */

.mail-admin-cta {
  position: relative;
  z-index: 2;

  overflow: hidden;

  max-width: 980px;

  display: grid;

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

  align-items: center;

  gap: 20px;

  margin:
    20px
    auto
    0;

  padding:
    25px
    27px;

  border:
    1px solid
    rgba(35,136,255,.16);

  border-radius: 14px;

  background:
    linear-gradient(
      120deg,
      #ffffff 0%,
      #f6fbff 58%,
      #eef7ff 100%
    );

  box-shadow:
    0 15px 38px
    rgba(35,72,108,.065);
}


/* ============================================================
   CTA DECORATION
============================================================ */

.mail-admin-cta-decoration {
  position: absolute;

  top: 50%;
  right: -75px;

  width: 260px;
  height: 260px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(35,136,255,.09),
      transparent 68%
    );
}


/* ============================================================
   CTA ICON
============================================================ */

.mail-admin-cta-icon {
  position: relative;
  z-index: 2;

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    #d2e7fa;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #edf7ff,
      #e7f4ff
    );

  color: #167ce1;

  font-size: 17px;
}


/* ============================================================
   CTA CONTENT
============================================================ */

.mail-admin-cta-content {
  position: relative;
  z-index: 2;

  min-width: 0;
}


.mail-admin-cta-eyebrow {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .11em;

  color: #3682c9;
}


.mail-admin-cta-content h3 {
  margin:
    0
    0
    6px;

  font-family: var(--mail-font);

  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: -.01em;

  color: #263d55;
}


.mail-admin-cta-content p {
  max-width: 590px;

  margin: 0;

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

  color: #74899d;
}


/* ============================================================
   CTA ACTION
============================================================ */

.mail-admin-cta-action {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 7px;
}


.mail-admin-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 50px;

  padding:
    0
    21px;

  border:
    1px solid
    #ef7622;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #ff8c36,
      #f27622
    );

  box-shadow:
    0 10px 24px
    rgba(239,115,30,.18);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  color: #ffffff;

  text-decoration: none;
  white-space: nowrap;

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


.mail-admin-cta-button i {
  font-size: 10px;

  transition:
    transform .2s ease;
}


.mail-admin-cta-note {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .05em;

  color: #8195a8;
}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover) {

  .mail-admin-account:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(35,136,255,.24);

    box-shadow:
      0 7px 17px
      rgba(35,78,119,.055);
  }


  .mail-admin-action:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(35,136,255,.20);

    background: #ffffff;
  }


  .mail-admin-managed-item:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(35,136,255,.20);

    background: #ffffff;
  }


  .mail-admin-cta-button:hover {
    transform:
      translateY(-2px);

    background:
      linear-gradient(
        135deg,
        #ff9746,
        #ee701b
      );

    box-shadow:
      0 14px 30px
      rgba(239,115,30,.25);

    color: #ffffff;
  }


  .mail-admin-cta-button:hover i {
    transform:
      translateX(3px);
  }

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailAdminStatusPulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(40,183,123,.30);
  }

  60% {
    box-shadow:
      0 0 0 6px
      rgba(40,183,123,0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(40,183,123,0);
  }

}


@keyframes mailAdminRing {

  0%,
  100% {
    transform:
      scale(.96);

    opacity: .45;
  }

  50% {
    transform:
      scale(1.04);

    opacity: .9;
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-admin {
    padding:
      90px 0;
  }


  .mail-admin-workspace {
    grid-template-columns:
      minmax(0, 1fr)
      35px
      minmax(300px, .72fr);

    gap: 18px;
  }


  .mail-admin-client-actions {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .mail-admin-managed-list {
    grid-template-columns: 1fr;
  }


  .mail-admin-managed {
    min-height: auto;
  }


  .mail-admin-cta {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap: 17px;
  }


  .mail-admin-cta-action {
    grid-column: 2;

    align-items: flex-start;
  }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 900px) {

  .mail-admin-header {
    max-width: 760px;

    margin-bottom: 50px;
  }


  .mail-admin-intro {
    max-width: 680px;
  }


  .mail-admin-workspace {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .mail-admin-divider {
    flex-direction: row;

    padding: 0;
  }


  .mail-admin-divider-line {
    width: auto;
    height: 1px;

    min-height: 0;
    min-width: 80px;

    background:
      linear-gradient(
        90deg,
        transparent,
        #d4e2ed,
        #d4e2ed
      );
  }


  .mail-admin-divider-line:last-child {
    background:
      linear-gradient(
        90deg,
        #d4e2ed,
        #d4e2ed,
        transparent
      );
  }


  .mail-admin-neothek {
    max-width: 650px;
  }


  .mail-admin-managed-list {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

  .mail-admin {
    padding:
      70px 0;
  }


  /* HEADER */

  .mail-admin-header {
    margin-bottom: 42px;
  }


  .mail-admin-eyebrow {
    gap: 8px;

    font-size: 9px;

    letter-spacing: .10em;
  }


  .mail-admin-eyebrow-line {
    width: 18px;
  }


  .mail-admin-title {
    font-size:
      clamp(
        33px,
        9vw,
        40px
      );
  }


  .mail-admin-title span {
    display: inline;
  }


  .mail-admin-intro {
    margin-top: 20px;
  }


  .mail-admin-intro p {
    font-size: 13px;
  }


  .mail-admin-claim {
    font-size:
      17px !important;
  }


  .mail-admin-claim span {
    display: block;
  }


  /* CONTENT */

  .mail-admin-side-description {
    font-size: 14px;
  }


  .mail-admin-panel-top {
    align-items: flex-start;
    flex-direction: column;
  }


  .mail-admin-panel-brand strong {
    font-size: 13px;
  }


  .mail-admin-panel-body {
    grid-template-columns: 1fr;
  }


  .mail-admin-panel-nav {
    flex-direction: row;

    justify-content: center;

    padding: 8px;

    border-right: 0;

    border-bottom:
      1px solid
      #e8eef4;
  }


  .mail-admin-panel-content {
    padding: 14px;
  }


  .mail-admin-panel-heading {
    align-items: flex-start;

    flex-direction: column;
  }


  .mail-admin-account {
    grid-template-columns:
      auto
      1fr
      auto;
  }


  .mail-admin-account-info strong {
    font-size: 12px;
  }


  .mail-admin-account-info span {
    font-size: 11px;
  }


  .mail-admin-account-storage {
    grid-column:
      2 / 4;
  }


  .mail-admin-client-actions {
    grid-template-columns: 1fr;
  }


  .mail-admin-action span {
    font-size: 12px;
  }


  .mail-admin-action strong {
    font-size: 13px;
  }


  .mail-admin-managed-list {
    grid-template-columns: 1fr;
  }


  .mail-admin-managed-item span {
    font-size: 11px;
  }


  .mail-admin-managed-item strong {
    font-size: 12.5px;
  }


  /* CLOSING */

  .mail-admin-closing {
    align-items: flex-start;

    justify-content: flex-start;
  }


  /* CTA */

  .mail-admin-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 15px;

    margin-top: 18px;

    padding:
      23px
      20px;

    border-radius: 13px;
  }


  .mail-admin-cta-icon {
    width: 46px;
    height: 46px;
  }


  .mail-admin-cta-content h3 {
    font-size: 18px;
  }


  .mail-admin-cta-content p {
    font-size: 12px;
  }


  .mail-admin-cta-action {
    width: 100%;

    align-items: stretch;
  }


  .mail-admin-cta-button {
    width: 100%;

    min-height: 52px;
  }


  .mail-admin-cta-note {
    text-align: center;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

  .mail-admin-panel-user {
    width: 100%;

    justify-content: center;
  }


  .mail-admin-account {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
  }


  .mail-admin-account-info strong {
    white-space: normal;

    word-break: break-word;
  }


  .mail-admin-panel-footer {
    align-items: flex-start;

    flex-direction: column;

    gap: 7px;
  }


  .mail-admin-managed-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .mail-admin-closing strong {
    font-size: 15px;
  }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-admin-managed-status i,
  .mail-admin-server-ring {
    animation: none;
  }


  .mail-admin-account,
  .mail-admin-action,
  .mail-admin-managed-item,
  .mail-admin-cta-button,
  .mail-admin-cta-button i {
    transition: none;
  }

}


/* ============================================================
  7. CORREO EMPRESARIAL SIN LICENCIAS POR USUARIO
============================================================ */

.mail-capacity {

  position: relative;
  overflow: hidden;

  padding: 110px 0 106px;

  font-family: var(--mail-font);

  color: #eef6ff;

  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(35,136,255,.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 12% 85%,
      rgba(30,194,219,.08),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #101d2b 0%,
      #10263a 52%,
      #0c1a28 100%
    );

}


/* ============================================================
   BACKGROUND DETAIL
============================================================ */

.mail-capacity::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: .20;

  pointer-events: none;

  background-image:

    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

}


/* ============================================================
   DECORATIVE GLOW
============================================================ */

.mail-capacity::after {

  content: "";

  position: absolute;

  width: 460px;
  height: 460px;

  right: -260px;
  top: 100px;

  border-radius: 50%;

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

  box-shadow:
    0 0 0 80px rgba(35,136,255,.018),
    0 0 0 160px rgba(35,136,255,.01);

  pointer-events: none;

}


/* ============================================================
   HEADER
============================================================ */

.mail-capacity-header {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, .76fr);

  gap: 90px;

  align-items: end;

  margin-bottom: 48px;

}


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

.mail-capacity-eyebrow {

  display: flex;
  align-items: center;

  gap: 11px;

  margin:
    0
    0
    18px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: .14em;

  color: #5bb1ff;

}


.mail-capacity-eyebrow-line {

  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25d0e8
    );

}


/* ============================================================
   TITLE
============================================================ */

.mail-capacity-title {

  max-width: 730px;

  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      39px,
      3.3vw,
      51px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #f4f8fc;

}


.mail-capacity-title span {

  display: block;

  color: #4da7ff;

}


/* ============================================================
   INTRO
============================================================ */

.mail-capacity-intro {

  max-width: 480px;

}


.mail-capacity-intro p {

  margin: 0;

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

  color: #93a8bc;

}


.mail-capacity-claim {

  margin-bottom:
    13px !important;

  font-size:
    18px !important;

  font-weight:
    600 !important;

  line-height:
    1.5 !important;

  color:
    #eaf3fb !important;

}


/* ============================================================
   COMMERCIAL MESSAGE
============================================================ */

.mail-capacity-message {

  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 18px;

  margin-bottom: 24px;

  padding:
    20px 22px;

  border:
    1px solid
    rgba(78,161,241,.20);

  border-radius: 14px;

  background:
    linear-gradient(
      100deg,
      rgba(35,136,255,.10),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

}


/* ============================================================
   MESSAGE ICON
============================================================ */

.mail-capacity-message-icon {

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(69,159,245,.23);

  border-radius: 11px;

  background:
    rgba(35,136,255,.09);

  color: #52a9ff;

  font-size: 16px;

}


/* ============================================================
   MESSAGE CONTENT
============================================================ */

.mail-capacity-message-content > span {

  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .11em;

  color: #6689a8;

}


.mail-capacity-message-content strong {

  display: block;

  margin-bottom: 4px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;

  color: #e6f0f8;

}


.mail-capacity-message-content p {

  margin: 0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;

  color: #8ca1b5;

}


/* ============================================================
   MESSAGE BADGE
============================================================ */

.mail-capacity-message-badge {

  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 190px;

  padding:
    12px 15px;

  border:
    1px solid
    rgba(39,199,137,.18);

  border-radius: 10px;

  background:
    rgba(39,199,137,.055);

  color: #51d39f;

}


.mail-capacity-message-badge > i {

  font-size: 17px;

}


.mail-capacity-message-badge span {

  display: block;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;

  color: #8fb8a8;

}


.mail-capacity-message-badge strong {

  display: block;

  margin-bottom: 1px;

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

  color: #6cdbaf;

}


/* ============================================================
   WORKSPACE
============================================================ */

.mail-capacity-workspace {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(300px, .75fr)
    80px
    minmax(0, 1.2fr);

  align-items: stretch;

  gap: 0;

}


/* ============================================================
   POOL / DISTRIBUTION
============================================================ */

.mail-capacity-pool,
.mail-capacity-distribution {

  position: relative;

  padding: 25px;

  border:
    1px solid
    rgba(113,156,196,.16);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(20,43,64,.94),
      rgba(12,29,44,.94)
    );

  box-shadow:
    0 24px 55px
    rgba(0,0,0,.13),
    inset 0 1px 0
    rgba(255,255,255,.025);

}


/* ============================================================
   POOL HEAD
============================================================ */

.mail-capacity-pool-head,
.mail-capacity-distribution-head {

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 18px;

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

}


.mail-capacity-pool-head span,
.mail-capacity-distribution-head span {

  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .10em;

  color: #65809a;

}


.mail-capacity-pool-head h3,
.mail-capacity-distribution-head h3 {

  margin: 0;

  font-family: var(--mail-font);

  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;

  color: #e1ebf4;

}


/* ============================================================
   POOL STATUS
============================================================ */

.mail-capacity-pool-status {

  display: flex;
  align-items: center;

  gap: 7px;

  flex: 0 0 auto;

  padding:
    7px
    10px;

  border:
    1px solid
    rgba(39,199,137,.16);

  border-radius: 20px;

  background:
    rgba(39,199,137,.05);

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

  color: #57cfa0;

}


.mail-capacity-pool-status span {

  width: 6px;
  height: 6px;

  margin: 0;

  border-radius: 50%;

  background: #35ca91;

  animation:
    mailCapacityStatus
    2.8s
    ease-out
    infinite;

}


/* ============================================================
   SERVER
============================================================ */

.mail-capacity-server {

  position: relative;

  width: 150px;
  height: 150px;

  display: grid;

  place-items: center;

  margin:
    27px
    auto
    18px;

}


/* ============================================================
   SERVER RINGS
============================================================ */

.mail-capacity-server-ring {

  position: absolute;

  border-radius: 50%;

}


.mail-capacity-server-ring--outer {

  width: 145px;
  height: 145px;

  border:
    1px solid
    rgba(55,151,240,.12);

  animation:
    mailCapacityRing
    5s
    ease-in-out
    infinite;

}


.mail-capacity-server-ring--inner {

  width: 105px;
  height: 105px;

  border:
    1px solid
    rgba(35,197,224,.16);

  background:
    radial-gradient(
      circle,
      rgba(35,136,255,.08),
      transparent 70%
    );

}


/* ============================================================
   SERVER CORE
============================================================ */

.mail-capacity-server-core {

  position: relative;
  z-index: 2;

  width: 65px;
  height: 65px;

  display: grid;

  place-items: center;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #146dca
    );

  color: #ffffff;

  font-size: 21px;

  box-shadow:
    0 13px 30px
    rgba(35,136,255,.25);

}


.mail-capacity-server-core span {

  position: absolute;

  right: 9px;
  bottom: 9px;

  width: 7px;
  height: 7px;

  border:
    1px solid
    #ffffff;

  border-radius: 50%;

  background: #3ad396;

}


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

.mail-capacity-pool-copy {

  max-width: 320px;

  margin:
    0
    auto
    24px;

  text-align: center;

}


.mail-capacity-pool-copy strong {

  display: block;

  margin-bottom: 7px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;

  color: #e2edf6;

}


.mail-capacity-pool-copy p {

  margin: 0;

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

  color: #8198ad;

}


/* ============================================================
   TOTAL CAPACITY
============================================================ */

.mail-capacity-total {

  padding:
    16px;

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

  border-radius: 11px;

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

}


.mail-capacity-total-head {

  display: flex;

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

  gap: 15px;

  margin-bottom: 11px;

}


.mail-capacity-total-head span {

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

  letter-spacing: .09em;

  color: #668098;

}


.mail-capacity-total-head strong {

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

  color: #b8cad9;

}


/* ============================================================
   TOTAL BAR
============================================================ */

.mail-capacity-total-bar {

  display: flex;

  gap: 3px;

  overflow: hidden;

  height: 10px;

  margin-bottom: 11px;

  border-radius: 20px;

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

}


.mail-capacity-segment {

  display: block;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #389cf6
    );

}


.mail-capacity-segment--1 {
  width: 17%;
}

.mail-capacity-segment--2 {
  width: 22%;
}

.mail-capacity-segment--3 {
  width: 14%;
}

.mail-capacity-segment--4 {
  width: 11%;
}

.mail-capacity-segment--5 {
  width: 6%;
}


.mail-capacity-segment--free {

  flex: 1;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.07) 4px,
      rgba(255,255,255,.025) 4px,
      rgba(255,255,255,.025) 8px
    );

}


/* ============================================================
   TOTAL LEGEND
============================================================ */

.mail-capacity-total-legend {

  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    15px;

}


.mail-capacity-total-legend span {

  display: flex;
  align-items: center;

  gap: 6px;

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

  color: #7f94a8;

}


.mail-capacity-total-legend i {

  font-size: 7px;

  color: #3e9af1;

}


.mail-capacity-total-legend span:last-child i {

  color: #70859a;

}


/* ============================================================
   TRANSFER
============================================================ */

.mail-capacity-transfer {

  position: relative;

  display: flex;

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

  min-width: 80px;

}


/* ============================================================
   TRANSFER LINE
============================================================ */

.mail-capacity-transfer-line {

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(35,136,255,.20),
      rgba(35,136,255,.75),
      rgba(35,136,255,.20)
    );

}


/* ============================================================
   TRANSFER PACKETS
============================================================ */

.mail-capacity-transfer-packet {

  position: absolute;

  left: 0;
  top: 50%;

  width: 21px;
  height: 21px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #26bfdc
    );

  color: #ffffff;

  font-size: 7px;

  opacity: 0;

  box-shadow:
    0 0 15px
    rgba(35,136,255,.30);

  animation:
    mailCapacityTransfer
    5.5s
    ease-in-out
    infinite;

}


.mail-capacity-transfer-packet--2 {

  animation-delay: 1.7s;

}


.mail-capacity-transfer-packet--3 {

  animation-delay: 3.4s;

}


/* ============================================================
   DISTRIBUTION HEAD
============================================================ */

.mail-capacity-adjust {

  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(35,136,255,.18);

  border-radius: 9px;

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

  color: #4da4f7;

  font-size: 13px;

}


/* ============================================================
   DISTRIBUTION DESCRIPTION
============================================================ */

.mail-capacity-distribution-description {

  margin:
    17px
    0
    18px;

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

  color: #859bad;

}


/* ============================================================
   MAILBOX
============================================================ */

.mail-capacity-mailbox {

  display: grid;

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

  align-items: center;

  gap: 13px;

  min-height: 77px;

  margin-bottom: 9px;

  padding:
    13px
    15px;

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

  border-radius: 10px;

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

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

}


/* ============================================================
   PRIMARY MAILBOX
============================================================ */

.mail-capacity-mailbox--primary {

  border-color:
    rgba(35,136,255,.20);

  background:
    linear-gradient(
      100deg,
      rgba(35,136,255,.07),
      rgba(255,255,255,.02)
    );

}


/* ============================================================
   MAILBOX ICON
============================================================ */

.mail-capacity-mailbox-icon {

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(35,136,255,.18);

  border-radius: 9px;

  background:
    rgba(35,136,255,.065);

  color: #4aa4f8;

  font-size: 14px;

}


/* ============================================================
   MAILBOX INFO
============================================================ */

.mail-capacity-mailbox-info {

  min-width: 0;

}


/* ============================================================
   MAILBOX HEAD
============================================================ */

.mail-capacity-mailbox-head {

  display: flex;

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

  gap: 20px;

  margin-bottom: 8px;

}


.mail-capacity-mailbox-head > span {

  display: block;

  min-width: 0;

  overflow: hidden;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #71899e;

}


.mail-capacity-mailbox-head strong {

  display: block;

  margin-bottom: 2px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;

  color: #dbe7f1;

}


.mail-capacity-mailbox-head b {

  flex: 0 0 auto;

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

  color: #62aff8;

}


/* ============================================================
   MAILBOX BAR
============================================================ */

.mail-capacity-mailbox-bar {

  position: relative;

  overflow: hidden;

  height: 6px;

  border-radius: 20px;

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

}


.mail-capacity-mailbox-bar span {

  display: block;

  width:
    var(--capacity-width);

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #26bfdc
    );

  transform-origin: left;

  animation:
    mailCapacityBar
    1.1s
    ease-out
    both;

}


/* ============================================================
   FLEXIBILITY MESSAGE
============================================================ */

.mail-capacity-flex {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 15px;

  padding:
    13px
    15px;

  border:
    1px dashed
    rgba(81,166,247,.20);

  border-radius: 9px;

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

  color: #7d9bb7;

}


.mail-capacity-flex i {

  flex: 0 0 auto;

  color: #50a5f6;

  font-size: 14px;

}


.mail-capacity-flex span {

  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;

}


/* ============================================================
   BENEFITS
============================================================ */

.mail-capacity-benefits {

  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 13px;

  margin-top: 22px;

}


/* ============================================================
   BENEFIT
============================================================ */

.mail-capacity-benefit {

  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 14px;

  padding: 22px;

  border:
    1px solid
    rgba(104,145,184,.16);

  border-radius: 12px;

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

}


/* ============================================================
   BENEFIT ICON
============================================================ */

.mail-capacity-benefit-icon {

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(35,136,255,.20);

  border-radius: 9px;

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

  color: #4ca5fa;

  font-size: 14px;

}


/* ============================================================
   BENEFIT LABEL
============================================================ */

.mail-capacity-benefit > div > span {

  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .09em;

  color: #678199;

}


/* ============================================================
   BENEFIT TITLE
============================================================ */

.mail-capacity-benefit h3 {

  margin:
    0
    0
    6px;

  font-family: var(--mail-font);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  color: #e0eaf3;

}


/* ============================================================
   BENEFIT TEXT
============================================================ */

.mail-capacity-benefit p {

  margin: 0;

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

  color: #8499ac;

}


/* ============================================================
   FEATURED BENEFIT
============================================================ */

.mail-capacity-benefit--featured {

  border-color:
    rgba(36,200,224,.17);

  background:
    linear-gradient(
      120deg,
      rgba(36,200,224,.045),
      rgba(255,255,255,.018)
    );

}


.mail-capacity-benefit--featured
.mail-capacity-benefit-icon {

  border-color:
    rgba(36,200,224,.18);

  background:
    rgba(36,200,224,.055);

  color: #35bfd8;

}


/* ============================================================
   CLOSING
============================================================ */

.mail-capacity-closing {

  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 15px;

  margin-top: 26px;

  padding:
    19px
    21px;

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

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

}


/* ============================================================
   CLOSING ICON
============================================================ */

.mail-capacity-closing-icon {

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(35,136,255,.08);

  color: #4fa8fa;

  font-size: 13px;

}


/* ============================================================
   CLOSING CONTENT
============================================================ */

.mail-capacity-closing-content span {

  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .10em;

  color: #668098;

}


.mail-capacity-closing-content strong {

  display: block;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;

  color: #dfeaf3;

}


.mail-capacity-closing-content em {

  font-style: normal;

  color: #4da7ff;

}


/* ============================================================
   CLOSING NOTE
============================================================ */

.mail-capacity-closing-note {

  display: flex;

  align-items: center;

  gap: 9px;

  padding-left: 20px;

  border-left:
    1px solid
    rgba(255,255,255,.075);

  color: #758ba0;

}


.mail-capacity-closing-note i {

  flex: 0 0 auto;

  color: #4e8fc9;

  font-size: 13px;

}


.mail-capacity-closing-note span {

  max-width: 270px;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;

}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover) {

  .mail-capacity-mailbox:hover {

    transform:
      translateX(3px);

    border-color:
      rgba(35,136,255,.22);

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

  }

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailCapacityStatus {

  0% {

    box-shadow:
      0 0 0 0
      rgba(53,202,145,.30);

  }

  60% {

    box-shadow:
      0 0 0 6px
      rgba(53,202,145,0);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(53,202,145,0);

  }

}


@keyframes mailCapacityRing {

  0%,
  100% {

    transform: scale(.96);

    opacity: .45;

  }

  50% {

    transform: scale(1.04);

    opacity: .9;

  }

}


@keyframes mailCapacityTransfer {

  0% {

    left: 0;

    opacity: 0;

    transform:
      translate(-40%, -50%)
      scale(.75);

  }

  15% {

    opacity: 1;

  }

  65% {

    left: 100%;

    opacity: 1;

    transform:
      translate(-60%, -50%)
      scale(1);

  }

  82%,
  100% {

    left: 100%;

    opacity: 0;

    transform:
      translate(-60%, -50%)
      scale(.8);

  }

}


@keyframes mailCapacityBar {

  from {

    transform:
      scaleX(0);

  }

  to {

    transform:
      scaleX(1);

  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1080px) {

  .mail-capacity {

    padding:
      90px 0;

  }


  .mail-capacity-header {

    gap: 50px;

  }


  .mail-capacity-workspace {

    grid-template-columns:
      minmax(280px, .7fr)
      55px
      minmax(0, 1.15fr);

  }


  .mail-capacity-pool,
  .mail-capacity-distribution {

    padding: 20px;

  }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 880px) {

  .mail-capacity-header {

    grid-template-columns: 1fr;

    gap: 26px;

  }


  .mail-capacity-intro {

    max-width: 680px;

  }


  .mail-capacity-message {

    grid-template-columns:
      auto
      1fr;

  }


  .mail-capacity-message-badge {

    grid-column:
      1 / -1;

    width: 100%;

  }


  .mail-capacity-workspace {

    grid-template-columns: 1fr;

  }


  .mail-capacity-transfer {

    width: 100%;
    height: 58px;

  }


  .mail-capacity-transfer-line {

    left: 50%;
    top: 0;
    bottom: 0;

    width: 1px;
    height: 100%;

    background:
      linear-gradient(
        180deg,
        rgba(35,136,255,.20),
        rgba(35,136,255,.75),
        rgba(35,136,255,.20)
      );

  }


  .mail-capacity-transfer-packet {

    left: 50%;
    top: 0;

    animation:
      mailCapacityTransferMobile
      5.5s
      ease-in-out
      infinite;

  }


  .mail-capacity-transfer-packet--2 {
    animation-delay: 1.7s;
  }


  .mail-capacity-transfer-packet--3 {
    animation-delay: 3.4s;
  }


  .mail-capacity-benefits {

    grid-template-columns: 1fr;

  }


  .mail-capacity-closing {

    grid-template-columns:
      auto
      1fr;

  }


  .mail-capacity-closing-note {

    grid-column:
      1 / -1;

    padding:
      14px
      0
      0;

    border-left: 0;

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

  }

}


/* ============================================================
   MOBILE TRANSFER
============================================================ */

@keyframes mailCapacityTransferMobile {

  0% {

    top: 0;

    opacity: 0;

    transform:
      translate(-50%, -40%)
      scale(.75);

  }

  15% {

    opacity: 1;

  }

  65% {

    top: 100%;

    opacity: 1;

    transform:
      translate(-50%, -60%)
      scale(1);

  }

  82%,
  100% {

    top: 100%;

    opacity: 0;

    transform:
      translate(-50%, -60%)
      scale(.8);

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-capacity {

    padding:
      70px 0;

  }


  .mail-capacity-title {

    font-size:
      clamp(
        33px,
        9vw,
        40px
      );

  }


  .mail-capacity-title span {

    display: inline;

  }


  .mail-capacity-claim {

    font-size:
      17px !important;

  }


  .mail-capacity-message {

    grid-template-columns: 1fr;

    padding: 18px;

  }


  .mail-capacity-message-badge {

    grid-column: auto;

  }


  .mail-capacity-pool,
  .mail-capacity-distribution {

    padding: 18px;

    border-radius: 14px;

  }


  .mail-capacity-pool-head,
  .mail-capacity-distribution-head {

    flex-direction: column;

  }


  .mail-capacity-mailbox {

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

    padding:
      12px;

  }


  .mail-capacity-mailbox-icon {

    width: 40px;
    height: 40px;

  }


  .mail-capacity-mailbox-head {

    gap: 12px;

  }


  .mail-capacity-mailbox-head > span {

    white-space: normal;

  }


  .mail-capacity-benefit {

    padding: 19px;

  }


  .mail-capacity-closing {

    grid-template-columns:
      1fr;

    align-items: flex-start;

  }


  .mail-capacity-closing-note {

    grid-column: auto;

  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

  .mail-capacity-mailbox-head {

    align-items: flex-start;

    flex-direction: column;

    gap: 5px;

  }


  .mail-capacity-mailbox-head b {

    font-size: 13px;

  }


  .mail-capacity-total-head {

    align-items: flex-start;

    flex-direction: column;

    gap: 4px;

  }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-capacity-pool-status span,
  .mail-capacity-server-ring,
  .mail-capacity-transfer-packet,
  .mail-capacity-mailbox-bar span {

    animation: none;

  }


  .mail-capacity-mailbox {

    transition: none;

  }

}


/* ============================================================
   8. PLANES DE CORREO EMPRESARIAL GESTIONADO
   LIGHT VERSION
============================================================ */


/* ============================================================
   PLANES — CORREO EMPRESARIAL GESTIONADO
   NEOTHEK
============================================================ */

.mail-plans,
.mail-plans * {
  box-sizing: border-box;
  font-family: "Open Sans", Arial, sans-serif;
}


/* ============================================================
   SECTION
============================================================ */

.mail-plans {
  position: relative;
  overflow: hidden;

  padding: 108px 0 112px;

  color: #263f52;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(35, 136, 255, .055),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #f4f9fc 0%,
      #f9fbfd 100%
    );
}


.mail-plans::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .18),
      transparent
    );
}


/* ============================================================
   HEADER
============================================================ */

.mail-plans-header {
  position: relative;
  z-index: 2;

  max-width: 870px;

  margin: 0 auto 42px;

  text-align: center;
}


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

.mail-plans-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0 0 18px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;

  letter-spacing: .11em;

  color: #1978cf;
}


.mail-plans-eyebrow > span {
  width: 25px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #2388ff
    );
}


.mail-plans-eyebrow > span:last-child {
  background:
    linear-gradient(
      90deg,
      #2388ff,
      transparent
    );
}


/* ============================================================
   H2
============================================================ */

.mail-plans-header h2 {
  margin: 0;

  font-size:
    clamp(
      40px,
      3.6vw,
      54px
    );

  font-weight: 600;
  line-height: 1.13;

  letter-spacing: -.035em;

  color: #172d3e;
}


.mail-plans-header h2 > span {
  color: #197bd4;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.mail-plans-description {
  max-width: 770px;

  margin: 20px auto 0;

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

  color: #60798b;
}


/* ============================================================
   BILLING WRAPPER
============================================================ */

.mail-billing {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 50px;
}


/* ============================================================
   BILLING LABEL
============================================================ */

.mail-billing-label {
  margin-bottom: 11px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  color: #627c8e;
}


/* ============================================================
   BILLING SELECTOR
============================================================ */

.mail-billing-selector {
  display: inline-grid;

  grid-template-columns:
    repeat(4, minmax(135px, 1fr));

  gap: 5px;

  padding: 6px;

  border: 1px solid #cfdee8;
  border-radius: 13px;

  background: #ffffff;

  box-shadow:
    0 9px 27px
    rgba(34, 77, 106, .055);
}


/* ============================================================
   BILLING OPTION
============================================================ */

.mail-billing-option {
  position: relative;

  min-width: 135px;
  min-height: 66px;

  padding: 9px 17px;

  border: 0;
  border-radius: 9px;

  outline: none;

  background: transparent;

  color: #4c6578;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}


/* ============================================================
   BILLING PERIOD
============================================================ */

.mail-billing-period {
  display: block;

  margin-bottom: 4px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}


/* ============================================================
   BILLING SAVING
============================================================ */

.mail-billing-saving {
  display: block;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color: #728999;

  transition: color .2s ease;
}


.mail-billing-saving--best {
  color: #1f8c66;
}


/* ============================================================
   ACTIVE BILLING
============================================================ */

.mail-billing-option.is-active {
  background:
    linear-gradient(
      135deg,
      #eaf5fd,
      #f2f9fe
    );

  color: #1977c8;

  box-shadow:
    inset 0 0 0 1px
    rgba(35, 136, 255, .16);
}


.mail-billing-option.is-active
.mail-billing-saving {
  color: #3d7fae;
}


.mail-billing-option.is-active
.mail-billing-saving--best {
  color: #208d69;
}


.mail-billing-option:focus-visible {
  box-shadow:
    0 0 0 3px
    rgba(35, 136, 255, .18);
}


@media (hover: hover) {

  .mail-billing-option:not(.is-active):hover {
    background: #f5fafc;
    color: #246d9f;
  }

}


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

.mail-plans-grid {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: stretch;

  gap: 22px;
}


/* ============================================================
   CARD
============================================================ */

.mail-plan-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 31px;

  border: 1px solid #d0dfe9;
  border-radius: 17px;

  background: #ffffff;

  box-shadow:
    0 13px 38px
    rgba(34, 73, 101, .055);

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


/* ============================================================
   FEATURED
============================================================ */

.mail-plan-card--featured {
  border-color:
    rgba(35, 136, 255, .65);

  box-shadow:
    0 18px 48px
    rgba(35, 117, 181, .12),
    0 0 0 1px
    rgba(35, 136, 255, .04);
}


.mail-plan-card--featured::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 34px;
  right: 34px;

  height: 3px;

  border-radius:
    0 0 4px 4px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24c3dd
    );
}


/* ============================================================
   RECOMMENDED
============================================================ */

.mail-plan-recommended {
  position: absolute;

  top: 0;
  left: 50%;

  transform:
    translate(-50%, -50%);

  padding: 7px 16px;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #ff8a31,
      #f27622
    );

  box-shadow:
    0 6px 17px
    rgba(241, 117, 33, .20);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: .08em;

  color: #ffffff;
}


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

.mail-plan-top {
  min-height: 151px;

  padding-bottom: 23px;

  border-bottom: 1px solid #e1eaf0;
}


/* ============================================================
   NAME
============================================================ */

.mail-plan-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;
}


.mail-plan-label {
  display: block;

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: .09em;

  color: #66869c;
}


.mail-plan-name-row h3 {
  margin: 0;

  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;

  letter-spacing: -.025em;

  color: #213d51;
}


.mail-plan-card--featured
.mail-plan-name-row h3 {
  color: #197bcf;
}


/* ============================================================
   SYMBOL
============================================================ */

.mail-plan-symbol {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid #d2e2ec;
  border-radius: 10px;

  background: #f5fafc;

  color: #438fc4;

  font-size: 16px;
}


.mail-plan-card--featured
.mail-plan-symbol {
  border-color:
    rgba(35, 136, 255, .20);

  background:
    rgba(35, 136, 255, .065);

  color: #2388df;
}


/* ============================================================
   SUMMARY
============================================================ */

.mail-plan-summary {
  margin: 15px 0 0;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;

  color: #647c8d;
}


/* ============================================================
   PRICE AREA
============================================================ */

.mail-plan-price-area {
  min-height: 160px;

  padding: 25px 0 22px;

  border-bottom: 1px solid #e1eaf0;
}


/* ============================================================
   DISCOUNT
============================================================ */

.mail-plan-discount {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 24px;

  margin-bottom: 3px;
}


.mail-plan-discount[hidden] {
  display: none;
}


.mail-plan-old-price {
  font-size: 13px;
  font-weight: 400;

  color: #7f929f;

  text-decoration: line-through;
}


.mail-plan-discount-value {
  padding: 4px 7px;

  border-radius: 5px;

  background:
    rgba(38, 172, 126, .09);

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

  color: #218961;
}


/* ============================================================
   PRICE
============================================================ */

.mail-plan-price {
  display: flex;
  align-items: baseline;

  min-height: 58px;
}


.mail-plan-currency {
  margin-right: 5px;

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

  color: #4d6d82;
}


.mail-plan-price-value {
  font-size: 45px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: -.045em;

  color: #203d52;

  transition:
    opacity .15s ease,
    transform .15s ease;
}


.mail-plan-card--featured
.mail-plan-price-value {
  color: #197bcf;
}


.mail-plan-price-period {
  margin-left: 6px;

  font-size: 14px;
  font-weight: 400;

  color: #6d8494;
}


.mail-plan-price-value.is-changing {
  opacity: .35;
  transform: translateY(2px);
}


/* ============================================================
   BILLING INFO
============================================================ */

.mail-plan-billing-info {
  margin-top: 9px;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  color: #647d8e;
}


.mail-plan-billing-info strong {
  font-weight: 600;
  color: #3e6178;
}


.mail-plan-saving {
  color: #218961;
  font-weight: 600;
}


/* ============================================================
   RESOURCES
============================================================ */

.mail-plan-resources {
  display: grid;

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

  gap: 8px;

  padding: 22px 0 13px;
}


/* ============================================================
   RESOURCE
============================================================ */

.mail-plan-resource {
  min-width: 0;

  padding: 14px 7px;

  border: 1px solid #dce7ee;
  border-radius: 9px;

  background: #f8fbfd;

  text-align: center;
}


.mail-plan-resource > strong {
  display: block;

  margin-bottom: 4px;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;

  color: #315a77;
}


.mail-plan-resource > span {
  display: block;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;

  color: #526f82;
}


.mail-plan-resource small {
  display: block;

  margin-top: 4px;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;

  color: #738a99;
}


/* ============================================================
   STORAGE UPGRADE
============================================================ */

.mail-plan-storage {
  display: grid;

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

  align-items: center;

  gap: 11px;

  margin-bottom: 24px;

  padding: 13px 13px;

  border: 1px solid #d4e4ed;
  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #f4f9fc,
      #f8fbfd
    );
}


/* ============================================================
   STORAGE ICON
============================================================ */

.mail-plan-storage-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 8px;

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

  color: #2784c7;

  font-size: 14px;
}


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

.mail-plan-storage-content {
  min-width: 0;
}


.mail-plan-storage-label {
  display: block;

  margin-bottom: 2px;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;

  color: #6b8495;
}


.mail-plan-storage-content strong {
  display: block;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  color: #345d79;
}


/* ============================================================
   STORAGE ARROW
============================================================ */

.mail-plan-storage-arrow {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(37, 174, 126, .08);

  color: #269d73;

  font-size: 9px;
}


/* ============================================================
   FEATURED STORAGE
============================================================ */

.mail-plan-storage--featured {
  border-color:
    rgba(35, 136, 255, .22);

  background:
    linear-gradient(
      135deg,
      rgba(35, 136, 255, .06),
      rgba(36, 195, 221, .035)
    );
}


.mail-plan-storage--featured
.mail-plan-storage-icon {
  background:
    rgba(35, 136, 255, .10);

  color: #197bcf;
}


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

.mail-plan-features {
  flex: 1;

  padding: 0 0 26px;
}


.mail-plan-features-title {
  margin: 0 0 15px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  color: #405f74;
}


.mail-plan-features ul {
  display: flex;
  flex-direction: column;

  gap: 11px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.mail-plan-features li {
  display: grid;

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

  align-items: start;

  gap: 8px;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;

  color: #536f81;
}


.mail-plan-features li i {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  border-radius: 50%;

  background:
    rgba(36, 175, 126, .09);

  color: #26a875;

  font-size: 8px;
}


/* ============================================================
   FOOTER
============================================================ */

.mail-plan-footer {
  margin-top: auto;
}


/* ============================================================
   CTA
============================================================ */

.mail-plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  width: 100%;
  min-height: 53px;

  padding: 0 19px;

  border: 1px solid #bcd7e8;
  border-radius: 9px;

  background: #f7fbfe;

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

  color: #1979ca;

  text-decoration: none;

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


.mail-plan-btn i {
  font-size: 10px;

  transition:
    transform .2s ease;
}


/* ============================================================
   FEATURED CTA
============================================================ */

.mail-plan-btn--featured {
  border-color: #f27c27;

  background:
    linear-gradient(
      135deg,
      #ff8b35,
      #f17722
    );

  color: #ffffff;

  box-shadow:
    0 9px 23px
    rgba(240, 118, 32, .18);
}


/* ============================================================
   FOOTER NOTE
============================================================ */

.mail-plan-footer-note {
  min-height: 36px;

  margin: 11px 0 0;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;

  text-align: center;

  color: #708695;
}


/* ============================================================
   HOVERS
============================================================ */

@media (hover: hover) {

  .mail-plan-card:hover {
    transform: translateY(-3px);

    border-color: #bfd8e7;

    box-shadow:
      0 17px 42px
      rgba(34, 73, 101, .08);
  }


  .mail-plan-card--featured:hover {
    border-color: #2388ff;

    box-shadow:
      0 20px 50px
      rgba(35, 117, 181, .15);
  }


  .mail-plan-btn:hover {
    border-color: #8fc2df;

    background: #f0f8fd;
  }


  .mail-plan-btn--featured:hover {
    border-color: #ed7420;

    background:
      linear-gradient(
        135deg,
        #ff9342,
        #ee701b
      );

    box-shadow:
      0 12px 27px
      rgba(240, 118, 32, .23);
  }


  .mail-plan-btn:hover i {
    transform: translateX(3px);
  }

}


/* ============================================================
   NOTE
============================================================ */

.mail-plans-note {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 15px;

  max-width: 960px;

  margin: 28px auto 0;

  padding: 20px 22px;

  border: 1px solid #d3e2eb;
  border-radius: 11px;

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


/* ============================================================
   NOTE ICON
============================================================ */

.mail-plans-note-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border: 1px solid #cee0eb;
  border-radius: 9px;

  background: #f4f9fc;

  color: #438bc0;

  font-size: 14px;
}


/* ============================================================
   NOTE CONTENT
============================================================ */

.mail-plans-note-content {
  min-width: 0;
}


.mail-plans-note strong {
  display: block;

  margin-bottom: 5px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;

  color: #405f74;
}


.mail-plans-note p {
  margin: 0;

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

  color: #657d8d;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-plans {
    padding:
      94px 0
      100px;
  }


  .mail-plans-grid {
    gap: 15px;
  }


  .mail-plan-card {
    padding:
      28px 22px;
  }


  .mail-plan-price-value {
    font-size: 41px;
  }


  .mail-plan-storage {
    grid-template-columns:
      36px
      minmax(0, 1fr);

    gap: 10px;
  }


  .mail-plan-storage-arrow {
    display: none;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 880px) {

  .mail-plans-grid {
    grid-template-columns: 1fr;

    max-width: 640px;

    margin: 0 auto;

    gap: 28px;
  }


  .mail-plan-card {
    padding: 32px;
  }


  .mail-plan-card--featured {
    order: -1;
  }


  .mail-plan-top,
  .mail-plan-price-area {
    min-height: auto;
  }


  .mail-plan-storage {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      25px;
  }


  .mail-plan-storage-arrow {
    display: grid;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 620px) {

  .mail-plans {
    padding:
      74px 0
      80px;
  }


  /* HEADER */

  .mail-plans-header {
    margin-bottom: 34px;
  }


  .mail-plans-eyebrow {
    font-size: 11px;
  }


  .mail-plans-header h2 {
    font-size:
      clamp(
        32px,
        9vw,
        40px
      );
  }


  .mail-plans-description {
    font-size: 16px;
    line-height: 1.7;
  }


  /* BILLING */

  .mail-billing {
    width: 100%;

    margin-bottom: 42px;
  }


  .mail-billing-label {
    font-size: 13px;
  }


  .mail-billing-selector {
    width: 100%;

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


  .mail-billing-option {
    min-width: 0;
    min-height: 66px;

    padding: 9px 6px;
  }


  .mail-billing-period {
    font-size: 14px;
  }


  .mail-billing-saving {
    font-size: 11px;
  }


  /* CARD */

  .mail-plan-card {
    padding:
      29px
      22px;

    border-radius: 14px;
  }


  .mail-plan-name-row h3 {
    font-size: 27px;
  }


  .mail-plan-summary {
    font-size: 15px;
  }


  /* PRICE */

  .mail-plan-price-value {
    font-size: 43px;
  }


  .mail-plan-billing-info {
    font-size: 13px;
  }


  /* RESOURCES */

  .mail-plan-resources {
    gap: 6px;
  }


  .mail-plan-resource {
    padding:
      13px 5px;
  }


  .mail-plan-resource > strong {
    font-size: 16px;
  }


  .mail-plan-resource > span {
    font-size: 11px;
  }


  .mail-plan-resource small {
    font-size: 10px;
  }


  /* STORAGE */

  .mail-plan-storage {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    padding: 13px;
  }


  .mail-plan-storage-arrow {
    display: none;
  }


  .mail-plan-storage-label {
    font-size: 11px;
  }


  .mail-plan-storage-content strong {
    font-size: 13px;
  }


  /* FEATURES */

  .mail-plan-features-title {
    font-size: 14px;
  }


  .mail-plan-features li {
    font-size: 14px;
  }


  /* CTA */

  .mail-plan-btn {
    min-height: 52px;

    font-size: 14px;
  }


  .mail-plan-footer-note {
    font-size: 12px;
  }


  /* NOTE */

  .mail-plans-note {
    grid-template-columns: 1fr;

    padding: 19px;
  }


  .mail-plans-note strong {
    font-size: 14px;
  }


  .mail-plans-note p {
    font-size: 13px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

  .mail-plan-resources {
    grid-template-columns: 1fr;
  }


  .mail-plan-resource {
    display: grid;

    grid-template-columns:
      70px
      1fr;

    align-items: center;

    text-align: left;

    padding:
      12px
      15px;
  }


  .mail-plan-resource > strong {
    margin: 0;

    font-size: 17px;

    text-align: right;
  }


  .mail-plan-resource > span {
    padding-left: 8px;
  }


  .mail-plan-resource small {
    margin-top: 2px;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-plan-card,
  .mail-plan-btn,
  .mail-plan-btn i,
  .mail-billing-option,
  .mail-plan-price-value {
    transition: none;
  }

}




/* ============================================================
   9. COMPARATIVA DE SERVIDORES DE CORREO
   CSS COMPLETO — CORREGIDO
============================================================ */

.mail-compare {

  position: relative;
  overflow: hidden;

  padding: 112px 0;

  font-family: var(--mail-font);

  color: #dce7f2;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(35, 136, 255, .09),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 75%,
      rgba(36, 211, 238, .045),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #0b121c 0%,
      #0d1521 52%,
      #0a111a 100%
    );

}


/* ============================================================
   DECORATION
============================================================ */

.mail-compare::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .32),
      rgba(36, 211, 238, .20),
      transparent
    );

}


.mail-compare::after {

  content: "";

  position: absolute;

  width: 440px;
  height: 440px;

  right: -290px;
  top: 220px;

  border-radius: 50%;

  border:
    1px solid
    rgba(35, 136, 255, .055);

  box-shadow:
    0 0 0 70px rgba(35, 136, 255, .018),
    0 0 0 140px rgba(35, 136, 255, .012);

  pointer-events: none;

}


/* ============================================================
   HEADER
============================================================ */

.mail-compare-header {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(330px, .7fr);

  align-items: end;

  gap: 80px;

  margin-bottom: 40px;

}


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

.mail-compare-eyebrow {

  display: flex;
  align-items: center;

  gap: 11px;

  margin: 0 0 17px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: .14em;

  color: #58b5ff;

}


.mail-compare-eyebrow > span {

  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24d3ee
    );

}


/* ============================================================
   H2
============================================================ */

.mail-compare-heading h2 {

  max-width: 760px;

  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      38px,
      3.3vw,
      51px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #f4f8fc;

}


.mail-compare-heading h2 > span {

  display: block;

  color: #55adff;

}


/* ============================================================
   INTRO
============================================================ */

.mail-compare-intro {

  max-width: 480px;

}


.mail-compare-intro p {

  margin: 0;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.72;

  color: #8fa4b8;

}


.mail-compare-intro-lead {

  margin-bottom: 9px !important;

  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  color: #d4e2ee !important;

}


/* ============================================================
   MESSAGE
============================================================ */

.mail-compare-message {

  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 24px;

  padding: 18px 20px;

  border:
    1px solid
    #1d3044;

  border-radius: 12px;

  background:
    linear-gradient(
      100deg,
      rgba(35, 136, 255, .085),
      rgba(16, 28, 41, .82)
    );

}


.mail-compare-message-icon {

  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(65, 160, 245, .20);

  border-radius: 9px;

  background:
    rgba(35, 136, 255, .11);

  color: #59b2ff;

  font-size: 14px;

}


.mail-compare-message-content {

  display: flex;
  flex-wrap: wrap;

  align-items: baseline;

  gap: 5px 10px;

}


.mail-compare-message-content strong {

  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;

  color: #e0ebf4;

}


.mail-compare-message-content span {

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;

  color: #90a6b9;

}


/* ============================================================
   TABLE WRAPPER
============================================================ */

.mail-compare-table-wrap {

  position: relative;
  z-index: 2;

  width: 100%;

  overflow: hidden;

  border:
    1px solid
    #1d2b3a;

  border-radius: 16px;

  background: #0e1722;

  box-shadow:
    0 28px 65px
    rgba(0, 0, 0, .19);

}


/* ============================================================
   TABLE
============================================================ */

.mail-compare-table {

  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;

  table-layout: fixed;

}


/* ============================================================
   COLUMN WIDTHS
============================================================ */

.mail-compare-table
tr > *:first-child {

  width: 37%;

}


.mail-compare-table
tr > *:not(:first-child) {

  width: 21%;

}


/* ============================================================
   TABLE HEADER
============================================================ */

.mail-compare-table thead th {

  height: 104px;

  padding: 19px 22px;

  border-right:
    1px solid
    #1b2937;

  border-bottom:
    1px solid
    #223244;

  background: #111c28;

  vertical-align: middle;

}


.mail-compare-table thead th:last-child {

  border-right: 0;

}


/* ============================================================
   FEATURE HEADING
============================================================ */

.mail-compare-feature-heading {

  text-align: left;

}


.mail-compare-feature-heading > span {

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

  letter-spacing: .08em;

  text-transform: uppercase;

  color: #7890a5;

}


/* ============================================================
   PLAN HEAD
============================================================ */

.mail-compare-plan-head {

  position: relative;

  text-align: left;

}


.mail-compare-plan-head--pulse {

  border-top:
    2px solid
    #2388ff;

  background:
    linear-gradient(
      180deg,
      rgba(35, 136, 255, .15),
      #111c28
    ) !important;

}


.mail-compare-plan {

  display: flex;
  align-items: center;

  gap: 11px;

}


.mail-compare-plan-icon {

  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    #29445c;

  border-radius: 9px;

  background: #172838;

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

  color: #6cb4f2;

}


.mail-compare-plan-head--pulse
.mail-compare-plan-icon {

  border-color:
    #2388ff;

  background:
    linear-gradient(
      145deg,
      #2388ff,
      #1675d4
    );

  color: #ffffff;

  box-shadow:
    0 7px 18px
    rgba(35, 136, 255, .20);

}


.mail-compare-plan-icon--quantum {

  color: #5bd4df;

}


.mail-compare-plan small {

  display: block;

  margin-bottom: 3px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .08em;

  color: #748a9e;

}


.mail-compare-plan strong {

  display: block;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;

  color: #dce8f2;

}


.mail-compare-plan-head--pulse
.mail-compare-plan strong {

  color: #69baff;

}


/* ============================================================
   RECOMMENDED
============================================================ */

.mail-compare-recommended {

  position: absolute;

  top: 0;
  right: 15px;

  padding: 6px 9px;

  border-radius:
    0
    0
    6px
    6px;

  background: #2388ff;

  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: .06em;

  color: #fff;

}


.mail-compare-recommended i {

  margin-right: 3px;

  font-size: 8px;

}


/* ============================================================
   NORMAL TABLE ROWS
============================================================ */

.mail-compare-table tbody
tr:not(.mail-compare-category) > th,

.mail-compare-table tbody
tr:not(.mail-compare-category) > td {

  height: 55px;

  padding: 15px 22px;

  border-right:
    1px solid
    #192735;

  border-bottom:
    1px solid
    #192735;

  background: #0e1722;

  vertical-align: middle;

}


.mail-compare-table tbody
tr:not(.mail-compare-category) > *:last-child {

  border-right: 0;

}


/* ============================================================
   FEATURE NAME
============================================================ */

.mail-compare-table tbody
tr:not(.mail-compare-category) > th {

  text-align: left;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;

  color: #bdcbd8;

}


/* ============================================================
   VALUE CELLS
============================================================ */

.mail-compare-table tbody
tr:not(.mail-compare-category) > td {

  text-align: center;

  font-size: 13.5px;

  color: #9aafc0;

}


/* ============================================================
   PULSE COLUMN
============================================================ */

.mail-compare-table tbody
td[data-plan-col="pulse"] {

  background:
    rgba(35, 136, 255, .027);

}


/* ============================================================
   ROW HOVER
============================================================ */

@media (hover:hover) {

  .mail-compare-table tbody
  tr:not(.mail-compare-category):hover > th,

  .mail-compare-table tbody
  tr:not(.mail-compare-category):hover > td {

    background: #111d29;

  }


  .mail-compare-table tbody
  tr:not(.mail-compare-category):hover
  > td[data-plan-col="pulse"] {

    background:
      rgba(35, 136, 255, .065);

  }

}


/* ============================================================
   CATEGORY ROW
   IMPORTANTE:
   NO aplicar display:flex al <th>.
   El TH debe conservar display:table-cell para que colspan
   funcione correctamente.
============================================================ */

.mail-compare-table
.mail-compare-category > th {

  display: table-cell;

  width: auto !important;

  padding: 10px 16px;

  border-top:
    1px solid
    #263749;

  border-bottom:
    1px solid
    #263749;

  border-right: 0;

  background:
    linear-gradient(
      90deg,
      #142231 0%,
      #111d29 58%,
      #101a25 100%
    );

  text-align: left;

  vertical-align: middle;

}


/* ============================================================
   CATEGORY LAYOUT
   Como el HTML contiene dos spans directos,
   hacemos que ambos se comporten correctamente sin romper
   la semántica de la tabla.
============================================================ */

.mail-compare-category > th {

  position: relative;

}


.mail-compare-category
.mail-compare-category > th {
  /* intencionalmente vacío:
     evita heredar layouts flex antiguos */
}


/* Usamos padding en el icono y texto para construir
   visualmente el layout sin convertir TH en flex */

.mail-compare-category
.mail-compare-category > th
.mail-compare-category-icon {

  margin:
    18px
    0
    18px
    21px;

  vertical-align: middle;

}


.mail-compare-category
.mail-compare-category > th
.mail-compare-category-icon
+ span {

  display: inline-block;

  max-width:
    calc(100% - 95px);

  margin-left: 11px;

  vertical-align: middle;

}


/* ============================================================
   CATEGORY ICON
============================================================ */

.mail-compare-category-icon {

  width: 36px;
  height: 36px;

  display: inline-grid;
  place-items: center;

  box-sizing: border-box;

  border:
    1px solid
    #26445f;

  border-radius: 8px;

  background:
    rgba(35, 136, 255, .09);

  color: #59b2ff;

  font-size: 13px;

}


/* ============================================================
   CATEGORY TITLE
============================================================ */

.mail-compare-category
th > span:last-child {

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;

  color: #e0e9f1;

}


/* ============================================================
   CATEGORY DESCRIPTION
============================================================ */

.mail-compare-category small {

  display: block;

  margin-top: 3px;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;

  color: #8198ac;

}


/* ============================================================
   CHECK
============================================================ */

.mail-compare-check {

  width: 25px;
  height: 25px;

  display: inline-grid;
  place-items: center;

  border:
    1px solid
    rgba(43, 187, 130, .18);

  border-radius: 50%;

  background:
    rgba(43, 187, 130, .09);

  color: #45c58f;

  font-size: 9px;

}


/* ============================================================
   VALUES
============================================================ */

.mail-compare-value {

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

  color: #d3e0eb;

}


/* ============================================================
   NORMAL TEXT
============================================================ */

.mail-compare-text {

  font-size: 12.5px;
  font-weight: 500;

  color: #9eb2c3;

}


/* ============================================================
   LEVEL
============================================================ */

.mail-compare-level {

  display: inline-block;

  padding: 5px 8px;

  border:
    1px solid
    rgba(35, 136, 255, .20);

  border-radius: 6px;

  background:
    rgba(35, 136, 255, .075);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  color: #65b6fa;

}


.mail-compare-level--max {

  border-color:
    rgba(36, 211, 238, .20);

  background:
    rgba(36, 211, 238, .065);

  color: #65d7e3;

}


/* ============================================================
   HELP ICON
============================================================ */

.mail-compare-help {

  margin-left: 4px;

  color: #57738b;

  cursor: help;

}


/* ============================================================
   FOOTER
============================================================ */

.mail-compare-table tfoot th,
.mail-compare-table tfoot td {

  padding: 20px 18px;

  border-top:
    1px solid
    #26384a;

  border-right:
    1px solid
    #1b2937;

  background: #111c28;

}


.mail-compare-table tfoot td:last-child {

  border-right: 0;

}


.mail-compare-table tfoot th {

  text-align: left;

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

  color: #7e94a8;

}


/* ============================================================
   BUTTON
============================================================ */

.mail-compare-button {

  min-height: 44px;

  display: flex;

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

  gap: 7px;

  padding: 10px 13px;

  border:
    1px solid
    #29425a;

  border-radius: 8px;

  background: #162535;

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

  text-decoration: none;

  color: #9fc4e4;

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

}


.mail-compare-button i {

  font-size: 9px;

  transition:
    transform .2s ease;

}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.mail-compare-button--primary {

  border-color: #2388ff;

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #1676d5
    );

  box-shadow:
    0 9px 22px
    rgba(35, 136, 255, .18);

  color: #fff;

}


/* ============================================================
   BOTTOM
============================================================ */

.mail-compare-bottom {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, .85fr);

  gap: 20px;

  margin-top: 22px;

}


/* ============================================================
   SSD NOTE
============================================================ */

.mail-compare-bottom-note {

  display: flex;
  align-items: flex-start;

  gap: 11px;

  padding: 17px 18px;

  border:
    1px solid
    #1b2a39;

  border-radius: 10px;

  background:
    rgba(13, 23, 34, .72);

}


.mail-compare-bottom-note > i {

  margin-top: 3px;

  color: #5785aa;

  font-size: 13px;

}


.mail-compare-bottom-note p {

  margin: 0;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;

  color: #71889b;

}


.mail-compare-bottom-note strong {

  font-weight: 600;

  color: #a5b8c8;

}


/* ============================================================
   CONSULTATION
============================================================ */

.mail-compare-bottom-help {

  display: flex;

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

  gap: 20px;

  padding: 17px 18px;

  border:
    1px solid
    #20364b;

  border-radius: 10px;

  background:
    linear-gradient(
      110deg,
      rgba(35, 136, 255, .07),
      rgba(13, 23, 34, .75)
    );

}


.mail-compare-bottom-help span {

  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .08em;

  color: #5f91bb;

}


.mail-compare-bottom-help strong {

  display: block;

  max-width: 300px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;

  color: #c1d1de;

}


/* ============================================================
   CONSULT LINK
============================================================ */

.mail-compare-consult {

  display: flex;
  align-items: center;

  gap: 7px;

  flex: 0 0 auto;

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

  text-decoration: none;

  color: #59b2ff;

}


.mail-compare-consult i {

  font-size: 9px;

  transition:
    transform .2s ease;

}


/* ============================================================
   MOBILE TABS
============================================================ */

.mail-compare-mobile-tabs {

  display: none;

}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover) {

  .mail-compare-button:hover {

    border-color: #3b678b;

    background: #1a2d40;

    color: #c6e0f5;

  }


  .mail-compare-button--primary:hover {

    border-color: #3b9cff;

    background:
      linear-gradient(
        135deg,
        #3396f5,
        #1676d5
      );

    color: #fff;

  }


  .mail-compare-button:hover i,
  .mail-compare-consult:hover i {

    transform:
      translateX(3px);

  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-compare {

    padding: 92px 0;

  }


  .mail-compare-header {

    gap: 45px;

  }


  .mail-compare-table thead th,
  .mail-compare-table tbody
  tr:not(.mail-compare-category) > th,
  .mail-compare-table tbody
  tr:not(.mail-compare-category) > td {

    padding-left: 15px;
    padding-right: 15px;

  }


  .mail-compare-plan {

    gap: 8px;

  }


  .mail-compare-plan-icon {

    width: 35px;
    height: 35px;

  }


  .mail-compare-bottom {

    grid-template-columns: 1fr;

  }

}


/* ============================================================
   MOBILE / TABLET
============================================================ */

@media (max-width: 820px) {

  .mail-compare-header {

    grid-template-columns: 1fr;

    gap: 24px;

  }


  .mail-compare-intro {

    max-width: 680px;

  }


  .mail-compare-message {

    align-items: flex-start;

  }


  /* ---------------------------------------------------------
     MOBILE PLAN SELECTOR
  --------------------------------------------------------- */

  .mail-compare-mobile-tabs {

    position: relative;
    z-index: 3;

    display: grid;

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

    margin-bottom: 12px;

    padding: 4px;

    border:
      1px solid
      #1f3041;

    border-radius: 10px;

    background: #101a25;

  }


  .mail-compare-mobile-tab {

    min-height: 45px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    font-family: var(--mail-font);

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

    color: #72899d;

    cursor: pointer;

  }


  .mail-compare-mobile-tab span {

    display: block;

    margin-top: 2px;

    font-size: 8px;
    font-weight: 500;

    color: #568ab7;

  }


  .mail-compare-mobile-tab.is-active {

    background:
      rgba(35, 136, 255, .12);

    box-shadow:
      inset 0 0 0 1px
      rgba(35, 136, 255, .28);

    color: #69baff;

  }


  /* ---------------------------------------------------------
     TABLE
  --------------------------------------------------------- */

  .mail-compare-table-wrap {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }


  .mail-compare-table {

    min-width: 760px;

  }


  .mail-compare-table
  tr > *:first-child {

    width: 310px;

  }


  .mail-compare-table
  tr > *:not(:first-child) {

    width: 150px;

  }


  /*
     Mantener el colspan funcionando también
     cuando la tabla entra en modo scroll.
  */

  .mail-compare-table
  .mail-compare-category > th {

    width: auto !important;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-compare {

    padding: 72px 0;

  }


  .mail-compare-heading h2 {

    font-size:
      clamp(
        32px,
        9vw,
        40px
      );

  }


  .mail-compare-heading h2 > span {

    display: inline;

  }


  .mail-compare-intro p {

    font-size: 14px;

  }


  .mail-compare-intro-lead {

    font-size: 17px !important;

  }


  .mail-compare-message {

    padding: 16px;

  }


  .mail-compare-message-content strong {

    font-size: 13.5px;

  }


  .mail-compare-message-content span {

    font-size: 13px;

  }


  .mail-compare-table-wrap {

    border-radius: 12px;

  }


  .mail-compare-category
  .mail-compare-category-icon {

    margin-left: 16px;

  }


  .mail-compare-bottom-help {

    align-items: flex-start;

    flex-direction: column;

  }


  .mail-compare-bottom-note p {

    font-size: 12.5px;

  }

}


/* ============================================================
   SCREEN READER
============================================================ */

.sr-only {

  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip:
    rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-compare-button,
  .mail-compare-button i,
  .mail-compare-consult i {

    transition: none;

  }

}



/* ============================================================
   10. BACKUPS AUTOMÁTICOS DEL SERVIDOR DE CORREO
============================================================ */

.mail-backup {

  position: relative;
  overflow: hidden;

  padding: 112px 0 108px;

  font-family: var(--mail-font);

  color: #273b4e;

  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(35, 136, 255, .075),
      transparent 29%
    ),
    radial-gradient(
      circle at 12% 82%,
      rgba(38, 199, 220, .045),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f7faff 0%,
      #f3f7fb 52%,
      #f8fbfd 100%
    );

}


/* ============================================================
   DECORATIVE BACKGROUND
============================================================ */

.mail-backup::before {

  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -300px;
  top: 90px;

  border-radius: 50%;

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

  box-shadow:
    0 0 0 75px rgba(35, 136, 255, .018),
    0 0 0 150px rgba(35, 136, 255, .012);

  pointer-events: none;

}


.mail-backup::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .15),
      transparent
    );

}


/* ============================================================
   HEADER
============================================================ */

.mail-backup-header {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, .72fr);

  align-items: end;

  gap: 80px;

  margin-bottom: 52px;

}


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

.mail-backup-eyebrow {

  display: flex;
  align-items: center;

  gap: 11px;

  margin: 0 0 17px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: .14em;

  color: #1478d5;

}


.mail-backup-eyebrow > span {

  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24c6df
    );

}


/* ============================================================
   H2
============================================================ */

.mail-backup-heading h2 {

  max-width: 760px;

  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      38px,
      3.3vw,
      51px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #17283a;

}


.mail-backup-heading h2 > span {

  display: block;

  color: #1677e8;

}


/* ============================================================
   INTRO
============================================================ */

.mail-backup-intro {

  max-width: 480px;

}


.mail-backup-intro p {

  margin: 0;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.72;

  color: #687e92;

}


.mail-backup-intro-lead {

  margin-bottom: 9px !important;

  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  color: #30475e !important;

}


/* ============================================================
   MAIN STAGE
============================================================ */

.mail-backup-stage {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(330px, .76fr)
    minmax(500px, 1.24fr);

  gap: 58px;

  align-items: center;

  padding: 48px;

  border:
    1px solid
    #dce7f0;

  border-radius: 20px;

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

  box-shadow:
    0 22px 55px
    rgba(38, 73, 108, .07);

}


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

.mail-backup-copy-icon {

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 22px;

  border:
    1px solid
    #cae2f7;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #eaf6ff,
      #f6fbff
    );

  color: #167ce1;

  font-size: 18px;

}


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

.mail-backup-copy-kicker {

  margin: 0 0 10px;

  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .11em;

  color: #3784c7;

}


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

.mail-backup-copy > h3 {

  max-width: 450px;

  margin: 0 0 16px;

  font-size:
    clamp(
      25px,
      2.2vw,
      32px
    );

  font-weight: 600;
  line-height: 1.25;

  letter-spacing: -.025em;

  color: #20374c;

}


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

.mail-backup-copy-text {

  max-width: 470px;

  margin: 0;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.72;

  color: #687e91;

}


/* ============================================================
   BENEFITS
============================================================ */

.mail-backup-benefits {

  display: flex;
  flex-direction: column;

  gap: 15px;

  margin: 27px 0 0;
  padding: 0;

  list-style: none;

}


.mail-backup-benefits li {

  display: grid;

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

  gap: 11px;

  align-items: start;

}


/* ============================================================
   BENEFIT ICON
============================================================ */

.mail-backup-benefit-icon {

  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  border:
    1px solid
    #cdeade;

  border-radius: 50%;

  background: #edf9f4;

  color: #25a875;

  font-size: 9px;

}


/* ============================================================
   BENEFIT TEXT
============================================================ */

.mail-backup-benefits strong {

  display: block;

  margin-bottom: 3px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  color: #344d63;

}


.mail-backup-benefits
li div > span {

  display: block;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  color: #75899b;

}


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

.mail-backup-visual {

  position: relative;
  overflow: hidden;

  min-height: 535px;

  padding: 24px;

  border:
    1px solid
    #183650;

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(35, 136, 255, .13),
      transparent 35%
    ),
    linear-gradient(
      155deg,
      #0d1b29,
      #09131e
    );

  box-shadow:
    0 24px 50px
    rgba(19, 49, 77, .17);

}


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

.mail-backup-visual-top {

  position: relative;
  z-index: 3;

  display: flex;

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

  gap: 15px;

  margin-bottom: 22px;

  padding-bottom: 17px;

  border-bottom:
    1px solid
    rgba(118, 164, 203, .12);

}


.mail-backup-visual-top > div {

  display: flex;
  align-items: center;

  gap: 8px;

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

  letter-spacing: .09em;

  color: #7593ad;

}


/* ============================================================
   STATUS DOT
============================================================ */

.mail-backup-status-dot {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #2bd38d;

  box-shadow:
    0 0 0 4px
    rgba(43, 211, 141, .08);

}


/* ============================================================
   STATUS
============================================================ */

.mail-backup-status {

  padding: 6px 9px;

  border:
    1px solid
    rgba(43, 211, 141, .14);

  border-radius: 20px;

  background:
    rgba(43, 211, 141, .07);

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

  color: #58d9a5;

}


/* ============================================================
   SERVER
============================================================ */

.mail-backup-server {

  position: relative;
  z-index: 3;

  display: grid;

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

  align-items: center;

  gap: 13px;

  padding: 16px;

  border:
    1px solid
    #1d405d;

  border-radius: 11px;

  background:
    linear-gradient(
      100deg,
      rgba(26, 52, 75, .76),
      rgba(12, 26, 39, .93)
    );

}


/* ============================================================
   SERVER ICON
============================================================ */

.mail-backup-server-icon {

  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #24527a;

  border-radius: 9px;

  background:
    rgba(35, 136, 255, .10);

  color: #58adf5;

  font-size: 15px;

}


/* ============================================================
   SERVER CONTENT
============================================================ */

.mail-backup-server-content > span {

  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .09em;

  color: #66839b;

}


.mail-backup-server-content strong {

  display: block;

  margin-bottom: 3px;

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

  color: #dbe8f2;

}


.mail-backup-server-content small {

  display: block;

  font-size: 10.5px;
  font-weight: 400;

  color: #758da1;

}


/* ============================================================
   SERVER STATE
============================================================ */

.mail-backup-server-state {

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 6px 8px;

  border:
    1px solid
    rgba(43, 211, 141, .12);

  border-radius: 6px;

  background:
    rgba(43, 211, 141, .055);

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

  color: #5bd5a5;

}


.mail-backup-server-state span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #2bd38d;

}


/* ============================================================
   FLOW
============================================================ */

.mail-backup-flow {

  position: relative;

  width: 50px;
  height: 65px;

  margin: 0 auto;

}


/* ============================================================
   FLOW LINE
============================================================ */

.mail-backup-flow-line {

  position: absolute;

  top: 0;
  bottom: 0;

  left: 50%;

  width: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      #2388ff,
      #27c4dd
    );

  opacity: .65;

}


/* ============================================================
   FLOW ARROW
============================================================ */

.mail-backup-flow-icon {

  position: absolute;

  left: 50%;
  bottom: -1px;

  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  transform:
    translateX(-50%);

  border:
    1px solid
    #225077;

  border-radius: 50%;

  background: #0e2233;

  color: #5bb7ff;

  font-size: 8px;

}


/* ============================================================
   FLOW ANIMATION
============================================================ */

.mail-backup-flow-pulse {

  position: absolute;

  left: 50%;

  width: 5px;
  height: 5px;

  margin-left: -2.5px;

  border-radius: 50%;

  background: #48c9ef;

  box-shadow:
    0 0 8px
    rgba(72, 201, 239, .7);

  animation:
    mailBackupFlow
    3s
    linear
    infinite;

}


.mail-backup-flow-pulse--1 {

  animation-delay: 0s;

}


.mail-backup-flow-pulse--2 {

  animation-delay: 1.5s;

}


@keyframes mailBackupFlow {

  0% {

    top: 2px;
    opacity: 0;

  }

  15% {

    opacity: 1;

  }

  80% {

    opacity: 1;

  }

  100% {

    top: 55px;
    opacity: 0;

  }

}


/* ============================================================
   STORAGE
============================================================ */

.mail-backup-storage {

  position: relative;
  z-index: 3;

  padding: 17px;

  border:
    1px solid
    #1d405b;

  border-radius: 12px;

  background:
    rgba(9, 20, 31, .82);

}


/* ============================================================
   STORAGE HEAD
============================================================ */

.mail-backup-storage-head {

  display: flex;

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

  gap: 15px;

  margin-bottom: 14px;

}


/* ============================================================
   STORAGE TITLE
============================================================ */

.mail-backup-storage-title {

  display: flex;
  align-items: center;

  gap: 10px;

}


/* ============================================================
   STORAGE ICON
============================================================ */

.mail-backup-storage-icon {

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #244d6d;

  border-radius: 8px;

  background:
    rgba(35, 136, 255, .08);

  color: #59b2f5;

  font-size: 12px;

}


/* ============================================================
   STORAGE TEXT
============================================================ */

.mail-backup-storage-title
div > span {

  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .08em;

  color: #617f98;

}


.mail-backup-storage-title strong {

  display: block;

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

  color: #d6e5ef;

}


/* ============================================================
   STORAGE BADGE
============================================================ */

.mail-backup-storage-badge {

  padding: 6px 9px;

  border:
    1px solid
    rgba(35, 136, 255, .20);

  border-radius: 6px;

  background:
    rgba(35, 136, 255, .08);

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

  color: #62b6fa;

}


/* ============================================================
   VERSIONS
============================================================ */

.mail-backup-versions {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 7px;

}


/* ============================================================
   VERSION
============================================================ */

.mail-backup-version {

  min-width: 0;

  padding: 10px;

  border:
    1px solid
    #1b3347;

  border-radius: 8px;

  background: #0f1c28;

}


.mail-backup-version--current {

  border-color:
    rgba(43, 211, 141, .20);

  background:
    rgba(43, 211, 141, .045);

}


.mail-backup-version--more {

  border-style: dashed;

}


/* ============================================================
   VERSION NUMBER
============================================================ */

.mail-backup-version-number,
.mail-backup-version-check {

  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  margin-bottom: 9px;

  border-radius: 6px;

  background:
    rgba(35, 136, 255, .09);

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

  color: #5eb3f7;

}


.mail-backup-version-check {

  background:
    rgba(43, 211, 141, .09);

  color: #51d19e;

  font-size: 8px;

}


/* ============================================================
   VERSION TEXT
============================================================ */

.mail-backup-version small {

  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .07em;

  color: #60798e;

}


.mail-backup-version strong {

  display: block;

  overflow: hidden;

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

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #b9cad8;

}


.mail-backup-version-state {

  display: block;

  margin-top: 7px;

  font-size: 8px;
  font-weight: 400;

  color: #607a90;

}


/* ============================================================
   RESTORE
============================================================ */

.mail-backup-restore {

  display: grid;

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

  align-items: center;

  gap: 10px;

  margin-top: 11px;

  padding: 10px 11px;

  border:
    1px solid
    rgba(36, 198, 223, .16);

  border-radius: 8px;

  background:
    rgba(36, 198, 223, .045);

}


/* ============================================================
   RESTORE ICON
============================================================ */

.mail-backup-restore-icon {

  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    rgba(36, 198, 223, .08);

  color: #55d1e0;

  font-size: 11px;

}


/* ============================================================
   RESTORE TEXT
============================================================ */

.mail-backup-restore div > span {

  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .08em;

  color: #5f8996;

}


.mail-backup-restore strong {

  display: block;

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

  color: #bad4d9;

}


.mail-backup-restore-arrow {

  color: #50c8d8;

  font-size: 11px;

}


/* ============================================================
   ORBITS
============================================================ */

.mail-backup-orbit {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(64, 151, 220, .05);

  pointer-events: none;

}


.mail-backup-orbit--1 {

  width: 310px;
  height: 310px;

  right: -190px;
  top: 35px;

}


.mail-backup-orbit--2 {

  width: 220px;
  height: 220px;

  left: -145px;
  bottom: -90px;

}


/* ============================================================
   DETAIL CARDS
============================================================ */

.mail-backup-details {

  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 15px;

  margin-top: 22px;

}


/* ============================================================
   DETAIL
============================================================ */

.mail-backup-detail {

  display: grid;

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

  gap: 14px;

  padding: 20px;

  border:
    1px solid
    #dce7ef;

  border-radius: 12px;

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

}


/* ============================================================
   DETAIL ICON
============================================================ */

.mail-backup-detail-icon {

  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #cee3f5;

  border-radius: 9px;

  background: #edf7ff;

  color: #2480d7;

  font-size: 14px;

}


/* ============================================================
   DETAIL LABEL
============================================================ */

.mail-backup-detail-label {

  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .09em;

  color: #5b91bd;

}


/* ============================================================
   DETAIL H3
============================================================ */

.mail-backup-detail h3 {

  margin: 0 0 6px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  color: #31495e;

}


/* ============================================================
   DETAIL P
============================================================ */

.mail-backup-detail p {

  margin: 0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.58;

  color: #718698;

}


/* ============================================================
   IMPORTANT NOTICE
============================================================ */

.mail-backup-notice {

  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 17px;

  margin-top: 22px;

  padding: 22px 24px;

  border:
    1px solid
    #d3e3ef;

  border-left:
    3px solid
    #2388ff;

  border-radius: 12px;

  background:
    linear-gradient(
      100deg,
      #f0f7fd,
      #f8fbfd
    );

}


/* ============================================================
   NOTICE ICON
============================================================ */

.mail-backup-notice-icon {

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #e0effc;

  color: #207dd3;

  font-size: 15px;

}


/* ============================================================
   NOTICE LABEL
============================================================ */

.mail-backup-notice-content > span {

  display: block;

  margin-bottom: 5px;

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

  letter-spacing: .09em;

  color: #4286bd;

}


/* ============================================================
   NOTICE H3
============================================================ */

.mail-backup-notice-content h3 {

  margin: 0 0 5px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;

  color: #314a60;

}


/* ============================================================
   NOTICE P
============================================================ */

.mail-backup-notice-content p {

  max-width: 730px;

  margin: 0;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.58;

  color: #70869a;

}


/* ============================================================
   NOTICE TAG
============================================================ */

.mail-backup-notice-tag {

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 11px 13px;

  border:
    1px solid
    #cee2f2;

  border-radius: 9px;

  background: #ffffff;

  color: #4d789c;

}


.mail-backup-notice-tag > i {

  color: #2582d9;

  font-size: 13px;

}


.mail-backup-notice-tag span {

  display: block;

  max-width: 120px;

  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;

}


.mail-backup-notice-tag strong {

  display: block;

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

  color: #315c7f;

}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover) {

  .mail-backup-detail {

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

  }


  .mail-backup-detail:hover {

    transform:
      translateY(-3px);

    border-color:
      #c8deed;

    box-shadow:
      0 14px 30px
      rgba(38, 73, 108, .07);

  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-backup {

    padding:
      92px 0;

  }


  .mail-backup-header {

    gap: 45px;

  }


  .mail-backup-stage {

    grid-template-columns:
      .8fr
      1.2fr;

    gap: 35px;

    padding: 36px;

  }


  .mail-backup-versions {

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

  }


  .mail-backup-visual {

    min-height: auto;

  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 880px) {

  .mail-backup-header {

    grid-template-columns: 1fr;

    gap: 25px;

  }


  .mail-backup-intro {

    max-width: 680px;

  }


  .mail-backup-stage {

    grid-template-columns: 1fr;

  }


  .mail-backup-copy {

    max-width: 650px;

  }


  .mail-backup-visual {

    width: 100%;
    max-width: 680px;

    margin:
      0
      auto;

  }


  .mail-backup-details {

    grid-template-columns: 1fr;

  }


  .mail-backup-detail {

    max-width: 680px;

  }


  .mail-backup-notice {

    grid-template-columns:
      46px
      1fr;

  }


  .mail-backup-notice-tag {

    grid-column: 2;

    justify-self: start;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-backup {

    padding:
      72px 0;

  }


  .mail-backup-heading h2 {

    font-size:
      clamp(
        32px,
        9vw,
        40px
      );

  }


  .mail-backup-heading h2 > span {

    display: inline;

  }


  .mail-backup-intro p {

    font-size: 14px;

  }


  .mail-backup-intro-lead {

    font-size:
      17px !important;

  }


  .mail-backup-stage {

    gap: 32px;

    padding:
      27px
      20px;

    border-radius: 15px;

  }


  .mail-backup-copy > h3 {

    font-size: 25px;

  }


  .mail-backup-copy-text {

    font-size: 14px;

  }


  .mail-backup-visual {

    padding:
      18px
      14px;

    border-radius: 14px;

  }


  .mail-backup-server {

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

  }


  .mail-backup-server-state {

    grid-column: 2;

    justify-self: start;

  }


  .mail-backup-versions {

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

  }


  .mail-backup-storage-head {

    align-items: flex-start;

  }


  .mail-backup-detail {

    padding: 18px;

  }


  .mail-backup-notice {

    grid-template-columns: 1fr;

    padding: 20px;

  }


  .mail-backup-notice-tag {

    grid-column: auto;

  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

  .mail-backup-versions {

    grid-template-columns: 1fr;

  }


  .mail-backup-version {

    display: grid;

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

    align-items: center;

    gap: 9px;

  }


  .mail-backup-version-number,
  .mail-backup-version-check {

    margin-bottom: 0;

  }


  .mail-backup-version-state {

    margin-top: 0;

  }


  .mail-backup-restore {

    grid-template-columns:
      31px
      1fr;

  }


  .mail-backup-restore-arrow {

    display: none;

  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-backup-flow-pulse {

    animation: none;

  }


  .mail-backup-detail {

    transition: none;

  }

}

/* ============================================================
   11. MIGRACIÓN DE CORREO EMPRESARIAL ASISTIDA
============================================================ */

.mail-migration {
  position: relative;
  overflow: hidden;

  padding: 112px 0;

  font-family: var(--mail-font);

  color: #dce8f2;

  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(35, 136, 255, .08),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(36, 198, 223, .045),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #0c1520 0%,
      #0e1925 52%,
      #0b141e 100%
    );
}


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

.mail-migration::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .28),
      rgba(36, 198, 223, .16),
      transparent
    );
}


/* ============================================================
   BACKGROUND DECORATION
============================================================ */

.mail-migration::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  top: -330px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(94, 179, 255, .045);

  box-shadow:
    0 0 0 80px rgba(35, 136, 255, .012),
    0 0 0 160px rgba(35, 136, 255, .008);

  pointer-events: none;
}


/* ============================================================
   HEADER — CENTERED
============================================================ */

.mail-migration-header {
  position: relative;
  z-index: 2;

  max-width: 900px;

  margin:
    0
    auto
    54px;

  text-align: center;
}


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

.mail-migration-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin:
    0
    0
    18px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .13em;

  color: #62b7ff;
}


.mail-migration-eyebrow > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25c6de
    );
}


.mail-migration-eyebrow > span:last-child {
  background:
    linear-gradient(
      90deg,
      #25c6de,
      #2388ff
    );
}


/* ============================================================
   H2
============================================================ */

.mail-migration-header h2 {
  max-width: 850px;

  margin:
    0
    auto;

  font-family: var(--mail-font);

  font-size:
    clamp(
      42px,
      4.2vw,
      60px
    );

  font-weight: 600;
  line-height: 1.08;

  letter-spacing: -.04em;

  color: #f2f7fb;
}


.mail-migration-header h2 > span {
  display: block;

  color: #5eb3ff;
}


/* ============================================================
   INTRO
============================================================ */

.mail-migration-intro-lead {
  margin:
    25px
    auto
    8px;

  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;

  color: #d9e5ee;
}


.mail-migration-intro {
  max-width: 680px;

  margin:
    0
    auto;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;

  color: #9db0c1;
}


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

.mail-migration-panel {
  position: relative;
  z-index: 2;

  overflow: hidden;

  border:
    1px solid
    #21364a;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 34, 49, .96),
      rgba(13, 26, 39, .98)
    );

  box-shadow:
    0 28px 65px
    rgba(0, 0, 0, .18);
}


/* subtle panel highlight */

.mail-migration-panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 12%;
  right: 12%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(98, 183, 255, .32),
      transparent
    );

  pointer-events: none;
}


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

.mail-migration-panel-head {
  position: relative;
  z-index: 2;

  display: flex;

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

  gap: 25px;

  padding: 22px 26px;

  border-bottom:
    1px solid
    #203447;

  background:
    rgba(18, 34, 49, .65);
}


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

.mail-migration-panel-title {
  display: flex;
  align-items: center;

  gap: 13px;
}


.mail-migration-panel-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    #2b5272;

  border-radius: 9px;

  background:
    rgba(35, 136, 255, .10);

  color: #62b6fb;

  font-size: 15px;
}


.mail-migration-panel-title div > span {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .10em;

  color: #6e8ca4;
}


.mail-migration-panel-title strong {
  display: block;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  color: #d7e5ef;
}


/* ============================================================
   MANAGED BADGE
============================================================ */

.mail-migration-managed {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 8px 11px;

  border:
    1px solid
    rgba(35, 136, 255, .18);

  border-radius: 7px;

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

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

  color: #72baff;
}


.mail-migration-managed i {
  font-size: 11px;
}


.mail-migration-managed-status {
  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #3bcf91;

  box-shadow:
    0 0 0 4px
    rgba(59, 207, 145, .08);

  animation:
    mailMigrationStatus
    2.8s
    ease-out
    infinite;
}


/* ============================================================
   ROUTE
============================================================ */

.mail-migration-route {
  display: grid;

  grid-template-columns:
    minmax(230px, 1fr)
    minmax(180px, .75fr)
    minmax(230px, 1fr);

  align-items: center;

  gap: 25px;

  padding: 32px 34px;

  border-bottom:
    1px solid
    #203447;

  background:
    rgba(8, 19, 29, .27);
}


/* ============================================================
   ENDPOINT
============================================================ */

.mail-migration-endpoint {
  display: grid;

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

  align-items: center;

  gap: 14px;

  min-height: 92px;

  padding: 18px;

  border:
    1px solid
    #263c50;

  border-radius: 11px;

  background: #111f2c;

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


.mail-migration-endpoint--destination {
  position: relative;

  border-color:
    #27577e;

  background:
    linear-gradient(
      120deg,
      rgba(35, 136, 255, .10),
      #111f2c
    );

  box-shadow:
    inset 0 0 30px
    rgba(35, 136, 255, .025);
}


/* ============================================================
   ENDPOINT ICON
============================================================ */

.mail-migration-endpoint-icon {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #315069;

  border-radius: 9px;

  background:
    #172b3c;

  color: #6da6d5;

  font-size: 16px;
}


.mail-migration-endpoint--destination
.mail-migration-endpoint-icon {
  border-color:
    #2a6593;

  background:
    rgba(35, 136, 255, .12);

  color: #64b7ff;
}


/* ============================================================
   ENDPOINT TEXT
============================================================ */

.mail-migration-endpoint small {
  display: block;

  margin-bottom: 3px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .09em;

  color: #718ba1;
}


.mail-migration-endpoint strong {
  display: block;

  margin-bottom: 4px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;

  color: #dbe7f0;
}


.mail-migration-endpoint div > span {
  display: block;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;

  color: #839aad;
}


/* ============================================================
   ROUTE CENTER
============================================================ */

.mail-migration-route-center {
  position: relative;

  min-height: 55px;

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


/* ============================================================
   ROUTE LINE
============================================================ */

.mail-migration-route-line {
  position: absolute;

  left: 0;
  right: 0;
  top: 50%;

  height: 1px;

  overflow: visible;

  background:
    linear-gradient(
      90deg,
      #34556f,
      #2388ff,
      #25bcd5
    );
}


/* ============================================================
   ANIMATED DATA / MIGRATION SIGNAL
============================================================ */

.mail-migration-route-progress {
  position: absolute;

  top: 50%;
  left: 0;

  width: 7px;
  height: 7px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background: #74c9ff;

  box-shadow:
    0 0 0 4px rgba(35, 136, 255, .10),
    0 0 14px rgba(78, 181, 255, .65);

  animation:
    mailMigrationTravel
    3.6s
    cubic-bezier(.4, 0, .2, 1)
    infinite;
}


/* ============================================================
   ARROW
============================================================ */

.mail-migration-route-arrow {
  position: relative;
  z-index: 2;

  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #2b638e;

  border-radius: 50%;

  background: #12283a;

  color: #65b8fa;

  font-size: 13px;

  box-shadow:
    0 0 0 5px
    rgba(13, 29, 42, .88);
}


/* ============================================================
   ROUTE LABEL
============================================================ */

.mail-migration-route-label {
  position: absolute;

  top: calc(50% + 27px);
  left: 50%;

  transform:
    translateX(-50%);

  padding: 0 8px;

  background: #10202e;

  white-space: nowrap;

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

  color: #7997ae;
}


/* ============================================================
   STEPS
============================================================ */

.mail-migration-steps {
  display: grid;

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

  margin: 0;
  padding: 0;

  list-style: none;
}


/* ============================================================
   STEP
============================================================ */

.mail-migration-step {
  position: relative;

  min-height: 225px;

  padding: 26px;

  border-right:
    1px solid
    #203447;

  border-bottom:
    1px solid
    #203447;

  background:
    rgba(15, 29, 42, .55);

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


.mail-migration-step:nth-child(3n) {
  border-right: 0;
}


.mail-migration-step:nth-child(n+4) {
  border-bottom: 0;
}


/* top accent shown on hover */

.mail-migration-step::before {
  content: "";

  position: absolute;

  top: 0;
  left: 24px;
  right: 24px;

  height: 1px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(94, 179, 255, .55),
      transparent
    );

  transition:
    opacity .25s ease;
}


/* ============================================================
   FINAL STEP
============================================================ */

.mail-migration-step--final {
  background:
    linear-gradient(
      140deg,
      rgba(35, 136, 255, .105),
      rgba(15, 29, 42, .62)
    );
}


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

.mail-migration-step-top {
  display: flex;

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

  gap: 15px;

  margin-bottom: 22px;
}


/* ============================================================
   NUMBER
============================================================ */

.mail-migration-number {
  font-size: 27px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: -.03em;

  color: #34526b;

  transition:
    color .25s ease;
}


.mail-migration-step--final
.mail-migration-number {
  color: #438dca;
}


/* ============================================================
   STEP ICON
============================================================ */

.mail-migration-step-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #294861;

  border-radius: 8px;

  background:
    rgba(35, 136, 255, .065);

  color: #5fa9e7;

  font-size: 13px;

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


.mail-migration-step--final
.mail-migration-step-icon {
  border-color:
    #286395;

  background:
    rgba(35, 136, 255, .12);

  color: #67baff;
}


/* ============================================================
   STEP LABEL
============================================================ */

.mail-migration-step-label {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .10em;

  color: #65859f;
}


/* ============================================================
   STEP H3
============================================================ */

.mail-migration-step h3 {
  margin:
    0
    0
    9px;

  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;

  color: #dce8f1;
}


/* ============================================================
   STEP P
============================================================ */

.mail-migration-step p {
  max-width: 290px;

  margin: 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;

  color: #91a8ba;
}


/* ============================================================
   BOTTOM CTA AREA
============================================================ */

.mail-migration-bottom {
  position: relative;
  z-index: 2;

  overflow: hidden;

  display: grid;

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

  align-items: center;

  gap: 40px;

  margin-top: 22px;

  padding:
    25px
    27px;

  border:
    1px solid
    #254159;

  border-radius: 14px;

  background:
    linear-gradient(
      120deg,
      rgba(18, 35, 51, .98),
      rgba(15, 31, 46, .98)
    );

  box-shadow:
    0 16px 36px
    rgba(0, 0, 0, .12);
}


/* subtle light behind CTA */

.mail-migration-bottom::after {
  content: "";

  position: absolute;

  width: 330px;
  height: 200px;

  top: 50%;
  right: -110px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .11),
      transparent 68%
    );

  pointer-events: none;
}


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

.mail-migration-bottom-copy {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 15px;
}


/* ============================================================
   BOTTOM ICON
============================================================ */

.mail-migration-bottom-icon {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #2b5879;

  border-radius: 10px;

  background:
    rgba(35, 136, 255, .09);

  color: #62b6fb;

  font-size: 16px;
}


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

.mail-migration-bottom-eyebrow {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .11em;

  color: #5889ae;
}


/* ============================================================
   BOTTOM TEXT
============================================================ */

.mail-migration-bottom-copy strong {
  display: block;

  margin-bottom: 5px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;

  color: #e0ebf3;
}


.mail-migration-bottom-copy p {
  max-width: 650px;

  margin: 0;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;

  color: #8fa5b7;
}


/* ============================================================
   ACTIONS
============================================================ */

.mail-migration-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 10px;

  flex: 0 0 auto;
}


/* ============================================================
   CTA BASE
============================================================ */

.mail-migration-cta {
  min-height: 49px;

  display: inline-flex;

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

  gap: 9px;

  padding:
    12px
    18px;

  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: none;

  white-space: nowrap;

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


.mail-migration-cta i {
  font-size: 10px;

  transition:
    transform .2s ease;
}


/* ============================================================
   PRIMARY CTA
============================================================ */

.mail-migration-cta--primary {
  border:
    1px solid
    #ef7622;

  background:
    linear-gradient(
      135deg,
      #ff8c36,
      #f27622
    );

  box-shadow:
    0 9px 22px
    rgba(239, 115, 30, .18);

  color: #ffffff;
}


/* ============================================================
   SECONDARY CTA
============================================================ */

.mail-migration-cta--secondary {
  border:
    1px solid
    #31526d;

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

  color: #a9c0d2;
}


/* ============================================================
   HOVER / FOCUS
============================================================ */

@media (hover:hover) {

  .mail-migration-endpoint:hover {
    transform:
      translateY(-2px);

    border-color:
      #31546f;
  }


  .mail-migration-endpoint--destination:hover {
    border-color:
      #3275a9;
  }


  .mail-migration-step:hover {
    background:
      rgba(20, 38, 54, .78);

    box-shadow:
      inset 0 0 35px
      rgba(35, 136, 255, .025);
  }


  .mail-migration-step:hover::before {
    opacity: 1;
  }


  .mail-migration-step:hover
  .mail-migration-number {
    color: #4b789d;
  }


  .mail-migration-step:hover
  .mail-migration-step-icon {
    border-color:
      #32658b;

    background:
      rgba(35, 136, 255, .10);

    color: #72bdff;
  }


  .mail-migration-cta--primary:hover {
    transform:
      translateY(-2px);

    border-color:
      #ff913f;

    background:
      linear-gradient(
        135deg,
        #ff9746,
        #ee701b
      );

    box-shadow:
      0 13px 28px
      rgba(239, 115, 30, .25);

    color: #ffffff;

    text-decoration: none;
  }


  .mail-migration-cta--primary:hover i {
    transform:
      translateX(3px);
  }


  .mail-migration-cta--secondary:hover {
    transform:
      translateY(-2px);

    border-color:
      #467596;

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

    color: #d8e6f0;

    text-decoration: none;
  }

}


.mail-migration-cta:focus-visible {
  outline:
    2px solid
    #72baff;

  outline-offset: 3px;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailMigrationTravel {

  0% {
    left: 0%;

    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: 100%;

    opacity: 0;
  }

}


@keyframes mailMigrationStatus {

  0% {
    box-shadow:
      0 0 0 0
      rgba(59, 207, 145, .28);
  }

  65% {
    box-shadow:
      0 0 0 6px
      rgba(59, 207, 145, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(59, 207, 145, 0);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-migration {
    padding:
      92px
      0;
  }


  .mail-migration-header {
    max-width: 820px;

    margin-bottom: 48px;
  }


  .mail-migration-route {
    grid-template-columns:
      minmax(200px, 1fr)
      130px
      minmax(200px, 1fr);

    gap: 18px;

    padding:
      28px
      24px;
  }


  .mail-migration-step {
    padding: 23px;
  }


  .mail-migration-bottom {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .mail-migration-actions {
    padding-left: 63px;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 850px) {

  .mail-migration-header {
    max-width: 720px;
  }


  .mail-migration-route {
    grid-template-columns: 1fr;

    gap: 0;
  }


  .mail-migration-route-center {
    width: 70px;
    height: 70px;
    min-height: 70px;

    margin:
      0
      auto;
  }


  .mail-migration-route-line {
    top: 0;
    bottom: 0;

    left: 50%;
    right: auto;

    width: 1px;
    height: auto;

    background:
      linear-gradient(
        180deg,
        #34556f,
        #2388ff,
        #25bcd5
      );
  }


  .mail-migration-route-progress {
    top: 0;
    left: 50%;

    transform:
      translate(-50%, -50%);

    animation:
      mailMigrationTravelVertical
      3.6s
      cubic-bezier(.4, 0, .2, 1)
      infinite;
  }


  .mail-migration-route-arrow {
    transform:
      rotate(90deg);
  }


  .mail-migration-route-label {
    display: none;
  }


  .mail-migration-steps {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .mail-migration-step {
    border-right:
      1px solid
      #203447;

    border-bottom:
      1px solid
      #203447;
  }


  .mail-migration-step:nth-child(3n) {
    border-right:
      1px solid
      #203447;
  }


  .mail-migration-step:nth-child(2n) {
    border-right: 0;
  }


  .mail-migration-step:nth-child(n+4) {
    border-bottom:
      1px solid
      #203447;
  }


  .mail-migration-step:nth-last-child(-n+2) {
    border-bottom: 0;
  }


  .mail-migration-actions {
    padding-left: 0;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-migration {
    padding:
      72px
      0;
  }


  /* HEADER */

  .mail-migration-header {
    margin-bottom: 40px;
  }


  .mail-migration-eyebrow {
    gap: 8px;

    font-size: 10px;

    letter-spacing: .10em;
  }


  .mail-migration-eyebrow > span {
    width: 19px;
  }


  .mail-migration-header h2 {
    font-size:
      clamp(
        34px,
        9.5vw,
        42px
      );
  }


  .mail-migration-header h2 > span {
    display: inline;
  }


  .mail-migration-intro-lead {
    margin-top: 20px;

    font-size: 18px;
  }


  .mail-migration-intro {
    font-size: 15px;
  }


  /* PANEL */

  .mail-migration-panel {
    border-radius: 13px;
  }


  .mail-migration-panel-head {
    align-items: flex-start;

    flex-direction: column;

    padding: 20px;
  }


  .mail-migration-route {
    padding:
      24px
      18px;
  }


  .mail-migration-endpoint {
    min-height: 100px;
  }


  /* STEPS */

  .mail-migration-steps {
    grid-template-columns: 1fr;
  }


  .mail-migration-step {
    min-height: auto;

    padding:
      24px
      21px;

    border-right:
      0 !important;

    border-bottom:
      1px solid
      #203447 !important;
  }


  .mail-migration-step:last-child {
    border-bottom:
      0 !important;
  }


  .mail-migration-step-top {
    margin-bottom: 17px;
  }


  .mail-migration-number {
    font-size: 25px;
  }


  .mail-migration-step h3 {
    font-size: 19px;
  }


  .mail-migration-step p {
    max-width: 100%;

    font-size: 14.5px;

    line-height: 1.65;
  }


  /* CTA AREA */

  .mail-migration-bottom {
    padding:
      22px
      20px;
  }


  .mail-migration-bottom-copy {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .mail-migration-actions {
    width: 100%;

    flex-direction: column;

    align-items: stretch;
  }


  .mail-migration-cta {
    width: 100%;

    min-height: 51px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

  .mail-migration-panel-title {
    align-items: flex-start;
  }


  .mail-migration-panel-title strong {
    font-size: 14px;
  }


  .mail-migration-endpoint {
    grid-template-columns:
      43px
      minmax(0, 1fr);

    padding: 16px;
  }


  .mail-migration-endpoint-icon {
    width: 42px;
    height: 42px;
  }


  .mail-migration-bottom-copy strong {
    font-size: 15px;
  }

}


/* ============================================================
   VERTICAL MIGRATION ANIMATION
============================================================ */

@keyframes mailMigrationTravelVertical {

  0% {
    top: 0%;

    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    top: 100%;

    opacity: 0;
  }

}


/* ============================================================
   REDUCED MOTION / ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-migration-route-progress,
  .mail-migration-managed-status {
    animation: none;
  }


  .mail-migration-endpoint,
  .mail-migration-step,
  .mail-migration-step::before,
  .mail-migration-number,
  .mail-migration-step-icon,
  .mail-migration-cta,
  .mail-migration-cta i {
    transition: none;
  }

}

/* ============================================================
   12. WEBMAIL, OUTLOOK Y DISPOSITIVOS
============================================================ */

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

  padding: 112px 0 120px;

  font-family: var(--mail-font);

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(35, 136, 255, .07),
      transparent 31%
    ),
    radial-gradient(
      circle at 10% 78%,
      rgba(37, 191, 216, .035),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f8fbfe 0%,
      #f3f8fc 100%
    );

  color: #243b50;
}


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

.mail-access::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .16),
      rgba(37, 191, 216, .12),
      transparent
    );
}


/* ============================================================
   HEADER
============================================================ */

.mail-access-header {
  position: relative;
  z-index: 2;

  max-width: 900px;

  margin:
    0 auto
    62px;

  text-align: center;
}


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

.mail-access-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin:
    0 0
    17px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .12em;

  color: #1477d4;
}


.mail-access-eyebrow > span {
  width: 26px;
  height: 2px;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bfd8
    );
}


.mail-access-eyebrow > span:last-child {
  background:
    linear-gradient(
      90deg,
      #25bfd8,
      #2388ff
    );
}


/* ============================================================
   H2
============================================================ */

.mail-access-header h2 {
  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      40px,
      3.7vw,
      56px
    );

  font-weight: 600;
  line-height: 1.1;

  letter-spacing: -.04em;

  color: #162a3c;
}


.mail-access-header h2 span {
  display: block;

  color: #197be0;
}


/* ============================================================
   LEAD
============================================================ */

.mail-access-lead {
  max-width: 700px;

  margin:
    22px auto
    0;

  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;

  color: #61778b;
}


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

.mail-access-layout {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(390px, .82fr);

  align-items: center;

  gap: 85px;
}


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

.mail-access-visual {
  position: relative;

  min-width: 0;

  padding:
    30px
    40px
    55px
    0;
}


/* ============================================================
   WINDOW
============================================================ */

.mail-access-window {
  position: relative;

  overflow: hidden;

  min-height: 440px;

  border:
    1px solid
    #cbdce9;

  border-radius: 17px;

  background: #ffffff;

  box-shadow:
    0 30px 70px
    rgba(30, 68, 100, .13),
    0 4px 12px
    rgba(30, 68, 100, .05);

  animation:
    mailAccessEnter
    .7s
    ease-out
    both;
}


/* ============================================================
   BROWSER
============================================================ */

.mail-access-browser {
  height: 55px;

  display: grid;

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

  align-items: center;

  gap: 18px;

  padding:
    0 18px;

  border-bottom:
    1px solid
    #d9e5ee;

  background: #f4f8fb;
}


/* ============================================================
   DOTS
============================================================ */

.mail-access-browser-dots {
  display: flex;
  align-items: center;

  gap: 5px;
}


.mail-access-browser-dots span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #a9bdcc;
}


/* ============================================================
   ADDRESS
============================================================ */

.mail-access-browser-address {
  max-width: 280px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    7px
    11px;

  border:
    1px solid
    #d7e3ec;

  border-radius: 6px;

  background: #ffffff;

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

  color: #6c8294;
}


.mail-access-browser-address i {
  color: #1e9b72;
}


/* ============================================================
   SECURE
============================================================ */

.mail-access-secure {
  font-size: 10px;
  font-weight: 600;

  color: #5d7487;
}


/* ============================================================
   WEBMAIL
============================================================ */

.mail-access-webmail {
  display: grid;

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

  min-height: 385px;
}


/* ============================================================
   SIDEBAR
============================================================ */

.mail-access-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: 10px;

  padding:
    16px
    10px;

  border-right:
    1px solid
    #dbe6ee;

  background: #102235;
}


.mail-access-logo {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  margin-bottom: 9px;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #1268bf
    );

  color: #ffffff;

  font-size: 13px;
}


.mail-access-sidebar > span {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  color: #718aa0;

  font-size: 13px;
}


.mail-access-sidebar > span.is-active {
  background:
    rgba(35, 136, 255, .15);

  color: #65b7ff;
}


/* ============================================================
   INBOX
============================================================ */

.mail-access-inbox {
  padding:
    22px
    20px;

  background: #ffffff;
}


.mail-access-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding-bottom: 19px;

  border-bottom:
    1px solid
    #e1eaf0;
}


.mail-access-inbox-head small {
  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .09em;

  color: #7b93a6;
}


.mail-access-inbox-head strong {
  display: block;

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

  color: #273f53;
}


/* ============================================================
   ONLINE
============================================================ */

.mail-access-online {
  display: flex;
  align-items: center;

  gap: 6px;

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

  color: #39896e;
}


.mail-access-online i {
  position: relative;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #26ae7e;
}


.mail-access-online i::after {
  content: "";

  position: absolute;

  inset: -4px;

  border:
    1px solid
    rgba(38, 174, 126, .25);

  border-radius: 50%;

  animation:
    mailAccessPulse
    2.8s
    ease-out
    infinite;
}


/* ============================================================
   MESSAGE
============================================================ */

.mail-access-message {
  display: grid;

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

  align-items: center;

  gap: 11px;

  min-height: 70px;

  padding:
    11px
    4px;

  border-bottom:
    1px solid
    #edf2f6;
}


.mail-access-message.is-unread {
  margin:
    8px -7px
    0;

  padding: 11px;

  border:
    1px solid
    #d8e9f7;

  border-radius: 8px;

  background: #f5faff;
}


/* ============================================================
   AVATAR
============================================================ */

.mail-access-avatar {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: #eaf3fa;

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

  color: #3f6f95;
}


.mail-access-message.is-unread
.mail-access-avatar {
  background: #dceeff;

  color: #1878d1;
}


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

.mail-access-message-copy {
  min-width: 0;
}


.mail-access-message-copy strong {
  display: block;

  margin-bottom: 4px;

  overflow: hidden;

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

  text-overflow: ellipsis;
  white-space: nowrap;

  color: #30495d;
}


.mail-access-message-copy span {
  display: block;

  overflow: hidden;

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

  text-overflow: ellipsis;
  white-space: nowrap;

  color: #8195a6;
}


.mail-access-message > small {
  align-self: start;

  padding-top: 4px;

  font-size: 9px;

  color: #91a3b1;
}


/* ============================================================
   PHONE
============================================================ */

.mail-access-phone {
  position: absolute;

  right: 0;
  bottom: 0;

  z-index: 4;

  width: 158px;
  height: 294px;

  padding: 7px;

  border:
    1px solid
    #29465d;

  border-radius: 25px;

  background: #0e1d2a;

  box-shadow:
    0 22px 45px
    rgba(16, 48, 73, .23);

  animation:
    mailAccessPhoneEnter
    .75s
    .18s
    ease-out
    both;
}


.mail-access-phone-top {
  height: 22px;

  display: flex;
  justify-content: center;
}


.mail-access-phone-top span {
  width: 39px;
  height: 4px;

  margin-top: 4px;

  border-radius: 10px;

  background: #3a4e5e;
}


.mail-access-phone-screen {
  height: calc(100% - 22px);

  padding:
    16px
    11px;

  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      #f7fbfe,
      #edf5fa
    );
}


.mail-access-phone-head {
  display: flex;
  align-items: center;

  gap: 9px;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    #d7e3eb;
}


.mail-access-phone-head > i {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: #2388ff;

  color: #ffffff;

  font-size: 11px;
}


.mail-access-phone-head small {
  display: block;

  font-size: 8px;
  font-weight: 500;

  color: #7890a2;
}


.mail-access-phone-head strong {
  display: block;

  margin-top: 2px;

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

  color: #294256;
}


.mail-access-phone-mail {
  display: grid;

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

  gap: 8px;

  padding:
    12px
    0;

  border-bottom:
    1px solid
    #dde7ed;
}


.mail-access-phone-mail > span {
  width: 24px;
  height: 24px;

  border-radius: 50%;

  background: #dceaf4;
}


.mail-access-phone-mail strong {
  display: block;

  margin-bottom: 5px;

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

  color: #40576a;
}


.mail-access-phone-mail i {
  display: block;

  width: 100%;
  height: 3px;

  margin-top: 3px;

  border-radius: 5px;

  background: #d2dee6;
}


.mail-access-phone-mail i:last-child {
  width: 68%;
}


/* ============================================================
   STATUS
============================================================ */

.mail-access-status {
  position: absolute;

  left: 32px;
  bottom: 19px;

  z-index: 5;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    11px
    14px;

  border:
    1px solid
    #c9e5dc;

  border-radius: 9px;

  background:
    rgba(249, 255, 253, .97);

  box-shadow:
    0 12px 28px
    rgba(24, 82, 63, .10);
}


.mail-access-status-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #e0f6ee;

  color: #17996c;

  font-size: 10px;
}


.mail-access-status small {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .08em;

  color: #6c9586;
}


.mail-access-status strong {
  display: block;

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

  color: #315a4b;
}


/* ============================================================
   RIGHT CONTENT
============================================================ */

.mail-access-content {
  min-width: 0;
}


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

.mail-access-copy {
  margin-bottom: 31px;
}


.mail-access-copy-label {
  display: block;

  margin-bottom: 10px;

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

  letter-spacing: .10em;

  color: #2382d9;
}


.mail-access-copy h3 {
  margin:
    0 0
    14px;

  font-size:
    clamp(
      27px,
      2.2vw,
      34px
    );

  font-weight: 600;
  line-height: 1.2;

  letter-spacing: -.025em;

  color: #1d3548;
}


.mail-access-copy h3 span {
  display: block;

  color: #187bdb;
}


.mail-access-copy p {
  max-width: 550px;

  margin: 0;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;

  color: #6a7f91;
}


/* ============================================================
   GROUP
============================================================ */

.mail-access-group {
  padding:
    20px
    0;

  border-top:
    1px solid
    #dce6ed;
}


/* ============================================================
   GROUP TITLE
============================================================ */

.mail-access-group-title {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 14px;
}


.mail-access-group-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    #cce0ef;

  border-radius: 8px;

  background: #eef7fd;

  color: #1e82db;

  font-size: 13px;

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


.mail-access-group-title strong {
  display: block;

  margin-bottom: 2px;

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

  color: #294359;
}


.mail-access-group-title small {
  display: block;

  font-size: 12px;
  font-weight: 400;

  color: #8194a4;
}


/* ============================================================
   TAGS / PLATFORMS
============================================================ */

.mail-access-tags,
.mail-access-platforms {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  padding-left: 50px;
}


.mail-access-tags > span,
.mail-access-platforms > span {
  min-height: 34px;

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

  gap: 7px;

  padding:
    7px
    11px;

  border:
    1px solid
    #d4e2ec;

  border-radius: 7px;

  background: #ffffff;

  box-shadow:
    0 3px 10px
    rgba(37, 72, 101, .025);

  font-size: 12px;
  font-weight: 500;

  color: #536b7e;

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


.mail-access-tags i,
.mail-access-platforms i {
  color: #2888db;
}


/* ============================================================
   APPS
============================================================ */

.mail-access-apps {
  display: grid;

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

  gap: 8px;

  padding-left: 50px;
}


.mail-access-app {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;

  padding: 10px;

  border:
    1px solid
    #d4e2ec;

  border-radius: 8px;

  background: #ffffff;

  box-shadow:
    0 3px 10px
    rgba(37, 72, 101, .025);

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


.mail-access-app-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 6px;

  background: #edf6fd;

  color: #247fd1;

  font-size: 11px;
}


.mail-access-app strong {
  display: block;

  overflow: hidden;

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

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #40586b;
}


.mail-access-app small {
  display: block;

  margin-top: 2px;

  font-size: 9.5px;

  color: #8a9dab;
}


/* ============================================================
   PROTOCOLS
============================================================ */

.mail-access-protocols {
  display: flex;

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

  gap: 20px;

  margin-top: 8px;

  padding: 16px;

  border:
    1px solid
    #cce1f0;

  border-radius: 10px;

  background:
    linear-gradient(
      120deg,
      #edf7ff,
      #f7fcff
    );
}


.mail-access-protocol-copy {
  display: flex;
  align-items: center;

  gap: 11px;
}


.mail-access-protocol-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 8px;

  background: #dceeff;

  color: #1878d1;

  font-size: 12px;
}


.mail-access-protocol-copy small {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .08em;

  color: #6b94b5;
}


.mail-access-protocol-copy strong {
  display: block;

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

  color: #365a76;
}


.mail-access-protocol-list {
  display: flex;

  gap: 6px;
}


.mail-access-protocol-list span {
  padding:
    6px
    9px;

  border:
    1px solid
    #bddbf0;

  border-radius: 5px;

  background: #ffffff;

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

  color: #2377ba;
}


/* ============================================================
   CTA — NEW
============================================================ */

.mail-access-cta {
  position: relative;

  overflow: hidden;

  margin-top: 22px;

  padding:
    20px
    20px
    19px;

  border:
    1px solid
    #cbddea;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f9fd 100%
    );

  box-shadow:
    0 10px 28px
    rgba(30, 68, 100, .055);
}


/* top accent */

.mail-access-cta::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bfd8,
      transparent 78%
    );
}


/* subtle decoration */

.mail-access-cta::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  top: -85px;
  right: -65px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .09),
      transparent 68%
    );

  pointer-events: none;
}


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

.mail-access-cta-copy {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}


.mail-access-cta-check {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #c7e8db;

  border-radius: 50%;

  background: #e8f8f2;

  color: #16956a;

  font-size: 10px;
}


.mail-access-cta-copy p {
  margin: 0;
}


.mail-access-cta-copy strong {
  display: block;

  margin-bottom: 2px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  color: #29465c;
}


.mail-access-cta-copy p > span {
  display: block;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;

  color: #74899a;
}


/* ============================================================
   CTA ACTIONS
============================================================ */

.mail-access-cta-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 9px;
}


/* ============================================================
   BUTTON BASE
============================================================ */

.mail-access-button {
  min-height: 45px;

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

  gap: 9px;

  padding:
    11px
    17px;

  border-radius: 7px;

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: none;

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


.mail-access-button i {
  font-size: 9px;

  transition:
    transform .2s ease;
}


/* PRIMARY */

.mail-access-button--primary {
  border:
    1px solid
    #167ce0;

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #1677d6
    );

  box-shadow:
    0 8px 18px
    rgba(35, 136, 255, .15);

  color: #ffffff;
}


/* SECONDARY */

.mail-access-button--secondary {
  border:
    1px solid
    #ccdce8;

  background: #ffffff;

  color: #526d82;
}


/* ============================================================
   HOVER
============================================================ */

@media (hover: hover) {

  .mail-access-group:hover
  .mail-access-group-icon {
    transform: translateY(-1px);

    border-color: #a9d1ee;

    background: #e5f4ff;
  }


  .mail-access-tags > span:hover,
  .mail-access-platforms > span:hover {
    transform: translateY(-2px);

    border-color: #b8d7ed;

    background: #fbfdff;

    box-shadow:
      0 7px 17px
      rgba(35, 87, 128, .07);
  }


  .mail-access-app:hover {
    transform: translateY(-2px);

    border-color: #b8d7ed;

    box-shadow:
      0 8px 18px
      rgba(35, 87, 128, .07);
  }


  .mail-access-button--primary:hover {
    transform: translateY(-2px);

    border-color: #2b92ef;

    background:
      linear-gradient(
        135deg,
        #3295ff,
        #1472cf
      );

    box-shadow:
      0 11px 23px
      rgba(35, 136, 255, .22);

    color: #ffffff;

    text-decoration: none;
  }


  .mail-access-button--primary:hover i {
    transform: translateX(3px);
  }


  .mail-access-button--secondary:hover {
    transform: translateY(-2px);

    border-color: #abc9df;

    background: #f8fbfd;

    color: #294f6b;

    text-decoration: none;
  }

}


.mail-access-button:focus-visible {
  outline:
    2px solid
    #2388ff;

  outline-offset: 3px;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailAccessEnter {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes mailAccessPhoneEnter {

  from {
    opacity: 0;

    transform:
      translateY(16px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes mailAccessPulse {

  0% {
    opacity: .65;

    transform:
      scale(.75);
  }

  70% {
    opacity: 0;

    transform:
      scale(1.7);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.7);
  }

}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-access-window,
  .mail-access-phone,
  .mail-access-online i::after {
    animation: none;
  }


  .mail-access-group-icon,
  .mail-access-tags > span,
  .mail-access-platforms > span,
  .mail-access-app,
  .mail-access-button,
  .mail-access-button i {
    transition: none;
  }

}


/* ============================================================
   RESPONSIVE — LARGE TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-access {
    padding:
      95px 0
      105px;
  }


  .mail-access-layout {
    gap: 55px;
  }


  .mail-access-visual {
    padding-right: 25px;
  }


  .mail-access-apps {
    grid-template-columns: 1fr;
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

  .mail-access-layout {
    grid-template-columns: 1fr;

    gap: 65px;
  }


  .mail-access-visual {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    padding-right: 50px;
  }


  .mail-access-content {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;
  }


  .mail-access-apps {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .mail-access-cta {
    margin-top: 25px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-access {
    padding:
      72px 0
      78px;
  }


  /* HEADER */

  .mail-access-header {
    margin-bottom: 42px;

    text-align: center;
  }


  .mail-access-eyebrow {
    justify-content: center;

    gap: 8px;

    font-size: 10px;
  }


  .mail-access-eyebrow > span {
    width: 18px;
  }


  .mail-access-header h2 {
    font-size:
      clamp(
        32px,
        9vw,
        40px
      );
  }


  .mail-access-header h2 span {
    display: inline;
  }


  .mail-access-lead {
    font-size: 15px;
  }


  /* VISUAL */

  .mail-access-visual {
    padding:
      0 0
      70px;
  }


  .mail-access-window {
    min-height: 380px;
  }


  .mail-access-browser {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap: 11px;
  }


  .mail-access-secure {
    display: none;
  }


  .mail-access-browser-address {
    max-width: none;
  }


  .mail-access-webmail {
    grid-template-columns:
      49px
      minmax(0, 1fr);
  }


  .mail-access-sidebar {
    padding:
      13px
      6px;
  }


  .mail-access-sidebar > span {
    width: 31px;
    height: 31px;
  }


  .mail-access-logo {
    width: 32px;
    height: 32px;
  }


  .mail-access-inbox {
    padding:
      18px
      13px;
  }


  .mail-access-message {
    grid-template-columns:
      32px
      minmax(0, 1fr);
  }


  .mail-access-message > small {
    display: none;
  }


  .mail-access-avatar {
    width: 31px;
    height: 31px;
  }


  .mail-access-phone {
    right: 5px;

    width: 135px;
    height: 250px;
  }


  .mail-access-status {
    left: 12px;
    bottom: 19px;
  }


  /* CONTENT */

  .mail-access-copy h3 span {
    display: inline;
  }


  .mail-access-tags,
  .mail-access-platforms,
  .mail-access-apps {
    padding-left: 0;
  }


  .mail-access-apps {
    grid-template-columns: 1fr;
  }


  .mail-access-protocols {
    align-items: flex-start;

    flex-direction: column;
  }


  /* CTA */

  .mail-access-cta {
    margin-top: 20px;

    padding:
      19px
      17px;
  }


  .mail-access-cta-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .mail-access-button {
    width: 100%;

    min-height: 49px;
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

  .mail-access-cta-copy {
    grid-template-columns: 1fr;
  }


  .mail-access-protocol-list {
    width: 100%;
  }


  .mail-access-protocol-list span {
    flex: 1;

    text-align: center;
  }

}


/* ============================================================
   13. SERVIDOR DEDICADO VS HOSTING DE CORREO COMPARTIDO
============================================================ */

.mail-compare {
  position: relative;
  overflow: hidden;

  padding: 112px 0 116px;

  font-family: var(--mail-font);

  color: #dce8f2;

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(35, 136, 255, .11),
      transparent 31%
    ),
    radial-gradient(
      circle at 12% 86%,
      rgba(36, 198, 223, .045),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #0b1621 0%,
      #0e1b28 54%,
      #0b151f 100%
    );
}


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

.mail-compare::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .34),
      rgba(36, 198, 223, .16),
      transparent
    );
}


/* ============================================================
   HEADER
============================================================ */

.mail-compare-header1 {
  position: relative;
  z-index: 2;

  max-width: 880px;

  margin:
    0 auto
    55px;

  text-align: center;
}


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

.mail-compare-eyebrow1 {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  margin:
    0 0
    17px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .13em;

  color: #61b5fc;
}


.mail-compare-eyebrow1 > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24c5df
    );
}


.mail-compare-eyebrow1 > span:last-child {
  background:
    linear-gradient(
      90deg,
      #24c5df,
      #2388ff
    );
}


/* ============================================================
   H2
============================================================ */

.mail-compare-header1 h2 {
  max-width: 850px;

  margin:
    0 auto;

  font-family: var(--mail-font);

  font-size:
    clamp(
      40px,
      3.7vw,
      55px
    );

  font-weight: 600;
  line-height: 1.1;

  letter-spacing: -.04em;

  color: #f1f6fa;
}


.mail-compare-header1 h2 > span {
  display: block;

  color: #62b5ff;
}


/* ============================================================
   INTRO
============================================================ */

.mail-compare-intro {
  max-width: 690px;

  margin:
    23px auto
    0;
}


.mail-compare-intro p {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;

  color: #9db0c1;
}


.mail-compare-intro-lead {
  margin-bottom: 7px !important;

  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;

  color: #dce7ef !important;
}


/* ============================================================
   POSITIONING
============================================================ */

.mail-compare-positioning {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: stretch;

  margin-bottom: 18px;
}


/* ============================================================
   PROFILE
============================================================ */

.mail-compare-profile {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 18px;

  min-height: 145px;

  padding: 27px 30px;

  border:
    1px solid
    #253a4c;

  border-radius: 14px;

  background:
    rgba(18, 33, 47, .72);

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


.mail-compare-profile--shared {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


.mail-compare-profile--dedicated {
  padding-right: 120px;

  border-color: #27587e;

  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;

  background:
    linear-gradient(
      125deg,
      rgba(35, 136, 255, .13),
      rgba(17, 34, 49, .91) 52%,
      rgba(15, 30, 44, .94)
    );

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, .13);
}


/* ============================================================
   PROFILE ICON
============================================================ */

.mail-compare-profile-icon {
  position: relative;

  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #315069;

  border-radius: 11px;

  background: #172b3b;

  color: #7696b0;

  font-size: 18px;
}


.mail-compare-profile--dedicated
.mail-compare-profile-icon {
  border-color: #2b6592;

  background:
    rgba(35, 136, 255, .13);

  color: #68b9ff;
}


/* ============================================================
   LIVE DOT
============================================================ */

.mail-compare-live {
  position: absolute;

  top: -4px;
  right: -4px;

  width: 9px;
  height: 9px;

  border:
    2px solid
    #112435;

  border-radius: 50%;

  background: #32d092;
}


.mail-compare-live::after {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    1px solid
    rgba(50, 208, 146, .38);

  border-radius: 50%;

  animation:
    mailComparePulse
    3s
    ease-out
    infinite;
}


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

.mail-compare-profile-copy > span {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .1em;

  color: #6e8ba2;
}


.mail-compare-profile--dedicated
.mail-compare-profile-copy > span {
  color: #62a9e4;
}


.mail-compare-profile-copy strong {
  display: block;

  margin-bottom: 6px;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;

  color: #dce7ef;
}


.mail-compare-profile-copy p {
  max-width: 480px;

  margin: 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.58;

  color: #8fa5b7;
}


/* ============================================================
   RECOMMENDED
============================================================ */

.mail-compare-recommended {
  position: absolute;

  top: 17px;
  right: 18px;

  padding:
    6px
    9px;

  border:
    1px solid
    rgba(71, 166, 247, .26);

  border-radius: 5px;

  background:
    rgba(35, 136, 255, .10);

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

  letter-spacing: .08em;

  color: #67b8fc;
}


/* ============================================================
   VS
============================================================ */

.mail-compare-vs {
  position: relative;
  z-index: 3;

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


.mail-compare-vs::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background: #284156;
}


.mail-compare-vs span {
  position: relative;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #31506a;

  border-radius: 50%;

  background: #102131;

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

  color: #7895aa;
}


/* ============================================================
   TABLE
============================================================ */

.mail-compare-table {
  position: relative;
  z-index: 2;

  overflow: hidden;

  border:
    1px solid
    #22394c;

  border-radius: 15px;

  background: #0f1d2a;

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

  animation:
    mailCompareEnter
    .7s
    ease-out
    both;
}


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

.mail-compare-table-head,
.mail-compare-row {
  display: grid;

  grid-template-columns:
    minmax(220px, .85fr)
    minmax(260px, 1fr)
    minmax(260px, 1fr);
}


/* ============================================================
   TABLE HEAD
============================================================ */

.mail-compare-table-head {
  min-height: 92px;

  border-bottom:
    1px solid
    #294257;

  background: #132332;
}


.mail-compare-head-feature {
  display: flex;
  align-items: center;

  padding: 24px;

  border-right:
    1px solid
    #233b4e;

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

  letter-spacing: .07em;

  text-transform: uppercase;

  color: #7893a8;
}


.mail-compare-head-plan {
  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    20px
    25px;

  border-right:
    1px solid
    #233b4e;
}


.mail-compare-head-plan:last-child {
  border-right: 0;
}


.mail-compare-head-plan--neothek {
  position: relative;

  background:
    linear-gradient(
      135deg,
      rgba(35, 136, 255, .12),
      rgba(35, 136, 255, .035)
    );
}


.mail-compare-head-plan--neothek::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bfd8
    );
}


/* ============================================================
   HEAD ICON
============================================================ */

.mail-compare-head-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    #304d64;

  border-radius: 8px;

  background: #172b3b;

  color: #7394ae;

  font-size: 14px;
}


.mail-compare-head-plan--neothek
.mail-compare-head-icon {
  border-color: #2a6594;

  background:
    rgba(35, 136, 255, .12);

  color: #66b8fb;
}


/* ============================================================
   HEAD TEXT
============================================================ */

.mail-compare-head-plan small {
  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .09em;

  color: #69869d;
}


.mail-compare-head-plan--neothek small {
  color: #579bd2;
}


.mail-compare-head-plan strong {
  display: block;

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

  color: #d8e5ee;
}


/* ============================================================
   ROW
============================================================ */

.mail-compare-row {
  min-height: 112px;

  border-bottom:
    1px solid
    #213648;
}


.mail-compare-row:last-child {
  border-bottom: 0;
}


/* ============================================================
   FEATURE
============================================================ */

.mail-compare-feature {
  display: grid;

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

  align-items: center;

  gap: 13px;

  padding:
    20px
    22px;

  border-right:
    1px solid
    #213648;

  background:
    rgba(19, 35, 50, .52);
}


.mail-compare-feature-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #2d4b62;

  border-radius: 8px;

  background: #162a3a;

  color: #62a6dd;

  font-size: 13px;
}


.mail-compare-feature strong {
  display: block;

  margin-bottom: 4px;

  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;

  color: #cfdee9;
}


.mail-compare-feature small {
  display: block;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;

  color: #7891a5;
}


/* ============================================================
   VALUES
============================================================ */

.mail-compare-value {
  display: grid;

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

  align-items: center;

  gap: 12px;

  padding:
    20px
    24px;

  border-right:
    1px solid
    #213648;
}


.mail-compare-value:last-child {
  border-right: 0;
}


.mail-compare-value--neothek {
  background:
    rgba(35, 136, 255, .026);
}


/* ============================================================
   VALUE SYMBOL
============================================================ */

.mail-compare-value-symbol {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 10px;
}


.mail-compare-value--shared
.mail-compare-value-symbol {
  border:
    1px solid
    #344d61;

  background: #172936;

  color: #7d95a7;
}


.mail-compare-value--neothek
.mail-compare-value-symbol {
  border:
    1px solid
    rgba(48, 196, 145, .22);

  background:
    rgba(48, 196, 145, .08);

  color: #47cf9e;
}


/* ============================================================
   VALUE TEXT
============================================================ */

.mail-compare-value strong {
  display: block;

  margin-bottom: 5px;

  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;

  color: #cbd9e3;
}


.mail-compare-value--neothek strong {
  color: #e0ebf3;
}


.mail-compare-value small {
  display: block;

  max-width: 330px;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  color: #8299ab;
}


.mail-compare-value--neothek small {
  color: #94aabd;
}


/* ============================================================
   DECISION + CTA
============================================================ */

.mail-compare-decision {
  position: relative;
  z-index: 2;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(205px, .58fr)
    minmax(180px, auto);

  align-items: center;

  gap: 30px;

  margin-top: 22px;

  padding:
    30px
    31px;

  border:
    1px solid
    #2a5c82;

  border-radius: 14px;

  background:
    linear-gradient(
      110deg,
      rgba(35, 136, 255, .14),
      rgba(16, 34, 49, .94) 44%,
      rgba(14, 28, 41, .97)
    );

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, .10);
}


/* accent line */

.mail-compare-decision::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      #2388ff 0%,
      #25bfd8 35%,
      transparent 78%
    );
}


/* subtle glow */

.mail-compare-decision::after {
  content: "";

  position: absolute;

  right: -90px;
  top: -110px;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .10),
      transparent 68%
    );

  pointer-events: none;
}


/* ============================================================
   DECISION MAIN
============================================================ */

.mail-compare-decision-main {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: start;

  gap: 18px;
}


/* ============================================================
   DECISION ICON
============================================================ */

.mail-compare-decision-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #2e6997;

  border-radius: 10px;

  background:
    rgba(35, 136, 255, .12);

  color: #66b8fb;

  font-size: 17px;
}


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

.mail-compare-decision-copy > span {
  display: block;

  margin-bottom: 6px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .09em;

  color: #599bd1;
}


.mail-compare-decision-copy h3 {
  margin:
    0 0
    8px;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;

  color: #dce8f1;
}


.mail-compare-decision-copy h3 strong {
  font-weight: 600;

  color: #65b8fc;
}


.mail-compare-decision-copy p {
  max-width: 680px;

  margin: 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;

  color: #91a8b9;
}


/* ============================================================
   DECISION POINTS
============================================================ */

.mail-compare-decision-points {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  gap: 10px;

  padding:
    2px 0
    2px 25px;

  border-left:
    1px solid
    rgba(77, 119, 151, .28);
}


.mail-compare-decision-points span {
  display: flex;
  align-items: center;

  gap: 9px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;

  color: #b1c2cf;
}


.mail-compare-decision-points i {
  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(48, 196, 145, .10);

  color: #48ce9d;

  font-size: 8px;
}


/* ============================================================
   CTA ACTIONS
============================================================ */

.mail-compare-actions {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  gap: 9px;
}


/* ============================================================
   BUTTON BASE
============================================================ */

.mail-compare-button {
  min-height: 47px;

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

  gap: 10px;

  padding:
    11px
    17px;

  border-radius: 7px;

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;

  white-space: nowrap;

  text-decoration: none;

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


.mail-compare-button i {
  font-size: 9px;

  transition:
    transform .2s ease;
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.mail-compare-button--primary {
  border:
    1px solid
    #2c92ec;

  background:
    linear-gradient(
      135deg,
      #2388ff,
      #1674d1
    );

  box-shadow:
    0 9px 22px
    rgba(20, 113, 199, .21);

  color: #ffffff;
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.mail-compare-button--secondary {
  border:
    1px solid
    #31516a;

  background:
    rgba(20, 42, 59, .72);

  color: #a9bfd0;
}


/* ============================================================
   HOVERS
============================================================ */

@media (hover: hover) {

  .mail-compare-profile--dedicated:hover {
    transform:
      translateY(-2px);

    border-color: #3477a8;
  }


  .mail-compare-button--primary:hover {
    transform:
      translateY(-2px);

    border-color: #51a7f1;

    background:
      linear-gradient(
        135deg,
        #3295ff,
        #1778d6
      );

    box-shadow:
      0 12px 27px
      rgba(20, 113, 199, .28);

    color: #ffffff;

    text-decoration: none;
  }


  .mail-compare-button--primary:hover i {
    transform:
      translateX(3px);
  }


  .mail-compare-button--secondary:hover {
    transform:
      translateY(-2px);

    border-color: #447493;

    background:
      rgba(28, 55, 74, .9);

    color: #d5e4ee;

    text-decoration: none;
  }

}


.mail-compare-button:focus-visible {
  outline:
    2px solid
    #62b5ff;

  outline-offset: 3px;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailCompareEnter {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes mailComparePulse {

  0% {
    opacity: .65;

    transform:
      scale(.7);
  }

  70% {
    opacity: 0;

    transform:
      scale(1.8);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.8);
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-compare-table,
  .mail-compare-live::after {
    animation: none;
  }


  .mail-compare-profile,
  .mail-compare-button,
  .mail-compare-button i {
    transition: none;
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-compare {
    padding:
      92px 0
      100px;
  }


  .mail-compare-profile {
    padding: 23px;
  }


  .mail-compare-profile--dedicated {
    padding-right: 23px;
  }


  .mail-compare-recommended {
    position: static;

    width: max-content;

    grid-column: 2;

    margin-top: 5px;
  }


  .mail-compare-table-head,
  .mail-compare-row {
    grid-template-columns:
      minmax(190px, .75fr)
      minmax(230px, 1fr)
      minmax(230px, 1fr);
  }


  /* Decision becomes 2 levels */

  .mail-compare-decision {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(190px, .45fr);

    gap:
      25px
      30px;
  }


  .mail-compare-decision-main {
    grid-column:
      1 / -1;
  }


  .mail-compare-decision-points {
    padding-left: 0;

    border-left: 0;

    flex-direction: row;
    flex-wrap: wrap;

    gap:
      9px
      20px;
  }


  .mail-compare-actions {
    justify-self: end;

    min-width: 190px;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 850px) {

  /* ----------------------------------------------------------
     HEADER
  ---------------------------------------------------------- */

  .mail-compare-header {
    max-width: 720px;

    margin-bottom: 48px;
  }


  .mail-compare-intro {
    max-width: 650px;
  }


  /* ----------------------------------------------------------
     TOP PROFILES
  ---------------------------------------------------------- */

  .mail-compare-positioning {
    grid-template-columns: 1fr;

    gap: 0;
  }


  .mail-compare-profile--shared,
  .mail-compare-profile--dedicated {
    border-radius: 12px;
  }


  .mail-compare-vs {
    min-height: 62px;
  }


  .mail-compare-vs::before {
    top: 0;
    bottom: 0;

    left: 50%;
    right: auto;

    width: 1px;
    height: auto;
  }


  /* ----------------------------------------------------------
     TABLE -> COMPARISON CARDS
  ---------------------------------------------------------- */

  .mail-compare-table {
    overflow: visible;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    animation: none;
  }


  .mail-compare-table-head {
    display: none;
  }


  .mail-compare-row {
    display: grid;

    grid-template-columns:
      1fr
      1fr;

    min-height: 0;

    margin-bottom: 14px;

    overflow: hidden;

    border:
      1px solid
      #253e52;

    border-radius: 12px;

    background: #101f2d;
  }


  .mail-compare-row:last-child {
    margin-bottom: 0;
  }


  .mail-compare-feature {
    grid-column:
      1 / -1;

    min-height: 74px;

    border-right: 0;

    border-bottom:
      1px solid
      #253e52;

    background: #152838;
  }


  .mail-compare-value {
    min-height: 120px;

    align-items: start;

    padding: 19px;

    border-right:
      1px solid
      #253e52;
  }


  .mail-compare-value:last-child {
    border-right: 0;
  }


  .mail-compare-value--neothek {
    background:
      rgba(35, 136, 255, .055);
  }


  /* ----------------------------------------------------------
     DECISION
  ---------------------------------------------------------- */

  .mail-compare-decision {
    grid-template-columns: 1fr;

    gap: 22px;

    padding:
      27px
      25px;
  }


  .mail-compare-decision-main {
    grid-column: auto;
  }


  .mail-compare-decision-points {
    flex-direction: row;

    gap:
      10px
      20px;

    padding:
      18px 0
      0;

    border-top:
      1px solid
      rgba(77, 119, 151, .24);
  }


  .mail-compare-actions {
    width: 100%;

    flex-direction: row;

    justify-self: stretch;
  }


  .mail-compare-button--primary {
    flex: 1;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-compare {
    padding:
      72px 0
      78px;
  }


  /* ----------------------------------------------------------
     HEADER
  ---------------------------------------------------------- */

  .mail-compare-header {
    margin-bottom: 42px;
  }


  .mail-compare-eyebrow {
    gap: 8px;

    font-size: 10px;
  }


  .mail-compare-eyebrow > span {
    width: 18px;
  }


  .mail-compare-header h2 {
    font-size:
      clamp(
        32px,
        9vw,
        40px
      );
  }


  .mail-compare-header h2 > span {
    display: inline;
  }


  .mail-compare-intro p {
    font-size: 15px;
  }


  .mail-compare-intro-lead {
    font-size:
      17px !important;
  }


  /* ----------------------------------------------------------
     PROFILES
  ---------------------------------------------------------- */

  .mail-compare-profile {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    min-height: 0;

    padding: 20px;
  }


  .mail-compare-profile-icon {
    width: 47px;
    height: 47px;
  }


  .mail-compare-profile-copy strong {
    font-size: 16px;
  }


  .mail-compare-profile-copy p {
    font-size: 13.5px;
  }


  /* ----------------------------------------------------------
     ROWS
  ---------------------------------------------------------- */

  .mail-compare-row {
    grid-template-columns: 1fr;
  }


  .mail-compare-feature {
    grid-column: auto;
  }


  .mail-compare-value {
    min-height: 0;

    padding: 19px;

    border-right: 0;

    border-bottom:
      1px solid
      #253e52;
  }


  .mail-compare-value:last-child {
    border-bottom: 0;
  }


  /* ----------------------------------------------------------
     LABELS MOBILE
  ---------------------------------------------------------- */

  .mail-compare-value--shared::before {
    content:
      "HOSTING COMPARTIDO";

    grid-column:
      1 / -1;

    margin-bottom: 2px;

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

    letter-spacing: .09em;

    color: #6f8a9f;
  }


  .mail-compare-value--neothek::before {
    content:
      "CORREO GESTIONADO";

    grid-column:
      1 / -1;

    margin-bottom: 2px;

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

    letter-spacing: .09em;

    color: #579bd2;
  }


  .mail-compare-value {
    grid-template-columns:
      30px
      minmax(0, 1fr);
  }


  /* ----------------------------------------------------------
     DECISION + CTA
  ---------------------------------------------------------- */

  .mail-compare-decision {
    padding:
      23px
      20px;
  }


  .mail-compare-decision-main {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .mail-compare-decision-icon {
    width: 48px;
    height: 48px;
  }


  .mail-compare-decision-copy h3 {
    font-size: 19px;
  }


  .mail-compare-decision-copy p {
    font-size: 14px;
  }


  .mail-compare-decision-points {
    flex-direction: column;

    gap: 10px;
  }


  .mail-compare-actions {
    flex-direction: column;
  }


  .mail-compare-button {
    width: 100%;

    min-height: 49px;
  }

}


/* ============================================================
   14. ¿QUIÉN NECESITA UN SERVIDOR DE CORREO DEDICADO?
============================================================ */

.mail-usecases {
  position: relative;
  overflow: hidden;

  padding: 112px 0 118px;

  font-family: var(--mail-font);

  color: #26394a;

  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(35, 136, 255, .075),
      transparent 29%
    ),
    radial-gradient(
      circle at 4% 94%,
      rgba(36, 197, 223, .05),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #f3f8fc 0%,
      #f8fbfd 48%,
      #f2f7fa 100%
    );
}


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

.mail-usecases::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .20),
      transparent
    );
}


/* ============================================================
   DECORATIVE BACKGROUND
============================================================ */

.mail-usecases::after {
  content: "";

  position: absolute;

  width: 470px;
  height: 470px;

  top: -240px;
  right: -180px;

  border:
    1px solid
    rgba(35, 136, 255, .065);

  border-radius: 50%;

  pointer-events: none;
}


/* ============================================================
   HEADER — GRID MANTENIDO
============================================================ */

.mail-usecases-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, .72fr);

  align-items: end;

  gap: 78px;

  margin-bottom: 52px;
}


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

.mail-usecases-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin:
    0 0
    17px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .13em;

  color: #1978cf;
}


.mail-usecases-eyebrow > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bdd8
    );
}


/* ============================================================
   H2
============================================================ */

.mail-usecases-heading h2 {
  max-width: 780px;

  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      38px,
      3.3vw,
      51px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #172b3c;
}


.mail-usecases-heading h2 > span {
  display: block;

  color: #197bd4;
}


/* ============================================================
   INTRO
============================================================ */

.mail-usecases-intro {
  max-width: 490px;

  padding-left: 26px;

  border-left:
    2px solid
    rgba(35, 136, 255, .16);
}


.mail-usecases-intro p {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;

  color: #64798a;
}


.mail-usecases-intro-lead {
  margin-bottom:
    10px !important;

  font-size:
    19px !important;

  font-weight:
    600 !important;

  line-height:
    1.5 !important;

  color:
    #30485b !important;
}


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

.mail-usecases-featured {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 18px;

  margin-bottom: 18px;
}


/* ============================================================
   FEATURED CARD
============================================================ */

.mail-usecase-featured {
  position: relative;
  overflow: hidden;

  min-height: 390px;

  display: flex;
  flex-direction: column;

  padding:
    31px
    32px
    29px;

  border:
    1px solid
    #c5d9e8;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #f8fcff 0%,
      #f0f7fc 100%
    );

  box-shadow:
    0 18px 42px
    rgba(31, 73, 104, .095),
    0 2px 5px
    rgba(31, 73, 104, .035);

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


/* ============================================================
   FEATURED TOP ACCENT
============================================================ */

.mail-usecase-featured::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #2388ff 0%,
      #24bcd8 45%,
      rgba(36, 188, 216, .08) 88%
    );
}


/* ============================================================
   DECORATIVE CIRCLE
============================================================ */

.mail-usecase-featured::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -88px;
  right: -72px;

  border:
    1px solid
    rgba(35, 136, 255, .11);

  border-radius: 50%;

  background:
    rgba(35, 136, 255, .018);

  pointer-events: none;
}


/* ============================================================
   FEATURED HOVER
============================================================ */

@media (hover: hover) {

  .mail-usecase-featured:hover {
    transform:
      translateY(-4px);

    border-color: #9fc5e0;

    box-shadow:
      0 24px 54px
      rgba(31, 73, 104, .14),
      0 3px 7px
      rgba(31, 73, 104, .04);
  }

}


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

.mail-usecase-featured-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 27px;
}


/* ============================================================
   NUMBER
============================================================ */

.mail-usecase-number {
  font-size: 13px;
  font-weight: 700;

  letter-spacing: .09em;

  color: #86a5bb;
}


/* ============================================================
   FEATURED ICON
============================================================ */

.mail-usecase-icon {
  position: relative;
  z-index: 2;

  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #b9d6e9;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #eaf5fd,
      #e2f0fa
    );

  box-shadow:
    0 6px 16px
    rgba(35, 116, 178, .07);

  color: #197bd4;

  font-size: 18px;
}


/* ============================================================
   FEATURED BODY
============================================================ */

.mail-usecase-featured-body {
  max-width: 530px;
}


/* ============================================================
   TYPE
============================================================ */

.mail-usecase-type {
  display: block;

  margin-bottom: 9px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;

  letter-spacing: .1em;

  color: #347caf;
}


/* ============================================================
   FEATURED H3
============================================================ */

.mail-usecase-featured-body h3 {
  max-width: 490px;

  margin:
    0 0
    13px;

  font-size: 21px;
  font-weight: 600;
  line-height: 1.32;

  letter-spacing: -.018em;

  color: #193347;
  font-family: "Open Sans";
}


.mail-usecase-featured-body h3 span {
  color: #197bd4;
}


/* ============================================================
   FEATURED TEXT
============================================================ */

.mail-usecase-featured-body p {
  max-width: 500px;

  margin: 0;

  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.68;

  color: #587184;
}


/* ============================================================
   FEATURED EXAMPLE
============================================================ */

.mail-usecase-example {
  display: grid;

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

  align-items: center;

  gap: 12px;

  margin-top: auto;

  padding:
    19px
    18px;

  border:
    1px solid
    #d0e1ec;

  border-radius: 10px;

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


/* ============================================================
   EXAMPLE ICON
============================================================ */

.mail-usecase-example-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(35, 136, 255, .12);

  border-radius: 8px;

  background:
    rgba(35, 136, 255, .09);

  color: #197bd4;

  font-size: 12px;
}


/* ============================================================
   EXAMPLE TEXT
============================================================ */

.mail-usecase-example span {
  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .09em;

  color: #688aa3;
}


.mail-usecase-example strong {
  display: block;

  max-width: 430px;

  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;

  color: #38556a;
}


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

.mail-usecases-grid {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 14px;
}


/* ============================================================
   SECONDARY CARD
============================================================ */

.mail-usecase-card {
  position: relative;
  overflow: hidden;

  min-height: 345px;

  display: flex;
  flex-direction: column;

  padding:
    24px
    23px
    22px;

  border:
    1px solid
    #cbdde9;

  border-radius: 14px;

  background:
    linear-gradient(
      155deg,
      #f7fbfe 0%,
      #edf5fa 100%
    );

  box-shadow:
    0 11px 27px
    rgba(31, 69, 98, .07);

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


/* top accent */

.mail-usecase-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 23px;
  right: 23px;

  height: 2px;

  border-radius:
    0 0
    4px 4px;

  background:
    linear-gradient(
      90deg,
      rgba(35, 136, 255, .68),
      rgba(36, 188, 216, .34),
      transparent
    );
}


/* ============================================================
   SECONDARY HOVER
============================================================ */

@media (hover: hover) {

  .mail-usecase-card:hover {
    transform:
      translateY(-4px);

    border-color: #a9c9df;

    box-shadow:
      0 18px 38px
      rgba(31, 69, 98, .11);
  }

}


/* ============================================================
   CARD HEAD
============================================================ */

.mail-usecase-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 25px;
}


/* ============================================================
   CARD NUMBER
============================================================ */

.mail-usecase-card-number {
  font-size: 12px;
  font-weight: 700;

  letter-spacing: .08em;

  color: #8ba5b7;
}


/* ============================================================
   CARD ICON
============================================================ */

.mail-usecase-card-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #bfd8e9;

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #eaf5fc,
      #e4f1f9
    );

  color: #247fc8;

  font-size: 14px;

  box-shadow:
    0 5px 13px
    rgba(33, 112, 170, .055);
}


/* ============================================================
   CARD BODY
============================================================ */

.mail-usecase-card-body {
  flex: 1;
}


/* ============================================================
   CARD H3
============================================================ */

.mail-usecase-card-body h3 {
  margin:
    0 0
    11px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.012em;
  color: #203b4e;
  font-family: 'Open Sans';
}


.mail-usecase-card-body h3 span {
  color: #247ac0;
}


/* ============================================================
   CARD TEXT
============================================================ */

.mail-usecase-card-body p {
  margin: 0;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;

  color: #60798b;
}


/* ============================================================
   RULE
============================================================ */

.mail-usecase-card-rule {
  display: grid;

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

  align-items: center;

  gap: 9px;

  margin-top: 22px;

  padding:
    15px
    13px;

  border:
    1px solid
    #d4e2eb;

  border-radius: 9px;

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


/* ============================================================
   RULE CHECK
============================================================ */

.mail-usecase-card-rule i {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(34, 178, 129, .10);

  color: #1c9c6e;

  font-size: 8px;
}


/* ============================================================
   RULE TEXT
============================================================ */

.mail-usecase-card-rule span {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;

  color: #4d697d;
}


/* ============================================================
   BOTTOM MESSAGE + CTA
============================================================ */

.mail-usecases-bottom {
  position: relative;
  z-index: 2;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    auto
    auto;

  align-items: center;

  gap: 26px;

  margin-top: 22px;

  padding:
    28px
    29px;

  border:
    1px solid
    #b9d5e8;

  border-radius: 14px;

  background:
    linear-gradient(
      110deg,
      #e5f3fc 0%,
      #eef8fd 48%,
      #f6fbfe 100%
    );

  box-shadow:
    0 12px 30px
    rgba(30, 82, 120, .065);
}


.mail-usecases-bottom::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24bfd8 38%,
      transparent 78%
    );
}


/* ============================================================
   BOTTOM MAIN
============================================================ */

.mail-usecases-bottom-main {
  display: grid;

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

  align-items: center;

  gap: 18px;
}


/* ============================================================
   BOTTOM ICON
============================================================ */

.mail-usecases-bottom-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border:
    1px solid
    #afd2e8;

  border-radius: 10px;

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

  color: #197bd4;

  font-size: 16px;

  box-shadow:
    0 7px 18px
    rgba(35, 100, 150, .07);
}


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

.mail-usecases-bottom-copy > span {
  display: block;

  margin-bottom: 5px;

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

  letter-spacing: .09em;

  color: #3d7eaf;
}


.mail-usecases-bottom-copy > strong {
  display: block;

  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;

  color: #29475c;
}


.mail-usecases-bottom-copy > strong em {
  font-style: normal;
  font-weight: 600;

  color: #197bd4;
}


.mail-usecases-bottom-copy p {
  max-width: 620px;

  margin:
    6px 0
    0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  color: #698193;
}


/* ============================================================
   BOTTOM TAGS
============================================================ */

.mail-usecases-bottom-tags {
  display: flex;
  align-items: center;

  gap: 7px;
}


.mail-usecases-bottom-tags span {
  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    8px
    10px;

  border:
    1px solid
    #cadde9;

  border-radius: 7px;

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

  font-size: 11.5px;
  font-weight: 500;

  color: #4f6c80;

  white-space: nowrap;
}


.mail-usecases-bottom-tags i {
  color: #20a274;

  font-size: 8px;
}


/* ============================================================
   CTA
============================================================ */

.mail-usecases-actions {
  position: relative;
  z-index: 2;
}


.mail-usecases-cta {
  min-height: 49px;

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

  gap: 11px;

  padding:
    12px
    20px;

  border:
    1px solid
    #197bd4;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #2388ff 0%,
      #1675d1 100%
    );

  box-shadow:
    0 9px 22px
    rgba(26, 112, 190, .20);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  color: #ffffff;

  text-decoration: none;

  white-space: nowrap;

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


.mail-usecases-cta i {
  font-size: 10px;

  transition:
    transform .22s ease;
}


@media (hover: hover) {

  .mail-usecases-cta:hover {
    transform:
      translateY(-2px);

    background:
      linear-gradient(
        135deg,
        #3195ff 0%,
        #177bdc 100%
      );

    box-shadow:
      0 13px 28px
      rgba(26, 112, 190, .27);

    color: #ffffff;

    text-decoration: none;
  }


  .mail-usecases-cta:hover i {
    transform:
      translateX(3px);
  }

}


.mail-usecases-cta:focus-visible {
  outline:
    2px solid
    #2388ff;

  outline-offset: 3px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-usecases {
    padding:
      94px 0
      100px;
  }


  .mail-usecases-header {
    gap: 45px;
  }


  .mail-usecases-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .mail-usecase-card {
    min-height: 310px;
  }


  .mail-usecases-bottom {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }


  .mail-usecases-bottom-main {
    grid-column:
      1 / -1;
  }


  .mail-usecases-bottom-tags {
    flex-wrap: wrap;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

  .mail-usecases-header {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .mail-usecases-intro {
    max-width: 680px;
  }


  .mail-usecases-featured {
    grid-template-columns: 1fr;
  }


  .mail-usecase-featured {
    min-height: 350px;
  }


  .mail-usecases-bottom {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .mail-usecases-bottom-main {
    grid-column: auto;
  }


  .mail-usecases-actions {
    width: 100%;
  }


  .mail-usecases-cta {
    width: 100%;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-usecases {
    padding:
      72px 0
      78px;
  }


  /* ----------------------------------------------------------
     HEADING
  ---------------------------------------------------------- */

  .mail-usecases-heading h2 {
    font-size:
      clamp(
        31px,
        9vw,
        39px
      );
  }


  .mail-usecases-heading h2 > span {
    display: inline;
  }


  /* ----------------------------------------------------------
     INTRO
  ---------------------------------------------------------- */

  .mail-usecases-intro {
    padding-left: 18px;
  }


  .mail-usecases-intro p {
    font-size: 15px;
  }


  .mail-usecases-intro-lead {
    font-size:
      18px !important;
  }


  /* ----------------------------------------------------------
     FEATURED
  ---------------------------------------------------------- */

  .mail-usecase-featured {
    min-height: 0;

    padding:
      24px
      22px;
  }


  .mail-usecase-featured-top {
    margin-bottom: 21px;
  }


  .mail-usecase-icon {
    width: 48px;
    height: 48px;

    font-size: 16px;
  }


  .mail-usecase-featured-body h3 {
    font-size: 21px;
  }


  .mail-usecase-featured-body p {
    font-size: 15px;
  }


  .mail-usecase-example {
    margin-top: 26px;

    padding:
      16px
      15px;
  }


  .mail-usecase-example strong {
    font-size: 13.5px;
  }


  /* ----------------------------------------------------------
     SECONDARY
  ---------------------------------------------------------- */

  .mail-usecases-grid {
    grid-template-columns: 1fr;
  }


  .mail-usecase-card {
    min-height: 0;

    padding:
      22px
      21px;
  }


  .mail-usecase-card::before {
    left: 21px;
    right: 21px;
  }


  .mail-usecase-card-head {
    margin-bottom: 20px;
  }


  .mail-usecase-card-body h3 {
    font-size: 19px;
  }


  .mail-usecase-card-body p {
    font-size: 14.5px;
  }


  /* ----------------------------------------------------------
     BOTTOM
  ---------------------------------------------------------- */

  .mail-usecases-bottom {
    padding:
      23px
      20px;
  }


  .mail-usecases-bottom-main {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .mail-usecases-bottom-tags {
    gap: 6px;
  }


  .mail-usecases-bottom-tags span {
    padding:
      7px
      9px;

    font-size: 11px;
  }


  .mail-usecases-cta {
    min-height: 50px;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-usecase-featured,
  .mail-usecase-card,
  .mail-usecases-cta,
  .mail-usecases-cta i {
    transition: none;
  }

}

/* ============================================================
   15. CORREO ADMINISTRADO Y MONITOREADO POR NEOTHEK
============================================================ */

.mail-managed {
  position: relative;
  overflow: hidden;

  padding: 112px 0 118px;

  font-family: var(--mail-font);

  color: #dbe8f2;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(35, 136, 255, .09),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(37, 196, 218, .055),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #0a1520 0%,
      #0d1b28 48%,
      #0a151f 100%
    );
}


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

.mail-managed::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .36),
      rgba(36, 198, 223, .18),
      transparent
    );
}


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

.mail-managed::after {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  top: 190px;
  left: 50%;

  transform: translateX(-50%);

  opacity: .18;

  background-image:
    linear-gradient(
      rgba(95, 157, 205, .08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(95, 157, 205, .08) 1px,
      transparent 1px
    );

  background-size: 34px 34px;

  -webkit-mask-image:
    radial-gradient(
      circle,
      #000 0%,
      transparent 70%
    );

  mask-image:
    radial-gradient(
      circle,
      #000 0%,
      transparent 70%
    );

  pointer-events: none;
}


/* ============================================================
   HEADER
============================================================ */

.mail-managed-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, .72fr);

  align-items: end;

  gap: 78px;

  margin-bottom: 48px;
}


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

.mail-managed-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin: 0 0 17px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .13em;

  color: #62b6fc;
}


.mail-managed-eyebrow > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25c3dc
    );
}


/* ============================================================
   H2
============================================================ */

.mail-managed-heading h2 {
  max-width: 790px;

  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      38px,
      3.3vw,
      51px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #f1f6fa;
}


.mail-managed-heading h2 > span {
  display: block;

  color: #62b5ff;
}


/* ============================================================
   INTRO
============================================================ */

.mail-managed-intro {
  max-width: 490px;
}


.mail-managed-intro p {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;

  color: #9db1c1;
}


.mail-managed-intro-lead {
  margin-bottom: 10px !important;

  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  color: #dce7ef !important;
}


/* ============================================================
   CONSOLE
============================================================ */

.mail-managed-console {
  position: relative;
  z-index: 2;

  overflow: hidden;

  border: 1px solid #223c51;
  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 33, 47, .97),
      rgba(11, 25, 37, .98)
    );

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, .19);

  animation:
    mailManagedEnter
    .75s
    ease-out
    both;
}


/* ============================================================
   CONSOLE HEAD
============================================================ */

.mail-managed-console-head {
  display: flex;

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

  gap: 30px;

  min-height: 78px;

  padding: 17px 23px;

  border-bottom:
    1px solid #21394c;

  background:
    rgba(20, 39, 55, .65);
}


/* ============================================================
   CONSOLE TITLE
============================================================ */

.mail-managed-console-title {
  display: flex;
  align-items: center;

  gap: 12px;
}


.mail-managed-console-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid #2b5879;
  border-radius: 9px;

  background:
    rgba(35, 136, 255, .10);

  color: #65b7fa;

  font-size: 14px;
}


.mail-managed-console-title small {
  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .09em;

  color: #66859d;
}


.mail-managed-console-title strong {
  display: block;

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

  color: #d8e6ef;
}


/* ============================================================
   STATUS
============================================================ */

.mail-managed-status {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 8px 11px;

  border:
    1px solid
    rgba(51, 203, 148, .15);

  border-radius: 7px;

  background:
    rgba(51, 203, 148, .055);
}


.mail-managed-status-dot {
  position: relative;

  width: 9px;
  height: 9px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #35ce98;

  box-shadow:
    0 0 10px
    rgba(53, 206, 152, .25);
}


.mail-managed-status-dot::after {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    1px solid
    rgba(53, 206, 152, .32);

  border-radius: 50%;

  animation:
    mailManagedPulse
    2.8s
    ease-out
    infinite;
}


.mail-managed-status small {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .08em;

  color: #6b9988;
}


.mail-managed-status strong {
  display: block;

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

  color: #8fd8bd;
}


/* ============================================================
   MAP
============================================================ */

.mail-managed-map {
  display: grid;

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

  min-height: 545px;
}


/* ============================================================
   SIDE
============================================================ */

.mail-managed-side {
  position: relative;

  padding: 34px 31px;
}


.mail-managed-side--client {
  border-right:
    1px solid #20384b;

  background:
    rgba(17, 32, 46, .38);
}


.mail-managed-side--neothek {
  border-left:
    1px solid #20384b;

  background:
    linear-gradient(
      145deg,
      rgba(35, 136, 255, .055),
      rgba(17, 32, 46, .35)
    );
}


/* ============================================================
   SIDE HEAD
============================================================ */

.mail-managed-side-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 16px;
}


.mail-managed-side-icon {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid #304d63;
  border-radius: 10px;

  background: #172b3a;

  color: #7295af;

  font-size: 15px;
}


.mail-managed-side--neothek
.mail-managed-side-icon {
  border-color: #2c628d;

  background:
    rgba(35, 136, 255, .11);

  color: #65b5f8;
}


.mail-managed-side-head span {
  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .1em;

  color: #6b879c;

  padding: 11px 13px;
}


.mail-managed-side--neothek
.mail-managed-side-head span {
  color: #579cd4;
}


.mail-managed-side-head h3 {
  margin: 0;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;

  color: #d9e6ef;
}


/* ============================================================
   SIDE DESCRIPTION
============================================================ */

.mail-managed-side-description {
  max-width: 410px;

  margin: 0 0 26px;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;

  color: #8fa5b6;
}


/* ============================================================
   LIST
============================================================ */

.mail-managed-list {
  display: flex;
  flex-direction: column;

  gap: 9px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.mail-managed-list li {
  display: grid;

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

  align-items: center;

  gap: 12px;

  min-height: 71px;

  padding: 11px 13px;

  border: 1px solid #263f53;
  border-radius: 9px;

  background:
    rgba(19, 37, 52, .64);

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


.mail-managed-side--neothek
.mail-managed-list li {
  border-color: #28475f;

  background:
    rgba(21, 42, 59, .66);
}


@media (hover: hover) {

  .mail-managed-list li:hover {
    transform: translateX(3px);

    border-color: #315875;

    background:
      rgba(23, 44, 61, .78);
  }


  .mail-managed-side--neothek
  .mail-managed-list li:hover {
    border-color: #326b97;

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

}


/* ============================================================
   LIST ICON
============================================================ */

.mail-managed-list-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border: 1px solid #304d63;
  border-radius: 8px;

  background: #172a39;

  color: #7298b4;

  font-size: 12px;
}


.mail-managed-side--neothek
.mail-managed-list-icon {
  border-color: #2c5a7d;

  background:
    rgba(35, 136, 255, .08);

  color: #5eadee;
}


/* ============================================================
   LIST TEXT
============================================================ */

.mail-managed-list strong {
  display: block;

  margin-bottom: 3px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  color: #cbdbe6;
}


.mail-managed-list small {
  display: block;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;

  color: #7f98aa;
}


/* ============================================================
   CENTER
============================================================ */

.mail-managed-center {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  padding: 35px 25px;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(35, 136, 255, .10),
      transparent 47%
    );
}


/* ============================================================
   CONNECTIONS
============================================================ */

.mail-managed-connection {
  position: absolute;

  top: 48%;

  width: 60px;
  height: 1px;

  overflow: hidden;
}


.mail-managed-connection--left {
  left: 0;
}


.mail-managed-connection--right {
  right: 0;
}


.mail-managed-line {
  position: absolute;

  inset: 0;

  background: #34566f;
}


.mail-managed-flow {
  position: absolute;

  top: -1px;

  width: 20px;
  height: 3px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #3aa5ff,
      transparent
    );

  box-shadow:
    0 0 8px
    rgba(58, 165, 255, .45);

  animation:
    mailManagedFlow
    2.6s
    linear
    infinite;
}


.mail-managed-connection--right
.mail-managed-flow {
  animation-delay: 1.3s;
}


/* ============================================================
   SERVER
============================================================ */

.mail-managed-server {
  position: relative;
  z-index: 2;

  width: 190px;

  padding: 15px;

  border: 1px solid #2b5778;
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #152c3e,
      #0f2231
    );

  box-shadow:
    0 20px 45px
    rgba(0, 0, 0, .20),
    0 0 35px
    rgba(35, 136, 255, .055);
}


.mail-managed-server-glow {
  position: absolute;

  inset: -18px;

  z-index: -1;

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

  border-radius: 22px;

  animation:
    mailManagedServerGlow
    4s
    ease-in-out
    infinite;
}


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

.mail-managed-server-top {
  display: flex;

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

  gap: 10px;

  margin-bottom: 12px;
}


.mail-managed-server-label {
  font-size: 8px;
  font-weight: 600;

  letter-spacing: .09em;

  color: #63849d;
}


.mail-managed-server-live {
  display: flex;
  align-items: center;

  gap: 5px;

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

  letter-spacing: .07em;

  color: #62bd9c;
}


.mail-managed-server-live i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #35ce98;
}


/* ============================================================
   SERVER UNIT
============================================================ */

.mail-managed-server-unit {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 10px;

  height: 58px;

  margin-bottom: 8px;

  padding: 9px;

  border: 1px solid #2a485e;
  border-radius: 7px;

  background: #112635;
}


.mail-managed-server-leds {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.mail-managed-server-leds span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #35ce98;

  box-shadow:
    0 0 5px
    rgba(53, 206, 152, .32);
}


.mail-managed-server-leds span:nth-child(2) {
  background: #4aa5ef;

  box-shadow:
    0 0 5px
    rgba(74, 165, 239, .32);
}


.mail-managed-server-lines {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.mail-managed-server-lines i {
  display: block;

  height: 3px;

  border-radius: 5px;

  background: #29485f;
}


.mail-managed-server-lines i:nth-child(1) {
  width: 100%;
}


.mail-managed-server-lines i:nth-child(2) {
  width: 76%;
}


.mail-managed-server-lines i:nth-child(3) {
  width: 52%;
}


.mail-managed-server-check {
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(53, 206, 152, .08);

  color: #42cb99;

  font-size: 7px;
}


/* ============================================================
   SERVER METRICS
============================================================ */

.mail-managed-server-metrics {
  display: grid;

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

  gap: 6px;

  margin-top: 12px;
}


.mail-managed-server-metrics > div {
  padding: 7px;

  border: 1px solid #29465c;
  border-radius: 6px;

  background:
    rgba(11, 27, 39, .55);
}


.mail-managed-server-metrics span {
  display: block;

  margin-bottom: 3px;

  font-size: 7px;

  color: #617f96;
}


.mail-managed-server-metrics strong {
  display: flex;
  align-items: center;

  gap: 4px;

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

  color: #9eb4c4;
}


.mail-managed-server-metrics strong i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #35ce98;
}


/* ============================================================
   CENTER LABEL
============================================================ */

.mail-managed-center-label {
  margin-top: 20px;

  text-align: center;
}


.mail-managed-center-label strong {
  display: block;

  margin-bottom: 3px;

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

  color: #c8d9e5;
}


.mail-managed-center-label span {
  display: block;

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

  color: #708ca1;
}


/* ============================================================
   MANAGEMENT STRIP
============================================================ */

.mail-managed-strip {
  position: relative;
  z-index: 2;

  display: flex;

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

  gap: 35px;

  margin-top: 18px;

  padding: 21px 23px;

  border: 1px solid #284a63;
  border-radius: 11px;

  background:
    linear-gradient(
      110deg,
      rgba(35, 136, 255, .08),
      rgba(17, 34, 48, .82)
    );
}


.mail-managed-strip-title {
  display: grid;

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

  align-items: center;

  gap: 12px;
}


.mail-managed-strip-icon {
  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border: 1px solid #2d6088;
  border-radius: 8px;

  background:
    rgba(35, 136, 255, .09);

  color: #60b0f2;

  font-size: 13px;
}


.mail-managed-strip-title small {
  display: block;

  margin-bottom: 3px;

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

  letter-spacing: .08em;

  color: #5795c4;
}


.mail-managed-strip-title strong {
  display: block;

  max-width: 590px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;

  color: #c9dbe7;
}


.mail-managed-strip-examples {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 7px;
}


.mail-managed-strip-examples span {
  display: flex;
  align-items: center;

  gap: 6px;

  padding: 7px 9px;

  border: 1px solid #2b485d;
  border-radius: 6px;

  background:
    rgba(13, 29, 41, .52);

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

  color: #91a8b8;

  white-space: nowrap;
}


.mail-managed-strip-examples i {
  color: #45cb9a;

  font-size: 7px;
}


/* ============================================================
   CLOSING + CTA
============================================================ */

.mail-managed-closing {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(300px, 1fr)
    auto
    auto;

  align-items: center;

  gap: 32px;

  margin-top: 18px;

  padding: 26px 27px;

  border: 1px solid #d4e4ef;
  border-radius: 12px;

  background:
    linear-gradient(
      110deg,
      #f5fafe 0%,
      #ffffff 60%,
      #f8fbfe 100%
    );

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, .05);
}


/* subtle top accent */

.mail-managed-closing::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 27px;

  width: 115px;
  height: 2px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #24bdd9
    );
}


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

.mail-managed-closing-copy > span {
  display: block;

  margin-bottom: 5px;

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

  letter-spacing: .09em;

  color: #4584b8;
}


.mail-managed-closing-copy h3 {
  max-width: 470px;

  margin: 0;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;

  color: #324b5f;
}


.mail-managed-closing-copy h3 strong {
  font-weight: 600;

  color: #197bd4;
}


/* ============================================================
   CLOSING STATUS
============================================================ */

.mail-managed-closing-status {
  display: flex;
  align-items: center;

  gap: 13px;

  flex: 0 0 auto;
}


.mail-managed-closing-status > div {
  display: flex;
  align-items: center;

  gap: 7px;

  font-size: 11.5px;
  font-weight: 500;

  color: #577186;
}


.mail-managed-closing-status i {
  color: #2584d5;

  font-size: 12px;
}


.mail-managed-closing-divider {
  width: 1px;
  height: 22px;

  background: #d6e2eb;
}


/* ============================================================
   CLOSING ACTION
============================================================ */

.mail-managed-closing-action {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 7px;

  flex: 0 0 auto;
}


/* ============================================================
   CTA BUTTON
============================================================ */

.mail-managed-cta {
  min-width: 190px;
  min-height: 50px;

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

  gap: 11px;

  padding: 12px 19px;

  border: 1px solid #197bd4;
  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #2388ff 0%,
      #197bd4 100%
    );

  box-shadow:
    0 9px 22px
    rgba(25, 123, 212, .21);

  font-family: var(--mail-font);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  color: #ffffff;

  text-decoration: none;

  white-space: nowrap;

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


.mail-managed-cta > i {
  font-size: 10px;

  transition:
    transform .22s ease;
}


@media (hover: hover) {

  .mail-managed-cta:hover {
    transform: translateY(-2px);

    background:
      linear-gradient(
        135deg,
        #3194ff 0%,
        #1474cc 100%
      );

    box-shadow:
      0 13px 28px
      rgba(25, 123, 212, .28);

    color: #ffffff;

    text-decoration: none;
  }


  .mail-managed-cta:hover > i {
    transform: translateX(3px);
  }

}


.mail-managed-cta:focus-visible {
  outline:
    2px solid
    #2388ff;

  outline-offset: 3px;
}


/* ============================================================
   CTA MICROCOPY
============================================================ */

.mail-managed-closing-action > small {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.3;

  color: #7890a2;

  white-space: nowrap;
}


.mail-managed-closing-action > small i {
  color: #28a77a;

  font-size: 9px;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailManagedEnter {

  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes mailManagedPulse {

  0% {
    opacity: .65;
    transform: scale(.7);
  }

  70% {
    opacity: 0;
    transform: scale(1.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }

}


@keyframes mailManagedFlow {

  0% {
    left: -25px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 5px);
    opacity: 0;
  }

}


@keyframes mailManagedServerGlow {

  0%,
  100% {
    opacity: .35;
    transform: scale(.98);
  }

  50% {
    opacity: .8;
    transform: scale(1.015);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .mail-managed {
    padding: 94px 0 100px;
  }


  .mail-managed-header {
    gap: 45px;
  }


  .mail-managed-map {
    grid-template-columns:
      minmax(0, 1fr)
      220px
      minmax(0, 1fr);
  }


  .mail-managed-side {
    padding: 28px 22px;
  }


  .mail-managed-server {
    width: 170px;
  }


  .mail-managed-strip {
    align-items: flex-start;
    flex-direction: column;
  }


  .mail-managed-strip-examples {
    justify-content: flex-start;

    padding-left: 54px;
  }


  /* closing becomes 2 rows */

  .mail-managed-closing {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 22px 28px;
  }


  .mail-managed-closing-copy {
    grid-column: 1;
    grid-row: 1;
  }


  .mail-managed-closing-status {
    grid-column: 1;
    grid-row: 2;
  }


  .mail-managed-closing-action {
    grid-column: 2;
    grid-row: 1 / 3;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 850px) {

  .mail-managed-header {
    grid-template-columns: 1fr;

    gap: 24px;
  }


  .mail-managed-intro {
    max-width: 680px;
  }


  .mail-managed-map {
    grid-template-columns: 1fr;
  }


  .mail-managed-side--client {
    border-right: 0;

    border-bottom:
      1px solid #20384b;
  }


  .mail-managed-side--neothek {
    border-left: 0;

    border-top:
      1px solid #20384b;
  }


  .mail-managed-center {
    min-height: 360px;
  }


  /* connections become vertical */

  .mail-managed-connection {
    left: 50%;
    right: auto;

    width: 1px;
    height: 55px;

    transform: translateX(-50%);
  }


  .mail-managed-connection--left {
    top: 0;
  }


  .mail-managed-connection--right {
    top: auto;
    bottom: 0;
  }


  .mail-managed-line {
    width: 1px;
    height: 100%;
  }


  .mail-managed-flow {
    top: -20px;
    left: -1px;

    width: 3px;
    height: 20px;

    background:
      linear-gradient(
        180deg,
        transparent,
        #3aa5ff,
        transparent
      );

    animation:
      mailManagedFlowVertical
      2.6s
      linear
      infinite;
  }


  .mail-managed-connection--right
  .mail-managed-flow {
    animation-delay: 1.3s;
  }


  /* closing */

  .mail-managed-closing {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .mail-managed-closing-copy,
  .mail-managed-closing-status,
  .mail-managed-closing-action {
    grid-column: auto;
    grid-row: auto;
  }


  .mail-managed-closing-action {
    width: 100%;

    align-items: stretch;
  }


  .mail-managed-cta {
    width: 100%;
  }

}


/* ============================================================
   VERTICAL FLOW
============================================================ */

@keyframes mailManagedFlowVertical {

  0% {
    top: -22px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: calc(100% + 2px);
    opacity: 0;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-managed {
    padding: 72px 0 78px;
  }


  /* ----------------------------------------------------------
     HEADING
  ---------------------------------------------------------- */

  .mail-managed-heading h2 {
    font-size:
      clamp(
        31px,
        9vw,
        39px
      );
  }


  .mail-managed-heading h2 > span {
    display: inline;
  }


  .mail-managed-intro p {
    font-size: 15px;
  }


  .mail-managed-intro-lead {
    font-size: 18px !important;
  }


  /* ----------------------------------------------------------
     CONSOLE
  ---------------------------------------------------------- */

  .mail-managed-console {
    border-radius: 13px;
  }


  .mail-managed-console-head {
    align-items: flex-start;
    flex-direction: column;

    padding: 18px;
  }


  .mail-managed-status {
    width: 100%;
  }


  /* ----------------------------------------------------------
     SIDES
  ---------------------------------------------------------- */

  .mail-managed-side {
    padding: 25px 20px;
  }


  .mail-managed-side-head h3 {
    font-size: 19px;
  }


  .mail-managed-side-description {
    font-size: 14.5px;
  }


  .mail-managed-list li {
    min-height: 75px;
  }


  .mail-managed-list strong {
    font-size: 14px;
  }


  .mail-managed-list small {
    font-size: 12.5px;
  }


  /* ----------------------------------------------------------
     CENTER
  ---------------------------------------------------------- */

  .mail-managed-center {
    min-height: 340px;
  }


  .mail-managed-server {
    width: 180px;
  }


  /* ----------------------------------------------------------
     STRIP
  ---------------------------------------------------------- */

  .mail-managed-strip {
    padding: 20px;
  }


  .mail-managed-strip-title {
    grid-template-columns: 1fr;
  }


  .mail-managed-strip-examples {
    padding-left: 0;
  }


  .mail-managed-strip-examples span {
    white-space: normal;
  }


  /* ----------------------------------------------------------
     CLOSING
  ---------------------------------------------------------- */

  .mail-managed-closing {
    padding: 23px 20px;
  }


  .mail-managed-closing::before {
    left: 20px;

    width: 90px;
  }


  .mail-managed-closing-copy h3 {
    font-size: 17px;
  }


  .mail-managed-closing-status {
    width: 100%;

    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }


  .mail-managed-closing-divider {
    display: none;
  }


  .mail-managed-closing-action {
    padding-top: 2px;
  }


  .mail-managed-cta {
    min-width: 0;
    min-height: 51px;

    font-size: 13.5px;
  }


  .mail-managed-closing-action > small {
    white-space: normal;

    text-align: center;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-managed-console,
  .mail-managed-status-dot::after,
  .mail-managed-flow,
  .mail-managed-server-glow {
    animation: none;
  }


  .mail-managed-list li,
  .mail-managed-cta,
  .mail-managed-cta > i {
    transition: none;
  }

}

/* ============================================================
   16. TECNOLOGÍA DETRÁS DE SU SERVIDOR DE CORREO
============================================================ */

.mail-stack {
  position: relative;
  overflow: hidden;

  padding: 110px 0 115px;

  font-family: "Open Sans", Arial, sans-serif;

  color: #263d50;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(35, 136, 255, .055),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f5f9fc 0%,
      #ffffff 52%,
      #f6fafc 100%
    );
}


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

.mail-stack::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .22),
      transparent
    );
}


/* ============================================================
   BACKGROUND DETAIL
============================================================ */

.mail-stack::after {
  content: "";

  position: absolute;

  width: 580px;
  height: 580px;

  top: 265px;
  left: 50%;

  transform: translateX(-50%);

  border:
    1px solid
    rgba(35, 136, 255, .045);

  border-radius: 50%;

  pointer-events: none;
}


/* ============================================================
   HEADER — CENTERED / NO GRID
============================================================ */

.mail-stack-header {
  position: relative;
  z-index: 2;

  max-width: 880px;

  margin:
    0 auto
    64px;

  text-align: center;
}


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

.mail-stack-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin:
    0 0 18px;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: .14em;

  color: #1978cf;
}


.mail-stack-eyebrow > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bdd8
    );
}


/* reverse gradient */

.mail-stack-eyebrow > span:first-child {
  background:
    linear-gradient(
      90deg,
      #25bdd8,
      #2388ff
    );
}


/* ============================================================
   HEADING
============================================================ */

.mail-stack-header h2 {
  max-width: 820px;

  margin:
    0 auto 22px;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    clamp(
      40px,
      4vw,
      56px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #172c3d;
}


.mail-stack-header h2 > span {
  display: block;

  color: #197bd4;
}


/* ============================================================
   HEADER LEAD
============================================================ */

.mail-stack-intro-lead {
  max-width: 700px;

  margin:
    0 auto 10px;

  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;

  color: #344f63;
}


/* ============================================================
   HEADER INTRO
============================================================ */

.mail-stack-intro {
  max-width: 720px;

  margin: 0 auto;

  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;

  color: #687f90;
}


/* ============================================================
   ARCHITECTURE
============================================================ */

.mail-stack-architecture {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 34px;
}


/* ============================================================
   COLUMN
============================================================ */

.mail-stack-column {
  display: flex;
  flex-direction: column;

  gap: 11px;
}


/* ============================================================
   COLUMN HEAD
============================================================ */

.mail-stack-column-head {
  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 49px;

  margin-bottom: 5px;
  padding-left: 3px;
}


.mail-stack-column-head > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    #d3e2ec;

  border-radius: 9px;

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

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

  color: #4385b8;
}


.mail-stack-column-head small {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .1em;

  color: #8aa0b0;
}


.mail-stack-column-head strong {
  display: block;

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

  color: #4c687b;
}


/* ============================================================
   TECHNOLOGY CARD
============================================================ */

.mail-stack-card {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 16px;

  min-height: 108px;

  padding: 18px 20px;

  border: 1px solid #d7e4ed;
  border-radius: 13px;

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

  box-shadow:
    0 10px 28px
    rgba(38, 72, 98, .045);

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


.mail-stack-card::before {
  content: "";

  position: absolute;

  top: 18px;
  bottom: 18px;
  left: 0;

  width: 2px;

  border-radius:
    0 3px 3px 0;

  background:
    rgba(35, 136, 255, .22);

  opacity: 0;

  transition:
    opacity .25s ease;
}


/* ============================================================
   CARD HOVER
============================================================ */

@media (hover: hover) {

  .mail-stack-card:hover {
    transform:
      translateY(-2px);

    border-color:
      #bdd9ea;

    box-shadow:
      0 16px 34px
      rgba(38, 72, 98, .08);
  }


  .mail-stack-card:hover::before {
    opacity: 1;
  }

}


/* ============================================================
   CARD ICON
============================================================ */

.mail-stack-card-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border: 1px solid #d0e1ec;
  border-radius: 11px;

  background: #f2f8fc;

  color: #3c86c2;

  font-size: 15px;
}


.mail-stack-card-icon--blue {
  border-color: #c3dff1;

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

  color: #2384d8;
}


.mail-stack-card-icon--green {
  border-color:
    rgba(38, 173, 127, .18);

  background:
    rgba(38, 173, 127, .065);

  color: #22a576;
}


/* ============================================================
   CARD TITLE
============================================================ */

.mail-stack-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 5px;
}


.mail-stack-card-title h3 {
  margin: 0;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;

  color: #263f52;
}


.mail-stack-card-title > span {
  padding: 3px 6px;

  border: 1px solid #dbe6ed;
  border-radius: 4px;

  background: #f7fafc;

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

  letter-spacing: .07em;

  color: #7890a1;
}


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

.mail-stack-card-copy p {
  margin: 0;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.58;

  color: #667d8e;
}


/* ============================================================
   CORE
============================================================ */

.mail-stack-core {
  position: relative;

  min-height: 445px;

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


/* ============================================================
   CORE RINGS
============================================================ */

.mail-stack-core-ring {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}


.mail-stack-core-ring--outer {
  width: 255px;
  height: 255px;

  border:
    1px dashed
    rgba(35, 136, 255, .16);

  animation:
    mailStackRotate
    40s
    linear
    infinite;
}


.mail-stack-core-ring--middle {
  width: 218px;
  height: 218px;

  border:
    1px solid
    rgba(35, 136, 255, .055);
}


.mail-stack-core-ring--inner {
  width: 190px;
  height: 190px;

  border:
    1px solid
    rgba(35, 136, 255, .10);

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .045),
      transparent 68%
    );
}


/* ============================================================
   CORE NODE
============================================================ */

.mail-stack-core-node {
  position: relative;
  z-index: 3;

  width: 166px;
  min-height: 190px;

  display: flex;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  padding: 20px 17px;

  border: 1px solid #bcd9ed;
  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #edf7fd
    );

  box-shadow:
    0 23px 52px
    rgba(32, 91, 135, .12);

  text-align: center;
}


/* ============================================================
   CORE STATUS
============================================================ */

.mail-stack-core-status {
  display: flex;
  align-items: center;

  gap: 6px;

  margin-bottom: 15px;

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

  letter-spacing: .09em;

  color: #438b71;
}


.mail-stack-core-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #31c38f;

  box-shadow:
    0 0 0 4px
    rgba(49, 195, 143, .08);

  animation:
    mailStackStatus
    3s
    ease-in-out
    infinite;
}


/* ============================================================
   CORE ICON
============================================================ */

.mail-stack-core-icon {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  margin-bottom: 13px;

  border: 1px solid #bcdcf1;
  border-radius: 13px;

  background:
    rgba(35, 136, 255, .075);

  color: #2385d9;

  font-size: 18px;
}


/* ============================================================
   CORE TEXT
============================================================ */

.mail-stack-core-node > strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.38;

  color: #29455a;
}


.mail-stack-core-sub {
  display: block;

  max-width: 120px;

  margin-top: 7px;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;

  color: #71899a;
}


/* ============================================================
   CONNECTORS
============================================================ */

.mail-stack-connector {
  position: absolute;

  top: 50%;

  width: 72px;
  height: 1px;

  overflow: hidden;

  background: #c3d8e6;
}


.mail-stack-connector--left {
  left: -34px;
}


.mail-stack-connector--right {
  right: -34px;
}


.mail-stack-connector i {
  position: absolute;

  top: -1px;

  width: 20px;
  height: 3px;

  border-radius: 5px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #2388ff,
      transparent
    );

  animation:
    mailStackFlow
    3s
    linear
    infinite;
}


.mail-stack-connector--right i {
  animation-delay: 1.5s;
}


/* ============================================================
   DOMAIN SECURITY
============================================================ */

.mail-stack-domain {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(280px, .72fr)
    minmax(0, 1.45fr);

  align-items: center;

  gap: 32px;

  margin-top: 31px;

  padding: 23px 25px;

  border: 1px solid #d4e3ed;
  border-radius: 14px;

  background:
    linear-gradient(
      110deg,
      #eff8fd,
      #ffffff
    );

  box-shadow:
    0 10px 30px
    rgba(38, 72, 98, .035);
}


/* ============================================================
   DOMAIN HEADING
============================================================ */

.mail-stack-domain-heading {
  display: grid;

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

  align-items: center;

  gap: 14px;
}


.mail-stack-domain-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border: 1px solid #c5ddec;
  border-radius: 10px;

  background: #ffffff;

  color: #2584d5;

  font-size: 14px;
}


.mail-stack-domain-heading span {
  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .09em;

  color: #4784b4;
}


.mail-stack-domain-heading strong {
  display: block;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;

  color: #385469;
}


/* ============================================================
   PROTOCOLS
============================================================ */

.mail-stack-protocols {
  display: grid;

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

  gap: 8px;
}


/* ============================================================
   PROTOCOL
============================================================ */

.mail-stack-protocol {
  display: grid;

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

  align-items: center;

  gap: 9px;

  min-height: 64px;

  padding: 9px 10px;

  border: 1px solid #dae6ee;
  border-radius: 9px;

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


/* ============================================================
   PROTOCOL CHECK
============================================================ */

.mail-stack-protocol-check {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(36, 173, 126, .08);

  color: #22a576;

  font-size: 8px;
}


/* ============================================================
   PROTOCOL TEXT
============================================================ */

.mail-stack-protocol strong {
  display: block;

  margin-bottom: 2px;

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

  color: #405b6e;
}


.mail-stack-protocol small {
  display: block;

  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;

  color: #7a91a1;
}


/* ============================================================
   CLOSING + CTA
============================================================ */

.mail-stack-closing {
  position: relative;
  z-index: 2;

  display: flex;

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

  gap: 40px;

  margin-top: 18px;

  padding: 25px 26px;

  border: 1px solid #c9deeb;
  border-radius: 13px;

  background:
    linear-gradient(
      110deg,
      rgba(35, 136, 255, .075),
      rgba(255, 255, 255, .96) 62%
    );

  box-shadow:
    0 12px 32px
    rgba(38, 72, 98, .04);
}


/* top accent */

.mail-stack-closing::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 26px;

  width: 105px;
  height: 2px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bdd8
    );
}


/* ============================================================
   CLOSING MAIN
============================================================ */

.mail-stack-closing-main {
  display: grid;

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

  align-items: center;

  gap: 16px;

  min-width: 0;
}


/* ============================================================
   CLOSING ICON
============================================================ */

.mail-stack-closing-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid #c4ddec;
  border-radius: 10px;

  background: #ffffff;

  color: #2384d7;

  font-size: 15px;

  box-shadow:
    0 6px 18px
    rgba(38, 72, 98, .045);
}


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

.mail-stack-closing-copy > span {
  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .1em;

  color: #4987b8;
}


.mail-stack-closing-copy > strong {
  display: block;

  margin-bottom: 3px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;

  color: #344f63;
}


.mail-stack-closing-copy p {
  margin: 0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;

  color: #6b8191;
}


.mail-stack-closing-copy p b {
  font-weight: 600;

  color: #197bd4;
}


/* ============================================================
   CTA ACTION
============================================================ */

.mail-stack-closing-action {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 7px;

  flex: 0 0 auto;
}


/* ============================================================
   CTA
============================================================ */

.mail-stack-cta {
  min-width: 205px;
  min-height: 50px;

  display: inline-flex;

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

  gap: 11px;

  padding: 12px 20px;

  border: 1px solid #197bd4;
  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #2388ff 0%,
      #197bd4 100%
    );

  box-shadow:
    0 9px 22px
    rgba(25, 123, 212, .20);

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  color: #ffffff;

  text-decoration: none;

  white-space: nowrap;

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


.mail-stack-cta > i {
  font-size: 10px;

  transition:
    transform .22s ease;
}


@media (hover: hover) {

  .mail-stack-cta:hover {
    transform: translateY(-2px);

    background:
      linear-gradient(
        135deg,
        #3194ff 0%,
        #1474cc 100%
      );

    box-shadow:
      0 13px 28px
      rgba(25, 123, 212, .27);

    color: #ffffff;

    text-decoration: none;
  }


  .mail-stack-cta:hover > i {
    transform: translateX(3px);
  }

}


.mail-stack-cta:focus-visible {
  outline:
    2px solid
    #2388ff;

  outline-offset: 3px;
}


/* ============================================================
   CTA MICROCOPY
============================================================ */

.mail-stack-closing-action > small {
  display: flex;

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

  gap: 5px;

  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.35;

  color: #758c9c;

  white-space: nowrap;
}


.mail-stack-closing-action > small i {
  color: #24a474;

  font-size: 9px;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailStackRotate {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes mailStackFlow {

  0% {
    left: -22px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 2px);
    opacity: 0;
  }

}


@keyframes mailStackStatus {

  0%,
  100% {
    box-shadow:
      0 0 0 3px
      rgba(49, 195, 143, .07);
  }

  50% {
    box-shadow:
      0 0 0 7px
      rgba(49, 195, 143, .02);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-stack {
    padding:
      94px 0
      100px;
  }


  .mail-stack-header {
    margin-bottom: 55px;
  }


  .mail-stack-architecture {
    grid-template-columns:
      minmax(0, 1fr)
      210px
      minmax(0, 1fr);

    gap: 20px;
  }


  .mail-stack-core {
    min-height: 420px;
  }


  .mail-stack-core-ring--outer {
    width: 205px;
    height: 205px;
  }


  .mail-stack-core-ring--middle {
    width: 184px;
    height: 184px;
  }


  .mail-stack-core-ring--inner {
    width: 170px;
    height: 170px;
  }


  .mail-stack-core-node {
    width: 150px;
    min-height: 180px;
  }


  .mail-stack-connector {
    width: 40px;
  }


  .mail-stack-connector--left {
    left: -20px;
  }


  .mail-stack-connector--right {
    right: -20px;
  }


  .mail-stack-domain {
    grid-template-columns: 1fr;
  }


  .mail-stack-closing {
    gap: 25px;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

  /* header remains centered */

  .mail-stack-header {
    max-width: 680px;

    margin-bottom: 48px;
  }


  .mail-stack-architecture {
    grid-template-columns: 1fr;

    gap: 26px;
  }


  .mail-stack-column {
    max-width: 650px;

    width: 100%;

    margin: 0 auto;
  }


  .mail-stack-core {
    min-height: 300px;

    order: -1;
  }


  .mail-stack-core-ring--outer {
    width: 245px;
    height: 245px;
  }


  .mail-stack-core-ring--middle {
    width: 215px;
    height: 215px;
  }


  .mail-stack-core-ring--inner {
    width: 190px;
    height: 190px;
  }


  .mail-stack-core-node {
    width: 160px;
    min-height: 185px;
  }


  .mail-stack-connector {
    display: none;
  }


  .mail-stack-protocols {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* closing */

  .mail-stack-closing {
    align-items: stretch;
    flex-direction: column;

    gap: 21px;
  }


  .mail-stack-closing-action {
    width: 100%;

    align-items: stretch;
  }


  .mail-stack-cta {
    width: 100%;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-stack {
    padding:
      74px 0
      80px;
  }


  /* ----------------------------------------------------------
     HEADER
  ---------------------------------------------------------- */

  .mail-stack-header {
    margin-bottom: 42px;
  }


  .mail-stack-eyebrow {
    gap: 9px;

    margin-bottom: 15px;

    font-size: 9.5px;

    letter-spacing: .11em;
  }


  .mail-stack-eyebrow > span {
    width: 20px;
  }


  .mail-stack-header h2 {
    margin-bottom: 18px;

    font-size:
      clamp(
        31px,
        9vw,
        39px
      );

    line-height: 1.14;
  }


  .mail-stack-header h2 > span {
    display: inline;
  }


  .mail-stack-intro-lead {
    font-size: 17px;
    line-height: 1.5;
  }


  .mail-stack-intro {
    font-size: 14.5px;
    line-height: 1.7;
  }


  /* ----------------------------------------------------------
     CORE
  ---------------------------------------------------------- */

  .mail-stack-core {
    min-height: 280px;
  }


  .mail-stack-core-ring--outer {
    width: 225px;
    height: 225px;
  }


  .mail-stack-core-ring--middle {
    width: 200px;
    height: 200px;
  }


  .mail-stack-core-ring--inner {
    width: 180px;
    height: 180px;
  }


  /* ----------------------------------------------------------
     COLUMN
  ---------------------------------------------------------- */

  .mail-stack-column-head {
    min-height: 45px;
  }


  /* ----------------------------------------------------------
     CARDS
  ---------------------------------------------------------- */

  .mail-stack-card {
    grid-template-columns:
      47px
      minmax(0, 1fr);

    min-height: 102px;

    padding: 16px;

    gap: 14px;
  }


  .mail-stack-card-icon {
    width: 45px;
    height: 45px;
  }


  .mail-stack-card-title h3 {
    font-size: 16px;
  }


  .mail-stack-card-copy p {
    font-size: 13px;
  }


  /* ----------------------------------------------------------
     DOMAIN
  ---------------------------------------------------------- */

  .mail-stack-domain {
    padding: 20px;
  }


  .mail-stack-domain-heading {
    grid-template-columns:
      43px
      minmax(0, 1fr);
  }


  .mail-stack-domain-icon {
    width: 42px;
    height: 42px;
  }


  .mail-stack-protocols {
    grid-template-columns: 1fr;
  }


  .mail-stack-protocol {
    min-height: 64px;
  }


  .mail-stack-protocol strong {
    font-size: 13px;
  }


  .mail-stack-protocol small {
    font-size: 11px;
  }


  /* ----------------------------------------------------------
     CLOSING
  ---------------------------------------------------------- */

  .mail-stack-closing {
    padding: 22px 20px;
  }


  .mail-stack-closing::before {
    left: 20px;

    width: 90px;
  }


  .mail-stack-closing-main {
    grid-template-columns: 1fr;

    gap: 13px;
  }


  .mail-stack-closing-copy > strong {
    font-size: 15px;
  }


  .mail-stack-closing-copy p {
    font-size: 13px;
  }


  .mail-stack-cta {
    min-width: 0;
    min-height: 51px;

    font-size: 13.5px;
  }


  .mail-stack-closing-action > small {
    white-space: normal;

    text-align: center;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-stack-core-ring--outer,
  .mail-stack-core-status i,
  .mail-stack-connector i {
    animation: none;
  }


  .mail-stack-card,
  .mail-stack-card::before,
  .mail-stack-cta,
  .mail-stack-cta > i {
    transition: none;
  }

}


/* ============================================================
   17. CÓMO ACTIVAMOS SU SERVIDOR DE CORREO EMPRESARIAL
============================================================ */

.mail-activation {
  position: relative;
  overflow: hidden;

  padding: 110px 0 114px;

  font-family: var(--mail-font);

  color: #263d50;

  background:
    radial-gradient(
      circle at 91% 12%,
      rgba(35, 136, 255, .055),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 88%,
      rgba(36, 195, 218, .04),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fafc 100%
    );
}


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

.mail-activation::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .17),
      transparent
    );
}


/* ============================================================
   HEADER
============================================================ */

.mail-activation-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, .72fr);

  align-items: end;

  gap: 78px;

  margin-bottom: 62px;
}


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

.mail-activation-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin: 0 0 17px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .13em;

  color: #1978cf;
}


.mail-activation-eyebrow > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bdd8
    );
}


/* ============================================================
   H2
============================================================ */

.mail-activation-heading h2 {
  max-width: 790px;

  margin: 0;

  font-family: var(--mail-font);

  font-size:
    clamp(
      38px,
      3.3vw,
      51px
    );

  font-weight: 600;
  line-height: 1.12;

  letter-spacing: -.035em;

  color: #172c3d;
}


.mail-activation-heading h2 > span {
  display: block;

  color: #197bd4;
}


/* ============================================================
   INTRO
============================================================ */

.mail-activation-intro {
  max-width: 490px;
}


.mail-activation-intro p {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;

  color: #657b8d;
}


.mail-activation-intro-lead {
  margin-bottom: 10px !important;

  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  color: #30495c !important;
}


/* ============================================================
   PROCESS
============================================================ */

.mail-activation-process {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 20px;

  margin-bottom: 22px;
}


/* ============================================================
   TRACK
============================================================ */

.mail-activation-track {
  position: absolute;

  top: 44px;
  left: calc(12.5% - 8px);
  right: calc(12.5% - 8px);

  height: 2px;

  overflow: hidden;

  z-index: 0;
}


.mail-activation-track-base {
  position: absolute;

  inset: 0;

  background: #d5e3ec;
}


.mail-activation-track-flow {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 22%;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #2388ff 35%,
      #29b9d6 70%,
      transparent
    );

  box-shadow:
    0 0 9px
    rgba(35, 136, 255, .18);

  animation:
    mailActivationFlow
    6s
    linear
    infinite;
}


/* ============================================================
   STEP
============================================================ */

.mail-activation-step {
  position: relative;
  z-index: 2;

  min-width: 0;

  padding: 0 7px 5px;
}


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

.mail-activation-step-top {
  position: relative;

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

  height: 89px;

  margin-bottom: 16px;
}


/* ============================================================
   STEP NUMBER
============================================================ */

.mail-activation-step-number {
  position: absolute;

  top: 9px;
  left: 0;

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

  letter-spacing: .08em;

  color: #99adbc;
}


/* ============================================================
   NODE
============================================================ */

.mail-activation-node {
  position: absolute;

  top: 18px;
  left: 50%;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  transform: translateX(-50%);

  border: 1px solid #bdd9eb;
  border-radius: 50%;

  background: #ffffff;

  color: #2584d5;

  font-size: 15px;

  box-shadow:
    0 8px 22px
    rgba(32, 92, 136, .09);
}


.mail-activation-node--final {
  border-color:
    rgba(37, 174, 126, .27);

  background: #f4fcf9;

  color: #25a978;
}


/* ============================================================
   NODE PULSE
============================================================ */

.mail-activation-node-pulse {
  position: absolute;

  inset: -7px;

  border: 1px solid
    rgba(35, 136, 255, .12);

  border-radius: 50%;

  animation:
    mailActivationPulse
    3.6s
    ease-out
    infinite;
}


.mail-activation-step:nth-of-type(3)
.mail-activation-node-pulse {
  animation-delay: .8s;
}


.mail-activation-step:nth-of-type(4)
.mail-activation-node-pulse {
  animation-delay: 1.6s;
}


.mail-activation-step:nth-of-type(5)
.mail-activation-node-pulse {
  animation-delay: 2.4s;
}


/* ============================================================
   STEP BODY
============================================================ */

.mail-activation-step-body {
  min-height: 190px;

  padding: 23px 21px;

  border: 1px solid #d8e4ec;
  border-radius: 13px;

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

  box-shadow:
    0 10px 28px
    rgba(38, 72, 98, .045);

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


.mail-activation-step--final
.mail-activation-step-body {
  border-color:
    rgba(40, 174, 128, .20);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6fcf9
    );
}


/* ============================================================
   HOVER
============================================================ */

@media (hover: hover) {

  .mail-activation-step:hover
  .mail-activation-step-body {
    transform: translateY(-3px);

    border-color: #bcd6e7;

    box-shadow:
      0 16px 34px
      rgba(38, 72, 98, .075);
  }

}


/* ============================================================
   LABEL
============================================================ */

.mail-activation-step-label {
  display: block;

  margin-bottom: 9px;

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

  letter-spacing: .1em;

  color: #4387bc;
}


/* ============================================================
   STEP H3
============================================================ */

.mail-activation-step-body h3 {
  margin: 0 0 11px;

  font-size: 19px;
  font-weight: 600;
  line-height: 1.38;

  letter-spacing: -.012em;

  color: #294357;
}


.mail-activation-step-body h3 span {
  color: #197bd4;
}


/* ============================================================
   STEP P
============================================================ */

.mail-activation-step-body p {
  margin: 0;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;

  color: #667d8e;
}


/* ============================================================
   STEP DETAIL
============================================================ */

.mail-activation-step-detail {
  display: flex;
  align-items: center;

  gap: 7px;

  margin: 11px 5px 0;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color: #60798b;
}


.mail-activation-step-detail i {
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

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

  color: #2584d5;

  font-size: 7px;
}


.mail-activation-step-detail--final i {
  background:
    rgba(37, 174, 126, .08);

  color: #25a978;
}


/* ============================================================
   CONFIGURATION BAR
============================================================ */

.mail-activation-config {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(300px, .85fr)
    minmax(0, 1.25fr);

  align-items: center;

  gap: 30px;

  padding: 22px 24px;

  border: 1px solid #d2e2ec;
  border-radius: 13px;

  background:
    linear-gradient(
      110deg,
      #eef7fd,
      #ffffff
    );
}


/* ============================================================
   CONFIG HEADING
============================================================ */

.mail-activation-config-heading {
  display: grid;

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

  align-items: center;

  gap: 13px;
}


.mail-activation-config-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid #c3ddec;
  border-radius: 9px;

  background: #ffffff;

  color: #2384d7;

  font-size: 14px;
}


.mail-activation-config-heading span {
  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .09em;

  color: #4685b7;
}


.mail-activation-config-heading strong {
  display: block;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;

  color: #3a5569;
}


/* ============================================================
   CONFIG LIST
============================================================ */

.mail-activation-config-list {
  display: grid;

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

  gap: 7px;
}


.mail-activation-config-list span {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 42px;

  padding: 8px;

  border: 1px solid #d8e5ed;
  border-radius: 7px;

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

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

  color: #587286;
}


.mail-activation-config-list i {
  color: #24a778;

  font-size: 8px;
}


/* ============================================================
   MIGRATION
============================================================ */

.mail-activation-migration {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 52px;

  margin-top: 18px;

  padding: 32px 34px;

  border: 1px solid #d7e4ec;
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 12px 32px
    rgba(37, 71, 97, .045);
}


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

.mail-activation-migration-visual {
  display: grid;

  grid-template-columns:
    minmax(110px, 1fr)
    75px
    minmax(110px, 1fr);

  align-items: center;

  gap: 12px;
}


/* ============================================================
   MAILBOX
============================================================ */

.mail-activation-mailbox {
  position: relative;

  min-height: 116px;

  display: flex;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 9px;

  padding: 17px;

  border: 1px solid #d8e4ec;
  border-radius: 11px;

  background: #f8fafc;

  text-align: center;
}


.mail-activation-mailbox i {
  font-size: 21px;

  color: #7d96a8;
}


.mail-activation-mailbox > span {
  font-size: 12px;
  font-weight: 600;

  color: #657d8e;
}


.mail-activation-mailbox--new {
  border-color: #bcd9eb;

  background:
    linear-gradient(
      145deg,
      #f2f9fe,
      #ffffff
    );
}


.mail-activation-mailbox--new i {
  color: #2384d8;
}


.mail-activation-mailbox--new > span {
  color: #3977a7;
}


/* ============================================================
   NEW SERVER STATUS
============================================================ */

.mail-activation-mailbox-status {
  position: absolute;

  top: 10px;
  right: 10px;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #32c991;

  box-shadow:
    0 0 0 4px
    rgba(50, 201, 145, .08);
}


/* ============================================================
   MIGRATION ARROW
============================================================ */

.mail-activation-migration-arrow {
  position: relative;

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

  color: #2788da;
}


.mail-activation-migration-arrow > span {
  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background: #c6dbe9;
}


.mail-activation-migration-arrow i {
  position: relative;

  padding: 5px;

  background: #ffffff;

  font-size: 16px;

  animation:
    mailActivationArrow
    2.8s
    ease-in-out
    infinite;
}


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

.mail-activation-migration-copy > span {
  display: block;

  margin-bottom: 7px;

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

  letter-spacing: .1em;

  color: #4384b8;
}


.mail-activation-migration-copy h3 {
  margin: 0 0 10px;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;

  color: #314b5f;
}


.mail-activation-migration-copy h3 strong {
  font-weight: 600;

  color: #197bd4;
}


.mail-activation-migration-copy p {
  max-width: 650px;

  margin: 0;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.68;

  color: #687f90;
}


/* ============================================================
   CLOSING
============================================================ */

.mail-activation-closing {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 15px;

  margin-top: 18px;

  padding: 21px 23px;

  border: 1px solid #c8deeb;
  border-radius: 12px;

  background:
    linear-gradient(
      110deg,
      #edf7fe,
      #ffffff
    );
}


/* ============================================================
   CLOSING ICON
============================================================ */

.mail-activation-closing-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border: 1px solid #c3ddec;
  border-radius: 9px;

  background: #ffffff;

  color: #2384d7;

  font-size: 14px;
}


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

.mail-activation-closing-copy > span {
  display: block;

  margin-bottom: 4px;

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

  letter-spacing: .09em;

  color: #4685b7;
}


.mail-activation-closing-copy > strong {
  display: block;

  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;

  color: #435e72;
}


.mail-activation-closing-copy > strong em {
  font-style: normal;
  font-weight: 600;

  color: #197bd4;
}


/* ============================================================
   CLOSING LINK
============================================================ */

.mail-activation-closing-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 43px;

  padding: 0 17px;

  border: 1px solid #bdd9ea;
  border-radius: 8px;

  background: #ffffff;

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

  color: #1978cf;

  text-decoration: none;

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


.mail-activation-closing-link i {
  font-size: 10px;

  transition:
    transform .22s ease;
}


@media (hover: hover) {

  .mail-activation-closing-link:hover {
    transform: translateY(-1px);

    border-color: #9fcbe8;

    background: #f7fbfe;
  }


  .mail-activation-closing-link:hover i {
    transform: translateX(3px);
  }

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailActivationFlow {

  0% {
    left: -22%;
  }

  100% {
    left: 100%;
  }

}


@keyframes mailActivationPulse {

  0% {
    opacity: .65;
    transform: scale(.85);
  }

  70% {
    opacity: 0;
    transform: scale(1.25);
  }

  100% {
    opacity: 0;
    transform: scale(1.25);
  }

}


@keyframes mailActivationArrow {

  0%,
  100% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-activation {
    padding: 92px 0 98px;
  }


  .mail-activation-header {
    gap: 42px;
  }


  .mail-activation-process {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 24px 18px;
  }


  .mail-activation-track {
    display: none;
  }


  .mail-activation-step-top {
    height: 72px;
  }


  .mail-activation-node {
    left: auto;
    right: 10px;

    transform: none;
  }


  .mail-activation-step-body {
    min-height: 180px;
  }


  .mail-activation-config {
    grid-template-columns: 1fr;
  }


  .mail-activation-config-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

  .mail-activation-header {
    grid-template-columns: 1fr;

    gap: 23px;
  }


  .mail-activation-intro {
    max-width: 680px;
  }


  .mail-activation-migration {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .mail-activation-migration-visual {
    max-width: 520px;

    width: 100%;

    margin: 0 auto;
  }


  .mail-activation-closing {
    grid-template-columns:
      48px
      minmax(0, 1fr);
  }


  .mail-activation-closing-link {
    grid-column: 2;

    width: max-content;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-activation {
    padding: 72px 0 78px;
  }


  /* ----------------------------------------------------------
     HEADER
  ---------------------------------------------------------- */

  .mail-activation-heading h2 {
    font-size:
      clamp(
        31px,
        9vw,
        39px
      );
  }


  .mail-activation-heading h2 > span {
    display: inline;
  }


  .mail-activation-intro p {
    font-size: 15px;
  }


  .mail-activation-intro-lead {
    font-size: 18px !important;
  }


  /* ----------------------------------------------------------
     PROCESS
  ---------------------------------------------------------- */

  .mail-activation-process {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .mail-activation-step {
    padding: 0;
  }


  .mail-activation-step-top {
    height: 64px;

    margin-bottom: 8px;
  }


  .mail-activation-node {
    top: 5px;
    right: 0;

    width: 50px;
    height: 50px;
  }


  .mail-activation-step-number {
    top: 17px;

    font-size: 12px;
  }


  .mail-activation-step-body {
    min-height: 0;

    padding: 20px;
  }


  .mail-activation-step-body h3 {
    font-size: 19px;
  }


  .mail-activation-step-body p {
    font-size: 14.5px;
  }


  /* ----------------------------------------------------------
     CONFIG
  ---------------------------------------------------------- */

  .mail-activation-config {
    padding: 20px;
  }


  .mail-activation-config-heading {
    grid-template-columns: 1fr;
  }


  .mail-activation-config-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* ----------------------------------------------------------
     MIGRATION
  ---------------------------------------------------------- */

  .mail-activation-migration {
    padding: 23px 20px;
  }


  .mail-activation-migration-visual {
    grid-template-columns:
      1fr;

    gap: 11px;
  }


  .mail-activation-migration-arrow {
    min-height: 40px;

    transform: rotate(90deg);
  }


  .mail-activation-migration-copy h3 {
    font-size: 20px;
  }


  .mail-activation-migration-copy p {
    font-size: 14.5px;
  }


  /* ----------------------------------------------------------
     CLOSING
  ---------------------------------------------------------- */

  .mail-activation-closing {
    grid-template-columns: 1fr;

    padding: 20px;
  }


  .mail-activation-closing-link {
    grid-column: auto;

    width: 100%;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-activation-track-flow,
  .mail-activation-node-pulse,
  .mail-activation-migration-arrow i {
    animation: none;
  }


  .mail-activation-step-body,
  .mail-activation-closing-link,
  .mail-activation-closing-link i {
    transition: none;
  }

}

/* ============================================================
   18. FAQ — CORREO EMPRESARIAL
   FONT: OPEN SANS
============================================================ */

.mail-faq,
.mail-faq * {
  box-sizing: border-box;
  font-family: "Open Sans", Arial, sans-serif;
}


/* ============================================================
   SECTION
============================================================ */

.mail-faq {
  position: relative;
  overflow: hidden;

  padding: 108px 0 116px;

  color: #253d50;

  background:
    radial-gradient(
      circle at 7% 10%,
      rgba(35, 136, 255, .045),
      transparent 26%
    ),
    radial-gradient(
      circle at 94% 86%,
      rgba(35, 184, 207, .035),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f5f9fc 0%,
      #f9fbfd 100%
    );
}


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

.mail-faq::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(35, 136, 255, .18),
      transparent
    );
}


/* ============================================================
   HEADER
============================================================ */

.mail-faq-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, .72fr);

  align-items: end;

  gap: 78px;

  margin-bottom: 48px;
}


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

.mail-faq-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin: 0 0 17px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: .13em;

  color: #1978cf;
}


.mail-faq-eyebrow > span {
  width: 28px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #2388ff,
      #25bdd8
    );
}


/* ============================================================
   H2
============================================================ */

.mail-faq-heading h2 {
  max-width: 800px;

  margin: 0;

  font-family: "Open Sans", Arial, sans-serif;

  font-size:
    clamp(
      37px,
      3.2vw,
      49px
    );

  font-weight: 600;
  line-height: 1.14;

  letter-spacing: -.032em;

  color: #172c3d;
}


.mail-faq-heading h2 > span {
  display: block;

  color: #197bd4;
}


/* ============================================================
   INTRO
============================================================ */

.mail-faq-intro {
  max-width: 490px;
}


.mail-faq-intro p {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;

  color: #657b8d;
}


.mail-faq-intro-lead {
  margin-bottom: 10px !important;

  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.52 !important;

  color: #30495c !important;
}


/* ============================================================
   FAQ LIST — FULL CONTAINER WIDTH
============================================================ */

.mail-faq-list {
  position: relative;
  z-index: 2;

  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* ============================================================
   FAQ ITEM
============================================================ */

.mail-faq-item {
  position: relative;

  width: 100%;

  overflow: hidden;

  border: 1px solid #d4e2eb;
  border-radius: 12px;

  background: #ffffff;

  box-shadow:
    0 5px 17px
    rgba(36, 70, 95, .025);

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


.mail-faq-item[open] {
  border-color: #b7d6e9;

  box-shadow:
    0 12px 30px
    rgba(36, 84, 120, .055);
}


/* ============================================================
   OPEN ACCENT
============================================================ */

.mail-faq-item[open]::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      #2388ff,
      #29b8d5
    );
}


/* ============================================================
   SUMMARY
============================================================ */

.mail-faq-item summary {
  display: grid;

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

  align-items: center;

  gap: 18px;

  min-height: 84px;

  padding: 18px 24px;

  cursor: pointer;

  list-style: none;

  user-select: none;
}


.mail-faq-item summary::-webkit-details-marker {
  display: none;
}


/* ============================================================
   NUMBER
============================================================ */

.mail-faq-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: 1px solid #d7e4ec;
  border-radius: 8px;

  background: #f7fafc;

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

  letter-spacing: .06em;

  color: #849baa;

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


.mail-faq-item[open]
.mail-faq-number {
  border-color: #bdd9eb;

  background:
    rgba(35, 136, 255, .065);

  color: #237fc7;
}


/* ============================================================
   QUESTION
============================================================ */

.mail-faq-question {
  padding-right: 20px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: -.006em;

  color: #344f63;

  transition:
    color .22s ease;
}


.mail-faq-item[open]
.mail-faq-question {
  color: #245f8f;
}


/* ============================================================
   TOGGLE
============================================================ */

.mail-faq-toggle {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  justify-self: end;

  border: 1px solid #d1e1eb;
  border-radius: 50%;

  background: #f7fafc;

  color: #5d829d;

  font-size: 10px;

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


.mail-faq-item[open]
.mail-faq-toggle {
  transform: rotate(45deg);

  border-color: #b9d9ec;

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

  color: #2384d7;
}


/* ============================================================
   ANSWER
============================================================ */

.mail-faq-answer {
  padding:
    0
    24px
    25px
    94px;
}


/* ============================================================
   ANSWER INNER
============================================================ */

.mail-faq-answer-inner {
  position: relative;

  padding-top: 18px;

  border-top: 1px solid #e0eaf0;
}


.mail-faq-answer-inner::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 0;

  width: 75px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #86bde0,
      transparent
    );
}


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

.mail-faq-answer p {
  max-width: 1000px;

  margin: 0;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;

  color: #60798c;
}


/* ============================================================
   TAGS
============================================================ */

.mail-faq-answer-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 15px;
}


.mail-faq-answer-tags span {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 5px 10px;

  border: 1px solid #d3e3ed;
  border-radius: 6px;

  background: #f6fafc;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;

  color: #53758e;
}


/* ============================================================
   ANSWER HIGHLIGHT
============================================================ */

.mail-faq-answer-highlight {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-top: 16px;

  padding: 10px 13px;

  border: 1px solid
    rgba(37, 169, 120, .18);

  border-radius: 7px;

  background:
    rgba(37, 169, 120, .055);

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;

  color: #477563;
}


.mail-faq-answer-highlight i {
  flex: 0 0 auto;

  color: #25a978;

  font-size: 13px;
}


/* ============================================================
   FAQ HOVER
============================================================ */

@media (hover: hover) {

  .mail-faq-item:not([open]):hover {
    transform: translateY(-1px);

    border-color: #c1dae9;

    box-shadow:
      0 9px 24px
      rgba(36, 76, 106, .045);
  }


  .mail-faq-item:not([open]):hover
  .mail-faq-toggle {
    border-color: #bad7e9;

    background: #f1f8fc;

    color: #2384d7;
  }


  .mail-faq-item:not([open]):hover
  .mail-faq-number {
    border-color: #c8dfea;

    color: #4d88b4;
  }

}


/* ============================================================
   BOTTOM HELP
============================================================ */

.mail-faq-bottom {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 16px;

  margin-top: 20px;

  padding: 23px 25px;

  border: 1px solid #c8deeb;
  border-radius: 12px;

  background:
    linear-gradient(
      110deg,
      #edf7fe,
      #ffffff 72%
    );
}


/* ============================================================
   BOTTOM ICON
============================================================ */

.mail-faq-bottom-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid #c1dceb;
  border-radius: 10px;

  background: #ffffff;

  color: #2384d7;

  font-size: 15px;

  box-shadow:
    0 7px 17px
    rgba(35, 99, 146, .05);
}


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

.mail-faq-bottom-copy > span {
  display: block;

  margin-bottom: 5px;

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

  letter-spacing: .09em;

  color: #4685b7;
}


.mail-faq-bottom-copy > strong {
  display: block;

  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;

  color: #435e72;
}


/* ============================================================
   BOTTOM BUTTON
============================================================ */

.mail-faq-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 44px;

  padding: 0 18px;

  border: 1px solid #b9d6e8;
  border-radius: 8px;

  background: #ffffff;

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

  color: #1978cf;

  text-decoration: none;

  white-space: nowrap;

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


.mail-faq-bottom-btn i {
  font-size: 9px;

  transition:
    transform .22s ease;
}


@media (hover: hover) {

  .mail-faq-bottom-btn:hover {
    transform: translateY(-1px);

    border-color: #99c8e5;

    background: #f8fcff;

    box-shadow:
      0 7px 18px
      rgba(35, 104, 154, .07);
  }


  .mail-faq-bottom-btn:hover i {
    transform: translateX(3px);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-faq {
    padding: 92px 0 98px;
  }


  .mail-faq-header {
    gap: 42px;

    margin-bottom: 42px;
  }


  .mail-faq-answer {
    padding-left: 94px;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

  .mail-faq-header {
    grid-template-columns: 1fr;

    gap: 23px;
  }


  .mail-faq-intro {
    max-width: 680px;
  }


  .mail-faq-item summary {
    grid-template-columns:
      46px
      minmax(0, 1fr)
      38px;

    gap: 13px;

    padding:
      17px
      18px;
  }


  .mail-faq-answer {
    padding:
      0
      18px
      22px
      77px;
  }


  .mail-faq-bottom {
    grid-template-columns:
      48px
      minmax(0, 1fr);
  }


  .mail-faq-bottom-btn {
    grid-column: 2;

    width: max-content;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-faq {
    padding: 72px 0 78px;
  }


  /* ----------------------------------------------------------
     HEADER
  ---------------------------------------------------------- */

  .mail-faq-heading h2 {
    font-size:
      clamp(
        31px,
        9vw,
        39px
      );
  }


  .mail-faq-heading h2 > span {
    display: inline;
  }


  .mail-faq-intro p {
    font-size: 15px;
  }


  .mail-faq-intro-lead {
    font-size: 18px !important;
  }


  /* ----------------------------------------------------------
     FAQ
  ---------------------------------------------------------- */

  .mail-faq-list {
    gap: 8px;
  }


  .mail-faq-item {
    border-radius: 10px;
  }


  .mail-faq-item summary {
    grid-template-columns:
      35px
      minmax(0, 1fr)
      32px;

    gap: 10px;

    min-height: 76px;

    padding: 14px 14px;
  }


  .mail-faq-number {
    width: 32px;
    height: 32px;

    border-radius: 7px;

    font-size: 9px;
  }


  .mail-faq-question {
    padding-right: 2px;

    font-size: 14.5px;
    line-height: 1.5;
  }


  .mail-faq-toggle {
    width: 31px;
    height: 31px;
  }


  /* ----------------------------------------------------------
     ANSWER
  ---------------------------------------------------------- */

  .mail-faq-answer {
    padding:
      0
      15px
      20px
      59px;
  }


  .mail-faq-answer-inner {
    padding-top: 15px;
  }


  .mail-faq-answer p {
    font-size: 14px;
    line-height: 1.7;
  }


  .mail-faq-answer-tags {
    gap: 5px;

    margin-top: 12px;
  }


  .mail-faq-answer-tags span {
    font-size: 10.5px;
  }


  /* ----------------------------------------------------------
     BOTTOM
  ---------------------------------------------------------- */

  .mail-faq-bottom {
    grid-template-columns: 1fr;

    gap: 13px;

    padding: 20px;
  }


  .mail-faq-bottom-btn {
    grid-column: auto;

    width: 100%;

    min-height: 46px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

  .mail-faq-item summary {
    grid-template-columns:
      minmax(0, 1fr)
      31px;
  }


  .mail-faq-number {
    display: none;
  }


  .mail-faq-answer {
    padding:
      0
      14px
      19px
      14px;
  }


  .mail-faq-answer-inner::before {
    width: 55px;
  }

}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-faq-item,
  .mail-faq-toggle,
  .mail-faq-number,
  .mail-faq-question,
  .mail-faq-bottom-btn,
  .mail-faq-bottom-btn i {
    transition: none;
  }

}

/* ============================================================
   19. CTA FINAL — CORREO EMPRESARIAL
   FONT: OPEN SANS
============================================================ */

.mail-final-cta,
.mail-final-cta * {
  box-sizing: border-box;
  font-family: "Open Sans", Arial, sans-serif;
}


/* ============================================================
   SECTION
============================================================ */

.mail-final-cta {
  position: relative;

  overflow: hidden;

  padding: 108px 0 0;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 78% 42%,
      rgba(29, 132, 226, .13),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 5%,
      rgba(28, 184, 211, .07),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #071521 0%,
      #0a1c2a 48%,
      #0a2131 100%
    );
}


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

.mail-final-cta::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(70, 173, 255, .42),
      rgba(45, 202, 219, .30),
      transparent
    );
}


/* ============================================================
   GLOW
============================================================ */

.mail-final-cta-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(1px);
}


.mail-final-cta-glow--one {
  width: 430px;
  height: 430px;

  top: 40px;
  right: -160px;

  background:
    radial-gradient(
      circle,
      rgba(35, 136, 255, .09),
      transparent 67%
    );
}


.mail-final-cta-glow--two {
  width: 330px;
  height: 330px;

  bottom: -160px;
  left: -130px;

  background:
    radial-gradient(
      circle,
      rgba(36, 194, 215, .065),
      transparent 68%
    );
}


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

.mail-final-cta-grid-bg {
  position: absolute;

  top: 0;
  right: 0;

  width: 52%;
  height: 100%;

  opacity: .12;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(101, 178, 229, .10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(101, 178, 229, .10) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 35%,
      #000
    );
}


/* ============================================================
   INNER
============================================================ */

.mail-final-cta-inner {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(400px, .78fr);

  align-items: center;

  gap: 80px;

  min-height: 480px;

  padding-bottom: 92px;
}


/* ============================================================
   CONTENT
============================================================ */

.mail-final-cta-content {
  max-width: 720px;
}


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

.mail-final-cta-eyebrow {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0 0 20px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: .13em;

  color: #71baf0;
}


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

.mail-final-cta-eyebrow-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: 1px solid
    rgba(92, 181, 243, .22);

  border-radius: 7px;

  background:
    rgba(49, 145, 216, .07);

  color: #5db5ef;

  font-size: 10px;
}


/* ============================================================
   H2
============================================================ */

.mail-final-cta-content h2 {
  max-width: 700px;

  margin: 0 0 23px;

  font-family: "Open Sans", Arial, sans-serif;

  font-size:
    clamp(
      42px,
      4.1vw,
      61px
    );

  font-weight: 600;
  line-height: 1.08;

  letter-spacing: -.043em;

  color: #f6fafd;
}


.mail-final-cta-content h2 > span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #55aef2,
      #55c6da
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: #55aef2;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.mail-final-cta-description {
  max-width: 650px;

  margin: 0;

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

  color: #a9bbc8;
}


/* ============================================================
   ACTIONS
============================================================ */

.mail-final-cta-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 31px;
}


/* ============================================================
   BUTTON BASE
============================================================ */

.mail-final-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 52px;

  padding: 0 21px;

  border-radius: 8px;

  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;

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


.mail-final-btn i {
  font-size: 10px;

  transition:
    transform .22s ease;
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.mail-final-btn--primary {
  border: 1px solid #258ce1;

  background:
    linear-gradient(
      135deg,
      #2388e4,
      #1877ca
    );

  color: #ffffff;

  box-shadow:
    0 10px 27px
    rgba(25, 120, 202, .20);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.mail-final-btn--secondary {
  border: 1px solid
    rgba(164, 204, 231, .22);

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

  color: #d7e5ef;

  backdrop-filter: blur(8px);
}


/* ============================================================
   BUTTON HOVER
============================================================ */

@media (hover: hover) {

  .mail-final-btn:hover {
    transform: translateY(-2px);
  }


  .mail-final-btn--primary:hover {
    box-shadow:
      0 14px 32px
      rgba(25, 120, 202, .27);
      color: #fff;
  }


  .mail-final-btn--secondary:hover {
    border-color:
      rgba(164, 204, 231, .38);

    background:
      rgba(255, 255, 255, .065);
      color: #fff;
  }


  .mail-final-btn:hover i {
    transform: translateX(3px);
  }


  .mail-final-btn--secondary:hover i {
    transform: none;
  }

}


/* ============================================================
   TRUST POINTS
============================================================ */

.mail-final-cta-trust {
  display: flex;
  flex-wrap: wrap;

  gap: 11px 24px;

  margin: 27px 0 0;
  padding: 0;

  list-style: none;
}


.mail-final-cta-trust li {
  display: flex;
  align-items: center;

  gap: 7px;

  font-size: 12.5px;
  font-weight: 400;

  color: #92a9b9;
}


.mail-final-cta-trust i {
  color: #43c997;

  font-size: 12px;
}


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

.mail-final-cta-visual {
  position: relative;

  width: 100%;
  max-width: 455px;
  height: 430px;

  justify-self: end;
}


/* ============================================================
   ORBITS
============================================================ */

.mail-final-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border: 1px solid
    rgba(79, 168, 229, .09);

  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}


.mail-final-orbit--outer {
  width: 420px;
  height: 420px;

  animation:
    mailFinalOrbit
    28s
    linear
    infinite;
}


.mail-final-orbit--inner {
  width: 335px;
  height: 335px;

  border-style: dashed;

  border-color:
    rgba(79, 168, 229, .12);

  animation:
    mailFinalOrbitReverse
    34s
    linear
    infinite;
}


/* ============================================================
   SERVER
============================================================ */

.mail-final-server {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 320px;

  overflow: hidden;

  transform:
    translate(-50%, -50%);

  border: 1px solid
    rgba(122, 187, 229, .19);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 48, 68, .96),
      rgba(10, 31, 46, .98)
    );

  box-shadow:
    0 28px 60px
    rgba(0, 0, 0, .24),
    inset 0 1px 0
    rgba(255, 255, 255, .025);
}


/* ============================================================
   SERVER HEADER
============================================================ */

.mail-final-server-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 43px;

  padding: 0 15px;

  border-bottom: 1px solid
    rgba(131, 189, 227, .10);

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


/* ============================================================
   SERVER STATUS
============================================================ */

.mail-final-server-status {
  display: flex;
  align-items: center;

  gap: 7px;

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

  letter-spacing: .09em;

  color: #76a8c8;
}


.mail-final-server-status > span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #3bca94;

  box-shadow:
    0 0 0 4px
    rgba(59, 202, 148, .07);

  animation:
    mailFinalStatus
    2.7s
    ease-in-out
    infinite;
}


/* ============================================================
   DOTS
============================================================ */

.mail-final-server-dots {
  display: flex;

  gap: 4px;
}


.mail-final-server-dots i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    rgba(144, 187, 214, .34);
}


/* ============================================================
   SERVER BODY
============================================================ */

.mail-final-server-body {
  padding: 23px 19px 18px;
}


/* ============================================================
   SERVER ICON
============================================================ */

.mail-final-server-icon {
  position: relative;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  margin: 0 auto 12px;

  border: 1px solid
    rgba(79, 169, 229, .25);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(35, 136, 255, .11),
      rgba(36, 191, 215, .045)
    );

  color: #61b7ed;

  font-size: 18px;
}


.mail-final-server-icon-ring {
  position: absolute;

  inset: -7px;

  border: 1px solid
    rgba(79, 169, 229, .08);

  border-radius: 17px;

  animation:
    mailFinalIconPulse
    3.8s
    ease-out
    infinite;
}


/* ============================================================
   DOMAIN
============================================================ */

.mail-final-server-domain {
  margin-bottom: 20px;

  text-align: center;
}


.mail-final-server-domain > span {
  display: block;

  margin-bottom: 3px;

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

  color: #7896aa;
}


.mail-final-server-domain > strong {
  display: block;

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

  color: #dceaf3;
}


/* ============================================================
   SERVER ROW
============================================================ */

.mail-final-server-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 51px;

  margin-top: 7px;

  padding: 8px 10px;

  border: 1px solid
    rgba(132, 188, 223, .095);

  border-radius: 8px;

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


.mail-final-server-row > div {
  display: flex;
  align-items: center;

  gap: 9px;
}


/* ============================================================
   ROW ICON
============================================================ */

.mail-final-server-row-icon {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    rgba(62, 150, 211, .07);

  color: #62aeda;

  font-size: 10px;
}


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

.mail-final-server-row p {
  margin: 0;
}


.mail-final-server-row p > span {
  display: block;

  margin-bottom: 1px;

  font-size: 8.5px;
  font-weight: 400;

  color: #708da1;
}


.mail-final-server-row p > strong {
  display: block;

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

  color: #b9cedc;
}


/* ============================================================
   ROW OK
============================================================ */

.mail-final-server-ok {
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(54, 197, 142, .08);

  color: #42c995;

  font-size: 7px;
}


/* ============================================================
   SERVER FOOTER
============================================================ */

.mail-final-server-footer {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 39px;

  border-top: 1px solid
    rgba(131, 189, 227, .09);

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

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

  color: #718fa3;
}


/* ============================================================
   FOOTER PULSE
============================================================ */

.mail-final-server-pulse {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #3cc891;
}


/* ============================================================
   FLOATING ELEMENTS
============================================================ */

.mail-final-float {
  position: absolute;

  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 135px;

  padding: 10px 12px;

  border: 1px solid
    rgba(121, 185, 225, .16);

  border-radius: 9px;

  background:
    rgba(11, 34, 50, .90);

  box-shadow:
    0 14px 30px
    rgba(0, 0, 0, .17);

  backdrop-filter: blur(10px);
}


/* ============================================================
   FLOAT ICON
============================================================ */

.mail-final-float > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 7px;

  background:
    rgba(48, 145, 211, .09);

  color: #5eb1e4;

  font-size: 11px;
}


.mail-final-float small {
  display: block;

  margin-bottom: 2px;

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

  letter-spacing: .08em;

  color: #66879d;
}


.mail-final-float strong {
  display: block;

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

  color: #b9cedc;
}


/* ============================================================
   FLOAT POSITIONS
============================================================ */

.mail-final-float--security {
  top: 60px;
  right: -2px;

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


.mail-final-float--backup {
  left: -7px;
  bottom: 65px;

  animation:
    mailFinalFloatTwo
    6.2s
    ease-in-out
    infinite;
}


/* ============================================================
   BOTTOM TRUST BAR
============================================================ */

.mail-final-bottom {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  min-height: 91px;

  border-top: 1px solid
    rgba(131, 188, 225, .11);
}


/* ============================================================
   BOTTOM ITEM
============================================================ */

.mail-final-bottom-item {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 20px 30px;
}


.mail-final-bottom-item > i {
  color: #5aaee2;

  font-size: 15px;
}


.mail-final-bottom-item > span {
  display: block;
}


.mail-final-bottom-item strong {
  display: block;

  margin-bottom: 2px;

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

  color: #c3d5e1;
}


.mail-final-bottom-item small {
  display: block;

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

  color: #718c9f;
}


/* ============================================================
   BOTTOM SEPARATOR
============================================================ */

.mail-final-bottom-separator {
  width: 1px;
  height: 34px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(131, 188, 225, .17),
      transparent
    );
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes mailFinalOrbit {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes mailFinalOrbitReverse {

  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

}


@keyframes mailFinalStatus {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }

}


@keyframes mailFinalIconPulse {

  0% {
    opacity: .5;
    transform: scale(.9);
  }

  70% {
    opacity: 0;
    transform: scale(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }

}


@keyframes mailFinalFloatOne {

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

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

}


@keyframes mailFinalFloatTwo {

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

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

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .mail-final-cta {
    padding-top: 90px;
  }


  .mail-final-cta-inner {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, .75fr);

    gap: 40px;

    padding-bottom: 78px;
  }


  .mail-final-cta-visual {
    max-width: 400px;
  }


  .mail-final-server {
    width: 295px;
  }


  .mail-final-orbit--outer {
    width: 380px;
    height: 380px;
  }


  .mail-final-orbit--inner {
    width: 315px;
    height: 315px;
  }

}


/* ============================================================
   TABLET PORTRAIT
============================================================ */

@media (max-width: 850px) {

  .mail-final-cta-inner {
    grid-template-columns: 1fr;

    gap: 54px;
  }


  .mail-final-cta-content {
    max-width: 700px;
  }


  .mail-final-cta-visual {
    justify-self: center;

    width: 100%;
    max-width: 470px;
  }


  .mail-final-server {
    width: 320px;
  }


  .mail-final-bottom-item {
    padding:
      18px
      14px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .mail-final-cta {
    padding-top: 72px;
  }


  /* ----------------------------------------------------------
     INNER
  ---------------------------------------------------------- */

  .mail-final-cta-inner {
    gap: 44px;

    padding-bottom: 61px;
  }


  /* ----------------------------------------------------------
     H2
  ---------------------------------------------------------- */

  .mail-final-cta-content h2 {
    font-size:
      clamp(
        35px,
        10vw,
        44px
      );

    line-height: 1.1;
  }


  .mail-final-cta-content h2 > span {
    display: inline;
  }


  /* ----------------------------------------------------------
     DESCRIPTION
  ---------------------------------------------------------- */

  .mail-final-cta-description {
    font-size: 15.5px;
    line-height: 1.72;
  }


  /* ----------------------------------------------------------
     ACTIONS
  ---------------------------------------------------------- */

  .mail-final-cta-actions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;
  }


  .mail-final-btn {
    width: 100%;

    min-height: 51px;
  }


  /* ----------------------------------------------------------
     TRUST
  ---------------------------------------------------------- */

  .mail-final-cta-trust {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;
  }


  /* ----------------------------------------------------------
     VISUAL
  ---------------------------------------------------------- */

  .mail-final-cta-visual {
    height: 385px;
  }


  .mail-final-server {
    width: min(300px, 88vw);
  }


  .mail-final-orbit--outer {
    width: 345px;
    height: 345px;
  }


  .mail-final-orbit--inner {
    width: 290px;
    height: 290px;
  }


  .mail-final-float {
    min-width: 125px;

    padding: 8px 9px;
  }


  .mail-final-float--security {
    top: 28px;
    right: 0;
  }


  .mail-final-float--backup {
    left: 0;
    bottom: 25px;
  }


  /* ----------------------------------------------------------
     BOTTOM
  ---------------------------------------------------------- */

  .mail-final-bottom {
    grid-template-columns: 1fr;

    padding: 13px 0 17px;
  }


  .mail-final-bottom-item {
    justify-content: flex-start;

    padding:
      13px
      5px;
  }


  .mail-final-bottom-separator {
    width: 100%;
    height: 1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(131, 188, 225, .13),
        transparent
      );
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

  .mail-final-cta-visual {
    height: 365px;
  }


  .mail-final-orbit--outer {
    width: 310px;
    height: 310px;
  }


  .mail-final-orbit--inner {
    width: 265px;
    height: 265px;
  }


  .mail-final-float {
    transform: scale(.92);
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mail-final-orbit,
  .mail-final-server-status > span,
  .mail-final-server-icon-ring,
  .mail-final-float {
    animation: none;
  }


  .mail-final-btn,
  .mail-final-btn i {
    transition: none;
  }

}