/* ============================================================
   C.F. OLESA — Estilos v2.0.0
   Componentes añadidos por la propuesta de nueva web:
   pantalla de entrada · botón de inscripciones · "ayúdanos a
   crecer" · valores · accesos · equipos · álbumes · momentos
   históricos · mapa · redes en contacto.
   Se carga DESPUÉS de club.css y reutiliza sus variables.
   ============================================================ */

/* ============================================================
   1. PANTALLA DE ENTRADA
   ============================================================ */
.efc-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--efc-primary);
}
.efc-splash[hidden] { display: none; }

.efc-splash-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: efc-splash-zoom 14s ease-out forwards;
}
@keyframes efc-splash-zoom { to { transform: scale(1); } }

.efc-splash-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 22, 11, .35) 0%, rgba(8, 22, 11, .55) 55%, rgba(8, 22, 11, .85) 100%);
}

.efc-splash-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 780px;
  padding: 32px 24px;
  text-align: center;
  color: #fff;
  animation: efc-splash-in .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes efc-splash-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.efc-splash-crest { margin-bottom: 22px; }
.efc-splash-crest img { height: 96px; width: auto; margin: 0 auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
.efc-splash-crest svg { width: 76px; height: 76px; margin: 0 auto; color: #fff; opacity: .95; }

.efc-splash-title {
  font-family: var(--efc-font-display);
  font-size: clamp(2.8rem, 12vw, 7rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .5);
}
.efc-splash-title span { color: var(--efc-accent); }

.efc-splash-sub {
  font-size: clamp(.9rem, 2.6vw, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #FFD84D;
  margin: 0 0 40px;
}

.efc-splash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 17px 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--efc-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .6);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.efc-splash-btn:hover,
.efc-splash-btn:focus-visible {
  background: var(--efc-accent);
  color: #fff;
  transform: translateY(-3px);
}

/* Bloquea el desplazamiento mientras la pantalla está abierta. */
html.efc-splash-open,
body.efc-splash-open { overflow: hidden; }

/* Salida */
.efc-splash.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .efc-splash-bg,
  .efc-splash-inner { animation: none; }
}

/* ============================================================
   2. BOTÓN ESPECIAL DE INSCRIPCIONES
   ============================================================ */
.efc-inscrip {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px 13px 18px;
  border-radius: 999px;
  background: var(--efc-accent);
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(21, 128, 61, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.efc-inscrip:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(21, 128, 61, .8); }
.efc-inscrip svg { width: 20px; height: 20px; flex: none; }

.efc-inscrip-txt { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.efc-inscrip-note { display: block; font-size: 11.5px; font-weight: 500; opacity: .85; margin-top: 2px; }

.efc-inscrip--pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid var(--efc-accent);
  animation: efc-inscrip-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes efc-inscrip-pulse {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.28); }
}

/* En móvil pasa a barra fija inferior, a ancho completo. */
@media (max-width: 720px) {
  .efc-inscrip {
    left: 12px; right: 12px; bottom: 12px;
    justify-content: center;
    border-radius: 16px;
    padding: 14px 18px;
  }
  .efc-inscrip-txt { font-size: 14px; }
  body.efc-mode { padding-bottom: 84px; }
  /* El botón de WhatsApp sube para no chocar con la barra. */
  .efc-wa-fab { bottom: 92px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .efc-inscrip--pulse::after { animation: none; }
}

/* ============================================================
   3. PORTADA — AYÚDANOS A CRECER
   ============================================================ */
.efc-grow {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  padding: 84px 48px;
  text-align: center;
  color: #fff;
  isolation: isolate;
}
.efc-grow-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.efc-grow::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(22, 60, 27, .93), rgba(22, 60, 27, .72));
}
.efc-grow .efc-eyebrow { color: #A7F3A7; }
.efc-grow h2 {
  font-family: var(--efc-font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.1;
  margin: 12px 0 20px;
  color: #fff;
}
.efc-grow p {
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: 17px;
  line-height: 1.75;
  color: #D8EEDA;
}
.efc-grow-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 640px) {
  .efc-grow { padding: 56px 24px; border-radius: 28px; }
  .efc-grow-ctas .efc-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   4. VALORES (página El Club)
   ============================================================ */
.efc-valuecards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.efc-valuecard {
  padding: 30px 28px;
  border-radius: var(--efc-radius);
  border: 1px solid var(--efc-border);
  background: var(--efc-white);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.efc-valuecard:hover {
  transform: translateY(-5px);
  border-color: var(--efc-accent);
  box-shadow: var(--efc-shadow-card);
}
.efc-valuecard-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  margin-bottom: 18px;
  background: rgba(55, 149, 68, .12);
  color: var(--efc-accent);
}
.efc-valuecard-ico svg { width: 26px; height: 26px; }
.efc-valuecard h3 {
  font-family: var(--efc-font-display);
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--efc-ink);
}
.efc-valuecard p { margin: 0; color: var(--efc-body); font-size: 15px; line-height: 1.65; }

/* ============================================================
   5. TARJETAS DE ACCESO
   ============================================================ */
.efc-linkcards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.efc-linkcard {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid var(--efc-border);
  background: var(--efc-white);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.efc-linkcard:hover {
  transform: translateX(4px);
  border-color: var(--efc-accent);
  box-shadow: var(--efc-shadow-card);
}
.efc-linkcard-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 14px;
  background: var(--efc-primary);
  color: #fff;
}
.efc-linkcard-ico svg { width: 22px; height: 22px; }
.efc-linkcard-body { display: block; flex: 1; min-width: 0; }
.efc-linkcard-body strong { display: block; font-size: 16px; color: var(--efc-ink); margin-bottom: 3px; }
.efc-linkcard-body span { display: block; font-size: 14px; color: var(--efc-body); line-height: 1.5; }
.efc-linkcard-arrow { width: 20px; height: 20px; flex: none; color: var(--efc-accent); }

/* ============================================================
   6. EQUIPOS
   ============================================================ */
.efc-teams {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.efc-team {
  display: block;
  overflow: hidden;
  border-radius: var(--efc-radius);
  border: 1px solid var(--efc-border);
  background: var(--efc-white);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.efc-team:hover {
  transform: translateY(-6px);
  border-color: var(--efc-accent);
  box-shadow: var(--efc-shadow-soft);
}
.efc-team-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--efc-soft); }
.efc-team-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.efc-team:hover .efc-team-media img { transform: scale(1.06); }
.efc-team-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .28) 100%);
}
.efc-team-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--efc-primary), var(--efc-accent));
}
.efc-team-placeholder svg { width: 64px; height: 64px; color: rgba(255, 255, 255, .55); }
.efc-team-placeholder img { width: auto; height: 62%; object-fit: contain; }

.efc-team-body { padding: 24px 26px 28px; }
.efc-team-cat {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--efc-accent);
  margin-bottom: 8px;
}
.efc-team-body h3 {
  font-family: var(--efc-font-display);
  font-size: 26px; line-height: 1.15;
  margin: 0 0 10px; color: var(--efc-ink);
}
.efc-team-body p { margin: 0 0 14px; color: var(--efc-body); font-size: 15px; line-height: 1.6; }

/* ============================================================
   7. ÁLBUMES DE GALERÍA
   ============================================================ */
.efc-albums {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.efc-album {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--efc-radius);
  background: var(--efc-primary);
  transition: transform .35s ease, box-shadow .35s ease;
}
.efc-album:hover { transform: translateY(-5px); box-shadow: var(--efc-shadow-soft); }
.efc-album img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.efc-album:hover img { transform: scale(1.08); }
.efc-album-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--efc-primary), var(--efc-accent));
}
.efc-album-empty svg { width: 44px; height: 44px; color: rgba(255, 255, 255, .5); }
.efc-album-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8, 22, 11, .8) 100%);
}
.efc-album-name {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-size: 15.5px; font-weight: 700;
  line-height: 1.25;
}
.efc-album-name svg { width: 18px; height: 18px; flex: none; opacity: .9; }

/* ============================================================
   8. MOMENTOS HISTÓRICOS
   ============================================================ */
.efc-historic {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.efc-historic-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--efc-radius);
  background: var(--efc-white);
  border: 1px solid var(--efc-border);
}
.efc-historic-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85); }
.efc-historic-item figcaption {
  padding: 14px 18px 16px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--efc-body);
}
.efc-empty-note {
  text-align: center;
  color: var(--efc-body);
  font-size: 15px;
  padding: 26px;
  border: 1px dashed var(--efc-border);
  border-radius: var(--efc-radius);
}

/* ============================================================
   9. CONTACTO: REDES Y MAPA
   ============================================================ */
.efc-contact-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.efc-contact-social a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--efc-border);
  font-size: 13.5px; font-weight: 600;
  color: var(--efc-ink);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.efc-contact-social a:hover { background: var(--efc-accent); border-color: var(--efc-accent); color: #fff; }
.efc-contact-social svg { width: 16px; height: 16px; }

.efc-map {
  overflow: hidden;
  border-radius: var(--efc-radius-lg);
  border: 1px solid var(--efc-border);
  box-shadow: var(--efc-shadow-card);
  line-height: 0;
}
.efc-map iframe { width: 100%; height: 440px; border: 0; }
@media (max-width: 640px) { .efc-map iframe { height: 320px; } }

/* ============================================================
   10. LEMA DEL PIE DE PÁGINA
   ============================================================ */
.efc-footer-motto {
  margin: 6px 0 14px;
  font-family: var(--efc-font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--efc-accent);
}
.efc-footer-legal {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: center;
  margin-top: 10px;
  font-size: 13px;
  opacity: .75;
}
.efc-footer-legal a:hover { color: var(--efc-accent); }

/* ============================================================
   11. FIX — Texto blanco en botones verdes
   .efc-mode a { color: inherit } (club.css) tiene especificidad
   (0,1,1) y pisa el color:#fff (0,1,0) de los botones verdes que
   son <a>, dejándolos con texto heredado (oscuro). Aquí subimos la
   especificidad con el prefijo .efc-mode + el tag <a> para que
   vuelvan a verse en blanco.
   ============================================================ */
.efc-mode a.efc-btn--accent,
.efc-mode a.efc-btn--primary,
.efc-mode a.efc-nav-cta,
.efc-mode a.efc-inscrip,
.efc-mode a.efc-album,
.efc-mode a.efc-btn--lg,
.efc-mode a.efc-btn--pill,
.efc-mode a.efc-btn--sm {
  color: #fff !important;
}
.efc-mode a.efc-btn--accent:hover,
.efc-mode a.efc-btn--primary:hover,
.efc-mode a.efc-nav-cta:hover,
.efc-mode a.efc-inscrip:hover {
  color: #fff !important;
}
.efc-inscrip-txt,
.efc-inscrip-note { color: #fff; }

/* ============================================================
   12. VISOR DE ÁLBUMES (LIGHTBOX)
   Se abre al pulsar un álbum que tenga varias fotos cargadas.
   ============================================================ */
.efc-album { cursor: pointer; }
.efc-mode button.efc-album {
  width: 100%;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}
.efc-album-name {
  /* refuerzo: la etiqueta del álbum siempre se ve blanca sobre el velo oscuro */
  color: #fff;
}
.efc-album-name-text { flex: 1; min-width: 0; }
.efc-album-count {
  margin-left: auto;
  flex: none;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  color: #fff;
  letter-spacing: .02em;
}

.efc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 18, 10, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.efc-lightbox.is-open {
  display: flex;
  animation: efc-lb-fade .25s ease;
}
@keyframes efc-lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.efc-lightbox__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.efc-lightbox__img {
  max-width: 90vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.efc-lightbox__caption {
  color: #fff;
  margin-top: 12px;
  font-size: 14px;
  opacity: .9;
  text-align: center;
  font-weight: 600;
}
.efc-lightbox__close,
.efc-lightbox__prev,
.efc-lightbox__next {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, .14);
  border: 0;
  color: #fff;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.efc-lightbox__close:hover,
.efc-lightbox__prev:hover,
.efc-lightbox__next:hover {
  background: rgba(255, 255, 255, .28);
}
.efc-lightbox__close svg,
.efc-lightbox__prev svg,
.efc-lightbox__next svg {
  width: 22px;
  height: 22px;
}
.efc-lightbox__close { top: 24px; right: 24px; }
.efc-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.efc-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.efc-lightbox__prev:hover { transform: translateY(-50%) rotate(180deg) scale(1.06); }
.efc-lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.efc-lightbox__counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, .38);
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .efc-lightbox__prev { left: 10px; }
  .efc-lightbox__next { right: 10px; }
  .efc-lightbox__close { top: 14px; right: 14px; }
  .efc-lightbox__img { max-width: 94vw; max-height: 72vh; }
  .efc-lightbox__prev,
  .efc-lightbox__next { width: 40px; height: 40px; }
  .efc-lightbox__counter { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .efc-lightbox.is-open { animation: none; }
}