/* ============================
CRONOGRAMA v3.0.0 - ESTILOS
============================ */

.crono-wrapper {
   --crono-primary: #b8860b;
   --crono-primary-soft: rgba(184, 134, 11, 0.18);
   --crono-card-bg: #fdf8f0;
   --crono-page-bg: #faf7f2;
   --crono-icon-color: var(--crono-primary);
   --crono-border-color: rgba(184, 134, 11, 0.25);
   --crono-line-bg: #e8e0d0;
   --crono-dot-bg: var(--crono-page-bg);
   --crono-arrow-bg: var(--crono-card-bg);
   --crono-image-height: 180px;
   --crono-dot-size: 50px;
   --crono-dot-top: 30px;
   --crono-dot-top-with-image: calc(var(--crono-image-height) + 30px);
   --crono-line-fade: 100px;
}

.crono-preset-rose .crono-wrapper,
.crono-preset-rose.crono-header { --crono-primary: #d4849c; --crono-primary-soft: rgba(212,132,156,0.2); --crono-card-bg: #fdf5f8; --crono-line-bg: #f3dde4; --crono-border-color: rgba(212,132,156,0.3); }
.crono-preset-sage .crono-wrapper,
.crono-preset-sage.crono-header { --crono-primary: #7d9a78; --crono-primary-soft: rgba(125,154,120,0.2); --crono-card-bg: #f5f9f4; --crono-line-bg: #dde8db; --crono-border-color: rgba(125,154,120,0.3); }
.crono-preset-navy .crono-wrapper,
.crono-preset-navy.crono-header { --crono-primary: #2c3e6b; --crono-primary-soft: rgba(44,62,107,0.18); --crono-card-bg: #f4f6fa; --crono-line-bg: #d8dde8; --crono-border-color: rgba(44,62,107,0.25); }

.crono-preset-rose.crono-header .crono-header-subtitle,
.crono-preset-rose.crono-header .crono-header-names { color: #d4849c; }
.crono-preset-sage.crono-header .crono-header-subtitle,
.crono-preset-sage.crono-header .crono-header-names { color: #7d9a78; }
.crono-preset-navy.crono-header .crono-header-subtitle,
.crono-preset-navy.crono-header .crono-header-names { color: #2c3e6b; }

.crono-header {
   text-align: center;
   padding: 40px 20px 20px;
   --crono-primary: #b8860b;
}
.crono-header-subtitle {
   font-size: 16px;
   letter-spacing: 3px;
   text-transform: uppercase;
   font-weight: 300;
   margin: 0;
   color: var(--crono-primary);
}
.crono-header-names {
   font-family: 'Playfair Display', serif;
   font-size: 32px;
   margin: 10px 0 0;
   color: var(--crono-primary);
}
.crono-header-date {
   font-size: 14px;
   color: #888;
   margin-top: 8px;
   letter-spacing: 2px;
}
.crono-divider {
   width: 80px;
   height: 2px;
   background: linear-gradient(to right, transparent, var(--crono-primary), transparent);
   margin: 20px auto;
   opacity: 0.5;
}

.crono-wrapper {
   position: relative;
   max-width: 950px;
   margin: 0 auto;
   padding: 30px 0;
}

.crono-line {
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 3px;
   transform: translateX(-50%);
   background: var(--crono-line-bg);
   border-radius: 2px;
   overflow: hidden;
   z-index: 1;
   -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--crono-line-fade), #000 calc(100% - var(--crono-line-fade)), transparent 100%);
   mask-image: linear-gradient(to bottom, transparent 0, #000 var(--crono-line-fade), #000 calc(100% - var(--crono-line-fade)), transparent 100%);
}
.crono-line-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 0%;
   background: var(--crono-primary);
   transition: height 0.15s linear;
}

.crono-item {
   position: relative;
   width: 100%;
   display: flex;
   padding: 20px 0;
   z-index: 2;
}
.crono-item.crono-left { justify-content: flex-start; }
.crono-item.crono-right { justify-content: flex-end; }

.crono-event-card {
   width: calc(50% - 35px);
   background: var(--crono-card-bg);
   border: 1px solid var(--crono-border-color);
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   position: relative;
   overflow: visible;
   padding: 0;
}
.crono-item.crono-left .crono-event-card { text-align: right; }
.crono-item.crono-right .crono-event-card { text-align: left; }

.crono-dot {
   position: absolute;
   left: 50%;
   top: var(--crono-dot-top);
   width: var(--crono-dot-size);
   height: var(--crono-dot-size);
   transform: translateX(-50%);
   background: var(--crono-dot-bg);
   border: 3px solid var(--crono-icon-color);
   color: var(--crono-icon-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   line-height: 1;
   z-index: 5;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.crono-dot i,
.crono-dot svg { line-height: 1; display: block; }

.crono-dot:hover {
   transform: translateX(-50%) scale(1.15);
   box-shadow: 0 6px 25px rgba(0,0,0,0.18);
}

.crono-has-image .crono-dot {
   top: var(--crono-dot-top-with-image);
}

.crono-pulse-on .crono-item.crono-active .crono-dot {
   animation: crono-pulse 2s ease-in-out infinite;
}
@keyframes crono-pulse {
   0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.1), 0 0 0 0 var(--crono-primary-soft); }
   50% { box-shadow: 0 4px 15px rgba(0,0,0,0.1), 0 0 0 14px transparent; }
}

.crono-event-image-wrapper {
   border-radius: 16px 16px 0 0;
   overflow: hidden;
   position: relative;
   width: 100%;
   line-height: 0;
   margin: 0;
   padding: 0;
   z-index: 2;
}
.crono-event-image {
   width: 100% !important;
   height: var(--crono-image-height) !important;
   object-fit: cover;
   display: block;
   margin: 0;
   padding: 0;
   border: 0;
   transition: transform 0.4s ease;
}
.crono-event-card:hover .crono-event-image { transform: scale(1.04); }
.crono-event-content { padding: 20px 25px; position: relative; }

.crono-hover-lift .crono-event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.crono-hover-glow .crono-event-card:hover { box-shadow: 0 0 25px var(--crono-primary-soft); border-color: var(--crono-primary); }
.crono-hover-scale .crono-event-card:hover { transform: scale(1.02); }
.crono-hover-none .crono-event-card:hover { transform: none; }

.crono-event-card::after {
   content: '';
   position: absolute;
   width: 18px;
   height: 18px;
   background: var(--crono-arrow-bg);
   z-index: 1;
   top: calc(var(--crono-dot-top) + (var(--crono-dot-size) / 2) - 9px - 20px);
}
.crono-has-image .crono-event-card::after {
   top: calc(var(--crono-dot-top-with-image) + (var(--crono-dot-size) / 2) - 9px - 20px);
}
.crono-item.crono-left .crono-event-card::after {
   right: -9px;
   border-right: 1px solid var(--crono-border-color);
   border-bottom: 1px solid var(--crono-border-color);
   transform: rotate(-45deg);
}
.crono-item.crono-right .crono-event-card::after {
   left: -9px;
   border-left: 1px solid var(--crono-border-color);
   border-top: 1px solid var(--crono-border-color);
   transform: rotate(-45deg);
}
.crono-no-arrow .crono-event-card::after { display: none; }

.crono-event-time {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   padding: 4px 14px;
   border-radius: 20px;
   margin-bottom: 10px;
   letter-spacing: 0.5px;
   color: var(--crono-primary);
   background: var(--crono-primary-soft);
}
.crono-event-title {
   font-family: 'Playfair Display', serif;
   font-size: 20px;
   font-weight: 600;
   color: #2c2c2c;
   margin: 8px 0;
}
.crono-event-location {
   display: block;
   font-size: 13px;
   color: #999;
   margin-bottom: 8px;
   font-style: italic;
}
.crono-event-location i { margin-right: 4px; color: var(--crono-icon-color); }
.crono-event-description {
   font-size: 14px;
   color: #666;
   line-height: 1.6;
   margin: 0;
}

.crono-event-card.crono-animate {
   opacity: 0;
   transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.crono-item.crono-left .crono-event-card.crono-animate { transform: translateX(-30px); }
.crono-item.crono-right .crono-event-card.crono-animate { transform: translateX(30px); }
.crono-event-card.crono-animate.crono-visible { opacity: 1; transform: translateX(0); }

.crono-dot.crono-animate {
   opacity: 0;
   transition: opacity 0.5s ease 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, transform 0.3s ease;
}
.crono-dot.crono-animate.crono-visible { opacity: 1; }

@media screen and (max-width: 1024px) and (min-width: 601px) {
   .crono-wrapper {
       --crono-image-height: 140px;
       --crono-dot-size: 42px;
       --crono-line-fade: 80px;
       max-width: 700px;
   }
   .crono-event-card { width: calc(50% - 30px); }
   .crono-dot { font-size: 15px; }
   .crono-event-title { font-size: 17px; }
   .crono-event-content { padding: 16px 20px; }
   .crono-header-names { font-size: 26px; }
}

@media screen and (max-width: 600px) {
   .crono-wrapper {
       --crono-image-height: 120px;
       --crono-dot-size: 38px;
       --crono-dot-top: 22px;
       --crono-line-fade: 60px;
   }
   .crono-line { left: 25px; transform: none; }
   .crono-item,
   .crono-item.crono-left,
   .crono-item.crono-right {
       justify-content: flex-start;
       padding: 12px 10px 12px 60px;
   }
   .crono-event-card { width: 100%; text-align: left !important; }
   .crono-item.crono-left .crono-event-card,
   .crono-item.crono-right .crono-event-card { text-align: left; }
   .crono-dot { left: 25px; }
   .crono-dot:hover { transform: translateX(-50%) scale(1.15); }
   .crono-item.crono-left .crono-event-card::after,
   .crono-item.crono-right .crono-event-card::after {
       left: -9px;
       right: auto;
       border-left: 1px solid var(--crono-border-color);
       border-bottom: 1px solid var(--crono-border-color);
       border-right: none;
       border-top: none;
       transform: rotate(45deg);
   }
   .crono-item.crono-left .crono-event-card.crono-animate,
   .crono-item.crono-right .crono-event-card.crono-animate { transform: translateY(20px); }
   .crono-event-card.crono-animate.crono-visible { transform: translateY(0); }
   .crono-event-title { font-size: 16px; }
   .crono-header-names { font-size: 24px; }
   .crono-header-subtitle { font-size: 13px; letter-spacing: 1.5px; }
   .crono-event-content { padding: 14px 16px; }
   .crono-header { padding: 25px 15px 15px; }
}