/* ============================================================
   SIR · Suministros Industriales
   Lenguaje visual: sin recuadros ni sombras. Imagen a sangre,
   texto debajo, filetes finos, aire y esquinas rectas.
   Los colores y las tipografías vienen de theme.json.
   ============================================================ */

:root {
	--sir-azul: var(--wp--preset--color--azul, #262F91);
	--sir-azul-900: var(--wp--preset--color--azul-900, #151A52);
	--sir-naranja: var(--wp--preset--color--naranja, #F26A1B);
	--sir-naranja-700: var(--wp--preset--color--naranja-700, #C24A00);
	--sir-grafito: var(--wp--preset--color--grafito, #1F2430);
	--sir-gris-700: var(--wp--preset--color--gris-700, #4B5262);
	--sir-gris-500: var(--wp--preset--color--gris-500, #7A8296);
	--sir-gris-300: var(--wp--preset--color--gris-300, #D6DAE3);
	--sir-gris-100: var(--wp--preset--color--gris-100, #F0F2F6);
	--blanco: #fff;
	--filete: 1px solid var(--sir-gris-300);
	--header-h: 82px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Ritmo entre módulos -------------------------------------------------
   Cada sección trae su propio aire arriba y abajo (var:preset|spacing|50 o 60).
   El hueco que WordPress agrega entre bloques se sumaba a ese aire y, entre
   dos bandas de color, dejaba una franja blanca de 24 px: se veía como una
   costura, sobre todo entre el encabezado azul y el banner. Se anula solo en
   el primer nivel; adentro de cada módulo el hueco sigue funcionando.
   Va con !important porque WordPress declara ese margen desde su hoja propia. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > header { margin-top: 0 !important; }

.entry-content > .wp-block-group,
main > .wp-block-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
:focus-visible { outline: 2px solid var(--sir-naranja); outline-offset: 3px; }

/* Texto sólo para lectores de pantalla. El tema de bloques no trae esta regla
   y sin ella el texto aparece a la vista y desarma las tablas. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
::selection { background: var(--wp--preset--color--azul-100, #E9EBF7); color: var(--sir-azul-900); }

.sir-antetitulo {
	display: block;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 12px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--sir-gris-500);
	margin-bottom: 14px;
}
.sir-antetitulo--claro { color: rgba(255,255,255,.7); }
.sir-plomo { font-size: clamp(17px,1.8vw,20px); color: var(--sir-gris-700); max-width: 62ch; }

/* ---------- Encabezado ----------
   El sticky va en la parte de plantilla, no en el grupo de adentro: un
   elemento pegajoso sólo se mueve dentro de la caja de su padre, y el padre
   medía exactamente lo mismo que el encabezado, así que se iba con el
   primer scroll. Puesto acá, el menú acompaña toda la página. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 60;
}
/* Con la barra de administración de WordPress el menú tiene que empezar
   debajo de ella; el visitante no la ve y arranca en cero. */
body.admin-bar .wp-site-blocks > header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header { top: 46px; }
}

.sir-header {
	background: var(--sir-azul-900);
}
.sir-header .wp-block-site-logo img { height: 50px; width: auto; }
.sir-header a { color: rgba(255,255,255,.85); }
.sir-header a:hover { color: #fff; text-decoration: none; }
.sir-header .wp-block-navigation .current-menu-item > a { color: #fff; font-weight: 600; }
.sir-header .wp-block-navigation { font-weight: 500; }
.sir-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sir-azul-900); padding-top: 60px;
}
.sir-header .wp-block-navigation__responsive-container-close,
.sir-header .wp-block-navigation__responsive-container-open { color: #fff; }
.sir-header .wp-block-button__link { font-size: 14.5px; padding: 13px 22px; }

/* ---------- Banner ---------- */
.sir-hero { position: relative; background: var(--sir-azul-900); color: #fff; overflow: hidden; }
.sir-hero__fondos { position: absolute; inset: 0; }
.sir-hero__capa { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.sir-hero__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sir-hero__capa.esta-activa { opacity: 1; }
.sir-hero__slides .sir-slide .wp-block-buttons { margin-top: 0; }
.sir-producto__vacio { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #eceff5 0 10px, #f4f6fa 10px 20px); }
.sir-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(38,47,145,.74) 0%, rgba(38,47,145,.58) 42%, rgba(38,47,145,.12) 100%);
}
.sir-hero__interior {
	position: relative; z-index: 2;
	padding-block: clamp(44px,5vw,72px) clamp(48px,6vw,80px);
	display: flex; flex-direction: column; gap: 32px;
}
.sir-hero__slides { display: grid; }
.sir-slide {
	grid-area: 1/1; opacity: 0; visibility: hidden;
	transition: opacity .5s ease; max-width: 64ch;
}
.sir-slide.esta-activa { opacity: 1; visibility: visible; }
.sir-slide h1, .sir-slide h2 { color: #fff; margin: 0 0 24px; max-width: 18ch; }
.sir-slide p { font-size: clamp(17px,1.7vw,20px); color: rgba(255,255,255,.8); margin: 0 0 38px; max-width: 50ch; }
.sir-hero__puntos { position: relative; z-index: 3; display: flex; gap: 12px; }
.sir-hero__punto {
	width: 40px; height: 3px; border: 0; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.3); transition: background-color .2s ease;
}
.sir-hero__punto[aria-selected="true"] { background: var(--sir-naranja); }

/* ---------- Razones ----------
   Lista técnica, no grilla de tarjetas: título a la izquierda, explicación a
   la derecha y filete entre filas. Sin íconos, sin numeración, y un solo
   acento naranja para todo el bloque en lugar de uno por celda. */
.sir-razones { border-top: 2px solid var(--sir-grafito); position: relative; }
.sir-razones::before {
	content: ""; position: absolute; top: -2px; left: 0;
	width: 64px; height: 2px; background: var(--sir-naranja);
}
.sir-razon {
	display: grid;
	grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
	gap: clamp(16px, 3.2vw, 56px);
	padding: clamp(22px, 2.4vw, 32px) 0;
	border-bottom: var(--filete);
}
.sir-razon > * { margin-block: 0 !important; }
.sir-razon h3 { margin: 0; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.24; letter-spacing: -.012em; }
.sir-razon p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--sir-gris-700); max-width: 64ch; }
/* La última fila cierra la lista: el filete queda pegado al texto para que
   no se sume al aire de la sección. */
.sir-razon:last-child { padding-bottom: clamp(14px, 1.4vw, 18px); }
@media (max-width: 760px) {
	.sir-razon { grid-template-columns: 1fr; gap: 7px; padding: 22px 0; }
}

/* ---------- Catálogo ---------- */
.sir-tabs { display: flex; flex-wrap: wrap; gap: 0 30px; border-bottom: var(--filete); margin-bottom: clamp(34px,4vw,52px); }
.sir-tab {
	background: none; border: 0; border-bottom: 3px solid transparent;
	padding: 16px 0; cursor: pointer; font-family: var(--wp--preset--font-family--texto);
	font-size: 15.5px; color: var(--sir-gris-700); display: flex; align-items: center; gap: 8px;
}
.sir-tab:hover { color: var(--sir-azul); }
.sir-tab[aria-pressed="true"] { color: var(--sir-azul); font-weight: 600; border-bottom-color: var(--sir-naranja); }
.sir-tab__n { font-size: 12px; color: var(--sir-gris-500); font-variant-numeric: tabular-nums; }

.sir-grupo { margin-bottom: clamp(52px,6vw,84px); }
.sir-grupo.esta-oculto { display: none; }
.sir-grupo__cab {
	display: flex; align-items: baseline; gap: 16px;
	padding-bottom: 16px; margin-bottom: clamp(28px,3vw,40px);
	border-bottom: 2px solid var(--sir-azul);
}
.sir-grupo__cab h2 { font-size: clamp(21px,2.2vw,27px); margin: 0; }
.sir-grupo__n { font-size: 13px; font-weight: 600; color: var(--sir-gris-500); white-space: nowrap; }

.sir-grilla { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(30px,3.4vw,52px) clamp(26px,2.6vw,40px); }
.sir-producto { display: flex; flex-direction: column; }
.sir-producto__foto {
	position: relative; aspect-ratio: 4/3; background: var(--sir-gris-100, #F0F2F6);
	display: grid; place-items: center; overflow: hidden;
}
.sir-producto__foto img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; display: block; box-sizing: border-box;
	padding: 13%; transition: transform .4s ease;
}
.sir-producto:hover .sir-producto__foto img { transform: scale(1.04); }
.sir-producto__cuerpo { padding-top: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sir-producto__cat { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sir-gris-500); }
.sir-producto__cuerpo h3 { font-size: 19px; margin: 0; }
.sir-producto__desc { font-size: 15.5px; color: var(--sir-gris-700); line-height: 1.6; margin: 0; flex: 1; }

.sir-enlace {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: 15px; color: var(--sir-azul); text-decoration: none;
}
.sir-enlace:hover { color: var(--sir-naranja-700); text-decoration: none; }
.sir-enlace::after { content: "›"; font-size: 19px; line-height: 1; transition: transform .18s ease; }
.sir-enlace:hover::after { transform: translateX(3px); }
.sir-enlace svg { width: 17px; height: 17px; flex: none; }

/* ---------- Marcas ---------- */
.sir-marcas {
	overflow: hidden; position: relative; border-block: var(--filete); padding-block: 26px;
	-webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
	mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.sir-marcas__pista { display: flex; gap: clamp(30px,3.6vw,54px); width: max-content; align-items: center; animation: sir-desfile 68s linear infinite; }
.sir-marcas:hover .sir-marcas__pista { animation-play-state: paused; }
@keyframes sir-desfile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sir-marca { display: flex; align-items: center; justify-content: center; flex: none; height: 52px; }
.sir-marca img { height: 100%; width: auto; max-width: 148px; object-fit: contain; display: block; opacity: .88; transition: opacity .25s ease; }
.sir-marca:hover img { opacity: 1; }

/* ---------- Listas con filete ---------- */
.sir-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px,2.5vw,40px); }
.sir-lista li { padding: 13px 0; border-top: var(--filete); font-size: 16px; }
.sir-lista--tres { grid-template-columns: repeat(3,1fr); }
.sir-lista--una { grid-template-columns: 1fr; }
.sir-lista--clara li { border-top-color: rgba(255,255,255,.24); color: rgba(255,255,255,.86); }
.sir-lista--clara li:last-child { border-bottom: 1px solid rgba(255,255,255,.24); }

/* ---------- Botón flotante de WhatsApp ---------- */
.sir-wa {
	position: fixed; right: 26px; bottom: 26px; z-index: 80;
	width: 58px; height: 58px; border-radius: 50%;
	background: #25D366; color: #fff; display: grid; place-items: center;
	box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .2s ease;
}
.sir-wa:hover { transform: translateY(-3px); color: #fff; }
.sir-wa svg { width: 30px; height: 30px; }
.sir-wa__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Datos de contacto ---------- */
.sir-datos { display: flex; flex-direction: column; }
.sir-dato { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 20px 0; border-top: var(--filete); }
.sir-dato:last-child { border-bottom: var(--filete); }
.sir-dato__icono { color: var(--sir-azul); padding-top: 3px; }
.sir-dato__icono svg { width: 19px; height: 19px; display: block; }
.sir-dato__rotulo { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sir-gris-500); margin-bottom: 4px; }
.sir-dato__valor { display: block; font-size: 16px; color: var(--sir-grafito); line-height: 1.55; }

/* ---------- Tablas técnicas ---------- */
.sir-tabla-envoltorio { overflow: auto; max-height: 58vh; border: var(--filete); }
.sir-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sir-tabla th, .sir-tabla td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: var(--filete); }
.sir-tabla th:first-child, .sir-tabla td:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
.sir-tabla thead th { background: var(--sir-gris-100); font-weight: 600; color: var(--sir-grafito); position: sticky; top: 0; }
.sir-tabla tbody tr:nth-child(even) td { background: #FBFCFD; }
.sir-tabla tbody tr:nth-child(even) td:first-child { background: #FBFCFD; }

/* ---------- Utilidades de sección ---------- */
.sir-seccion-humo { background: var(--wp--preset--color--humo, #F7F8FA); }
.sir-filete-arriba { border-top: var(--filete); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.sir-grilla { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
	:root { --header-h: 70px; }
	.sir-hero::after { background: linear-gradient(180deg, rgba(38,47,145,.52) 0%, rgba(38,47,145,.72) 62%, rgba(38,47,145,.80) 100%); }
	.sir-header .wp-block-site-logo img { height: 42px; }
}
@media (max-width: 640px) {
	.sir-grilla { grid-template-columns: 1fr; }
	.sir-razon p { max-width: none; }
	.sir-lista, .sir-lista--tres { grid-template-columns: 1fr; }
	.sir-tabs { gap: 0 22px; }
	.sir-wa { right: 18px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Formulario de contacto ---------- */
.sir-form { display: flex; flex-direction: column; gap: 4px; }
.sir-campos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.sir-campo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.sir-campo label {
	font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--sir-gris-500);
}
.sir-campo input, .sir-campo textarea {
	font-family: inherit; font-size: 16px; color: var(--sir-grafito);
	background: transparent; border: 0; border-bottom: var(--filete);
	border-radius: 0; padding: 10px 0; width: 100%;
	transition: border-color .18s ease;
}
.sir-campo input:focus, .sir-campo textarea:focus {
	outline: none; border-bottom-color: var(--sir-azul); border-bottom-width: 2px;
}
.sir-campo textarea { resize: vertical; min-height: 120px; }
.sir-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sir-ayuda { font-size: 13.5px; color: var(--sir-gris-500); margin: 4px 0 24px; }
.sir-form button { border: 0; cursor: pointer; width: 100%; }
.sir-aviso { padding: 16px 18px; margin-bottom: 26px; font-size: 15px; border-left: 3px solid; }
.sir-aviso--ok { background: #EEF7F0; border-color: #2E7D46; color: #1E5730; }
.sir-aviso--error { background: #FDF0EC; border-color: var(--sir-naranja-700); color: #8C3600; }

/* ---------- Pie ---------- */
.sir-pie-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
/* Los enlaces del sitio heredan el azul de marca; sobre el pie azul oscuro
   quedaban casi invisibles. En el pie toman el mismo tono que el resto del
   texto, y sólo se aclaran al pasar el mouse. */
.wp-site-blocks > footer a { color: rgba(255,255,255,.78); }
.wp-site-blocks > footer a:hover { color: #fff; text-decoration: none; }
.sir-pie-lista a { color: rgba(255,255,255,.78); }
.sir-pie-lista a:hover { color: #fff; text-decoration: none; }

@media (max-width: 640px) {
	.sir-campos-par { grid-template-columns: 1fr; }
}

/* ---------- Corrección de alineado ----------
   .sir-hero__interior es un contenedor flex en columna. Los márgenes
   automáticos que WordPress pone a los hijos de un grupo "constrained"
   encogen el bloque a su contenido y lo centran, en vez de centrar una
   caja de ancho completo. Devolviéndoles el ancho, el texto vuelve a
   alinearse contra el margen izquierdo. */
.sir-hero__interior { align-items: stretch; }
.sir-hero__interior > * { width: 100%; }
.sir-slide { padding-left: 0; padding-right: 0; }

/*
   Los grupos de tipo "constrained" de WordPress centran a sus hijos con
   margin-inline:auto. En estos módulos el texto va contra el margen
   izquierdo, así que se lo devolvemos a cero. */
/* WordPress declara esos márgenes con !important, así que la corrección
   tiene que ir con la misma fuerza. */
.sir-hero__slides > *,
.sir-slide > *,
.sir-razones > *, .sir-razon > *,
.sir-plomo,
.sir-razon h3, .sir-razon p,
.sir-slide h1, .sir-slide h2, .sir-slide p {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* Las tarjetas del catálogo, más contenidas */
.sir-producto__cuerpo { padding-top: 16px; gap: 8px; }
.sir-producto__cuerpo h3 { font-size: 17.5px; }
.sir-producto__desc { font-size: 14.5px; }
.sir-producto__cat { font-size: 11px; }

/* RBP publica su logotipo solo en versión blanca sobre transparente, así que
   va sobre una pastilla del azul de su identidad. Cuando llegue el logotipo
   en positivo, se reemplaza la imagen y se borra esta regla. */
.sir-marca[data-marca="rbp"] { background: #3A56B4; padding: 7px 14px; }
.sir-marca[data-marca="rbp"] img { opacity: 1; }

/* ---------- Herramientas de cálculo ----------
   Mismo lenguaje que las razones de la portada: filas con filete, sin
   numeración ni acento por celda. El enlace cierra la fila a la derecha. */
.sir-plomo--claro { color: rgba(255,255,255,.8); }

.sir-herramientas { position: relative; border-top: 2px solid rgba(255,255,255,.55); }
.sir-herramientas::before {
	content: ""; position: absolute; top: -2px; left: 0;
	width: 64px; height: 2px; background: var(--sir-naranja);
}
.sir-herramienta {
	display: grid;
	grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto;
	gap: clamp(16px, 3vw, 48px);
	align-items: start;
	padding: clamp(24px, 2.6vw, 34px) 0;
	border-bottom: 1px solid rgba(255,255,255,.18);
}
.sir-herramienta > * { margin: 0 !important; }
.sir-herramienta h3 { font-size: clamp(19px,1.9vw,23px); line-height: 1.24; letter-spacing: -.012em; }
.sir-herramienta__texto { font-size: 15.5px; line-height: 1.62; color: rgba(255,255,255,.78); max-width: 56ch; }
.sir-herramienta__pie { white-space: nowrap; }

.sir-enlace--claro { color: #fff; }
.sir-enlace--claro:hover { color: var(--sir-naranja); }

/* Las dos herramientas son la acción de esta sección, no una nota al pie:
   van con el mismo botón naranja que el resto del sitio, igual que en el
   prototipo aprobado. Un enlace blanco sobre azul no se leía como algo
   para hacer clic. */
.sir-boton {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
	padding: 14px 24px; border: 1px solid var(--sir-naranja); border-radius: 0;
	min-width: 232px; justify-content: space-between;
	background: var(--sir-naranja); color: var(--sir-grafito);
	text-decoration: none; white-space: nowrap;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sir-boton:hover,
.sir-boton:focus-visible {
	background: var(--sir-naranja-700); border-color: var(--sir-naranja-700);
	color: #fff; text-decoration: none;
}
.sir-boton::after { content: "\203A"; font-size: 19px; line-height: 1; transition: transform .18s ease; }
.sir-boton:hover::after { transform: translateX(3px); }

/* En la fila, el botón se alinea con el texto y no con el borde de arriba. */
.sir-herramienta__pie { align-self: center; }

@media (max-width: 860px) {
	.sir-herramienta {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 24px 0;
	}
	.sir-herramienta__pie { margin-top: 14px !important; align-self: start; }
}

/* ============================================================
   Calculadora de cañerías
   ============================================================ */

.sir-calc { border-top: 2px solid var(--sir-grafito); }

/* Los campos que no corresponden al modo elegido se ocultan con el atributo
   hidden. Va con !important porque .sir-campo declara display:block y una
   regla de autor le gana al [hidden] del navegador. */
.sir-calc [hidden] { display: none !important; }

.sir-calc__pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: var(--filete);
}
.sir-calc__pestana {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: 16px 22px;
	font-family: var(--wp--preset--font-family--titulo, inherit);
	font-size: 15px;
	font-weight: 600;
	color: var(--sir-gris-500);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}
.sir-calc__pestana:hover { color: var(--sir-grafito); }
.sir-calc__pestana[aria-selected="true"] {
	color: var(--sir-grafito);
	border-bottom-color: var(--sir-naranja);
}
@media (max-width: 560px) {
	/* En pantalla chica las tres pestañas caen en dos líneas: sin el relleno
	   lateral quedan alineadas al margen y no parecen sangradas. */
	.sir-calc__pestanas { gap: 0 26px; }
	.sir-calc__pestana { padding: 14px 0; }
}

.sir-calc__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 0;
	align-items: start;
}
@media (max-width: 860px) {
	.sir-calc__cuerpo { grid-template-columns: 1fr; }
}

.sir-calc__campos { padding: 34px 40px 40px 0; }
@media (max-width: 860px) { .sir-calc__campos { padding-right: 0; } }

.sir-calc__grupo {
	border: 0;
	border-top: var(--filete);
	margin: 0;
	padding: 26px 0 6px;
}
.sir-calc__grupo:first-child { border-top: 0; padding-top: 6px; }
.sir-calc__grupo legend {
	padding: 0;
	font-family: var(--wp--preset--font-family--titulo, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sir-gris-500);
}

.sir-calc__fila { display: grid; gap: 18px 22px; margin-top: 18px; }
.sir-calc__fila--dos { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .sir-calc__fila--dos { grid-template-columns: 1fr; } }

.sir-campo { display: block; }
.sir-campo > span:first-child {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sir-gris-700);
}
.sir-campo em { font-style: italic; color: var(--sir-gris-500); font-weight: 400; }
/* El símbolo de diámetro es una letra, no una variable: en cursiva se inclina
   y se lee como el signo de conjunto vacío. Va derecho. */
.sir-calc .sir-simbolo { font-style: normal; color: var(--sir-gris-500); font-weight: 400; }
.sir-calc__nota .sir-simbolo { color: inherit; }

.sir-campo select,
.sir-campo input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--sir-grafito);
	background: var(--blanco);
	border: var(--filete);
	border-radius: 0;
}
.sir-campo select:focus,
.sir-campo input:focus { outline: 2px solid var(--sir-naranja); outline-offset: -2px; border-color: transparent; }
.sir-campo input:disabled { background: var(--sir-gris-100); color: var(--sir-gris-500); }

.sir-campo__caja { position: relative; display: block; }
.sir-campo__caja i {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-style: normal;
	font-size: 13px;
	color: var(--sir-gris-500);
	pointer-events: none;
}
.sir-campo__caja input { padding-right: 62px; }
/* Las flechitas del input numérico se montan sobre la unidad. */
.sir-campo__caja input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.sir-campo__caja input[type="number"]::-webkit-outer-spin-button,
.sir-campo__caja input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }

.sir-calc__ayuda {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sir-gris-500);
}

/* ---- El panel del resultado ---- */
.sir-calc__salida {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	padding: 34px clamp(24px, 3vw, 38px) 38px;
	background: var(--sir-azul-900);
	color: var(--blanco);
}
@media (max-width: 860px) { .sir-calc__salida { position: static; } }

.sir-calc__rotulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulo, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
.sir-calc__cifra {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--titulo, inherit);
	font-size: clamp(40px, 5.4vw, 60px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--blanco);
}
.sir-calc__cifra i { font-style: normal; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .62); }

.sir-calc__secundarios {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.sir-calc__secundarios li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	font-size: 14px;
}
.sir-calc__secundarios span { color: rgba(255, 255, 255, .68); }
.sir-calc__secundarios b { font-weight: 600; }

.sir-calc__detalle {
	margin: 20px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .74);
}
.sir-calc__formula {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .55);
}

.sir-calc__nota {
	margin: 30px 0 0;
	padding-top: 22px;
	border-top: var(--filete);
	font-size: 13px;
	line-height: 1.65;
	color: var(--sir-gris-500);
}

/* ============================================================
   Tabla de compatibilidad
   ============================================================ */

.sir-compat__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 26px;
	padding-bottom: 18px;
	border-bottom: var(--filete);
}
.sir-compat__buscador { flex: 1 1 260px; max-width: 380px; }
.sir-compat__buscador input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--sir-grafito);
	background: var(--blanco);
	border: var(--filete);
	border-radius: 0;
}
.sir-compat__buscador input:focus { outline: 2px solid var(--sir-naranja); outline-offset: -2px; }

.sir-compat__familias { display: flex; flex-wrap: wrap; gap: 0 22px; }
.sir-compat__familia {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 6px 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--sir-gris-700);
	cursor: pointer;
}
.sir-compat__familia:hover { color: var(--sir-azul); }
.sir-compat__familia[aria-pressed="true"] {
	color: var(--sir-azul);
	font-weight: 600;
	border-bottom-color: var(--sir-naranja);
}

.sir-compat__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 20px 0 22px;
	font-size: 13px;
	color: var(--sir-gris-700);
}
.sir-compat__leyenda span { display: flex; align-items: center; gap: 9px; }

.sir-grado {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--blanco);
	background: var(--sir-gris-300);
}
.sir-grado--a { background: #1E7A48; }
.sir-grado--b { background: #C58012; }
.sir-grado--n { background: #B3261E; }
.sir-grado--sin { background: var(--sir-gris-100); color: var(--sir-gris-500); }

.sir-compat__envoltorio { max-height: 66vh; }

/* Columnas de ancho parejo: así la retícula se lee de un vistazo y la tabla
   entra entera en el escritorio. En pantalla chica se desliza. */
.sir-compat__tabla { font-size: 12.5px; table-layout: fixed; min-width: 1100px; }
.sir-compat__tabla col { width: 74px; }
.sir-compat__tabla thead tr:last-child th { font-size: 12px; white-space: nowrap; }
.sir-compat__tabla .sir-compat__col-fluido { width: 218px; }
.sir-compat__tabla abbr { text-decoration: none; border: 0; }
.sir-compat__tabla thead th {
	position: sticky;
	z-index: 2;
	background: var(--sir-gris-100);
}
.sir-compat__tabla thead tr:first-child th { top: 0; }
.sir-compat__tabla thead tr:last-child th { top: 33px; }
.sir-compat__esquina { position: sticky; left: 0; top: 0; z-index: 3; background: var(--blanco); }
.sir-compat__grupo {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sir-gris-500);
	border-bottom: 2px solid var(--sir-azul);
}
.sir-compat__tabla tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--blanco);
	text-align: left;
	vertical-align: top;
}
.sir-compat__fluido { display: block; font-weight: 600; color: var(--sir-grafito); }
.sir-compat__nota { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--sir-gris-500); }
.sir-compat__celda { text-align: center; vertical-align: middle; }
.sir-compat__tabla tbody tr:hover th,
.sir-compat__tabla tbody tr:hover td { background: var(--wp--preset--color--humo, #F7F8FA); }

.sir-compat__vacio {
	margin: 22px 0 0;
	font-size: 15px;
	color: var(--sir-gris-700);
}

/* ---------- Mapa de contacto ---------- */
.sir-mapa {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sir-gris-100);
	border: var(--filete);
}
.sir-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.sir-mapa__pie { margin: 16px 0 0; }

/* La foto destacada del producto va sobre el mismo gris que traen las fotos.
   El atributo de fondo del bloque no se aplica —WordPress lo descarta en
   post-featured-image— asi que se pone acá. */
.wp-block-post-featured-image { background: var(--sir-gris-100, #F0F2F6); }
.wp-block-post-featured-image img { display: block; }

/* ============================================================
   Folleto descargable
   ============================================================ */

/* En el encabezado azul: botón secundario, de contorno. El naranja de
   "Pedir cotización" tiene que seguir siendo el único primario. */
.sir-folleto {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: 14.5px; line-height: 1.2; white-space: nowrap;
	/* El alto se fija para que coincida exactamente con el boton naranja de al
	   lado. Igualar los rellenos no alcanza: el boton de WordPress trae su
	   propia altura de linea y quedaba 5 px mas alto. */
	min-height: 50px; padding: 0 18px; border: 1px solid rgba(255,255,255,.45);
	color: #fff !important; text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sir-folleto:hover,
.sir-folleto:focus-visible {
	background: #fff; border-color: #fff; color: var(--sir-azul) !important; text-decoration: none;
}
.sir-folleto svg { width: 17px; height: 17px; flex: none; }

/* El bloque de atajo mete un párrafo alrededor; se le saca el margen para que
   el botón quede a la misma altura que el de al lado. */
.sir-header .wp-block-group p { margin: 0; }

/* Debajo de 900 px el encabezado ya tiene el logo, la hamburguesa y el botón
   naranja: un cuarto elemento no entra. Ahí el folleto vive en el pie. */
@media (max-width: 900px) {
	.sir-header .sir-folleto { display: none; }
}

/* En el pie es un enlace más de la lista, no un botón. */
.sir-folleto-pie {
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,.78); font-size: 15px; text-decoration: none;
}
.sir-folleto-pie:hover { color: #fff; }
.sir-folleto-pie svg { width: 15px; height: 15px; flex: none; }