/* ==========================================================================
   HIC Systems — Portada
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Portada / hero — columna única centrada (estructura del original)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}

/* Retícula técnica muy tenue: textura, no decoración */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 30%, #000 0%, transparent 72%);
  opacity: 0.5;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__inner {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__place {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2rem;
}
.hero__place::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay);
  flex-shrink: 0;
}

.hero__logo {
  height: clamp(48px, 7vw, 72px);
  width: auto;
  margin-bottom: 2.25rem;
}

.hero__title { margin-bottom: 1.5rem; }
/* Remate del titular: mismo texto y mismo azul, pero sin cursiva. */
.hero__title em {
  font-style: normal;
  font-weight: inherit;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.hero__lead {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 56ch;
  margin-bottom: 2.1rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.87rem;
  color: var(--ink-3);
}
.hero__note i { color: var(--ok); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Mascota

   Dibujo propio de HIC Systems: la H del logotipo va como pegatina en la tapa
   del portátil. Es un SVG escrito a mano, no una imagen: no añade ninguna
   petición, se ve nítido en cualquier pantalla y hereda los colores de la web,
   así que si cambia --brand, cambia con él.

   El movimiento se desactiva solo con «reducir movimiento»: la regla global de
   site.css anula todas las animaciones del sitio.
   -------------------------------------------------------------------------- */
/* Se apoya en la esquina derecha, al cerrar el bloque de portada */
.hero__mascota {
  align-self: flex-end;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.mascota {
  --paseo: 40vw;              /* cuánto se aleja al pasear */

  /* Cuánto se mueve cada parte. A cero, quieto. La animación m-fases las va
     cambiando de golpe según lo que esté haciendo, y así el balanceo de
     brazos y piernas solo ocurre cuando toca. */
  --amp-brazo: 0px;
  --amp-pie: 0px;
  --amp-cuerpo: 0px;

  display: block;
  width: 96px;
  height: auto;
  animation: m-paseo 26s ease-in-out infinite,
             m-fases 26s step-end infinite;
}

/* Quieto → solo teclea → quieto → anda → quieto → anda → quieto */
@keyframes m-fases {
  0%  { --amp-brazo: 0px;   --amp-pie: 0px;   --amp-cuerpo: 0px; }
  12% { --amp-brazo: 2.5px; --amp-pie: 0px;   --amp-cuerpo: 0px; }
  37% { --amp-brazo: 0px;   --amp-pie: 0px;   --amp-cuerpo: 0px; }
  43% { --amp-brazo: 2px;   --amp-pie: 2.6px; --amp-cuerpo: 1.6px; }
  58% { --amp-brazo: 0px;   --amp-pie: 0px;   --amp-cuerpo: 0px; }
  70% { --amp-brazo: 2px;   --amp-pie: 2.6px; --amp-cuerpo: 1.6px; }
  86% { --amp-brazo: 0px;   --amp-pie: 0px;   --amp-cuerpo: 0px; }
}

/* Se va hacia la izquierda, se queda un rato y vuelve. El resto del tiempo
   está parado en su esquina, que es cuando saca el portátil. */
@keyframes m-paseo {
  0%, 42%   { transform: translateX(0); }
  58%, 70%  { transform: translateX(calc(var(--paseo) * -1)); }
  86%, 100% { transform: translateX(0); }
}

/* El portátil solo aparece mientras está quieto */
.m-porta {
  transform-origin: 64px 116px;
  animation: m-saca 26s ease-in-out infinite;
}
@keyframes m-saca {
  0%, 6%    { opacity: 0; transform: translateY(5px) scale(0.5); }
  12%, 37%  { opacity: 1; transform: translateY(0) scale(1); }
  43%, 100% { opacity: 0; transform: translateY(5px) scale(0.5); }
}

/* Dos poses: de frente cuando está parado o programando, de perfil mientras
   camina. Andar de frente parecía que se deslizaba de lado. */
.m-frente { opacity: 1; animation: m-ver-frente 26s step-end infinite; }
.m-perfil { opacity: 0; animation: m-ver-perfil 26s step-end infinite; }

@keyframes m-ver-frente {
  0% { opacity: 1; } 42% { opacity: 0; } 58% { opacity: 1; }
  70% { opacity: 0; } 86% { opacity: 1; }
}
@keyframes m-ver-perfil {
  0% { opacity: 0; } 42% { opacity: 1; } 58% { opacity: 0; }
  70% { opacity: 1; } 86% { opacity: 0; }
}

/* El perfil está dibujado mirando a la izquierda; al volver se voltea */
.m-perfil-gira {
  transform-origin: 64px 64px;
  animation: m-gira 26s step-end infinite;
}
@keyframes m-gira {
  0%  { transform: scaleX(1); }
  70% { transform: scaleX(-1); }
  86% { transform: scaleX(1); }
}

/* Zancada: piernas y brazos alternos. Solo se ven mientras camina, así que
   no hace falta apagarlos en las paradas. */
.m-pierna-a { transform-origin: 58px 100px; animation: m-zancada-a 0.62s ease-in-out infinite; }
.m-pierna-b { transform-origin: 72px 100px; animation: m-zancada-b 0.62s ease-in-out infinite; }
.m-brazo-a  { transform-origin: 51.5px 62px; animation: m-zancada-b 0.62s ease-in-out infinite; }
.m-brazo-b  { transform-origin: 78.5px 62px; animation: m-zancada-a 0.62s ease-in-out infinite; }

@keyframes m-zancada-a { 0%, 100% { transform: rotate(15deg); }  50% { transform: rotate(-15deg); } }
@keyframes m-zancada-b { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }

/* Balanceo del cuerpo: solo mientras anda */
.m-anda { animation: m-paso 0.64s ease-in-out infinite; }
@keyframes m-paso {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--amp-cuerpo) * -1)); }
}

/* Cuerpo y brazos: una sola forma blanda, rellena, sin contorno, en el azul
   de la marca. La H del logotipo va en el pecho, sobre una placa blanca para
   que se lea: azul sobre azul no se vería. */
.m-cuerpo { fill: var(--brand); }
.m-hondo  { fill: #0a52ab; }   /* brazos, pies y sombra propia: un azul más hondo */
.m-luz    { fill: #fff; opacity: 0.10; }
.m-ojo    { fill: #06294f; }
.m-brillo { fill: #fff; }
.m-sombra { fill: var(--brand); opacity: 0.13; }

/* La H va en blanco directamente sobre el azul, igual que en el favicon.
   El trazado es el del logotipo, medido píxel a píxel: asta izquierda cortada
   en diagonal por abajo, derecha por arriba y travesaño inclinado. */
.m-h { fill: #fff; }

/* Brazos: trazo grueso de punta redonda, así nacen del cuerpo sin costuras */
.m-brazo { fill: none; stroke: var(--brand); stroke-width: 8.5; stroke-linecap: round; }

/* El portátil en gris oscuro: sobre el papel claro del hero, un gris cálido
   se perdía. Tres tonos para darle volumen: tapa, canto y base. */
.m-tapa  { fill: #2f353d; }
.m-canto { fill: #545c66; }
.m-base  { fill: #1c2127; }
.m-tecla { fill: none; stroke: #6f7883; stroke-width: 2.2; stroke-linecap: round; }
.m-marca { fill: #6f7883; }

/* Teclea con las dos manos alternando, 2,5 px de recorrido */
/* La amplitud sale de las variables de fase: a 0 el brazo o la pierna se
   quedan clavados, aunque la animación siga corriendo. */
@keyframes m-brazo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--amp-brazo)); } }
@keyframes m-pie   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--amp-pie)); } }
@keyframes m-parpadea { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.08); } }

.m-brazo-i { animation: m-brazo 0.58s ease-in-out infinite; }
.m-brazo-d { animation: m-brazo 0.58s ease-in-out infinite 0.29s; }
.m-pie-i   { animation: m-pie 0.64s ease-in-out infinite; }
.m-pie-d   { animation: m-pie 0.64s ease-in-out infinite 0.32s; }
.m-ojos    { animation: m-parpadea 4.6s ease-in-out infinite; transform-origin: 64px 32px; }

/* Con «reducir movimiento» se queda quieto en su esquina, con el portátil
   fuera. Sin esto se quedaría invisible, porque el portátil arranca oculto. */
@media (prefers-reduced-motion: reduce) {
  .mascota, .m-anda, .m-porta, .m-frente, .m-perfil, .m-perfil-gira,
  .m-brazo-i, .m-brazo-d, .m-pie-i, .m-pie-d, .m-ojos,
  .m-pierna-a, .m-pierna-b, .m-brazo-a, .m-brazo-b { animation: none; }
  .m-porta  { opacity: 1; transform: none; }
  .m-frente { opacity: 1; }
  .m-perfil { opacity: 0; }
}

@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .mascota { width: 76px; --paseo: 26vw; }
}

/* — Pulso de luz de fondo del hero — */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 12%, rgba(11,99,206,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 82% 88%, rgba(184,72,26,0.05) 0%, transparent 62%);
  animation: glow-pulse 6s ease-in-out infinite;
}

/* — Iconos flotando en el hero (inyectados por JS) — */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-particle {
  position: absolute;
  color: var(--brand);
  font-size: var(--p-size, 14px);
  opacity: 0;
  pointer-events: none;
  animation: particle-rise linear infinite;
}

/* — Máquina de escribir en el remate del titular — */
.hero__type.is-typing { border-right: 3px solid var(--brand); }
.hero__type.is-caret  { animation: caret-blink 0.8s step-end infinite; }

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes particle-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: var(--p-opacity); }
  85%  { opacity: var(--p-opacity); }
  100% { transform: translateY(var(--p-rise)) translateX(var(--p-drift)); opacity: 0; }
}
@keyframes caret-blink {
  0%, 100% { border-color: var(--brand); }
  50%      { border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-particle { animation: none; }
  .hero__type.is-typing, .hero__type.is-caret { border-right: none; animation: none; }
}

/* --------------------------------------------------------------------------
   3. Servicios — índice tipo catálogo
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  transition: background-color var(--dur) var(--ease);
  position: relative;
}
.svc::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: var(--clay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.svc:hover { background: var(--paper-2); color: inherit; }
.svc:hover::after { opacity: 1; }

.svc__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.svc h3 {
  font-size: 1.14rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.svc h3 i { color: var(--brand); font-size: 0.9rem; }
.svc p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-2);
  flex: 1;
}
.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: 0.3rem;
}
.svc__more i { font-size: 0.72rem; transition: transform var(--dur) var(--ease); }
.svc:hover .svc__more i { transform: translateX(4px); }

.svc__tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clay);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  vertical-align: middle;
}

/* Celda final de la cuadrícula: invitación a proyectos fuera de catálogo */
.svc--ask {
  background: var(--paper-2);
  justify-content: center;
}
.svc--ask:hover { background: var(--paper-3); }
.svc--ask::after { display: none; }

@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   4. Proceso (sección oscura)
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: step;
}
.step {
  padding: 2rem clamp(1rem, 2vw, 1.75rem) 0;
  border-top: 1px solid var(--line-dark);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -1px; left: clamp(1rem, 2vw, 1.75rem);
  transform: translateY(-50%);
  background: var(--dark);
  padding-right: 0.75rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-light);
  letter-spacing: 0.05em;
}
.step:first-child { padding-left: 0; }
.step:first-child::before { left: 0; }
.step h3 { font-size: 1.05rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.9rem; line-height: 1.68; color: var(--dark-text); }
.step__when {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--dark-muted);
}
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .step:first-child { padding-left: clamp(1rem, 2vw, 1.75rem); }
  .step:first-child::before { left: clamp(1rem, 2vw, 1.75rem); }
  .step:nth-child(odd) { padding-left: 0; }
  .step:nth-child(odd)::before { left: 0; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .step { padding-left: 0 !important; }
  .step::before { left: 0 !important; }
}

/* Compromisos bajo el proceso */
.pledges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-dark);
}
.pledge { display: flex; gap: 0.9rem; }
.pledge i { color: var(--brand-light); font-size: 1rem; margin-top: 4px; flex-shrink: 0; }
.pledge h4 { font-size: 0.96rem; margin-bottom: 0.3rem; }
.pledge p { font-size: 0.87rem; line-height: 1.65; }
@media (max-width: 760px) { .pledges { grid-template-columns: 1fr; gap: 1.5rem; } }

/* --------------------------------------------------------------------------
   5. Proyectos
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.work {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.work:hover { border-color: var(--line-2); transform: translateY(-3px); }
.work__shot {
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Portada cuadrada e igual en todas las tarjetas; el logo se centra dentro */
.work__shot { aspect-ratio: 1 / 1; }
.work__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Logotipos claros: necesitan el fondo oscuro de su propia marca */
.work__shot--dark { background: #0c0d10; }
/* Los logos que no son cuadrados respiran con un margen dentro de la portada */
.work__shot--pad img { padding: clamp(1.5rem, 6%, 2.5rem); }
.work__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.work__kind {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}
.work h3 { font-size: 1.08rem; }
.work p { font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); flex: 1; }
/* Solo la descripción absorbe el hueco sobrante: así la etiqueta, el título
   y la nota mantienen su espaciado sea cual sea el alto de la tarjeta */
.work p.work__kind, .work p.work__meta { flex: none; }
.work__meta {
  font-size: 0.78rem;
  color: var(--ink-3);
}
/* Nota de proyecto sin enlace todavía: mismo azul y peso que el "Ver demo"
   de las tarjetas que sí lo tienen, para que ocupe su sitio en la fila */
.work p.work__meta--pendiente {
  color: var(--brand);
  font-weight: 600;
}
.work .arrow-link { margin-top: 0.5rem; }

/* Tarjetas "Próximamente" — el hueco del portfolio, como en el original */
.work--soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2.75rem 1.75rem;
  background: var(--paper-2);
  border-style: dashed;
  border-color: var(--line-2);
  min-height: 260px;
}
.work--soon:hover { transform: none; border-color: var(--brand); }
.work__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--brand-soft);
  border: 1px solid rgba(11,99,206,0.2);
  color: var(--brand);
  font-size: 1.2rem;
}
.work--soon h3 { font-size: 1.05rem; }
.work--soon p { flex: none; font-size: 0.9rem; color: var(--ink-3); line-height: 1.6; }

/* Línea de cierre de la sección */
.work-more {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-size: 0.95rem;
  color: var(--ink-2);
}
.work-more a { font-weight: 600; }

/* Logotipo blanco sobre fondo claro */
.logo-inverted { filter: invert(1); }

/* --------------------------------------------------------------------------
   6. Nosotros
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about__text p { margin-bottom: 1.1rem; line-height: 1.75; }
.about__text p:last-of-type { margin-bottom: 0; }

.quote {
  margin: 2rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--clay);
}
.quote blockquote {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.quote figcaption {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.about__features { margin-top: 1.7rem; display: flex; flex-direction: column; gap: 0.8rem; }
.about__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
}
.about__features i { color: var(--brand); font-size: 0.85rem; margin-top: 5px; flex-shrink: 0; }

.skills { display: flex; flex-direction: column; }
.skill {
  display: flex;
  gap: 1.1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.skill:first-child { padding-top: 0; }
.skill:last-child { border-bottom: none; }
.skill i {
  color: var(--brand);
  font-size: 1rem;
  margin-top: 5px;
  width: 20px;
  flex-shrink: 0;
}
.skill h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.skill p { font-size: 0.89rem; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 2.75rem; } }

/* --------------------------------------------------------------------------
   7. Kit Digital
   -------------------------------------------------------------------------- */
.kit {
  background: #f2f6f3;
  border-block: 1px solid #d9e5dd;
  position: relative;
  overflow: hidden;
}
.kit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 12% 30%, rgba(31,122,77,0.12) 0%, transparent 62%),
    radial-gradient(ellipse 55% 55% at 88% 72%, rgba(31,122,77,0.07) 0%, transparent 60%);
  animation: section-glow 14s ease-in-out infinite alternate-reverse;
}
.kit > * { position: relative; z-index: 1; }
.kit .eyebrow::before { background: var(--ok); }

.kit__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.8rem;
  background: #fff;
  border: 1px solid #cfe0d5;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 1.1rem;
}

.kit__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.kit__amount {
  background: #fff;
  border: 1px solid #d9e5dd;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
}
.kit__amount--top { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.kit__amount dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.6rem;
}
.kit__amount dd {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kit__amount p { font-size: 0.82rem; color: var(--ink-3); margin-top: 0.5rem; }

.kit__how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
}
.kit__step { border-top: 2px solid var(--ok); padding-top: 1.1rem; }
.kit__step span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ok);
}
.kit__step h3 { font-size: 1rem; margin: 0.4rem 0 0.35rem; }
.kit__step p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-2); }

.kit .btn--ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.kit .btn--ok:hover { background: #18603c; border-color: #18603c; color: #fff; }

.kit__small {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.65;
}

@media (max-width: 820px) {
  .kit__amounts, .kit__how { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Aviso destacado con acción — Servicios y Kit Digital
   -------------------------------------------------------------------------- */
.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.callout h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.callout p { font-size: 0.9rem; color: var(--ink-2); max-width: 52ch; }
.callout--spaced { margin-top: 2rem; }
.kit .callout { border-color: #d9e5dd; }
@media (max-width: 820px) {
  .callout { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   9. Packs / tarifas
   -------------------------------------------------------------------------- */
.packs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pack {
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.6rem);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--paper);
}
.pack:last-child { border-right: none; }
.pack--pick { background: var(--brand-soft); }
.pack__tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
}
.pack h3 { font-size: 1.1rem; }
.pack__time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.pack ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.pack li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.pack li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
}
@media (max-width: 980px) {
  .packs { grid-template-columns: repeat(2, 1fr); }
  .pack:nth-child(2) { border-right: none; }
  .pack:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .packs { grid-template-columns: 1fr; }
  .pack { border-right: none; border-bottom: 1px solid var(--line); }
  .pack:last-child { border-bottom: none; }
}

/* Mantenimiento + extras */
.after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.after h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.after > div > p { font-size: 0.9rem; color: var(--ink-3); margin-bottom: 1.25rem; }

.tiers { display: flex; flex-direction: column; gap: 0.6rem; }
.tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  background: var(--paper);
}
.tier--pick { border-color: var(--brand); background: var(--brand-soft); }
.tier h4 { font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.tier p { font-size: 0.85rem; color: var(--ink-3); margin-top: 0.2rem; line-height: 1.55; }

.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.extra {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: var(--paper);
}
.extra i { color: var(--clay); font-size: 0.95rem; margin-bottom: 0.55rem; display: block; }
.extra h4 { font-size: 0.9rem; margin-bottom: 0.2rem; }
.extra p { font-size: 0.82rem; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 820px) { .after { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .extras { grid-template-columns: 1fr; } }

.quote-cta {
  text-align: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.quote-cta p { font-size: 0.87rem; color: var(--ink-3); margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   10. Preguntas frecuentes
   -------------------------------------------------------------------------- */
/* Terminal.

   El guiño para quien sabe lo que es una consola; para quien no, botones y
   respuestas. No hay que escribir nada en ningún momento.

   Sólo se muestra si hay JS (home.js le quita el hidden). Sin JS queda la
   lista .faq de abajo, con las mismas siete respuestas.
   Contrastes medidos sobre #12161c: prompt 10.2:1, respuesta 11.2:1. */
.term {
  max-width: 860px;
  margin-inline: auto;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-lg);
  background: var(--dark);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.term[hidden] { display: none; }

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  background: var(--dark-2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.term__dots { display: flex; gap: 0.42rem; flex-shrink: 0; }
.term__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.term__dots i:first-child { background: #f0655a; }
.term__dots i:nth-child(2) { background: #f0b429; }
.term__dots i:last-child  { background: #3ddc84; }
.term__title {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--dark-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term__screen {
  padding: 1.15rem clamp(1rem, 3vw, 1.5rem);
  max-height: min(58vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.term__screen::-webkit-scrollbar { width: 8px; }
.term__screen::-webkit-scrollbar-track { background: transparent; }
.term__screen::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 4px;
}

.term__line { margin-bottom: 0.75rem; }
.term__line:last-child { margin-bottom: 0; }

/* La orden: monoespaciada, como se teclearía */
.term__line--cmd {
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #fff;
  word-break: break-word;
}
.term__prompt {
  color: #3ddc84;
  font-weight: 600;
  margin-right: 0.5rem;
  user-select: none;
}

/* La respuesta: en la tipografía del sitio, que es la que se lee bien.
   Un párrafo largo en monoespaciada no hay quien lo lea. */
.term__line--out {
  max-width: 68ch;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #c3ccd8;
}
.term__line--out a { color: var(--brand-light); }
.term__line--out.is-in {
  animation: term-in 260ms var(--ease) both;
}
@keyframes term-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Puntos suspensivos mientras "piensa" */
.term__dot {
  display: inline-block;
  animation: term-blink 1.1s infinite;
}
.term__dot:nth-child(2) { animation-delay: 0.18s; }
.term__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes term-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* La línea donde se escribe. Es un <form> de verdad: en el móvil el teclado
   muestra la tecla de enviar y Enter funciona sin tocar nada. */
.term__form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  transition: background-color var(--dur) var(--ease);
}
.term__form:focus-within { background: rgba(255,255,255,0.055); }
.term__form .term__prompt { margin-right: 0; }

.term__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 1rem;          /* 17px: por debajo de 16 el iPhone hace zoom al enfocar */
  color: #fff;
  caret-color: #3ddc84;
}
.term__input:focus { outline: none; }
.term__input::placeholder { color: #7d8797; }

.term__send {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  background: #1f2733;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c3ccd8;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.term__send:hover { border-color: var(--brand-light); color: #fff; background: #263241; }
.term__send:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .term__dot { animation: none; }
  .term__line--out.is-in { animation: none; }
}

@media (max-width: 560px) {
  .term__title { font-size: 0.72rem; }
  .term__send { padding: 0.5rem 0.8rem; font-size: 0.72rem; }
}

/* Respaldo sin JS y fuente de las respuestas */
.faq { max-width: 820px; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: none; }
.faq details:last-of-type { border-bottom: none; }
.faq[hidden] { display: none; }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-3);
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div {
  padding-bottom: 1.5rem;
  max-width: 68ch;
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--ink-2);
}

.faq[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Contacto
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.channels { display: flex; flex-direction: column; }
.channel {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: color var(--dur) var(--ease);
}
.channel:first-child { padding-top: 0; }
.channel i {
  font-size: 1rem;
  color: var(--brand);
  margin-top: 5px;
  width: 20px;
  flex-shrink: 0;
}
.channel__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.channel__value { font-size: 0.98rem; font-weight: 600; color: var(--ink); word-break: break-word; }
.channel small { display: block; font-size: 0.82rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
a.channel:hover .channel__value { color: var(--brand); }
.channel--wa i { color: var(--ok); }

/* Formulario

   Va sin tarjeta a propósito: ni fondo, ni borde, ni esquinas, ni sombra. Se
   apoya en el papel igual que la columna de contacto de al lado, así las dos
   columnas pesan lo mismo. Los campos sí conservan su recuadro, que es lo que
   indica dónde se escribe. */
.form-card h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.form-card > div > p { font-size: 0.88rem; color: var(--ink-3); margin-bottom: 1.75rem; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #9aa3ad; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11,99,206,0.14);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23656f7c' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field__hint { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.35rem; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}
.consent input {
  width: 17px; height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand);
}

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: var(--ink-3);
  margin-top: 1rem;
}

.form-alert {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.87rem;
  line-height: 1.55;
  background: #fdf0ef;
  border: 1px solid #f3cdc9;
  color: var(--danger);
}
.form-alert[hidden] { display: none; }

.form-done { text-align: center; padding: 2.5rem 0.5rem; }
.form-done[hidden] { display: none; }
.form-done i { font-size: 2.5rem; color: var(--ok); margin-bottom: 1rem; }
.form-done h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.form-done p { font-size: 0.92rem; color: var(--ink-3); }

/* Trampa antispam: fuera de pantalla pero enviada con el formulario */
.honeypot { position: absolute; left: -9999px; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. Servicios, Nosotros y Tarifas sobre fondo oscuro
   Adapta las superficies claras (tarjetas, listas, formularios internos)
   para que se lean sobre --dark.
   -------------------------------------------------------------------------- */

/* — Servicios — */
.section--dark .svc-grid {
  border-top-color: var(--line-dark);
  border-left-color: var(--line-dark);
}
.section--dark .svc {
  background: var(--dark-2);
  border-right-color: var(--line-dark);
  border-bottom-color: var(--line-dark);
}
.section--dark .svc:hover { background: #1f2732; }
.section--dark .svc__num { color: var(--dark-muted); }
.section--dark .svc h3 { color: #fff; }
.section--dark .svc h3 i { color: var(--brand-light); }
.section--dark .svc p { color: var(--dark-text); }
.section--dark .svc__more { color: var(--brand-light); }

/* — Callout (Servicios) — */
.section--dark .callout {
  background: var(--dark-2);
  border-color: var(--line-dark);
}
.section--dark .callout p { color: var(--dark-text); }

/* — Nosotros — */
.section--dark .text-accent { color: var(--brand-light); }
.section--dark .about__text p { color: var(--dark-text); }
.section--dark .about__text strong { color: #fff; }
.section--dark .about__features li { color: #fff; }
.section--dark .about__features i { color: var(--brand-light); }
.section--dark .quote blockquote { color: #fff; }
.section--dark .quote figcaption { color: var(--dark-muted); }
.section--dark .skill { border-bottom-color: var(--line-dark); }
.section--dark .skill i { color: var(--brand-light); }
.section--dark .skill h3 { color: #fff; }
.section--dark .skill p { color: var(--dark-muted); }

/* — Tarifas — */
.section--dark .packs { border-color: var(--line-dark); }
.section--dark .pack {
  background: var(--dark-2);
  border-right-color: var(--line-dark);
}
.section--dark .pack--pick { background: rgba(11,99,206,0.14); }
.section--dark .pack h3 { color: #fff; }
.section--dark .pack__time { color: var(--dark-muted); }
.section--dark .pack li { color: var(--dark-text); }
.section--dark .pack li::before { color: var(--brand-light); }
@media (max-width: 980px) {
  .section--dark .pack:nth-child(-n+2) { border-bottom-color: var(--line-dark); }
}
@media (max-width: 600px) {
  .section--dark .pack { border-bottom-color: var(--line-dark); }
}

.section--dark .after h3 { color: #fff; }
.section--dark .after > div > p { color: var(--dark-muted); }
.section--dark .tier {
  background: var(--dark-2);
  border-color: var(--line-dark);
}
.section--dark .tier--pick { border-color: var(--brand); background: rgba(11,99,206,0.14); }
.section--dark .tier h4 { color: #fff; }
.section--dark .tier p { color: var(--dark-muted); }
.section--dark .extra {
  background: var(--dark-2);
  border-color: var(--line-dark);
}
.section--dark .extra h4 { color: #fff; }
.section--dark .extra p { color: var(--dark-muted); }

.section--dark .quote-cta { border-top-color: var(--line-dark); }
.section--dark .quote-cta p { color: var(--dark-muted); }