/* ============================================================================
   PIE DE PAGINA - REITOR
   ----------------------------------------------------------------------------
   Escrito mobile first: la base es el telefono, que es donde el pie anterior
   se veia desordenado, y a partir de 769 px se reparte en columnas.

   En telefono los cuatro bloques de enlaces son acordeones plegados, para que
   el pie no se convierta en una lista interminable. En escritorio se abren
   solos por CSS y quedan en cuatro columnas, como estaban antes: el
   desplegado NO depende de JavaScript, solo el plegado interactivo.
   ========================================================================== */

.pie {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 0 1.75rem;
  color: #e8eef5;
  background: linear-gradient(180deg, #0b2347 0%, #071a36 100%);
}

.pie-shell {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}

/* Trama de puntos decorativa de la esquina superior derecha */
.pie-trama {
  position: absolute;
  top: 0.5rem;
  right: 4.5rem;
  width: 190px;
  height: 130px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.4px, transparent 1.4px);
  background-size: 17px 17px;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Marca y boton de subir ---------- */

.pie-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pie-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.pie-marca img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 52px;
}

.pie-marca-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pie-marca-texto strong {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
}

.pie-marca-texto small {
  color: var(--verde-lima, #8dc63f);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

.pie .pie-subir {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--verde-lima, #8dc63f);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}

.pie .pie-subir:hover,
.pie .pie-subir:focus-visible {
  background: rgba(141, 198, 63, 0.14);
  border-color: var(--verde-lima, #8dc63f);
  transform: translateY(-2px);
}

/* ---------- Lema ---------- */

.pie-lema {
  margin: 1.15rem 0 1.5rem;
  max-width: 46ch;
  color: #c3d0de;
  font-size: 0.97rem;
  line-height: 1.6;
}

/* ---------- Contacto rapido ---------- */

.pie-contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

/* Se sube la especificidad a proposito: css/movil.css declara
   a[class*="btn"] { min-height: 44px }, que es un selector de atributo y le
   gana a una clase suelta. Sin esto el boton se quedaba en 47 px en vez de
   los 56 del diseno. */
.pie .pie-contacto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.7rem 1rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.pie .pie-contacto-btn i {
  color: var(--verde-lima, #8dc63f);
  font-size: 1.25rem;
}

.pie .pie-contacto-btn:hover,
.pie .pie-contacto-btn:focus-visible {
  background: rgba(141, 198, 63, 0.12);
  border-color: var(--verde-lima, #8dc63f);
}

/* ---------- Acordeones ---------- */

.pie-grupos {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.pie-grupo {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
}

.pie-grupo h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.pie-grupo-btn {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.05rem;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
}

.pie-grupo-icono {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  /* Los simbolos del sprite se dibujan con trazo, no con relleno */
  fill: none;
  stroke: var(--verde-lima, #8dc63f);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pie-grupo-btn > span {
  flex: 1 1 auto;
}

.pie-grupo-flecha {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  transition: transform 0.28s ease;
}

.pie-grupo-btn[aria-expanded="true"] .pie-grupo-flecha {
  transform: rotate(180deg);
}

/* El panel se pliega midiendo su altura desde JS (--alto). Sin JS queda
   abierto, que es preferible a que el contenido no exista para nadie. */
.pie-grupo-panel {
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.pie-grupo-panel[hidden] {
  display: none;
}

.pie-grupo-panel ul {
  margin: 0;
  padding: 0 1.05rem 1rem 3.1rem;
  list-style: none;
}

.pie-grupo-panel li + li {
  margin-top: 0.15rem;
}

.pie-grupo-panel a {
  display: block;
  padding: 0.55rem 0;
  color: #c3d0de;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.pie-grupo-panel a:hover,
.pie-grupo-panel a:focus-visible {
  color: var(--verde-lima, #8dc63f);
}

/* Datos de contacto dentro de Empresa */
.pie-datos {
  padding-top: 0.4rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.5rem !important;
}

.pie-datos li {
  display: flex;
  gap: 0.65rem;
  padding: 0.5rem 0;
  color: #b6c4d4;
  font-size: 0.9rem;
  line-height: 1.5;
}

.pie-datos i {
  flex: 0 0 16px;
  margin-top: 0.2rem;
  color: var(--verde-lima, #8dc63f);
}

.pie-datos a {
  display: inline;
  padding: 0;
  color: #b6c4d4;
}

/* Sublista dentro de un acordeon (cursos populares) */
.pie-sublista-titulo {
  padding-bottom: 0.15rem !important;
  color: #8fa2b8 !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pie-populares li {
  display: block;
  padding: 0;
}

.pie-populares a {
  display: block;
  padding: 0.5rem 0;
  color: #c3d0de;
  font-size: 0.92rem;
}

/* ---------- Boletin ---------- */

.pie-boletin {
  padding: 1.15rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
}

.pie-boletin label {
  display: block;
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.pie-boletin-campo {
  display: flex;
  gap: 0.6rem;
}

.pie-boletin input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0.75rem 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
}

.pie-boletin input::placeholder {
  color: #8fa2b8;
}

.pie-boletin input:focus-visible {
  outline: 2px solid var(--verde-lima, #8dc63f);
  outline-offset: 1px;
}

.pie-boletin button {
  flex: 0 0 62px;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #0b2347;
  background: var(--verde-lima, #8dc63f);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: filter 0.2s ease;
}

.pie-boletin button:hover,
.pie-boletin button:focus-visible {
  filter: brightness(1.08);
}

/* ---------- Redes ---------- */

.pie-redes {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.pie .pie-red {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  font-size: 1.2rem;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease;
}

.pie-red:hover,
.pie-red:focus-visible {
  color: var(--verde-lima, #8dc63f);
  background: rgba(141, 198, 63, 0.12);
  border-color: var(--verde-lima, #8dc63f);
}

/* Las redes sin direccion todavia: se ven, pero no enganan al usuario
   fingiendo ser un enlace. */
.pie-red--pendiente {
  opacity: 0.32;
  cursor: default;
}

/* ---------- Legal ---------- */

.pie-legal {
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}

.pie-legal-enlaces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
  flex-wrap: wrap;
}

.pie-legal-enlaces a {
  color: #c3d0de;
  text-decoration: none;
  font-size: 0.95rem;
}

.pie-legal-enlaces a:hover,
.pie-legal-enlaces a:focus-visible {
  color: var(--verde-lima, #8dc63f);
}

.pie-legal-enlaces span {
  color: rgba(255, 255, 255, 0.35);
}

.pie-copyright {
  margin: 0;
  color: #9db0c4;
  font-size: 0.9rem;
}

/* ==================================================================
   DESDE TABLET: los acordeones se abren solos y se reparten
   ================================================================== */

@media (min-width: 769px) {
  .pie {
    padding: 3.5rem 0 2rem;
  }

  .pie-trama {
    right: 6rem;
    width: 260px;
    height: 150px;
  }

  .pie-lema {
    margin-bottom: 2rem;
  }

  .pie-contacto {
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    margin-bottom: 2.25rem;
  }

  .pie-grupos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
    margin-bottom: 2.25rem;
  }

  /* En escritorio no hay caja ni pliegue: son cuatro columnas de enlaces */
  .pie-grupo {
    background: none;
    border: 0;
    border-radius: 0;
  }

  .pie-grupo-btn {
    min-height: 0;
    padding: 0 0 0.9rem;
    cursor: default;
    font-size: 1.05rem;
  }

  .pie-grupo-flecha {
    display: none;
  }

  /* Clave: el panel se muestra pase lo que pase, aunque el JS lo haya
     dejado plegado o con el atributo hidden puesto en el telefono. */
  .pie-grupo-panel,
  .pie-grupo-panel[hidden] {
    display: block !important;
    height: auto !important;
    overflow: visible;
  }

  .pie-grupo-panel ul {
    padding: 0;
  }

  .pie-boletin {
    max-width: 560px;
  }

  .pie-redes {
    justify-content: flex-start;
  }

  .pie-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
  }

  .pie-legal-enlaces {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pie-grupo-panel,
  .pie-grupo-flecha,
  .pie-subir {
    transition-duration: 1ms !important;
  }
}