/* TuTallerYa v10.53 — Contacto editorial, propio del sistema azul/naranja.
   Se limita a #contacto y no pinta bloques rectangulares sobre el fondo compartido. */
.editorial-page .tty-contact.contact-section {
  position: relative;
  isolation: isolate;
  padding: clamp(94px, 9vw, 156px) 0 clamp(98px, 8vw, 142px);
  overflow: hidden;
  border: 0;
  background: transparent;
}
.editorial-page .tty-contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 0 2%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 60% at 4% 43%, rgba(21,93,253,.10), transparent 85%),
    radial-gradient(ellipse 34% 57% at 96% 75%, rgba(255,99,22,.065), transparent 82%);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 76%, transparent);
}
.editorial-page .tty-contact .tty-contact__layout {
  width: min(1270px, calc(100% - 80px));
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(58px, 7vw, 126px);
  position: relative;
  z-index: 1;
}
.tty-contact__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.editorial-page .tty-contact .tty-contact__kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 32px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .17em;
  color: var(--blue-ink);
}
.tty-contact__kicker .brand-bars {flex:0 0 41px;}
.editorial-page .tty-contact h2.tty-contact__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(3.25rem, 4.4vw, 5.65rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.061em;
  max-width: 590px;
}
.tty-contact__title-line {display: block;}
.tty-contact__title-accent {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(105deg, #155DFD 2%, #155DFD 28%, #FF6316 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tty-contact__word {
  display: inline-block;
  white-space: pre;
  will-change: auto;
}
/* Los hijos animados deben recibir su propia tinta. De lo contrario, WebKit/Chromium
   no aplica correctamente background-clip:text del padre a spans inline-block. */
.tty-contact__title-accent .tty-contact__word:first-child {
  background: none;
  -webkit-text-fill-color: #155DFD;
  color: #155DFD;
}
.tty-contact__title-accent .tty-contact__word:last-child {
  background: linear-gradient(105deg, #155DFD 1%, #FF6316 94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.editorial-page .tty-contact .tty-contact__lead {
  max-width: 470px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.86;
  text-wrap: pretty;
}
.tty-contact__prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 48px;
  font-size: .68rem;
  letter-spacing: .14em;
  font-weight: 750;
  color: var(--blue-ink);
}
.tty-contact__prompt > span {
  width: 31px;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
}
.tty-contact__prompt .icon {width: 14px; height: 14px; flex-basis: 14px;}
.tty-contact__channels {
  display: grid;
  gap: 15px;
  min-width: 0;
}
.editorial-page .tty-contact .tty-contact__channel {
  --channel-accent: #155DFD;
  --channel-rgb: 21, 93, 253;
  position: relative;
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 25px 23px 25px 24px;
  min-height: 133px;
  width: 100%;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 76%, var(--blue) 24%);
  border-radius: 23px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow: 0 18px 52px -42px rgba(5, 21, 49, .45);
  text-decoration: none;
  overflow: hidden;
  transform: none;
  transition:
    border-color .4s ease,
    box-shadow .4s ease,
    transform .42s cubic-bezier(.22,1,.36,1),
    background-color .35s ease;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme='dark'] .editorial-page .tty-contact .tty-contact__channel {
  background: color-mix(in srgb, var(--surface) 67%, transparent);
  border-color: rgba(117, 155, 209, .22);
  box-shadow: 0 20px 58px -43px #000a;
}
.tty-contact__channel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(var(--channel-rgb), .10), transparent 56%);
  opacity: .32;
  transition: opacity .38s ease;
}
.tty-contact__channel--phone {--channel-accent:#FF6316!important;--channel-rgb:255, 99, 22!important;}
.tty-contact__channel--privacy {--channel-accent:#155DFD!important;--channel-rgb:21, 93, 253!important;}
.tty-contact__channel--privacy::before {
  background: radial-gradient(ellipse at 10% 100%,rgba(255,99,22,.065),transparent 68%),
              linear-gradient(105deg,rgba(21,93,253,.085),transparent 58%);
}
.editorial-page .tty-contact .tty-contact__channel:hover,
.editorial-page .tty-contact .tty-contact__channel:focus-visible {
  border-color: rgba(var(--channel-rgb), .54);
  box-shadow: 0 25px 70px -43px rgba(var(--channel-rgb), .38);
  transform: translate3d(5px, -3px, 0);
}
.tty-contact__channel:is(:hover, :focus-visible)::before {opacity: 1;}
.tty-contact__channel > * {position: relative; z-index: 1;}
.tty-contact__icon {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  color: var(--channel-accent);
  background: rgba(var(--channel-rgb), .11);
  border: 1px solid rgba(var(--channel-rgb), .28);
  border-radius: 18px;
  box-shadow: 0 0 27px rgba(var(--channel-rgb), .10), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.tty-contact__channel:hover .tty-contact__icon {transform: translateY(-2px); box-shadow: 0 0 35px rgba(var(--channel-rgb), .23);}
.tty-contact__icon .icon {width: 26px; height: 26px; flex-basis: 26px; stroke-width: 1.65;}
.tty-contact__channel-copy {display: flex; flex-direction: column; flex: 1; min-width: 0;}
.tty-contact__channel-label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .11em;
  line-height: 1.45;
  margin-bottom: 8px;
}
.editorial-page .tty-contact .tty-contact__channel-copy strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(.99rem, 1.25vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.028em;
  overflow-wrap: anywhere;
}
.tty-contact__channel-note {font-size: .76rem; line-height: 1.4; color: var(--muted); margin-top: 8px;}
.tty-contact__arrow {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 50%;
  color: var(--blue-ink);
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  background: color-mix(in srgb, var(--surface) 36%, transparent);
  transition: transform .38s cubic-bezier(.22,1,.36,1), color .3s ease, border-color .3s ease;
}
.tty-contact__arrow .icon {width: 17px; height: 17px; flex-basis: 17px;}
.tty-contact__channel:is(:hover,:focus-visible) .tty-contact__arrow {transform: translate(2px,-2px);color:var(--channel-accent);border-color:rgba(var(--channel-rgb),.34);}
/* Animaciones solo cuando JS ha preparado la sección. Sin JS se puede leer todo. */
.tty-contact.contact-enhanced .tty-contact__word {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 22px, 0);
  transition: opacity .69s ease, filter .84s ease, transform .86s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(110ms + var(--contact-word-index) * 125ms);
}
.tty-contact.contact-enhanced.is-visible .tty-contact__word {opacity: 1;filter: blur(0);transform: none;}
.tty-contact.contact-enhanced .tty-contact__kicker,
.tty-contact.contact-enhanced .tty-contact__lead,
.tty-contact.contact-enhanced .tty-contact__prompt {
  opacity: 0;
  transform: translateY(17px);
  transition: opacity .68s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.tty-contact.contact-enhanced.is-visible .tty-contact__kicker,
.tty-contact.contact-enhanced.is-visible .tty-contact__lead,
.tty-contact.contact-enhanced.is-visible .tty-contact__prompt {opacity:1; transform:none;}
.tty-contact.contact-enhanced.is-visible .tty-contact__kicker {transition-delay: 50ms;}
.tty-contact.contact-enhanced.is-visible .tty-contact__lead {transition-delay: 560ms;}
.tty-contact.contact-enhanced.is-visible .tty-contact__prompt {transition-delay: 725ms;}
.tty-contact.contact-enhanced .tty-contact__channels > a {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 32px, 0);
  transition:
    opacity .8s ease,
    filter .82s ease,
    transform .94s cubic-bezier(.22,1,.36,1),
    border-color .35s ease,
    box-shadow .4s ease,
    background-color .35s ease;
  transition-delay: calc(180ms + var(--contact-channel-index) * 135ms),
    calc(180ms + var(--contact-channel-index) * 135ms),
    calc(180ms + var(--contact-channel-index) * 135ms),0ms,0ms,0ms;
}
.tty-contact.contact-enhanced.is-visible .tty-contact__channels > a {
  opacity:1;
  filter:none;
  transform:none;
}
.tty-contact.contact-enhanced.is-visible .tty-contact__channels > a:hover,
.tty-contact.contact-enhanced.is-visible .tty-contact__channels > a:focus-visible {transform:translate3d(5px,-3px,0);}
@media (max-width: 1100px) {
  .editorial-page .tty-contact .tty-contact__layout {gap:clamp(34px, 5vw, 70px);}
  .editorial-page .tty-contact h2.tty-contact__title {font-size:clamp(2.85rem,5vw,4.35rem);}
  .editorial-page .tty-contact .tty-contact__channel {gap:15px;padding:21px 17px;}
}
@media (max-width: 860px) {
  .editorial-page .tty-contact.contact-section {padding: 84px 0 108px;}
  .editorial-page .tty-contact .tty-contact__layout {width:calc(100% - 56px);grid-template-columns:1fr;gap:43px;}
  .editorial-page .tty-contact h2.tty-contact__title {font-size:clamp(3.15rem,7vw,4.8rem);}
  .tty-contact__copy {max-width:710px;}
  .tty-contact__prompt {margin-top:25px;}
}
@media (max-width: 600px) {
  .editorial-page .tty-contact.contact-section {padding: 74px 0 90px;}
  .editorial-page .tty-contact .tty-contact__layout {width:calc(100% - 36px);gap:34px;}
  .editorial-page .tty-contact .tty-contact__kicker {font-size:.67rem;letter-spacing:.12em;margin-bottom:22px;gap:10px;}
  .tty-contact__kicker .brand-bars {width:31px;flex-basis:31px;}
  .editorial-page .tty-contact h2.tty-contact__title {font-size:clamp(2.6rem,10.5vw,3.7rem);line-height:1.08;}
  .editorial-page .tty-contact .tty-contact__lead {font-size:.96rem;margin-top:19px;line-height:1.75;}
  .tty-contact__prompt {font-size:.6rem;letter-spacing:.1em;margin-top:25px;}
  .tty-contact__channels {gap:12px;}
  .editorial-page .tty-contact .tty-contact__channel {min-height:110px;padding:19px 14px;gap:12px;border-radius:18px;}
  .tty-contact__icon {width:44px;height:44px;flex-basis:44px;border-radius:13px;}
  .tty-contact__icon .icon {width:20px;height:20px;flex-basis:20px;}
  .tty-contact__arrow {width:29px;height:29px;flex-basis:29px;}
  .tty-contact__arrow .icon {width:15px;height:15px;flex-basis:15px;}
  .tty-contact__channel-label {font-size:.57rem;letter-spacing:.085em;margin-bottom:6px;}
  .editorial-page .tty-contact .tty-contact__channel-copy strong {font-size:clamp(.82rem,3.5vw,.98rem);}
  .tty-contact__channel-note {font-size:.7rem;margin-top:6px;}
}
@media (max-width: 365px) {
  .editorial-page .tty-contact h2.tty-contact__title {font-size:clamp(2.25rem, 10.3vw, 2.5rem);}
  .editorial-page .tty-contact .tty-contact__channel {padding:14px 11px;gap:10px;}
  .tty-contact__icon {width:40px;height:40px;flex-basis:40px;}
  .tty-contact__arrow {width:27px;height:27px;flex-basis:27px;}
}
@media (prefers-reduced-motion:reduce) {
  .tty-contact *, .tty-contact *::before, .tty-contact *::after {transition:none!important;animation:none!important;}
  .tty-contact.contact-enhanced .tty-contact__word,
  .tty-contact.contact-enhanced .tty-contact__kicker,
  .tty-contact.contact-enhanced .tty-contact__lead,
  .tty-contact.contact-enhanced .tty-contact__prompt,
  .tty-contact.contact-enhanced .tty-contact__channels>a {opacity:1!important;filter:none!important;transform:none!important;}
}