/* ---------- RESET BÁSICO ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

a {
    text-decoration: none;
    color: inherit;
}

main {
    background: linear-gradient(180deg, rgb(0 0 0 / 1%), rgb(0 0 0 / 30%));
}
/* ----------HEADER---------- */
.site-header {
    background: linear-gradient(135deg, #ffffff 50%, #589EDB 90%);
    /* fondo blanco puro */
    padding: 22px 32px;
    width: 100%;
}

.brand-logo {
    max-width: min(400px, 80%);
    /* alto/anchos ajustables */
    height: auto;
}

/* ---------- FOOTER ---------- */
.site-footer {
    /* fondo gris con ligera gradación */
    background: linear-gradient(180deg, #4b4b4b 0%, #323232 100%);
    /* morado del borde */
    padding: 24px 16px;
    /* aire interno */
    text-align: center;
    /* para que se pegue al borde inferior si la página es corta  */
    width: 100%;
}

/* navegación de enlaces */
.footer-nav {
    margin-bottom: 18px;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
    display: inline-block;
    /* mantiene el centrado natural */
}

.footer-nav a {
    display: inline-block;
    padding: 0 6px;
}

/* separadores “ │ ” automáticamente, excepto después del último enlace */
.footer-nav a:not(:last-child)::after {
    content: "│";
    margin-left: 6px;
    color: #cccccc;
    font-weight: 300;
}

/* badges de tienda */
.store-badges a {
    display: inline-block;
    margin: 0 8px;
}

.store-badges img {
    height: 42px;
    /* asegura la misma altura para ambos badges */
    width: auto;
    vertical-align: middle;
}

/* versión súper‑pequeña: apila verticalmente */
@media (max-width: 460px) {
    .footer-nav {
        display: block;
    }

    .store-badges {
        margin-top: 14px;
    }
}


/* ========== ESTILOS DEL CUERPO ========== */


/* botones del hero */
.btn {
    display: inline-block;
    padding: 9px 24px;
    font-size: .90rem;
    font-weight: 600;
    border-radius: 4px;
    transition: .2s;
    border: 2px solid transparent;
}

.btn-primary {
    background: #2e94e4;
    border-color: #2e94e4;
    color: #fff;
}

.btn-primary:hover {
    background: #237acd;
}

.btn-outline {
    background: transparent;
    border-color: #8fd1ff;
    color: #2e94e4;
    margin-left: 12px;
}

.btn-outline:hover {
    background: #8fd1ff20;
    /* azul claro semitransparente */
}

/* ----- CONTENIDO DESCRIPTIVO ----- */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding: 40px 18px;
    color: #333;
}

.container h3 {
    font-size: 1.15rem;
    margin: 26px 0 10px;
    font-weight: 600;
}

.container h4 {
    font-size: 1rem;
    margin: 22px 0 8px;
    font-weight: 600;
}

.container p {
    margin: 0 0 14px;
    line-height: 1.55;
}

.container ul {
    margin-left: 18px;
    padding-left: 0;
}

.container li {
    margin: 6px 0;
}




/* — contenedor central — */
.uc-container{
  max-width: 1200px;
  margin-inline: auto;
  padding: 30px 0;
  font-family: "Roboto", system-ui, sans-serif;
  color:#333;
}

/* — título — */
.uc-container h1{
  font-size: 1.6rem;              /* ≈ 26 px */
  font-weight: 600;
  color:#2e94e4;                  /* azul corporativo */
  margin-bottom: 28px;
}

/* — lista ordenada sin numerales del navegador — */
.uc-list{
  list-style: none;
  counter-reset: uc;              /* reiniciamos el contador */
  margin: 0;
  padding: 0;
}

/* — cada caso de uso — */
.uc-list li{
  counter-increment: uc;          /* +1 */
  margin-bottom: 32px;
}

/* — encabezado clicable (número + texto) — */
.uc-list li > a{
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color:#2e94e4;
  position: relative;
  padding-left: 22px;             /* espacio para el número */
}

/* número antes del enlace */
.uc-list li > a::before{
  content: counter(uc) ".";
  position: absolute;
  left: 0;
  color:#2e94e4;
}

/* subtítulo / descripción */
.uc-list li p{
  margin: 6px 0 0 22px;           /* alinea con el texto del enlace */
  line-height: 1.55;
}

/* — interacción accesible — */
.uc-list li > a:hover,
.uc-list li > a:focus{
  text-decoration: underline;
}

/* — responsive — */
@media (max-width: 460px){
  .uc-container h2{font-size:1.45rem;}
  .uc-list li{margin-bottom:26px;}
}

/* ========== ESTILOS “TÉRMINOS DE USO” ========== */

.terms{
  padding: 56px 0 64px;
  /* franja gris muy suave en los laterales (solo estética) */
  box-shadow: inset 0 0 0 100vmax #f0f3f6;
  clip-path: inset(0 -100vmax);
}

.terms-container{
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 22px;
  font-family: "Roboto", system-ui, sans-serif;
  color:#333;
}

.terms h2{
  font-size: 1.5rem;              /* ≈24 px */
  font-weight: 600;
  color:#2e94e4;
  margin-bottom: 20px;
}

.terms .intro{
  margin-bottom: 28px;
  line-height: 1.55;
}

.terms-list{
  list-style: none;
  counter-reset: term;
  margin: 0;
  padding: 0;
}

.terms-list > li{
  counter-increment: term;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #e3e7ec;
}

/* quita la línea del último */
.terms-list > li:last-child{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.terms-list h3{
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
  color:#2e94e4;
  margin-bottom: 10px;
  padding-left: 32px;             /* hueco para el número */
}

/* número azul delante del h3 */
.terms-list h3::before{
  content: counter(term) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color:#2e94e4;
}

/* párrafos */
.terms p{
  margin: 0 0 14px;
  line-height: 1.55;
}

/* listas internas con viñetas */
.terms .bullet{
  margin: 8px 0 14px 18px;
  padding-left: 0;
}

.terms .bullet li{
  margin: 4px 0;
}

/* responsive */
@media (max-width: 460px){
  .terms h2{font-size:1.35rem;}
  .terms-list h3{font-size:1rem;padding-left:28px;}
}

/* ========== ESTILOS “POLÍTICA DE PRIVACIDAD” ========== */

.privacy{
  background:#ffffff;
  padding:56px 0 64px;
  box-shadow: inset 0 0 0 100vmax #f0f3f6;  /* franja gris lateral */
  clip-path: inset(0 -100vmax);
}

.privacy-container{
  max-width:1200px;
  margin-inline:auto;
  padding:0 22px;
  font-family:"Roboto",system-ui,sans-serif;
  color:#333;
}

.privacy h2{
  font-size:1.5rem;             /* ≈24 px */
  font-weight:600;
  color:#2e94e4;
  margin-bottom:20px;
}

.privacy .intro{
  margin-bottom:28px;
  line-height:1.55;
}

.privacy-list{
  list-style:none;
  counter-reset:pp;             /* reinicio contador */
  margin:0;
  padding:0;
}

.privacy-list>li{
  counter-increment:pp;
  margin-bottom:32px;
}

.privacy-list h3{
  position:relative;
  font-size:1.05rem;
  font-weight:600;
  color:#2e94e4;
  margin-bottom:10px;
  padding-left:32px;            /* hueco para el número */
}

.privacy-list h3::before{
  content:counter(pp) ".";
  position:absolute;
  left:0;
  color:#2e94e4;
  font-weight:600;
}

.privacy p{
  margin:0 0 14px;
  line-height:1.55;
}

.privacy .bullet{
  margin:8px 0 14px 18px;
  padding-left:0;
}

.privacy .bullet li{
  margin:4px 0;
}

/* enlaces */
.privacy a{
  color:#2e94e4;
  text-decoration:underline;
}

/* responsive */
@media (max-width:460px){
  .privacy h2{font-size:1.35rem;}
  .privacy-list h3{font-size:1rem;padding-left:28px;}
}

/* ========== ESTILOS “ACERCA & PRECIOS” ========== */

.about-pricing{
  background:#ffffff;
  box-shadow: inset 0 0 0 100vmax #f0f3f6; /* laterales gris claros */
  clip-path: inset(0 -100vmax);
  font-family:"Roboto",system-ui,sans-serif;
  color:#333;
}

.about,
.pricing{
  max-width:1200px;
  margin-inline:auto;
  padding:32px 22px;
}

/* — Títulos — */
.about h2,
.pricing h2{
  font-size:1.4rem;         /* ≈22 px */
  font-weight:600;
  color:#2e94e4;
  margin-bottom:18px;
  text-transform:uppercase;
}

.pricing h3{
  font-size:1.1rem;
  font-weight:600;
  color:#333;
  margin:28px 0 12px;
}

/* — Párrafos — */
.about p,
.pricing p{
  margin:0 0 14px;
  line-height:1.55;
}

/* enlaces dentro de texto */
.about a,
.pricing a{
  color:#2e94e4;
  text-decoration:underline;
}

/* — Wrapper para scroll horizontal en móviles — */
.table-wrapper{
  overflow-x:auto;
}

/* — Tablas — */
.price-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:32px;
  min-width:480px;          /* evita que se estreche demasiado */
}

.price-table th,
.price-table td{
  padding:10px 12px;
  border-bottom:1px solid #e2e6ea;
  text-align:left;
  font-size:.93rem;
}
.price-table td {
  vertical-align: top;
}

.price-table th{
  font-weight:600;
  background:#fafbfd;
}
.price-price {
  font-weight: bold;
}

.price-table tr:last-child td{
  border-bottom:none;
}

.text-center {
  text-align:center !important;
}

/* — Botones — */
.btn{
  display:inline-block;
  padding:6px 18px;
  font-size:.85rem;
  font-weight:600;
  color:#ffffff;
  background:#2e94e4;
  border:2px solid #2e94e4;
  border-radius:4px;
  white-space:nowrap;
  transition:.2s;
}

.btn:hover{background:#237acd;border-color:#237acd;}

.btn.outline{
  background:transparent;
  color:#2e94e4;
}

.btn.outline:hover{
  background:#2e94e420;    /* azul claro semitransparente */
}

/* — Responsive ajustes menores — */
@media (max-width:460px){
  .about h2,
  .pricing h2{font-size:1.3rem;}
  .pricing h3{font-size:1rem;}
  .price-table th,
  .price-table td{font-size:.85rem;padding:8px 10px;}
  .btn{padding:6px 16px;font-size:.80rem;}
}