/* ================================================================
   ARCO.CSS — Formulario de Derechos ARCO — TuneUpBarn
   ================================================================ */

/* ---- Reutiliza contacto.css para los campos del formulario ---- */
@import url('/cssstyle/contacto.css');

/* ---- Header ---- */
.arco-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 72px 0 56px;
    text-align: center;
}
.arco-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin: 12px 0 16px;
    line-height: 1.1;
}
.arco-header h1 span { color: #CC0000; }
.arco-header__sub {
    font-size: 1.1rem;
    opacity: .8;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.arco-eyebrow {
    display: inline-block;
    background: rgba(204,0,0,.15);
    color: #ff6b6b;
    border: 1px solid rgba(204,0,0,.3);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 14px;
    margin-bottom: 12px;
}

/* ---- Derechos grid ---- */
.arco-rights {
    background: #f8f9fc;
    padding: 40px 0;
    border-bottom: 1px solid #e8eaf0;
}
.arco-rights__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 860px) {
    .arco-rights__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .arco-rights__grid { grid-template-columns: 1fr; }
}
.arco-right-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border-top: 4px solid currentColor;
}
.arco-right-card--A { color: #0284c7; }
.arco-right-card--R { color: #16a34a; }
.arco-right-card--C { color: #CC0000; }
.arco-right-card--O { color: #d97706; }
.arco-right-card__icon { font-size: 1.5rem; margin-bottom: 8px; }
.arco-right-card h3 { font-size: .95rem; font-weight: 700; margin: 0 0 6px; color: #1a1a2e; }
.arco-right-card p  { font-size: .82rem; color: #6b7280; margin: 0; line-height: 1.5; }

/* ---- Sección principal ---- */
.arco-section { padding: 56px 0 80px; }
.arco-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .arco-layout { grid-template-columns: 1fr; }
}

/* ---- Checkboxes de consentimiento ---- */
.arco-consent-box {
    background: #f8f9fc;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0;
}
.arco-consent-box__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 14px;
}
.arco-consent-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
}
.arco-consent-item + .arco-consent-item {
    border-top: 1px solid #e0e0e8;
}
.arco-consent-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #CC0000;
    cursor: pointer;
}
.arco-consent-item label {
    font-size: .88rem;
    line-height: 1.5;
    color: #374151;
    cursor: pointer;
}
.arco-consent-item label .req { color: #CC0000; font-weight: 700; }
.arco-consent-item label a { color: #CC0000; text-decoration: underline; }

/* ---- Estado de éxito ---- */
.arco-success {
    text-align: center;
    padding: 40px 20px;
}
.arco-success__folio-wrap {
    display: inline-block;
    background: #fff;
    border: 2px solid #CC0000;
    border-radius: 12px;
    padding: 24px 40px;
    margin: 24px 0;
}
.arco-success__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.arco-success__folio { font-size: 2.5rem; font-weight: 800; letter-spacing: .1em; color: #CC0000; font-family: 'Courier New', monospace; }
.arco-success__limit { font-size: .9rem; color: #374151; margin-top: 8px; }
.arco-success__limit strong { color: #1a1a2e; }
.arco-success__note {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: .88rem;
    color: #0c4a6e;
    margin: 20px 0;
    text-align: left;
}

/* ---- Sidebar ---- */
.arco-sidebar { display: flex; flex-direction: column; gap: 20px; }
.arco-sidebar-card {
    background: #fff;
    border: 1.5px solid #e0e0e8;
    border-radius: 12px;
    padding: 20px;
}
.arco-sidebar-card h3 { font-size: .95rem; font-weight: 700; color: #1a1a2e; margin: 0 0 12px; }
.arco-sidebar-card p  { font-size: .85rem; color: #6b7280; margin: 0 0 10px; line-height: 1.5; }
.arco-sidebar-card a  { color: #CC0000; font-size: .85rem; }
.arco-plazo-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: .82rem;
    line-height: 1.8;
    align-items: center;
}
.arco-plazo-grid strong { color: #1a1a2e; }
.arco-plazo-limit { color: #CC0000; font-weight: 700; }
.arco-plazo-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef3c7;
    border-radius: 6px;
    font-size: .78rem;
    color: #92400e;
}

/* ---- Alert de error ---- */
.arco-alert {
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: .9rem;
}
.arco-alert--error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #991b1b;
}
.arco-alert--error ul { margin: 8px 0 0; padding-left: 20px; }
.arco-alert--error li { margin: 4px 0; }