/* ============================
  CRONOGRAMA STYLE 2 v1.0.0
  Editorial minimalista
  ============================ */

.crono2-root {
   --crono2-primary: #5b6147;
   --crono2-primary-soft: rgba(91, 97, 71, 0.18);
   --crono2-line: #cfccba;
   --crono2-title: #2e2e28;
   --crono2-text: #4a4a42;
   --crono2-muted: #8c8c7a;
   --crono2-time: #6a6a5c;
   --crono2-dot-size: 14px;
   --crono2-image-height: 460px;
   --crono2-content-gap: 70px;
   font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
   padding: 20px 0 40px;
}

/* ── Presets ── */
.crono2-preset-olive { --crono2-primary: #5b6147; --crono2-primary-soft: rgba(91,97,71,0.18); --crono2-line: #cfccba; }
.crono2-preset-gold  { --crono2-primary: #b8860b; --crono2-primary-soft: rgba(184,134,11,0.18); --crono2-line: #e3dac4; }
.crono2-preset-rose  { --crono2-primary: #c08497; --crono2-primary-soft: rgba(192,132,151,0.2); --crono2-line: #ecd9e0; }
.crono2-preset-sage  { --crono2-primary: #7d9a78; --crono2-primary-soft: rgba(125,154,120,0.2); --crono2-line: #dde8db; }
.crono2-preset-navy  { --crono2-primary: #2c3e6b; --crono2-primary-soft: rgba(44,62,107,0.18); --crono2-line: #d3d9e6; }

/* ── Encabezado ── */
.crono2-header {
   text-align: center;
   padding: 30px 20px 50px;
   max-width: 720px;
   margin: 0 auto;
}
.crono2-hearts {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   color: var(--crono2-primary);
   font-size: 16px;
   line-height: 1;
   margin-bottom: 28px;
}
.crono2-hearts .crono2-heart { display: inline-flex; }
.crono2-hearts .crono2-heart-mid { font-size: 1.35em; }
.crono2-hearts svg { width: 1em; height: 1em; fill: currentColor; }

.crono2-header-title {
   font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
   font-weight: 600;
   font-size: 52px;
   line-height: 1.1;
   color: var(--crono2-title);
   margin: 0 0 22px;
}
.crono2-header-intro {
   font-family: 'EB Garamond', Georgia, serif;
   font-size: 21px;
   line-height: 1.6;
   color: var(--crono2-muted);
   margin: 0 auto;
   max-width: 600px;
}

/* ── Wrapper / linea ── */
.crono2-wrapper {
   position: relative;
   max-width: 1150px;
   margin: 0 auto;
   padding: 10px 0;
}
.crono2-line {
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   transform: translateX(-50%);
   background: var(--crono2-line);
   z-index: 1;
}
.crono2-line-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 0%;
   background: var(--crono2-primary);
   transition: height 0.15s linear;
}

/* ── Items ── */
.crono2-item {
   position: relative;
   display: flex;
   width: 100%;
   padding: 30px 0;
   z-index: 2;
}
.crono2-item.crono2-left  { justify-content: flex-start; }
.crono2-item.crono2-right { justify-content: flex-end; }

.crono2-content {
   width: calc(50% - var(--crono2-content-gap));
}
.crono2-item.crono2-left  .crono2-content { text-align: right; }
.crono2-item.crono2-right .crono2-content { text-align: left; }

/* ── Nodo ── */
.crono2-dot {
   position: absolute;
   left: 50%;
   top: 38px;
   width: var(--crono2-dot-size);
   height: var(--crono2-dot-size);
   transform: translateX(-50%);
   border-radius: 50%;
   background: var(--crono2-primary);
   z-index: 5;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.crono2-dot-outline .crono2-dot {
   background: transparent;
   border: 2px solid var(--crono2-primary);
}
.crono2-pulse-on .crono2-item.crono2-active .crono2-dot {
   animation: crono2-pulse 2s ease-in-out infinite;
}
@keyframes crono2-pulse {
   0%, 100% { box-shadow: 0 0 0 0 var(--crono2-primary-soft); }
   50%      { box-shadow: 0 0 0 12px transparent; }
}

/* ── Texto ── */
.crono2-time {
   display: block;
   font-family: 'EB Garamond', Georgia, serif;
   font-size: 17px;
   letter-spacing: 1px;
   color: var(--crono2-time);
   margin-bottom: 8px;
}
.crono2-title {
   font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
   font-weight: 600;
   font-size: 40px;
   line-height: 1.15;
   color: var(--crono2-title);
   margin: 0 0 18px;
}
.crono2-location {
   display: block;
   font-size: 15px;
   font-style: italic;
   color: var(--crono2-muted);
   margin-bottom: 10px;
}
.crono2-desc {
   font-family: 'EB Garamond', Georgia, serif;
   font-size: 19px;
   line-height: 1.65;
   color: var(--crono2-text);
   margin: 0;
}

/* ── Imagen ── */
.crono2-image-wrapper {
   overflow: hidden;
   line-height: 0;
   margin-top: 26px;
}
.crono2-img-top .crono2-image-wrapper { margin-top: 0; margin-bottom: 26px; }
.crono2-image {
   width: 100%;
   height: var(--crono2-image-height);
   object-fit: cover;
   display: block;
   transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}
.crono2-img-zoom .crono2-content:hover .crono2-image { transform: scale(1.04); }

/* ── Animaciones de entrada ── */
.crono2-content.crono2-animate {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.crono2-content.crono2-animate.crono2-visible {
   opacity: 1;
   transform: translateY(0);
}
.crono2-dot.crono2-animate {
   opacity: 0;
   transform: translateX(-50%) scale(0.4);
   transition: opacity 0.5s ease 0.15s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, box-shadow 0.3s ease;
}
.crono2-dot.crono2-animate.crono2-visible {
   opacity: 1;
   transform: translateX(-50%) scale(1);
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) and (min-width: 769px) {
   .crono2-root { --crono2-image-height: 320px; --crono2-content-gap: 50px; }
   .crono2-wrapper { max-width: 820px; }
   .crono2-header-title { font-size: 44px; }
   .crono2-title { font-size: 32px; }
   .crono2-desc { font-size: 17px; }
}

/* ── Movil ── */
@media screen and (max-width: 768px) {
   .crono2-root { --crono2-image-height: 240px; }
   .crono2-line { left: 8px; transform: none; }
   .crono2-line-fill { width: 100%; }

   .crono2-item,
   .crono2-item.crono2-left,
   .crono2-item.crono2-right {
       justify-content: flex-start;
       padding: 22px 0 22px 38px;
   }
   .crono2-content,
   .crono2-item.crono2-left .crono2-content,
   .crono2-item.crono2-right .crono2-content {
       width: 100%;
       text-align: left;
   }
   .crono2-dot { left: 8px; }
   .crono2-dot.crono2-animate.crono2-visible { transform: translateX(-50%) scale(1); }

   .crono2-header { padding: 20px 15px 35px; }
   .crono2-header-title { font-size: 38px; }
   .crono2-header-intro { font-size: 18px; }
   .crono2-title { font-size: 28px; }
   .crono2-desc { font-size: 17px; }
}