h1 {  text-align: center;  font-size: 2.5rem;  color: #1347a4; margin-top: 20px;  margin-bottom: 40px;}
h1, h2 {  margin: 0;}
h2 {  font-size: 1.2rem;  color: #555;}
p, ul {  font-size: 1rem;  line-height: 1.5;  color: #666;}
ul {  padding-left: 20px;}
html {    scroll-behavior: smooth;}

/* Header container styles */
.header-section { width: 100%; padding: 3rem 1rem; background: linear-gradient(0deg, #0e357a, #00b8d8);  color: #fff; text-align: center; position: relative; overflow: hidden; border-bottom-left-radius: 30% 25%;  border-bottom-right-radius: 30% 25%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.header-content { max-width: 800px; margin: 0 auto; padding: 1rem; opacity: 0; transform: translateY(20px); animation: fadeInSlide 1s ease-out forwards; animation-delay: 0.5s;}
@keyframes fadeInSlide {
 to {  opacity: 1;  transform: translateY(0); }}

/* Header title and subtitle styling */
.header-title { font-size: 3rem; font-weight: 700; margin: 0; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);  color: white;}
.header-subtitle { font-size: 1.2rem; margin: 0.5rem 0 0; color: #d1e4f2; }

/* Sección principal */
.compliance-section {  margin: 20px;  max-width: 1080px;  margin: 0 auto;  padding: 20px;  background-color: #fff;}
.section {  margin: 10px;}

/* Títulos de sección */
.title {  display: flex;  align-items: center;  margin-bottom: 20px;  padding-bottom: 10px;  border-bottom: 2px solid #ddd;  color: #1347a4; }
.title i {  font-size: 2rem;  color: #2d70e7; margin-right: 10px;}
.title h1 {  font-size: 2rem;  font-weight: bold;  color: #1347a4;}

/* Contenido de las secciones */
.content {  margin-top: 20px;}
.item {  margin-bottom: 20px;}
.item h2 {  font-size: 1.5rem;  color: #2d70e7; 	margin-bottom: 20px;	line-height: 30px;}
.item ul {  list-style-type: none;  padding: 0;}
.item ul li {  font-size: 1rem;  display: flex;  align-items: center;  margin-bottom: 8px;}
.item ul li i {  margin-right: 10px;  color: #00b8d8; }

/* Estilos para el texto */
.item p {  font-size: 1rem;  color: #555;}

/* Contenedor de tarjetas */
.cards-container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  gap: 20px;  margin-top: 20px;}

/* Tarjetas */
.card {  background-color: #fff;  border: 1px solid #ddd;  border-radius: 10px;  padding: 20px;  text-align: center;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.card:hover {  transform: translateY(-10px);  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);}
.card-icon {  font-size: 3rem;  color: #2d70e7;   margin-bottom: 15px;}
.card h2 {  font-size: 1.5rem;  color: #1347a4;  margin-bottom: 10px;}
/* Descripción en las tarjetas */
.card p {  font-size: 1rem;  color: #555;}

/* Section Title */
.section-title {    font-size: 2rem;    font-weight: bold;    color: #0077cc;    text-align: center;    margin-bottom: 20px;}
 
/* Pricing Section */
.plans-section {    display: flex;    flex-wrap: wrap;    gap: 30px;    justify-content: center;    max-width: 1080px;    padding: 20px;}

/* Pricing Card */

.pricing-card {   background-color: #fff;    border-radius: 8px;    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);    width: 100%;    max-width: 320px;    padding: 20px;    text-align: center;    transition: transform 0.3s ease;border: 2px solid #eeeeee;}
.pricing-card:hover {    transform: scale(1.05);}

/* Plan Header */
.pricing-header {    margin-bottom: 15px;}
.title-plan {    font-size: 2rem;    color: #0077cc;    font-weight: bold;}
.plan-description {    font-size: 1rem;    color: #666;}

/* Price Section */
.price {    margin: 20px 0;    justify-content: center;    justify-items: center;    align-items: center;    display: flex;    flex-direction: column;}
.price-number {    font-size: 2.5rem;    color: #333;    font-weight: bold;}
.price-description {    font-size: 0.9rem;    color: #999;}
.no-incluye-iva {    display: block;    font-size: 0.8rem;    color: #777;    margin-top: 5px;}

/* Button */
.btn-primary {    display: inline-block;    padding: 12px 80px;    font-size: 1rem;    color: #fff;    background-color: #1859ce;    border-radius: 43px;    text-decoration: none;    transition: background-color 0.3s ease;font-weight: 700; white-space: nowrap;}
.btn-primary:hover {    background-color: #0e357a;}

/* Features List */
.pricing-features {    list-style: none;    padding: 10px;    text-align: left;}
.pricing-features li {    margin-bottom: 8px;    font-size: 0.95rem;    color: #333;    position: relative;    padding-left: 20px;}
.pricing-features li::before {    content: "✔";    color: #0077cc;    font-size: 0.9rem;    position: absolute;    left: 0;}

/* Recommended Plan Highlight */
.pricing-card:nth-child(4) {    border: 2px solid #00b8d8;    padding: 18px;}
.pricing-card:nth-child(4) .title-plan {    color: #00b8d8;}
.pricing-card:nth-child(4) .btn-primary {    background-color: #00b8d8;}
.pricing-card:nth-child(4) .btn-primary:hover {    background-color: #34cfa5;}


/* General styling for table */
.table-comparison {  max-width: 1080px;  border-collapse: collapse;  font-family: Arial, sans-serif;  font-size: 16px;  margin-top: 20px;}
.table-comparison th,.table-comparison td {  padding: 15px;  text-align: left;  border: 1px solid #ddd;}
.table-comparison th {  background-color: #0e357a;  color: #fff;  text-align: center;}
.table-comparison tr:nth-child(even) {  background-color: #f3f6fa;}
tr :hover {  background-color: #eaf2fc; color: #1859ce}
.table-container {    overflow-x: auto;}
.comparison-table {    width: 100%;    max-width: 1000px;    margin: 0 auto;    border-collapse: collapse;    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);    background-color: #fff;}
.comparison-table th,.comparison-table td {    padding: 15px;    border: 1px solid #ddd;    text-align: center;}
.comparison-table th {    background-color: #0077cc;    color: #fff;    font-weight: bold;}
.comparison-table td {    font-size: 0.9rem;}
.comparison-table .subtext {    font-size: 0.8rem;    color: #777;    display: block;    margin-top: 5px;}
.comparison-table tr:nth-child(even) {    background-color: #f9f9f9;}


/* Icon substitution for repeated text */
.icon-check {  color: green;  font-weight: bold;}
.icon-cross {  color: red;  font-weight: bold;}


@media screen and (max-width: 768px) {
  .table-comparison {    display: block;    border: none;  }
  .table-comparison thead,  .table-comparison tbody,  .table-comparison th,  .table-comparison td,  .table-comparison tr {    display: block;  }
  /* Header styling for mobile cards */
  .table-comparison thead {    display: none;  }
  .table-comparison tr {    margin-bottom: 20px;    border: 1px solid #ddd;    border-radius: 8px;    background-color: #fff;  }
  .table-comparison td {    display: flex;    justify-content: space-between;    padding: 10px 15px;    text-align: left;  }
  .table-comparison td::before {    content: attr(data-label);    font-weight: bold;    color: #0e357a;    flex: 1;  }
}

/* Contenedor principal */
.credits-info-container {  width: 100%;  max-width: 1100px;  margin: 30px auto;  background-color: #fff;  padding: 30px;  border-radius: 12px;  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}

/* Título de sección */
.section-title {  font-size: 2rem;  color: #0e357a; font-weight: 700;  text-align: center;  margin-bottom: 20px;  border-bottom: 3px solid #0e357a;  padding-bottom: 10px;}

/* Elementos individuales de la sección */
.credit-item {  margin-bottom: 30px;}

/* Subtítulos de los items */
.credit-subtitle {  font-size: 1.5rem;  font-weight: 600;  margin-bottom: 10px;}

/* Colores para los subtítulos según jerarquía */
.credit-subtitle:nth-child(1) {  color: #1e4d8d; }
.credit-subtitle:nth-child(2) {  color: #1473e6; }
.credit-subtitle:nth-child(3) {  color: #66a2ff; }
.credit-subtitle:nth-child(4) {  color: #0e357a; }

/* Texto general */
.credit-text {  font-size: 1rem;  color: #555;  margin-bottom: 20px;  text-align: justify;}

/* Tabla de créditos */
.credit-table {  width: 100%;  border-collapse: collapse;  margin-top: 20px;}
.credit-table-header, .credit-table-row {  display: flex;  justify-content: space-between;  padding: 15px 20px;  border-bottom: 1px solid #e1e1e1;}
.credit-table-header {  background-color: #0e357a;  color: white;  font-weight: 600;  border-top-left-radius: 8px;  border-top-right-radius: 8px;}
.credit-table-row {  background-color: #f9f9f9;  color: #333;  transition: background-color 0.3s ease;}
.credit-table-row:hover {  background-color: #eaf2fc;}
.credit-table-row:nth-child(odd) {  background-color: #ffffff;}

/* Listas */
.credit-list {  list-style-type: none;  padding-left: 0;}
.credit-list li {  font-size: 1rem;  color: #555;  margin-bottom: 12px;  line-height: 1.7;}
.credit-list strong {  color: #0e357a;}

/* Botones */
button {  background-color: #0e357a;  color: #fff;  font-size: 1rem;  padding: 12px 20px;  border: none;  border-radius: 8px;  cursor: pointer;  transition: background-color 0.3s ease;  margin-top: 20px;}
button:hover {  background-color: #0d3883;}
.credit-text strong {  color: #0e357a;  font-weight: 600;}


/* Responsive */
@media (max-width: 768px) {
    .comparison-table th, .comparison-table td {        padding: 10px;    }
    .section-title {        font-size: 1.5rem;    }
	.plans-section {        flex-direction: column;        align-items: center;    }
}



/* Header container styles */
.header-section { width: 100%; padding: 3rem 1rem; background: linear-gradient(0deg, #0e357a, #00b8d8);  color: #fff; text-align: center; position: relative; overflow: hidden; border-bottom-left-radius: 30% 25%;  border-bottom-right-radius: 30% 25%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.header-content { max-width: 800px; margin: 0 auto; padding: 1rem; opacity: 0; transform: translateY(20px); animation: fadeInSlide 1s ease-out forwards; animation-delay: 0.5s;}
@keyframes fadeInSlide {
 to {  opacity: 1;  transform: translateY(0); }}
.header-title { font-size: 3rem; font-weight: 700; margin: 0; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);  color: white;}
.header-subtitle { font-size: 1.2rem; margin: 0.5rem 0 0; color: #d1e4f2; text-align:center}
.header { width: 100%; background-color: #ffffff;  padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header-container { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.logo img { max-height: 60px; width: auto;}
/* Estilo de los Botones */
.header-buttons { display: flex; gap: 1.5rem; justify-content: flex-end;  align-items: center; flex-grow: 1; /* Asegura que los botones se alineen correctamente */ margin-right: 20px; margin-left: 20px;}
.button-demo { background-color: #0e357a; color: #fff; padding: 1rem 2rem;  border-radius: 50px;  font-weight: 700;  text-decoration: none; text-transform: none;  font-size: 1rem; transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; text-align: center;}
.button-demo:hover { background-color: #154b8f;  transform: scale(1.05);  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.button-demo:visited {color: #fff;}
.button-login { background-color: #34cfa5;  color: #fff; padding: 1rem 2rem;  border-radius: 50px;  font-weight: 700;  text-decoration: none; text-transform: none;  font-size: 1rem; transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; text-align: center;text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);}
.button-login:hover { background-color: #28b795; transform: scale(1.05);  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.button-login:visited {color: #fff;}
.menu-icon img { width: 30px; height: 30px; transition: transform 0.3s ease-in-out;}
.menu-icon a:hover img { transform: rotate(90deg); /* Rotación sutil del ícono en hover */}
/* Estilo General del Nav Bar */
.navbar {  background-color: #0e357a;  padding: 0.8rem 2rem;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  width: 100%;}
.navbar-container { display: flex; justify-content: center;  align-items: center; gap: 2rem; }
.navbar-item { font-size: 1.1rem;  font-weight: 500;  text-align: center; justify-items: center; align-content: center; text-align: center;}
.navbar-item a { color: #fff;  text-decoration: none; padding: 0.5rem 1rem; transition: color 0.3s ease, transform 0.3s ease; border-radius: 4px;  display: flex; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);}
.navbar-item a:hover { color: #fff; transform: scale(1.05);  background-color: rgba(255, 255, 255, 0.2); }
/* Estilos para la sección de llamada a la acción (CTA) */
.cta-container {  background-color: #0e357a;  color: white;  display: flex;  justify-content: space-between;  padding: 30px 10%;  align-items: center;}
.cta-text {  max-width: 60%;}
.cta-heading {  font-size: 24px;  font-weight: bold;  margin-bottom: 10px;  color: white; }
.cta-description {  font-size: 16px;  margin-bottom: 20px;  color: white;   max-width: 424px;  line-height: 24px;}
.cta-buttons-container {  display: flex;  gap: 15px;  flex-direction: column;}
.cta-button {  padding: 12px 56px;  border-radius: 30px;  font-weight: bold;  text-align: center;  text-decoration: none;  display: flex;  justify-content: center;  align-items: center;  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;}
.cta-button-green {  background-color: #34cfa5;  border: none;  padding: 12px 56px;}
.cta-button-green a {  color: #0e357a;}
.cta-button-white {  background-color: transparent;  border: 2px solid white;  color: white;	padding: 12px 56px;}
.cta-button-white a {  color: white;}
.cta-button-green:hover {  transform: scale(1.05);   background-color: #28b795;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.cta-button-white:hover {  transform: scale(1.05);   background-color: rgba(255, 255, 255, 0.2);   color: #0e357a;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
/* Footer Estilos */
.footer {  font-family: 'Arial', sans-serif;  background-color: #fff;   color: #6d7175;   width: 100%;}
.footer-main {  display: flex;  justify-content: space-between;  padding: 40px 10%;  background-color: #fff;   color: #333; }
.footer-column {  width: 20%;  padding: 10px;}
.footer-logo {  max-width: 150px;}
.footer-section-title {  font-size: 18px;  font-weight: bold;  margin-bottom: 10px;  color: #0e357a;   max-width: 180px;}
.footer-links {  display: flex;  flex-direction: column;  gap: 10px;	align-items: flex-start;}
.footer-link {  font-size: 14px;  color: #18191c;   gap: 10px;  display: flex;}
.footer-link a {  color: #6d7175;   text-decoration: none;}
.footer-link a:hover {  text-decoration: underline;}
/* Footer de Derechos */
.footer-bottom {  background-color: #fff;   color: #333;   padding-left: 20px;  padding-right: 20px;  padding-bottom: 20px;}
.footer-divider {  border-top: 1px solid #ccc;  margin-bottom: 10px;}
.footer-copyright {  font-size: 14px;  color: #6d7175;   text-align: center;}
.footer-social-icons {  text-align: center;  margin-top: 10px;}
.footer-social-icon {  margin: 0 10px;}
.footer-social-icon-img {  width: 25px;  height: 25px;  filter: none; }
/* Animación para los iconos sociales */
.footer-social-icon {  transition: transform 0.3s ease, filter 0.3s ease;}
.footer-social-icon-img {  width: 30px;   height: 30px;  filter: grayscale(100%) brightness(0.6);  transition: filter 0.3s ease;}
.footer-social-icon:hover .footer-social-icon-img {  transform: scale(1.4);   filter: grayscale(0%) brightness(2); }
.footer-social-icon-img:hover {  transform: scale(1.4); }
.back-to-top {    position: fixed;    bottom: 20px;    right: 20px;    width: 50px;    height: 50px;    background-color: #0e357a; /* Main brand color */    border-radius: 50%;    display: flex;    justify-content: center;    align-items: center;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    cursor: pointer;    transition: transform 0.3s ease, background-color 0.3s ease;    }
.back-to-top:hover {    transform: scale(1.1);    background-color: #34cfa5; /* Hover color */}
.back-to-top-icon {    width: 24px;    height: 24px;    color: white;}
.back-to-top a {    text-decoration: none;    display: flex;    justify-content: center;    align-items: center;}
.page-button-top-item {     justify-content: center;  align-items: center;    }
.page-button-top-item img {      transition: transform 0.3s ease;}
.page-button-top-item:hover img {    transform: scale(1.1);}

@media (max-width: 768px) {	
.header-section {	padding: 1rem 1rem;	}
.footer-links { align-items: center;	}
.cta-container { flex-direction: column; align-items: center; padding: 20px;  }
.cta-buttons-container { flex-direction: column; gap: 10px;  }
.footer-main { flex-direction: column; align-items: center;  }
.cta-container { flex-direction: column; align-items: center; padding: 20px;  }
.cta-buttons-container { flex-direction: column; gap: 10px;  }
.footer-main { flex-direction: column; align-items: center;  }
.footer-column { width: 100%; text-align: center; margin-bottom: 20px; flex-direction: column; display: flex; align-items: center;  }
.page-button-top-item { display: none;	}
.navbar-container {  flex-wrap: wrap;  gap: 1rem; }
.cta-text {  text-align: center;  }
.header-container {  flex-direction: column;  align-items: center; }
.header-buttons {  margin-top: 1rem;  gap: 1rem; }
.header-title {  font-size: 2rem; }
.header-subtitle {  font-size: 1rem; }
}