/* ==========================================================================
   Aubrelia - Disposicion responsive

   Las propiedades de rejilla vivian en atributos style="" en linea, donde
   no cabe un @media. Se movieron aqui. Los valores del bloque "Escritorio"
   son identicos a los que estaban en linea, asi que el escritorio no cambia.

   Puntos de corte: 1100 / 900 / 600 / 430.
   ========================================================================== */

/* ---------- Escritorio (valores originales) ---------- */
[data-r="hero"]     { grid-template-columns: 1.02fr 1fr; }
[data-r="hero-media"] { min-height: 620px; }
[data-r="iconbar"]  { grid-template-columns: repeat(4, 1fr); }
[data-r="cols4"]    { grid-template-columns: repeat(4, 1fr); }
[data-r="cols3"]    { grid-template-columns: repeat(3, 1fr); }
[data-r="cols2"]    { grid-template-columns: 1fr 1fr; }
[data-r="tabla"]    { grid-template-columns: 1.6fr 1fr 1fr; }
[data-r="tabla-wrap"] { overflow: hidden; }
[data-r="shop"]     { grid-template-columns: 272px 1fr; }
[data-r="grid"]     { grid-template-columns: repeat(3, 1fr); }
[data-r="banda3"]   { grid-template-columns: repeat(3, 1fr); }
[data-r="header"]   { grid-template-columns: 1fr auto 1fr; }
[data-r="logo"]     { justify-self: center; }
[data-r="footer"]   { grid-template-columns: 1.5fr 1fr 1fr 1fr; }

.aub-split-1 { grid-template-columns: 1fr 1.02fr; }
.aub-split-2 { grid-template-columns: 1.02fr 1fr; }
.aub-split-3 { grid-template-columns: 0.85fr 1.15fr; }
.aub-split-4 { grid-template-columns: 1.15fr 0.85fr; }

/* ---------- Portatiles pequenos y tabletas ---------- */
@media (max-width: 1100px) {
	[data-r="cols4"]  { grid-template-columns: repeat(2, 1fr); }
	[data-r="cols3"],
	[data-r="grid"],
	[data-r="banda3"] { grid-template-columns: repeat(2, 1fr); }

	/* La tienda apila, pero los productos van primero y los filtros debajo. */
	[data-r="shop"] {
		display: flex;
		flex-direction: column;
		gap: 36px;
	}
	[data-r="shop"] > *:first-child { order: 2; }
}

/* ---------- Tableta vertical y movil grande ---------- */
@media (max-width: 900px) {
	[data-r="hero"] { grid-template-columns: 1fr; }
	[data-r="hero-media"] { min-height: 320px; }

	.aub-split-1,
	.aub-split-2,
	.aub-split-3,
	.aub-split-4 {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	[data-r="iconbar"] { grid-template-columns: repeat(2, 1fr); }
	[data-r="footer"]  { grid-template-columns: repeat(2, 1fr); gap: 32px; }

	/* Cabecera: fuera los enlaces, logo a la izquierda, boton a la derecha. */
	[data-r="header"]   { grid-template-columns: 1fr auto; gap: 14px; }
	[data-r="nav-side"] { display: none; }
	[data-r="logo"]     { justify-self: start; }
}

/* ---------- Movil ---------- */
@media (max-width: 600px) {
	[data-r="cols3"],
	[data-r="grid"],
	[data-r="banda3"],
	[data-r="cols2"] { grid-template-columns: 1fr; }

	[data-r="footer"] { grid-template-columns: 1fr; gap: 28px; }

	/* La tabla comparativa no se apila sin perder sentido: se desliza. */
	[data-r="tabla-wrap"] {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	[data-r="tabla"] { min-width: 520px; }
}

/* ---------- Movil pequeno ---------- */
@media (max-width: 430px) {
	[data-r="cols4"]   { grid-template-columns: 1fr; }
	[data-r="iconbar"] { grid-template-columns: 1fr; }
}