/* ==========================================================================
   Candelaria — ajustes de la portada
   Medidas tomadas del PDF PAGINA_CANDELA (lienzo 1366 px).
   Innovar Soluciones Web
   ========================================================================== */

/* --------------------------------------------------------------------------
   VER TODO
   En el PDF va casi del tamaño del título de sección y subrayado, no como
   una letra pequeña de pie de página.
   -------------------------------------------------------------------------- */

.cnd-ver-todo {
	display: inline-block;
	margin-top: .1em;
	padding-bottom: .12em;
	border-bottom: 1px solid currentColor;
	font-family: var(--cnd-texto);
	font-size: clamp(15px, 1.9vw, 26px); /* PDF: 26 */
	font-weight: 300;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cnd-tinta);
	text-decoration: none;
}

.cnd-ver-todo:hover {
	color: var(--cnd-negro);
}

/* El bloque del título y el Ver todo van juntos y centrados. */
.cnd-coleccion .cnd-titulo-seccion {
	margin-bottom: .1em;
}

/* --------------------------------------------------------------------------
   Nuestras Líneas
   Cinco columnas a sangre, con el nombre debajo en serif.
   -------------------------------------------------------------------------- */

.cnd-lineas__rejilla {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(6px, .73vw, 10px);
	margin-top: clamp(16px, 2vw, 28px);
	padding-inline: var(--cnd-margen);
}

.cnd-linea {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cnd-linea__img {
	overflow: hidden;
	background: var(--cnd-humo);
}

.cnd-linea__img img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--cnd-ease);
}

.cnd-linea:hover .cnd-linea__img img {
	transform: scale(1.04);
}

.cnd-linea__nombre {
	display: block;
	margin-top: .7em;
	text-align: center;
	font-family: var(--cnd-display);
	font-size: clamp(13px, 1.61vw, 22px); /* PDF: 22 */
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Tiendas físicas
   Cada tienda es una fila: foto a la izquierda y caja gris a la derecha con
   la dirección centrada en varias líneas y el botón de Google Maps.
   -------------------------------------------------------------------------- */

.cnd-tiendas__lista {
	display: grid;
	gap: clamp(8px, 1vw, 14px);
	margin-top: clamp(16px, 2vw, 28px);
}

.cnd-tienda {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(8px, 1vw, 14px);
	align-items: stretch;
}

.cnd-tienda__img {
	overflow: hidden;
	background: var(--cnd-humo);
}

.cnd-tienda__img img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.cnd-tienda__datos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 22px);
	padding: clamp(16px, 2.2vw, 30px);
	background: var(--cnd-humo);
	text-align: center;
}

.cnd-tienda__dir {
	margin: 0;
	font-family: var(--cnd-texto);
	font-size: clamp(14px, 1.76vw, 24px); /* PDF: 24 */
	font-weight: 300;
	line-height: 1.35;
	color: var(--cnd-tinta);
}

/* Botón de Google Maps: recuadro blanco, como en el diseño. */
.cnd-tienda__mapa {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .6em 1.6em;
	background: var(--cnd-blanco);
	border: 1px solid var(--cnd-linea);
	color: var(--cnd-gris);
	font-family: var(--cnd-texto);
	font-size: clamp(12px, 1.32vw, 18px);
	letter-spacing: .02em;
	text-decoration: none;
	transition: border-color .2s var(--cnd-ease), color .2s var(--cnd-ease);
}

.cnd-tienda__mapa::before {
	content: '';
	width: 1.1em;
	height: 1.1em;
	flex: none;
	background: no-repeat center / contain
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23EA4335" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.6" fill="white"/></svg>');
}

.cnd-tienda__mapa:hover {
	border-color: var(--cnd-negro);
	color: var(--cnd-negro);
}

/* --------------------------------------------------------------------------
   Aire entre secciones: en el PDF es más ajustado que lo que quedó.
   -------------------------------------------------------------------------- */

.cnd-home .cnd-seccion {
	padding-block: clamp(24px, 3.3vw, 45px);
}

.cnd-home .cnd-seccion--ajustada {
	padding-block: clamp(18px, 2.2vw, 30px) clamp(10px, 1.2vw, 16px);
}

.cnd-home .cnd-subtitulo-seccion {
	margin-top: .3em;
	max-width: 60ch;
	margin-inline: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Teléfono
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.cnd-lineas__rejilla {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.cnd-tienda {
		grid-template-columns: 1fr;
	}

	.cnd-tienda__img img {
		aspect-ratio: 16 / 10;
	}
}
