@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   SANCÓRDOBA — SISTEMA DE DISEÑO
   Todo el diseño del sitio vive acá. No usar el panel de Estilo
   de Elementor para tipografía, color ni espaciado: se pisan entre sí.
   En Elementor solo van la estructura y las clases CSS.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────
   1 · TIPOGRAFÍA DE MARCA
   ─────────────────────────────────────── */
@font-face{
  font-family:'Century Gothic';
  src:url('fonts/centurygothic-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Century Gothic';
  src:url('fonts/centurygothic-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}


/* ───────────────────────────────────────
   2 · TOKENS
   Fuente única de verdad. Cambiar acá se
   propaga a todo el sitio.
   ─────────────────────────────────────── */
:root{
  /* Color */
  --sc-naranja:   #DE6F27;
  --sc-naranja-2: #F0904A;
  --sc-gris:      #999999;
  --sc-tinta:     #0A0A0C;
  --sc-tinta-2:   #101014;
  --sc-papel:     #F2F0EC;
  --sc-linea:     rgba(255,255,255,.13);
  --sc-linea-2:   rgba(10,10,12,.15);
  --sc-texto:     #A6A6AD;
  --sc-texto-2:   #8A8A92;

  /* Lienzo */
  --sc-max:       87.5rem;                    /* 1400px */
  --sc-gutter:    clamp(1.125rem,4.4vw,4rem); /* 18px → 64px */
  --sc-rail:      3.25rem;                    /* carril del rótulo vertical */
  --sc-sec-y:     clamp(4.5rem,10vw,9rem);    /* aire vertical de sección */
  --sc-col-num:   6.875rem;                   /* columna de numeración */
  --sc-hd:        4.5rem;                     /* alto del header */

  /* Movimiento */
  --sc-ez:  cubic-bezier(.19,1,.22,1);
  --sc-ez2: cubic-bezier(.22,1,.36,1);
}


/* ───────────────────────────────────────
   3 · BASE
   ─────────────────────────────────────── */
body{
  font-family:'Century Gothic',sans-serif;
  font-size:1rem;
  line-height:1.5;
  font-weight:400;
  background:var(--sc-tinta);
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

::selection{ background:var(--sc-naranja); color:#fff }

:focus-visible{
  outline:2px solid var(--sc-naranja);
  outline-offset:4px;
}

/* El header fijo no debe tapar el inicio de sección al navegar por anclas */
[id]{ scroll-margin-top:calc(var(--sc-hd) + .5rem) }


/* ───────────────────────────────────────
   4 · LIENZO
   Toda sección lleva: sc-sec sc-bleed
   ─────────────────────────────────────── */
.sc-bleed{ padding-inline:var(--sc-gutter) }

/* Siempre padding-block, nunca el atajo `padding`:
   el atajo pisaría el margen lateral de .sc-bleed */
.sc-sec{ padding-block:var(--sc-sec-y) }

/* Contenido limitado y centrado */
.sc-wrap{
  width:100%;
  max-width:var(--sc-max);
  margin-inline:auto;
  padding-inline:var(--sc-gutter);
}

/* Neutraliza el ancho por defecto de los contenedores de Elementor
   solo donde mande nuestro lienzo */
.e-con.sc-sec > .e-con-inner,
.elementor-section.sc-sec > .elementor-container{
  max-width:100%;
  padding-inline:0;
}


/* ───────────────────────────────────────
   5 · ESCALA TIPOGRÁFICA
   Century Gothic es estática: solo 400 y 700.
   No tiene eje de ancho, por eso el scaleX.
   ─────────────────────────────────────── */
.sc-display{
  font-weight:700;
  font-size:clamp(2.3rem,4.9vw,4rem);
  line-height:.94;
  letter-spacing:-.01em;
  color:#fff;
  margin:0;
  transform:scaleX(1.02);
  transform-origin:left;
}

.sc-display-s{
  font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.5rem);
  line-height:.98;
  letter-spacing:-.01em;
  color:#fff;
  margin:0;
}

.sc-lbl{
  font-size:.625rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sc-gris);
  margin:0;
}
.sc-lbl--n{ color:var(--sc-naranja) }

.sc-txt{
  font-size:clamp(.94rem,1.15vw,1.06rem);
  line-height:1.6;
  color:var(--sc-texto);
  max-width:56ch;
  margin:0;
}
.sc-txt strong{ color:#fff; font-weight:700 }

/* Palabra destacada en naranja */
.sc-o{ color:var(--sc-naranja) }


/* ───────────────────────────────────────
   6 · ENCABEZADO DE SECCIÓN
   Numeración en el margen + título
   ─────────────────────────────────────── */
.sc-sec-hd{
  display:grid;
  grid-template-columns:var(--sc-col-num) 1fr;
  gap:0 clamp(1.25rem,4vw,3.75rem);
  align-items:start;
  margin-bottom:clamp(2.5rem,5.5vw,4.75rem);
}
.sc-sec-hd .sc-lbl{ padding-top:.625rem }
.sc-sec-hd h2{ margin-bottom:1.25rem }


/* ───────────────────────────────────────
   7 · ANIMACIONES DE ENTRADA
   El JS solo agrega .is-on al entrar en
   pantalla. El movimiento lo hace el CSS.
   ─────────────────────────────────────── */

/* Revelado línea a línea */
.sc-ln{ display:block; overflow:hidden }
.sc-ln > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--sc-ez2);
}
.sc-rv.is-on .sc-ln > span{ transform:none }
.sc-rv.is-on .sc-ln:nth-child(2) > span{ transition-delay:.08s }
.sc-rv.is-on .sc-ln:nth-child(3) > span{ transition-delay:.16s }
.sc-rv.is-on .sc-ln:nth-child(4) > span{ transition-delay:.24s }

/* Entrada simple */
.sc-up{
  opacity:0;
  transform:translate3d(0,1rem,0);
  transition:opacity .9s var(--sc-ez2), transform .9s var(--sc-ez2);
}
.sc-up.is-on{ opacity:1; transform:none }
.sc-up--1{ transition-delay:.07s }
.sc-up--2{ transition-delay:.14s }
.sc-up--3{ transition-delay:.21s }


/* ───────────────────────────────────────
   8 · MOVIMIENTO REDUCIDO
   ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sc-up,.sc-rv{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .sc-ln > span{
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
}


/* ───────────────────────────────────────
   9 · RESPONSIVE BASE
   ─────────────────────────────────────── */
@media (max-width:767px){
  .sc-sec-hd{ grid-template-columns:1fr; gap:.875rem }
  .sc-sec-hd .sc-lbl{ padding-top:0 }
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENTES
   A partir de acá, cada sección del sitio.
   Se agregan a medida que se construyen.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────
   PRUEBA — para validar el método.
   Se elimina cuando esté confirmado.
   ─────────────────────────────────────── */
.sc-prueba{
  background:var(--sc-tinta-2);
  border:1px solid var(--sc-linea);
  padding:clamp(2rem,5vw,3.5rem);
  text-align:center;
}
.sc-prueba__ok{
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sc-naranja);
  margin-bottom:1.25rem;
}
.sc-prueba__ok::before{
  content:'';
  width:.5rem; height:.5rem;
  background:var(--sc-naranja);
  transform:rotate(45deg);
}