:root{
  --accent:#0563ff;
  --page-bg:#ff7300;
  --bg-image:url('assets/cartel 2.jpg');
  --bg-opacity:.43;
  --bg-size:122% auto;
  --ui-font:Arial,Helvetica,sans-serif;
  --title-font:'Trebuchet MS',Arial,sans-serif;
  --title-weight:900;
  --pad:clamp(18px,3vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--accent);font-family:var(--ui-font);
  background:
    radial-gradient(circle at 15% 30%,rgba(255,255,255,.35),transparent 28%),
    radial-gradient(circle at 78% 70%,rgba(255,255,255,.22),transparent 25%),
    var(--page-bg);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--bg-image);background-size:var(--bg-size);
  background-position:right center;background-repeat:repeat;
  opacity:var(--bg-opacity);mix-blend-mode:multiply;
}
.interior-header,.contact-shell{position:relative;z-index:1}
.contact-shell{max-width:1260px;margin:0 auto;padding:0 var(--pad) 100px}

.contact-hero{
  position:relative;
  padding-top:18px;
  margin-top:-8px;
}
.contact-kicker{
  margin:0 0 10px;
  font:800 10px/1 var(--ui-font);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.contact-hero h1,.contact-title-blur{
  margin:0;
  font-family:var(--title-font);
  font-weight:var(--title-weight);
  font-size:clamp(74px,12vw,176px);
  letter-spacing:-.075em;
  line-height:.76;
  color:var(--accent);
}
.contact-hero h1{position:relative;z-index:2}
.contact-title-blur{
  position:absolute;
  left:6px;
  bottom:0;
  color:#2aaeff;
  opacity:.25;
  filter:blur(9px);
  transform:scale(1.01);
  pointer-events:none;
}

.contact-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:46px;
}
.contact-card{
  min-height:150px;
  border:1.5px solid var(--accent);
  padding:18px;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(2px);
  color:var(--accent);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.contact-card:hover{
  transform:translateY(-3px);
  background:rgba(5,99,255,.10);
  box-shadow:0 10px 30px rgba(5,99,255,.14);
}
.contact-card::after{
  content:"↗";
  position:absolute;
  right:16px;
  top:14px;
  font-size:18px;
  font-weight:900;
}
.contact-role{
  margin:0;
  font:900 clamp(23px,2.3vw,34px)/1 var(--title-font);
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.contact-person{
  margin-top:auto;
  margin-bottom:7px;
  font:800 10px/1.2 var(--ui-font);
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.72;
}
.contact-email{
  font:700 14px/1.25 var(--ui-font);
  word-break:break-word;
}

@media(max-width:760px){
  .contact-cards{grid-template-columns:1fr}
  .contact-card{min-height:130px}
}

/* Mantiene el alineado aprobado de CONTACTO v6 sin alterar el resto de páginas */
body .interior-header{align-items:center;padding:22px var(--pad) 10px}
body .interior-brand{display:flex;align-items:center;transform:translateX(-8px)}
body .interior-nav{padding-top:0}
@media(max-width:760px){body .interior-brand{transform:translateX(-4px);margin-bottom:8px}}

/* Ajuste final: CONTACTO limpio y separado de las tarjetas */
.contact-kicker,.contact-title-blur{display:none!important}
.contact-hero{padding-top:20px!important;margin-top:0!important;margin-bottom:38px!important}
.contact-cards{margin-top:0!important}