/* ═════════════════════════════════════════════════
   GRUPO DHOMPER (dhomper.com)
   La página de Grupo Dhomper usa style.css (tokens, barra, botones, hero, pie,
   tarjetas de producto) y aquí sólo van sus piezas propias. Mismo sistema de
   "bloques de color" que Tecnologías, con un tono más sobrio: más tinta y
   menos color. Cada marca tiene su color: Dhomper Tecnologías el azul y
   Grupo JBA el negro, con su logo en blanco.
   ═════════════════════════════════════════════════ */

/* Negro de Grupo JBA. En el tema oscuro se queda negro (no se invierte como
   --ink) y lleva un filo para despegarse del fondo. */
:root { --jba: #111111; }

/* ── Logo de Grupo Dhomper ─────────────────────── */
/* Dos versiones (generar-logo.ps1): "HOMPER" en tinta para fondos claros y en
   blanco para oscuros. En la barra y el hero el logo es un fondo (.g-marca)
   que cambia con el tema: el navegador sólo descarga la imagen de la regla
   que aplica, no las dos. El pie es oscuro en los dos temas, así que ahí va
   una sola <img> blanca con loading="lazy". */
.g-logo { display: inline-flex; align-items: center; text-decoration: none; }
.g-logo img { height: 34px; width: auto; }
.g-marca {
	display: block; height: 34px; aspect-ratio: 951 / 199;
	background: url('/img/grupo-dhomper.min.png') center / contain no-repeat;
	/* que no desaparezca al imprimir ni en modo de alto contraste */
	-webkit-print-color-adjust: exact; print-color-adjust: exact; forced-color-adjust: none;
}
[data-theme="dark"] .g-marca { background-image: url('/img/grupo-dhomper-blanco.min.png'); }

/* ── Hero: estructura del grupo ────────────────── */
.g-org { display: grid; justify-items: center; }
/* Grupo Dhomper va en blanco, sin color: el color es de sus marcas */
.g-org-top {
	width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
	background: var(--card); color: var(--text); border: 1.5px solid var(--line);
	border-radius: var(--r-lg); padding: 1.5rem 1.8rem;
}
.g-org-top .g-marca { height: 44px; }
.g-org-top small { font-size: .92rem; color: var(--muted); }

/* Conector ┴ de Grupo Dhomper a sus dos marcas. Las patas caen al centro de
   cada columna: (100% - el hueco de 14px) / 4 desde cada orilla. */
.g-org-split { position: relative; width: 100%; height: 34px; }
.g-org-split::before, .g-org-split::after { content: ''; position: absolute; border: 0 dashed var(--muted2); }
.g-org-split::before { left: 50%; top: 0; height: 50%; border-left-width: 2px; margin-left: -1px; }
.g-org-split::after { left: calc(25% - 4.5px); right: calc(25% - 4.5px); top: 50%; bottom: 0; border-width: 2px 2px 0; }

/* Dos columnas que comparten filas: con display: contents en cada rama, las
   tarjetas de las dos marcas quedan a la misma altura aunque una envuelva. */
.g-org-ramas {
	width: 100%; display: grid; gap: 10px 14px;
	grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column;
}
.g-org-rama { display: contents; }
.g-org-emp {
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .45rem; text-align: center;
	border-radius: var(--r-lg); padding: 1.1rem 1.2rem; text-decoration: none;
	transition: transform var(--t);
}
.g-org-emp:hover { transform: translateY(-2px); }
.g-org-emp small { font-size: .85rem; font-weight: 600; opacity: .8; line-height: 1.3; }
/* Los logos de las dos marcas van en blanco sobre su color */
.g-org-emp img { width: auto; max-width: 100%; filter: brightness(0) invert(1); }
.g-org-emp.tec { background: var(--blue); color: #fff; }
.g-org-emp.tec img { height: 26px; }
.g-org-emp.jba { background: var(--jba); color: #fff; }
.g-org-emp.jba img { height: 28px; }
[data-theme="dark"] .g-org-emp.jba, [data-theme="dark"] .g-emp.jba { box-shadow: inset 0 0 0 1.5px var(--line); }

.g-org-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.g-org-tiles > * {
	aspect-ratio: 1; border-radius: var(--r-md); display: grid; place-items: center;
	background: color-mix(in srgb, var(--pc) 16%, var(--card));
	transition: background var(--t), transform var(--t);
}
.g-org-tiles a:hover { background: color-mix(in srgb, var(--pc) 30%, var(--card)); transform: translateY(-2px); }
.g-org-tiles img { width: 52%; height: 52%; object-fit: contain; }
.g-org-tiles.jba > * { background: color-mix(in srgb, var(--ink) 7%, var(--card)); color: var(--ink); }
.g-org-tiles svg { width: 40%; height: 40%; }

/* ── Nosotros ──────────────────────────────────── */
.g-band { background: var(--bg2); border-radius: 40px; padding: clamp(2rem, 5vw, 4rem); }
.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.g-stat { border-radius: var(--r-lg); padding: 1.8rem; color: #111; }
.g-stat.ink { background: var(--ink); color: var(--bg); }
.g-stat b {
	display: block; font-family: var(--font-display); font-weight: 800;
	font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; margin-bottom: .4rem;
}
.g-stat span { font-weight: 600; opacity: .75; }

/* ── Marcas ────────────────────────────────────── */
.g-emps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 3.5rem; }
.g-emp {
	display: flex; flex-direction: column; align-items: flex-start;
	border-radius: 40px; padding: clamp(2rem, 4vw, 3rem); text-decoration: none;
	position: relative; overflow: hidden; transition: transform var(--t);
}
.g-emp:hover { transform: translateY(-4px); }
.g-emp > *:not(.cta-shape) { position: relative; }
.g-emp .cta-shape { width: 180px; height: 180px; left: auto; right: -70px; top: -80px; bottom: auto; }
.g-emp.tec { background: var(--blue); color: #fff; }
.g-emp.jba { background: var(--jba); color: #fff; }

.g-emp-tag { font-size: .85rem; font-weight: 600; padding: .35rem .85rem; border-radius: 999px; background: rgba(255,255,255,.16); }
.g-emp-logo { height: 44px; width: auto; max-width: 100%; margin: 1.6rem 0 1.2rem; align-self: center; filter: brightness(0) invert(1); }
.g-emp.jba .g-emp-logo { height: 48px; }
.g-emp p { font-size: 1.08rem; opacity: .9; }
.g-emp .chips span { background: rgba(255,255,255,.16); }

.g-emp-go { display: flex; align-items: center; gap: .8rem; font-weight: 600; margin-top: auto; padding-top: 1.8rem; }
.g-emp-go i, .g-datos-go i {
	width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
	display: grid; place-items: center; font-style: normal; transition: transform var(--t);
}
.g-emp-go i { background: #fff; }
.g-emp.tec .g-emp-go i { color: var(--blue); }
.g-emp.jba .g-emp-go i { color: var(--jba); }
.g-emp:hover .g-emp-go i { transform: rotate(-45deg); }

.g-sub { font-size: 1.6rem; margin-bottom: 1.4rem; }
.g-marcas .prod h3 { margin-bottom: 0; }

/* ── Contacto ──────────────────────────────────── */
.g-datos { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 2rem; }
.g-datos h3 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.g-datos dl { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1.5rem; }
.g-datos dt { font-size: .88rem; font-weight: 600; color: var(--muted); padding-top: .1rem; }
.g-datos dd { font-weight: 500; }
.g-datos dd a { text-decoration: none; }
.g-datos dd a:hover { text-decoration: underline; }
.g-datos-links { display: grid; gap: 10px; margin-top: 1.8rem; }
.g-datos-go {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: var(--bg2); border-radius: var(--r-md); padding: 1rem 1.2rem; text-decoration: none;
	transition: background var(--t);
}
.g-datos-go:hover { background: color-mix(in srgb, var(--blue) 12%, var(--bg2)); }
.g-datos-go strong { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; }
.g-datos-go span { font-weight: 600; }
.g-datos-go i { background: var(--ink); color: var(--bg); }
.g-datos-go:hover i { transform: rotate(-45deg); }

/* ── Vistas por ruta (/privacidad, /terminos) ──── */
/* index.html sirve también esas rutas: el <head> pone data-vista, aquí se
   oculta la portada y js/grupo.js pinta la vista en #vista. */
#vista { display: none; }
[data-vista] #inicio { display: none; }
[data-vista] #vista { display: block; min-height: 70vh; }

/* Acomodo de lectura de los textos legales */
.legal { max-width: 820px; margin: 0 auto; padding: 48px 16px 72px; line-height: 1.7; overflow-wrap: anywhere; }
.legal-head { margin-bottom: 36px; }
.legal-tag {
	display: inline-block; font-family: var(--font-mono); font-size: .75rem;
	letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
	background: var(--tag-bg); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 4px 10px; margin-bottom: 14px;
}
.legal h1 { font-family: var(--font-display); font-stretch: 112%; letter-spacing: -.02em; font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.15; margin-bottom: 10px; }
.legal-date { color: var(--muted2); font-size: .9rem; }
.legal h2 {
	font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3;
	margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--border);
}
.legal p, .legal li { color: var(--muted); font-size: .98rem; }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 1.2rem; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-card {
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 18px 20px; margin: 16px 0;
}
.legal-card p:last-child { margin-bottom: 0; }
.legal-error { text-align: center; padding-top: 4rem; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
	.g-org { max-width: 560px; }
	.g-stats { grid-template-columns: repeat(2, 1fr); }
	.g-emps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.g-logo img, .g-marca { height: 28px; }
	.g-org-top { padding: 1.2rem 1.3rem; border-radius: var(--r-md); }
	.g-org-top .g-marca { height: 36px; }
	.g-org-emp { padding: .9rem; border-radius: var(--r-md); }
	.g-org-emp small { font-size: .78rem; }
	.g-org-emp.tec img { height: 20px; }
	.g-org-emp.jba img { height: 22px; }
	.g-org-tiles { gap: 6px; }
	.g-org-tiles > * { border-radius: 12px; }
	.g-band { border-radius: 28px; padding: 2rem 1.2rem; }
	.g-stat { padding: 1.3rem; border-radius: var(--r-md); }
	.g-emp { border-radius: 28px; }
	.g-emp .cta-shape { width: 120px; height: 120px; right: -50px; top: -60px; }
	.g-emp-logo { height: 34px; }
	.g-emp.jba .g-emp-logo { height: 38px; }
	.g-datos { padding: 1.4rem; }
	.g-datos dl { grid-template-columns: 1fr; gap: .2rem; }
	.g-datos dd { margin-bottom: .7rem; }
}