/* Contacto. Reutiliza site.css */
.contact { display: grid; gap: 1.4rem; max-width: 76rem; margin: 0 auto; padding: 1.2rem 1.6rem 0; }
.contact-hero { position: relative; display: flex; align-items: flex-end; min-height: 22rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.1rem;
  background: linear-gradient(90deg, rgba(5, 5, 7, .96) 0%, rgba(5, 5, 7, .75) 45%, rgba(120, 8, 18, .35) 100%), url("/static/img/hero-fondo.svg") center / cover no-repeat, #050507; }
.contact-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(to right, var(--red), transparent 70%); }
.contact-hero-copy { position: relative; display: grid; gap: .6rem; max-width: 40rem; padding: 2.4rem 2.2rem; }
.contact-kicker { color: var(--red); font: 600 .95rem var(--display); letter-spacing: .3em; text-transform: uppercase; }
.contact-hero h1 { font: italic 900 3.2rem/1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.contact-hero p:last-child { color: #e8e9ec; font-size: 1.2rem; font-weight: 400; line-height: 1.35; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.4rem; align-items: start; }
.contact-methods h2, .contact-card h2 { margin-bottom: .8rem; font: 600 1.6rem var(--display); }
.method-list { display: grid; gap: .7rem; }
.method { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 5rem; padding: .9rem 1.1rem; color: #fff; text-decoration: none;
  background: linear-gradient(120deg, #101014, #08080a); border: 1px solid var(--line); border-radius: .9rem; transition: border-color .2s, transform .2s, box-shadow .2s; }
.method:hover, .method:focus-visible { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 .6rem 1.6rem rgba(200, 16, 31, .18); }
.method-icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; background: rgba(200, 16, 31, .14); border: 1px solid rgba(200, 16, 31, .55); border-radius: .8rem; color: #fff; }
.method-text { display: grid; gap: .1rem; min-width: 0; }
.method-text strong { font-size: 1.2rem; font-weight: 600; }
.method-text small { color: var(--muted); font-size: .98rem; font-weight: 400; }
.method-value { overflow-wrap: anywhere; font-size: 1.05rem; font-weight: 600; }
.method-open { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--muted); border-radius: 50%; transition: color .2s, background .2s; }
.method:hover .method-open { color: #fff; background: var(--red); }

.contact-card { padding: 1.5rem; background: linear-gradient(160deg, #111116, #060608 70%); border: 1px solid var(--line); border-radius: 1rem; position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--red), transparent); }
.form-sub { margin: -.4rem 0 1rem; color: var(--muted); font-size: 1.02rem; }
#contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.field { display: grid; gap: .35rem; font-size: 1rem; }
.field.full, #contact-form .form-error, .send-btn { grid-column: 1 / -1; }
.field input, .field textarea, .field select { width: 100%; min-height: 3rem; padding: .6rem .85rem; color: #fff; background: #0b0b0e; border: 1px solid var(--line); border-radius: .6rem; font: 400 max(1rem, 16px) var(--body); transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(200, 16, 31, .25); }
.field .select select { padding-right: 2.2rem; }
.send-btn { justify-self: start; min-height: 3.2rem; padding: 0 2rem; }
.send-btn:disabled { opacity: .6; cursor: wait; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { display: grid; gap: .7rem; justify-items: start; padding: 1.2rem; background: rgba(46, 160, 90, .1); border: 1px solid rgba(62, 207, 122, .5); border-radius: .8rem; }
.form-done h3 { font: 600 1.4rem var(--display); }
.form-done p { color: #e8e9ec; font-size: 1.08rem; line-height: 1.35; }

.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.info-card dl { display: grid; gap: .3rem; margin: 0; }
.info-card dt { color: var(--muted); font-size: 1rem; }
.info-card dd { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.info-card p { font-size: 1.08rem; line-height: 1.4; }
.info-note { margin-top: .6rem; color: var(--muted); font-size: .98rem !important; }
.area-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .4rem; color: #fff; font-weight: 600; }

@media (max-width: 960px) {
  .contact-grid, .contact-info { grid-template-columns: 1fr; }
  .contact-hero h1 { font-size: 2.6rem; }
}
@media (max-width: 560px) {
  .contact { padding: 1rem 1rem 0; }
  .contact-hero { min-height: 17rem; background-position: 70% center; }
  .contact-hero-copy { padding: 1.6rem 1.2rem; }
  .contact-hero h1 { font-size: 2.1rem; }
  #contact-form { grid-template-columns: 1fr; }
  .send-btn { justify-self: stretch; }
  .method { gap: .75rem; padding: .8rem; }
  .method-icon { width: 2.8rem; height: 2.8rem; }
  .contact-card { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .method, .method-open, .field input, .field textarea { transition: none; }
}