@charset "UTF-8";
    /* === Movil CSS === */
    
    
    /* VARIABLES GENERALES!!*/

    :root{ /* accesos directos ej. .CLASE{ atributo: var(--algunadelasvariablessiguientes) }*/
      --bg:#f7f7fb;
      --caja:#ffffff;
      --cajagrid:#edeff1;
      --accent:#f97316;
      --muted:#4e535c;
      --pcolor:#FFFFFF;
      --radius:10px;
      --radius-main:0;
      --gap:0rem;
      --aches:rgb(30 58 138);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color-scheme: light;
    }



    *{box-sizing:border-box}

    html,body{
      width: 100%;
      height:100%;
      max-width: 100vw;
      padding: 0;
      margin: 0;
    }
    
    body{
      background:var(--bg);
      color:#111827;
      line-height:1.45;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;      
    }
    a{
      color: var(--pcolor);
      transition-duration: .3s;
    }
    a:hover{
      color: var(--accent);
    }
    h2{
      color: var(--aches);
      font-size: 2.25rem;
      text-align: center;
    }

    .muted{
      color:var(--muted)
    }

    /* contenedor to center content and limit width */
    .contenedor{
      max-width:100vw;
      margin:0 auto;
    }

    /* Header */
    header.sitio-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--gap);
      margin-bottom:1rem;
      display: none;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:0.75rem;
      text-decoration:none;
      color:inherit;
    }
    .logo{
      width:80px;
      height:60px;
      border-radius:10px;
      background:linear-gradient(135deg,var(--accent),#90cdf4);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:white;
      font-weight:700;
      font-size:1.1rem;
      box-shadow:0 3px 10px rgba(11,22,39,0.08);
    }
    .titulo-sitio{font-size:1.05rem;font-weight:600}
    .sub-titulo{font-size:0.8rem;color:var(--muted)}

    /* Nav (mobile first: hidden by toggle) */
    .nav-toggle{display:flex;align-items:center}
    .nav-toggle button{
      background:none;border:2px solid transparent;padding:8px;border-radius:8px;cursor:pointer
    }
    .nav-toggle button:focus{outline:3px solid rgba(59,130,246,0.25)}

    nav.sitio-nav{
      display:none; /* hidden on small */
      position:relative;
    }
    nav.sitio-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.25rem}
    nav.sitio-nav a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:inherit}
    nav.sitio-nav a:hover{background:rgba(0,0,0,0.04)}

    /* Mobile menu panel (simple) */

    .panel-movil{
      display:none;
      background:var(--caja);
      padding:0.5rem;border-radius:12px;box-shadow:0 6px 20px rgba(11,22,39,0.06);margin-top:0.5rem
    }

    /* Main layout */
    main{
      display:block;
      gap:var(--gap);
    }
    .principal{
      background:linear-gradient(rgba(3, 15, 37, 0.8), rgba(26, 47, 88, 0.8)), url('../img/inicio-banner.jpg'), center center;
      background-size: cover;
      background-attachment: fixed;
      border-radius:var(--radius-main);
      padding:8rem;
      display:flex;
      flex-direction:column;
      gap:0.5rem;
      text-align: center;
      width: 100vw;
      height: 100vh;
    }
    .principal h1{
      margin:4rem auto 1rem auto;
      font-size:3.75rem;
      line-height: 1;
    }
    .principal span{
      display: block;
      margin-bottom: 1rem;
    }
    
    .principal .H1A{
      color: #FFFFFF;
    }
    .principal .H1B{
      color: var(--accent);/*naranja*/
    }
    .principal p{
      margin:0 auto;
      color:var(--pcolor);
      font-size: 1.5rem;
     
    }

    .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:0.75rem;
      margin-top:0.75rem;
      width: 100vw;
    }
    .caja{
      padding:0.9rem;
      margin: auto;
      }
    .caja>.infotext{
      display: flex;
      align-items: center;
      gap: 2rem;
    }
    .caja>.infotext>div{
      min-width: 50%;
      width: 100%;
    }
    .caja>.infotext div img{
      width: 100%;
      border-radius: var(--radius);
    }
    .caja>.infogrid{
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 1rem;
    }
    .caja>.infogrid div{
      padding: 1rem;
      box-sizing: border-box;
      border-radius: var(--radius);
    }
    .caja>.infogrid span{
      text-align: center;
      display: block;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      max-width: 4rem;
      margin: 1rem auto 2rem auto;
      font-size: 2rem;
      line-height: 2rem;
      padding: 0.8rem 0 0 0;
    }
    .foscuro{
      background: var(--aches);
      max-width: 100%!important;
      padding: 0 9% 3rem 9%;
      
    }
    .foscuro p, .foscuro h2{
      color: var(--pcolor)!important;
    }

    .caja>.infogrid div:nth-child(1) span{
      background: #dbeafe;
      color:#2563eb;
    }
    .caja>.infogrid div:nth-child(2) span{
      background: #ffedd5;
      color: #ea580c;
    }
    .caja>.infogrid div:nth-child(3) span{
      background: #dcfce7;
      color: #16a34a;
    }
    .caja>.infogrid div:nth-child(4) span{
      background: #fee2e2;
      color: #dc2626;
    }
    .caja>.infogrid h3{
      color: var(--aches);
      text-align: center;
    }
    .caja>.infogrid li{
      margin: 0 0 0.7rem 0;
    }
    .caja>.infogrid div{
      background: var(--cajagrid);
    }
    .caja h3{margin:0 0 0.5rem 0}
    .caja p{
      margin:0;
      color:var(--muted);
      font-size:1.125rem;
      margin:0 0 1rem 0;
    }
    .icontacto{
      color: var(--accent);
      font-size: 1.3rem;
      margin: 0 0.8rem 0 0;
      display:inline-block;
      vertical-align: top;
    }
    .list{
      align-items:unset!important;
    }
    .list span{
      display:inline-block;
      color: var(--muted)!important;
    }
    .list h3{
      margin: 0 0 2rem 0;
      color: var(--aches);
    }
    .list>div>div div{
      margin: 0 0 1rem 0;
    }
    /* Footer */
    footer.sitio-pie{
      width: 100%;
      margin-top:1rem;
      padding:5rem 7rem;
      
      text-align:center;
      
      color:var(--muted);
      font-size:0.95rem;

      background: var(--aches);
      color: var(--pcolor);

    }
    .pie-grid{
      font-size: 1rem;
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 1.5rem;
    }
    .pie-grid>div{
      text-align: left;
    }
    .pie-grid ul {
      margin: 0;
      padding: 0;
    }
    .pie-grid li {
      line-height: 2;
      list-style: none;
    }
    .pie-grid li a{
      text-decoration: none;
    }
    .pie-info{
      font-size: 0.85rem;
      border-top: solid 1px #224f88;
      margin: 1.5rem 0 0 0;
    }


    /* RESPONSIVO*/
    @media(max-width:768px){
      .principal{
        grid-column:1/3;
        align-items:flex-start;
        padding: 1.5rem;
         height: unset;
      }
      .principal h1{
        font-size: 2rem;
        margin: 2rem auto;
      }
      .principal p {
        font-size: 1.3rem;
      }
      h2{
        font-size: 1.5rem;
        max-width: 90%;
      }
      .caja > .infotext{
        display: block;
      }

      .caja > .infotext > div {
        width: 95%;
        margin: auto;
        text-align: justify;
      }
      .caja > .infogrid {
        grid-template-columns: repeat(1,minmax(0,1fr));
      }
      .formaContacto{
        text-align: center!important;
      }
      .pie-grid {
        grid-template-columns: repeat(1,minmax(0,1fr));
      }
    }
    @media(max-width:914px){
      .pie-grid {
        grid-template-columns: repeat(1,minmax(0,1fr));
      }

    }
    @media(min-width:768px){
      header.sitio-header{margin-bottom:1.5rem}
      .nav-toggle{order:2}
      nav.sitio-nav{display:block}
      nav.sitio-nav ul{flex-direction:row}
      nav.sitio-nav a{padding:8px 12px}
      .panel-movil{display:none}

      main{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1rem;
        width: 100vw;
        max-width: 100%;
        margin: 0;
        padding: 0;
      }
      .principal{
        grid-column:1/3;
        align-items:flex-start;
        padding: 1rem;
        height: unset;
        padding-bottom: 5rem;
      }
      .grid{grid-template-columns:repeat(1,1fr)}
      .caja{
        max-width: 85%;
        width: 100%;
      }
      .caja > .infogrid {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }

    }

    @media(min-width:1100px){
      .grid{grid-template-columns:repeat(1,1fr)}
      .principal{
        padding: 1rem;
        height: 100vh;
      }
      .caja > .infogrid {
        grid-template-columns: repeat(4,minmax(0,1fr));
      }

    }

    /* extras */

    
    .btn{
      display:inline-block;
      border: none;
      border-radius:8px;
      text-decoration:none;
      background:var(--accent);
      color:var(--pcolor);
      font-weight:600;

      font-size: 1.125rem;
      padding: 0.7rem 2rem;
      margin: 1rem 0 0 0;

      transition-duration: .3s;
    }
    .btn:hover{
      background-color: #e45b00;
    }
    .formaContacto div{
      margin: 0 0 0.75rem 0;
    }

    .formaContacto div label{
      font-size: 0.85rem;

    }

    input, textarea{
      font-size: .875rem;
      line-height: 1.25rem;
      padding-top: .75rem;
      padding-bottom: .75rem;

      padding-left: 1rem;
      padding-right: 1rem;
      border-width: 1px;
      border-radius: .5rem;
      width: 100%;
      border: solid 1px #c8ccd3;
    }
    .nota{
      font-size: .83rem!important;
      font-style: italic;
    }