* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing:border-box ;
    -moz-box-sizing:border-box ;
    box-sizing:border-box;
}
body{
    background-color: #ffa45d;
    margin-top: 80px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
}


.nombre-main h1 {
    color: rgb(255, 255, 255);
    top: 18px;
    font-family:system-ui;
    text-transform: uppercase;
    font-size: 42px;
    filter: drop-shadow(-4px 2px 4px rgba(0, 0, 0, 0.41));
}

h2 {
    color: rgb(255, 255, 255);
    top: 12px;
    font-family:system-ui;
    text-transform: uppercase;
    font-size: 32px;
    filter: drop-shadow(-4px 2px 4px rgba(0, 0, 0, 0.41));
}
/* Menu en general*/
.menu {
    -webkit-box-shadow:1px 13px 44px 6px rgba(62,66,66,0.34);
    -moz-box-shadow: 1px 13px 44px 6px rgba(62,66,66,0.34);
    box-shadow: 1px 13px 44px 6px rgba(62,66,66,0.34);  
    position: fixed;
    background-position: left top;
    z-index: 1000;
    top:0;
    list-style: none;
    padding: 0%;
    background: rgb(250, 251, 242);
    background-blend-mode: overlay;
    background-size: cover;
    width: 100%;
    max-width: cover;
    margin: left;
    top: 0px;
    display: flex;
}   
.menu li a {
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    padding: 20px;
    display: block;
    margin-left: auto;
}
.menu li {
    font-family:system-ui;
    font-weight: bold;
    display: inline-block;
    text-align: center;
}
.menu li a:hover {
    background: rgb(252, 220, 124);
}
.texto-botón {
    margin-top: 20px;
}

footer {
    color: aliceblue;
    background-color: #b82310;
    background-size: cover;
    padding: 1em 0;
    text-align: center;
    margin-top: auto;
    bottom: 0;
    


}
footer ul li {
    margin: 60px;
    display: inline-block;
}
footer h2 {
    font-size: 25px;
}
section{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: 400px;
    padding: 300px 20vw;
    font-family: system-ui;
}
.naranja{
    background-color: rgb(157, 120, 104);
    background-image: url("https://e.rpp-noticias.io/xlarge/2016/12/11/534653_306020.png");
    background-blend-mode: multiply;
    background-size: cover;
    
}
.rojo{
    background-color: rgb(105, 112, 132);
    background-image: url("https://images.unsplash.com/photo-1588581939864-064d42ace7cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-blend-mode: multiply;
    background-size: cover;
}

.publicando {
    background-color: rgb(105, 112, 132);
    background-image: url("https://images.unsplash.com/photo-1592819695396-064b9572a660?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-blend-mode: multiply;
    background-size: cover;
}

.misión {
    background-color: rgb(105, 112, 132);
    background-image: url("https://larepublica.cronosmedia.glr.pe/migration/images/2VUAPOLTDZHT3OSDS42OWRQW2Q.jpg");
    background-blend-mode: multiply;
    background-size: cover;
}

.valores {
    background-color: rgb(105, 112, 132);
    background-image: url("https://images.unsplash.com/photo-1570460147789-4e2e622bbb25?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-blend-mode: multiply;
    background-size: cover;
}
.descripción {
    background-color: rgb(105, 112, 132);
    background-image: url("https://imgmedia.larepublica.pe/640x377/larepublica/migration/images/RB6AHZBVWBAODESJGZ6ZFUGCCE.webp");
    background-blend-mode: multiply;
    background-size: cover;
}
.obras-principales {
    background-color: rgb(105, 112, 132);
    background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-blend-mode: multiply;
    background-size: cover;
}
.cover-misión {
    background-color: rgb(243, 170, 93);
    background-blend-mode: multiply;
    background-size: cover;
}
.fuente-somos h1 {
    font-family: system-ui;
    font-size: 80px;
    color: azure;
}
.fuente-somos p {
    font-family: system-ui;
    font-size: 25px;
    color: azure;
}
.fuente-somos li {
    font-family: system-ui;
    font-size: 25px;
    color: azure;
}
.img-admision{
    display: block;
    margin: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
.img-admision2{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.inscripción {
    
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 1000;
    border-radius: 10px;
    margin-top: 800px;
    padding: 15px 30px;
    background-color: #b82310;
    color: #fff;
    text-decoration: none;
    
}
.inscripción:hover{
    background-color:  #690707;
    border: 1px solid  #f1eef5;
    color: rgb(246, 242, 242);
}


.flex-container {
    display:flex;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: center;
    background-color: rgb(232, 216, 195);
    padding: 40px;
}

.flex-container div{
    width: 350px;
    margin: 10px;
    text-align: center;
    align-items: center;
    line-height: 100px;
    font-size: 30px;
}
.flex-container2 {
    display:flex;

    flex-direction: row;
    align-content: space-around;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.flex-container2 div{
    width: 550px;
    margin: 100px;
    text-align: center;
    line-height: 75px;
}

/* From uiverse.io by @satyamchaudharydev */
/* removing default style of button */

.form button {
    border: none;
    background: none;
    color: #8b8ba7;
  }
  /* styling of whole input container */
  .form {
    --timing: 0.3s;
    --width-of-input: 200px;
    --height-of-input: 40px;
    --border-height: 2px;
    --input-bg: #fff;
    --border-color: #2f2ee9;
    --border-radius: 30px;
    --after-border-radius: 1px;
    position: relative;
    width: var(--width-of-input);
    height: var(--height-of-input);
    display: flex;
    align-items: center;
    padding-inline: 0.8em;
    border-radius: var(--border-radius);
    transition: border-radius 0.5s ease;
    background: var(--input-bg,#fff);
  }
  /* styling of Input */
  .input {
    font-size: 0.9rem;
    background-color: transparent;
    width: 100%;
    height: 100%;
    padding-inline: 0.5em;
    padding-block: 0.7em;
    border: none;
  }
  /* styling of animated border */
  .form:before {
    content: "";
    position: absolute;
    background: var(--border-color);
    transform: scaleX(0);
    transform-origin: center;
    width: 100%;
    height: var(--border-height);
    left: 0;
    bottom: 0;
    border-radius: 1px;
    transition: transform var(--timing) ease;
  }
  /* Hover on Input */
.form:focus-within {
    border-radius: var(--after-border-radius);
  }
  
  input:focus {
    outline: none;
  }
  /* here is code of animated border */
  .form:focus-within:before {
    transform: scale(1);
  }
  /* styling of close button */
  /* == you can click the close button to remove text == */
  .reset {
    border: none;
    background: none;
    opacity: 0;
    visibility: hidden;
  }
  /* close button shown when typing */
  input:not(:placeholder-shown) ~ .reset {
    opacity: 1;
    visibility: visible;
  }
  /* sizing svg icons */
  .form svg {
    width: 17px;
    margin-top: 3px;
  }

  .main {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-left: auto;
    margin-right: auto;
    width: 80;
  }
  
  .up {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }
  
  .down {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }
  
  .card1 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: rgb(255, 255, 255);
    border-radius: 90px 5px 5px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .instagram {
    margin-top: 1.5em;
    margin-left: 1.2em;
    fill: #cc39a4;
  }
  
  .card2 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 90px 5px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .twitter {
    margin-top: 1.5em;
    margin-left: -.9em;
    fill: #03A9F4;
  }
  
  .card3 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 5px 90px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .github {
    margin-top: -.6em;
    margin-left: 1.2em;
  }
  
  .card4 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 90px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }

  
  
  .facebook {
    margin-top: -.9em;
    margin-left: -1.2em;
    fill: #0b2dee;
  }
  
  .card1:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #cc39a4;
  }
  
  .card1:hover .instagram {
    fill: white;
  }
  
  .card2:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #03A9F4;
  }
  
  .card2:hover .twitter {
    fill: white;
  }
  
  .card3:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: black;
  }
  
  .card3:hover .github {
    fill: white;
  }
  
  .card4:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #0024ee;
  }
  
  .card4:hover .facebook{
    fill: white;
  }

  .svg-frame {

    position: relative;
    height: 300px;
    transform-style: preserve-3d;
    display: block;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    width: 50%;
  }
  
  .svg-frame svg {

    position: absolute;
    transition: .5s;
    z-index: calc(1 - (0.2 * var(--j)));
    transform-origin: center;
    width: 344px;
    height: 344px;
    fill: none;
  }
  
  .svg-frame:hover svg {
    transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
  }
  
  .svg-frame svg #center {
    transition: .5s;
    transform-origin: center;
  }
  
  .svg-frame:hover svg #center {
    transform: rotate(-30deg) translateX(45px) translateY(-3px);
  }
  
  #out2 {
    animation: rotate16 7s ease-in-out infinite alternate;
    transform-origin: center;
  }
  
  #out3 {
    animation: rotate16 3s ease-in-out infinite alternate;
    transform-origin: center;
    stroke: #ff0;
  }
  
  #inner3,
  #inner1 {
    animation: rotate16 4s ease-in-out infinite alternate;
    transform-origin: center;
  }
  
  #center1 {
    fill: #ff0;
    animation: rotate16 2s ease-in-out infinite alternate;
    transform-origin: center;
  }

  
  
  @keyframes rotate16 {
    to {
      transform: rotate(360deg);
    }
  }




  button {
    position: relative;
    width: 11em;
    height: 4em;
    outline: none;
    transition: 0.1s;
    background-color: transparent;
    border: none;
    font-size: 13px;
    font-weight: bold;
    color: #000203;
  }
  
  #clip {
    --color: #d67607;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 5px double var(--color);
    box-shadow: inset 0px 0px 15px #d18a5a;
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }
  
  .arrow {
    position: absolute;
    transition: 0.2s;
    background-color: #d67607;
    top: 35%;
    width: 11%;
    height: 30%;
  }
  
  #leftArrow {
    left: -13.5%;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
  }
  
  #rightArrow {
    -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
    clip-path: polygon(100% 49%, 0 0, 0 100%);
    left: 102%;
  }
  
  button:hover #rightArrow {
    background-color: #27c39f;
    left: -15%;
    animation: 0.6s ease-in-out both infinite alternate rightArrow8;
  }
  
  button:hover #leftArrow {
    background-color: #27c39f;
    left: 103%;
    animation: 0.6s ease-in-out both infinite alternate leftArrow8;
  }
  
  .corner {
    position: absolute;
    width: 4em;
    height: 4em;
    background-color: #d67607;
    box-shadow: inset 1px 1px 8px rgb(226, 156, 77);
    transform: scale(1) rotate(45deg);
    transition: 0.2s;
  }
  
  #rightTop {
    top: -1.98em;
    left: 91%;
  }
  
  #leftTop {
    top: -1.96em;
    left: -3.0em;
  }
  
  #leftBottom {
    top: 2.10em;
    left: -2.15em;
  }
  
  #rightBottom {
    top: 45%;
    left: 88%;
  }
  
  button:hover #leftTop {
    animation: 0.1s ease-in-out 0.05s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
  }
  
  button:hover #rightTop {
    animation: 0.1s ease-in-out 0.15s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
  }
  
  button:hover #rightBottom {
    animation: 0.1s ease-in-out 0.25s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
  }
  
  button:hover #leftBottom {
    animation: 0.1s ease-in-out 0.35s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
  }
  
  button:hover .corner {
    transform: scale(1.25) rotate(45deg);
  }
  
  button:hover #clip {
    animation: 0.2s ease-in-out 0.55s both greenLight8;
    --color: #27c39f;
  }
  
  @keyframes changeColor8 {
    from {
      background-color: #2781c3;
    }
  
    to {
      background-color: #27c39f;
    }
  }
  
  @keyframes lightEffect8 {
    from {
      box-shadow: 1px 1px 5px #27c39f;
    }
  
    to {
      box-shadow: 0 0 2px #27c39f;
    }
  }
  
  @keyframes greenLight8 {
    from {
    }
  
    to {
      box-shadow: inset 0px 0px 32px #27c39f;
    }
  }
  
  @keyframes leftArrow8 {
    from {
      transform: translate(0px);
    }
  
    to {
      transform: translateX(10px);
    }
  }
  
  @keyframes rightArrow8 {
    from {
      transform: translate(0px);
    }
  
    to {
      transform: translateX(-10px);
    }
  }
  .loader {
    --path: #2f3545;
    --dot: #5628ee;
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
  }
  
  .loader:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .loader svg rect, .loader svg polygon, .loader svg circle {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  
  .loader svg polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader svg rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader svg circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader.triangle {
    width: 48px;
  }
  
  .loader.triangle:before {
    left: 21px;
    transform: translate(-10px, -18px);
    animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  @keyframes pathTriangle {
    33% {
      stroke-dashoffset: 74;
    }
  
    66% {
      stroke-dashoffset: 147;
    }
  
    100% {
      stroke-dashoffset: 221;
    }
  }
  
  @keyframes dotTriangle {
    33% {
      transform: translate(0, 0);
    }
  
    66% {
      transform: translate(10px, -18px);
    }
  
    100% {
      transform: translate(-10px, -18px);
    }
  }
  
  @keyframes pathRect {
    25% {
      stroke-dashoffset: 64;
    }
  
    50% {
      stroke-dashoffset: 128;
    }
  
    75% {
      stroke-dashoffset: 192;
    }
  
    100% {
      stroke-dashoffset: 256;
    }
  }
  
  @keyframes dotRect {
    25% {
      transform: translate(0, 0);
    }
  
    50% {
      transform: translate(18px, -18px);
    }
  
    75% {
      transform: translate(0, -36px);
    }
  
    100% {
      transform: translate(-18px, -18px);
    }
  }
  
  @keyframes pathCircle {
    25% {
      stroke-dashoffset: 125;
    }
  
    50% {
      stroke-dashoffset: 175;
    }
  
    75% {
      stroke-dashoffset: 225;
    }
  
    100% {
      stroke-dashoffset: 275;
    }
  }
  
  .loader {
    display: inline-block;
    margin: 0 16px;
  }
  

  /* Botones */
  .libros-lista { list-style: none; padding: 0; margin: 0; }
  .libro-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #eee; }
  .btn-comprar {
    cursor:pointer; border:none; padding:8px 14px; border-radius:6px;
    background:#c8102e; color:#fff; font-weight:600;
  }
  .btn-comprar:hover { opacity:.9; }

  .modal-pago { display:none; position:fixed; inset:0; z-index:1000; }
  .modal-pago.activo { display:block; }
  .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
  .modal-dialog {
    position:relative; margin:40px auto; background:#fff; width:min(900px, 92vw);
    border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25); padding:16px 16px 12px;
    max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
  }
  .modal-cerrar {
    position:absolute; top:8px; right:10px; width:32px; height:32px; border:none; border-radius:50%;
    background:#f1f1f1; font-size:20px; cursor:pointer; line-height:32px;
  }
  .modal-titulo { margin:6px 8px 12px; font-size:18px; }
  .modal-iframe { border:0; width:100%; height:70vh; background:#fafafa; }
  .modal-nota { padding:8px; font-size:13px; text-align:right; }
  /* Evitar scroll del body cuando el modal esté activo */
  body.modal-abierto { overflow:hidden; }