/*
Theme Name: ITServicios
Theme URI: https://www.itservicios.cl/
Author: ITServicios SpA
Description: Tema a medida para ITServicios SpA — landing de gran formato (HP DesignJet T850) con vista despiezada controlada por scroll, secciones de características, servicios y confianza. Todos los textos se editan desde Apariencia › Personalizar o en inc/content.php.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Uso privado del cliente
Text Domain: itservicios
*/

/* ==========================================================================
   1. Tokens de marca — cambie aquí los colores y tipografías del sitio
   ========================================================================== */
:root {
  --it-teal: #0d6e62;
  --it-teal-dark: #084a42;
  --it-teal-light: #5fd0c1;
  --it-ink: #1b1f1e;
  --it-ink-soft: rgba(27, 31, 30, 0.68);
  --it-bg: #f6f7f7;
  --it-bg-alt: #eceeee;
  --it-dark: #141817;
  --it-radius: 18px;
  --it-max: 1240px;
  --it-pad: clamp(18px, 4vw, 48px);
  --it-section: clamp(60px, 9vw, 116px);
  --it-font-title: "Questrial", "Century Gothic", "URW Gothic", system-ui, sans-serif;
  --it-font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --it-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--it-bg);
  color: var(--it-ink);
  font-family: var(--it-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3 { margin: 0; font-family: var(--it-font-title); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
p, ul, ol, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--it-teal); text-underline-offset: 3px; transition: color .16s ease-out; }
a:hover { color: var(--it-teal-dark); }
:focus-visible { outline: 2px solid var(--it-teal); outline-offset: 3px; }
.it-wrap { max-width: var(--it-max); margin: 0 auto; padding: 0 var(--it-pad); }
.it-kicker { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--it-teal); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; background: #fff; padding: 10px 16px; }

/* ==========================================================================
   3. Header
   ========================================================================== */
.it-header {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: rgba(246, 247, 247, .8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(27, 31, 30, .07);
}
.it-header__inner {
  max-width: var(--it-max); margin: 0 auto; padding: 13px var(--it-pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
}
.it-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--it-ink); }
.it-brand__mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--it-teal); color: #fff;
  display: grid; place-items: center; font-family: var(--it-font-title); font-size: 15px;
}
.it-brand__word { font-family: var(--it-font-title); font-size: 16px; letter-spacing: .2em; }
.it-nav { display: flex; align-items: center; gap: 6px clamp(14px, 2vw, 26px); margin-left: auto; }
.it-nav a { font-size: 14px; font-weight: 500; color: rgba(27, 31, 30, .68); text-decoration: none; }
.it-nav a:hover { color: var(--it-teal); }

/* Botones */
.it-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; text-decoration: none; padding: 16px 26px; border-radius: 999px;
  transition: background .18s var(--it-ease), transform .18s var(--it-ease), box-shadow .18s var(--it-ease);
}
.it-btn--teal { background: var(--it-teal); color: #fff; box-shadow: 0 1px 2px rgba(13, 110, 98, .25); }
.it-btn--teal:hover { background: var(--it-teal-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(13, 110, 98, .6); }
.it-btn--teal:active { transform: translateY(0) scale(.975); }
.it-btn--white { background: #fff; color: var(--it-teal); }
.it-btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5); color: var(--it-teal); }
.it-btn--white:active { transform: translateY(0) scale(.98); }
.it-btn--ghost { border: 2px solid rgba(255, 255, 255, .55); color: #fff; padding: 14px 26px; }
.it-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.it-btn--ghost:active { transform: scale(.98); }
.it-btn--sm { padding: 10px 18px; font-size: 14px; font-weight: 600; }
.it-link {
  align-self: start; font-size: 14px; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--it-teal); padding-bottom: 3px;
  transition: color .16s ease-out, border-color .16s ease-out;
}
.it-link:hover { border-color: var(--it-teal-dark); }

/* ==========================================================================
   4. Hero — vista despiezada
   ========================================================================== */
.it-hero {
  position: relative;
  height: 440vh; /* recorrido del scroll que controla el despieze */
  background: radial-gradient(1100px 620px at 50% 26%, #fff 0%, #f1f3f3 52%, #e8ebeb 100%);
}
.it-hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.it-hero__copy {
  position: absolute; inset: 0 0 auto; z-index: 3;
  padding: clamp(72px, 10vh, 112px) var(--it-pad) 0;
  text-align: center; pointer-events: none;
}
.it-hero__title { margin-top: 14px; font-size: clamp(28px, 4.4vw, 58px); max-width: 20ch; margin-inline: auto; }
.it-hero__sub { margin-top: 14px; max-width: 46ch; margin-inline: auto; font-size: clamp(14px, 1.2vw, 17px); color: rgba(27, 31, 30, .6); }
.it-stagewrap { position: absolute; left: 0; right: 0; top: clamp(228px, 31vh, 300px); bottom: clamp(62px, 9vh, 96px); }
.it-stage {
  position: absolute; left: 50%; top: 50%; width: 800px; height: 800px;
  margin: -400px 0 0 -400px; transform-origin: center center; will-change: transform;
}
.it-stage__floor {
  position: absolute; left: 50%; top: 50%; margin: 290px 0 0 -230px; width: 460px; height: 54px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 31, 30, .22), rgba(27, 31, 30, 0));
}
.it-part { position: absolute; left: 0; top: 0; width: 800px; height: 800px; will-change: transform, filter; }
.it-labels { position: absolute; inset: 0; pointer-events: none; }
.it-label { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform, opacity; }
.it-label__row { display: flex; align-items: center; gap: 12px; }
.it-label--left .it-label__row { justify-content: flex-end; }
.it-label--left .it-label__text { text-align: right; }
.it-label__line { width: clamp(20px, 3vw, 52px); height: 1px; background: rgba(13, 110, 98, .5); flex: none; }
.it-label__text {
  background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px -12px rgba(27, 31, 30, .4);
  padding: 9px 14px; max-width: 210px; font-size: 13px; font-weight: 600; line-height: 1.35;
}
.it-hero__foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 0 var(--it-pad) clamp(22px, 4vh, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.it-progress { width: min(420px, 66vw); height: 2px; background: rgba(27, 31, 30, .1); overflow: hidden; }
.it-progress__fill { height: 100%; background: var(--it-teal); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.it-hint { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 31, 30, .42); animation: it-hint 2.4s ease-in-out infinite; }
@keyframes it-hint { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: .95 } }

/* ==========================================================================
   5. Características
   ========================================================================== */
.it-specs { background: var(--it-dark); color: var(--it-bg); }
.it-specs .it-kicker { color: var(--it-teal-light); }
.it-specs__head { margin-top: 18px; display: grid; gap: clamp(20px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: end; }
.it-specs__title { font-size: clamp(28px, 4vw, 52px); max-width: 20ch; }
.it-specs__lead { max-width: 46ch; font-size: 17px; line-height: 1.65; color: rgba(246, 247, 247, .62); }
.it-specs__grid { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* La regla la dibuja cada celda, no el contenedor: así una fila incompleta no
   deja bloques del color del fondo a la vista. */
.it-spec { background: var(--it-dark); box-shadow: 0 0 0 1px rgba(246, 247, 247, .14); padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 10px; align-content: start; }
.it-spec dt { font-family: var(--it-font-title); font-size: clamp(26px, 2.6vw, 34px); color: var(--it-teal-light); }
.it-spec dd { font-size: 15px; line-height: 1.6; color: rgba(246, 247, 247, .66); }
.it-specs__note { margin-top: 24px; font-size: 13px; color: rgba(246, 247, 247, .42); }

/* ==========================================================================
   6. Servicios
   ========================================================================== */
.it-plans__title { margin-top: 18px; font-size: clamp(28px, 4vw, 52px); max-width: 20ch; }
.it-plans__grid { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.it-plan {
  background: #fff; border-radius: var(--it-radius); padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 2px rgba(27, 31, 30, .06), 0 18px 40px -30px rgba(27, 31, 30, .35);
  transition: transform .2s var(--it-ease), box-shadow .2s var(--it-ease);
}
.it-plan:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(27, 31, 30, .06), 0 26px 50px -30px rgba(27, 31, 30, .45); }
.it-plan__tag { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--it-teal); }
.it-plan h3 { font-size: 24px; }
.it-plan p { font-size: 15px; line-height: 1.65; color: var(--it-ink-soft); }
.it-plan ul { display: grid; gap: 8px; font-size: 14px; color: rgba(27, 31, 30, .6); }
.it-plan .it-link, .it-plan .it-btn { margin-top: auto; }
.it-plan--featured { background: var(--it-teal); color: #fff; box-shadow: 0 1px 2px rgba(13, 110, 98, .2), 0 20px 44px -28px rgba(13, 110, 98, .6); }
.it-plan--featured:hover { box-shadow: 0 1px 2px rgba(13, 110, 98, .2), 0 30px 56px -28px rgba(13, 110, 98, .7); }
.it-plan--featured .it-plan__tag { color: rgba(255, 255, 255, .72); }
.it-plan--featured p { color: rgba(255, 255, 255, .82); }
.it-plan--featured ul { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   7. Confianza
   ========================================================================== */
.it-trust { background: var(--it-bg-alt); }
.it-trust__inner { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.it-trust__title { margin-top: 18px; font-size: clamp(28px, 4vw, 50px); max-width: 19ch; }
.it-trust__lead { margin-top: 20px; max-width: 50ch; font-size: 17px; line-height: 1.7; color: var(--it-ink-soft); }
.it-trust__stats { margin-top: clamp(28px, 4vw, 40px); display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.it-trust__num { font-family: var(--it-font-title); font-size: 34px; color: var(--it-teal); }
.it-trust__note { margin-top: 6px; font-size: 14px; color: rgba(27, 31, 30, .62); }
.it-trust figure { margin: 0; }
.it-trust img { border-radius: var(--it-radius); box-shadow: 0 24px 60px -34px rgba(27, 31, 30, .6); filter: grayscale(1) contrast(1.05); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.it-trust figcaption { margin-top: 12px; font-size: 13px; color: rgba(27, 31, 30, .5); }

/* ==========================================================================
   8. CTA + Footer
   ========================================================================== */
.it-cta { background: var(--it-teal); color: #fff; }
.it-cta__inner { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; padding-block: clamp(56px, 8vw, 104px); }
.it-cta h2 { font-size: clamp(28px, 4vw, 50px); max-width: 18ch; }
.it-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.it-footer { background: var(--it-dark); color: var(--it-bg); }
.it-footer__inner { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-top: clamp(48px, 7vw, 88px); padding-bottom: 32px; }
.it-footer h2 { font-family: var(--it-font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 247, 247, .45); margin-bottom: 14px; }
.it-footer p, .it-footer address { font-size: 15px; line-height: 1.65; color: rgba(246, 247, 247, .58); font-style: normal; }
.it-footer a { color: var(--it-bg); text-decoration: none; }
.it-footer a:hover { color: var(--it-teal-light); }
.it-footer__list { display: grid; gap: 8px; font-size: 15px; }
.it-footer__mark { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--it-teal); display: grid; place-items: center; font-family: var(--it-font-title); font-size: 15px; }
.it-footer__bottom { border-top: 1px solid rgba(246, 247, 247, .12); }
.it-footer__bottom .it-wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 18px; font-size: 13px; color: rgba(246, 247, 247, .4); }
.it-section { padding-block: var(--it-section); }

/* Contenido de páginas internas (WordPress) */
.it-page { padding-block: clamp(120px, 18vh, 200px) var(--it-section); }
.it-page h1 { font-size: clamp(30px, 4.4vw, 56px); max-width: 22ch; }
.it-page__content { margin-top: 28px; max-width: 68ch; }
.it-page__content > * + * { margin-top: 18px; }

/* ==========================================================================
   9. Accesibilidad — sin movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   10. Móvil
   ========================================================================== */
@media (max-width: 720px) {
  .it-hero { height: 380vh; }
  .it-label__text { max-width: 150px; font-size: 12px; padding: 8px 10px; }
  .it-nav { width: 100%; justify-content: space-between; }
  .it-nav a { font-size: 13px; }
}