/* ============================================================
   ClickBox — Contacto  |  v1
   Minimalista — hero centrado + grid info/formulario
   ============================================================ */

:root {
    --ctc-verde:   #51d728;
    --ctc-verde-d: #3fb31e;
    --ctc-morado:  #3b2de0;
    --ctc-dark:    #060927;
    --ctc-gray:    #f4f5fb;
    --ctc-text:    #1a1a3e;
    --ctc-muted:   #5a5a8a;
    --ctc-ease:    cubic-bezier(.4,0,.2,1);
    --ctc-max:     1000px;
}

.cb-ctc *, .cb-ctc *::before, .cb-ctc *::after { box-sizing: border-box; }
.cb-ctc { font-family: 'Montserrat', sans-serif; color: var(--ctc-text); overflow-x: hidden; }

/* ============================================================
   HERO — centrado, sin columna de imagen derecha
   ============================================================ */

/* Reducir fuente del hero para que quede en 2 líneas exactas */
.ctc-hero .cb-hero__line3 {
    font-size: clamp(2.2rem, 4vw, 3.8rem) !important;
    white-space: nowrap !important;
}
.ctc-hero .cb-hero__line1 {
    font-size: clamp(2.4rem, 5vw, 4.5rem) !important;
    white-space: nowrap !important;
}

/* Hero — alineado a la izquierda como las demás páginas */
.ctc-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 56px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ctc-hero__content {
    text-align: left;
    max-width: 640px;
}

.ctc-hero__content .cb-hero__divider {
    margin-left: 0;
    margin-right: 0;
    max-width: 260px;
}

/* ============================================================
   CUERPO
   ============================================================ */
.ctc-body {
    background: var(--ctc-gray);
    padding: 80px 24px;
}

.ctc-container {
    max-width: var(--ctc-max);
    margin: 0 auto;
}

/* Grid: info 42% | formulario 58% */
.ctc-grid {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 56px;
    align-items: start;
}

/* ============================================================
   COLUMNA INFO
   ============================================================ */
.ctc-info__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--ctc-text);
    margin-bottom: 36px;
    position: relative;
    padding-bottom: 16px;
}
.ctc-info__title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 48px; height: 3px;
    background: var(--ctc-verde);
    border-radius: 4px;
}

.ctc-info__list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ctc-info__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.ctc-info__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ctc-morado);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s, box-shadow .3s;
}
.ctc-info__icon svg {
    width: 20px; height: 20px;
    stroke: #fff;
    fill: none;
}
/* WhatsApp icon (filled, not stroked) */
.ctc-info__icon--wa svg {
    fill: #fff;
    stroke: none;
}
.ctc-info__item:hover .ctc-info__icon {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(59,45,224,.35);
}

.ctc-info__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}
.ctc-info__text strong {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ctc-morado);
}
.ctc-info__text span,
.ctc-info__text a {
    font-size: .975rem;
    color: var(--ctc-muted);
    text-decoration: none;
    line-height: 1.5;
    transition: color .25s;
}
.ctc-info__text a:hover { color: var(--ctc-verde); }

/* ── Redes sociales ── */
.ctc-social { margin-top: 36px; }
.ctc-social__label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ctc-morado);
    margin-bottom: 14px;
}
.ctc-social__links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ctc-social__link {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(59,45,224,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ctc-morado);
    text-decoration: none;
    transition: background .3s, transform .3s, color .3s;
}
.ctc-social__link svg { width: 18px; height: 18px; }
.ctc-social__link:hover { transform: translateY(-4px); color: #fff; }
.ctc-social__link--fb:hover  { background: #1877f2; }
.ctc-social__link--ig:hover  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.ctc-social__link--li:hover  { background: #0a66c2; }
.ctc-social__link--yt:hover  { background: #ff0000; }

/* ============================================================
   COLUMNA FORMULARIO
   ============================================================ */
.ctc-form-card {
    background: #fff;
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: 0 8px 48px rgba(59,45,224,.1);
}

.ctc-form-card__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: var(--ctc-text);
    margin-bottom: 28px;
    position: relative;
    padding-bottom: 16px;
}
.ctc-form-card__title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 48px; height: 3px;
    background: var(--ctc-verde);
    border-radius: 4px;
}

/* ── Estilos para inputs de WPForms ── */
.ctc-form-card .wpforms-field-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: var(--ctc-text) !important;
    margin-bottom: 6px !important;
}
.ctc-form-card .wpforms-field input,
.ctc-form-card .wpforms-field textarea,
.ctc-form-card .wpforms-field select {
    border: 2px solid #e8e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .95rem !important;
    color: var(--ctc-text) !important;
    background: #fafafa !important;
    transition: border-color .25s, box-shadow .25s !important;
    width: 100% !important;
}
.ctc-form-card .wpforms-field input:focus,
.ctc-form-card .wpforms-field textarea:focus {
    border-color: var(--ctc-morado) !important;
    box-shadow: 0 0 0 3px rgba(59,45,224,.12) !important;
    outline: none !important;
    background: #fff !important;
}
.ctc-form-card .wpforms-field textarea {
    min-height: 130px !important;
    resize: vertical !important;
}
.ctc-form-card .wpforms-submit-container { margin-top: 8px !important; }
.ctc-form-card .wpforms-submit {
    background: var(--ctc-verde) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background .3s, transform .3s, box-shadow .3s !important;
    width: 100% !important;
    box-shadow: 0 6px 24px rgba(81,215,40,.35) !important;
}
.ctc-form-card .wpforms-submit:hover {
    background: var(--ctc-verde-d) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(81,215,40,.5) !important;
}

/* ============================================================
   ANIMACIONES DE SCROLL
   ============================================================ */
.ctc-up    { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ctc-ease), transform .7s var(--ctc-ease); }
.ctc-left  { opacity: 0; transform: translateX(-50px); transition: opacity .7s var(--ctc-ease), transform .7s var(--ctc-ease); }
.ctc-right { opacity: 0; transform: translateX(50px);  transition: opacity .7s var(--ctc-ease), transform .7s var(--ctc-ease); }
.ctc-in    { opacity: 1 !important; transform: translate(0) !important; }
.ctc-d1 { transition-delay: .10s !important; }
.ctc-d2 { transition-delay: .22s !important; }
.ctc-d3 { transition-delay: .34s !important; }
.ctc-d4 { transition-delay: .46s !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .ctc-grid { grid-template-columns: 1fr; gap: 40px; }
    .ctc-body { padding: 56px 20px; }
    .ctc-form-card { padding: 32px 24px; }
    .ctc-hero__inner { padding: 56px 24px; }
}