/* ============================================
   CheckGoo — assets/css/contacto.css
   Página pública de contacto.
   Usa header.css y footer.css para la cabecera común.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --cream:      #FAF7F2;
    --dark:       #1A1A1A;
    --accent:     #FF385C;
    --accent-dark:#E31C5F;
    --gray:       #6B6B6B;
    --light-gray: #EFEFEF;
    --border:     #E5E0D8;
    --green:      #2D7A4F;
    --error:      #E8462A;
    --white:      #FFFFFF;
    --radius:     20px;
    --radius-sm:  12px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--cream);
    color: var(--dark);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* ===== HERO ===== */
.ct-hero {
    max-width: 680px;
    margin: 0 auto;
    padding: 64px 24px 36px;
    text-align: center;
}
.ct-hero h1 {
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 800;
    letter-spacing: -1.4px;
    margin: 0 0 14px;
}
.ct-hero h1 span { color: var(--accent); }
.ct-hero p { font-size: clamp(15px, 2.4vw, 18px); color: var(--gray); max-width: 520px; margin: 0 auto; }

/* ===== LAYOUT ===== */
.ct-wrap {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 820px) { .ct-wrap { grid-template-columns: 1fr; } }

/* ===== TARJETA INFO (email) ===== */
.ct-info {
    background: var(--dark);
    color: var(--white);
    border-radius: var(--radius);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}
.ct-info::before {
    content: ''; position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,56,92,.14); pointer-events: none;
}
.ct-info h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.5px; position: relative; }
.ct-info > p { color: rgba(255,255,255,.7); font-size: 15px; margin: 0 0 28px; position: relative; }

.ct-email-box {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    margin-bottom: 20px;
}
.ct-email-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.ct-email-value {
    font-size: 18px; font-weight: 700; color: var(--white);
    display: flex; align-items: center; gap: 10px; word-break: break-all;
}
.ct-email-value svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.ct-email-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; background: var(--accent); color: var(--white);
    font-size: 14px; font-weight: 700; padding: 11px 20px; border-radius: 100px;
    text-decoration: none; transition: background .15s;
}
.ct-email-btn:hover { background: var(--accent-dark); }
.ct-email-btn svg { width: 15px; height: 15px; }

.ct-info-note {
    font-size: 13px; color: rgba(255,255,255,.55);
    display: flex; gap: 8px; align-items: flex-start; position: relative;
}
.ct-info-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* ===== FORMULARIO ===== */
.ct-form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
}
.ct-form-card h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.5px; }
.ct-form-card .sub { font-size: 14px; color: var(--gray); margin: 0 0 24px; }

.ct-fg { margin-bottom: 16px; }
.ct-fg label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ct-fg input, .ct-fg textarea {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 15px; outline: none;
    background: var(--white); color: var(--dark); resize: vertical;
}
.ct-fg input:focus, .ct-fg textarea:focus { border-color: var(--accent); }
.ct-fg input.bad, .ct-fg textarea.bad { border-color: var(--error); }
.ct-fg .e { font-size: 12px; color: var(--error); margin-top: 5px; }
.ct-fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .ct-fg-row { grid-template-columns: 1fr; } }

/* Honeypot: invisible */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ct-btn {
    width: 100%; padding: 15px; background: var(--accent); color: var(--white);
    border: none; border-radius: var(--radius-sm); font-family: inherit;
    font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.ct-btn:hover { background: var(--accent-dark); }

.ct-alert {
    padding: 14px 16px; border-radius: var(--radius-sm);
    font-size: 14px; margin-bottom: 20px; display: flex; gap: 10px; align-items: flex-start;
}
.ct-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ct-alert.ok  { background: #E7F6F0; color: var(--green); }
.ct-alert.err { background: #FDECEC; color: var(--error); }


/* ===== MÓVIL ===== */
@media (max-width: 768px) {

    .ct-hero {
        padding: 48px 22px 32px;
    }

    .ct-wrap {
        padding: 0 22px;
    }

    .ct-info,
    .ct-form-card {
        padding: 28px 22px;
    }
}