/* =========================================================================
   ODENIP — Base de marca, cabecera y pie
   Los tokens (:root) los inyecta inc/odenip-brand.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tipografía y base del documento
   ------------------------------------------------------------------------- */

html,
body {
	font-family: var(--odp-font-body);
	color: var(--odp-body);
	background: var(--odp-white);
}

body {
	/* Trama de puntos tenue que acompaña a todas las secciones claras. */
	background-image: radial-gradient(rgba(20, 22, 28, .10) 1px, transparent 1px);
	background-size: 30px 30px;
	background-position: 0 0;
}

h1, h2, h3, h4, h5, h6,
.odp-title {
	font-family: var(--odp-font-title);
	font-weight: 700;
	color: var(--odp-ink);
	letter-spacing: .01em;
	line-height: 1.12;
	text-transform: uppercase;
}

p {
	line-height: 1.7;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* Anchura de página compartida por chrome y maquetador. */
.odp-wrap {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* Carrito, cotización y páginas sueltas de WooCommerce: el maquetador no
   interviene ahí, así que la anchura la fija el tema. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.odp-page-finalizar-cotizacion .entry-content {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 24px 34px 70px;
}

@media (max-width: 600px) {
	.woocommerce-cart .entry-content,
	.woocommerce-checkout .entry-content,
	.woocommerce-account .entry-content,
	.odp-page-finalizar-cotizacion .entry-content {
		padding: 18px 16px 48px;
	}
}

/* «Nosotros» a sangre: las filas del maquetador ya salen a 100vw, pero su
   carril interior (.oz-pb-inner--theme) queda topado en --oz-container-pc.
   Aquí se libera ese tope y se deja un aire fijo de 60px a cada lado. El
   selector lleva html + la clase de página para ganar a la base del plugin
   (`html body .oz-pb-root .oz-pb-inner--theme`) y a los 24px por fila. */
html body.odp-page-nosotros .oz-pb-root .oz-pb-inner {
	max-width: none;
	padding-left: 60px;
	padding-right: 60px;
}

/* En móvil 60px se come el contenido: se vuelve al sangrado de la página. */
@media (max-width: 767px) {
	html body.odp-page-nosotros .oz-pb-root .oz-pb-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* -------------------------------------------------------------------------
   2. Utilidades de marca
   ------------------------------------------------------------------------- */

/* Esquina superior derecha cortada. Sin borde: sólo recorte. */
.odp-cut {
	--cut: var(--odp-cut);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* Recorte con borde de 1px en todos los lados, diagonal incluida.
   Técnica de dos capas: la exterior es el color del borde. */
.odp-cutbox {
	--cut: var(--odp-cut);
	background: var(--odp-line);
	padding: var(--odp-bw);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.odp-cutbox > * {
	height: 100%;
	background: var(--odp-white);
	clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) + 1px), 100% 100%, 0 100%);
}

/* Botones */
.odp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 12px 26px;
	font-family: var(--odp-font-cond);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--odp-white);
	background: var(--odp-orange);
	border: 0;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.odp-btn:hover {
	background: var(--odp-orange-dark);
	color: var(--odp-white);
}

.odp-btn--brick {
	background: var(--odp-orange-dark);
}

.odp-btn--brick:hover {
	background: var(--odp-orange);
}

.odp-btn--dark {
	background: var(--odp-black);
}

.odp-btn--green {
	background: var(--odp-green);
}

.odp-btn--ghost {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--odp-ink);
}

/* Título de sección + rúbrica naranja (patrón repetido en toda la web). */
.odp-eyebrow {
	display: block;
	font-family: var(--odp-font-cond);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--odp-orange);
	margin: 0 0 10px;
}

/* Enlace "VER TODOS" con flecha diagonal. */
.odp-seeall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--odp-font-cond);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odp-ink);
}

.odp-seeall:hover {
	color: var(--odp-orange);
}

/* -------------------------------------------------------------------------
   3. Cabecera
   ------------------------------------------------------------------------- */

/* Alto que ocupa la barra flotante (padding superior + alto de la barra). Lo
   usan las franjas que abren página para no quedar debajo del cristal. */
:root {
	--odp-hspace: 122px;
	/* Aire extra entre el canto de la barra y las migas que abren página. */
	--odp-crumbs-gap: 34px;
}

/* Cabecera flotante: no ocupa sitio en el flujo, así TODAS las vistas llegan
   hasta el borde superior de la ventana y la barra queda montada encima. */
.odp-header {
	--odp-hcut: 40px;
	--odp-hgap: 60px;
	position: Absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	padding: 22px var(--odp-hgap) 0;
	background: none;
	color: var(--odp-white);
	pointer-events: none;
}

/* La barra recorta la esquina superior izquierda y lleva un filete de 1px
   dibujado como anillo (mismo recurso que las tarjetas de la marca). */
.odp-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
	padding: 10px 30px 10px 34px;
	/* Vidrio oscuro: el contenido pasa por debajo y se ve difuminado. */
	background: rgba(10, 12, 20, .52);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	pointer-events: auto;
	clip-path: polygon(var(--odp-hcut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--odp-hcut));
	transition: background .25s ease, opacity .2s ease;
}

/* Filete de 1px dibujado como anillo (contorno exterior + interior con
   fill-rule evenodd).

   Va desplazado 1px hacia dentro a propósito: el recorte del propio elemento
   suaviza sus bordes, y un anillo pegado a esa línea se perdía en los tramos
   rectos (sólo sobrevivía la diagonal, algo más ancha). Con 1px de margen el
   filete queda completo y nítido en todo el perímetro.

   En la diagonal el desplazamiento perpendicular de 1px mueve los vértices
   0,42px sobre cada eje (1·√2 − 1), y el de 2px los mueve 0,83px. */
.odp-header__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: rgba(255, 255, 255, .5);
	clip-path: polygon(evenodd,
		calc(var(--odp-hcut) + 0.42px) 1px,
		calc(100% - 1px) 1px,
		calc(100% - 1px) calc(100% - 1px),
		1px calc(100% - 1px),
		1px calc(var(--odp-hcut) + 0.42px),

		calc(var(--odp-hcut) + 0.83px) 2px,
		calc(100% - 2px) 2px,
		calc(100% - 2px) calc(100% - 2px),
		2px calc(100% - 2px),
		2px calc(var(--odp-hcut) + 0.83px));
}

/* Al bajar, el cristal se cierra un poco para que el menú se lea sobre
   cualquier fondo, pero nunca llega a ser opaco: la barra sigue flotando. */
.odp-header.is-stuck .odp-header__bar {
	background: rgba(10, 11, 14, .74);
}

/* La barra de administración de WordPress no debe tapar la cabecera. */
.admin-bar .odp-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .odp-header {
		top: 46px;
	}
}

/* Ninguna vista reserva sitio para la cabecera: el contenido empieza pegado al
   borde superior y pasa por debajo del cristal.

   Lo único que se aparta son las franjas que abren página con texto (título,
   migas, cabeceras de archivo…): reservan el alto de la barra en su propio
   padding, así el fondo de la franja sí llega hasta arriba. Las páginas del
   maquetador no entran aquí: su primera fila —la portada— va a sangre. */
main > .pz-page-title:first-child .pz-page-title__inner,
main > article > .pz-page-title:first-child .pz-page-title__inner {
	padding-top: calc(var(--odp-hspace) + 8px);
}

main > .archive-header:first-child,
main > .single-layout:first-child {
	padding-top: var(--odp-hspace);
}

/* Las migas abren página en casi todas las vistas internas (páginas, ficha de
   producto…). Reservar sólo --odp-hspace las dejaba pegadas al canto inferior
   del cristal: se suma --odp-crumbs-gap para que respiren. */
main > .odp-crumbs:first-child,
main > article > .odp-crumbs:first-child {
	padding-top: calc(var(--odp-hspace) + var(--odp-crumbs-gap, 34px));
}

.odp-header__brand {
	display: flex;
	align-items: center;
}

.odp-logo img {
	display: block;
	width: auto;
	height: 34px;
}

.odp-logo--text {
	font-family: var(--odp-font-title);
	font-size: 20px;
	color: var(--odp-white);
	text-transform: uppercase;
}

.odp-header__actions {
	display: flex;
	align-items: center;
	gap: 26px;
}

.odp-hbtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 2px;
	background: none;
	border: 0;
	color: var(--odp-white);
	font-family: var(--odp-font-cond);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .18s ease;
}

.odp-hbtn:hover,
.odp-hbtn[aria-expanded="true"] {
	color: var(--odp-orange);
}

.odp-hsearch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .55);
	color: var(--odp-white);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.odp-hsearch:hover {
	background: rgba(255, 255, 255, .12);
	border-color: var(--odp-white);
}

.odp-hcta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 148px;
	height: 44px;
	padding: 0 22px;
	border: 1px solid rgba(255, 255, 255, .55);
	color: var(--odp-white);
	font-family: var(--odp-font-cond);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.odp-hcta:hover {
	background: var(--odp-orange);
	border-color: var(--odp-orange);
	color: var(--odp-white);
}

/* Buscador: capa a pantalla completa que baja desde el borde superior de la
   ventana. El panel blanco ocupa TODO el ancho y tapa la barra flotante; lo
   que queda por debajo es el velo, que también cierra al pulsarlo. */
.odp-search {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	pointer-events: auto;
}

.odp-search[hidden] {
	display: none;
}

/* La barra de administración de WordPress queda por encima de la capa. */
.admin-bar .odp-search {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .odp-search {
		top: 46px;
	}
}

.odp-search__panel {
	--odp-sbar: 112px;
	position: relative;
	flex: 0 0 auto;
	min-height: min(560px, 68vh);
	background: var(--odp-white);
	color: var(--odp-ink);
	box-shadow: 0 24px 60px rgba(10, 12, 20, .22);
	/* Persiana: se descuelga desde arriba al abrir. */
	transform: translateY(-100%);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.odp-search__scrim {
	flex: 1 1 auto;
	background: rgba(10, 12, 20, .55);
	opacity: 0;
	transition: opacity .32s ease;
	cursor: pointer;
}

.odp-search.is-open .odp-search__panel {
	transform: translateY(0);
}

.odp-search.is-open .odp-search__scrim {
	opacity: 1;
}

/* Fila del campo: el buscador manda y la X se va al extremo derecho. */
.odp-search__bar {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: var(--odp-sbar);
	padding: 22px var(--odp-hgap);
	background: var(--odp-soft);
}

.odp-search__field {
	flex: 1 1 auto;
	max-width: 1240px;
	margin-inline: auto;
}

.odp-search__close {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--odp-ink);
	cursor: pointer;
	transition: color .18s ease;
}

.odp-search__close:hover {
	color: var(--odp-orange);
}

/* Campo del buscador en vivo dentro de la capa (pz-header.css ya no se
   encola, así que el aspecto del widget se define aquí).

   El widget ancla su panel de resultados al propio campo (position:relative en
   .oz-ls, CSS en línea de inc/widgets.php). Aquí se le quita ese anclaje para
   que los resultados se cuelguen de .odp-search__panel y ocupen exactamente el
   hueco blanco que hay bajo la barra, en vez de flotar sobre la página. */
.odp-search .oz-ls {
	position: static;
	width: 100%;
}

.odp-search .oz-ls__panel {
	position: absolute;
	inset: var(--odp-sbar) 0 0;
	z-index: 5;
	max-height: none;
	margin: 0;
	padding: 12px 0 28px;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--odp-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* La lista se alinea con el campo de arriba (mismo ancho útil). */
.odp-search .oz-ls__list {
	max-width: 1240px;
	margin-inline: auto;
	padding: 0 var(--odp-hgap);
}

.odp-search .oz-ls__item {
	border-radius: 0;
	padding: 12px 14px;
}

.odp-search .oz-ls__group-title {
	font-family: var(--odp-font-title);
	letter-spacing: .1em;
}

.odp-search .ozpls-figma__form {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: var(--odp-white);
	border: 1px solid var(--odp-ink);
}

.odp-search .ozpls-figma__inputWrap {
	flex: 1 1 auto;
	display: flex;
}

.odp-search .ozpls-figma__input,
.odp-search input[type="search"] {
	width: 100%;
	height: 56px;
	padding: 0 20px;
	background: none;
	border: 0;
	color: var(--odp-ink);
	font-family: var(--odp-font-cond);
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	appearance: none;
}

.odp-search .ozpls-figma__input:focus,
.odp-search input[type="search"]:focus {
	outline: none;
}

.odp-search .ozpls-figma__input::placeholder {
	color: var(--odp-muted);
	text-transform: uppercase;
}

.odp-search .ozpls-figma__btn {
	flex: 0 0 auto;
	min-width: 64px;
	padding: 0 20px;
	background: none;
	border: 0;
	color: var(--odp-ink);
	font-family: var(--odp-font-cond);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.odp-search .ozpls-figma__btn:hover {
	background: var(--odp-orange);
	color: var(--odp-white);
}

/* Atajos bajo el campo. */
.odp-search__common {
	max-width: 1240px;
	margin-inline: auto;
	padding: 34px var(--odp-hgap) 48px;
}

.odp-search__label {
	margin: 0 0 18px;
	font-family: var(--odp-font-title);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--odp-ink);
}

.odp-search__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.odp-search__links li + li {
	margin-top: 14px;
}

.odp-search__links a {
	font-family: var(--odp-font-cond);
	font-size: 16px;
	letter-spacing: .04em;
	color: var(--odp-body);
	transition: color .18s ease;
}

.odp-search__links a:hover {
	color: var(--odp-orange);
}

/* Con el buscador abierto la barra flotante estorba: se aparta. La cabecera
   sube por encima de los paneles laterales (999991) mientras dura la capa, así
   nada se cuela por delante mientras un panel termina de cerrarse. */
.odp-header.is-searching {
	z-index: 999992;
}

.odp-header.is-searching .odp-header__bar {
	opacity: 0;
	visibility: hidden;
}

/* -------------------------------------------------------------------------
   4. Paneles laterales (menú / categorías)
   ------------------------------------------------------------------------- */

/* Velo y paneles van por encima de todo lo flotante del sitio (WhatsApp,
   carrito y subir: z-index 9997–9998) y por debajo del carrito lateral de
   WooCommerce (1000000). */
.odp-scrim {
	position: fixed;
	inset: 0;
	z-index: 999990;
	background: rgba(11, 11, 11, .55);
	opacity: 0;
	transition: opacity .25s ease;
}

.odp-scrim.is-open {
	opacity: 1;
}

.odp-scrim[hidden] {
	display: none;
}

.odp-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999991;
	width: min(520px, 92vw);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--odp-white);
	box-shadow: 0 0 60px rgba(11, 11, 11, .28);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
	visibility: hidden;
}

/* El menú entra desde la izquierda; el de categorías sigue entrando desde la
   derecha, que es el lado del botón que lo abre. */
.odp-panel--menu {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

/* El de categorías es algo más ancho que el de menú: entra el árbol completo y,
   al lado, la tira de destacadas. Sin pasarse: con más ancho sólo se ganaba
   hueco vacío entre las dos columnas. */
.odp-panel--cats {
	width: min(740px, 94vw);
}

/* La cabecera se alinea con el margen mayor que usa su cuerpo. */
.odp-panel--cats .odp-panel__head {
	padding-inline: 34px;
}

.odp-panel.is-open {
	transform: none;
	visibility: visible;
}

.odp-panel__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 26px;
	background: var(--odp-black);
	color: var(--odp-white);
}

.odp-panel__title {
	font-family: var(--odp-font-title);
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.odp-panel__close {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid rgba(255, 255, 255, .4);
	color: var(--odp-white);
	cursor: pointer;
}

.odp-panel__nav,
.odp-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px 26px 40px;
}

.odp-panel__menu,
.odp-cattree,
.odp-cattree__children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.odp-panel__menu > li > a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--odp-line);
	font-family: var(--odp-font-title);
	font-size: 17px;
	text-transform: uppercase;
	color: var(--odp-ink);
}

.odp-panel__menu > li > a:hover {
	color: var(--odp-orange);
}

.odp-cattree__group + .odp-cattree__group {
	margin-top: 18px;
}

/* --- Cuerpo del panel de categorías: árbol + destacadas --- */
.odp-catpanel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	align-items: start;
	padding: 28px 34px 44px;
}

/* Sin sitio para la columna lateral las destacadas caen debajo del árbol, de
   dos en dos, para que las tarjetas no queden desproporcionadas. */
.odp-catpanel__feat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 18px;
}

.odp-catcard {
	display: block;
	color: var(--odp-ink);
}

.odp-catcard__media {
	display: block;
	background: var(--odp-soft);
}

/* La imagen se ve entera: sin recorte ni proporción forzada, la tarjeta toma el
   alto que le pida la foto. */
.odp-catcard__img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .25s ease;
}

.odp-catcard:hover .odp-catcard__img {
	opacity: .88;
}

.odp-catcard__name {
	display: block;
	margin-top: 10px;
	font-family: var(--odp-font-cond);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.odp-catcard:hover .odp-catcard__name {
	color: var(--odp-orange);
}

/* Con sitio de sobra las destacadas pasan a una columna propia a la derecha,
   como en la referencia. El árbol se queda en una sola columna, quieto: el
   único que rueda es el carril de imágenes, que es el que se sale de alto. */
@media (min-width: 900px) {
	.odp-catpanel {
		grid-template-columns: minmax(0, 1fr) 240px;
		/* La fila se ciñe al alto libre del panel: sin esto crecería con el
		   contenido y las columnas nunca llegarían a rodar por su cuenta. */
		grid-template-rows: minmax(0, 1fr);
		gap: 30px;
		align-items: stretch;
		/* El cuerpo ya no rueda entero: cada columna se apaña con su alto. */
		overflow: hidden;
		min-height: 0;
		padding-right: 0;
	}

	/* El árbol se queda quieto. Si la ventana es muy baja aún se puede empujar
	   con la rueda, pero sin barra: la única visible es la de las imágenes. */
	.odp-catpanel__tree {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
	}

	.odp-catpanel__tree::-webkit-scrollbar {
		display: none;
	}

	/* Aire más justo: en una sola columna el árbol es alto y así entra entero
	   en pantallas normales sin necesidad de rodarlo. */
	.odp-panel--cats .odp-cattree__group + .odp-cattree__group {
		margin-top: 14px;
	}

	.odp-panel--cats .odp-cattree__children li a {
		padding-block: 5px;
	}

	.odp-panel--cats .odp-panel__cta {
		margin-top: 20px;
	}

	.odp-catpanel__feat {
		grid-template-columns: 1fr;
		gap: 26px;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 34px;
		/* Sitio para que la última tarjeta no muera pegada al borde. */
		padding-bottom: 12px;
		scrollbar-width: thin;
	}
}

.odp-cattree__parent {
	display: block;
	padding-bottom: 8px;
	font-family: var(--odp-font-title);
	font-size: 14px;
	text-transform: uppercase;
	color: var(--odp-ink);
}

.odp-cattree__parent:hover {
	color: var(--odp-orange);
}

.odp-cattree__children li a {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid var(--odp-line);
	font-size: 14px;
	color: var(--odp-body);
}

.odp-cattree__children li a:hover {
	border-left-color: var(--odp-orange);
	color: var(--odp-orange);
}

.odp-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	padding: 12px 20px;
	background: var(--odp-orange);
	color: var(--odp-white);
	font-family: var(--odp-font-cond);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   5. Pie
   ------------------------------------------------------------------------- */

.odp-footer {
	/* Aire alrededor del panel azul (lados e inferior) y tamaño del chaflán. */
	--odp-footer-gap: 60px;
	--odp-footer-cut: 64px;

	position: relative;
	/* El pie es un panel: deja ver la trama de puntos del body a los lados y
	   por debajo. El recorte va aquí para que la silueta sea la del bloque
	   entero (banda de CTA + cuerpo), no la de una sola pieza. */
	margin: 0 var(--odp-footer-gap) var(--odp-footer-gap);
	background: var(--odp-navy);
	color: var(--odp-white);
	/* Misma silueta de siempre: chaflán arriba a la derecha (el que tenía la
	   banda de CTA) y abajo a la izquierda, en diagonal con la cabecera. */
	clip-path: polygon(
		0 0,
		calc(100% - var(--odp-footer-cut)) 0,
		100% var(--odp-footer-cut),
		100% 100%,
		var(--odp-footer-cut) 100%,
		0 calc(100% - var(--odp-footer-cut))
	);
}

/* --- Banda de llamada a la acción --- */
.odp-cta {
	position: relative;
	overflow: hidden;
	background: var(--odp-navy);
	padding: 74px 24px 70px;
	text-align: center;
	/* El chaflán superior derecho lo recorta ahora .odp-footer (misma esquina),
	   así que aquí basta con recortar los adornos que se salen. */
}

.odp-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin-inline: auto;
}

.odp-cta__title {
	margin: 0 0 16px;
	color: var(--odp-white);
	font-size: clamp(26px, 3vw, 40px);
	letter-spacing: .02em;
}

.odp-cta__text {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .82);
}

/* Líneas diagonales decorativas de la esquina inferior derecha. */
.odp-cta__lines {
	position: absolute;
	right: -60px;
	bottom: -40px;
	width: 420px;
	height: 260px;
	background:
		linear-gradient(115deg, transparent 49.6%, rgba(255, 255, 255, .10) 49.6%, rgba(255, 255, 255, .10) 50%, transparent 50%),
		linear-gradient(115deg, transparent 63.6%, rgba(255, 255, 255, .10) 63.6%, rgba(255, 255, 255, .10) 64%, transparent 64%),
		linear-gradient(115deg, transparent 77.6%, rgba(255, 255, 255, .10) 77.6%, rgba(255, 255, 255, .10) 78%, transparent 78%);
	pointer-events: none;
}

/* --- Cuerpo del pie --- */
.odp-footer__main {
	position: relative;
	overflow: hidden;
	padding: 56px 34px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.odp-footer__mark {
	position: absolute;
	right: -40px;
	bottom: -30px;
	width: min(760px, 72%);
	aspect-ratio: 149 / 39;
	background-image: var(--odp-mark);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right bottom;
	opacity: .07;
	pointer-events: none;
}

.odp-footer__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	max-width: 1440px;
	margin-inline: auto;
	padding-bottom: 60px;
}

.odp-fmenu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.odp-fmenu__list > li > a {
	display: inline-block;
	font-family: var(--odp-font-title);
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--odp-white);
	transition: color .18s ease, transform .18s ease;
}

.odp-fmenu__list > li > a:hover {
	color: var(--odp-orange);
	transform: translateX(6px);
}

.odp-fcontact__title {
	margin: 6px 0 22px;
	color: var(--odp-white);
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.25;
}

.odp-fcontact__block {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
}

.odp-fcontact__block a:hover {
	color: var(--odp-orange);
}

.odp-footer__bottom {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1440px;
	margin-inline: auto;
	/* Algo más de aire abajo: la línea legal no debe meterse en el chaflán. */
	padding: 20px 0 34px;
}

.odp-footer__legal {
	font-size: 12px;
	/* Casi del color del fondo: se lee si se busca, pero no compite con nada. */
	color: rgba(255, 255, 255, .22);
}

.odp-footer__legal-link {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.odp-footer__legal-link:hover,
.odp-footer__legal-link:focus-visible {
	color: rgba(255, 255, 255, .75);
}

.odp-fsocial {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.odp-fsocial__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--odp-white);
	transition: color .18s ease, transform .18s ease;
}

.odp-fsocial__link:hover {
	color: var(--odp-orange);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   6. Migas de pan
   ------------------------------------------------------------------------- */

.odp-crumbs {
	max-width: 1440px;
	margin: 0 auto;
	padding: 20px 34px 16px;
}

.odp-crumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--odp-line);
	font-family: var(--odp-font-cond);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--odp-muted);
}

.odp-crumbs__list li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.odp-crumbs__list li::after {
	content: "|";
	color: var(--odp-line);
}

.odp-crumbs__list li:last-child::after {
	content: none;
}

.odp-crumbs__list a:hover {
	color: var(--odp-orange);
}

.odp-crumbs__list li:last-child span {
	color: var(--odp-ink);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.odp-header {
		--odp-hgap: 32px;
		padding-top: 16px;
	}

	.odp-header__bar {
		padding: 10px 20px 10px 24px;
	}

	.odp-header__actions {
		gap: 16px;
	}

	.odp-footer__main {
		padding-inline: 22px;
	}
}

@media (max-width: 1024px) {
	.odp-hbtn span {
		display: none;
	}

	.odp-hcta {
		min-width: 0;
		padding: 0 16px;
	}

	.odp-footer {
		--odp-footer-gap: 32px;
		--odp-footer-cut: 44px;
	}

	.odp-footer__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.odp-cta {
		padding: 54px 22px 50px;
	}
}

@media (max-width: 600px) {
	/* En el móvil la cabecera deja de flotar: barra fija pegada al borde
	   superior, opaca y a todo el ancho, sin esquina recortada ni cristal.
	   El contenido ya no pasa por debajo — .pz-page reserva su alto, así la
	   portada arranca justo donde acaba la barra. */
	:root {
		/* Alto de la barra en móvil; lo reserva .pz-page más abajo. */
		--odp-hbar: 62px;
		/* La barra ya no monta encima de nada: las franjas que abren página
		   sólo necesitan su aire natural, no el alto del cristal. */
		--odp-hspace: 18px;
		--odp-crumbs-gap: 14px;
	}

	.odp-header {
		--odp-hcut: 0px;
		--odp-hgap: 0px;
		padding: 0;
	}

	.odp-header__bar {
		min-height: var(--odp-hbar);
		padding: 8px 16px;
		gap: 12px;
		background: var(--odp-black);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		clip-path: none;
	}

	/* Sin esquina recortada el anillo sobra: basta un filete abajo que separe
	   la barra del contenido. */
	.odp-header__bar::after {
		clip-path: none;
		background: none;
		border-bottom: 1px solid rgba(255, 255, 255, .18);
	}

	/* Opaca desde el arranque: ya no hay nada que transparentar al bajar. */
	.odp-header.is-stuck .odp-header__bar {
		background: var(--odp-black);
	}

	/* .pz-page envuelve TODO el contenido (header.php): reservar aquí el alto
	   de la barra baja de golpe cualquier vista, portada incluida. */
	.pz-page {
		padding-top: var(--odp-hbar);
	}

	.odp-logo img {
		height: 26px;
	}

	.odp-header__actions {
		gap: 10px;
	}

	.odp-hsearch,
	.odp-hcta {
		height: 38px;
	}

	.odp-hsearch {
		width: 38px;
	}

	.odp-hcta {
		font-size: 11px;
		padding: 0 12px;
	}

	.odp-search__panel {
		/* Alto de la barra: los resultados se cuelgan justo por debajo. */
		--odp-sbar: 78px;
		min-height: min(460px, 72vh);
	}

	.odp-search__bar {
		gap: 10px;
		padding: 14px 16px;
	}

	.odp-search .ozpls-figma__input,
	.odp-search input[type="search"] {
		height: 46px;
		padding: 0 14px;
		font-size: 13px;
	}

	.odp-search .ozpls-figma__btn {
		min-width: 0;
		padding: 0 14px;
		font-size: 11px;
	}

	.odp-search__close {
		width: 40px;
		height: 40px;
	}

	.odp-search__common {
		padding: 24px 16px 34px;
	}

	.odp-footer {
		--odp-footer-gap: 16px;
		--odp-footer-cut: 30px;
	}

	.odp-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.odp-crumbs {
		padding: 14px 16px 12px;
	}
}