/*
  KÖNNEN Supply Chain Solutions — sitio web
  Concepto, diseño y desarrollo: Rodolfo Zavala · 2026
  Créditos completos: /humans.txt
*/
/* ===== Contacto — dedicated contact page =====
   Shares :root tokens, reset, header/nav, mobile menu, footer, buttons and
   the .quote-form component (already dark-styled) with styles.css. Only
   the page-specific blocks below (hero, quick links, info+form section)
   live here. */

/* ---- HERO — same dark/grain/orange-glow recipe as .ind-hero/.nos-hero ---- */
.ctc-hero{
  position:relative; background:var(--black); color:#fff;
  padding:170px 0 80px; overflow:hidden;
}
.ctc-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    var(--grain),
    radial-gradient(ellipse 900px 600px at 15% 10%, rgba(232,119,34,.16), transparent 60%),
    linear-gradient(150deg, #141416 0%, #08080a 60%, #101012 100%);
}
/* soft orange spotlight that trails the cursor — same blurred-glow
   language as the static radial glow above, just made to actually chase
   the pointer (JS lerps it toward the live mouse position every frame,
   see contacto.js) instead of sitting fixed */
.ctc-hero-glow{
  position:absolute; top:0; left:0; z-index:0;
  width:700px; height:700px; margin:-350px 0 0 -350px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,119,34,.4), transparent 70%);
  filter:blur(110px);
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.ctc-hero.is-glowing .ctc-hero-glow{opacity:1;}
@media (max-width:900px), (hover:none){
  .ctc-hero-glow{display:none;}
}
.ctc-hero .wrap{position:relative; z-index:1;}
/* the icon column's own containing block — position:relative here (not
   flex) is what lets .ctc-hero-social sit at position:absolute below,
   so its height is never counted toward this row's height at all. That's
   the actual fix for the hero stretching to fit 5 stacked icons: taking
   the column out of normal flow entirely, not just shrinking it. */
.ctc-hero-wrap{position:relative;}
.ctc-hero-copy{max-width:640px;}
.ctc-hero-copy .eyebrow{color:var(--orange);}
.ctc-hero-copy h1{color:#fff; font-size:clamp(36px,5.2vw,64px); margin-bottom:20px;}
.ctc-hero-copy h1 .accent{color:var(--orange);}
.ctc-hero-copy p{color:var(--silver-2); font-size:16px; line-height:1.7; max-width:520px;}

/* right-side icon row — horizontal, vertically centered on the hero,
   floating independently of the copy's own height (position:absolute is
   what keeps it from stretching the hero — see .ctc-hero-wrap above) */
.ctc-hero-social{position:absolute; top:50%; right:0; transform:translateY(-50%);}
.ctc-hero-social .ctc-social-label{text-align:right; margin-bottom:12px;}
.ctc-hero-social .ctc-social-row{flex-direction:row; gap:14px;}
/* squares here instead of the circles used elsewhere in the page */
.ctc-hero-social .ctc-social-icon{
  width:52px; height:52px; border-radius:8px;
  background:rgba(255,255,255,.06); color:var(--silver-1);
  border:1px solid rgba(255,255,255,.14); box-shadow:none;
}
.ctc-hero-social .ctc-social-icon svg{width:22px; height:22px;}
.ctc-hero-social .ctc-social-icon:hover{
  background:var(--orange); color:#fff; border-color:var(--orange);
  box-shadow:0 6px 16px rgba(232,119,34,.35);
}
@media (max-width:1100px){
  /* a horizontal row this wide (5 × 52px + gaps) no longer clears the
     copy's own max-width at this viewport range — drop back into normal
     flow, below the text, instead of risking an overlap */
  .ctc-hero-social{
    position:static; transform:none; margin-top:32px;
  }
  .ctc-hero-social .ctc-social-row{flex-wrap:wrap;}
}

/* ---- QUICK LINKS — three equal cards, light section ---- */
.ctc-quick{background:var(--white); padding:56px 0;}
.ctc-quick-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.ctc-quick-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:26px 24px 28px; border:1px solid var(--line); border-radius:10px;
  background:var(--off-white);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ctc-quick-card:hover{
  border-color:var(--orange); transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.ctc-quick-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-dim); color:var(--orange);
}
.ctc-quick-icon svg{width:20px; height:20px;}
.ctc-quick-card h4{font-size:16px; color:var(--ink); text-transform:none; letter-spacing:0; font-weight:700;}
.ctc-quick-card p{font-size:13.5px; line-height:1.55; color:var(--silver-3); margin:0;}
.ctc-quick-arrow{
  position:absolute; right:22px; top:26px;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--silver-3);
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, color .25s ease, background .25s ease;
}
.ctc-quick-card:hover .ctc-quick-arrow{
  transform:translateX(3px); border-color:var(--orange); background:var(--orange); color:#fff;
}

/* ---- MAIN: info + form, dark register so the shared .quote-form
   (styled for a dark surface elsewhere on the site) reads correctly
   here without needing its own light-mode variant ---- */
.ctc-main{
  position:relative; color:#fff; padding:100px 0 120px; overflow:hidden;
  background:
    var(--grain),
    radial-gradient(ellipse 800px 500px at 85% 0%, rgba(232,119,34,.1), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, #17171a 100%);
}
.ctc-main .wrap{position:relative; z-index:1;}
.ctc-main-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start;}
.ctc-info .eyebrow{color:var(--orange);}
.ctc-info h2{color:#fff; font-size:clamp(26px,3vw,36px); margin-bottom:28px;}

.ctc-info-list{display:flex; flex-direction:column; gap:4px; margin-bottom:30px;}
.ctc-info-item{
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.1);
  transition:padding-left .25s ease;
}
a.ctc-info-item:hover{padding-left:8px;}
.ctc-info-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(232,119,34,.12); color:var(--orange);
}
.ctc-info-icon svg{width:17px; height:17px;}
/* flex:1 + min-width:0 so this column actually uses the row's remaining
   width (instead of just sizing to its own content) and can shrink below
   its content width when needed; overflow-wrap on the text itself is the
   fallback for the one genuinely unbreakable string here (the email
   address) so a very narrow viewport wraps it instead of letting it push
   past the row and get clipped by .ctc-main's overflow:hidden. */
.ctc-info-text{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.ctc-info-text b{font-family:var(--ff-body); font-weight:600; font-size:15px; color:#fff; overflow-wrap:break-word;}
a.ctc-info-item:hover .ctc-info-text b{color:var(--orange);}
.ctc-info-text em{font-style:normal; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.03em; color:var(--silver-2); overflow-wrap:break-word;}

/* social — icons only for now; hrefs are "#" placeholders until real
   profile links come in (see the HTML comment above this block) */
.ctc-social{margin-top:30px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1);}
.ctc-social-label{
  display:block; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--silver-2); margin-bottom:18px;
}
.ctc-social-row{display:flex; gap:16px;}
/* solid white circle + dark glyph — the previous outline-on-dark version
   (thin stroke icons on a near-transparent circle) had almost no contrast
   against this section's own dark background */
.ctc-social-icon{
  position:relative;
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink); border:none;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ctc-social-icon svg{width:25px; height:25px;}
.ctc-social-icon:hover{
  background:var(--orange); color:#fff;
  transform:translateY(-2px); box-shadow:0 6px 16px rgba(232,119,34,.4);
}
/* floating name tooltip — reads the button's own aria-label, so every
   social icon on the page (hero row and this one) gets it for free with
   no extra markup per icon */
.ctc-social-icon::after{
  content:attr(aria-label);
  position:absolute; bottom:calc(100% + 12px); left:50%;
  transform:translate(-50%, 4px);
  background:var(--ink); color:#fff;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.04em; white-space:nowrap;
  padding:6px 11px; border-radius:5px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ctc-social-icon::before{
  content:''; position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translate(-50%, 4px);
  border:5px solid transparent; border-top-color:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ctc-social-icon:hover::after, .ctc-social-icon:focus-visible::after,
.ctc-social-icon:hover::before, .ctc-social-icon:focus-visible::before{
  opacity:1; transform:translate(-50%, 0);
}

/* form column — reuses .quote-form/.qf-field/.qf-status as-is (already
   dark-styled in styles.css); only its own extra heading needs styling */
.ctc-form{margin:0; max-width:none;}
.ctc-form .eyebrow{color:var(--orange);}
.ctc-form h3{color:#fff; font-size:clamp(20px,2.2vw,26px); margin-bottom:24px;}

@media (max-width:900px){
  .ctc-quick-grid{grid-template-columns:1fr; gap:14px;}
  .ctc-quick-arrow{display:none;}
  .ctc-main-grid{grid-template-columns:1fr; gap:52px;}
}
@media (max-width:600px){
  .ctc-hero{padding:140px 0 60px;}
  .ctc-main{padding:70px 0 90px;}
  .ctc-form{padding:26px;}
}