/* =========================================================================
   tuNFC · portada, revisión de William (14-nov-2026)
   Hero que explica qué es NFC y qué hace con un toque, con dos llamados
   («Comprar ahora» y «Quiero ser distribuidor»), los 3 pasos y la fila de opciones.
   Solo lo carga index.php, después de t3.css: usa sus fichas (--t3-*) y sus reglas
   (solo se anima transform/opacity, hover dentro de (hover:hover), toques >= 44 px).
   ========================================================================= */

/* ---------- hero ---------- */
/* El celular girado de la escena se salía ~19 px a la derecha en anchos de 360–390 px con barra de
   desplazamiento (también en producción): se recorta en el borde y no hay scroll horizontal. */
.hx { overflow-x: clip; }
.hx .hx-titulo { font-size: clamp(2.4rem, 4.4vw + 1rem, 4.75rem); }
.hx .hx-bajada { max-width: 44ch; }
.hx .hx-bajada strong { color: var(--t3-tinta); font-weight: 600; }

.hx-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 22px; margin-top: 22px; }
.hx-acciones li { display: flex; align-items: center; gap: 10px; font: 500 1rem/1.25 var(--t3-texto); color: var(--t3-tinta); }
.hx-acciones svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--t3-menta);
  fill: none; stroke: var(--t3-verde-os); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-acciones li:first-child svg { fill: var(--t3-verde-os); stroke: none; }

.hx-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.hx-comprar { min-height: 64px; padding: 18px 34px; font-size: 1.1875rem; border-radius: 16px; gap: 10px;
  box-shadow: 0 10px 24px -12px rgba(14,138,87,.75); }
.hx-comprar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 180ms var(--t3-sale); }
.hx-distribuidor { min-height: 56px; padding: 14px 24px; border-width: 1.5px; border-color: var(--t3-tinta); }
@media (hover: hover) and (pointer: fine) {
  .hx-comprar:hover svg { transform: translateX(3px); }
  .hx-distribuidor:hover { background: var(--t3-tinta); color: #fff; }
}
.hx-precio { margin-top: 18px; font-size: .9375rem; color: var(--t3-tinta-2); }
.hx-precio .t3-precio { font-size: 1.1875rem; color: var(--t3-tinta); }

/* ---------- cómo funciona: el paso 1 son tarjetas dibujadas (sin foto que descargar) ---------- */
.hx-pasos__arte { display: grid; place-items: center; container-type: inline-size;
  background: radial-gradient(80% 70% at 30% 25%, color-mix(in srgb, var(--t3-tarjeta) 18%, #fff), transparent 70%), #E7EBE5 !important; }
.hx-pasos__arte .t3-tj { position: absolute; }
.hx-pasos__arte .t3-tj:nth-child(1) { --w: 56cqw; left: 10%; top: 22%; rotate: -8deg; }
.hx-pasos__arte .t3-tj:nth-child(2) { --w: 27cqw; left: 62%; top: 12%; rotate: 8deg; }

/* ---------- la fila de opciones ---------- */
.hx-opciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(28px, 4vw, 44px); }
.hx-op { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; border-radius: var(--t3-r-3);
  background: var(--t3-blanco); border: 1px solid var(--t3-linea); }
.hx-op h3 { font-size: 1.3125rem; letter-spacing: -.015em; margin-top: 6px; }
.hx-op > p { color: var(--t3-tinta-2); font-size: .9688rem; line-height: 1.45; }
.hx-op .hx-op__precio { margin-top: auto; padding-top: 6px; color: var(--t3-tinta-2); font-size: .9375rem; }
.hx-op__precio .t3-precio { font-size: 1.375rem; color: var(--t3-tinta); }
.hx-op__ir { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: 12px;
  background: var(--t3-tinta); color: #fff; font-weight: 600; text-decoration: none; transition: transform 160ms var(--t3-sale); }
.hx-op__ir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toda la ficha lleva al producto */
.hx-op__ir:active { transform: scale(.97); }
.hx-op__extra, .hx-op__lista a { position: relative; z-index: 1; }
.hx-op__extra { font-size: .9375rem; font-weight: 600; color: var(--t3-verde-os); text-align: center; padding: 6px 0 0; }
.hx-op__arte { position: relative; height: 150px; border-radius: 12px; overflow: hidden; container-type: inline-size;
  display: grid; place-items: center; background: #E7EBE5; }
.hx-op--resenas .hx-op__arte { background: var(--t3-noche); }
.hx-op--resenas .hx-op__arte .t3-tj { --w: 74px; rotate: 6deg; }
.hx-op--perfil .hx-op__arte { background: radial-gradient(80% 80% at 30% 20%, color-mix(in srgb, var(--t3-tarjeta) 22%, #fff), #E7EBE5 70%); }
.hx-op--perfil .hx-op__arte .t3-tj { --w: min(190px, 76cqw); rotate: -7deg; }
.hx-op__arte--foto { background: #fff; }
.hx-op__arte--foto img { width: 100%; height: 100%; object-fit: contain; }
.hx-op__arte--pila .t3-tj { position: absolute; --w: min(150px, 58cqw); }
.hx-op__arte--pila .t3-tj:nth-child(1) { left: 12%; top: 16%; rotate: -9deg; }
.hx-op__arte--pila .t3-tj:nth-child(2) { left: 30%; top: 34%; rotate: 5deg; }
.hx-op__lista { display: grid; gap: 2px; margin-top: 2px; }
.hx-op__lista li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--t3-linea); font-size: .9375rem; }
.hx-op__lista a { color: var(--t3-tinta-2); text-decoration: none; }
.hx-op__lista strong { font-family: var(--t3-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-op--combos .hx-op__ir { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .hx-op { transition: transform 200ms var(--t3-sale), box-shadow 200ms ease; }
  .hx-op:hover { transform: translateY(-3px); box-shadow: var(--t3-sombra-3); }
  .hx-op__lista a:hover { color: var(--t3-tinta); text-decoration: underline; }
}

.hx-envio { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: var(--t3-r-3);
  background: var(--t3-menta); color: var(--t3-verde-os); font-size: 1rem; line-height: 1.4; }
.hx-envio strong { font-weight: 600; }
.hx-envio svg { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* ---------- pantallas ---------- */
@media (max-width: 1080px) { .hx-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .hx .hx-titulo { font-size: clamp(2.1rem, 9.6vw, 2.75rem); }
  .hx-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 18px; }
  .hx-acciones li { font-size: .9063rem; gap: 8px; }
  .hx-acciones svg { width: 30px; height: 30px; padding: 7px; }
  .hx-botones { gap: 10px; margin-top: 22px; }
  .hx-botones .t3-btn { width: 100%; }
  .hx-precio { margin-top: 14px; font-size: .875rem; }
  .hx-opciones { grid-template-columns: minmax(0, 1fr); }
  .hx-op__arte { height: 112px; }
  .hx-op--resenas .hx-op__arte .t3-tj { --w: 58px; }
  .hx-op--perfil .hx-op__arte .t3-tj { --w: 150px; }
  .hx-op__arte--pila .t3-tj { --w: 120px; }
  .hx-envio { font-size: .9375rem; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-op, .hx-comprar svg { transition: none; }
}