Uriel JarethandClaude Opus 5
0e0331c1fc
Reestructuración pedida por el cliente tras revisar la primera versión. Conversión: - Formulario de 14 campos a 4: nombre, correo, teléfono y mensaje. La clasificación de riesgo ya no se pregunta, se deduce del contexto de la página y viaja oculta. Menos fricción, misma riqueza para el análisis. - El inicio deja de bifurcar y empuja al catálogo: 36 llamados desembocan ahí, y las rutas por industria y escenario pasan a ser la forma de entrar al catálogo ya filtrado, en lugar de competir como destino. - Catálogo rehecho como tienda: barra lateral con filtros, búsqueda que acepta expresiones regulares, títulos que abren la ficha, un solo botón primario por tarjeta y el comparador detrás de un desplegable. - Ficha de producto orientada al cierre: bloque en lenguaje llano sobre si el equipo corresponde al caso, y "Cotizar este equipo" con el formulario precargado. Se retiraron los enlaces que sacaban del embudo a leer normas. - Todos los llamados se unifican en "Recibir cotización". - Widget de WhatsApp: nombre, teléfono, correo y mensaje libre. El texto que escribe la persona es el que viaja a la conversación. Doble audiencia: - 13 escenarios con la iconografía original de FSPM traducen un lugar reconocible a clases de fuego y productos, para quien no domina la terminología. La capa técnica se conserva para búsqueda. - Héroe con fotografía en todas las landings. Correcciones: - El contenedor moría al arrancar porque el CLI de Prisma no podía escribir sus motores; el chown ahora incluye /app/prisma-cli. - Iconos repetidos entre escenarios. El set original no tiene icono de cocina, así que ese escenario usa un marcador tipográfico explícito. - FIREMIKS no aparecía en ningún escenario. - Los ids de campo del formulario colisionaban con dos instancias por página. - Se documentó el despliegue, que faltaba por completo. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
561 lines
28 KiB
TypeScript
561 lines
28 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { FormularioContacto } from "@/components/formulario/FormularioContacto";
|
|
import { TarjetaEscenario } from "@/components/marca/IconoEscenario";
|
|
import { Migas } from "@/components/site/contenido/Migas";
|
|
import { FOTOS, HeroeLanding } from "@/components/site/HeroeLanding";
|
|
import { Revelar } from "@/components/site/Revelar";
|
|
import { EMPRESA, NORMAS, SITIO_URL } from "@/data/empresa";
|
|
import { ESCENARIOS, type Escenario } from "@/data/escenarios";
|
|
|
|
/**
|
|
* /preguntas-frecuentes
|
|
*
|
|
* Aquí llega quien tiene miedo de preguntar. Así que cada respuesta abre con
|
|
* una frase directa —la respuesta corta, sin condescendencia— y después
|
|
* desarrolla el detalle para quien lo necesita.
|
|
*
|
|
* Las preguntas vienen de la página real de FSPM. Las respuestas no se copian:
|
|
* donde la fuente afirma "no caduca", "20 años de garantía" o "no requiere
|
|
* recarga", la respuesta explica qué documento respalda eso y bajo qué
|
|
* condiciones. Es el mismo criterio del resto del sitio.
|
|
*
|
|
* El JSON-LD FAQPage se construye desde el mismo arreglo que se renderiza —
|
|
* respuesta corta incluida—, así que no puede desincronizarse de lo visible.
|
|
*/
|
|
|
|
const TITULO = "Preguntas frecuentes sobre extintores y FireAde 2000";
|
|
const DESCRIPCION =
|
|
"Respuestas directas sobre vida útil, garantía, recarga, clases de fuego, certificaciones UL y NFPA, precio y documentación. Cada respuesta dice qué documento la respalda y bajo qué condiciones.";
|
|
|
|
export const metadata: Metadata = {
|
|
title: TITULO,
|
|
description: DESCRIPCION,
|
|
alternates: { canonical: `${SITIO_URL}/preguntas-frecuentes` },
|
|
openGraph: {
|
|
title: `${TITULO} | ${EMPRESA.nombreCorto}`,
|
|
description: DESCRIPCION,
|
|
url: `${SITIO_URL}/preguntas-frecuentes`,
|
|
},
|
|
};
|
|
|
|
const MENSAJE_INICIAL = "Tengo una duda que no está en las preguntas frecuentes: ";
|
|
|
|
type Pregunta = {
|
|
id: string;
|
|
pregunta: string;
|
|
/** La respuesta en una frase. Lo primero que se lee al abrir. */
|
|
corta: string;
|
|
/** Párrafos en texto plano: alimentan la página y el JSON-LD. */
|
|
respuesta: string[];
|
|
};
|
|
|
|
type Grupo = {
|
|
id: string;
|
|
titulo: string;
|
|
descripcion: string;
|
|
preguntas: Pregunta[];
|
|
};
|
|
|
|
const GRUPOS: Grupo[] = [
|
|
{
|
|
id: "vida-util",
|
|
titulo: "Vida útil, garantía y recarga",
|
|
descripcion:
|
|
"Las tres afirmaciones que el estudio de marca señaló como el mayor riesgo comercial del sitio anterior. Aquí no se repiten: se explican.",
|
|
preguntas: [
|
|
{
|
|
id: "caduca",
|
|
pregunta: "¿Es cierto que el equipo no caduca?",
|
|
corta:
|
|
"El agente puede durar muchísimo; el recipiente que lo contiene sigue necesitando revisión. Son dos cosas distintas y conviene no mezclarlas.",
|
|
respuesta: [
|
|
"La información pública de FSPM afirma que FireAde 2000 tiene vida de anaquel ilimitada y que conserva sus propiedades incluso mezclado con agua. No repetimos esa afirmación como característica del producto porque una vida útil se demuestra con un documento, no con una frase.",
|
|
"Lo que respalda una respuesta seria es la carta técnica del fabricante referida al número de modelo, con las condiciones de almacenamiento y las circunstancias que la invalidan. Eso lo entregamos antes de cotizar.",
|
|
"Y aunque el agente conservara intactas sus propiedades, el recipiente, la válvula y el manómetro siguen sujetos a revisión periódica. Un equipo con agente vigente y válvula vencida no pasa una verificación.",
|
|
],
|
|
},
|
|
{
|
|
id: "recarga",
|
|
pregunta: "¿Entonces no requiere recarga?",
|
|
corta:
|
|
"Puede que no necesites recargarlo cada año, pero sí revisarlo. La revisión no desaparece nunca.",
|
|
respuesta: [
|
|
"La fuente presenta la ausencia de recarga como característica en varias páginas de producto, y en la de rociadores lo matiza ella misma: dice que al usarse con FireAde 2000 no necesita recarga anual porque el agente no tiene fecha de caducidad, pero que igual se recomienda una revisión anual.",
|
|
"Ese matiz es la respuesta. Confirmamos por escrito a qué se refiere exactamente la ausencia de recarga en tu modelo —al agente, al equipo completo, bajo qué condiciones— y qué obligaciones de mantenimiento subsisten.",
|
|
"En todo caso, la revisión periódica no desaparece. La NOM-154-SCFI-2005, referida por la NOM-002, establece que la revisión de los extintores debe hacerse cada mes.",
|
|
],
|
|
},
|
|
{
|
|
id: "garantia",
|
|
pregunta: "¿La garantía es de 20 años o de 15?",
|
|
corta:
|
|
"En la información pública aparecen las dos cifras, así que no publicamos ninguna: te entregamos el documento de garantía del modelo.",
|
|
respuesta: [
|
|
"Las páginas de producto mencionan veinte años y la sección de preguntas frecuentes menciona quince para los dispositivos de aplicación. Esa inconsistencia es exactamente la razón por la que no convertimos ninguna de las dos en un dato de venta.",
|
|
"Lo que sí entregamos es el documento de garantía del modelo, con plazo, cobertura, exclusiones y las obligaciones de mantenimiento que la conservan vigente. Un plazo sin condiciones es una cifra publicitaria, no una garantía.",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "agente",
|
|
titulo: "El agente FireAde 2000",
|
|
descripcion:
|
|
"Qué es, qué clases cubre y qué afirmaciones ambientales requieren documento antes de poder repetirse.",
|
|
preguntas: [
|
|
{
|
|
id: "afff",
|
|
pregunta: "¿FireAde 2000 es un espumógeno AFFF?",
|
|
corta:
|
|
"Está clasificado en esa familia, pero la etiqueta importa menos que la formulación concreta que te ofrecen.",
|
|
respuesta: [
|
|
"La fuente responde \"sí y no\": lo describe como clasificado en la familia AFFF y, al mismo tiempo, como una evolución tecnológica frente al AFFF tradicional basado en flúor. En el catálogo aparece como FireAde 2000 AR-AFFF, con una solución al 6% para los equipos Enforcer.",
|
|
"Para una decisión de compra, lo que resuelve la pregunta es la ficha técnica de la variante que se te ofrece y su hoja de datos de seguridad vigente, con la composición declarada. La categoría comercial no dice qué tan bien apaga lo que tú tienes.",
|
|
],
|
|
},
|
|
{
|
|
id: "clases",
|
|
pregunta: "¿Sirve para las cinco clases de fuego, A, B, C, D y K?",
|
|
corta:
|
|
"La fuente lo afirma de forma general, pero pone una condición en clase C. Cuando una afirmación trae condición, la condición es parte de la afirmación.",
|
|
respuesta: [
|
|
"Para fuegos de clase C la propia fuente declara la eficacia con agua desmineralizada. Ese detalle cambia la conversación: no es lo mismo comprar un equipo que funciona en tu tablero eléctrico que uno que funciona en un tablero con una condición de agua que tu operación no cumple.",
|
|
"En cada ficha de producto mostramos el riel de clases con lo que la fuente declara, no con lo que convendría declarar, y anotamos que las condiciones por clase se confirman en la ficha técnica del modelo: concentración, equipo y tipo de agua.",
|
|
"Hay productos del catálogo a los que deliberadamente no les atribuimos clases de fuego, como TrakAde y VaporAde Plus, porque la fuente no los presenta como agentes de extinción.",
|
|
],
|
|
},
|
|
{
|
|
id: "ambiental",
|
|
pregunta: "¿Es cierto que no es tóxico ni contaminante?",
|
|
corta:
|
|
"Son afirmaciones fuertes y verificables. Por eso pedimos ver los reportes antes de repetirlas.",
|
|
respuesta: [
|
|
"La fuente afirma que no contiene materiales tóxicos, que no es contaminante, que superó pruebas con organismos acuáticos y que su biodegradabilidad es prácticamente total en veinticinco días.",
|
|
"Lo que las sostiene es la hoja de datos de seguridad vigente y los reportes de laboratorio con método, alcance y fecha, referidos a la formulación exacta. Un resultado obtenido sobre una variante no se traslada automáticamente a otra.",
|
|
"Lo que no vamos a hacer es prometer que una formulación seguirá conforme a la regulación ambiental futura, como afirma la fuente original. Nadie puede sostener eso, y el estudio de marca lo señala como un riesgo reputacional.",
|
|
],
|
|
},
|
|
{
|
|
id: "enfriamiento",
|
|
pregunta: "¿Se puede aplicar de forma preventiva para enfriar equipo que no está ardiendo?",
|
|
corta: "La fuente describe ese uso, pero lo evaluamos caso por caso y no lo ofrecemos como capacidad general.",
|
|
respuesta: [
|
|
"La fuente menciona ese uso en transformadores y en maquinaria con carga térmica de riesgo, y también en instalaciones para las que no existe documentación en la extracción pública que revisamos.",
|
|
"Por eso limitamos la respuesta a lo que puede sostenerse: la aplicación preventiva de enfriamiento se evalúa con la ficha técnica del agente y con el criterio del responsable del equipo que se va a rociar. Si tu caso es uno de esos, dinos exactamente cuál y respondemos sobre él.",
|
|
],
|
|
},
|
|
{
|
|
id: "compatibilidad",
|
|
pregunta: "¿Es compatible con mi equipo instalado y con agua salada?",
|
|
corta:
|
|
"La fuente afirma compatibilidad con cualquier equipamiento y con todo tipo de aguas. La pregunta útil es más estrecha que eso.",
|
|
respuesta: [
|
|
"Lo que hay que responder no es si es compatible en general, sino si es compatible con tu equipo, del fabricante que sea, en la concentración que tu sistema dosifica.",
|
|
"Eso se confirma cruzando la ficha técnica del agente con el manual de tu equipo, y es parte del trabajo previo a una propuesta. Si tienes el modelo del sistema a mano, es el dato que más acelera la respuesta.",
|
|
],
|
|
},
|
|
{
|
|
id: "mezcla",
|
|
pregunta: "¿Puedo mezclarlo con el espumógeno que ya tengo?",
|
|
corta: "No. Y la propia fuente lo desaconseja.",
|
|
respuesta: [
|
|
"Sin un dato de compatibilidad documentado, la mezcla compromete el desempeño y muy probablemente la garantía.",
|
|
"Si tienes concentrado de otra marca en el tanque, lo correcto es planear la sustitución y el manejo del residuo, no la mezcla. La disposición del concentrado que sale es un tema técnico y de costo que conviene resolver antes de la compra, no después.",
|
|
],
|
|
},
|
|
{
|
|
id: "limpieza",
|
|
pregunta: "¿Qué implica la limpieza después de usarlo?",
|
|
corta:
|
|
"La fuente dice que basta agua. Ten en cuenta que el residuo no es solo agente: es agente más lo que se estaba quemando.",
|
|
respuesta: [
|
|
"La fuente indica que el agente no es corrosivo, que su pH es prácticamente neutro y que la limpieza se resuelve con agua.",
|
|
"El documento que respalda eso es la hoja de datos de seguridad, y es también el que dice cómo manejar el residuo según el material sobre el que se aplicó. Después de un incendio esa distinción decide si el residuo se va al drenaje o se maneja como residuo peligroso.",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "equipos",
|
|
titulo: "Los equipos",
|
|
descripcion: "Alcance declarado, certificaciones y cómo elegir sin sobredimensionar la compra.",
|
|
preguntas: [
|
|
{
|
|
id: "alcance",
|
|
pregunta: "¿Cuál es el alcance real de un extintor Enforcer?",
|
|
corta:
|
|
"La fuente declara más de 10 metros. Lo publicamos con esa etiqueta y no lo convertimos en una cifra exacta.",
|
|
respuesta: [
|
|
"Un alcance solo significa algo junto con las condiciones de la medición: presión, boquilla, ángulo y agente.",
|
|
"Eso viene en la ficha técnica del modelo, y es lo que pedimos antes de proponer una distribución de equipo. Distribuir con un alcance sin condiciones es como distribuir con un plano sin escala.",
|
|
],
|
|
},
|
|
{
|
|
id: "certificaciones",
|
|
pregunta: "¿Los equipos tienen certificación UL o cumplen NFPA?",
|
|
corta:
|
|
"Hay referencias enumeradas, y una referencia no es un certificado. Te entregamos el que corresponde al modelo que se te ofrece.",
|
|
respuesta: [
|
|
"La información pública de FSPM enumera referencias como UL 162, UL 711, NFPA 11, NFPA 16, NFPA 18, DIN EN 1568-3 y LASTFIRE, entre otras. También publica algunos certificados en PDF, pero referidos al concentrado espumógeno y al agente humectante, no a un número de modelo de equipo.",
|
|
"Un listado aplica a una formulación o a un modelo concreto, con expediente, alcance y fecha, y no se traslada al resto del catálogo. Lo que entregamos es el certificado que corresponde al modelo que se te está ofreciendo.",
|
|
"También conviene decirlo con claridad: ninguna norma sustituye a otra. Un listado UL no equivale a una NOM mexicana, y una prueba ambiental no acredita desempeño de extinción.",
|
|
],
|
|
},
|
|
{
|
|
id: "elegir",
|
|
pregunta: "¿Cómo sé qué equipo me corresponde?",
|
|
corta:
|
|
"Con tres respuestas: qué se puede quemar en cada área, quién va a operar el equipo y qué documentación te van a pedir.",
|
|
respuesta: [
|
|
"La primera define la clase de fuego y por tanto el agente. La segunda define si el equipo debe ser portátil, móvil, fijo o de activación automática. La tercera define el expediente.",
|
|
"El catálogo está construido para responder eso: se filtra por clase de fuego y por aplicación, no por nombre de producto. Si no sabes ninguna de las tres, el escenario de tu instalación es suficiente para empezar.",
|
|
],
|
|
},
|
|
{
|
|
id: "precio",
|
|
pregunta: "¿Cuánto cuesta?",
|
|
corta:
|
|
"No publicamos precios. Dependen de la configuración, la cantidad, la instalación y el servicio, y preferimos decírtelo antes de que llenes un formulario.",
|
|
respuesta: [
|
|
"Lo que sí podemos anticipar es el criterio de costo: el error caro casi nunca es el precio unitario. Es comprar equipo que no corresponde a la clase de fuego del área, o distribuirlo por metros cuadrados en lugar de por distancia de recorrido.",
|
|
"En la respuesta a una solicitud va la configuración propuesta y qué se puede recortar sin perder cumplimiento. Eso es más útil que una lista de precios.",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "normativa",
|
|
titulo: "Normativa y documentación",
|
|
descripcion: "Lo que una verificación pide y lo que debe acompañar a una compra.",
|
|
preguntas: [
|
|
{
|
|
id: "nom-002",
|
|
pregunta: "¿Qué me exige la NOM-002-STPS-2010?",
|
|
corta:
|
|
"Si tienes gente trabajando, te aplica. Lo que cambia entre una oficina y una planta es el nivel de riesgo con el que se clasifica el centro.",
|
|
respuesta: [
|
|
NORMAS[0].aplica,
|
|
"En términos prácticos, la clasificación del riesgo va primero y condiciona todo lo demás. Los umbrales de esa clasificación dependen del material y de la superficie de cada centro de trabajo, así que no los reproducimos aquí.",
|
|
"Es una referencia orientativa. La normativa puede complementarse por estado y municipio, y esta página no sustituye un dictamen técnico ni jurídico.",
|
|
],
|
|
},
|
|
{
|
|
id: "revision",
|
|
pregunta: "¿Cada cuánto hay que revisar los extintores?",
|
|
corta: "Cada mes.",
|
|
respuesta: [
|
|
NORMAS[1].aplica,
|
|
"Es la obligación recurrente que más seguido se pierde, y casi nunca por desconocerla: se pierde porque nadie quedó a cargo de la bitácora. Por eso, en una entrega, el formato de bitácora y el responsable nombrado son parte del alcance.",
|
|
],
|
|
},
|
|
{
|
|
id: "documentos",
|
|
pregunta: "¿Qué documentos debo exigir en una compra?",
|
|
corta:
|
|
"Ficha técnica, hoja de seguridad del agente, certificado por modelo, garantía con condiciones, manual y bitácora. Y dos más si hay instalación o personal que operar.",
|
|
respuesta: [
|
|
"Cuando hay algo que instalar, se agrega la constancia de instalación y puesta en marcha; cuando hay personal que operar, la constancia de capacitación.",
|
|
"No todos aplican a todos los productos. El centro de evidencia tiene el índice de qué corresponde según la categoría, en una tabla que puedes llevarte a la conversación con cualquier proveedor.",
|
|
],
|
|
},
|
|
{
|
|
id: "descargas",
|
|
pregunta: "¿Por qué no hay documentos para descargar en este sitio?",
|
|
corta:
|
|
"Porque no vamos a poner botones que no llevan a ningún archivo. Los documentos se entregan por número de modelo, a solicitud.",
|
|
respuesta: [
|
|
"En la extracción pública del sitio de FSPM no apareció un índice de documentos asociado a números de modelo, y simular uno sería peor que no tenerlo.",
|
|
"Los documentos se entregan junto con la propuesta técnica. Y cuando un documento no exista o no cubra lo que se afirma, lo decimos en la propuesta en lugar de omitirlo.",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
/** Escenarios como entrada alternativa para quien no sabe qué preguntar. */
|
|
const SLUGS_ENTRADA = [
|
|
"oficinas",
|
|
"cocinas-hoteles",
|
|
"gasolineras",
|
|
"bodegas",
|
|
"industria",
|
|
"hogar",
|
|
];
|
|
|
|
const ESCENARIOS_ENTRADA = ESCENARIOS.filter((e) => SLUGS_ENTRADA.includes(e.slug));
|
|
|
|
function hrefEscenario(escenario: Escenario): string {
|
|
if (escenario.industria) return `/soluciones/${escenario.industria}`;
|
|
const categoria = escenario.categorias[0];
|
|
return categoria ? `/catalogo/${categoria}` : "/catalogo";
|
|
}
|
|
|
|
export default function PaginaPreguntas() {
|
|
const todas = GRUPOS.flatMap((g) => g.preguntas);
|
|
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
mainEntity: todas.map((p) => ({
|
|
"@type": "Question",
|
|
name: p.pregunta,
|
|
acceptedAnswer: {
|
|
"@type": "Answer",
|
|
text: [p.corta, ...p.respuesta].join(" "),
|
|
},
|
|
})),
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
|
|
<HeroeLanding
|
|
antes={<Migas actual="Preguntas frecuentes" />}
|
|
eyebrow="Preguntas frecuentes"
|
|
titulo="Pregunta lo que quieras preguntar"
|
|
entrada="Cada respuesta abre con una frase directa y sigue con el detalle. No hay pregunta obvia: la mayoría de los errores caros de esta industria empiezan por no preguntar."
|
|
foto={FOTOS.practica}
|
|
enfoque="72% 45%"
|
|
altura="alto"
|
|
prioridad
|
|
>
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
|
<Link href="#preguntar" className="btn btn-signal w-full sm:w-auto">
|
|
Hacer mi pregunta
|
|
</Link>
|
|
<p className="font-mono text-[0.625rem] uppercase leading-relaxed tracking-[0.1em] text-faint">
|
|
{todas.length} preguntas · {GRUPOS.length} temas
|
|
</p>
|
|
</div>
|
|
</HeroeLanding>
|
|
|
|
{/* ---------- por qué las respuestas no son las de la competencia ---------- */}
|
|
<section className="grid-bg-lite bg-paper py-12 sm:py-16" aria-labelledby="criterio-titulo">
|
|
<div className="shell">
|
|
<div className="max-w-3xl">
|
|
<p className="eyebrow mb-4">Cómo leer estas respuestas</p>
|
|
<h2
|
|
id="criterio-titulo"
|
|
className="font-display text-2xl font-extrabold text-deep sm:text-3xl"
|
|
>
|
|
Las preguntas son las del sitio original. Las respuestas, no
|
|
</h2>
|
|
<p className="mt-4 text-sm leading-relaxed text-deep-muted sm:text-base">
|
|
Donde la fuente afirmaba algo sin condiciones —que no caduca, que no requiere recarga,
|
|
que tiene veinte años de garantía— aquí se explica qué documento lo respalda y qué
|
|
queda pendiente de confirmar por número de modelo. Es menos vistoso y sirve mucho más
|
|
el día que llega la auditoría.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ---------- los grupos ---------- */}
|
|
{GRUPOS.map((grupo, indice) => {
|
|
const claro = indice % 2 !== 0;
|
|
return (
|
|
<section
|
|
key={grupo.id}
|
|
id={grupo.id}
|
|
aria-labelledby={`grupo-${grupo.id}`}
|
|
className={[
|
|
"border-t border-rule py-14 sm:py-20",
|
|
claro ? "grid-bg-lite bg-paper" : "bg-ink",
|
|
].join(" ")}
|
|
>
|
|
<div className="shell">
|
|
<div className="grid gap-10 lg:grid-cols-[1fr_1.6fr] lg:gap-14">
|
|
<Revelar className="lg:sticky lg:top-24 lg:self-start">
|
|
<p
|
|
className={[
|
|
"font-mono text-[0.625rem] uppercase tracking-[0.16em]",
|
|
claro ? "text-deep-muted" : "text-faint",
|
|
].join(" ")}
|
|
>
|
|
Tema {String(indice + 1).padStart(2, "0")}
|
|
</p>
|
|
<h2
|
|
id={`grupo-${grupo.id}`}
|
|
className={[
|
|
"mt-4 font-display text-2xl font-extrabold leading-tight sm:text-3xl",
|
|
claro ? "text-deep" : "text-bright",
|
|
].join(" ")}
|
|
>
|
|
{grupo.titulo}
|
|
</h2>
|
|
<p
|
|
className={[
|
|
"mt-4 text-sm leading-relaxed",
|
|
claro ? "text-deep-muted" : "text-muted",
|
|
].join(" ")}
|
|
>
|
|
{grupo.descripcion}
|
|
</p>
|
|
</Revelar>
|
|
|
|
<div className="space-y-3">
|
|
{grupo.preguntas.map((pregunta) => (
|
|
<details
|
|
key={pregunta.id}
|
|
id={pregunta.id}
|
|
className={[
|
|
"group scroll-mt-28 rounded-[6px] border [-webkit-tap-highlight-color:transparent]",
|
|
claro ? "border-rule-lite bg-white" : "border-rule bg-ink-2",
|
|
].join(" ")}
|
|
>
|
|
<summary className="flex cursor-pointer list-none [&::-webkit-details-marker]:hidden [-webkit-tap-highlight-color:transparent] items-start justify-between gap-4 px-5 py-4 sm:px-6 sm:py-5">
|
|
<span
|
|
className={[
|
|
"font-display text-base font-bold leading-snug sm:text-lg",
|
|
claro ? "text-deep" : "text-bright",
|
|
].join(" ")}
|
|
>
|
|
{pregunta.pregunta}
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className={[
|
|
"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-[2px] border font-mono text-sm transition-transform duration-200 group-open:rotate-45",
|
|
claro ? "border-rule-lite text-deep-muted" : "border-rule-2 text-muted",
|
|
].join(" ")}
|
|
>
|
|
+
|
|
</span>
|
|
</summary>
|
|
|
|
<div
|
|
className={[
|
|
"border-t px-5 pb-6 pt-5 sm:px-6",
|
|
claro ? "border-rule-lite" : "border-rule",
|
|
].join(" ")}
|
|
>
|
|
<p
|
|
className={[
|
|
"border-l-2 border-l-signal pl-4 text-base leading-relaxed",
|
|
claro ? "text-deep" : "text-bright",
|
|
].join(" ")}
|
|
>
|
|
{pregunta.corta}
|
|
</p>
|
|
|
|
<div className="mt-5 space-y-4">
|
|
{pregunta.respuesta.map((parrafo) => (
|
|
<p
|
|
key={parrafo.slice(0, 48)}
|
|
className={[
|
|
"text-sm leading-relaxed",
|
|
claro ? "text-deep-muted" : "text-muted",
|
|
].join(" ")}
|
|
>
|
|
{parrafo}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
|
|
{/* ---------- entrada por escenario, para quien no sabe qué preguntar ---------- */}
|
|
<section
|
|
className="border-t border-rule bg-ink-2 py-14 sm:py-20"
|
|
aria-labelledby="escenarios-titulo"
|
|
>
|
|
<div className="shell">
|
|
<Revelar>
|
|
<p className="eyebrow eyebrow-muted mb-4">Otra forma de empezar</p>
|
|
<h2
|
|
id="escenarios-titulo"
|
|
className="max-w-2xl font-display text-2xl font-extrabold sm:text-3xl"
|
|
>
|
|
Si no sabes qué preguntar, empieza por tu lugar
|
|
</h2>
|
|
<p className="mt-4 max-w-2xl text-sm leading-relaxed text-muted sm:text-base">
|
|
No necesitas conocer las clases de fuego para saber qué te corresponde. Elige el lugar
|
|
que se parece al tuyo y de ahí sale el resto.
|
|
</p>
|
|
</Revelar>
|
|
|
|
<ul className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{ESCENARIOS_ENTRADA.map((escenario) => (
|
|
<li key={escenario.slug} className="grid">
|
|
<TarjetaEscenario escenario={escenario} href={hrefEscenario(escenario)} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ---------- conversión ---------- */}
|
|
<section
|
|
id="preguntar"
|
|
className="grid-bg-lite border-t border-rule bg-paper py-14 sm:py-20"
|
|
aria-labelledby="preguntar-titulo"
|
|
>
|
|
<div className="shell">
|
|
<div className="grid gap-10 lg:grid-cols-[1fr_1.05fr] lg:items-start lg:gap-16">
|
|
<div>
|
|
<Revelar>
|
|
<p className="eyebrow mb-4">Si tu pregunta no está aquí</p>
|
|
<h2
|
|
id="preguntar-titulo"
|
|
className="font-display text-2xl font-extrabold text-deep sm:text-3xl"
|
|
>
|
|
Pregúntala tal cual, con tus palabras
|
|
</h2>
|
|
<p className="mt-4 text-sm leading-relaxed text-deep-muted sm:text-base">
|
|
No hace falta que uses el término técnico correcto. Si la respuesta depende de un
|
|
documento que no tenemos, te lo decimos: es más útil que una respuesta cómoda.
|
|
</p>
|
|
</Revelar>
|
|
|
|
<hr className="hair-lite my-8" />
|
|
|
|
<h3 className="font-mono text-[0.6875rem] uppercase tracking-[0.16em] text-deep-muted">
|
|
Antes de escribir, quizá ya está aquí
|
|
</h3>
|
|
<ul className="mt-4 flex flex-wrap gap-2">
|
|
{[
|
|
{ href: "/cumplimiento-nom-002", label: "Cumplimiento NOM-002" },
|
|
{ href: "/evidencia", label: "Documentación técnica" },
|
|
{ href: "/catalogo", label: "Catálogo" },
|
|
{ href: "/casos", label: "Casos de aplicación" },
|
|
].map((enlace) => (
|
|
<li key={enlace.href}>
|
|
<Link
|
|
href={enlace.href}
|
|
className="badge !border-rule-lite !text-deep-muted hover:!border-signal hover:!text-deep [-webkit-tap-highlight-color:transparent]"
|
|
>
|
|
{enlace.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<FormularioContacto
|
|
id="formulario-preguntas"
|
|
canal="catalogo"
|
|
variante="claro"
|
|
titulo="Hacer mi pregunta"
|
|
descripcion="Completa la frase del mensaje con tu duda, como la dirías en voz alta. Respondemos con el dato y con el documento que lo respalda."
|
|
mensajeInicial={MENSAJE_INICIAL}
|
|
textoBoton="Enviar mi pregunta"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|