/* Contacto NFC. Capa visual independiente del diseño de la landing. */
.connect-page {
  background: radial-gradient(ellipse at 50% 5%, #15231b 0, #080a09 58%);
  min-height:100svh;
}
.connect-shell {
  width:min(500px,calc(100% - 40px));
  margin:32px auto;
  padding:0 24px 22px;
  border:1px solid #354039;
  border-radius:32px;
  background:linear-gradient(150deg,#141a17,#080b09 50%);
  box-shadow:0 24px 80px #0009,0 1px 0 #ffffff0d inset;
  isolation:isolate;
}
.connect-brand { position:relative; text-align:center; }
.logo-theater {
  position:relative;
  margin:0 -24px;
  border-radius:31px 31px 0 0;
  overflow:hidden;
  background:#080c09;
}
.logo-theater::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,#101512 0,transparent 25%),linear-gradient(90deg,#10151280,transparent 18%,transparent 82%,#10151280);
}
.connect-brand .connect-logo {
  width:100%; height:auto; margin:0; border-radius:0;
  position:relative; z-index:1;
  transform-origin:center;
  animation:logo-suspend 2200ms ease-in-out 2;
}
.logo-aura {
  position:absolute; inset:9% 15% 4%;
  border-radius:50%;
  background:radial-gradient(ellipse,#43f45b22,transparent 70%);
}
.logo-reflection {
  position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,#e8fff60d 48%,#ffffff15 50%,transparent 59%);
  transform:translateX(-110%);
  animation:logo-light 1800ms ease-out 1;
}
.connect-brand .connect-eyebrow {
  margin:12px 0 11px;
  font-size:.75rem; font-weight:600;
  color:#b6cdbd; letter-spacing:.14em; line-height:1.6;
}
.connect-brand h1 {font-size:1.65rem;line-height:1.2;letter-spacing:-.045em;margin:0 0 9px;font-weight:600}
.connect-brand>p:last-child {font-size:.9375rem;color:#b4c0b8;margin-bottom:25px;line-height:1.45}
.contact-actions {gap:12px}
.connect-shell .contact-button {
  position:relative; overflow:hidden; display:flex;
  gap:16px; min-height:80px; padding:14px 17px;
  border:1px solid #424c45; border-radius:22px;
  background:linear-gradient(115deg,#282e2b,#1a201c 65%,#202823);
  box-shadow:0 1px 0 #ffffff0c inset,0 7px 16px #0003;
  color:#f4f8f5;
  transition:transform 180ms ease,border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;
}
.contact-button::before {
  content:'';position:absolute;left:17px;right:17px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#ffffff23,transparent);
  pointer-events:none;
}
.contact-button>.channel-badge {
  flex:0 0 48px; width:48px; height:48px;
  display:grid; place-items:center; border-radius:15px;
  border:1px solid #ffffff28;
  box-shadow:0 2px 4px #0003,0 1px 0 #ffffff33 inset;
  position:relative;
}
.channel-badge .channel-logo {display:block;width:27px;height:27px;color:white}
.channel-badge .icon {width:28px;height:28px;color:#edfff1}
.contact-button>.channel-text {flex:1;min-width:0}
.channel-text strong {display:block;font-weight:600;font-size:1.0625rem;line-height:1.3;letter-spacing:-.025em}
.channel-text small {display:block;font-size:.8125rem;color:#b4c0b8;line-height:1.4;margin-top:4px;font-weight:400}
.badge-save {background:linear-gradient(140deg,#384c3c,#16231a)}
.badge-whatsapp {background:linear-gradient(140deg,#28d965,#118c41)}
.badge-instagram {background:radial-gradient(circle at 20% 105%,#ffd65e 0,#fd942c 22%,#ef426d 45%,#b42ac2 70%,#595ce0 100%)}
.badge-tiktok {background:linear-gradient(145deg,#24282b,#030605)}
.badge-tiktok .channel-logo {filter:drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55)}
.badge-services {background:linear-gradient(140deg,#273e2d,#131e17)}
.connect-shell .channel-save {
  background:linear-gradient(115deg,#eef3f0,#d5dfd8);
  border-color:#f5fff9; color:#15211a;
  box-shadow:0 1px 0 white inset,0 7px 22px #0004;
}
.channel-save .channel-text small {color:#45574c}
.connect-shell .channel-whatsapp {border-color:#3b7e49;background:linear-gradient(115deg,#203e28,#17241b)}
.connect-shell .channel-services {border-color:#496c52;background:linear-gradient(115deg,#24382a,#17231b)}
.connect-shell .contact-button:focus-visible {outline:3px solid #73ff89;outline-offset:4px}
.connect-shell .contact-button:active {transform:scale(.98)}
.connect-shell .contact-note {font-size:.75rem;line-height:1.55;color:#a8b5ac;margin:20px 7px 8px}
.connect-shell>.email-link {font-size:.8125rem;min-height:48px;margin-bottom:15px;color:#c3cdc6}
.connect-shell .connect-footer {border-color:#303d34;padding-top:16px;font-size:.75rem;color:#92a298}
.connect-shell .connect-footer a {font-size:.8125rem;min-height:48px;color:#b4c0b8}
@keyframes logo-suspend {0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)}}
@keyframes logo-light {0%{transform:translateX(-110%);opacity:0}20%{opacity:1}80%{opacity:.7}100%{transform:translateX(110%);opacity:0}}
@media(hover:hover) and (pointer:fine) {
  .connect-shell .contact-button:hover {transform:translateY(-2px);border-color:#80a28a;box-shadow:0 8px 22px #0006,0 1px 0 #ffffff15 inset}
  .connect-shell .channel-save:hover {background:linear-gradient(115deg,#ffffff,#e4f0e8);border-color:white}
  .connect-shell .channel-whatsapp:hover {border-color:#6fe985;background:linear-gradient(115deg,#2c5135,#1e3024)}
  .connect-shell .contact-button:active {transform:scale(.98)}
}
@media(max-width:600px) {
  .connect-page {background:#090d0a}
  .connect-shell {width:min(440px,calc(100% - 32px));margin:0 auto;padding:0 0 18px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .logo-theater {margin:0 -16px;border-radius:0;background:#090d0a}
  .logo-theater::after {background:linear-gradient(0deg,#090d0a,transparent 30%)}
  .connect-brand .connect-eyebrow {margin-top:2px;letter-spacing:.1em}
  .connect-brand h1 {font-size:1.5rem}
  .connect-brand>p:last-child {margin-bottom:22px}
  .connect-shell .contact-button {min-height:76px;padding:12px 15px;gap:14px;border-radius:21px}
  .contact-actions {gap:11px}
  .channel-text strong {font-size:1rem}
  .channel-text small {font-size:.8125rem}
}
@media(max-width:360px) {
  .connect-shell .contact-button {gap:12px;padding-inline:12px}
  .contact-button>.channel-badge {flex-basis:44px;width:44px;height:44px}
  .channel-text strong {font-size:.9375rem}
  .connect-brand .connect-eyebrow {font-size:.75rem;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce) {
  .connect-brand .connect-logo,.logo-reflection {animation:none;transform:none}
  .logo-reflection {display:none}
  .connect-shell .contact-button {transition:none}
  .connect-shell .contact-button:hover,.connect-shell .contact-button:active {transform:none}
}
@media(prefers-contrast:more) {
  .connect-shell .contact-button {border-color:#91a899}
  .channel-text small,.connect-shell .contact-note {color:#d4e1d8}
  .channel-save .channel-text small {color:#273e30}
}
@media(forced-colors:active) {
  .connect-shell .contact-button,.channel-badge {border:1px solid ButtonText}
  .channel-badge .channel-logo,.channel-badge .icon {color:ButtonText;filter:none}
  .logo-aura,.logo-reflection {display:none}
}