/* ============================================================
   Publinovo — Página "Contacto" (contacto)
   Objetivo: generar confianza y cercanía. Agencia 100% digital,
   atención en todo México y el mundo. Hereda tokens y
   componentes de styles.css; solo añade lo específico.
   ============================================================ */

/* ============================================================
   1 · HERO
   ============================================================ */
.ct-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,6.5vw,82px) clamp(40px,5vw,60px);
  background:
    radial-gradient(110% 120% at 88% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.20), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.ct-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(43,45,58,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(43,45,58,.035) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 35%, #000, transparent 88%);
  mask-image:radial-gradient(80% 70% at 50% 35%, #000, transparent 88%);
}
.ct-hero .wrap{ position:relative; z-index:2 }
.ct-hero__inner{ max-width:820px; margin-inline:auto; text-align:center }
.ct-hero__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; text-align:left;
}
.ct-crumbs{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3);
}
.ct-crumbs a{ color:var(--ink-3); transition:color .2s }
.ct-crumbs a:hover{ color:var(--blue-d) }
.ct-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.ct-crumbs i{ font-style:normal; color:var(--line-2) }
.ct-hero h1{ font-size:clamp(34px,5vw,56px); letter-spacing:-.03em; margin-top:4px; text-wrap:balance }
.ct-hero .lead{ margin:24px auto 0; max-width:660px }
.ct-hero__pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:clamp(24px,3vw,34px);
}
.ct-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-weight:600; font-size:13.5px; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px; box-shadow:var(--shadow-sm);
}
.ct-pill svg{ width:16px; height:16px; color:var(--green-d) }

/* ============================================================
   2 · MÉTODOS DE CONTACTO RÁPIDO
   ============================================================ */
.ct-methods{ padding-block:clamp(40px,5vw,64px) 0 }
.ct-cards{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.8vw,22px);
}
.ct-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px 24px; box-shadow:var(--shadow-sm); overflow:hidden; isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.ct-card::before{
  content:""; position:absolute; z-index:-1; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%; background:var(--grad-soft);
  opacity:0; transition:opacity .4s;
}
.ct-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent }
.ct-card:hover::before{ opacity:1 }
.ct-card__ic{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-soft-2); color:var(--ink-2); margin-bottom:18px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s;
}
.ct-card__ic svg{ width:25px; height:25px }
.ct-card:hover .ct-card__ic{ transform:translateY(-2px) scale(1.06) }
.ct-card small{
  display:block; font-family:var(--ff-head); font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.ct-card b{ font-family:var(--ff-head); font-size:20px; color:var(--ink); line-height:1.2; letter-spacing:-.01em }
.ct-card p{ font-size:13.5px; color:var(--ink-3); margin-top:8px; line-height:1.5 }
.ct-card__go{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px;
  font-family:var(--ff-head); font-weight:600; font-size:14px; color:var(--blue-d);
}
.ct-card__go svg{ width:15px; height:15px; transition:transform .25s }
.ct-card:hover .ct-card__go svg{ transform:translateX(4px) }
/* variante WhatsApp */
.ct-card--wa .ct-card__ic{ background:#25D366; color:#fff }
.ct-card--wa .ct-card__go{ color:#1faa52 }
/* variante destacada (videollamada) */
.ct-card--accent .ct-card__ic{ background:var(--grad); color:#fff }

/* ============================================================
   3 · FORMULARIO + COLUMNA DE CONFIANZA
   ============================================================ */
.ct-main{ padding-block:clamp(48px,6vw,84px) }
.ct-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,3vw,42px); align-items:start;
}

/* tarjeta del formulario (reusa .cform de styles.css) */
.ct-form{ scroll-margin-top:120px }
.ct-form .cform-head{ margin-bottom:22px }
.ct-form .cform-head .eyebrow{ margin-bottom:12px }
.ct-form .cform-head h2{ font-size:clamp(24px,2.6vw,30px); letter-spacing:-.02em }
.ct-form .cform-head p{ margin-top:12px; color:var(--ink-3); font-size:15px }
.ct-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px }
.ct-form .field.invalid input,
.ct-form .field.invalid select,
.ct-form .field.invalid textarea{ border-color:#ff6f6f; background:#fff; box-shadow:0 0 0 3px rgba(255,111,111,.14) }
.ct-form .field .err{ display:none; color:#d83c3c; font-size:12.5px; margin-top:6px; font-weight:500 }
.ct-form .field.invalid .err{ display:block }
.ct-form .field__labelrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px }
.ct-form .field__labelrow label{ margin-bottom:0 }
.ct-form .wa-flag{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-family:var(--ff-head); font-weight:500; font-size:12.5px; color:var(--ink-3);
  transition:color .2s;
}
.ct-form .wa-flag svg{ width:15px; height:15px; color:var(--ink-4,#9aa3ad); transition:color .2s }
.ct-form .wa-flag__input{
  width:16px; height:16px; flex:none; margin:0; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none;
  accent-color:var(--green); cursor:pointer;
}
.ct-form .wa-flag:has(.wa-flag__input:checked){ color:var(--green) }
.ct-form .wa-flag:has(.wa-flag__input:checked) svg{ color:var(--green) }

.ct-form .check{
  display:flex; align-items:flex-start; gap:11px; margin:6px 0 4px;
  font-size:13.5px; color:var(--ink-2); line-height:1.5; cursor:pointer;
}
.ct-form .check input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--green); cursor:pointer }
.ct-form .check.invalid{ color:#d83c3c }
.ct-form .check a{ color:var(--blue-d); font-weight:600 }
.ct-form .cform-actions{ margin-top:20px }
.ct-form .cform-ok{
  display:none; align-items:center; gap:10px; margin-top:18px; padding:14px 16px;
  background:rgba(140,198,63,.12); border:1px solid rgba(140,198,63,.4); border-radius:12px;
  color:var(--green-d); font-family:var(--ff-head); font-weight:600; font-size:14.5px;
}
.ct-form .cform-ok svg{ width:20px; height:20px; flex:none }
.ct-form.sent .cform-ok{ display:flex }
.ct-form__privacy{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:16px; justify-content:center }
.ct-form__privacy svg{ width:14px; height:14px; flex:none }

/* columna oscura de confianza */
.ct-aside{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); padding:clamp(28px,2.8vw,40px); color:#fff;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(28,157,215,.24), transparent 55%),
    radial-gradient(70% 70% at 0% 100%, rgba(140,198,63,.18), transparent 55%), var(--ink);
  box-shadow:var(--shadow-lg);
}
.ct-aside__deco{
  position:absolute; z-index:-1; width:220px; height:220px; border-radius:50%;
  top:-90px; right:-70px; background:rgba(255,255,255,.05);
}
.ct-aside__kicker{
  font-family:var(--ff-head); font-weight:600; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:#a6d957;
}
.ct-aside h3{ color:#fff; font-size:clamp(21px,2.2vw,26px); line-height:1.22; margin:12px 0 6px; letter-spacing:-.02em }
.ct-aside__lead{ color:rgba(255,255,255,.74); font-size:15px; line-height:1.6; margin-bottom:24px }
.ct-points{ display:flex; flex-direction:column; gap:15px }
.ct-points li{ display:flex; gap:13px; align-items:flex-start }
.ct-points .pt-ic{
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(166,217,87,.16); color:#a6d957; margin-top:1px;
}
.ct-points .pt-ic svg{ width:17px; height:17px }
.ct-points b{ font-family:var(--ff-head); font-weight:600; font-size:15.5px; color:#fff; display:block; line-height:1.3 }
.ct-points span{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.45 }
.ct-aside__hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:26px 0 22px }
.ct-aside__hours{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.82); font-size:14px }
.ct-aside__hours .pt-ic{ background:rgba(255,255,255,.08); color:#7dd3e6 }
.ct-aside__hours b{ font-family:var(--ff-head); color:#fff; font-weight:600 }
.ct-aside__social-title{
  font-family:var(--ff-head); font-weight:600; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin:24px 0 14px;
}
.ct-aside__social{ display:flex; gap:11px; flex-wrap:wrap }
.ct-aside__social a{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; transition:transform .2s, background .2s;
}
.ct-aside__social a:hover{ transform:translateY(-3px); background:var(--grad) }
.ct-aside__social a svg{ width:20px; height:20px }

/* ============================================================
   4 · COBERTURA (agencia 100% digital)
   ============================================================ */
.ct-cover{ padding-block:clamp(56px,7vw,96px); background:var(--bg-soft) }
.ct-cover .wrap{ max-width:1080px }
.ct-cover__inner{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl); padding:clamp(36px,4.4vw,60px);
  text-align:center; color:#fff;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(28,157,215,.5), transparent 55%),
    radial-gradient(110% 130% at 10% 100%, rgba(140,198,63,.4), transparent 52%),
    linear-gradient(135deg, #15324a 0%, #11253a 55%, #0e1c2e 100%);
}
.ct-cover__grid-deco{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 45%, #000, transparent 82%);
  mask-image:radial-gradient(75% 70% at 50% 45%, #000, transparent 82%);
}
.ct-cover .eyebrow{ color:#a6d957; justify-content:center }
.ct-cover .eyebrow::before{ display:none }
.ct-cover h2{ color:#fff; font-size:clamp(28px,3.8vw,44px); letter-spacing:-.025em; margin-top:14px; text-wrap:balance }
.ct-cover__lead{
  color:rgba(255,255,255,.8); font-size:clamp(15.5px,1.4vw,18px); line-height:1.7;
  max-width:64ch; margin:18px auto 0;
}
.ct-cover__lead b{ color:#fff; font-weight:600 }
.ct-cities{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(28px,3.4vw,40px);
}
.ct-city{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill); padding:10px 18px; transition:background .25s, transform .2s, border-color .25s;
}
.ct-city svg{ width:15px; height:15px; color:#7dd3e6 }
.ct-city:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); border-color:rgba(125,211,230,.5) }
.ct-city--int{ background:rgba(166,217,87,.16); border-color:rgba(166,217,87,.34) }
.ct-city--int svg{ color:#a6d957 }
.ct-cover__stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(24px,4vw,60px);
  margin-top:clamp(32px,4vw,46px); padding-top:clamp(28px,3.4vw,38px);
  border-top:1px solid rgba(255,255,255,.12);
}
.ct-cover__stats div b{
  font-family:var(--ff-head); font-weight:700; font-size:clamp(28px,3.4vw,40px);
  line-height:1; display:block;
  background:linear-gradient(100deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ct-cover__stats div small{ display:block; margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.66) }

/* ============================================================
   5 · FAQ
   ============================================================ */
.ct-faq{ padding-block:clamp(56px,7vw,96px) }
.ct-faq .wrap{ max-width:860px }
.ct-faq__list{ display:flex; flex-direction:column; gap:14px; margin-top:clamp(32px,4vw,48px) }
.ct-q{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .25s, box-shadow .25s;
}
.ct-q.open{ border-color:var(--line-2); box-shadow:var(--shadow-md) }
.ct-q__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; background:none; border:0; text-align:left;
  font-family:var(--ff-head); font-weight:600; font-size:clamp(16px,1.4vw,18px); color:var(--ink);
}
.ct-q__btn .ct-q__ic{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-soft-2); color:var(--ink-2); transition:transform .3s, background .3s, color .3s;
}
.ct-q__btn .ct-q__ic svg{ width:18px; height:18px }
.ct-q.open .ct-q__btn .ct-q__ic{ background:var(--grad); color:#fff; transform:rotate(180deg) }
.ct-q__panel{ max-height:0; overflow:hidden; transition:max-height .35s ease }
.ct-q__panel p{ padding:0 24px 24px; color:var(--ink-2); font-size:15.5px; line-height:1.7 }
.ct-q__panel p b{ color:var(--ink); font-weight:600 }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .ct-cards{ grid-template-columns:repeat(2,1fr) }
  .ct-grid{ grid-template-columns:1fr; gap:30px }
  .ct-aside{ order:-1 }
}
@media (max-width:560px){
  .ct-cards{ grid-template-columns:1fr; max-width:420px; margin-inline:auto }
  .ct-form .grid-2{ grid-template-columns:1fr }
  .ct-cover__inner{ padding:30px 22px }
}