/*
Theme Name: Botiga Child
Template: botiga
*/

/* Stitch Footer — diseño generado en Google Stitch (menú legal) */
.stitch-footer {
    background: #1A1A1A;
    color: #B8B5AF;
}
.stitch-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1rem;
}
.stitch-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
.stitch-footer-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.stitch-footer-title {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.stitch-footer-address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 15px;
    line-height: 1.6;
}
.stitch-footer-addr-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #B8B5AF;
    text-decoration: none;
    margin: 0;
    transition: color 0.15s ease;
}
.stitch-footer-addr-item:hover {
    color: #FFFFFF;
}
.stitch-footer-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.stitch-footer-heading {
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0;
}
.stitch-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stitch-footer-links a {
    color: #B8B5AF;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.9;
    text-decoration: none;
    transition: all 0.15s ease;
}
.stitch-footer-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: #D4521E;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.stitch-footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.stitch-footer-bottom p {
    color: #B8B5AF;
    font-size: 0.8rem;
    margin: 0;
}

@media (min-width: 768px) {
    .stitch-footer-inner {
        padding: 3rem 2.5rem;
    }
    .stitch-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}
@media (min-width: 1025px) {
    .stitch-footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
}

/* >>> DSL-TOPBAR START (generado desde docs/topbar/topbar.css) */
/* ==========================================================================
   Desguaces BCN Latorre — Barra superior de contacto
   --------------------------------------------------------------------------
   FUENTE DE VERDAD de la barra. Este archivo se inyecta en
   botiga-child/style.css entre los marcadores DSL-TOPBAR (ver
   docs/topbar/DISENO.md, sección "Despliegue").
   No editar la copia del tema a mano: editar aquí y re-sincronizar.
   ========================================================================== */

.dsl-topbar {
	--dsl-carbon: #1A1A1A;
	--dsl-naranja: #D4521E;
	--dsl-naranja-hover: #B8451A;
	--dsl-amarillo: #F5A623;
	--dsl-texto: #E8E4DE;
	--dsl-mutado: #B8B5AF;
	--dsl-linea: rgba(255, 255, 255, 0.12);
	--dsl-linea-hover: rgba(212, 82, 30, 0.45);

	background: var(--dsl-carbon);
	color: var(--dsl-texto);
	font-size: 13px;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
}

.dsl-topbar *,
.dsl-topbar *::before,
.dsl-topbar *::after {
	box-sizing: border-box;
}

.dsl-topbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dsl-topbar a,
.dsl-topbar a:visited {
	color: var(--dsl-texto);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.dsl-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-height: 40px;
}

.dsl-topbar__contact {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.dsl-topbar__list {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.dsl-topbar__list > li {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

/* Separador vertical fino entre acciones */
.dsl-topbar__list > li + li::before {
	content: "";
	display: block;
	width: 1px;
	height: 14px;
	flex: 0 0 1px;
	background: var(--dsl-linea);
}

/* --------------------------------------------------------------------------
   Reclamo "¡Llámanos!"
   -------------------------------------------------------------------------- */
.dsl-topbar__claim {
	display: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dsl-naranja);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Enlaces de contacto (teléfono fijo / móvil / email)
   -------------------------------------------------------------------------- */
.dsl-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 4px;
	margin: -12px 0;
	font-weight: 500;
	white-space: nowrap;
	min-width: 0;
	transition: color 0.15s ease;
}

.dsl-topbar__link:hover,
.dsl-topbar__link:focus-visible {
	color: #FFFFFF;
}

.dsl-topbar__link:hover .dsl-topbar__text {
	text-decoration: underline;
	text-decoration-color: var(--dsl-naranja);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dsl-topbar__link:hover .dsl-topbar__icon {
	color: var(--dsl-naranja);
}

.dsl-topbar__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--dsl-mutado);
	transition: color 0.15s ease;
}

.dsl-topbar__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Botón WhatsApp
   -------------------------------------------------------------------------- */
.dsl-topbar__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 11px;
	border-radius: 4px;
	background: var(--dsl-naranja);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.dsl-topbar__wa,
.dsl-topbar__wa:visited {
	color: #FFFFFF;
}

.dsl-topbar__wa:hover,
.dsl-topbar__wa:focus-visible {
	background: var(--dsl-naranja-hover);
	color: #FFFFFF;
}

.dsl-topbar__wa .dsl-topbar__icon {
	width: 14px;
	height: 14px;
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Redes sociales
   -------------------------------------------------------------------------- */
.dsl-topbar__social {
	display: none;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.dsl-topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--dsl-linea);
	border-radius: 4px;
	color: var(--dsl-mutado);
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dsl-topbar__social a:hover,
.dsl-topbar__social a:focus-visible {
	color: #FFFFFF;
	border-color: var(--dsl-naranja);
	background: rgba(212, 82, 30, 0.16);
}

.dsl-topbar__social .dsl-topbar__icon {
	width: 13px;
	height: 13px;
	color: currentColor;
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */
.dsl-topbar__vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dsl-topbar a:focus-visible {
	outline: 2px solid var(--dsl-amarillo);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Responsive — revelado progresivo de datos
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
	/* Sin redes sociales: el pie de página ya las incluye */
	.dsl-topbar__social { display: none; }

	/* El email queda como icono con nombre accesible */
	.dsl-topbar__mail .dsl-topbar__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.dsl-topbar__list,
	.dsl-topbar__list > li,
	.dsl-topbar__contact { gap: 10px; }

	.dsl-topbar__inner { min-height: 44px; }

	.dsl-topbar__link { padding: 12px 2px; }
}

@media (min-width: 576px) {
	.dsl-topbar__social { display: flex; }

	.dsl-topbar__mail .dsl-topbar__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.dsl-topbar__inner { min-height: 44px; }
}

@media (min-width: 768px) {
	.dsl-topbar__mail .dsl-topbar__text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: nowrap;
	}

	.dsl-topbar__inner { min-height: 40px; }
}

@media (min-width: 1025px) {
	.dsl-topbar__claim { display: inline; }

	/* Segundo teléfono (móvil) — a partir de aquí hay sitio para ambos */
	.dsl-topbar__list > li.dsl-topbar__tel-mobile { display: flex; }
}

@media (max-width: 1024px) {
	.dsl-topbar__list > li.dsl-topbar__tel-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   Impresión
   -------------------------------------------------------------------------- */
@media print {
	.dsl-topbar { display: none !important; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.dsl-topbar * { transition: none !important; }
}
/* <<< DSL-TOPBAR END */

/* >>> HOME-HERO START */
/* Imagen de cabecera de la home en WebP.
   Sobrescribe la regla de desguace-sync/assets/hero-fix.css, que apunta al .jpg.
   Va aquí y no en el plugin por dos motivos:
     1. El plugin encola hero-fix.css con la versión fija '1.1', así que editarlo
        NO invalida la caché del navegador ni la de LiteSpeed. El style.css del
        tema hijo sí se versiona con filemtime, así que se refresca solo.
     2. El prefijo `body` sube la especificidad por encima de la del plugin, así
        que gana independientemente del orden de carga. */
body article .wp-block-cover.alignfull:first-of-type {
	background-image: url("/wp-content/uploads/2026/06/banner-hero.webp") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
/* <<< HOME-HERO END */