/* ============================================================
   PÁGINA DE CONTACTO — page-contacto.php
   Scope: #ctp-contacto-root
   Estilo calcado de my-account.css (mismas variables y look).
   ============================================================ */

/* ── Variables locales (idénticas a Mi Cuenta) ─────────────── */
#ctp-contacto-root {
    --c-font:       'Inter', sans-serif;
    --c-bg:         #F8F9FA;
    --c-surface:    #FFFFFF;
    --c-border:     #E4E4E7;
    --c-text:       #111111;
    --c-muted:      #71717A;
    --c-subtle:     #A1A1AA;
    --c-zinc-300:   #D4D4D8;
    --c-zinc-800:   #27272A;
    --c-zinc-900:   #18181B;
    --c-accent:     #10B981;
    --c-accent-lt:  #ECFDF5;
    --c-accent-txt: #065F46;
    --c-r-sm:       4px;
    --c-r:          8px;
    --c-r-lg:       16px;
    --c-r-full:     9999px;
    --c-t:          0.18s ease;
}

/* ── Root base ──────────────────────────────────────────────── */
#ctp-contacto-root {
    font-family:    var(--c-font) !important;
    background:     var(--c-bg) !important;
    min-height:     60vh !important;
    padding-bottom: 4rem !important;
    color:          var(--c-text) !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
#ctp-contacto-root .ctp-breadcrumb {
    background:     #fff !important;
    border-bottom: 1px solid var(--c-border) !important;
    width:         100% !important;
}
#ctp-contacto-root .ctp-breadcrumb .ctp-wrap {
    display:        flex !important;
    align-items:    center !important;
    gap:            0.375rem !important;
    padding-top:    0.875rem !important;
    padding-bottom: 0.875rem !important;
    font-size:      0.75rem !important;
    font-weight:    500 !important;
    color:          var(--c-subtle) !important;
}
#ctp-contacto-root .ctp-breadcrumb__item          { color: var(--c-subtle) !important; text-decoration: none !important; transition: color var(--c-t) !important; }
#ctp-contacto-root .ctp-breadcrumb__item:hover    { color: var(--c-zinc-900) !important; }
#ctp-contacto-root .ctp-breadcrumb__item--current { color: var(--c-zinc-900) !important; font-weight: 500 !important; }
#ctp-contacto-root .ctp-breadcrumb__sep           { color: var(--c-zinc-300) !important; flex-shrink: 0 !important; display: inline-flex !important; }

/* ── Page header (idéntico a .ctp-account-page-header) ──────── */
#ctp-contacto-root .ctp-contacto-header {
    padding-top:    2rem !important;
    padding-bottom: 1.25rem !important;
}
#ctp-contacto-root .ctp-contacto-header__title {
    font-size:      clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight:    700 !important;
    color:          var(--c-text) !important;
    letter-spacing: -0.025em !important;
    margin:         0 0 0.375rem !important;
    line-height:    1.15 !important;
}
#ctp-contacto-root .ctp-contacto-header__desc {
    font-size:   0.9375rem !important;
    color:       var(--c-muted) !important;
    margin:      0 !important;
    line-height: 1.55 !important;
}

/* ── Grid ───────────────────────────────────────────────────── */
#ctp-contacto-root .ctp-contacto-grid {
    display:               grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap:                   1.5rem !important;
    align-items:           start !important;
    padding-bottom:        4rem !important;
}

/* ── Card (idéntica a .ctp-account-card) ────────────────────── */
#ctp-contacto-root .ctp-contacto-card {
    background:     var(--c-surface) !important;
    border:         1px solid var(--c-border) !important;
    border-radius:  var(--c-r-lg) !important;
    padding:        2rem !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            1.25rem !important;
}
#ctp-contacto-root .ctp-contacto-card__header {
    display:     flex !important;
    align-items: center !important;
    gap:         0.75rem !important;
}
#ctp-contacto-root .ctp-contacto-card__icon {
    width:           44px !important;
    height:          44px !important;
    border-radius:   var(--c-r) !important;
    background:      var(--c-accent-lt) !important;
    color:           var(--c-accent) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
}
#ctp-contacto-root .ctp-contacto-card__title {
    font-size:   1.125rem !important;
    font-weight: 600 !important;
    color:       var(--c-text) !important;
    margin:      0 !important;
    line-height: 1.3 !important;
}

/* ── Alertas ────────────────────────────────────────────────── */
#ctp-contacto-root .ctp-contacto-alert {
    display:       flex !important;
    align-items:   center !important;
    gap:           0.5rem !important;
    padding:       0.8rem 1rem !important;
    border-radius: var(--c-r) !important;
    font-size:     0.875rem !important;
    margin:        0 !important;
}
#ctp-contacto-root .ctp-contacto-alert iconify-icon  { flex-shrink: 0 !important; }
#ctp-contacto-root .ctp-contacto-alert--ok    { background: var(--c-accent-lt) !important; color: var(--c-accent-txt) !important; }
#ctp-contacto-root .ctp-contacto-alert--error { background: #FEF2F2 !important; color: #991B1B !important; }

/* ── Formulario ─────────────────────────────────────────────── */
#ctp-contacto-root .ctp-contacto-form {
    display:        flex !important;
    flex-direction: column !important;
    gap:            1rem !important;
}
#ctp-contacto-root .ctp-contacto-field-row {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   1rem !important;
}
#ctp-contacto-root .ctp-contacto-field {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0.375rem !important;
}
#ctp-contacto-root .ctp-contacto-label {
    font-size:   0.8125rem !important;
    font-weight: 500 !important;
    color:       var(--c-text) !important;
    line-height: 1.4 !important;
}
#ctp-contacto-root .ctp-contacto-req {
    color:           var(--c-accent) !important;
    margin-left:     2px !important;
    text-decoration: none !important;
}

/* Inputs (idénticos a Mi Cuenta) */
#ctp-contacto-root .ctp-contacto-input {
    width:         100% !important;
    padding:       0.75rem 1rem !important;
    font-family:   var(--c-font) !important;
    font-size:     0.9375rem !important;
    color:         var(--c-text) !important;
    background:    #fff !important;
    border:        1.5px solid var(--c-border) !important;
    border-radius: var(--c-r) !important;
    outline:       none !important;
    transition:    border-color var(--c-t), box-shadow var(--c-t) !important;
    box-shadow:    none !important;
    appearance:    none !important;
    -webkit-appearance: none !important;
}
#ctp-contacto-root .ctp-contacto-textarea {
    min-height: 120px !important;
    resize:     vertical !important;
    line-height: 1.5 !important;
}
#ctp-contacto-root .ctp-contacto-input::placeholder { color: var(--c-subtle) !important; }
#ctp-contacto-root .ctp-contacto-input:focus {
    border-color: var(--c-zinc-900) !important;
    box-shadow:   0 0 0 3px rgba(24,24,27,0.08) !important;
}

/* Honeypot */
#ctp-contacto-root .ctp-contacto-hp {
    position: absolute !important;
    left:     -9999px !important;
    width:    1px !important;
    height:   1px !important;
    overflow: hidden !important;
}

/* Botón enviar (idéntico al de login: pill oscuro full-width) */
#ctp-contacto-root .ctp-contacto-submit {
    width:           100% !important;
    margin-top:      0.25rem !important;
    padding:         0.9rem 1.5rem !important;
    font-family:     var(--c-font) !important;
    font-size:       0.9375rem !important;
    font-weight:     600 !important;
    color:           #fff !important;
    background:      var(--c-zinc-900) !important;
    border:          none !important;
    border-radius:   var(--c-r-full) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             0.5rem !important;
    cursor:          pointer !important;
    transition:      background var(--c-t) !important;
}
#ctp-contacto-root .ctp-contacto-submit:hover { background: var(--c-zinc-800) !important; }

/* ── Info: WhatsApp como pill (proporción de botón del sitio) ─ */
#ctp-contacto-root .ctp-contacto-wa {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             0.5rem !important;
    padding:         0.8rem 1.5rem !important;
    background:      #25D366 !important;
    color:           #fff !important;
    font-size:       0.9375rem !important;
    font-weight:     600 !important;
    border-radius:   var(--c-r-full) !important;
    text-decoration: none !important;
    transition:      background var(--c-t) !important;
}
#ctp-contacto-root .ctp-contacto-wa:hover { background: #1EBE5A !important; }
#ctp-contacto-root .ctp-contacto-wa iconify-icon { flex-shrink: 0 !important; }

/* ── Info: lista de datos ───────────────────────────────────── */
#ctp-contacto-root .ctp-contacto-list {
    list-style:     none !important;
    margin:         0 !important;
    padding:        0 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            1rem !important;
}
#ctp-contacto-root .ctp-contacto-item {
    display:     flex !important;
    align-items: center !important;
    gap:         0.75rem !important;
}
#ctp-contacto-root .ctp-contacto-item__icon {
    width:           40px !important;
    height:          40px !important;
    flex-shrink:     0 !important;
    background:      var(--c-accent-lt) !important;
    color:           var(--c-accent) !important;
    border-radius:   var(--c-r) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
}
#ctp-contacto-root .ctp-contacto-item__body  { display: flex !important; flex-direction: column !important; gap: 0.1rem !important; font-size: 0.9375rem !important; color: var(--c-text) !important; min-width: 0 !important; }
#ctp-contacto-root .ctp-contacto-item__label { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--c-subtle) !important; }
#ctp-contacto-root .ctp-contacto-item__body a { color: var(--c-text) !important; text-decoration: none !important; transition: color var(--c-t) !important; word-break: break-word !important; }
#ctp-contacto-root .ctp-contacto-item__body a:hover { color: var(--c-accent) !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
    #ctp-contacto-root .ctp-contacto-grid     { grid-template-columns: 1fr !important; }
    #ctp-contacto-root .ctp-contacto-wa       { width: 100% !important; }
}
@media (max-width: 520px) {
    #ctp-contacto-root .ctp-contacto-field-row { grid-template-columns: 1fr !important; }
    #ctp-contacto-root .ctp-contacto-card      { padding: 1.5rem !important; }
}