/* Reactan — sitio reactan.bespokem.mx (ES/EN). Móvil primero. Depende de tokens.css (variables --rx-* y clases .rx-*).
   Especificación: identidad/01_fundamentos/FUNDAMENTOS.md §7.7. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; font-family: var(--rx-font); font-size: var(--rx-cuerpo); line-height: var(--rx-lh-cuerpo); color: var(--rx-grafito); background: var(--rx-blanco); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
a { color: var(--rx-azul); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--rx-azul); outline-offset: 2px; border-radius: 2px; }
.icono { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icono--20 { width: 20px; height: 20px; }
.icono--16 { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--rx-grafito); color: #fff; padding: 12px 16px; border-radius: var(--rx-radio-sm); font-weight: 600; font-size: var(--rx-cuerpo-sm); }
.saltar:focus { top: 12px; }

/* ---------- Layout ---------- */
.contenedor { width: min(var(--rx-contenedor), 100% - 2 * var(--rx-margen-movil)); margin-inline: auto; }
.seccion { padding-block: var(--rx-s8); }
.seccion--hielo { background: var(--rx-hielo); }
.reticula { display: grid; gap: var(--rx-s6) var(--rx-medianil); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .contenedor { width: min(var(--rx-contenedor), 100% - 64px); }
}
@media (min-width: 1024px) {
  .seccion { padding-block: var(--rx-s9); }
  .reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; }
  .col-7-fin { grid-column: 6 / span 7; } .col-5-fin { grid-column: 8 / span 5; } .col-6-fin { grid-column: 7 / span 6; }
  .alinear-centro { align-items: center; }
}

/* ---------- Tipografía ---------- */
.etiqueta { display: block; font-weight: 600; font-size: var(--rx-etiqueta); line-height: 1.2; letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: var(--rx-acero); }
.etiqueta--rojo { color: var(--rx-rojo-profundo); }
.h1 { font-weight: 600; font-size: 1.875rem; line-height: var(--rx-lh-titular); letter-spacing: var(--rx-tracking-titular); }
.display { font-weight: 700; font-size: 2.25rem; line-height: var(--rx-lh-display); letter-spacing: var(--rx-tracking-display); }
.h2 { font-weight: 600; font-size: 1.5rem; line-height: var(--rx-lh-titular); letter-spacing: var(--rx-tracking-titular); }
.h3 { font-weight: 600; font-size: var(--rx-h3); line-height: 1.25; letter-spacing: -0.01em; }
.h4 { font-weight: 600; font-size: var(--rx-h4); line-height: 1.3; }
.entrada { font-size: 1.125rem; line-height: 1.5; color: var(--rx-acero); max-width: 40em; }
.texto { color: var(--rx-acero); max-width: 680px; }
.mono { font-family: var(--rx-font-mono); font-variant-numeric: tabular-nums; }
.encabezado-seccion { display: grid; gap: var(--rx-s3); margin-bottom: var(--rx-s7); max-width: 720px; }
.encabezado-seccion .entrada { font-size: var(--rx-cuerpo); }
@media (min-width: 640px) {
  .display { font-size: var(--rx-display); }
  .h1 { font-size: var(--rx-h1); }
  .h2 { font-size: var(--rx-h2); }
  .encabezado-seccion .entrada { font-size: 1.125rem; }
}

/* ---------- Botones (FUNDAMENTOS §7.7) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rx-s2); min-height: 48px; padding: 12px 20px; font-family: var(--rx-font); font-weight: 600; font-size: var(--rx-cuerpo-sm); line-height: 1; border-radius: var(--rx-radio-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--rx-rojo); color: #fff; }
.btn--primario:hover { background: var(--rx-rojo-profundo); }
.btn--primario:active { background: #8F0E0B; }
.btn--secundario { background: #fff; color: var(--rx-grafito); border-color: var(--rx-grafito); }
.btn--secundario:hover { background: var(--rx-niebla); }
.btn--secundario:active { background: var(--rx-linea); }
.btn--terciario { min-height: 44px; padding-inline: 0; background: transparent; color: var(--rx-rojo-profundo); }
.btn--terciario:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn--terciario .icono { transition: transform .15s; }
.btn--terciario:hover .icono { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--rx-azul); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--rx-linea); color: var(--rx-gris); border-color: transparent; cursor: not-allowed; }
.btn--terciario[aria-disabled="true"] { background: transparent; }
.btn--sm { min-height: 40px; padding: 10px 16px; }
@media (min-width: 1024px) { .btn { min-height: 44px; } }
.acciones { display: flex; flex-wrap: wrap; gap: var(--rx-s3); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--rx-linea); }
.cabecera__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--rx-s5); height: 64px; }
.cabecera__logo { display: block; padding-block: 8px; flex: none; }
.cabecera__logo img { width: 128px; height: auto; }
.nav { display: none; }
.nav__lista { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav__enlace { display: flex; align-items: center; min-height: 48px; color: var(--rx-acero); font-weight: 500; font-size: var(--rx-cuerpo-sm); text-decoration: none; border-bottom: 2px solid transparent; }
.nav__enlace:hover { color: var(--rx-grafito); text-decoration: none; }
.nav__enlace[aria-current] { color: var(--rx-grafito); }
.cabecera__acciones { display: flex; align-items: center; gap: var(--rx-s2); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; background: none; border: 0; color: var(--rx-grafito); cursor: pointer; border-radius: var(--rx-radio-sm); }
.menu-btn .icono-cerrar { display: none; }
.menu-btn[aria-expanded="true"] .icono-abrir { display: none; }
.menu-btn[aria-expanded="true"] .icono-cerrar { display: block; }
.cabecera .btn--cotizar { display: none; }
/* Menú móvil desplegado */
.cabecera.abierta .nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--rx-linea); box-shadow: var(--rx-sombra-panel); padding: var(--rx-s2) var(--rx-margen-movil) var(--rx-s5); }
.cabecera.abierta .nav__enlace { border-bottom: 1px solid var(--rx-niebla); font-size: var(--rx-cuerpo); }
.cabecera.abierta .nav__enlace[aria-current] { box-shadow: inset 2px 0 0 var(--rx-rojo); padding-left: 12px; }
.cabecera.abierta .nav .btn--cotizar-movil { display: flex; margin-top: var(--rx-s4); width: 100%; }
.btn--cotizar-movil { display: none; }
@media (min-width: 380px) { .cabecera .btn--cotizar { display: inline-flex; } }
@media (min-width: 1024px) {
  .cabecera__barra { height: 72px; }
  .cabecera__logo img { width: 150px; }
  .nav, .cabecera.abierta .nav { display: block; position: static; padding: 0; border: 0; box-shadow: none; background: none; margin-left: auto; }
  .nav__lista { flex-direction: row; gap: var(--rx-s6); }
  .nav__enlace, .cabecera.abierta .nav__enlace { box-shadow: none; padding-left: 0; min-height: 72px; font-size: var(--rx-cuerpo-sm); border-bottom: 2px solid transparent; padding-top: 2px; }
  .nav__enlace[aria-current] { border-bottom-color: var(--rx-rojo); }
  .cabecera.abierta .nav .btn--cotizar-movil, .btn--cotizar-movil { display: none; }
  .menu-btn { display: none; }
  .cabecera__acciones { margin-left: var(--rx-s6); }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--rx-s7) var(--rx-s8); }
.hero__texto { display: grid; gap: var(--rx-s5); align-content: center; }
.hero__texto .display { max-width: 12em; }
.hero__foto { margin-inline: calc(-1 * var(--rx-margen-movil)); }
.hero__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--rx-niebla); }
.pilares { display: grid; gap: var(--rx-s5); margin-top: var(--rx-s7); padding-top: var(--rx-s6); border-top: 1px solid var(--rx-linea); list-style: none; padding-left: 0; }
.pilar { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--rx-s4); }
.pilar .icono { grid-row: span 2; color: var(--rx-acero); margin-top: 2px; }
.pilar strong { font-weight: 600; }
.pilar span { color: var(--rx-acero); font-size: var(--rx-cuerpo-sm); }
@media (min-width: 640px) {
  .hero__foto { margin-inline: 0; }
  .hero__foto img { aspect-ratio: 4 / 3; }
}
@media (min-width: 768px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .hero { padding-block: var(--rx-s8) var(--rx-s9); }
  .hero__foto img { aspect-ratio: 4 / 5; }
  .pilares { margin-top: var(--rx-s8); }
}

/* ---------- Productos ---------- */
.familias { display: flex; flex-wrap: wrap; gap: var(--rx-s2) var(--rx-s5); margin-bottom: var(--rx-s5); color: var(--rx-acero); font-size: var(--rx-cuerpo-sm); }
.familias b { color: var(--rx-grafito); font-weight: 600; }
.tarjetas { display: grid; gap: var(--rx-s5); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta { display: flex; flex-direction: column; gap: var(--rx-s3); height: 100%; background: #fff; border: 1px solid var(--rx-linea); border-radius: var(--rx-radio-md); padding: var(--rx-s5); transition: border-color .15s, box-shadow .15s; }
.tarjeta:hover, .tarjeta:focus-within { border-color: var(--rx-acero); box-shadow: var(--rx-sombra-panel); }
.tarjeta__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--rx-s3); margin-top: 4px; }
.tarjeta__cabeza .tarjeta__codigo { margin-top: 0; }
.tarjeta__codigo { font-family: var(--rx-font-mono); font-weight: 600; font-size: var(--rx-h4); line-height: 1.2; letter-spacing: 0; margin-top: 4px; }
.tarjeta__desc { font-size: var(--rx-cuerpo-sm); color: var(--rx-acero); line-height: 1.5; }
.datos { display: grid; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--rx-linea); }
.datos div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rx-s3); padding: 8px 0; border-bottom: 1px solid var(--rx-linea); }
.datos dt { font-size: var(--rx-etiqueta); color: var(--rx-acero); }
.datos dd { font-family: var(--rx-font-mono); font-weight: 500; font-size: var(--rx-dato); text-align: right; font-variant-numeric: tabular-nums; }
.datos dd.datos__texto { font-family: var(--rx-font); font-weight: 400; font-size: var(--rx-cuerpo-sm); }
.tarjeta__pie { margin-top: auto; padding-top: var(--rx-s2); }
.nota { font-size: var(--rx-pie); line-height: 1.4; color: var(--rx-acero); margin-top: var(--rx-s5); }

/* ---------- Chips de estado ---------- */
.estado { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: var(--rx-etiqueta); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--rx-radio-xs); white-space: nowrap; }
.estado .icono { width: 14px; height: 14px; stroke-width: 2; }
.estado--ok { background: var(--rx-exito-claro); color: var(--rx-exito); }
.estado--aviso { background: var(--rx-advertencia-claro); color: var(--rx-advertencia); }
.estado--error { background: var(--rx-rojo-claro); color: var(--rx-rojo-profundo); }
.estado--info { background: var(--rx-azul-claro); color: var(--rx-azul); }
.estado--off { background: var(--rx-linea); color: var(--rx-acero); }

/* ---------- Aplicaciones ---------- */
.figuras { display: grid; gap: var(--rx-s5); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--rx-s7); }
@media (min-width: 768px) { .figuras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rx-niebla); }
.figura figcaption { margin-top: var(--rx-s3); font-size: var(--rx-cuerpo-sm); color: var(--rx-acero); }
.aplicaciones { display: grid; gap: var(--rx-s6) var(--rx-medianil); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .aplicaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .aplicaciones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aplicacion { display: grid; align-content: start; gap: var(--rx-s2); padding-top: var(--rx-s4); border-top: 2px solid var(--rx-grafito); }
.aplicacion .icono { width: 32px; height: 32px; color: var(--rx-acero); margin-bottom: var(--rx-s2); }
.aplicacion p { color: var(--rx-acero); font-size: var(--rx-cuerpo-sm); }

/* ---------- Calidad ---------- */
.calidad__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rx-niebla); }
.calidad__texto { display: grid; gap: var(--rx-s5); align-content: center; }
.lista-check { display: grid; gap: var(--rx-s4); list-style: none; padding: 0; margin: 0; }
.lista-check li { display: grid; grid-template-columns: 24px 1fr; gap: var(--rx-s3); }
.lista-check .icono { color: var(--rx-exito); margin-top: 1px; }
.lista-check strong { font-weight: 600; }
.lista-check span { color: var(--rx-acero); }

/* ---------- Ficha técnica ---------- */
.cifras { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rx-linea); border-bottom: 1px solid var(--rx-linea); margin-bottom: var(--rx-s7); }
.cifra { padding: var(--rx-s5) 0; display: grid; gap: 4px; }
.cifra + .cifra { border-top: 1px solid var(--rx-linea); }
.cifra__valor { font-family: var(--rx-font-mono); font-weight: 600; font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cifra__etiqueta { font-size: var(--rx-cuerpo-sm); color: var(--rx-acero); }
@media (min-width: 768px) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rx-medianil); }
  .cifra + .cifra { border-top: 0; border-left: 1px solid var(--rx-linea); padding-left: var(--rx-medianil); }
  .cifra__valor { font-size: 2rem; }
}
.ficha__lado { display: grid; gap: var(--rx-s5); align-content: start; }
.presentaciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rx-s4); }
.presentacion { background: var(--rx-niebla); border-radius: var(--rx-radio-sm); padding: var(--rx-s3) var(--rx-s4); }
.presentacion b { display: block; font-family: var(--rx-font-mono); font-weight: 600; font-size: var(--rx-h4); }
.presentacion span { font-size: var(--rx-cuerpo-sm); color: var(--rx-acero); }
.ficha__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--rx-niebla); }
.descarga { display: grid; gap: var(--rx-s3); justify-items: start; }
.descarga small { font-size: var(--rx-pie); color: var(--rx-acero); }
.tablas { display: grid; gap: var(--rx-s7); }

/* Tabla técnica: hereda .rx-tabla de tokens.css; en móvil scroll horizontal con primera columna fija */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--rx-margen-movil)); padding-inline: var(--rx-margen-movil); }
.tabla-scroll:focus-visible { outline-offset: -2px; }
.tabla-scroll .rx-tabla { min-width: 100%; }
.tabla-scroll .rx-tabla--ancha { min-width: 560px; }
.tabla-scroll .rx-tabla tbody th { min-width: 140px; }
.rx-tabla caption { padding-bottom: var(--rx-s3); }
.rx-tabla th, .rx-tabla td { padding: 10px 12px; }
.rx-tabla tbody th { font-weight: 400; font-size: var(--rx-cuerpo-sm); letter-spacing: 0; text-transform: none; color: var(--rx-grafito); background: #fff; border-bottom: 1px solid var(--rx-linea); }
.rx-tabla thead th:first-child, .rx-tabla tbody th { position: sticky; left: 0; z-index: 1; }
.rx-tabla thead th:first-child { background: var(--rx-niebla); }
.rx-tabla tr.rx-destacada th, .rx-tabla tr.rx-destacada td { background: var(--rx-rojo-claro); }
.rx-tabla td.rx-unidad { color: var(--rx-acero); white-space: nowrap; }
.rx-tabla td.rx-num { white-space: nowrap; }
.rx-tabla thead th.rx-num { font-family: var(--rx-font); font-weight: 600; }
.rx-nota { font-size: var(--rx-pie); color: var(--rx-acero); padding-top: var(--rx-s3); }
@media (min-width: 768px) {
  .tabla-scroll { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .tabla-scroll .rx-tabla, .tabla-scroll .rx-tabla--ancha { min-width: 0; }
  .rx-tabla thead th:first-child, .rx-tabla tbody th { position: static; }
}

/* ---------- Contacto y formulario ---------- */
.contacto__datos { display: grid; gap: var(--rx-s5); align-content: start; }
.datos-contacto { display: grid; gap: var(--rx-s4); margin-top: var(--rx-s2); }
.datos-contacto { list-style: none; padding: 0; }
.datos-contacto li { display: grid; grid-template-columns: 24px 1fr; gap: 2px var(--rx-s3); }
.datos-contacto .icono { grid-row: span 2; color: var(--rx-acero); margin-top: 2px; }
.datos-contacto .dc-etiqueta { font-size: var(--rx-etiqueta); font-weight: 600; letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: var(--rx-acero); }
.datos-contacto .dc-valor { font-family: var(--rx-font-mono); font-weight: 500; font-size: 0.9375rem; }
.datos-contacto .dc-valor.texto-normal { font-family: var(--rx-font); font-weight: 400; font-size: var(--rx-cuerpo); }
.datos-contacto a { color: var(--rx-grafito); }
.datos-contacto a:hover { color: var(--rx-azul); }
.formulario { background: #fff; border: 1px solid var(--rx-linea); border-radius: var(--rx-radio-md); padding: var(--rx-s5); display: grid; gap: var(--rx-s4) var(--rx-medianil); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--rx-s6); } .campo--ancho, .formulario__pie { grid-column: 1 / -1; } }
.formulario__titulo { grid-column: 1 / -1; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo label, .campo .campo__etiqueta { font-weight: 500; font-size: var(--rx-cuerpo-sm); color: var(--rx-grafito); }
.campo .opcional { font-weight: 400; color: var(--rx-acero); }
.entrada-campo { width: 100%; min-height: 48px; font-family: var(--rx-font); font-size: var(--rx-cuerpo); line-height: 1.4; color: var(--rx-grafito); background: #fff; border: 1px solid var(--rx-gris); border-radius: var(--rx-radio-sm); padding: 10px 12px; transition: border-color .15s, box-shadow .15s; }
.entrada-campo::placeholder { color: var(--rx-gris); }
.entrada-campo:hover { border-color: var(--rx-acero); }
.entrada-campo:focus { outline: none; border-color: var(--rx-azul); box-shadow: 0 0 0 3px var(--rx-azul-claro); }
.entrada-campo[aria-invalid="true"] { border-color: var(--rx-rojo-profundo); }
.entrada-campo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--rx-rojo-claro); }
.entrada-campo:disabled { background: var(--rx-niebla); border-color: var(--rx-linea); color: var(--rx-gris); cursor: not-allowed; }
textarea.entrada-campo { min-height: 120px; resize: vertical; }
select.entrada-campo { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234A5561' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; }
.campo__ayuda { font-size: var(--rx-pie); color: var(--rx-acero); line-height: 1.4; }
.campo__error { display: none; align-items: center; gap: 6px; font-size: var(--rx-pie); line-height: 1.4; color: var(--rx-rojo-profundo); }
.campo__error .icono { width: 16px; height: 16px; stroke-width: 2; }
.campo--error .campo__error, .campo__error.visible { display: flex; }
.formulario__pie { display: grid; gap: var(--rx-s3); justify-items: start; padding-top: var(--rx-s2); }
.formulario__pie small { font-size: var(--rx-pie); color: var(--rx-acero); }
.formulario__aviso { grid-column: 1 / -1; }

/* ---------- Alertas ---------- */
.alerta { display: grid; grid-template-columns: 24px 1fr; gap: var(--rx-s3); padding: var(--rx-s4); border-radius: var(--rx-radio-sm); border-left: 3px solid currentColor; font-size: var(--rx-cuerpo-sm); }
.alerta p { color: var(--rx-grafito); }
.alerta strong { display: block; font-weight: 600; color: var(--rx-grafito); margin-bottom: 2px; }
.alerta--info { background: var(--rx-azul-claro); color: var(--rx-azul); }
.alerta--ok { background: var(--rx-exito-claro); color: var(--rx-exito); }
.alerta--aviso { background: var(--rx-advertencia-claro); color: var(--rx-advertencia); }
.alerta--error { background: var(--rx-rojo-claro); color: var(--rx-rojo-profundo); }
.alerta[hidden] { display: none; }

/* ---------- Pie ---------- */
.pie { background: var(--rx-grafito); color: rgba(255,255,255,.7); padding-block: var(--rx-s8) var(--rx-s5); font-size: var(--rx-cuerpo-sm); }
.pie a { color: rgba(255,255,255,.85); }
.pie a:hover { color: #fff; }
.pie :focus-visible { outline-color: #fff; }
.pie__reticula { display: grid; gap: var(--rx-s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pie__reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pie__reticula { grid-template-columns: 4fr 2fr 3fr 3fr; } }
.pie__marca img { width: 140px; }
.pie__marca p { margin-top: var(--rx-s4); max-width: 22em; }
.pie__titulo { font-weight: 600; font-size: var(--rx-etiqueta); letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: #fff; margin-bottom: var(--rx-s3); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rx-s2); }
.pie .mono { font-size: 0.8125rem; }
.pie__final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rx-s2) var(--rx-s5); margin-top: var(--rx-s7); padding-top: var(--rx-s5); border-top: 1px solid rgba(255,255,255,.15); font-size: var(--rx-pie); color: rgba(255,255,255,.7); }

/* ---------- Esqueleto de carga ---------- */
.esqueleto { background: var(--rx-niebla); border-radius: var(--rx-radio-xs); animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* =====================================================================
   Sitio completo (fase 4): páginas interiores, idioma, fichas de producto
   ===================================================================== */

/* ---------- Selector de idioma ---------- */
.idioma { display: flex; align-items: center; gap: 2px; font-size: var(--rx-cuerpo-sm); font-weight: 500; }
.idioma__actual { display: none; color: var(--rx-grafito); padding-inline: 6px; }
.idioma__enlace { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding-inline: 6px; color: var(--rx-acero); border-radius: var(--rx-radio-sm); }
.idioma__enlace:hover { color: var(--rx-grafito); text-decoration: none; background: var(--rx-niebla); }
.idioma__enlace .icono { display: none; }
@media (min-width: 1024px) {
  .idioma { padding-left: var(--rx-s4); border-left: 1px solid var(--rx-linea); }
  .idioma__actual { display: inline; }
  .idioma__actual::after { content: "·"; color: var(--rx-gris); padding-left: 8px; }
  .idioma__enlace { padding-inline: 4px; }
}
.cabecera--simple { position: static; }

/* ---------- Migas ---------- */
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 var(--rx-s5); padding: 0; list-style: none; font-size: var(--rx-cuerpo-sm); color: var(--rx-acero); }
.migas li + li::before { content: "/"; color: var(--rx-gris); padding-inline: 8px; }
.migas a { color: var(--rx-acero); }
.migas a:hover { color: var(--rx-azul); }
.migas [aria-current] { color: var(--rx-grafito); font-weight: 500; }

/* ---------- Cabeza de página interior ---------- */
.cabeza-pagina { padding-block: var(--rx-s6) var(--rx-s7); }
.cabeza-pagina__texto { display: grid; gap: var(--rx-s4); align-content: start; max-width: 760px; }
.cabeza-pagina__texto .alerta { margin-top: var(--rx-s2); }
@media (min-width: 1024px) { .cabeza-pagina { padding-block: var(--rx-s7) var(--rx-s8); } }
.seccion--compacta { padding-block: var(--rx-s7); }
.seccion--compacta-arriba { padding-top: 0; }
.seccion--foto { padding-block: var(--rx-s7); }
@media (min-width: 1024px) { .seccion--compacta, .seccion--foto { padding-block: var(--rx-s8); } }
.acciones--seccion { margin-top: var(--rx-s6); }

/* ---------- Tarjetas enlazadas ---------- */
.tarjeta { position: relative; }
.tarjeta__enlace { color: inherit; }
.tarjeta__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--rx-radio-md); }
.tarjeta__enlace:hover { text-decoration: none; }
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta:has(.tarjeta__enlace:focus-visible) { outline: 2px solid var(--rx-azul); outline-offset: 2px; }
.tarjeta:hover .btn--terciario { text-decoration: underline; text-underline-offset: 4px; }
.tarjeta:hover .btn--terciario .icono { transform: translateX(3px); }
.tarjeta__codigo--texto { font-family: var(--rx-font); }
.tarjeta--otras { background: transparent; border-style: dashed; }
.tarjeta--otras .tarjeta__pie { position: relative; z-index: 1; }
@media (min-width: 1024px) { .tarjetas--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Familias (página de productos) ---------- */
.familia { display: grid; gap: var(--rx-s5); }
.familia + .familia { margin-top: var(--rx-s7); padding-top: var(--rx-s7); border-top: 1px solid var(--rx-linea); }
.familia__texto { display: grid; gap: var(--rx-s2); max-width: 720px; }

/* ---------- Tablas: variantes ---------- */
.rx-tabla--zebra tbody tr:nth-child(even):not(.rx-destacada) th,
.rx-tabla--zebra tbody tr:nth-child(even):not(.rx-destacada) td { background: var(--rx-hielo); }
.rx-tabla td.rx-texto { font-family: var(--rx-font); font-size: var(--rx-cuerpo-sm); text-align: left; white-space: nowrap; }
.rx-unidad-inline { font-family: var(--rx-font); font-weight: 400; font-size: var(--rx-etiqueta); color: var(--rx-acero); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.rx-tabla thead .rx-unidad-inline { display: block; margin-top: 2px; }
.rx-tabla th.rx-codigo { font-family: var(--rx-font-mono); font-weight: 600; font-size: var(--rx-cuerpo-sm); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.rx-tabla th.rx-codigo a { color: var(--rx-grafito); }
.rx-tabla th.rx-codigo a:hover { color: var(--rx-azul); }
.rx-tabla tbody th a.mono { color: var(--rx-grafito); font-weight: 600; }
.rx-tabla--comparativa { min-width: 760px; }
.rx-tabla--comparativa tbody th { min-width: 200px; }
@media (min-width: 768px) {
  .tabla-scroll:has(.rx-tabla--comparativa) { overflow-x: auto; }
}

/* ---------- Ficha de producto ---------- */
.display--producto { font-family: var(--rx-font); letter-spacing: var(--rx-tracking-display); }
.chips { display: flex; flex-wrap: wrap; gap: var(--rx-s2); list-style: none; padding: 0; margin: var(--rx-s2) 0 0; }
.chip { font-weight: 600; font-size: var(--rx-etiqueta); letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: var(--rx-acero); background: var(--rx-niebla); padding: 6px 10px; border-radius: var(--rx-radio-xs); line-height: 1.2; }
.descarga-panel { display: grid; gap: var(--rx-s3); align-content: start; justify-items: stretch; background: var(--rx-hielo); border: 1px solid var(--rx-linea); border-radius: var(--rx-radio-md); padding: var(--rx-s5); }
.descarga-panel .etiqueta { color: var(--rx-grafito); }
.descarga-panel .btn { white-space: normal; text-align: left; justify-content: flex-start; }
.descarga-panel .btn--terciario { justify-self: start; }
.descarga-panel small { font-size: var(--rx-pie); color: var(--rx-acero); }
.cabeza-producto .reticula { align-items: start; }
.cabeza-producto .cifras { margin: var(--rx-s7) 0 0; }
.prosa { display: grid; gap: var(--rx-s4); align-content: start; max-width: 680px; }
.prosa p { color: var(--rx-grafito); }
.prosa h2 + p, .prosa h3 + p { margin-top: calc(-1 * var(--rx-s2)); }
.prosa h2:not(:first-child), .prosa h3:not(:first-child) { margin-top: var(--rx-s4); }
.prosa .etiqueta + .h2 { margin-top: calc(-1 * var(--rx-s2)); }
.prosa--legal { max-width: 720px; }
.lado-mec { display: grid; gap: var(--rx-s6); align-content: start; }
.lado-mec .h4 { margin-bottom: var(--rx-s3); }
.lado-mec .nota { margin-top: var(--rx-s3); }

/* Gráfica (FUNDAMENTOS §3.5, §5.7) */
.figura-grafica figcaption { display: grid; gap: 4px; margin-bottom: var(--rx-s3); }
.figura-grafica .etiqueta { color: var(--rx-grafito); }
.grafica { width: 100%; height: auto; overflow: visible; }
.grafica .g-rejilla { stroke: var(--rx-linea); stroke-width: 1; }
.grafica .g-base { stroke: var(--rx-acero); stroke-width: 1; }
.grafica .g-barra { fill: var(--rx-rojo); }
.grafica .g-valor { font-family: var(--rx-font-mono); font-weight: 500; font-size: 13px; fill: var(--rx-grafito); }
.grafica .g-eje { font-family: var(--rx-font); font-size: 13px; fill: var(--rx-acero); }
.grafica__fuente { font-size: var(--rx-pie); color: var(--rx-acero); margin-top: var(--rx-s2); line-height: 1.4; }

.presentacion { display: grid; grid-template-columns: auto 1fr; column-gap: var(--rx-s3); align-items: center; }
.presentacion .icono { grid-row: span 2; color: var(--rx-acero); }

.tres-columnas { display: grid; gap: var(--rx-s6) var(--rx-medianil); grid-template-columns: minmax(0, 1fr); }
.tres-columnas p { font-size: var(--rx-cuerpo-sm); color: var(--rx-acero); line-height: 1.5; margin-top: var(--rx-s2); }
@media (min-width: 1024px) { .tres-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.otros-productos { border-top: 1px solid var(--rx-linea); }
.otros-productos__interior { display: flex; justify-content: space-between; gap: var(--rx-s4); }
.otro { display: inline-flex; align-items: center; gap: var(--rx-s3); min-height: 48px; color: var(--rx-grafito); }
.otro:hover { text-decoration: none; color: var(--rx-rojo-profundo); }
.otro span { display: grid; }
.otro small { font-size: var(--rx-etiqueta); font-weight: 600; letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: var(--rx-acero); }
.otro b { font-family: var(--rx-font-mono); font-weight: 600; font-size: var(--rx-h4); }
.otro--sig { text-align: right; }

/* ---------- Banda de llamada a la acción ---------- */
.banda { border-top: 1px solid var(--rx-linea); }
.banda__interior { display: grid; gap: var(--rx-s5); align-items: center; }
.banda__interior .texto { margin-top: var(--rx-s3); }
@media (min-width: 1024px) { .banda__interior { grid-template-columns: 7fr 5fr; } .banda .acciones { justify-content: flex-end; } }
.seccion--hielo + .banda { border-top: 0; }

/* ---------- Pasos del proceso ---------- */
.proceso__texto { display: grid; gap: var(--rx-s4); align-content: center; }
.pasos { display: grid; gap: 0; list-style: none; padding: 0; margin: var(--rx-s2) 0 0; border-top: 1px solid var(--rx-linea); }
.paso { display: grid; grid-template-columns: 40px 1fr; gap: 2px var(--rx-s3); padding: var(--rx-s4) 0; border-bottom: 1px solid var(--rx-linea); }
.paso__num { grid-row: span 2; font-weight: 600; color: var(--rx-acero); font-size: var(--rx-cuerpo-sm); padding-top: 2px; }
.paso strong { font-weight: 600; }
.paso span:last-child { color: var(--rx-acero); font-size: var(--rx-cuerpo-sm); }

/* ---------- Aplicaciones sin ícono (calidad) ---------- */
.aplicacion--sin-icono { padding-top: var(--rx-s4); }

/* ---------- Foto panorámica ---------- */
.figura--panoramica img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rx-niebla); }
@media (min-width: 768px) { .figura--panoramica img { aspect-ratio: 12 / 5; } }

/* ---------- Contacto ---------- */
.seccion--contacto { padding-top: var(--rx-s6); }
@media (min-width: 1024px) { .seccion--contacto { padding-top: var(--rx-s7); } }
.pie__muestra { font-size: var(--rx-pie); color: rgba(255,255,255,.7); }

/* ---------- 404 ---------- */
.error404__codigo { font-weight: 600; font-size: 4rem; line-height: 1; color: var(--rx-linea); margin-bottom: var(--rx-s6); }
.error404__bloques { display: grid; gap: var(--rx-s7); }
.error404__bloque { display: grid; gap: var(--rx-s4); align-content: start; }
@media (min-width: 768px) { .error404__bloques { grid-template-columns: 1fr 1fr; gap: var(--rx-s6); } .error404__bloque + .error404__bloque { border-left: 1px solid var(--rx-linea); padding-left: var(--rx-s6); } }
.pie--simple { padding-block: 0 var(--rx-s5); }
.pie--simple .pie__final { margin-top: 0; }

/* ---------- Ajustes tras revisión visual ---------- */
.btn--terciario { justify-self: start; }
.rx-tabla tbody td { background: #fff; }
.rx-tabla--comparativa td.rx-texto { text-align: right; }
.cabecera__barra { gap: var(--rx-s2); }
.cabecera .btn--sm { padding-inline: 12px; }
@media (min-width: 1024px) { .cabecera__barra { gap: var(--rx-s5); } .cabecera .btn--sm { padding-inline: 16px; } }
.reticula > .encabezado-seccion { align-content: start; margin-bottom: 0; }
.pie--simple .pie__final { border-top: 0; }
.error404 { min-height: calc(100vh - 140px); }