*, *::before, *::after {
    box-sizing: border-box;
  }
  
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
  
  :root {
    --body-font                                     : "Poppins", sans-serif;
    --max-width                                     : 1200px;
    --primary-color                                 : #093456;
    --primary-color-alt                             : #77A5F8;
    --secondary-color                               : #676F73;
    --title-color                                   : #EFE41B;
    --text-color                                    : #57565C;
    --body-bg-color                                 : #FCFFFC;
    --white-color                                   : #FFFFFF;
    --color                                         : var(--primary-color);
    --color-alt                                     : var(--primary-color-alt);
  
    --header-height-small                           : 1rem;
    --header-height                                 : 1.5rem;
    --section-spacing                               : 2rem;
    --block-spacing                                 : 2rem;
    --body-line-height                              : 1.4em;
    --title-line-height                             : 1.1em;        
    
    --h1-font-size                                  : 1.10rem;
    --h2-font-size                                  : 1.05rem;
    --h3-font-size                                  : .90rem;
    --big-font-size                                 : .85rem;
    --normal-font-size                              : 0.75rem; 
    --small-font-size                               : 0.65rem;
    --border-radius                                 : 0.75rem;
    --box-shadow                                    : 10px 10px 15px rgba(0,0,0,0.05);
  }
  
  @media screen and (min-width: 1024px) {
  
    :root {
      --header-height-small                         : 1rem;
      --header-height                               : 1.5rem;
      --section-spacing                             : 3rem;
      --block-spacing                               : 2.5rem;
      --h1-font-size                                : 1.5rem;
      --h2-font-size                                : 1.35rem;
      --h3-font-size                                : 1.15rem;
      --big-font-size                               : 1.15rem;      
      --normal-font-size                            : 1rem;
      --small-font-size                             : 0.85rem;
    }
  
  }
  
  body {
    display                                         : flex;
    flex-direction                                  : column;
    align-items                                     : center;
    min-height                                      : calc(100vh - var(--header-height));
    color                                           : var(--text-color);
    padding-top                                     : var(--header-height-small);
    font-family                                     : var(--body-font);
    font-size                                       : var(--normal-font-size);
    line-height                                     : var(--body-line-height);
    background                                      : linear-gradient(145deg, var(--primary-color) 0%, var(--primary-color-alt) 100%);
  }
  
  main {
    display                                         : grid;
    justify-content                                 : center;
    align-items                                     : center;
  }
  
  .menu {
    display                                         : none;
  }
  
  @media screen and (min-width: 1024px) {
  
    .nav {
        display                                     : flex;
        align-items                                 : center;
    }
  
    .menu {
        display                                     : flex;
        margin-left                                 : auto;
        list-style                                  : none;
        padding                                     : 0;
    }
  
    .link {
        display                                     : block;
        padding                                     : .5rem .75rem;
        color                                       : var(--white-color);
        font-size                                   : 1.25rem;
        cursor                                      : pointer;
        border-right                                : 1px var(--primary-color-alt) solid;
    }
  
    .link:hover {
        color                                       :var(--title-color);
    }
  }
  
  .seleccion-ppal {
    display                                         : grid;
    gap                                             : 2rem;
    
  }
  
  .seleccion {
    width                                           : 310px;
    background                                      : var(--white-color);
    border-radius                                   : 16px;
    padding                                         : 30px;
    box-shadow                                      : var(--box-shadow)
  }
  
  a {
    text-decoration                                 : none;
    color                                           : var(--body-bg-color);
  }
  
  .icono-lg {
    height                                          : 100px;
  }
  
  .iconos-rds {
    height                                          : 45px;
  }
  
  .iconos-marcas {
    height                                          : 35px;
  }
  
  .icono-ttl {
    height                                          : 50px;
    margin                                          : 0 40%;
  }
  
  .seleccion-ppal {
    grid-template-columns                           : repeat(1, 1fr);
  }
  
  @media screen and (max-width: 280px) {
  
    .seleccion {
      width                                         : 270px;
    }
  
    .seleccion header {
      margin                                        : 0 -20px;
    }
  }
  
  @media screen and (min-width: 768px) {
  
    .seleccion-ppal {
      grid-template-columns                         : repeat(2, 1fr);
    }
  }
  
  @media screen and (min-width: 660px) and (orientation: landscape) {
  
    .seleccion-ppal {
      grid-template-columns                         : repeat(2, 1fr);
    }
  }
  
  @media screen and (min-width: 1024px) {
  
    .seleccion-ppal {
      grid-template-columns                         : repeat(3, 1fr);
    }
  }
  
  @media screen and (max-width: 640px) and (orientation: landscape) {
  
    .seleccion-ppal {
      gap                                           : .5rem;
      grid-template-columns                         : repeat(2, 1fr);
    }
  }
  
  
   
  .seleccion header {
    height                                          : 55px;
    display                                         : flex;
    align-items                                     : center;
    border                                          : 1px solid var(--white-color);
    border-radius                                   : 30px;
    position                                        : relative;
  }
   
  header label {
    height                                          : 100%;
    z-index                                         : 2;
    width                                           : 50%;
    display                                         : flex;
    cursor                                          : pointer;
    font-size                                       : 1rem;
    position                                        : relative;
    align-items                                     : center;
    justify-content                                 : center;
    transition                                      : color 0.3s ease;
  }
  
  p {
    text-align                                      : center;
    font-size                                       : 16px;
  }
  
  #tab-1:checked ~ header .tab-1,
  #tab-2:checked ~ header .tab-2,
  #tab-3:checked ~ header .tab-3,
  #tab-4:checked ~ header .tab-4,
  #tab-5:checked ~ header .tab-5,
  #tab-6:checked ~ header .tab-6,
  #tab-7:checked ~ header .tab-7,
  #tab-8:checked ~ header .tab-8,
  #tab-9:checked ~ header .tab-9,
  #tab-10:checked ~ header .tab-10,
  #tab-11:checked ~ header .tab-11,
  #tab-12:checked ~ header .tab-12,
  #tab-13:checked ~ header .tab-13,
  #tab-14:checked ~ header .tab-14,
  #tab-15:checked ~ header .tab-15,
  #tab-16:checked ~ header .tab-16,
  #tab-17:checked ~ header .tab-17,
  #tab-18:checked ~ header .tab-18 {
    color                                           : var(--title-color);
  }
  
  header label:nth-child(2){
    width                                           : 45%;
  }
  
  header .slider,
  header .slider2,
  header .slider3,
  header .slider4,
  header .slider5,
  header .slider6 {
    position                                        : absolute;
    height                                          : 85%;
    border-radius                                   : inherit;
    background                                      : linear-gradient(145deg, #77A5F8 0%, #093456 100%);
    transition                                      : all 0.3s ease;
  }
  
  #tab-1:checked ~ header .slider,
  #tab-4:checked ~ header .slider2,
  #tab-7:checked ~ header .slider3,
  #tab-10:checked ~ header .slider4,
  #tab-13:checked ~ header .slider5,
  #tab-16:checked ~ header .slider6 {
    left                                            : 0%;
    width                                           : 80px;
    transform                                       : translateX(5%);
  }
  
  #tab-2:checked ~ header .slider,
  #tab-5:checked ~ header .slider2,
  #tab-8:checked ~ header .slider3,
  #tab-11:checked ~ header .slider4,
  #tab-14:checked ~ header .slider5,
  #tab-17:checked ~ header .slider6 {
    left                                            : 50%;
    width                                           : 80px;
    transform                                       : translateX(-50%);
  }
  
  #tab-3:checked ~ header .slider,
  #tab-6:checked ~ header .slider2,
  #tab-9:checked ~ header .slider3,
  #tab-12:checked ~ header .slider4,
  #tab-15:checked ~ header .slider5,
  #tab-18:checked ~ header .slider6 {
    left                                            : 100%;
    width                                           : 80px;
    transform                                       : translateX(-105%);
  }
  
  .seleccion input[type="radio"] {
    display                                         : none;
  }
  
  .card-area {
    overflow                                        : hidden;
  }
  
  .card-area .cards {
    display                                         : flex;
    width                                           : 300%;
  }
  
  .cards .row {
    width                                           : 33.4%;
  }
  
  .cards .row-1{
    transition                                      : all 0.3s ease;
  }
  
  #tab-1:checked ~ .card-area .cards .row-1,
  #tab-4:checked ~ .card-area .cards .row-1,
  #tab-7:checked ~ .card-area .cards .row-1,
  #tab-10:checked ~ .card-area .cards .row-1,
  #tab-13:checked ~ .card-area .cards .row-1,
  #tab-16:checked ~ .card-area .cards .row-1 {
     margin-left                                    : 0%;
  }
  
  #tab-2:checked ~ .card-area .cards .row-1,
  #tab-5:checked ~ .card-area .cards .row-1,
  #tab-8:checked ~ .card-area .cards .row-1,
  #tab-11:checked ~ .card-area .cards .row-1,
  #tab-14:checked ~ .card-area .cards .row-1,
  #tab-17:checked ~ .card-area .cards .row-1 {
    margin-left                                     : -33.4%;
  }
  
  #tab-3:checked ~ .card-area .cards .row-1,
  #tab-6:checked ~ .card-area .cards .row-1,
  #tab-9:checked ~ .card-area .cards .row-1,
  #tab-12:checked ~ .card-area .cards .row-1,
  #tab-15:checked ~ .card-area .cards .row-1,
  #tab-18:checked ~ .card-area .cards .row-1 {
     margin-left                                    : -66.8%;
  }
  
  .row .price-details {
    margin                                          : 20px 0;
    text-align                                      : center;
    padding-bottom                                  : 25px;
    border-bottom                                   : 1px solid var(--secondary-color);
  }
  
  .price-details p {
    font-size                                       : 15px;
    margin-top                                      : 5px;
  }
  
  .seleccion button {
    width                                           : 100%;
    border-radius                                   : 25px;
    border                                          : none;
    outline                                         : none;
    height                                          : 50px;
    font-size                                       : 18px;
    color                                           : var(--white-color);                   
    cursor                                          : pointer;
    margin-top                                      : 20px;
    background                                      : linear-gradient(145deg, #77A5F8 0%, #093456 100%);
    transition                                      : transform 0.3s ease;
  }
  
  .seleccion button:hover {
    transform                                       : scale(0.98);
  }
  
  .footer-principal {
    display                                         : flex;
    justify-content                                 : center;
    align-items                                     : center;
    margin-top                                      : 40px;
    padding                                         : 30px 10px;
    width                                           : 90%;
    height                                          : var(--header-height-small);
    font-size                                       : var(--small-font-size);
    border-top                                      : 1px solid var(--secondary-color);
  }
  
  .footer-principal p {
    margin-bottom                                   : 1rem;
    color                                           : var(--white-color);
    text-align                                      : center;
  }