/* ============================================================
   Corre, Trota o Camina – Page Styles (no Elementor)
   ============================================================ */

/* ---------- Reset & base ---------- */
.ctoc-page,
.ctoc-page *,
.ctoc-page *::before,
.ctoc-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ctoc-page {
    font-family: 'Barlow', sans-serif;
    color: #1A1A18;
    background: #E2E2E2;
    -webkit-font-smoothing: antialiased;
}

.ctoc-page a { text-decoration: none; color: inherit; }
.ctoc-page ul { list-style: none; }
.ctoc-page img { max-width: 100%; height: auto; display: block; }

/* hide WP admin bar spacing & default title */
.ctoc-page .entry-title,
.ctoc-page h1.entry-title { display: none; }

/* ---------- Utilities ---------- */
.ctoc-container {
    width: 80%;
    max-width: 1140px;
    margin: 0 auto;
}

.ctoc-section {
    border-bottom: 1px solid #000;
}

.ctoc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1A1A18;
}

.ctoc-title {
    font-family: 'DM Serif Display', serif;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1A1A18;
    line-height: 1.1;
}

.ctoc-title--italic {
    font-style: oblique;
}

.ctoc-btn {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 12px 24px;
    text-align: center;
    transition: opacity .2s;
    cursor: pointer;
    border: none;
    color: #fff;
}
/* `.ctoc-page a` (color: inherit) pesa más que `.ctoc-btn`; forzamos el blanco */
.ctoc-page a.ctoc-btn,
.ctoc-page a.ctoc-btn:hover { color: #fff; }
.ctoc-btn:hover { opacity: .9; }
.ctoc-btn:focus-visible { outline: 2px solid #1A1A18; outline-offset: 3px; }
.ctoc-btn--dark   { background: #1A1A18; color: #fff; font-size: 16px; font-weight: 500; }
.ctoc-btn--orange { background: #F27F3D; width: 100%; }
.ctoc-btn--red    { background: #F23054; width: 100%; }
.ctoc-btn--blue   { background: #139DF2; width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.ctoc-header {
    background: #E2E2E2;
    border-bottom: 1px solid #000;
}

.ctoc-header__inner {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ctoc-header__logo {
    flex: 0 0 20%;
}

.ctoc-header__logo img {
    width: 10em;
}

.ctoc-header__nav {
    flex: 0 0 80%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.ctoc-header__menu {
    display: flex;
    gap: 24px;
}

.ctoc-header__menu a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: color .2s;
}

.ctoc-header__menu a:hover { color: #F23054; }

.ctoc-header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.ctoc-header__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1A1A18;
    transition: .3s;
}

/* ============================================================
   HERO
   ============================================================ */
.ctoc-hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding: 50px 0;
    background: #E2E2E2;
}

.ctoc-hero__inner {
    display: flex;
    align-items: center;
    gap: 0;
}

.ctoc-hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ctoc-hero__badge {
    display: inline-block;
    background: #1A1A18;
    color: #E2E2E2;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 16px;
}

.ctoc-hero__presents {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1A1A18;
}

.ctoc-hero__title-img {
    width: 100%;
}

.ctoc-hero__date-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.ctoc-hero__date {
    border-right: 1px solid rgba(0,0,0,.44);
    padding-right: 20px;
    margin-right: 20px;
}

.ctoc-hero__date p {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 45px;
    font-weight: 900;
    color: #1A1A18;
    line-height: 1.1;
}

.ctoc-hero__time p {
    font-family: 'DM Serif Display', serif;
    font-size: 45px;
    font-weight: 800;
    color: #F23054;
    text-align: center;
}

.ctoc-hero__image {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.ctoc-countdown-section {
    background: #E2E2E2;
    padding: 50px 0;
}

.ctoc-countdown-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.ctoc-countdown {
    display: flex;
    justify-content: center;
    gap: 70px;
    margin-top: 16px;
}

.ctoc-countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ctoc-countdown__digits {
    font-family: 'DM Serif Display', serif;
    font-size: 60px;
    font-weight: 400;
    color: #1A1A18;
    line-height: 1;
}

.ctoc-countdown--done { display: none; }
.ctoc-countdown-section.is-done .ctoc-countdown { display: none; }
.ctoc-countdown-section.is-done .ctoc-countdown--done {
    display: block;
    margin-top: 12px;
    text-align: center;
    max-width: 640px;
}
.ctoc-countdown--done strong {
    display: block;
    font-family: 'DM Serif Display', serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    color: #1A1A18;
}
.ctoc-countdown--done span {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    color: #1A1A18;
    opacity: .8;
}
.ctoc-countdown__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1A18;
}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.ctoc-pricing {
    background: #E2E2E2;
    padding: 50px 0;
}

.ctoc-pricing__header {
    text-align: center;
    margin-bottom: 10px;
}

.ctoc-pricing__header .ctoc-label { margin-bottom: 25px; }
.ctoc-pricing__header .ctoc-title { margin-top: 10px; }

.ctoc-pricing__cards {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.ctoc-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #FCFCFC;
    border-radius: 3px;
    padding: 25px;
    border: 3px solid;
    transition: border-width .3s;
    text-decoration: none;
    color: #1A1A18;
}

.ctoc-card:hover {
    border-width: 3px 10px 10px 3px;
}

.ctoc-card--orange { border-color: #F27F3D; }
.ctoc-card--red    { border-color: #F23054; }
.ctoc-card--blue   { border-color: #139DF2; }

.ctoc-card__distance {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 45px;
    font-weight: 700;
}
.ctoc-card--orange .ctoc-card__distance { color: #F27F3D; }
.ctoc-card--red    .ctoc-card__distance { color: #F23054; }
.ctoc-card--blue   .ctoc-card__distance { color: #139DF2; }

.ctoc-card__divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,.23);
    margin: 20px 0;
}

.ctoc-card__divider--dotted {
    border-top-style: dotted;
    margin: 2px 0;
}

.ctoc-card__price {
    font-family: 'DM Serif Display', serif;
    font-size: 45px;
    font-weight: 700;
    color: #1A1A18;
    margin-bottom: 10px;
}

.ctoc-card__features li {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding-left: 20px;
    position: relative;
}

.ctoc-card__features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    font-weight: 700;
}

.ctoc-card--orange .ctoc-card__features li::before { color: #F27F3D; }
.ctoc-card--red    .ctoc-card__features li::before { color: #F23054; }
.ctoc-card--blue   .ctoc-card__features li::before { color: #139DF2; }

.ctoc-card .ctoc-btn {
    margin-top: 10px;
}

/* Jersey row */
.ctoc-jersey {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.ctoc-jersey__image {
    flex: 0 0 33.33%;
}

.ctoc-jersey__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ctoc-jersey__content .ctoc-title {
    margin-top: 10px;
}

.ctoc-jersey__content .ctoc-btn {
    margin-top: 10px;
    width: auto;
}

/* ============================================================
   INFO BAR (dark)
   ============================================================ */
.ctoc-info {
    background: #1A1A18;
    padding: 50px 0;
}

.ctoc-info__grid {
    display: flex;
    justify-content: space-between;
    gap: 0;
}

.ctoc-info__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    border-left: 5px solid;
}

.ctoc-info__item--orange { border-color: #F27F3D; }
.ctoc-info__item--red    { border-color: #F23054; }
.ctoc-info__item--blue   { border-color: #139DF2; }

.ctoc-info__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E2E2E2;
}

.ctoc-info__value {
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    font-weight: 700;
    color: #E2E2E2;
}

/* ============================================================
   STEPS
   ============================================================ */
.ctoc-steps {
    background: #E2E2E2;
    padding: 50px 0;
}

.ctoc-steps__header {
    text-align: center;
    margin-bottom: 25px;
}

.ctoc-steps__header .ctoc-title { margin-top: 10px; }

.ctoc-steps__grid {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.ctoc-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 3px;
}

.ctoc-step__number {
    font-family: 'DM Serif Display', serif;
    font-size: 60px;
    font-weight: 700;
    color: #1A1A18;
    margin-bottom: 10px;
}

.ctoc-step__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1A1A18;
}

.ctoc-step__desc {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #1A1A18;
}

/* ============================================================
   CONVOCATORIA
   ============================================================ */
.ctoc-convocatoria {
    background: #E2E2E2;
    padding: 50px 0;
}

.ctoc-convocatoria__inner {
    max-width: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ctoc-convocatoria__inner .ctoc-label { margin-bottom: 0; }
.ctoc-convocatoria__inner .ctoc-title { margin-top: 0; }

.ctoc-convocatoria__text {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #1A1A18;
    text-align: center;
}

.ctoc-convocatoria__image {
    margin-top: 20px;
}

.ctoc-convocatoria__image img {
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 15px 15px 0 0 #F23054;
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 1024px) {
    .ctoc-container { width: 95%; }
    .ctoc-hero__date p { font-size: 40px; }
    .ctoc-hero__time p { font-size: 40px; }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 767px) {
    .ctoc-container { width: 95%; }

    /* Header */
    .ctoc-header__inner {
        flex-wrap: wrap;
        padding: 15px 0;
        justify-content: space-between;
    }

    .ctoc-header__logo { flex: 0 0 auto; }
    .ctoc-header__logo img { width: 70%; }

    .ctoc-header__nav {
        display: none;
        flex-direction: column;
        width: 100%;
        padding-top: 16px;
    }

    .ctoc-header__nav.is-open {
        display: flex;
    }

    .ctoc-header__menu {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .ctoc-header__toggle { display: flex; }

    /* Hero */
    .ctoc-hero { min-height: 66vh; padding: 50px 0 30px; }

    .ctoc-hero__inner {
        flex-direction: column;
        text-align: center;
    }

    .ctoc-hero__content { align-items: center; }
    .ctoc-hero__title-img { text-align: center; }

    .ctoc-hero__date-row {
        flex-direction: column;
        align-items: center;
    }

    .ctoc-hero__date {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,.44);
        padding: 0 0 12px;
        margin: 0 0 12px;
        text-align: center;
    }

    .ctoc-hero__date p,
    .ctoc-hero__time p { text-align: center; }

    /* Countdown */
    .ctoc-countdown { gap: 19px; }
    .ctoc-countdown__digits { font-size: 36px; }

    /* Labels & titles */
    .ctoc-label { font-size: 14px; }
    .ctoc-title { font-size: 30px; }

    /* Cards */
    .ctoc-pricing__cards { flex-direction: column; }

    /* Jersey */
    .ctoc-jersey { flex-direction: column; text-align: center; }
    .ctoc-jersey__content { align-items: center; }

    /* Info */
    .ctoc-info__grid { flex-direction: column; gap: 20px; }
    .ctoc-info__item { text-align: center; border-left: none; border-top: 5px solid; padding-top: 15px; }

    /* Steps */
    .ctoc-steps__grid { flex-direction: column; }
    .ctoc-step { text-align: center; }

    /* Convocatoria */
    .ctoc-convocatoria__inner { max-width: 100%; }
    .ctoc-convocatoria__image img { width: 90%; }

    /* Step numbers, titles, desc */
    .ctoc-step__number { text-align: center; }
    .ctoc-step__title { font-size: 28px; }
    .ctoc-step__desc { font-size: 16px; text-align: center; }
}