/* ==========================================================================
   CONTACTO — Diamante Mesa Negra
   Reordenado + comentarios + parches Safari/WebKit (sin omitir nada)
   --------------------------------------------------------------------------
   Índice
   0) Tokens/Helpers Safari
   1) Sección base (fondo diamante + viñetas)
   2) Formulario (labels, inputs, textarea, focus)
   3) Botón CTA (negro + destello barrido)
   4) Línea cromada
   5) Card info (cromo perimetral + shine + spotlight cursor)
   6) Botones sociales circulares
   7) Select oscuro de alto contraste (caret FontAwesome)
   8) Chips “grafito” (tema alterno local)
   Accesibilidad: focus-visible / reduce-motion donde aplica
   ========================================================================== */


/* ========== 0) TOKENS / HELPERS SAFARI ==================================== */
/* Helpers WebKit: blur/backdrop y gradiente de texto */
.safari-blur {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.webkit-text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* Animación shine reutilizable (ya usada en otros módulos) */
@keyframes proSweep{
  0%{ transform:rotate(20deg) translateX(-140%); opacity:0; }
  12%{ opacity:.85; }
  28%{ transform:rotate(20deg) translateX(80%); opacity:0; }
  100%{ transform:rotate(20deg) translateX(80%); opacity:0; }
}
@keyframes proBorderSpin{ to{ transform:rotate(360deg); } }


/* ========== 1) SECCIÓN BASE (diamante + viñetas) =========================== */
/* Sustitución funcional: separamos color de fondo y capas para Safari */
.pro-contact-section{
  /* mantiene overlay + parallax existentes */
  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,.95)),
    url('/images/Edificio.jpeg') no-repeat center 35%;  /* sube el encuadre hacia el edificio */
  background-size: 105% auto;  /* ~“zoom out” 15% para ver más alto sin perder amplitud */
  background-attachment: fixed;
}



.pro-contact-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(800px 300px at 50% 100%, rgba(255,255,255,.03), transparent 70%);
}

/* ========== 2) FORMULARIO ================================================== */
.pro-form-wrap{ position:relative; z-index:1; }

.pro-label{
  display:block; margin-bottom:.35rem;
  font-size:.9rem; letter-spacing:.02em; color:#dcdcdc;
}

.pro-input{
  width:100%; color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:.9rem; padding:.9rem 1rem;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-backdrop-filter: blur(4px); /* Safari */
  backdrop-filter: blur(4px);
}
.pro-input::placeholder{ color:rgba(255,255,255,.45); }
.pro-input:focus{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.15);
}
.pro-textarea{ resize:vertical; min-height:140px; }


/* ========== 3) BOTÓN CTA (negro + destello) ================================ */
.pro-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 1.25rem; color:#f5f5f7; font-weight:700; letter-spacing:.02em;
  background:#0a0a0a; border:1px solid #1b1b1b; border-radius:.9rem; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.pro-btn:hover{
  transform:translateY(-1px); border-color:#2a2a2a;
  box-shadow:0 16px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Shine barrido como elemento hijo (.pro-btn__shine) */
.pro-btn__shine{
  content:""; position:absolute; inset:-30% -20% auto auto; width:40%; height:200%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 70%);
  transform:rotate(20deg) translateX(-140%);
  animation: proSweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
/* En iOS el hover puede quedar “pegado”, limita la animación automática a desktop */
@media (hover:hover) and (pointer:fine){
  .pro-btn__shine{ animation-play-state: running; }
}


/* ========== 4) LÍNEA CROMADA ============================================== */
.pro-chrome-line{
  height:1px; width:100%; margin-top:18px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  filter:blur(.2px); opacity:.55;
}


/* ========== 5) CARD INFO (cromo + shine + spotlight) ======================= */
.pro-info-card{
  position:relative; /* para borde cromado/shine */
  border-radius:1.1rem; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
  color:#fff;
}
.pro-info-title{ font-weight:700; color:#fff; letter-spacing:.02em; }
.pro-info-text{ color:#e6e6e6; opacity:.85; }

/* Borde cromado perimetral (conic + mask) */
.pro-chrome-border{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.35) 60deg,
    rgba(255,255,255,0) 120deg, rgba(255,255,255,.15) 180deg,
    rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:proBorderSpin 9s linear infinite; opacity:.55;
}

/* Brillo diagonal suave (fijo) */
.pro-card-shine{
  position:absolute; inset:-40% -20% auto -20%; height:80%;
  transform:rotate(16deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.09), rgba(255,255,255,0));
  opacity:.25; filter:blur(10px); pointer-events:none;
}

/* Spotlight sigue cursor (visibilidad controlada por hover) */
.pro-spotlight{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.12), rgba(255,255,255,0));
  top:-200px; left:-200px; opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.pro-info-card:hover .pro-spotlight{ opacity:.8; }


/* ========== 6) BOTONES SOCIALES CIRCULARES ================================ */
.social{ display:flex; gap:12px; }
.social li{ list-style:none; }

.social li a{
  width:50px; height:50px;
  background:#fff;
  text-align:center;
  line-height:50px;
  font-size:20px;
  display:block;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  border:2px solid #fff;
  z-index:1;
  transition:transform .3s ease;
}
.social li a:hover{ transform:translateY(-3px); }

.social li a .icon{
  position:relative;
  color:#262626;
  transition:.5s;
  z-index:3;
}
.social li a:hover .icon{ color:#fff; transform:rotateY(360deg); }

/* Capa deslizante (relleno por red) */
.social li a::before{
  content:""; position:absolute; top:100%; left:0;
  width:100%; height:100%;
  background:#f00; transition:.5s; z-index:2;
}
.social li a:hover::before{ top:0; }

/* Colores por red (LinkedIn, WhatsApp, Facebook, Instagram, TikTok) */
.social li:nth-child(1) a::before{ background:#0077b5; } /* LinkedIn */
.social li:nth-child(2) a::before{ background:#25D366; } /* WhatsApp */
.social li:nth-child(3) a::before{ background:#3b5999; } /* Facebook */
.social li:nth-child(4) a::before{ background:#E1306C; } /* Instagram */
.social li:nth-child(5) a::before{ background:#000000; } /* TikTok */


/* ========== 7) SELECT OSCURO ALTO CONTRASTE ================================ */
/* Sustitución funcional: mantenemos tu look y agregamos prefijos/compat. */
.pro-select {
  width: 100%;
  color: #e9e9e9;
  background: #0b0b0b;                 /* antes: rgba(255,255,255,.04) */
  border: 1px solid #2a2a2a;           /* más contraste */
  border-radius: .8rem;
  padding: .75rem 2.6rem .75rem 1rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s, color .25s;
  -webkit-backdrop-filter: blur(3px);   /* Safari */
  backdrop-filter: blur(3px);
  appearance: none;                     /* oculta UI nativa */
}
.pro-select:hover { background:#111; }
.pro-select:focus {
  background:#121212;
  border-color:#7a7a7a;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
}
.pro-select option {
  background: #0b0b0b;                 /* evita “texto blanco sobre blanco” del SO */
  color: #f3f3f3;
}

/* caret */
.pro-select-wrap { position: relative; }
.pro-select-wrap::after{
  content: "\f107"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight: 900;
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: #cfcfcf; opacity: .9; pointer-events: none;
}


/* ========== 8) CHIPS — TEMA GRAFITO (LOCAL) =============================== */
/* Este bloque es independiente del sistema anterior de chips; no interfiere */
#catTabs { gap: .6rem; }

.cat-chip{
  --chip-bg: #0d0d0d;
  --chip-border: #2a2a2a;
  --chip-bg-hover: #151515;
  --chip-text: #e9e9e9;
  --chip-subtle: #bdbdbd;
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.7rem .9rem; text-align:left; border-radius: .9rem;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-text);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.cat-chip:hover{
  background: var(--chip-bg-hover);
  border-color: #3a3a3a;
  transform: translateY(-1px);
}
.cat-chip .fa-circle-question{
  font-size: 1.05rem;
  color: #ffb457cc; /* acento cálido leve (antes naranja fuerte) */
  transition: opacity .2s, transform .2s, color .2s;
}
.cat-chip:hover .fa-circle-question{ opacity:.95; transform: translateY(-1px); }

/* Activo: aro cromado sutil + resalte */
.cat-chip.is-active{
  border-color:#7a7a7a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 8px 22px rgba(0,0,0,.45);
}

/* Iconos más legibles */
.cat-chip i.text-lg{ opacity: .95 !important; color:#e5e5e5; }

/* Accesibilidad foco teclado */
.cat-chip:focus-visible{
  outline: 2px solid #9e9e9e;
  outline-offset: 2px;
  border-color:#9e9e9e;
}


/* ========== ACCESIBILIDAD / REDUCE MOTION (GENERAL) ======================== */
@media (prefers-reduced-motion: reduce){
  .pro-btn__shine,
  .pro-chrome-border{ animation: none !important; }
}
@media (min-width: 1024px){
  .pro-contact-section{
    background-position: center 30%;
    background-size: 110% auto; /* un poco más de apertura en pantallas grandes */
  }
}

/* En móviles (evita ver demasiado cielo) */
@media (max-width: 640px){
  .pro-contact-section{
    background-position: center 40%;
    background-size: 120% auto;
  }
}