/* General scale factor: 0.83 (ajuste visual respecto a Figma) */

:root {
  --space-single: 1.25rem;
  --space-double: 2.5rem;
  --single-mobile: 1rem;
  --double-mobile: 2rem;
  --blanco: #f0f6ff;
  --celeste-fondo: #b8cfe8;
  --celeste-gris: #c8dcf5;
  --celeste-brillante: #9abbe2;
  --celeste-fuerte: #4a9fd4;
  --azul-logo: #0367a6;
  --azul-oscuro: #03588c;
  --azul-marino: #2f4a63;
  --azul-negro: #1f2937;
  --negro: #0d0d0d;
  --footer: #DCE8F8;
}

/* Reset CSS */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0!important;
  font-family: Arial, sans-serif;
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.post,
.page {
  margin: 0;
}

p {
  line-height: 1.5;
}

.container {
  max-width: calc(100% - 160px);
  padding: 0;
}

.flecha-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


/* GRID FIGMA: 12 COL / MARGIN 80 / GUTTER 24 */
/*@media (min-width: 992px) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 80px;
    width: calc(100% - 160px);
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(to right,
        rgba(255, 0, 0, 0.15) 0,
        rgba(255, 0, 0, 0.15) calc((100% - (11 * 24px)) / 12),
        transparent calc((100% - (11 * 24px)) / 12),
        transparent calc(((100% - (11 * 24px)) / 12) + 24px));
  }
}
*/
/* 
@media (max-width: 768px) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 16px;
    width: calc(100% - 32px);
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(to right,
        rgba(255, 0, 0, 0.15) 0,
        rgba(255, 0, 0, 0.15) calc((100% - (3 * 16px)) / 4),
        transparent calc((100% - (3 * 16px)) / 4),
        transparent calc(((100% - (3 * 16px)) / 4) + 16px));
  }
}
*/
/* ========================= */
/* HEADER */
/* ========================= */
header {
  padding: var(--space-single) 0;
  background-color: var(--blanco);
  border-bottom: 4px solid var(--azul-logo);
  position: sticky;
  top: 0;
  z-index: 1000;

  nav {
    a {
      font-size: 1.3rem;
      color: var(--negro);
      text-decoration: none;
      font-weight: bold;
            &:visited{
        color: var(--negro);
      }
      &:hover {
        color: var(--azul-logo);
        text-decoration: underline;
      }

    }
  }
}

@media (max-width: 767px) {
  header {
    padding: 0!important;

    #menuNav {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: var(--blanco);
      border-bottom: 4px solid var(--azul-logo);
      z-index: 999;
    }

    .custom-container {
      max-width: 100%;
      width: 100%;
      margin: 0;
      padding: 0 16px;

      .hamburguesa {
        border: none;
        outline: none;
        background: transparent;
        box-shadow: none;
        padding-right: var(--single-mobile);

        &:focus {
          outline: none;
          box-shadow: none;
        }

        i {
          font-size: 2.5rem;
          transition: all 0.3s ease;
        }
         &[aria-expanded="true"] i {
        &::before {
          content: "\F659"; /* código Bootstrap Icons para X */
        }
      }
      }

      nav {
        ul{
        margin: 0 !important;
        padding: 0 !important;
          li {
          width: 100%;
          text-align: center;
          border-bottom: 2px solid var(--azul-logo);

          &:last-child {
            border-bottom: none;
          }

          a {
            display: block;
            width: 100%;
            padding: var(--single-mobile) 0;
            font-weight: bold;
          }
        }
        }
        
      }
    }
  }
}

/* ========================= */
/* MAIN */
/* ========================= */
main {
  section.hero-carrusel {
    .carousel-inner {
      .fondo-carrusel {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, var(--blanco), var(--celeste-fondo));

        .container-fluid,
        .row,
        .col-12 {
          height: 100%;
        }

        img {
          width: 100%;
          height: 100%;
          max-height: 80vh;
          object-fit: contain;
        }
      }
    }
  }

  @media (max-width: 767px) {
    section.hero-carrusel {
      .carousel-inner {

        .fondo-carrusel {
          height: 40vh;
          padding: 0;
        }

        .fondo-carrusel-1 {
          h2 {
            margin-top: var(--single-mobile);
            font-size: 2rem;
            /*Valor mayor. Original: 1.8rem*/
            color: var(--azul-marino);
          }

          p {
            font-size: 1.3rem;
            /*Valor mayor. Original: 1.125rem*/
            margin-top: var(--single-mobile);
            margin-bottom: 0;
          }
        }

        .container {
          max-width: none;

          .row {
            justify-content: center !important;
            text-align: center;

            .logo {
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 90vw;
                max-width: 90vw;
                margin: 0 auto;
                display: block;
              }
            }
          }
        }
      }
    }
  }

  section.servicios {
    padding: var(--space-double) 0;

    h2 {
      text-decoration: underline var(--azul-logo);
      text-underline-offset: 8px;
      font-size: 2.3rem;
      /*Valor menor. Original: 2.8rem*/
      margin-bottom: var(--space-double);
    }

    article {
      padding: var(--space-single);
      border-top: 4px solid var(--azul-logo);
      border-radius: 8px 8px 0 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.364);
      max-width: 32%;

      i {
        font-size: 3.1rem;
        /*Valor menor. Original: 3.8rem*/
        display: inline-flex;
        overflow: hidden;
        border: var(--negro) 4px solid;
        border-radius: 100px;
      }

      h3 {
        margin: var(--space-single) 0;
        font-size: 1.4rem;
        /*Valor menor. Original: 1.7rem*/
      }

      p {
        font-size: 1.1rem;
        /*Valor menor. Original: 1.3rem*/
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: 767px) {
    section.servicios {
        padding-top: 0;
      .container {
        max-width: 85%;

        h2 {
          margin-top: var(--double-mobile);
          font-size: 2rem;
          text-underline-offset: 6px;
        }

        .servicios-grid {
          article {
            max-width: 100%;
            padding: var(--single-mobile);

            i {
              font-size: 3.5rem;
            }

            h3 {
              font-size: 1.8rem;
              /*Valor aumentado: original 1.5*/
            }

            p {
              font-size: 1.2rem;
              /*Valor aumentado: original 1*/
            }
          }
        }
      }
    }
  }

  section.abogada {
    padding: var(--space-double) 0;
    background: linear-gradient(0deg, var(--blanco), var(--celeste-fondo));

    img {
      border-radius: 0 250px 250px 0;
      border: 4px solid transparent;
      background:
        linear-gradient(white, white) padding-box,
        linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
      border-left: 0;
    }

    .informacion {
      margin-left: calc(var(--space-double) + var(--space-single));

      h2 {
        font-size: 2.2rem;
        color: var(--azul-oscuro);
        margin: 0;

        span {
          color: var(--negro);
        }
      }

      p {
        color: var(--azul-negro);
        font-size: 1.1rem;
        /*Valor menor. Original: 1.25rem*/
        padding-top: var(--space-single);
        margin: 0;
      }

      a.academico {
        display: block;
        width: fit-content;
        margin: var(--space-single) auto 0;
        background-color: var(--azul-logo);
        color: var(--blanco);
        padding: var(--single-mobile);
        border-radius: 5px;
        text-decoration: none;
      }
    }
  }

  @media (max-width: 767px) {
    section.abogada {
      padding: var(--double-mobile) var(--single-mobile);

      .container-fluid {
        img {
          border-radius: 250px;
          border: 4px solid transparent;
        }

        .informacion {
          padding: var(--single-mobile) 0;
          margin-left: 0;

          h2 {
            font-size: 1.6rem;
            text-align: center;
            color: var(--azul-oscuro);
            margin: 0;

            span {
              color: var(--negro);
            }
          }

          p {
            color: var(--azul-negro);
            font-size: 1.3rem;
            /*Valor menor. Original: 1.25rem*/
            padding-top: var(--space-single);
            margin: 0;
          }
        }
      }
    }
  }

section.testimonios {
    padding: var(--space-double) 0;

    h2 {
        text-decoration: underline var(--azul-logo);
        text-underline-offset: 8px;
    }

    button {
        i {
            font-size: 4.5rem;
            color: var(--celeste-fuerte);
        }
    }

    img {
        aspect-ratio: 1 / 1;
        max-width: 90%;
        position: relative;
        transform: translateX(4.5rem);
        z-index: 2;
    }

    .carrusel-container {
        overflow: hidden;
        position: relative;
        display: grid;

        article {
            grid-area: 1 / 1;
            transition: transform 0.4s ease;

            &[hidden] {
                display: block;
                visibility: hidden;
                pointer-events: none;
            }

            &.saliendo-izq {
                transform: translateX(-100%);
                visibility: visible;
            }

            &.saliendo-der {
                transform: translateX(100%);
                visibility: visible;
            }
        }
    }

    .testimonio {
        --overlap: 16%;
        transform: translateX(calc(-1 * var(--overlap)));
        height: 100%;
        box-sizing: border-box;
        border: 10px solid transparent;
        background:
            linear-gradient(white, white) padding-box,
            linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
        padding: var(--space-single) var(--space-single) var(--space-single) calc(var(--space-single) * 8.5);
        z-index: 1;
        position: relative;
    }
}

@media (max-width: 767px) {

    section.testimonios {
        padding: 0 var(--single-mobile);

        .flechas {
            gap: 5rem !important;

            button {
                i {
                    font-size: 6rem;
                    color: var(--celeste-fuerte);
                }
            }
        }

        .container {
            max-width: 100%;

            h2 {
                font-size: 2.5rem;
            }

            .carrusel-container {
                overflow: visible;
                position: relative;
                display: grid;

                article {
                    grid-area: 1 / 1;
                    transition: transform 0.4s ease;

                    &[hidden] {
                        display: block;
                        visibility: hidden;
                        pointer-events: none;
                    }

                    &.saliendo-izq {
                        transform: translateX(-100%);
                        visibility: visible;
                    }

                    &.saliendo-der {
                        transform: translateX(100%);
                        visibility: visible;
                    }

                    .foto {
                        position: relative;
                        top: unset;
                        left: unset;
                        transform: none;
                        z-index: 2;
                        padding: 0;
                        display: flex;
                        justify-content: center;
                        

                        img {
                            min-width: 100%;
                            aspect-ratio: 1 / 1;
                            object-fit: cover;
                            right: 19%;
                        }
                    }
                }

                .texto {
                    padding: 0 !important;
                    margin-top: -10rem;
                    .testimonio {
                        width: 100%;
                        transform: none;
                        padding: calc(var(--double-mobile) * 5.5) var(--single-mobile) var(--single-mobile);
                        border: 10px solid transparent;
                        background:
                            linear-gradient(white, white) padding-box,
                            linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;

                        h3 {
                            font-size: 1.2rem;
                            color: var(--azul-oscuro);
                            padding-bottom: var(--single-mobile);
                        }

                        p {
                            font-size: 1.3rem;
                        }
                    }
                }
            }
        }
    }
}

section.novedades {
    padding-top: calc(var(--space-double) * 2);
    padding-bottom: var(--space-double);
    background: linear-gradient(180deg, var(--blanco), var(--celeste-fondo));

    h2 {
        margin-bottom: var(--space-double);
        font-size: 2.3rem;
        text-decoration: underline var(--azul-logo);
        text-underline-offset: 8px;
    }

    &>a {
        display: flex;
        justify-self: end;
        background-color: var(--azul-oscuro);
        color: var(--blanco);
        padding: 0.8rem 1rem;
        margin-bottom: var(--space-single);
        font-size: 1.25rem;
    }

    img.imagen-novedades:hover {
        filter: brightness(70%);
    }

.col-md-4 {
    .d-flex {
        height: 100%;

        a {
            flex: 1 1 0;


            img.imagen-novedades {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
            }
        }
    }
}

    .noticias {
        max-height: calc(2.5 * (120vh / 3));
        overflow-y: auto;
        direction: rtl;
        margin-left: calc(var(--space-double) + var(--space-single));

        &::-webkit-scrollbar {
            width: 8px;
            background: var(--azul-negro);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--celeste-fuerte);
        }

        &::-webkit-scrollbar-thumb:hover {
            background: var(--azul-logo);
        }

        article {
            padding: var(--space-single);
            margin-bottom: var(--space-double);
            direction: ltr;
            margin-left: var(--space-single);
            border: 4px solid transparent;
            background:
                linear-gradient(white, white) padding-box,
                linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;

            .etiquetas {
                p {
                    background-color: var(--celeste-gris);
                    padding: 0.5rem;
                    font-weight: 600;
                    margin-bottom: var(--space-single);
                }
            }

            h3 {
                font-size: 1.2rem;
                font-weight: 600;
                margin-bottom: var(--space-single);
            }

            a {
                color: var(--blanco);
                background-color: var(--azul-logo);
                font-weight: 600;
                padding: 0.5rem;
                align-self: flex-start;
                text-decoration: none;
                margin: 0;

                &:hover {
                    text-decoration: underline;
                    background-color: var(--azul-marino);
                }
            }
            a.enlace-titulo{
                background-color: transparent;
                color: var(--azul-marino);
                padding-left: 0;
            }

            img {
                width: 38%;
                min-width: 38%;
                aspect-ratio: 1 / 1;
                object-fit: contain;
                border: 4px solid transparent;
                background:
                    linear-gradient(white, white) padding-box,
                    linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
                margin-right: var(--space-single);
            }
        }
    }
}

@media (max-width: 767px) {
    section.novedades {
        padding-top: var(--double-mobile);
        padding-bottom: var(--double-mobile);
        margin-top: var(--space-double);

        h2 {
            font-size: 2.3rem;
            margin-bottom: var(--double-mobile);
            padding: 0 var(--single-mobile);
        }

        &>a {
            display: flex;
            justify-self: end;
            background-color: var(--azul-oscuro);
            color: var(--blanco);
            padding: 0.8rem 1rem;
            margin-bottom: var(--single-mobile);
            font-size: 1.25rem;
        }

        .container {
            max-width: 92%;

            .noticias {
                margin-left: 0;
                direction: ltr;
                max-height: none;
                overflow: hidden;

                article {
                    flex-direction: column;
                    margin-left: 0;
                    margin-bottom: var(--single-mobile);

                    img {
                        width: 100%;
                        min-width: 100%;
                        aspect-ratio: 5 / 4;
                        margin-bottom: var(--single-mobile);
                    }

                    h3 {
                        font-size: 1.5rem;
                        color: var(--azul-logo);
                        text-decoration: underline;
                    }

                    a.leer-mas {
                        display: none;
                    }
                    a.enlace-titulo{
                        background-color: transparent;
                        color: var(--azul-marino);
                    }
                }
            }
        }
    }
}

section.medios {
  margin: var(--space-double) 0;

  h2 {
    font-size: 2.3rem;
    text-decoration: underline var(--azul-logo);
    text-underline-offset: 8px;
    margin-bottom: var(--space-double);
  }

  .row {
    gap: var(--space-single);
  }

  article {
    position: relative;
    padding: var(--space-single);
    border: 4px solid transparent;
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
    max-width: 100%;
    overflow: hidden;

    img {
      width: 100%;
      min-width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
    }

    a {
      position: absolute;
      inset: auto 0 0;
      height: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: #0368a69b;
      text-decoration: underline var(--blanco);
      backdrop-filter: blur(2px);
      padding: 1rem;

      h3 {
        margin: 0;
        color: white !important;
      }
    }
  }

  @media (min-width: 768px) {
    article {
      max-width: 30%;
    }
  }

  .boton {
    a {
      margin: var(--space-single) 0;
      background-color: var(--celeste-gris);
      font-size: 1.2rem;
      padding: 0 1.8rem;
      color: var(--negro);
      text-decoration: none;
    }
  }
}

  @media (max-width: 767px) {
    section.medios {
      margin-bottom: var(--single-mobile);

      .container {
        max-width: 85%;

        article {
          position: relative;
          padding: 0;
          overflow: hidden;

          img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
          }

          a {
            position: absolute;
            inset: auto 0 0;
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #0368a69b;
            text-decoration: underline var(--blanco);
            backdrop-filter: blur(2px);

            h3 {
              color: white !important;
              margin: 0;
            }
          }
        }

        .boton {
          margin-top: var(--single-mobile);
          justify-content: center !important;

          a {
            font-size: 1.8rem;
          }
        }
      }
    }
  }

  section.contacto {
    padding: var(--space-double) 0;
    background: linear-gradient(0deg, var(--blanco), var(--celeste-fondo));

    iframe {
      border: 4px solid transparent;
      background:
        linear-gradient(white, white) padding-box,
        linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
    }

    form {
      padding: var(--space-single);
      background-color: var(--celeste-brillante);

      h2 {
        margin-bottom: var(--space-single);
      }

      button {
        align-self: center;
        padding: 0.5rem 2rem;
        border-radius: 0;
        background-color: var(--azul-logo);
        color: var(--blanco);
        border: 0;
        font-size: 1.5rem;
      }
    }
  }

  @media (max-width: 767px) {
    section.contacto {
      margin: 0;
      padding: var(--double-mobile) var(--single-mobile);

      .container {
        max-width: 100%;
      }

      .row {
        flex-direction: column;
      }

      .col-md-7 {
        order: 1;
      }

      .col-md-5 {
        order: 2;
        margin-top: var(--space-single);
      }
    }
  }
section.login{
    padding: var(--space-double) 0;
}

/* MOBILE */
@media (max-width: 767px){
  section.login{
    .login-wrapper{
        display: flex;
        flex-direction: column;
        .login-info{
          padding: var(--double-mobile);
          h1{
            font-size: 2rem;
          }
          p{
            font-size: 1.5rem;
            margin-bottom: 0;
          }
        }
        .login-form{
          padding: var(--double-mobile);
          .form-container{
            max-width: 100%;
            h2{
              margin-bottom: 1rem;
            }
            p{
              font-size: 1.5rem;
              margin-bottom: 1rem;
            }
            form {
    label {
        font-size: 1.2rem;
    }
    input {
        font-size: 1.2rem;
    }
    input::placeholder {
        font-size: 1.2rem;
    }
}
          }
        }
    }
    }
}
}

/* ========================= */
/* FOOTER */
/* ========================= */
footer {
  background-color: var(--footer);

  p {
    font-weight: bold;
    font-size: 1.2rem;
  }

  i {
    font-size: 2rem;
  }
p.developer{
    color: #d9dfff;
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 1rem;
    text-align: center;
    a{
      text-decoration: none;   
      color: #d9dfff;
      
    }
}
  @media (max-width: 767px) {
    .container {
      max-width: 90%;
      padding-bottom: var(--double-mobile);

      .d-flex.flex-column {
        p:first-of-type {
          order: 2;
        }

        p:last-of-type {
          order: 1;
        }

        div {
          order: 3;
        }

        .gap-4 {
          gap: 2.5rem !important;

          a {
            color: var(--negro);

            i {
              font-size: 4rem;
            }
          }
        }
      }
    }
  }
}

/* ========================= */
/* ACCESOS RÁPIDOS */
/* ========================= */
.accesos-rapidos {
  position: fixed;
  top: 70%;
  right: 0;
  transform: translate(100%, -50%);
  z-index: 999;
  transition: transform 0.3s ease;

  &.active {
    transform: translate(0, -50%);

    .fab-menu {
      right: 0;
    }
  }

  .fab-tab {
    position: absolute;
    left: -90px;
    top: 70%;
    transform: translateY(-50%);
    z-index: 2;
    background: #1e3a8a;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
  }

  .fab-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #1e3a8a;
    padding: 15px;
    border-radius: 10px 0 0 10px;

    .fab-close {
      align-self: flex-end;
      background: none;
      border: none;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }

    .fab-top {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #fff;
      border: none;
      font-size: 18px;
      cursor: pointer;
      align-self: center;
    }

    .fab-link {
      padding: 10px;
      background: #e5e7eb;
      text-decoration: none;
      color: #000;
      text-align: center;

      &.primary {
        background: #0ea5a5;
        color: #fff;
      }
    }
  }
}

/* ========================= */
/* 💻 DESKTOP (>=768px) */
/* ========================= */
.wpcf7 input[type="submit"] {
  align-self: center;
  padding: 0.5rem 2rem;
  border-radius: 0;
  background-color: var(--azul-logo);
  color: var(--blanco);
  border: 0;
  font-size: 1.5rem;
  display: block;
  margin: 0 auto;

}

.form-control {
  padding: 0.75rem 1rem;

}

.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
  padding: 0.8rem 1rem;
  background-color: white;
}

textarea.form-control {
  background-color: white;
  min-height: calc(1.5em * 7);
  /* Aprox 7 líneas de texto */
  rows: 7;
  /* Atributo HTML, pero CSS no lo soporta directamente */
}

.required-note br {
  display: none;
}

.wpcf7 label {
  padding-bottom: 0.8rem;
}

.modal-academico {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal-academico.activo {
  display: block;
}

.modal-academico-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-academico-contenido {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 700px;
  margin: 5% auto;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
}


/* Banner */
.modal-academico-banner {
  background-color: var(--celeste-gris);
  padding: 20px;
  text-align: center;
}

/* Botón cerrar */
.modal-academico-cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  font-size: 28px;
  cursor: pointer;
}

/* Grid */
.modal-academico-grid {
  display: flex;
  gap: 15px;
  padding: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
.modal-academico-contenido {
    width: 90%;
    height: 80%;
    position: relative;
    .modal-academico-cerrar{
        font-size: 3rem;
            position: absolute;
            top: -7%;
            right: -5%;
    z-index: 2;
    }
    .modal-academico-banner {
        h3{
            font-size: 1.3rem;
        }
    }
    .modal-academico-grid{
        gap: 0px;
        a{
            width: 50%;
        }
    }
}
}
.modal-academico-item {
  display: block;
  text-align: center;
  width: 30%;
  text-decoration: none;
  color: #000;
}

.modal-academico-item img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.modal-academico-item span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

section.login {
  background: linear-gradient(180deg, var(--blanco), var(--celeste-fondo));

  .login-wrapper {
    width: 90%;
    border-radius: 28px;
    overflow: hidden;
    background-color: #1f2028;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

    .login-info {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: var(--space-double);
      color: var(--blanco);
      position: relative;
      overflow: hidden;

      img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
      }
    }

    .login-form {
      background-color: var(--azul-marino);
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3rem;
    }
  }
}



.form-container {
  width: 100%;
  max-width: 80%;
}

.brand-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: #d8c66a;
}

.form-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.form-subtitle {
  color: #b5b5b5;
  margin-bottom: 2rem;
}

.form-control {
  background-color: white;
  border: 1px solid #555;
  color: rgb(2, 2, 2);
  height: 52px;
}

.form-control:focus {
  color: rgb(27, 1, 146);
  border-color: #d8c66a;
  border-width: 5px;
  box-shadow: none;
}

.form-control::placeholder {
  color: #5c5c5c;
}

.btn-login {
  background-color: #d8c66a;
  border: none;
  color: #1f2028;
  height: 52px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0.5rem;

}

.btn-login:hover {
  background-color: #cdbb5d;
}

.forgot-password {
  color: #d8c66a;
  text-decoration: none;
  font-size: 0.95rem;
}

.forgot-password:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .login-image {
    min-height: 250px;
  }

  .login-form {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  .login-image,
  .login-form {
    padding: 2rem;
  }

  .brand-title {
    margin-bottom: 2rem;
  }
}


.panel-cliente {
  padding: 3rem 0;
  background: linear-gradient(0deg, var(--blanco), var(--celeste-fondo));
  button{
      background-color: var(--azul-oscuro);
      color: white;
      padding: 0.8rem 1rem;
      font-weight: bold;
      &:hover{
          background-color: var(--azul-marino);
          color: white;
      }
  }
}
@media (max-width: 768px) {
    section.panel-cliente {
        display: flex;
        justify-content: center;
        .container{
            margin: 0 var(--single-mobile);
            max-width: 90%;
        }
    }
}
/* =========================
   HEADER
========================= */

.panel-header {
  background: var(--azul-oscuro);
  border-radius: 24px;
  padding: 2rem;
  color: white;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

  flex-wrap: wrap;
}

.panel-label {
  display: inline-block;
  margin-bottom: .5rem;
  opacity: .7;
  font-size: .9rem;
}

.panel-header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

.status-badge {
  background-color: #d4b24c;
  color: #10233f;

  padding: .8rem 1.2rem;
  border-radius: 999px;

  font-weight: 700;
  font-size: .9rem;
}

/* =========================
   TARJETAS
========================= */

.info-card {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;

  height: 100%;

  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.card-title {
  display: block;
  margin-bottom: .7rem;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
}

.info-card h2 {
  font-size: 1rem;
  margin-bottom: .5rem;
  color: #10233f;
}

.info-card p {
  margin: 0;
  color: #555;
}

/* =========================
   CONTENIDO
========================= */

.content-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;

  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.card-header-custom {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #ececec;
}

.card-header-custom h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #6b7280;
  font-weight: bold;
}

.card-content {
  padding: 2rem;
}

/* =========================
   ESTADO PROCESAL
========================= */

.process-status {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

.completed .status-dot {
  background-color: #28c76f;
}

.active .status-dot {
  background-color: #ff9f43;
}

.pending .status-dot {
  background-color: #c7c7c7;
}

.status-item h4 {
  margin: 0;
  font-size: 1rem;
  color: #10233f;
}

.status-item p {
  margin: 0;
  color: #666;
}

/* =========================
   AGENDA
========================= */

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;

  padding: 1.2rem;
  border-radius: 18px;

  background-color: #f8fafc;
}

.agenda-date {
  min-width: 70px;
  height: 70px;

  background-color: #10233f;
  color: white;

  border-radius: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.agenda-date span {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.agenda-date small {
  font-size: .7rem;
  opacity: .8;
}

.agenda-info {
  flex: 1;
}

.agenda-info h4 {
  margin-bottom: .3rem;
  color: #10233f;
}

.agenda-info p {
  margin: 0;
  color: #666;
}

.agenda-hour {
  font-weight: 700;
  color: #10233f;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px) {

  .panel-header {
    padding: 1.5rem;
  }

  .panel-header h1 {
    font-size: 1.5rem;
  }

  .card-content {
    padding: 1.5rem;
  }

  .agenda-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .agenda-hour {
    width: 100%;
  }

}

section.noticias {

  h2{
    margin-top: var(--single-mobile);
    font-size: 2.3rem;
    color: var(--azul-marino);
    text-decoration: underline var(--azul-logo);
    text-underline-offset: 8px;
  }

  article{
    padding: var(--space-single);
    margin-bottom: var(--space-double);
    border: 4px solid transparent;
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
    height: 100%;

    .row{
      height: 100%;
    }

    .imagen{
      height: 100%;

      a{
        display: block;
        height: 100%;
      }

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }

    .contenido{
      padding: var(--space-single);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .meta{
        display: flex;
        gap: .6rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        font-size: .85rem;
        color: #888;

        span:last-child{
          background-color: var(--celeste-gris);
          padding: 0.5rem;
          font-weight: 600;
          color: var(--negro);
        }
      }

      h3{
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: var(--space-single);
        color: var(--azul-marino);
      }

      p{
        font-size: 1rem;
        margin-bottom: 2rem;
      }

      a{
        color: var(--blanco);
        background-color: var(--azul-logo);
        font-weight: 600;
        padding: 0.5rem 1rem;
        align-self: flex-start;
        text-decoration: none;
        margin: 0;
        display: inline-block;

        &:hover{
          text-decoration: underline;
          background-color: var(--azul-marino);
        }
      }
    }
  }
}

@media (max-width: 767px){

  section.noticias{

    padding: var(--double-mobile) 0;

    .container{
      max-width: 100%;
      padding: 0 var(--single-mobile);
    }

    h2{
      font-size: 2rem;
      margin-bottom: var(--double-mobile) !important;
    }

    article{
      padding: 0;
      overflow: hidden;

      .row{
        flex-direction: column;
      }

      .imagen{
        width: 100%;
        min-height: 240px;

        img{
          width: 100%;
          height: 240px;
          object-fit: cover;
        }
      }

      .contenido{
        padding: var(--double-mobile);

        .meta{
          font-size: .9rem;
          margin-bottom: 1rem;
        }

        h3{
          font-size: 1.4rem;
          line-height: 1.3;
        }

        p{
          font-size: 1rem;
          margin-bottom: 1.5rem;
        }

        a{
          width: fit-content;
          padding: .8rem 1.2rem;
        }
      }
    }
  }
}

/* ========================= */
/* SINGLE POST */
/* ========================= */

.single-portada {
    width: 100%;
    height: 60vh;
    overflow: hidden;

    .single-portada-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

.single-header {
    text-align: center;
    padding: var(--space-double) 0 var(--space-single);

    .single-categorias {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--azul-logo);
        margin-bottom: var(--space-single);

        a {
            color: var(--azul-logo);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .single-titulo {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--azul-oscuro);
        margin-bottom: var(--space-single);
        line-height: 1.2;
    }

    .single-meta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        color: var(--muted, #888);
        font-size: 0.9rem;
    }
}

.single-contenido {
    padding: var(--space-double) 0;
    margin: 0 auto;

    p {
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--azul-negro);
        margin-bottom: var(--space-single);
    }

    img {
        max-width: 70%;
        height: auto;
        display: block;
        margin: var(--space-double) auto;
        border-radius: 8px;
    }

    h2, h3 {
        color: var(--azul-oscuro);
        margin: var(--space-double) 0 var(--space-single);
    }
}

.single-navegacion {
    padding: var(--space-double) 0;
    border-top: 2px solid var(--celeste-gris);
    display: flex;
    flex-direction: column;
    gap: var(--space-single);

    .single-btn-volver {
        display: inline-block;
        background-color: var(--azul-logo);
        color: var(--blanco);
        padding: 0.6rem 1.2rem;
        text-decoration: none;
        font-weight: 600;
        border-radius: 4px;
        width: fit-content;

        &:hover {
            background-color: var(--azul-oscuro);
        }
    }

    .single-prevnext {
        display: flex;
        justify-content: space-between;
        gap: var(--space-single);

        a {
            color: var(--azul-logo);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;

            &:hover {
                text-decoration: underline;
            }
        }

        .single-prev {
            margin-right: auto;
        }

        .single-next {
            margin-left: auto;
        }
    }
}

@media (max-width: 767px) {
    .single-portada {
        height: 40vh;
    }

    .single-header {
        .single-titulo {
            font-size: 1.8rem;
        }
    }

    .single-contenido {
        img {
            max-width: 100%;
        }
    }

    .single-prevnext {
        flex-direction: column;
    }
}
section.decmedios {

  margin: var(--space-double) 0;

  h2{
    font-size: 2.3rem;
    text-decoration: underline var(--azul-logo);
    text-underline-offset: 8px;
    margin-bottom: var(--space-double);
  }

  article{
    padding: var(--space-single);
    border: 4px solid transparent;
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(to top, var(--azul-logo), #00bcd4) border-box;
    height: 100%;
  }

  a{
    text-decoration: none;
    display: block;
    height: 100%;
  }

  img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  h3{
    margin-top: var(--space-single);
    color: var(--azul-oscuro) !important;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
  }
}

@media (max-width: 767px){

  section.decmedios{

    margin-bottom: var(--single-mobile);

    .container{
      max-width: 85%;
    }

    article{
      position: relative;
      padding: 0;
      overflow: hidden;
    }

    a{
      position: relative;
      display: block;
    }

    img{
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
    }

    h3{
      position: absolute;
      inset: auto 0 0;
      min-height: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1rem;
      background: #0368a69b;
      color: white !important;
      backdrop-filter: blur(2px);
      margin: 0;
    }
  }
}
.single-imagen-lateral {
    float: left;
    width: 45%;
    margin-right: var(--single-mobile);
}




.single-contenido::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 767px) {
    .single{
    .container{
        margin: 0 var(--single-mobile);
        max-width: 90%;

    }

}
    .single-imagen-lateral {
        float: none;
        width: 100%;
        margin: 0 0 1rem;
    }

}
.single-imagen-lateral img {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}

        .single-header {
            padding-top: var(--double-mobile);
            padding-bottom: 0;
        }
            .single-contenido {
            padding-top: var(--single-mobile);
            padding-bottom: 0;
        }
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;

    background: var(--azul-logo);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    line-height: 1;
    padding: 0;
}