/* ============================ */
/* Estilos para Páginas Internas */
/* ============================ */

/* Ajustes generales para el contenido principal de las páginas */
.page-content {
  /* Estilos para el contenedor principal del contenido de la página */

  > section,
  > header {
    border-radius: 1rem;
    margin-top: 2rem; /* Mayor espacio entre secciones */
    padding: 2.5rem 2rem; /* Padding base */
    background-color: var(--base-color);
    border: 1px solid #eee;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);

    /* Ajuste responsivo para padding en pantallas pequeñas */
    @media (max-width: 480px) {
      padding: 2rem 1.25rem;
    }
  }

  h2 {
    font-size: 2rem;
    color: var(--primary-color-variant-1);
    margin-bottom: 1.5rem;
    text-align: center;

    /* Ajuste responsivo para tamaño de fuente */
    @media (max-width: 480px) {
      font-size: 1.75rem;
    }
  }

  h3 {
    font-size: 1.25rem;
    color: var(--body-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
  }

  p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--body-color);
  }
}

/* ============================ */
/*      Service Hero Section    */
/* ============================ */
.service-hero {
  display: grid;
  grid-template-columns: 1fr; /* Stack en móvil por defecto */
  gap: 2rem;
  align-items: center;
  background: linear-gradient(
    135deg,
    var(--primary-color-variant-2) 0%,
    var(--primary-color) 100%
  );
  color: var(--contrast-color);
  padding: 3rem 2rem;
  border: none;
  box-shadow: none;

  /* Ajuste responsivo para padding en pantallas pequeñas */
  @media (max-width: 480px) {
    padding: 2.5rem 1.25rem;
    gap: 1.5rem;
  }

  .service-hero-content {
    text-align: center; /* Centrado en móvil por defecto */

    .service-category {
      display: inline-block;
      background-color: rgba(var(--base-color-rgb), 0.15);
      color: var(--contrast-color-variant);
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      font-size: 0.85rem;
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    h1 {
      font-size: 2.8rem;
      text-wrap: balance;
      line-height: 1.2;
      color: var(--base-color);
      margin-bottom: 1rem;

      /* Ajuste responsivo para tamaño de fuente */
      @media (max-width: 480px) {
        font-size: 2.25rem;
      }
    }

    p {
      font-size: 1.1rem;
      color: var(--contrast-color-variant);
      max-width: 60ch;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 1.5rem;

      /* Ajuste responsivo para tamaño de fuente */
      @media (max-width: 480px) {
        font-size: 1rem;
      }
    }

    .primary-cta-btn {
      background-color: var(--contrast-color);
      color: var(--primary-color);
      padding: 0.6rem 1.5rem;
      font-weight: 600;
      border-radius: 0.5rem;
      transition: background-color 0.3s ease, color 0.3s ease,
        transform 0.2s ease;

      &:hover {
        background-color: var(--contrast-color-variant);
        color: var(--primary-color-variant-1);
        transform: translateY(-2px);
      }
      &:focus-visible {
        outline: 2px solid var(--contrast-color);
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(var(--contrast-color-rgb), 0.4);
      }
    }
  }

  .service-hero-image {
    img {
      border-radius: 0.75rem;
      width: 100%;
      height: auto;
      max-height: 350px; /* Limitar altura en móvil */
      object-fit: cover;
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
      /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    }
  }

  /* Layout para Desktop anidado */
  @media (min-width: 768px) {
    grid-template-columns: 1.2fr 1fr; /* Texto más ancho */
    text-align: left;

    .service-hero-content {
      text-align: left; /* Alinear texto a la izquierda */

      p {
        margin-left: 0;
        margin-right: 0;
      }
    }

    .service-hero-image img {
      max-height: none; /* Altura automática en desktop */
    }
  }
}

/* ============================ */
/*      Service Details         */
/* ============================ */
.service-details {
  background-color: var(--card-bg-color);

  .details-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil por defecto */
    gap: 1.5rem;

    .detail-item {
      background-color: var(--base-color);
      padding: 1.5rem;
      border-radius: 0.75rem;
      text-align: center;
      border: 1px solid #eee;
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(var(--primary-color-rgb), 0.1);
      }

      .detail-icon {
        font-size: 2.5rem;
        color: var(--secondary-color);
        margin-bottom: 1rem;
        display: block;
      }

      h3 {
        color: var(--primary-color);
        text-align: center;
      }

      p {
        font-size: 0.95rem;
        color: var(--body-color);
        text-align: center;
      }
    }

    /* Layouts responsivos anidados */
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    }

    @media (min-width: 1024px) {
      .detail-item {
        text-align: left; /* Alinear texto a la izquierda en desktop */

        .detail-icon {
          margin-bottom: 1rem;
        }
        h3,
        p {
          text-align: left;
        }
      }
    }
  }
}

/* ============================ */
/*      Service Process         */
/* ============================ */
.service-process {
  background-color: var(--base-color);

  .process-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;

    /* Línea de conexión (opcional) */
    &::before {
      content: "";
      position: absolute;
      left: 24px;
      top: 1.5rem;
      bottom: 1.5rem;
      width: 2px;
      background-color: var(--primary-color-variant-3);
      opacity: 0.2;
      display: none; /* Oculta en móvil por defecto */
    }

    .step {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative;
      padding: 1rem 0;
      border-bottom: 1px dashed #ddd; /* Separador en móvil */

      &:last-child {
        border-bottom: none;
      }

      .step-number {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: var(--contrast-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.1rem;
        z-index: 1;
        box-shadow: 0 2px 4px rgba(var(--primary-color-rgb), 0.2);
      }

      .step-content {
        h3 {
          margin-bottom: 0.25rem;
        }
        p {
          font-size: 0.95rem;
          color: var(--body-color);
        }
      }
    }

    /* Layout para Desktop anidado */
    @media (min-width: 768px) {
      &::before {
        display: block; /* Mostrar línea en desktop */
      }
      .step {
        padding: 1.5rem 0 1.5rem 4rem; /* Añadir padding izquierdo */
        border-bottom: none; /* Quitar borde inferior */

        .step-number {
          position: absolute;
          left: 0;
          top: 1.5rem;
        }
      }
    }
  }
}

/* ============================ */
/*      Website Types Section   */
/* ============================ */
.website-types {
  background-color: var(--card-bg-color);
}

.website-types h2 {
  /* Hereda estilos de .page-content h2, pero podemos ajustar si es necesario */
  margin-bottom: 2rem; /* Un poco más de espacio antes de la grid */
}

.types-grid {
  display: grid;
  grid-template-columns: 1fr; /* Una columna en móvil por defecto */
  gap: 1.5rem; /* Espacio entre items */
}

.type-item {
  background-color: var(--base-color);
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #eee;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative; /* Para el borde superior decorativo */
  overflow: hidden; /* Para que el borde no se salga del radio */
}

.type-item::before {
  /* Borde superior decorativo */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px; /* Altura del borde */
  background-color: var(--secondary-color); /* Color distintivo */
  transition: height 0.3s ease;
}

.type-item:hover::before {
  height: 8px; /* Efecto sutil al pasar el mouse */
}

.type-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(var(--primary-color-rgb), 0.12);
}

.type-icon {
  font-size: 3rem; /* Iconos más grandes */
  color: var(--secondary-color); /* Mismo color que el borde superior */
  margin-bottom: 1rem;
  display: inline-block; /* Para que el margin-bottom funcione bien */
}

.type-item h3 {
  font-size: 1.35rem; /* Un poco más grande que el h3 de detail-item */
  color: var(--primary-color);
  margin-bottom: 0.75rem;
}

.type-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--body-color);
}

.type-price {
  margin-top: 1.25rem; /* Espacio sobre el precio */
  padding-top: 1rem; /* Espacio interno superior */
  border-top: 1px dashed var(--primary-color-variant-3); /* Línea separadora sutil */
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--secondary-color); /* Color distintivo para el precio */
}

/* Layouts responsivos para types-grid */
@media (min-width: 768px) {
  .types-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(280px, 1fr)
    ); /* Flexible para tablets */
  }
}

@media (min-width: 992px) {
  /* Para 3 columnas en desktop */
  .types-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .type-item {
    padding: 2.5rem 2rem; /* Más padding en desktop */
  }
}

/* ================================= */
/* Web Apps Explained Section        */
/* ================================= */
.web-apps-explained {
  background-color: var(
    --card-bg-color
  ); /* Fondo ligeramente distinto para la sección */
  /* Hereda padding, margin, border-radius de .page-content > section */
}

.web-apps-explained h2 {
  /* Hereda de .page-content h2, ya centrado */
  margin-bottom: 2rem; /* Más espacio antes del contenido */
}

.explanation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

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

.explanation-card {
  background-color: var(--base-color); /* Tarjetas con fondo base */
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e0e0e0;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.explanation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(var(--primary-color-rgb), 0.08);
}

.explanation-icon {
  font-size: 3rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  display: block;
}

.explanation-card h3 {
  color: var(--primary-color);
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.explanation-card p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.popular-apps-section {
  margin-top: 2rem;
  text-align: center; /* Centra el h3 y el párrafo introductorio */
}

.popular-apps-section h3 {
  font-size: 1.75rem;
  color: var(--primary-color-variant-1);
  margin-bottom: 0.75rem;
}

.popular-apps-section > p {
  /* Párrafo introductorio directo */
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.apps-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

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

@media (min-width: 992px) {
  .apps-showcase-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.app-example {
  background-color: var(--base-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #eee;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.app-example:hover {
  transform: translateY(-3px);
  border-color: var(--secondary-color);
}

.app-icon {
  font-size: 2.5rem;
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
  display: block;
}

.app-example h4 {
  font-size: 1.15rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.app-example p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--body-color);
}

.web-apps-conclusion {
  margin-top: 2rem;
  font-style: italic;
  color: var(--body-color);
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
}

/* ======================================== */
/* Business Needs Web Apps Section (Carousel) */
/* ======================================== */
.business-needs-web-apps {
  color: var(--body-color);
  padding: 3rem 2rem;
  text-align: center;
}

.business-needs-web-apps .section-header {
  margin-bottom: 2.5rem;
}

.business-needs-web-apps .section-icon-accent {
  font-size: 3rem;
  color: var(--secondary-color); /* Un color que destaque sobre el fondo */
  margin-bottom: 0.5rem;
  display: inline-block;
}

.business-needs-web-apps h2 {
  color: var(--primary-color-variant-1); /* Color de título estándar */
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
}

.business-needs-web-apps .section-intro {
  color: var(--body-color); /* Color de texto estándar */
  font-size: 1.1rem;
  max-width: 70ch;
  margin: 0 auto 1.5rem auto;
}

.use-case-carousel {
  max-width: 700px; /* Ancho máximo del carrusel */
  margin: 0 auto;
  position: relative;
}

.carousel-slides-container {
  position: relative;
  overflow: hidden;
  min-height: 320px; /* Altura mínima para evitar saltos de contenido */
  background-color: rgba(
    var(--base-color-rgb),
    0.9
  ); /* Fondo ligeramente traslúcido para los slides */
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.carousel-slide {
  display: none; /* Ocultar slides por defecto */
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(
    --body-color
  ); /* Color de texto oscuro para contraste con fondo claro del slide */
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  position: absolute; /* Para superponerlos y animar */
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 1.5rem; /* Padding interno del slide */
  box-sizing: border-box;
}

.carousel-slide.active-slide {
  display: flex; /* Mostrar slide activo */
  opacity: 1;
  transform: translateX(0);
  position: relative; /* Para que ocupe espacio y no se superponga mal */
}

/* Animaciones de salida/entrada */
.carousel-slide.prev-animated-slide {
  /* Sale hacia la izquierda */
  animation: slideOutLeft 0.5s forwards;
}
.carousel-slide.next-animated-slide {
  /* Sale hacia la derecha */
  animation: slideOutRight 0.5s forwards;
}

/* Para la entrada, la clase active-slide ya maneja la opacidad y transform */

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
    display: none;
  }
}
@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
    display: none;
  }
}

.use-case-icon {
  font-size: 3.5rem;
  color: var(--primary-color); /* Color primario para iconos dentro del slide */
  margin-bottom: 1rem;
}

.carousel-slide h3 {
  font-size: 1.5rem;
  color: var(--primary-color-variant-1);
  margin-bottom: 0.75rem;
}

.carousel-slide p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 55ch;
}

.use-case-tag {
  display: inline-block;
  background-color: var(--primary-color-variant-3);
  color: var(--base-color);
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-weight: 500;
}

.carousel-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.carousel-btn {
  background-color: var(--secondary-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover:not(:disabled) {
  background-color: var(
    --secondary-color-dark
  ); /* Un tono más oscuro de secondary */
  transform: scale(1.1);
}

.carousel-btn:disabled {
  background-color: var(--primary-color-variant-4); /* Color de deshabilitado */
  opacity: 0.6;
  cursor: not-allowed;
}

.carousel-indicators {
  display: flex;
  gap: 0.5rem;
}

.carousel-indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* Ajustamos color de puntos inactivos para mejor contraste con fondo claro */
  background-color: var(--primary-color-variant-3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-indicator-dot.active-indicator {
  background-color: var(--secondary-color); /* Color para punto activo */
}

.business-needs-web-apps .section-conclusion {
  margin-top: 2.5rem;
  font-size: 1.05rem;
  color: var(--body-color); /* Color de texto estándar */
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.business-needs-web-apps .section-conclusion strong {
  color: var(--secondary-color);
  font-weight: 600;
}

@media (max-width: 768px) {
  .business-needs-web-apps {
    padding: 2.5rem 1.25rem;
  }
  .business-needs-web-apps h2 {
    font-size: 1.9rem;
  }
  .carousel-slides-container {
    min-height: 380px; /* Más altura en móvil por si el texto es más largo */
    padding: 1.5rem 1rem;
  }
  .carousel-slide {
    padding: 1.5rem 1rem;
  }
  .use-case-icon {
    font-size: 3rem;
  }
  .carousel-slide h3 {
    font-size: 1.3rem;
  }
  .carousel-slide p {
    font-size: 0.95rem;
  }
}

/* ======================================== */
/* Comparison Table Section                 */
/* ======================================== */
.comparison-table-section {
  /* Hereda estilos de .page-content > section */
  background-color: var(--base-color);
}

.comparison-table-section h2 {
  /* Hereda de .page-content h2 */
  margin-bottom: 0.75rem;
}

.comparison-table-section .section-intro {
  text-align: center;
  max-width: 75ch;
  margin: 0 auto 2rem auto;
  font-size: 1.05rem;
  color: var(--body-color);
}

.table-responsive-wrapper {
  overflow-x: auto; /* Permite scroll horizontal en pantallas pequeñas */
  margin-bottom: 1.5rem;
  border: 1px solid var(--primary-color-variant-3);
  border-radius: 0.5rem;
}

.comparison-table {
  width: 100%;
  min-width: 700px; /* Ancho mínimo para que la tabla no se comprima demasiado antes del scroll */
  border-collapse: collapse;
  font-size: 0.9rem;
}

.comparison-table th,
.comparison-table td {
  padding: 0.9rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--primary-color-variant-3);
}

.comparison-table thead th {
  background-color: var(--primary-color-variant-2);
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap; /* Evita que los títulos de columna se rompan */
}

.comparison-table thead th i {
  margin-right: 0.5em;
  font-size: 1.2em;
  vertical-align: middle;
}

.comparison-table tbody tr:nth-child(even) {
  background-color: var(--card-bg-color); /* Fondo sutil para filas pares */
}

.comparison-table td strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: 0.25rem;
}

.comparison-table td small {
  font-size: 0.85em;
  color: var(--body-color-light);
  line-height: 1.4;
  display: block;
}

.comparison-table td[data-label="Tienda Nube"] {
  background-color: rgba(
    var(--secondary-color-rgb),
    0.05
  ); /* Ligero destaque para la columna de Tienda Nube */
}

/* Estilos para los iconos de feedback */
.comparison-table .highlight-positive i,
.comparison-table .highlight-good i {
  color: var(--success-color); /* Verde para positivo */
  margin-right: 0.3em;
}
.comparison-table .highlight-neutral i {
  color: var(
    --warning-color
  ); /* Naranja/amarillo para neutral o a considerar */
  margin-right: 0.3em;
}
.comparison-table .highlight-variable i {
  color: var(--info-color); /* Azul para variable */
  margin-right: 0.3em;
}

.comparison-table .highlight-positive,
.comparison-table .highlight-good,
.comparison-table .highlight-neutral,
.comparison-table .highlight-variable {
  font-weight: 500;
}

/* Para responsividad en pantallas muy pequeñas, donde incluso el scroll no es ideal */
/* Opcional: transformar la tabla en tarjetas */
@media (max-width: 767px) {
  /* Ajusta este breakpoint según sea necesario */
  .comparison-table thead {
    /* Opcional: Ocultar encabezados tradicionales en móvil si se usan data-label */
    /* display: none; */
  }
  /* Si se quiere un layout de tarjetas, se necesitaría más CSS y posiblemente JS.
     Por ahora, el scroll horizontal es la solución más simple y robusta para tablas complejas.
     Si se ocultan los `thead`, los `data-label` son cruciales. */

  .comparison-table td {
    /* Para mejorar la legibilidad si se usa data-label */
    /* display: block; */
    /* text-align: right; */
    /* padding-left: 50%; */
    /* position: relative; */
  }
  .comparison-table td::before {
    /* content: attr(data-label); */
    /* position: absolute; */
    /* left: 0.5rem; */
    /* width: calc(50% - 1rem); */
    /* padding-right: 0.5rem; */
    /* white-space: nowrap; */
    /* text-align: left; */
    /* font-weight: bold; */
    /* color: var(--primary-color); */
  }
}

.comparison-table-section .section-conclusion {
  margin-top: 2rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--card-bg-color);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--secondary-color);
}

/* ============================ */
/*      Service CTA             */
/* ============================ */
.page-content > .service-cta {
  background: var(--primary-color);
  color: var(--contrast-color);
  border: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 3rem 2rem;

  /* Contenedor del texto y botón */
  .cta-content {
    text-align: left;
    flex-grow: 1;
    max-width: 65ch;
    z-index: 1;
    position: relative;

    h2 {
      color: var(--base-color);
      font-size: 2rem;
      margin-top: 0;
      text-align: left;
      margin-bottom: 0.75rem;
      @media (max-width: 480px) {
        font-size: 1.8rem;
      }
    }

    p {
      color: var(--contrast-color-variant);
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 1.5rem;
      @media (max-width: 480px) {
        font-size: 0.95rem;
      }
    }

    .cta-button {
      background-color: var(--contrast-color);
      color: var(--primary-color);
      padding: 0.7rem 1.8rem;
      font-size: 1.05rem;
      font-weight: 600;
      border-radius: 0.5rem;
      text-decoration: none;
      transition: background-color 0.3s ease, color 0.3s ease,
        transform 0.2s ease;
      display: inline-block;

      &:hover {
        background-color: var(--contrast-color-variant);
        color: var(--primary-color-variant-1);
        transform: scale(1.05) translateY(-2px);
      }
      &:focus-visible {
        outline: 2px solid var(--primary-color-variant-1);
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3);
      }
    }
  }

  /* Icono como fondo decorativo (visible solo en desktop > 767px) */
  .cta-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16rem;
    color: var(--primary-color-variant-4);
    opacity: 0.125;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
  }

  /* --- Ajustes Responsivos --- */
  @media (max-width: 767px) {
    /* Layout de columna en tablet/móvil */
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1.5rem;

    .cta-content {
      text-align: left;
      max-width: none;
    }

    .cta-icon {
      /* CORRECCIÓN: Ocultar el icono en pantallas < 768px */
      display: none;
    }
  }

  /* Ya no necesitamos el media query específico para 480px para el icono */
  /* @media (max-width: 480px) { ... } */
}