@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&family=Pacifico&display=swap');
.pacifico-regular {
  /*font-family: "Pacifico", cursive;*/
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
}

.esconder{
  display: none!important;
}
    /* === Movil CSS === */
    
    
    /* VARIABLES GENERALES!!*/

    :root{ /* accesos directos ej. .CLASE{ atributo: var(--algunadelasvariablessiguientes) }*/
      --bg:#FFFFFF;
      --caja:#ffffff;
      --cajagrid:#ffffff;
      --accent:#f97316;
      --azul: #2563eb;
      --muted:#4e535c;
      --pcolor:#FFFFFF;
      --parse:#f0f3f7;
      --radius:10px;
      --radius-main:0;
      --gap:0rem;
      --aches:#111827;
      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: 3rem;
      text-align: left;
    }
    .centrar{
     text-align:center;
     margin: 0;
    }
    .spacer{
      display: block;
      height: 2.5rem;
      width: 100%;
    }
    .muted{
      color:var(--muted)
    }
    .imagen-sombra{
      box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25);
      -webkit-box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25);
      -moz-box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25);
    }
    .caja-sombra{
      box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
      -webkit-box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    }
    .redondear{
      border-radius: 1.0rem;
    }
    .imagencien{
      width: 100%;
    }

    /* 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;
      position: sticky;
      top:0px;
      background: #ffffff;
      padding: 0 1rem 0 0;

    }
    .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);
      display: none;
    }
    .titulo-sitio{
      font-size:2rem;
      font-weight:600;
      color: #2563eb;
      margin: 0.5rem 0 0 1.5rem;
      display: inline-block;
    }
    .sub-titulo{
      font-size:1rem;
      color:var(--muted);
      display: inline-block;
      font-weight: bold;
      margin: 0 0 0 1.8rem;
      
    }

    .panel-movil nav a{ color: var(--muted)!important;}
    .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{
      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(0, 53, 151, 0.4), rgba(0, 37, 112, 0.6)), 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: left;
      width: 100vw;
      height: 100vh;
    }
    .principal h1{
      margin:4rem auto 1rem 3rem;
      font-size:4rem;
      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 0 3rem;
      color:var(--pcolor);
      font-size: 1.5rem;
     
    }
    .parse{
      background-color: var(--parse)!important;
      max-width: 100%!important;
      padding: 4rem 7.5%!important;
    }

    .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:0.75rem;
      margin-top:0.75rem;
      width: 100vw;
    }
    .mapagrid{
      display: grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap: 2rem;
    }
    .mapagrid div span{
      text-align: center;
      font-size: 2rem;
      line-height: 2rem;
      text-align: center;
  
      display: block;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      max-width: 4rem;
      margin: 1rem auto 2rem auto;
      padding: 0.8rem 0 0 0;

    }

    .mapagrid div:nth-child(1) span{
      background: #dbeafe;
      color:#2563eb;
    }
    .mapagrid div:nth-child(2) span{
      background: #ffedd5;
      color:#ea580c;
    }
    .mapagrid div:nth-child(3) span{
      background: #fee2e2;
      color:#dc2626;
    }


    .iconcation div:nth-child(3) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0;}
    .iconcation div:nth-child(3) span{
      background: #dbeafe;
      color: #2563eb;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.3rem 0 0 0.6rem;
      display: inline-block;
      width: 2.5rem;
      vertical-align: middle;
    }
    .iconcation div:nth-child(4) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0;}
    .iconcation div:nth-child(4) span{
      background: #ffedd5;
      color: #ea580c;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.3rem 0 0 0.6rem;
      display: inline-block;
      width: 2.5rem;
      vertical-align: middle;
    }
    .iconcation div:nth-child(5) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0;}
    .iconcation div:nth-child(5) span{
      background: #fee2e2;
      color: #dc2626;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.3rem 0 0 0.6rem;
      display: inline-block;
      width: 2.5rem;
      vertical-align: middle;
    }
    .iconcation div:nth-child(6) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0;}
    .iconcation div:nth-child(6) span{
      background: #dcfce7;
      color: #16a34a;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.3rem 0 0 0.6rem;
      display: inline-block;
      width: 2.5rem;
      vertical-align: middle;
    }

    .icontacto a{
      color: var(--muted)!important;
    }
    .icontacto div:nth-child(1) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0; font-size: 1rem;}
    .icontacto div:nth-child(1) span{
      background: #dbeafe;
      color: #2563eb;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.6rem 0.5rem 0.5rem 0.8rem;
      display: inline-block;
      width: 3rem;
      vertical-align: middle;
    }
    .icontacto div:nth-child(2) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0; font-size: 1rem;}
    .icontacto div:nth-child(2) span{
      background: #ffedd5;
      color: #ea580c;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.6rem 0.5rem 0.5rem 0.8rem;
      display: inline-block;
      width: 3rem;
      vertical-align: middle;
    }
    .icontacto div:nth-child(3) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0; font-size: 1rem;}
    .icontacto div:nth-child(3) span{
      background: #dcfce7;
      color: #16a34a;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.6rem 0.5rem 0.5rem 0.8rem;
      display: inline-block;
      width: 3rem;
      vertical-align: middle;
    }
    .icontacto div:nth-child(4) div{ display: inline-block; vertical-align: bottom; line-height: 110%; margin: 0 0 1rem 0; font-size: 1rem;}
    .icontacto div:nth-child(4) span{
      background: #fee2e2;
      color: #dc2626;
      border-radius: 100%;
      aspect-ratio: 1 /1;
      margin: 0 0.5rem 1rem 0;
      padding: 0.6rem 0.5rem 0.5rem 0.8rem;
      display: inline-block;
      width: 3rem;
      vertical-align: middle;
    }
    


    .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: #dbeafe;
      color:#2563eb;
    }
    .caja>.infogrid div:nth-child(3) span{
      background: #dbeafe;
      color:#2563eb;
    }
    .caja>.infogrid div:nth-child(4) span{
      background: #dbeafe;
      color:#2563eb;
    }
    .caja>.infogrid h3{
      color: var(--aches);
      text-align: center;
    }
    .caja>.infogrid li{
      margin: 0 0 0.7rem 0;
    }
    .caja>.infogrid li::marker {
      color: var(--accent);
    }
    .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;
    }
    .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){
            #menuBoton{
        display: none;
      }
      header.sitio-header{margin-bottom:0.0rem}
      .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(--azul);
      color:var(--pcolor);
      font-weight:600;

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

      transition-duration: .3s;
    }
    .btn:hover{
      color: #FFFFFF;
      background-color: #1d4ed8;
    }
    .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;
    }
    .logo-pie{
      color: #fb923c;
      font-family: 'Times New Roman', Times, serif;
      font-size: 1.5rem;
      max-height: 8rem;
    }
    table{
       border-collapse: collapse;
      min-width: 50%;
      width: 100%;
      display: table-cell;
      border: solid 1px gray;
    }
    th, td{
      padding: 1rem;
      border: solid 1px gray;
    }
    th{
      background: var(--muted);
      color: white;
      font-weight: bold;
    }
    td{
      text-align: left;
    }
    .logoSuperior{
      width: auto;
      height: 1.5em;
    }