/* ═══════════════════════════════════════════════
   index.css — Estilos específicos del homepage
   Glosario Manabita
═══════════════════════════════════════════════ */

/* ── Popup evento: animación ── */
@keyframes popIn {
    from { opacity:0; transform:scale(.92) translateY(12px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Slider section ── */
.latest-slider-section {
    padding: 2.5rem 0;
    background: white;
    border-bottom: 3px solid var(--gray-200);
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.btn-ver-todos {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--green);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    padding: .35rem .8rem;
    border: 1.5px solid var(--green);
    border-radius: 20px;
    transition: var(--transition);
}
.btn-ver-todos:hover { background: var(--green); color: white; }

/* ── Slider layout ── */
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: .8rem;
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
.slider-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--green);
    background: white;
    color: var(--green);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 2;
}
.slider-btn:hover    { background: var(--green); color: white; }
.slider-btn:disabled { opacity: .3; cursor: not-allowed; }

.slider-track-outer {
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-width: 0;
}
.slider-track {
    display: flex;
    gap: 1.2rem;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── Slider card ── */
.slider-card {
    flex-shrink: 0;
    width: calc(33.333% - .8rem);
    min-width: 0;
}
@media (max-width: 900px) {
    .slider-wrapper { max-width: 100%; }
    .slider-card    { width: calc(50% - .6rem); }
}
@media (max-width: 580px) {
    .slider-btn  { width: 32px; height: 32px; font-size: .85rem; }
    .slider-card { width: calc(100% - .4rem); }
}

.slider-card-inner {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
    border: none;
    cursor: pointer;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.slider-card-inner:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,.15);
    transform: translateY(-6px);
}
.slider-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.slider-card-img-ph {
    width: 100%;
    height: 180px;
    background: var(--green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-card-letter {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--green);
    opacity: 1;
    line-height: 1;
}
.slider-card-body   { padding: 1.5rem 1.2rem; display: flex; flex-direction: column; align-items: center; flex: 1; }
.slider-card-badge  {
    display: inline-block;
    background: var(--gray-200);
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}
.slider-card-term {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: .4rem;
    line-height: 1.2;
}
.slider-card-meaning {
    font-size: .85rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slider-card-usage {
    font-size: .78rem;
    color: var(--green-dark);
    font-style: italic;
    margin: 0;
}

/* ── Slider dots ── */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.2rem;
}
.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--gray-200);
    background: var(--gray-200);
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}
.slider-dot.active {
    background: var(--green);
    border-color: var(--green);
    width: 28px;
    border-radius: 5px;
}

/* ── Event cards ── */
.event-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    min-width: 0;
}
.event-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,.15); transform: translateY(-6px); }
.event-card-date {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2rem .5rem;
    color: white;
    background: var(--green-dark);
}
.event-card-day   { font-size: 2rem; font-weight: 700; line-height: 1; font-family: 'Playfair Display', serif; }
.event-card-mon   { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-top: .3rem; opacity: .9; }
.event-card-info  { padding: 1.5rem 1.2rem; width: 100%; box-sizing: border-box; }
.event-card-cat   { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin-bottom: .4rem; }
.event-card-title { font-size: 1.15rem; font-weight: 700; color: var(--green-dark); line-height: 1.3; margin-bottom: .6rem; }
.event-card-desc  { font-size: .9rem; color: var(--gray-600); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Events row responsive ── */
#fechas .events-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
}
#fechas .events-row .event-card {
    width: 280px;
    max-width: 100%;
    flex-shrink: 1;
}
@media (max-width: 640px) {
    #fechas .events-row              { gap: .6rem; }
    #fechas .events-row .event-card  { width: 100%; }
}


/* ═══════════════════════════════════════════════
   TORN PAPER & ANIMATIONS
═══════════════════════════════════════════════ */

/* Divisor Papel Rasgado Blanco */
.torn-paper-top {
    width: 100%; height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 45' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C150,15 300,45 450,20 C600,45 750,0 900,25 C1050,45 1200,15 1200,45 L1200,0 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative; z-index: 10; margin-top: -44px;
}
.torn-paper-bottom {
    width: 100%; height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 45' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C150,30 300,0 450,25 C600,0 750,45 900,20 C1050,0 1200,30 1200,0 L1200,45 L0,45 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative; z-index: 10; margin-bottom: -44px;
}

/* Divisor Papel Rasgado Verde Oscuro (#041f2f) */
.torn-paper-top-green {
    width: 100%; height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 45' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C150,15 300,45 450,20 C600,45 750,0 900,25 C1050,45 1200,15 1200,45 L1200,0 L0,0 Z' fill='%23041f2f'/%3E%3C/svg%3E");
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative; z-index: 10; margin-top: -44px;
}
.torn-paper-bottom-green {
    width: 100%; height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 45' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C150,30 300,0 450,25 C600,0 750,45 900,20 C1050,0 1200,30 1200,0 L1200,45 L0,45 Z' fill='%23041f2f'/%3E%3C/svg%3E");
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative; z-index: 10; margin-bottom: -44px;
}

/* Base de animación Scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Efectos Específicos */
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scale-in {
    transform: scale(0.9) translateY(40px);
}
.scale-in.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Delays para elementos en secuencia */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* ═══════════════════════════════════════════════
   PERGAMINO (ABOUT SECTION)
═══════════════════════════════════════════════ */
.scroll-trigger-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: 0 auto;
    outline: none;
}
.scroll-seal {
    background: #b91c1c;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(185,28,28,.4);
    border: 3px solid #fecaca;
    transition: transform .3s ease;
}
.scroll-trigger-btn:hover .scroll-seal {
    transform: scale(1.1) rotate(-10deg);
}
.scroll-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--green-dark);
    font-style: italic;
    font-weight: 700;
}

.scroll-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.scroll-wrapper.open {
    max-height: 3000px;
}

.scroll-content-inner {
    padding: 2rem 1rem;
}
.scroll-paper {
    background: #fdfbf7;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 3rem 2rem;
    position: relative;
    box-shadow: inset 0 0 40px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.1);
    background-image: radial-gradient(#d4d4d4 1px, transparent 1px);
    background-size: 30px 30px;
}
.scroll-paper::before, .scroll-paper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 15px;
    background: #e2e2e2;
    border-radius: 5px;
    z-index: -1;
}
.scroll-paper::before { top: -8px; }
.scroll-paper::after { bottom: -8px; }

.close-scroll-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,.05);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--gray-600);
    transition: background .2s;
}
.close-scroll-btn:hover {
    background: rgba(0,0,0,.1);
    color: #000;
}

.scroll-text-content {
    text-align: left;
    color: #444;
}
.scroll-text-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.scroll-text-content h3:first-child { margin-top: 0; }
.scroll-text-content p {
    line-height: 1.7;
    margin-bottom: 1rem;
}
.scroll-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.1), transparent);
    margin: 2rem 0;
}
.scroll-mission-list {
    list-style: none;
    padding: 0;
}
.scroll-mission-list li {
    margin-bottom: .8rem;
    padding-left: 1.5rem;
    position: relative;
}
.scroll-mission-list li i {
    position: absolute;
    left: 0;
    top: 4px;
}
.scroll-donations {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.donate-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    border-radius: 20px;
    color: white !important;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s;
}
.donate-btn:hover { transform: translateY(-2px); }
.donate-paypal { background: #00457C; }
.donate-kofi { background: #29abe0; }
.donate-bmc { background: #FFDD00; color: #000 !important; }

/* -- Utilities for index.php -- */
.alpha-index-wrapper { display:flex; flex-wrap:wrap; gap:.15rem; padding:.6rem 1rem; justify-content:center; }
.section-title-clean { border:none; padding:0; margin:0; }
.steps-header { text-align:center; margin-bottom:2rem; }
.steps-title { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,3vw,2rem); color:white; text-shadow:0 2px 6px rgba(0,0,0,.2); }
.steps-subtitle { color:rgba(255,255,255,.75); margin-top:.3rem; }
.steps-footer { text-align:center; margin-top:2.5rem; }
.btn-cta-large { font-size:1.1rem; padding:.8rem 2.5rem; }
.fechas-section { padding:2.5rem 0; background:var(--gray-50); }
.section-header-clean { margin-bottom:1.5rem; }
.fechas-empty { text-align:center; color:var(--gray-600); padding:1.5rem 0; }
.fechas-footer { text-align:center; }
.btn-outline-green { display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid var(--green); color:var(--green); padding:.55rem 1.5rem; border-radius:25px; font-size:.88rem; font-weight:600; text-decoration:none; transition:var(--transition); }
.btn-outline-green:hover { background:var(--green); color:white; }
.blog-section { padding:2.5rem 0; background:white; }
.blog-grid-home { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.2rem; }
.blog-card-title-small { font-size:.95rem; }
.blog-card-title-link { color:inherit; }
.blog-card-excerpt-clamp { -webkit-line-clamp:2; }
.blog-card-date-icon { opacity:.6; }