@charset "UTF-8";

html {
  background: #182231 !important;
}

body {
  background: #eee9df !important;
}

#funcionarios-retiro {
  background: #eee9df !important;
  background-color: #eee9df !important;
}

#funcionarios-retiro .container,
#funcionarios-retiro .row,
#funcionarios-retiro .col-md-12,
#funcionarios-retiro .col-lg-10 {
  background: transparent !important;
}

/* =========================================================
   INFORMACIÓN DEL PERSONAL · RETIRO
========================================================= */

.fl-wrap {
  padding-top: 0 !important;
  padding-bottom: 4.9rem !important;
}

.fl-shell {
  position: relative;
  padding: 1rem 1rem 1.15rem;
  border: 1px solid rgba(126, 105, 75, .24);
  border-radius: 0;
  background: var(--retiro-form-card, #ebe3d7) !important;
  overflow: hidden;
  box-shadow: none;
}

.fl-tabs-nav {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.fl-tab-btn {
  min-height: 44px;
  padding: .8rem 1.05rem;
  border: 1px solid rgba(126, 105, 75, .30);
  border-radius: 0;
  background: transparent !important;
  color: var(--retiro-ink, #182231) !important;
  box-shadow: none;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}

.fl-tab-btn:hover,
.fl-tab-btn:focus-visible {
  border-color: rgba(158, 107, 37, .52);
  background: var(--retiro-form-field-focus, #f8f3eb) !important;
  color: var(--retiro-ink, #182231) !important;
  outline: 0;
}

.fl-tab-btn.active {
  border-color: var(--retiro-dark, #07111f);
  background: var(--retiro-dark, #07111f) !important;
  color: var(--retiro-ivory, #f4eadb) !important;
}

.fl-panel {
  display: none;
}

.fl-panel.active {
  display: block;
}

/* =========================================================
   NOTARIO
========================================================= */

.fl-notario-card {
  padding: 1.4rem 1.4rem 1.45rem;
  border: 1px solid rgba(126, 105, 75, .22);
  border-radius: 0;
  background: var(--retiro-form-field, #f2eadf) !important;
  color: var(--retiro-form-muted, #625f58);
}

.fl-notario-name {
  margin: 0 0 .65rem !important;
  color: var(--retiro-ink, #182231) !important;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.fl-notario-subtitle {
  margin: 0 !important;
  color: #4e5750 !important;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.55;
}

.fl-notario-probidad {
  margin: .85rem 0 0 !important;
}

.fl-notario-probidad a {
  color: var(--retiro-ink, #182231) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(126, 105, 75, .50);
  text-underline-offset: 3px;
}

.fl-notario-divider {
  width: 100%;
  height: 1px;
  margin: 1.25rem 0 1.35rem;
  background: rgba(199, 140, 49, .62);
}

.fl-notario-intro {
  width: 100%;
  color: var(--retiro-form-muted, #625f58);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.78;
}

.fl-notario-intro p {
  margin: 0 0 1.2rem !important;
  color: inherit !important;
  text-align: justify;
  text-justify: inter-word;
}

.fl-notario-intro p:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   ÁREAS Y FUNCIONARIOS
========================================================= */

.fl-area-intro {
  margin: 0 0 1.25rem !important;
  color: var(--retiro-form-muted, #625f58) !important;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.72;
  text-align: justify;
  text-justify: inter-word;
}

.fl-staff-block {
  border: 1px solid rgba(126, 105, 75, .22);
  background: var(--retiro-form-field, #f2eadf);
}

.fl-staff-toggle {
  width: 100%;
  min-height: 52px;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--retiro-ink, #182231);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  text-align: left;
}

.fl-staff-toggle:hover,
.fl-staff-toggle:focus-visible {
  background: var(--retiro-form-field-focus, #f8f3eb);
  outline: 0;
}

.fl-toggle-icon,
.fl-person-chevron {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.fl-toggle-icon::before,
.fl-toggle-icon::after,
.fl-person-chevron::before,
.fl-person-chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s ease;
}

.fl-toggle-icon::before,
.fl-person-chevron::before {
  left: 2px;
  transform: translateY(-50%) rotate(45deg);
}

.fl-toggle-icon::after,
.fl-person-chevron::after {
  right: 2px;
  transform: translateY(-50%) rotate(-45deg);
}

.fl-staff-toggle[aria-expanded="true"] .fl-toggle-icon::before,
.fl-person-button[aria-expanded="true"] .fl-person-chevron::before {
  transform: translateY(-50%) rotate(-45deg);
}

.fl-staff-toggle[aria-expanded="true"] .fl-toggle-icon::after,
.fl-person-button[aria-expanded="true"] .fl-person-chevron::after {
  transform: translateY(-50%) rotate(45deg);
}

.fl-staff-list {
  padding: 0 1rem 1rem;
}

.fl-people-list {
  display: grid;
  gap: .75rem;
}

.fl-person {
  border: 1px solid rgba(126, 105, 75, .20);
  background: rgba(251, 248, 242, .48);
}

.fl-person-button {
  width: 100%;
  min-height: 50px;
  padding: .9rem 1rem;
  border: 0;
  background: transparent;
  color: var(--retiro-ink, #182231);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  font-family: "EB Garamond", Georgia, serif;
}

.fl-person-button:hover,
.fl-person-button:focus-visible,
.fl-person-button[aria-expanded="true"] {
  background: var(--retiro-form-field-focus, #f8f3eb);
  outline: 0;
}

.fl-person-name {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
}

.fl-person-detail {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(126, 105, 75, .14);
}

.fl-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  padding-top: 1rem;
}

.fl-data-card {
  min-width: 0;
  padding: .9rem;
  border: 1px solid rgba(126, 105, 75, .18);
  background: rgba(251, 248, 242, .40);
}

.fl-data-label {
  display: block;
  margin-bottom: .38rem;
  color: #7a6349;
  font-family: "EB Garamond", Georgia, serif;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fl-data-value {
  display: block;
  color: var(--retiro-ink, #182231);
  font-family: "EB Garamond", Georgia, serif;
  font-size: .98rem;
  line-height: 1.45;
}

/* =========================================================
   REMUNERACIONES · MOVIMIENTO SUTIL SIN CONTENIDO
========================================================= */

.fl-rem-panel {
  min-height: 300px;
}

.fl-rem-scene {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(126, 105, 75, .18);
  background:
    radial-gradient(circle at 50% 50%, rgba(199, 140, 49, .045), transparent 22%),
    linear-gradient(180deg, rgba(251, 248, 242, .38), rgba(242, 234, 223, .52));
  perspective: 1000px;
}

.fl-rem-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(199, 140, 49, .08), transparent 72%);
  filter: blur(8px);
  opacity: .7;
  animation: flRemGlow 8s ease-in-out infinite;
}

.fl-rem-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.fl-rem-ring-a {
  width: 250px;
  height: 92px;
  margin: -46px 0 0 -125px;
  border: 1px solid rgba(126, 105, 75, .28);
  transform: rotateX(66deg) rotateZ(0deg);
  animation: flRemRingA 24s linear infinite;
}

.fl-rem-ring-b {
  width: 310px;
  height: 112px;
  margin: -56px 0 0 -155px;
  border: 1px solid rgba(199, 140, 49, .18);
  transform: rotateX(70deg) rotateY(7deg) rotateZ(18deg);
  animation: flRemRingB 32s linear infinite reverse;
}

.fl-rem-ring-c {
  width: 370px;
  height: 132px;
  margin: -66px 0 0 -185px;
  border: 1px solid rgba(7, 17, 31, .10);
  transform: rotateX(72deg) rotateY(-5deg) rotateZ(-15deg);
  animation: flRemRingC 40s linear infinite;
}

@keyframes flRemRingA {
  to { transform: rotateX(66deg) rotateZ(360deg); }
}

@keyframes flRemRingB {
  to { transform: rotateX(70deg) rotateY(7deg) rotateZ(378deg); }
}

@keyframes flRemRingC {
  to { transform: rotateX(72deg) rotateY(-5deg) rotateZ(345deg); }
}

@keyframes flRemGlow {
  0%, 100% {
    opacity: .46;
    transform: translate(-50%, -50%) scale(.96);
  }
  50% {
    opacity: .74;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* =========================================================
   ACCIONES
========================================================= */

.fl-actions {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin: 1.35rem 0 2.8rem !important;
  padding: 0 !important;
}

.fl-actions.mbr-section-btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}

.fl-actions .btn,
.fl-actions a.btn,
.fl-actions .btn.btn-secondary-outline,
.fl-actions a.btn.btn-secondary-outline {
  min-height: 46px;
  margin: 0 !important;
  padding: .82rem 1.35rem !important;
  border: 1px solid rgba(126, 105, 75, .38) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--retiro-ink, #182231) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  line-height: 1.2;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease !important;
}

.fl-actions .btn:hover,
.fl-actions .btn:focus,
.fl-actions a.btn:hover,
.fl-actions a.btn:focus {
  border-color: var(--retiro-dark, #07111f) !important;
  background: var(--retiro-dark, #07111f) !important;
  color: var(--retiro-ivory, #f4eadb) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

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

@media (max-width: 991.98px) {
  .fl-wrap {
    padding-bottom: 4.4rem !important;
  }

  /* Evita que el line-height global de <p> comprima la biografía
     cuando la página pasa a tablet o móvil. */
  .fl-notario-intro p {
    line-height: 1.72;
  }

  .fl-data-grid {
    grid-template-columns: 1fr;
  }

  .fl-actions .btn,
  .fl-actions a.btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .fl-wrap {
    padding-bottom: 4rem !important;
  }

  .fl-shell {
    padding: .85rem;
  }

  .fl-tabs-nav {
    gap: .65rem;
  }

  .fl-tab-btn {
    width: 100%;
  }

  .fl-notario-card {
    padding: 1.05rem;
  }

  .fl-notario-intro,
  .fl-area-intro {
    font-size: 1rem;
    line-height: 1.68;
  }

  .fl-notario-intro p {
    line-height: 1.68;
  }

  .fl-staff-list {
    padding: 0 .75rem .75rem;
  }

  .fl-person-button,
  .fl-staff-toggle {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .fl-person-detail {
    padding: 0 .85rem .85rem;
  }

  .fl-rem-panel,
  .fl-rem-scene {
    min-height: 250px;
  }

  .fl-rem-ring-a {
    width: 190px;
    height: 72px;
    margin: -36px 0 0 -95px;
  }

  .fl-rem-ring-b {
    width: 235px;
    height: 86px;
    margin: -43px 0 0 -117.5px;
  }

  .fl-rem-ring-c {
    width: 280px;
    height: 100px;
    margin: -50px 0 0 -140px;
  }

  .fl-actions {
    margin-bottom: 2.4rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-tab-btn,
  .fl-staff-toggle,
  .fl-person-button,
  .fl-rem-glow,
  .fl-rem-ring {
    animation: none !important;
    transition: none !important;
  }
}