/* =========================================================================
   Estilos heredados que NO pertenecen al header/footer.
   Se extrajeron de assets/css/gabic-header.css (eliminado al rehacer el
   header y el footer): seccion "sec-epp" de la home y estilos del
   cotizador (oz-cotizador). Se mantienen tal cual para no romper nada.
   ========================================================================= */

/* =========================================================================
   HOME — Sección "Productos de EPPS con Precios Exclusivos"
   Portado del diseño WPBakery de producción (#section-2).
   En el maquetador aplica estas clases (campo "Clase CSS personalizada"):
     · a la SECCIÓN/fila full-width  ->  sec-epp
     · al bloque de TEXTO del título ->  sec-epp-title
   ========================================================================= */

/* Fondo: azul marino con franja BLANCA abajo (corte seco ~78-79%). No es
   imagen: es un degradado. La franja blanca es donde apoyan las tarjetas. */
.sec-epp {
	background: linear-gradient(180deg, #0c1555 0%, #0c1555 78%, #ffffff 79%, #ffffff 100%) !important;
}

/* Título tipo "cinta": caja blanca (trapecio) con picos naranjas a los lados.
   El texto del título debe ir en un <p> (el bloque de texto lo hace por defecto). */
.sec-epp-title p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 532px;
	margin: 0 auto !important;
	padding: 7px 14px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #0c1555;
	background: #ffffff;
	clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
}
.sec-epp-title p::before,
.sec-epp-title p::after {
	content: "";
	flex: 0 0 87px;
	align-self: stretch;
	background: #fd6500;
}
.sec-epp-title p::before { clip-path: polygon(0 0, 63% 0%, 100% 100%, 39% 100%); }
.sec-epp-title p::after  { clip-path: polygon(37% 0%, 100% 0, 58% 100%, 0% 100%); }

/* Móvil (≤575px): se ocultan los picos, como el diseño original. */
@media (max-width: 575.98px) {
	.sec-epp-title p::before,
	.sec-epp-title p::after { display: none; }
	.sec-epp-title p { clip-path: none; border-radius: 6px; }
}

/* =========================================================================
   COTIZADOR — Carrito + Sidecart con los colores del tema Polizuncho:
   azul --OZ-Color-3 #01356a + turquesa --OZ-Color-1 #00a7a9.
   Se sobreescriben las variables (doble clase para ganar especificidad).
   ========================================================================= */
.ozc-quote-cart.ozc-quote-cart {
	--ozc-accent:      var(--OZ-Color-3, #01356a);
	--ozc-accent-dark: #01254a;
	--ozc-accent-line: var(--OZ-Color-1, #00a7a9);
	--ozc-yellow:      var(--OZ-Color-1, #00a7a9);
	--ozc-yellow-dark: #018e90;
	--ozc-border:      rgba(1, 53, 106, 0.13);
	--ozc-border-soft: rgba(1, 53, 106, 0.07);
}
.ozc-sidecart.ozc-sidecart {
	--ozc-sc-accent:      var(--OZ-Color-1, #00a7a9);
	--ozc-sc-accent-dark: #018e90;
	--ozc-sc-blue:        var(--OZ-Color-3, #01356a);
	--ozc-sc-blue-dark:   #01254a;
	--ozc-sc-line:        var(--OZ-Color-1, #00a7a9);
	--ozc-sc-yellow:      var(--OZ-Color-1, #00a7a9);
	--ozc-sc-yellow-dark: #018e90;
	--ozc-sc-wa:          var(--OZ-Color-1, #00a7a9);
	--ozc-sc-wa-dark:     #018e90;
	--ozc-sc-border:      rgba(1, 53, 106, 0.12);
	--ozc-sc-border-soft: rgba(1, 53, 106, 0.06);

	/* Mismo ancho que el panel de «Categorías» (.pz-drawer--cats). El
	   `!important` es necesario porque el plugin escribe la anchura como
	   variable en el atributo `style` del contenedor (ajuste del panel). */
	--ozc-sidecart-width-desktop: 460px !important;
}

/* "Cotizar por WhatsApp" del carrito iba en amarillo; lo pasamos a VERDE
   WhatsApp (igual que el sidecart y la convención). html body para ganarle
   a la regla base sin depender del orden de carga. */
html body .ozc-quote-cart a.ozc-quote-cart__btn--primary.ozc-quote-cart__btn--whatsapp,
html body .ozc-quote-cart button.ozc-quote-cart__btn--primary.ozc-quote-cart__btn--whatsapp {
	background: var(--ozc-wa);
	border-color: var(--ozc-wa-dark);
	color: #ffffff;
}
html body .ozc-quote-cart a.ozc-quote-cart__btn--primary.ozc-quote-cart__btn--whatsapp:hover,
html body .ozc-quote-cart button.ozc-quote-cart__btn--primary.ozc-quote-cart__btn--whatsapp:hover {
	background: var(--ozc-wa-dark);
	border-color: var(--ozc-wa-dark);
}

/* =========================================================================
   COTIZADOR "TODO-EN-UNO" (página cotizador-de-productos)
   2 columnas: catálogo (izquierda, productos con "Cotizar") + formulario de
   cotización (derecha, sticky). La lista de la derecha se refresca en vivo
   (fragment de WooCommerce en inc/gabic-header.php).
   ========================================================================= */
.ozc-quoter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 30px;
	align-items: start;
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}
.ozc-quoter__catalog { min-width: 0; }
.ozc-quoter__catalog-head { margin-bottom: 22px; }
.ozc-quoter__catalog-head h2 { margin: 0 0 6px; color: #0c1555; font-size: 26px; font-weight: 800; line-height: 1.2; }
.ozc-quoter__catalog-head p { margin: 0 0 14px; color: #64748b; font-size: 15px; }
.ozc-quoter__search { display: flex; gap: 8px; max-width: 480px; }
.ozc-quoter__search input[type="search"] {
	flex: 1 1 auto; min-width: 0; padding: 11px 14px;
	border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-size: 15px; color: #1e293b;
}
.ozc-quoter__search input[type="search"]:focus { outline: none; border-color: #fd6500; box-shadow: 0 0 0 3px rgba(253,101,0,.15); }
.ozc-quoter__search button {
	flex: 0 0 auto; padding: 11px 22px; border: 0; border-radius: 10px;
	background: #fd6500; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
}
.ozc-quoter__search button:hover { background: #e35c00; }

/* La derecha (formulario) fija mientras se hace scroll en el catálogo. */
.ozc-quoter__aside { position: sticky; top: 20px; }

/* El catálogo usa el loop de WooCommerce (cards del pack gabic con "Cotizar"). */
.ozc-quoter__catalog ul.products { margin: 0 !important; }

@media (max-width: 991px) {
	.ozc-quoter { grid-template-columns: 1fr; gap: 24px; }
	.ozc-quoter__aside { position: static; }
}

/* Formulario de cotización [oz_quote_form] (aside): estilo de marca (era básico,
   botón negro). Tarjeta blanca + título azul marino + botón/foco naranjas. */
.ozc-quoter .ozc-quote-form {
	background: #ffffff;
	border: 1px solid #edf1f7;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(12, 21, 85, 0.07);
	padding: 22px 20px;
}
.ozc-quoter .ozc-quote-form__title { color: #0c1555; font-size: 18px; font-weight: 800; }
.ozc-quoter .ozc-quote-form input:focus,
.ozc-quoter .ozc-quote-form textarea:focus {
	outline: none; border-color: #fd6500; box-shadow: 0 0 0 3px rgba(253, 101, 0, 0.15);
}
.ozc-quoter .ozc-quote-form__submit {
	background: #fd6500 !important;
	border-color: #fd6500 !important;
	color: #ffffff !important;
	border-radius: 10px !important;
	width: 100%;
	padding: 13px 16px !important;
}
.ozc-quoter .ozc-quote-form__submit:hover {
	background: #e35c00 !important;
	border-color: #e35c00 !important;
}

/* Centrar el cotizador: el contenedor del tema dejaba el contenido pegado a la
   izquierda (esta página no trae la clase .woocommerce que libera el ancho).
   Liberamos el ancho SOLO en la página 7302 y centramos el bloque (max 1440). */
body.page-id-7302 .site,
body.page-id-7302 .site-main,
body.page-id-7302 #post-7302,
body.page-id-7302 #post-7302 > .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.page-id-7302 .ozc-quoter {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Más aire en el formulario de cotización (estaba muy junto): más separación
   entre filas, entre label e input, y alrededor del resumen y el botón. */
.ozc-quoter .ozc-quote-form__summary { margin: 0 0 24px !important; padding: 14px 16px !important; }
.ozc-quoter .ozc-quote-form__items { gap: 12px !important; }
.ozc-quoter .ozc-quote-form__form { display: block !important; }
.ozc-quoter .ozc-quote-form__grid { gap: 22px 18px !important; margin: 0 0 22px !important; }
.ozc-quoter .ozc-quote-form__grid p { gap: 9px !important; margin: 0 !important; }
.ozc-quoter .ozc-quote-form__grid label,
.ozc-quoter .ozc-quote-form label {
	display: block !important;
	font-size: 14px !important; font-weight: 600 !important; color: #334155 !important; line-height: 1.3 !important;
}
.ozc-quoter .ozc-quote-form input,
.ozc-quoter .ozc-quote-form textarea { padding: 12px 14px !important; }
.ozc-quoter .ozc-quote-form__submit { margin-top: 12px !important; }