/*
 * Texturas y detalles de las plantillas (clases hwx-*, que el motor pone en elementos nativos de Elementor).
 * Todo sale de las variables del Kit (--bg --surface --soft --ink --mut --line --p --a --r --rb --fd --fb --fx),
 * así que vale para cualquier plantilla y cualquier color de marca. Nada de imágenes: patrones con CSS y SVG en línea.
 */

/* ── Portada ─────────────────────────────────────────────────────────────────────────────────────────────── */
.hwx-hero{position:relative;isolation:isolate}
.hwx-hero h1{text-wrap:balance}
.hwx-suave{opacity:.88}
.hwx-hero-dark .hwx-suave{text-shadow:0 1px 18px rgba(0,0,0,.35)}

/* Grano de película sobre la foto o el vídeo */
.hwx-grano::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hwx-grano>.e-con-inner,.hwx-grano>.elementor-element{position:relative;z-index:3}

/* Pizarra: tiza difuminada sobre el verde */
.hwx-tiza{background-image:radial-gradient(ellipse 60% 50% at 18% 22%,rgba(255,255,255,.07),transparent 70%),radial-gradient(ellipse 50% 60% at 82% 78%,rgba(255,255,255,.05),transparent 70%),
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Barra: lunares de formica */
.hwx-lunares{background-image:radial-gradient(color-mix(in srgb,var(--p) 13%,transparent) 2px,transparent 2.5px);background-size:26px 26px;background-position:0 0}

/* Horno: papel de estraza */
.hwx-kraft{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Comanda: rejilla suiza visible */
.hwx-cuadricula{background-image:linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);background-size:calc((100% - 1px) / 12) 100%}

/* Neón: manchas de luz que se mueven despacio */
.hwx-mesh::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.55;
	background:radial-gradient(35% 40% at 25% 30%,var(--p),transparent 70%),radial-gradient(30% 35% at 80% 70%,var(--a),transparent 70%),radial-gradient(25% 30% at 60% 15%,color-mix(in srgb,var(--p) 50%,var(--a)),transparent 70%);
	animation:hwx-mesh 22s ease-in-out infinite alternate}
@keyframes hwx-mesh{to{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}}
.hwx-neon .elementor-heading-title{text-shadow:0 0 18px color-mix(in srgb,var(--p) 70%,transparent),0 0 46px color-mix(in srgb,var(--p) 40%,transparent)}
.hwx-brillo{position:relative}
.hwx-brillo::before{content:"";position:absolute;inset:8% 6%;z-index:-1;background:linear-gradient(135deg,var(--p),var(--a));filter:blur(60px);opacity:.45}

/* Taberna: franja de azulejo */
.hwx-azulejo{height:44px;background-color:var(--bg);background-size:44px 44px;
	background-image:radial-gradient(circle at 50% 50%,var(--a) 0 5px,transparent 5.5px),
		conic-gradient(from 45deg at 50% 50%,color-mix(in srgb,var(--a) 22%,var(--bg)) 0 25%,var(--bg) 0 50%,color-mix(in srgb,var(--a) 22%,var(--bg)) 0 75%,var(--bg) 0),
		linear-gradient(var(--bg),var(--bg));
	border-block:3px solid var(--a)}

/* Casa de comidas: franja de mantel de cuadros (vichy) con el color principal */
.hwx-cuadros{height:40px;background-color:var(--bg);
	background-image:linear-gradient(90deg,color-mix(in srgb,var(--p) 55%,transparent) 50%,transparent 0),linear-gradient(color-mix(in srgb,var(--p) 55%,transparent) 50%,transparent 0);
	background-size:20px 20px;border-block:2px solid var(--p)}

/* Taquería: tira de papel picado de colores (triángulos rectos, sin arcos) */
.hwx-picado{height:34px;background-color:var(--bg);background-size:68px 34px;
	background-image:linear-gradient(135deg,var(--p) 25%,transparent 25%),linear-gradient(225deg,var(--a) 25%,transparent 25%),
		repeating-linear-gradient(90deg,color-mix(in srgb,var(--p) 18%,var(--bg)) 0 34px,color-mix(in srgb,var(--a) 18%,var(--bg)) 34px 68px)}

/* Mercado: toldo a rayas de lona con el faldón recto y su sombra (sin festón: nada de arcos) */
.hwx-toldo{height:56px;position:relative;z-index:5;margin-top:var(--hdr);
	background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.10)),repeating-linear-gradient(90deg,var(--p) 0 48px,var(--bg) 48px 96px);
	box-shadow:0 10px 18px -12px rgba(0,0,0,.45)}
.hwx-toldo::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;
	background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 70%),repeating-linear-gradient(90deg,var(--p) 0 48px,var(--bg) 48px 96px);
	border-bottom:2px solid var(--p)}

/* Vermut: etiqueta antigua de marco doble */
.hwx-etiqueta{position:relative;background:var(--surface);border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-10px;max-width:880px;margin-inline:auto}
.hwx-etiqueta::before,.hwx-etiqueta::after{content:"✦";position:absolute;top:18px;font-size:14px;color:var(--a)}
.hwx-etiqueta::before{left:22px}
.hwx-etiqueta::after{right:22px}

/* Pub: placa de latón */
.hwx-placa{background:color-mix(in srgb,var(--bg) 72%,transparent);border:2px solid var(--a);box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--bg) 72%,transparent),inset 0 0 0 7px color-mix(in srgb,var(--a) 60%,transparent);backdrop-filter:blur(3px)}
/* En una plantilla clara, el fondo de la placa es crema y el texto blanco no se lee: placa oscura */
.hww:not(.hww-oscura) .hwx-placa{background:rgba(24,14,8,.62);box-shadow:inset 0 0 0 6px rgba(24,14,8,.4),inset 0 0 0 7px color-mix(in srgb,var(--a) 60%,transparent)}

/* Jazz: líneas art déco */
.hwx-deco>.e-con-inner{position:relative}
.hwx-deco>.e-con-inner::before,.hwx-deco>.e-con-inner::after{content:"";position:absolute;left:50%;width:min(520px,80%);height:22px;transform:translateX(-50%);
	background:linear-gradient(var(--p),var(--p)) 50% 0/100% 1px no-repeat,linear-gradient(var(--p),var(--p)) 50% 6px/70% 1px no-repeat,linear-gradient(var(--p),var(--p)) 50% 12px/40% 1px no-repeat}
.hwx-deco>.e-con-inner::before{top:-46px}
.hwx-deco>.e-con-inner::after{bottom:-46px;transform:translateX(-50%) scaleY(-1)}

/* Barra: pegatina */
.hwx-pegatina{align-self:flex-start;margin-top:26px!important}
.hwx-pegatina .elementor-heading-title{display:inline-block;padding:10px 18px;background:var(--a);color:#fff!important;border-radius:999px;transform:rotate(-4deg);box-shadow:0 6px 0 color-mix(in srgb,var(--a) 55%,#000)}

/* Gastrobar: la foto se descubre de abajo arriba */
.hwx-revela img{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.hwx-revela.is-in img,.elementor-editor-active .hwx-revela img{clip-path:inset(0)}

/* ── Piezas ──────────────────────────────────────────────────────────────────────────────────────────────── */
.hwx-tesela{position:relative;overflow:hidden;min-height:0}
.hwx-tesela .elementor-widget-image,.hwx-tesela .elementor-widget-image>*{height:100%}
.hwx-tesela img{width:100%;height:100%!important;object-fit:cover;transition:transform 1.2s var(--ease)}
.hwx-tesela:hover img{transform:scale(1.04)}
.hwx-t2x2{grid-column:span 2;grid-row:span 2}
.hwx-t1x2{grid-row:span 2}
.hwx-t2x1{grid-column:span 2}
@media (max-width:1024px){.hwx-mosaico{grid-template-rows:repeat(4,200px)!important}}
.hwx-oscura,.hwx-oscura .hww-hor,.hwx-oscura .elementor-heading-title{color:#fff}
.hwx-oscura .hww-hor li{border-color:rgba(255,255,255,.22)}
@media (max-width:767px){
	.hwx-bento{grid-template-columns:1fr!important;grid-template-rows:none!important}
	.hwx-bento .hwx-t1x2{grid-row:auto}
	/* En móvil, dos columnas: la grande ocupa la fila entera y las demás van de dos en dos */
	.hwx-mosaico{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:170px}
	.hwx-mosaico .hwx-t2x2,.hwx-mosaico .hwx-t2x1{grid-column:1/-1;grid-row:span 1}
	.hwx-t1x2{grid-row:span 1}
}

.hwx-split-media{position:relative}
.hwx-flota img{box-shadow:0 24px 60px -18px rgba(0,0,0,.4);border:6px solid var(--surface)}
.hwx-marco-video{position:relative}
.hwx-marco-video::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--a);border-radius:var(--r);z-index:-1}
.hwx-video video{object-fit:cover}
@media (max-width:767px){.hwx-marco-video::before{inset:12px -8px -12px 8px}}

/* Botones: un leve empuje al pasar */
.hwx-btn .elementor-button{transition:transform .3s var(--ease),background-color .25s,color .25s,box-shadow .3s}
.hwx-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}

/* Rasgos sin tarjeta: separados por una línea fina */
.hwx-rasgos>.e-con-inner>.e-con+.e-con,.hwx-rasgos>.e-con+.e-con{border-left:1px solid var(--line)}
@media (max-width:767px){.hwx-rasgos>.e-con-inner>.e-con+.e-con,.hwx-rasgos>.e-con+.e-con{border-left:0;border-top:1px solid var(--line)}}

/* Galería: flechas y puntos con el color de la marca */
.hwx-galeria .swiper-pagination-bullet{background:var(--ink);opacity:.25}
.hwx-galeria .swiper-pagination-bullet-active{background:var(--p);opacity:1}
.hwx-galeria img{aspect-ratio:4/3;object-fit:cover}

/* Franja con foto */
.hwx-band .elementor-heading-title{text-wrap:balance}

/* Cinta de precios a toda anchura */
.hwx-cinta-sec{overflow:hidden}
.hwx-cinta-clara{border-block:1px solid var(--line)}
/* Sobre la cinta de color, el precio con el acento no se lee (verde sobre naranja, rojo sobre teja): va del color del texto. */
.hwx-cinta-sec:not(.hwx-cinta-clara) .hwc-cinta-in b,.hwx-cinta-sec:not(.hwx-cinta-clara) .hwc-cinta-in i{color:inherit}
.hwx-cinta-osc .hwc-cinta-in{color:#fff}
.hwx-cinta-luz .hwc-cinta-in{color:#141210}

/* Preguntas frecuentes (acordeón anidado nativo): fuera el fondo y los bordes de serie de Elementor */
.hwx-faq{--n-accordion-border-width:0px;--n-accordion-item-title-space-between:0px;--n-accordion-title-normal-color:var(--ink);--n-accordion-title-hover-color:var(--p);--n-accordion-title-active-color:var(--p);--n-accordion-icon-normal-color:var(--p);--n-accordion-icon-active-color:var(--p);--n-accordion-padding:0}
.hwx-faq .e-n-accordion-item{border-bottom:1px solid var(--line)}
.hwx-faq .e-n-accordion-item:first-child{border-top:1px solid var(--line)}
.hwx-faq .e-n-accordion-item-title{padding:24px 0!important;background:none!important;border:0!important;gap:20px;justify-content:space-between}
.hwx-faq .e-n-accordion-item-title-text{font:600 clamp(1.05rem,1.4vw,1.2rem)/1.35 var(--fb);color:var(--ink)}
.hwx-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,.hwx-faq [aria-expanded=true] .e-n-accordion-item-title-text{color:var(--p)}
.hwx-faq .e-n-accordion-item-title-icon{color:var(--p);order:2}
.hwx-faq .e-n-accordion-item-title-icon svg{fill:currentColor;width:14px;height:14px}
.hwx-faq .e-n-accordion-item-title-icon,.hwx-faq .e-n-accordion-item-title-icon *{color:var(--p)!important;fill:var(--p)!important}
.hwx-faq .e-n-accordion-item>.e-con{background:none!important;border:0!important}

/* El blog se oculta entero si el negocio aún no tiene artículos */
.hwx-sec-blog:not(:has(.hww-blog)){display:none}
.elementor-editor-active .hwx-sec-blog{display:flex!important}

/* Cabecera de las páginas interiores sin foto */
.hwx-cab-pag .elementor-heading-title{text-wrap:balance}

/* ── Menos movimiento ────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
	.hwx-mesh::before{animation:none}
	.hwx-revela img{clip-path:none;transition:none}
	.hwx-tesela img,.hwx-btn .elementor-button{transition:none}
}