/* ============================================================
   AVANTY — Sistema de diseño
   Estilos de página — Fase 2, Archivo 16
   Depende de variables.css, reset.css, components.css,
   layout.css y animations.css (deben cargarse antes).

   Este archivo es específico de PÁGINA, no de componente
   reutilizable — por eso vive separado de components.css. Por
   ahora solo cubre index.php; en la Fase 3 se agrega aquí mismo
   lo de servicios.php, soluciones.php, paquetes.php, etc.

   Usa los mismos quiebres que responsive.css (599px / 959px) para
   que el sistema responsive sea coherente aunque las reglas vivan
   en archivos distintos.
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-10);
}

.hero__inner {
  position: relative;
  z-index: 1; /* por encima de los glows */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-8);
}

.hero__glow {
  width: 420px;
  height: 420px;
}

.hero__glow--1 {
  top: -120px;
  left: -80px;
}

.hero__glow--2 {
  width: 280px;
  height: 280px;
  bottom: -60px;
  right: 10%;
}

.hero__title {
  font-size: var(--text-5xl);
  margin-block: var(--space-4) var(--space-5);
}

.hero__subtitle {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-sobre-oscuro);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.hero__text {
  color: var(--color-texto-sobre-oscuro-secundario);
  max-width: 52ch;
  margin-bottom: var(--space-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__visual-svg {
  width: 100%;
  height: auto;
}

@media (max-width: 959px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitle,
  .hero__text {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__visual {
    order: -1;
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (max-width: 599px) {
  .hero__visual {
    display: none; /* prioriza el texto en pantallas muy chicas */
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   PROBLEMAS
   Es un <ul> (semántica de lista correcta), pero se ve como
   cuadrícula de tarjetas — por eso quita bullets y padding acá,
   puntualmente, tal como quedó anotado en reset.css.
   ------------------------------------------------------------ */
.problems-list {
  list-style: none;
  padding: 0;
}

.problems-list__item {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-8);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-sobre-claro);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

.problems-list__item::before {
  content: '';
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-acento);
}

.problems-list__cierre {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-marca);
}

/* ------------------------------------------------------------
   RUTAS DE SOLUCIÓN
   ------------------------------------------------------------ */
.ruta-solucion__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-5);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento);
  border-radius: var(--radius-md);
}

.ruta-solucion__icono svg {
  width: 28px;
  height: 28px;
}

.ruta-solucion__titulo {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.ruta-solucion__descripcion {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------
   SERVICIOS
   ------------------------------------------------------------ */
.servicio-item {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-borde-sobre-claro);
}

.servicio-item__numero {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-family-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-acento);
}

.servicio-item__titulo {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.servicio-item__descripcion {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.servicios__cta {
  margin-top: var(--space-8);
  text-align: center;
}

/* ------------------------------------------------------------
   EMPRESAS POR TAMAÑO
   ------------------------------------------------------------ */
.tamano-empresa__texto {
  margin-top: var(--space-4);
  color: var(--color-texto-sobre-claro-secundario);
}

.tamanos__mensaje {
  margin-top: var(--space-8);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
}

/* ------------------------------------------------------------
   METODOLOGÍA
   auto-fit + minmax en vez de una cuenta fija de columnas: con 7
   pasos (número que no divide limpio en 3 o 4), esto acomoda solo
   la cantidad de columnas que realmente caben en cada ancho, sin
   necesitar una regla @media aparte solo para este bloque.
   ------------------------------------------------------------ */
.metodologia-flujo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6) var(--space-5);
}

/* ------------------------------------------------------------
   DEMOSTRACIONES
   ------------------------------------------------------------ */
.demo-item__titulo {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.demo-item__texto {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   SOBRE AVANTY
   .sobre-avanty se combina con .container en el HTML: esto
   angosta el max-width heredado (1280px) a 760px solo en esta
   sección, sin tocar la clase .container en sí.
   ------------------------------------------------------------ */
.sobre-avanty {
  max-width: 760px;
}

.sobre-avanty__texto p {
  margin-bottom: var(--space-5);
  font-size: var(--text-lg);
  color: var(--color-texto-sobre-claro-secundario);
}

.sobre-avanty__texto p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   PREGUNTAS FRECUENTES
   ------------------------------------------------------------ */
.faq-container {
  max-width: 800px;
}

.faq-list {
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------
   CTA FINAL
   Un destello dorado sutil detrás del texto (sección 8,
   "destellos dorados discretos") — para que este cierre se
   sienta distinto a las demás secciones oscuras, sin ser pesado.
   ------------------------------------------------------------ */
.cta-final {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-final::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(211, 163, 71, 0.12), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cta-final__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.cta-final__inner h2 {
  margin-bottom: var(--space-6);
  font-size: var(--text-3xl);
}
/* ------------------------------------------------------------
   DETALLE DE SERVICIO — Fase 3, exclusivo de servicios.php.
   Columna de info (ícono, número, título, intro) a la izquierda;
   lista de capacidades a la derecha. Se decidió NO alternar el
   lado entre servicios (sin "zigzag"): con 7 servicios seguidos,
   un orden consistente se lee más limpio que ir intercalando.
   ------------------------------------------------------------ */
.servicio-detalle__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-8);
  align-items: start;
}

.servicio-detalle__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento);
  border-radius: var(--radius-md);
}

.servicio-detalle__icono svg {
  width: 32px;
  height: 32px;
}

.servicio-detalle__numero {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-texto-sobre-claro-secundario);
}

.servicio-detalle h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
}

.servicio-detalle__intro {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 46ch;
}

/* Desplaza la lista un poco hacia abajo para que se sienta alineada
   con el título, no con el ícono — valor a ojo, se ajusta acá mismo
   si al verlo se nota descuadrado. */
.servicio-detalle__capacidades {
  padding-top: var(--space-6);
}

@media (max-width: 959px) {
  .servicio-detalle__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .servicio-detalle__capacidades {
    padding-top: 0;
  }
}
/* ------------------------------------------------------------
   DETALLE DE RUTA DE SOLUCIÓN — Fase 3, exclusivo de soluciones.php.
   Columna de info (ícono, número, título, para-quién, descripción)
   a la izquierda; columna lateral (servicios relacionados + tarjeta
   de paquete) a la derecha. Proporción de grilla invertida respecto
   a .servicio-detalle__grid a propósito: acá la columna angosta es
   la que tiene menos contenido real (badges + una tarjeta), no una
   lista larga de capacidades.
   ------------------------------------------------------------ */
.ruta-detalle__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.ruta-detalle__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento);
  border-radius: var(--radius-md);
}

.ruta-detalle__icono svg {
  width: 32px;
  height: 32px;
}

.ruta-detalle__numero {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-texto-sobre-claro-secundario);
}

.ruta-detalle h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
}

.ruta-detalle__para-quien {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-marca);
}

.ruta-detalle__descripcion {
  max-width: 50ch;
  color: var(--color-texto-sobre-claro-secundario);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   COLUMNA LATERAL — servicios relacionados + tarjeta de paquete,
   apilados con espacio entre sí.
   ------------------------------------------------------------ */
.ruta-detalle__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ruta-detalle__subtitulo {
  margin-bottom: var(--space-3);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-acento);
}

.ruta-detalle__servicios-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* .badge--servicio (components.css) es el mismo que usa index.php
   para "tamaños de empresa" ahí como <span>, sin link. Acá sí es
   un <a>, así que el hover se agrega puntualmente en este bloque
   en vez de en el componente — no todo uso de ese badge es
   interactivo. */
.ruta-detalle__servicios-lista a.badge--servicio {
  text-decoration: none;
  transition: background-color var(--transition-base) var(--easing-standard),
              color var(--transition-base) var(--easing-standard);
}

.ruta-detalle__servicios-lista a.badge--servicio:hover {
  background-color: var(--color-interactivo);
  color: var(--color-texto-sobre-oscuro);
}

.ruta-detalle__nota {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-texto-sobre-claro-secundario);
}

/* ------------------------------------------------------------
   TARJETA DE PAQUETE RELACIONADO — borde izquierdo dorado, mismo
   patrón que .alert en components.css (borde de color + fondo
   tenue), reutilizado acá para una tarjeta que sí apunta a una
   acción de conversión (ver el paquete), consistente con que el
   dorado se reserva para eso en el resto del proyecto.
   ------------------------------------------------------------ */
.ruta-detalle__paquete {
  padding: var(--space-5);
  background-color: rgba(211, 163, 71, 0.06);
  border-left: 3px solid var(--color-acento);
  border-radius: var(--radius-sm);
}

.ruta-detalle__paquete-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-texto-sobre-claro-secundario);
}

.ruta-detalle__paquete-nombre {
  margin-bottom: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

.ruta-detalle__paquete-teaser {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-texto-sobre-claro-secundario);
}

@media (max-width: 959px) {
  .ruta-detalle__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
/* ------------------------------------------------------------
   DETALLE DE PAQUETE — Fase 3, exclusivo de paquetes.php.
   Columna de info (más ancha: nombre, tagline, lista de "incluye",
   que puede tener hasta 14 ítems) a la izquierda; tarjeta de precio
   a la derecha, más angosta. La tarjeta de precio queda "sticky"
   solo en escritorio, para que no se pierda de vista mientras se
   hace scroll por una lista larga de capacidades — la misma idea
   de cualquier página de precios: el precio y el botón siempre
   visibles.
   ------------------------------------------------------------ */
.paquete-detalle__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.paquete-detalle__numero {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-texto-sobre-claro-secundario);
}

.paquete-detalle h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
}

.paquete-detalle__tagline {
  max-width: 52ch;
  margin-bottom: var(--space-7);
  font-size: var(--text-lg);
  color: var(--color-texto-sobre-claro-secundario);
}

.paquete-detalle__incluye-titulo {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-acento);
}

/* ------------------------------------------------------------
   TARJETA DE PRECIO
   ------------------------------------------------------------ */
.paquete-detalle__precio-card {
  padding: var(--space-6);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-sobre-claro);
  border-top: 3px solid var(--color-acento);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.paquete-detalle__precio-etiqueta {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-texto-sobre-claro-secundario);
}

.paquete-detalle__precio-principal {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-borde-sobre-claro);
  font-family: var(--font-family-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto-sobre-claro);
}

.paquete-detalle__precio-recurrente {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-sobre-claro);
}

/* Precio de referencia (paquete de cotización personalizada):
   cursiva a propósito — visualmente distinta del precio fijo de
   los otros cuatro paquetes, porque es una estimación, no un rango
   cerrado. */
.paquete-detalle__precio-referencia {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-texto-sobre-claro-secundario);
}

.paquete-detalle__precio-nota {
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-texto-sobre-claro-secundario);
}

.paquete-detalle__precio-card .btn {
  width: 100%;
}

@media (min-width: 960px) {
  .paquete-detalle__lateral {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

@media (max-width: 959px) {
  .paquete-detalle__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ------------------------------------------------------------
   CONDICIONES GENERALES
   Marcador cuadrado neutro a propósito, NO el check de
   .capability-list: varias condiciones son límites o negaciones
   ("Sin soporte ilimitado", "Sin ventas garantizadas"), y un check
   ahí daría a entender lo contrario de lo que dice el texto.
   ------------------------------------------------------------ */
.conditions-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
  max-width: 900px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

.conditions-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-texto-sobre-claro-secundario);
}

.conditions-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background-color: var(--color-texto-sobre-claro-secundario);
}

@media (max-width: 599px) {
  .conditions-list {
    grid-template-columns: 1fr;
  }
}
/* ------------------------------------------------------------
   NOSOTROS — Fase 3, exclusivo de nosotros.php.
   ------------------------------------------------------------ */
.valor-card__titulo {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.valor-card__texto {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Fila de disciplinas centrada, envuelta como .badge--servicio de
   components.css — mismo patrón que .ruta-detalle__servicios-lista
   en soluciones.php, pero centrado en vez de alineado a la
   izquierda, porque acá va debajo de un section__header--centrado. */
.about-disciplinas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  max-width: 800px;
  margin-inline: auto;
}
/* ------------------------------------------------------------
   PÁGINA DE DIAGNÓSTICO — Fase 3, exclusivo de diagnostico.php.
   Columna del formulario (más ancha) a la izquierda; panel lateral
   con precio y "qué incluye" a la derecha, sticky en escritorio —
   mismo patrón que .paquete-detalle__lateral, mismo motivo: que no
   se pierda de vista mientras se hace scroll por contenido largo.
   ------------------------------------------------------------ */
.diagnostico-page__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 960px) {
  .diagnostico-page__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

@media (max-width: 959px) {
  .diagnostico-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ------------------------------------------------------------
   TARJETA DEL PANEL LATERAL
   Mismo tratamiento visual que .paquete-detalle__precio-card
   (borde superior dorado, sombra) para que se sienta como la
   misma familia de tarjeta de precio en todo el sitio, no un
   componente nuevo inventado solo para esta página.
   ------------------------------------------------------------ */
.diagnostico-page__sidebar-card {
  padding: var(--space-6);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-sobre-claro);
  border-top: 3px solid var(--color-acento);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.diagnostico-page__sidebar-precio {
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-borde-sobre-claro);
  font-family: var(--font-family-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto-sobre-claro);
}

.diagnostico-page__sidebar-titulo {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-acento);
}

.diagnostico-page__sidebar-nota {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-texto-sobre-claro-secundario);
}
/* ------------------------------------------------------------
   PÁGINA DE CONTACTO — Fase 3, exclusivo de contacto.php.
   Misma proporción de grilla que .diagnostico-page__grid. Acá el
   panel lateral es bastante más corto (4 canales + ubicación), así
   que el sticky casi nunca se nota en escritorio — se deja por
   consistencia con el resto del sitio, no porque haga falta hoy.
   ------------------------------------------------------------ */
.contacto-page__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 960px) {
  .contacto-page__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

@media (max-width: 959px) {
  .contacto-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Nota que manda al diagnóstico a quien en realidad necesita la
   intake completa. Mismo lenguaje visual que .alert--info de
   components.css (borde izquierdo + fondo tenue) pero como clase
   propia, no esa misma: acá el fondo usa --color-fondo-claro-
   secundario en vez del tinte azul, para no competir visualmente
   con los enlaces normales del formulario. */
.contacto-page__nota-diagnostico {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-fondo-claro-secundario);
  border-left: 3px solid var(--color-interactivo);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-texto-sobre-claro-secundario);
}

.contacto-page__nota-diagnostico a {
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------
   CANALES DIRECTOS
   Mismo tratamiento que .paquete-detalle__precio-card y
   .diagnostico-page__sidebar-card (borde superior dorado, sombra)
   — misma familia visual de "panel lateral" en todo el sitio.
   ------------------------------------------------------------ */
.contacto-page__canales {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-sobre-claro);
  border-top: 3px solid var(--color-acento);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.contacto-page__canales-titulo {
  margin-bottom: var(--space-5);
  font-family: var(--font-family-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-acento);
}

.contacto-page__canal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  text-decoration: none;
  border-bottom: 1px solid var(--color-borde-sobre-claro);
  transition: transform var(--transition-base) var(--easing-standard);
}

.contacto-page__canal:first-child {
  padding-top: 0;
}

.contacto-page__canal:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contacto-page__canal:hover {
  transform: translateX(4px);
}

.contacto-page__canal-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento);
  border-radius: var(--radius-full);
}

.contacto-page__canal-icono svg {
  width: 20px;
  height: 20px;
}

.contacto-page__canal-icono--texto {
  font-family: var(--font-family-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.contacto-page__canal-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contacto-page__canal-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-texto-sobre-claro-secundario);
}

.contacto-page__canal-valor {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-sobre-claro);
}

/* ------------------------------------------------------------
   UBICACIÓN
   Fuera de la tarjeta de canales a propósito: no es un canal de
   contacto en sí —no hay oficina física a la que esto lleve
   (Fase 0)—, es solo información de contexto. Reutiliza
   .contacto-page__canal-icono pero sin el fondo oscuro, para que
   no se lea como un botón interactivo más.
   ------------------------------------------------------------ */
.contacto-page__ubicacion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-texto-sobre-claro-secundario);
}

.contacto-page__ubicacion .contacto-page__canal-icono {
  width: 36px;
  height: 36px;
  background-color: transparent;
  color: var(--color-texto-sobre-claro-secundario);
}

.contacto-page__ubicacion .contacto-page__canal-icono svg {
  width: 18px;
  height: 18px;
}
/* ------------------------------------------------------------
   GRACIAS (confirmación) — Fase 3, exclusivo de gracias.php.
   A diferencia del resto de las páginas internas, no usa
   .page-intro: es un momento de cierre, no de introducción, así
   que tiene su propio hero centrado y más corto.
   ------------------------------------------------------------ */
.gracias-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-10);
}

.gracias-hero__glow {
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
}

.gracias-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.gracias-hero__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  background-color: rgba(211, 163, 71, 0.12);
  border: 2px solid var(--color-acento);
  color: var(--color-acento);
  border-radius: var(--radius-full);
}

.gracias-hero__icono svg {
  width: 44px;
  height: 44px;
}

.gracias-hero h1 {
  margin-bottom: var(--space-4);
  font-size: var(--text-4xl);
}

.gracias-hero__mensaje {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
  font-size: var(--text-lg);
  color: var(--color-texto-sobre-oscuro-secundario);
}

.gracias-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

@media (max-width: 599px) {
  .gracias-hero__glow {
    width: 320px;
    height: 320px;
  }

  .gracias-hero__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .gracias-hero__acciones .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   TARJETAS "MIENTRAS TANTO"
   .card se usa acá como <a> (en el resto del sitio siempre fue un
   <div>) — reset.css le da color azul y subrayado a cualquier
   enlace por defecto, así que hay que anularlo puntualmente acá,
   igual que se hizo antes con .ruta-detalle__servicios-lista
   a.badge--servicio.
   ------------------------------------------------------------ */
.gracias-explorar__card {
  text-decoration: none;
  color: var(--color-texto-sobre-claro);
}

.gracias-explorar__titulo {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  transition: color var(--transition-base) var(--easing-standard);
}

.gracias-explorar__card:hover .gracias-explorar__titulo {
  color: var(--color-interactivo);
}

.gracias-explorar__texto {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
/* ------------------------------------------------------------
   404 — Fase 3, exclusivo de 404.php. Mismo patrón general que
   .gracias-hero (hero centrado, sin .page-intro), con su propio
   número grande de fondo, que gracias.php no necesita.
   ------------------------------------------------------------ */
.error-404 {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-10);
}

.error-404__glow {
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
}

.error-404__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.error-404__numero {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: 9rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-acento);
  opacity: 0.18;
}

.error-404 h1 {
  margin-bottom: var(--space-4);
  font-size: var(--text-4xl);
}

.error-404__mensaje {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
  font-size: var(--text-lg);
  color: var(--color-texto-sobre-oscuro-secundario);
}

.error-404__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

@media (max-width: 599px) {
  .error-404__glow {
    width: 320px;
    height: 320px;
  }

  .error-404__numero {
    font-size: 5.5rem;
  }

  .error-404__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .error-404__acciones .btn {
    width: 100%;
  }
}

/* Tarjetas "sigue explorando" — mismo tratamiento visual que
   .gracias-explorar__*, copiado y no compartido: mismo criterio
   ya aplicado entre .servicio-detalle y .ruta-detalle. */
.error-404__card {
  text-decoration: none;
  color: var(--color-texto-sobre-claro);
}

.error-404__card-titulo {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  transition: color var(--transition-base) var(--easing-standard);
}

.error-404__card:hover .error-404__card-titulo {
  color: var(--color-interactivo);
}

.error-404__card-texto {
  color: var(--color-texto-sobre-claro-secundario);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}