.contact-page .kb-page-hero__visual::before{
  z-index:2;
  width:34%;
  right:-14%;
  top:-20%;
  pointer-events:none;
}

.contact-page .kb-page-hero__visual::after{
  z-index:0;
  width:30%;
  left:auto;
  right:-12%;
  bottom:-20%;
  pointer-events:none;
}

.contact-page .kb-page-hero__visual .kb-hero-photo{
  z-index:1;
}

.contact-page .kb-visual-card{
  z-index:4;
  left:8%;
  right:16%;
  bottom:8%;
}

.contact-channel-heading{
  display:flex;
  align-items:center;
  gap:14px;
}

.contact-whatsapp-mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  color:#fff;
  background:#25d366;
  box-shadow:0 10px 22px rgba(37,211,102,.22);
}

.contact-whatsapp-mark svg{
  width:25px;
  height:25px;
  fill:currentColor;
}

.contact-channel-heading .kb-visual-card__label{
  margin-bottom:3px;
}

.contact-social-section{
  padding:clamp(72px,7vw,112px) 0;
  background:#fff;
}

.contact-social-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  align-items:end;
  gap:48px;
  margin-bottom:38px;
}

.contact-social-intro h2,
.contact-alternatives h2{
  color:var(--ink);
  font-family:var(--display);
  letter-spacing:-.035em;
}

.contact-social-intro h2{
  margin-top:7px;
  font-size:clamp(34px,3.2vw,52px);
}

.contact-social-intro>p{
  max-width:540px;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

.contact-social-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.contact-social-card{
  min-width:0;
  padding:20px;
  border:1px solid #dbe8f7;
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 38px rgba(23,72,129,.09);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.contact-social-card:hover{
  transform:translateY(-4px);
  border-color:#b8d3f2;
  box-shadow:0 22px 46px rgba(23,72,129,.13);
}

.contact-social-card header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.contact-social-card header>div{
  display:grid;
  gap:1px;
}

.contact-social-card header strong{
  color:var(--ink);
  font:700 18px var(--display);
}

.contact-social-card header span:not(.contact-network-icon){
  color:var(--muted);
  font-size:13px;
}

.contact-network-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  color:#fff;
}

.contact-network-icon svg,
.contact-alt svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.contact-social-card--instagram .contact-network-icon{background:linear-gradient(135deg,#833ab4,#e1306c 58%,#f77737)}
.contact-social-card--facebook .contact-network-icon{background:#1877f2}
.contact-social-card--tiktok .contact-network-icon{background:#111}
.contact-social-card--linkedin .contact-network-icon{background:#0a66c2}

.contact-post-preview{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-radius:17px;
  background:#e9f2fc;
}

.contact-post-preview::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:48%;
  background:linear-gradient(transparent,rgba(3,36,76,.68));
  pointer-events:none;
}

.contact-post-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.contact-social-card:hover .contact-post-preview img{
  transform:scale(1.025);
}

.contact-post-preview>span{
  position:absolute;
  z-index:1;
  left:18px;
  right:18px;
  bottom:16px;
  color:#fff;
  font:700 clamp(18px,1.7vw,25px) var(--display);
  letter-spacing:-.025em;
}

.contact-social-card>p{
  min-height:52px;
  margin:17px 2px 12px;
  color:var(--muted);
  line-height:1.55;
}

.contact-social-card>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--blue);
  font:700 14px var(--display);
}

.contact-social-card>a span{
  transition:transform .2s ease;
}

.contact-social-card>a:hover span{
  transform:translateX(4px);
}

.contact-alternatives{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  margin-top:38px;
  padding:28px 30px;
  border:1px solid #dbe8f7;
  border-radius:22px;
  background:#f7fbff;
}

.contact-alternatives h2{
  margin-top:5px;
  font-size:clamp(24px,2vw,34px);
}

.contact-alternatives nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  flex:1 1 560px;
  max-width:720px;
}

.contact-alt{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #d8e5f5;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:600 13px var(--display);
}

.contact-alt svg{width:18px;height:18px}
.contact-alt--whatsapp svg{color:#25d366}
.contact-alt--instagram svg{color:#e1306c}
.contact-alt--facebook svg{color:#1877f2}
.contact-alt--linkedin svg{color:#0a66c2}

.contact-alt--email{
  flex:1 0 100%;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  color:#0047aa;
  text-decoration:none;
}

.contact-alt--email>svg{
  width:22px;
  height:22px;
  color:#0047aa;
}

.contact-alt__email-copy{
  display:grid;
  min-width:0;
  gap:2px;
}

.contact-alt__email-copy strong{
  color:var(--ink);
  font:700 14px/1.3 var(--display);
}

.contact-alt__email-copy small{
  overflow-wrap:anywhere;
  color:inherit;
  font:500 14px/1.35 var(--body);
}

.contact-alt__email-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-weight:700;
}

.contact-alt--email:hover .contact-alt__email-action>span{
  transform:translateX(3px);
}

.contact-alt__email-action>span{
  transition:transform .2s ease;
}

.contact-alt--email:focus-visible{
  outline:3px solid rgba(242,137,1,.42);
  outline-offset:3px;
}

@media(max-width:980px){
  .contact-social-intro{grid-template-columns:1fr;gap:14px}
  .contact-alternatives{align-items:flex-start;flex-direction:column}
  .contact-alternatives nav{justify-content:flex-start;flex-basis:auto;max-width:none;width:100%}
}

@media(max-width:680px){
  .contact-page .kb-visual-card{left:5%;right:5%;bottom:5%;padding:16px}
  .contact-page .kb-visual-card p{font-size:14px;line-height:1.45}
  .contact-whatsapp-mark{width:40px;height:40px;border-radius:12px}
  .contact-whatsapp-mark svg{width:22px;height:22px}
  .contact-social-section{padding:68px 0}
  .contact-social-grid{grid-template-columns:1fr;gap:18px}
  .contact-social-card{padding:15px;border-radius:20px}
  .contact-social-card>p{min-height:0}
  .contact-post-preview{border-radius:15px}
  .contact-alternatives{margin-top:28px;padding:22px 18px}
  .contact-alternatives nav{display:grid;width:100%;grid-template-columns:1fr 1fr}
  .contact-alt{justify-content:center;padding-inline:10px}
  .contact-alt--email{grid-column:1/-1;justify-content:stretch;padding:14px 16px}
}

@media(max-width:480px){
  .contact-alt--email{grid-template-columns:22px minmax(0,1fr)}
  .contact-alt__email-action{grid-column:2;justify-self:start}
}

@media(max-width:390px){
  .contact-page .kb-visual-card p{font-size:13px}
  .contact-alternatives nav{grid-template-columns:1fr}
}

/* 24-09-2026 · Sin textos sobre fotografías: la tarjeta de WhatsApp y los títulos de las publicaciones
   se leen debajo de su imagen, no encima. */
.contact-hero-media{display:grid;align-content:center;gap:16px;min-width:0}
.contact-page .contact-hero-media .kb-visual-card{position:relative;inset:auto;left:auto;right:auto;bottom:auto;z-index:auto;padding:20px 22px;border:1px solid var(--line,#dfe8f2);box-shadow:0 12px 28px rgba(10,43,82,.08)}
.contact-post-preview{display:grid;gap:12px;aspect-ratio:auto;overflow:visible;border-radius:0;background:none}
.contact-post-preview::after{content:none}
.contact-post-preview img{aspect-ratio:16/9;height:auto;border-radius:17px;background:#e9f2fc}
.contact-social-card:hover .contact-post-preview img{transform:none;filter:saturate(1.05)}
.contact-post-preview>span{position:static;color:var(--ink,#163252);font:700 clamp(17px,1.3vw,21px)/1.25 var(--display);letter-spacing:-.02em;text-shadow:none}
@media(max-width:680px){
  .contact-page .contact-hero-media .kb-visual-card{padding:16px}
  .contact-post-preview img{border-radius:15px}
}
html[data-theme="dark"] .contact-post-preview{background:none}
html[data-theme="dark"] .contact-post-preview>span{color:var(--kb-text)}