/* =================== Variables =================== */
:root{
  --contact-primary:#00f0ff;
  --contact-secondary:#7b2dff;
  --contact-dark:#0a0a1a;
  --contact-darker:#050510;
  --contact-light:#f0f0f0;
  --contact-muted:#cfd7ff;

  --card-radius:18px;
  --card-blur:12px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Redes (tamaño global) */
  --social-size:55px;   /* diámetro del botón */
  --social-icon:20px;   /* tamaño del SVG interno */
}

/* =================== Sección =================== */
.contact-section{
  position:relative;
  min-height:100vh;
  padding:clamp(56px,7vw,110px) 0;
  background:linear-gradient(135deg,var(--contact-darker) 0%, var(--contact-dark) 100%);
  color:var(--contact-light);
  overflow:hidden;
  display:flex; align-items:center;
}

/* Canvas partículas */
.contact-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; pointer-events:none; }

/* Contenido */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1; width:100%; }

/* =================== Hero =================== */
.contact-hero{ text-align:center; padding:clamp(24px,6vw,40px) 0; margin-bottom:clamp(24px,5vw,56px); }
.contact-title{
  font-size:clamp(28px,5.4vw,60px); line-height:1.05; margin:0 0 10px;
  background:linear-gradient(90deg,var(--contact-primary),var(--contact-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(123,45,255,.22);
}
.contact-subtitle{ font-size:clamp(15px,1.8vw,20px); color:var(--contact-muted); opacity:.9; max-width:780px; margin:0 auto; font-weight:300; }

/* =================== Tarjetas =================== */
.contact-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
  margin:clamp(16px,5vw,64px) auto 0;
  align-items:stretch;
  content-visibility:auto;
}
@media (max-width: 992px){ .contact-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width: 680px){ .contact-cards{ grid-template-columns:1fr; } }

.contact-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--card-radius);
  padding:28px 22px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(10,10,26,.78),rgba(5,5,16,.86)) padding-box,
    linear-gradient(125deg,rgba(0,240,255,.28),rgba(123,45,255,.28)) border-box;
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,240,255,.06);
  backdrop-filter:blur(var(--card-blur));
  cursor:pointer; text-align:center;
  transform-style:preserve-3d;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  overflow:hidden;
}
.contact-card:hover{
  transform: translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 22px 50px rgba(0,0,0,.55);
}
.contact-card::after{
  content:""; position:absolute; top:var(--my,50%); left:var(--mx,50%);
  width:360px; height:360px; transform:translate(-50%,-50%);
  background:radial-gradient(240px circle at center, rgba(0,240,255,.16), rgba(123,45,255,.12) 40%, transparent 60%);
  pointer-events:none; mix-blend-mode:screen; opacity:.9; transition: opacity .25s var(--ease);
}
.contact-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:conic-gradient(from 0deg, rgba(0,240,255,.35), rgba(123,45,255,.35), rgba(0,240,255,.35));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; filter:blur(.3px);
}
.contact-section .contact-icon{
  width:52px; height:52px; margin:0 auto 12px;
  display:grid; place-items:center; border-radius:14px;
  background:radial-gradient(120% 120% at 10% 10%, rgba(0,240,255,.26), rgba(123,45,255,.16));
  border:1px solid rgba(0,240,255,.35); font-size:26px; transform:translateZ(20px);
}
.contact-card h3{ font-size:clamp(18px,2.2vw,22px); color:var(--contact-primary); margin:6px 0 8px; }
.contact-card p{ color:#eaf6ff; opacity:.92; line-height:1.58; margin:8px 0 10px; }
.contact-info{ font-weight:600; color:var(--contact-primary); opacity:.95; }

/* =================== Ubicación & Redes =================== */
.location-section{ margin-top: clamp(36px,7vw,100px); }
.section-title{
  text-align:center; font-size:clamp(22px,3.4vw,38px); margin-bottom: clamp(24px,5vw,60px);
  background:linear-gradient(90deg,var(--contact-primary),var(--contact-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.location-content{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,40px); }
@media (max-width: 992px){ .location-content{ grid-template-columns:1fr; } }

.location-info{
  background:rgba(10,10,26,.78); border-radius:15px; padding: clamp(18px,3vw,30px);
  border:1px solid rgba(123,45,255,.14); backdrop-filter:blur(10px);
}

.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.info-item{ display:flex; gap:12px; align-items:flex-start; }
.info-ico{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center; border-radius:12px;
  background:radial-gradient(110% 110% at 10% 10%, rgba(0,240,255,.22), rgba(123,45,255,.14));
  border:1px solid rgba(0,240,255,.30);
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,240,255,.08);
  font-size:20px; color:#eaf6ff;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.info-item:hover .info-ico{
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.45), 0 0 0 2px rgba(0,240,255,.14);
}
.info-text{ display:flex; flex-direction:column; gap:4px; }
.info-text strong{ color:var(--contact-primary); }
.info-text span{ opacity:.9; }

.social-section{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(123,45,255,.20); }
.social-section > p{ margin:0 0 10px; font-weight:600; letter-spacing:.2px; color:#eaf6ff; opacity:.95; }

/* ===== Redes (limpio) ===== */
.contact-section .social-links{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; align-items:center; }

/* Un ÚNICO bloque .social-icon */
.contact-section .social-icon{
  /* toma del :root (custom properties) */
  inline-size: var(--social-size);
  block-size: var(--social-size);
  aspect-ratio: 1 / 1;           /* círculo perfecto: relación 1:1 */
  flex: 0 0 var(--social-size);  /* evita que flex la deforme */
  border-radius: 50%;
  display:grid; place-items:center;
  position:relative; overflow:hidden; text-decoration:none;
  color:#eaf6ff;

  background: radial-gradient(120% 120% at 10% 10%, rgba(0,240,255,.22), rgba(123,45,255,.12));
  border:1px solid rgba(0,240,255,.28);
  box-shadow: inset 0 0 0 1px rgba(0,240,255,.06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
}
.contact-section .social-icon svg{ width: var(--social-icon); height: var(--social-icon); display:block; fill: currentColor; }

/* Halo que escala en % (no px) y recorta al círculo */
.contact-section .social-icon::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit; clip-path: inset(0 round 50%);
  background: radial-gradient(70% 70% at var(--mx,50%) var(--my,50%), rgba(0,240,255,.22), transparent 65%);
  opacity:.85; mix-blend-mode:screen; pointer-events:none; transition:opacity .2s var(--ease);
}

/* Hover/Focus — sin color-mix por compatibilidad; usa la marca directa */
.contact-section .social-icon:hover,.contact-section .social-icon:focus-visible{
  transform: translateY(-4px);
  color:#fff;
  border-color: var(--brand, rgba(0,240,255,.5));
  box-shadow: 0 12px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.10), 0 0 26px var(--brand, rgba(0,240,255,.5));
  outline:none;
}

/* Colores de marca por red */
.contact-section .social--instagram{ --brand:#E1306C; }
.contact-section .social--facebook { --brand:#1877F2; }
.contact-section .social--youtube  { --brand:#FF0000; }
.contact-section .social--linkedin { --brand:#0A66C2; }

/* Map */
.location-map{
  background:rgba(10,10,26,.78); border-radius:15px; overflow:hidden;
  border:1px solid rgba(123,45,255,.14); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; min-height:300px;
}
.map-placeholder{ text-align:center; padding:24px; }
.map-marker{ font-size:3rem; margin-bottom:12px; color:var(--contact-primary); }

/* =================== Notificación =================== */
.notification{
  position:fixed; left:50%; bottom:30px;
  transform: translateX(-50%) translateY(calc(100% + 80px));
  opacity:0; visibility:hidden;
  background:rgba(10,10,26,.94); color:var(--contact-light);
  padding:12px 20px; border-radius:999px; border:1px solid var(--contact-primary);
  box-shadow:0 5px 15px rgba(0,240,255,.22); z-index:1000;
  transition: transform .5s cubic-bezier(.175,.885,.32,1.275), opacity .2s ease, visibility .2s step-end;
  pointer-events:none; will-change: transform, opacity;
}
.notification.show{ transform: translateX(-50%) translateY(0); opacity:1; visibility:visible;
  transition: transform .5s cubic-bezier(.175,.885,.32,1.275), opacity .2s ease, visibility 0s step-start; }

/* =================== Fade-in base =================== */
.fade-in{ opacity:0; transform:translateY(16px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.fade-in.visible{ opacity:1; transform:none; }

/* =================== Accesibilidad / Motion =================== */
:focus-visible{ outline:2px solid var(--contact-primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .contact-card, .social-icon{ transition:none; }
  .contact-card:hover{ transform:none; }
}

/* Compacto en móviles */
@media (max-width:420px){
  :root{ --social-size:58px; --social-icon:24px; }
  .social-links{ gap:14px; }
}