/* Páginas de empresa: /nosotros/, /precios/ y los textos legales (aviso legal, privacidad,
   cookies). Rediseño del 29-10-2026 con el patrón de /naxia-legal/: filas y rejillas de
   líneas finas en lugar de tarjetas, títulos en Outfit 300, texto en Inter y mucho aire.

   - Colores siempre con las variables del tema (--c-*): valen en claro y en oscuro.
   - Movimiento con la escala de transitions.dev: entrar 250 ms, salir 350 ms, misma curva;
     nada con prefers-reduced-motion. Todo se ve sin JavaScript.
   - La llamada final de /nosotros/ y /precios/ va sobre la seda (.seda-zona + js/seda.js).
   - Los textos legales solo cambian de tipografía (sección del final). */

:root {
  --em-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --em-rapido: 150ms;
  --em-entra: 250ms;
  --em-sale: 350ms;
  --em-tinta: rgb(var(--c-white));
  --em-texto: rgb(var(--c-gray-300));
  --em-suave: rgb(var(--c-gray-400));
  --em-tenue: rgb(var(--c-gray-500));
  --em-linea: rgb(var(--c-white) / 0.1);
  --em-linea-fuerte: rgb(var(--c-white) / 0.2);
  /* Acentos en canales RGB: índigo de NAXIA y azul de NAXIA Legal (el de /naxia-legal/). */
  --em-acento: var(--c-indigo-400);
  --em-legal: 157 183 228;
  /* El botón de ablalo va en el azul de NAXIA Legal, no en naranja (Sergio, 30-10-2026). */
  --em-sobre-legal: 11 14 22;
  --em-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --em-cuerpo: 'Inter', system-ui, sans-serif;
}
:root[data-theme="light"] { --em-legal: 31 59 110; --em-sobre-legal: 255 255 255; }

/* ---------- Base ---------- */
.em { font-family: var(--em-cuerpo); color: var(--em-tinta); font-size: 0.9375rem; line-height: 1.7; }
.em-contenedor { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .em-contenedor { padding-inline: 2rem; } }

.em-seccion { padding-block: clamp(4rem, 8vw, 6.5rem); border-top: 1px solid var(--em-linea); }
.em-seccion--breve { padding-block: clamp(3rem, 6vw, 4.5rem); }

.em-h1, .em-h2, .em-h3 { font-family: var(--em-display); color: var(--em-tinta); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.em-h1 { font-weight: 300; font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; }
.em-h2 { font-weight: 300; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem); line-height: 1.14; letter-spacing: -0.025em; }
.em-h3 { font-weight: 400; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.3; letter-spacing: -0.01em; }

.em-texto { color: var(--em-suave); }
.em-nota { margin-top: 1rem; font-size: 0.875rem; color: var(--em-suave); line-height: 1.6; max-width: 24rem; }

.em-enlace { color: rgb(var(--em-acento)); text-decoration: underline; text-decoration-color: rgb(var(--em-acento) / 0.35); text-underline-offset: 4px; transition: text-decoration-color var(--em-sale) var(--em-ease); }
.em-enlace:hover { text-decoration-color: rgb(var(--em-acento)); transition-duration: var(--em-entra); }
.em a:focus-visible, .em button:focus-visible, .em summary:focus-visible { outline: 2px solid rgb(var(--em-acento)); outline-offset: 3px; border-radius: 2px; }

/* Dos columnas en escritorio: el título a la izquierda, el contenido a la derecha. */
.em-dos { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .em-dos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
/* Cabecera de sección (título y una frase) con el mismo reparto, antes de un bloque a todo el ancho. */
.em-cabeza { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.em-cabeza > p { color: var(--em-suave); max-width: 38rem; }
@media (min-width: 1024px) { .em-cabeza > p { padding-top: 0.55rem; } }

/* ---------- Cabecera de la página ---------- */
.em-hero { padding-top: clamp(7rem, 13vw, 10rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
/* En Precios la cabecera va sobre la seda (30-10-2026), como el glosario y el blog: la tela se
   funde hacia abajo sin línea que la corte, y un velo del color de la página deja el texto legible
   en los dos temas. En Nosotros no: allí ya está la seda de la tarjeta de datos. */
.em-hero .seda-lienzo { -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0) 55%, transparent 100%); mask-image: linear-gradient(180deg, rgb(0 0 0) 55%, transparent 100%); }
.em-hero.seda-zona + .em-seccion { border-top-color: transparent; }
.em-hero.seda-zona::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--c-black) / 0.35) 0%, rgb(var(--c-black) / 0.55) 55%, rgb(var(--c-black) / 0.6) 100%); }
@media (max-width: 1023px) { .em-hero.seda-zona::after { background: rgb(var(--c-black) / 0.5); } }
.em-migas { font-size: 0.8125rem; color: var(--em-suave); margin-bottom: 2rem; }
.em-migas ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.em-migas a { transition: color var(--em-sale) var(--em-ease); }
.em-migas a:hover { color: var(--em-tinta); transition-duration: var(--em-entra); }
.em-migas [aria-current] { color: var(--em-texto); }
.em-entrada { font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); line-height: 1.65; font-weight: 300; color: var(--em-texto); max-width: 38rem; }
@media (min-width: 1024px) { .em-hero .em-entrada { padding-top: 0.6rem; } }
.em-fecha { margin-top: 1.75rem; font-size: 0.8125rem; color: var(--em-tenue); }

/* ---------- Ficha de datos (tabla de líneas finas) ---------- */
.em-ficha { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.em-ficha tr { border-top: 1px solid var(--em-linea); }
.em-ficha tr:last-child { border-bottom: 1px solid var(--em-linea); }
.em-ficha th, .em-ficha td { padding: 0.85rem 0; vertical-align: baseline; overflow-wrap: anywhere; line-height: 1.55; }
.em-ficha th { width: 40%; padding-right: 1.5rem; font-weight: 400; font-size: 0.875rem; color: var(--em-suave); }
.em-ficha td { color: var(--em-tinta); }

/* ---------- Fundadores ---------- */
.em-personas { display: grid; gap: 0 3rem; }
@media (min-width: 768px) { .em-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.em-persona { display: flex; flex-direction: column; padding-block: 1.75rem 2rem; border-top: 1px solid var(--em-linea); scroll-margin-top: 7rem; }
.em-persona-cabeza { display: flex; align-items: center; gap: 1.1rem; }
.em-retrato { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: none; }
@media (min-width: 640px) { .em-retrato { width: 4rem; height: 4rem; } }
.em-cargo { margin-top: 0.2rem; font-size: 0.875rem; color: var(--em-suave); line-height: 1.5; }
.em-bio { margin-top: 1.25rem; color: var(--em-suave); flex: 1; }
.em-persona .em-enlace { align-self: flex-start; margin-top: 1rem; font-size: 0.875rem; }

/* ---------- Índice de servicios (filas, no tarjetas) ---------- */
.em-indice { border-bottom: 1px solid var(--em-linea); }
.em-fila { --tono: var(--em-acento); position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.5rem 1rem; padding: 1.5rem 0.25rem; border-top: 1px solid var(--em-linea); transition: background-color var(--em-sale) var(--em-ease); }
.em-fila--legal { --tono: var(--em-legal); }
.em-fila:hover { background: rgb(var(--tono) / 0.045); transition-duration: var(--em-entra); }
.em-fila .em-fila-icono { font-size: 1.3rem; line-height: 1; color: rgb(var(--tono)); padding-top: 0.2rem; }
.em-fila-nombre { grid-column: 2; }
.em-fila-titulo { font-family: var(--em-display); font-weight: 400; font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.375rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--em-tinta); transition: transform var(--em-sale) var(--em-ease); }
.em-fila-etiqueta { margin-top: 0.3rem; font-size: 0.8125rem; color: rgb(var(--tono)); }
.em-fila-texto { grid-column: 2; color: var(--em-suave); }
.em-fila .em-mas { grid-column: 2; justify-self: start; margin-top: 0.25rem; }
@media (min-width: 900px) {
  .em-fila { grid-template-columns: 2.25rem minmax(0, 4fr) minmax(0, 6fr) 11rem; align-items: baseline; gap: 1.5rem; padding: 1.85rem 1rem; }
  .em-fila-texto { grid-column: 3; max-width: 36rem; }
  .em-fila .em-mas { grid-column: 4; justify-self: end; margin-top: 0.15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .em-fila:hover .em-fila-titulo { transform: translateX(6px); transition-duration: var(--em-entra); }
}

/* "Ver más" con flecha (receta Learn more hover): el asta crece y la punta avanza. */
.em-mas { display: inline-flex; align-items: center; gap: 0.45rem; color: rgb(var(--tono, var(--em-acento))); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.em-mas svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.em-mas path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.em-punta { transition: transform var(--em-sale) var(--em-ease); }
.em-asta { transform-origin: 10px 8px; transform: scaleX(0); transition: transform var(--em-sale) var(--em-ease); }
.em-fila:hover .em-punta { transform: translateX(3px); transition-duration: var(--em-entra); }
.em-fila:hover .em-asta { transform: translateX(3px) scaleX(1); transition-duration: var(--em-entra); }

/* ---------- Producto propio (ablalo) ---------- */
.em-producto { display: block; margin-top: 0.85rem; font-size: 0.8125rem; color: rgb(var(--em-legal)); }
.em-lineas { margin-top: 1.75rem; border-bottom: 1px solid var(--em-linea); }
.em-lineas li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--em-linea); color: var(--em-suave); }
.em-lineas .material-symbols-outlined { font-size: 1.25rem; line-height: 1.7rem; color: rgb(var(--em-legal)); }
.em-acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.em-boton-ablalo { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 0.8rem 1.5rem; font-weight: 600; font-size: 0.875rem; background: rgb(var(--em-legal)); color: rgb(var(--em-sobre-legal)); transition: opacity var(--em-sale) var(--em-ease), transform var(--em-sale) var(--em-ease); }
.em-boton-ablalo:hover { opacity: 0.9; transform: translateY(-1px); transition-duration: var(--em-entra); }
.em-enlace-sec { font-size: 0.875rem; color: var(--em-texto); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--em-linea-fuerte); transition: color var(--em-sale) var(--em-ease), text-decoration-color var(--em-sale) var(--em-ease); }
.em-enlace-sec:hover { color: var(--em-tinta); text-decoration-color: currentColor; transition-duration: var(--em-entra); }

/* ---------- Rejilla de líneas finas (puntos, factores) ---------- */
.em-rejilla { display: grid; gap: 0 2.5rem; }
@media (min-width: 640px) { .em-rejilla--2, .em-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .em-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-rejilla > li { padding-block: 1.25rem 1.75rem; border-top: 1px solid var(--em-linea); color: var(--em-suave); }
.em-rejilla strong, .em-item-titulo { display: block; margin-bottom: 0.4rem; font-weight: 500; color: var(--em-tinta); }
.em-item-texto { color: var(--em-suave); }

/* ---------- Pasos del presupuesto (número, línea y texto) ---------- */
.em-pasos { display: grid; gap: 0 2rem; counter-reset: none; }
@media (min-width: 640px) { .em-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .em-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.em-pasos > li { position: relative; padding-block: 2.6rem 1.75rem; color: var(--em-suave); }
.em-pasos > li::before { content: ""; position: absolute; top: 0.8rem; left: 2.2rem; right: 0; height: 1px; background: var(--em-linea-fuerte); }
.em-paso-num { position: absolute; top: 0; left: 0; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(var(--em-acento) / 0.6); color: rgb(var(--em-acento)); font-size: 0.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.em-pasos strong { display: block; margin-bottom: 0.4rem; font-weight: 500; color: var(--em-tinta); }

/* Respuesta de un solo párrafo junto a su pregunta (filas de /precios/). */
.em-respuesta { color: var(--em-texto); max-width: 40rem; }
@media (min-width: 1024px) { .em-respuesta { padding-top: 0.4rem; } }

/* ---------- Casos publicados ---------- */
.em-casos { display: grid; gap: 0 2.5rem; }
.em-caso { display: flex; flex-direction: column; padding-block: 1.5rem 2rem; border-top: 1px solid var(--em-linea); }
/* En tres columnas, subgrid: las cifras empiezan a la misma altura aunque un texto sea más largo. */
@media (min-width: 768px) {
  .em-casos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  @supports (grid-template-rows: subgrid) {
    .em-caso { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  }
}
.em-caso-sector { margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--em-suave); }
.em-caso-texto { margin-top: 0.6rem; color: var(--em-suave); flex: 1; }
.em-caso-cifra { margin-top: 1.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--em-suave); }
.em-cifra { display: block; margin-bottom: 0.45rem; font-family: var(--em-display); font-weight: 300; font-size: clamp(2.25rem, 1.85rem + 1.4vw, 3rem); line-height: 1; letter-spacing: -0.035em; color: var(--em-tinta); font-variant-numeric: tabular-nums; }

/* ---------- Eventos ---------- */
.em-eventos { display: grid; gap: 3rem 2.5rem; }
@media (min-width: 768px) { .em-eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.em-evento { display: flex; flex-direction: column; min-width: 0; }
.em-evento img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.em-evento .em-h3 { margin-top: 1.25rem; }
.em-evento p { margin-top: 0.6rem; color: var(--em-suave); }
.em-evento .em-enlace { align-self: flex-start; margin-top: 0.9rem; font-size: 0.875rem; }

/* ---------- Clientes ---------- */
.em-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.25rem 3rem; padding-block: 2.75rem; border-block: 1px solid var(--em-linea); }
@media (min-width: 640px) { .em-logos { gap: 2.5rem 3.5rem; } }

/* ---------- Preguntas frecuentes (receta Accordion, sobre <details>) ---------- */
.em-acordeones { border-bottom: 1px solid var(--em-linea); }
.em-acordeon { border-top: 1px solid var(--em-linea); }
.em-acordeon > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.15rem 0; cursor: pointer; font-weight: 500; color: var(--em-tinta); transition: color var(--em-sale) var(--em-ease); }
.em-acordeon > summary::-webkit-details-marker { display: none; }
.em-acordeon > summary:hover { color: rgb(var(--em-acento)); transition-duration: var(--em-entra); }
.em-acordeon .em-chevron { flex: none; font-size: 1.25rem; color: var(--em-suave); transition: transform var(--em-entra) var(--em-ease); }
.em-acordeon[open] .em-chevron { transform: rotate(180deg); }
.em-acordeon > p { padding-bottom: 1.35rem; color: var(--em-suave); max-width: 42rem; }
@supports selector(::details-content) {
  .em-acordeon::details-content { opacity: 0; transform: translateY(-4px); filter: blur(2px); transition: opacity var(--em-entra) var(--em-ease), transform var(--em-entra) var(--em-ease), filter var(--em-entra) var(--em-ease), content-visibility var(--em-entra) allow-discrete; }
  .em-acordeon[open]::details-content { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .em-acordeon::details-content { transition: none !important; }
  .em-acordeon .em-chevron { transition: none; }
}

/* ---------- Llamada final sobre la seda ----------
   El lienzo (z-index -1) va dentro de la sección; el velo de ::after, también por debajo
   del texto, rebaja los brillos de la tela justo detrás de las letras. */
.em-cta { padding-block: clamp(5rem, 10vw, 8rem); border-top: 1px solid var(--em-linea); background: rgb(var(--seda-a)); }
.em-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 90% at 22% 50%, rgb(var(--c-black) / 0.5) 0%, rgb(var(--c-black) / 0) 70%); }
.em-cta-rejilla { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .em-cta-rejilla { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4rem; } }
.em-cta-texto { margin-top: 1rem; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); line-height: 1.65; color: var(--em-texto); max-width: 34rem; }
.em-boton { display: inline-flex; align-items: center; justify-self: start; white-space: nowrap; border-radius: 999px; padding: 0.9rem 1.6rem; font-weight: 600; font-size: 0.9375rem; background: rgb(var(--c-white)); color: rgb(var(--c-black)); border: 1px solid rgb(var(--c-white) / 0.2); transition: transform var(--em-sale) var(--em-ease), background-color var(--em-sale) var(--em-ease); }
.em-boton:hover { transform: translateY(-1px); background: rgb(var(--c-white) / 0.88); transition-duration: var(--em-entra); }
.em-boton:active { transform: scale(0.98); transition-duration: var(--em-rapido); }
@media (prefers-reduced-motion: reduce) {
  .em-boton, .em-boton-ablalo { transition: background-color var(--em-sale) var(--em-ease), opacity var(--em-sale) var(--em-ease); }
  .em-boton:hover, .em-boton:active, .em-boton-ablalo:hover { transform: none; }
}

/* ---------- Textos legales: solo tipografía y legibilidad ----------
   Columna de lectura de unos 70 caracteres, texto en Inter a 15-16 px con interlineado
   amplio, títulos en Outfit y listas con sangría francesa. */
.em-legal { width: 100%; max-width: 46rem; margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) 1.25rem clamp(4rem, 8vw, 6rem); font-family: var(--em-cuerpo); font-size: 0.9375rem; line-height: 1.75; color: var(--em-texto); }
@media (min-width: 640px) { .em-legal { padding-inline: 1.5rem; font-size: 1rem; } }
.em-legal-h1 { margin-bottom: 2rem; font-family: var(--em-display); font-weight: 300; font-size: clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--em-tinta); text-wrap: balance; overflow-wrap: break-word; }
.em-legal-h2 { font-family: var(--em-display); font-weight: 400; font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--em-tinta); text-wrap: balance; }
.em-legal-texto > * + * { margin-top: 1rem; }
.em-legal-texto > .em-legal-h2 { margin-top: 2.75rem; }
.em-legal-texto > .em-legal-h2 + * { margin-top: 0.75rem; }
.em-legal-texto > hr { margin-block: 2.5rem; border: 0; border-top: 1px solid var(--em-linea); }
.em-legal strong { font-weight: 500; color: var(--em-tinta); }
.em-legal-texto a { text-underline-offset: 3px; }
.em-legal-fecha { font-size: 0.8125rem; color: var(--em-suave); }
.em-legal-datos > * + * { margin-top: 0.35rem; }
.em-legal-lista { list-style: disc; padding-left: 1.25rem; }
.em-legal-lista > li { padding-left: 0.25rem; }
.em-legal-lista > li + li { margin-top: 0.5rem; }
.em-legal-lista > li::marker { color: var(--em-tenue); }
.em-legal-entrada { font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); line-height: 1.65; color: var(--em-texto); }
.em-legal-boton { margin-top: 1.5rem; margin-bottom: 2.5rem; }
.em-legal-boton button { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.7rem 1.4rem; font-size: 0.875rem; font-weight: 600; background: rgb(var(--c-white)); color: rgb(var(--c-black)); border: 1px solid rgb(var(--c-white) / 0.2); transition: background-color var(--em-sale) var(--em-ease); }
.em-legal-boton button:hover { background: rgb(var(--c-white) / 0.88); transition-duration: var(--em-entra); }
.em-legal-boton button:focus-visible, .em-legal a:focus-visible { outline: 2px solid rgb(var(--em-acento)); outline-offset: 3px; }
.em-legal-tabla { width: 100%; min-width: 36rem; border-collapse: collapse; text-align: left; font-size: 0.8125rem; line-height: 1.55; }
.em-legal-tabla th, .em-legal-tabla td { padding: 0.75rem 1rem 0.75rem 0; vertical-align: top; border-bottom: 1px solid var(--em-linea); }
.em-legal-tabla th { font-weight: 400; color: var(--em-suave); border-bottom-color: var(--em-linea-fuerte); }
.em-legal-tabla td { color: var(--em-texto); }
.em-legal-tabla td:first-child { color: var(--em-tinta); white-space: nowrap; }