html{
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  color: #fff !important;
}
  
  .body-fixed {
      overflow: hidden !important;
      position: fixed;
      width: 100%;
      left: 0;
      right: 0;
}

:root {
    --primary-blue: rgb(2, 0, 214);
    --primary-progreso: #0042ff;
    --color-letra: rgb(1.960784%,9.803922%,38.431373%);
}
.traslation-option{
    color: #000;
}
.img-container {
    width: 60%;
    height: auto;
    overflow: hidden;
}

.img-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

footer {
    margin: 0 !important;
    width: 100%;              
    overflow-x: hidden;    
    box-shadow: 0 -1px 3px rgba(78,76,76,.27); 
}
  
  /* Logos de colaboradores: sin fondo para PNG con transparencia */
  footer .img-container,
  footer .img-container-footer,
  .img-container-footer,
  .colaboradores-logos,
  .colaboradores-logos .img-container,
  .logo-colaborador,
  .logo-colaborador img {
      background: transparent !important;
      background-color: transparent !important;
  }
  .colaboradores-logos img,
  .logo-colaborador img {
      display: block;
      max-width: 100%;
      height: auto;
      object-fit: contain;
  }
  .colaboradores-logos .img-container {
      width: 100%;
      max-width: 120px;
      margin: 0 auto;
  }
  .colaboradores-logos .img-container a {
      display: block;
      background: transparent !important;
}

@font-face {
    font-family: 'helveltica-bold';
    src: url(fontawesome/webfonts/helvetica-bold.ttf);
}
  .grafica {
    background-color: var(--primary-progreso);
    color: #fff;
    font-family: 'helveltica-bold';
}
  
  .grafica .config-progress {
    margin-top: 20px;
    text-shadow: 2px 1px 4px rgba(0, 0, 0, 0.6);
}
  
  .grafica .config-progress p {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 4px;
      margin: 0;
  }
  
  .grafica .icono-grafica {
      display: inline-block;
    vertical-align: middle; 
    margin-right: 5px;
      flex-shrink: 0;
}

/****video****/
.video-header {
    text-align: center;
    margin-bottom: 20px;
}

.video-title {
    font-size: 48px !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.video {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    z-index: 1;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 254 254 / 76%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    z-index: 2;
    overflow: hidden;
}
.overlay button {
    background: var(--primary-blue);
    font-family: 'Arial', sans-serif;
    border: none;
    padding: 11px 52px;
    padding-left: 83px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    border-radius: 33px;
    pointer-events: auto;
    position: relative;
    z-index: 3;
}


/****sections****/


/** OBRAS**/
.obras-section{
     position: relative;
    width: 100%;
    height: auto;
    min-height: 556px;
    overflow: hidden;
    background: #051962;
    z-index: 1;
    padding: 33px 20px;
}
.obras-quote {
    text-align: center;
    font-size: 33px;
    font-style: italic;
    color: white;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 33px;
}

.obras-quote strong {
    color: white;
    font-weight: bold;
}

.obras-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    margin-top: 20px;
}

.obras-decorative-icon {
    width: 150px;
    height: auto;
    opacity: 0.85;
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.obras-decorative-icon:hover {
    transform: scale(1.05) translateY(-5px);
    opacity: 1;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.obras-section h1 {
    color: white;
    font-size: 72px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.obra-header h4 {
    font-size: 27px;
}

.obras-left-content {
    padding: 20px;
    text-align: center;
    max-width: 500px;
    padding-top: 0;
}

.btn-almas-aplicar{
    background: white;
    border: 2px solid white;
    color: var(--color-letra);
    padding: 4px 67px;
    border-radius: 50px;
    font-size:20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 0;
    
}

    
.btn-almas-aplicar:hover {
    transform: translateY(-2px);
}
.btn-alma-necesitada{
    background: #a70052;
    border: 2px solid #a70052;
    color: #fff;
    padding: 6px 58px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 0;
   
}

    
.btn-alma-necesitada:hover {
    transform: translateY(-2px);
}

/* Botones compactos para acordeones de obras */
.btn-aplicar-alma-acordeon {
    background: white;
    border: 2px solid white;
    color: var(--color-letra);
    padding: 4px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-aplicar-alma-acordeon:hover {
    transform: translateY(-2px);
}

.btn-alma-necesitada-acordeon {
    background: #a70052;
    border: 2px solid #a70052;
    color: #fff;
    padding: 4px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-alma-necesitada-acordeon:hover {
    transform: translateY(-2px);
}

.obra-buttons-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Modal de estatus para carrusel de almas - Minimalista como floating-message */
.status-modal-content {
    background: white;
    border: 2px solid var(--color-letra);
    border-radius: 15px;
    padding: 0;
    width: 400px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: all 0.3s ease;
    position: fixed;
    z-index: 10000;
    pointer-events: auto;
}

.status-modal-header {
    background: var(--color-letra);
    color: white;
    padding: 10px 20px;
    border-radius: 13px 13px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.status-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}

.status-modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.2s ease;
}

.status-modal-close:hover {
    transform: scale(1.2);
}

.status-modal-body {
    padding: 30px;
}

.status-modal-intercessor {
    margin-bottom: 20px;
}

.status-modal-label {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-modal-value {
    font-size: 20px;
    font-weight: 600;
    color: #051962;
    margin-bottom: 15px;
}

.status-modal-date {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.status-modal-date .status-modal-label {
    font-size: 12px;
    margin-bottom: 5px;
}

.status-modal-date .status-modal-value {
    font-size: 16px;
    color: #666;
    margin-bottom: 0;
}

.status-modal-message {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #051962;
}

.status-modal-message p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-style: italic;
}

.status-modal-encouragement {
    margin-bottom: 25px;
}

.status-modal-encouragement p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    text-align: center;
    margin: 0;
}

.status-modal-button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.status-modal-offer-button {
    background: #a70052;
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(167, 0, 82, 0.3);
}

.status-modal-offer-button:hover {
    background: #8b0043;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(167, 0, 82, 0.4);
}

.status-hint {
    font-size: 0.8em;
    color: rgba(255,255,255,0.95);
    cursor: pointer;
    transition: color 0.2s ease;
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.status-hint:hover {
    color: rgba(255,255,255,1);
    text-decoration: underline;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.estatus-badge {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.estatus-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .status-modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .status-modal-header h3 {
        font-size: 20px;
    }

    .status-modal-body {
        padding: 20px;
    }

    .status-modal-offer-button {
        padding: 10px 30px;
        font-size: 16px;
    }
}


.dropdown-divider {
    border-top: 2px solid white;
}

/* ============================================
   POPOVER GLASSMORPHISM UNIFICADO - ALMAS
   ============================================ */

.soul-popover {
    position: absolute;
    z-index: 10000;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
    width: 380px;
    max-width: 90vw;
    opacity: 0;
      transform: scale(0.95);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Glow dorado para Intercedidas */
.soul-popover-interceded {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 0 20px rgba(255, 193, 7, 0.3),
                0 0 40px rgba(255, 215, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Glow azul suave para En Espera */
.soul-popover-waiting {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 0 20px rgba(5, 25, 98, 0.25),
                0 0 40px rgba(30, 58, 138, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.soul-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.soul-popover-title {
    margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
      color: #FFFFFF;
    letter-spacing: 0.3px;
}

.soul-popover-close {
    background: transparent;
    border: none;
      color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.soul-popover-close:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    transform: scale(1.1);
}

.soul-popover-body {
    padding: 20px;
}

.soul-popover-field {
    margin-bottom: 18px;
}

.soul-popover-field:last-of-type {
    margin-bottom: 0;
}

.soul-popover-label {
    font-size: 11px;
    font-weight: 600;
      color: #94A3B8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.soul-popover-value {
    font-size: 16px;
    font-weight: 500;
      color: #ffffff;
    line-height: 1.4;
}

.soul-popover-quote {
    margin-top: 20px;
    padding: 16px 18px;
      background-color: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.soul-popover-quote-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
      color: #ffffff;
    font-style: italic;
    font-weight: 400;
}

/* Estilos para En Espera */
.soul-popover-encouragement {
    margin-bottom: 20px;
}

.soul-popover-encouragement p {
    font-size: 15px;
    line-height: 1.6;
      color: #e0e0e0;
    text-align: center;
    margin: 0;
}

.soul-popover-button-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.soul-popover-offer-button {
    background: #a70052;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(167, 0, 82, 0.3), 0 0 20px rgba(167, 0, 82, 0.4);
    width: 100%;
    max-width: 280px;
}

.soul-popover-offer-button:hover {
    background: #8b0043;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(167, 0, 82, 0.4);
}

/* Flecha/Puntero del popover */
.soul-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
    z-index: -1;
}

/* Ajustes para modo oscuro (si se implementa en el futuro) */
@media (prefers-color-scheme: dark) {
    .soul-popover {
        background: rgba(30, 30, 50, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .soul-popover-interceded {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                    0 2px 8px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(255, 193, 7, 0.4),
                    0 0 40px rgba(255, 215, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .soul-popover-waiting {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                    0 2px 8px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(5, 25, 98, 0.35),
                    0 0 40px rgba(30, 58, 138, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .soul-popover-title {
        color: #ffffff;
    }
    
    .soul-popover-value {
        color: #e0e0e0;
    }
    
    .soul-popover-label {
        color: #b0b0b0;
    }
    
    .soul-popover-close {
        color: #b0b0b0;
    }
    
    .soul-popover-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .soul-popover-encouragement p {
        color: #e0e0e0;
    }
    
    .soul-popover-quote {
        background-color: rgba(30, 58, 138, 0.2);
        border-left-color: rgba(30, 58, 138, 0.4);
    }
    
    .soul-popover-quote-text {
        color: #e0e0e0;
    }
    
    .soul-popover-arrow {
        border-top-color: rgba(30, 30, 50, 0.85);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .soul-popover {
        width: 95%;
        max-width: 95vw;
    }
    
    .soul-popover-header {
        padding: 14px 18px;
    }
    
    .soul-popover-title {
        font-size: 16px;
    }
    
    .soul-popover-body {
        padding: 18px;
    }
    
    .soul-popover-value {
        font-size: 15px;
    }
    
    .soul-popover-encouragement p {
        font-size: 14px;
    }
    
    .soul-popover-quote-text {
        font-size: 14px;
    }
    
    .soul-popover-offer-button {
        padding: 10px 24px;
        font-size: 15px;
    }
}
  
  @media (max-width: 640px) {
      .soul-popover {
          position: fixed !important;
          bottom: 0 !important;
          left: 50% !important;
          right: auto !important;
          top: auto !important;
          transform: translate3d(-50%, 100%, 0) !important;
          width: calc(100% - 20px) !important;
          max-width: 450px !important;
          border-radius: 20px 20px 0 0;
          transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
          max-height: 60vh;
          min-height: auto;
          overflow-y: auto;
          margin: 0 auto;
          will-change: transform, opacity;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          perspective: 1000px;
          -webkit-perspective: 1000px;
      }
      
      .soul-popover.show {
          transform: translate3d(-50%, 0, 0) !important;
          opacity: 1;
      }
      
      .soul-popover-header {
          padding: 12px 16px;
          position: sticky;
          top: 0;
          background: rgba(15, 23, 42, 0.95);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          z-index: 1;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      .soul-popover-title {
          font-size: 1rem;
          margin: 0;
      }
      
      .soul-popover-body {
          padding: 16px;
      }
      
      .soul-popover-field {
          margin-bottom: 12px;
      }
      
      .soul-popover-field:last-of-type {
          margin-bottom: 0;
      }
      
      .soul-popover-label {
          font-size: 10px;
          margin-bottom: 4px;
      }
      
      .soul-popover-value {
          font-size: 14px;
      }
      
      .soul-popover-encouragement {
          margin-bottom: 16px;
      }
      
      .soul-popover-encouragement p {
          font-size: 13px;
          line-height: 1.4;
          margin: 0;
      }
      
      .soul-popover-quote {
          padding: 12px 14px;
          margin-top: 12px;
      }
      
      .soul-popover-quote-text {
          font-size: 13px;
          line-height: 1.4;
      }
      
      .soul-popover-button-container {
          margin-top: 12px;
      }
      
      .soul-popover-offer-button {
          padding: 10px 24px;
          font-size: 14px;
          max-width: 100%;
          width: 100%;
      }
      
      .soul-popover-arrow {
          display: none;
    }
}

/* ============================================
   SECCIÓN REFERENCIAS BIBLIOGRÁFICAS
   ============================================ */

.referencias-section {
    background: white;
    padding: 80px 20px;
    min-height: 100vh;
}

.referencias-container {
    max-width: 900px;
    margin: 0 auto;
}

.referencias-header {
    text-align: center;
    margin-bottom: 60px;
}

.referencias-title {
    font-size: 42px;
    font-weight: 600;
    color: var(--color-letra);
    margin-bottom: 20px;
    line-height: 1.2;
}

.referencias-title-en {
    display: block;
    font-size: 32px;
    color: #666;
    font-weight: 400;
    margin-top: 8px;
    font-style: italic;
}

/* Tarjetas de Referencias */
.referencia-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.referencia-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.referencia-header-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(30, 58, 138, 0.1);
}

.referencia-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-letra);
    margin: 0;
    line-height: 1.3;
}

.referencia-title-en {
    display: block;
    font-size: 18px;
    color: #666;
    font-weight: 400;
    margin-top: 6px;
    font-style: italic;
}

.referencia-body {
    color: #333;
}

.referencia-description {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 24px;
}

.referencia-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.referencia-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: var(--color-letra);
    border: 1px solid rgba(30, 58, 138, 0.2);
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.referencia-link:hover {
    background: var(--color-letra);
    color: white;
    border-color: var(--color-letra);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.2);
}

.referencia-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.referencia-link:hover .referencia-link-icon {
    transform: translate(2px, -2px);
}

.referencia-note {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin: 16px 0 0 0;
    padding-left: 20px;
    border-left: 3px solid rgba(163, 21, 69, 0.3);
}

.referencias-footer {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e9ecef;
}

.referencias-back-button {
    display: inline-block;
    padding: 14px 40px;
    background: var(--color-letra);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.2);
}

.referencias-back-button:hover {
    background: #00114a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.3);
    color: white;
}

/* Responsive para Referencias */
@media (max-width: 768px) {
    .referencias-section {
        padding: 50px 15px;
    }
    
    .referencias-title {
        font-size: 32px;
    }
    
    .referencias-title-en {
        font-size: 24px;
    }
    
    .referencia-card {
        padding: 24px 20px;
        margin-bottom: 24px;
    }
    
    .referencia-title {
        font-size: 24px;
    }
    
    .referencia-title-en {
        font-size: 16px;
    }
    
    .referencia-description {
        font-size: 15px;
    }
    
    .referencia-links {
        flex-direction: column;
        gap: 12px;
    }
    
    .referencia-link {
        width: 100%;
        justify-content: center;
    }
    
    .referencias-back-button {
        padding: 12px 32px;
        font-size: 15px;
    }
}

/***Testimonios ***/
.testimonios-section {
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 60%),linear-gradient(135deg, #7a0045 0%, #0a0020 50%, #0014a8 100%);
    padding: 46px 58px;
}
 .testimonio-card {
    background: rgb(255 255 255 / 8%);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 251 251);
    border-radius: 20px;
    padding: 40px 30px;
    color: white;
    width: 343px;
    min-height: 332px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset -13px -11px 20px 6px rgb(255 255 255 / 15%);
}
.testimonios-container {
    position: relative;
    display: flex;
      gap: 20px;
    max-width: 1200px;
    width: 100%;
    align-items: center;
    justify-content: center;
}
  
  .testimonios-viewport {
      overflow: hidden;
      flex: 1;
      min-width: 0;
      padding: 0 16px;
  }
  
  .testimonios-track {
      display: flex;
      gap: 24px;
      transition: transform 0.35s ease;
  }
  
  .testimonios-viewport .testimonio-card {
      flex: 0 0 100%;
      min-width: 0;
      box-sizing: border-box;
  }
  
  @media (min-width: 768px) {
      .testimonios-viewport .testimonio-card {
          flex: 0 0 33.333%;
      }
  }
  
  .testimonios-sin-datos {
      padding: 40px 24px;
      text-align: center;
  }
  
  .testimonios-sin-datos p {
      margin: 0;
      color: rgba(255, 255, 255, 0.85);
      font-size: 1.1rem;
      line-height: 1.6;
}

.body-testimonio{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testimonio-text {
    line-height: 1.6;
    flex-grow: 1;
}

.testimonio-autor {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
}

.agregar-testimonio {
    margin-top: 60px;
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.agregar-testimonio:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
/* Sección principal hero */
.hero-section {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 60%), 
        linear-gradient(109deg, rgb(164 11 78 / 82%) 0%, rgba(10, 0, 32, 0.85) 50%, #0000dada 100%), 
        url(images/Nancy.jpg);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    align-items: center;
}
.hero-content{
    padding: 33px 46px;
}
.hero-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.hero-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 25px;
    margin-bottom: 20px;
    font-weight: 100;
}
.hero-text h1 {
    color: white;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Animación fade-in con slide-up para el título */
.hero-title-animated {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}

/* Estilos para el efecto typewriter en la cita */
.typewriter-quote {
    white-space: pre-wrap; /* Mantener saltos de línea */
    word-wrap: break-word;
    overflow-wrap: break-word;
    visibility: hidden; /* Ocultar hasta que inicie la animación */
    min-height: 1.5em; /* Prevenir saltos de línea bruscos */
}

.typewriter-cursor {
    display: inline-block;
    color: white;
    animation: blinkCursor 1s infinite;
    margin-left: 2px;
    font-weight: 300;
    opacity: 0.9;
}

@keyframes blinkCursor {
    0%, 50% {
        opacity: 0.9;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Optimización para móviles - prevenir saltos de línea bruscos */
@media (max-width: 768px) {
    .typewriter-quote {
        min-height: 2em;
        line-height: 1.6;
    }
    
    .hero-title-animated {
        transform: translateY(20px); /* Menos movimiento en móvil */
    }
}


.hero-description strong {
    color: white;
    font-weight: bold;
}
.bible-quote {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    font-size: 25px;
    font-weight: 100;
}

.logo {
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo::before {
    content: "🙏";
    font-size: 1.5rem;
}

.language-selector {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    
}

.cta-button {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 9px 95px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.souls-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    width: fit-content;   
    max-width: 100%;       
    text-align: center;
    color: white;
    margin: auto;
    padding: 20px;       
}


.souls-card h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.souls-number {
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.nav-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}
/* Sección ¿Cómo funciona? */

.how-it-works {
    background: white;
    
}

.how-content {
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: 1fr 500px;
    gap: 80px;
    align-items: center;
}

.how-it-works .col-sm-6:last-child {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.how-it-works .col-sm-6:last-child img {
    width: 100%;
    height: 100%;
    max-height: 800px;
    object-fit: cover;
    object-position: center;
}
.how-text{
    padding: 41px;
    margin-top:35px;
}
.how-text h2 {
    font-size: 3rem;
    color: var(--color-letra);
    margin-bottom: 30px;
    font-weight: 400;
    
}

.how-text h2 span {
    color: var(--color-letra);

}

.how-subtitle {
    font-size: 25px;
    color: var(--color-letra);
  
    margin-bottom: 40px;
}

.steps-list {
    list-style: none;
}

.step-item {
    display: flex;
    margin-bottom: 25px;
    align-items: flex-start;
}



.step-text {
    font-size: 25px;
    color: var(--color-letra);
}

.step-text strong {
    color: var(--color-letra);
    font-weight: bold;
}
.suscribir-button{
    background: var(--color-letra);
    border: 2px solid white;
    color: white;
    padding: 2px 45px;
    border-radius: 50px;
    font-size: 20px;
    cursor: pointer;
    font-weight: lighter;
    transition: all 0.3s ease;
    margin: 0;
    margin-left: 20px;
    flex-shrink: 0;
}

.suscribir-button:hover {
    background: var(--color-letra);
    transform: translateY(-2px);
}
.register-button {
    background: var(--color-letra);
    border: 2px solid white;
    color: white;
    padding: 4px 50px;
    padding-right: 12px;
    border-radius: 50px;
    font-size: 19px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

    
.register-button:hover {
    background: var(--color-letra);
    transform: translateY(-2px);
}
  
  /* Sección Como Funciona V2 */
  .como-funciona-v2 {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      background-color: #f8f9fa;
      padding: 60px 0;
  }
  
  .como-funciona-v2 #root-como-funciona {
      width: 100%;
      min-height: 420px;
      flex-shrink: 0;
  }
  
  .como-funciona-v2 #root-como-funciona .actua-step-btn {
      border-radius: 9999px !important;
  }
  
  .como-funciona-embed-section {
      padding: 40px 0 !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      background-color: #f8f9fa;
      overflow: hidden;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }
  
  .como-funciona-embed-section #root-como-funciona {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      min-height: 420px;
      flex-shrink: 0;
      box-sizing: border-box;
  }
  
  .como-funciona-embed-section .como-funciona-react-cards-only {
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      background-color: #f8f9fa;
  }
  
  .como-funciona-embed-section .cf-card-image-wrap {
      position: absolute !important;
      inset: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
  }
  
  .como-funciona-embed-section .cf-card-img {
      width: 100% !important;
      height: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
      max-width: none !important;
      object-fit: cover !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
  }
  
  .como-funciona-embed-section .como-funciona-react-cards-only > div:first-of-type {
      gap: 0 !important;
  }
  
  .como-funciona-embed-section .como-funciona-react-cards-only > div:first-of-type > * {
      margin: 0 !important;
  }
  
  .como-funciona-embed-section .como-funciona-v2-content,
  #como-funciona-embed-section .como-funciona-v2-content {
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 0 20px !important;
      box-sizing: border-box;
  }
  
  .como-funciona-embed-section .como-funciona-v2-title,
  .como-funciona-embed-section .como-funciona-v2-subtitle,
  #como-funciona-embed-section .como-funciona-v2-title,
  #como-funciona-embed-section .como-funciona-v2-subtitle {
      text-align: center !important;
      width: 100% !important;
      max-width: 100%;
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
  .como-funciona-embed-section .como-funciona-v2-title .highlight,
  #como-funciona-embed-section .como-funciona-v2-title .highlight {
      color: #0301d6 !important;
  }
  
  .como-funciona-embed-section .como-funciona-v2-subtitle strong {
      color: #2623da;
  }
  
  .como-funciona-embed-section .como-funciona-v2-cta .como-funciona-v2-button {
      background: #2623da !important;
  }
  
  /* Botón "HACER INDULGENCIA" de la sección Cómo funciona: formato pastilla gruesa */
  .como-funciona-embed-section .como-funciona-v2-cta .register-button,
  .como-funciona-embed-section .como-funciona-v2-cta .como-funciona-v2-button {
      background: #2623da !important;
      padding: 15px 50px !important;
      min-height: 58px !important;
      border-radius: 50px !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 24px rgba(38, 35, 218, 0.4) !important;
      border: none !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.5rem !important;
  }
  .como-funciona-embed-section .como-funciona-v2-cta .register-button:hover,
  .como-funciona-embed-section .como-funciona-v2-cta .como-funciona-v2-button:hover {
      box-shadow: 0 6px 28px rgba(38, 35, 218, 0.5) !important;
  }
  .como-funciona-embed-section .como-funciona-v2-cta .register-button img,
  .como-funciona-embed-section .como-funciona-v2-cta .como-funciona-v2-button img {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      object-fit: contain;
  }
  
  .carousel-embed-section {
      margin-top: 48px;
      width: 100%;
      background-image: url('../resources/images/manchas.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
  
  .carousel-embed-section #root-carousel-almas {
      min-height: 0;
  }
  
  /* Cápsula REGISTRADA: degradado radial dorado #FFD700, pulsación 3s (indulgens) */
  .carousel-embed-section .carousel-container-v2 .glow-effect.alma-capsule-highlighted-registro {
      box-shadow: 0 0 0 5px rgba(255,255,255,0.6), 0 0 32px rgba(255,215,0,0.75), 0 0 64px rgba(255,215,0,0.45), 0 0 96px rgba(255,215,0,0.25) !important;
      border: 3px solid rgba(255, 215, 0, 1) !important;
      outline: 3px solid rgba(255, 215, 0, 0.9) !important;
      outline-offset: 3px !important;
      animation: alma-highlight-pulse-registro 3s ease-in-out infinite;
  }
  @keyframes alma-highlight-pulse-registro {
      0%, 100% {
          box-shadow: 0 0 0 5px rgba(255,255,255,0.6), 0 0 32px rgba(255,215,0,0.75), 0 0 64px rgba(255,215,0,0.45), 0 0 96px rgba(255,215,0,0.25);
          transform: scale(1.14);
      }
      50% {
          box-shadow: 0 0 0 6px rgba(255,255,255,0.7), 0 0 44px rgba(255,215,0,0.85), 0 0 80px rgba(255,215,0,0.5), 0 0 112px rgba(255,215,0,0.3);
          transform: scale(1.16);
      }
  }

  /* Cápsula INTERCEDIDA: brillo azul como botón #5050FF, pulsación 3s (indulgens) */
  .carousel-embed-section .carousel-container-v2 .glow-effect.alma-capsule-highlighted-intercesion {
      box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 0 28px rgba(80,80,255,0.7), 0 0 56px rgba(80,80,255,0.45), 0 0 84px rgba(80,80,255,0.25) !important;
      border: 3px solid rgba(80, 80, 255, 1) !important;
      outline: 3px solid rgba(80, 80, 255, 0.9) !important;
      outline-offset: 3px !important;
      animation: alma-highlight-pulse-intercesion 3s ease-in-out infinite;
  }
  @keyframes alma-highlight-pulse-intercesion {
      0%, 100% {
          box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 0 28px rgba(80,80,255,0.7), 0 0 56px rgba(80,80,255,0.45), 0 0 84px rgba(80,80,255,0.25);
          transform: scale(1.12);
      }
      50% {
          box-shadow: 0 0 0 5px rgba(255,255,255,0.6), 0 0 40px rgba(80,80,255,0.85), 0 0 72px rgba(80,80,255,0.55), 0 0 100px rgba(80,80,255,0.3);
          transform: scale(1.14);
      }
  }
  
  /* Modal detalle alma: que el contenedor se ajuste al texto (como en localhost) */
  .soul-hero-detail-content {
      max-width: min(1024px, 95vw) !important;
  }
  .soul-hero-detail-content .flex-1 {
      min-width: 0;
  }
  .soul-hero-detail-content blockquote,
  .soul-hero-detail-content .leading-relaxed {
      max-width: 100% !important;
      line-height: 1.65 !important;
  }
  .soul-hero-detail-content blockquote {
      padding: 0.75rem 0.5rem;
  }
  
  .carousel-embed-section .carousel-container-v2 button.rounded-full,
  .carousel-embed-section .carousel-container-v2 input.rounded-full {
      border-radius: 9999px;
  }
  
  .como-funciona-embed-section .como-funciona-react-embed button.rounded-full,
  .como-funciona-embed-section .como-funciona-react-embed button .rounded-full,
  .como-funciona-embed-section .como-funciona-react-embed .rounded-full {
      border-radius: 9999px;
  }
  
  .como-funciona-embed-section .como-funciona-react-embed .hacer-indulgencia-embed-btn {
      border-radius: 9999px !important;
      min-height: 58px !important;
      padding: 15px 50px !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 24px rgba(3, 1, 214, 0.4) !important;
  }
  .como-funciona-embed-section .como-funciona-react-embed .hacer-indulgencia-embed-btn:hover {
      box-shadow: 0 6px 28px rgba(3, 1, 214, 0.5) !important;
  }
  .como-funciona-embed-section .como-funciona-react-embed .hacer-indulgencia-embed-btn img {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
  }
  .como-funciona-embed-section .como-funciona-react-embed .hacer-indulgencia-embed-btn > span {
      border-radius: 50% !important;
  }
  
  .como-funciona-v2-sections {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      max-width: 1200px;
      gap: 0;
      margin-top: 40px;
      padding: 0 20px;
  }
  
  /* Tablet: 2 columnas */
  @media (max-width: 1024px) {
      .como-funciona-v2-sections {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
      }
  }
  
  /* Mobile: 1 columna */
  @media (max-width: 640px) {
      .como-funciona-v2-sections {
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 0 15px;
      }
      
      .como-funciona-v2-section {
          min-height: 280px;
          height: 280px;
      }
  }
  
  .como-funciona-v2-section {
      position: relative;
      width: 100%;
      min-height: 400px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: all 0.6s ease-out;
  }
  
  .section-1 {
      background-image: url('./images/comofunciona1.png');
      filter: blur(2px);
  }
  
  .section-2 {
      background-image: url('./images/comofunciona2.png');
      filter: blur(2px);
  }
  
  .section-3 {
      background-image: url('./images/comofunciona3.png');
      filter: blur(2px);
  }
  
  .section-4 {
      background-image: url('./images/comofunciona4.png');
      filter: blur(2px);
  }
  
  .como-funciona-v2-section:hover,
  .como-funciona-v2-section.is-active {
      filter: blur(0px);
      transform: scale(1.05);
  }
  
  
  .section-text {
      position: absolute;
      z-index: 2;
      color: #000000;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      padding: 0;
      background: transparent;
      border: none;
      backdrop-filter: none;
      box-shadow: none;
      letter-spacing: 0.02em;
      white-space: nowrap;
  }
  
  .section-1 .section-text {
      color: white;
      padding: 15px 35px;
      background: transparent;
      border-radius: 50px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  .section-2 .section-text {
      top: auto;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .section-3 .section-text {
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .section-4 .section-text {
      top: auto;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .section-description {
      position: absolute;
      z-index: 2;
      color: white;
      font-size: 0.95rem;
      font-weight: 400;
      text-align: center;
      padding: 0 20px;
      opacity: 0;
      transform: translateY(20px);
      filter: blur(10px);
      transition: all 0.5s ease-out 0.1s;
      pointer-events: none;
      /* Mantener visible una vez activado */
      visibility: hidden;
  }
  
  .section-description.has-appeared {
      visibility: visible;
  }
  
  .section-1 .section-description {
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      width: 80%;
      max-width: 300px;
  }
  
  .section-2 .section-text {
      bottom: 120px;
      top: auto;
      transform: translateX(-50%);
  }
  
  .section-2 .section-description {
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      width: 80%;
      max-width: 300px;
      color: #000000;
  }
  
  .section-3 .section-text {
      top: 40px;
      transform: translateX(-50%);
  }
  
  .section-3 .section-description {
      top: 100px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      width: 80%;
      max-width: 300px;
      color: #000000;
  }
  
  .section-4 .section-text {
      bottom: 120px;
      top: auto;
      transform: translateX(-50%);
  }
  
  .section-4 .section-description {
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      width: 80%;
      max-width: 300px;
      color: #000000;
  }
  
  .como-funciona-v2-section:hover .section-description,
  .como-funciona-v2-section.is-active .section-description,
  .como-funciona-v2-section .section-description.has-appeared {
      opacity: 1;
      filter: blur(0px);
      visibility: visible;
  }
  
  .section-1:hover .section-description,
  .section-1.is-active .section-description,
  .section-1 .section-description.has-appeared {
      transform: translateX(-50%) translateY(0);
  }
  
  .section-2:hover .section-description,
  .section-2.is-active .section-description,
  .section-2 .section-description.has-appeared {
      transform: translateX(-50%) translateY(0);
  }
  
  .section-3:hover .section-description,
  .section-3.is-active .section-description,
  .section-3 .section-description.has-appeared {
      transform: translateX(-50%) translateY(0);
  }
  
  .section-4:hover .section-description,
  .section-4.is-active .section-description,
  .section-4 .section-description.has-appeared {
      transform: translateX(-50%) translateY(0);
  }
  
  
  @keyframes breath {
      0%, 100% {
          transform: scale(1.05);
      }
      50% {
          transform: scale(1);
      }
  }
  
  .como-funciona-v2-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1200px;
      padding: 0 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 0;
  }
  
  .como-funciona-v2-title {
      font-size: 3.5rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 20px 0;
      letter-spacing: 0.02em;
      text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
  }
  
  .como-funciona-v2-title .highlight {
      color: #3b82f6;
  }
  
  .como-funciona-v2-subtitle {
      font-size: 1.5rem;
      color: #475569;
      margin: 0;
      font-style: italic;
      line-height: 1.6;
      text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  }
  
  .como-funciona-v2-subtitle strong {
      font-weight: 700;
      color: #1e293b;
  }
  
  .como-funciona-v2-cta {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2rem;
      padding: 0 1rem 1.5rem;
  }
  
  .como-funciona-v2-cta .como-funciona-v2-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  /* Responsive para Como Funciona V2 */
  /* Responsive para títulos y subtítulos */
  @media (max-width: 768px) {
      .como-funciona-v2 {
          min-height: 500px;
      }
      
      .como-funciona-v2-content {
          padding: 60px 20px;
      }
      
      .como-funciona-v2-title {
          font-size: 2.5rem;
      }
      
      .como-funciona-v2-subtitle {
          font-size: 1.2rem;
      }
  }
  
  @media (max-width: 640px) {
      .como-funciona-v2 {
          padding: 40px 0;
      }
      
      .como-funciona-v2-content {
          padding: 40px 15px;
      }
      
      .como-funciona-v2-title {
          font-size: 2rem;
      }
      
      .como-funciona-v2-subtitle {
          font-size: 1rem;
      }
      
      /* Reducir tamaño de textos en secciones */
      .section-text {
          font-size: 1.3rem;
      }
      
      .section-description {
          font-size: 1rem; /* Mínimo 16px equivalente */
          padding: 16px 20px;
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75));
          border-radius: 12px;
          backdrop-filter: blur(8px);
          line-height: 1.5;
          min-height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      
      .section-1 .section-description {
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.65));
          color: white;
      }
      
      .section-button {
          font-size: 0.85rem;
          padding: 10px 22px;
      }
  }
  
  /* Detectar dispositivos táctiles */
  @media (hover: none) and (pointer: coarse) {
      .como-funciona-v2-section {
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
      }
      
      .como-funciona-v2-section:active {
          transform: scale(0.98);
      }
}

.candle-image {
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.candle-image::after {
    content: "🕯️";
    font-size: 5rem;
    position: absolute;
}
.logo-almas {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Sección de Almas */
.texto-almas h2{
    font-size: 55px;
    color: var(--color-letra);
    margin-bottom: 30px;
    font-weight: 400;
}
.soul-card {
    animation: slideIn 0.5s ease-out;
    min-height: 220px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 16px 18px !important;
    width: 100%;
    gap: 8px;
}

.soul-card.empty-slot {
    opacity: 0.6;
    border: 2px dashed #ccc;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.soul-card.empty-slot .label {
    color: #999;
    font-weight: normal;
}

.soul-card .soul-name {
    flex-grow: 0;
    display: block;
    min-height: auto;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.soul-card .intercessor-name {
    min-height: 20px;
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Grid Container para almas */
.souls-grid-container {
    width: 100%;
    padding: 20px 10px 20px 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    max-width: 100%;
    margin: 0;
}

.souls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    position: relative; /* Necesario para posicionamiento absoluto del popover */
    gap: 20px;
    width: 100%;
    max-width: 100%;
    flex: 1;
    transition: all 0.4s ease;
    padding-right: 10px;
}

/* Responsive: 4 columnas en desktop con tarjetas más anchas */
@media (min-width: 1200px) {
    .souls-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
    
    .soul-card {
        padding: 22px 28px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .souls-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .souls-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Expandir más los contenedores en móvil con una sola columna */
    .souls-grid-container {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Asegurar que las tarjetas usen todo el ancho disponible */
    .soul-card {
        width: 100%;
        max-width: 100%;
        padding: 14px 16px !important;
        min-height: 200px !important;
        gap: 6px !important;
    }
    
    /* Reducir tamaños de fuente y espaciados en móvil */
    .soul-name {
        font-size: 17px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }
    
    .soul-date {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
    }
    
    .estatus-badge {
        font-size: 11px !important;
        padding: 5px 10px !important;
        margin-top: 4px !important;
    }
}

/* Mantener compatibilidad con código antiguo */
.souls-cards {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}
.souls-section {
    background: #ffffff;
    padding: 33px 20px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

  .almas-v2-section {
      position: relative;
      width: 100%;
      min-height: 100vh;
      padding: 80px 20px;
      background: linear-gradient(135deg, #f8f0ff 0%, #e0f0ff 100%);
      background-image: url('../resources/images/manchas.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: visible;
      transition: filter 0.8s ease;
  }
  
  .almas-v2-section.almas-v2-dimmed-background {
      filter: brightness(0.3);
  }
  
  .almas-v2-quote {
      text-align: center;
      font-size: 28px;
      font-style: italic;
      font-weight: 400;
      font-family: 'Playfair Display', 'Georgia', serif;
      color: #1A305E;
      margin-bottom: 60px;
      margin-top: 0;
      padding: 0 20px;
      line-height: 1.6;
  }
  
  .almas-v2-quote strong {
      font-weight: 700;
      color: #1A305E;
  }
  
  .almas-v2-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../resources/images/manchas.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 1;
      opacity: 0.6;
  }
  
  .almas-v2-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translate(-50%, -50%);
      animation: popInCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      pointer-events: none;
  }
  
  .almas-v2-circle-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      z-index: 11;
      height: 100%;
      padding: 40px;
      text-align: center;
      z-index: 11;
      pointer-events: none;
  }
  
  .almas-v2-circle-icon {
      width: 120px;
      height: auto;
      margin-bottom: 15px;
      pointer-events: none;
  }
  
  .almas-v2-circle-title {
      font-size: 2rem;
      font-weight: 800;
      font-family: 'Inter', sans-serif;
      letter-spacing: 3px;
      color: #0A1F44;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
      margin: 0 0 12px 0;
      pointer-events: none;
  }
  
  .almas-v2-circle-search {
      width: 80%;
      max-width: 250px;
      padding: 10px 15px 10px 40px;
      border: 2px solid rgba(0, 0, 0, 0.2);
      border-radius: 50px;
      font-size: 0.9rem;
      font-style: italic;
      margin-bottom: 15px;
      outline: none;
      background: #ffffff url('../resources/images/buscar.png') no-repeat 15px center;
      background-size: 18px;
      color: var(--color-letra, #050e38);
      position: relative;
      z-index: 12;
      pointer-events: auto;
  }
  
  .almas-v2-circle-content {
      position: relative;
  }
  
  .almas-v2-circle-search::placeholder {
      color: #8a9ba8;
      opacity: 0.7;
  }
  
  .almas-v2-dropdown-resultados {
      position: absolute;
      top: auto;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 400px;
      max-height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      margin-top: 0;
      z-index: 100;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      display: none;
      pointer-events: auto;
  }
  
  @media (max-width: 640px) {
      .almas-v2-dropdown-resultados {
          background: #0F172A;
          max-height: 40vh;
          border-radius: 15px;
      }
  }
  
  .almas-v2-dropdown-resultados::-webkit-scrollbar {
      width: 6px;
  }
  
  .almas-v2-dropdown-resultados::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
  }
  
  .almas-v2-dropdown-resultados::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
  }
  
  .almas-v2-dropdown-resultados::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.3);
  }
  
  .almas-v2-dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .almas-v2-dropdown-item:last-child {
      border-bottom: none;
  }
  
  .almas-v2-dropdown-item:hover {
      background: rgba(255, 255, 255, 0.1);
  }
  
  .almas-v2-dropdown-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
  }
  
  .almas-v2-dropdown-avatar img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .almas-v2-dropdown-nombre {
      flex: 1;
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem;
      font-weight: 500;
      color: #FFFFFF;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .almas-v2-dropdown-estado {
      flex-shrink: 0;
      font-size: 0.7rem !important;
      padding: 4px 8px !important;
      margin: 0 !important;
  }
  
  .almas-v2-dropdown-flecha {
      flex-shrink: 0;
      color: rgba(255, 255, 255, 0.6);
      font-size: 1rem;
      transition: all 0.2s ease;
  }
  
  .almas-v2-dropdown-item:hover .almas-v2-dropdown-flecha {
      color: rgba(255, 255, 255, 1);
      transform: translateX(3px);
  }
  
  .almas-v2-dropdown-loading,
  .almas-v2-dropdown-sin-resultados {
      padding: 20px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
  }
  
  .almas-v2-circle-button {
      background: #a70052;
      color: white;
      border: none;
      padding: 5px 38px;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 auto;
      transition: all 0.3s ease;
      position: relative;
      z-index: 12;
      pointer-events: auto;
  }
  
  .almas-v2-circle-button:hover {
      background: #a70052;
      transform: translateY(-2px);
  }
  
  .almas-v2-circle-button img {
      width: 30px;
      height: auto;
  }
  
  .almas-v2-globos-container {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      z-index: 1;
      pointer-events: none;
  }
  
  .almas-v2-globos-container .alma-globo {
      pointer-events: auto;
  }
  
  .alma-globo.dimmed {
      opacity: 0.1 !important;
      filter: blur(4px) !important;
      transition: opacity 0.8s ease, filter 0.8s ease !important;
      pointer-events: none;
  }
  
  .alma-globo.highlighted {
      opacity: 1 !important;
      filter: none !important;
      z-index: 20 !important;
      transition: opacity 0.8s ease, filter 0.8s ease, z-index 0s !important;
      pointer-events: auto !important;
      border: none !important;
      outline: none !important;
      background: transparent !important;
      box-shadow: none !important;
  }
  
  .alma-globo.highlighted * {
      opacity: 1 !important;
      filter: none !important;
  }
  
  .alma-globo.highlighted .alma-globo-image {
      filter: drop-shadow(0 0 30px #B50064) drop-shadow(0 0 15px #B50064) !important;
      transition: filter 0.8s ease !important;
  }
  
  .almas-v2-globos-container.almas-v2-grid-busqueda {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      padding: 40px 20px;
      max-width: 1200px;
      margin: 0 auto;
      pointer-events: auto;
      position: relative;
      z-index: 15;
      min-height: auto;
  }
  
  .alma-busqueda-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 15px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      opacity: 0;
      animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      pointer-events: auto;
      position: relative;
      z-index: 16;
      width: 100%;
      max-width: 100%;
      min-width: 0;
  }
  
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  .alma-busqueda-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
      background: rgba(255, 255, 255, 0.15);
  }
  
  .alma-busqueda-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.2);
  }
  
  .alma-busqueda-avatar img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .alma-busqueda-nombre {
      flex: 1;
      font-family: 'Inter', sans-serif;
      font-size: 1.1rem;
      font-weight: 600;
      color: #FFFFFF;
      text-align: left;
  }
  
  .alma-busqueda-card .alma-globo-status {
      margin-top: 0;
      flex-shrink: 0;
  }
  
  .almas-v2-sin-resultados {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 20px;
      color: rgba(255, 255, 255, 0.8);
      font-family: 'Inter', sans-serif;
      font-size: 1.2rem;
      pointer-events: auto;
  }
  
  .alma-globo {
      position: absolute;
      width: 120px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      z-index: 5;
      cursor: pointer;
      opacity: 0;
      animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 3s ease-in-out infinite 0.6s;
      transition: transform 0.3s ease, z-index 0s;
      pointer-events: auto;
  }
  
  .alma-globo:nth-child(even) {
      animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 3s ease-in-out infinite 2.1s;
  }
  
  .alma-globo:hover {
      transform: scale(1.1);
      z-index: 20;
  }
  
  .alma-globo-image {
      width: 120px;
      height: 120px;
      background-image: url('../resources/images/globoalma.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
  }
  
  .alma-globo-image img {
      width: 70px;
      height: 70px;
      object-fit: cover;
      object-position: center;
      border-radius: 50%;
      z-index: 1;
  }
  
  .alma-globo-info {
      margin-top: 10px;
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
  }
  
  .alma-globo-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: #2c3e5a;
      word-wrap: break-word;
      text-align: center;
      line-height: 1.2;
  }
  
  .alma-globo-date {
      font-size: 0.75rem;
      color: #8a9ba8;
      white-space: nowrap;
  }
  
  .alma-globo-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-top: 4px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      min-height: 32px;
  }
  
  .alma-globo-status-image {
      width: 80px;
      height: auto;
      object-fit: contain;
      flex-shrink: 0;
  }
  
  .alma-globo-status-text {
      line-height: 1;
      white-space: nowrap;
  }
  
  .alma-globo-status.alma-espera {
      background: rgba(255, 193, 7, 0.2);
  }
  
  .alma-globo-status.alma-espera .alma-globo-status-text {
      color: #d88d00;
  }
  
  .alma-globo-status.alma-intercedida {
      background: rgba(0, 200, 150, 0.2);
  }
  
  .alma-globo-status.alma-intercedida .alma-globo-status-text {
      color: #007a5e;
  }
  
  .alma-globo.alma-espera .alma-globo-image {
      filter: drop-shadow(0 0 25px rgba(255, 204, 0, 0.7)) drop-shadow(0 0 15px rgba(255, 204, 0, 0.5));
  }
  
  .alma-globo.alma-intercedida .alma-globo-image {
      filter: drop-shadow(0 0 25px rgba(0, 200, 150, 0.5)) drop-shadow(0 0 15px rgba(0, 200, 150, 0.3));
  }
  
  @keyframes popIn {
      0% {
          opacity: 0;
          transform: scale(0);
          filter: blur(10px);
      }
      100% {
          opacity: 1;
          transform: scale(1);
          filter: blur(0);
      }
  }
  
  @keyframes popInCenter {
      0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0);
          filter: blur(10px);
      }
      100% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          filter: blur(0);
      }
  }
  
  @keyframes float {
      0%, 100% {
          transform: translateY(0px);
      }
      50% {
          transform: translateY(-10px);
      }
  }
  
  @media (max-width: 768px) {
      .almas-v2-section {
          min-height: 600px;
          padding: 60px 15px;
      }
  
      .almas-v2-circle {
          width: 300px;
          height: 300px;
      }
  
      .almas-v2-circle-content {
          padding: 30px;
      }
  
      .almas-v2-circle-icon {
          width: 80px;
          margin-bottom: 10px;
      }
  
      .almas-v2-circle-title {
          font-size: 1.5rem;
          margin-bottom: 10px;
      }
  
      .almas-v2-circle-search {
          width: 85%;
          max-width: 200px;
          padding: 8px 12px 8px 35px;
          font-size: 0.85rem;
          margin-bottom: 12px;
          background-size: 16px;
      }
  
      .almas-v2-dropdown-resultados {
          width: 95%;
          max-width: 350px;
          max-height: 300px;
          border-radius: 15px;
      }
  
      .almas-v2-dropdown-item {
          padding: 10px 12px;
          gap: 10px;
      }
  
      .almas-v2-dropdown-avatar {
          width: 28px;
          height: 28px;
      }
  
      .almas-v2-dropdown-avatar img {
          width: 24px;
          height: 24px;
      }
  
      .almas-v2-dropdown-nombre {
          font-size: 0.85rem;
      }
  
      .almas-v2-dropdown-estado {
          font-size: 0.65rem !important;
          padding: 3px 6px !important;
      }
  
      .almas-v2-dropdown-flecha {
          font-size: 0.9rem;
      }
  
      .almas-v2-circle-button {
          padding: 5px 20px;
          font-size: 0.9rem;
      }
  
      .almas-v2-circle-button img {
          width: 25px;
      }
  
      .alma-globo {
          width: 100px;
          min-height: 160px;
      }
  
      .alma-globo-image {
          width: 100px;
          height: 100px;
      }
  
      .alma-globo-image img {
          width: 60px;
          height: 60px;
      }
  
      .alma-globo-name {
          font-size: 0.75rem;
      }
  
      .alma-globo-date {
          font-size: 0.7rem;
      }
  
      .alma-globo-status {
          font-size: 0.7rem;
          padding: 5px 12px;
          gap: 6px;
          min-height: 28px;
      }
  
      .alma-globo-status-image {
          width: 70px;
      }
  }
  
  @media (max-width: 640px) {
      .almas-v2-section {
          min-height: auto;
          padding: 20px 15px;
          display: flex;
          flex-direction: column;
      }
  
      .almas-v2-quote {
          font-size: 1.3rem;
          margin-bottom: 30px;
          padding: 0 10px;
      }
  
      .almas-v2-circle {
          position: relative;
          width: 100%;
          max-width: 100%;
          height: auto;
          min-height: 200px;
          border-radius: 20px;
          margin-bottom: 20px;
          transform: none;
          top: auto;
          left: auto;
          animation: none;
          opacity: 1;
      }
  
      .almas-v2-circle-content {
          padding: 20px;
      }
  
      .almas-v2-circle-icon {
          width: 60px;
          margin-bottom: 8px;
      }
  
      .almas-v2-circle-title {
          font-size: 1.2rem;
          margin-bottom: 8px;
      }
  
      .almas-v2-circle-search {
          width: 100%;
          max-width: 100%;
          padding: 10px 15px 10px 40px;
          font-size: 0.9rem;
          margin-bottom: 12px;
          background-size: 18px;
      }
  
      .almas-v2-circle-button {
          padding: 10px 24px;
          font-size: 0.9rem;
      }
  
      .almas-v2-circle-button img {
          width: 24px;
      }
  
      .almas-v2-globos-container {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 15px;
          min-height: auto;
          height: auto;
      }
  
      .almas-v2-globos-container.almas-v2-grid-busqueda {
          display: grid;
          grid-template-columns: 1fr;
          gap: 15px;
          padding: 20px 15px;
      }
  
      .alma-busqueda-card {
          padding: 15px;
          gap: 15px;
      }
  
      .alma-busqueda-avatar {
          width: 50px;
          height: 50px;
      }
  
      .alma-busqueda-avatar img {
          width: 40px;
          height: 40px;
      }
  
      .alma-busqueda-nombre {
          font-size: 1rem;
      }
  
      .alma-globo {
          position: relative;
          width: 100%;
          min-height: auto;
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 15px;
          padding: 15px;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border-radius: 15px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          opacity: 1;
          transform: none;
          animation: none;
          z-index: 1;
      }
  
      .alma-globo:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }
  
      .alma-globo-image {
          width: 80px;
          height: 80px;
          flex-shrink: 0;
      }
  
      .alma-globo-image img {
          width: 60px;
          height: 60px;
      }
  
      .alma-globo-info {
          flex: 1;
          margin-top: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
      }
  
      .alma-globo-name {
          font-size: 1rem;
          font-weight: 600;
          text-align: left;
      }
  
      .alma-globo-date {
          font-size: 0.85rem;
      }
  
      .alma-globo-status {
          font-size: 0.75rem;
          padding: 6px 12px;
          gap: 8px;
          min-height: 32px;
          margin-top: 0;
      }
  
      .alma-globo-status-image {
          width: 60px;
      }
  
      .alma-globo.search-highlighted {
          border: 2px solid #B50064 !important;
          box-shadow: 0 0 20px rgba(181, 0, 100, 0.6), 0 4px 15px rgba(0, 0, 0, 0.2) !important;
          opacity: 1 !important;
          z-index: 10 !important;
          transform: scale(1.02);
          transition: all 0.3s ease;
      }
  
      .almas-v2-globos-container.has-search-highlighted .alma-globo:not(.search-highlighted) {
          opacity: 0.6;
          transition: opacity 0.3s ease;
      }
  }
  
  @media (max-width: 480px) {
      .almas-v2-section {
          padding: 15px 10px;
      }
  
      .almas-v2-circle {
          min-height: 180px;
      }
  
      .almas-v2-circle-content {
          padding: 15px;
      }
  
      .almas-v2-circle-icon {
          width: 50px;
          margin-bottom: 6px;
      }
  
      .almas-v2-circle-title {
          font-size: 1.1rem;
          margin-bottom: 10px;
      }
  
      .almas-v2-circle-search {
          padding: 8px 12px 8px 35px;
          font-size: 0.85rem;
          margin-bottom: 12px;
          background-size: 16px;
      }
  
      .almas-v2-circle-button {
          padding: 8px 20px;
          font-size: 0.85rem;
      }
  
      .almas-v2-circle-button img {
          width: 20px;
      }
  
      .alma-globo {
          padding: 12px;
          gap: 12px;
      }
  
      .alma-globo-image {
          width: 70px;
          height: 70px;
      }
  
      .alma-globo-image img {
          width: 50px;
          height: 50px;
      }
  
      .alma-globo-name {
          font-size: 0.9rem;
      }
  
      .alma-globo-date {
          font-size: 0.8rem;
      }
  
      .alma-globo-status {
          font-size: 0.7rem;
          padding: 5px 10px;
          gap: 6px;
          min-height: 28px;
      }
  
      .alma-globo-status-image {
          width: 55px;
      }
  }
  
.souls-section .col-sm-9 {
    padding-left: 15px;
    padding-right: 20px;
    max-width: 100%;
}

.souls-section .col-sm-3 {
    padding-right: 15px;
    padding-left: 20px;
}

.suscripcion-section {
    background: white;
    padding: 15px 20px;
}

.suscripcion-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.suscripcion-texto {
    text-align: center;
    font-size: 30px;
    font-style: italic;
    color: var(--color-letra);
    margin: 0;
    flex: 1;
}
  
  .franja-suscripcion-comunidad {
      background: #f8fafc;
      padding: 2rem 1.5rem;
  }
  
  .franja-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: center;
  }
  
  @media (min-width: 768px) {
      .franja-container {
          grid-template-columns: 1fr 1fr;
      }
  }
  
  .franja-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
  }
  
  .franja-texto {
      margin: 0 0 1rem;
      font-size: 1.75rem;
      font-style: italic;
      line-height: 1.4;
      color: var(--color-letra, #1e293b);
  }
  
  .franja-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem 2rem;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-radius: 50px;
      font-size: 1.125rem;
      font-weight: 300;
      cursor: pointer;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  
  .franja-btn:hover {
      transform: translateY(-1px);
  }
  
  .franja-btn-newsletter {
      background: var(--color-letra, #1e293b);
      color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  
  .franja-btn-newsletter:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .franja-btn-icon {
      flex-shrink: 0;
  }
  
  .franja-btn-comunidad {
      background: #cd1f1f;
      color: #fff;
      border-color: transparent;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  
  .franja-btn-comunidad:hover {
      background: #b01a1a;
      box-shadow: 0 4px 12px rgba(205, 31, 31, 0.3);
  }
  
  @media (max-width: 767px) {
      .franja-suscripcion-comunidad {
          padding: 1.5rem 1rem;
      }
  
      .franja-container {
          gap: 1.5rem;
      }
  
      .franja-texto {
          font-size: 1.25rem;
      }
  
      .franja-btn {
          padding: 0.5rem 1.5rem;
          font-size: 1rem;
          border-radius: 50px;
      }
}

.souls-quote {
    text-align: center;
    font-size: 30px;
    font-style: italic;
      font-weight: 400;
      font-family: 'Playfair Display', 'Georgia', serif;
      color: #1A305E;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
      transition: opacity 0.5s ease-in-out;
      min-height: 60px;
}

.souls-quote strong {
    color: var(--color-letra);
    font-weight: bold;
}

.souls-content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.souls-panel {
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.souls-panel h2 {
    color: var(--color-letra, #050e38);
}

.search-box {
    width: 100%;
    padding: 9px 20px 9px 45px; 
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    margin: 34px 0 30px;
    outline: none;
    background: #ffffff url('images/buscar.png') no-repeat 15px center;
    background-size: 18px;
    color: var(--color-letra, #050e38);
}

.search-box::placeholder {
    color: #999;
}

.search-box:focus {
    border-color: #FFC300;
    background-color: #ffffff;
}

.offer-button {
    background: #a70052;
    color: white;
    border: none;
    padding: 5px 38px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.offer-button:hover {
    background: #a70052;
    transform: translateY(-2px);
}

.offer-button-carrusel {
    background: #a70052;
    color: white;
    border: none;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.offer-button-carrusel:hover {
    background: #a70052;
    transform: translateY(-2px);
}

.donacion-button {
    background: #640354;
    color: white;
    border: none;
    padding: 2px 48px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    gap: 10px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.donacion-button:hover {
    background: #640354;
    transform: translateY(-2px);
}
  
  .modal-dona-aqui {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
  }
  
  .modal-dona-aqui-content {
      background: rgba(20, 20, 28, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 28px 24px;
      max-width: 420px;
      width: 100%;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  }
  
  .modal-dona-aqui-texto {
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      margin: 0 0 20px 0;
  }
  
  .modal-dona-aqui-mailto {
      color: rgba(200, 180, 255, 0.95);
      text-decoration: underline;
  }
  
  .modal-dona-aqui-mailto:hover {
      color: rgba(220, 200, 255, 1);
  }
  
  .modal-dona-aqui-cerrar {
      display: block;
      width: 100%;
      padding: 12px 20px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      color: #fff;
      font-size: 0.95rem;
      cursor: pointer;
  }
  
  .modal-dona-aqui-cerrar:hover {
      background: rgba(255, 255, 255, 0.18);
  }
  
.souls-cards {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Estilos para tarjetas de almas - Fondo #efefef */
.soul-card {
    background: #efefef;
    border-radius: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    min-height: 200px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    gap: 6px;
}

.soul-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.soul-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25),
                0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Borde dorado para intercedidas */
.soul-card.estatus-intercedida {
    border: 2px solid #FFC300;
    box-shadow: 0 0 15px rgba(255, 195, 0, 0.2);
    position: relative;
}

.soul-card.estatus-intercedida::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 195, 0, 0.4), rgba(255, 215, 0, 0.2));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.soul-card.estatus-intercedida:hover {
    box-shadow: 0 0 30px rgba(255, 195, 0, 0.4),
                0 0 50px rgba(255, 215, 0, 0.25),
                0 15px 40px rgba(0, 0, 0, 0.25);
    border-color: #FFD700;
    transform: translateY(-8px) scale(1.02);
}

.soul-card.estatus-intercedida:hover::before {
    opacity: 1;
}

/* Avatar circular */
.soul-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.soul-avatar-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4A90E2 0%, #FFC300 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
}

/* Icono de paloma/luz para intercedidas */
/* Icono de paloma eliminado - ya no se usa
.soul-interceded-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: rgba(255, 195, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 10;
}
*/

/* Icono de mensaje */
.soul-message-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.soul-card.estatus-intercedida .soul-message-icon {
    right: 50px; /* Ajustar posición cuando hay icono de intercedida */
}

/* Nombre del alma */
.soul-name {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: var(--color-letra, #050e38);
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
    display: block;
}

/* Fecha */
.soul-date {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    margin-top: 2px;
    gap: 5px;
    flex-shrink: 0;
}

/* Fondo #efefef detrás de la cruz para que coincida con el fondo de la tarjeta */
.soul-date img {
    background: #efefef;
    padding: 2px;
    border-radius: 2px;
}

/* Badge de estatus */
.estatus-badge {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 12px;
    margin-bottom: 0;
    margin-top: auto;
    display: inline-block;
    flex-shrink: 0;
}

/* Responsive para pantallas pequeñas - ajustes adicionales */
@media (max-width: 767px) {
    .souls-grid-container {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .souls-grid {
        gap: 10px;
    }
}

.estatus-badge.estatus-intercedida {
    background: rgba(212, 237, 218, 0.9);
    color: #155724;
    border: 1px solid rgba(195, 230, 203, 0.5);
}

.estatus-badge.estatus-en-espera {
    background: rgba(255, 243, 205, 0.9);
    color: #856404;
    border: 1px solid rgba(255, 234, 167, 0.5);
}

/* Botón "Ofrecer Indulgencia" dorado */
.soul-card-offer-button {
    background: linear-gradient(135deg, #FFC300 0%, #FFD700 100%);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
    justify-content: center;
    font-family: 'Arial', sans-serif;
}

.soul-card-offer-button:hover {
    background: linear-gradient(135deg, #FFD700 0%, #FFC300 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 195, 0, 0.4);
}

/* Iconos de gestión discretos */
.soul-card-actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.soul-card:hover .soul-card-actions {
    opacity: 1;
}

.soul-card-action-btn {
    background: rgba(100, 100, 100, 0.2);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    transition: all 0.3s ease;
}

.soul-card-action-btn:hover {
    background: rgba(100, 100, 100, 0.3);
    transform: scale(1.1);
}

.soul-card .label {
    color: var(--color-letra);
    font-family: 'Arial', sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
}

.soul-name {
    font-size: 19px;
    color: var(--color-letra);
    margin-bottom: 10px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}


.intercessor-name {
    font-size: 23px;
    color: var(--color-letra);
    
}

.soul-date {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    margin-top: 2px;
    gap: 5px;
    flex-shrink: 0;
}

.nav-arrow {
    background: transparent;
    border:  solid #ffffff;
    color: var(--color-letra);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    transition: all 0.3s ease;
}
.nav-arrow-testimonios{
    background: transparent;
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    transition: all 0.3s ease;
    
}
/* Section Banner de anuncios */
    .announcements-banner {
        background: linear-gradient(135deg, #7a0045 0%, #0a0020 50%, #0014a8 100%);
        color: white;
        padding: 30px 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        animation: scroll 30s linear infinite;
        font-size: 25px;
        font-style: italic;
    }

    @keyframes scroll {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }

    h1 {
        color: white;
        font-weight: bold;
        margin-bottom: 21px;
        font-family: 'Arial', sans-serif !important;
    }

/**responsivo**/
/* --------- RESPONSIVE --------- */

/* Responsive 
@media (max-width: 768px) {
   
    
    
    
    .soul-card {
        margin: 0;
        flex: none !important; 
        width: auto !important;
        max-width: none !important;
    }

    .floating-message {
        top: -10px;
        right: -10px;
        left: -10px;
        max-width: none;
        position: absolute;
    }
    
    .opcion-registro-alma {
        padding: 12px !important;
        margin: 8px 0 !important;
    }
}*/
@media (max-width: 992px) {
    .img-container {
        width: 100%;
    }
    .donacion-button{
        font-size: 15px;
    }
    .btn-almas-aplicar{
        padding: 2px 47px;
        font-size: 18px;
    }
    
    .souls-quote {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }
    h1 {
        font-size: 45px !important;
    }
    .cta-button{
        padding: 10px 60px;
        font-size: 0.95rem;
        min-height: 46px;
    } 

    .hero-description{
        font-size: 22px;
    }
    .bible-quote{
        font-size: 22px;
    }
    .hero-content {
        padding: 33px 33px;
    }
    
    .hero-text h1 {
        font-size: 3rem;
    }
    .obras-section {
        height: auto;
    }
    /***Como funciona indulgens **/
    .register-button{
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 11px;
        margin: 10px auto;
        width: 264px !important;
        display: block;
    }
    .register-button img{width: 30%}

    
    /*****subscribe***/
    .suscribir-button{
        font-size: 18px;
        padding: 8px 30px;
        margin-left: 15px;
        min-height: 44px;
    }
    .suscribir-button img{
        width: 35%;
        max-width: 60px;
    }
    
    .suscripcion-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .suscripcion-texto {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .suscripcion-section {
        padding: 25px 15px;
    }

    .how-text {padding: 3px;}
    .how-text h2{font-size: 38px;}
    .how-subtitle{font-size: 22px;}
    .step-text{font-size: 20px;}

    /***ALMAS***/
    .offer-button img{width: 12%}
    
    .offer-button {
        padding: 5px 20px;
        margin-bottom: 25px;
    }

    .souls-cards {
        flex-direction: column; 
        justify-content: center;
        align-items: center;
    }
    .soul-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .soul-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .soul-card:not(.empty-slot) {
        width: 100%;
    }
    
    .soul-card .label {
        font-size: 16px;
    }
    .nav-arrow {
        top: 50%;
    }
    
    .nav-arrow.prev {
        transform: rotate(90deg);
    }

    .nav-arrow.next {
        transform: rotate(90deg);
    }
    /** ANUNCIOS**/
    .scrolling-text{
        width: 100%;
    }
    /****OBRAS HOY****/
    .btn-alma-necesitada{
        padding: 8px 20px;
        margin-bottom: 25px;
        font-size: 17px;
    }

    .progress-step {
        width: 21% !important;
    }
   
    /**TESTIMONIOS**/
    .testimonios-section{
        padding: 45px 16px;
    }
    .agregar-testimonio{
        padding: 8px 20px;
        margin-bottom: 25px;
        font-size: 15px;
    }

    /**FOOTER**/
    .img-container-footer{
        place-self: center;
    }
    footer{
        padding: 30px !important;
    }
    
}

@media (max-width: 768px) {
    .souls-quote {
        font-size: 1.3rem;
    }

    .souls-cards {
        gap: 15px;
    }

    /* Estilos responsive para grid de almas - una sola columna en móvil */
    .souls-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 5px;
    }

    .soul-card {
        padding: 20px 22px !important;
        min-height: 260px;
        width: 100%;
        max-width: 100%;
    }

    .soul-avatar {
        width: 60px;
        height: 60px;
    }

    .soul-avatar-gradient {
        font-size: 24px;
    }

    .soul-name {
        font-size: 16px;
    }

    .soul-date {
        font-size: 12px;
    }

    .soul-card-offer-button {
        padding: 10px 20px;
        font-size: 13px;
    }

    .soul-card-actions {
        opacity: 1; /* Siempre visibles en móvil */
    }

    /* Icono de paloma eliminado - ya no se usa
    .soul-interceded-icon {
        width: 25px;
        height: 25px;
        font-size: 14px;
        top: 10px;
        right: 10px;
    }
    */

    .soul-message-icon {
        width: 20px;
        top: 10px;
        right: 10px;
    }

    .soul-card.estatus-intercedida .soul-message-icon {
        right: 40px;
    }
}

@media (max-width: 480px) {
    .souls-quote {
        font-size: 1.1rem;
    }

    .search-box {
        font-size: 0.9rem;
        padding: 8px 15px 8px 40px;
        background-size: 16px;
    }

    /* Estilos adicionales para móviles muy pequeños */
    .souls-grid {
        gap: 10px;
    }

    .soul-card {
        padding: 15px 12px;
        min-height: 260px;
    }

    .soul-avatar {
        width: 50px;
        height: 50px;
    }

    .soul-avatar-gradient {
        font-size: 20px;
    }

    .soul-name {
        font-size: 14px;
    }

    .soul-card-offer-button {
        padding: 8px 16px;
        font-size: 12px;
    }
    }
    
@media (max-width: 768px) {
    /* Sección de Suscripción - Móviles */
    .suscripcion-section {
        padding: 20px 10px;
    }
    
    .suscripcion-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .suscripcion-texto {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    
    .suscribir-button {
        font-size: 16px;
        padding: 12px 35px;
        margin-left: 0;
        width: 100%;
        max-width: 300px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .suscribir-button img {
        width: 28px;
        max-width: 28px;
        height: auto;
    }
    
    /* Sección Conocer más (Hero) - Móviles */
    .cta-button {
        padding: 12px 40px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 280px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .hero-description {
        font-size: 18px;
    }
    
    .bible-quote {
        font-size: 18px;
    }
    
    .hero-content {
        padding: 25px 20px;
    }
    
    /* Estilos específicos para video en móviles */
    .video {
        position: relative;
        overflow: hidden;
    }
    
    .overlay {
        height: 100vh !important;
        min-height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .video-slider-container {
        height: 100vh !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }
    
    .video-slider-wrapper {
        width: 100%;
        position: relative;
    }
    
    .video-slide {
        height: 100vh !important;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .video-slide iframe {
        width: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        border: none;
        display: block;
    }
    
    .video-preview {
        height: 100vh !important;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .video-preview iframe {
        width: 100% !important;
        min-height: 100vh;
        border: none;
        display: block;
    }

}


/********************************
  SECCIÓN DE VIDEOS PREMIUM
********************************/

.video {
    position: relative;
    padding: 120px 20px;
    background: linear-gradient(135deg, #2c3e6d 0%, #3d5288 50%, #4d6ba3 100%);
    overflow: hidden;
}

/* Glow decorativo */
.video::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    pointer-events: none;
}

/* Header */
.espacio{
    margin-bottom: 10px;
}
.video-header {
    max-width: 1056px;
    margin: 0 auto 70px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.video-header h2 {
    font-size: 46px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: .5px;
}

.video-header p {
    font-size: 18px;
    color: rgba(255,255,255,.75);
    max-width: 700px;
    margin: 0 auto;
}

/* Grid */
.video-thumbnails-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    justify-items: center;
}

/* Card */
.video-thumbnail-link {
    text-decoration: none;
}

.video-thumbnail {
    position: relative;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;

    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(30, 58, 138, 0.2);

    box-shadow: 0 30px 60px rgb(210 208 208 / 17%), inset 0 0 0 1px rgba(255, 255, 255, .05);

    transition: transform .35s ease, box-shadow .35s ease;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.9);
}

/* Hover */
.video-thumbnail-link:hover .video-thumbnail {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 80px rgb(15 15 15 / 33%), 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Overlay */
.thumbnail-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.55)
        );

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

/* Play */
.play-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #0a1f44;

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

    font-size: 22px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.45);

    transition: transform .3s ease;
}

.video-thumbnail-link:hover .play-icon {
    transform: scale(1.15);
}





/* Corregir colores de texto específicamente en los acordeones de obras del modal de indulgencia */
.modal-indulgencia .obra-tipo-header {
      color: #FFFFFF !important;
}

.modal-indulgencia .obra-tipo-header span {
      color: #FFFFFF !important;
}

.modal-indulgencia .obra-item {
      color: #FFFFFF !important;
}

.modal-indulgencia .obra-nombre {
      color: #FFFFFF !important;
}

.modal-indulgencia .obra-fecha {
      color: rgba(255, 255, 255, 0.7) !important;
}

.modal-indulgencia .obra-condiciones {
      color: rgba(255, 255, 255, 0.6) !important;
}

/* Ventana flotante para mensajes */
.floating-message {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    border: 2px solid var(--color-letra);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    max-width: 280px;
    min-width: 200px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

/* Modal de Suscripción */
.modal-suscripcion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content-suscripcion {
    background: white;
    border-radius: 15px;
    max-width: 420px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header-suscripcion {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-suscripcion h3 {
    margin: 0;
    color: #333;
    font-size: 1.3rem;
}

.close-modal {
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: #000;
}

.modal-body-suscripcion {
    padding: 15px;
}

.modal-body-suscripcion p {
    margin-bottom: 12px;
    color: #333;
    font-size: 0.95rem;
}

.form-group-suscripcion {
    margin-bottom: 15px;
}

.form-group-suscripcion label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.input-suscripcion {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.input-suscripcion:focus {
    outline: none;
    border-color: #007bff;
}

.modal-buttons-suscripcion {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-cancelar, .btn-suscribir {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancelar {
    background: #6c757d;
    color: white;
}

.btn-cancelar:hover {
    background: #5a6268;
}

.btn-suscribir {
    background: #007bff;
    color: white;
}

.btn-suscribir:hover {
    background: #0056b3;
}

.mensaje-suscripcion {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

.mensaje-suscripcion.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-suscripcion.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


.floating-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo para fecha de testimonio */
.testimonio-fecha {
    color: #ccc;
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 10px;
    display: block;
}


/* Modal de Testimonio */
.modal-testimonio {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content-testimonio {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header-testimonio {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-testimonio h3 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.close-modal-testimonio {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal-testimonio:hover {
    color: #000;
}

.modal-body-testimonio {
    padding: 20px;
}

.modal-body-testimonio p {
    margin-bottom: 20px;
    color: #333;
    font-size: 1rem;
}

.form-group-testimonio {
    margin-bottom: 20px;
}

.form-group-testimonio label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.input-testimonio {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}

.input-testimonio:focus {
    outline: none;
    border-color: #007bff;
}

.textarea-testimonio {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.textarea-testimonio:focus {
    outline: none;
    border-color: #007bff;
}

.modal-buttons-testimonio {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-cancelar-testimonio {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-cancelar-testimonio:hover {
    background: #5a6268;
}

.btn-enviar-testimonio {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-enviar-testimonio:hover {
    background: #0056b3;
}

.mensaje-testimonio {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

.mensaje-testimonio.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-testimonio.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.modal-registro-alma {
      --modal-registro-bg: rgba(15, 23, 42, 0.72);
      --modal-registro-blur: 15px;
      --modal-registro-border: rgba(255, 255, 255, 0.18);
      --modal-registro-radius: 28px;
      --modal-registro-text: #FFFFFF;
      --modal-registro-text-muted: rgba(255, 255, 255, 0.85);
      --modal-registro-input-bg: rgba(15, 15, 20, 0.6);
      --modal-registro-input-border: rgba(255, 255, 255, 0.15);
      --modal-registro-input-blur: 5px;
      --modal-registro-input-focus-border: rgba(139, 92, 246, 0.7);
      --modal-registro-input-focus-glow: rgba(139, 92, 246, 0.35);
      --modal-registro-accent: #cd1f1f;
      --modal-registro-accent-hover: #b01a1a;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
      z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content-registro-alma {
      background: var(--modal-registro-bg);
      backdrop-filter: blur(var(--modal-registro-blur));
      -webkit-backdrop-filter: blur(var(--modal-registro-blur));
      border: 1px solid var(--modal-registro-border);
      border-radius: var(--modal-registro-radius);
      max-width: 560px;
    width: 90%;
      max-height: 620px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      position: relative;
      overflow: hidden;
}

.modal-header-registro-alma {
      flex-shrink: 0;
      padding: 20px 24px;
      border-bottom: 1px solid var(--modal-registro-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
      background: var(--modal-registro-bg);
      backdrop-filter: blur(var(--modal-registro-blur));
      -webkit-backdrop-filter: blur(var(--modal-registro-blur));
}

.modal-header-registro-alma h3 {
    margin: 0;
      color: var(--modal-registro-text);
      font-size: 1.35rem;
      font-weight: 700;
}

.close-modal-registro-alma {
    background: none;
    border: none;
      font-size: 28px;
    cursor: pointer;
      color: var(--modal-registro-text-muted);
    padding: 0;
      width: 36px;
      height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
      border-radius: 8px;
      transition: all 0.3s ease;
}

.close-modal-registro-alma:hover {
      color: var(--modal-registro-text);
      background: rgba(255, 255, 255, 0.1);
}

.modal-body-registro-alma {
      flex: 1;
      min-height: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }
  
  #registroAlmaSteps {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
  }
  
  .registro-alma-steps-inner {
      display: flex;
      height: 100%;
      width: 300%;
      transition: transform 0.3s ease;
  }
  
  .registro-alma-steps-inner.step-2 {
      transform: translateX(-33.333%);
  }
  
  .registro-alma-steps-inner.step-3 {
      transform: translateX(-66.666%);
  }
  
  .paso-registro-alma {
      width: 33.333%;
      flex-shrink: 0;
      padding: 24px;
      overflow-y: auto;
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: none;
  }
  
  .paso-registro-alma.active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
  }
  
  .paso-registro-alma.step-enter {
      opacity: 1;
      transform: translateX(0);
  }
  
  .paso-registro-alma.step-exit {
      opacity: 0;
      transform: translateX(-20px);
  }
  
  .paso-registro-alma.step-enter-back {
      opacity: 1;
      transform: translateX(0);
  }
  
  .paso-registro-alma.step-exit-back {
      opacity: 0;
      transform: translateX(20px);
  }
  
  .paso-registro-alma h4 {
      margin: 0 0 8px 0;
      color: var(--modal-registro-text);
      font-size: 1.25rem;
      font-weight: 700;
  }
  
  .paso-registro-alma > p {
    margin-bottom: 20px;
      color: var(--modal-registro-text-muted);
      font-size: 0.95rem;
      line-height: 1.5;
  }
  
  .form-row-registro-alma {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: stretch;
  }
  
  .form-row-registro-alma .form-group-registro-alma {
      min-width: 0;
}

.form-group-registro-alma {
      margin-bottom: 16px;
}

.form-group-registro-alma label {
    display: block;
      margin-bottom: 6px;
      color: var(--modal-registro-text-muted);
    font-weight: 500;
      font-size: 0.9rem;
}

.input-registro-alma {
    width: 100%;
      padding: 16px;
      border: 1px solid var(--modal-registro-input-border);
      border-radius: 10px;
    font-size: 1rem;
    box-sizing: border-box;
      background: var(--modal-registro-input-bg);
      color: var(--modal-registro-text);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      backdrop-filter: blur(var(--modal-registro-input-blur));
      -webkit-backdrop-filter: blur(var(--modal-registro-input-blur));
  }
  
  .input-registro-alma::placeholder {
      color: rgba(255, 255, 255, 0.5);
}

.input-registro-alma:focus {
    outline: none;
      border-color: var(--modal-registro-input-focus-border);
      background: rgba(15, 15, 20, 0.75);
      box-shadow: 0 0 0 1px var(--modal-registro-input-focus-border), 0 0 20px var(--modal-registro-input-focus-glow);
}

.select-registro-alma {
    width: 100%;
      padding: 16px;
      border: 1px solid var(--modal-registro-input-border);
      border-radius: 10px;
    font-size: 1rem;
    box-sizing: border-box;
      background: var(--modal-registro-input-bg);
      color: var(--modal-registro-text);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      backdrop-filter: blur(var(--modal-registro-input-blur));
      -webkit-backdrop-filter: blur(var(--modal-registro-input-blur));
}

.select-registro-alma:focus {
    outline: none;
      border-color: var(--modal-registro-input-focus-border);
      background: rgba(15, 15, 20, 0.75);
      box-shadow: 0 0 0 1px var(--modal-registro-input-focus-border), 0 0 20px var(--modal-registro-input-focus-glow);
  }
  
  .select-registro-alma option {
      background: rgba(15, 15, 20, 0.98);
      color: var(--modal-registro-text);
  }
  
  .modal-footer-registro-alma {
      flex-shrink: 0;
      padding: 16px 24px;
      border-top: 1px solid var(--modal-registro-border);
    display: flex;
      gap: 12px;
      justify-content: flex-end;
      background: var(--modal-registro-bg);
      backdrop-filter: blur(var(--modal-registro-blur));
      -webkit-backdrop-filter: blur(var(--modal-registro-blur));
  }
  
  .modal-footer-registro-alma .btn-cancelar-indulgencia,
  .modal-footer-registro-alma .btn-siguiente-indulgencia {
      min-width: 140px;
      border-radius: 9999px !important;
  }

  .modal-footer-registro-alma .btn-siguiente-indulgencia {
      background: linear-gradient(135deg, rgb(167, 0, 82) 0%, rgb(194, 0, 106) 100%) !important;
      box-shadow: 0 4px 14px rgba(167, 0, 82, 0.45) !important;
  }

  .modal-footer-registro-alma .btn-siguiente-indulgencia:hover {
      box-shadow: 0 6px 20px rgba(167, 0, 82, 0.6) !important;
      transform: translateY(-1px);
  }

.mensaje-registro-alma {
      margin-top: 12px;
      padding: 10px 14px;
      border-radius: 10px;
    font-weight: 500;
      font-size: 0.9rem;
}

.mensaje-registro-alma.success {
      background: rgba(40, 167, 69, 0.2);
      color: #d4edda;
      border: 1px solid rgba(40, 167, 69, 0.4);
}

.mensaje-registro-alma.error {
      background: rgba(220, 53, 69, 0.2);
      color: #f8d7da;
      border: 1px solid rgba(220, 53, 69, 0.4);
}

.pregunta-intercesor {
      background: rgba(255, 255, 255, 0.06);
    padding: 20px;
      border-radius: 16px;
      margin: 16px 0;
    text-align: center;
      border: 1px solid var(--modal-registro-border);
}

.pregunta-intercesor h4 {
      margin: 0 0 12px 0;
      color: var(--modal-registro-text) !important;
}

.pregunta-intercesor p {
      color: var(--modal-registro-text-muted) !important;
      margin: 8px 0;
      font-size: 0.95rem;
}

.pregunta-intercesor p strong {
      color: var(--modal-registro-text) !important;
      font-weight: 600;
  }
  
  .registro-alma-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 16px;
  }
  
  .card-registro-alma {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--modal-registro-border);
      border-radius: 16px;
      padding: 18px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      text-align: center;
  }
  
  .card-registro-alma:hover {
      background: rgba(167, 0, 82, 0.1);
      border-color: rgba(167, 0, 82, 0.4);
      transform: translateY(-2px);
  }
  
  .card-registro-alma.selected,
  .card-registro-alma.seleccionada {
      border-color: #a70052;
      background: rgba(167, 0, 82, 0.18);
      box-shadow: 0 0 0 1px #a70052;
  }
  
  .card-registro-alma .card-registro-alma-title {
      font-weight: 700;
      color: var(--modal-registro-text);
      font-size: 0.95rem;
      margin-bottom: 6px;
  }
  
  .card-registro-alma .card-registro-alma-desc {
      font-size: 0.8rem;
      color: var(--modal-registro-text-muted);
      line-height: 1.4;
}

.opciones-intercesor {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 16px;
}

.opcion-intercesor {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--modal-registro-border);
      border-radius: 16px;
      padding: 16px;
    cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--modal-registro-text-muted);
      text-align: center;
}

.opcion-intercesor:hover {
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.1);
      color: var(--modal-registro-text);
      transform: translateY(-2px);
}

.opcion-intercesor.selected {
      border-color: var(--modal-registro-accent);
      background: rgba(205, 31, 31, 0.15);
      color: var(--modal-registro-text);
      box-shadow: 0 0 0 1px var(--modal-registro-accent);
  }
  
  .opcion-intercesor strong {
      color: inherit !important;
  }
  
  .paso-registro-alma-success-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      color: #28a745;
  }
  
  .paso-registro-alma-success-icon svg {
      width: 100%;
      height: 100%;
  }
  
  .paso-registro-alma-success h4 {
      text-align: center;
      margin-bottom: 8px;
  }
  
  .paso-registro-alma-success p {
      text-align: center;
      margin-bottom: 0;
  }
  
.input-registro-alma.error,
.select-registro-alma.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
      animation: shake-registro 0.5s ease-in-out;
}

  @keyframes shake-registro {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.mensaje-error-campo {
    color: #dc3545;
      font-size: 0.8rem;
      margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
  
  .modal-header-registro-alma-icon {
      width: 24px;
      height: 24px;
      opacity: 0.9;
      flex-shrink: 0;
      color: var(--modal-registro-text-muted);
  }
  
  #verificandoIntercesor {
      text-align: center;
      padding: 24px;
  }
  
  #verificandoIntercesor p {
      margin-bottom: 12px;
      color: var(--modal-registro-text-muted);
  }
  
  .registro-alma-spinner {
      display: inline-block;
      width: 36px;
      height: 36px;
      border: 3px solid rgba(255,255,255,0.2);
      border-top-color: var(--modal-registro-accent);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
      margin-bottom: 12px;
  }
  
  @media (max-width: 640px) {
      .modal-content-registro-alma {
          width: 92%;
          max-height: 90vh;
      }
  
      .form-row-registro-alma {
          grid-template-columns: 1fr;
      }
  
      .registro-alma-cards,
      .opciones-intercesor {
          grid-template-columns: 1fr;
      }
  
      .modal-body-registro-alma .paso-registro-alma {
          padding: 16px;
      }
  
      .modal-footer-registro-alma {
          flex-direction: column;
          padding: 14px 20px;
      }
  
      .modal-footer-registro-alma .btn-cancelar-indulgencia,
      .modal-footer-registro-alma .btn-siguiente-indulgencia {
          width: 100%;
      }
  
      .modal-content-comunidad {
          width: 92%;
          border-radius: 16px;
      }
  
      .modal-body-comunidad {
          padding: 20px 16px;
      }
  
      .input-comunidad {
          font-size: 16px;
          padding: 16px 18px;
      }
  
      .form-group-comunidad label {
          font-size: 14px;
      }
  
      .btn-comunidad {
          width: 100%;
      }
}

.mensaje-error-campo::before {
    content: "⚠️";
    font-size: 0.75rem;
}

/* Animación de carga */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animaciones para mensajes elegantes */
@keyframes slideInRight {
    0% { 
        transform: translateX(100%);
        opacity: 0;
    }
    100% { 
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    0% { 
        transform: translateX(0);
        opacity: 1;
    }
    100% { 
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Modal de Ofrecer Indulgencia */
.modal-indulgencia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .modal-indulgencia[style*="display: flex"],
  .modal-indulgencia[style*="display:block"] {
      opacity: 1;
      scroll-behavior: auto !important;
  }
  
  body.modal-abierto {
      overflow: hidden !important;
}

.modal-content-indulgencia {
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 24px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                  0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      transform: scale(0.95);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  /* Permitir scroll en modal-content solo cuando NO está en paso 3 */
  .modal-body-indulgencia:not(:has(#pasoIndulgencia3.active)) {
    overflow-y: auto;
  }
  
  .modal-indulgencia[style*="display: flex"] .modal-content-indulgencia,
  .modal-indulgencia[style*="display:block"] .modal-content-indulgencia {
      transform: scale(1);
      opacity: 1;
}

.modal-header-indulgencia {
      padding: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-indulgencia h3 {
    margin: 0;
      color: #FFFFFF;
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: -0.02em;
}

.close-modal-indulgencia {
    background: none;
    border: none;
      font-size: 28px;
    cursor: pointer;
      color: rgba(255, 255, 255, 0.7);
    padding: 0;
      width: 36px;
      height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
      border-radius: 8px;
      transition: all 0.2s ease;
}

.close-modal-indulgencia:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.1);
}

.modal-body-indulgencia {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
  }
  
  /* Para pasos que no sean el 3, permitir scroll en el body */
  .modal-body-indulgencia:not(:has(#pasoIndulgencia3.active)) {
      overflow-y: auto;
  }
  
  /* Jerarquía de blancos para todo el texto del modal */
  .modal-indulgencia h4,
  .modal-indulgencia h5 {
      color: #FFFFFF !important;
      font-weight: 700;
      margin-bottom: 12px;
  }
  
  .modal-indulgencia p {
      color: rgba(255, 255, 255, 0.9) !important;
      line-height: 1.6;
  }
  
  .modal-indulgencia label {
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: 500;
      margin-bottom: 8px;
      display: block;
  }
  
  .alerta-registro-intercesor {
      background: rgba(15, 23, 42, 0.5);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 24px;
      margin: 20px 0;
  }
  
  .alerta-registro-intercesor-titulo {
      color: #FFFFFF !important;
      font-size: 1.125rem;
      font-weight: 600;
      margin: 0 0 12px 0;
      letter-spacing: -0.01em;
  }
  
  .alerta-registro-intercesor-texto,
  .alerta-registro-intercesor-pregunta {
      color: rgba(255, 255, 255, 0.95) !important;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.55;
      margin: 0 0 16px 0;
  }
  
  .alerta-registro-intercesor-pregunta {
      margin-bottom: 20px;
      font-weight: 500;
  }
  
  .opciones-intercesor-indulgencia {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  
  .modal-indulgencia .opciones-intercesor-indulgencia .opcion-intercesor {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #FFFFFF;
      padding: 14px 16px;
      border-radius: 10px;
      text-align: left;
  }
  
  .modal-indulgencia .opciones-intercesor-indulgencia .opcion-intercesor strong {
      color: inherit;
  }
  
  .modal-indulgencia .opciones-intercesor-indulgencia .opcion-intercesor:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.25);
  }
  
  .modal-indulgencia .opciones-intercesor-indulgencia .opcion-intercesor.selected {
      background: rgba(139, 92, 246, 0.25);
      border-color: rgba(139, 92, 246, 0.6);
      color: #FFFFFF;
}

.paso-indulgencia {
    display: none;
}

.paso-indulgencia.active {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
  }
  
  /* Layout específico para Paso 3 (Seleccionar Alma) */
  #pasoIndulgencia3 {
      display: none;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
  }
  
  #pasoIndulgencia3.active {
      display: flex;
  }
  
  #pasoIndulgencia3 > h4,
  #pasoIndulgencia3 > p {
      flex-shrink: 0;
      margin-bottom: 16px;
  }
  
  #pasoIndulgencia3 > h4 {
      margin-bottom: 8px;
  }
  
  #pasoIndulgencia3 > p {
      margin-bottom: 20px;
}

.progress-indulgencia {
    display: flex;
    justify-content: center;
      align-items: center;
      margin-bottom: 32px;
      gap: 8px;
}

.progress-step {
      width: 36px;
      height: 36px;
    border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
      font-weight: 600;
      font-size: 0.875rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 2px solid transparent;
}

.progress-step.active {
      background: linear-gradient(135deg, #8B5CF6 0%, #B50064 100%);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(181, 0, 100, 0.4);
}

.progress-step.completed {
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: #FFFFFF;
}

.progress-line {
      width: 40px;
    height: 2px;
      background: rgba(255, 255, 255, 0.15);
      margin-top: 0;
    transition: all 0.3s ease;
      border-radius: 1px;
}

.progress-line.completed {
      background: linear-gradient(90deg, #10B981 0%, #059669 100%);
  }
  
  /* Stepper compacto en móvil */
  @media (max-width: 640px) {
      .progress-indulgencia {
          flex-direction: column;
          gap: 0;
          margin-bottom: 20px;
          position: relative;
          padding-bottom: 16px;
      }
      
      .progress-indulgencia::before {
          content: attr(data-progress-text);
          display: block;
          text-align: center;
          color: rgba(255, 255, 255, 0.9);
          font-size: 0.875rem;
          font-weight: 600;
          margin-bottom: 12px;
      }
      
      .progress-indulgencia::after {
          content: '';
          display: block;
          width: 100%;
          height: 3px;
          background: rgba(255, 255, 255, 0.15);
          border-radius: 2px;
          position: relative;
          margin-top: 8px;
      }
      
      .progress-step,
      .progress-line {
          display: none;
      }
      
      /* Barra de progreso dinámica */
      .progress-indulgencia {
          --progress-percent: 16.66%;
      }
      
      .progress-indulgencia::after {
          background-image: linear-gradient(90deg, #8B5CF6 0%, #B50064 100%);
          background-size: var(--progress-percent, 0%) 100%;
          background-repeat: no-repeat;
          background-position: left;
      }
}

/* Estilos para búsqueda de almas */
.busqueda-almas {
    margin-bottom: 20px;
      flex-shrink: 0;
      position: relative;
  }
  
  /* En Paso 3, el buscador debe ser estático y compacto */
  #pasoIndulgencia3 .busqueda-almas {
      margin-bottom: 12px;
  }
  
  .busqueda-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.4);
      pointer-events: none;
      z-index: 1;
      width: 18px;
      height: 18px;
}

.busqueda-almas input {
    width: 100%;
      padding: 14px 16px;
      padding-left: 48px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
    font-size: 1rem;
    box-sizing: border-box;
      background: rgba(255, 255, 255, 0.08);
      color: #FFFFFF;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  #pasoIndulgencia3 .busqueda-almas input {
      padding: 12px 14px;
      padding-left: 44px;
      font-size: 0.95rem;
  }
  
  .busqueda-almas input::placeholder {
      color: rgba(255, 255, 255, 0.6);
}

.busqueda-almas input:focus {
    outline: none;
      border-color: rgba(181, 0, 100, 0.6);
      background: rgba(255, 255, 255, 0.12);
      box-shadow: 0 0 0 3px rgba(181, 0, 100, 0.1),
                  0 0 20px rgba(181, 0, 100, 0.2);
}

.lista-almas {
    max-height: 400px;
    overflow-y: auto;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      padding: 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }
  
  /* Lista de almas en Paso 3: altura fija para mostrar 4 registros */
  #pasoIndulgencia3 .lista-almas {
      flex: 1;
      min-height: 0;
      height: 280px; /* Altura fija para mostrar ~4 registros */
      max-height: 280px;
      overflow-y: auto;
      margin-bottom: 8px;
      position: relative;
      padding: 6px;
  }
  
  /* Scrollbar personalizada minimalista */
  .lista-almas::-webkit-scrollbar {
      width: 6px;
  }
  
  .lista-almas::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 3px;
  }
  
  .lista-almas::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
      transition: background 0.2s ease;
  }
  
  .lista-almas::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
}

.alma-item {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 10px;
      margin-bottom: 6px;
      background: rgba(255, 255, 255, 0.03);
      position: relative;
  }
  
  #pasoIndulgencia3 .alma-item {
      padding: 10px 12px;
      margin-bottom: 4px;
      border-radius: 8px;
}

.alma-item:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateX(4px);
  }
  
  #pasoIndulgencia3 .lista-almas .alma-item:not(.selected) {
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  #pasoIndulgencia3 .lista-almas:has(.alma-item.selected) .alma-item:not(.selected) {
      opacity: 0.7;
}

.alma-item.selected {
      background: rgba(181, 0, 100, 0.15);
      border-left: 4px solid;
      border-image: linear-gradient(135deg, #8B5CF6 0%, #B50064 100%) 1;
      box-shadow: 0 0 20px rgba(181, 0, 100, 0.2), inset 0 0 40px rgba(181, 0, 100, 0.15);
      transform: translateY(-1px);
      opacity: 1 !important;
}

.alma-item:last-child {
    border-bottom: none;
      margin-bottom: 0;
  }
  
  .alma-item-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: start;
  }
  
  #pasoIndulgencia3 .alma-item-grid {
      gap: 10px;
  }
  
  .alma-fecha-absolute {
      position: absolute;
      top: 10px;
      right: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
      color: rgba(255, 255, 255, 0.3);
      font-size: 0.7rem;
      white-space: nowrap;
  }
  
  #pasoIndulgencia3 .alma-fecha-absolute {
      top: 8px;
      right: 10px;
      font-size: 0.65rem;
      gap: 3px;
  }
  
  .alma-avatar-wrapper {
      flex-shrink: 0;
  }
  
  .alma-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  #pasoIndulgencia3 .alma-avatar {
      width: 40px;
      height: 40px;
  }
  
  .alma-content-wrapper {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
  }
  
  #pasoIndulgencia3 .alma-content-wrapper {
      gap: 4px;
}

.alma-nombre {
      font-weight: 700;
      color: #FFFFFF !important;
      font-size: 1.05rem;
      line-height: 1.3;
      margin: 0;
  }
  
  #pasoIndulgencia3 .alma-nombre {
      font-size: 0.95rem;
      line-height: 1.2;
  }
  
  .alma-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      background: rgba(181, 0, 100, 0.2);
      border: 1px solid rgba(181, 0, 100, 0.4);
      border-radius: 4px;
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.2;
  }
  
  .alma-fecha-icon {
      width: 12px;
      height: 12px;
      stroke: rgba(255, 255, 255, 0.3);
      flex-shrink: 0;
  }
  
  #pasoIndulgencia3 .alma-fecha-icon {
      width: 10px;
      height: 10px;
}

.alma-fecha {
      color: rgba(255, 255, 255, 0.3) !important;
      font-size: 0.7rem;
      line-height: 1.2;
  }
  
  #pasoIndulgencia3 .alma-fecha {
      font-size: 0.65rem;
  }
  
  .alma-cita-container {
      margin-top: 4px;
      padding: 6px 8px;
      padding-left: 10px;
      background: rgba(255, 255, 255, 0.05);
      border-left: 2px solid rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      line-height: 1.4;
  }
  
  #pasoIndulgencia3 .alma-cita-container {
      padding: 4px 6px;
      padding-left: 8px;
      margin-top: 2px;
  }
  
  .alma-cita-texto {
      color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.8rem;
    font-style: italic;
      line-height: 1.4;
      quotes: '"' '"' "'" "'";
  }
  
  .alma-cita-texto::before {
      content: open-quote;
      color: rgba(255, 255, 255, 0.5);
  }
  
  .alma-cita-texto::after {
      content: close-quote;
      color: rgba(255, 255, 255, 0.5);
  }
  
  #pasoIndulgencia3 .alma-cita-texto {
      font-size: 0.7rem;
      line-height: 1.3;
  }
  
  .alma-mensaje {
      color: rgba(255, 255, 255, 0.6) !important;
      font-size: 0.85rem;
      font-style: italic;
      margin-top: 6px;
  }
  
  #pasoIndulgencia3 .alma-mensaje {
      font-size: 0.7rem;
      margin-top: 3px;
      line-height: 1.3;
}

.paginacion-almas {
    display: flex;
    justify-content: space-between;
    align-items: center;
      margin-top: 20px;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      flex-shrink: 0;
  }
  
  /* Paginación minimalista en Paso 3 */
  .paginacion-almas-minimalista {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
      margin-bottom: 0;
      padding: 8px 0;
      flex-shrink: 0;
      background: transparent;
      border: none;
  }
  
  .paginacion-texto {
      color: rgba(255, 255, 255, 0.7) !important;
      font-size: 0.75rem;
      font-weight: 500;
      min-width: 60px;
      text-align: center;
  }
  
  .btn-pagina-icon {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.8);
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      width: 32px;
      height: 32px;
  }
  
  .btn-pagina-icon:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.3);
      color: #FFFFFF;
  }
  
  .btn-pagina-icon:disabled {
      opacity: 0.3;
      cursor: not-allowed;
  }
  
  .btn-pagina-icon svg {
      width: 16px;
      height: 16px;
}

.paginacion-almas .info {
      color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem;
}

.paginacion-almas .botones {
    display: flex;
    gap: 10px;
}

.btn-pagina {
      background: rgba(181, 0, 100, 0.2);
      color: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(181, 0, 100, 0.4);
      padding: 8px 16px;
      border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
      transition: all 0.2s ease;
}

.btn-pagina:hover {
      background: rgba(181, 0, 100, 0.3);
      border-color: rgba(181, 0, 100, 0.6);
      color: #FFFFFF;
}

.btn-pagina:disabled {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

/* Estilos para selección de obras */
.obras-container {
    max-height: 500px;
    overflow-y: auto;
}

.obra-tipo {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.obra-tipo-header {
      background: rgba(255, 255, 255, 0.08);
      padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
      font-weight: 600;
      color: #FFFFFF !important;
      border-radius: 10px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
}

.obra-tipo-header.extraordinario {
      background: rgba(255, 195, 0, 0.15);
      border-left: 3px solid rgba(255, 195, 0, 0.6);
}

.obra-tipo-header:hover {
      background: rgba(255, 255, 255, 0.12);
}

.obra-tipo-header.extraordinario:hover {
      background: rgba(255, 195, 0, 0.2);
}

.obra-tipo-content {
    display: none;
      padding: 16px;
      background: rgba(255, 255, 255, 0.03);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
}

.obra-tipo-content.expanded {
    display: block;
      max-height: 2000px;
      overflow-y: auto;
      scroll-behavior: smooth;
  }
  
  .obra-tipo-content.expanded::-webkit-scrollbar {
      width: 6px;
  }
  
  .obra-tipo-content.expanded::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
  }
  
  .obra-tipo-content.expanded::-webkit-scrollbar-thumb {
      background: rgba(181, 0, 100, 0.3);
      border-radius: 3px;
  }
  
  .obra-tipo-content.expanded::-webkit-scrollbar-thumb:hover {
      background: rgba(181, 0, 100, 0.5);
}

.obra-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      margin-bottom: 12px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: rgba(255, 255, 255, 0.03);
      overflow: hidden;
}

.obra-item:hover {
      border-color: rgba(181, 0, 100, 0.4);
}

.obra-item.selected {
      background: rgba(255, 255, 255, 0.05);
      border-color: #B50064;
      border-left: 4px solid #B50064;
      box-shadow: 0 0 20px rgba(181, 0, 100, 0.2), inset 0 0 30px rgba(181, 0, 100, 0.1);
      animation: glow-internal 0.5s ease;
  }
  
  @keyframes glow-internal {
      0% {
          box-shadow: 0 0 20px rgba(181, 0, 100, 0.2), inset 0 0 0 rgba(181, 0, 100, 0);
      }
      50% {
          box-shadow: 0 0 20px rgba(181, 0, 100, 0.2), inset 0 0 40px rgba(181, 0, 100, 0.15);
      }
      100% {
          box-shadow: 0 0 20px rgba(181, 0, 100, 0.2), inset 0 0 30px rgba(181, 0, 100, 0.1);
      }
  }
  
  .obra-header-clickable {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      cursor: pointer;
      transition: background 0.2s ease;
  }
  
  .obra-header-clickable:hover {
      background: rgba(255, 255, 255, 0.05);
  }
  
  .obra-icono {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      color: rgba(181, 0, 100, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .obra-icono svg {
      width: 100%;
      height: 100%;
}

.obra-nombre {
      font-weight: 700;
      color: #FFFFFF !important;
      margin: 0;
      text-wrap: balance;
      line-height: 1.4;
      flex: 1;
  }
  
  .obra-expand-icon {
      flex-shrink: 0;
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      transition: transform 0.3s ease, color 0.2s ease;
  }
  
  .obra-item.selected .obra-expand-icon {
      color: rgba(181, 0, 100, 0.9);
  }
  
  .obra-contenido-expandible {
      padding: 0 16px 16px 16px;
      overflow-y: auto;
      max-height: 400px;
      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }
  
  .obra-contenido-expandible::-webkit-scrollbar {
      width: 6px;
  }
  
  .obra-contenido-expandible::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
  }
  
  .obra-contenido-expandible::-webkit-scrollbar-thumb {
      background: rgba(181, 0, 100, 0.5);
      border-radius: 3px;
  }
  
  .obra-contenido-expandible::-webkit-scrollbar-thumb:hover {
      background: rgba(181, 0, 100, 0.7);
}

.obra-fecha {
      color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem;
}

.obra-condiciones {
      color: rgba(255, 255, 255, 0.6) !important;
      font-size: 0.85rem;
      margin-top: 6px;
  }
  
  .obra-condiciones-wrapper {
      margin-top: 10px;
  }
  
  .obra-condiciones-bullets {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
  }
  
  .obra-condicion-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.875rem;
      line-height: 1.6;
      margin-bottom: 8px;
  }
  
  .obra-condicion-item:last-child {
      margin-bottom: 0;
  }
  
  .obra-condicion-icon {
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(181, 0, 100, 0.8);
      margin-top: 8px;
      box-shadow: 0 0 4px rgba(181, 0, 100, 0.4);
  }
  
  .obra-condicion-texto {
      flex: 1;
      color: rgba(255, 255, 255, 0.8);
  }
  
  .obra-condicion-texto strong {
      color: rgba(255, 255, 255, 0.95);
      font-weight: 600;
  }
  
  .obra-condicion-continuacion {
      margin-top: 4px;
      padding-left: 16px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
  }
  
  .obra-condiciones-resumen,
  .obra-condiciones-detalle {
      margin-top: 12px;
  }
  
  .obra-condiciones-detalle {
      margin-top: 8px;
  }
  
  .obra-condiciones-bullets .condicion-inciso,
  .obra-condiciones-bullets .condicion-guion {
      margin-bottom: 8px;
      display: inline-block;
  }
  
  .obra-condiciones-bullets br {
      margin-bottom: 8px;
      display: block;
  }
  
  .obra-condiciones-contenido {
      margin-top: 12px;
  }
  
  .obra-condiciones-lista-formateada {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .obra-condicion-lista-item {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
      margin-bottom: 8px;
      padding-left: 20px;
      position: relative;
  }
  
  .obra-condicion-lista-item:last-child {
      margin-bottom: 0;
  }
  
  .obra-condicion-lista-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(181, 0, 100, 0.8);
      box-shadow: 0 0 4px rgba(181, 0, 100, 0.4);
  }
  
  .obra-condicion-lista-item strong {
      color: rgba(255, 255, 255, 0.95);
      font-weight: 600;
  }
  
  .obra-condicion-texto-plano {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
      margin-top: 12px;
  }
  
  .obra-condicion-texto-plano strong {
      color: rgba(255, 255, 255, 0.95);
      font-weight: 600;
  }
  
  .obra-condiciones-visible {
      position: relative;
      max-height: calc(3 * 1.6em + 16px);
      overflow: hidden;
  }
  
  .obra-condiciones-fade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.85));
      pointer-events: none;
  }
  
  .obra-condiciones-oculto,
  .obra-condiciones-completo {
      margin-top: 8px;
  }
  
  .obra-condiciones-completo {
      animation: fadeIn 0.3s ease;
      max-height: none;
      overflow: visible;
  }
  
  .obra-condiciones-wrapper {
      display: flex;
      flex-direction: column;
  }
  
  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  .obra-condiciones-ver-mas {
      margin-top: 10px;
      padding: 8px 16px;
      background: transparent;
      border: 1px solid rgba(181, 0, 100, 0.5);
      border-radius: 6px;
      color: rgba(181, 0, 100, 0.9);
    font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 500;
      position: relative;
      z-index: 10;
      display: block;
      width: 100%;
      text-align: center;
  }
  
  .obra-condiciones-ver-mas:hover {
      background: rgba(181, 0, 100, 0.1);
      border-color: rgba(181, 0, 100, 0.8);
      color: rgba(181, 0, 100, 1);
}

/* Lista de condiciones en paso 4 del modal de indulgencia */
.obra-condiciones-lista {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.obra-condiciones-lista li {
      color: rgba(255, 255, 255, 0.7) !important;
      font-size: 0.85rem;
      margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.obra-condiciones-lista li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #FFC300;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
}
  
  .obra-condiciones .condicion-inciso,
  .obra-condiciones-lista li .condicion-inciso {
      display: inline-block;
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: bold;
      margin-right: 8px;
      vertical-align: baseline;
      line-height: 1;
  }
  
  .obra-condiciones .condicion-inciso-mayuscula,
  .obra-condiciones-lista li .condicion-inciso-mayuscula {
      font-size: 18px;
  }
  
  .obra-condiciones .condicion-inciso-minuscula,
  .obra-condiciones-lista li .condicion-inciso-minuscula {
      font-size: 16px;
  }
  
  .obra-condiciones .condicion-inciso-numero,
  .obra-condiciones-lista li .condicion-inciso-numero {
      font-size: 16px;
  }
  
  .obra-condiciones .condicion-guion,
  .obra-condiciones-lista li .condicion-guion {
      display: inline-block;
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: bold;
      font-size: 20px;
      margin-right: 10px;
      margin-left: 0;
      vertical-align: middle;
    line-height: 1;
}

/* Resumen de indulgencia */
  .resumen-indulgencia-container {
      max-height: calc(85vh - 200px);
      overflow-y: auto;
      padding: 4px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar {
      width: 6px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar-thumb {
      background: rgba(181, 0, 100, 0.5);
      border-radius: 3px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar-thumb:hover {
      background: rgba(181, 0, 100, 0.7);
  }
  
  .resumen-ficha-verificacion {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  
  .resumen-fila-ticket {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .resumen-fila-ticket:last-of-type {
      border-bottom: none;
  }
  
  .resumen-label-ticket {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.875rem;
      font-weight: 500;
      flex-shrink: 0;
      min-width: 100px;
  }
  
  .resumen-value-ticket {
      color: #FFFFFF;
      font-size: 0.95rem;
      font-weight: 700;
      text-align: right;
      flex: 1;
      word-break: break-word;
      margin-left: 16px;
  }
  
  .resumen-condiciones-caja {
      margin-top: 8px;
      padding: 16px;
      background: rgba(15, 23, 42, 0.6);
      border-left: 4px solid rgba(181, 0, 100, 0.8);
      border-radius: 8px;
  }
  
  .resumen-condiciones-label {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 12px;
  }
  
  .resumen-condiciones-contenido {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
  }
  
  .resumen-condiciones-lista-elegante {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .resumen-condicion-item {
      padding-left: 20px;
      position: relative;
      margin-bottom: 8px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.8);
  }
  
  .resumen-condicion-item:last-child {
      margin-bottom: 0;
  }
  
  .resumen-condicion-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(181, 0, 100, 0.8);
      box-shadow: 0 0 4px rgba(181, 0, 100, 0.4);
  }
  
  .resumen-condicion-texto-plano {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
  }
  
  .resumen-error {
      color: rgba(255, 100, 100, 0.9);
      padding: 20px;
      text-align: center;
      background: rgba(255, 100, 100, 0.1);
      border-radius: 8px;
      border: 1px solid rgba(255, 100, 100, 0.3);
  }
  
  @media (max-width: 640px) {
      .resumen-section-wrapper {
          max-height: calc(85vh - 160px);
      }
  
      .resumen-ficha-ticket {
          padding: 16px;
      }
  
      .resumen-fila-ticket {
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
          padding: 12px 0;
      }
  
      .resumen-label-ticket {
          min-width: auto;
          margin-bottom: 4px;
          font-size: 0.8rem;
      }
  
      .resumen-value-ticket {
          text-align: left;
          margin-left: 0;
          font-size: 0.9rem;
          width: 100%;
      }
  
      .resumen-condiciones-caja-nota {
          padding: 12px;
          margin-top: 12px;
      }
  
      .resumen-condiciones-label-nota {
          font-size: 0.8rem;
          margin-bottom: 10px;
      }
  
      .resumen-condiciones-contenido-nota {
          font-size: 0.8rem;
      }
  
      .resumen-condicion-item {
          font-size: 0.8rem;
          padding-left: 14px;
      }
  
      .resumen-buttons-fixed {
          padding-top: 12px;
      }
  }
  
.resumen-indulgencia {
      background: rgba(255, 255, 255, 0.08);
    padding: 20px;
      border-radius: 12px;
    margin: 20px 0;
      border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .resumen-ficha-container {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  
  .resumen-ficha-ticket {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
  }
  
  .resumen-fila-ticket {
    display: flex;
    justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .resumen-fila {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .resumen-fila:last-of-type {
      border-bottom: none;
}

.resumen-label {
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
      font-size: 0.9rem;
      flex-shrink: 0;
      margin-right: 16px;
}

.resumen-value {
      color: #FFFFFF;
      font-weight: 700;
      text-align: right;
      flex: 1;
      word-break: break-word;
  }
  
  .resumen-condiciones-caja {
      margin-top: 8px;
      padding: 16px;
      background: rgba(0, 0, 0, 0.2);
      border-left: 4px solid rgba(181, 0, 100, 0.8);
      border-radius: 8px;
  }
  
  .resumen-condiciones-caja-nota {
      margin-top: 16px;
      padding: 16px;
      background: rgba(15, 23, 42, 0.6);
      border-left: 4px solid rgba(181, 0, 100, 0.8);
      border-radius: 8px;
  }
  
  .resumen-condiciones-label-nota {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 12px;
  }
  
  .resumen-condiciones-contenido-nota {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
  }
  
  .resumen-condiciones-label {
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
      font-size: 0.9rem;
      margin-bottom: 12px;
  }
  
  .resumen-condiciones-contenido {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
  }
  
  .resumen-condiciones-lista-elegante {
      list-style: none;
      padding: 0;
      margin: 0;
      padding-left: 20px;
  }
  
  .resumen-condicion-item {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
      margin-bottom: 8px;
      position: relative;
      padding-left: 16px;
  }
  
  .resumen-condicion-item::before {
      content: '•';
      position: absolute;
      left: 0;
      color: rgba(181, 0, 100, 0.8);
      font-weight: bold;
      font-size: 1.2rem;
  }
  
  .resumen-condicion-item:last-child {
      margin-bottom: 0;
  }
  
  .resumen-condicion-texto-plano {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.875rem;
      line-height: 1.6;
  }
  
  .resumen-section-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-height: calc(85vh - 200px);
  }
  
  #resumenIndulgencia {
      flex: 1;
      overflow-y: auto;
      padding-right: 8px;
      min-height: 0;
  }
  
  #resumenIndulgencia::-webkit-scrollbar {
      width: 6px;
  }
  
  #resumenIndulgencia::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
  }
  
  #resumenIndulgencia::-webkit-scrollbar-thumb {
      background: rgba(181, 0, 100, 0.5);
      border-radius: 3px;
  }
  
  #resumenIndulgencia::-webkit-scrollbar-thumb:hover {
      background: rgba(181, 0, 100, 0.7);
  }
  
  .resumen-ficha-container {
      flex: 1;
      overflow-y: auto;
      padding-right: 8px;
  }
  
  .resumen-buttons-fixed {
      margin-top: auto;
      padding-top: 16px;
      flex-shrink: 0;
      position: sticky;
      bottom: 0;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 16px;
      margin-top: 16px;
  }
  
  .resumen-indulgencia-container {
      max-height: 400px;
      overflow-y: auto;
      padding-right: 8px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar {
      width: 6px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar-thumb {
      background: rgba(181, 0, 100, 0.5);
      border-radius: 3px;
  }
  
  .resumen-indulgencia-container::-webkit-scrollbar-thumb:hover {
      background: rgba(181, 0, 100, 0.7);
  }
  
  .resumen-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
}

.resumen-condicion-texto {
    color: var(--color-letra, #050e38) !important;
    font-weight: 500;
}

/* Historial de indulgencias */
.historial-indulgencias {
      background: rgba(255, 255, 255, 0.08);
    padding: 20px;
      border-radius: 12px;
    margin-top: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
}

.historial-indulgencias h5 {
      color: #FFFFFF !important;
      font-weight: 700;
    margin-bottom: 15px;
}

.historial-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: white;
    border-radius: 5px;
    margin-bottom: 10px;
    border-left: 4px solid #28a745;
}

.historial-fecha {
    font-weight: bold;
    color: #333;
}

.historial-details {
    color: #333;
    font-size: 0.9rem;
}

/* Botones del modal */
.modal-buttons-indulgencia {
    display: flex;
      gap: 12px;
    justify-content: space-between;
      margin-top: 32px;
      flex-shrink: 0;
  }
  
  /* Botones sticky en Paso 3 - más delgados */
  #pasoIndulgencia3 .modal-buttons-indulgencia {
      position: sticky;
      bottom: 0;
      margin-top: 12px;
      padding-top: 12px;
      background: linear-gradient(to top, 
          rgba(15, 23, 42, 0.95) 0%, 
          rgba(15, 23, 42, 0.95) 60%,
          rgba(15, 23, 42, 0.85) 100%);
      backdrop-filter: blur(8px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-left: -24px;
      margin-right: -24px;
      padding-left: 24px;
      padding-right: 24px;
      padding-bottom: 8px;
      z-index: 10;
  }
  
  /* Botones más delgados en Paso 3 */
  .modal-buttons-paso3 .btn-cancelar-indulgencia,
  .modal-buttons-paso3 .btn-siguiente-indulgencia {
      padding: 10px 24px;
      height: 40px; /* h-10 equivalente */
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      justify-content: center;
}

.btn-cancelar-indulgencia {
      background: transparent;
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 14px 28px;
      border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cancelar-indulgencia:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.4);
}

.btn-siguiente-indulgencia {
      background: linear-gradient(135deg, rgb(167, 0, 82) 0%, rgb(194, 0, 106) 100%);
      color: #FFFFFF;
    border: none;
      padding: 14px 28px;
      border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
      font-weight: 600;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 14px rgba(167, 0, 82, 0.4);
}

.btn-siguiente-indulgencia:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(167, 0, 82, 0.55);
      background: linear-gradient(135deg, rgb(150, 0, 74) 0%, rgb(175, 0, 96) 100%);
  }
  
  .btn-siguiente-indulgencia:active {
      transform: translateY(0);
  }
  
  .btn-siguiente-indulgencia.pulse-once {
      animation: pulse-button 1s ease;
  }
  
  @keyframes pulse-button {
      0%, 100% {
          box-shadow: 0 4px 12px rgba(181, 0, 100, 0.3);
          transform: scale(1);
      }
      50% {
          box-shadow: 0 6px 24px rgba(181, 0, 100, 0.6);
          transform: scale(1.05);
      }
}

.btn-aplicar-indulgencia {
    background: linear-gradient(135deg, rgb(167, 0, 82) 0%, rgb(194, 0, 106) 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(167, 0, 82, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-aplicar-indulgencia:hover {
    background: linear-gradient(135deg, rgb(150, 0, 74) 0%, rgb(175, 0, 96) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(167, 0, 82, 0.55);
}

.mensaje-indulgencia {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

.mensaje-indulgencia.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-indulgencia.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.floating-content {
    padding: 20px;
}
.floating-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;   
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.floating-header strong {
    color: var(--color-letra);
    font-size: 16px;
}

.floating-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.floating-close:hover {
    background: #f0f0f0;
    color: #666;
}

.floating-body {
    color: var(--color-letra);
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

/* Estilos para opciones de registro de alma */
.opcion-registro-alma:hover {
    background: rgba(167, 0, 82, 0.1) !important;
    border-color: rgba(167, 0, 82, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(167, 0, 82, 0.2);
}

.opcion-registro-alma.seleccionada {
    background: rgba(167, 0, 82, 0.18) !important;
    border-color: #a70052 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 1px #a70052;
}

.opcion-registro-alma.seleccionada strong {
    color: #ff80b5 !important;
}

/* Estilos para estatus del carrusel de almas */
.estatus-badge {
    display: inline-block;
    width: 100px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.estatus-badge.estatus-intercedida {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.estatus-badge.estatus-en-espera {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Estilos para tarjetas según estatus - mantener color azul original */
/* Los colores se mantienen igual que el diseño original */

/* Paso 6: Condiciones para ganar indulgencia */
.paso-condiciones {
    padding: 0;
}

.condiciones-header {
    padding: 30px 40px;
    background: var(--color-letra);
    border-radius: 15px 15px 0 0;
    color: white;
}

.condiciones-header-title {
    color: white;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    text-align: left;
}

.condiciones-wrapper {
    display: flex;
    min-height: 500px;
    border-radius: 0;
    overflow: hidden;
}

.condiciones-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px 25px 40px;
    background: var(--color-letra);
    border-radius: 0 0 15px 15px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    gap: 30px;
    flex-wrap: wrap;
    margin-top: -40px;
}

.condiciones-left {
    flex: 1;
    background: var(--color-letra);
    padding: 40px 40px 0 40px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.requisitos-lista {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    width: 100%;
}

.requisito-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.requisito-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.requisito-icon-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.requisito-texto {
    color: white;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
}

.requisito-texto strong {
    font-weight: bold;
}

.condiciones-right {
    flex: 1.2;
    background: var(--color-letra);
    padding: 40px 35px 0 35px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.condiciones-container {
    background: var(--color-letra);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    color: white;
    position: relative;
}

.condiciones-right .condiciones-icon {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.condiciones-icon-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.condiciones-right .condiciones-title {
    color: white;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
}

.condiciones-right .condiciones-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
    width: 100%;
    max-width: 250px;
}

.condiciones-right .condiciones-lista li {
    color: white;
    font-size: 16px;
    margin-bottom: 15px;
    padding: 12px 12px 12px 45px;
    position: relative;
    line-height: 1.8;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.condiciones-right .condiciones-lista li .condicion-texto {
    display: block;
    padding-left: 0;
    margin-left: 0;
    position: relative;
    z-index: 1;
}

.condiciones-lista li::before {
    display: none;
}

/* Checkmarks para condiciones en paso 6 */
.condiciones-right .condiciones-lista li:before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #FFC300;
    color: #050e38;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    z-index: 2;
}

.condiciones-footer .checkbox-condiciones-container {
    margin: 0;
    text-align: left;
    display: flex;
    flex: 1;
    min-width: 300px;
}

.condiciones-footer .checkbox-condiciones-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 14px;
    line-height: 1.5;
    gap: 10px;
}

.checkbox-condiciones {
    width: 22px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    accent-color: white;
    border: 2px solid white;
    border-radius: 4px;
}

.checkbox-condiciones:checked {
    background-color: white;
    border-color: white;
}

.checkbox-condiciones-label span {
    user-select: none;
}

.condiciones-footer .modal-buttons-indulgencia {
    margin: 0;
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}
  
  /* Bottom Sheet para móvil - Modal de Indulgencia */
  @media (max-width: 640px) {
      .modal-indulgencia {
          align-items: flex-end;
      }
      
      .modal-content-indulgencia {
          width: 100%;
          max-width: 100%;
          max-height: 90vh;
          border-radius: 24px 24px 0 0;
          transform: translateY(100%);
          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                      opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      
      .modal-indulgencia[style*="display: flex"] .modal-content-indulgencia,
      .modal-indulgencia[style*="display:block"] .modal-content-indulgencia {
          transform: translateY(0);
      }
      
      .modal-header-indulgencia {
          padding: 20px;
      }
      
      .modal-body-indulgencia {
          padding: 20px 16px;
      }
      
      .modal-buttons-indulgencia {
          flex-direction: column;
          gap: 12px;
      }
      
      .btn-cancelar-indulgencia,
      .btn-siguiente-indulgencia {
          width: 100%;
          padding: 16px;
      }
      
      /* Optimizaciones específicas para Paso 3 en móvil */
      #pasoIndulgencia3 {
          min-height: 0;
          max-height: calc(90vh - 120px); /* Restar espacio del header y padding */
      }
      
      #pasoIndulgencia3 .lista-almas {
          height: 240px; /* Altura fija para móvil - mostrar ~3-4 registros */
          max-height: 240px;
          padding: 4px;
      }
      
      /* Reducir tamaño de tarjetas en móvil para que quepan 2.5 tarjetas */
      #pasoIndulgencia3 .alma-item {
          padding: 8px 10px;
          margin-bottom: 4px;
      }
      
      #pasoIndulgencia3 .alma-item-grid {
          gap: 8px;
      }
      
      #pasoIndulgencia3 .alma-avatar {
          width: 36px;
          height: 36px;
      }
      
      #pasoIndulgencia3 .alma-content-wrapper {
          gap: 3px;
      }
      
      #pasoIndulgencia3 .alma-nombre {
          font-size: 0.9rem;
      }
      
      #pasoIndulgencia3 .alma-fecha-absolute {
          top: 6px;
          right: 8px;
          font-size: 0.6rem;
      }
      
      #pasoIndulgencia3 .alma-fecha-icon {
          width: 9px;
          height: 9px;
      }
      
      #pasoIndulgencia3 .alma-cita-container {
          padding: 5px 7px;
          padding-left: 8px;
          margin-top: 2px;
      }
      
      #pasoIndulgencia3 .alma-cita-texto {
          font-size: 0.65rem;
          line-height: 1.25;
      }
      
      /* Botones sticky en móvil - una sola línea horizontal */
      #pasoIndulgencia3 .modal-buttons-indulgencia {
          margin-left: -16px;
          margin-right: -16px;
          padding-left: 16px;
          padding-right: 16px;
          padding-top: 12px;
          padding-bottom: 8px;
          background: linear-gradient(to top, 
              rgba(15, 23, 42, 0.98) 0%, 
              rgba(15, 23, 42, 0.98) 70%,
              rgba(15, 23, 42, 0.9) 100%);
          flex-direction: row; /* Una sola línea horizontal */
          gap: 12px;
      }
      
      /* Botones más delgados en móvil para Paso 3 */
      #pasoIndulgencia3 .modal-buttons-indulgencia .btn-cancelar-indulgencia,
      #pasoIndulgencia3 .modal-buttons-indulgencia .btn-siguiente-indulgencia {
          flex: 1;
          padding: 10px 16px;
          height: 40px;
          font-size: 0.9rem;
      }
      
      /* Buscador más compacto en móvil */
      #pasoIndulgencia3 .busqueda-almas {
          margin-bottom: 12px;
      }
      
      #pasoIndulgencia3 .busqueda-almas input {
          padding: 12px 14px;
          padding-left: 44px;
          font-size: 16px;
      }
      
      #pasoIndulgencia3 .busqueda-icon {
          left: 14px;
          width: 16px;
          height: 16px;
      }
      
      /* Paginación más compacta en móvil */
      #pasoIndulgencia3 .paginacion-almas {
          padding: 10px 12px;
          margin-top: 8px;
          margin-bottom: 0;
      }
}

@media (max-width: 768px) {
    .condiciones-header {
        padding: 25px 25px;
    }
    
    .condiciones-header-title {
        font-size: 22px;
    }
    
    .condiciones-wrapper {
        flex-direction: column;
    }
    
    .condiciones-left {
        flex: 1;
        padding: 30px 25px;
    }
    
    .condiciones-right {
        flex: 1;
        padding: 30px 25px;
        border-left: none;
        border-top: 2px solid rgba(255, 255, 255, 0.1);
    }
    
    .requisito-texto {
        font-size: 16px;
    }
    
    .condiciones-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 25px;
        gap: 20px;
    }
    
    .condiciones-footer .checkbox-condiciones-container {
        min-width: auto;
        width: 100%;
    }
    
    .condiciones-footer .modal-buttons-indulgencia {
        width: 100%;
        justify-content: center;
    }
}

.btn-aplicar-indulgencia:disabled,
.btn-aplicar-indulgencia.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-aplicar-indulgencia:disabled:hover,
.btn-aplicar-indulgencia.disabled:hover {
    opacity: 0.5;
    transform: none;
}

/* Sección: Obras que puedo hacer hoy */
.obras-hoy-section {
      background: linear-gradient(180deg, #0A1F44 0%, #1A305E 100%);
    padding: 60px 20px;
    color: #fff;
}

.obras-hoy-header {
    text-align: center;
    margin-bottom: 20px;
}

.obras-hoy-title {
      font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 48px;
      font-weight: 800;
    margin-bottom: 15px;
      color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.obras-hoy-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    max-width: 800px;
    margin: 0 auto 20px;
}

.obra-hoy-info-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    font-size: 16px;
    text-align: center;
    margin: 0 auto 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-style: italic;
}

.obra-hoy-info-link:hover {
    color: #fff;
    text-decoration: none;
    transform: scale(1.05);
}

.obras-hoy-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    z-index: 1;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    will-change: contents;
}

#obras-hoy-container {
    display: flex;
    gap: 20px;
    flex: 1;
    overflow: visible;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
      transition: opacity 0.3s ease;
    contain: layout style paint;
}

  .obras-hoy-master-container {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
  }
  
  .obras-hoy-obras-container {
      display: flex;
      flex-direction: column;
      gap: 30px;
      width: 100%;
  }
  
  .obra-master-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-radius: 24px;
      padding: 40px 30px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      min-width: 320px;
      max-width: 380px;
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 1;
      opacity: 0;
      animation: staggeredReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  
  @keyframes staggeredReveal {
      from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
      }
      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }
  
  .obra-master-label {
      font-family: 'Inter', 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 24px;
      color: #FFFFFF;
      margin-bottom: 20px;
      padding: 12px 20px;
      border-radius: 12px;
      display: inline-block;
      width: fit-content;
  }
  
  .obra-master-ordinaria .obra-master-label {
      background: #a70052;
      color: #FFFFFF;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(167, 0, 82, 0.6), 0 0 15px rgba(167, 0, 82, 0.4);
  }
  
  .obra-master-extraordinaria .obra-master-label {
      background: #0e00a5;
      color: #FFFFFF;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(14, 0, 165, 0.6), 0 0 15px rgba(14, 0, 165, 0.4);
  }
  
  .obra-master-fechas .obra-master-label {
      background: #b800ac;
      color: #FFFFFF;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(184, 0, 172, 0.6), 0 0 15px rgba(184, 0, 172, 0.4);
  }
  
  .obra-master-description {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.95);
      margin-bottom: 30px;
      flex-grow: 1;
  }
  
  .obra-master-ver-mas {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 12px 0;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      text-align: left;
      width: fit-content;
  }
  
  .obra-master-ver-mas:hover {
      transform: translateX(5px);
      color: #FFD700;
  }
  
  .obra-master-arrow {
      font-size: 20px;
      transition: transform 0.3s ease;
  }
  
  .obra-master-ver-mas:hover .obra-master-arrow {
      transform: translateX(5px);
  }
  
  .obra-volver-btn {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 12px 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      width: fit-content;
      margin-bottom: 20px;
  }
  
  .obra-volver-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(-5px);
  }
  
  .obra-volver-arrow {
      font-size: 18px;
      transition: transform 0.3s ease;
  }
  
  .obra-volver-btn:hover .obra-volver-arrow {
      transform: translateX(-5px);
  }
  
  .obras-hoy-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
      width: 100%;
  }
  
  .obra-hoy-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-radius: 24px;
    padding: 25px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
      opacity: 0;
      animation: staggeredRevealUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  
  @keyframes staggeredRevealUp {
      from {
          opacity: 0;
          transform: translateY(40px) scale(0.95);
      }
      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
}

@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.obra-hoy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.3);
}

.obra-hoy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.obra-hoy-nombre {
      font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 22px;
      font-weight: 800;
      color: #FFFFFF;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.obra-hoy-tipo {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.obra-hoy-tipo-extraordinario {
      background: #0e00a5;
      color: #FFFFFF;
      box-shadow: 0 2px 10px rgba(14, 0, 165, 0.5), 0 0 8px rgba(14, 0, 165, 0.3);
}

.obra-hoy-tipo-ordinario {
      background: #a70052;
      color: #FFFFFF;
      box-shadow: 0 2px 10px rgba(167, 0, 82, 0.5), 0 0 8px rgba(167, 0, 82, 0.3);
}

.obra-hoy-tipo-fechas {
      background: #b800ac;
      color: #FFFFFF;
      box-shadow: 0 2px 10px rgba(184, 0, 172, 0.5), 0 0 8px rgba(184, 0, 172, 0.3);
}


/* Modal de información sobre tipos de obras */
.modal-tipos-obras {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-tipos-obras.active {
    opacity: 1;
    visibility: visible;
}

.modal-tipos-obras-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-tipos-obras-content {
    position: relative;
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s ease;
    z-index: 1;
}

.modal-tipos-obras.active .modal-tipos-obras-content {
    transform: scale(1) translateY(0);
}

.modal-tipos-obras-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 32px;
    color: var(--color-letra);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
}

.modal-tipos-obras-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.modal-tipos-obras-title {
    font-size: 28px;
    color: var(--color-letra);
    margin: 0 0 30px 0;
    text-align: center;
    font-weight: bold;
}

.modal-tipo-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-tipo-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.modal-tipo-header {
    margin-bottom: 15px;
}

.modal-tipo-description {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Responsive para modal */
@media (max-width: 768px) {
    .modal-tipos-obras-content {
        padding: 30px 20px;
        width: 95%;
        max-height: 90vh;
    }
    
    .modal-tipos-obras-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .modal-tipo-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .modal-tipo-description {
        font-size: 14px;
    }
    
    .obra-hoy-info-link {
        font-size: 14px;
    }
    
    .modal-desapego-pecado-content {
        padding: 30px 20px;
        width: 95%;
        max-height: 90vh;
          border-radius: 16px;
    }
    
    .modal-desapego-pecado-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .modal-desapego-pecado-body {
        font-size: 14px;
    }
}

/* Modal de Unirse a la Comunidad */
.modal-comunidad {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-content-comunidad {
      background: rgba(18, 28, 58, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 20px;
    padding: 0;
    max-width: 500px;
    width: 90%;
      max-height: 85vh;
    overflow-y: auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
}

.modal-header-comunidad {
    display: flex;
    justify-content: space-between;
    align-items: center;
      padding: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(18, 28, 58, 0.98);
      backdrop-filter: blur(16px);
}

.modal-header-comunidad h3 {
    margin: 0;
    font-size: 24px;
      color: #FFFFFF;
      font-weight: 700;
}

.modal-body-comunidad h4 {
    color: #FFFFFF !important;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.modal-body-comunidad > div > p,
.modal-body-comunidad > form > p,
.paso-indulgencia > p {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.92rem;
    line-height: 1.55;
}

.comunidad-contador {
    color: rgba(255, 255, 255, 0.58) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 13px !important;
}

.comunidad-contador span {
    color: #e05a8a !important;
    font-weight: 600;
}

.close-modal-comunidad {
      font-size: 28px;
      color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    padding: 0;
      width: 36px;
      height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
      border-radius: 8px;
      transition: all 0.3s ease;
}

.close-modal-comunidad:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.1);
}

.modal-body-comunidad {
      padding: 24px;
  }
  

.form-group-comunidad {
    margin-bottom: 20px;
}

  

.btn-comunidad:active {
    transform: translateY(0);
}

.btn-comunidad:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.comunidad-contador {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    color: #666;
    font-size: 14px;
    font-style: italic;
}

.comunidad-contador span {
    font-weight: 600;
    color: #a70052;
    font-style: normal;
}

.mensaje-comunidad {
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
    display: block;
}

.mensaje-comunidad.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-comunidad.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.mensaje-exito-comunidad {
    text-align: center;
    padding: 30px 20px;
}

.mensaje-exito-comunidad h4 {
      color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: bold;
}

.mensaje-exito-comunidad p {
      color: #fff;
    font-size: 16px;
    margin-bottom: 0;
}
  
  .mensaje-exito-comunidad-icono {
      margin-bottom: 1rem;
      color: #fff;
  }
  
  .mensaje-exito-comunidad-icono svg {
      display: block;
      margin: 0 auto;
}

/* Responsive para modal de comunidad */
@media (max-width: 768px) {
    .modal-content-comunidad {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-header-comunidad {
        padding: 20px;
    }
    
    .modal-header-comunidad h3 {
        font-size: 20px;
    }
    
    .modal-body-comunidad {
        padding: 20px;
    }
    
    .paso-comunidad p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .mensaje-exito-comunidad h4 {
        font-size: 20px;
          color: #fff;
    }
    
    .mensaje-exito-comunidad p {
        font-size: 14px;
          color: #fff;
    }
}

/* ===== SPEED DIAL FAB (Floating Action Button) ===== */
.speed-dial-fab {
    position: fixed;
    bottom: 30px;
    right: 10px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    width: auto;
    height: auto;
    pointer-events: none; /* Por defecto no bloquea clics */
}

/* Solo el botón principal debe recibir clics cuando está cerrado */
.speed-dial-fab:not(.active) .speed-dial-main {
    pointer-events: all;
}

/* Cuando está activo, todos los elementos pueden recibir clics */
.speed-dial-fab.active {
    align-items: center;
    gap: 20px;
    pointer-events: all;
}

/* Botón principal (trigger) */
.speed-dial-main {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a70052 0%, #8B0038 100%);
    border: 3px solid rgba(255, 195, 0, 0.5);
    box-shadow: 0 8px 24px rgba(167, 0, 82, 0.4),
                0 0 20px rgba(255, 195, 0, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    animation: speedDialPulse 2s ease-in-out infinite;
    overflow: hidden;
    padding: 0;
    margin: 0;
    outline: none;
    animation: speedDialPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               speedDialPulse 2s ease-in-out infinite;
}

/* Efecto hover mejorado */
.speed-dial-main:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(167, 0, 82, 0.5),
                0 0 30px rgba(255, 195, 0, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.3);
    animation: speedDialPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-dial-main:active {
    transform: scale(0.95);
}

/* Efecto ripple */
.speed-dial-main::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    pointer-events: none;
}

.speed-dial-main.ripple::after {
    animation: rippleEffect 0.6s ease-out;
}

/* Animación de pulso infinito para FAB */
@keyframes speedDialPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(167, 0, 82, 0.4),
                    0 0 20px rgba(255, 195, 0, 0.3),
                    inset 0 2px 4px rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(167, 0, 82, 0.6),
                    0 0 35px rgba(255, 195, 0, 0.5),
                    inset 0 2px 4px rgba(255, 255, 255, 0.2);
    }
}

/* Animación ripple effect */
@keyframes rippleEffect {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.speed-dial-main.active {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #8B0038 0%, #6B0029 100%);
    animation: speedDialPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Pausar animación de pulso cuando el menú está abierto */
.speed-dial-main.active,
.speed-dial-fab.active .speed-dial-main {
    animation: speedDialPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.speed-dial-icon-main {
    width: 36px;
    height: 36px;
    stroke: currentColor;
    stroke-width: 3;
    transition: transform 0.3s ease;
    display: block;
    margin: auto;
}

.speed-dial-main.active .speed-dial-icon-main {
    transform: rotate(45deg);
}

/* Menú desplegable */
.speed-dial-menu {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.speed-dial-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}

.speed-dial-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.speed-dial-menu.open .speed-dial-item {
    pointer-events: all;
}

.speed-dial-menu.open .speed-dial-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.05s;
}

.speed-dial-menu.open .speed-dial-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.1s;
}

.speed-dial-menu.open .speed-dial-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.15s;
}

.speed-dial-menu.open .speed-dial-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.2s;
}

/* Botones secundarios */
.speed-dial-secondary {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
    margin: 0;
    outline: none;
    position: relative;
    overflow: hidden;
}

.speed-dial-secondary:hover {
    transform: scale(1.15);
    background: #F5F5F5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.15);
}

.speed-dial-secondary:active {
    transform: scale(0.95);
}

/* Efecto ripple para botones secundarios */
.speed-dial-secondary::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
}

.speed-dial-secondary.ripple::after {
    animation: rippleEffectSecondary 0.5s ease-out;
}

/* Animación ripple para botones secundarios */
@keyframes rippleEffectSecondary {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Colores específicos para cada botón */
.speed-dial-item[data-action="ofrecer"] .speed-dial-secondary {
    color: #FFC300;
}

.speed-dial-item[data-action="ofrecer"] .speed-dial-secondary:hover {
    background: #FFF9E6;
    border-color: #FFC300;
    color: #FFB800;
}

.speed-dial-item[data-action="registrar"] .speed-dial-secondary {
    color: #1E3A8A;
}

.speed-dial-item[data-action="registrar"] .speed-dial-secondary:hover {
    background: #EFF6FF;
    border-color: #1E3A8A;
    color: #1E40AF;
}

.speed-dial-item[data-action="comunidad"] .speed-dial-secondary {
    color: #A31545;
}

.speed-dial-item[data-action="comunidad"] .speed-dial-secondary:hover {
    background: #FEF2F2;
    border-color: #A31545;
    color: #BE185D;
}

.speed-dial-item[data-action="obras"] .speed-dial-secondary {
    color: var(--color-letra, #050e38);
}

.speed-dial-item[data-action="obras"] .speed-dial-secondary:hover {
    background: #F0F4F8;
    border-color: var(--color-letra, #050e38);
    color: #1E3A5F;
}

.speed-dial-secondary svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Etiquetas de texto */
.speed-dial-label {
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    margin-right: 8px;
}

.speed-dial-item:hover .speed-dial-label {
    opacity: 1;
    transform: translateX(0);
}

.speed-dial-menu.open .speed-dial-item .speed-dial-label {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

/* Overlay oscuro */
.speed-dial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 99998;
    opacity: 0;
    animation: fadeInOverlay 0.3s ease forwards;
    pointer-events: all;
}

@keyframes fadeInOverlay {
    to {
        opacity: 1;
    }
}

@keyframes speedDialPopIn {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .speed-dial-fab {
        bottom: 20px;
        right: 10px;
    }
    
    .speed-dial-main {
        width: 64px;
        height: 64px;
    }
    
    .speed-dial-icon-main {
        width: 30px;
        height: 30px;
    }
}

/* Tamaños más grandes para PC (escritorio) */
@media (min-width: 769px) {
    .speed-dial-main {
        width: 80px;
        height: 80px;
    }
    
    .speed-dial-icon-main {
        width: 40px;
        height: 40px;
    }
}

/* Responsive para móviles - reglas adicionales */
@media (max-width: 768px) {
    .speed-dial-secondary {
        width: 48px;
        height: 48px;
    }
    
    .speed-dial-secondary svg {
        width: 20px;
        height: 20px;
    }
    
    .speed-dial-label {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .speed-dial-menu {
        gap: 12px;
    }
}

  .link-desapego-pecado {
      display: block;
      text-align: left;
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
  }
  
  .modal-indulgencia .link-desapego-pecado {
      color: #a78bfa;
  }
  
  .modal-indulgencia .link-desapego-pecado:hover {
      color: #c4b5fd;
  }
  
.modal-desapego-pecado {
      --desapego-bg: #0f1729;
      --desapego-border: rgba(255, 255, 255, 0.12);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-desapego-pecado[style*="display: flex"] {
    opacity: 1;
    visibility: visible;
}

.modal-desapego-pecado-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
}

.modal-desapego-pecado-content {
    position: relative;
      background: var(--desapego-bg);
      border: 1px solid var(--desapego-border);
      border-radius: 20px;
    padding: 40px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s ease;
    z-index: 1;
}
  
  .modal-desapego-pecado-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 20px 20px 0 0;
      background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.modal-desapego-pecado[style*="display: flex"] .modal-desapego-pecado-content {
    transform: scale(1) translateY(0);
}

.modal-desapego-pecado-close {
    position: absolute;
    top: 15px;
    right: 15px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--desapego-border);
      font-size: 28px;
      color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
}

.modal-desapego-pecado-close:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #FFFFFF;
}

.modal-desapego-pecado-title {
    font-size: 28px;
      color: #FFFFFF;
    margin: 0 0 25px 0;
      padding-top: 8px;
    text-align: center;
      font-weight: 700;
}

.modal-desapego-pecado-body {
    font-size: 16px;
    line-height: 1.8;
      color: #D1D1D1;
}

.modal-desapego-pecado-body p {
    margin-bottom: 15px;
}

  .modal-desapego-pecado-body strong {
      color: #a78bfa;
  }
  
  .modal-desapego-pecado-lista {
    margin-top: 10px;
    margin-bottom: 15px;
    padding-left: 25px;
}

.modal-desapego-pecado-body li {
    margin-bottom: 10px;
    line-height: 1.6;
}
  
  .modal-desapego-pecado-ultimo {
      margin-top: 15px;
}

/* Modal de información sobre tipos de obras */
.modal-tipos-obras {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-tipos-obras.active {
    opacity: 1;
    visibility: visible;
}

.modal-tipos-obras-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-tipos-obras-content {
    position: relative;
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s ease;
    z-index: 1;
}

.modal-tipos-obras.active .modal-tipos-obras-content {
    transform: scale(1) translateY(0);
}

.modal-tipos-obras-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 32px;
    color: var(--color-letra);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
}

.modal-tipos-obras-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.modal-tipos-obras-title {
    font-size: 28px;
    color: var(--color-letra);
    margin: 0 0 30px 0;
    text-align: center;
    font-weight: bold;
}

.modal-tipo-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-tipo-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.modal-tipo-header {
    margin-bottom: 15px;
}

.modal-tipo-description {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Responsive para modal */
@media (max-width: 768px) {
    .modal-tipos-obras-content {
        padding: 30px 20px;
        width: 95%;
        max-height: 90vh;
    }
    
    .modal-tipos-obras-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .modal-tipo-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .modal-tipo-description {
        font-size: 14px;
    }
    
    .obra-hoy-info-link {
        font-size: 14px;
    }
}

.obra-hoy-condiciones {
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border-left: 4px solid rgba(255, 255, 255, 0.5);
}

.obra-hoy-condiciones-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.obra-hoy-condiciones-texto {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

.obra-hoy-fecha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.obra-hoy-fecha-icon {
    font-size: 18px;
}

.obra-hoy-fecha-texto {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.obra-hoy-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}

.btn-obra-hoy {
    padding: 4px 20px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-obra-hoy-alma {
    background: white;
    border: 2px solid white;
    color: var(--color-letra);
}

.btn-obra-hoy-alma:hover {
    transform: translateY(-2px);
}

.btn-obra-hoy-necesitada {
    background: #a70052;
    border: 2px solid #a70052;
    color: #fff;
}

.btn-obra-hoy-necesitada:hover {
    transform: translateY(-2px);
}

.obras-hoy-empty {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.obras-hoy-empty p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* Estilos para botones de navegación de almas (swiper style) */
.souls-nav-button {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.2);
    color: var(--color-letra);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.souls-nav-button:hover {
    background: rgba(255, 255, 255, 1);
    border-color: var(--color-letra);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.souls-nav-button:active {
    transform: scale(0.95);
    outline: none;
}

.souls-nav-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.souls-nav-prev {
    margin-right: 10px;
}

.souls-nav-next {
    margin-left: 10px;
}

/* Responsive para botones de navegación - más discretos en móvil */
@media (max-width: 768px) {
    .souls-nav-button {
        width: 36px;
        height: 36px;
        font-size: 20px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        z-index: 100;
        opacity: 0.8;
    }
    
    .souls-nav-button:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }
    
    .souls-nav-button:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.85);
    }
    
    .souls-nav-prev {
        margin-right: 4px;
    }
    
    .souls-nav-next {
        margin-left: 4px;
    }
    
    .souls-grid-container {
        gap: 4px;
        padding: 15px 5px;
        position: relative;
    }
    
    .souls-section .col-sm-9 {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .souls-section .col-sm-3 {
        padding-right: 8px;
        padding-left: 8px;
    }
    
    /* Una sola columna en móvil - expandir contenedores */
    .souls-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 5px;
    }
    
    .soul-card {
        padding: 20px 22px !important;
        min-height: 260px;
        width: 100%;
        max-width: 100%;
    }
}

/* Estilos para flechas de navegación en carrusel de obras */
.obras-hoy-cards .nav-arrow {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.obras-hoy-cards .nav-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    transform: scale(1.1);
}

.obras-hoy-cards .nav-arrow:active {
    transform: scale(0.95);
    outline: none;
}

.obras-hoy-cards .nav-arrow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.obras-hoy-cards .nav-arrow.prev {
    margin-right: 10px;
}

.obras-hoy-cards .nav-arrow.next {
    margin-left: 10px;
}

/* Responsive para obras-hoy-section */
@media (max-width: 768px) {
    .obras-hoy-section {
        padding: 40px 15px;
    }
    
    .obras-hoy-title {
        font-size: 36px;
    }
    
    .obras-hoy-subtitle {
        font-size: 16px;
    }
    
    .obras-hoy-cards {
        gap: 10px;
        padding: 10px 0;
    }
    
    .obras-hoy-cards .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    
    .obra-hoy-card {
        min-width: 280px;
        max-width: 280px;
        padding: 20px;
    }
    
    .obra-hoy-nombre {
        font-size: 20px;
    }
    
    .obra-hoy-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .obra-hoy-tipo {
        align-self: flex-start;
    }
}

/* Modal de Hacer Indulgencia */
.modal-hacer-indulgencia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content-hacer-indulgencia {
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 24px;
      width: 95%;
      max-width: 1200px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-header-hacer-indulgencia {
    padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
    z-index: 10;
}

.modal-header-hacer-indulgencia h3 {
    margin: 0;
      color: #FFFFFF;
    font-size: 1.5rem;
      font-weight: 700;
  }
  
  :root {
      --menu-gap-pc: 30px;
      --menu-gap-mobile: 12px;
      --menu-padding-pc: 40px;
      --menu-padding-mobile: 20px;
      --menu-icon-size-pc: 80px;
      --menu-icon-size-mobile: 48px;
  }
  
  /* Modal Hacer Indulgencia: más compacto para caber en una vista */
  .modal-hacer-indulgencia {
      --menu-gap-pc: 14px;
      --menu-gap-mobile: 10px;
      --menu-padding-pc: 12px;
      --menu-padding-mobile: 12px;
      --menu-icon-size-pc: 52px;
      --menu-icon-size-mobile: 40px;
  }
  
  .bento-grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--menu-gap-mobile);
      padding: var(--menu-padding-mobile);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
  }
  
  @media (min-width: 641px) {
      .bento-grid-container {
          gap: var(--menu-gap-pc);
          width: 100%;
          margin: 0;
          padding: var(--menu-padding-pc);
          max-width: 100%;
      }
  }
  
  .bento-card,
  .menu-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: var(--menu-padding-mobile);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      width: 100%;
      text-align: center;
      box-sizing: border-box;
  }
  
  .menu-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient, linear-gradient(135deg, rgba(181, 0, 100, 0) 0%, rgba(139, 92, 246, 0) 100%));
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      border-radius: 20px;
  }
  
  .menu-card:hover::after {
      opacity: 1;
  }
  
  @media (min-width: 641px) {
      .bento-card,
      .menu-card {
          padding: var(--menu-padding-pc);
          aspect-ratio: auto;
          min-height: 280px;
          gap: 24px;
      }
  }
  
  .modal-hacer-indulgencia .bento-card,
  .modal-hacer-indulgencia .menu-card {
      gap: 8px;
  }
  @media (min-width: 641px) {
      .modal-hacer-indulgencia .bento-card,
      .modal-hacer-indulgencia .menu-card {
          min-height: 160px;
          padding: 14px;
          gap: 10px;
      }
  }
  .modal-hacer-indulgencia .bento-card-title,
  .modal-hacer-indulgencia .menu-card-title {
      font-size: 0.9rem;
  }
  .modal-hacer-indulgencia .bento-card-description,
  .modal-hacer-indulgencia .menu-card-description {
      font-size: 0.8rem;
      line-height: 1.25;
  }
  
  .menu-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 16px;
      border: 1px solid transparent;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
  }
  
  .menu-card:hover::before {
      border-color: rgba(255, 255, 255, 0.2);
  }
  
  .menu-card:active::before,
  .menu-card.active::before {
      border-color: var(--card-color, rgba(181, 0, 100, 0.8));
      border-width: 2px;
      box-shadow: 0 0 16px var(--card-color, rgba(181, 0, 100, 0.4));
  }
  
  .menu-card:hover,
  .menu-card:focus {
      background: rgba(255, 255, 255, 0.08);
  }
  
  .menu-card:active,
  .menu-card.active {
      transform: scale(0.97);
      background: rgba(255, 255, 255, 0.08);
  }
  
  .bento-card-icon,
  .menu-card-icon {
      width: var(--menu-icon-size-mobile);
      height: var(--menu-icon-size-mobile);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
      flex-shrink: 0;
      position: relative;
      border-radius: 12px;
      background: var(--card-gradient, linear-gradient(135deg, rgba(181, 0, 100, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%));
      padding: 6px;
  }
  
  .menu-card:hover .menu-card-icon {
      transform: scale(1.05);
  }
  
  .bento-card-icon img,
  .menu-card-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  
  @media (min-width: 641px) {
      .bento-card-icon,
      .menu-card-icon {
          width: var(--menu-icon-size-pc);
          height: var(--menu-icon-size-pc);
          padding: 8px;
      }
  }
  
  .bento-card-content,
  .menu-card-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      width: 100%;
      align-items: center;
      justify-content: center;
  }
  
  .bento-card-title,
  .menu-card-title {
      color: #FFFFFF;
      font-size: 1rem;
      font-weight: 700;
      margin: 0;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
  }
  
  .bento-card-description,
  .menu-card-description {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.75rem;
      line-height: 1.4;
      margin: 0;
      display: none;
      text-align: center;
  }
  
  @media (min-width: 641px) {
      .bento-card-title,
      .menu-card-title {
          font-size: 1.5rem;
          white-space: normal;
          font-weight: 800;
      }
  
      .bento-card-description,
      .menu-card-description {
          font-size: 1rem;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }
  }
  
  @media (max-width: 640px) {
      .bento-grid-container {
          grid-template-columns: repeat(2, 1fr);
          gap: var(--menu-gap-mobile);
          padding: var(--menu-padding-mobile);
          width: 100%;
          box-sizing: border-box;
      }
  
      .bento-card,
      .menu-card {
          padding: var(--menu-padding-mobile);
          border-radius: 16px;
          flex-direction: column;
          aspect-ratio: 1 / 1;
      }
  
      .bento-card-icon,
      .menu-card-icon {
          width: var(--menu-icon-size-mobile);
          height: var(--menu-icon-size-mobile);
          padding: 8px;
      }
  
      .bento-card-title,
      .menu-card-title {
          font-size: 1rem;
          font-weight: 700;
          line-height: 1.2;
      }
  
      .bento-card-description,
      .menu-card-description {
          display: none;
      }
      /* Excepción: en el modal Hacer Indulgencia sí mostrar descripciones en móvil */
      .modal-hacer-indulgencia .bento-card-description,
      .modal-hacer-indulgencia .menu-card-description {
          display: -webkit-box !important;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          font-size: 0.7rem !important;
          line-height: 1.2;
          color: rgba(255, 255, 255, 0.75);
      }
  
      .bento-card-content,
      .menu-card-content {
          gap: 8px;
      }
  
      .modal-content-hacer-indulgencia {
          width: 100%;
          max-width: 100%;
          border-radius: 0;
          max-height: 100vh;
          margin: 0;
      }
  
      .modal-header-hacer-indulgencia {
          padding: 16px;
      }
  
      .modal-header-hacer-indulgencia h3 {
          font-size: 1.25rem;
      }
  
      .modal-body-hacer-indulgencia {
          padding: 20px 16px;
      }
}

.close-modal-hacer-indulgencia {
    background: none;
    border: none;
      font-size: 28px;
    cursor: pointer;
      color: rgba(255, 255, 255, 0.7);
    padding: 0;
      min-width: 44px;
      min-height: 44px;
      width: 44px;
      height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
      transition: all 0.2s ease;
}

.close-modal-hacer-indulgencia:hover {
      color: #FFFFFF;
  }
  
  .close-modal-hacer-indulgencia:active {
      transform: scale(0.95);
}

.modal-body-hacer-indulgencia {
    padding: 12px 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      box-sizing: border-box;
  }
  
  @media (max-width: 640px) {
      .modal-body-hacer-indulgencia {
          padding: 20px 16px;
      }
}

/* Menú principal */
.modal-hacer-indulgencia-menu {
    display: block;
      width: 100%;
      max-width: 100%;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.menu-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: var(--color-letra, #007bff);
}

.menu-item img {
    max-width: 80px;
    height: auto;
}

.menu-item h4 {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
}

.menu-item p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Sección informativa */
.modal-hacer-indulgencia-seccion-info {
    display: none;
}

.info-content {
    max-width: 100%;
}

.paso-info-indulgencia {
    display: none;
}

.paso-info-indulgencia.active {
    display: block;
}

.paso-info-indulgencia h2 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
}

.info-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid var(--color-letra, #007bff);
}

.info-section h3 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-section h4 {
    color: #666;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 500;
    font-style: italic;
}

.info-section p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.info-section ul {
    margin-left: 20px;
    margin-top: 10px;
}

.info-section ul li {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 5px;
}
  
  .modal-hacer-indulgencia {
      --info-card-bg: rgba(255, 255, 255, 0.03);
      --info-card-border: rgba(255, 255, 255, 0.1);
      --info-card-border-hover: rgba(139, 92, 246, 0.4);
      --info-card-accent: #a78bfa;
  }
  
  .modal-hacer-indulgencia .info-card-step-titulo-paso {
      color: #FFFFFF;
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 25px;
      text-align: center;
  }
  
  .modal-hacer-indulgencia .info-card-step {
      margin-bottom: 30px;
      padding: 24px;
      background: var(--info-card-bg);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--info-card-border);
      border-radius: 16px;
      transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }
  
  .modal-hacer-indulgencia .info-card-step:hover {
      border-color: var(--info-card-border-hover);
      box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08);
  }
  
  .modal-hacer-indulgencia .info-card-step h3 {
      color: #FFFFFF;
      font-size: 1.3rem;
      font-weight: 600;
      margin: 0 0 10px 0;
  }
  
  .modal-hacer-indulgencia .info-card-step h4 {
      color: #E0E0E0;
      font-size: 1rem;
      font-weight: 500;
      font-style: italic;
      margin: 0 0 10px 0;
  }
  
  .modal-hacer-indulgencia .info-card-step p,
  .modal-hacer-indulgencia .info-card-step ul li {
      color: #E0E0E0;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 10px;
  }
  
  .modal-hacer-indulgencia .info-card-step p:last-child {
      margin-bottom: 0;
  }
  
  .modal-hacer-indulgencia .info-card-step ul {
      margin-left: 20px;
      margin-top: 10px;
  }
  
  .modal-hacer-indulgencia .info-card-step strong {
      color: var(--info-card-accent);
      font-weight: 600;
  }
  
  .modal-hacer-indulgencia .info-card-step-actions {
      margin-top: 15px;
  }
  
  .modal-hacer-indulgencia .info-card-step-link {
      background: none;
      border: none;
      color: var(--info-card-accent);
      text-decoration: underline;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      font: inherit;
  }
  
  .modal-hacer-indulgencia .info-card-step-link:hover {
      color: #c4b5fd;
  }
  
  .modal-hacer-indulgencia .info-navigation {
      border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  .modal-hacer-indulgencia .info-navigation .btn-volver-menu,
  .modal-hacer-indulgencia .info-navigation .btn-siguiente-paso,
  .modal-hacer-indulgencia .info-navigation .btn-anterior-paso {
      color: #E0E0E0;
}

.info-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.info-actions {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin: 30px 0;
    justify-content: space-between;
    flex-wrap: wrap;
}

.btn-action-indulgencia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.btn-action-indulgencia:hover {
    transform: translateY(-2px);
}

.btn-action-indulgencia img {
    width: 30px;
    height: auto;
    flex-shrink: 0;
}

/* Botón "Obras que puedo realizar hoy" - Estilo igual al register-button pero verde */
.btn-obras-hoy {
    background: var(--color-letra);
    border: 2px solid white;
    color: white;
    padding: 4px 50px;
    padding-right: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.btn-obras-hoy:hover {
    background: var(--color-letra);
}

/* Botón "Registrar un alma" - Igual al register-button */
.btn-registrar-alma {
    background: var(--color-letra);
    border: 2px solid white;
    color: white;
    padding: 4px 50px;
    padding-right: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.btn-registrar-alma:hover {
    background: var(--color-letra);
}

/* Botón "Ofrecer una indulgencia" - Igual al offer-button */
.btn-ofrecer-indulgencia {
    background: #a70052;
    color: white;
    padding: 5px 38px;
}

.btn-ofrecer-indulgencia:hover {
    background: #a70052;
}

.btn-volver-menu,
.btn-anterior-paso,
.btn-siguiente-paso {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-volver-menu {
    background: #6c757d;
    color: white;
}

.btn-volver-menu:hover {
    background: #5a6268;
}

.btn-anterior-paso,
.btn-siguiente-paso {
    background: var(--color-letra, #007bff);
    color: white;
}

.btn-anterior-paso:hover,
.btn-siguiente-paso:hover {
    background: #0056b3;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .modal-content-hacer-indulgencia {
        width: 95%;
        max-height: 90vh;
    }
    
    .info-navigation {
        flex-direction: column;
        gap: 10px;
    }
    
    .info-navigation button {
        width: 100%;
    }
    
    .info-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-action-indulgencia {
        width: 100%;
        font-size: 11px;
    }
    
    .btn-obras-hoy,
    .btn-registrar-alma {
        padding: 4px 30px;
        padding-right: 12px;
    }
    
    .btn-ofrecer-indulgencia {
        padding: 5px 30px;
    }
    
    .paso-info-indulgencia h2 {
        font-size: 1.4rem;
    }
    
    .info-section {
        padding: 15px;
    }
}

.modal-conocer-mas {
      --conocer-mas-bg: #0f1729;
      --conocer-mas-bg-card: rgba(255, 255, 255, 0.06);
      --conocer-mas-border: rgba(255, 255, 255, 0.1);
      --conocer-mas-accent: #a78bfa;
      --conocer-mas-amber: #eab308;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content-conocer-mas {
      background: var(--conocer-mas-bg);
    border-radius: 20px;
      border: 1px solid var(--conocer-mas-border);
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}
  
  .modal-content-conocer-mas::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 20px 20px 0 0;
      background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.modal-header-conocer-mas {
      padding: 20px 24px;
      border-bottom: 1px solid var(--conocer-mas-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
      background: var(--conocer-mas-bg);
    z-index: 10;
}

.modal-header-conocer-mas h3 {
    margin: 0;
      color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.close-modal-conocer-mas {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
      color: rgba(255, 255, 255, 0.7);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.close-modal-conocer-mas:hover {
      color: #FFFFFF;
}

.modal-body-conocer-mas {
    padding: 30px;
}

.progress-indicator-conocer-mas {
    margin-bottom: 30px;
    padding: 20px 0;
}

.progress-step-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.progress-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

  .modal-conocer-mas .progress-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
  }
  
  .modal-conocer-mas .progress-step-item.active .progress-step-circle {
      background: rgba(139, 92, 246, 0.25);
      border-color: var(--conocer-mas-accent);
      color: #FFFFFF;
      box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
  }
  
  .modal-conocer-mas .progress-step-item.completed .progress-step-circle {
      background: rgba(34, 197, 94, 0.25);
      border-color: rgba(34, 197, 94, 0.6);
      color: #86efac;
  }
  
  .modal-conocer-mas .progress-step-label {
    font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

  .modal-conocer-mas .progress-step-item.active .progress-step-label {
      color: var(--conocer-mas-accent);
}

  .modal-conocer-mas .progress-step-item.completed .progress-step-label {
      color: rgba(34, 197, 94, 0.9);
}

  .modal-conocer-mas .progress-step-line {
    flex: 1;
    height: 3px;
      background: rgba(255, 255, 255, 0.1);
    max-width: 80px;
    transition: background 0.3s ease;
}

  .modal-conocer-mas .progress-step-line.completed {
      background: rgba(34, 197, 94, 0.5);
}

.resumen-destacado {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--conocer-mas-border);
      border-radius: 16px;
    padding: 30px;
    margin-bottom: 35px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.resumen-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
      opacity: 0.9;
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
      animation: resumen-conocer-mas-pulse 2s ease-in-out infinite;
}

  @keyframes resumen-conocer-mas-pulse {
    0%, 100% {
        transform: scale(1);
          opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

  .resumen-destacado-cita {
    margin: 0;
      color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
    line-height: 1.7;
      font-weight: 500;
    font-style: italic;
      letter-spacing: 0.08em;
}

.paso-conocer-mas {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.paso-conocer-mas.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

  .modal-conocer-mas .info-section-conocer-mas {
    margin-bottom: 30px;
    padding: 30px;
      background: var(--conocer-mas-bg-card);
      border-radius: 16px;
      border: 1px solid var(--conocer-mas-border);
      box-shadow: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
  
  .modal-conocer-mas .info-section-conocer-mas:hover {
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  
  .modal-conocer-mas .info-section-conocer-mas h3 {
      color: #FFFFFF;
    font-size: 1.5rem;
    margin-bottom: 20px;
      font-weight: 600;
    letter-spacing: -0.3px;
}

  .modal-conocer-mas .info-section-conocer-mas p {
      color: #D1D1D1;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

  .modal-conocer-mas .info-section-conocer-mas p:last-child {
    margin-bottom: 0;
}

  .modal-conocer-mas .info-section-conocer-mas p strong,
  .modal-conocer-mas .info-section-conocer-mas .resaltado-conocer-mas {
      color: var(--conocer-mas-amber);
      font-weight: 600;
      text-shadow: 0 0 20px rgba(234, 179, 8, 0.15);
  }
  
  .modal-conocer-mas .condiciones-lista {
    margin: 25px 0 0 0;
    padding-left: 0;
    list-style: none;
}

  .modal-conocer-mas .condiciones-lista li {
      color: #D1D1D1;
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 18px;
    padding: 15px 15px 15px 50px;
    position: relative;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 10px;
      border: 1px solid var(--conocer-mas-border);
    transition: all 0.3s ease;
}

  .modal-conocer-mas .condiciones-lista li:hover {
      background: rgba(255, 255, 255, 0.06);
}

  .modal-conocer-mas .condiciones-lista li:before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
      color: #0f1729;
      background: var(--conocer-mas-accent);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

  .modal-conocer-mas .condiciones-lista li:last-child {
    margin-bottom: 0;
}

.info-navigation-conocer-mas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
      border-top: 1px solid var(--conocer-mas-border);
    gap: 15px;
}

.btn-anterior-conocer-mas,
.btn-siguiente-conocer-mas,
.btn-cerrar-conocer-mas {
    padding: 12px 24px;
    border: none;
      border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-anterior-conocer-mas {
      background: rgba(255, 255, 255, 0.1);
      color: #D1D1D1;
      border: 1px solid var(--conocer-mas-border);
}

.btn-anterior-conocer-mas:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #FFFFFF;
}

.btn-siguiente-conocer-mas {
      background: linear-gradient(145deg, #1e3a5f 0%, #0f1729 50%, #0a0f1a 100%);
      color: #FFFFFF;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-siguiente-conocer-mas::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.5s ease;
}

.btn-siguiente-conocer-mas:hover::before {
    left: 100%;
}

.btn-siguiente-conocer-mas:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(30, 58, 95, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-siguiente-conocer-mas:active {
      transform: translateY(0);
}

.btn-cerrar-conocer-mas {
      background: rgba(255, 255, 255, 0.1);
      color: #D1D1D1;
      border: 1px solid var(--conocer-mas-border);
}

.btn-cerrar-conocer-mas:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #FFFFFF;
}

@media (max-width: 768px) {
    .modal-content-conocer-mas {
        width: 95%;
        max-height: 90vh;
          border-radius: 16px;
    }
    
    .modal-header-conocer-mas {
          padding: 15px 20px;
    }
    
    .modal-header-conocer-mas h3 {
        font-size: 1.3rem;
    }
    
    .modal-body-conocer-mas {
        padding: 20px;
    }
    
    .progress-indicator-conocer-mas {
        padding: 15px 0;
        margin-bottom: 25px;
    }
    
      .modal-conocer-mas .progress-step-circle {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
      .modal-conocer-mas .progress-step-label {
        font-size: 0.65rem;
    }
    
      .modal-conocer-mas .progress-step-line {
        max-width: 50px;
    }
    
    .resumen-destacado {
        padding: 25px 20px;
        margin-bottom: 25px;
    }
    
    .resumen-icon {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    
      .resumen-destacado-cita {
        font-size: 1rem;
    }
    
      .modal-conocer-mas .info-section-conocer-mas {
        padding: 20px;
        margin-bottom: 25px;
    }
    
      .modal-conocer-mas .info-section-conocer-mas h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
      .modal-conocer-mas .info-section-conocer-mas p {
        font-size: 1rem;
        line-height: 1.7;
    }
    
      .modal-conocer-mas .condiciones-lista {
        margin-top: 20px;
    }
    
      .modal-conocer-mas .condiciones-lista li {
        font-size: 0.95rem;
        padding: 12px 12px 12px 45px;
        margin-bottom: 15px;
    }
    
      .modal-conocer-mas .condiciones-lista li:before {
        width: 22px;
        height: 22px;
        font-size: 0.85rem;
        left: 12px;
    }
    
    .info-navigation-conocer-mas {
        flex-direction: column;
        gap: 12px;
        margin-top: 25px;
        padding-top: 20px;
    }
    
    .info-navigation-conocer-mas button {
        width: 100%;
        padding: 14px 24px;
    }
}

/* Responsive adicional para Sección Suscripción - Tablets */
@media (max-width: 768px) {
    .suscripcion-texto {
        font-size: 22px;
    }
    
    .suscribir-button {
        font-size: 18px;
        padding: 10px 35px;
        min-height: 46px;
        margin-left: 0;
    }
    
    .suscribir-button img {
        width: 32px;
        max-width: 32px;
    }
    
    .suscripcion-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .suscripcion-section {
        padding: 25px 15px;
    }
}

/* Responsive adicional para Sección Conocer más (Hero) - Tablets */
@media (max-width: 768px) {
    .cta-button {
        padding: 10px 60px;
        font-size: 0.95rem;
        min-height: 46px;
    }
    
    .hero-text h1 {
        font-size: 3rem;
    }
    
    .hero-description {
        font-size: 20px;
    }
    
    .bible-quote {
        font-size: 20px;
    }
}

/* Modal de Condiciones de Obra */
.modal-condiciones-obra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-condiciones-obra[style*="display: flex"] {
    opacity: 1;
    visibility: visible;
}

.modal-condiciones-obra-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 0;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-condiciones-obra[style*="display: flex"] .modal-condiciones-obra-content {
    transform: scale(1) translateY(0);
}

.modal-condiciones-obra-header {
    padding: 25px 30px;
    background: linear-gradient(135deg, var(--color-letra, #050e38) 0%, #1a3d7a 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.modal-condiciones-nombre {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.modal-condiciones-close {
    background: transparent;
    border: none;
    font-size: 36px;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
    margin-left: 15px;
}

.modal-condiciones-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-condiciones-obra-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.modal-condiciones-tipo-container {
    margin-bottom: 25px;
    text-align: center;
}

.modal-condiciones-tipo-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-condiciones-tipo-extraordinario {
    background: #a70052;
}

.modal-condiciones-tipo-ordinario {
    background: var(--color-letra, #050e38);
}

.modal-condiciones-tipo-fechas {
    background: #FFC300;
    color: #050e38;
}

.modal-condiciones-section {
    margin-bottom: 30px;
}

.modal-condiciones-title {
    font-size: 20px;
    color: var(--color-letra, #050e38);
    margin: 0 0 20px 0;
    font-weight: bold;
    border-bottom: 2px solid var(--color-letra, #050e38);
    padding-bottom: 10px;
}

.modal-condiciones-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-condiciones-lista li {
    padding: 18px 18px 18px 50px;
    margin-bottom: 15px;
    background: #f8f9fa;
    border-left: 4px solid var(--color-letra, #050e38);
    border-radius: 8px;
    position: relative;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    transition: all 0.3s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
}

/* Estilizar guiones mejorados en condiciones */
.modal-condiciones-lista li .condicion-guion {
    display: inline-block;
    color: var(--color-letra, #050e38);
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    margin-left: 0;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    top: -1px;
}
  
  .modal-condiciones-lista li .condicion-inciso {
      display: inline-block;
      color: var(--color-letra, #050e38);
      font-weight: bold;
      margin-right: 8px;
      vertical-align: baseline;
      line-height: 1;
  }
  
  .modal-condiciones-lista li .condicion-inciso-mayuscula {
      font-size: 18px;
  }
  
  .modal-condiciones-lista li .condicion-inciso-minuscula {
      font-size: 16px;
  }
  
  .modal-condiciones-lista li .condicion-inciso-numero {
      font-size: 16px;
}

/* Mejorar espaciado entre líneas con guiones - más compacto */
.modal-condiciones-lista li br {
    display: block;
    margin: 4px 0;
    line-height: 1.3;
}

  /* Mejorar visualización de líneas con guiones e incisos - espacio reducido */
  .modal-condiciones-lista li:has(.condicion-guion),
  .modal-condiciones-lista li:has(.condicion-inciso) {
    padding-bottom: 15px;
}

.modal-condiciones-lista li:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.modal-condiciones-lista li:before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 25px;
    height: 25px;
    background: var(--color-letra, #050e38);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.modal-condiciones-empty {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

.modal-condiciones-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #e9ecef;
}

.btn-modal-condiciones {
    flex: 1;
    min-width: 200px;
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-modal-condiciones-alma {
      background: #FFFFFF;
      color: #0A1F44;
      border-radius: 50px;
}

.btn-modal-condiciones-alma:hover {
      background: #F5F5F5;
    transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.btn-modal-condiciones-necesitada {
      background: #B50064;
      color: #FFFFFF;
      border-radius: 50px;
}

.btn-modal-condiciones-necesitada:hover {
      background: #C6006E;
    transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(181, 0, 100, 0.5), 0 0 15px rgba(181, 0, 100, 0.3);
}

/* Indicador de condiciones en tarjeta */
.obra-hoy-has-condiciones {
    margin: 15px 0;
}

.obra-hoy-condiciones-indicator {
    display: inline-block;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #FFC300;
}

.obra-hoy-click-hint {
    text-align: center;
    color: rgba(5, 14, 56, 0.7);
    font-size: 13px;
    font-style: italic;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(5, 14, 56, 0.2);
}

/* Responsive para Modal de Condiciones */
@media (max-width: 768px) {
    .modal-condiciones-obra-content {
        width: 95%;
        max-height: 90vh;
        border-radius: 15px;
    }
    
    .modal-condiciones-obra-header {
        padding: 20px 20px;
    }
    
    .modal-condiciones-nombre {
        font-size: 20px;
    }
    
    .modal-condiciones-obra-body {
        padding: 20px;
    }
    
    .modal-condiciones-title {
        font-size: 18px;
    }
    
    .modal-condiciones-lista li {
        padding: 12px 12px 12px 45px;
        font-size: 15px;
    }
    
    .modal-condiciones-lista li:before {
        width: 22px;
        height: 22px;
        font-size: 12px;
        left: 12px;
        top: 12px;
    }
    
    .modal-condiciones-actions {
        flex-direction: column;
    }
    
    .btn-modal-condiciones {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .modal-condiciones-obra-content {
        width: 98%;
        max-height: 95vh;
    }
    
    .modal-condiciones-obra-header {
        padding: 15px 15px;
    }
    
    .modal-condiciones-nombre {
        font-size: 18px;
    }
    
    .modal-condiciones-close {
        width: 35px;
        height: 35px;
        font-size: 30px;
    }
    
    .modal-condiciones-obra-body {
        padding: 15px;
    }
    
    .modal-condiciones-lista li {
        padding: 10px 10px 10px 40px;
        font-size: 14px;
    }
    
    .btn-modal-condiciones {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* Estilos para acordeón de condiciones en resumen */
.resumen-condiciones-accordion {
    margin-top: 10px;
}

.resumen-condiciones-toggle {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-letra, #050e38);
    border: 2px solid #FFC300;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.resumen-condiciones-toggle:hover {
    background: rgba(5, 14, 56, 0.1);
    border-color: #FFD700;
    color: var(--color-letra, #050e38);
}

.resumen-condiciones-toggle.active {
    background: rgba(5, 14, 56, 0.15);
    border-color: #FFD700;
    color: var(--color-letra, #050e38);
}

.resumen-condiciones-toggle .accordion-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.resumen-condiciones-content {
    margin-top: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.resumen-condiciones-content.accordion-expanded {
    padding: 15px;
    max-height: 1000px;
    opacity: 1;
}

.resumen-condiciones-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resumen-condiciones-lista li {
    color: var(--color-letra, #050e38);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 10px;
    padding: 8px 0 8px 25px;
    position: relative;
}

.resumen-condicion-texto {
    color: var(--color-letra, #050e38) !important;
    font-weight: 500;
}
  
  .resumen-condicion-texto .condicion-inciso,
  .resumen-condiciones-lista li .condicion-inciso {
      display: inline-block;
      color: var(--color-letra, #050e38);
      font-weight: bold;
      margin-right: 8px;
      vertical-align: baseline;
      line-height: 1;
  }
  
  .resumen-condicion-texto .condicion-inciso-mayuscula,
  .resumen-condiciones-lista li .condicion-inciso-mayuscula {
      font-size: 18px;
  }
  
  .resumen-condicion-texto .condicion-inciso-minuscula,
  .resumen-condiciones-lista li .condicion-inciso-minuscula {
      font-size: 16px;
  }
  
  .resumen-condicion-texto .condicion-inciso-numero,
  .resumen-condiciones-lista li .condicion-inciso-numero {
      font-size: 16px;
  }
  
  .resumen-condicion-texto .condicion-guion,
  .resumen-condiciones-lista li .condicion-guion {
      display: inline-block;
      color: var(--color-letra, #050e38);
      font-weight: bold;
      font-size: 20px;
      margin-right: 10px;
      margin-left: 0;
      vertical-align: middle;
      line-height: 1;
}

.resumen-condiciones-lista li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 18px;
    background: #FFC300;
    color: #050e38;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.resumen-condiciones-lista li:last-child {
    margin-bottom: 0;
}

/* Responsive para acordeón de condiciones */
@media (max-width: 768px) {
    .resumen-condiciones-toggle {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .resumen-condiciones-content {
        padding: 12px;
    }
    
    .resumen-condiciones-lista li {
        font-size: 13px;
        padding: 6px 0 6px 22px;
    }
    
    .resumen-condiciones-lista li:before {
        width: 16px;
        height: 16px;
        font-size: 11px;
    }
}