:root{
    --color-fondo:#050505;
    --color-texto:#fff;
    --color-resaltador:#00e5ff;
    --color-resaltador-suave:rgba(0, 229, 255, .11);
    --borde:#262626;
    --sombra:  1px 1px 2px rgba(255,255,255,0.5);
    --texto-gris-claro-1:#a3a3a3;
    --texto-gris-claro-2: #737373;
    --texto-tarjeta:#e8e8e8;
    --radio:18px;
    --color-strong:#fff;




    --fondo-body-general: radial-gradient(circle at 15% 0%, rgba(0,229,255,.08), transparent 26rem),
        radial-gradient(circle at 85% 12%, rgba(255,255,255,0.04),  transparent 25rem),
        var(--color-fondo);
    --fondo-logo:linear-gradient(145deg, #141414, #090909);
    --color-opciones:#d4d4d4;
    --color-hover-opciones:#fff;
    --color-fondo-opcion:#1b1b1b;
    --color-fondo-header:rgba(5,5,5,.98);
    --color-borde-header:rgba(255,255,255,.08);
    --color-thumb:#363636;
    --fondo-boton-secundario:#0b0b0b;
    --fondo-hover-secundario:#131313;
    --tarjeta-degradado-1:#111;
    --tarjeta-degradado-2:#090909;
    --brillo:rgba(0, 229, 255, 0.45);
    --degradado-resumen:rgba(0,229,255,.025);
    --borde-resumen:rgba(0,229,255,.24);
    --tarjeta-hover:#353535;
    --fondo-flujo-escalon:#0b0b0b;
    --etiqueta-precio:#d2d2d2;
    --verde: #6ee7b7;
    --naranja: #fbbf24;
    --rojo: #fb7185;
  
}

#cambiar-color:checked ~ .contenedor-app{
    --color-fondo:#fff;
    --color-texto:#010101;
    --color-resaltador:#00a8e8;
    --color-resaltador:#0091d2;
    --color-resaltador:#00baeb;
    --color-resaltador-suave:rgba(220, 220, 220, 0.5);
    --borde:#010101;
    --sombra:0 6px 10px rgba(0,0,0,0.15);
    --texto-gris-claro-1:#333;
    --texto-gris-claro-2: #434343;
    --texto-tarjeta:#080808;
    --color-strong:#000;
   

    --fondo-body-general:var(--color-fondo);
    --fondo-logo:linear-gradient(145deg, #e9e9e9, #f9f9f9);;
    --color-opciones:#444;
    --color-hover-opciones:#000;
    --color-fondo-opcion:#e9e9e9;
    --color-fondo-header:#f9f9f9;
    --color-borde-header:rgba(0,0,0,.08);
    --color-thumb:#999;
    --fondo-boton-secundario:#f9f9f9;
    --fondo-hover-secundario:#f3f3f3;
    --tarjeta-degradado-1:#f1f1f1;
    --tarjeta-degradado-2:#f9f9f9;
    --brillo:#00a8e8;
    --brillo:rgba(0,168,232,0.45);
    --degradado-resumen:rgba(220,220,220,0.35);
    --borde-resumen:rgba(220,220,220,.94);
    --tarjeta-hover:#00baeb;
    --fondo-flujo-escalon:#fbfbfb;
    --etiqueta-precio:#444;
    --verde: green;
    --naranja: orangered;
    --rojo: red;
  
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    
}
::selection{
    /* A la inversa de como está en el documento */
    background-color: var(--color-texto);
    color: var(--color-fondo);
}
::-webkit-scrollbar{
        width: 0.5rem;
    }
    ::-webkit-scrollbar-track{
        background: transparent;
    }
    ::-webkit-scrollbar-thumb{
        background: var(--color-thumb);
        border-radius: 2rem;
    }
body{
    background-size: auto, 24px 24px, auto; 
}
/* Estandarización del documento web */
.contenedor-app{
    min-height: 100vh;
    background:var(--fondo-body-general);
    color: var(--color-texto);
    font-family: "Inter", sans-serif;
    line-height: 1.65;
    /* Si tu texto tiene un tamaño de 16px, un -0.3em restará exactamente 4.8 píxeles de espacio entre cada letra. */
    /* el valor de em depende del tamaño de la fuente (font-size) del elemento actual o de su contenedor padre. */
    letter-spacing: -0.01em;
}

/* Para que tengan exactamente el mismo color del texto del párrafo o contenedor donde está metido.Romper el estandar por defecto del HTML */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Esa regla es uno de los pilares del diseño web moderno y responsivo. Se utiliza para evitar que las imágenes rompan tu diseño y para eliminar un molesto espacio en blanco extra que los navegadores ponen por defecto. */
/* Esa regla es uno de los pilares del diseño web moderno y responsivo. Se utiliza para evitar que las imágenes rompan tu diseño y para eliminar un molesto espacio en blanco extra que los navegadores ponen por defecto. */
/* Diferencia con width: 100%: Si usás width: 100%, una imagen chiquita (de 100px) se estirará a la fuerza para ocupar toda la pantalla y se verá pixelada. Con max-width, si la imagen es más chica que la pantalla, mantiene su tamaño original sin deformarse */
/* Con display block, se elimina el espacio en blanco */
/*  Los elementos en línea se alinean con la "línea de base" del texto (la baseline), dejando siempre un pequeño espacio vacío de unos 3 o 4 píxeles abajo de la imagen (el espacio reservado para las letras que bajan, como la "g", la "j" o la "p"). Al transformarla en block, ese espacio fantasma desaparece por completo, lo que te permite alinear fondos y contenedores de forma exacta */
img { max-width: 100%; display: block; }


.contenedor{
width: min(calc(100% - 32px), 1180px);
/* Es lo mismo que margin:0 auto porque refiere a los laterales */
margin-inline: auto ;
/* No pongo padding proque nunca llega al 100% */
}
input#cambiar-color, input#menu-btn, input#cerrar-btn, input#menu-celu, input#menu-mega-celu{
display: none;
}
.texto-gris-claro-1{
    color: var(--texto-gris-claro-1);
    padding-block: 1rem;
    font-size: 0.9rem;
}
.texto-gris-claro-1 strong{
    color: var(--color-strong);
}

header{
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--color-borde-header);
background-color: var(--color-fondo-header);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

header nav{
/* Al ponerle una altura mínima, genero un padding superior, proque lo centro con align-items */
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;

    /* para el submenu - importante para no perder el hover*/
line-height:80px;
/* Como referencia para ubicar el submenu */
position: relative;

}

header nav a.logo, footer a.logo{
display: flex;
align-items: center;
gap:0.5rem;
font-size: 0.93rem;
font-weight: 750;
letter-spacing: -0.03em;
}
header nav a.logo span:first-child, footer a.logo span:first-child{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid var(--borde) ;
    white-space: nowrap;
    border-radius: 8px;
    display: grid;
    place-items:center ;
    color: var(--color-resaltador);
    background: var(--fondo-logo);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
   

header nav ul.opciones{
list-style: none;
display: inline-flex;
align-self: center;
gap:3rem;


}
header nav li a{
    color: var(--color-opciones);
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .93rem;
    transition: .2s ease;
}
header nav li a:hover{
    background: var(--color-fondo-opcion); 
    color: var(--color-hover-opciones);
    box-shadow: var(--sombra);
}
header nav .iconos{
    margin-inline: 2rem;
    position: relative;

}
header nav .iconos label#sol, header nav .iconos label#luna{
    position: absolute;
    top:50%;
    right:0;
    transform: translate(-50%,-43%);
    transition: 0.2s linear;
    cursor: pointer;
}
header nav .iconos label#menu-label{
    margin-inline: 0.3rem;
    position: absolute;
    top:0;
    left: 0;
    transform: translate(-50%,-40%);
    transition: 0.2s linear;
    cursor: pointer;
  
}
header nav .iconos label{
    transition: 0.2s linear;
}
header nav .iconos label:hover svg {
    transform: scale(1.05);
}
header nav .iconos label#luna{
    opacity: 0;
    visibility: hidden;
}
#cambiar-color:checked ~ .contenedor-app .iconos #sol{
    opacity: 0;
    visibility: hidden;
}
#cambiar-color:checked ~ .contenedor-app .iconos #luna{
    opacity: 1;
    visibility: visible;
}

header nav ul.subopciones{
    list-style: none;
    position: absolute;
    background-color:var(--color-fondo-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-borde-header);
    border-left: 2px solid var(--color-borde-header);
    border-right: 1px solid var(--color-borde-header);
    box-shadow: var(--sombra);
    border-radius: 0 0 8px 8px;
    width: 220px;
    line-height: 45px;
    top:85px;
    opacity: 0;
    visibility: hidden;
}
header nav ul.subopciones li:hover a{
    background: var(--color-fondo-opcion); 
    color: var(--color-hover-opciones);
    box-shadow: var(--sombra);
    margin-inline: 8px;
  
}

header nav ul.opciones li:hover ul.subopciones,header nav ul.opciones li:hover .mega-opcion {
    transition: 0.3s ease;
    /* Importante que sea igual a los valores line-height y height del nav */
    top:80px;
    opacity: 1;
    visibility: visible;
}
header nav ul.opciones li a{
   
    position: relative;
}
header nav ul.opciones li a.escritorio{
        padding-right: 25px;
}
header nav ul.opciones li a span{
    position: absolute;
    top: -60%;
    right: 5%;
   
   
   transition: 0.2s linear;
}
header nav ul.opciones li a span:last-child{
   
    visibility: hidden;
    opacity: 0;
}
header nav ul.opciones li:hover a span:first-child{
    visibility: hidden;
    opacity: 0;
}
header nav ul.opciones li:hover a span:last-child{
    visibility: visible;
    opacity: 1;
}

header nav ul.opciones .mega-opcion{
    list-style: none;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 30px;
    top:85px;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;
   
}
header nav ul.opciones .mega-opcion .contenido{
    background-color: var(--color-fondo-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-borde-header);
    border-left: 2px solid var(--color-borde-header);
    border-right: 1px solid var(--color-borde-header);
    padding: 25px 20px;
    border-radius: 0 0 8px 8px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    box-shadow: var(--sombra);
}
header nav ul.opciones .mega-opcion .contenido .fila{
    width: calc(33% - 30px);
    line-height: 45px;
}
header nav ul.opciones .mega-opcion .contenido .fila span{
    color: var(--color-resaltador);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    cursor: default;
}
 header nav ul.opciones .mega-opcion .contenido .fila ul.mega-subopcion {
    list-style: none;
    border-left: 1px solid var(--borde);
 }
 header nav .mega-opcion  li:hover a{
    background: var(--color-fondo-opcion); 
    color: var(--color-hover-opciones);
    box-shadow: var(--sombra);
    margin-inline: 8px;
}

header nav label#menu-label,header nav label#cerrar-label{
    display: none;
}
header nav label#cerrar-label{
    position: absolute;
    right: 30px;
    top:20px;
    cursor: pointer;
    transition: 0.3s linear;
}
header nav label#cerrar-label svg{
    transition: 0.3s linear;
}
header nav label#cerrar-label:hover svg{
    transform:rotate(180deg);
}

header nav .celular-label{
  
    cursor: pointer;
    width: fit-content;
    line-height: 40px;
    display: none;
}
header nav .celular-label:hover{
    background: var(--color-fondo-opcion); 
    color: var(--color-hover-opciones);
    box-shadow: var(--sombra);

}

/* Generales para varias secciones */
.pretitulo{
     display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-resaltador);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .11em;
      text-transform: uppercase;
}
.pretitulo::before{
    content: "";
      width: 24px;
      height: 1px;
      background: var(--color-resaltador);
}
h1,h2,h3,h4 { 
line-height: 1.08; 
letter-spacing: -.045em; 
margin: 0; }

h1 { 
    font-size: clamp(3.1rem, 5vw, 6.4rem); 
    max-width: 980px; 
    line-height:clamp(2.9rem, 4.9vw, 6.1rem); 
    }
h2 { font-size: clamp(2.2rem, 3vw, 4rem); }
h3 { font-size: clamp(1.35rem, 1vw, 2rem); }
h4 { font-size: 1rem; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 43px;
    padding: 0 16px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-weight: 700;
    font-size: .9rem;
    transition: .2s ease;
}
.btn.primario { 
    color: #001014; 
    background: var(--color-resaltador); 
    border-color: var(--color-resaltador); 
}
.btn.primario:hover {
     filter: brightness(1.08); 
    transform: translateY(-1px);
}
.btn.secundario { 
    background:var(--fondo-boton-secundario) ; 
}
.btn.secundario:hover { 
    background: var(--fondo-hover-secundario); 
}

.grid-2 { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0,1fr)); 
    gap: 18px; 
}
.grid-3 { 
    display: grid; 
    grid-template-columns: 
    repeat(3, minmax(0,1fr)); 
    gap: 16px; 
}
.grid-4 { display: grid; 
    grid-template-columns: repeat(4, minmax(0,1fr)); 
    gap: 14px; 
}



/* El Main */
main{
    /* La propiedad overflow: clip en CSS recorta por completo el contenido que sobresale de los límites de un contenedor.A diferencia de overflow: hidden, la opción clip prohíbe de forma absoluta cualquier tipo de desplazamiento, incluso el programático a través de JavaScript. */
    overflow: clip;
}

main section#inicio{
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap:3.25rem;
    align-items: start;
    padding: 4.5rem 0 2.4rem;
  
}

main section#inicio .izquierda{
    display: grid;
    gap:1.5rem;
}

main section#inicio .subtitulo{
     max-width: 760px; 
     font-size: clamp(1rem, 2vw, 1.2rem); 
     color: #bdbdbd;
}

main section#inicio .botones{
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem; 
}

main section#inicio .derecha aside{
    padding: 24px;
    border: 1px solid var(--color-borde-header);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
    user-select: none;
    cursor: default;
    transition: 0.2s linear;
}

main section#inicio .derecha aside p { margin: 0 0 14px; font-size: 1.02rem; }
main section#inicio .derecha aside .cita { color: var( --texto-tarjeta); }
main section#inicio .derecha aside .autor { color: var(--texto-gris-claro-2); font-size: .82rem; }

main section#inicio .derecha aside:hover{
   
    background: linear-gradient(to bottom, var(--brillo) 0%, rgba(0,0,0,0) 98%);
    border-bottom: 4px solid var(--color-resaltador);
}


main section#inicio .redes{
      display: grid;
      height: 100%;
      width: 100%;
      place-items: center;
      margin-top: 4rem;
    }
main section#inicio    .redes .wrapper .button{
      display: block;
      height: 50px;
      width: 50px;
      float: left;
      text-decoration: none;
      margin: 0 5px;
      overflow: hidden;
      background-color: var(--color-resaltador);
      border-radius: 50px;
      cursor: pointer;
      box-shadow:0 10px 10px rgba(0,0,0,0.1);
      transition: 0.3s ease-in-out;
    }
main section#inicio    .redes .wrapper .button:hover{
      width: 200px;
    }
main section#inicio    .redes .wrapper .button .icon{
      display: inline-block;
      height: 50px;
      width: 50px;
      color: #000;
      text-align: center;
      border-radius: 50px;
      box-sizing: border-box;
      line-height: 58px;
      transition: 0.3s ease-in-out;
    }
main section#inicio    .redes .wrapper .button .icon i{
      font-size: 22px;
      color:#000 ;
    }
main section#inicio    .redes .wrapper .button span{
      color: #000;
        font-size: 20px;
        font-weight: 500;
        line-height: 60px;
        margin-left: 5px;
        transition: 0.3s ease-out;
    }
main section#inicio    .redes .wrapper .button:hover span{
        color: #000;
        padding-bottom: 15px;
    }

main  .division{
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--borde), transparent);
    margin: 25px 0;
}

/*Para varias secciones*/
main section:not(#inicio){
    padding: 2rem 0;
}
main .titulo{
     display: grid; 
     gap: 0.94rem; 
     max-width: 53rem; 
     margin-bottom: 2.5rem; 
}
main .titulo p{
    color: var(--texto-gris-claro-1); 
    font-size: 1.03rem; 
    letter-spacing: -0.02em;
    margin: 0; 
}
main .tarjeta{
    padding: 24px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
    /* Para alinear el interior de la tarjeta */
    height: 100%;
    display: flex;
    flex-direction: column;
}
main .tarjeta:hover { 
    border-color: var(--tarjeta-hover); 
}
main .tarjeta p:last-child { 
    margin-bottom: 0; 
}

main .tarjeta .titulo-tarjeta {
      color: var(--color-resaltador);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 11px;
}

main  .destacado{
  
      padding: 20px 22px;
      border: 1px solid var(--borde-resumen);
      border-left: 4px solid var(--color-resaltador);
      border-radius: 14px;
      background: linear-gradient(90deg, var(--color-resaltador-suave), var(--degradado-resumen));
      /* Para que esten alineados entre tarjetas */
      margin-top: auto;
    }

main  .destacado strong { 
    color:var(--color-strong) ; 
}

.claves { 
    display: grid; 
    gap: 10px; 
    margin-top: 22px; 
}
.clave { 
    display: flex; 
    gap: 14px; 
    align-items: flex-start; 
    padding: 14px; 
    border: 1px solid var(--borde); 
    border-radius: 12px; 
    background: var(--fondo-flujo-escalon);
    }
.clave .vineta { 
    width: 7px; 
    height: 7px; 
    margin-top: 9px; 
    border-radius: 50%; 
    background: var(--color-resaltador); 
    flex: 0 0 auto; 
}


main section#mapa article{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: stretch;
}
main section#mapa article .tarjeta-cadena{
    position: relative;
    min-height: 160px;
    padding: 19px ;
    border: 1px solid var(--borde);
    border-radius: 15px;
    background:linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
  
}
main section#mapa article .tarjeta-cadena:not(:last-child)::after{
    content: url('imagenes/flecha.svg');
    position: absolute;
    right: -25px;
    top: 55%;
    transform: translateY(-50%);
    font-weight: 900;
    z-index: 2;

}
main section#mapa article  .numeracion{
    font-size: .72rem; 
    color: var(--color-resaltador); 
    font-weight: 900; 
    letter-spacing: .1em;
}

main article .numero{
    font-size: 2.2rem;
    font-weight: 850;
    letter-spacing: -.06em;
    color: var(--color-strong);
}
main section .pie-seccion{
    max-width: 850px;
}
main section .pie-seccion h3{
   margin-top: 2rem;
}

main section .flujo{
     display: grid; 
     gap: 10px; 
    
}
main section .flujo .escalon-flujo {
      position: relative;
      padding: 17px 18px;
      border: 1px solid var(--borde);
      border-radius: 14px;
      background: var(--fondo-flujo-escalon);
      margin-top: 12px;
}
main section .flujo .escalon-flujo:not(:last-child)::after {
      content: url('imagenes/flecha-abajo.svg');
      position: absolute;
      left: 50%;
      bottom: -35px;
      transform: translateX(-50%);
      color: var(--color-resaltador);
      font-size: 1rem;
      z-index: 2;
}
main section .flujo .escalon-flujo strong{
    display: block;
    margin-bottom: 4px;
}
 main section .ejemplo {
      margin-top: 22px;
      padding: 20px;
      border: 1px dashed var(--borde);
      border-radius: 14px;
      background: var(--color-fondo);
    }
  main section .titulo-ejemplo { 
    font-weight: 800; 
    margin-bottom: 7px; 
}
  main section .ejemplo p {
    color: var(--texto-gris-claro-1);
    padding-block: 1rem;
    font-size: 0.9rem;
   }

main section#precio .escalera-precios { 
    display: grid; 
    gap: 9px; 
}
main section#precio .fila-precios { 
    display: grid; 
    grid-template-columns: 120px 1fr 70px; 
    gap: 12px; 
    align-items: center; 
}
 main section#precio  .etiqueta-precio { 
        color: var(--etiqueta-precio); 
        font-size: .84rem; 
    }
main section#precio .barra { 
    height: 10px; 
    border-radius: 999px; 
    background: var(--color-fondo-opcion); 
    overflow: hidden; }
main section#precio .barra > span { 
    display: block; 
    height: 100%; 
    background: linear-gradient(90deg, #0f3a42, var(--color-resaltador)); 
    border-radius: inherit; }
main  .valor-precio { 
        text-align: right; 
        color: var(--texto-gris-claro-1); 
        font-size: .82rem; 
    }
.capitulo-tarjeta { 
    position: relative; 
    min-height: 290px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}
.capitulo-numero { 
    font-size: .76rem; 
    color: var(--color-resaltador); 
    font-weight: 900; 
    letter-spacing: .11em; 
    text-transform: uppercase; 
}
.capitulo-tarjeta p { 
    color: var(--texto-gris-claro-1); 
    font-size: 0.9rem; 
    margin-block: 1rem; 
}
.capitulo-link { 
    margin-top: 20px; 
    color: var(--color-strong); 
    font-weight: 750;
    position: relative; }
.capitulo-link::after { 
    content: url('imagenes/click.svg'); 
    color: var(--color-resaltador); 
    position: absolute; 
    top:-50%
}

.tarjeta-brilla{
    position: relative;
    height: 150px;
    padding: 2rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
}
.tarjeta-brilla .lines{
    position: absolute;
    inset: 0;
    background-color: var(--color-fondo);
    border-radius: var(--radio);
    overflow: hidden;
}
    .tarjeta-brilla .lines::before{
    content: "";
    position: absolute;
    top:50%;
    left: 50%;
    width: 600px;
    height: 120px;
    background: linear-gradient(transparent, #00e5ff,#45f3ff,#00e5ff,transparent);
    animation: animateCard 4s linear infinite;
}



@keyframes animateCard{
    0%{
    transform: translate(-50%,-50%) rotate(0deg);
    }
    100%{
    transform: translate(-50%,-50%) rotate(360deg);
    }
}
.tarjeta-brilla .lines::after{
    content: "";
    position: absolute;
    inset: 3px;
    background-color: var(--color-fondo);
    border-radius: var(--radio);
    
}
.tarjeta-brilla .contenido{
    position: absolute;
    width: 100%;
    height: 100%;
    left:10px;
    right: 10px;
    border-radius: var(--radio);
    background-color: transparent;
    letter-spacing: -0.02px;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
}

table{
    margin-bottom: 3rem;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--borde);  
}
table td{
    padding: 12px;
}
table th{
    padding: 14px 12px;
    font-size: 1rem;
    font-weight: 500;
    border-left:1px solid var(--borde)
}
table td{
     border: 1px solid var(--borde); 
}
table thead{
    background-color: var(--color-fondo-opcion);
    font-size: 1.02rem;   
}
table tbody{
    font-size: 0.9rem;
    
}




/* Fin del main */

/* footer */
footer{
    border-top: 1px solid var(--borde);
    padding: 50px 0 80px;

    /* Para los hijos */
    display: grid; 
    grid-template-columns: 1fr auto; 
    gap: 20px; 
    align-items: end;
}
 footer .nota { 
    max-width: 680px; 
    color: var(--texto-gris-claro-1); 
    font-size: .84rem; 
}
footer .links { 
    display: flex;
    flex-wrap: wrap; 
    gap: 14px; 
    justify-content: 
    flex-end; 
    color: var(--texto-gris-claro-2); 
    font-size: .85rem; 
}
footer .links a:hover { color: var(--color-strong); }
/* Fin footer */


 

@media (max-width:970px) {
    header nav .escritorio{
        display: none;
    }
    header nav .celular-label{
        display: block;
        color: var(--color-opciones);
        padding: 0 11px;
        border-radius: 9px;
        font-size: .93rem;
        transition: .2s ease;
    }
    header nav label#menu-label, header nav label#cerrar-label{
        display: block;
    }
    

    header nav ul.opciones{
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 350px;
        top: 0;
        left: -100%;
        background-color: var(--color-fondo-opcion);
        display: block;
        padding: 50px 10px;
        line-height: 50px;
        overflow-y: auto;
        box-shadow: var(--sombra);
        transition: 0.3s ease;
    }
   
    #menu-btn:checked ~ ul.opciones{
        left: 0%;
    }
    #menu-btn:checked ~ .iconos #menu-label{
        display: none;
    }
    header nav ul.opciones ul.subopciones{
        position: static;
        background: transparent;
        border: none;
        opacity: 1;
        top: 55px;
        visibility: visible;
        padding-left: 20px;
        width: 100%;
        margin-top: 1px;
        overflow: hidden;
        box-shadow: none;
        transition: 0.2s linear;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        max-height: 0;
    }
    header nav ul.opciones .mega-opcion{
        position: static;
        top:55px;
        opacity: 1;
        visibility: visible;
        padding: 0 20px;
        overflow: hidden;
        box-shadow: none;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        max-height: 0;
       
    }
    header nav ul.opciones .mega-opcion .contenido{
        box-shadow: none;
        flex-direction: column;
        background: transparent;
        padding-top: 0;
        padding-bottom:0 ;
        border: none;
    }
    header nav ul.opciones .mega-opcion .contenido .fila{
    width: 100%;
    }
  
    header nav ul.opciones .mega-opcion .contenido .fila ul.mega-subopcion {
        border-left: none;
    }

    #menu-celu:checked ~ ul.subopciones{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        max-height: 100%;
    }
    #menu-mega-celu:checked ~ .mega-opcion{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        max-height: 100%;
    }
 
    label.celular-label span:last-child{
        display: none;
    }
    #menu-celu:checked ~ label.celular-label span:first-child{
        display: none;
    }
    #menu-celu:checked ~ label.celular-label span:last-child{
        display: inline;
    }
    #menu-mega-celu:checked ~ label.celular-label span:first-child{
        display: none;
    }
    #menu-mega-celu:checked ~ label.celular-label span:last-child{
        display: inline;
    }

    /* main */
    main section#inicio{
        grid-template-columns: 1fr;
    }
    main section#inicio    .redes .wrapper .button:hover{
      width: 50px;
    }
    main section#mapa article {
        grid-template-columns: repeat(2, 1fr);
    }
    main section#mapa article .tarjeta-cadena:not(:last-child)::after{
        display: none;
    }
    main .grid-2{
        grid-template-columns: 1fr;
    }
    main .grid-3,.grid-4{
        grid-template-columns: 1fr 1fr;
    }

    
}

 @media (max-width: 760px) {
    .contenedor{
        width: min(calc(100% - 22px), 1180px);

    }
     main section#mapa article {
        grid-template-columns:1fr;
    }
     main .grid-3, main .grid-4{
        grid-template-columns: 1fr;
    }
    .fila-precios { grid-template-columns: 90px 1fr 52px; }
    footer{ grid-template-columns: 1fr; align-items: start; }
    footer .links { justify-content: flex-start; }
   
    table{
        display: none;
    }
 }
 @media(max-width:450px){
    html{
        font-size: 90%;
    }
 }
  @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; }
    }