/*
 * Hyundai Power Guatemala — section styles
 * ----------------------------------------
 * Everything Elementor's widget controls cannot express lives here. Each block
 * is named after the area of the site it belongs to and matches the `hp-*`
 * class set on the corresponding Elementor widget or container.
 *
 * 01. Tokens & base
 * 02. Header — top bar / main bar / navigation
 * 03. Footer — newsletter / columns / bottom bar
 * 04. Forms
 * 05. Utilities
 */

/* ==========================================================================
   01. Tokens & base
   ========================================================================== */

:root {
	--hp-navy: #0d386d;
	--hp-navy-deep: #00356f;
	/* Hover de todos los botones azules. Era #00284f, un navy aun mas oscuro
	   que --hp-navy: el cambio no se veia. Este es el azul claro del degradado
	   de las tarjetas de promocion del editable (14,90,163 en su borde alto). */
	--hp-navy-hover: #0e5aa3;
	/* Verde del acordeon de «Servicios autorizados», muestreado del editable
	   `editable12 CONDICIONES.psd`. No es --hp-green: aquel es mas apagado. */
	--hp-accordion-green: #007d49;
	/* Same hue as --hp-navy (211deg), lightened right down: a hairline rule
	   that reads blue without competing with the text. */
	--hp-navy-soft: #aec6e0;
	--hp-text: #6e7175;
	--hp-text-soft: #8b8e93;
	--hp-red: #b11d29;
	--hp-green: #387c4d;
	--hp-green-bright: #65da0f;
	--hp-link: #586ef1;
	--hp-gray-nav: #e6e6e6;
	--hp-gray-surface: #f4f4f4;
	--hp-gray-field: #e5e5e5;
	--hp-border: #dde1e7;
	--hp-radius: 8px;
	--hp-radius-lg: 14px;
	--hp-shell: 1320px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Keyboard focus stays visible everywhere, including inside Elementor widgets. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--hp-link);
	outline-offset: 2px;
}

/* Elementor containers carry an explicit `width: var(--width, 100%)`, so a
   horizontal margin does not inset a section — it slides the whole thing
   right and pushes its far edge off-canvas. The panelled sections below use a
   margin for their page gutter, so each one has to hand that width back.
   Values mirror the margins set on the elements in Elementor. */
.hp-features-section,
.hp-best,
.hp-cta,
.hp-serv,
.hp-dudas,
.hp-blog {
	--width: calc(100% - 40px);
}

.hp-genblock__panel {
	--width: calc(100% - 124px);
}

.hp-pagehero__panel {
	--width: calc(100% - 88px);
}

@media (max-width: 1024px) {
	.hp-genblock__panel {
		--width: calc(100% - 60px);
	}

	.hp-pagehero__panel {
		--width: calc(100% - 48px);
	}
}

/* Below 768px Elementor pins every flex container to `--width: 100%` through
   `.e-con.e-flex`, so these overrides have to carry the same weight to keep
   the gutter. */
@media (max-width: 767px) {
	.e-con.e-flex.hp-features-section,
	.e-con.e-flex.hp-best,
	.e-con.e-flex.hp-cta,
	.e-con.e-flex.hp-serv,
	.e-con.e-flex.hp-dudas,
	.e-con.e-flex.hp-blog {
		--width: calc(100% - 32px);
	}

	.e-con.e-flex.hp-genblock__panel {
		--width: calc(100% - 16px);
	}

	.e-con.e-flex.hp-pagehero__panel {
		--width: calc(100% - 20px);
	}
}

/* ==========================================================================
   02. Header
   ========================================================================== */

/* --- 02.0 Sticky header --- */
/* The white bar and the grey nav bar stay on screen while the page scrolls;
   the promotional bar is allowed to leave above them.

   The two bars cannot be stuck one by one. A sticky element only travels
   inside its own parent's box, and that parent is the <header>, barely taller
   than the two of them together, so they would unpin almost immediately. Two
   siblings both stuck at `top: 0` would also land on top of each other. So the
   whole header sticks, and the negative `top` is what lets the promo bar go.

   `--hp-topbar-h` (promo bar) and `--hp-header-pinned-h` (what stays on
   screen) are kept in sync with the rendered heights by `stickyHeader()` in
   assets/js/custom.js, so this holds at every width and however many lines the
   promo text wraps to. The values here are only the fallback for the instant
   before that script runs. */
:root {
	--hp-topbar-h: 47px;
	--hp-header-pinned-h: 122px;
}

header.elementor-location-header {
	position: sticky;
	top: calc(-1 * var(--hp-topbar-h));
	z-index: 900;
	background-color: #ffffff;
}

/* For logged-in users the admin bar is fixed over the viewport, 32px wide
   screens and 46px below 783px — except on phones, where it scrolls away with
   the page and needs no allowance at all. */
.admin-bar header.elementor-location-header {
	top: calc(32px - var(--hp-topbar-h));
}

@media (max-width: 782px) {
	.admin-bar header.elementor-location-header {
		top: calc(46px - var(--hp-topbar-h));
	}
}

@media (max-width: 600px) {
	.admin-bar header.elementor-location-header {
		top: calc(-1 * var(--hp-topbar-h));
	}
}

/* Anchor targets have to clear the pinned bars instead of hiding under them. */
html {
	scroll-padding-top: calc(var(--hp-header-pinned-h) + 16px);
}

/* The burger's dropdown now travels with the pinned bar, so scrolling the page
   no longer reveals its tail. Give it a scrollbar of its own. */
.hp-nav .elementor-nav-menu--dropdown {
	max-height: calc(100vh - var(--hp-header-pinned-h) - 12px);
	max-height: calc(100dvh - var(--hp-header-pinned-h) - 12px);
	overflow-y: auto;
}

/* --- 02.1 Promotional top bar --- */
.hp-topbar .hp-topbar__text p {
	margin: 0;
}

/* --- 02.2 Main bar: logo, search, account, cart, CTA --- */
.hp-header__logo img {
	display: block;
}

.hp-header__main {
	box-shadow: 0 1px 0 rgba(13, 56, 109, 0.06);
}

.hp-header__search .elementor-search-form__container input.elementor-search-form__input,
.hp-header__search .elementor-search-form__container input[type="search"] {
	background-color: #ffffff;
}

/* 615 x 34 with an 8px radius — the field is a touch taller than the
   "Contáctanos" button beside it, as in the design. */
.hp-header__search .elementor-search-form__container {
	background: #ffffff;
	border: 1px solid var(--hp-border);
	border-radius: 8px;
	overflow: hidden;
	max-width: 615px;
	min-height: 34px;
}

.hp-header__search .elementor-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.hp-header__search .elementor-search-form__submit {
	flex: 0 0 44px;
	width: 44px;
	border-left: 1px solid var(--hp-border);
}

.hp-header__user .elementor-icon-list-item > a {
	align-items: center;
}

.hp-header__actions {
	row-gap: 10px;
}

.hp-header__action {
	width: auto;
	flex: 0 0 auto;
}

/* The cart bubble should never sit on top of the CTA button. */
.hp-header__cart .elementor-menu-cart__toggle {
	margin: 0;
}

.hp-header__cart .elementor-button-icon {
	position: relative;
}

/* --- 02.3 Navigation bar --- */
.hp-navbar {
	border-top: 1px solid rgba(13, 56, 109, 0.08);
}

.hp-nav .elementor-nav-menu--main .elementor-item {
	font-weight: 500;
}

.hp-nav .elementor-nav-menu--main .current-menu-item > .elementor-item,
.hp-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
	font-weight: 700;
}

/* Label the burger so a lone icon in the grey bar still reads as a menu, and
   give it room so it cannot overlap the bar's edges on small screens. */
.hp-nav .elementor-menu-toggle {
	gap: 8px;
	padding: 10px 0;
	width: auto;
	border-radius: 4px;
}

.hp-nav .elementor-menu-toggle::after {
	content: "Menú";
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--hp-navy);
}

.hp-nav .elementor-menu-toggle[aria-expanded="true"]::after {
	content: "Cerrar";
}

.hp-nav .elementor-nav-menu--dropdown {
	border-radius: 0 0 8px 8px;
	box-shadow: 0 18px 34px rgba(13, 56, 109, 0.18);
}

@media (max-width: 1024px) {
	.hp-header__search-col {
		order: 3;
	}

	.hp-header__actions-col {
		order: 2;
	}
}

@media (max-width: 767px) {
	.hp-header__logo-col {
		flex: 1 1 auto;
	}

	.hp-header__actions-col {
		flex: 0 0 auto;
	}

	/* The "Contáctanos" CTA is reachable from the nav and the footer; hiding it
	   here keeps the burger, cart and logo from crowding each other. The extra
	   class outweighs the shared `.hp-header__action` flex rule further down. */
	.hp-header__action.hp-header__action--cta {
		display: none;
	}

	.hp-header__search .elementor-search-form__container {
		max-width: none;
	}
}

/* ==========================================================================
   03. Footer
   ========================================================================== */

/* --- 03.1 Newsletter band --- */
.hp-newsletter__title .elementor-heading-title {
	line-height: 1.05;
}

.hp-newsletter__form .elementor-field-group {
	align-items: flex-end;
}

.hp-newsletter__form .elementor-field-textual {
	padding-left: 0.95rem;
	padding-right: 0;
}

/* Los campos van sin relleno lateral, así que la etiqueta flotante tiene que
   arrancar en el mismo punto que el texto que se escribe. */
.hp-newsletter__form .sw-floating-field {
	--sw-float-inset: 0;
}

.hp-newsletter__form .elementor-field-textual::placeholder {
	color: var(--hp-text-soft);
	opacity: 1;
}

.hp-newsletter__form .elementor-field-group.elementor-field-type-submit {
	justify-content: flex-end;
	margin-left: auto;
}

@media (max-width: 767px) {
	.hp-newsletter__form .elementor-field-group.elementor-field-type-submit {
		justify-content: stretch;
	}
}

/* --- 03.2 Footer columns --- */
.hp-footer__about p,
.hp-footer__label p,
.hp-footer__legal p,
.hp-footer__credit p {
	margin: 0;
}

.hp-footer__logo img {
	max-width: 250px;
}

/*
 * The footer menu is a single WordPress menu rendered as a two-column grid.
 * `dropdown: none` on the widget already prevents Elementor from collapsing it
 * into a burger; this keeps the columns readable all the way down to 320px so
 * it never compacts on any screen.
 */
.hp-footer__menu .elementor-nav-menu--main > ul.elementor-nav-menu {
	display: grid;
	/* Column-major so the links read top-to-bottom per column, as designed. */
	grid-template-columns: repeat(2, minmax(140px, 1fr));
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	align-items: start;
	column-gap: 34px;
	row-gap: 0;
	width: 100%;
}

.hp-footer__menu .elementor-nav-menu--main .elementor-item {
	justify-content: flex-start;
	white-space: normal;
}

.hp-footer__menu .elementor-nav-menu--main .elementor-item:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hp-footer__social .elementor-social-icon {
	background: transparent !important;
	width: auto;
	height: auto;
}

/* Sin animación de tamaño en hover: sólo el cambio de color de Elementor. */
.hp-footer__social .elementor-social-icon svg,
.hp-footer__social .elementor-social-icon i {
	transition: color 0.2s ease, fill 0.2s ease;
}

/* --- 03.3 Bottom bar --- */
.hp-footer__bottom a,
.hp-footer__legal a {
	color: #d5e0ee;
	text-decoration: none;
}

.hp-footer__bottom a:hover,
.hp-footer__legal a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.hp-footer__bottom .sw-powered-by__link {
	font-weight: 700;
	color: #ffffff;
}

.hp-footer__bottom-row > .e-child {
	width: auto;
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.hp-footer__bottom-row {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   03a. Carousels — shared pager
   ========================================================================== */

/* Every carousel on the site shows the same pager: small grey dots and an
   active page stretched into a short red bar. Neither the Slides widget nor
   the Carousel widget has a control for that stretch, so it lives here; the
   grey of the idle dots still comes from each widget's own colour setting.
   The widget class and the pagination wrapper join the selector only to
   outweigh the per-widget dot rules Elementor prints for the Slides widget,
   which are four classes deep. */
.elementor-widget.hp-carousel .swiper-pagination .swiper-pagination-bullet {
	opacity: 1;
	transition: width 0.25s ease;
}

.elementor-widget.hp-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 42px;
	border-radius: 4px;
	background: var(--hp-red);
}


/* ==========================================================================
   03b. Home
   ========================================================================== */

/* --- Hero slider --- */
.hp-hero .elementor-slides,
.hp-hero .swiper,
.hp-hero .swiper-slide-bg {
	border-radius: 12px;
}

.hp-hero .elementor-slide-heading,
.hp-hero .elementor-slide-description {
	color: #ffffff;
}

.hp-hero .elementor-slides-wrapper a.elementor-slide-button,
.hp-hero .swiper-slide a.elementor-slide-button,
.hp-hero a.elementor-slide-button {
	background-color: var(--hp-navy);
	/* Sin filete: en `editable1home.psd` el boton del hero es un rectangulo
	   azul macizo. El blanco lo pone el ajuste por slide del widget, que
	   Elementor imprime a (0,6,0) — mas peso del que tiene sentido pelear.
	   No hace falta: ese ajuste solo declara el COLOR del borde, y el ancho
	   sigue saliendo de aqui. A cero no queda borde que pintar. */
	border: 0;
	color: #ffffff;
	border-radius: 4px;
	padding: 13px 30px;
}

.hp-hero .elementor-slides-wrapper a.elementor-slide-button:hover,
.hp-hero .swiper-slide a.elementor-slide-button:hover,
.hp-hero a.elementor-slide-button:hover {
	background-color: var(--hp-navy-hover);
	border-color: var(--hp-navy-hover);
	color: #ffffff;
}

/* --- Promotional tiles --- */
.hp-promo {
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-promo:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(13, 56, 109, 0.18);
}

.hp-promo__title p,
.hp-promo__sub p {
	margin: 0;
	text-shadow: 0 1px 14px rgba(6, 18, 36, 0.45);
}

.hp-promo__content {
	width: 100%;
	height: 100%;
}

/* The design parks the slide dots in the bottom-right corner of the frame,
   clear of the headline and the button on the left. */
.hp-hero .swiper-pagination {
	bottom: 18px;
	text-align: right;
	padding-right: 26px;
}

/* --- Advantages strip --- */
.hp-feature .elementor-icon-box-title {
	margin-bottom: 0;
}

.hp-feature .elementor-icon-box-description {
	margin: 0;
}

/* --- Generators block --- */
/* In the design the photograph runs the full width of the window and only
   the navy panel stays inside the grid, so the media breaks out of its boxed
   parent. `body` already clips the horizontal axis, so the extra width that
   100vw picks up from the scrollbar cannot start a sideways scroll. */
.hp-genblock__media {
	--width: 100vw;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* The banner is a carousel now, so the photograph cannot break out of the
   page any more: a 100vw child inside the swiper would be cut off by one edge
   of the track and spill over the next slide at the other. Inside the carousel
   it fills its slide and takes the frame's radius instead. */
.hp-genblock__carousel .hp-genblock__media {
	--width: 100%;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	border-radius: 12px;
}

/* The controls sit inside the navy panel, in its bottom-right corner, so they
   read against it instead of against the white page — which is also why they
   are white here and red everywhere else. custom.js gathers the two arrows
   and the dots into one flex row, so this block has a single box to place:
   the panel's own gutter (its 62px margin plus its 40px padding) in from the
   right, and the same distance up from the bottom they always had.

   They used to be placed one by one, each on its own offset measured from
   that gutter. That held while the banner carried three slides and broke the
   moment it carried one per category: the strip of dots grows leftwards, and
   its width was baked into the left arrow's offset, so the two overlapped. */
.hp-genblock__carousel {
	position: relative;
}

.hp-genblock__carousel .hp-genblock__nav {
	position: absolute;
	right: 102px;
	bottom: 30px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Elementor places all three absolutely; inside the row they lay themselves
   out, so every offset it printed has to be handed back. */
.hp-genblock__carousel .hp-genblock__nav .elementor-swiper-button,
.hp-genblock__carousel .hp-genblock__nav .swiper-pagination {
	position: static;
	inset: auto;
	margin: 0;
	transform: none;
}

.hp-genblock__carousel .hp-genblock__nav .swiper-pagination {
	width: auto;
}

/* Elementor sizes the arrow's icon through a rule that only matches while the
   button is a sibling of the track — `.swiper ~ .elementor-swiper-button svg`.
   Inside the row it is not one any more, so the icon lost its 1em box and
   collapsed to nothing. It gets that box back here; the colour still arrives
   on its own, being scoped to the widget rather than to the track. */
.hp-genblock__carousel .hp-genblock__nav .elementor-swiper-button {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.hp-genblock__carousel .hp-genblock__nav .elementor-swiper-button svg {
	width: 1em;
	height: 1em;
}


/* Five dots at a time, not one per category. The rest are taken out of the
   flow rather than merely shrunk, so the strip is only ever as wide as what
   shows and the arrows sit right beside it — Swiper's own `dynamicBullets`
   reserves room for all of them and parks the visible ones off-centre inside
   that box, which left the arrows up to 90px adrift. The two outermost keep
   the taper it drew. Browsers without `:has()` show every dot; the row is a
   flex line, so it only grows wider. */
.hp-genblock__nav .swiper-pagination-bullet {
	display: none;
}

.hp-genblock__nav .swiper-pagination-bullet-active,
.hp-genblock__nav .swiper-pagination-bullet-active + .swiper-pagination-bullet,
.hp-genblock__nav .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet,
.hp-genblock__nav .swiper-pagination-bullet:has(+ .swiper-pagination-bullet-active),
.hp-genblock__nav .swiper-pagination-bullet:has(+ .swiper-pagination-bullet + .swiper-pagination-bullet-active) {
	display: inline-block;
}

.hp-genblock__nav .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet,
.hp-genblock__nav .swiper-pagination-bullet:has(+ .swiper-pagination-bullet + .swiper-pagination-bullet-active) {
	transform: scale(0.66);
}

/* Swiper lays the paged strip out from one dot's width, so the 42px bar the
   site's pagers stretch the active dot into (see 03a) throws its arithmetic
   out: the window it scrolls no longer matches where the dots actually are,
   and slides near either end showed one or two dots instead of five. Here the
   bar is drawn on top of a dot that keeps its 8px in the layout, which leaves
   Swiper measuring a strip of even dots. The widget's own gap is set wide
   enough on the widget for the bar to clear its neighbours. */
.elementor-widget.hp-carousel.hp-genblock__carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	position: relative;
	width: 8px;
	background: rgba(255, 255, 255, 0.45);
}

.elementor-widget.hp-carousel.hp-genblock__carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 42px;
	height: 100%;
	border-radius: 4px;
	background: #ffffff;
	transform: translateX(-50%);
}


@media (max-width: 1024px) {
	/* The panel's margin narrows to 30px, so the gutter is 70px. */
	.hp-genblock__carousel .hp-genblock__nav {
		right: 70px;
	}
}

@media (max-width: 767px) {
	/* Stacked, the panel ends with its button, so the row needs one of its
	   own: 34px on top of the 24px the panel already had. The gutter here is
	   an 8px margin plus 20px of padding, and the strip is cut back to what
	   the narrower row can hold. */
	.hp-genblock__carousel .hp-genblock__panel {
		padding-bottom: 58px;
	}

	.hp-genblock__carousel .hp-genblock__nav {
		right: 28px;
		bottom: 20px;
		gap: 6px;
	}
}

/* --- Catalogue cards --- */
.hp-catcard {
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease;
}

.hp-catcard:hover {
	transform: translateY(-4px);
}

/* The darkening wash lives here rather than on the container's background
   overlay so that hover and the touch fallback below share one rule. */
.hp-catcard::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: linear-gradient(180deg, rgba(6, 22, 44, 0.12) 0%, rgba(6, 22, 44, 0.8) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 0;
}

.hp-catcard:hover::after,
.hp-catcard:focus-within::after {
	opacity: 1;
}

.hp-catcard > .e-con-inner,
.hp-catcard > .hp-catcard__content,
.hp-catcard > .elementor-element {
	position: relative;
	z-index: 1;
}

.hp-catcard__label p {
	margin: 0;
	text-shadow: 0 1px 14px rgba(6, 18, 36, 0.5);
}

/* At rest a catalogue card is only its photograph, as in the design; the
   label and the button are the hover state. The button stays focusable while
   it is invisible so that tabbing to it fires `:focus-within` and reveals the
   card — `pointer-events` is what keeps it from swallowing stray clicks. */
.hp-catcard__content {
	width: 100%;
	height: 100%;
	align-items: center;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.hp-catcard:hover .hp-catcard__content,
.hp-catcard:focus-within .hp-catcard__content {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Touch devices have no hover, so the cards stay in their revealed state. */
@media (hover: none) {
	.hp-catcard::after {
		opacity: 1;
	}

	.hp-catcard__content {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

/* The catalogue pager. Its resting shape is a strip under the cards, flush
   right — the same one the testimonials use in 03e. */
.hp-catalog__carousel {
	position: relative;
	padding-bottom: 52px;
}

.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev,
.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-next {
	top: auto;
	bottom: 16px;
	left: auto;
	transform: none;
}

/* Clears the six dots the catalogue carries. */
.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev {
	right: 236px;
}

.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-next {
	right: 0;
}

.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .swiper-pagination,
.hp-catalog__carousel.elementor-widget-n-carousel .swiper-pagination {
	top: auto;
	bottom: 20px;
	left: auto;
	right: 34px;
	width: auto;
	transform: none;
}

/* From 1280px up the centred title stops far enough short of the right edge
   for the strip to sit on its line, as in the design. It is pulled out of the
   widget by the heading's own height — 44px type on a 1.1 line — plus the 30px
   margin under it. Any narrower and the title would run into the dots: the
   heading grows towards both edges while the strip stays put. */
@media (min-width: 1280px) {
	.hp-catalog__carousel {
		padding-bottom: 0;
	}

	.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev,
	.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-next,
	.hp-catalog__carousel.elementor-widget-n-carousel .swiper ~ .swiper-pagination,
	.hp-catalog__carousel.elementor-widget-n-carousel .swiper-pagination {
		top: -54px;
		bottom: auto;
		transform: translateY(-50%);
	}
}

/* --- Product grid --- */
/* On the home page the design floats the product shots straight on the grey
   panel — no white card, no frame. The catalogue photography is all shot on
   white, so multiplying it against the panel drops that white out instead of
   stamping a white rectangle on the grey. The section class is in the
   selector only to outrank the shared card rule in 03d.1, which lands later
   in this file. */
.hp-best .hp-products ul.products li.product {
	background: transparent;
	border-radius: 0;
	padding: 0;
	text-align: left;
}

/* Portrait well, as in the design — the home shots are taller than they are
   wide, unlike the landscape frame the archive uses. */
.hp-best .hp-products ul.products li.product img {
	border-radius: 0;
	background: transparent;
	aspect-ratio: 9 / 10;
	mix-blend-mode: multiply;
}

/* --- Closing call to action --- */
/* The hidrolavadora breaks out over the top edge of the panel in the design
   rather than sitting inside it. */
.hp-cta__img img {
	max-width: 100%;
	margin-top: -72px;
}

@media (max-width: 1024px) {
	.hp-cta__img img {
		margin-top: -36px;
	}
}

@media (max-width: 767px) {
	.hp-cta__img img {
		margin-top: 0;
	}
}


/* ==========================================================================
   03c. Interior pages
   ========================================================================== */

/* --- Shared page hero: photo with the navy panel over its foot --- */
.hp-pagehero__panel {
	position: relative;
	z-index: 2;
	box-shadow: 0 18px 40px rgba(6, 22, 44, 0.18);
	background-image: linear-gradient(90deg, #0d386d 0%, #0d386d 45%, #14559f 100%);
}

.hp-pagehero__title .elementor-heading-title {
	line-height: 1.06;
}

/* --- ¿Quiénes somos? --- */
.hp-pillar {
	background: #ffffff;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hp-pillar:hover {
	box-shadow: 0 14px 30px rgba(13, 56, 109, 0.12);
	transform: translateY(-3px);
}

.hp-pillar__num p {
	margin: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 40px;
	line-height: 1;
	color: #dfe2e7;
}

.hp-serv__img img {
	border-radius: 10px;
	width: 100%;
}

/* The strip lines up with the page hero, which is the 1320px shell — so the
   container is left at its natural width and the frames below are measured
   against the strip itself with `cqw`, not against the viewport. */
.hp-descubre__gallery {
	container-type: inline-size;
}

/* The three photos are of three different widths — 32.75%, 37.54% and 29.71% of
   the row — with the middle frame taller than the two beside it, and no
   carousel in Elementor can do that: the handler passes `slides_to_show`
   straight to Swiper as `slidesPerView`, which writes one identical width onto
   every slide.

   So Swiper is left believing in three equal columns — its scrolling and its
   snapping stay right — and only the contents of each slide are moved: the
   `<a>` around each photo is widened or narrowed and slid sideways until it
   lands where the design puts it. Do not put these widths on `.swiper-slide`
   itself; Swiper writes that inline and would take it back on every resize.

   The sizes hang off Swiper's own state classes rather than off `:nth-child`,
   so the big frame is whichever photo is in the middle of the three on screen
   at that moment — it travels with the carousel instead of belonging to one
   image, and the two small ones can never end up side by side.
   `.swiper-slide-active` is the leftmost of the three visible slides.

   With a slide of S = (row − 2 × gap) / 3, a photo that should take a fraction
   f of the row measures 3f × S, and it starts at (the fractions before it − its
   column index / 3) × 3S:

       left     3 × 0.3275 = 98.25%    offset 0
       middle   3 × 0.3754 = 112.62%   offset (0.3275 − 1/3) × 3 = −1.75%
       right    3 × 0.2971 = 89.13%    offset (0.7029 − 2/3) × 3 = 10.87%

   Those fractions come straight off the artboard: on a 1500px canvas the three
   frames show 486, 559 and 442 pixels with 6 and 7 pixels of channel between
   them, and the outer two run off the edges. Because the leftmost of the three
   always carries offset 0 and the fractions add up to 1, the strip fills the
   row edge to edge at every stop of the carousel, not only at the first one. */
.elementor-widget.hp-descubre__carousel {
	/* The one number to turn if the strip has to get shorter or taller. The
	   artboard has the tall frame at 708px on a 1500px canvas, which is 0.472 of
	   the row; it is wound back to 0.30 here — and then capped against the window
	   as well, so the whole section, heading and paragraph included, clears the
	   fold on any laptop. The width factor on its own was not enough: the header
	   is sticky and 169px tall, so on a 1512 × 830 window only 661px are ever
	   free and the section stood at 670. */
	--hp-frame-h: min(
		calc((100cqw - 20px) * 0.30),
		calc(100vh - var(--hp-fold-reserve))
	);
	/* Everything the strip shares the screen with: 169px of sticky header, 218px
	   for the rest of the section (120 heading row + 34 above the strip + 64
	   under it) and 24px of air. All measured, not guessed — and the middle
	   number grows as the heading row wraps, hence the two steps below. */
	--hp-fold-reserve: 411px;
	/* 471 / 708 on the artboard: how much shorter the two outer frames are.
	   Below 1024px every frame is the same height, so this goes to 1. */
	--hp-frame-side: 0.665;
	/* Room under the strip for the navigation, once it no longer fits beside
	   the short frames. */
	--hp-nav-space: 0px;
}

/* The heading row goes from one line to two around 1200px, and at 1024 exactly
   — Elementor's tablet breakpoint, while Swiper is still showing three slides —
   the title stacks above the paragraph. Each step leaves the strip less room. */
@media (max-width: 1219px) {
	.elementor-widget.hp-descubre__carousel {
		--hp-fold-reserve: 437px;
	}
}

@media (max-width: 1024px) {
	.elementor-widget.hp-descubre__carousel {
		--hp-fold-reserve: 479px;
	}
}

/* The height of the strip is pinned to the tall frame instead of being left to
   the tallest photo of the moment. Without this the carousel is a jumping
   contraption: mid-transition the outgoing middle frame is on its way down from
   519px and the incoming one is on its way up from 345px, so the tallest child
   — and with it the height of the whole section — dips to about 432px and
   springs back on every change of slide. It also keeps the navigation still,
   which hangs off a percentage of this same box. */
.elementor-widget.hp-descubre__carousel .swiper {
	height: calc(var(--hp-frame-h) + var(--hp-nav-space));
	padding-bottom: var(--hp-nav-space);
}

/* The frames are given a height outright rather than an `aspect-ratio`, for two
   reasons. The middle one then measures the same whatever photo is loaded into
   it and whatever that file's own proportions are — `cover` crops the surplus —
   so the strip cannot change height when the gallery is edited. And `height` is
   interpolated, while `aspect-ratio` is not: with a ratio the frame used to jump
   to its new height while its width glided.

   The two outer frames are of different widths but share one height, the way
   they do on the artboard, so they close on the same line. */
.hp-descubre__carousel .swiper-slide-image {
	height: calc(var(--hp-frame-h) * var(--hp-frame-side));
	/* The two short frames sit in the middle of the strip rather than hanging
	   from its top: half of the height they are missing goes above them. Below
	   1024px `--hp-frame-side` is 1 and this resolves to zero on its own. */
	margin-top: calc(var(--hp-frame-h) * (1 - var(--hp-frame-side)) / 2);
	object-fit: cover;
	transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1024px is Swiper's own breakpoint, not Elementor's: at that exact width the
   swiper is already showing three columns while Elementor's CSS has switched to
   tablet, so the media queries here are keyed to Swiper's numbers. */
@media (min-width: 1024px) {
	.hp-descubre__carousel .swiper-slide > a,
	.hp-descubre__carousel .swiper-slide > figure {
		display: block;
		width: 98.25%;
		transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
			margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.hp-descubre__carousel .swiper-slide-active + .swiper-slide > * {
		width: 112.62%;
		margin-left: -1.75%;
	}

	.hp-descubre__carousel .swiper-slide-active + .swiper-slide + .swiper-slide > * {
		width: 89.13%;
		margin-left: 10.87%;
	}

	.hp-descubre__carousel .swiper-slide-active + .swiper-slide .swiper-slide-image {
		height: var(--hp-frame-h);
		margin-top: 0;
	}
}

/* Below 1024px the photos come one or two at a time, so their own proportions
   would run off the bottom of the screen — a 4:5 frame across a 1024px tablet
   is 1280px tall. Every frame is 4:3 of its own width instead, all the same
   height, and the navigation moves to a strip of its own underneath. */
@media (max-width: 1023px) {
	.elementor-widget.hp-descubre__carousel {
		--hp-frame-h: min(calc((100cqw - 10px) * 0.375), 70vh);
		--hp-frame-side: 1;
		--hp-nav-space: 42px;
	}
}

/* One photo at a time, and 766 rather than 767: Swiper's breakpoints on this
   widget read {0: 1 slide, 767: 2, 880: 2, 1024: 3} as min-widths, so 767 still
   shows two. Same trap as the 1024 above. */
@media (max-width: 766px) {
	.elementor-widget.hp-descubre__carousel {
		--hp-frame-h: min(calc(100cqw * 0.75), 70vh);
	}
}

/* Previous arrow, dots, next arrow — in that order, at the bottom right, in the
   band the tall middle frame leaves empty beside the two short ones.

   All three are absolutely positioned siblings, so they cannot be laid out as a
   flex row and the dots cannot simply push the arrows apart. Instead the dots
   get a box of their own of a fixed width and centre themselves inside it: the
   two arrows then hang off that box and the row stays symmetrical whatever the
   number of photos, without anything having to know how wide the dots are.

   `dots_position` is set to "inside" on the widget for this: the "outside"
   default reserves 30px of padding under the swiper for a pager that no longer
   lives there. */
.elementor-widget.hp-descubre__carousel {
	--hp-nav-inset: 24px;
	--hp-nav-arrow: 16px;
	--hp-nav-gap: 10px;
	/* Comfortably wider than the dots themselves (42px bar + 8px dots + 8px
	   channels = 106px for three photos), so they sit centred with air on both
	   sides and the arrows do not shuffle when a photo is added. */
	--hp-nav-dots-box: 132px;
	/* Centred in the band the tall middle frame leaves empty beside the two short
	   ones. Now that those are centred instead of top-aligned, that band is only
	   half of the height they are missing — (1 − 0.665) / 2 of the strip — so the
	   row can no longer sit at a flat 25%. */
	--hp-nav-bottom: calc(
		(var(--hp-frame-h) * (1 - var(--hp-frame-side)) / 2 - var(--hp-nav-arrow)) /
			2
	);
}

.elementor-widget.hp-descubre__carousel .swiper .elementor-swiper-button {
	top: auto;
	bottom: var(--hp-nav-bottom);
	height: var(--hp-nav-arrow);
	transform: none;
}

.elementor-widget.hp-descubre__carousel .swiper .elementor-swiper-button-next {
	left: auto;
	right: var(--hp-nav-inset);
}

.elementor-widget.hp-descubre__carousel .swiper .elementor-swiper-button-prev {
	left: auto;
	right: calc(
		var(--hp-nav-inset) + var(--hp-nav-arrow) + 2 * var(--hp-nav-gap) +
			var(--hp-nav-dots-box)
	);
}

/* The dots are laid out as a flex line the same height as an arrow rather than
   left to sit on a text baseline. On their own the bullets are 8px tall inside
   a 26px line box — the line-height of the pagination — which put their centre
   10px above the centre of the arrows, and the row read as crooked. Sharing a
   height and a `bottom` with the arrows is what lines the three up. */
.elementor-widget.hp-descubre__carousel .swiper .swiper-pagination-bullets {
	left: auto;
	right: calc(var(--hp-nav-inset) + var(--hp-nav-arrow) + var(--hp-nav-gap));
	bottom: var(--hp-nav-bottom);
	width: var(--hp-nav-dots-box);
	height: var(--hp-nav-arrow);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Under 1024px the row sits in the strip of its own below the photos, still to
   the right. */
@media (max-width: 1023px) {
	.elementor-widget.hp-descubre__carousel {
		--hp-nav-bottom: 6px;
		--hp-nav-inset: 16px;
	}
}

.hp-trabajo {
	background-repeat: no-repeat;
}

.hp-trabajo__title .elementor-heading-title,
.hp-dudas__title .elementor-heading-title {
	line-height: 1.06;
}

@media (max-width: 767px) {
	.hp-trabajo__spacer,
	.hp-dudas__spacer {
		display: none;
	}

	.hp-trabajo,
	.hp-dudas {
		background-position: center top !important;
		background-size: contain !important;
	}
}

/* --- Servicios y garantías --- */
.hp-dudas__phone p {
	margin: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 46px;
	line-height: 1.1;
}

/* El kit de Elementor declara `font-size: 16px` para todos los enlaces con la
   misma especificidad que este bloque, asi que el numero heredaba 16px en vez
   del tamano de arriba. `font: inherit` sobre `p a` lo devuelve al parrafo. */
.hp-dudas__phone p a {
	color: var(--hp-green-bright);
	font: inherit;
	text-decoration: none;
}

@media (max-width: 767px) {
	.hp-dudas__phone p {
		font-size: 32px;
	}
}

.hp-stores__accordion .elementor-accordion-item {
	margin-bottom: 12px;
	border-radius: 10px;
	overflow: hidden;
}

.hp-stores__accordion .elementor-tab-title {
	background: var(--hp-navy);
}

.hp-stores__accordion .elementor-tab-title.elementor-active {
	background: var(--hp-green);
}

.hp-stores__accordion .elementor-tab-content p {
	margin: 0 0 10px;
}

.hp-maplink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 10px;
	padding: 7px 16px;
	border: 1px solid var(--hp-navy);
	border-radius: 20px;
	color: var(--hp-navy);
	font-size: 14px;
	text-decoration: none;
	vertical-align: middle;
}

.hp-maplink::before {
	content: '';
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hp-maplink[href*='waze']::before {
	background-image: url('../img/icon-waze.svg');
}

.hp-maplink[href*='google.com/maps']::before {
	background-image: url('../img/icon-google-maps.svg');
}

.hp-maplink:hover {
	background: var(--hp-navy);
	color: #ffffff !important;
}

/* --- Split pages: contacto, empleos, distribuidor --- */
.hp-split__intro,
.hp-split__address p {
	margin: 0;
}

.hp-split__address a {
	color: var(--hp-navy);
	text-decoration: none;
}

.hp-split__title .elementor-heading-title {
	line-height: 1.08;
}

/* --- Sucursales --- */
.hp-suc__address a {
	color: var(--hp-navy);
	font-weight: 600;
	text-decoration: none;
}

.hp-suc__actions .e-child {
	width: auto;
	flex: 0 0 auto;
}

.hp-suc__map iframe,
.hp-stores__map iframe {
	border-radius: 10px;
}

/* --- Blog listing --- */
.hp-blog__list .elementor-post {
	background: transparent;
}

.hp-blog__list .elementor-post__thumbnail__link {
	border-radius: 10px;
	overflow: hidden;
}

.hp-blog__list .elementor-post__title a {
	color: var(--hp-navy);
}

.hp-blog__cats ul,
.hp-blog__cats ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-blog__cats li {
	padding: 6px 0;
}

.hp-blog__cats a {
	color: var(--hp-text);
	text-decoration: none;
}

.hp-blog__cats a:hover {
	color: var(--hp-navy);
}

/* On mobile the card has to stack. Elementor's "thumbnail-left" skin is not a
   responsive control — it pins `flex-direction: row` on the article at every
   width — while the widget's own mobile setting takes the thumbnail to
   `width: 100%`. The image then fills the whole row, the text column is pushed
   past the right edge of the article and `overflow: hidden` clips it away, so
   titles and excerpts disappear entirely. Turning the card into a column is
   what that 100% was reaching for. */
@media (max-width: 767px) {
	.hp-blog__list.elementor-posts--thumbnail-left .elementor-post {
		flex-direction: column;
	}

	/* Four classes: the 20px gutter comes from Elementor's per-page stylesheet
	   at that same weight, and a plain two-class selector loses to it. */
	.elementor .hp-blog__list.elementor-posts--thumbnail-left .elementor-post__thumbnail__link {
		width: 100%;
		margin-right: 0;
		margin-bottom: 16px;
	}

	.hp-blog__list .elementor-post__text {
		width: 100%;
		min-width: 0;
	}
}

/* --- Single post --- */
.hp-post__title .elementor-heading-title {
	letter-spacing: -0.5px;
}

.hp-post__content h2,
.hp-post__content h3 {
	margin-top: 1.6em;
}

.hp-post__content img {
	border-radius: 10px;
}

.hp-post__share .elementor-share-btn {
	border: 1px solid var(--hp-border);
	border-radius: 6px;
}

/* --- Product archive --- */
.hp-filters {
	background: var(--hp-gray-surface);
	border-radius: 10px;
	padding: 22px 20px 26px;
}

.hp-filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-filters li {
	padding: 5px 0;
}

.hp-filters a {
	color: var(--hp-text);
	text-decoration: none;
	font-size: 15px;
}

.hp-filters a:hover,
.hp-filters .current-cat > a {
	color: var(--hp-navy);
	font-weight: 600;
}

/* --- Single product --- */
.hp-single__crumbs {
	color: var(--hp-text-soft);
}

/* --- Single product: ficha tecnica ---------------------------------------
   Both `woocommerce.css` and Elementor's additional-information widget style
   `table.shop_attributes`, and `.woocommerce table.shop_attributes th` (0,2,2)
   outscores a bare `.hp-single__specs th` (0,1,1). Every rule below therefore
   leads with `.woocommerce` to reach (0,3,2) and win on merit, no `!important`.

   The design: no outer rules at all, 4px corners, and one blue rule splitting
   the labels from their values. */
.woocommerce .hp-single__specs table.shop_attributes {
	width: 100%;
	margin-bottom: 0;
	border: 0;
	/* `separate` is what lets border-radius reach the corner cells; with
	   `collapse` the radii are ignored. `border-spacing: 0` keeps the stripes
	   touching so the table still reads as one block. */
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	/* Belt and braces on the 4px: the corner cells below round the visible
	   stripes, and this clips anything that paints past them. */
	border-radius: 4px;
	overflow: hidden;
}

.woocommerce .hp-single__specs table.shop_attributes th,
.woocommerce .hp-single__specs table.shop_attributes td {
	padding: 14px 24px;
	border: 0;
	text-align: left;
	line-height: 1.5;
	vertical-align: middle;
}

/* The label column takes a little under half the row, as in the reference
   layout, and the 24px of padding keeps both texts clear of the blue hairline. */
.woocommerce .hp-single__specs table.shop_attributes th {
	width: 45%;
	color: var(--hp-navy);
	font-weight: 600;
	border-right: 1px solid var(--hp-navy-soft);
}

/* Core prints the value in italics inside a <p> that carries its own padding.
   The padding belongs on the cell instead, so every stripe is the same height. */
.woocommerce .hp-single__specs table.shop_attributes td {
	color: var(--hp-text);
	font-style: normal;
}

.woocommerce .hp-single__specs table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* Core stripes the even rows with (0,3,2); these need (0,4,2) to put the
   site's own stripe back. */
.woocommerce .hp-single__specs table.shop_attributes tr:nth-child(odd) th,
.woocommerce .hp-single__specs table.shop_attributes tr:nth-child(odd) td {
	background: #eef1f6;
}

.woocommerce .hp-single__specs table.shop_attributes tr:nth-child(even) th,
.woocommerce .hp-single__specs table.shop_attributes tr:nth-child(even) td {
	background: transparent;
}

.woocommerce .hp-single__specs table.shop_attributes tr:first-child th {
	border-top-left-radius: 4px;
}

.woocommerce .hp-single__specs table.shop_attributes tr:first-child td {
	border-top-right-radius: 4px;
}

.woocommerce .hp-single__specs table.shop_attributes tr:last-child th {
	border-bottom-left-radius: 4px;
}

.woocommerce .hp-single__specs table.shop_attributes tr:last-child td {
	border-bottom-right-radius: 4px;
}

/* `woocommerce-smallscreen.css` turns every cell into a block below 768px.
   A vertical rule across a full-width block makes no sense there, so the label
   closes up on its value and the corners move to the outer pair. */
@media (max-width: 768px) {
	.woocommerce .hp-single__specs table.shop_attributes th {
		width: auto;
		padding-bottom: 2px;
		border-right: 0;
	}

	.woocommerce .hp-single__specs table.shop_attributes td {
		padding-top: 2px;
	}

	.woocommerce .hp-single__specs table.shop_attributes tr:first-child th {
		border-radius: 4px 4px 0 0;
	}

	.woocommerce .hp-single__specs table.shop_attributes tr:first-child td,
	.woocommerce .hp-single__specs table.shop_attributes tr:last-child th {
		border-radius: 0;
	}

	.woocommerce .hp-single__specs table.shop_attributes tr:last-child td {
		border-radius: 0 0 4px 4px;
	}
}

.hp-single__cart .quantity input {
	border-radius: 4px;
}

/* --- Cart & account --- */
.hp-cart .woocommerce table.shop_table,
.hp-account .woocommerce table.shop_table {
	border-radius: 10px;
	overflow: hidden;
}

.hp-cart-section .woocommerce,
.hp-account .woocommerce {
	max-width: 100%;
}

.hp-cart-section .hp-scroll-x,
.hp-cart .woocommerce-cart-form {
	overflow-x: auto;
}

@media (max-width: 767px) {
	.hp-account__media {
		border-radius: 10px 10px 0 0 !important;
	}
}

/* --- Long-form legal pages --- */
.hp-doc__body p {
	margin: 0 0 14px;
}

.hp-doc__body ul {
	margin: 0 0 14px 20px;
}

.hp-doc__body li {
	margin-bottom: 8px;
}

.hp-doc__body a {
	color: var(--hp-navy);
}


/* ==========================================================================
   03d. WooCommerce — product cards, single product, cart, account
   ========================================================================== */

/* --- 03d.1 Product card (home grid, archive, related) --- */
/* Elementor's product grid drives the card's own display through
   `--button-align-display`, from a rule that outweighs anything we can write
   with these class names, so the column layout has to be set through the
   variables it reads. Without this the card stays `display: block` and the
   `margin-bottom: auto` on the title below cannot push "Ver más" down. */
.hp-products ul.products li.product,
ul.products li.product {
	--button-align-display: flex;
	--button-align-direction: column;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #ffffff;
	border-radius: 10px;
	padding: 18px 18px 20px;
}

ul.products li.product .woocommerce-LoopProduct-link {
	display: block;
}

/* The design frames product shots in a landscape well, not a square one. */
ul.products li.product img {
	border-radius: 6px;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #ffffff;
}

/* The catalogue shot with the first gallery image stacked behind it: hovering
   a card cross-fades to that second photograph. Cards whose product has no
   gallery carry no `--has-alt`, so nothing moves. */
.hp-card__media {
	position: relative;
	display: block;
}

.hp-card__img {
	transition: opacity 0.35s ease;
}

.hp-card__media--has-alt .hp-card__img--alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

ul.products li.product:hover .hp-card__media--has-alt .hp-card__img--main,
ul.products li.product:focus-within .hp-card__media--has-alt .hp-card__img--main {
	opacity: 0;
}

ul.products li.product:hover .hp-card__media--has-alt .hp-card__img--alt,
ul.products li.product:focus-within .hp-card__media--has-alt .hp-card__img--alt {
	opacity: 1;
}

.hp-card__cat {
	display: block;
	margin: 14px 0 4px;
	font-family: "Archivo", sans-serif;
	font-size: 13px;
	line-height: 1.3;
	color: var(--hp-text-soft);
}

ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 auto;
	padding: 0;
	font-family: "Archivo", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	color: var(--hp-navy);
}

/* `margin-top: auto` rather than a fixed gap: the cards are equal height, so
   this drops every "Ver más" onto one baseline no matter how many lines the
   product name runs to. */
.hp-card__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

/* 140 x 27 with an 8px radius, matching the buttons throughout the design. */
.hp-card__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	padding: 4px 22px;
	border: 1px solid var(--hp-navy);
	border-radius: 8px;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--hp-navy);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* The kit paints every link with `.elementor-kit-2231 a:hover { color: #586EF1 }`,
   which outranks a plain `.hp-card__more:hover` and left the label blue on the
   navy plate. Naming the list and the item outweighs it. */
ul.products li.product a.hp-card__more:hover,
ul.products li.product a.hp-card__more:focus-visible {
	background: var(--hp-navy);
	color: #ffffff;
}

/* The card's compact cart control is an icon, not a full-width button. */
.hp-card__cart.button,
ul.products li.product a.hp-card__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: var(--hp-green);
	font-size: 0;
	line-height: 0;
}

/* No tinted plate behind the glyph on hover — it just deepens and lifts. */
ul.products li.product a.hp-card__cart:hover {
	background: transparent;
	color: #2c633d;
	transform: scale(1.1);
}

ul.products li.product a.hp-card__cart.loading,
ul.products li.product a.hp-card__cart.added {
	opacity: 0.65;
}

/* Woo appends a "View cart" link after an ajax add; keep it quiet. */
ul.products li.product a.added_to_cart {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--hp-link);
}

/* --- 03d.2 Single product --- */
.elementor-widget.hp-single__gallery {
	max-width: 560px;
}

/* Portrait product shots would otherwise run 800px tall and push the buy
   column far above the fold. */
.hp-single__gallery .woocommerce-product-gallery__image img {
	max-height: 560px;
	width: 100%;
	object-fit: contain;
}

/* The frame goes on the FlexSlider viewport: the track behind it is as wide as
   every slide laid end to end, and the slide itself is a pixel taller than the
   viewport clips, which is what cut the bottom edge off and doubled the line. */
.hp-single__gallery .woocommerce-product-gallery__wrapper {
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.hp-single__gallery .flex-viewport,
.hp-single__gallery .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image {
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
}

.hp-single__gallery .flex-viewport .woocommerce-product-gallery__image {
	border: 0;
	border-radius: 0;
}

.hp-single__gallery .woocommerce-product-gallery__image img {
	border-radius: 0;
}

.hp-single__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.hp-single__gallery .flex-control-thumbs li {
	width: 100% !important;
	margin: 0;
	float: none;
}

.hp-single__gallery .flex-control-thumbs img {
	border: 1px solid var(--hp-border);
	border-radius: 8px;
	opacity: 1;
}

.hp-single__short p {
	margin: 0 0 10px;
}

.hp-single__meta {
	font-size: 14px;
	color: var(--hp-text);
}

.hp-single__meta .detail-container {
	margin-bottom: 4px;
}

.hp-single__stock .stock {
	margin: 0;
	font-weight: 600;
}

/* Add-to-cart row: quantity + navy button, then the outline "Comprar ahora". */
/* The design stacks these: the quantity stepper on its own line, then the two
   full-width buttons under it. */
.hp-single__cart form.cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 0;

	/* The Elementor add-to-cart widget spaces sibling buttons with
	   `margin-inline-start: var(--button-spacing, 10px)` on every
	   `button:where(:not(:first-child))` inside `form.cart`. That hit two things at
	   once: the "Añadir al carrito" button, pushed 10px right of the column (and
	   overflowing 10px past it, since it is `width: 100%`), and the `+` of the
	   quantity stepper, which got a 10px white gap between it and the number field
	   and made that half of the stepper wider than the `−` half.
	   The selector scores (0,4,3) — outranking it by class would take an ugly
	   chain — but it reads the spacing from a variable, so redefining the variable
	   here (closer in the tree, so it wins by inheritance) zeroes both without
	   `!important`. The 14px `gap` above already separates the two buttons. */
	--button-spacing: 0px;
}

.hp-single__cart .quantity input.qty {
	height: 46px;
	width: 78px;
	border: 1px solid var(--hp-border);
	border-radius: 4px;
	text-align: center;
}

.hp-single__cart button.single_add_to_cart_button {
	width: 100%;
	min-height: 46px;
	background: var(--hp-navy);
	border: 1px solid var(--hp-navy);
	border-radius: 6px;
	color: #ffffff;
	font-family: "Archivo", sans-serif;
	font-weight: 600;
}

.hp-single__cart button.single_add_to_cart_button:hover {
	background: var(--hp-navy-hover);
	border-color: var(--hp-navy-hover);
	color: #ffffff;
}

.hp-single__buynow .elementor-button {
	width: 100%;
	justify-content: center;
}

/* WooCommerce prints its own "Información adicional" heading; the section
   already carries the design's "Ficha técnica" title. */
.hp-single__specs h2,
.hp-single__specs .elementor-widget-container > h2 {
	display: none;
}

.hp-single__crumbs a {
	color: var(--hp-text);
	text-decoration: none;
}

.hp-single__crumbs a:hover {
	color: var(--hp-navy);
}

.hp-single__related ul.products li.product {
	background: #ffffff;
	border: 0;
}

/* --- 03d.3 Buttons WooCommerce renders outside our templates --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
	background: var(--hp-navy);
	border-radius: 4px;
	color: #ffffff;
	font-family: "Archivo", sans-serif;
	font-weight: 600;
	padding: 12px 26px;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--hp-navy-hover);
	color: #ffffff;
}

.woocommerce .button.alt,
.woocommerce button.button.alt {
	background: var(--hp-navy);
	color: #ffffff;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--hp-border);
	border-radius: 4px;
	padding: 11px 14px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--hp-navy);
	border-radius: 6px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--hp-navy);
}

/* --- 03d.4 My account --- */
.hp-account__claim p {
	margin: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 30px;
	line-height: 1.12;
	text-shadow: 0 2px 18px rgba(6, 18, 36, 0.55);
}

.hp-account h2,
.hp-account .u-column1 > h2,
.hp-account .u-column2 > h2 {
	font-family: "Archivo Black", sans-serif;
	font-size: 28px;
	text-transform: uppercase;
	color: var(--hp-navy);
}

.hp-account .woocommerce-form {
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	background: #ffffff;
}

.hp-account .woocommerce-form-login__rememberme,
.hp-account .lost_password a,
.hp-account a {
	color: var(--hp-navy);
}

/* --- 03d.5 Cart --- */
.hp-cart-section .return-to-shop .button,
.hp-cart .wc-proceed-to-checkout .button {
	background: var(--hp-navy);
	color: #ffffff;
}

/* --- 03d.6 Archive filters --- */
.hp-filters .product-categories > li > a {
	font-weight: 600;
	color: var(--hp-navy);
}

.hp-filters .product-categories .children {
	margin: 4px 0 10px 0;
	padding-left: 2px;
}

.hp-filters .price_slider_wrapper .price_slider_amount .button {
	padding: 8px 18px;
	font-size: 13px;
}

/* Equal-height cards so every "Ver más" lines up across a row. */
ul.products {
	align-items: stretch;
}

ul.products li.product {
	height: 100%;
}

/* Woo's price filter ships with its own accent; bring it to brand navy. */
.hp-filters .price_slider,
.hp-filters .ui-slider .ui-slider-range,
.hp-filters .ui-slider .ui-slider-handle {
	background: var(--hp-navy);
}

.hp-filters .price_slider_wrapper .ui-widget-content {
	background: var(--hp-border);
}

/* Single-product gallery thumbnails always sit on one row. */
.hp-single__gallery .flex-control-thumbs {
	grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}

/* The specs section only earns its heading when the product has attributes. */
.hp-single-specs:not(:has(.shop_attributes)) {
	display: none;
}

.hp-single__related .elementor-heading-title,
.hp-single__related .woocommerce-loop-product__title ~ h2,
.hp-single__related > h2,
.hp-single__related .related > h2 {
	font-family: "Archivo", sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	color: var(--hp-navy);
	margin: 0 0 22px;
}

/* --- Mini cart panel --- */
.elementor-menu-cart__container .elementor-menu-cart__main {
	width: min(390px, 92vw);
	margin-left: auto;
}

.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--hp-navy);
}

.elementor-menu-cart__product-price {
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hp-text);
}

.elementor-menu-cart__footer-buttons a {
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* Availability sits with the add-to-cart block, in brand green. */
.hp-single__cart .stock {
	margin: 0 0 4px;
	flex: 1 0 100%;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
}

/* El prefijo `.woocommerce` es obligatorio: core trae
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock`
   con color #958e09 y puntua (0,3,1); sin el prefijo estas reglas puntuan (0,3,0)
   y pierden. Con el, (0,4,0), y el verde es el mismo `--hp-green` del icono de
   carrito de las tarjetas de producto. */
.woocommerce .hp-single__cart .stock.in-stock {
	color: var(--hp-green);
}

.woocommerce .hp-single__cart .stock.out-of-stock {
	color: var(--hp-red);
}

/* ==========================================================================
   03e. Testimonials carousel
   ========================================================================== */

/* The quotation mark hangs off the text block, not off the card. Elementor
   already owns `.e-con::before` for a container's background overlay and
   declares it `position: absolute; inset: 0`, so a `::before` on
   `.hp-story__card` inherits that and lands in the card's top-left corner,
   outside its padding, no matter what we set on it. On the widget below the
   pseudo-element is free and stays in the flow, inside the card's padding.

   The glyph carries no margin of its own: the card's 26px of top padding and
   24px of left padding place it, and `line-height: 0.7` keeps it tight against
   the quote below. */
.hp-story__quote::before {
	content: "\201C";
	display: block;
	font-family: "Archivo Black", sans-serif;
	font-size: 54px;
	line-height: 0.7;
	color: var(--hp-navy);
}

.hp-story__quote p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.hp-story__name p {
	margin: 0;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

/* El oficio va en su propia línea, más chico y en gris. El `<span>` es el
   marcado bueno, pero el editor de Elementor lo pierde en cuanto alguien
   reescribe el nombre: con Enter guarda dos `<p>`. Ese caso se cubre aquí —y no
   sólo en el front, también en el preview del editor, que carga este CSS—; el
   `<br>` de Shift+Enter, al que el CSS no llega, lo normaliza
   `inc/story-names.php` antes de imprimir. */
.hp-story__name span,
.hp-story__name p + p {
	display: block;
	font-weight: 400;
	font-size: 13px;
	color: var(--hp-text);
}

/* Every slide ends up as tall as the tallest one — the swiper stretches
   `.swiper-slide` — but `.hp-story__row` only grows to its own content, so the
   shorter story leaves a strip of empty page under its card and its photo
   stops short of the neighbour's. Growing the row into its slide hands that
   height down to the photo and the card through the row's own `stretch`, and
   the two columns end flush on every slide however long the quote runs. */
.hp-stories .hp-story > .hp-story__row {
	flex-grow: 1;
}

/* The controls sit in one row under the cards, flush right, so the widget
   reserves a strip below the slides for them.

   Elementor drives the arrow and dot positions from a stack of custom
   properties whose percentage base includes that strip, which makes its own
   offset controls fight the padding. Placing all three outright is simpler and
   keeps them off the cards; the selectors carry five classes only to outweigh
   the widget's own (0,4,0) placement rules without `!important`. */
.hp-stories__carousel {
	position: relative;
	padding-bottom: 52px;
}

.hp-stories__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev,
.hp-stories__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-next {
	top: auto;
	bottom: 16px;
	left: auto;
	transform: none;
}

.hp-stories__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev {
	right: 140px;
}

.hp-stories__carousel.elementor-widget-n-carousel .swiper ~ .elementor-swiper-button.elementor-swiper-button-next {
	right: 0;
}

.hp-stories__carousel.elementor-widget-n-carousel .swiper ~ .swiper-pagination,
.hp-stories__carousel.elementor-widget-n-carousel .swiper-pagination {
	top: auto;
	bottom: 20px;
	left: auto;
	right: 34px;
	width: auto;
	transform: none;
}

/* The dots themselves — grey, with the active page stretched into a red bar
   — come from the shared `.hp-carousel` block in 03a. */

/* ==========================================================================
   03f. Blog single tweaks
   ========================================================================== */

.hp-post__back a.elementor-button,
.hp-post__back .elementor-button {
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	color: var(--hp-navy);
	font-weight: 600;
}

.hp-post__back .elementor-button::before {
	content: "\2190";
	margin-right: 10px;
	font-size: 20px;
	line-height: 1;
}

/* The back link has no plate behind it, so the hover has to stay a dark
   colour — a white hover text disappears against the page. */
.hp-post__back a.elementor-button:hover,
.hp-post__back .elementor-button:hover {
	background: transparent !important;
	color: var(--hp-navy-hover);
}

.hp-post__back .elementor-button::before {
	transition: transform 0.2s ease;
}

.hp-post__back .elementor-button:hover::before {
	transform: translateX(-4px);
}

.hp-post__share .elementor-share-btn {
	background: transparent;
	border: 1px solid var(--hp-border);
	color: var(--hp-navy);
}

.hp-post__share .elementor-share-btn:hover {
	background: var(--hp-navy);
	color: #ffffff;
}

.hp-post__share .elementor-share-btn__icon {
	color: inherit;
}

/* ==========================================================================
   04. Forms
   ========================================================================== */

/* Labels stay in the DOM for screen readers while only the placeholder shows,
   so no field ever displays its label and placeholder at the same time. */
.hp-form .elementor-field-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hp-form .elementor-field-textual {
	box-shadow: none;
}

.hp-form textarea.elementor-field-textual {
	border-radius: 18px;
	padding-top: 14px;
}

.hp-form .elementor-message {
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	margin-top: 10px;
}

/* The 16px on the left is the same padding the textual fields use, so the left
   edge of the picker button starts exactly on the vertical line the placeholder
   text of every other field starts on (1px border + 16px padding). That is the
   line the eye follows down the column, so keep the two in step. */
.hp-form .elementor-field-type-upload .elementor-field {
	background: var(--hp-gray-field);
	border: 1px solid var(--hp-gray-field);
	border-radius: 24px;
	padding: 9px 12px 9px 16px;
	color: var(--hp-text);
	font-size: 14px;
}

/* Style the native picker so it reads as part of the form. The button label
   itself is supplied by the browser in the visitor's own language. */
.hp-form input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 20px;
	background: var(--hp-navy);
	border: 0;
	border-radius: 4px;
	color: #ffffff;
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.hp-form input[type="file"]::file-selector-button:hover {
	background: var(--hp-navy-hover);
}

/* A file input has no `width: auto` worth the name: the browser sizes it to
   its own contents — the picker button plus the "no file selected" wording,
   both in the visitor's language — so on a phone it grows wider than its
   column, pokes out of the card and drags the whole page sideways. Pin it to
   the column and let the file name be the thing that gets clipped. */
.hp-form .elementor-field-type-upload {
	min-width: 0;
}

.hp-form .elementor-field-type-upload .elementor-field {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* On the narrowest phones the picker button itself is most of the field, so it
   gives back some of its padding to leave room for the file name. The field's
   own left padding is untouched, so the button keeps starting on the same line
   as the rest of the column. */
@media (max-width: 480px) {
	.hp-form input[type="file"]::file-selector-button {
		margin-right: 10px;
		padding: 9px 14px;
	}
}

/* On a phone flatpickr hands the date field over to the operating system's
   own date picker (`input.flatpickr-mobile`), and a native date input never
   renders a placeholder — it shows the browser's bare `dd/mm/aaaa` and
   nothing that says which date is being asked for. Where that swap actually
   happened, and only there, bring the label back into view. Everywhere else
   the placeholder still does the job and the label stays hidden. */
.hp-form .elementor-field-type-date:has(input.flatpickr-mobile) > .elementor-field-label {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0 0 6px;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* ==========================================================================
   05. Utilities
   ========================================================================== */

.hp-btn-full-m .elementor-button {
	justify-content: center;
}

@media (max-width: 767px) {
	.hp-btn-full-m .elementor-button {
		width: 100%;
	}
}

/* Respect the visitor's motion preference: entry animations become instant. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.animated {
		animation: none !important;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Wide content never forces the page itself to scroll sideways. */
.hp-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   06. Catalogue, blog and account follow-ups
   ========================================================================== */

/* --- Archive filters --- */
/* The design lists the categories as a tick-box filter. Groups that have
   children become headings; every selectable category is a row with a box, so
   at a glance you can tell a heading from something you can click. */
.hp-filters .product-categories > li {
	padding: 0;
	margin-bottom: 6px;
}

.hp-filters .product-categories > li:has(> .children) {
	margin-bottom: 22px;
}

.hp-filters .product-categories > li:has(> .children) > a {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hp-border);
	font-family: "Archivo", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hp-navy);
}

.hp-filters .product-categories .children {
	margin: 0;
	padding-left: 0;
}

.hp-filters .product-categories li {
	padding: 0;
}

.hp-filters .product-categories .children li,
.hp-filters .product-categories > li:not(:has(> .children)) {
	padding: 0;
}

.hp-filters .product-categories .children > li > a,
.hp-filters .product-categories > li:not(:has(> .children)) > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--hp-text);
}

.hp-filters .product-categories .children > li > a::before,
.hp-filters .product-categories > li:not(:has(> .children)) > a::before {
	content: "";
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	border: 1px solid #c9cfd8;
	border-radius: 3px;
	background: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hp-filters .product-categories > li > a:hover,
.hp-filters .product-categories .children > li > a:hover {
	color: var(--hp-navy);
}

.hp-filters .product-categories a:hover::before {
	border-color: var(--hp-navy);
}

.hp-filters .product-categories .current-cat > a {
	color: var(--hp-navy);
	font-weight: 600;
}

.hp-filters .product-categories .current-cat > a::before {
	border-color: var(--hp-navy);
	background: var(--hp-navy);
	box-shadow: inset 0 0 0 3px #ffffff;
}

/* Woo ships the price slider with jQuery UI's purple; bring it to brand. */
.hp-filters .price_slider_wrapper .ui-slider .ui-slider-range,
.hp-filters .price_slider_wrapper .ui-slider .ui-slider-handle,
.hp-filters .ui-slider-horizontal .ui-slider-range,
.hp-filters .ui-slider-horizontal .ui-slider-handle {
	background: var(--hp-navy);
	border-color: var(--hp-navy);
}

/* --- Pagination, both the catalogue and the blog --- */
/* `page-numbers` is on the <ul> as well as on each link, so every rule here
   has to name the element or the list itself picks up a box of its own. */
.hp-products nav.woocommerce-pagination ul.page-numbers,
.hp-blog__list .elementor-pagination,
.hp-archivepage__grid .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 36px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.hp-products nav.woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
	padding: 0;
}

.hp-products nav.woocommerce-pagination a.page-numbers,
.hp-products nav.woocommerce-pagination span.page-numbers,
.hp-blog__list .elementor-pagination .page-numbers,
.hp-archivepage__grid .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 11px;
	border: 1px solid var(--hp-border);
	border-radius: 6px;
	background: #ffffff;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--hp-navy);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hp-products nav.woocommerce-pagination a.page-numbers:hover,
.hp-blog__list .elementor-pagination .page-numbers:hover,
.hp-archivepage__grid .elementor-pagination .page-numbers:hover {
	border-color: var(--hp-navy);
	background: var(--hp-gray-surface);
	color: var(--hp-navy);
}

.hp-products nav.woocommerce-pagination span.page-numbers.current,
.hp-blog__list .elementor-pagination .page-numbers.current,
.hp-archivepage__grid .elementor-pagination .page-numbers.current {
	background: var(--hp-navy);
	border-color: var(--hp-navy);
	color: #ffffff;
}

.hp-products nav.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* --- Blog sidebar rides along with the article list --- */
/* The offset clears the pinned header (see 02.0); without it the sidebar
   parks underneath the nav bar. */
.hp-blog__side {
	position: sticky;
	top: calc(var(--hp-header-pinned-h) + 24px);
	align-self: flex-start;
	max-height: calc(100vh - var(--hp-header-pinned-h) - 48px);
	overflow-y: auto;
}

/* Below 1025px the two columns stack. The sidebar is the second child in the
   markup, so without `order` the category filter lands at the foot of a very
   long list of articles — it has to lead. */
@media (max-width: 1024px) {
	.hp-blog__side {
		position: static;
		max-height: none;
		overflow: visible;
		order: -1;
	}
}

/* --- Cut-out photography --- */
/* The form and service photographs are supplied on a white plate, which shows
   as a rectangle behind the cut-out. Multiplying drops that plate into
   whatever sits behind it instead of stamping a box on the page. */
.hp-split__media,
.hp-serv__img img,
.hp-account__media {
	mix-blend-mode: multiply;
}

/* --- Quantity stepper, on the product page and in the cart --- */
.hp-single__cart .quantity,
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	width: auto;
	border: 1px solid var(--hp-border);
	border-radius: 6px;
	background: #ffffff;
	overflow: hidden;
}

/* The kit paints every bare <button> navy, so these need the extra class to
   stay the quiet − / + controls the design shows. */
.hp-single__cart .quantity button.hp-qty__btn,
.woocommerce .quantity button.hp-qty__btn,
button.hp-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 42px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	color: var(--hp-green);
	font-family: "Archivo", sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-single__cart .quantity button.hp-qty__btn:hover,
.woocommerce .quantity button.hp-qty__btn:hover,
button.hp-qty__btn:hover {
	background: rgba(56, 124, 77, 0.1);
	color: #2c633d;
}

/* Elementor generates `.elementor-NNNN .elementor-element-XXXX .cart button`
   for the add-to-cart widget — an id-scoped selector we cannot outrank with
   class names, and it would repaint the stepper navy. This is the one place
   `!important` earns its keep. */
.quantity button.hp-qty__btn {
	background: #ffffff !important;
	color: var(--hp-green) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-height: 44px !important;
}

.quantity button.hp-qty__btn:hover {
	background: rgba(56, 124, 77, 0.1) !important;
	color: #2c633d !important;
}

.hp-single__cart .quantity input.qty,
.woocommerce .quantity input.qty {
	width: 56px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--hp-border);
	border-right: 1px solid var(--hp-border);
	border-radius: 0;
	background: #ffffff;
	text-align: center;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	color: var(--hp-navy);
	-moz-appearance: textfield;
	appearance: textfield;
}

.hp-single__cart .quantity input.qty::-webkit-outer-spin-button,
.hp-single__cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Image lightboxes dim the page rather than blacking it out --- */
.pswp__bg {
	background-color: rgba(6, 22, 44, 0.86);
}

/* The kit paints every bare <button> navy with padding and a border, which
   turns PhotoSwipe's icon strip into a row of overlapping plates. These are
   sprite buttons: they need no box of their own. */
.pswp button,
.pswp__button,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
}

.pswp__button:hover,
.pswp__button:focus {
	background-color: transparent;
	box-shadow: none;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	background-color: rgba(0, 0, 0, 0.3);
}

/* Same treatment for the magnifier Woo drops on the gallery. */
.hp-single__gallery .woocommerce-product-gallery__trigger {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* --- Related products: borderless cards --- */
/* The frame is gone by request; the padding stays so the photo and the title
   keep the same inner rhythm as the cards in the rest of the catalogue. */
.hp-single__related ul.products li.product {
	padding: 18px 18px 20px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
}

/* --- Message boxes and form fields --- */
/* Nobody needs to drag a message field around. */
.hp-form textarea,
.woocommerce textarea,
textarea.elementor-field-textual {
	resize: none;
}

/* --- Filters: a top-level category with no children is still a category --- */
.hp-filters .product-categories > li:not(:has(> .children)) {
	margin-bottom: 22px;
}

.hp-filters .product-categories > li:not(:has(> .children)) > a {
	display: block;
	gap: 0;
	margin-bottom: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--hp-border);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hp-navy);
}

.hp-filters .product-categories > li:not(:has(> .children)) > a::before {
	content: none;
}

/* --- Sale price: struck-through "precio normal" then the offer --- */
.hp-single__price del,
ul.products li.product del {
	display: inline-block;
	margin-right: 10px;
	opacity: 1;
	font-size: 0.62em;
	font-weight: 400;
	color: var(--hp-text-soft);
	text-decoration: line-through;
}

.hp-single__price del::before {
	content: "Precio normal ";
	text-decoration: none;
	display: inline-block;
}

.hp-single__price ins,
ul.products li.product ins {
	background: transparent;
	text-decoration: none;
	font-weight: 700;
	color: var(--hp-navy);
}

/* The badge anchors to the card, so the card has to be the reference box. */
ul.products li.product,
.hp-single__gallery .woocommerce-product-gallery {
	position: relative;
}

/* The badge is the pennant of the approved design: `assets/img/badge-oferta.png`
   carries the gold border, the red field and the white % seal, and the only
   markup on top of it is the two lines of copy. Every measurement below is a
   share of the badge's own width, taken from the PSD (ribbon 103 x 149):

     figure       cap height 25.2% of the width, baseline at 54.18% of the height
     label        cap height 10.7% of the width, baseline at 66.28% of the height

   The two baselines are exact. The type sizes are not the PSD's: its face is
   StackSans Headline, whose capitals stand taller and set narrower than
   Archivo's, so the sizes here are the ones that reproduce the drawing rather
   than the numbers. The figure is 35.5cqw because that lands its capitals on
   the PSD's cap height (its own 33.5cqw would read a touch small). The label
   keeps the PSD's 12.7cqw: matching its cap height would need 15.3cqw, and
   "DESCUENTO" set in Archivo would then run past the red field onto the gold.

   `cqw` is what makes that work at any size, so the badge declares itself a
   container. The plain `px` font-size before each `cqw` one is the value at the
   card size and is what a browser without container queries keeps.

   WooCommerce pins the flash to the corner with a negative margin and Elementor
   zeroes its padding, both from selectors heavier than a plain `.onsale` rule.
   The list below matches their weight so those defaults never come back. */
.woocommerce ul.products li.product span.onsale,
.elementor-products-grid ul.products.elementor-grid li.product span.onsale,
.woocommerce div.product span.onsale,
.woocommerce .elementor-widget-woocommerce-product-images span.onsale,
ul.products li.product span.onsale,
.hp-single__gallery span.onsale {
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: 10%;
	z-index: 3;
	display: block;
	container-type: inline-size;
	width: clamp(52px, 20%, 64px);
	min-width: 0;
	min-height: 0;
	aspect-ratio: 103 / 149;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../img/badge-oferta.png") no-repeat 50% 0 / 100% 100%;
	box-shadow: none;
	font-family: "Archivo", sans-serif;
	line-height: 1;
	text-align: center;
	color: #ffffff;
}

/* Both lines are centred on the ribbon and pinned by their own baseline, so a
   one-digit discount and a two-digit one sit on exactly the same line. */
.hp-onsale__pct,
.hp-onsale__label {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	line-height: 1;
	white-space: nowrap;
}

.hp-onsale__pct {
	top: 33.6%;
	font-size: 30px;
	font-size: 35.5cqw;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hp-onsale__label {
	top: 59.3%;
	font-size: 10.5px;
	font-size: 12.7cqw;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* A discount of 100% or more needs a notch less type to stay inside the red;
   the smaller figure is re-hung so it keeps the same baseline. */
.hp-onsale--wide .hp-onsale__pct {
	top: 38.5%;
	font-size: 23px;
	font-size: 27cqw;
}

/* Sale price with no workable regular price: the ribbon carries the word alone,
   centred on the space the two lines would have shared. */
.hp-onsale--plain .hp-onsale__label {
	top: 51.5%;
	font-size: 12px;
	font-size: 15.5cqw;
}

/* On the product page the ribbon hangs from the gallery frame, which is much
   wider than a card, so it keeps the share of the width the design gives it. */
.woocommerce div.product span.onsale,
.woocommerce .elementor-widget-woocommerce-product-images span.onsale,
.hp-single__gallery span.onsale {
	left: 8%;
	width: clamp(64px, 18%, 104px);
}
/* --- Favourites confirmation popup --- */
.yith-wcwl-popup,
.yith-wcwl-popup-content,
.woocommerce-message.yith-wcwl-message {
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 18px 40px rgba(6, 22, 44, 0.16);
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hp-navy);
}

.yith-wcwl-popup {
	padding: 18px 22px;
}

/* --- Cart and account: brand colours, readable controls --- */
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	min-height: 44px;
	padding: 12px 24px;
	border: 1px solid var(--hp-navy);
	border-radius: 6px;
	background: var(--hp-navy);
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
	background: var(--hp-navy-hover);
	border-color: var(--hp-navy-hover);
	color: #ffffff;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: #ffffff;
	border-color: var(--hp-border);
	color: var(--hp-text-soft);
	opacity: 1;
}

.woocommerce table.shop_table th {
	font-family: "Archivo", sans-serif;
	color: var(--hp-navy);
}

.woocommerce table.cart td.product-name a,
.woocommerce-cart-form .product-name a {
	color: var(--hp-navy);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce a.remove {
	color: var(--hp-red) !important;
}

.woocommerce a.remove:hover {
	background: var(--hp-red);
	color: #ffffff !important;
}

/* Account navigation: the tabs have to read as tabs, not as pale ghosts. */
.hp-account .woocommerce-MyAccount-navigation ul,
.hp-account .e-my-account-tab__tabs-list,
.hp-account ul.e-my-account-tab__tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 26px;
	padding: 0;
	border-bottom: 1px solid var(--hp-border);
	list-style: none;
}

.hp-account .woocommerce-MyAccount-navigation li a,
.hp-account .e-my-account-tab__tabs-list li a {
	display: inline-block;
	padding: 10px 16px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--hp-text);
	text-decoration: none;
}

.hp-account .woocommerce-MyAccount-navigation li a:hover,
.hp-account .e-my-account-tab__tabs-list li a:hover {
	color: var(--hp-navy);
}

.hp-account .woocommerce-MyAccount-navigation li.is-active a,
.hp-account .e-my-account-tab__tabs-list li.e-my-account-tab__tab--active a {
	border-bottom-color: var(--hp-navy);
	color: var(--hp-navy);
	font-weight: 600;
}

/* --- Checkout: three named blocks --- */
.hp-checkout__hidden,
.woocommerce-checkout .hp-checkout__hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The delivery block is always open, so its checkbox has nothing to toggle. */
.woocommerce-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox input,
.woocommerce-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox span:empty {
	display: none;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.hp-checkout__heading {
	margin: 34px 0 18px;
	font-family: "Archivo", sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: none;
	color: var(--hp-navy);
}

/* Only the opening block sits flush against the page title. Every other block
   heading keeps the rhythm set in the checkout layout section below. */
.woocommerce-checkout #customer_details > .woocommerce-billing-fields > h3:first-child {
	margin-top: 0;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	color: var(--hp-text);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--hp-border);
	border-radius: 6px;
	background: #ffffff;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	color: var(--hp-navy);
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 24px;
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	background: var(--hp-gray-surface);
}

.woocommerce-checkout #payment {
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var(--hp-border);
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 18px 0 0;
}

/* --- Checkout: one form column, sticky order summary ---
   Layout only. The card, heading, label and input styles above are the ones
   the site already had and are left untouched. --- */
.hp-checkout__layout {
	display: grid;
	/* Proportional, not a fixed aside: with `1fr` plus a fixed max the summary
	   kept its full width on mid-size screens and squeezed the form to ~284px.
	   1.3fr / 1fr lands on 624 / 480 in the 1140px container. */
	grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
	gap: 36px;
	align-items: stretch;
}

.hp-checkout__main,
.hp-checkout__aside {
	min-width: 0;
}

/* The aside has to stretch to the row height so the card inside it has
   somewhere to travel; `align-items: start` collapses it and the sticky then
   has nothing to stick against. */
.hp-checkout__aside-inner {
	position: sticky;
	/* Clears the pinned header (see 02.0), otherwise the summary parks behind
	   the nav bar. */
	top: calc(var(--hp-header-pinned-h) + 24px);
}

@media (max-width: 1100px) {
	/* Stacked, the reading order is: form, what you are paying for, how you pay.
	   `.hp-checkout__main` is dissolved so its two halves can be ordered around
	   the summary, which otherwise lands after the payment panel. */
	.hp-checkout__layout {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.hp-checkout__main {
		display: contents;
	}

	.hp-checkout__main > #customer_details {
		order: 1;
	}

	.hp-checkout__aside {
		order: 2;
	}

	.hp-checkout__main > .hp-checkout__payment {
		order: 3;
		margin-top: 0;
	}

	.hp-checkout__aside-inner {
		position: static;
	}
}

/* WooCommerce 11 dropped the `clear` argument on form fields, so the field
   that opens a row clears the floats of the row above it. */
.hp-checkout .form-row-first {
	clear: both;
}

/* The three blocks stack in one column, so every wrapper has to contain its
   own floated rows. */
.hp-checkout .woocommerce-billing-fields__field-wrapper::after,
.hp-checkout .woocommerce-shipping-fields__field-wrapper::after,
.hp-checkout .woocommerce-additional-fields__field-wrapper::after {
	content: "";
	display: table;
	clear: both;
}

/* Field rhythm. The theme gives a 14px label a 28px line box, which is most
   of the air between one row and the next. */
.hp-checkout.checkout .form-row {
	margin-bottom: 8px;
	padding-top: 0;
	padding-bottom: 0;
}

.hp-checkout.checkout .form-row > label {
	margin-bottom: 5px;
	line-height: 1.3;
}

/* Every block heading gets the same air above it. The opening block is the
   exception and is pinned flush to the page title further up this file. */
.hp-checkout #customer_details h3,
.hp-checkout .hp-checkout__heading,
.hp-checkout #ship-to-different-address,
.hp-checkout .hp-checkout__payment {
	margin-top: 40px;
}

/* "Datos de Envío" is printed inside the ship-to-different-address checkbox
   label, which carries its own smaller type. Let it read as the heading it is. */
.hp-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox,
.hp-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox span {
	display: block;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.hp-checkout #order_review_heading {
	margin-top: 0;
}

/* Air between the site header and the page title, and between the payment
   panel and the footer. */
.woocommerce-checkout .site-main > .page-header {
	padding-top: 56px;
}

.woocommerce-checkout .site-main > .page-content {
	padding-bottom: 72px;
}

/* The summary is the table on its own. The review-order wrapper picks up the
   card further up this file, which framed the table a second time and inset it
   25px from its own heading; the payment panel keeps that card via #order_review. */
.hp-checkout .hp-checkout__summary {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.hp-checkout .hp-checkout__summary .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
}

/* Product thumbnail in the summary. */
.hp-checkout .hp-order-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.hp-checkout .hp-order-item__thumb {
	flex: 0 0 56px;
	width: 56px;
}

.hp-checkout .hp-order-item__thumb img {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0;
	object-fit: contain;
}

.hp-checkout .hp-order-item__body {
	min-width: 0;
}

/* --- Header cart: the kit's button border does not belong on an icon --- */
.hp-header__cart .elementor-menu-cart__wrapper .elementor-menu-cart__toggle_button {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.hp-header__cart .elementor-menu-cart__wrapper .elementor-menu-cart__toggle_button:hover {
	background: transparent;
	color: var(--hp-navy);
}

.elementor-lightbox .dialog-widget-content,
.elementor-lightbox .dialog-lightbox-widget-content {
	background-color: rgba(6, 22, 44, 0.86);
}

/* No gallery anywhere on the site shows a caption over the photo. Elementor
   fills the header of the lightbox from the media library — the attachment's
   title and its caption or description, per the Lightbox panel of the kit — so
   an image whose file name was never cleaned up ends up announcing itself in
   large type. The counter and the controls of the slideshow stay; only the two
   text lines go, and the header keeps its place so the close and share buttons
   do not move. */
.elementor-lightbox .elementor-slideshow__title,
.elementor-lightbox .elementor-slideshow__description {
	display: none;
}

/* --- Favoritos --- */
.hp-wishlist .wishlist-title h2,
.hp-wishlist h2 {
	font-family: "Archivo Black", sans-serif;
	font-size: 34px;
	text-transform: uppercase;
	color: var(--hp-navy);
}

.woocommerce table.wishlist_table {
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15px;
}

.woocommerce table.wishlist_table thead th {
	padding: 14px 16px;
	background: var(--hp-gray-surface);
	border: 0;
	font-family: "Archivo", sans-serif;
	font-weight: 600;
	color: var(--hp-navy);
	text-transform: none;
}

.woocommerce table.wishlist_table tbody td {
	padding: 16px;
	border-top: 1px solid var(--hp-border);
	vertical-align: middle;
}

.woocommerce table.wishlist_table td.product-name a {
	color: var(--hp-navy);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.wishlist_table .product-thumbnail img {
	width: 84px;
	height: auto;
	border-radius: 6px;
}

.wishlist-empty {
	margin: 0;
	padding: 28px 16px;
	text-align: center;
	color: var(--hp-text);
}

/* The wishlist page has no builder layout of its own — YITH's form is a direct
   child of <body> — so the page grid has to come from here. */
body.woocommerce-wishlist > form.yith-wcwl-form,
body.woocommerce-wishlist > .woocommerce-notices-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
}

body.woocommerce-wishlist > form.yith-wcwl-form {
	padding-top: 46px;
	padding-bottom: 70px;
}

/* YITH prints the list name in `.wishlist-title-container`; that is the page's
   heading, so it gets the section-title treatment rather than a duplicate. */
body.woocommerce-wishlist .wishlist-title-container {
	margin-bottom: 24px;
}

body.woocommerce-wishlist .wishlist-title-container h2,
body.woocommerce-wishlist .wishlist-title-container .wishlist-title,
body.woocommerce-wishlist .wishlist-title-container > * {
	margin: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--hp-navy);
}

@media (max-width: 767px) {
	body.woocommerce-wishlist > form.yith-wcwl-form {
		padding: 32px 16px 48px;
	}

	body.woocommerce-wishlist .wishlist-title-container > * {
		font-size: 28px;
	}
}

/* --- My account: one card, two tabs, as in the design --- */
.hp-account__tabs {
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--hp-border);
}

.hp-account .hp-account__tabs button.hp-account__tab {
	padding: 0 0 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--hp-text);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.hp-account .hp-account__tabs button.hp-account__tab.is-active {
	border-bottom-color: var(--hp-navy);
	color: var(--hp-navy);
	font-weight: 600;
}

.hp-account .e-my-account-tab h2.hp-account__heading {
	margin: 0 0 20px;
	font-family: "Archivo", sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: none;
	color: var(--hp-navy);
}

/* Buttons inside the WooCommerce notices of My Account ("Explorar productos",
   "Confirmar correo"). WooCommerce prints them as <a class="button wc-forward">,
   and Elementor's My Account widget paints EVERY link of the tab with
   --links-normal-color (navy) through
   `.elementor-widget-woocommerce-my-account .e-my-account-tab:not(…) .woocommerce a`,
   which scores (0,4,1) and therefore beats our `.woocommerce a.button` (0,2,1):
   navy text on a navy button, unreadable. These selectors repeat Elementor's
   chain plus the `.button` class to win the cascade on specificity alone,
   without !important. If the text ever goes dark again, check whether Elementor
   changed that selector before touching anything else. */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.button,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-notices-wrapper a.button {
	background-color: var(--hp-navy);
	color: #ffffff;
}

/* El hover necesita su propio bloque, y no sólo por el texto: Elementor apaga el
   fondo del botón con `a.button:hover { background-color: initial }` (0,5,1), así
   que al pasar el mouse el botón se quedaba transparente y el texto blanco se
   perdía sobre el fondo claro del aviso. Añadir `:hover` sube el selector a
   (0,6,1) y le devuelve el relleno. El azul es `--hp-navy-hover`, el mismo hover
   que ya usan todos los demás botones de WooCommerce del tema. */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.button:focus,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-notices-wrapper a.button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-notices-wrapper a.button:focus {
	background-color: var(--hp-navy-hover);
	border-color: var(--hp-navy-hover);
	color: #ffffff;
}

/* The two columns become one stacked pane; the tabs decide which one shows. */
.hp-account .u-columns.col2-set {
	display: block;
	width: 100%;
}

.hp-account .u-columns .u-column1,
.hp-account .u-columns .u-column2,
.hp-account .u-columns .u-column3 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.hp-account form.login,
.hp-account form.register,
.hp-account form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	height: auto !important;
}

.hp-account .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.hp-account label {
	display: block;
	margin-bottom: 6px;
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	color: var(--hp-text);
}

.hp-account input[type="text"],
.hp-account input[type="email"],
.hp-account input[type="password"],
.hp-account input[type="tel"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--hp-border);
	border-radius: 6px;
	background: #ffffff;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	color: var(--hp-navy);
}

.hp-account input:focus {
	border-color: var(--hp-navy);
	outline: none;
}

/* "Recordarme" and the password link share one line, as in the design. */
.hp-account form.login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.hp-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
}

.hp-account .woocommerce-LostPassword {
	margin: 0;
	font-size: 14px;
}

.hp-account .woocommerce-LostPassword a {
	color: var(--hp-link);
	text-decoration: none;
}

.hp-account button.woocommerce-button,
.hp-account button[type="submit"],
.hp-account input[type="submit"] {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 6px;
	padding: 12px 20px;
	border: 1px solid var(--hp-navy);
	border-radius: 6px;
	background: var(--hp-navy);
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.hp-account button.woocommerce-button:hover,
.hp-account button[type="submit"]:hover {
	background: var(--hp-navy-hover);
	border-color: var(--hp-navy-hover);
}

/* The outline twin under the sign-in form that jumps to the register tab. */
.hp-account .u-column1 button.hp-account__switch {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 12px;
	padding: 12px 20px;
	border: 1px solid var(--hp-navy);
	border-radius: 6px;
	background: transparent;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--hp-navy);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-account .u-column1 button.hp-account__switch:hover {
	background: var(--hp-navy);
	color: #ffffff;
}

.hp-account .woocommerce-privacy-policy-text p,
.hp-account form.lost_reset_password > p:first-child {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hp-text);
}

/* --- Product page: the favourites prompt under the buy buttons --- */
.hp-single__fav .elementor-widget-container {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.hp-single__favline {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hp-text);
}

.hp-single__fav .yith-wcwl-add-to-wishlist {
	margin: 0;
}

.hp-single__fav .yith-wcwl-add-to-wishlist a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--hp-navy);
	text-decoration: none;
}

/* YITH renders its own dark pill; the design wants a quiet heart beside the
   sentence, so the button is stripped back to the glyph and its label. */
.hp-single__fav .yith-add-to-wishlist-button-block button.yith-wcwl-add-to-wishlist-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: "Archivo", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--hp-navy);
	cursor: pointer;
}

.hp-single__fav .yith-add-to-wishlist-button-block button.yith-wcwl-add-to-wishlist-button:hover {
	background: transparent;
	color: var(--hp-red);
}

.hp-single__fav .yith-wcwl-icon-svg__wrapper svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ==========================================================================
   09. Header alignment, cart, order confirmation and account recovery
   ========================================================================== */

/* --- 09.1 Header actions on one optical line --- */
/* The four controls come from four different Elementor widget types — an icon
   list, an icon, the menu cart and a button — and each brought its own
   line-height and box, which is what left the glyphs on four baselines. A
   shared row height plus centring inside every wrapper puts them back on one
   line without touching the widgets' own sizes. */
.hp-header__actions {
	align-items: center;
}

.hp-header__action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
}

.hp-header__action > .elementor-widget {
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.hp-header__user .elementor-icon-list-items,
.hp-header__user .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

/* The icon widget wraps its glyph in a block element whose line-height leaves
   6px of baseline below the icon, which pushed the heart 3px above its
   neighbours. */
.hp-header__wishlist .elementor-icon-wrapper {
	display: flex;
	align-items: center;
	line-height: 1;
}

.hp-header__user .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	line-height: 1;
}

/* The glyphs are drawn at 20, 22 and 26px. Giving each one the same box height
   aligns their centres instead of their top edges. */
.hp-header__user .elementor-icon-list-icon,
.hp-header__wishlist .elementor-icon,
.hp-header__cart .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	line-height: 1;
}

.hp-header__user .elementor-icon-list-icon svg,
.hp-header__user .elementor-icon-list-icon i,
.hp-header__wishlist .elementor-icon svg,
.hp-header__wishlist .elementor-icon i,
.hp-header__cart .elementor-button-icon svg,
.hp-header__cart .elementor-button-icon i {
	display: block;
}

.hp-header__cart .elementor-menu-cart__toggle,
.hp-header__cart .elementor-menu-cart__wrapper,
.hp-header__cart .elementor-menu-cart__toggle_button {
	display: flex;
	align-items: center;
	line-height: 1;
}

.hp-header__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	line-height: 1;
}

/* --- 09.2 Two buttons stay on one centred row --- */
/* Each button sits in its own child container, and a container with no width of
   its own falls back to `--width: 100%`, so the pair wrapped onto two lines.
   The same rule already fixes the Sucursales pair further up the file. */
.hp-ofertas__actions {
	flex-wrap: wrap;
	justify-content: center;
}

.hp-ofertas__actions .e-child {
	width: auto;
}

.hp-ofertas__actions .hp-ofertas__btn .elementor-button,
.hp-suc__actions .hp-suc__btn .elementor-button {
	min-height: 44px;
}

/* --- 09.3 Cart: order summary left, payment detail right --- */
/* The two panels, their borders, their titles and both buttons are set through
   the widget's own controls so Elementor's id-scoped CSS carries them. What is
   left here is everything those controls cannot reach. */
.hp-cart .e-cart__container {
	gap: 26px;
}

.hp-cart .e-cart-section {
	box-shadow: 0 2px 12px rgba(6, 22, 44, 0.04);
}

.hp-cart table.cart th,
.hp-cart table.cart td {
	border: 0;
}

/* A 40px thumbnail reads as a favicon; the cart should show the machine. */
.hp-cart table.cart td.product-thumbnail {
	width: 104px;
	padding-right: 18px;
}

.hp-cart table.cart td.product-thumbnail a {
	display: block;
}

.hp-cart table.cart td.product-thumbnail img {
	width: 82px;
	height: 82px;
	max-width: none;
	padding: 5px;
	border: 1px solid var(--hp-border);
	border-radius: 8px;
	background: #ffffff;
	object-fit: contain;
}

.hp-cart table.cart td.product-name {
	line-height: 1.45;
}

.hp-cart table.cart td.product-name a {
	font-weight: 600;
	text-decoration: none;
}

.hp-cart table.cart td.product-price,
.hp-cart table.cart td.product-subtotal {
	white-space: nowrap;
}

.hp-cart table.cart td.product-subtotal {
	font-weight: 700;
	color: var(--hp-navy);
}

.hp-cart table.cart td.product-remove {
	width: 30px;
}

.hp-cart table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

/* Elementor's `.input-text.qty` rule outranks the shared stepper block, so the
   cart field needs the widget class to end up identical to the product page:
   one 44px box with dividers, nothing rounded in the middle. */
.elementor-widget-woocommerce-cart .woocommerce .quantity input.input-text.qty,
.hp-cart .quantity input.input-text.qty {
	width: 56px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border-top: 0;
	border-bottom: 0;
	border-left: 1px solid var(--hp-border);
	border-right: 1px solid var(--hp-border);
	border-radius: 0;
	background: #ffffff;
	text-align: center;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	color: var(--hp-navy);
	box-shadow: none;
}

.elementor-widget-woocommerce-cart .woocommerce .quantity input.input-text.qty:focus,
.hp-cart .quantity input.input-text.qty:focus {
	border-left-color: var(--hp-navy);
	border-right-color: var(--hp-navy);
	outline: none;
}

.hp-cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--hp-border);
	border-radius: 6px;
	background: #ffffff;
	overflow: hidden;
}

/* The checkout call to action owns the foot of the payment panel. Elementor
   sizes that button from `--checkout-button-width` in a rule heavier than any
   class of ours, so the width is set through the variable it reads. */
.elementor-widget-woocommerce-cart.hp-cart {
	--checkout-button-width: 100%;
}

.elementor-widget-woocommerce-cart.hp-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
}

.hp-cart .wc-proceed-to-checkout {
	padding: 4px 0 0;
}

.hp-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	margin: 0;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}

.hp-cart .cart_totals table.shop_table th,
.hp-cart .cart_totals table.shop_table td {
	padding: 13px 0;
}

.hp-cart .cart_totals .order-total th,
.hp-cart .cart_totals .order-total td {
	font-size: 17px;
	font-weight: 700;
	color: var(--hp-navy);
}

.hp-cart .cart_totals .woocommerce-shipping-destination {
	font-size: 13px;
	color: var(--hp-text);
}

.hp-cart .cart-empty,
.hp-cart .return-to-shop {
	text-align: center;
}

.hp-cart .cart-empty {
	margin-bottom: 18px;
	font-size: 16px;
	color: var(--hp-navy);
}

@media (max-width: 1024px) {
	.hp-cart .e-cart__container {
		gap: 20px;
	}

	.hp-cart table.cart td.product-thumbnail {
		width: 84px;
		padding-right: 12px;
	}

	.hp-cart table.cart td.product-thumbnail img {
		width: 64px;
		height: 64px;
	}
}

@media (max-width: 767px) {
	.hp-cart table.cart td.product-thumbnail {
		display: none;
	}

	.hp-cart td.product-quantity .quantity {
		float: none;
	}
}

/* --- 09.4 Order confirmation --- */
.hp-thanks {
	max-width: 860px;
	margin: 0 auto;
}

.hp-thanks__card {
	position: relative;
	padding: 32px 34px 28px;
	border: 1px solid var(--hp-border);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 2px 12px rgba(6, 22, 44, 0.04);
	text-align: center;
}

.hp-thanks__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(56, 124, 77, 0.12);
	color: var(--hp-green);
}

.hp-thanks__check svg {
	display: block;
}

.hp-thanks .hp-thanks__title {
	margin: 0 0 10px;
	font-family: "Archivo Black", sans-serif;
	font-size: 28px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--hp-navy);
}

.hp-thanks .hp-thanks__lead {
	max-width: 520px;
	margin: 0 auto 8px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hp-text);
}

.hp-thanks .hp-thanks__lead::before {
	content: none;
}

.hp-thanks__mail {
	margin: 0 0 26px;
	font-size: 14px;
	color: var(--hp-text);
}

.hp-thanks__mail strong {
	color: var(--hp-navy);
}

/* Four facts about the order, in a row that becomes a stack on a phone. */
.hp-thanks ul.hp-thanks__meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--hp-border);
	list-style: none;
	text-align: left;
}

.hp-thanks ul.hp-thanks__meta li {
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-left: 1px solid var(--hp-border);
	font-size: 15px;
	line-height: 1.45;
	text-transform: none;
	color: var(--hp-navy);
}

.hp-thanks ul.hp-thanks__meta li:first-child {
	padding-left: 0;
	border-left: 0;
}

/* WooCommerce clears the float on this list with pseudo-elements, and in a grid
   container those become items of their own and push the four facts out of
   their columns. */
.hp-thanks ul.hp-thanks__meta::before,
.hp-thanks ul.hp-thanks__meta::after {
	display: none;
}

.hp-thanks ul.hp-thanks__meta li {
	float: none;
	margin-right: 0;
}

.hp-thanks__meta-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--hp-text-soft);
}

.hp-thanks ul.hp-thanks__meta li strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--hp-navy);
}

.hp-thanks__steps {
	margin: 26px 0 0;
	padding: 26px 30px;
	border: 1px solid var(--hp-border);
	border-radius: 12px;
	background: var(--hp-gray-surface);
}

.hp-thanks .hp-thanks__subtitle {
	margin: 0 0 18px;
	font-family: "Archivo", sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	color: var(--hp-navy);
}

.hp-thanks ol.hp-thanks__steps-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hp-step;
}

.hp-thanks ol.hp-thanks__steps-list li {
	margin: 0;
	padding: 0 0 0 40px;
	position: relative;
	counter-increment: hp-step;
	font-size: 14px;
	line-height: 1.55;
	color: var(--hp-text);
}

.hp-thanks ol.hp-thanks__steps-list li::before {
	content: counter(hp-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--hp-navy);
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
}

.hp-thanks ol.hp-thanks__steps-list li strong {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
	color: var(--hp-navy);
}

/* The order table, the addresses and any gateway instructions land here. */
.hp-thanks__details {
	margin-top: 26px;
}

.hp-thanks__details:empty {
	margin-top: 0;
}

.hp-thanks__details .woocommerce-order-details,
.hp-thanks__details .woocommerce-customer-details {
	padding: 26px 30px;
	margin: 0 0 20px;
	border: 1px solid var(--hp-border);
	border-radius: 12px;
	background: #ffffff;
}

.hp-thanks__details h2,
.hp-thanks__details h3 {
	margin: 0 0 18px;
	font-family: "Archivo", sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	color: var(--hp-navy);
}

.hp-thanks__details table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.hp-thanks__details table.shop_table th,
.hp-thanks__details table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--hp-border);
	text-align: left;
	vertical-align: middle;
}

.hp-thanks__details table.shop_table thead th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--hp-text-soft);
}

.hp-thanks__details table.shop_table td.product-total,
.hp-thanks__details table.shop_table th.product-total,
.hp-thanks__details table.shop_table tfoot td {
	text-align: right;
}

/* Totals read as label -> amount across the whole block: the label sits on the
   left edge and only the figure is pulled right. The 100% on the label cell is
   what spreads the row; without it both cells shrink to their text and the
   pair ends up huddled against the right margin. */
.hp-thanks__details table.shop_table tfoot th {
	width: 100%;
	text-align: left;
	font-weight: 600;
	color: var(--hp-navy);
}

/* The 100% above squeezes this column down to its longest word, which breaks
   a shipping label like "GRATIS a toda Guatemala" over three lines. The
   min-width buys it a line of its own and still lets a long order note wrap
   normally instead of overflowing, which is what `white-space: nowrap` would
   do here. */
.hp-thanks__details table.shop_table tfoot td {
	min-width: 210px;
	padding-left: 24px;
}

.hp-thanks__details table.shop_table tfoot tr:last-child th,
.hp-thanks__details table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--hp-navy);
}

.hp-thanks__details table.shop_table td.product-name a {
	font-weight: 600;
	color: var(--hp-navy);
	text-decoration: none;
}

.hp-thanks__details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}

/* WooCommerce clears the float on this wrapper with pseudo-elements. In a grid
   container they become items of their own, so ::before takes the first cell
   and knocks Facturación into the second column and Entrega onto a second row
   — the two blocks end up on a diagonal instead of side by side. Same trap as
   .hp-thanks__meta above. The template also drops the `col2-set` class; this
   stays for any other rule that adds a clearfix here. */
.hp-thanks__details .woocommerce-columns--addresses::before,
.hp-thanks__details .woocommerce-columns--addresses::after {
	display: none;
}

/* Both columns are as tall as the row, and the box inside each one takes the
   leftover height, so the two frames line up top and bottom however many lines
   each address runs to. */
.hp-thanks__details .woocommerce-columns--addresses .col-1,
.hp-thanks__details .woocommerce-columns--addresses .col-2 {
	display: flex;
	flex-direction: column;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.hp-thanks__details .woocommerce-columns--addresses address {
	flex: 1 0 auto;
	margin: 0;
}

.hp-thanks__details address {
	padding: 16px 18px;
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hp-text);
}

.hp-thanks__foot {
	margin-top: 8px;
	text-align: center;
}

.hp-thanks__help {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--hp-text);
}

.hp-thanks .hp-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.hp-thanks a.hp-thanks__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	min-width: 190px;
	padding: 12px 26px;
	border: 1px solid var(--hp-navy);
	border-radius: 6px;
	background: var(--hp-navy);
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-thanks a.hp-thanks__btn:hover {
	background: var(--hp-navy-hover);
	border-color: var(--hp-navy-hover);
	color: #ffffff;
}

.hp-thanks a.hp-thanks__btn--ghost {
	background: transparent;
	color: var(--hp-navy);
}

.hp-thanks a.hp-thanks__btn--ghost:hover {
	background: var(--hp-navy);
	color: #ffffff;
}

.hp-thanks__card--failed .hp-thanks__title {
	color: var(--hp-red);
}

.hp-thanks__card--failed .hp-thanks__lead {
	color: var(--hp-text);
}

/* Guests reach the confirmation through an email check; the form Woo prints
   there is the only thing on the page, so it gets the same card. */
.woocommerce-order .woocommerce-form-login,
form.woocommerce-verify-email {
	max-width: 520px;
	margin: 0 auto;
	padding: 28px 30px;
	border: 1px solid var(--hp-border);
	border-radius: 12px;
	background: #ffffff;
}

form.woocommerce-verify-email .form-row {
	margin: 0 0 16px;
	padding: 0;
}

form.woocommerce-verify-email label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--hp-text);
}

form.woocommerce-verify-email input.input-text {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--hp-border);
	border-radius: 6px;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	color: var(--hp-navy);
}

@media (max-width: 880px) {
	.hp-thanks ul.hp-thanks__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
	}

	.hp-thanks ul.hp-thanks__meta li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.hp-thanks ol.hp-thanks__steps-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.hp-thanks__details .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.hp-thanks__card {
		padding: 26px 20px 22px;
	}

	.hp-thanks .hp-thanks__title {
		font-size: 23px;
	}

	.hp-thanks ul.hp-thanks__meta {
		grid-template-columns: 1fr;
	}

	.hp-thanks ul.hp-thanks__meta li {
		padding-left: 0;
		border-left: 0;
	}

	.hp-thanks__steps {
		padding: 22px 18px;
	}

	.hp-thanks__details .woocommerce-order-details,
	.hp-thanks__details .woocommerce-customer-details {
		padding: 22px 18px;
	}

	.hp-thanks a.hp-thanks__btn {
		width: 100%;
	}
}

/* --- 09.5 Account card: the recovery pane --- */
.hp-account .u-columns .u-column3 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

/* "Recordarme" and the recovery link share one line above the button. */
.hp-account form.login .form-row.hp-account__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.hp-account form.login .form-row.hp-account__options a.hp-account__forgot,
.hp-account .woocommerce-LostPassword a.hp-account__forgot {
	color: var(--hp-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.hp-account .hp-account__back {
	margin: 16px 0 0;
	text-align: center;
}

.hp-account a.hp-account__to-login {
	font-size: 14px;
	font-weight: 500;
	color: var(--hp-navy);
	text-decoration: none;
	cursor: pointer;
}

.hp-account a.hp-account__to-login:hover {
	text-decoration: underline;
}

.hp-account form.lost_reset_password .form-row-first,
.hp-account form.lost_reset_password .form-row-wide {
	width: 100%;
	float: none;
}

/* WooCommerce redirects a sent recovery request to /mi-cuenta/lost-password/,
   which renders on its own without the tab strip. */
.hp-account .woocommerce-ResetPassword {
	max-width: 520px;
}

/* ==========================================================================
   10. Product grids on phones — two columns that stay inside the screen
   ========================================================================== */
/* Elementor lays every product loop out with `repeat(n, 1fr)`, and an `fr` track
   never shrinks below the min-content width of the item in it. The card's action
   row sets that floor: a 140px "Ver más" beside the 38px cart glyph with a 12px
   gap is 190px, so two columns asked for 190 + 26 + 190 = 406px on a 375px phone
   and the second card ran off the side of the container. `minmax(0, 1fr)` is what
   lets the tracks shrink to the width that is actually there; the rules under it
   rebuild the action row so the card's contents shrink with the track instead of
   overflowing it in turn.

   Only the phone range is touched. Desktop and tablet keep the column counts set
   on each widget in Elementor. */
@media (max-width: 767px) {

	.elementor-products-grid ul.products.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* A grid item's automatic minimum is its own min-content width, which would
	   push the card past its track even once the track itself can shrink. */
	ul.products li.product {
		min-width: 0;
	}

	/* `flex: 0 1 140px` keeps the button at its design width wherever there is
	   room for it and lets it give way only on the narrowest cards. `min-width`
	   has to go to 0 as well, or the 140px floor survives the shrink. */
	ul.products li.product .hp-card__more {
		flex: 0 1 140px;
		min-width: 0;
		padding-left: 12px;
		padding-right: 12px;
		white-space: nowrap;
	}

	/* The glyph is a fixed 38px square and is the one thing that must not give. */
	ul.products li.product .hp-card__cart.button,
	ul.products li.product a.hp-card__cart {
		flex: 0 0 auto;
	}

	/* Model codes like HYWD3010EF are a single unbreakable word and would stick
	   out of a card this narrow. */
	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product .hp-card__cat {
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   15. Archive: ordering select and category filter state
   ========================================================================== */

/* --- 15.1 "Orden predeterminado": la flecha con el mismo aire que el texto ---
   `reset.css` de hello-elementor da `padding: .5rem 1rem` al <select>, pero con
   `appearance: auto` el triangulo lo dibuja el navegador pegado al borde
   derecho: ignora el padding y cada navegador lo coloca donde quiere. Se apaga
   la apariencia nativa y la flecha la pinta el <form> que envuelve al select,
   con `right: 16px` —exactamente los mismos 16px que separan la palabra del
   borde izquierdo—.

   Va en el form y no en un `background-image` del propio <select> a proposito:
   un fondo sobre un <select> depende de como cada navegador trate el control
   (en Chrome 148 se descarta), mientras que un pseudo-elemento sobre el form
   es una caja normal y se comporta igual en todos.

   `padding-right: 42px` es el hueco que necesita el texto para no meterse
   debajo de la flecha (16 de aire + 12 de flecha + 14 de separacion). */
.woocommerce-ordering {
	position: relative;
}

.woocommerce-ordering::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	margin-top: -4px;
	width: 12px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23333333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 12px 8px no-repeat;
	pointer-events: none;
}

.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	cursor: pointer;
}
/* --- 15.2 El filtro de categorias marca donde estamos ---------------------
   Las reglas de hover y de `current-cat` del bloque 06 existian pero no se
   aplicaban nunca, por especificidad:

     base   .hp-filters .product-categories .children > li > a          (0,3,2)
     estado .hp-filters .product-categories .current-cat > a            (0,3,1)

   Empatan en clases y la base gana por llevar un tipo mas; con el `::before`
   pasaba lo mismo, (0,3,3) contra (0,3,1). Todas las reglas de abajo anteponen
   `.widget_product_categories` —la clase que envuelve el <ul> que imprime el
   widget— para subir un escalon de clase y ganar sin `!important`. */

/* Primer nivel: los rotulos en versalitas. Al pasar el mouse se tine la regla
   inferior; la categoria abierta la deja navy y de 3px (1px de borde + 2px de
   sombra interior, que no desplaza nada). */
.hp-filters .widget_product_categories .product-categories > li > a {
	transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-filters .widget_product_categories .product-categories > li > a:hover,
.hp-filters .widget_product_categories .product-categories > li > a:focus-visible {
	color: var(--hp-navy-hover);
	border-bottom-color: var(--hp-navy);
}

/* La madre de la categoria abierta: solo la regla, para que se vea la rama sin
   competir con la fila que de verdad esta seleccionada. */
.hp-filters .widget_product_categories .product-categories > li.current-cat-parent > a {
	color: var(--hp-navy);
	border-bottom-color: var(--hp-navy);
}

.hp-filters .widget_product_categories .product-categories > li.current-cat > a {
	color: var(--hp-navy);
	border-bottom-color: var(--hp-navy);
	box-shadow: inset 0 -2px 0 var(--hp-navy);
}

/* Subcategorias: la fila con casilla. Hover tine el texto y el borde de la
   casilla; la categoria abierta la deja marcada con el check. */
.hp-filters .widget_product_categories .product-categories .children > li > a:hover,
.hp-filters .widget_product_categories .product-categories .children > li > a:focus-visible {
	color: var(--hp-navy);
}

.hp-filters .widget_product_categories .product-categories .children > li > a:hover::before,
.hp-filters .widget_product_categories .product-categories .children > li > a:focus-visible::before {
	border-color: var(--hp-navy);
	background-color: #eef1f6;
}

.hp-filters .widget_product_categories .product-categories .children > li.current-cat > a {
	color: var(--hp-navy);
	font-weight: 600;
}

.hp-filters .widget_product_categories .product-categories .children > li.current-cat > a::before {
	/* El bloque 06 dejaba un anillo blanco de 3px por dentro; se apaga o taparia
	   el check. */
	box-shadow: none;
	border-color: var(--hp-navy);
	background: var(--hp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M1 4.2 4 7.2 10 1.2' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 11px 8px no-repeat;
}

/* --- 16. El sello «Best Quality» al lado del precio ------------------------
   El precio y el sello comparten la fila `.hp-single__pricerow` (contenedor
   flex de Elementor, `space-between`), dentro de la columna de compra.
   El widget de imagen sirve el .webp a su tamaño natural (360×301), así que
   el ancho se fija aquí y el alto lo pone el aspecto —nunca un alto propio,
   o el sello se deforma. */
.hp-single__pricerow > .hp-single__price {
	flex: 1 1 auto;
	min-width: 0;
}

.hp-single__pricerow > .hp-single__badge {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	line-height: 0;
}

/* (0,2,1) para ganarle a `.elementor-widget-image img` (0,1,1) sin depender
   del orden de las hojas. */
.hp-single__pricerow .hp-single__badge img {
	display: block;
	width: 128px;
	height: auto;
}

@media (max-width: 1024px) {
	.hp-single__pricerow .hp-single__badge img {
		width: 112px;
	}
}

@media (max-width: 767px) {
	.hp-single__pricerow .hp-single__badge img {
		width: 92px;
	}
}


/* --- 17. La etiqueta de descuento editable de los banners de la home -------
   Tres banners de la home llevan el descuento quemado en la foto. Encima de
   cada uno va ahora el mismo sello, pero con la cifra saliendo de un widget de
   encabezado que el cliente edita desde Elementor. Lo único editable es el
   número: el «%», el «OFF» y la cinta azul de «COMPRAR AHORA» son parte del
   dibujo, no marcado, así que no hay forma de tocarlos por error.

   El dibujo se sacó del editable —capa `Capa 1449` de `editable1home.psd`, con
   su máscara, 242 × 241 con transparencia— y se le borró el «10» rehaciendo el
   campo rojo con un ajuste polinómico del degradado que ya tenía. Es el sello
   que está quemado en las fotos, no el banderín de las fichas de producto
   (bloque 16): son dos etiquetas distintas.

   Todas las medidas de la cifra salen del propio dibujo y van en `cqw`, o sea
   contra el ancho de la etiqueta, así que un solo bloque sirve para los 96px
   de un teléfono y para los 242 del hero:

     caja del número   x 55…141 de 242  →  right 41.74 %
     altura de mayús.  91 de 242        →  font-size 53.72cqw
     línea base        y 179 de 241     →  top 29.38 %

   `top` sale de la línea base menos 0.8325em, que es donde Archivo apoya la
   suya con `line-height: 1` (medido, no estimado). Si cambias el cuerpo, hay
   que recalcular ese `top`. */
/* El `?v=` no es adorno: Kinsta sirve los estáticos con `max-age=315360000`
   —diez años— y con Cloudflare delante. Si alguna vez se redibuja el sello,
   **sube el número**: sobreescribir el archivo a secas deja la versión vieja en
   el navegador de quien ya la haya cargado. El `site.css` sí se refresca solo,
   porque va versionado con `filemtime()`. */
.hp-badge {
	position: absolute;
	z-index: 4;
	container-type: inline-size;
	aspect-ratio: 242 / 241;
	background: url("../img/badge-escudo.webp?v=2") no-repeat 50% 0 / 100% 100%;
}

/* Inerte en el sitio para que nunca se coma un deslizamiento del carrusel ni
   un clic en el banner de abajo. Dentro del editor sí recibe el ratón: con
   `pointer-events: none` el widget no se puede seleccionar en el lienzo y la
   cifra dejaría de ser editable, que es justo lo que se busca aquí. */
body:not(.elementor-editor-active) .hp-badge {
	pointer-events: none;
}

/* Con la salida DOM optimizada de Elementor este envoltorio no se imprime;
   la regla se queda por si algún día se apaga esa opción. */
.hp-badge > .elementor-widget-container {
	position: absolute;
	inset: 0;
}

/* La cifra. El selector lleva la clase del widget para ganarle a la tipografía
   de encabezados del kit, que si no impone cuerpo, peso y color.

   Archivo es mucho más ancha que la letra del sello —su cero mide 0.95 de su
   altura y el del dibujo 0.51—, así que se condensa con `scaleX`. Comprime el
   trazo vertical en la misma proporción, que es lo que deja los astiles con el
   grosor del original; anclada a la derecha para que el número crezca hacia la
   izquierda y no se separe nunca del «%».

   El degradado dorado está muestreado del dibujo. Va sobre una banda de
   0.74em colocada a 0.11em del borde superior, que es donde caen las
   mayúsculas dentro de la caja de línea; sin `background-size` el degradado se
   repartiría por toda la caja y la cifra saldría apagada. */
.elementor-widget-heading.hp-badge .elementor-heading-title {
	position: absolute;
	top: 29.38%;
	right: 41.74%;
	margin: 0;
	font-family: "Archivo", sans-serif;
	font-size: 130px;
	font-size: 53.72cqw;
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	white-space: nowrap;
	color: #fdc528;
	transform: scaleX(0.496);
	transform-origin: 100% 50%;
	background-image: linear-gradient(
		180deg,
		#fed129 0%,
		#fece2a 25%,
		#feda66 38%,
		#feea9c 50%,
		#fdd35e 57%,
		#fdb523 63%,
		#fdb01a 70%,
		#fdb01a 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 0.74em;
	background-position: 0 0.11em;
}

/* El bisel del original. Tiene que ser `filter`, no `text-shadow`: los fondos
   se pintan antes que el texto, así que con `background-clip: text` la sombra
   del texto queda ENCIMA del degradado y tiñe la cifra entera de marrón. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.elementor-widget-heading.hp-badge .elementor-heading-title {
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		filter: drop-shadow(0.013em 0.017em 0 rgba(92, 44, 4, 0.95));
	}
}

/* --- Hero ---------------------------------------------------------------
   El widget Slides no admite widgets hijos, así que la etiqueta es hermana
   suya. Las dos viven dentro de `.hp-hero-stage`, un contenedor sin relleno
   que envuelve sólo al carrusel: así la caja contra la que se posiciona la
   etiqueta es exactamente la del hero. Colgarla del `.e-con-inner` de la
   sección no sirve: ese lleva relleno propio —30px arriba, 18 en móvil— y la
   etiqueta quedaría ese tanto por encima de la foto. */
.hp-hero-stage {
	position: relative;
}

/* Sólo se ve mientras la slide de los generadores está activa: es la única
   con descuento. `elementor-repeater-item-20c8993` es el id de esa slide —si
   algún día se rehacen las slides, esto es lo único que hay que actualizar. */
.hp-hero-badge {
	top: 0;
	right: 3.9%;
	width: clamp(84px, 18.3%, 242px);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.hp-hero-section:has(.swiper-slide-active.elementor-repeater-item-20c8993) .hp-hero-badge {
	opacity: 1;
}

/* En el editor siempre visible: si no, con la primera slide en pantalla la
   etiqueta desaparece y no hay dónde hacer clic para cambiar el número. */
body.elementor-editor-active .hp-hero-badge {
	opacity: 1;
}

/* --- Generadores Hyundai ------------------------------------------------
   Una etiqueta por slide, sobre la foto y no sobre el panel azul que le monta
   encima la mitad de abajo. El 18.2 % y el 4.8 % son el tamaño y el sitio que
   ocupa hoy el sello quemado en `home-generadores-hyundai.jpg`: 242px sobre
   una foto de 1320. */
.hp-genblock__badge {
	top: 0;
	right: 2.1%;
	width: clamp(84px, 19%, 252px);
}

/* --- Tarjeta de promoción ------------------------------------------------
   Aquí la medida es la del PSD: `Capa 1449 copia` mide 162px sobre una tarjeta
   de 320 y arranca a 8px del borde izquierdo. Coincide con lo que hoy trae
   quemado la foto (152 sobre 316.5). El tope de 176px es el ancho natural del
   dibujo antes de empezar a ampliarlo. */
.hp-promo__badge {
	top: 0;
	left: 0.4%;
	width: clamp(96px, 52.1%, 242px);
}


/* ==========================================================================
   18. Ajustes de revisión — documento «AJUSTES HYUNDAI» (2026-09-09)
   Entre paréntesis, el punto del documento que resuelve cada apartado.

   Un dato que ahorra peleas de especificidad en todo el bloque: `site.css` se
   encola DESPUÉS del CSS por página de Elementor (`post-13.css`, `post-312.css`
   …), comprobado en el orden de los `<link>` del front. Así que aquí basta con
   IGUALAR el peso de una regla de Elementor para ganarle; no hace falta
   superarlo, y por eso varios selectores de abajo repiten su cadena tal cual.
   ========================================================================== */

/* --- 18.1 La franja gris de ventajas, al ancho de las tarjetas (punto 3) ---
   En el editable la caja gris y la fila de tarjetas de promoción comparten los
   dos bordes: 53…1449 la gris y 47…1449 las tarjetas, sobre un lienzo de 1500.
   En el sitio la gris es una sección a sangre con 20px de canal, así que a
   1440px iba de 20 a 1420 mientras las tarjetas iban de 60 a 1380: 40px de más
   por cada lado.

   Lo que sobresalía era sólo la placa. El contenido de dentro ya caía en
   60…1380, porque su `.e-con-inner` se topa en `--hp-shell` y el relleno de
   40px lo empuja justo hasta ahí. El `min()` topa la placa en ese mismo ancho
   de rejilla y deja intacto el canal de 20px en cuanto la ventana es más
   estrecha que la rejilla. El bloque 01 sigue mandando por debajo de 768px,
   donde su selector pesa (0,3,0). */
.hp-features-section {
	--width: min(100% - 40px, var(--hp-shell));
	/* Al estrecharse hay que recentrarla: su margen de 20px la dejaba pegada a
	   la izquierda. `auto` da lo mismo cuando el ancho vuelve a ser el de la
	   ventana menos el canal, asi que sirve para los dos casos. */
	margin-inline: auto;
}

/* --- 18.2 «Encuentra la herramienta perfecta», más cerca de su banner (4) ---
   Eran 48px entre la última línea del párrafo y la foto de los generadores: los
   34 de relleno inferior del contenedor más los 14.4 de margen del `<p>`. Se
   quedan en 24, todos del contenedor.

   Nombrar `.e-con` es lo que sube el selector a (0,3,0) y le gana a
   `.e-con > .e-con-inner` (0,2,0), que es de donde sale ese relleno. */
.e-con.hp-intro > .e-con-inner {
	padding-bottom: 24px;
}

.hp-intro__text p:last-child {
	margin-bottom: 0;
}

/* --- 18.3 Hover de las flechas de los carruseles (punto 5) ----------------
   Ninguna flecha del sitio cambiaba al pasar el ratón. El color de reposo lo
   pone Elementor por página con `.elementor-<id> .elementor-element.elementor-element-<id>
   .elementor-swiper-button svg { fill: … }`, que pesa (0,4,1). Repetir aquí ese
   mismo peso basta, porque este archivo se carga después.

   El rojo es el de los paginadores, que es lo que se pidió. Sólo sirve para las
   flechas que hoy son blancas —las del panel azul de generadores—; las que ya
   son rojas viran a navy, porque rojo sobre rojo no sería ningún hover. Los
   selectores específicos van después del genérico y ganan por orden. */
.elementor-element.elementor-widget .elementor-swiper-button {
	transition: color 0.2s ease;
}

.elementor-element.elementor-widget .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover,
.elementor-element.elementor-widget .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible {
	color: var(--hp-red);
}

.elementor-element.elementor-widget .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover svg,
.elementor-element.elementor-widget .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible svg {
	fill: var(--hp-red);
	transition: fill 0.2s ease;
}

.elementor-element.hp-catalog__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover,
.elementor-element.hp-catalog__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible,
.elementor-element.hp-stories__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover,
.elementor-element.hp-stories__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible,
.elementor-element.hp-descubre__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover,
.elementor-element.hp-descubre__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible {
	color: var(--hp-navy);
}

.elementor-element.hp-catalog__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover svg,
.elementor-element.hp-catalog__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible svg,
.elementor-element.hp-stories__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover svg,
.elementor-element.hp-stories__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible svg,
.elementor-element.hp-descubre__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:hover svg,
.elementor-element.hp-descubre__carousel .elementor-swiper-button.elementor-swiper-button.elementor-swiper-button:focus-visible svg {
	fill: var(--hp-navy);
}

/* --- 18.4 Los logos crecen al pasar el ratón (punto 7) --------------------
   El `transform` va en la imagen y no en el enlace: el del header vive dentro
   de una celda con `overflow` propio y escalar el enlace le movía la caja a los
   iconos vecinos. */
.hp-header__logo img,
.hp-footer__logo img {
	transition: transform 0.25s ease;
}

.hp-header__logo a:hover img,
.hp-header__logo a:focus-visible img,
.hp-footer__logo a:hover img,
.hp-footer__logo a:focus-visible img {
	transform: scale(1.06);
}

/* --- 18.5 Aire alrededor del boton «Regresar» del pie (punto 9) -----------
   Su contenedor de Elementor ya trae 10px arriba y abajo. Estos 5 los completan
   a 15 por lado, que es lo que lo deja opticamente centrado en su franja.

   Van como margen del propio boton para no depender del id del contenedor, que
   cambiaria si algun dia se rehace el pie. */
.sw-back-button {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* --- 18.6 El acordeón de «Servicios autorizados» (punto 10) ---------------
   El editable dibuja cada cabecera como una pastilla con el título a la
   izquierda y, pegado al borde derecho, un círculo blanco de 13px con una punta
   de flecha dentro. La cerrada es azul `--hp-navy`; la abierta, verde
   `--hp-accordion-green`. En el sitio la flecha era el `caret` suelto de
   Elementor, a la izquierda, y las dos cabeceras salían del mismo azul.

   Lo del color no era culpa del bloque 03c: Elementor imprime
   `.elementor-312 .elementor-element.elementor-element-8de7975 .elementor-tab-title
   { background-color: … }`, que pesa (0,3,0) y le ganaba a
   `.hp-stores__accordion .elementor-tab-title` (0,2,0). Nombrando también el
   widget y el ítem se llega a (0,4,0) y el verde del activo por fin sale.

   La flecha sí gira al abrir, aunque el editable la dibuje hacia abajo en las
   dos: Elementor ya trae dos iconos y los intercambia solo. Dejarla fija
   parecería un fallo. */
.elementor-widget-accordion.hp-stores__accordion .elementor-accordion-item .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--hp-navy);
}

.elementor-widget-accordion.hp-stores__accordion .elementor-accordion-item .elementor-tab-title.elementor-active {
	background: var(--hp-accordion-green);
}

/* `float` fuera y el icono al final de la fila. El selector repite la cadena de
   Elementor —`.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left`,
   (0,4,0)— porque la clase del marcado sigue diciendo «left»: el lado es un
   ajuste del widget y cambiarlo allí obligaría a tocar la plantilla. */
.hp-stores__accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left,
.hp-stores__accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right {
	order: 2;
	float: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* El editable lo dibuja a 13px sobre una barra de 48. A ese tamaño real la
	   punta queda en 4px y no se lee, asi que el circulo va a 24 — el mismo
	   dibujo, al tamaño al que se nota. */
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 50%;
	background: #ffffff;
	text-align: center;
}

.hp-stores__accordion .elementor-tab-title .elementor-accordion-title {
	flex: 1 1 auto;
	min-width: 0;
}

.hp-stores__accordion .elementor-tab-title .elementor-accordion-icon span {
	display: inline-flex;
	line-height: 0;
}

/* La cadena larga no es capricho: el ajuste «color del icono» del widget se
   imprime como `.elementor-312 .elementor-element.elementor-element-8de7975
   .elementor-tab-title .elementor-accordion-icon svg`, que pesa (0,5,1) — y en
   el activo, con `.elementor-active` de por medio, (0,6,1). Con el filete
   blanco del circulo detras, perder aqui deja la punta blanca sobre blanco:
   invisible. Igualar el peso basta, porque `site.css` se carga despues. */
.elementor-element.elementor-widget-accordion.hp-stores__accordion .elementor-tab-title .elementor-accordion-icon svg {
	width: 12px;
	height: 12px;
	fill: var(--hp-navy);
}

.elementor-element.elementor-widget-accordion.hp-stores__accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
	fill: var(--hp-accordion-green);
}

/* --- 18.7 El carrito de las tarjetas, más grande (punto 11) ---------------
   El SVG lleva `width`/`height` de 22 en el atributo, así que el tamaño se fija
   desde aquí. La caja crece con él para que el área de clic siga holgada. */
ul.products li.product a.hp-card__cart {
	width: 44px;
	height: 44px;
}

ul.products li.product a.hp-card__cart .hp-card__cart-icon {
	width: 28px;
	height: 28px;
}

/* --- 18.8 La vista previa del blog (puntos 13 y 14) -----------------------
   Dos widgets, no uno: `.hp-blog__list` es el listado de `/blog/` y
   `.hp-post__more` el bloque de sugerencias del pie de cada entrada. Los dos
   son `posts.classic` con la piel `thumbnail-left`, asi que comparten reglas.
   Fuera la fecha, y «Leer más» pasa de texto suelto a botón con el mismo
   dibujo que el «Ver más» de las tarjetas de producto: 8px de radio, filete
   navy, y el relleno invertido al pasar el ratón.

   El contenido se centra contra la foto: la tarjeta ya es una fila flex, y con
   `align-items: center` la columna de texto deja de estirarse a la altura de la
   imagen y se apoya en su medio. */
.hp-blog__list .elementor-post__meta-data,
.hp-post__more .elementor-post__meta-data {
	display: none;
}

.hp-blog__list .elementor-post,
.hp-post__more .elementor-post {
	align-items: center;
}

.hp-blog__list .elementor-post__text,
.hp-post__more .elementor-post__text {
	align-self: center;
}

.hp-blog__list a.elementor-post__read-more,
.hp-post__more a.elementor-post__read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	margin-top: 6px;
	padding: 6px 22px;
	border: 1px solid var(--hp-navy);
	border-radius: 8px;
	font-family: "Archivo", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--hp-navy);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-blog__list a.elementor-post__read-more:hover,
.hp-blog__list a.elementor-post__read-more:focus-visible,
.hp-post__more a.elementor-post__read-more:hover,
.hp-post__more a.elementor-post__read-more:focus-visible {
	background: var(--hp-navy);
	color: #ffffff;
}

/* El color del texto necesita mas peso SOLO en las sugerencias: la plantilla de
   la entrada pinta ese enlace de rojo con
   `.elementor-2289 .elementor-element.elementor-element-0fad51c .elementor-post__read-more`,
   que puntua (0,4,0). En el listado de `/blog/` no existe esa regla, por eso
   alli basta con el selector corto de arriba. */
.elementor-element.elementor-widget-posts.hp-post__more a.elementor-post__read-more {
	color: var(--hp-navy);
}

.elementor-element.elementor-widget-posts.hp-post__more a.elementor-post__read-more:hover,
.elementor-element.elementor-widget-posts.hp-post__more a.elementor-post__read-more:focus-visible {
	color: #ffffff;
}

/* --- 18.9 El asterisco de los campos obligatorios (punto 15) --------------
   Elementor marca el grupo con `.elementor-field-required` pero no imprime
   ninguna señal si el ajuste «Required Mark» del formulario está apagado, que
   es como están todos.

   Hay que pintarlo en las dos etiquetas: la nativa —que en estos formularios va
   oculta a 1px, sólo para lectores de pantalla— y la flotante que dibuja
   `shortcodes.css`, que es la que de verdad ve el visitante. */
.elementor-field-group.elementor-field-required > label.elementor-field-label::after,
.elementor-field-group.elementor-field-required .sw-floating-label::after {
	content: " *";
	color: var(--hp-red);
}

/* --- 18.10 El campo de telefono con prefijo de pais (punto 6) -------------
   «Telephone field for Elementor Forms» envuelve el input en su propio `.iti` y
   le añade la bandera. Eso deja al campo fuera del patron de etiqueta flotante
   del sitio, asi que va **sin rotulo**: la bandera y el prefijo ya dicen lo que
   es, y una etiqueta encima rompia la animacion de los campos vecinos.

   Lo unico que se le iguala es la caja: 50px de alto como los demas campos, con
   el texto centrado en vertical y despejando los 52px de la bandera. El peso
   (0,4,1) es para ganarle al `padding` de `.elementor-field-textual.elementor-size-md`
   y al `padding-left` de intlTelInput. */
.hp-form .elementor-field-type-telephone .iti input.iti__tel-input {
	min-height: 50px;
	padding: 6px 16px 6px 52px;
}

/* La bandera se estira a los 50px del campo para no quedar colgando arriba. */
.hp-form .elementor-field-type-telephone .iti__flag-container {
	height: 100%;
}

/* ==========================================================================
   19. El banner de categorías y el catálogo, en una pantalla (2026-09-10)

   Petición: que el banner de categorías y el catálogo de productos quepan en
   una pantalla de portátil de 14". Como «una pantalla» no mide igual en cada
   equipo, las alturas no se fijan en píxeles: se calculan contra lo que queda
   de ventana bajo el encabezado.

   `--hp-header-pinned-h` ya existe en el bloque 02.0 y `stickyHeader()` lo
   mantiene al día, así que da la medida exacta de lo que sigue fijo en
   pantalla al bajar, en vez de un número quemado.

   Cada `clamp()` lleva un mínimo —por debajo no cabe el contenido— y un
   máximo, que es la altura de escritorio: en un monitor alto los bloques
   dejan de crecer y lo que sobra queda de aire.

   Todo va de 1025px para arriba. En tableta y móvil los bloques se apilan y
   no hay «una sola pantalla» que respetar; sus alturas siguen saliendo de
   Elementor tal cual.

   OJO: el hero y sus cuatro tarjetas estuvieron aquí, encogidos contra un
   `--hp-fold` propio que descontaba el encabezado entero. Se revirtió el
   2026-09-10 a petición del cliente —los quiere a su tamaño de siempre— y de
   aquello sólo sobreviven, en el bloque 20, los arreglos que no eran de
   tamaño. Si alguna vez se vuelve a intentar, está contado en la § 24 del
   README.
   ========================================================================== */

@media (min-width: 1025px) {
	:root {
		--hp-fold-below: calc(100vh - var(--hp-header-pinned-h));
	}

	/* --- 19.1 Banner de categorías --- */
	/* El alto de la franja. Los 300 que se restan son lo que comparte pantalla
	   con ella: la sección «Encuentra la herramienta perfecta» (198), el
	   relleno de abajo (40) y los 93px con que el panel azul sobresale por
	   debajo de la foto —su alto menos el solape de 118—.

	   El rango 380–560 es más alto que el de la primera versión (280–400)
	   porque a esa altura el `cover` recortaba más de medio alto de unas fotos
	   que son de 2:1. Lo que cuesta y por qué se aceptó, en §20.6. */
	.hp-genblock {
		--padding-block-end: 40px;
	}

	.hp-genblock .elementor-element.hp-genblock__media {
		--min-height: clamp(380px, calc(var(--hp-fold-below) - 300px), 560px);
	}

	.hp-genblock .elementor-element.hp-genblock__panel {
		--padding-block-start: 24px;
		--padding-block-end: 24px;
	}

	/* --- 19.2 Catálogo de productos --- */
	/* 168 = título (48) + su margen (30) + los 18px que el swiper reserva
	   bajo las tarjetas + el relleno de la sección (48) + 24 de margen. */
	.hp-catalog {
		--padding-block-end: 48px;
	}

	.hp-catalog .elementor-element.hp-catcard {
		--min-height: clamp(340px, calc(var(--hp-fold-below) - 168px), 430px);
	}
}

/* --- 19.3 El nombre de la categoría, centrado en su columna ---------------
   El panel azul es una fila: el nombre ocupa el 44% izquierdo y la
   descripción con el botón el 52% derecho. Alineado a la izquierda, un
   nombre corto como «Hogar» dejaba un vacío enorme hasta la descripción;
   centrado, el aire queda repartido a los dos lados. Vale para las ocho
   slides: todas comparten la misma estructura y ninguna trae alineación
   propia, así que la regla de clase basta.

   Su corte es 768px, no el 1025 del resto del bloque 19: el panel sigue
   siendo una fila en tableta y el problema es el mismo ahí. Por debajo de
   768 se apila, el nombre queda encima de su texto y tiene que volver a la
   izquierda para alinearse con él. */
@media (min-width: 768px) {
	.hp-genblock__title {
		text-align: center;
	}
}

/* ==========================================================================
   20. Las tarjetas de promoción de la home (2026-09-10)

   Lo que queda de la ronda de ajustes sobre las cuatro tarjetas que van bajo
   el hero, una vez revertido su tamaño: sólo los arreglos de orden y de
   tipografía, que el cliente sí quiso conservar. El alto, el relleno de la
   sección, la etiqueta del 10 % OFF y el encuadre de las dos fotos de
   producto vuelven a salir de Elementor tal cual.
   ========================================================================== */

/* --- 20.1 El aire entre el rótulo y el botón --------------------------
   El botón iba pegado al rótulo en unas tarjetas y suelto en otras —la
   tercera lo separaba con un `margin-top` propio de 20px—. Aquí los separa
   el `gap` del contenedor, igual en las cuatro.

   La alineación vertical **no** se toca: sale de cada tarjeta en Elementor y
   así la quiere el cliente —la primera con el texto y el botón abajo, las
   otras tres arriba—. Hubo una versión que las alineaba las cuatro abajo
   para que los botones cayeran en la misma línea; se revirtió el 2026-09-10.

   Tampoco se toca el alto del contenedor interior: en la primera y la cuarta
   es el que lleva la foto del producto, y encogerlo encogería la foto. */
@media (min-width: 768px) {
	.hp-promos .hp-promo .hp-genblock__btn {
		margin: 0;
	}

	.hp-promos .hp-promo .hp-promo__content {
		gap: 12px;
	}
}

/* --- 20.2 Los rótulos son enlaces ----------------------------------------
   El kit pinta todo `a` a 16px en Archivo (la misma trampa del teléfono en
   «Servicios y garantías», bloque 03c). Por eso un widget puesto a 30px salía
   a 16, y en Archivo en vez de Archivo Black —que era por qué en la cuarta
   tarjeta «DESCUENTO» se veía de otro cuerpo y otra letra que «50% DE»,
   siendo el mismo párrafo. Devolver la herencia es lo único que hace falta
   para que se vea la tipografía que ya tenían puesta en el widget.

   Fuera de todo media query: el fallo es igual en tableta y móvil, donde los
   mismos widgets tienen sus propios tamaños y también salían a 16. */
.hp-promos .hp-promo .hp-promo__title a,
.hp-promos .hp-promo .hp-promo__sub a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* --- 20.3 La cifra del sello, cuando el widget lleva enlace ---------------
   Misma trampa, otra víctima. El sello de la primera tarjeta tiene el widget
   enlazado a `/ofertas`, así que su «10» sale dentro de un `<a>` y el kit le
   ponía su propio peso: 500 en vez de los 900 del bloque 17. El del hero no
   lleva enlace y sí salía a 900, y de ahí que los dos «10» no casaran
   aunque midan lo mismo.

   El `color: inherit` no es de adorno: el degradado dorado se pinta en el
   contenedor con `background-clip: text`, y para que asome, el texto de dentro
   tiene que quedarse transparente como su padre. */
.hp-badge .elementor-heading-title a {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

/* --- 20.4 Los tres botones de arriba, en la misma línea -------------------
   La segunda y la tercera tarjeta llevan rótulo y botón; la cuarta mete un
   subtítulo entre los dos, así que su botón caía 39px más abajo. Las dos sin
   subtítulo reservan ese hueco en su rótulo y los tres quedan a la misma
   altura.

   Los 81px no son el alto de nada: son lo que mide el rótulo de la cuarta
   (42) más el `gap` (12) más su subtítulo (26.4), redondeado. Sirven igual a
   1440 —donde los rótulos largos caen en tres líneas, 63px, y el mínimo los
   sube a 81— y a 995, donde caen en dos. Si algún día un rótulo pasa de tres
   líneas, este número se queda corto y hay que volver a medir.

   El `:not(:has())` es lo que hace que la regla se apague sola: en cuanto una
   tarjeta gane un subtítulo, deja de reservar el hueco y se alinea por su
   cuenta. La primera no entra: no tiene rótulo, y además va abajo. */
@media (min-width: 768px) {
	.hp-promos .hp-promo__content:not(:has(.hp-promo__sub)) .hp-promo__title {
		min-height: 81px;
	}
}

/* --- 20.5 Red de seguridad para el enlace anidado -------------------------
   El arreglo de la tercera tarjeta vive en `_elementor_data` (§22.1 del
   README), y eso lo pisa cualquiera que abra la home en Elementor con una
   copia vieja cargada y le dé a guardar: ya pasó una vez. Cuando vuelve el
   enlace en el contenedor, el parser deja tres `<a>` vacíos y el rótulo se
   monta sobre el botón.

   Esto no arregla el DOM —eso hay que hacerlo en la base de datos— pero lo
   deja presentable mientras tanto: se esconden los `<a>` vacíos que quedan
   sueltos y la tarjeta reparte su propio aire entre el rótulo y el botón.
   Con el DOM sano no cambia nada: el contenedor bueno sí tiene widgets
   dentro, y las tarjetas sólo tienen un hijo en el flujo. */
.hp-promos .hp-promo > .hp-promo__content:not(:has(.elementor-widget)),
.hp-promos .hp-promo__title .hp-promo__content {
	display: none;
}

.hp-promos .elementor-element.hp-promo {
	gap: 12px;
}

/* --- 20.6 El banner de categorías en tableta -----------------------------
   Las fotos de categoría son casi todas de 2:1 (1774×887, 2560×1280…) y dos
   de 1.74:1. En una franja de 1320 × 318 el `cover` se comía más de la mitad
   del alto, y en tableta —955 × 320— un tercio. Por eso se veían cortadas.

   Sin recorte del todo haría falta una franja de 660px en escritorio, que es
   media pantalla. El acuerdo es 380–560 en escritorio (§19.1) y 440 fijos en
   tableta, donde la foto de 2:1 pide 477: ahí queda prácticamente entera.

   El precio es que el banner ya no siempre entra en una pantalla: a 900px de
   alto de ventana se pasa unos 30px, y a 760 unos 70. Se aceptó a cambio de
   que las fotos no se corten. Si algún día pesa más lo primero, el número a
   bajar es el tope de 560. */
@media (min-width: 768px) and (max-width: 1024px) {
	.hp-genblock .elementor-element.hp-genblock__media {
		--min-height: 440px;
	}
}