/* ==========================================================================
   Farmacia Pueyrredón — estilos propios del child
   Colores del manual de marca (1.3): azul PANTONE 641 C y verde PANTONE 376 C.
   Los colores de Flatsome (Personalizador) usan los mismos valores que estas variables.
   ========================================================================== */

:root {
	--fp-azul: #0679ae;          /* color principal (manual y logo) */
	--fp-azul-oscuro: #055b83;   /* barra final del footer: el azul al 75 % */
	--fp-celeste: #daebf3;       /* acento suave: barra del menú (el azul al 15 % sobre blanco) */
	--fp-verde: #7eb904;         /* color secundario (la cruz) */
	--fp-blanco: #fff;
	--fp-radio: 14px;            /* esquinas de banners e imágenes */
	--fp-logo-alto: 64px;        /* logo del footer, con su área de resguardo incluida */
	/* Tipografía del manual (1.4): Calibri. Es de Microsoft y no tiene licencia web, así que se usa la
	   instalada en la compu del visitante (Windows y Office la traen) y, si no está, Carlito: la libre
	   con las mismas medidas letra por letra, que Flatsome sirve desde el propio sitio. */
	--fp-fuente: Calibri, Carlito, sans-serif;
}

/* --- Tipografía: los mismos selectores con los que Flatsome aplica la del Personalizador --- */
body,
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a,
h1, h2, h3, h4, h5, h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a,
.alt-font {
	font-family: var(--fp-fuente);
}

/* --- Botones -------------------------------------------------------------
   Los azules van con contorno azul; al pasar el mouse se rellenan de azul.
   Quedan afuera los blancos (sobre fondos oscuros), los de formulario de Flatsome
   (+/- de cantidad) y los secundarios (lupa del buscador). */
.button:not(.white):not(.secondary):not(.success):not(.alert):not(.is-link):not(.is-underline):not(.is-form),
input[type=submit]:not(.white):not(.secondary) {
	background-color: transparent;
	border: 2px solid var(--fp-azul);
	border-radius: 99px;
	box-shadow: none;
	color: var(--fp-azul);
}

.button:not(.white):not(.secondary):not(.success):not(.alert):not(.is-link):not(.is-underline):not(.is-form):hover,
.button:not(.white):not(.secondary):not(.success):not(.alert):not(.is-link):not(.is-underline):not(.is-form):focus-visible,
input[type=submit]:not(.white):not(.secondary):hover {
	background-color: var(--fp-azul);
	border-color: var(--fp-azul);
	color: var(--fp-blanco);
}

/* --- Títulos de sección (home) ------------------------------------------ */
.titulo-seccion h2 {
	color: var(--fp-azul);
}

/* Banda de categorías de la home. */
.fp-seccion-celeste {
	background-color: var(--fp-celeste);
}

/* --- Barra superior ------------------------------------------------------ */
.topbar-promo {
	font-size: 16px;
}

/* --- Banners e imágenes redondeados -------------------------------------- */
.image-bord img,
.slider-wrapper.relative {
	border-radius: var(--fp-radio);
}

.slider-wrapper.relative {
	overflow: hidden; /* para que el fondo de cada banner respete el redondeo */
}

/* --- Logos de la marca ([fp_logo]) --------------------------------------- */
.fp-logo {
	display: inline-block;
	height: auto;
	max-width: 100%;
}

/* Las versiones con resguardo ya traen su aire: no se les suma margen. */
.fp-logo--claro-resguardo,
.fp-logo--oscuro-resguardo,
.fp-logo--blanco-resguardo {
	height: var(--fp-logo-alto);
	vertical-align: middle;
	width: auto;
}

/* --- Footer -------------------------------------------------------------- */
.section.fp-footer { /* .section.dark de Flatsome trae fondo gris propio */
	background-color: var(--fp-azul);
}

/* Listas de sucursales y de redes: sin viñeta ni sangría (Flatsome le pone margin-left a los li). */
ul.sucursales li,
ul.fp-redes li {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* --- Redes ([fp_redes]) -------------------------------------------------- */
.fp-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 1em 0;
}

.fp-redes__link {
	align-items: center;
	border: 2px solid currentColor;
	border-radius: 99px;
	color: var(--fp-azul);
	display: inline-flex;
	font-size: 22px;
	height: 44px;
	justify-content: center;
	transition: background-color .2s, color .2s;
	width: 44px;
}

.fp-redes__link:hover {
	background-color: var(--fp-azul);
	border-color: var(--fp-azul);
	color: var(--fp-blanco);
}

.dark .fp-redes__link {
	color: var(--fp-blanco);
}

.dark .fp-redes__link:hover {
	background-color: var(--fp-blanco);
	border-color: var(--fp-blanco);
	color: var(--fp-azul);
}

/* Con etiquetas (contacto): icono y texto en una píldora. */
.fp-redes--etiquetas {
	flex-direction: column;
	align-items: flex-start;
}

.fp-redes--etiquetas .fp-redes__link {
	font-size: 20px;
	font-weight: 700;
	gap: 10px;
	padding: 0 20px 0 16px;
	width: auto;
}

.fp-redes--etiquetas .fp-redes__link span {
	font-size: 16px;
}

/* --- Carrusel de marcas ([fp_marcas]) ------------------------------------ */
.marquee-container {
	background: transparent;
	overflow: hidden;
	padding: 20px 0;
	position: relative;
	width: 100%;
}

.marquee-track {
	animation: fp-marquesina 30s linear infinite;
	display: flex;
	width: max-content;
}

.marquee-container:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-item {
	align-items: center;
	display: flex;
	flex: 0 0 180px;
	height: 80px;
	justify-content: center;
	margin: 0 25px;
}

.marquee-item img {
	max-height: 150px;
	max-width: 100%;
	object-fit: contain;
}

@keyframes fp-marquesina {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}
}

/* --- Utilitarias (las mismas que usa el contenido de UX Builder) --------- */
.tac{text-align:center;}.tal{text-align:left;}.tar{text-align:right;}.taj{text-align:justify;}
.mgb0{margin-bottom:0!important;}.mg0{margin:0;}
.mgb40{margin-bottom:40px!important;}.mg40{margin:40px;}
.mgb30{margin-bottom:30px!important;}.mg30{margin:30px;}
.mgb20{margin-bottom:20px!important;}.mg20{margin:20px;}
.mgb10{margin-bottom:10px!important;}.mg10{margin:10px;}

.pdb0{padding-bottom:0!important;}.pd0{padding:0;}
.pdb40{padding-bottom:40px!important;}.pd40{padding:40px;}
.pdb30{padding-bottom:30px!important;}.pd30{padding:30px;}
.pdb20{padding-bottom:20px!important;}.pd20{padding:20px;}
.pdb10{padding-bottom:10px!important;}.pd10{padding:10px;}
.pdb5{padding-bottom:5px!important;}.pd5{padding:5px;}

.mgt0{margin-top:0!important;}
.mgt40{margin-top:40px!important;}
.mgt30{margin-top:30px!important;}
.mgt20{margin-top:20px!important;}
.mgt10{margin-top:10px!important;}
.mgt5{margin-top:5px!important;}

.pdt0{padding-top:0!important;}
.pdt40{padding-top:40px!important;}
.pdt30{padding-top:30px!important;}
.pdt20{padding-top:20px!important;}
.pdt10{padding-top:10px!important;}
.pdt5{padding-top:5px!important;}

/* SALTOS: */

/* LG */
@media only screen and (min-width: 1240px){
.lgtac{text-align:center;}.lgtal{text-align:left;}.lgtar{text-align:right;}.lgtaj{text-align:justify;}
.hidden-lg{display:none;}
.visible-md{display:none;}
.visible-sm{display:none;}
.visible-xs{display:none;}
}

/* MD */
@media only screen and (min-width: 960px) and (max-width:1239px){
.mdtac{text-align:center;}.mdtal{text-align:left;}.mdtar{text-align:right;}.mdtaj{text-align:justify;}
.visible-lg{display:none;}
.hidden-md{display:none;}
.visible-sm{display:none;}
.visible-xs{display:none;}
}

/* SM */
@media only screen and (min-width: 768px) and (max-width: 959px){
.smtac{text-align:center;}.smtal{text-align:left;}.smtar{text-align:right;}.smtaj{text-align:justify;}
.visible-lg{display:none;}
.visible-md{display:none;}
.hidden-sm{display:none;}
.visible-xs{display:none;}
}

/* XS */
@media only screen and (min-width: 0px) and (max-width: 767px){
.xstac{text-align:center;}.xstal{text-align:left;}.xstar{text-align:right;}.xstaj{text-align:justify;}
.visible-lg{display:none;}
.visible-md{display:none;}
.visible-sm{display:none;}
.hidden-xs{display:none;}
}
.grecaptcha-badge{visibility:hidden;}