/* ═══════════════════════════════════════════════════════════
   SHC Digital — styles.css
   Hoja de estilos principal
   Estructura:
     1. Reset & Variables
     2. Base
     3. Nav
     4. Hero
     5. Secciones (labels, títulos)
     6. Proceso
     7. Servicios
     8. Precios
     9. Testimonios
    10. Contacto / CTA
    11. Footer
    12. Utilidades
    13. Responsive
═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. RESET & VARIABLES
───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:       #f2ede6;
  --white:    #faf8f4;
  --ink:      #0f0e0c;
  --ink2:     #1e1c18;
  --mid:      #7a7268;
  --line:     #d8d2c8;
  --red:      #e8321a;
  --red-dark: #c82a14;
  --mono:     'Space Mono', monospace;
  --display:  'Bebas Neue', sans-serif;
  --body:     'Barlow', sans-serif;
}


/* ─────────────────────────────────────────────
   2. BASE
───────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background:   var(--bg);
  color:        var(--ink);
  font-family:  var(--body);
  overflow-x:   hidden;
}


/* ─────────────────────────────────────────────
   3. NAV
───────────────────────────────────────────── */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 0 0 3rem;
  background:      var(--ink);
  height:          56px;
}

.nav-logo {
  display:         flex;
  align-items:     center;
  gap:             0.6rem;
  text-decoration: none;
}

.nav-logo img {
  height: 28px;
  filter: brightness(0) invert(1);
}

.logo-type {
  font-family:    var(--display);
  font-size:      1.5rem;
  color:          var(--white);
  letter-spacing: 0.08em;
}

.logo-type span { color: var(--red); }

.nav-links {
  display:     flex;
  align-items: stretch;
  height:      100%;
  list-style:  none;
}

.nav-links li { display: flex; }

.nav-links a {
  display:        flex;
  align-items:    center;
  padding:        0 1.5rem;
  font-family:    var(--mono);
  font-size:      0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #666;
  text-decoration: none;
  border-left:    1px solid #222;
  transition:     color 0.2s, background 0.2s;
}

.nav-links a:hover         { color: var(--white); background: #1a1a1a; }
.nav-links a.nav-cta       { background: var(--red); color: var(--white); border-left: none; font-weight: 700; padding: 0 2rem; }
.nav-links a.nav-cta:hover { background: var(--red-dark); }


/* ─────────────────────────────────────────────
   4. HERO
───────────────────────────────────────────── */
.hero {
  min-height:   100vh;
  padding-top:  56px;
  display:      grid;
  grid-template-rows: 1fr auto;
  position:     relative;
  overflow:     hidden;
}

.hero-main {
  display:               grid;
  grid-template-columns: 5fr 3fr;
  min-height:            calc(100vh - 56px - 44px);
}

/* Texto izquierdo */
.hero-text-block {
  padding:         5rem 3rem 3rem;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  border-right:    1px solid var(--line);
  position:        relative;
}

.hero-tag {
  font-family:    var(--mono);
  font-size:      0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  2rem;
  animation:      drop 0.6s ease both;
}

.hero-h1 {
  font-family:    var(--display);
  font-size:      clamp(5rem, 11vw, 10rem);
  line-height:    0.88;
  letter-spacing: 0.02em;
  color:          var(--ink);
  margin-bottom:  0.5rem;
  animation:      drop 0.6s 0.05s ease both;
}

.hero-h1 .outline {
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
}

.hero-h1 .red { color: var(--red); }

.hero-sub-line {
  font-family:    var(--display);
  font-size:      clamp(1.8rem, 3.5vw, 3rem);
  letter-spacing: 0.05em;
  color:          var(--mid);
  margin-bottom:  3rem;
  animation:      drop 0.6s 0.1s ease both;
}

.hero-desc {
  font-size:     1rem;
  color:         var(--mid);
  line-height:   1.7;
  max-width:     460px;
  margin-bottom: 3rem;
  font-weight:   300;
  animation:     drop 0.6s 0.15s ease both;
}

.hero-desc strong { color: var(--ink); font-weight: 600; }

.hero-btns {
  display:   flex;
  gap:       0;
  animation: drop 0.6s 0.2s ease both;
}

/* Botones globales */
.btn-fill {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  background:      var(--red);
  color:           var(--white);
  font-family:     var(--mono);
  font-size:       0.72rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         1rem 2rem;
  text-decoration: none;
  transition:      background 0.2s, transform 0.2s;
}

.btn-fill:hover { background: var(--red-dark); transform: translateY(-2px); }

.btn-outline {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  background:      transparent;
  color:           var(--ink);
  font-family:     var(--mono);
  font-size:       0.72rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         1rem 2rem;
  text-decoration: none;
  border:          1px solid var(--ink);
  border-left:     none;
  transition:      background 0.2s, color 0.2s;
}

.btn-outline:hover { background: var(--ink); color: var(--white); }

/* Panel lateral de stats */
.hero-side {
  display:        flex;
  flex-direction: column;
  background:     var(--ink);
  animation:      drop 0.8s 0.25s ease both;
}

.side-stat {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         2rem 2.5rem;
  border-bottom:   1px solid #222;
  position:        relative;
  overflow:        hidden;
}

.side-stat::before {
  content:          '';
  position:         absolute;
  left: 0; top: 0; bottom: 0;
  width:            3px;
  background:       var(--red);
  transform:        scaleY(0);
  transform-origin: bottom;
  transition:       transform 0.4s ease;
}

.side-stat:hover::before { transform: scaleY(1); }

.side-stat--sm { flex: 0.5; }

.side-num {
  font-family:    var(--display);
  font-size:      3.5rem;
  color:          var(--white);
  line-height:    1;
  letter-spacing: 0.04em;
}

.side-num .unit     { font-size: 1.5rem; color: var(--red); }
.side-num--muted    { font-size: 2rem; color: #555; }

.side-label {
  font-family:    var(--mono);
  font-size:      0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #555;
  margin-top:     0.4rem;
}

.side-desc {
  font-size:   0.78rem;
  color:       #444;
  margin-top:  0.3rem;
  font-weight: 300;
}

/* Ticker */
.hero-ticker {
  background: var(--red);
  overflow:   hidden;
  height:     44px;
  display:    flex;
  align-items: center;
}

.ticker-track {
  display:   flex;
  gap:       0;
  width:     max-content;
  animation: ticker 22s linear infinite;
}

.ticker-item {
  display:        flex;
  align-items:    center;
  gap:            2rem;
  padding:        0 2rem;
  font-family:    var(--mono);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.9);
  white-space:    nowrap;
}

.ticker-sep {
  width:         4px;
  height:        4px;
  background:    rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  flex-shrink:   0;
}


/* ─────────────────────────────────────────────
   5. SECCIONES — labels y títulos compartidos
───────────────────────────────────────────── */
section { padding: 6rem 3rem; }

/* Contenedor centrado — limita el ancho en pantallas grandes */
.container {
  max-width:    1140px;
  margin-left:  auto;
  margin-right: auto;
  width:        100%;
}

.mono-label {
  font-family:    var(--mono);
  font-size:      0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  1.5rem;
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
}

.mono-label::before {
  content:  '';
  display:  inline-block;
  width:    20px;
  height:   1px;
  background: var(--red);
}

.big-title {
  font-family:    var(--display);
  font-size:      clamp(3rem, 6vw, 5.5rem);
  line-height:    0.9;
  letter-spacing: 0.03em;
  color:          var(--ink);
}

.big-title .ghost {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}


/* ─────────────────────────────────────────────
   6. PROCESO
───────────────────────────────────────────── */
#proceso {
  background:    var(--white);
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proc-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  border:                1px solid var(--line);
  margin-top:            4rem;
}

.proc-step {
  padding:      3rem 2rem;
  border-right: 1px solid var(--line);
  position:     relative;
  opacity:      0;
  transform:    translateY(20px);
  transition:   opacity 0.5s ease, transform 0.5s ease;
}

.proc-step:last-child { border-right: none; }
.proc-step.visible    { opacity: 1; transform: translateY(0); }

.proc-step::after {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     3px;
  background: var(--line);
  transition: background 0.3s;
}

.proc-step:hover::after { background: var(--red); }

.proc-n {
  font-family:    var(--display);
  font-size:      4rem;
  color:          var(--line);
  line-height:    1;
  margin-bottom:  1.5rem;
  letter-spacing: 0.04em;
}

.proc-chip {
  display:        inline-block;
  background:     var(--red);
  color:          white;
  font-family:    var(--mono);
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.2rem 0.6rem;
  margin-bottom:  0.75rem;
}

.proc-title {
  font-family:    var(--display);
  font-size:      1.4rem;
  letter-spacing: 0.04em;
  color:          var(--ink);
  margin-bottom:  0.75rem;
  margin-top:     0.5rem;
}

.proc-desc {
  font-size:   0.875rem;
  color:       var(--mid);
  line-height: 1.7;
  font-weight: 300;
}


/* ─────────────────────────────────────────────
   7. SERVICIOS
───────────────────────────────────────────── */
#servicios { position: relative; }

.serv-layout {
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   5rem;
  align-items:           start;
  margin-top:            4rem;
}

.serv-sticky {
  position: sticky;
  top:      80px;
}

.serv-sticky .big-title { margin-bottom: 1.5rem; }

.serv-sticky p {
  font-size:     0.9rem;
  color:         var(--mid);
  line-height:   1.7;
  margin-bottom: 2rem;
  font-weight:   300;
}

.serv-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--line);
  border:                1px solid var(--line);
}

.serv-card {
  background: var(--bg);
  padding:    2.5rem 2rem;
  opacity:    0;
  transform:  scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s;
}

.serv-card.visible  { opacity: 1; transform: scale(1); }
.serv-card:hover    { background: var(--white); }

.serv-icon {
  font-family:    var(--mono);
  font-size:      0.65rem;
  letter-spacing: 0.1em;
  color:          var(--red);
  margin-bottom:  1.25rem;
  text-transform: uppercase;
}

.serv-title {
  font-family:    var(--display);
  font-size:      1.4rem;
  letter-spacing: 0.04em;
  color:          var(--ink);
  margin-bottom:  0.75rem;
}

.serv-desc {
  font-size:   0.875rem;
  color:       var(--mid);
  line-height: 1.7;
  font-weight: 300;
}


/* ─────────────────────────────────────────────
   8. PRECIOS
───────────────────────────────────────────── */
#precios {
  background: var(--ink);
  color:      var(--white);
}

#precios .mono-label        { color: var(--red); }
#precios .mono-label::before { background: var(--red); }
#precios .big-title         { color: var(--white); }
#precios .big-title .ghost  { -webkit-text-stroke-color: #444; }

.price-layout {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            #222;
  border:                1px solid #222;
  margin-top:            4rem;
}

.p-card {
  background:     #141310;
  padding:        3rem 2.5rem;
  position:       relative;
  display:        flex;
  flex-direction: column;
  opacity:        0;
  transform:      translateY(24px);
  transition:     opacity 0.5s ease, transform 0.5s ease;
}

.p-card.visible { opacity: 1; transform: translateY(0); }
.p-card.hot     { background: var(--red); }

.p-tag {
  font-family:    var(--mono);
  font-size:      0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          #555;
  margin-bottom:  2rem;
}

.p-card.hot .p-tag { color: rgba(255, 255, 255, 0.55); }

.p-items {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            0.8rem;
  margin-bottom:  auto;
}

.p-items li {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  font-size:   0.85rem;
  color:       #777;
  font-weight: 300;
}

.p-card.hot .p-items li          { color: rgba(255, 255, 255, 0.75); }
.p-items li.no                    { color: #333; text-decoration: line-through; }
.p-card.hot .p-items li.no        { color: rgba(255, 255, 255, 0.2); }

.p-items li::before {
  content:     '›';
  color:       var(--red);
  font-weight: 700;
  flex-shrink: 0;
  font-size:   1rem;
  line-height: 1.2;
}

.p-card.hot .p-items li::before { color: rgba(255, 255, 255, 0.5); }
.p-items li.no::before           { color: #333; }
.p-card.hot .p-items li.no::before { color: rgba(255, 255, 255, 0.2); }

.p-cta { margin-top: 2.5rem; }

.p-btn {
  display:         block;
  text-align:      center;
  padding:         0.9rem;
  font-family:     var(--mono);
  font-size:       0.65rem;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1px solid #333;
  color:           #666;
  transition:      all 0.2s;
}

.p-btn:hover { border-color: var(--red); color: var(--red); }

.p-btn-hot {
  display:         block;
  text-align:      center;
  padding:         0.9rem;
  font-family:     var(--mono);
  font-size:       0.65rem;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  background:      var(--white);
  color:           var(--red);
  transition:      opacity 0.2s;
}

.p-btn-hot:hover { opacity: 0.9; }


/* ─────────────────────────────────────────────
   9. TESTIMONIOS
───────────────────────────────────────────── */
#testimonios {
  background:    var(--white);
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.testi-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   0;
  border:                1px solid var(--line);
  margin-top:            4rem;
}

.t-card {
  padding:      3rem 2.5rem;
  border-right: 1px solid var(--line);
  opacity:      0;
  transform:    translateY(16px);
  transition:   opacity 0.5s ease, transform 0.5s ease;
}

.t-card:last-child { border-right: none; }
.t-card.visible    { opacity: 1; transform: translateY(0); }

.t-mark {
  font-family:   var(--display);
  font-size:     5rem;
  color:         var(--red);
  line-height:   0.7;
  margin-bottom: 1.5rem;
}

.t-text {
  font-size:     0.95rem;
  color:         var(--ink2);
  line-height:   1.75;
  margin-bottom: 2rem;
  font-weight:   300;
}

.t-rule {
  width:         30px;
  height:        2px;
  background:    var(--red);
  margin-bottom: 1rem;
}

.t-name {
  font-family:    var(--mono);
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink);
}

.t-role {
  font-size:  0.78rem;
  color:      var(--mid);
  margin-top: 0.2rem;
}


/* ─────────────────────────────────────────────
   10. CONTACTO / CTA
───────────────────────────────────────────── */
#contacto { background: var(--bg); }

.cta-wrapper {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  border:                1px solid var(--line);
  margin-top:            2rem;
}

.cta-left-block {
  padding:      4rem 3rem;
  border-right: 1px solid var(--line);
}

.cta-left-block .big-title { margin: 1.5rem 0; }

.cta-intro {
  font-size:     0.95rem;
  color:         var(--mid);
  line-height:   1.7;
  margin-bottom: 2.5rem;
  font-weight:   300;
}

/* Honeypot — completamente oculto para humanos */
.hp-field {
  position:   absolute;
  left:       -9999px;
  top:        -9999px;
  opacity:    0;
  height:     0;
  width:      0;
  overflow:   hidden;
  pointer-events: none;
}

/* Formulario */
.cta-form {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.f-field {
  border-bottom:         1px solid var(--line);
  padding:               1rem 0;
  display:               grid;
  grid-template-columns: 110px 1fr;
  align-items:           center;
  gap:                   1rem;
}

.f-label {
  font-family:    var(--mono);
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--mid);
  cursor:         pointer;
}

.f-input {
  background:  transparent;
  border:      none;
  color:       var(--ink);
  font-family: var(--body);
  font-size:   0.95rem;
  font-weight: 300;
  outline:     none;
  width:       100%;
  transition:  color 0.2s;
}

.f-input::placeholder { color: var(--line); }
.f-input:focus        { color: var(--ink); }

/* Campo teléfono: prefijo + número en línea */
.f-phone {
  display:     flex;
  align-items: center;
  gap:         0;
  width:       100%;
}

.f-select {
  background:      transparent;
  border:          none;
  border-right:    1px solid var(--line);
  color:           var(--ink);
  font-family:     var(--mono);
  font-size:       0.68rem;
  font-weight:     700;
  letter-spacing:  0.04em;
  padding:         0 0.6rem 0 0;
  margin-right:    0.75rem;
  outline:         none;
  cursor:          pointer;
  appearance:      none;
  -webkit-appearance: none;
  white-space:     nowrap;
  transition:      color 0.2s;
}

.f-select:focus  { color: var(--red); }

.f-input--phone  { flex: 1; }

.f-submit {
  margin-top:  2rem;
  display:     flex;
  align-items: center;
  gap:         0;
}

.f-btn {
  background:     var(--red);
  color:          var(--white);
  border:         none;
  font-family:    var(--mono);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        1rem 2rem;
  cursor:         pointer;
  transition:     background 0.2s, opacity 0.2s;
}

.f-btn:hover           { background: var(--red-dark); }
.f-btn:disabled        { opacity: 0.6; cursor: not-allowed; }
.f-btn.is-success      { background: #1a7a3a; }
.f-btn.is-success:hover { background: #1a7a3a; }

.f-note {
  font-size: 0.75rem;
  color:     var(--mid);
  padding:   0 1.5rem;
  transition: color 0.2s;
}

.f-note.is-error   { color: var(--red); }
.f-note.is-success { color: #1a7a3a; }

/* Panel derecho */
.cta-right-block {
  background:      var(--ink);
  padding:         4rem 3rem;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
}

.why-title {
  font-family:    var(--display);
  font-size:      2.5rem;
  letter-spacing: 0.05em;
  color:          var(--white);
  line-height:    1;
  margin-bottom:  3rem;
}

.why-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.why-item {
  display:               grid;
  grid-template-columns: 44px 1fr;
  gap:                   1.5rem;
  align-items:           start;
  padding:               1.5rem 0;
  border-bottom:         1px solid #222;
}

.why-item:last-child { border-bottom: none; }

.why-icon {
  font-family:    var(--mono);
  font-size:      0.65rem;
  font-weight:    700;
  color:          var(--red);
  letter-spacing: 0.05em;
  padding-top:    0.2rem;
}

.why-text {
  font-size:   0.875rem;
  color:       #888;
  line-height: 1.6;
  font-weight: 300;
}

.why-text strong {
  color:         var(--white);
  font-weight:   500;
  display:       block;
  margin-bottom: 0.2rem;
}


/* ─────────────────────────────────────────────
   11. FOOTER
───────────────────────────────────────────── */
footer {
  background:            var(--ink);
  border-top:            1px solid #222;
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  padding:               1.5rem 3rem;
  gap:                   2rem;
}

.footer-brand {
  font-family:    var(--display);
  font-size:      1.4rem;
  letter-spacing: 0.1em;
  color:          var(--white);
}

.footer-brand span { color: var(--red); }

.footer-copy {
  font-family:    var(--mono);
  font-size:      0.6rem;
  letter-spacing: 0.1em;
  color:          #444;
  text-align:     center;
}

.footer-links {
  display:         flex;
  justify-content: flex-end;
  gap:             2rem;
  list-style:      none;
}

.footer-links a {
  font-family:     var(--mono);
  font-size:       0.6rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           #444;
  text-decoration: none;
  transition:      color 0.2s;
}

.footer-links a:hover { color: var(--white); }


/* ─────────────────────────────────────────────
   12. KEYFRAMES
───────────────────────────────────────────── */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes drop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────
   13. RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 960px) {
  nav                          { padding: 0 0 0 1.5rem; }
  .nav-links                   { display: none; }

  section                      { padding: 4rem 1.5rem; }

  .hero-main                   { grid-template-columns: 1fr; }
  .hero-side                   { display: none; }
  .hero-text-block             { border-right: none; }

  .proc-grid                   { grid-template-columns: 1fr 1fr; }
  .proc-step:nth-child(2)      { border-right: none; }
  .proc-step:nth-child(3)      { border-right: none; border-top: 1px solid var(--line); }
  .proc-step:nth-child(4)      { border-top: 1px solid var(--line); }

  .serv-layout                 { grid-template-columns: 1fr; gap: 2rem; }
  .serv-sticky                 { position: static; }
  .serv-grid                   { grid-template-columns: 1fr; }

  .price-layout                { grid-template-columns: 1fr; }

  .testi-layout                { grid-template-columns: 1fr; }
  .t-card                      { border-right: none; border-bottom: 1px solid var(--line); }
  .t-card:last-child           { border-bottom: none; }

  .cta-wrapper                 { grid-template-columns: 1fr; }
  .cta-left-block              { border-right: none; border-bottom: 1px solid var(--line); }

  footer                       { grid-template-columns: 1fr; padding: 1.5rem; gap: 1rem; }
  .footer-copy                 { text-align: left; }
  .footer-links                { justify-content: flex-start; }
}