/* ==========================================================================
   CONTACTO — redes primero, email en un modal
   ========================================================================== */
.c-hero{
  position:relative; overflow:hidden; background:var(--ink-deep); color:var(--cream);
  padding:calc(var(--nav-h) + clamp(70px,10vw,120px)) 0 clamp(50px,7vw,90px);
}
.c-hero .beam{
  background:radial-gradient(880px 520px at 82% 0%, rgba(200,178,114,.22), transparent 70%),
             radial-gradient(600px 420px at 0% 100%, rgba(47,217,172,.12), transparent 66%);
}
.c-hero .wrap{ position:relative; z-index:2; }
.c-hero h1{ font-size:clamp(48px,8vw,110px); letter-spacing:-.04em; margin-top:22px; }

/* redes como tarjetas */
.soc{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.soc a{
  position:relative; display:flex; align-items:center; gap:16px; padding:24px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); transition:all .45s var(--ease);
}
.soc a:hover{ transform:translateY(-5px); border-color:var(--c); box-shadow:var(--shadow-2); }
.soc .ico{ width:48px; height:48px; border-radius:14px; background:color-mix(in srgb,var(--c) 14%,transparent); color:var(--c); }
.soc .ico svg{ width:22px; height:22px; }
.soc .nm{ display:block; font-family:'Fraunces',serif; font-size:23px; letter-spacing:-.02em; }
.soc .hd{ display:block; font-size:13px; color:var(--muted); font-family:'IBM Plex Mono',monospace; margin-top:2px; }
.soc .ar{ margin-left:auto; color:var(--c); opacity:0; transform:translate(-6px,6px); transition:all .4s var(--ease); }
.soc a:hover .ar{ opacity:1; transform:none; }

/* motivos */
.why-intro{ font-weight:600; font-size:17px; margin-bottom:14px; }
.why{ display:grid; }
.whyrow{
  display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:center; text-align:left; width:100%;
  padding:22px 8px; border-top:1px solid var(--line);
  transition:padding-left .4s var(--ease), background .35s var(--ease);
}
.whyrow:last-child{ border-bottom:1px solid var(--line); }
.whyrow .n{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--accent); }
.whyrow .t{ font-size:16.5px; line-height:1.5; }
.whyrow .pick{ font-size:12px; font-family:'IBM Plex Mono',monospace; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; opacity:0; transition:opacity .3s; white-space:nowrap; }
.whyrow:hover, .whyrow:focus-visible{ padding-left:18px; background:color-mix(in srgb,var(--accent) 8%,transparent); }
.whyrow:hover .pick, .whyrow:focus-visible .pick{ opacity:1; }
.why-hint{
  margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.why-hint::before{ content:'↑'; color:var(--accent); }

/* modal */
.modal{ position:fixed; inset:0; z-index:10003; display:none; place-items:center; padding:24px; background:rgba(12,10,9,.6); backdrop-filter:blur(10px); }
.modal.open{ display:grid; animation:fadeIn .25s var(--ease); }
.modal-box{
  width:100%; max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,4vw,44px); box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:popIn .35s var(--ease); max-height:88vh; overflow-y:auto; position:relative;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } }
.modal-box h3{ font-size:29px; letter-spacing:-.025em; margin-bottom:26px; }
.modal-x{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); transition:all .3s; }
.modal-x:hover{ color:var(--ink); border-color:var(--accent); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field textarea{
  width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); font-size:15px; outline:none; transition:border-color .3s, background .3s;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); background:var(--card); }
.field textarea{ resize:vertical; min-height:120px; font-family:inherit; }

@media (max-width:1000px){ .soc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .soc{ grid-template-columns:1fr; } .whyrow{ grid-template-columns:28px 1fr; } .whyrow .pick{ display:none; } }