/**
 * @package     mod_sec_socios
 * @copyright   Copyright (C) SEC. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

:root {
  --rojo:      #C7281E;
  --rojo-dark: #951E16;
  --rojo-glow: rgba(200,16,46,.18);
  --blanco:    #FAFAF8;
  --gris-1:    #F4F2EF;
  --gris-2:    #E8E4DE;
  --gris-text: #6B6560;
  --negro:     #1A1512;
  --dorado:    #B8963A;
  --radius:    6px;
  --shadow-sm: 0 2px 12px rgba(26,21,18,.08);
  --shadow-md: 0 6px 32px rgba(26,21,18,.13);
  --shadow-lg: 0 16px 64px rgba(26,21,18,.18);
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--negro);
  overflow: hidden;
  padding: 100px 0 80px;
  min-height: 65vh;
  display: flex;
  align-items: center;
}

/* Animated heartbeat background */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
	radial-gradient(ellipse 80% 60% at 70% 50%, rgba(200,16,46,.22) 0%, transparent 70%),
	radial-gradient(ellipse 50% 80% at 15% 80%, rgba(184,150,58,.08) 0%, transparent 60%),
	linear-gradient(135deg, #0E0B09 0%, #1A1512 60%, #241A16 100%);
}

/* ECG line SVG watermark */
.hero-ecg {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  opacity: .12;
  pointer-events: none;
}
.ecg-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawECG 3s ease forwards .5s;
}
@keyframes drawECG {
  to { stroke-dashoffset: 0; }
}

/* Big decorative heart */
.hero-deco-heart {
  position: absolute;
  right: -60px; top: 50%;
  transform: translateY(-50%);
  width: 560px; height: 560px;
  opacity: .06;
  pointer-events: none;
}

.hero-content { position: relative; z-index: 2; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,16,46,.15);
  border: 1px solid rgba(200,16,46,.35);
  color: #FF6B7A;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
  animation: fadeUp .6s ease both;
}
.hero-eyebrow i { font-size: .75rem; }

.hero h1 {
  font-size: clamp(4.6rem, 5.5vw, 6rem);
  color: #fff;
  line-height: 1.08;
  margin: 0 0 28px;
  animation: fadeUp .6s ease both .1s;
}
.hero h1 em {
  font-style: italic;
  color: var(--rojo);
}

.hero-lead {
  font-size: 1.8rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 40px;
  font-weight: 300;
  animation: fadeUp .6s ease both .2s;
}

/* ─── STAT STRIP ─────────────────────────────────────────── */
.hero-stats {
  display: flex;
  gap: 0;
  margin-bottom: 44px;
  animation: fadeUp .6s ease both .3s;
}
.hero-stat {
  padding: 18px 28px 18px 0;
  border-right: 1px solid rgba(255,255,255,.12);
  margin-right: 28px;
}
.hero-stat:last-child { border-right: none; }
.hero-stat .num {
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--rojo);
  line-height: 1;
  display: block;
}
.hero-stat .label {
  font-size: 1.2rem;
  color: rgba(255,255,255,.5);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  padding-left: 0;
  display: block;
  white-space: break-spaces;
  text-align: left;
  max-width: 300px;
}

/* ─── CTA BUTTONS ────────────────────────────────────────── */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: fadeUp .6s ease both .4s;
}
.btn-fec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s ease;
  letter-spacing: .02em;
}
.btn-fec-primary {
  background: var(--rojo);
  color: #fff;
  box-shadow: 0 4px 20px rgba(200,16,46,.4);
}
.btn-fec-primary:hover {
  background: var(--rojo-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,16,46,.55);
}
.btn-fec-outline {
  background: transparent;
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.25);
}
.btn-fec-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  transform: translateY(-2px);
}
.btn-fec-gold {
  background: var(--dorado);
  color: #fff;
  box-shadow: 0 4px 20px rgba(184,150,58,.35);
}
.btn-fec-gold:hover {
  background: #a07c2a;
  color: #fff;
  transform: translateY(-2px);
}

/* Hero card (right column) */
.hero-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 36px 32px;
  animation: fadeUp .7s ease both .3s;
}
.hero-card-title {
  font-size: 1.8rem;
  color: #fff;
  margin: 0 0 6px;
}
.hero-card-sub {
  font-size: 1.4rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 28px;
}
.price-block {
  background: var(--rojo);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 20px;
  text-align: center;
}
.price-block .price-amount {
  font-size: 3.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.price-block .price-period {
  font-size: 1.6rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.6rem;
  color: rgba(255,255,255,.8);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.benefit-list li:last-child { border-bottom: none; }
.benefit-list li i { color: #5CDB95; margin-top: 8px; flex-shrink: 0; }
.hero-card .btn-fec-primary { width: 100%; justify-content: center; font-size: 1.6rem; padding: 15px; }

/* ─── TRUST BAR ──────────────────────────────────────────── */
.trust-bar {
  background: var(--gris-1);
  border-bottom: 1px solid var(--gris-2);
  padding: 20px 0;
}
.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  color: var(--gris-text);
  font-weight: 500;
}
.trust-item i { color: var(--rojo); font-size: 1.1rem; }

/* ─── SECTION COMMON ─────────────────────────────────────── */
.section { padding: 80px 0; }
.section-alt { background: var(--gris-1); }
.section-dark { background: var(--negro); color: #fff; }

.section-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--rojo);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-title {
  font-size: clamp(2.8rem, 3.5vw, 3.8rem);
  line-height: 1.15;
  margin: 0 0 16px;
}
.section-lead {
  font-size: 1.4rem;
  color: var(--gris-text);
}
.section-dark .section-lead { color: rgba(255,255,255,.6); }
.section-dark .section-title { color: #fff; }

/* ─── BENEFICIOS SOCIO ───────────────────────────────────── */
.benefit-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gris-2);
  height: 100%;
  transition: all .25s ease;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--rojo);
}
.benefit-icon {
  width: 52px; height: 52px;
  background: var(--gris-1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: background .25s;
}
.benefit-card:hover .benefit-icon { background: var(--rojo-glow); }
.benefit-icon i { font-size: 1.8rem; color: var(--rojo); }
.benefit-card h4 { font-size: 2rem; margin: 0 0 8px; }
.benefit-card p { font-size: 1.4rem; color: var(--gris-text); margin: 0; }

/* ─── PROYECTOS ──────────────────────────────────────────── */
.project-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 28px 24px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--rojo);
  transition: height .3s ease;
}
.project-card:hover::before { height: 100%; }
.project-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(200,16,46,.3);
}
.project-num {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: rgba(255,255,255,.25);
  margin-bottom: 12px;
  display: block;
  letter-spacing: .1em;
}
.project-card h4 {
  font-size: 2.4rem;
  color: #fff;
  margin: 0 0 10px;
}
.project-card p {
  font-size: 1.6rem;
  color: rgba(255,255,255,.55);
  margin: 0;
  line-height: 1.65;
}
.project-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--rojo);
  background: rgba(200,16,46,.12);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: .05em;
}

/* ─── GESTIÓN SOCIOS (formularios) ──────────────────────── */
.gestion-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.gestion-card {
  flex: 1;
  min-width: 220px;
  background: #fff;
  border: 2px solid var(--gris-2);
  border-radius: 10px;
  padding: 28px 24px;
  text-align: center;
  transition: all .25s;
}
.gestion-card:hover { border-color: var(--rojo); box-shadow: var(--shadow-md); }
.gestion-card .gc-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.6rem;
}
.gc-alta .gc-icon  { background: rgba(200,16,46,.1); color: var(--rojo); }
.gc-baja .gc-icon  { background: rgba(107,101,96,.1); color: var(--gris-text); }
.gc-cert .gc-icon  { background: rgba(184,150,58,.1); color: var(--dorado); }
.gc-dona .gc-icon  { background: rgba(92,219,149,.1); color: #2DAB68; }
.gc-datos .gc-icon { background: rgba(67,133,245,.1); color: #4385F5; }

.gestion-card h4 { font-size: 1.8rem; margin: 0 0 8px; }
.gestion-card p { color: var(--gris-text); margin: 0 0 20px; min-height: 50px; }
.gestion-card .btn-fec { width: 100%; justify-content: center; }
.btn-fec-dark {
  background: var(--negro);
  color: #fff;
  border-color: var(--negro);
}
.btn-fec-dark:hover { background: #2e2520; color: #fff; }
.btn-fec-green {
  background: #2DAB68;
  color: #fff;
}
.btn-fec-green:hover { background: #218c53; color: #fff; transform: translateY(-2px); }
.btn-fec-muted {
  background: var(--gris-2);
  color: var(--negro);
}
.btn-fec-muted:hover { background: #d8d4ce; color: var(--negro); }
.btn-fec-dorado {
  background: var(--dorado);
  color: #fff;
}
.btn-fec-dorado:hover { background: #a07c2a; color: #fff; transform: translateY(-2px); }
.btn-fec-blue {
  background: #4385F5;
  color: #fff;
}
.btn-fec-blue:hover { background: #2563c9; color: #fff; transform: translateY(-2px); }

/* ─── IMPACTO QUOTE ──────────────────────────────────────── */
.impact-quote {
  background: #ff3458;
  border-radius: 12px;
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
}
.impact-quote::before {
  content: '\201C';
  font-family: var(--font-head);
  font-size: 14rem;
  color: rgba(255,255,255,.08);
  position: absolute;
  top: -40px; left: 20px;
  line-height: 1;
  pointer-events: none;
}
.impact-quote blockquote {
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 2.5vw, 3rem);
  font-style: italic;
  color: #fff;
  line-height: 1.4;
}
.impact-quote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 1.6rem;
  color: rgba(255,255,255,.7);
  font-family: var(--font-body);
}
.impact-quote cite a {
	color: #fff;
}

/* ─── DATOS IMPACTO ──────────────────────────────────────── */
.impact-stat {
  text-align: center;
  padding: 24px 16px;
}
.impact-stat .big-num {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--rojo);
  line-height: 1;
  display: block;
}
.impact-stat p {
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--gris-text);
  margin: 8px 0 0;
}

/* ─── DESGRAVACIÓN ───────────────────────────────────────── */
.desgrav-box {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFF3DC 100%);
  border: 1px solid rgba(184,150,58,.25);
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.desgrav-box .dg-icon {
  font-size: 2.2rem;
  color: var(--dorado);
  flex-shrink: 0;
}
.desgrav-box h4 { font-size: 2rem; margin: 0 0 6px; color: #6B4F10; font-weight: 600; }
.desgrav-box p { font-size: 1.6rem; color: #8A6820; margin: 0; }

/* ─── CONTACT BAR ────────────────────────────────────────── */
.contact-bar {
  background: var(--gris-1);
  border-top: 1px solid var(--gris-2);
  padding: 32px 0;
}
.contact-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--gris-text);
}
.contact-item i { color: var(--rojo); font-size: 1rem; }
.contact-item a { color: var(--gris-text); text-decoration: none; }
.contact-item a:hover { color: var(--rojo); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.fec-footer {
  background: var(--negro);
  color: rgba(255,255,255,.45);
  padding: 24px 0;
  font-size: .82rem;
  text-align: center;
}
.fec-footer a { color: rgba(255,255,255,.45); }
.fec-footer a:hover { color: #fff; }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero { padding: 70px 0 60px; min-height: auto; }
  .hero-stats { gap: 0; flex-wrap: wrap; }
  .hero-stat { padding: 12px 18px 12px 0; margin-right: 16px; }
  .hero-deco-heart { display: none; }
  .fec-nav .nav-links { display: none; }
  .hero-card { margin-top: 40px; }
  .impact-quote { padding: 36px 28px; }
  .desgrav-box { flex-direction: column; text-align: center; }
  .gestion-card { min-width: 100%; }
  .trust-items{gap:10px;}
  .trust-item{gap:5px;}
}

/* Divider ornament */
    .ornament {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }
    .ornament-line { flex: 1; height: 1px; background: var(--gris-2); }
    .ornament i { color: var(--rojo); font-size: .9rem; }

    /* Scroll anchor offset */
    .scroll-target { scroll-margin-top: 80px; }

    /* row fix for equal height in BS3 */
    .row-eq-height { display: flex; flex-wrap: wrap; }
    .row-eq-height > [class*="col-"] { display: flex; flex-direction: column; }
    .row-eq-height > [class*="col-"] > * { flex: 1; }

/* ─── MODAL ─────────────────────────────────────────── */

.fec-modal .modal-lg{
	width: 90%;
}
.fec-modal .modal-dialog { margin-top: 60px; }
  .fec-modal .modal-content {
    border: none; border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,.3);
    font-family: var(--font-body);
  }
  .fec-modal .modal-header { padding: 32px 32px 24px; border: none; position: relative; }
  .modal-header-alta   { background: linear-gradient(135deg, #C8102E 0%, #9B0C22 100%); }
  .modal-header-verde  { background: linear-gradient(135deg, #2DAB68 0%, #1a7a49 100%); }
  .modal-header-dorado { background: linear-gradient(135deg, #B8963A 0%, #7a5f1a 100%); }
  .modal-header-baja   { background: linear-gradient(135deg, #4a4540 0%, #2e2a26 100%); }
  .modal-header-datos  { background: linear-gradient(135deg, #4385F5 0%, #2563c9 100%); }
  .fec-modal .modal-header .close {
    position: absolute; top: 16px; right: 20px;
    color: rgba(255,255,255,.8); opacity: 1;
    font-size: 1.6rem; font-weight: 300; text-shadow: none;
  }
  .fec-modal .modal-header .close:hover { color: #fff; }
  .modal-icon-wrap {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; font-size: 1.4rem;
    background: rgba(255,255,255,.15); color: #fff;
	float: left; margin-right: 2rem;
  }
  .fec-modal .modal-title {
    font-size: 2rem; color: #fff; margin: 0;
  }
  .modal-subtitle { font-size: 1.5rem; color: rgba(255,255,255,.75); margin: 0; }
  .fec-modal .modal-body { padding: 28px 32px; background: #fff; }
  .modal-section-title {
    font-family: var(--font-head); font-size: 1rem; color: var(--negro);
    margin: 0 0 10px; display: flex; align-items: center; gap: 7px;
  }
  .modal-section-title i { color: var(--rojo); }
  .modal-steps { padding-left: 20px; margin: 0; color: var(--gris-text); font-size: .92rem; line-height: 1.7; }
  .modal-steps li { margin-bottom: 8px; }
  .modal-steps li strong { color: var(--negro); }
  .modal-check-list { list-style: none; padding: 0; margin: 0; }
  .modal-check-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: .9rem; color: var(--gris-text);
    padding: 6px 0; border-bottom: 1px solid var(--gris-1);
  }
  .modal-check-list li:last-child { border-bottom: none; }
  .text-rojo  { color: var(--rojo) !important; }
  .text-verde { color: #2DAB68 !important; }
  .modal-impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  .modal-impact-item {
    background: var(--gris-1); border-radius: 8px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .modal-impact-item .impact-euro {
    font-family: var(--font-head); font-size: 1.4rem; font-weight: 900;
    color: #2DAB68; line-height: 1;
  }
  .modal-impact-item span:last-child { font-size: .8rem; color: var(--gris-text); line-height: 1.4; }
  .modal-aside { border-radius: 10px; padding: 22px 20px; margin-bottom: 16px; }
  .modal-aside-rojo  { background: linear-gradient(135deg, #C8102E, #9B0C22); }
  .modal-aside-verde { background: linear-gradient(135deg, #2DAB68, #1a7a49); }
  .aside-price-num {
    font-family: var(--font-head); font-size: 2.8rem; font-weight: 900;
    color: #fff; display: block; line-height: 1;
  }
  .aside-price-label { font-size: .8rem; color: rgba(255,255,255,.7); display: block; margin: 4px 0 16px; }
  .modal-fiscal-badge {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(255,255,255,.12); border-radius: 8px;
    padding: 12px 14px; font-size: .84rem; color: #fff;
  }
  .modal-fiscal-badge i { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
  .modal-fiscal-badge strong { display: block; margin-bottom: 2px; }
  .modal-fiscal-badge span { color: rgba(255,255,255,.75); }
  .modal-contact-box { background: var(--gris-1); border-radius: 8px; padding: 16px 18px; font-size: .88rem; }
  .modal-contact-box p { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
  .modal-contact-box p:last-child { margin: 0; }
  .modal-contact-box i { color: var(--rojo); }
  .modal-contact-box a { color: var(--gris-text); text-decoration: none; }
  .modal-contact-box a:hover { color: var(--rojo); }
  .modal-info-box { display: flex; align-items: flex-start; gap: 14px; border-radius: 8px; padding: 16px 18px; font-size: 2rem; }
  .modal-info-dorado { background: #FFF8EC; border: 1px solid rgba(184,150,58,.25); color: #6B4F10; }
  .modal-info-dorado > i { color: var(--dorado); font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; }
  .modal-info-baja { background: #FFF5F5; border: 1px solid rgba(200,16,46,.15); }
  .fec-modal .modal-footer {
    background: var(--gris-1); border-top: 1px solid var(--gris-2);
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  }
  @media (max-width: 767px) {
    .fec-modal .modal-dialog { margin: 10px; }
    .fec-modal .modal-header, .fec-modal .modal-body, .fec-modal .modal-footer { padding-left: 20px; padding-right: 20px; }
    .modal-impact-grid { grid-template-columns: 1fr; }
    .modal-aside { margin-top: 20px; }
  }