/*
Theme Name: Atticstorage Child
Theme URI: https://atticstorage.co.uk
Template: hello-elementor
Author: We Are PLEH
Author URI: https://wearepleh.com
Description: Child theme for Atticstorage (Rafter Group UK) based on Hello Elementor.
Version: 1.7.0
Updated: 2026-09-18
*/

/* =============================================================
   §-1 RALEWAY VARIABLE — @font-face (canónico Rafter Group)
   ============================================================= */
/* Declarado aquí (style.css externo) y también inline en wp_head desde
   functions.php (defense-in-depth: si un minificador filtrara el <style> inline,
   el CSS externo garantiza la familia). AMBOS apuntan al MISMO woff2 subset del
   child theme (url relativa al style.css) → el browser DEDUPLICA a una sola
   fuente. Antes servía el TTF de 309KB desde uploads y duplicaba la carga con el
   woff2 inline (147KB de transfer extra). Sesión perf 2026-07-06. */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/raleway-variable.woff2') format('woff2');
}

/* =============================================================
   ATTICSTORAGE CHILD THEME
   =============================================================
   Brand palette (Elementor Global Colors target):
     --e-global-color-primary:        #009999  (Teal)
     --e-global-color-secondary:      #14385F  (Blueberry)
     --e-global-color-text:           #424548  (Gray)
     --e-global-color-accent:         #FF7F32  (Orange / hover de botones)
     --e-global-color-d0d111e:        #FFFFFF  (Pure White — fondo de sección)
     --e-global-color-fcf3ee0:        #EAF6F5  (Soft Teal — fondo de sección alterno)
     --attic-light-teal:              #A0D1CA  (Light Teal — secondary accent)

   Typography: Raleway Variable (local TTF, mismo enqueue que Storemore).

   Sections:
     §1  Animations (mobile-only — pattern de Storemore)
     §2  Hover/Transform mobile fix
     §3  Typography responsive
     §4  Store Locator (Leaflet map + UK postcode search)
     §5  Opening Hours dropdown (Google Maps style)
     §6  Ubicacion gallery (CSS scroll-snap nativo)
     §7  A11y Swiper pagination (touch target)
   ============================================================= */

/* §1 Animations — disable on mobile only */
@media (max-width: 767px) {
	.elementor-element[data-settings*='_animation'],
	.elementor-element[data-settings*='animation'] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* §2 Hover/Transform mobile fix */
@media (max-width: 767px) {
	.elementor-element-edit-mode .elementor-widget,
	.elementor-element[class*='e-transform'] {
		transform: none !important;
		transition: none !important;
	}
}

/* §3 Typography responsive */
@media (max-width: 767px) {
	body.single-location h1.elementor-heading-title,
	body.post-type-archive-location h1.elementor-heading-title {
		font-size: 2rem;
		line-height: 1.2;
	}
}

/* =============================================================
   §4 STORE LOCATOR (Google Maps) — pin del nearest + sticky del archive
   El locator de Leaflet y su buscador se retiraron el 2026-09-10: el mapa lo
   monta el snippet 8798 sobre Google Maps desde el 2026-06-27 y las clases
   .atticstorage-locator__* llevaban muertas desde entonces (0 referencias en
   el repo y 0 en posts/postmeta/options de staging y prod).
   ============================================================= */

/* why isolation: confina los z-index internos del mapa en un stacking context
   propio, evitando que pisen al header sticky de Elementor Pro (z-index default
   99). El div lo inserta el widget HTML y lo consume el snippet 8798. */
#atticstorage-map {
	isolation: isolate;
}

/* Pin del nearest destacado en el mapa (40x60 vs 32x48 estándar, TEAL desde la
   ronda 2026-08 — petición cliente "closest marker in blue"; a juego con el
   highlight teal de la card .attic-nearest). Animación pulse sutil. */
@keyframes attic-marker-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
.attic-marker-pin--nearest {
	animation: attic-marker-pulse 1.8s ease-in-out infinite;
	filter: drop-shadow(0 4px 8px rgba(0, 153, 153, 0.5));
	transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: reduce) {
	.attic-marker-pin--nearest { animation: none; }
}

/* Sticky CSS nativo del mapa en el archive /location/ (widget 3c41199d, template 8566).
   why: el Sticky de Elementor Pro (jquery.sticky) CLONA el widget como placeholder al
   activarse → duplicaba el mapa Leaflet entero con markers en estado congelado (pins
   "nearest" stale tras cada búsqueda). position:sticky nativo no clona nada.
   Mismo offset (200px) que tenía el sticky de Elementor.
   SOLO desktop (≥1025px): en tablet/mobile las columnas apilan a 1-col y un mapa
   sticky flota sobre las cards (bug reportado por Attic 2026-07-03) → static. */
@media (min-width: 1025px) {
	.elementor-widget.attic-archive-map-sticky {
		position: sticky;
		top: 200px;
	}
	/* Mapa del archive en desktop: mismo ancho, proporción VERTICAL (lado largo = el alto)
	   — pedido Attic 2026-07-03. El inline min-height:500px del widget queda por debajo
	   del alto que da el aspect-ratio, así que no interfiere. Solo desktop. */
	.attic-archive-map-sticky #atticstorage-map {
		aspect-ratio: 3 / 4;
		height: auto;
	}
}
/* El section del archive (7401bc14, template 8566) lleva overflow:hidden (anti-bleed
   horizontal) — pero overflow:hidden convierte al ancestro en scroll-container y MATA
   cualquier position:sticky interior (el mapa nunca pineaba; antes lo disimulaba el
   Sticky jquery de Elementor con position:fixed). overflow-x:clip mantiene el clipping
   horizontal SIN crear scroll-container → el sticky CSS del mapa funciona. Elementor no
   expone overflow:clip como setting → CSS justificado (regla wordpress-elementor). */
.elementor-8566 .elementor-element.elementor-element-7401bc14 {
	overflow-x: clip;
	overflow-y: visible;
}

/* =============================================================
   §5 OPENING HOURS dropdown
   ============================================================= */

.atticstorage-hours-dropdown {
	display: inline-block;
	position: relative;
	min-width: 240px;
}

.atticstorage-hours-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--e-global-color-text, #424548);
	width: 100%;
	text-align: left;
}

/* Hover/focus de marca — vence el #CC3366 rosa del reset Hello Elementor sobre
   <button>. Azul blueberry (NO naranja): el naranja se reserva para los CTAs clave.
   !important justificado para pisar el reset.css del kit. */
.atticstorage-hours-toggle:hover,
.atticstorage-hours-toggle:focus {
	background: var(--attic-blueberry, #14385F) !important;
	color: #fff !important;
	border-color: var(--attic-blueberry, #14385F) !important;
}

/* En hover (toggle naranja) el badge pasa a fondo blanco y conserva su color de
   marca (is-open/is-closed) → pill legible sobre el naranja. */
.atticstorage-hours-toggle:hover .atticstorage-hours-status,
.atticstorage-hours-toggle:focus .atticstorage-hours-status {
	background: #fff !important;
}

.atticstorage-hours-toggle[aria-expanded='true'] .atticstorage-hours-chevron {
	transform: rotate(180deg);
}

/* El label se encoge (ellipsis) si no cabe junto al badge+chevron, para que el badge
   NUNCA empuje el chevron fuera. Solo trunca en columnas estrechas (desktop, 3 en fila);
   en mobile los dropdowns van full-width (§5 abajo) → no trunca. badge y chevron no se encogen. */
.atticstorage-hours-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atticstorage-hours-chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

/* Open/Closed como BADGE (pill). margin-left:auto agrupa status+chevron a la
   derecha (el chevron ya NO lleva margin-left:auto → evita el doble auto que
   descentraba el "Open"). align-items:center del toggle lo centra vertical.
   font-size/line-height/padding pequeños → el badge (~20px) ≤ la línea del label
   (~21px), así NO modifica la altura del toggle. */
.atticstorage-hours-status {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	line-height: 1.4;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.atticstorage-hours-status:empty {
	display: none;
}

.atticstorage-hours-status.is-open {
	color: var(--attic-teal, #099);
	background: rgba(0, 153, 153, 0.12);
}

.atticstorage-hours-status.is-closed {
	color: var(--attic-orange, #FF7F32);
	background: rgba(255, 127, 50, 0.14);
}

.atticstorage-hours-table {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.25rem;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	padding: 0.5rem;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.atticstorage-hours-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.9rem;
}

.atticstorage-hours-row.is-today {
	background: var(--e-global-color-d0d111e, #EAF6F5);
	font-weight: 600;
}

/* Los 3 dropdowns (Staffed / Access / Holiday) EN LÍNEA, repartiéndose
   el 100% del ancho del contenedor (cada uno ~1/3, menos el gap).
   attic-locsingle-hours es un container flex row+wrap: flex:1 1 0 en cada
   widget hijo → reparto equitativo; el dropdown a block full-width (su
   tabla absolute hereda el ancho). En móvil se apilan (labels largas). */
.attic-locsingle-hours > .elementor-element {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	max-width: none !important;
}

.attic-locsingle-hours .atticstorage-hours-dropdown {
	display: block;
	width: 100%;
	min-width: 0;
}

@media (max-width: 767px) {
	.attic-locsingle-hours > .elementor-element {
		flex-basis: 100% !important;
	}
}

/* =============================================================
   §6 UBICACION GALLERY (scroll-snap)
   ============================================================= */

.ubicacion-gallery {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 1rem;
	padding: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ubicacion-gallery::-webkit-scrollbar {
	display: none;
}

.ubicacion-gallery__slide {
	flex: 0 0 calc(100% / 1.2);
	scroll-snap-align: start;
	border-radius: 2rem; /* igual que storemore.es */
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.ubicacion-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.ubicacion-gallery__slide {
		flex: 0 0 calc(100% / 2.2);
	}
}

@media (min-width: 1200px) {
	.ubicacion-gallery__slide {
		flex: 0 0 calc(100% / 3.2);
	}
}

/* =============================================================
   §7 A11y — Swiper pagination touch target
   ============================================================= */

.swiper-pagination-bullet {
	position: relative;
	width: 24px !important;
	height: 24px !important;
	background: transparent !important;
	opacity: 1 !important;
	margin: 0 4px !important;
}

.swiper-pagination-bullet::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background: var(--e-global-color-text, #424548);
	border-radius: 50%;
	transition: background 0.2s ease;
}

.swiper-pagination-bullet-active::before {
	background: var(--e-global-color-primary, #009999);
}

/* ============================================
   §8 Header — burger + logo color states (Plan DD, 2026-05-26)
   ============================================
   Mapeo real del template 8572 (_elementor_data inspection):

     #header-bar (330ea856)
       .header-internal (4b42199d)
         container 52cb488d (header visible)
           icon .menu-icon (366785e0)  — burger SVG inline (paths sin fill)
           icon .logo-icon (d5bbd78)   — logo SVG inline TRICOLOR con <style>
                                         interno .cls-1{#099} .cls-2{#14385f}
                                         .cls-3{#0d3c61} (bicolor canon design.md)
         widget/off-canvas (733c9a0e)  — panel oculto
           ... containers ...
             widget/image (52192060)   — <img src="logo-attic-storage_main.svg">
                                         logo del off-canvas (visible solo al abrir)

   El único <img> del header vive DENTRO del off-canvas. NO hay image
   widget visible en el header normal. El logo visible es siempre el
   SVG inline `.logo-icon`. Por eso esta sección NO toca el image
   widget — su <img> muestra colores nativos del SVG file en sandbox
   sin intervención CSS (teal #099 + blueberry #14385f + #0d3c61).

   Modelo 2 estados — alineado con Lockall §1 (canon cross-site):

   DEFAULT (todas las páginas, todos los estados):
     - .menu-icon (burger) → primary teal via fill !important
     - .logo-icon (SVG inline) → respeta <style> interno (bicolor nativo)
     - image widget del off-canvas → intocado (colores nativos)

   OVERRIDE (body.home + no-sticky, sobre hero video oscuro):
     - .menu-icon → blanco
     - .logo-icon .cls-1/2/3 → blanco !important (vence <style> interno)
     - image widget del off-canvas → intocado (off-canvas no es visible
       en estado top sobre hero; al abrirlo el panel tiene su propio
       background y el logo debe mostrar colores nativos).

   Zero hardcode: --e-global-color-primary con fallback hex.

   Nota futura: si Karina añade un image widget visible al header
   normal, NO recibirá el filter blanco automáticamente. El patrón
   canon del header visible es SVG inline (`.logo-icon`).
*/

/* --- Transitions globales --- */
#header-bar .menu-icon svg,
#header-bar .menu-icon svg path,
#header-bar .menu-icon svg polygon,
#header-bar .logo-icon svg .cls-1,
#header-bar .logo-icon svg .cls-2,
#header-bar .logo-icon svg .cls-3 {
	transition: fill 0.3s ease, color 0.3s ease;
}

/* --- DEFAULT: burger teal + logo SVG inline bicolor nativo --- */
/* why !important burger: Elementor inyecta fill al SVG vía CSS per-widget
   con specificity (0,2,0) basada en .elementor-element-XYZ; sin !important
   nuestro selector pierde tras re-save del template. */
#header-bar .menu-icon .elementor-icon,
#header-bar .menu-icon .elementor-icon i,
#header-bar .menu-icon .elementor-icon svg,
#header-bar .menu-icon .elementor-icon svg path,
#header-bar .menu-icon .elementor-icon svg polygon {
	fill: var(--e-global-color-primary, #099) !important;
	color: var(--e-global-color-primary, #099) !important;
}
/* .logo-icon en DEFAULT: NO override. El <style> interno del SVG inline
   define .cls-1{fill:#099} .cls-2{fill:#14385f} .cls-3{fill:#0d3c61} y eso
   produce el bicolor canon que debe verse. */

/* --- OVERRIDE: home + no-sticky → blanco (sobre hero video) --- */
body.home #header-bar:not(.elementor-sticky--effects) .menu-icon .elementor-icon,
body.home #header-bar:not(.elementor-sticky--effects) .menu-icon .elementor-icon i,
body.home #header-bar:not(.elementor-sticky--effects) .menu-icon .elementor-icon svg,
body.home #header-bar:not(.elementor-sticky--effects) .menu-icon .elementor-icon svg path,
body.home #header-bar:not(.elementor-sticky--effects) .menu-icon .elementor-icon svg polygon {
	fill: #ffffff !important;
	color: #ffffff !important;
}
/* why !important: el <style> interno del SVG inline tiene specificity
   (0,1,0) y NO se puede vencer sin !important. */
body.home #header-bar:not(.elementor-sticky--effects) .logo-icon svg .cls-1,
body.home #header-bar:not(.elementor-sticky--effects) .logo-icon svg .cls-2,
body.home #header-bar:not(.elementor-sticky--effects) .logo-icon svg .cls-3 {
	fill: #ffffff !important;
}

/* ============================================
   §0 Brand tokens (canónicos — ver design.md)
   ============================================ */

:root {
	--attic-teal: #099;
	--attic-blueberry: #14385F;
	--attic-orange: #FF7F32;
	--attic-gray: #424548;
	--attic-cream: #EAF6F5; /* teal suave (refresh global del cream cálido #FCF3EE, 2026-06-21). Nombre de token legacy conservado. */
	--attic-light-teal: #A0D1CA;
	--attic-shadow: 0 20px 40px -15px rgba(20, 56, 95, 0.08);
	--attic-shadow-hover: 0 30px 50px -20px rgba(20, 56, 95, 0.18);
	--attic-radius-card: 12px;
	--attic-radius-hero: 24px;
	--attic-radius-pill: 999px;
	--attic-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	--attic-container-max: 1280px;
	--attic-font: 'Raleway', sans-serif;
}

/* Desactivar las ligaduras comunes (ff/fi/fl): en Raleway la "ff" doble se ve
   rara. no-common-ligatures las apaga site-wide sin afectar el resto. */
body {
	font-variant-ligatures: no-common-ligatures;
}

/* ============================================
   §11 Promo bar header — solo lo no-expressable por Elementor (Plan J)
   ============================================
   Todo el styling estructural (bg, padding, flex layout, gap, typography,
   text color, border-bottom del CTA, hover color) vive en el Style panel
   de cada widget Elementor (container + text-editor + button). Editor del
   cliente queda con Style panel POBLADO en cada widget. Solo el color
   naranja del <strong> permanece aquí porque text-editor widget no
   permite per-tag color. Ver: design.md, rules/wordpress-elementor.md,
   feedback_elementor_settings_first.md. */

.attic-promo-bar strong {
	color: var(--attic-orange);
}

.attic-promo-bar .attic-promo-cta .elementor-button {
	transition: var(--attic-transition);
}

@media (prefers-reduced-motion: reduce) {
	.attic-promo-bar .attic-promo-cta .elementor-button {
		transition: none;
	}
}

/* Defensa contra re-save desde Elementor admin (Plan M+ 2026-05-15):
   El _elementor_data del header puede perder z_index, _element_id y el style
   inline del <p> cuando alguien edita y guarda desde el editor admin (Elementor
   reescribe el JSON desde el state del browser). Estas reglas CSS sobreviven
   a cualquier re-save y garantizan el comportamiento sin depender de los
   settings widget. Causa raíz documentada: header-bar 330ea856 tiene
   --margin-bottom:-117px legacy (template Lockall) que arrastra el hero 117px
   hacia arriba, cubriendo la promo bar sin z-index defensivo. */

.attic-promo-bar {
	position: relative;
	z-index: 100;
}

/* why !important: Elementor genera CSS per-widget text-editor con specificity
   (0,3,0) `.elementor-XX .elementor-element.elementor-element-YY p` que aplica
   margin-bottom default. Sin !important nuestros selectors de clase pierden. */
.attic-promo-bar p,
.attic-tcs p {
	margin: 0 !important;
}

/* Mobile single-line (Plan BB 2026-05-26): ocultar fragmento opcional
   "on selected units" para que la promo bar quepa en una sola línea
   junto al CTA y "T&Cs apply". El <span class="attic-promo-extra">
   envuelve el fragmento desde el setting `editor` del widget
   text-editor 5259dac8 (template 8572). */
@media (max-width: 767px) {
	.attic-promo-bar-text .attic-promo-extra {
		display: none;
	}
}

/* ============================================
   §12 Other locations — Big Yellow style row (sec 11)
   ============================================ */

.atticstorage-locations-grid {
	max-width: var(--attic-container-max);
	margin: 0 auto;
	padding: 48px 24px;
}

.atticstorage-locations-grid h2 {
	color: var(--attic-blueberry);
	margin-bottom: 8px;
}

.atticstorage-locations-grid .locations-sub {
	color: var(--attic-gray);
	margin-bottom: 32px;
}

.atticstorage-locations-grid .locations-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 768px) {
	.atticstorage-locations-grid .locations-list {
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
	}
}

.atticstorage-locations-grid .location-row {
	border-bottom: 1px solid var(--attic-light-teal);
	transition: var(--attic-transition);
}

.atticstorage-locations-grid .location-row:last-child {
	border-bottom: none;
}

.atticstorage-locations-grid .location-row a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 8px;
	color: var(--attic-blueberry);
	text-decoration: none;
	font-weight: 600;
	transition: var(--attic-transition);
}

.atticstorage-locations-grid .location-row a:hover {
	background: var(--attic-cream);
	transform: translateX(4px);
	padding-left: 16px;
	padding-right: 16px;
}

.atticstorage-locations-grid .location-row .location-postcode {
	color: var(--attic-gray);
	font-weight: 400;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.atticstorage-locations-grid .location-row .location-arrow {
	display: inline-block;
	margin-left: auto;
	color: var(--attic-teal);
	font-weight: 700;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.atticstorage-locations-grid .location-row a:hover .location-arrow {
	transform: translateX(8px);
	color: var(--attic-orange);
}

.atticstorage-locations-grid .location-row a:focus-visible {
	outline: 2px solid var(--attic-orange);
	outline-offset: -2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.atticstorage-locations-grid .location-row,
	.atticstorage-locations-grid .location-row a,
	.atticstorage-locations-grid .location-row .location-arrow {
		transition: none;
	}
	.atticstorage-locations-grid .location-row a:hover {
		transform: none;
	}
}


/* =============================================================
   13. Footer nav-menu stager animation
   -------------------------------------------------------------
   Fade-in con delay por item. NO expressable como setting Elementor
   (Elementor permite entrance animation a nivel widget pero no
   per-child stagger con nth-child). CSS sin !important — los color
   y typography vienen de settings nativos del widget.

   La animación es opt-in via class `.menu-stager` aplicada al widget
   nav-menu desde Style → Advanced → CSS Classes. Quitar la clase
   desactiva la animación sin tocar código.
   ============================================================= */

@keyframes attic-menu-fade-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.menu-stager .elementor-nav-menu--main .menu-item {
	opacity: 0;
	animation: attic-menu-fade-in 0.4s ease forwards;
	/* Stagger SIN CAP: el delay se deriva del índice del item, así recorre TODOS
	   los items del menú independientemente de cuántos sean. Antes la lista
	   capaba en :nth-child(10) → en el nav locations (12 items) los items 11 y 12
	   quedaban sin delay (default 0s) y aparecían ANTES que el resto.
	   sibling-index() = CSS Values 5 (progressive enhancement); fallback abajo. */
	animation-delay: calc(0.42s + 0.08s * sibling-index());
}

/* Fallback para navegadores sin sibling-index() (Safari <26.2, Firefox, etc.):
   stagger explícito hasta 16 + catch-all (n+17) para que NINGÚN item dispare en
   delay 0 y aparezca antes que el resto. Cubre los menús reales (máx 12 items)
   con margen; los navegadores con sibling-index() ignoran este bloque. */
@supports not (animation-delay: calc(1s * sibling-index())) {
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(1)  { animation-delay: 0.50s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(2)  { animation-delay: 0.58s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(3)  { animation-delay: 0.66s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(4)  { animation-delay: 0.74s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(5)  { animation-delay: 0.82s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(6)  { animation-delay: 0.90s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(7)  { animation-delay: 0.98s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(8)  { animation-delay: 1.06s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(9)  { animation-delay: 1.14s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(10) { animation-delay: 1.22s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(11) { animation-delay: 1.30s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(12) { animation-delay: 1.38s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(13) { animation-delay: 1.46s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(14) { animation-delay: 1.54s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(15) { animation-delay: 1.62s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(16) { animation-delay: 1.70s; }
	.menu-stager .elementor-nav-menu--main .menu-item:nth-child(n+17) { animation-delay: 1.78s; }
}

@media (prefers-reduced-motion: reduce) {
	.menu-stager .elementor-nav-menu--main .menu-item {
		opacity: 1;
		animation: none;
	}
}


/* =============================================================
   13a. Footer — Accordion responsive behavior
   =============================================================
   Port verbatim de lockall-child §6 (canon validado desde 2026-04-16).
   why !important (whole section): Elementor Nested Accordion es un
   <details>/<summary> que togglea visibilidad via [open] + JS inline
   escribiendo display/height. Forzar "siempre abierto en desktop"
   exige vencer (a) defaults del browser para <details>, (b) inline
   styles de Elementor, (c) widget-level CSS con specificity id-based.
   Mobile single-open behavior lo gestiona el snippet 8713 (body_end).
   Clase opt-in `.acordeon-footer` aplicada al widget nested-accordion
   en Style → Advanced → CSS Classes (footer 8574, 4 widgets).
   ============================================================= */

/* Desktop: acordeones siempre abiertos, no interactivos */
@media (min-width: 1025px) {
	.acordeon-footer .e-n-accordion-item-title-icon {
		display: none !important;
	}

	.acordeon-footer .e-n-accordion-item-title {
		cursor: default !important;
		pointer-events: none !important;
	}

	.acordeon-footer .e-n-accordion-item {
		pointer-events: none !important;
	}

	.acordeon-footer .e-n-accordion-item > div {
		pointer-events: auto !important;
	}

	.acordeon-footer .e-n-accordion-item a {
		pointer-events: auto !important;
	}

	/* Border base + transition.
	   why !important: Elementor Nested Accordion ships widget-level CSS con
	   selector id-based (.elementor-PAGE .elementor-element-ID > .e-n-accordion
	   > .e-n-accordion-item > .e-n-accordion-item-title { border-color }) cuya
	   specificity (0,5,0) no se vence con la clase semántica sin !important. */
	.acordeon-footer .e-n-accordion-item-title {
		border-color: var(--e-global-color-primary) !important;
		transition: border-color 0.3s ease !important;
	}

	.acordeon-footer .e-n-accordion-item:hover .e-n-accordion-item-title {
		border-color: var(--e-global-color-accent) !important;
	}

	/* Forzar contenido siempre visible — !important porque Elementor escribe
	   display/height/visibility inline cuando el accordion togglea. */
	.acordeon-footer .e-n-accordion-item .e-con {
		display: block !important;
		height: auto !important;
		overflow: visible !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.acordeon-footer .e-n-accordion-item[open] > .e-con,
	.acordeon-footer .e-n-accordion-item:not([open]) > .e-con {
		display: block !important;
		height: auto !important;
	}
}

/* Mobile: interactivo, single-open por snippet 8713.
   Specificity: .acordeon-footer + dos clases = (0,3,0), sin !important. */
@media (max-width: 1024px) {
	.acordeon-footer .e-n-accordion-item-title {
		cursor: pointer;
	}
}


/* =============================================================
   13b. Footer — Site-logo widget: hide empty container anchor
   =============================================================
   why: el container 3275e7d ancestro del widget theme-site-logo
   (footer 8574) tiene `html_tag: "a"` + dynamic link site-url. El
   widget theme-site-logo también renderiza su propio <a> con el
   <img>. Resultado: dos <a> hermanos dentro del widget, donde el
   primero (`<a class="e-con-full e-flex e-con e-child">`) es vacío
   y rompe el flex del footer. CSS defensive: ocultar el ancla vacía
   sin tocar BD (root cause real: cambiar html_tag del container a
   "div", pendiente decisión vs riesgo).
   Specificity: .elementor-widget-theme-site-logo + a + class = (0,3,1).
   ============================================================= */

.elementor-widget-theme-site-logo > a.e-con-full {
	display: none;
}


/* =============================================================
   14. RankMath breadcrumbs typography
   -------------------------------------------------------------
   El shortcode [rank_math_breadcrumb] emite
   <nav class="rank-math-breadcrumb"><p><a>Home</a>
   <span class="separator">–</span><span class="last">…</span></p></nav>.

   Dos fuerzas descuadraban el breadcrumb:
   1) El <a> (link) empata en especificidad (0-1-1) con la regla del
      kit global de Elementor `.elementor-kit-NNNN a { font-size:1rem }`
      (post-<kit>.css), que carga DESPUÉS → el kit ganaba la cascada y
      "Home" se renderizaba a 16px.
   2) El widget que aloja el breadcrumb hereda font-size distinto según
      la página (en /location/ tiene un Global Typography de Elementor
      ~11px; en /contact-us/ hereda 16px) → tamaño base inconsistente
      entre páginas.

   Canon: el breadcrumb mide lo mismo en TODAS las páginas. Fijamos el
   tamaño en el propio breadcrumb (no lo heredamos) y vencemos al kit en
   el <a> con especificidad 0-2-1 (clase duplicada), sin !important.
   0.694rem ≈ 11.1px (root 16px) = el tamaño del breadcrumb de /location/.
   ============================================================= */

.rank-math-breadcrumb,
.rank-math-breadcrumb p,
.rank-math-breadcrumb span,
.rank-math-breadcrumb.rank-math-breadcrumb a {
	font-size: 0.694rem;
	line-height: 1.5;
}


/* =============================================================
   15. HubSpot form reset (form id 5345878f-4438-46a1-b0c5-843ffe8be058)
   -------------------------------------------------------------
   HubSpot inyecta su propio CSS con !important. Para layout limpio
   (Raleway, full width, sin padding default, inputs con border canon)
   tenemos que ganar la cascada → !important justificado.

   NOTA: el form_id está hardcoded. Si HubSpot regenera el form,
   actualizar el selector.
   ============================================================= */

/* ========================================
   HUBSPOT FORM - STOREMORE STYLE
   Selector: .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058
   ======================================== */

/* Contenedor del formulario */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 {
  background: transparent !important;
  padding: 0 !important;
  font-family: 'Raleway', sans-serif !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Reset de fieldsets */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Layout de columnas - 2 columnas */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .form-columns-2,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 fieldset.form-columns-2 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 30px !important;
  width: 100% !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .form-columns-2 > .hs-form-field,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 fieldset.form-columns-2 > .hs-form-field {
  flex: 1 !important;
  width: calc(50% - 15px) !important;
  min-width: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .form-columns-1 {
  width: 100% !important;
}

/* Campos individuales */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-field {
  width: 100% !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .input {
  width: 100% !important;
  border: none !important;
}

/* Ocultar labels */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 label:not(.hs-form-booleancheckbox-display) {
  display: none !important;
}

/* ========================================
   INPUTS Y TEXTAREA
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-input,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="text"],
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="email"],
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="tel"],
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 select,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #202020 !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font-size: 14px !important;
  font-family: 'Raleway', sans-serif !important;
  color: #202020 !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Focus state */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-input:focus,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="text"]:focus,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="email"]:focus,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="tel"]:focus,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 select:focus,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 textarea:focus {
  border-bottom-color: #6452E4 !important;
  border-bottom-width: 2px !important;
  box-shadow: none !important;
}

/* Placeholders */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-input::placeholder,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input::placeholder,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 textarea::placeholder {
  color: #202020 !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-family: 'Raleway', sans-serif !important;
  
}

/* Select dropdown */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 select {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23202020' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  padding-right: 25px !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 select option {
  background-color: #fff !important;
  color: #202020 !important;
  font-family: 'Raleway', sans-serif !important;
}

/* Textarea */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 textarea {
  min-height: 48px !important;
  resize: vertical !important;
  width: 100% !important;
}

/* ========================================
   CAMPO TELÉFONO INTERNACIONAL
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-phone,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs_phone,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-phonenumber {
  border: none !important;
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-phone .input,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs_phone .input,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-phonenumber .input {
  border: none !important;
  border-bottom: none !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-end !important;
  width: 100% !important;
  border: none !important;
  border-bottom: none !important;
  flex-wrap: nowrap !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone select {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 100px !important;
  max-width: 140px !important;
  border: none !important;
  border-bottom: 1px solid #202020 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone input[type="tel"] {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  border-bottom: 1px solid #202020 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone input[type="hidden"],
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone input[name="phone"] {
  display: none !important;
  border: none !important;
}

/* ========================================
   ALINEAR EMAIL Y TELÉFONO - Margin negativo
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-phone,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs_phone,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-phonenumber {
  margin-top: -8px !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone {
  margin-top: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone select,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-fieldtype-intl-phone input[type="tel"] {
  margin-top: 0 !important;
}

/* ========================================
   CHECKBOX Y CONSENTIMIENTO
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .legal-consent-container {
  margin-top: 12px !important;
  width: 100% !important;
  padding: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-dependent-field,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs_LEGAL_CONSENT\.subscription_type_389747429 {
  padding: 0 !important;
  margin: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .legal-consent-container .inputs-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Ocultar textos originales */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox-display span p,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox-display .hs-form-required,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .legal-consent-container .hs-richtext {
  display: none !important;
}

/* Contenedor del checkbox */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-family: 'Raleway', sans-serif !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Custom checkbox */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="checkbox"],
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 3px !important;
  background-color: #202020 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Checkbox checked */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="checkbox"]:checked,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-input[type="checkbox"]:checked {
  background-color: #6452E4 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="checkbox"]:checked::after,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
}

/* Texto legal */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox-display span {
  display: inline !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 12px !important;
  color: #202020 !important;
}

/* Link */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .legal-consent-container a,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox-display a {
  color: #6452E4 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .legal-consent-container a:hover,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-booleancheckbox-display a:hover {
  opacity: 0.8 !important;
}

/* ========================================
   OCULTAR RECAPTCHA (sin romper funcionalidad)
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-recaptcha,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .grecaptcha-badge,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .g-recaptcha,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 [class*="recaptcha"] {
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   MENSAJES DE ERROR
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-error-msgs {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-error-msgs li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-error-msgs li::before,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-error-msgs li::marker {
  display: none !important;
  content: none !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-error-msg {
  color: #c0392b !important;
  font-size: 11px !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 400 !important;
}

/* ========================================
   BOTÓN DE ENVÍO
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-submit {
  margin-top: 20px !important;
  text-align: right !important;
  width: 100% !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-submit .actions {
  text-align: right !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button.primary,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button.primary.large,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="submit"],
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .actions input[type="submit"] {
  background: transparent !important;
  border: 1px solid #202020 !important;
  border-radius: 1rem !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  color: #202020 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: lowercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Hover del botón */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button:hover,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button.primary:hover,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button.primary.large:hover,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="submit"]:hover,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .actions input[type="submit"]:hover {
  background-color: #6452E4 !important;
  border-color: #6452E4 !important;
  color: #fff !important;
}

/* ========================================
   OCULTAR ELEMENTOS INNECESARIOS
   ======================================== */
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-field-desc,
.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .checkbox-desc {
  display: none !important;
}

.hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-form-required {
  color: #202020 !important;
  margin-left: 2px !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .form-columns-2,
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 fieldset.form-columns-2 {
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .form-columns-2 > .hs-form-field,
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 fieldset.form-columns-2 > .hs-form-field {
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-submit {
    text-align: center !important;
  }
  
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 .hs-button,
  .hsForm_5345878f-4438-46a1-b0c5-843ffe8be058 input[type="submit"] {
    width: 100% !important;
  }
}


/* =============================================================
   16. Header sticky transition + icon hover compound
   -------------------------------------------------------------
   Elementor Pro Sticky widget NO expone styling-tras-sticky como
   setting nativo (no hay "background on sticky" en Style panel).
   Los efectos visuales que aparecen al hacer sticky (background
   pill, box-shadow, border-radius) son no-expressable.

   El icon hover compound (per-path scaleX via :nth-child) tampoco
   tiene equivalente settings — Elementor no expone styling por path
   SVG individual.

   El button text hide en mobile evita ocultar el widget entero
   (que tiene icon + text); solo se oculta el text.
   ============================================================= */

#header-bar .header-internal {
	border: 1px solid rgba(0, 0, 0, 0);
}

#header-bar.elementor-sticky--effects .header-internal {
	background: var(--e-global-color-d0d111e); /* #EAF6F5 cream */
	border-radius: 0.75rem;
	box-shadow: 0 0 13px 1px rgba(0, 0, 0, 0.2);
}

#header-bar .header-internal,
#header-bar.elementor-sticky--effects .header-internal,
#header-bar .header-internal .sticky-menu-items ul li a,
#header-bar.elementor-sticky--effects .header-internal .header-logo {
	transition: all 0.3s ease-in-out;
}

/* Icon hover compound — per-SVG-path scaleX animation */
.attic-header-icon svg path {
	transition: transform 0.25s ease;
	transform-origin: left center;
}
.attic-header-icon:hover svg path:nth-child(1) { transform: scaleX(0.6); }
.attic-header-icon:hover svg path:nth-child(2) { transform: scaleX(1.15); }
.attic-header-icon:hover svg path:nth-child(3) { transform: scaleX(2); }

/* Call button: hide text on mobile (icon-only en <1024) — Plan BB 2026-05-26.
   Selector canon `.call-button` (clase aplicada al widget id 7423bedb en el
   template 8572 vía Style → CSS Classes). El selector previo .attic-header-button
   no existía en el widget real — patrón fantasma equivalente al de
   .attic-header-icon (hover compound), heredado de Lockall sin verificar. */
.call-button .elementor-button-text {
	display: flex;
}
@media (max-width: 1024px) {
	.call-button .elementor-button-text {
		display: none;
	}
}


/* =============================================================
   17. Cards y resultados (loop items, search dropdown, blog FAQs)
   -------------------------------------------------------------
   Patrones no-expressable: aspect-ratio en post cards, backdrop-filter
   blur en search result cards, hover compound `:has()` en blog FAQs.
   Activos via clase opt-in.
   ============================================================= */

/* Post block aspect ratio */
.attic-post-card-aspect {
	aspect-ratio: 4 / 2;
}

/* Search result card — glass blur effect */
.attic-search-result-card {
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
	max-height: 5rem;
	overflow: hidden;
	transition: background-color 0.2s ease;
}
.attic-search-result-card:hover {
	background-color: rgba(255, 255, 255, 1);
}

/* Elementor Pro Search widget.
   RETIRADO 2026-09-17 el "reset" del desplegable de resultados (fondo transparente +
   padding/border a 0 sobre `.e-search-results-container` / `.e-search-results`).
   Anulaba el fondo de marca que el propio widget emite (`results_background_color` =
   global accent) y dejaba el mensaje "sin resultados" —configurado BLANCO— flotando
   ilegible sobre el contenido de la página: es el "text overlaps" que reportó el
   cliente. Los resultados en vivo están desactivados hoy (ver
   `scripts/migrations/atticstorage-blog-search-scope-fix.php`), así que estas reglas
   eran además CSS muerto que re-crearía el bug si alguien los reactivara. */
.e-search-input {
	text-align: left;
}

/* Blog FAQs grid — focus-on-hover dim */
@media (hover: hover) and (pointer: fine) {
	.faqs-grid .faq-wrap {
		opacity: 1;
		transition: opacity 0.5s ease;
	}
	.faqs-grid:has(.faq-wrap:hover) .faq-wrap:not(:hover) {
		opacity: 0.2;
	}
}

/* Slider WEP: el freno del autoplay y la visibilidad de flechas/dots viven
   en el mu-plugin compartido `wap-slider-wep` (shared/mu-plugins/), que decide
   por "¿caben todos los slides?" en lugar de por un breakpoint fijo.
   Retirado de aquí 2026-09-18 — no reintroducir: duplicarlo volvería a ocultar
   la nav en desktop en los carousels que SÍ son slider. */

/* =============================================================
   19. Attic hero search (autocomplete typeahead) — PILL unificado
   -------------------------------------------------------------
   Layout: el PILL se dibuja en el FORM (border+radius 999+bg); dentro,
   wrapper (flex 1, posiciona input + geo + clear + suggestions) + botón
   integrado como último hijo del form con la clase COMPARTIDA
   `attic-hero-search__btn` (variantes: `__submit` lupa teal→naranja,
   `__cta` "Get a quote" naranja→teal en la home). Las 5 instancias del
   sitio comparten este markup/clases: un cambio aquí afecta a todas
   (decisión Carlos 2026-08-21). El JS (snippet 8798) bindea al form
   por evento submit → el botón es libre de moverse/reestilarse.
   Variables Kit: primary #099, accent #FF7F32, light-teal #A0D1CA,
   secondary #14385F, cream #EAF6F5.
   ============================================================= */

/* El buscador de FAQs (/help-support/faqs/) comparte este mismo campo — decisión
   Carlos 2026-08-25: "los mismos estilos que el resto de buscadores". Se agrupa
   con los selectores en vez de duplicar los valores, para que un cambio de la
   línea corporativa siga tocándose en un solo sitio. */
.attic-hero-search,
.attic-faq-search-inner {
	--search-h: 54px;
	--search-btn-inset: 5px;
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0;
	display: flex;
	align-items: stretch;
	gap: 0;
	height: var(--search-h);
	background: #fff;
	border: 2px solid var(--e-global-color-42597f9, #A0D1CA);
	/* radius 12 = línea corporativa (igual que el buscador previo y el
	   dropdown de sugerencias) — corrección Carlos 2026-08-21 sobre el 999 */
	border-radius: 12px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus ring en el PILL (el input interno ya no lleva borde propio) */
.attic-hero-search:focus-within,
.attic-faq-search-inner:focus-within {
	border-color: var(--e-global-color-primary, #009999);
	box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

/* Home: el pill alberga el CTA "Get a quote" → ancho total como la versión
   anterior (campo 480 + botón ~150) para que el placeholder no se pise.
   Fallback sin :has() (navegadores viejos): 480px, funcional. */
.attic-hero-search:has(.attic-hero-search__cta) {
	max-width: 640px;
}

.attic-hero-search__wrapper {
	position: relative;
	flex: 1;
	min-width: 0;
}

.attic-hero-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	pointer-events: none;
	z-index: 1;
}

/* why !important: Elementor genera reglas per-widget con specificity
   (0,3,1) `.elementor-XX .elementor-element.elementor-element-YY input[type="text"]`
   que pisan cualquier selector de clase (0,1,0). Mismo patrón canon Lockall
   (lockall-child #lockall-cp-search usa ID = (1,0,0) para ganar; aquí
   preferimos clase con !important para reutilizar entre home + archive
   sin requerir IDs únicos por contexto). */
.attic-hero-search__input,
.attic-faq-search-input {
	width: 100% !important;
	height: 100% !important;
	padding: 0 44px 0 20px !important;
	box-sizing: border-box !important;
	/* el pill (border+bg) vive en el FORM: el input va desnudo y transparente */
	border: 0 !important;
	border-radius: 12px 0 0 12px !important;
	font-family: Raleway, sans-serif !important;
	background: transparent !important;
	color: var(--e-global-color-secondary, #14385F) !important;
	transition: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-overflow: ellipsis;
	/* why 16px: umbral iOS Safari anti zoom-on-focus. Con <16px, iOS hace zoom al
	   enfocar el input → scrollea para centrarlo + deja el layout viewport más ancho
	   que el visual (scroll horizontal). DEBE llevar !important: un override 16px sin
	   !important en la media-query mobile era vencido por este 15px !important previo. */
	font-size: 16px !important;
}

/* el ring de focus lo pinta .attic-hero-search:focus-within en el form */
.attic-hero-search__input:focus,
.attic-faq-search-input:focus {
	border: 0 !important;
	box-shadow: none !important;
}

.attic-hero-search__input::placeholder,
.attic-faq-search-input::placeholder {
	color: #999;
}

.attic-hero-search__geo,
.attic-hero-search__clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	transition: color 0.2s;
}

/* why !important: reset.css del entorno aplica
   `[type="button"]:hover, button:hover { background-color: #c36; color: #fff; }`
   con specificity (0,2,0) igual a `.attic-hero-search__geo:hover` y cargado
   antes/después según el plugin → gana inconsistente. !important garantiza
   que el geo/clear button mantenga el fondo transparente (deja ver el
   input blanco) y solo cambie el color del icono al primary. */
.attic-hero-search__geo:hover,
.attic-hero-search__geo:focus,
.attic-hero-search__clear:hover,
.attic-hero-search__clear:focus {
	background-color: transparent !important;
	color: var(--e-global-color-primary, #009999) !important;
}

.attic-hero-search__geo.is-loading {
	animation: attic-search-pulse 1s infinite;
}

@keyframes attic-search-pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}

.attic-hero-search__clear {
	display: none;
	font-size: 20px;
	line-height: 1;
}

/* Botón integrado en el pill — clase COMPARTIDA por las 5 instancias
   (button.__submit lupa / a.__cta "Get a quote"). Geometría común aquí;
   las variantes solo aportan color/anchura. */
.attic-hero-search__btn {
	align-self: stretch;
	margin: var(--search-btn-inset);
	margin-left: 0;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	/* radius interior = corporativo 12 − inset 5 ≈ 8 (mismo radius que los
	   attic-btn), para que anide limpio dentro del contenedor de 12 */
	border-radius: 8px;
	padding: 0;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: background 0.2s ease;
}

.attic-hero-search__submit {
	background: var(--e-global-color-primary, #009999);
	/* círculo: alto disponible = --search-h − 4px borde − 2×inset */
	width: calc(var(--search-h) - 4px - 2 * var(--search-btn-inset));
}

/* why !important: mismo reset.css que ataca buttons en hover/focus —
   garantizar el orange accent en hover sin que #c36 lo pise. */
.attic-hero-search__submit:hover,
.attic-hero-search__submit:focus,
.attic-hero-search__submit:focus-visible {
	background-color: var(--e-global-color-accent, #FF7F32) !important;
	color: #fff !important;
}

.attic-hero-search__submit svg {
	display: block;
}

/* CTA de la home dentro del pill: naranja → hover teal (mismo contrato de
   color que el antiguo widget c5b41d4 attic-btn-secondary que sustituye) */
.attic-hero-search__cta {
	background: var(--e-global-color-accent, #FF7F32);
	padding: 0 22px;
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	/* why !important: el link color del Kit (.elementor-kit-8560 a, (0,1,1))
	   pisa la clase (0,1,0) y pintaba el texto blueberry — el CTA va SIEMPRE
	   en blanco (corrección Carlos 2026-08-21) */
	color: #fff !important;
}

/* why !important: reset.css del entorno mete hover #c36 en <a>/button */
.attic-hero-search__cta:hover,
.attic-hero-search__cta:focus,
.attic-hero-search__cta:focus-visible {
	background-color: var(--e-global-color-primary, #009999) !important;
	color: #fff !important;
}

.attic-hero-search__suggestions {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	max-height: 280px;
	overflow-y: auto;
	/* Anclado al WRAPPER (ancho del campo), decisión firme: el box DEBE seguir
	   dentro del wrapper (ancla del insertBefore(geo/clear, box) del snippet
	   8798) y el wrapper debe seguir relative (geo/clear van absolute contra
	   él). Dropdown al ancho del campo bajo un pill = patrón estándar. El
	   top +8px libra el borde inferior del pill. */
}

.attic-hero-search__suggestions.is-open {
	display: block;
}

.attic-hero-search__suggestion {
	padding: 12px 16px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: background 0.15s;
}

.attic-hero-search__suggestion:first-child { border-radius: 12px 12px 0 0; }
.attic-hero-search__suggestion:last-child  { border-radius: 0 0 12px 12px; }

.attic-hero-search__suggestion:hover,
.attic-hero-search__suggestion.is-active {
	background: var(--e-global-color-d0d111e, #EAF6F5);
}

.attic-hero-search__suggestion-label {
	font-weight: 600;
	color: var(--e-global-color-secondary, #14385F);
	font-size: 14px;
}

.attic-hero-search__suggestion-distance {
	font-size: 12px;
	color: var(--e-global-color-primary, #009999);
}

.attic-hero-search__suggestion-empty {
	padding: 12px 16px;
	color: #999;
	font-size: 14px;
	text-align: center;
}

/* Distance badge — añadido a cada .e-loop-item del archive tras doSearch */
.attic-distance-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--e-global-color-primary, #009999);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 4px;
}

.attic-distance-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: var(--e-global-color-primary, #009999);
}

.e-loop-item { position: relative; }

/* Nearest center destacado tras doSearch — Plan X + fix carousel-safe noche 2026-05-26.
   - Ring teal vía box-shadow INSET (no se recorta por .swiper{overflow:hidden} del Loop Carousel).
   - Badge "Nearest" pintado sobre el <a> Elementor Container interno (no sobre el slide
     externo) — el <a> tiene display:flex+position:relative+stacking context propio que en
     Elementor Pro 4.1+ pinta el .e-con-inner ENCIMA del ::before del slide, dejando el badge
     oculto si vive en el slide externo. */
.swiper-slide.e-loop-item.attic-nearest,
.e-loop-item.attic-nearest {
	box-shadow: inset 0 0 0 3px var(--e-global-color-primary, #009999),
	            0 8px 24px rgba(0, 153, 153, 0.25);
	border-radius: 1rem;
	z-index: 2;
	transition: box-shadow 0.3s ease;
}

/* El <a> Elementor Container ya viene con position:relative — aseguramos por defensa */
.e-loop-item.attic-nearest > a,
.e-loop-item.attic-nearest > .e-con {
	position: relative;
}

/* Badge "Nearest" colgado del <a>/<.e-con interior para garantizar pintado encima
   del .e-con-inner. Selectores múltiples para cubrir Loop Carousel y Loop Grid. */
.swiper-slide.e-loop-item.attic-nearest > a::after,
.e-loop-item.attic-nearest > a::after,
.e-loop-item.attic-nearest > .e-con::after {
	content: "Nearest";
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--e-global-color-accent, #FF7F32);
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	font-family: Raleway, sans-serif;
	letter-spacing: 0.04em;
	z-index: 10;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(255, 127, 50, 0.4);
}

/* Badge "X miles" en cada card del carousel "Choose your nearest center" (snippet 8798
   reorderCarousel). Pill blanco overlay arriba-izquierda — legible sobre la foto de fondo
   (las cards son imágenes), sin chocar con el badge "Nearest" (arriba-derecha). El badge del
   archive (.attic-distance-badge) es texto teal sin fondo porque va sobre card blanca; aquí
   necesita fondo. */
.swiper-slide.e-loop-item > a {
	position: relative; /* ancla para el badge absolute (Elementor no lo pone por defecto) */
}
.attic-distance-badge--card {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	color: var(--e-global-color-primary, #009999);
	padding: 4px 10px;
	border-radius: 999px;
	font-family: Raleway, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(20, 56, 95, 0.18);
	pointer-events: none;
}
.attic-distance-badge--card svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	fill: var(--e-global-color-primary, #009999);
}

/* Map markers + user marker styling (Leaflet DivIcon) */
.attic-marker,
.attic-user-marker {
	background: transparent !important;
	border: none !important;
}

.attic-marker-pin svg,
.attic-user-pin svg {
	width: 24px;
	height: 36px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Google Maps OverlayView pins (migración Leaflet→Google 2026-06-26).
   El overlay HTML se posiciona en píxeles desde draw(); translate(-50%,-100%)
   ancla la PUNTA del pin en la coordenada. */
.attic-pin-overlay {
	position: absolute;
	transform: translate(-50%, -100%);
	cursor: pointer;
	will-change: transform;
}
/* Estado activo (hover de card en /locations/ o slide activo del carousel en home). */
.attic-pin-overlay.attic-marker-active {
	z-index: 3;
}
.attic-pin-overlay.attic-marker-active .attic-marker-pin svg {
	transform: scale(1.18);
	filter: drop-shadow(0 4px 10px rgba(20, 56, 95, 0.45));
	transition: transform .15s ease;
}

/* Popup custom del mapa (OverlayView AtticPopup, 2026-06-27) — card on-brand,
   ENCIMA del pin (translate sube el card+flecha ~40px por encima de la coord →
   no tapa el pin). Sustituye al InfoWindow genérico de Google. */
.attic-map-popup {
	position: absolute;
	transform: translate(-50%, calc(-100% - 40px));
	z-index: 5;
	cursor: default;
}
.attic-map-popup__card {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 6px 22px rgba(20, 56, 95, 0.18);
	padding: 14px 16px;
	min-width: 180px;
	max-width: 260px;
	font-family: Raleway, sans-serif;
	text-align: left;
}
.attic-map-popup__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9aa3ad;
	font-size: 18px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
}
.attic-map-popup__close:hover,
.attic-map-popup__close:focus {
	color: #14385F;
	background: rgba(20, 56, 95, 0.06);
}
.attic-map-popup__title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	color: #14385F;
	padding-right: 18px;
}
.attic-map-popup__meta {
	margin-top: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #FF7F32;
}
.attic-map-popup__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.875rem;
	font-weight: 700;
	color: #099999 !important;
	text-decoration: none;
}
.attic-map-popup__link:hover { text-decoration: underline; }
.attic-map-popup__arrow {
	width: 0;
	height: 0;
	margin: -1px auto 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 11px solid #fff;
	filter: drop-shadow(0 4px 3px rgba(20, 56, 95, 0.10));
}

.attic-tooltip {
	background: var(--e-global-color-secondary, #14385F);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 4px 8px;
	font-family: Raleway, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.attic-hero-search,
	.attic-hero-search__btn { transition: none; }
	.attic-hero-search__geo.is-loading { animation: none; }
}

@media (max-width: 767px) {
	.attic-hero-search { max-width: 100%; --search-h: 50px; }
	/* input font-size 16px (anti zoom-on-focus iOS) ya está en la regla base con !important */
	.attic-distance-badge { font-size: 11px; }

	/* HOME: "Get a quote" no cabe en 320px junto al placeholder → STACK:
	   el pill pasa al wrapper (solo campo) y el CTA va full-width debajo
	   (mismo layout móvil que tenía el widget button separado). Las 4
	   instancias con lupa caben de sobra y no entran aquí (:has __cta). */
	.attic-hero-search:has(.attic-hero-search__cta) {
		display: block;
		height: auto;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.attic-hero-search:has(.attic-hero-search__cta) .attic-hero-search__wrapper {
		height: var(--search-h);
		background: #fff;
		border: 2px solid var(--e-global-color-42597f9, #A0D1CA);
		border-radius: 12px;
		transition: border-color 0.2s, box-shadow 0.2s;
	}
	.attic-hero-search:has(.attic-hero-search__cta) .attic-hero-search__wrapper:focus-within {
		border-color: var(--e-global-color-primary, #009999);
		box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
	}
	.attic-hero-search__cta {
		display: flex;
		width: 100%;
		height: var(--search-h);
		margin: 10px 0 0;
	}
}


/* =============================================================
   §20 Other locations Loop Grid — column-wise flow
   -------------------------------------------------------------
   Home post #9, widget Elementor Loop Grid `a1dc4ea`
   (template_id 8858, listado del CPT `other_location`).

   Elementor renderiza el grid row-wise por defecto. Para una lista
   alfabética larga el escaneo natural del usuario es vertical
   (col1 entera → col2 entera → …). Forzamos column-wise vía CSS
   multi-column. Nº de columnas idéntico al setting nativo del
   widget (4 / 2 / 1) para coherencia y para preservar la a11y del
   `role="list"` inyectado por Elementor.

   Si se recrea el widget el data-id cambiará: asignar la clase
   `attic-other-locations-grid` desde Elementor → Advanced → CSS
   Classes y duplicar el selector aquí.
   ============================================================= */

/* why !important sobre display + column-gap: la CSS per-widget que
   Elementor genera en /wp-content/uploads/elementor/css/post-9.css usa
   selectores con ancestor .elementor-9 (specificity 0,4,0) que pisan
   esta regla sin !important. Diseño firmado (column-wise + 1rem/1rem),
   cliente no debe cambiarlo desde editor. */
.elementor-element-a1dc4ea .elementor-loop-container.elementor-grid {
	display: block !important;
	columns: 4;
	column-gap: 1rem !important;
}

/* Multi-column no soporta row-gap (es propiedad grid/flex). Para emular
   el gap vertical de 1rem aplicamos margin-bottom a cada loop-item. */
.elementor-element-a1dc4ea .elementor-loop-container.elementor-grid > [data-elementor-type="loop-item"] {
	display: block;
	width: 100%;
	margin: 0 0 1rem 0;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Evita margin-bottom huérfano debajo del último item (bottom-right). */
.elementor-element-a1dc4ea .elementor-loop-container.elementor-grid > [data-elementor-type="loop-item"]:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.elementor-element-a1dc4ea .elementor-loop-container.elementor-grid {
		columns: 2;
	}
}

@media (max-width: 767px) {
	.elementor-element-a1dc4ea .elementor-loop-container.elementor-grid {
		columns: 1;
	}
}

/* =============================================================
   §21 BLOG TAXONOMY FILTER -> dropdown (Plan blog-filter)
   -------------------------------------------------------------
   Convierte el widget nativo Elementor Pro "Taxonomy Filter"
   (<search class="e-filter"> con botones .e-filter-item) de fila
   horizontal a un dropdown multiselección. La lógica de filtrado
   AJAX nativa NO se toca: los .e-filter-item conservan sus
   listeners nativos (fetch contra el Loop Grid). Solo cambia la
   presentación. La multiselección (AND/OR) es un setting nativo
   del widget (Content -> Settings -> Multiple Selection).

   Ancla: container con clase `attic-blogfilter` (css_classes nativo
   en Advanced -> CSS Classes). El JS (assets/blog-filter-dropdown.js)
   añade `.attic-blogfilter--js` solo en frontend, por lo que el
   panel/ocultación quedan gateados: en el editor (o sin JS) el widget
   se ve horizontal nativo y sigue editable. Degradación elegante.

   Reutiliza el patrón de §5 Opening Hours dropdown.
   ============================================================= */

.attic-blogfilter__wrap {
	position: relative;
	display: inline-block;
}

/* Toggle inyectado por JS ("Filter by category") */
.attic-blogfilter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: #fff;
	border: 1px solid var(--attic-light-teal, #A0D1CA);
	border-radius: 0.5rem;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--attic-blueberry, #14385F);
	line-height: 1.2;
}
/* why !important: el reset.css de Hello Elementor aplica a
   `[type="button"]:hover/:focus` un bg #CC3366 (granate del kit, no
   corporativo) + color blanco, y carga después del child. Mismo caveat ya
   documentado en §19 hero search (commit 9517f0f). Hover hacia el accent
   naranja (patrón CTA del sitio: "Get a quote" naranja + texto blanco). */
.attic-blogfilter__toggle:hover,
.attic-blogfilter__toggle:focus {
	background: var(--attic-orange, #FF7F32) !important;
	color: #fff !important;
	border-color: var(--attic-orange, #FF7F32);
}
.attic-blogfilter__toggle:focus-visible {
	outline: 2px solid var(--attic-teal, #099);
	outline-offset: 2px;
}

/* Contador de seleccionados (badge) — oculto cuando 0 */
.attic-blogfilter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--attic-teal, #099);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}
.attic-blogfilter__count[hidden] {
	display: none;
}

/* Chevron — rota 180° al abrir (patrón §5) */
.attic-blogfilter__chevron {
	display: inline-flex;
	transition: transform 0.2s ease;
	margin-left: 0.15rem;
}
.attic-blogfilter__toggle[aria-expanded='true'] .attic-blogfilter__chevron {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.attic-blogfilter__chevron {
		transition: none;
	}
}

/* El <search class="e-filter"> nativo pasa a ser el PANEL desplegable */
.attic-blogfilter--js .attic-blogfilter__panel {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	z-index: 1000;
	min-width: 240px;
	max-width: min(92vw, 360px);
	max-height: 60vh;
	overflow-y: auto;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--attic-light-teal, #A0D1CA);
	border-radius: 0.5rem;
	box-shadow: 0 6px 20px rgba(20, 56, 95, 0.12);
	/* why !important: vencer el layout que Elementor inyecta sobre .e-filter
	   (`.elementor-widget-taxonomy-filter .e-filter`, misma specificity 0,2,0
	   pero carga después): flex-direction row, flex-wrap wrap, y -CRÍTICO-
	   justify-content:center + align-items:center. En flex-direction column ese
	   center desplaza el contenido (el "All" y los primeros items quedan con
	   offsetTop negativo, fuera de la vista al exceder el max-height) y centra
	   cada fila. Forzamos flex-start + stretch: apila desde arriba (el "All"
	   siempre visible) y deja las filas a ancho completo. No expresable en
	   settings nativos (el widget no ofrece "display: dropdown"). Excepción
	   "vencer inyección Elementor" de wordpress-elementor.md. */
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: 0.15rem;
}
/* why !important: el `display:flex !important` de arriba ganaría a un
   `display:none` normal; necesitamos forzar la ocultación al cerrar. */
.attic-blogfilter--js .attic-blogfilter__panel[hidden] {
	display: none !important;
}

/* Botones nativos .e-filter-item -> filas tipo checkbox (solo restyle;
   markup y listeners nativos intactos) */
.attic-blogfilter--js .e-filter-item {
	display: flex;
	align-items: center;
	/* Elementor inyecta justify-content:center y width:auto (ancho=contenido) en
	   .e-filter-item; forzamos contenido a la izquierda y fila a ancho completo
	   para que checkboxes y textos queden alineados. */
	justify-content: flex-start !important;
	gap: 0.5rem;
	width: 100% !important;
	padding: 0.45rem 0.6rem;
	border: none;
	border-radius: 0.35rem;
	background: transparent;
	text-align: left;
	font-size: 0.9rem;
	color: var(--attic-gray, #424548);
	cursor: pointer;
}
/* why !important: widget-loop-filter.min.css (Elementor Pro) define
   `.elementor-widget-taxonomy-filter .e-filter-item:hover/:focus
   { background: initial }` (y color propio) con la misma especificidad
   (0,3,0) pero carga después → anulaba el highlight y dejaba el hover
   transparente. Hover hacia el accent naranja (patrón CTA del sitio). */
.attic-blogfilter--js .e-filter-item:hover,
.attic-blogfilter--js .e-filter-item:focus {
	background: var(--attic-orange, #FF7F32) !important;
	color: #fff !important;
}
/* Sobre el fondo naranja, el borde light-teal del pseudo-checkbox desentona:
   en hover pasa a blanco (el estado seleccionado conserva su relleno teal). */
.attic-blogfilter--js .e-filter-item:hover::before,
.attic-blogfilter--js .e-filter-item:focus::before {
	border-color: #fff;
}
.attic-blogfilter--js .e-filter-item:focus-visible {
	outline: 2px solid var(--attic-teal, #099);
	outline-offset: -2px;
}
.attic-blogfilter--js .e-filter-item[aria-pressed='true'] {
	color: var(--attic-blueberry, #14385F);
	font-weight: 700;
}

/* Pseudo-checkbox que refleja el aria-pressed nativo (cero estado propio) */
.attic-blogfilter--js .e-filter-item::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--attic-light-teal, #A0D1CA);
	border-radius: 0.25rem;
	background: #fff;
}
.attic-blogfilter--js .e-filter-item[aria-pressed='true']::before {
	background-color: var(--attic-teal, #099);
	border-color: var(--attic-teal, #099);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
	background-size: 0.85rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* Ocultar la categoría técnica "Uncategorised" del dropdown (decisión de
   negocio 2026-06-09): 69 posts sin clasificar, sin valor para el filtro
   público. display:none la saca también del tab order. !important para vencer
   el display:flex del item. Si en el futuro hay más categorías a ocultar,
   añadir su slug aquí (el Taxonomy Filter de Elementor no expone exclusión de
   términos por settings). */
.attic-blogfilter--js .e-filter-item[data-filter="uncategorised"] {
	display: none !important;
}

/* Móvil: dropdown a ancho completo */
@media (max-width: 767px) {
	.attic-blogfilter__wrap {
		display: block;
	}
	.attic-blogfilter__toggle {
		width: 100%;
		justify-content: space-between;
	}
	.attic-blogfilter--js .attic-blogfilter__panel {
		left: 0;
		right: 0;
		max-width: none;
		width: 100%;
	}
}


/* =============================================================
   §22 Contact page (/contact-us/, page #40)
   -------------------------------------------------------------
   Réplica de storemore.es/contacto con marca Attic: intro asimétrico
   + Elementor Pro Form nativo (swap-ready a HubSpot — ver §15) +
   Loop Grid del CPT `location` (loop-item 8564, re-bindeado a
   location-address/phone/email).

   Settings-First: layout, tipografía, colores y el borde/radio base
   van en los settings nativos de los widgets. Aquí SOLO lo que el
   widget no parametriza: el focus-ring de los campos, el checkbox de
   consentimiento, el hover compuesto de las cards y el color de
   iconos/borde de marca. !important puntual = vencer el CSS por-widget
   que Elementor inyecta (post-40.css / loop-item 8564 legacy).
   ============================================================= */

/* --- Form: campos (marca Attic) --- */
.attic-contact-form-widget .elementor-field-group > label.elementor-field-label {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	color: var(--attic-blueberry);
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.attic-contact-form-widget .elementor-field-group .elementor-field {
	font-family: 'Raleway', sans-serif;
	color: var(--attic-gray);
}
.attic-contact-form-widget .elementor-field-group .elementor-field::placeholder {
	color: #9aa0a6;
}
/* focus teal ring — el widget Form no expone estado focus */
.attic-contact-form-widget .elementor-field-group .elementor-field:focus,
.attic-contact-form-widget .elementor-field-group .elementor-field:focus-visible {
	border-color: var(--attic-teal) !important;
	box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.12) !important;
	outline: none;
}
/* name / email en 2 columnas → apilan en móvil */
@media (max-width: 767px) {
	.attic-contact-form-widget .elementor-field-group.elementor-col-50 {
		width: 100%;
	}
}

/* --- Form: consentimiento (acceptance) --- */
.attic-contact-form-widget .elementor-field-type-acceptance .elementor-field-subgroup {
	align-items: flex-start;
	gap: 8px;
}
.attic-contact-form-widget .elementor-field-type-acceptance label,
.attic-contact-form-widget .elementor-field-type-acceptance .elementor-field-option {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--attic-gray);
}
.attic-contact-form-widget .elementor-field-type-acceptance a {
	color: var(--attic-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Form: submit (canon teal por settings → hover accent orange) --- */
.attic-contact-form-widget .elementor-button:hover {
	background-color: var(--attic-orange) !important;
}
.attic-contact-form-widget .elementor-button:focus-visible {
	outline: 2px solid var(--attic-orange);
	outline-offset: 2px;
}

/* --- Centres directory: cards (loop-item 8564) --- */
/* borde de marca + transición sobre el container raíz de cada card */
.attic-contact-centres-grid .e-loop-item > .e-con {
	border-color: var(--attic-light-teal) !important;
	transition: var(--attic-transition);
}
/* hover compuesto: la card sube y proyecta sombra tinted al blueberry */
.attic-contact-centres-grid .e-loop-item:hover > .e-con {
	transform: translateY(-4px);
	box-shadow: var(--attic-shadow);
}
/* nombre del centro en blueberry */
.attic-contact-centres-grid .e-loop-item .elementor-heading-title,
.attic-contact-centres-grid .e-loop-item .elementor-heading-title a {
	color: var(--attic-blueberry);
}
/* iconos teal, texto gris, hover del enlace al teal */
.attic-contact-centres-grid .elementor-icon-list-icon svg,
.attic-contact-centres-grid .elementor-icon-list-icon i {
	fill: var(--attic-teal);
	color: var(--attic-teal);
}
.attic-contact-centres-grid .elementor-icon-list-text {
	color: var(--attic-gray);
}
.attic-contact-centres-grid .elementor-icon-list-item a:hover .elementor-icon-list-text {
	color: var(--attic-teal);
}

@media (prefers-reduced-motion: reduce) {
	.attic-contact-centres-grid .e-loop-item > .e-con,
	.attic-contact-centres-grid .e-loop-item:hover > .e-con {
		transition: none;
		transform: none;
	}
}


/* =============================================================
   §23 Authors index (/author/)
   -------------------------------------------------------------
   Directorio de autores con posts publicados. Las tarjetas las
   genera el shortcode [attic_authors] (functions.php) — Elementor
   no itera usuarios WP, así que la estructura vive en PHP y el
   visual aquí. Tokens canónicos §0; sin !important. Grid centrado
   → se ve bien con 2-3 tarjetas (evita el "3 cards iguales").
   ============================================================= */

.attic-authors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
	justify-content: center;
	gap: 1.75rem;
	max-width: var(--attic-container-max, 1280px);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.attic-author-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.1rem;
	padding: 2.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--attic-light-teal, #a0d1ca);
	border-radius: var(--attic-radius-card, 12px);
	box-shadow: var(--attic-shadow);
	transition: var(--attic-transition);
	text-decoration: none;
	color: var(--attic-gray, #424548);
}

.attic-author-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--attic-shadow-hover);
	border-color: var(--attic-teal, #099);
}

.attic-author-card__avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.attic-author-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.attic-author-card__name {
	font-family: var(--attic-font, 'Raleway', sans-serif);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--attic-blueberry, #14385f);
}

.attic-author-card__bio {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--attic-gray, #424548);
}

.attic-author-card__count {
	margin-top: 0.15rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--attic-teal, #099);
}

@media (max-width: 600px) {
	.attic-authors-grid {
		grid-template-columns: 1fr;
	}
}


/* =============================================================
   §24 Document Centre — /help-support/document-centre/
   -------------------------------------------------------------
   Página reconstruida con Elementor: Loop Grid del CPT `document`
   por categoría `document_cat` + un Loop Item card. Settings-First:
   el look estático de la card (border/radius/padding/bg) vive en los
   settings NATIVOS del loop-item; aquí solo lo NO expressable —
   hover compuesto, sombra con token, badge PDF, jump-nav, focus y
   reduced-motion. Patrón de card = §22 (.e-loop-item > .e-con).
   Tokens §0. Sin !important.
   ============================================================= */

/* Smooth scroll + offset del ancla (scoped a la página vía :has, sin hardcodear IDs). */
html:has(.attic-doc-centre) {
	scroll-behavior: smooth;
}
.attic-doc-section {
	scroll-margin-top: var(--attic-doc-anchor-offset, 120px);
}

/* Jump-nav: pills modernas (inline, fiel al "Jump to" original). */
.attic-doc-jumpnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.attic-doc-jumpnav a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: transparent;
	border: 1px solid var(--attic-light-teal, #a0d1ca);
	border-radius: var(--attic-radius-pill, 999px);
	font-family: var(--attic-font, 'Raleway', sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--attic-blueberry, #14385f);
	text-decoration: none;
	transition: var(--attic-transition);
}
.attic-doc-jumpnav a:hover,
.attic-doc-jumpnav a:focus,
.attic-doc-jumpnav .elementor-button:hover,
.attic-doc-jumpnav .elementor-button:focus {
	background-color: var(--attic-teal, #099);
	border-color: var(--attic-teal, #099);
	color: #fff;
}
/* Texto del nav en BLANCO al hover — vence el color propio del span .elementor-button-text. */
.attic-doc-jumpnav .elementor-button:hover .elementor-button-text,
.attic-doc-jumpnav .elementor-button:focus .elementor-button-text {
	color: #fff;
}
.attic-doc-jumpnav a:focus-visible {
	outline: 2px solid var(--attic-orange, #ff7f32);
	outline-offset: 2px;
}

/* Card grid: look estático en settings nativos; aquí sombra (token),
   altura completa para cards iguales y hover compuesto (no expressable). */
.attic-doc-grid .e-loop-item > .e-con {
	height: 100%;
	box-shadow: var(--attic-shadow);
	transition: var(--attic-transition);
}
.attic-doc-grid .e-loop-item:hover > .e-con {
	transform: translateY(-4px);
	box-shadow: var(--attic-shadow-hover);
	border-color: var(--attic-teal, #099);
}

/* Badge "PDF": el box (bg/padding/radius/ancho) en el wrapper del widget,
   el texto en .elementor-heading-title. Selector `.elementor-widget.attic-doc-badge`
   (NO `.attic-doc-grid`) para que el badge se vea TAMBIÉN en el editor del
   loop-item — el preview del editor no tiene el wrapper `.attic-doc-grid`, así
   que con el selector anterior el badge salía "desnudo" (ancho completo, sin fondo).
   width:max-content vence el ancho completo que Elementor da al widget en el flex. */
.elementor-widget.attic-doc-badge {
	display: inline-flex;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	padding: 0.2rem 0.7rem;
	border-radius: var(--attic-radius-pill, 999px);
	background: var(--attic-light-teal, #a0d1ca);
}
.attic-doc-badge .elementor-heading-title {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--attic-blueberry, #14385f);
}

/* Título del documento en blueberry (fallback al title_color nativo). */
.attic-doc-grid .e-loop-item .elementor-heading-title {
	color: var(--attic-blueberry, #14385f);
}

/* CTA Download anclado abajo (alineación compuesta del flex column de la card). */
.attic-doc-grid .e-loop-item .attic-doc-cta {
	margin-top: auto;
}

/* CTA Download: borde 1px teal YA en estado normal (settings nativos, mismo color
   que el relleno → invisible) para que el hover no provoque layout shift. Al hover
   invierte a outline: relleno transparente + texto/icono/borde teal. Hover
   compuesto → CSS (la regla wordpress-elementor lo contempla). */
.attic-doc-cta .elementor-button {
	transition: background-color 0.3s, border-color 0.3s, color 0.3s, fill 0.3s;
}
.attic-doc-cta .elementor-button:hover,
.attic-doc-cta .elementor-button:focus {
	background-color: transparent;
	border-color: var(--attic-teal, #099);
	color: var(--attic-teal, #099);
}
.attic-doc-cta .elementor-button:hover .elementor-button-text,
.attic-doc-cta .elementor-button:focus .elementor-button-text {
	color: var(--attic-teal, #099);
}
.attic-doc-cta .elementor-button:hover .elementor-button-icon svg,
.attic-doc-cta .elementor-button:focus .elementor-button-icon svg {
	fill: var(--attic-teal, #099);
}

/* Focus visible en card-link y botón. */
.attic-doc-grid a:focus-visible {
	outline: 2px solid var(--attic-orange, #ff7f32);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html:has(.attic-doc-centre) {
		scroll-behavior: auto;
	}
	.attic-doc-grid .e-loop-item > .e-con,
	.attic-doc-grid .e-loop-item:hover > .e-con,
	.attic-doc-jumpnav a {
		transition: none;
		transform: none;
	}
}


/* =============================================================
   §25 Páginas Elementor genéricas (build-kit attic-elementor-kit.php)
   -------------------------------------------------------------
   Patrones compartidos por las páginas/templates reconstruidos
   (FAQ, guías, services, personal-storage, hubs, singles). Misma
   línea que §24 (Document Centre) con clases genéricas `attic-*` que
   emite el build-kit. Selectores ctx-independientes → el editor del
   loop-item/template también los ve. Tokens §0. Settings-first:
   estado normal de botones en nativo, hover compuesto aquí.
   ============================================================= */

/* .attic-location-single añadido 2026-08-02: el single de location estrena jump-nav
   (pills estilo FAQs) y su wrapper no es .attic-page. Ídem los dos anchors del single
   que no son .attic-section (la sección de media y Site Details, que va por id). */
html:has(.attic-page, .attic-location-single) {
	scroll-behavior: smooth;
}
.attic-section,
.attic-locsingle-media,
#site-details {
	scroll-margin-top: var(--attic-doc-anchor-offset, 120px);
}
.attic-page-intro {
	max-width: 70ch;
}

/* Hero split (réplica del hero de blog 8985): card 50/50, badge teal + tarjeta blanca / imagen. */
.attic-hero-left {
	justify-content: center;
}
.attic-hero-pill {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	align-self: flex-start;
}
.attic-hero-pill .elementor-heading-title {
	color: #fff;
	margin: 0;
}
.attic-hero-introcard p {
	margin: 0;
	color: var(--attic-gray, #424548);
	line-height: 1.65;
}
.attic-hero-right {
	min-height: 340px;
}
@media (max-width: 767px) {
	.attic-hero-card {
		flex-direction: column;
	}
	.attic-hero-left,
	.attic-hero-right {
		width: 100%;
	}
	.attic-hero-right {
		min-height: 200px;
	}
}

/* (El hover del ghost se unifica con la regla base .attic-btn:hover de abajo → naranja+blanco.
   El ghost del hero de location conserva su excepción propia más abajo —.attic-hero-loc-btns.) */

/* CTA band: eyebrow. */
.attic-cta-eyebrow .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}

/* Lista de enlaces elegante (sustituye las cards vacías). */
.attic-link-rows {
	border-top: 1px solid var(--attic-light-teal, #a0d1ca);
}
.attic-link-row {
	border-bottom: 1px solid var(--attic-light-teal, #a0d1ca);
	text-decoration: none;
	transition: var(--attic-transition);
}
.attic-link-row:hover {
	background: var(--attic-cream, #EAF6F5);
	padding-left: 20px;
}
.attic-link-row .elementor-heading-title {
	color: var(--attic-blueberry, #14385f);
	margin: 0;
}
.attic-row-arrow p {
	margin: 0;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--attic-teal, #099);
	transition: transform 0.3s, color 0.3s;
}
.attic-link-row:hover .attic-row-arrow p {
	color: var(--attic-orange, #ff7f32);
	transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
	.attic-link-row,
	.attic-link-row:hover,
	.attic-row-arrow p {
		transition: none;
		transform: none;
	}
}

/* Jump-nav: pills (normal = settings nativos outline). Hover compuesto. */
.attic-jumpnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
/* Jumpnav: pills en teal al hover. 0,4,0 (con .attic-btn) para ganar a la regla base
   .attic-btn:hover (0,3,0) de abajo y conservar el teal (nav ≠ CTA naranja). */
.attic-jumpnav .attic-btn .elementor-button:hover,
.attic-jumpnav .attic-btn .elementor-button:focus {
	background-color: var(--attic-teal, #099);
	border-color: var(--attic-teal, #099);
	color: #fff;
}
.attic-jumpnav .attic-btn .elementor-button:hover .elementor-button-text,
.attic-jumpnav .attic-btn .elementor-button:focus .elementor-button-text {
	color: #fff;
}

/* ---- Jump-nav del SINGLE en móvil: dropdown estilo Opening Hours (2026-08-04 v2) ----
   Feedback UK + decisión Carlos. RÉPLICA DEL SISTEMA de .atticstorage-hours-* (§5):
   markup PROPIO construido por assets/jumpnav-mobile.js (wrapper relative + <button>
   toggle + panel absolute con <a> planos) — la v1 re-estilizaba el .e-con-inner de
   Elementor como panel y heredaba su height:100%/layout de containers → panel colapsado
   en Safari iOS y overflow en anchos intermedios. SOLO el single; el resto de páginas
   con jump-nav mantienen el wrap de pills. PROGRESSIVE ENHANCEMENT: todo cuelga de la
   clase .attic-jumpnav--dd que añade el JS — sin JS (o con el delay de LiteSpeed sin
   liberar), pills en wrap funcionales. Clases propias, no las de horas (su JS calcula
   Open/Closed sobre .atticstorage-hours-dropdown e interferiría). */
.attic-jumpnav-dd {
	display: none;
}
@media (max-width: 767px) {
	/* pills fuera; el dropdown ocupa su lugar */
	.attic-location-single .attic-jumpnav--dd > .e-con-inner {
		display: none;
	}
	.attic-location-single .attic-jumpnav--dd .attic-jumpnav-dd {
		display: block;
		position: relative;
		width: 100%;
	}
	/* Toggle: clon de .atticstorage-hours-toggle (§5), incluido el hover blueberry
	   !important que vence el reset rosa de Hello Elementor sobre <button>. */
	.attic-jumpnav-dd .attic-jumpnav-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: 100%;
		padding: 0.5rem 0.75rem;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 0.5rem;
		cursor: pointer;
		font-family: var(--attic-font, 'Raleway', sans-serif);
		font-size: 0.95rem;
		font-weight: 600;
		color: var(--e-global-color-text, #424548);
		text-align: left;
	}
	.attic-jumpnav-dd .attic-jumpnav-toggle:hover,
	.attic-jumpnav-dd .attic-jumpnav-toggle:focus {
		background: var(--attic-blueberry, #14385F) !important;
		color: #fff !important;
		border-color: var(--attic-blueberry, #14385F) !important;
	}
	.attic-jumpnav-toggle .attic-jumpnav-chevron {
		flex-shrink: 0;
		transition: transform 0.2s;
	}
	.attic-jumpnav-toggle[aria-expanded='true'] .attic-jumpnav-chevron {
		transform: rotate(180deg);
	}
	/* Panel: clon de .atticstorage-hours-table (§5) — absolute DENTRO del wrapper
	   relative del propio dropdown, imposible desbordar el layout. */
	.attic-jumpnav-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 0.25rem;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 0.5rem;
		padding: 0.5rem;
		z-index: 1000;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	.attic-jumpnav-menu a {
		display: block;
		padding: 0.45rem 0.5rem;
		border-radius: 0.4rem;
		color: var(--attic-teal, #099);
		font-family: var(--attic-font, 'Raleway', sans-serif);
		font-size: 0.9rem;
		font-weight: 600;
		text-decoration: none;
	}
	.attic-jumpnav-menu a:hover,
	.attic-jumpnav-menu a:focus {
		background: var(--e-global-color-d0d111e, #EAF6F5); /* fila estilo .is-today */
		color: var(--attic-blueberry, #14385F);
	}
}


/* Botones — transición + hover compuesto por variante (estado normal en nativo). */
.attic-btn .elementor-button {
	transition: background-color 0.3s, border-color 0.3s, color 0.3s, fill 0.3s;
}
/* SISTEMA DE BOTONES por VARIANTE (decisión cliente 2026-06-29). Coincide con el hover nativo de
   k_button (__globals__) → sin conflicto de cascada. 0,3,0 vence el reset rosa #CC3366 (0,2,0) y el
   inline de Elementor (0,2,0) sin !important. Los 2 sólidos SE INTERCAMBIAN: primary teal→blueberry,
   secondary blueberry→teal. outline rellena teal; ghost rellena blanco+texto blueberry. cta naranja
   solo vive en el header; si aparece en contenido → hover blueberry. Texto/icono siempre Pure White
   salvo ghost. Excepciones: .attic-jumpnav (teal, 0,4,0 arriba) y el ghost del hero de location (más abajo).
   Catch-all PRIMERO (red de seguridad para .attic-btn legacy sin variante) → las reglas por variante,
   con misma especificidad pero posteriores, ganan en el cascade. */
.attic-btn .elementor-button:hover,
.attic-btn .elementor-button:focus {
	background-color: var(--e-global-color-secondary, #14385F);
	border-color: var(--e-global-color-secondary, #14385F);
	color: var(--e-global-color-d0d111e, #FFFFFF);
}
/* primary (teal) → hover azul corporativo */
.attic-btn-primary .elementor-button:hover,
.attic-btn-primary .elementor-button:focus,
.attic-btn-cta .elementor-button:hover,
.attic-btn-cta .elementor-button:focus {
	background-color: var(--e-global-color-secondary, #14385F);
	border-color: var(--e-global-color-secondary, #14385F);
	color: var(--e-global-color-d0d111e, #FFFFFF);
}
/* secondary (azul corporativo) → hover teal; outline (teal transparente) → hover relleno teal */
.attic-btn-secondary .elementor-button:hover,
.attic-btn-secondary .elementor-button:focus,
.attic-btn-outline .elementor-button:hover,
.attic-btn-outline .elementor-button:focus {
	background-color: var(--e-global-color-primary, #099);
	border-color: var(--e-global-color-primary, #099);
	color: var(--e-global-color-d0d111e, #FFFFFF);
}
/* ghost (texto blanco transparente, fondos oscuros) → hover relleno blanco + texto azul corporativo */
.attic-btn-ghost .elementor-button:hover,
.attic-btn-ghost .elementor-button:focus {
	background-color: var(--e-global-color-d0d111e, #FFFFFF);
	border-color: var(--e-global-color-d0d111e, #FFFFFF);
	color: var(--e-global-color-secondary, #14385F);
}
/* Texto/icono en hover: Pure White para todas las sólidas/outline; blueberry para ghost. */
.attic-btn-primary .elementor-button:hover .elementor-button-text,
.attic-btn-primary .elementor-button:focus .elementor-button-text,
.attic-btn-secondary .elementor-button:hover .elementor-button-text,
.attic-btn-secondary .elementor-button:focus .elementor-button-text,
.attic-btn-outline .elementor-button:hover .elementor-button-text,
.attic-btn-outline .elementor-button:focus .elementor-button-text,
.attic-btn-cta .elementor-button:hover .elementor-button-text,
.attic-btn-cta .elementor-button:focus .elementor-button-text {
	color: var(--e-global-color-d0d111e, #FFFFFF);
}
.attic-btn-ghost .elementor-button:hover .elementor-button-text,
.attic-btn-ghost .elementor-button:focus .elementor-button-text {
	color: var(--e-global-color-secondary, #14385F);
}
.attic-btn-primary .elementor-button:hover .elementor-button-icon svg,
.attic-btn-primary .elementor-button:focus .elementor-button-icon svg,
.attic-btn-secondary .elementor-button:hover .elementor-button-icon svg,
.attic-btn-secondary .elementor-button:focus .elementor-button-icon svg,
.attic-btn-outline .elementor-button:hover .elementor-button-icon svg,
.attic-btn-outline .elementor-button:focus .elementor-button-icon svg,
.attic-btn-cta .elementor-button:hover .elementor-button-icon svg,
.attic-btn-cta .elementor-button:focus .elementor-button-icon svg {
	fill: var(--e-global-color-d0d111e, #FFFFFF);
}
.attic-btn-ghost .elementor-button:hover .elementor-button-icon svg,
.attic-btn-ghost .elementor-button:focus .elementor-button-icon svg {
	fill: var(--e-global-color-secondary, #14385F);
}

/* Card-grid (cards con imagen/texto): sombra + altura completa + hover compuesto.
   (Las listas de acordeón usan `.attic-loop-grid` sin lift.) */
.attic-card-grid .e-loop-item > .e-con {
	height: 100%;
	box-shadow: var(--attic-shadow);
	transition: var(--attic-transition);
}
.attic-card-grid .e-loop-item:hover > .e-con {
	transform: translateY(-4px);
	box-shadow: var(--attic-shadow-hover);
	border-color: var(--attic-teal, #099);
}
.attic-card-grid .e-loop-item .elementor-heading-title {
	color: var(--attic-blueberry, #14385f);
}

/* Cards de card-grid (guías/servicios): card-link, excerpt, affordance, imagen. */
.attic-card-grid .e-loop-item > .e-con {
	text-decoration: none;
}
.attic-card-excerpt p {
	color: var(--attic-gray, #424548);
	margin: 0;
	line-height: 1.6;
}
.attic-card-more {
	margin-top: auto;
}
.attic-card-more p {
	margin: 0;
	font-weight: 600;
	color: var(--attic-teal, #099);
	transition: color 0.3s;
}
.attic-card-grid .e-loop-item:hover .attic-card-more p {
	color: var(--attic-blueberry, #14385f);
}

/* Static cards (.attic-card = contenedor-link) — hub, storage-options, help&support. */
.attic-card {
	text-decoration: none;
	box-shadow: var(--attic-shadow);
	transition: var(--attic-transition);
}
.attic-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--attic-shadow-hover);
	border-color: var(--attic-teal, #099);
}
.attic-card .elementor-heading-title {
	color: var(--attic-blueberry, #14385f);
}
.attic-card:hover .attic-card-more p {
	color: var(--attic-orange, #ff7f32);
}

/* Lista de USPs en 2 columnas. */
.attic-usp-list ul {
	columns: 2;
	column-gap: 2.5rem;
	margin: 0;
	padding-left: 1.1rem;
}
.attic-usp-list li {
	margin-bottom: 0.4rem;
	break-inside: avoid;
}
@media (max-width: 600px) {
	.attic-usp-list ul {
		columns: 1;
	}
}

/* USP glossary cards (CPT `usp` + tax `zonas`, loop-item "Attic USP Card"): icono SVG
   (featured-image) + título p-bold. El width 72px va nativo; esto centra + asegura escala SVG. */
.attic-usp-grid .attic-usp-card {
	text-align: center;
}
.attic-usp-card__icon {
	display: flex;
	justify-content: center;
}
.attic-usp-card__icon img {
	width: 72px;
	height: auto;
}
.attic-usp-card__title {
	margin-top: 0.25rem;
}

/* USP Loop Carousel — la lógica (autoplay/nav/dots según items visibles) la aplica
   assets/usp-carousel.js añadiendo/quitando `.is-static`. Aquí solo el estilado. */
.attic-usp-carousel .swiper-slide {
	height: auto;
	display: flex;
}
/* Estático (todos los items caben): ocultar flechas + dots y centrar la fila. */
.attic-usp-carousel.is-static .swiper-pagination,
.attic-usp-carousel.is-static .swiper-button-next,
.attic-usp-carousel.is-static .swiper-button-prev,
.attic-usp-carousel.is-static .elementor-swiper-button {
	display: none !important;
}
.attic-usp-carousel.is-static .swiper-wrapper {
	justify-content: center;
}
/* Flechas al color GLOBAL primario (teal) — ligado al global de Elementor.
   !important justificado: color de marca ("diseño firmado") que vence el default gris
   de Elementor (rgba(238,238,238,.9)) sobre las flechas del loop-carousel.
   NOTA dots: el color teal del dot activo lo da YA el §7 (.swiper-pagination-bullet-active::before),
   un punto de 6px que SOLO cambia de color (no de tamaño). NO pintar aquí el .bullet-active a secas
   (pintaría el elemento de 24px → dot gigante). */
.attic-usp-carousel .swiper-button-next,
.attic-usp-carousel .swiper-button-prev,
.attic-usp-carousel .elementor-swiper-button,
.attic-usp-carousel .elementor-swiper-button-next,
.attic-usp-carousel .elementor-swiper-button-prev {
	color: var(--e-global-color-primary, #099999) !important;
}
.attic-usp-carousel .elementor-swiper-button svg,
.attic-usp-carousel .elementor-swiper-button i {
	fill: var(--e-global-color-primary, #099999) !important;
}

.attic-card-grid .attic-card-img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/* Single: imagen de hero + lead. */
.attic-hero-img img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	border-radius: var(--attic-radius-hero, 24px);
	display: block;
}
.attic-hero-lead p {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--attic-gray, #424548);
	margin: 0;
}
/* Post content del single: ritmo de lectura. */
.attic-single-body {
	max-width: 760px;
}
.attic-single-body p {
	line-height: 1.75;
}

/* CTA band: columnas iguales en desktop, stack en móvil. */
.attic-cta-col {
	flex: 1 1 320px;
}

.attic-page a:focus-visible,
.attic-page .elementor-button:focus-visible {
	outline: 2px solid var(--attic-orange, #ff7f32);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html:has(.attic-page, .attic-location-single) {
		scroll-behavior: auto;
	}
	.attic-card-grid .e-loop-item > .e-con,
	.attic-card-grid .e-loop-item:hover > .e-con,
	.attic-card,
	.attic-card:hover,
	.attic-btn .elementor-button {
		transition: none;
		transform: none;
	}
}

/* =============================================================
   §26 Locations filter (/location/) — Site Facilities + Unit Size
   -------------------------------------------------------------
   Réplica del filtro de atticstorage.co.uk/locations/. Barra con 2 dropdowns
   custom + Search/Clear, inyectada por assets/locations-filter.js encima del
   Loop Grid de centros. Filtra cards por clases facility-* / has-unit-*.
   ============================================================= */
.attic-locf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 1.5rem;
	font-family: Raleway, sans-serif;
}
.attic-locf__dd {
	position: relative;
}
.attic-locf__dd-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 200px;
	justify-content: space-between;
	height: 48px;
	padding: 0 16px;
	background: #fff;
	border: 2px solid var(--e-global-color-42597f9, #a0d1ca);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--e-global-color-secondary, #14385f);
	cursor: pointer;
}
.attic-locf__dd.has-sel .attic-locf__dd-btn {
	border-color: var(--e-global-color-primary, #009999);
}
/* why !important: el reset.css del entorno (Hello Elementor / kit) aplica a
   `button:hover, button:focus, [type="button"]:hover/:focus` un bg #CC3366
   (rosa/granate del kit, NO corporativo). Hay que pisarlo SIEMPRE con un color
   de marca + !important en CADA button custom. Hover en TEAL global
   (directriz Attic 2026-07-03: el filtro del archive hoverea teal, no naranja). */
.attic-locf__dd-btn:hover,
.attic-locf__dd-btn:focus {
	background: var(--attic-teal, #099) !important;
	color: #fff !important;
	border-color: var(--attic-teal, #099) !important;
}
.attic-locf__dd-btn:hover .attic-locf__dd-caret,
.attic-locf__dd-btn:focus .attic-locf__dd-caret {
	color: #fff;
}
.attic-locf__dd-btn:focus-visible {
	outline: 2px solid var(--attic-teal, #099);
	outline-offset: 2px;
}
.attic-locf__dd-caret {
	color: var(--e-global-color-primary, #009999);
	font-size: 12px;
}
.attic-locf__dd-panel {
	display: none;
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	min-width: 260px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 56, 95, 0.15);
	padding: 6px;
}
.attic-locf__dd.is-open .attic-locf__dd-panel {
	display: block;
}
.attic-locf__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--e-global-color-text, #424548);
	cursor: pointer;
}
/* Hover de opción → teal+blanco (directriz Attic 2026-07-03; antes naranja como §21).
   El estado seleccionado (radio activo) conserva el teal sobre crema. */
.attic-locf__opt:hover,
.attic-locf__opt:focus {
	background: var(--attic-teal, #099) !important;
	color: #fff !important;
}
.attic-locf__opt--radio.is-active {
	background: var(--e-global-color-d0d111e, #EAF6F5);
	color: var(--e-global-color-primary, #009999);
	font-weight: 700;
}
.attic-locf__opt input {
	flex: 0 0 auto;
}
.attic-locf__search,
.attic-locf__clear {
	height: 48px;
	padding: 0 22px;
	border: none;
	border-radius: 12px;
	font-family: Raleway, sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.attic-locf__search {
	background: var(--e-global-color-primary, #009999);
	color: #fff;
}
/* why !important: reset.css #CC3366 en hover/focus de buttons (ver nota arriba).
   Search es CTA primario teal → hover oscurece a blueberry (marca), nunca rosa. */
.attic-locf__search:hover,
.attic-locf__search:focus {
	background: var(--attic-blueberry, #14385f) !important;
	color: #fff !important;
}
.attic-locf__clear {
	background: transparent;
	color: var(--e-global-color-text, #424548);
	text-decoration: underline;
	padding: 0 8px;
}
/* why !important: el clear es un button → reset.css le metería bg rosa en hover.
   Mantener transparente + texto teal. */
.attic-locf__clear:hover,
.attic-locf__clear:focus {
	background: transparent !important;
	color: var(--attic-teal, #099) !important;
}
.attic-locf__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--e-global-color-text, #424548);
	margin-left: auto;
}
.e-loop-item.attic-locf-hidden {
	display: none !important;
}
/* Cards del archive: botones VR/quote ocultos PER-CARD cuando su URL dinámica resuelve
   vacía (vr_tour_url / store_id sin valor — p.ej. Bermondsey coming-soon o centro sin
   tour). El botón sin link renderiza <a> sin href → :has() lo detecta. Variante per-card
   del patrón body.attic-no-store del single (§29), que no sirve en archive (body común). */
.elementor-widget-button.attic-card-vr:has(.elementor-button:not([href])),
.elementor-widget-button.attic-card-vr:has(.elementor-button[href=""]),
.elementor-widget-button.attic-card-quote:has(.elementor-button:not([href])),
.elementor-widget-button.attic-card-quote:has(.elementor-button[href=""]) {
	display: none;
}
/* Fila details+VR de la card (flex row): reparto equitativo con basis 0; si el VR se
   oculta (centro sin tour), el botón restante llena la fila → los layouts de 3/2/1
   botones (mockups Attic 2026-07-03) salen solos sin variantes por card. */
.attic-card-btnrow > .elementor-widget-button {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 767px) {
	.attic-locf__dd,
	.attic-locf__dd-btn {
		width: 100%;
	}
	.attic-locf__count {
		margin-left: 0;
		width: 100%;
	}
}

/* =============================================================
   §27 Location Single — /location/{slug}/  (template 8575)
   -------------------------------------------------------------
   Reconstruido con el build-kit (settings-first). Aquí solo lo
   NO expressable / específico del single: bloque contacto con
   iconos+links, mapa responsivo, VR, campos HTML de meta y la
   oferta ([attic_offers]). El layout (hero, secciones, CTA,
   botones, cards) reusa las clases genéricas attic-* de §25.
   Tokens §0. Botones custom → hover de marca (evita #CC3366
   del reset.css; ver feedback_rafter_button_hover_pink_reset).
   ============================================================= */

/* ---- Bloque 2 columnas: datos del centro (izq) + oferta (der) ---- */
.attic-locsingle-twocol {
	align-items: flex-start;
}
.attic-locsingle-col-info {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.attic-locsingle-col-offer {
	position: sticky;
	top: 120px;
}

/* ---- Contacto (icon-list server-side, [attic_location_contact]) ---- */
.attic-loc-contact {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.attic-loc-contact__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.8rem;
	border-radius: 12px;
	color: var(--attic-gray, #424548);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.35;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.attic-loc-contact__row:hover,
.attic-loc-contact__row:focus-visible {
	background: var(--attic-cream, #EAF6F5);
	color: var(--attic-blueberry, #14385F);
	transform: translateX(2px);
}
.attic-loc-contact__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--attic-teal, #099);
}
.attic-loc-contact__row:hover .attic-loc-contact__icon {
	color: var(--attic-orange, #FF7F32);
}
.attic-loc-contact__text {
	word-break: break-word;
}

/* ---- Mapa ([attic_location_map]) ---- */
.attic-loc-map {
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 6px 24px rgba(20, 56, 95, 0.08);
}
.attic-loc-map iframe {
	display: block;
	width: 100%;
	height: var(--map-h, 420px);
	border: 0;
}

/* ---- VR ([attic_location_vr]) ---- */
.attic-loc-vr--embed iframe {
	display: block;
	width: 100%;
	/* 16:9 real, no franja fija (fix recorte 2026-07-29): con solo min-height 480px el
	   iframe quedaba a ancho completo × 480 (ratio ~2.6:1) y la UI de los tours
	   (hotspots/menús de Panotour, controles Matterport) se salía por los bordes.
	   `height:auto` es imprescindible: el atributo height="480/600" del iframe actúa
	   como hint presentacional y sin anularlo `aspect-ratio` no aplica. */
	height: auto;
	aspect-ratio: 16 / 9;
	min-height: 480px;
	border: 0;
	border-radius: 16px;
}
.attic-loc-vr__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border-radius: 8px;
	background: var(--attic-teal, #099);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--attic-teal, #099);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.attic-loc-vr__btn:hover,
.attic-loc-vr__btn:focus-visible {
	background: var(--attic-blueberry, #14385F);
	border-color: var(--attic-blueberry, #14385F);
	color: #fff;
}

/* ---- Campos HTML de meta ([attic_location_field]) ---- */
.attic-loc-field--faqs_html .attic-loc-field,
.attic-loc-field--faqs_html ul {
	margin: 0;
}
.attic-loc-field--site_facilities_html ul,
.attic-loc-field--faqs_html ul {
	padding-left: 1.1rem;
}
.attic-loc-field--site_facilities_html li,
.attic-loc-field--faqs_html li {
	margin-bottom: 0.4rem;
}
.attic-loc-field--trustpilot_widget {
	min-height: 1px;
}

/* ---- Secciones de meta auto-ocultables ([attic_location_field as="section"]) ----
   Si la meta está vacía el shortcode no emite nada → cero espacio (sin título huérfano). */
.attic-locsec {
	padding: 56px 0;
}
.attic-locsec--cream {
	background: var(--attic-cream, #EAF6F5);
}
.attic-locsec--white {
	background: #fff;
}
.attic-locsec__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}
.attic-locsec__h {
	margin: 0 0 1.4rem;
	color: var(--attic-blueberry, #14385F);
	font-size: 1.8rem;
	line-height: 1.2;
}

/* ---- OFERTA ([attic_offers]) ----
   .attic-offer--text = offer migrada como HTML (card cream).
   .attic-offer--inline = fallback a las metas special_offer_*.
   .attic-offer--{id} sin --text = offer diseñada con Elementor (sin card). */
.attic-offer {
	border-radius: 18px;
	overflow: hidden;
}
.attic-offer--text,
.attic-offer--inline {
	background: var(--attic-cream, #EAF6F5);
	border: 1px solid var(--attic-light-teal, #A0D1CA);
	padding: 1.6rem 1.5rem;
}
.attic-offer__intro {
	font-weight: 600;
	color: var(--attic-blueberry, #14385F);
}
.attic-offer__intro ul {
	margin: 0.75rem 0 0;
	padding-left: 1.2rem;
	font-weight: 500;
	color: var(--attic-gray, #424548);
}
.attic-offer__intro li {
	margin-bottom: 0.45rem;
}
.attic-offer__main {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--attic-light-teal, #A0D1CA);
	font-size: 0.95rem;
	color: var(--attic-gray, #424548);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.attic-locsingle-col-offer {
		position: static;
		top: auto;
	}
}
@media (max-width: 767px) {
	.attic-loc-map iframe {
		height: 320px;
	}
	/* Móvil: retrato 3/4 (≈342×456). Con 16/9 a este ancho saldrían ~192px de alto —
	   inusable para un tour 360 táctil; el retrato replica cómo se ve el tour abierto
	   directamente en un móvil. */
	.attic-loc-vr--embed iframe {
		aspect-ratio: 3 / 4;
		min-height: 360px;
	}
}

/* =============================================================
   §27b Location Single — diseño réplica Lockall/Storemore
   (hero imagen+card, oferta card destacado, tabs galería/VR,
   carousel de otros centros). Blueprint workflow 2026-06-21.
   ============================================================= */

/* ---- HERO: imagen del centro de fondo + card con el título + botones ---- */
.attic-hero-loc {
	position: relative;
}
/* El fondo del hero es una imagen DINÁMICA (featured image vía dynamic tag).
   Elementor NO emite background-size/repeat para fondos dinámicos (lo gatea a
   una URL estática) → sin esto el fondo se ve EN MOSAICO (repeat + tamaño
   natural). Forzamos cover/no-repeat/center. Permanente: hace seguro un
   re-run del build / Duplicator (que regenera el hero dinámico). Ver memoria
   feedback_elementor_dynamic_background_no_cover. */
.attic-hero-loc {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}
.attic-hero-loc-card {
	box-shadow: 0 10px 30px -12px rgba(20, 56, 95, 0.25);
}
.attic-hero-loc-card .elementor-heading-title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
	line-height: 1.1;
}
.attic-hero-loc-btns .attic-btn .elementor-button {
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.4);
}
/* botón ghost (Contact us) sobre la foto del hero: texto + borde blancos */
.attic-hero-loc-btns .attic-btn-ghost .elementor-button {
	background: rgba(255, 255, 255, 0.12);
}
.attic-hero-loc-btns .attic-btn-ghost .elementor-button:hover,
.attic-hero-loc-btns .attic-btn-ghost .elementor-button:focus {
	background: #fff !important;
	color: var(--attic-blueberry, #14385F) !important;
}

/* ---- Sticker/roundel de oferta sobre el hero ----
   Lo renderiza el shortcode [attic_hero_sticker] SOLO si el campo `hero_sticker`
   del centro tiene texto (on/off server-side; vacío = no se pinta nada). Naranja
   porque es promo (no choca con el #3: naranja se reserva para CTAs/promos). */
.attic-hero-sticker {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 3;
	width: 7.5rem;
	height: 7.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.5rem;
	border-radius: 50%;
	background: var(--attic-orange, #FF7F32);
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1.1;
	text-transform: uppercase;
	box-shadow: 0 8px 22px -6px rgba(20, 56, 95, 0.5);
	transform: rotate(-8deg);
	pointer-events: none;
}
@media (max-width: 767px) {
	.attic-hero-sticker {
		width: 5.5rem;
		height: 5.5rem;
		font-size: 0.78rem;
		top: 0.75rem;
		right: 0.75rem;
	}
}
/* El widget shortcode que envuelve el sticker NO debe ser el offset-parent
   (Elementor le pone position:relative a cada widget) → lo hacemos static para que
   el roundel absolute se ancle a .attic-hero-loc (arriba-derecha del hero). */
.attic-hero-loc > .elementor-widget-shortcode {
	position: static !important;
}

/* ---- TWO-COL contacto + oferta a igual altura ---- */
.attic-locsingle-twocol {
	align-items: stretch;
}
.attic-locsingle-col-info {
	flex: 1 1 48%;
}

/* descripción con drop-cap (como los hermanos) — text-editor widget con dynamic content */
.attic-loc-desc p:first-of-type::first-letter {
	float: left;
	font-size: 3.1rem;
	line-height: 0.78;
	font-weight: 700;
	color: var(--attic-teal, #099);
	padding: 0.1rem 0.5rem 0 0;
}

/* Contacto: icon-list NATIVO con dynamic content (post-custom-field) */
.attic-loc-iconlist .elementor-icon-list-icon i,
.attic-loc-iconlist .elementor-icon-list-icon svg {
	color: var(--attic-teal, #099);
	fill: var(--attic-teal, #099);
}
.attic-loc-iconlist a {
	text-decoration: none;
}
.attic-loc-iconlist .elementor-icon-list-item:hover .elementor-icon-list-text,
.attic-loc-iconlist .elementor-icon-list-item:focus-within .elementor-icon-list-text {
	color: var(--attic-blueberry, #14385F);
}

/* Offer loop-grid dentro del card teal: 1 columna, sin gaps de grid */
.attic-offer-loopgrid .elementor-grid {
	grid-template-columns: 1fr;
	gap: 0;
}

/* ---- OFERTA en card de color destacado (contenido en blanco) ---- */
.attic-offer-card {
	box-shadow: var(--attic-shadow, 0 20px 40px -15px rgba(20, 56, 95, 0.08));
}
.attic-offer-card .attic-offer,
.attic-offer-card .attic-offer--text,
.attic-offer-card .attic-offer--inline {
	background: transparent;
	border: 0;
	padding: 0;
}
.attic-offer-card .attic-offer__intro,
.attic-offer-card .attic-offer__intro ul,
.attic-offer-card .attic-offer__main,
.attic-offer-card .attic-offer-card .elementor-heading-title {
	color: #fff;
}
.attic-offer-card .attic-offer__main {
	border-top-color: rgba(255, 255, 255, 0.3);
}

/* ---- MULTIMEDIA TABS (nested-tabs Galería/VR): pestaña teal, activa naranja ---- */
/* tab inactiva teal / activa+hover naranja. !important vence el reset de Hello
   Elementor sobre <button> (las tabs son botones) y los defaults de nested-tabs. */
.attic-media-tabs .e-n-tab-title {
	background-color: var(--attic-teal, #099) !important;
	color: #fff !important;
	border-radius: 0.65rem !important; /* !important: nested-tabs/reset lo dejaban en 0 */
	font-weight: 700;
}
.attic-media-tabs .e-n-tab-title:hover,
.attic-media-tabs .e-n-tab-title:focus,
.attic-media-tabs .e-n-tab-title[aria-selected="true"] {
	background-color: var(--attic-blueberry, #14385F) !important; /* azul, no naranja: naranja solo para CTAs */
	color: #fff !important;
}
.attic-media-tabs .e-n-tab-title .e-n-tab-title-text {
	color: inherit !important;
}
/* Barra de pestañas alineada a la IZQUIERDA (Elementor nested-tabs la centra por
   defecto). Se fija en CSS y NO en el setting nativo tabs_justify_horizontal a
   propósito: ese setting lo revierte cada guardado del editor del template 8575
   (origen de la regresión 2026-06-24); el CSS del child es permanente y sobrevive
   a los re-guardados del editor. !important vence el default de nested-tabs. */
.attic-media-tabs .e-n-tabs-heading {
	justify-content: flex-start !important;
}
.attic-media-tabs .e-n-tabs-content {
	margin-top: 1.5rem;
}
/* Mobile: el nested-tabs pasa a acordeón (e-n-tabs-mobile) intercalando título→panel.
   El panel ACTIVO (.e-con.e-active) es un flex item del grid interno de nested-tabs y
   queda constreñido a ~60px, así que la galería (~168px) se desborda y el tab "Virtual
   tour" (intercalado debajo) se solapa con ella. `display:block` saca el panel del grid
   → fluye y reserva su altura real (verificado: panel 60→210px, sin solape). SOLO el
   panel activo: el inactivo conserva su `display:none` (el acordeón sigue funcionando).
   `overflow-y:hidden` en la galería es defensivo (solo scroll horizontal). */
@media (max-width: 767px) {
	.attic-media-tabs .ubicacion-gallery {
		overflow-y: hidden;
	}
	.attic-media-tabs .e-n-tabs-content > .e-con.e-active {
		display: block !important;
	}
}

/* ---- Pestañas multimedia SIN datos: ocultar el BOTÓN, no solo el panel (2026-07-29) ----
   Problema: nested-tabs pinta los botones iterando settings['tabs'] SIN condición
   (modules/nested-tabs/widgets/nested-tabs.php::render()), así que una Display Condition
   sobre el container hijo ocultaría el PANEL y dejaría el BOTÓN huérfano. Resultado hasta
   hoy: la pestaña "VR Tour" salía en los 10 centros y abría un panel vacío en 7.

   Mecanismo: Elementor NO imprime un widget cuyo render() no emite nada
   (Widget_Base::should_print_empty() === false), pero los CONTAINERS sí se imprimen
   siempre. Por tanto el panel de una pestaña sin datos —dynamic tag que devuelve ''—
   queda como <div> SIN un solo .elementor-widget dentro (verificado por curl). De ahí la
   regla SIMÉTRICA: «panel N sin widgets → botón N oculto». Botón y panel comparten
   `data-tab-index`, así que la regla no codifica QUÉ pestaña es cuál y sobrevive a que se
   reordenen, se añadan o se quiten (por eso NO se targetea por el id generado
   `e-n-tab-title-<hexdec(widget_id)><n>`, que se desplaza al reordenar).

   Por qué CSS y no JS: LiteSpeed sirve TODO el JS con type="litespeed/javascript" y lo
   retrasa hasta la primera interacción del usuario (litespeed_ui_events), así que un
   ocultado por JS dejaría la pestaña vacía a la vista hasta que alguien tocara la página,
   y encima provocaría CLS al reflowar la fila de botones. El CSS va en el <head>: cero FOUC.

   Requisito estructural: los paneles deben ser `content_width: full`. En "boxed" Elementor
   añade un <div class="e-con-inner"> y el panel nunca estaría "sin widgets".

   `body:not(.attic-elementor-preview)`: dentro del editor el template se ve ENTERO
   (functions.php → atticstorage_is_elementor_preview), o Carlos no podría editar las
   pestañas de un centro que no tiene ese dato. */
body:not(.attic-elementor-preview) .attic-media-tabs .e-n-tabs:not(:has(> .e-n-tabs-content > .e-con[data-tab-index="1"] .elementor-widget)) > .e-n-tabs-heading > .e-n-tab-title[data-tab-index="1"],
body:not(.attic-elementor-preview) .attic-media-tabs .e-n-tabs:not(:has(> .e-n-tabs-content > .e-con[data-tab-index="2"] .elementor-widget)) > .e-n-tabs-heading > .e-n-tab-title[data-tab-index="2"],
body:not(.attic-elementor-preview) .attic-media-tabs .e-n-tabs:not(:has(> .e-n-tabs-content > .e-con[data-tab-index="3"] .elementor-widget)) > .e-n-tabs-heading > .e-n-tab-title[data-tab-index="3"],
body:not(.attic-elementor-preview) .attic-media-tabs .e-n-tabs:not(:has(> .e-n-tabs-content > .e-con[data-tab-index="4"] .elementor-widget)) > .e-n-tabs-heading > .e-n-tab-title[data-tab-index="4"],
body:not(.attic-elementor-preview) .attic-media-tabs .e-n-tabs:not(:has(> .e-n-tabs-content > .e-con[data-tab-index="5"] .elementor-widget)) > .e-n-tabs-heading > .e-n-tab-title[data-tab-index="5"] {
	display: none !important;
}

/* Si NINGÚN panel tiene contenido, sobra la sección entera (incluido el H2). Los dos
   :has() son HERMANOS sobre el mismo sujeto — legal; lo inválido es anidar uno dentro
   de otro. */
body:not(.attic-elementor-preview) .attic-locsingle-media:has(.attic-media-tabs .e-n-tabs-content):not(:has(.attic-media-tabs .e-n-tabs-content > .e-con .elementor-widget)) {
	display: none !important;
}

/* El player de YouTube del widget `video` (pestaña Video): mismo encuadre que el embed
   VR de al lado. Elementor no expone el radius del wrapper como setting. */
.attic-media-tabs .attic-loc-video .elementor-wrapper {
	border-radius: 16px;
	overflow: hidden;
}

/* ---- OTHER CENTRES carousel: card foto + título en chip teal ---- */
.attic-centre-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 12px 30px -16px rgba(20, 56, 95, 0.35);
	text-decoration: none;
}
.attic-centre-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -18px rgba(20, 56, 95, 0.45);
}
.attic-centre-card__title .elementor-heading-title {
	display: inline-block;
	background: var(--attic-teal, #099);
	color: #fff;
	padding: 0.45rem 0.9rem;
	border-radius: 0.7rem;
}
.attic-centres-carousel .swiper-button-next,
.attic-centres-carousel .swiper-button-prev,
.attic-centres-carousel .elementor-swiper-button {
	color: #fff;
	background: var(--attic-teal, #099);
	border-radius: 8px;
}

/* ---- Responsive del diseño hermano ---- */
@media (max-width: 880px) {
	.attic-locsingle-twocol {
		flex-direction: column;
	}
	.attic-locsingle-col-info,
	.attic-offer-card {
		width: 100% !important;
		flex-basis: auto;
	}
	.attic-hero-loc {
		min-height: 300px;
	}
}

/* =============================================================
   §27c Location Single — FACILITIES GRID (icono + nombre)
   -------------------------------------------------------------
   Grid 6 columnas de las facilities (taxonomía `facility`) marcadas
   en el centro, bajo el texto de "Site facilities". Render server-side
   (dynamic tag atticstorage-location-facilities → .attic-facilities-grid).
   Icono = term-meta facility_icon (SVG). 6/4/3 cols responsive.
   ============================================================= */
.attic-facilities-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.25rem 1rem;
	margin-top: 1.5rem;
}

.attic-facility {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

.attic-facility__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}

.attic-facility__icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.attic-facility__label {
	font-size: 0.78rem;
	line-height: 1.25;
	color: var(--attic-blueberry, #14385F);
}

@media (max-width: 1024px) {
	.attic-facilities-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 600px) {
	.attic-facilities-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================
   §28 — LOCATION SINGLE: oferta inline + storage units + team
   (ronda modelo de datos 2026-06-24). Grids 3/4-col por el loop-grid nativo.
   ============================================================= */
/* Oferta: la copy inline (special_offer_intro/main) va sobre el card teal →
   texto blanco. !important = diseño firmado (blanco sobre teal); vence inline
   styles que pudiera traer el HTML migrado de la oferta. */
.attic-offer-card,
.attic-offer-card p,
.attic-offer-card li,
.attic-offer-card h1, .attic-offer-card h2, .attic-offer-card h3, .attic-offer-card h4,
.attic-offer-card .attic-offer-intro,
.attic-offer-card .attic-offer-main,
.attic-offer-card .attic-offer-intro *,
.attic-offer-card .attic-offer-main * {
	color: #fff !important;
}
.attic-offer-card a {
	color: #fff !important;
	text-decoration: underline;
}

/* Storage unit cards: centradas, título blueberry, precio teal destacado. */
.attic-su-card {
	text-align: center;
}
.attic-su-card__title {
	color: var(--attic-blueberry, #14385F);
}
.attic-su-card__price {
	color: var(--attic-teal, #099);
	font-weight: 700;
}
.attic-su-card__dims,
.attic-su-card__fits {
	color: var(--attic-gray, #424548);
	font-size: 0.9rem;
}

/* Team member cards: foto circular + texto centrado. */
.attic-team-card {
	text-align: center;
}
.attic-team-card__photo img {
	width: 140px !important;
	height: 140px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}
.attic-team-card__name {
	color: var(--attic-blueberry, #14385F);
}
.attic-team-card__role {
	color: var(--attic-teal, #099);
	font-weight: 600;
}

/* =============================================================
   §29 — STORAGE UNITS "Available units": cards horizontales compactas
   (imagen izq + título/descripción/CTA) + tabs por bracket. Como la página
   original de Attic, con marca. Loop-item 9389. Ronda 2026-06-24.
   ============================================================= */
.attic-su-card {
	border: 1px solid var(--attic-light-teal, #A0D1CA);
	border-radius: 1rem;
	overflow: hidden;
	background: #fff;
	align-items: stretch;
}
.attic-su-card__img {
	flex: 0 0 38%;
	max-width: 38%;
	align-self: stretch;
}
.attic-su-card__img img {
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	display: block;
}
.attic-su-card__body {
	flex: 1 1 auto;
}
.attic-su-card__title {
	color: var(--attic-blueberry, #14385F);
	margin: 0;
}
.attic-su-card__desc {
	color: var(--attic-gray, #424548);
}
/* CTA "Instant Online Quote": botón naranja de marca; hover blueberry (vence el rosa del reset). */
.attic-su-cta .elementor-button,
.attic-su-cta a.elementor-button {
	background-color: var(--attic-orange, #FF7F32) !important;
	color: #fff !important;
	border-radius: 0.5rem !important;
}
.attic-su-cta .elementor-button:hover,
.attic-su-cta .elementor-button:focus {
	background-color: var(--attic-blueberry, #14385F) !important;
	color: #fff !important;
}
/* Coming-soon / centro sin store en el portal: ocultar el quote CTA (no hay storeId
   con el que enlazar al portal → botón inerte). functions.php añade body.attic-no-store
   cuando la location no tiene meta store_id. Las cards de unidad siguen visibles.
   También el CTA "Get a quote" del hero (.attic-hero-quote), que deep-linka al mismo
   store → inerte sin store_id; en el hero queda "Contact us". */
body.attic-no-store .attic-su-cta,
body.attic-no-store .attic-hero-quote {
	display: none !important;
}
@media (max-width: 767px) {
	.attic-su-card {
		flex-direction: column !important;
	}
	.attic-su-card__img {
		flex-basis: auto;
		max-width: 100%;
	}
}
/* Tabs por bracket de la sección SU (mismo look que .attic-media-tabs).
   Las cuatro pestañas se reparten TODO el ancho (decisión Carlos 2026-08-25):
   el widget lleva la justificación en "stretch" en sus settings, y aquí se
   iguala el reparto para que las cuatro midan lo mismo — con "stretch" a secas
   Elementor reparte solo el espacio SOBRANTE, así que quedarían desiguales
   porque los títulos tienen longitudes distintas. `flex-basis: 0` neutraliza el
   ancho natural del texto y el relleno de cada botón absorbe la diferencia.
   Ya NO se alinean a la izquierda: eso era lo que las dejaba encogidas. */
.attic-su-section .e-n-tabs-heading {
	flex-wrap: wrap;
	gap: 12px;
}
.attic-su-tabs .e-n-tab-title,
.attic-su-section .e-n-tab-title {
	flex: 1 1 0 !important; /* vence a --n-tabs-title-flex-basis: content del widget */
	min-width: 0;
	justify-content: center;
	text-align: center;
	white-space: nowrap; /* el texto, en una sola línea */
}
/* Entre 768 y 1024 el texto largo ("Extra-Large Unit (160+ sq ft)" pide 282px)
   no cabe en una cuarta parte, así que pasan a dos filas de dos: siguen
   ocupando el 100% del ancho y el texto sigue sin partirse. */
@media (min-width: 768px) and (max-width: 1024px) {
	.attic-su-tabs .e-n-tab-title,
	.attic-su-section .e-n-tab-title {
		flex: 1 1 calc(50% - 12px) !important;
	}
}
.attic-su-section .e-n-tab-title {
	background-color: var(--attic-teal, #099) !important;
	color: #fff !important;
	border-radius: 0.65rem !important;
	font-weight: 700;
}
.attic-su-section .e-n-tab-title:hover,
.attic-su-section .e-n-tab-title:focus,
.attic-su-section .e-n-tab-title[aria-selected="true"] {
	background-color: var(--attic-blueberry, #14385F) !important; /* azul, no naranja: naranja solo para CTAs */
	color: #fff !important;
}
.attic-su-section .e-n-tab-title .e-n-tab-title-text {
	color: inherit !important;
}

/* ============================================
   §30 Other Locations (CPT) — single content + archive cards
   ============================================
   El CPT `other_location` aloja las ~76 páginas-área SEO (archive en
   /locations/other-locations/, singles en /locations/other-locations/{slug}/).
   - Single: hero de marca (reusa §27/§27b .attic-hero-loc) + el post_content
     clásico migrado VERBATIM, maquetado en runtime por el filtro the_content
     `atticstorage_ol_layout_content` (functions.php) en secciones
     find/features/prose dentro de .attic-ol-content > .attic-ol-body.
   - Archive: grid de cards de área (.attic-ol-card) con loop-item nativo.
   Tokens §0. !important solo para vencer el reset del kit en botones del contenido
   y forzar el ancho del iframe del mapa.
*/

/* ---- Single: maquetación canónica del post_content ----
   El filtro the_content `atticstorage_ol_layout_content` (functions.php) trocea
   el contenido clásico en secciones (.attic-ol-sec--find|features|prose) y este
   CSS las maqueta: split editorial info|mapa, panel blanco de features con
   checks, prosa 68ch centrada. Las reglas base sobre .attic-ol-content quedan
   como FALLBACK por si el filtro no corre (parse fallido → contenido original).
   H2 = tipografía global del kit SIEMPRE (canon) — aquí solo color + firma. */
.attic-ol-content {
	max-width: 1160px;
	margin-inline: auto;
}
.attic-ol-content .elementor-widget-container {
	color: var(--attic-gray, #424548);
	font-size: 1.05rem;
	line-height: 1.7;
}
.attic-ol-content h2,
.attic-ol-content h3 {
	color: var(--attic-blueberry, #14385F);
	line-height: 1.2;
	margin: 1.8em 0 0.6em;
}
.attic-ol-content h3 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.45rem); }
.attic-ol-content p { margin: 0 0 1.1em; }
.attic-ol-content a {
	color: var(--attic-teal, #099);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}
.attic-ol-content a:hover { color: var(--attic-orange, #FF7F32); }
.attic-ol-content ul,
.attic-ol-content ol { margin: 0 0 1.2em 1.2em; }
.attic-ol-content li { margin-bottom: 0.45em; }

/* Mapas embebidos — fallback genérico (sin filtro) → responsive + redondeado */
.attic-ol-content iframe {
	width: 100% !important; /* algunos posts migrados llevan width inline */
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 300px;
	border: 0;
	border-radius: 14px;
	margin: 0.5em 0 1.2em;
	display: block;
}

/* Ritmo vertical entre secciones */
.attic-ol-body .attic-ol-sec + .attic-ol-sec { margin-top: clamp(56px, 8vw, 88px); }

/* Firma de heading de sección: subrayado corto teal (los h2 abren sección) */
.attic-ol-body h2 { margin: 0 0 0.6em; }
/* Los encabezados llegaron de la web antigua con negritas sueltas dentro
   (<h2><strong>About </strong>Camden</h2>), así que en 59 de las 76 páginas
   se mezclaban dos pesos en el mismo título. El peso lo manda el encabezado;
   así queda uniforme sin tocar el contenido de las 59 páginas, que el cliente
   edita a mano. (Petición del cliente: "match Alperton".) */
.attic-ol-body h2 strong,
.attic-ol-body h3 strong { font-weight: inherit; }
.attic-ol-body h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--attic-teal, #099);
}

/* Sección "Find" — split editorial asimétrico info | mapa */
.attic-ol-sec--find {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
	gap: clamp(32px, 4.5vw, 72px);
}
.attic-ol-find__map { display: flex; }
.attic-ol-body .attic-ol-find__map iframe {
	flex: 1;
	aspect-ratio: auto;
	height: auto;
	min-height: 440px;
	margin: 0;
	border-radius: 20px;
	background: var(--attic-cream, #EAF6F5); /* hueco digno si el consent bloquea el mapa */
	box-shadow: var(--attic-shadow, 0 20px 40px -15px rgba(20, 56, 95, 0.08));
}
.attic-ol-address {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--attic-blueberry, #14385F);
	border-left: 3px solid var(--attic-teal, #099);
	padding-left: 14px;
	margin: 0 0 1.5em;
}
.attic-ol-contact { font-weight: 600; margin-bottom: 0.4em; }

/* Sección "Key Features" — panel blanco sobre el body soft-teal, lista → grid con checks */
.attic-ol-sec--features {
	background: #fff;
	border-radius: 24px;
	padding: clamp(28px, 4.5vw, 56px);
	box-shadow: var(--attic-shadow, 0 20px 40px -15px rgba(20, 56, 95, 0.08));
}
.attic-ol-sec--features > p { max-width: 65ch; }
.attic-ol-sec--features ul {
	list-style: none;
	margin: 1.8em 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 44px;
}
.attic-ol-sec--features ul:not(:last-child) { margin-bottom: 1.6em; }
.attic-ol-sec--features li {
	position: relative;
	padding-left: 38px;
	margin: 0;
}
.attic-ol-sec--features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--attic-cream, #EAF6F5);
}
.attic-ol-sec--features li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: calc(0.1em + 7px);
	width: 12px;
	height: 7px;
	border-left: 2.5px solid var(--attic-teal, #099);
	border-bottom: 2.5px solid var(--attic-teal, #099);
	transform: rotate(-45deg);
}

/* Secciones de prosa (About + leads) — bloque editorial centrado, texto left */
.attic-ol-sec--prose {
	max-width: 68ch;
	margin-inline: auto;
}
.attic-ol-sec--prose > p:last-child { margin-bottom: 0; }

.attic-ol-body .wp-block-buttons { margin-top: 1.6em; }

@media (max-width: 1024px) {
	.attic-ol-sec--find { grid-template-columns: 1fr; gap: 28px; }
	.attic-ol-body .attic-ol-find__map iframe { aspect-ratio: 16 / 10; min-height: 320px; }
}
@media (max-width: 767px) {
	.attic-ol-sec--features ul { grid-template-columns: 1fr; gap: 14px; }
	.attic-ol-address { font-size: 1.05rem; }
}

/* Botones del contenido clásico (wp-block-button) → marca, vence el reset rosa #CC3366 */
.attic-ol-content .wp-block-button__link,
.attic-ol-content .wp-block-buttons a {
	background: var(--attic-teal, #099) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 700;
	text-decoration: none;
	padding: 0.7em 1.4em;
}
.attic-ol-content .wp-block-button__link:hover,
.attic-ol-content .wp-block-buttons a:hover {
	background: var(--attic-blueberry, #14385F) !important;
	color: #fff !important;
}

/* ---- Archive: grid de cards de área ---- */
.attic-ol-archive-grid .attic-ol-card {
	height: 100%;
	text-decoration: none;
	transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.attic-ol-archive-grid .attic-ol-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(20,56,95,.12);
	border-color: var(--attic-teal, #099) !important;
}
.attic-ol-card__img img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}
.attic-ol-card__title { margin: 0; }
.attic-ol-card__more {
	margin: 0;
	color: var(--attic-teal, #099);
	font-weight: 700;
	font-size: 0.9rem;
	transition: color .3s, transform .3s;
}
.attic-ol-archive-grid .attic-ol-card:hover .attic-ol-card__more {
	color: var(--attic-orange, #FF7F32);
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.attic-ol-archive-grid .attic-ol-card,
	.attic-ol-card__more { transition: none; }

/* Fichas de CASOS DE ÉXITO (listado /case-studies/) — mismo molde que las de área,
   pero aquí las imágenes son una mezcla de logos y fotografías con proporciones muy
   distintas, así que la rejilla quedaba a saltos. Altura fija y encuadre centrado:
   los logos se ven sobre su propio fondo y las fotos no descuadran la fila. */
.attic-cs-card .attic-ol-card__img img {
	width: 100% !important;
	/* !important: Elementor genera CSS por elemento para el widget de imagen que
	   carga después del tema y devuelve la altura a automática. */
	height: 190px !important;
	object-fit: contain !important;
	object-position: center;
	background: var(--e-global-color-fcf3ee0, #EAF6F5);
	padding: 12px;
}
@media (max-width: 767px) {
	.attic-cs-card .attic-ol-card__img img { height: 160px !important; }
}

}

/* ============================================
   §31 Home — "Self Storage Across London" (réplica de prod)
   ============================================
   Sección de la home (post 9, contenedor e7fd1b6): eyebrow + H2 + 4 columnas
   (West / North West / North / East London), cada una un Icon List nativo cuyos
   items enlazan a /locations/?lat=&long=&address=&submit=Search → el locator
   marca el centro Attic más cercano. Cada item se estiliza como fila "Big Yellow"
   (nombre a la izq, flecha → a la der, border-bottom, hover teal→naranja).
   !important justificado: vencer el layout/spacing inyectado por Elementor en el
   widget icon-list y el reset del kit. Tokens §0.
*/

.attic-locsec__head { margin-bottom: 28px; }
.attic-locsec__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}
.attic-locsec__region {
	margin: 0 0 6px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--attic-teal, #099);
}

/* Icon List → filas estilo "Big Yellow" con flecha a la derecha */
.attic-locsec__list .elementor-icon-list-items { padding: 0; margin: 0; }
.attic-locsec__list .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--attic-light-teal, #A0D1CA);
}
.attic-locsec__list .elementor-icon-list-item:last-child { border-bottom: none; }
.attic-locsec__list .elementor-icon-list-item > a {
	display: flex !important;
	flex-direction: row-reverse;            /* icono (flecha) a la derecha */
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 14px 6px;
	color: var(--attic-blueberry, #14385F);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.3s, transform 0.3s, padding 0.3s, color 0.3s;
}
.attic-locsec__list .elementor-icon-list-text { color: inherit; }
.attic-locsec__list .elementor-icon-list-icon { margin: 0 !important; flex: 0 0 auto; }
.attic-locsec__list .elementor-icon-list-icon i,
.attic-locsec__list .elementor-icon-list-icon svg {
	color: var(--attic-teal, #099);
	fill: var(--attic-teal, #099);
	font-size: 0.85rem;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}
.attic-locsec__list .elementor-icon-list-item > a:hover {
	background: var(--attic-cream, #EAF6F5);
	padding-left: 12px;
	padding-right: 12px;
	transform: translateX(3px);
}
.attic-locsec__list .elementor-icon-list-item > a:hover .elementor-icon-list-icon i,
.attic-locsec__list .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg {
	color: var(--attic-orange, #FF7F32);
	fill: var(--attic-orange, #FF7F32);
	transform: translateX(4px);
}
.attic-locsec__list .elementor-icon-list-item > a:focus-visible {
	outline: 2px solid var(--attic-teal, #099);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.attic-locsec__list .elementor-icon-list-item > a,
	.attic-locsec__list .elementor-icon-list-icon i,
	.attic-locsec__list .elementor-icon-list-icon svg { transition: none; }
}

/* ============================================
   §32 Other Location Single — "Visit one of our London stores"
   ============================================
   Sección soft-teal (airy) que sustituye la "sidebar infinita" de prod por un
   carrusel de los 10 centros REALES. Las cards (loop-item 9314) y el carrusel
   reusan `.attic-centre-card` + `.attic-centres-carousel` (§27). Aquí solo el
   wrapper + intro centrado. Tokens §0.
*/
.attic-ol-stores__intro .elementor-widget-container {
	color: var(--attic-gray, #424548);
	font-size: 1.05rem;
	line-height: 1.6;
}
.attic-ol-stores .attic-centres-carousel { margin-top: 1.5rem; }
.attic-ol-stores__more { margin-top: 0.25rem; }

/* =============================================================
   §33 Storage option photo-cards (grid foto + título, container-link)
   ----------------------------------------------------------------
   Grid de tarjetas-imagen reutilizable (p.ej. /personal-storage/ "We've got
   your personal storage needs covered"). Settings-first: el container `.attic-photo-card`
   (html_tag:a, border light-teal, radius 14, overflow hidden) y los widgets ya traen su
   estilo nativo; aquí SOLO lo no-expressable: imagen cover con aspect-ratio uniforme +
   hover lift compuesto + color de la affordance. Tokens §0. Sin !important.
   ============================================================= */
.attic-photo-card {
	overflow: hidden;
	height: 100%;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.attic-photo-card:hover {
	transform: translateY(-4px);
	border-color: var(--attic-teal, #099);
	box-shadow: 0 18px 40px -22px rgba(20, 56, 95, .28);
}
.attic-photo-card .attic-photo-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 865 / 528;
	object-fit: cover;
}
.attic-photo-card__body { flex: 1 1 auto; }
.attic-photo-card__more p {
	margin: 0;
	color: var(--attic-teal, #099);
	font-weight: 700;
}
.attic-photo-card:hover .attic-photo-card__more p { color: var(--attic-orange, #FF7F32); }

/* =============================================================
   §34 Sitemap — HTML sitemap dinámico (shortcode [attic_sitemap])
   -------------------------------------------------------------
   Listas de enlaces por post-type (Pages/Blog Posts/Locations/
   Guides/Case Studies) renderizadas por el shortcode dentro de cada
   k_section. Multi-columna responsive (3/2/1) para que las secciones
   largas (Pages/Blog Posts) no queden en una columna kilométrica.
   On-brand: links blueberry → teal en hover + subrayado light-teal.
   ============================================================= */
.attic-sitemap__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 3;
	column-gap: 2.5rem;
}
.attic-sitemap__item {
	break-inside: avoid;
	margin: 0 0 0.55rem;
}
.attic-sitemap__item a {
	color: var(--attic-blueberry, #14385F);
	text-decoration: none;
	line-height: 1.5;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.attic-sitemap__item a:hover,
.attic-sitemap__item a:focus-visible {
	color: var(--attic-teal, #099);
	border-color: var(--attic-light-teal, #A0D1CA);
}
@media (max-width: 1024px) {
	.attic-sitemap__list { column-count: 2; }
}
@media (max-width: 600px) {
	.attic-sitemap__list { column-count: 1; }
}

/* ============================================================================
   §35 Awards loop-item card (horizontal) — logo izq + título/desc der.
   Loop-item `Attic Award Card` (Loop Grid Source=Awards). Réplica de prod
   (media-text 26% auto). El template pone el layout row + estilo de tarjeta en
   settings nativos; aquí SOLO lo no-expressable: widths de columna, object-fit
   del logo, apilado móvil, y —clave— el TÍTULO TEAL cuando el award tiene link
   guardado (Elementor solo emite <a> si award_url existe; los 8 sin link quedan
   blueberry). Namespace .attic-award-card (sin colisiones).
   ========================================================================== */
.attic-award-card__logo { flex: 0 0 26%; max-width: 26%; align-self: center; }
.attic-award-card__logo img { width: 100%; height: auto; object-fit: contain; display: block; }
.attic-award-card__body { flex: 1 1 auto; }
.attic-award-card__title { margin: 0; }
.attic-award-card__title a { color: var(--attic-teal, #099) !important; text-decoration: none; }
.attic-award-card__title a:hover,
.attic-award-card__title a:focus-visible { text-decoration: underline; }
.attic-award-card__desc { color: var(--attic-gray, #424548); }
/* ≤1024 (tablet incl.): el grid pasa a 2 columnas (~340px) → la card en FILA deja el cuerpo
   en ~80px y el texto se apila letra a letra (cards de >2500px). Apilar a columna. */
@media (max-width: 1024px) {
	.attic-award-card { flex-direction: column !important; text-align: center; }
	.attic-award-card__logo { flex: 0 0 auto; max-width: 160px; margin: 0 auto; }
}


/* §36 — Charity card (/about-us/charity-local-community-support/, CPT charity, 2026-07-02).
   Card horizontal clon del award card (§35); solo lo NO expresable en settings:
   object-fit del logo + apilado móvil + ocultar el botón 'Visit website' cuando la
   entidad no tiene charity_url (Elementor emite el <a> sin href / href vacío). */
.attic-charity-card__logo { flex: 0 0 26%; max-width: 26%; align-self: center; }
.attic-charity-card__logo img { width: 100%; height: auto; object-fit: contain; display: block; }
.attic-charity-card__body { flex: 1 1 auto; }
.attic-charity-card__desc { color: var(--attic-gray, #424548); }
.attic-charity-card .attic-btn a:not([href]),
.attic-charity-card .attic-btn a[href=""] { display: none; }
/* MISMA ALTURA ENTRE VECINAS (cliente 2026-07-02): las cards de una misma fila (award y
   charity) miden igual — grid-auto-rows:1fr iguala la fila al contenido más alto y la card
   llena su item (los .e-loop-item ya estiran por CSS grid).
   ⚠ Solo desde 1025 px: por debajo el listado va a UNA columna, así que no hay vecina que
   igualar y lo único que hace el 1fr es dar a cada card la altura de la más larga del
   listado — el hueco vacío que reportó el cliente el 2026-08-25 en premios y charities. */
@media (min-width: 1025px) {
	.elementor-loop-container:has(> .e-loop-item > .attic-award-card),
	.elementor-loop-container:has(> .e-loop-item > .attic-charity-card) { grid-auto-rows: 1fr; }
	.e-loop-item > .e-con.attic-award-card,
	.e-loop-item > .e-con.attic-charity-card { height: 100%; }
}
/* ≤1024 (tablet incl.): mismo motivo que §35 — en 2 columnas la fila no cabe. */
@media (max-width: 1024px) {
	.attic-charity-card { flex-direction: column !important; text-align: center; }
	.attic-charity-card__logo { flex: 0 0 auto; max-width: 180px; margin: 0 auto; }
	.attic-charity-card .attic-btn { align-self: center; }
	.attic-charity-card__body { align-items: center; }
}


/* §37 — Meet the team (/about-us/meet-the-team/, grid 5 col del CPT team, 2026-07-02).
   Nombre y cargo SIEMPRE en la misma posición: 17/39 miembros sin foto (Elementor omite el
   widget imagen) → el nombre saltaba arriba. Fix: altura uniforme (grid-auto-rows:1fr) +
   slot de foto de tamaño FIJO en el wrapper del widget + margin-top equivalente (slot+gap)
   en el nombre de las cards SIN foto → el nombre empieza SIEMPRE en la misma Y.
   ⚠ NO usar ::before/::after en .e-con para esto: Elementor los reserva (overlay absolute).
   SCOPED a .attic-team-grid: el loop-item 9390 también se usa en el single de location. */
.attic-team-grid .elementor-loop-container { grid-auto-rows: 1fr; }
.attic-team-grid .e-loop-item > .e-con.attic-team-card { height: 100%; justify-content: flex-start; }
.attic-team-grid .elementor-widget.attic-team-card__photo {
	width: 140px; height: 140px; margin-left: auto; margin-right: auto; flex: 0 0 auto;
}
.attic-team-grid .elementor-widget.attic-team-card__photo img,
.attic-team-grid .elementor-widget.attic-team-card__photo .elementor-widget-container {
	/* 0-3-1 + max-height/aspect-ratio: constriñe aunque un height:auto de Elementor gane la cascada
	   (sin esto la foto desbordaba el slot de 96px en móvil: 96×140). */
	width: 100%; height: 100%; max-height: 100%; aspect-ratio: 1 / 1;
	object-fit: cover; border-radius: 50%; display: block;
}
/* Card sin foto: el nombre arranca donde arrancaría tras el slot (140px + gap 10). */
.attic-team-grid .e-con.attic-team-card:not(:has(.attic-team-card__photo)) .elementor-widget.attic-team-card__name {
	margin-top: 150px;
}
/* Móvil (2 col ≈170px): slot 96px para que la foto no desborde ni se achate. */
@media (max-width: 767px) {
	.attic-team-grid .elementor-widget.attic-team-card__photo { width: 96px; height: 96px; }
	.attic-team-grid .e-con.attic-team-card:not(:has(.attic-team-card__photo)) .elementor-widget.attic-team-card__name {
		margin-top: 106px;
	}
}


/* §38 — Timeline vertical (Our Self-Storage Guide /about-us/the-self-storage-process/, 2026-07-02).
   6 steps como timeline: círculo numerado teal (settings nativos: bg global primary + texto Pure
   White + radius 50%) + título blueberry + texto. GEOMETRÍA aquí (lo no expresable):
   - Círculo de tamaño fijo y centrado (56px / 40px móvil).
   - LÍNEA VERTICAL = background-image linear-gradient posicionado en el contenedor de steps.
     ⚠ NUNCA ::before/::after en .e-con para esto (Elementor los reserva para overlays — incidente
     meet-the-team 2026-07-02). El gradient es inmune. */
.attic-timeline__steps {
	background-image: linear-gradient(var(--attic-light-teal, #A0D1CA), var(--attic-light-teal, #A0D1CA));
	background-repeat: no-repeat;
	background-size: 2px calc(100% - 72px);
	background-position: 27px 36px; /* eje del círculo de 56px */
}
.attic-timeline__step { align-items: flex-start; }
.attic-timeline__marker {
	/* el wrapper ES el círculo: bg teal global + radius 50% van en settings nativos del widget */
	width: 56px; min-width: 56px; height: 56px; flex: 0 0 56px;
}
.attic-timeline__marker .elementor-heading-title,
.attic-timeline__marker > div {
	/* el heading interior llena el círculo y centra el número */
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0;
}
@media (max-width: 767px) {
	.attic-timeline__steps { background-size: 2px calc(100% - 52px); background-position: 19px 26px; }
	.attic-timeline__marker { width: 40px; min-width: 40px; height: 40px; flex: 0 0 40px; }
}

/* §39 — Grid de items (What makes us different /about-us/what-makes-us-different/, 2026-07-02).
   CUADRÍCULA NORMAL (decisión Carlos: sin bento) — 3 col desktop / 2 tablet / 1 móvil, celdas
   uniformes con chip de icono. Estética de celda en settings NATIVOS; aquí solo el grid (no
   expresable) + chip + hover. `.elementor-element.attic-bento__grid` vence el flex de .e-con. */
.elementor-element.attic-bento__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.attic-bento__grid > .e-con { min-width: 0; }
/* chip de icono: círculo soft-teal en el WRAPPER del widget (inmune a resets de img) */
.elementor-widget.attic-bento__icon {
	width: 56px; height: 56px; flex: 0 0 auto;
	background: var(--attic-cream, #EAF6F5); border-radius: 50%; padding: 12px; box-sizing: border-box;
}
.attic-bento__icon img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }
/* celda acento (teal sólida): textos y links en blanco, chip translúcido */
.attic-bento__cell--accent, .attic-bento__cell--accent p { color: #fff; }
.attic-bento__cell--accent a { color: #fff !important; text-decoration: underline; }
.attic-bento__cell--accent .elementor-widget.attic-bento__icon { background: rgba(255, 255, 255, 0.18); }
/* hover lift sutil */
.attic-bento__grid > .e-con { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.attic-bento__grid > .e-con:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 56, 95, 0.10); }
@media (max-width: 1024px) {
	.elementor-element.attic-bento__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.elementor-element.attic-bento__grid { grid-template-columns: 1fr; }
}

/* §40 — Storage calculator + size chart (/storage-calculator/ page 620, 2026-07-02).
   a) Calculadora interactiva: markup propio del shortcode [attic_storage_calculator]
      (functions.php, datos verbatim de prod) + assets/storage-calculator.js (sincronización).
      Al ser markup propio (no widgets Elementor) TODO su estilo vive aquí; acordeón de
      modos CSS-only via :checked (sin JS degrada a estática, nunca invisible).
   b) Size chart: filas NATIVAS (patrón .attic-link-row); aquí solo divisores, hover y los
      labels móviles ::before — SOLO sobre widgets, nunca .e-con (Elementor los reserva).
   Tokens §0. Botón CTA propio con hover de marca explícito (regla pink-reset). */

/* ---- a) Calculadora ---- */
.attic-calc {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	background: #fff;
	border: 1px solid var(--attic-light-teal, #A0D1CA);
	border-radius: 1rem;
	padding: clamp(20px, 3vw, 32px);
}
.attic-calc__modes {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.attic-calc__mode {
	border-bottom: 1px solid var(--attic-light-teal, #A0D1CA);
}
.attic-calc__mode-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.attic-calc__mode-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 4px;
	cursor: pointer;
	margin: 0;
}
.attic-calc__mode-label {
	font-weight: 700;
	color: var(--attic-blueberry, #14385F);
}
.attic-calc__mode-label::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--attic-light-teal, #A0D1CA);
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: -2px;
	box-sizing: border-box;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.attic-calc__mode-radio:checked + .attic-calc__mode-head .attic-calc__mode-label::before {
	border-color: var(--attic-teal, #099);
	background: var(--attic-teal, #099);
	box-shadow: inset 0 0 0 2.5px #fff;
}
.attic-calc__mode-radio:focus-visible + .attic-calc__mode-head .attic-calc__mode-label::before {
	outline: 2px solid var(--attic-teal, #099);
	outline-offset: 2px;
}
.attic-calc__mode-value {
	color: var(--attic-teal, #099);
	font-weight: 600;
	text-align: right;
}
.attic-calc__mode-body {
	display: none;
	padding: 2px 4px 20px;
}
.attic-calc__mode-radio:checked ~ .attic-calc__mode-body {
	display: block;
}
.attic-calc__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--attic-light-teal, #A0D1CA); /* el JS pinta el tramo teal recorrido */
	cursor: pointer;
}
.attic-calc__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--attic-teal, #099);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(20, 56, 95, 0.35);
	cursor: pointer;
}
.attic-calc__slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--attic-teal, #099);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(20, 56, 95, 0.35);
	cursor: pointer;
}
.attic-calc__note {
	margin: 14px 4px 0;
	font-size: 0.88rem;
	color: var(--attic-gray, #424548);
}
.attic-calc__result {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-left: 1px solid var(--attic-light-teal, #A0D1CA);
	padding-left: 28px;
}
.attic-calc__image {
	width: 100%;
	max-width: 340px;
	height: auto;
	align-self: center;
}
.attic-calc__measure {
	margin: 0;
	font-size: 0.88rem;
	color: var(--attic-gray, #424548);
}
.attic-calc__unit {
	background: none;
	border: 0;
	padding: 0 2px;
	font: inherit;
	font-size: 16px; /* inputs/controles ≥16px: evita auto-zoom iOS */
	color: var(--attic-teal, #099);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.attic-calc__unit.is-active {
	color: var(--attic-blueberry, #14385F);
	font-weight: 700;
	text-decoration: none;
	cursor: default;
}
.attic-calc__unit-sep {
	color: var(--attic-light-teal, #A0D1CA);
	margin: 0 4px;
}
.attic-calc__size {
	margin: 0;
	color: var(--attic-blueberry, #14385F);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
}
.attic-calc__text {
	margin: 0;
	color: var(--attic-gray, #424548);
}
/* CTA propio (anchor del shortcode, no .elementor-button): hover de MARCA explícito
   (primary teal→blueberry, mismo contrato que .attic-btn-primary del §25). */
.attic-calc__cta {
	display: inline-block;
	margin-top: 6px;
	padding: 0.65rem 1.5rem;
	border-radius: 8px;
	background: var(--attic-teal, #099);
	border: 1px solid var(--attic-teal, #099);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.attic-calc__cta:hover,
.attic-calc__cta:focus {
	background: var(--attic-blueberry, #14385F);
	border-color: var(--attic-blueberry, #14385F);
	color: #fff;
}
@media (max-width: 767px) {
	.attic-calc {
		flex-direction: column;
	}
	.attic-calc__result {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--attic-light-teal, #A0D1CA);
		padding-top: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.attic-calc__cta,
	.attic-calc__mode-label::before {
		transition: none;
	}
}
/* Fila info+calculadora: apilar en TABLET. GUARD contra el quirk de orden de @media del CSS
   generado por Elementor: post-620.css emite el width DESKTOP dentro de @media(min-width:768px)
   y ese bloque cae DESPUÉS del override tablet (el orden global de bloques es data-dependiente
   — post-553.css tiene el orden inverso y ahí width_tablet gana). Los settings nativos van
   POBLADOS (width_tablet=100%); el !important solo re-impone lo que el setting ya dice. */
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element.attic-calc-info,
	.elementor-element.attic-calc-toolcol {
		--width: 100% !important;
	}
}

/* ---- b) Size chart (filas nativas; divisores light-teal patrón .attic-link-row) ---- */
.attic-size-chart {
	border-top: 1px solid var(--attic-light-teal, #A0D1CA);
}
.attic-size-chart__row {
	border-bottom: 1px solid var(--attic-light-teal, #A0D1CA);
	transition: background-color 0.25s;
}
.attic-size-chart__row:hover {
	background: var(--attic-cream, #EAF6F5);
}
.attic-size-chart__row p,
.attic-size-chart__row .elementor-heading-title {
	margin: 0;
}
.attic-size-chart__size a {
	color: inherit;
	text-decoration: none;
}
.attic-size-chart__size a:hover,
.attic-size-chart__size a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 767px) {
	/* header row fuera en móvil (native hide_mobile + guard CSS: en móvil mandan
	   los labels ::before de cada celda, no la fila de cabecera). */
	.attic-size-chart__head {
		display: none;
	}
	/* labels de columna en móvil (la header row nativa va oculta por settings):
	   ::before SOLO sobre el WIDGET (.elementor-widget), nunca sobre .e-con. */
	.elementor-widget.attic-size-chart__best::before {
		content: 'Best for storing';
	}
	.elementor-widget.attic-size-chart__notfit::before {
		content: 'Not suitable for';
	}
	.elementor-widget.attic-size-chart__best::before,
	.elementor-widget.attic-size-chart__notfit::before {
		display: block;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--attic-teal, #099);
		margin-bottom: 2px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.attic-size-chart__row {
		transition: none;
	}
}

/* =============================================================
   §41 — Cookiebot Consent Widget (Privacy Trigger) (2026-07-02).
   El banner de cookies es plantilla Custom de Cookiebot y vive en el
   Manager de iVantage (fuente versionada: atticstorage/cookiebot/).
   El widget flotante que reabre el consentimiento NO admite HTML
   propio: posición/colores/textos van por Manager (paleta Attic en
   cookiebot/widget-en.md). Aquí SOLO lo no-expresable: fuente Raleway
   y ocultar la marca "Cookiebot by Usercentrics". !important
   necesario: el widget inyecta sus propios estilos. Inerte hasta que
   Cookiebot cargue en el dominio (hoy: vía GTM, cuenta iVantage).
   ============================================================= */
#CookiebotWidget,
#CookiebotWidget * {
	font-family: var(--attic-font, 'Raleway', sans-serif) !important;
}
#CookiebotWidget .CookiebotWidget-main-logo {
	display: none !important;
}

/* =============================================================
   §42 — Sticky offer bar (home 9 + location single 8575) (2026-07-03).
   Banda "Special Offer" compartida (saved template "Shared — Offer bar",
   edit-once); el shell .attic-offer-bar se appendea como ÚLTIMO elemento
   TOP-LEVEL de la página — hermano del root, porque el root de la home
   (594ccce1) lleva --overflow:hidden y clipearía el sticky.
   position:sticky va AQUÍ y no en settings: el Sticky de Elementor clona
   el DOM (lints no-elementor-sticky-*) y sus settings se revierten en
   re-saves del editor. Al ser el último hijo de div.elementor-{9|8575}
   (hermano del footer en el body), bottom:0 pega la barra al viewport
   durante el scroll y se ancla en su posición natural — justo antes del
   footer — al llegar al final del contenido ("stay in column").
   ============================================================= */
.e-con.attic-offer-bar {
	position: sticky;
	bottom: 0;
	z-index: 190; /* header/off-canvas = 200; por encima del resto del contenido */
}
/* En el editor la barra se comporta como bloque normal (sticky en el
   canvas estorba al editar; mismo criterio que los reveals gated). */
body.elementor-editor-active .e-con.attic-offer-bar {
	position: static;
}
/* Hover del botón: el swap global secondary→teal se camuflaría contra la
   banda teal → excepción scoped (el botón se construye con
   no_hover_global, patrón jumpnav): rellena blanco con texto blueberry. */
.attic-offer-bar .attic-btn .elementor-button:hover,
.attic-offer-bar .attic-btn .elementor-button:focus {
	background-color: var(--e-global-color-d0d111e, #FFFFFF);
	border-color: var(--e-global-color-d0d111e, #FFFFFF);
	color: var(--e-global-color-secondary, #14385F);
}
.attic-offer-bar .attic-btn .elementor-button:hover .elementor-button-text,
.attic-offer-bar .attic-btn .elementor-button:focus .elementor-button-text {
	color: var(--e-global-color-secondary, #14385F);
}
/* Los <p> del copy llevan margin inline, pero el widget text-editor mete
   margin-bottom de tema en el último p — a cero para que la banda no
   engorde (mismo caso documentado en §11). */
.attic-offer-bar-copy p {
	margin-bottom: 0 !important;
}
/* Mobile: la línea principal baja un punto para convivir con el botón.
   !important justificado: vence al font-size inline del patrón canónico
   de text-editor (no hay control responsive sobre estilos inline). */
@media (max-width: 767px) {
	.attic-offer-bar-copy p:first-child {
		font-size: 1.05rem !important;
	}
}

/* §41 — A11y target-size (axe-core). axe mide el bounding box REAL del
   elemento (no overlays ::before), así que se agranda el elemento.
   Flechas de carrusel Swiper (default 22×22) → ≥24×24; nav-items de los
   menús (footer legal, 20px de alto) → ≥24px. min-* no descuadra los que
   ya cumplen. Sesión a11y PSI 2026-07-06. */
.elementor-swiper-button {
	min-width: 24px;
	min-height: 24px;
}
.elementor-nav-menu .elementor-item {
	min-height: 24px;
}

/* §43 — Coming soon band (cards del archive + single de location, 2026-07-14).
   Gate 100% server-side: functions.php añade `attic-coming-soon` a las post_class del
   .e-loop-item (filtro post_class) y al body del single (filtro body_class) cuando la meta
   `status` del centro es `coming_soon`. El texto lo resuelve el dynamic tag
   `atticstorage-opening-date` ("Coming soon!\nSee you on 31st July"; año solo si no es el
   en curso; solo línea 1 sin fecha; '' para centros operational). Aquí SOLO lo no
   expresable como settings: visibilidad condicional + posicionamiento absoluto sobre la
   imagen + white-space; colores/typography/padding/radius viven en los settings nativos
   del widget (editables en el editor). */

/* Card del archive: banda oculta por defecto, visible solo en cards coming-soon. */
.attic-card-coming {
	display: none;
}

.e-loop-item.attic-coming-soon .attic-card-coming {
	display: block;
	position: absolute;
	left: 0;
	bottom: 16px;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* El tag emite "Coming soon!\nSee you on 31st July": en la card el \n se vuelve salto
   real (2 líneas); en el single (white-space normal) colapsa a espacio (1 línea). */
.e-loop-item.attic-coming-soon .attic-card-coming .elementor-heading-title {
	white-space: pre-line;
}

/* El container de imagen de la card (17b2433) es el ancla del absolute. */
.e-loop-item .elementor-element-17b2433 {
	position: relative;
}

/* Red de seguridad: si el tag resuelve vacío (Elementor no imprime el heading), la banda
   no deja caja fantasma. !important justificado: regla de robustez no editable. */
.attic-card-coming:not(:has(.elementor-heading-title)),
.attic-card-coming:has(.elementor-heading-title:empty) {
	display: none !important;
}

/* Single: aviso "Opening [date]" en el hero, solo en singles coming-soon. */
.attic-single-coming {
	display: none;
}

body.attic-coming-soon .attic-single-coming {
	display: block;
}

/* =============================================================
   §44 · OFF-CANVAS NAV — submenús de 2 niveles (menú "Attic", ronda 2026-08)
   Los items padre del off-canvas (con página, p.ej. About Us, o "#", p.ej.
   CSR/Offers) llevan hijos en ul.sub-menu; el toggle lo hace
   assets/offcanvas-submenu.js (display inline !important — gana al inline de
   smartmenus; con página: 1er clic despliega, 2º navega — ronda 2026-09-02).
   Aquí: cierre por defecto (pierde a propósito contra el inline del JS),
   indentación de hijos y rotación del caret.
   ============================================================= */
.menu-stager .elementor-nav-menu--main .menu-item-has-children { width: 100%; }
.menu-stager .elementor-nav-menu--main ul.sub-menu {
	display: none;
	position: static;
	box-shadow: none;
	border: 0;
	background: transparent;
	/* !important: smartmenus deja un width inline heredado del ancho del li
	   padre (156px) y los subitems se partían en 2-4 líneas. */
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
}
/* !important: las reglas de padding/tipo de Elementor para --dropdown ganaban
   y el ítem largo ("What makes Attic Self Storage different?") partía en 2
   líneas pese a caber compactado. */
.menu-stager .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
	padding: 6px 0 6px 16px !important;
	font-size: 15px !important;
	line-height: 1.35;
}
.menu-stager .elementor-nav-menu--main .menu-item-has-children > a .sub-arrow svg {
	transition: transform 0.25s ease;
}
.menu-stager .elementor-nav-menu--main .menu-item-has-children.attic-subopen > a .sub-arrow svg {
	transform: rotate(180deg);
}

/* =============================================================
   §45 · HOME MOBILE (ronda 2026-08, feedback UK)
   Ajustes mobile-specific de la home (page 9). Las estructuras no cambian:
   los "carousels" de USPs y Why-Choose son scroll-snap horizontal solo-CSS
   (sin JS, sin tocar el editor; en desktop quedan como están).
   ============================================================= */
@media (max-width: 767px) {
	/* Hero H1 en UNA línea ("Make Space for the Things You Love"): el global H1
	   resuelve ~23px a 390px → 2 líneas. Override responsive puntual — no
	   expresable como setting sin desconectar la tipografía global del heading. */
	/* !important: el global H1 del Kit gana en specificity; override responsive
	   puntual scoped a ESTE widget (no expresable como setting sin desconectar
	   la tipografía global del heading). */
	.elementor-element-d1c05fa h1.elementor-heading-title,
	.elementor-element-d1c05fa .elementor-heading-title {
		font-size: 20px !important;
	}

	/* USPs "What makes Attic different": en mobile el grid 71c04a4 se oculta
	   (hide_mobile) y lo sustituye el nested-carousel `.attic-usp-slider`, clon
	   del de "How to rent your unit?" (misma clase slider-wep: flechas + dots),
	   2 por vista, insertado por scripts/migrations/atticstorage-home-usp-carousel.php.
	   2026-09-08 (Carlos): "que sea un slider… el mismo enfoque que la sección
	   siguiente"; el carril scroll-snap CSS-only anterior se retiró. */
	.attic-usp-slider .elementor-icon-box-icon img,
	.attic-usp-slider .elementor-icon-box-icon svg {
		max-height: 84px;
		width: auto;
	}
	/* especificidad (0,4,1): el CSS del elemento aplica la tipografía global
	   con (0,3,1) y a 16px el título de 3 palabras parte en 3 líneas. */
	.elementor .attic-usp-slider .elementor-widget-icon-box .elementor-icon-box-title {
		font-size: 13px;
	}

	/* "Why Choose Attic": las 3 cards apiladas (~1086px) → carril con snap. */
	.elementor-element-c31eb67 {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.elementor-element-c31eb67::-webkit-scrollbar { display: none; }
	.elementor-element-c31eb67 > .e-con {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}

	/* Cards "Our stores": los banners panorámicos en una card 358×320 con
	   cover se ven "muy zoomed" → card más panorámica (≈16:9). */
	.elementor-element-8b9ebc5 .swiper-slide > a.e-con {
		min-height: 210px !important;
		height: 210px;
	}

	/* Sticky offer bar: un pelín más estrecha que el viewport, flotando. */
	.attic-offer-bar {
		width: 94%;
		margin-inline: auto;
		border-radius: 14px 14px 0 0;
	}
}

/* =============================================================
   §46 · LOCATION SINGLE MOBILE + TEAM (ronda 2026-08, feedback UK)
   ============================================================= */
@media (max-width: 767px) {
	/* Available units: modo tabs también en mobile (breakpoint=none en el
	   widget attic-su-tabs); los títulos completos no caben a 390px →
	   etiquetas compactas S / M / L / XL vía CSS (los títulos reales siguen
	   en el widget, editables; accesibilidad: aria-label del botón intacto). */
	.attic-su-tabs .e-n-tabs-heading {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 8px;
	}
	.attic-su-tabs .e-n-tab-title {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 8px !important;
		justify-content: center;
	}
	.attic-su-tabs .e-n-tab-title .e-n-tab-title-text { font-size: 0; line-height: 1; }
	.attic-su-tabs .e-n-tab-title .e-n-tab-title-text::after {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
	}
	.attic-su-tabs .e-n-tab-title:nth-child(1) .e-n-tab-title-text::after { content: "S"; }
	.attic-su-tabs .e-n-tab-title:nth-child(2) .e-n-tab-title-text::after { content: "M"; }
	.attic-su-tabs .e-n-tab-title:nth-child(3) .e-n-tab-title-text::after { content: "L"; }
	.attic-su-tabs .e-n-tab-title:nth-child(4) .e-n-tab-title-text::after { content: "XL"; }

	/* Título del single "slightly smaller for mobile" (hoy 32px/2 líneas).
	   El heading usa la tipografía global → override responsive scoped. */
	.elementor-location-single h1.elementor-heading-title,
	body.single-location h1.elementor-heading-title {
		font-size: 26px !important;
	}
}

/* Team: "slightly closer together so they don't go to the next line and look
   far apart" — el grid interno del loop de team con gap más compacto. */
.attic-team-grid .elementor-grid {
	gap: 16px 16px;
}

/* =============================================================
   §47 · BADGE "OFFERS" EN LAS CARDS DE LOCATION (ronda 2026-08)
   Sheet: "Can we include a small offers tag for the stores?". Gate 100%
   server-side (post_class attic-has-offer ← campos special_offer_* del
   centro) — cero cambios en el loop-item, cache-safe. Naranja accent
   (badge comercial, mismo lenguaje que el "Nearest" del locator).
   ============================================================= */
/* 2026-09-08 (Carlos): el badge NO está aprobado y en las cards del carrusel
   de la home / locator (loop item 8565) quedaba DEBAJO del pill de distancia
   (`.attic-distance-badge`, que el locator inyecta en la misma esquina). Se
   retira de ESE loop item con `:not(.elementor-8565)`; el sistema (post_class
   `attic-has-offer` + esta regla) se mantiene y las cards del archivo
   /locations/ (loop item 8563) lo siguen pintando. Reactivar = quitar el :not.
   Alternativa editable en el editor: widget en el loop item + Display
   Condition dinámica sobre special_offer_* (pendiente de aprobación). */
.e-loop-item.attic-has-offer:not(.elementor-8565) > a > .e-con-inner::before,
.e-loop-item.attic-has-offer:not(.elementor-8565) > .e-con > .e-con-inner::before {
	content: "Offers";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: var(--e-global-color-accent, #FF7F32);
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	pointer-events: none;
}
/* Colgado del .e-con-inner (no del <a>): el ::before del container lo ocupa
   el background-overlay de Elementor (pintarlo ahí = elipse naranja gigante,
   regresión detectada en el 1er intento) y el ::after del <a> es el badge
   "Nearest". El <a> es position:relative → el badge ancla a la card entera.
   Offers izquierda · Nearest derecha: conviven. */

/* §48 · CONTACT (ronda 2026-08) — en mobile, al tocar una dirección/teléfono
   de las cards del directorio se pintaba NARANJA (link accent del Kit en
   :active/:focus) → azul blueberry (petición cliente). */
@media (max-width: 767px) {
	.attic-contact-centres a:active,
	.attic-contact-centres a:focus,
	.attic-contact-centres a:hover {
		color: var(--e-global-color-secondary, #14385F) !important;
	}
}
/* El badge OFFERS (§47) no aplica en el directorio de contacto: solapaba la
   caja teal del nombre y esa página es de contacto, no comercial. */
.attic-contact-centres .e-loop-item.attic-has-offer > a > .e-con-inner::before,
.attic-contact-centres .e-loop-item.attic-has-offer > .e-con > .e-con-inner::before {
	display: none;
}

/* =============================================================
   §49 · FAQs (/help-support/faqs/) — widget nativo de Pestañas
   La página es UN nested-tabs (.attic-faq-tabs): sidebar de categorías +
   panel. TODO lo expressable vive en los settings del widget (k_faq_tabs
   en el kit) para que el editor lo muestre poblado. Aquí solo lo que
   Elementor no puede hacer:
     a) intercalar el buscador entre el sidebar y el panel (el widget no
        admite elementos externos dentro de su caja) → el grid de la página
        toma el mando en desktop con display:contents sobre el widget;
     b) sidebar sticky con scroll propio;
     c) modo búsqueda: abrir la caja de contenido, que por defecto solo
        muestra el panel activo;
     d) dropdown "Categories" en móvil (lo activa faq-tabs.js).
   Compat: se conservan las reglas del layout anterior (.attic-jumpnav)
   mientras conviva la estructura vieja en algún entorno.
   ============================================================= */
.attic-faq-search { padding: 0 1.5rem; }
/* El campo en sí (caja, borde, radius, alto, tipografía) sale del buscador
   canónico del sitio: ver §19, donde .attic-faq-search-inner va agrupado con
   .attic-hero-search. Aquí solo la lupa y el hueco que le deja el texto. */
.attic-faq-search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	pointer-events: none;
	display: flex;
	z-index: 1;
}
.attic-faq-search-input {
	padding: 0 20px 0 44px !important; /* hueco para la lupa (el hero lo reserva a la derecha, para su botón) */
}
.attic-faq-search-status {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--attic-gray, #424548);
	min-height: 1.2em;
}
/* Filtro del buscador: se oculta el CONTENEDOR de cada FAQ (.e-loop-item), no el
   acordeón interno — si no, su caja sigue ocupando sitio y deja huecos en blanco. */
.attic-faq-hidden { display: none !important; }

/* Solo el panel activo visible. Elementor ya trae esta regla
   (.elementor-widget-n-tabs .e-n-tabs-content>.e-con:not(.e-active){display:none})
   pero el CSS que genera para CADA container-panel (display:flex por su
   flex_direction) tiene la misma especificidad y carga después, así que ganaba y
   dejaba dos paneles visibles a la vez. !important justificado: es el mecanismo
   de visibilidad del widget, no un estilo que el cliente deba editar. */
.attic-faq-tabs .e-n-tabs-content > .e-con:not(.e-active) { display: none !important; }

/* Modo búsqueda: el widget solo muestra el panel activo; al buscar queremos ver
   las coincidencias de todas las categorías. (Va después para vencer a la regla
   de arriba, que también lleva !important.) */
.attic-faq-tabs.is-searching .e-n-tabs-content { display: block !important; }
.attic-faq-tabs.is-searching .e-n-tabs-content > .e-con { display: block !important; }
.attic-faq-tabs.is-searching .e-n-tabs-content > .e-con.attic-faq-hidden { display: none !important; }
.attic-faq-tabs.is-searching .attic-faq-panel > .elementor-widget-heading { margin-top: 1.5rem; }

/* Anclas (#section-faq-…) por debajo del header fijo */
.attic-faq-panel { scroll-margin-top: 120px; }

/* ---------- Desktop: sidebar + buscador + panel ---------- */
@media (min-width: 1025px) {
	.attic-faqtabs {
		display: grid !important; /* vence el e-flex del container */
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 24px 2.5rem !important; /* el post-CSS de Elementor carga después y empataba specificity */
		align-items: start;
		max-width: 1600px !important;
		width: 100%;
		margin-inline: auto !important;
		padding-inline: 24px !important;
	}
	.attic-faqtabs > .attic-hero-wrap { grid-column: 1 / -1; grid-row: 1; }
	.attic-faqtabs > .attic-faq-search {
		grid-column: 2;
		grid-row: 2;
		padding: 0 24px;
		margin: 0;
	}
	/* El widget cede su caja: su sidebar y su contenido pasan a ser celdas del
	   grid de la página. Es la única forma de colocar el buscador ENTRE el
	   heading y el panel conservando la sidebar. Los settings nativos siguen
	   poblados y son el fallback si esta hoja no carga. */
	.attic-faqtabs > .elementor-widget-n-tabs,
	.attic-faqtabs .attic-faq-tabs > .e-n-tabs { display: contents; }
	.attic-faqtabs .e-n-tabs-heading {
		grid-column: 1;
		grid-row: 2 / span 2;
		align-self: start;
		position: sticky;
		top: 110px;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		overflow-x: clip;
	}
	.attic-faqtabs .e-n-tabs-content { grid-column: 2; grid-row: 3; min-width: 0; }
	.attic-faqtabs .e-n-tab-title { width: 100%; justify-content: flex-start; text-align: left; }
	.attic-faqcat-toggle { display: none; }
	/* Layout anterior (pills) mientras conviva */
	.attic-faqtabs > .attic-jumpnav {
		grid-column: 1;
		grid-row: 2 / span 2;
		position: sticky;
		top: 110px;
	}
	.attic-faqtabs > .attic-jumpnav .e-con-inner {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.6rem !important;
	}
	.attic-faqtabs > .attic-jumpnav .elementor-widget-button {
		height: auto !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.attic-faqtabs > .attic-jumpnav .elementor-widget-button .elementor-button {
		display: block;
		width: 100%;
		text-align: left;
	}
	.attic-faqtabs > .attic-section { grid-column: 2; grid-row: 3; width: 100%; }
	.attic-faqtabs > .e-con:not(.attic-jumpnav):not(.attic-section):not(.attic-hero-wrap) { grid-column: 1 / -1; }
}

/* ---------- Móvil: dropdown "Categories" ---------- */
.attic-faqcat-toggle { display: none; }
@media (max-width: 767px) {
	/* Toggle: mismo patrón que el "Jump to section" del single de tienda (§25) —
	   blanco en reposo y blueberry al abrirlo o enfocarlo. */
	.attic-faq-tabs--dd .attic-faqcat-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: calc(100% - 3rem);
		margin: 0 1.5rem 0.5rem;
		padding: 0.6rem 0.9rem;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 8px;
		cursor: pointer;
		font-family: var(--attic-font, 'Raleway', sans-serif);
		font-size: 16px;
		font-weight: 700;
		color: var(--e-global-color-secondary, #14385F);
		text-align: left;
	}
	.attic-faq-tabs--dd .attic-faqcat-toggle:hover,
	.attic-faq-tabs--dd .attic-faqcat-toggle:focus,
	.attic-faq-tabs--dd.is-open .attic-faqcat-toggle {
		background: var(--attic-blueberry, #14385F);
		color: #fff;
		border-color: var(--attic-blueberry, #14385F);
	}
	.attic-faqcat-chevron { flex-shrink: 0; transition: transform 0.2s; }
	.attic-faq-tabs--dd.is-open .attic-faqcat-chevron { transform: rotate(180deg); }
	/* El panel desplegable ES el heading real del widget (sin DOM clonado) */
	.attic-faq-tabs--dd .e-n-tabs-heading {
		display: none !important;
		flex-direction: column !important;
		gap: 0 !important;
		overflow: visible !important;
		margin: 0 1.5rem 1rem;
		padding: 0.5rem;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	.attic-faq-tabs--dd.is-open .e-n-tabs-heading { display: flex !important; }
	/* Dentro del desplegable las categorías son una LISTA, no pills (decisión
	   Carlos 25-08): sin caja ni borde, texto blueberry y verde al pasar por
	   encima o cuando está seleccionada. !important porque las pills vienen de
	   los settings del widget, que aquí no aplican: es el modo desplegable, no
	   un estilo que el cliente edite. */
	.attic-faq-tabs--dd .e-n-tab-title {
		width: 100% !important;
		justify-content: flex-start !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0.55rem 0.5rem !important;
		color: var(--e-global-color-secondary, #14385F) !important;
	}
	.attic-faq-tabs--dd .e-n-tab-title .e-n-tab-title-text {
		color: inherit !important;
		font-size: 16px;
	}
	.attic-faq-tabs--dd .e-n-tab-title:hover,
	.attic-faq-tabs--dd .e-n-tab-title:focus,
	.attic-faq-tabs--dd .e-n-tab-title.e-active,
	.attic-faq-tabs--dd .e-n-tab-title[aria-selected='true'] {
		background: transparent !important;
		border: 0 !important;
		color: var(--attic-teal, #099) !important;
	}
}

/* Página de ajustes de cookies: el título lo inyecta Cookiebot y sale con el estilo
   por defecto del navegador, descolgado del resto del sitio. Se le da el mismo
   tratamiento que a un encabezado de sección (petición del cliente, fila 32). */
.page-id-58 #CookieDeclaration,
.page-id-58 .CookieDeclaration {
	font-family: var(--attic-font, 'Raleway', sans-serif);
	color: var(--e-global-color-text, #424548);
}
.page-id-58 #CookieDeclaration > p:first-of-type,
.page-id-58 #CookieDeclarationUserStatusLabel,
.page-id-58 .CookieDeclarationType > .CookieDeclarationTypeHeader {
	font-family: var(--attic-font, 'Raleway', sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--e-global-color-secondary, #14385F);
	margin: 1.5rem 0 0.75rem;
}

/* =============================================================
   §50 · INSIGNIAS DEL PIE (correo de Shanaiqua, 24-07-2026)
   La maqueta del cliente las quiere en UNA fila bajo los iconos sociales. Los seis
   sellos tienen proporciones muy distintas (apaisados, cuadrados, verticales) y sus
   anchos suman 5,93 veces la altura, así que la altura se ata al ancho de la propia
   columna (container query): así entran en una sola fila tanto en la columna estrecha
   del escritorio como a pantalla completa en el móvil, sin quedarse enanos.
   ============================================================= */
.attic-footer-badges {
	container-type: inline-size;
	width: 100% !important;
	margin-top: 22px;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 4px !important;
}
.attic-footer-badges .elementor-widget-image { width: auto !important; }
.attic-footer-badges img {
	height: clamp(28px, 15cqw, 56px) !important;
	width: auto !important;
	max-width: none;
	object-fit: contain;
	display: block;
}
.attic-footer-badges a { display: block; line-height: 0; }
.attic-footer-rafter { width: 100% !important; margin-top: 18px; }
.attic-footer-rafter__label {
	margin: 0 0 2px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--e-global-color-secondary, #14385F);
	letter-spacing: 0.02em;
}
.attic-footer-rafter img { height: 46px !important; width: auto !important; object-fit: contain; }
/* Las pastillas de sección del pie van justas de ancho: "About Attic Storage" pide 240 px
   y la columna da 242. Se les recorta el relleno lateral para que nunca partan en dos. */
.attic-footer-cols .e-n-accordion-item-title { padding-inline: 10px !important; }

/* §49 — Nota de reseñas visible en la página (ronda de schema 2026-09).
   Existe para que lo que publica el JSON-LD esté también en el texto de la página: Google exige
   que la nota agregada sea visible, y el widget de Trustindex se pinta client-side.

   Dónde se emite (2026-09-18): en las fichas de centro la pone un WIDGET de Elementor del
   template 8575 (dynamic tag `atticstorage-review-summary`, clase .attic-loc-review-note), justo
   debajo del carrusel. En las páginas que publican el agregado la sigue añadiendo functions.php
   al final de la salida del shortcode.

   OJO: hasta el 2026-09-18 esta regla NUNCA se aplicó — un `}` sobrante en la línea 5306 hacía
   que el parser la descartara (la nota salía display:block, sin gap y alineada a la izquierda).
   Lo vigila `scripts/check-css-braces.js` desde el pre-commit. */
.attic-review-summary{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem .65rem;
  margin:0 0 1.1rem; font-family:var(--wap-font,inherit); line-height:1.35; text-align:center;
}
.attic-review-score{
  font-size:1.35rem; font-weight:700; color:var(--attic-blueberry,#14385F); font-variant-numeric:tabular-nums;
}
.attic-review-stars{display:inline-flex; gap:.12rem}
.attic-review-star{
  width:1.05rem; height:1.05rem; display:inline-block; background:var(--attic-light-teal,#A0D1CA);
  -webkit-mask:var(--attic-star-mask) center/contain no-repeat; mask:var(--attic-star-mask) center/contain no-repeat;
}
.attic-review-star.is-on{background:var(--attic-orange,#FF7F32)}
:root{
  --attic-star-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
.attic-review-text{font-size:.95rem; color:var(--attic-gray,#424548)}
@media (max-width:520px){
  .attic-review-summary{gap:.35rem .5rem}
  .attic-review-text{flex:1 0 100%; font-size:.88rem}
}

/* En la ficha de centro la nota es un widget y va DEBAJO del carrusel: la separación superior la
   aporta el margen NATIVO del widget (Advanced → Margin, editable desde el editor). El margen
   inferior que heredamos del patrón antiguo sobra ahí, y vive en el <p>, que Elementor no
   alcanza por settings: por eso se neutraliza aquí, acotado a la clase del widget. */
.attic-loc-review-note .attic-review-summary{ margin:0 }

/* §50 — Hero sin imagen destacada (2026-09-08). La columna de imagen de los heros compartidos
   (10030 y variantes) tiene min-height 360px / 40vh móvil aunque la página no tenga imagen
   destacada: en móvil y tablet se apila bajo el texto como un bloque vacío. La clase
   `attic-no-thumb` la pone functions.php (server-side, cache-safe) cuando `has_post_thumbnail()`
   es false en una singular; aquí solo se oculta ese bloque. En escritorio se mantiene la
   composición actual (la columna vacía convive con el texto, como en prod). */
@media (max-width:1024px){
  body.attic-no-thumb .attic-hero-about-img{display:none}
}