/* Theme Name: Blocksy Child Theme URI: https://referenciaindustrial.es Description: Tema hijo de Blocksy para Referencia Industrial. Permite sobrescribir plantillas concretas (empezando por la ficha de producto) sin tocar el tema padre. Author: Referencia Industrial Template: blocksy Version: 1.2 */ /* ═══════════════════════════════════════════════════════════════════ FICHA DE PRODUCTO — REJILLA DE 3 COLUMNAS ═══════════════════════════════════════════════════════════════════ ┌─────────────┬──────────────────┬─────────────────────┐ │ COLUMNA 1 │ COLUMNA 2 │ COLUMNA 3 │ │ Imagen │ Precios │ Datos técnicos │ │ (+ futura │ Diagnóstico │ Documentación │ │ Compatib.) │ │ │ └─────────────┴──────────────────┴─────────────────────┘ QUÉ HAY QUE SABER ANTES DE TOCAR NADA: El HTML de esta rejilla está en otro archivo: blocksy-child/woocommerce/content-single-product.php Ahí es donde se decide QUÉ bloque va en QUÉ columna. Aquí (en este archivo) solo se decide CUÁNTO MIDE cada columna. ⚠️ IMPORTANTE AL GUARDAR CAMBIOS: Después de editar este archivo, sube el número de "Version:" de arriba (por ejemplo de 1.2 a 1.3). Si no lo haces, el navegador seguirá mostrando la versión antigua guardada en su memoria y parecerá que el cambio no ha funcionado. ═══════════════════════════════════════════════════════════════════ */ .ria-grid { /* ───────────────────────────────────────────────────────────── ① ANCHO DE CADA COLUMNA ───────────────────────────────────────────────────────────── Son 3 números, uno por columna, de izquierda a derecha: 250px → columna 1 (imagen) 758px → columna 2 (precios y diagnóstico) 300px → columna 3 (datos técnicos y documentación) CÓMO CAMBIARLO: sube o baja el número que quieras. Ejemplo: si quieres la imagen más grande, cambia 250px por 350px. ⚠️ SI CAMBIAS ALGUNO, actualiza también el max-width de abajo (punto ③), o quedará un hueco vacío o se saldrá de la pantalla. TRUCO: si en vez de un número pones "1fr", esa columna se quedará con todo el espacio sobrante en lugar de tener un ancho fijo. Ejemplo: 250px 758px 1fr ───────────────────────────────────────────────────────────── */ grid-template-columns: 355px 758px 355px; /* ───────────────────────────────────────────────────────────── ② SEPARACIÓN ENTRE BLOQUES ───────────────────────────────────────────────────────────── El hueco que hay entre columnas Y entre las tarjetas apiladas dentro de cada columna. Un solo número lo controla todo. Más grande = más aire entre tarjetas. ⚠️ Si lo cambias, actualiza también el max-width de abajo. ───────────────────────────────────────────────────────────── */ gap: 10px; /* ───────────────────────────────────────────────────────────── ③ ANCHO TOTAL Y MÁRGENES CON LOS BORDES DE LA PANTALLA ───────────────────────────────────────────────────────────── Este número debe ser la SUMA de las 3 columnas más los 2 huecos: 250 + 758 + 300 = 1308 (las tres columnas) + 10 + 10 = 20 (los dos huecos entre ellas) ──────── 1328px Si cambias cualquier ancho de columna o el gap, rehaz esta suma. EL MARGEN CON LOS BORDES DE LA PANTALLA no se pone a mano: el "margin: 0 auto" centra la rejilla y reparte automáticamente el espacio sobrante a los dos lados por igual. → Para MÁS margen lateral (contenido más estrecho): baja los anchos de las columnas del punto ① y rehaz la suma. → Para MENOS margen lateral (contenido más ancho): súbelos. ───────────────────────────────────────────────────────────── */ max-width: 1468px; margin: 0 auto; /* ───────────────────────────────────────────────────────────── ④ AJUSTES TÉCNICOS — normalmente no hace falta tocar esto ───────────────────────────────────────────────────────────── display:grid → activa el sistema de columnas align-items:start → cada columna empieza arriba del todo, en vez de estirarse para igualar su altura a la columna más larga ───────────────────────────────────────────────────────────── */ display: grid; align-items: start; } /* ═══════════════════════════════════════════════════════════════════ CÓMO SE APILAN LAS TARJETAS DENTRO DE CADA COLUMNA ═══════════════════════════════════════════════════════════════════ */ .ria-col { /* Apila las tarjetas de la columna una debajo de otra, separadas por el mismo hueco que hay entre columnas (el gap del punto ②). Normalmente no hace falta tocar nada de aquí. */ display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* ⚠️ NO BORRAR ESTA REGLA — explicación de por qué existe: Cada tarjeta (Datos técnicos, Diagnóstico, etc.) trae su propio margen definido en su snippet CSS de Code Snippets. El problema: en este sistema de columnas, ese margen NO sustituye al hueco de separación, sino que SE SUMA. Es decir, si una tarjeta tiene 16px de margen propio y el gap es de 10px, la separación real sería de 26px, no de 10px — y cada tarjeta quedaría a una distancia distinta según el margen que traiga. Esta regla pone a cero los márgenes propios de las tarjetas cuando están dentro de la rejilla, para que la única separación sea el gap y todo quede uniforme. (Sus márgenes originales siguen intactos en sus snippets: solo se anulan aquí dentro, no en el resto de la web.) */ .ria-col > * { margin: 0 !important; } /* ═══════════════════════════════════════════════════════════════════ MÓVILES Y PANTALLAS PEQUEÑAS ═══════════════════════════════════════════════════════════════════ Cuando la pantalla mide menos de 1200px de ancho (móviles, tablets, ventanas pequeñas), las 3 columnas no caben. Esta regla las convierte en una sola columna, y las tarjetas se apilan una debajo de otra en este orden: imagen → precios → diagnóstico → datos técnicos → documentación. PARA CAMBIAR CUÁNDO SE APILA: sube o baja el número 1200px. (Más alto = se apila antes, en pantallas más grandes.) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .ria-grid { grid-template-columns: 1fr; max-width: 100%; } }