/* ==========================================================================
   PILETAS NORTE — Rediseño 2026
   Hoja de estilos adicional. Se carga DESPUÉS de style.css / responsive.css
   para no tocar el CSS original del theme (así se preserva todo lo que
   ya funciona: grillas, sliders, formularios, menú, etc.) y solo
   sobrescribir tipografía, color, radios de borde y agregar el menú
   flotante de contacto.
   ========================================================================== */

:root {
	--pn-navy: #0B2A3B;
	--pn-primary: #0E7C90;
	--pn-primary-dark: #0A5F70;
	--pn-primary-light: #4FC3D9;
	--pn-accent: #FF7A45;
	--pn-accent-dark: #E8632F;
	--pn-whatsapp: #25D366;
	--pn-whatsapp-dark: #1DA851;
	--pn-bg-soft: #F2FAFB;
	--pn-text: #445055;
	--pn-radius-sm: 10px;
	--pn-radius-md: 18px;
	--pn-radius-lg: 28px;
	--pn-shadow: 0 10px 30px rgba(11, 42, 59, 0.12);
}

/* --------------------------------------------------------------------
   Tipografía: Montserrat en todo el sitio
   -------------------------------------------------------------------- */

body,
input,
textarea,
select,
button,
.dropdown-menu {
	font-family: 'Montserrat', sans-serif;
	color: var(--pn-text);
}

h1, h2, h3, h4, h5, h6,
#primary-menu ul li > a div,
.heading-block h1,
.heading-block h2,
.heading-block h3,
.heading-block h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--pn-navy);
	letter-spacing: -0.01em;
}

.slider-caption h1,
.slider-caption h3 {
	font-family: 'Montserrat', sans-serif;
}

/* --------------------------------------------------------------------
   Color de marca: reemplaza el turquesa plano del theme (#1ABC9C)
   por la paleta aqua + acento cálido
   -------------------------------------------------------------------- */

a { color: var(--pn-primary); }
a:hover { color: var(--pn-accent); }

.color,
h6 > span:not(.nocolor):not(.badge) { color: var(--pn-primary) !important; }

.border-color { border-color: var(--pn-primary) !important; }

.bgcolor #header-wrap,
#primary-menu.style-4 > ul > li.current > a,
#top-cart > a:hover { background-color: var(--pn-primary) !important; }

#primary-menu ul li.current > a div,
#primary-menu ul li:hover > a div { color: var(--pn-primary) !important; }

::selection { background: var(--pn-primary); color: #FFF; }
::-moz-selection { background: var(--pn-primary); color: #FFF; }

/* --------------------------------------------------------------------
   Botones y CTAs: más redondeados, con foco en WhatsApp/contacto
   -------------------------------------------------------------------- */

.button,
.btn,
.button-rounded,
button.btn,
input[type="submit"] {
	border-radius: var(--pn-radius-sm) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.button-dark,
.button-full.button-dark {
	background-color: var(--pn-navy) !important;
	border-color: var(--pn-navy) !important;
}

.button-dark:hover {
	background-color: var(--pn-primary) !important;
	border-color: var(--pn-primary) !important;
	transform: translateY(-2px);
}

/* El formulario de contacto usaba btn-danger (rojo de Bootstrap):
   se corrige para que quede dentro de la paleta de marca */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
	background-color: var(--pn-accent) !important;
	border-color: var(--pn-accent) !important;
	color: #FFF !important;
	border-radius: var(--pn-radius-sm) !important;
}

.btn-danger:hover { background-color: var(--pn-accent-dark) !important; }

.form-control,
.quick-contact-form input,
.quick-contact-form textarea {
	border-radius: var(--pn-radius-sm) !important;
	font-family: 'Montserrat', sans-serif;
}

/* --------------------------------------------------------------------
   Tarjetas, imágenes y galería con esquinas redondeadas
   -------------------------------------------------------------------- */

.entry-image,
.entry-image img,
.portfolio-image,
.portfolio-image img,
#post-list-footer .entry-image,
#post-list-footer iframe,
.swiper-slide,
.modal1 .block,
.si-rounded {
	border-radius: var(--pn-radius-md);
	overflow: hidden;
}

.oc-item img { border-radius: var(--pn-radius-sm); }

.heading-block,
.widget.form-widget,
.widget.quick-contact-widget {
	border-radius: var(--pn-radius-md);
}

/* --------------------------------------------------------------------
   Header y footer
   -------------------------------------------------------------------- */

#header-wrap { font-family: 'Montserrat', sans-serif; }

footer#footer {
	background-color: var(--pn-navy) !important;
}

footer#footer a { color: var(--pn-primary-light); }
footer#footer a:hover { color: var(--pn-accent); }

#copyrights {
	background-color: #081E2A !important;
}

/* ==========================================================================
   Menú flotante lateral (WhatsApp / Llamada / Cómo llegar)
   ========================================================================== */

.pn-float-menu {
	position: fixed;
	right: 0;
	bottom: 110px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	box-shadow: var(--pn-shadow);
	border-top-left-radius: var(--pn-radius-md);
	border-bottom-left-radius: var(--pn-radius-md);
	overflow: hidden;
}

.pn-float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: var(--pn-navy);
	color: #FFF !important;
	position: relative;
	border-top: 1px solid rgba(255,255,255,0.14);
	transition: background-color 0.2s ease, padding-right 0.25s ease, width 0.25s ease;
	text-decoration: none !important;
}

.pn-float-btn:first-child { border-top: none; }

.pn-float-btn--top {
	border-top-left-radius: var(--pn-radius-md);
}

.pn-float-btn--bottom {
	border-bottom-left-radius: var(--pn-radius-md);
}

.pn-float-btn svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	fill: #FFF;
}

.pn-float-btn--whatsapp { background-color: var(--pn-whatsapp); }
.pn-float-btn--whatsapp:hover { background-color: var(--pn-whatsapp-dark); }

.pn-float-btn--call { background-color: var(--pn-primary); }
.pn-float-btn--call:hover { background-color: var(--pn-primary-dark); }

.pn-float-btn--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.pn-float-btn--instagram:hover { filter: brightness(0.92); }

.pn-float-btn--map { background-color: var(--pn-navy); }
.pn-float-btn--map:hover { background-color: var(--pn-accent-dark); }

.pn-float-btn .pn-float-label {
	position: absolute;
	right: 66px;
	white-space: nowrap;
	background-color: var(--pn-navy);
	color: #FFF;
	padding: 6px 14px;
	border-radius: var(--pn-radius-sm);
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.pn-float-btn:hover .pn-float-label {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 767px) {
	.pn-float-menu { right: 0; bottom: 90px; }
	.pn-float-btn { width: 48px; height: 48px; }
	.pn-float-btn svg { width: 22px; height: 22px; }
	.pn-float-btn .pn-float-label { display: none; }
}