/*
  SERVICIOS — página /services/
  ------------------------------------------------------------
  Solo estilos NUEVOS de esta página. El header, el borde de 3
  capas, el toggle y el footer se reutilizan tal cual desde
  hero.css / toggle.css / footer.css — aquí únicamente se añade
  el modificador .hero--interior para bajar la escala del hero,
  porque esta página no debe competir con la home.

  Ningún color nuevo: todo sale de tokens.css. Las variables de
  abajo son combinaciones de los tokens ya cerrados, declaradas
  aquí para que el cambio día/noche siga funcionando por CSS y
  nunca por estilo inline.
*/

:root,
html[data-theme="dia"] {
  /* Tarjeta destacada = modo invertido: el fondo toma el color
     del wordmark del modo activo. Es el único recurso jerárquico
     de la página, y no necesita ningún color fuera de paleta. */
  --color-destacada-fondo: var(--color-morado);
  --color-destacada-texto: var(--color-blanco);
  --color-destacada-linea: rgba(255, 255, 255, 0.24);
  --color-destacada-cta-fondo: var(--color-blanco);
  --color-destacada-cta-texto: var(--color-morado);
  --color-linea-suave: rgba(20, 49, 11, 0.13);
  /* Tinte de la columna destacada de la tabla: el mismo morado de
     la tarjeta, muy rebajado, para que la tabla la reconozca. */
  --color-superficie-suave: rgba(147, 43, 241, 0.08);
  /* Acento de la nota de precio = color del wordmark del modo.
     En la tarjeta destacada ese color ES el fondo, asi que ahi se
     usa el contrario. Ambos son pares cerrados del manual. */
  --color-nota-precio: var(--color-morado);
  --color-nota-destacada: var(--color-menta);
}

html[data-theme="noche"] {
  --color-destacada-fondo: var(--color-menta);
  --color-destacada-texto: #14310B;
  --color-destacada-linea: rgba(20, 49, 11, 0.22);
  --color-destacada-cta-fondo: var(--color-morado);
  --color-destacada-cta-texto: var(--color-blanco);
  --color-linea-suave: rgba(255, 255, 255, 0.12);
  --color-superficie-suave: rgba(180, 246, 163, 0.09);
  --color-nota-precio: var(--color-menta);
  --color-nota-destacada: var(--color-morado);
}

/* ============================================================
   HERO INTERIOR
   ============================================================ */

/*
  El modificador existe para UNA cosa: que este hero sea menor que
  el de la home. Cuando la home se comprimió (titular de 78px fijo a
  clamp(36px, 3.9vw, 52px)) estos valores se quedaron atrás y el
  interior pasó a ser MÁS grande que la home — jerarquía invertida.
  Regla: cualquier retoque del titular de la home obliga a revisar
  este bloque. Los valores de aquí se derivan de los de hero.css
  aplicando ≈0,77 (la proporción original 60/78).

  No se declara padding-bottom: el de .hero (132px desktop / 148px
  móvil) ya es correcto y lo pisaba con el mismo valor.
*/

.hero--interior .hero__contenido {
  padding-top: 32px;
}

.hero--interior .hero__titular {
  font-size: clamp(30px, 3.1vw, 40px);
  max-width: 18ch;
}

.hero--interior .hero__subtitulo {
  max-width: 46ch;
  font-size: var(--texto-cuerpo);
}

/* ============================================================
   SOLUCIONES
   ============================================================ */

.soluciones {
  background-color: var(--color-fondo-productos);
  transition: background-color 0.3s ease;
  padding: 72px 64px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.solucion {
  background-color: var(--color-tarjeta-servicios);
  border: 1px solid var(--color-linea-suave);
  border-radius: 30px;
  padding: 48px 52px;
  box-shadow: 0 18px 44px rgba(20, 49, 11, 0.07);
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease, color 0.3s ease;
}

html[data-theme="noche"] .solucion {
  box-shadow: 0 18px 44px rgba(10, 0, 25, 0.35);
}

/* --- Tarjeta destacada: Gestión Interna ---
   Único recurso de jerarquía. No usa tamaño ni badge: usa el
   modo invertido de la propia marca. */
.solucion--destacada {
  background-color: var(--color-destacada-fondo);
  border-color: transparent;
  color: var(--color-destacada-texto);
}

.solucion--destacada .solucion__titulo,
.solucion--destacada .solucion__problema,
.solucion--destacada .solucion__texto,
.solucion--destacada .bloque__titulo,
.solucion--destacada .lista li,
.solucion--destacada .precio__valor,
.solucion--destacada .precio__etiqueta,
.solucion--destacada .solucion__cierre,
.solucion--destacada .eyebrow__texto {
  color: var(--color-destacada-texto);
}

.solucion--destacada .lista li {
  opacity: 0.92;
}

.solucion--destacada .bloque__titulo {
  opacity: 0.72;
}

.solucion--destacada .solucion__cuerpo,
.solucion--destacada .solucion__pie,
.solucion--destacada .solucion__precio {
  border-color: var(--color-destacada-linea);
}

.solucion--destacada .eyebrow__punto {
  background-color: var(--color-destacada-texto);
}

/* Guiones de las listas dentro de la tarjeta invertida.
   ATENCION A LA ESPECIFICIDAD: la regla base `.lista li::before`
   tiene el mismo peso (0,1,2) y esta MAS ABAJO en el archivo, asi
   que ganaba y los guiones se quedaban en --color-texto-principal
   (verde oscuro sobre morado / blanco sobre menta: invisibles).
   Con `.solucion--destacada .lista li::before` sube a (0,2,2) y
   gana sin depender del orden.

   COLOR: naranja fijo de marca, IGUAL en los dos modos, como el
   filete de la frase del problema. Decision consciente: el ratio
   de luminancia es bajo (1,92:1 sobre morado / 2,25:1 sobre
   menta), por debajo del 3:1 recomendado para elementos
   graficos. Se acepta porque (a) la separacion de TONO entre
   naranja y morado/menta es muy alta y en pantalla se distinguen
   sin esfuerzo, y (b) el guion es decorativo: la lista se
   entiende igual sin el, asi que no se pierde informacion.
   NO aplicar este mismo criterio a texto — ahi el ratio manda. */
.solucion--destacada .lista li::before {
  background-color: var(--color-naranja);
  opacity: 1;
}

/* Si en el futuro se añade un CTA dentro de la ficha destacada,
   no puede usar el morado del CTA normal (sería morado sobre
   morado en modo día). Queda ya resuelto. */
.solucion--destacada .cta,
html[data-theme="noche"] .solucion--destacada .cta {
  background-color: var(--color-destacada-cta-fondo);
  color: var(--color-destacada-cta-texto);
}

/* --- Cabecera de ficha --- */

/* ESCALA — antes 46px, el tamaño más alto de toda la web fuera del
   hero. Pasa a --texto-h2 (38px), mismo paso que .tarjeta__titulo en
   la home: ambos son "nombre del producto", tiene sentido que compartan
   nivel. Sigue siendo con claridad el elemento más grande de la ficha. */
.solucion__titulo {
  margin: 18px 0 0;
  font-family: var(--font-marca);
  font-weight: 500;
  font-size: var(--texto-h2);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--color-texto-principal);
}

/* El problema del cliente antes que la solución: es la regla de
   copy del documento, así que también es la regla tipográfica.
   Es el elemento más grande de cada ficha después del nombre.

   ESCALA — antes 27px suelto. Pasa a --texto-problema (28px): casi
   el mismo valor, ahora dentro de la escala común. Es el cambio más
   pequeño de toda la migración porque ya estaba bien calibrado. */
.solucion__problema {
  margin: 22px 0 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: var(--texto-problema);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--color-texto-principal);
  max-width: 30ch;
  text-wrap: balance;
  border-left: 3px solid var(--color-naranja);
  padding-left: 20px;
}

.solucion__cuerpo {
  margin-top: 36px;
  padding-top: 34px;
  border-top: 1px solid var(--color-linea-suave);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}

/* Sin cambio de tamaño: ya era 18px, que es exactamente el paso de
   cuerpo de la escala nueva (--texto-cuerpo). Pasa a usar la variable
   para quedar ligado al resto del sistema, pero el valor no se mueve. */
.solucion__texto {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--color-texto-principal);
  opacity: 0.82;
}

.solucion__texto + .solucion__texto {
  margin-top: 18px;
}

.bloque + .bloque {
  margin-top: 30px;
}

.bloque__titulo {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-texto-principal);
  opacity: 0.6;
}

.lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lista li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--color-texto-principal);
  opacity: 0.85;
}

.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background-color: var(--color-texto-principal);
  opacity: 0.5;
}

/* --- Precio --- */

.solucion__precio {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--color-linea-suave);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 44px;
}

.precio__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.precio__etiqueta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-texto-principal);
  opacity: 0.6;
}

/* ESCALA — antes 32px. Pasa a --texto-precio (30px): ajuste MANUAL,
   no el paso puro de la escala (que habría dado 28px, igual que
   .solucion__problema). El precio es el dato de mayor peso de
   conversión de toda la ficha — en la comparativa visual, 28px se
   sentía débil al lado de la frase-problema del mismo tamaño. 30px
   mantiene distinción clara sin quedarse en el 32px original, que
   competía en exceso con el título de 38px de arriba. */
.precio__valor {
  font-family: var(--font-marca);
  font-size: var(--texto-precio);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-texto-principal);
}

.precio__valor small {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Argumento comercial fuerte junto al precio (sin comisiones, sin
   coste por usuario). Iba en naranja fijo, pero el naranja no
   tiene contraste suficiente ni sobre el morado de la tarjeta
   destacada (~2:1) ni sobre la tarjeta blanca (~3:1). Pasa a usar
   el color del wordmark del modo activo, invertido en la tarjeta
   destacada. Todos los pares resultantes estan en el manual. */
.precio__nota {
  font-family: var(--font-marca);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.4;
  color: var(--color-nota-precio);
  align-self: center;
  max-width: 26ch;
}

.solucion--destacada .precio__nota {
  color: var(--color-nota-destacada);
}

/* --- Pie de ficha --- */
/* Ahora aloja la frase de cierre + el CTA "vamos al lío" en la
   misma fila. flex-wrap para que en anchos estrechos el CTA baje
   a su propia línea en vez de comprimir el texto. */
.solucion__pie {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--color-linea-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ESCALA — antes 19px suelto. Pasa a --texto-sub (≈21px): mismo paso
   que .hero__subtitulo y .tarjeta__descripcion — los tres cumplían
   el mismo rol de "texto de apoyo destacado" con tres valores
   distintos (21/19/19) sin ningún motivo real para diferenciarse. */
.solucion__cierre {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--color-texto-principal);
  font-size: var(--texto-sub);
  max-width: 34ch;
}

/* CTA por ficha — texto propio por solución (cerrado 16/08), en vez
   de repetir un único texto genérico cuatro veces. Reutiliza .cta
   (mismos colores morado/menta que ya se invierten en .solucion--
   destacada .cta), en un tamaño algo más compacto porque aquí vive
   dentro de una ficha, no como CTA protagonista de tarjeta grande. */
.solucion__cta {
  padding: 13px 22px;
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================================
   TABLA COMPARATIVA
   ============================================================ */

.comparativa {
  background-color: var(--color-fondo-productos);
  transition: background-color 0.3s ease;
  padding: 40px 64px 24px;
}

/* ESCALA — antes 30px suelto, igual que .proceso__titulo pero sin
   relación declarada entre ambos. Pasa a --texto-h3 (24px): mismo
   nivel que .proceso__titulo y .kit__titulo — los tres son títulos
   de sección dentro de la página de Servicios, mismo peso jerárquico. */
.comparativa__titulo {
  margin: 0 0 26px;
  font-family: var(--font-marca);
  font-weight: 500;
  font-size: var(--texto-h3);
  letter-spacing: -0.025em;
  color: var(--color-texto-principal);
}

.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--font-marca);
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-linea-suave);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.004em;
  color: var(--color-texto-principal);
  vertical-align: top;
}

.tabla thead th {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  border-bottom-width: 2px;
}

.tabla tbody th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;
}

.tabla__col-destacada {
  background-color: var(--color-superficie-suave);
}

/* ============================================================
   KIT DIGITAL
   ============================================================ */

.kit {
  background-color: var(--color-fondo-productos);
  transition: background-color 0.3s ease;
  padding: 40px 64px 24px;
}

.kit__caja {
  background-color: var(--color-tarjeta-servicios);
  border: 2px solid var(--color-naranja);
  border-radius: 30px;
  padding: 44px 52px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 44px;
  transition: background-color 0.3s ease;
}

/* ESCALA — antes 34px, mismo valor suelto que .app-item__nombre en
   productos.css sin relación declarada entre ambos. Pasa a
   --texto-h2 (38px): el Kit Digital es un bloque de conversión de
   peso similar a las tarjetas de arriba, mismo nivel que
   .tarjeta__titulo / .solucion__titulo. */
.kit__titulo {
  margin: 16px 0 0;
  font-family: var(--font-marca);
  font-weight: 500;
  font-size: var(--texto-h2);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--color-texto-principal);
}

.kit__texto {
  margin: 16px 0 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--color-texto-principal);
  opacity: 0.82;
  max-width: 58ch;
}

/* ============================================================
   CÓMO TRABAJAMOS
   ============================================================ */

.proceso {
  background-color: var(--color-fondo-productos);
  transition: background-color 0.3s ease;
  padding: 48px 64px 96px;
}

/* ESCALA — antes 30px suelto. Pasa a --texto-h3 (24px), mismo nivel
   que .comparativa__titulo y .kit__titulo — ver nota en
   .comparativa__titulo arriba. */
.proceso__titulo {
  margin: 0 0 34px;
  font-family: var(--font-marca);
  font-weight: 500;
  font-size: var(--texto-h3);
  letter-spacing: -0.025em;
  color: var(--color-texto-principal);
}

/* Aquí la numeración sí es información: los tres pasos ocurren
   en ese orden y el visitante necesita saber cuál viene antes. */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  counter-reset: paso;
}

.paso {
  border-top: 2px solid var(--color-naranja);
  padding-top: 20px;
  counter-increment: paso;
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-naranja);
  margin-bottom: 12px;
}

.paso__titulo {
  margin: 0 0 10px;
  font-family: var(--font-marca);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.025em;
  color: var(--color-texto-principal);
}

.paso__texto {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--color-texto-principal);
  opacity: 0.82;
}

.faq {
  margin-top: 56px;
  border-top: 1px solid var(--color-linea-suave);
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 48px;
}

.faq__pregunta {
  margin: 0 0 8px;
  font-family: var(--font-marca);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--color-texto-principal);
}

.faq__respuesta {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--color-texto-principal);
  opacity: 0.82;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) and (min-width: 641px) {
  /* El titular y el subtítulo no se tocan aquí: el clamp() ya los
     escala solo y un font-size fijo lo anularía. */
  .hero--interior .hero__contenido {
    padding-top: 22px;
  }

  .soluciones {
    padding: 56px 40px 32px;
  }

  .solucion {
    padding: 36px 34px;
  }

  /* Antes 36px suelto para tablet. Con desktop ya en 38px el
     escalón de tablet quedaba pegado a él (36 vs 38, 2px de
     diferencia) sin aportar nada — se retira y hereda el tamaño de
     desktop, igual que en .tarjeta__titulo. */

  .solucion__problema {
    font-size: 23px;
  }

  .solucion__cuerpo {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .comparativa,
  .kit {
    padding: 32px 40px 20px;
  }

  .kit__caja {
    padding: 34px 34px;
    gap: 30px;
  }

  .proceso {
    padding: 40px 40px 72px;
  }

  .pasos {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 640px) {
  .hero--interior .hero__contenido {
    padding-top: 32px;
  }

  /* Solo se suelta el tope de línea: el tamaño lo da el mínimo del
     clamp (30px), que ya queda por debajo de los 36px de la home. */
  .hero--interior .hero__titular {
    max-width: none;
  }

  .hero--interior .hero__subtitulo {
    font-size: 18px;
  }

  .soluciones {
    padding: 44px 20px 24px;
    gap: 20px;
  }

  .solucion {
    padding: 30px 24px;
    border-radius: 22px;
  }

  /* ESCALA — antes 30px propio de móvil. Pasa a --texto-h3 (24px):
     en móvil el título ya no comparte fila con nada, así que baja un
     escalón completo sin perder protagonismo, igual que en
     .tarjeta__titulo de productos.css. */
  .solucion__titulo {
    font-size: var(--texto-h3);
  }

  .solucion__problema {
    font-size: 21px;
    max-width: none;
    padding-left: 16px;
  }

  .solucion__cuerpo {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
    padding-top: 26px;
  }

  .solucion__texto {
    font-size: 17px;
  }

  .solucion__precio {
    gap: 24px;
    margin-top: 28px;
  }

  /* Antes 27px. Reducido en proporción al nuevo valor de desktop
     (30px en vez de 32px) manteniendo el mismo paso relativo. */
  .precio__valor {
    font-size: 25px;
  }

  .precio__nota {
    align-self: flex-start;
  }

  .solucion__pie {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .solucion__cta {
    text-align: center;
    justify-content: center;
    padding: 14px 22px;
  }

  .comparativa,
  .kit {
    padding: 24px 20px 16px;
  }

  .comparativa__titulo,
  .proceso__titulo {
    font-size: 22px;
  }

  .kit__caja {
    grid-template-columns: 1fr;
    padding: 30px 24px;
    border-radius: 22px;
    gap: 26px;
  }

  /* ESCALA — antes 27px propio de móvil. Pasa a --texto-h3 (24px),
     mismo criterio que .solucion__titulo en este breakpoint. */
  .kit__titulo {
    font-size: var(--texto-h3);
  }

  .kit .cta {
    justify-content: center;
  }

  .proceso {
    padding: 32px 20px 56px;
  }

  .pasos {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .faq {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 40px;
    padding-top: 32px;
  }
}
.solucion__ampliacion {
  border-top: 1px solid var(--color-destacada-linea);
  padding-top: 28px;
  margin-top: 28px;
}

.solucion__ampliacion-etiqueta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-naranja);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}