/* RKT Contacto — CSS copiado EXACTO de servirepuestos-rkt.vercel.app/assets/styles.css */

:root {
    --blue: #1A3674;
    --navy: #0D1B45;
    --yellow: #FFCA00;
    --yellow-dk: #E5B400;
    --red: #FF0616;
    --font-display: 'CWM', 'Kinship Sans', sans-serif;
}

/* Layout grid 7/5 como el original (lg:grid-cols-12) */
.rkt-contacto-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    align-items: start;
}

/* field-lbl — exacto */
.field-lbl {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: .3rem;
    display: block;
}

/* contact-form — exacto */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.contact-form .full { grid-column: 1 / -1; }

.contact-input {
    border: none;
    border-bottom: 2px solid rgba(0,0,0,.15);
    padding: .85rem .25rem;
    font-family: inherit;
    font-size: .95rem;
    background: transparent;
    width: 100%;
    outline: none;
    color: var(--navy);
    transition: border-color .2s;
}
.contact-input:focus { border-bottom-color: var(--blue); }

.contact-textarea {
    border: 1px solid rgba(0,0,0,.12);
    padding: .95rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    width: 100%;
    outline: none;
    color: var(--navy);
    min-height: 120px;
    resize: vertical;
    background: #FAFAFA;
    transition: border-color .2s;
}
.contact-textarea:focus { border-color: var(--blue); background: #fff; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .83rem;
    color: #666;
    line-height: 1.5;
}
.checkbox-row input {
    margin-top: .25rem;
    accent-color: var(--blue);
    width: 16px;
    height: 16px;
}

/* contact-channel — exacto */
.contact-channel {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-left: 3px solid var(--yellow);
    transition: all .25s;
    text-decoration: none;
    color: inherit;
}
.contact-channel:hover { background: rgba(255,255,255,.08); border-left-color: #fff; }
.contact-channel.red { border-left-color: var(--red); }
.contact-channel .icn {
    width: 38px;
    height: 38px;
    background: rgba(255,202,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--yellow);
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}
.contact-channel.red .icn { background: rgba(255,6,22,.15); color: var(--red); }
.contact-channel .lbl {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.contact-channel .val {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: .04em;
    margin-top: .15rem;
}
.contact-channel .sub {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    margin-top: .15rem;
}

/* Botón — exacto */
.btn-rkt {
    display: inline-flex;
    align-items: center;
    position: relative;
    transform: skewX(-9deg);
    transition: transform .25s, box-shadow .25s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    outline: none;
}
.btn-rkt:hover { transform: skewX(-9deg) translateY(-2px); }
.btn-rkt span {
    display: inline-block;
    transform: skewX(9deg);
    padding: .85rem 1.85rem;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
    font-family: inherit;
}
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { background: var(--yellow-dk); box-shadow: 0 10px 30px -8px rgba(255,202,0,.55); }

/* Scale pattern del fondo */
.rkt-scale-pat {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(255,255,255,.022) 14px, rgba(255,255,255,.022) 15px);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .rkt-contacto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .contact-form { grid-template-columns: 1fr; }
}