/* ============================================
   COMFORTEK — Editorial Dark Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Surfaces — near-black editorial */
  --bg-0: #07070a;
  --bg-1: #0b0b10;
  --bg-2: #101017;
  --bg-3: #16161f;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);

  /* Text */
  --text-0: #f4f4f7;
  --text-1: #b8b8c4;
  --text-2: #76768a;
  --text-3: #4a4a5a;

  /* Brand — Comfortek corporate (naranja · cian · negro) */
  --brand-orange:      #ff6a1a;   /* primary — fire/warmth */
  --brand-orange-deep: #e0531a;
  --brand-cyan:        #19c2d6;   /* secondary — tech/water */
  --brand-cyan-deep:   #0a8fa3;
  --brand-black:       #050507;

  --grad-brand:      linear-gradient(120deg, #ff6a1a 0%, #ff8a3d 50%, #19c2d6 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(255,106,26,0.18) 0%, rgba(25,194,214,0.18) 100%);
  --grad-brand-line: linear-gradient(90deg, transparent, #ff6a1a 30%, #19c2d6 70%, transparent);
  --grad-warm:       linear-gradient(135deg, #ff6a1a 0%, #ff8a3d 100%);
  --grad-accent:     linear-gradient(120deg, #ff6a1a 0%, #19c2d6 100%);

  /* Type */
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-0); color: var(--text-0); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Utility */
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; }
.serif { font-family: var(--font-serif); font-weight: 400; }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 12px rgba(255,106,26,0.7);
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; text-decoration: none; }
.btn-primary { background: var(--grad-warm); color: white; box-shadow: 0 8px 32px rgba(255,106,26,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(255,106,26,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-cyan { background: linear-gradient(135deg, #19c2d6 0%, #0a8fa3 100%); color: white; box-shadow: 0 8px 32px rgba(25,194,214,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-cyan:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(25,194,214,0.55); }

/* Ambrosio call CTA — premium solid pill, never looks like a link */
.btn-ambrosio {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 26px 18px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5a0a 0%, #ff7a3d 50%, #ff8a3d 100%);
  color: white !important;
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset,
    0 12px 36px rgba(255,90,10,0.45),
    0 4px 14px rgba(255,90,10,0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-ambrosio:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 18px 50px rgba(255,90,10,0.6),
    0 6px 18px rgba(255,90,10,0.45);
}
.btn-ambrosio:active { transform: translateY(0); }
.btn-ambrosio .pulse {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.22); display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-ambrosio .pulse::before, .btn-ambrosio .pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.8);
  animation: pulse-ring 2s cubic-bezier(0.2,0.8,0.4,1) infinite;
}
.btn-ambrosio .pulse::after { animation-delay: 1s; }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--text-0); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* Card base */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
}

/* Subtle grid background for hero */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Hairline divider with glow */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* Number counters */
.numlabel { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); letter-spacing: 0.14em; }

/* Scrollbar in artboards */
.artboard-scroll::-webkit-scrollbar { width: 8px; }
.artboard-scroll::-webkit-scrollbar-track { background: transparent; }
.artboard-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* Mobile inputs: 16px font-size para evitar zoom automático en iOS al focus */
@media (max-width: 768px) {
  .form-input,
  .cbk-input {
    font-size: 16px !important;
  }
}

/* =====================================================================
   MOBILE — alineación centrada universal (≤720px). Desktop intacto.
   ===================================================================== */
@media (max-width: 720px) {

  /* Section header (sections.jsx <Section>): eyebrow + h2 + subtitle centrados */
  .cmf-section-header { text-align: center; }
  .cmf-section-header > div > .eyebrow {
    justify-content: center;
  }
  .cmf-section-header > div > h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .cmf-section-subtitle {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 380px !important;
  }

  /* SitePageHero (interior pages): h1 + kicker centrados */
  .cmf-page-hero-inner { text-align: center; }
  .cmf-page-hero-inner > .eyebrow {
    justify-content: center;
  }
  .cmf-page-hero-inner > h1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .cmf-page-hero-kicker {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 380px !important;
  }

  /* Hero (home): eyebrow + h1 + p + CTAs + microcopy + trust strip centrados */
  .cmf-hero-content { text-align: center; }
  .cmf-hero-content > .eyebrow {
    justify-content: center;
  }
  .cmf-hero-content > h1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .cmf-hero-content > p {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 380px !important;
  }
  /* CTA row + trust strip — flex con justify-content centrado */
  .cmf-hero-content > div[style*="flex-wrap"] {
    justify-content: center !important;
  }

  /* Tecnologías StackLayer mobile: apilado, role clamp 3 lines, tags al final */
  .tech-stack-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 22px 0 !important;
    text-align: left;
  }
  .tech-stack-role {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px !important;
  }
  .tech-stack-tags {
    justify-content: flex-start !important;
    max-width: 100% !important;
  }

  /* Tecnologías ProtocolMatrix mobile: tabla → cards apiladas */
  .tech-matrix-head {
    display: none !important;
  }
  .tech-matrix-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 18px 20px !important;
  }
  .tech-matrix-proto {
    font-size: 18px !important;
    margin-bottom: 4px;
  }
  .tech-matrix-cell {
    font-size: 13.5px !important;
    line-height: 1.45;
  }
  .tech-matrix-cell::before {
    content: attr(data-label) " · ";
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--text-3);
    text-transform: uppercase;
    margin-right: 4px;
  }

  /* Proceso: phase body line-clamp 4 mobile + Promesas 2-col */
  .proc-phase-body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px !important;
  }
  .proc-promises {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .proc-promise-card {
    padding: 16px !important;
  }
  .proc-promise-card h3 { font-size: 14px !important; }
  .proc-promise-card p { font-size: 12.5px !important; line-height: 1.45 !important; }

  /* Nosotros Timeline mobile: año arriba grande, body line-clamp 3 */
  .about-timeline-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 22px 0 !important;
  }
  .about-timeline-year {
    display: flex; align-items: center; gap: 10px;
  }
  .about-timeline-year > div:first-child {
    font-size: 22px !important;
    font-weight: 600;
    margin-bottom: 0 !important;
    letter-spacing: -0.01em !important;
  }
  .about-timeline-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px !important;
  }
}