/* ============================================================
   contacto.css — página de contacto (divertida, ancho completo)
   ============================================================ */

/* ---- Hero divertido ---- */
.contact-hero { padding-bottom: 34px; }
.ch-orb { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; opacity: 0.5; }
.ch-orb-1 { width: 360px; height: 360px; top: -70px; right: 5%; background: radial-gradient(circle, rgba(99,102,241,0.5), transparent 70%); }
.ch-orb-2 { width: 300px; height: 300px; bottom: -90px; left: 10%; background: radial-gradient(circle, rgba(34,211,238,0.42), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
    .ch-orb-1 { animation: chFloat 14s ease-in-out infinite; }
    .ch-orb-2 { animation: chFloat 18s ease-in-out infinite reverse; }
    @keyframes chFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-24px); } }
}
.ch-wave { display: inline-block; transform-origin: 70% 70%; }
@media (prefers-reduced-motion: no-preference) {
    .ch-wave { animation: wave 2.6s ease-in-out infinite; }
    @keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(16deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
}

/* ---- Email destacado ---- */
.email-hero {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 30px; padding: 20px 22px;
    background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(34,211,238,0.08));
    border: 1px solid rgba(129,140,248,0.4);
    border-radius: 18px;
    box-shadow: 0 20px 55px rgba(79,70,229,0.22);
    max-width: 660px;
}
.email-hero-avatar {
    width: 54px; height: 54px; border-radius: 15px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff;
    background: var(--gradient-primary);
    box-shadow: 0 8px 22px rgba(37,99,235,0.45);
}
.email-hero-avatar .ic { font-size: 1.7rem; }
.email-hero-text { display: flex; flex-direction: column; flex: 1; min-width: 190px; }
.email-hero-label { font-size: 0.76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.email-hero-address {
    font-family: var(--font-mono); font-size: clamp(1.1rem, 3.2vw, 1.55rem); font-weight: 600;
    color: #fff; letter-spacing: -0.01em; word-break: break-all;
}
.email-hero-address:hover { color: var(--accent); }
.email-copy {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
    color: #fff; font-weight: 600; font-size: 0.9rem; font-family: var(--font-main);
    transition: all var(--transition); flex-shrink: 0;
}
.email-copy:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.email-copy .ic { font-size: 1.05rem; }
.email-copy .ec-default, .email-copy .ec-done { display: inline-flex; align-items: center; gap: 8px; }
.email-copy .ec-done { display: none; color: #4dd98c; }
.email-copy.copied .ec-default { display: none; }
.email-copy.copied .ec-done { display: inline-flex; }
.email-hero-hint { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; margin-top: 15px; color: var(--text-secondary); font-size: 0.9rem; }

/* ---- Cuerpo ---- */
.contact-body { padding-top: 44px; }
.contact-block-head { margin: 44px 0 20px; }
.contact-block-head:first-of-type { margin-top: 0; }
.contact-h2 { font-size: 1.55rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.contact-sub { color: var(--text-secondary); font-size: 0.98rem; }

/* Aviso asunto */
.contact-notice {
    display: flex; gap: 16px;
    background: linear-gradient(135deg, rgba(250,204,77,0.10), rgba(6,182,212,0.05));
    border: 1px solid var(--border-light);
    border-left: 3px solid #facc4d;
    border-radius: var(--radius);
    padding: 22px 24px;
}
.contact-notice-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(250,204,77,0.16); color: #facc4d; }
.contact-notice-ic .ic { font-size: 1.4rem; }
.contact-notice h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.contact-notice p { color: var(--text-secondary); line-height: 1.65; font-size: 0.95rem; }
.contact-notice em { color: var(--text-primary); font-style: normal; font-family: var(--font-mono); font-size: 0.88em; }

/* Motivos — ancho completo */
.reason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.reason-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); transition: all var(--transition);
}
.reason-card:hover { transform: translateY(-3px); border-color: var(--border-light); box-shadow: var(--shadow-hover); }
.reason-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; transition: transform var(--transition); }
.reason-card:hover .reason-ic { transform: scale(1.1) rotate(-5deg); }
.reason-ic .ic { font-size: 1.35rem; }
.reason-ic-blue { background: rgba(37,99,235,0.16); color: #3b82f6; }
.reason-ic-cyan { background: rgba(6,182,212,0.16); color: #06b6d4; }
.reason-ic-red { background: rgba(212,31,56,0.16); color: #f87171; }
.reason-ic-green { background: rgba(77,217,140,0.16); color: #4dd98c; }
.reason-ic-gold { background: rgba(250,204,77,0.16); color: #facc4d; }
.reason-ic-gray { background: rgba(148,163,184,0.16); color: #94a3b8; }
.reason-card strong { display: block; color: var(--text-primary); font-size: 0.98rem; }
.reason-card span { color: var(--text-muted); font-size: 0.82rem; }

/* Canales — fila ancho completo */
.channels-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.channel-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); transition: all var(--transition);
}
.channel-card:hover { transform: translateY(-3px); border-color: var(--border-light); box-shadow: var(--shadow-hover); }
.channel-card > .ic:first-child { font-size: 1.5rem; flex-shrink: 0; }
.channel-card > .ic:last-child { font-size: 1rem; color: var(--text-muted); margin-left: auto; }
.channel-card div { flex: 1; min-width: 0; }
.channel-card strong { display: block; color: var(--text-primary); }
.channel-card span { color: var(--text-muted); font-size: 0.85rem; }
.channel-linkedin > .ic:first-child { color: #0a66c2; }
.channel-email > .ic:first-child { color: var(--accent); }
.channel-github > .ic:first-child { color: var(--text-primary); }
.channel-youtube > .ic:first-child { color: #ff0033; }

@media (max-width: 560px) {
    .email-hero { padding: 18px; }
    .email-copy { width: 100%; justify-content: center; }
}

/* Formulario de contacto */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:40px;align-items:start}.contact-form-panel,.contact-side-card{padding:clamp(22px,3vw,36px);border:1px solid var(--border);background:var(--bg-card);border-radius:20px}.contact-form-panel h2{font-size:1.5rem;margin-bottom:8px}.contact-form-panel form{margin-top:28px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-field{margin-bottom:22px;min-width:0}.form-field label{display:block;margin-bottom:9px;font-weight:600;font-size:.92rem}.form-field input,.form-field select,.form-field textarea{width:100%;min-height:48px;border:1px solid #475569;border-radius:10px;padding:12px 14px;background:#0b1120;color:#f1f5f9;font:inherit;font-size:1rem;box-sizing:border-box;color-scheme:dark}.form-field textarea{resize:vertical}.form-field :is(input,select,textarea):focus-visible{outline:2px solid #67e8f9;outline-offset:3px}.form-field small{display:block;color:var(--text-secondary);line-height:1.6;margin-top:9px}.form-consent{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;line-height:1.65}.form-consent input{margin-top:5px;min-width:18px;height:18px;accent-color:#6366f1}.form-consent a,.contact-side a{color:#67e8f9}.contact-data-note{color:var(--text-secondary);font-size:.8rem;line-height:1.7;margin:18px 0}.contact-form-panel button[type=submit]{margin-top:14px;cursor:pointer}.contact-form-panel button:disabled{opacity:.5;cursor:not-allowed}.contact-side{display:grid;gap:20px}.contact-side h2{font-size:1.25rem}.contact-side p{color:var(--text-secondary);line-height:1.8;margin:14px 0}.contact-side a{display:block;margin-top:16px;overflow-wrap:anywhere}.form-errors,.form-success,.form-notice{padding:18px;border-radius:12px;margin:22px 0;line-height:1.7}.form-errors{background:#321723;border:1px solid #f87171}.form-errors ul{padding-left:20px}.form-success{background:#113328;border:1px solid #34d399}.form-notice{background:#152b40;border:1px solid #64748b}.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.form-field[hidden]{display:none}
@media(max-width:800px){.contact-layout{grid-template-columns:1fr}.contact-side{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.form-row,.contact-side{grid-template-columns:1fr}.contact-form-panel button[type=submit]{width:100%;justify-content:center}}

.local-captcha{border:1px solid #475569;border-radius:12px;padding:20px;margin:24px 0;min-width:0}.local-captcha legend{padding:0 8px;font-weight:600}.local-captcha p{font-size:.85rem;color:var(--text-secondary);line-height:1.7;margin:8px 0 16px}.captcha-image{display:block;max-width:100%;height:auto;border-radius:8px;margin:16px 0}.local-captcha audio{max-width:100%;width:100%}.local-captcha .btn{margin:0 0 16px}

/* Validation stays beside each field, with a concise accessible summary. */
.form-validation-summary{padding:18px 20px;margin-bottom:24px;border:1px solid rgba(251,191,36,.45);border-left:3px solid #fbbf24;border-radius:12px;background:linear-gradient(120deg,rgba(251,191,36,.09),rgba(251,191,36,.025));color:#fde68a;line-height:1.55}
.form-validation-summary strong{display:block;font-size:1rem}
.form-validation-summary p{margin:6px 0 0;color:#e2e8f0;font-size:.9rem}
.field-validation{margin:9px 0 0;color:#fda4af;font-size:.85rem;line-height:1.55;text-align:start}
.form-field [aria-invalid="true"]{border-color:#fb7185;background:linear-gradient(rgba(251,113,133,.045),rgba(251,113,133,.045)),#0b1120}
.form-consent input[aria-invalid="true"]{outline:2px solid #fb7185;outline-offset:3px}
.form-validation-summary[hidden],.field-validation[hidden]{display:none}