/* Portada: hero con video, secciones y efectos. Solo se anima transform y opacity; todo quieto con prefers-reduced-motion. */
.clf-inicio{position:relative;padding-top:clamp(16px,3vw,28px)}
.clf-inicio>*{position:relative;z-index:1}
.clf-inicio>.clf-fondo{position:absolute;inset:0;z-index:0}
.clf-sec{max-width:1280px;margin:0 auto clamp(48px,7vw,88px)}
.clf-sec__titulo{margin:0 0 22px}
.clf-sec__mas{margin:26px 0 0;text-align:center}

/* Botones de la portada (el verde es SOLO para WhatsApp) */
.clf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;box-sizing:border-box;min-height:52px;padding:0 1.7em;border-radius:999px;font:700 1.05rem/1 var(--wp--preset--font-family--titulos);text-decoration:none;text-align:center;transition:transform .15s}
.clf-btn--amarillo{background:var(--clf-amarillo);color:var(--clf-azul-profundo);box-shadow:0 4px 0 #C49F00,0 10px 18px rgba(5,10,32,.3)}
.clf-btn--wa{background:var(--clf-whatsapp);color:#fff;box-shadow:0 4px 0 #0E5A2A,0 10px 18px rgba(5,10,32,.3)}
.clf-btn:hover{transform:translateY(-2px);color:inherit}
.clf-btn:active{transform:translateY(3px)}
.clf-btn--amarillo:hover{color:var(--clf-azul-profundo)}
.clf-btn--wa:hover{color:#fff}

/* Hero: móvil = bloque de medios 16:9 y debajo panel azul sólido; escritorio = texto sobre degradado */
.clf-hero{position:relative;max-width:1280px;margin:0 auto clamp(40px,6vw,72px);border-radius:24px;overflow:hidden;background:var(--clf-azul-profundo);box-shadow:var(--clf-sombra-alta)}
.clf-hero__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--clf-azul-profundo)}
.clf-hero__media picture{display:block;width:100%;height:100%}
.clf-hero__poster{display:block;width:100%;height:100%;object-fit:cover}
.clf-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.clf-hero__video.is-on{opacity:1}
.clf-hero__pausa{position:absolute;right:12px;bottom:12px;z-index:4;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(19,35,91,.9);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(5,10,32,.45);--clf-foco:#FED01B}
.clf-hero__pausa[hidden]{display:none}
.clf-hero__pausa[aria-pressed=true] .clf-hero__ico-pausa,.clf-hero__pausa:not([aria-pressed=true]) .clf-hero__ico-play{display:none}
.clf-hero__texto{position:relative;padding:24px 20px 30px;background:var(--clf-azul-profundo);--clf-foco:#FED01B}
.clf-hero__titulo{margin:0;color:#fff;font-size:clamp(2rem,8.5vw,2.75rem);line-height:1.1}
.clf-hero__sub{margin:.5em 0 1.3em;color:#fff;font-size:1.1rem;line-height:1.45}
.clf-hero__acciones{display:flex;flex-direction:column;gap:12px}
@media (min-width:900px){
	.clf-hero{display:flex;align-items:center;min-height:clamp(460px,68vh,640px)}
	.clf-hero__media{position:absolute;inset:0;aspect-ratio:auto}
	/*capa*/
	.clf-hero__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
	.clf-hero--capa-sutil .clf-hero__media::after{background:linear-gradient(90deg,rgba(19,35,91,0.35) 0%,rgba(19,35,91,0.35) 18%,rgba(19,35,91,0.314) 24%,rgba(19,35,91,0.227) 30%,rgba(19,35,91,0.123) 36%,rgba(19,35,91,0.036) 42%,rgba(19,35,91,0) 48%)}
	.clf-hero--capa-media .clf-hero__media::after{background:linear-gradient(90deg,rgba(19,35,91,.66) 0,rgba(19,35,91,.66) 50%,rgba(19,35,91,0) 66%)}
	.clf-hero--capa-ninguna .clf-hero__media::after{display:none}
	.clf-hero__titulo,.clf-hero__sub{text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.6),0 4px 28px rgba(0,0,0,.5)}
	.clf-hero__sub{font-size:1.5rem;max-width:30ch}
	/*fin-capa*/
	.clf-hero__texto{z-index:3;width:55%;box-sizing:border-box;padding:clamp(40px,6vw,72px) clamp(32px,5vw,72px);background:none}
	.clf-hero__titulo{font-size:clamp(2.75rem,5vw,4rem)}
	.clf-hero__acciones{flex-direction:row;flex-wrap:wrap}
}

/* Categorías */
.clf-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;perspective:1200px}
@media (min-width:1100px){.clf-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.clf-cat,.clf-paso{position:relative;display:flex;flex-direction:column;border-radius:var(--clf-radio);background:linear-gradient(180deg,#fff,var(--clf-crema));color:var(--clf-tinta);text-decoration:none;box-shadow:var(--clf-sombra)}
.clf-cat{--clf-foco:#FED01B;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .55s ease-out}
.clf-cat::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--clf-sombra-alta);opacity:0;transition:opacity .3s;pointer-events:none}
.clf-cat.is-tilt{--ty:-6px;transition-duration:.12s,.55s}
.clf-cat.is-tilt::after,.clf-cat:focus-visible::after{opacity:1}
.clf-cat__img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--clf-radio) var(--clf-radio) 0 0;background:#E9ECF3}
.clf-cat__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out}
.clf-cat:hover .clf-cat__img img{transform:scale(1.05)}
.clf-cat__txt{display:flex;flex-direction:column;gap:4px;padding:14px 16px 18px}
.clf-cat__nombre{font:700 1.3rem/1.2 var(--wp--preset--font-family--titulos)}
.clf-cat__desc{font-size:.92rem;line-height:1.4;color:var(--clf-suave)}
.clf-cat__ver{margin-top:8px;font:700 .95rem/1 var(--wp--preset--font-family--titulos);text-decoration:underline;text-decoration-color:var(--clf-amarillo);text-decoration-thickness:3px;text-underline-offset:5px}

/* Destacados: 2 columnas en móvil y 3 desde tablet (6 tarjetas = 2 filas completas) */
.clf-destacados .wc-block-product-template{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (min-width:768px){.clf-destacados .wc-block-product-template{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* Cómo pedir */
.clf-pasos{display:grid;gap:26px;margin:0;padding:18px 0 0;list-style:none}
@media (min-width:768px){.clf-pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.clf-paso{padding:26px 20px 22px}
.clf-paso__n{position:absolute;top:-18px;left:18px;width:42px;height:42px;border-radius:50%;background:var(--clf-amarillo);color:var(--clf-azul-profundo);font:700 1.25rem/42px var(--wp--preset--font-family--titulos);text-align:center;box-shadow:0 3px 0 #C49F00}
.clf-paso__titulo{margin:6px 0 8px;color:var(--clf-tinta);font-size:1.2rem}
.clf-paso p{margin:0;color:var(--clf-tinta)}

/* Texto de la página 15 (intro y "Precios claros") */
.clf-sec--texto{max-width:760px}
.clf-sec--texto p{color:#fff}
.clf-sec--texto h2{margin-top:1.4em}

/* Horario, zona y contacto */
.clf-contacto{display:grid;gap:22px;padding:clamp(22px,4vw,40px);border-radius:24px;background:var(--clf-azul-profundo);color:#fff;box-shadow:var(--clf-sombra-alta);--clf-foco:#FED01B}
@media (min-width:900px){.clf-contacto{grid-template-columns:1.2fr 1fr 1fr;gap:40px}}
.clf-contacto__sub{margin:0 0 10px;color:var(--clf-amarillo);font:700 1rem/1.3 var(--wp--preset--font-family--titulos);letter-spacing:.04em;text-transform:uppercase}
.clf-contacto .clf-horario,.clf-contacto .clf-horario span{color:#E6EAF3}
.clf-contacto__zona{margin:12px 0 0;color:#fff}
.clf-contacto__dir{margin:0 0 8px;font-style:normal;color:#E6EAF3}
.clf-contacto__lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.clf-contacto__enlace{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.clf-contacto__enlace:hover{color:var(--clf-amarillo)}

/* Fondo con capas geométricas + formas flotantes (decorativo) */
.clf-fondo{overflow:hidden;pointer-events:none}
.clf-fondo__capa{position:absolute;left:0;right:0;top:-120px;bottom:-120px;will-change:transform}
.clf-fondo__capa--1{background:radial-gradient(900px 500px at 85% 8%,rgba(254,208,27,.10),transparent 70%)}
.clf-fondo__capa--2{background:radial-gradient(800px 700px at -5% 45%,rgba(19,35,91,.85),transparent 70%)}
.clf-fondo__capa--3{background:linear-gradient(118deg,transparent 0 46%,rgba(255,255,255,.035) 46% 58%,transparent 58% 100%)}
.clf-forma{position:absolute;opacity:.85;will-change:transform}
.clf-forma--anillo{top:90px;right:-70px;animation:clf-flota 13s ease-in-out infinite}
.clf-forma--puntos{top:1900px;left:-48px;animation:clf-flota 16s ease-in-out -4s infinite}
.clf-forma--franjas{top:2600px;right:-90px;animation:clf-flota 18s ease-in-out -8s infinite}
.clf-forma--rombo{top:3150px;left:6%;animation:clf-flota 15s ease-in-out -2s infinite}
@media (max-width:899px){.clf-forma{animation:none;will-change:auto}.clf-forma--franjas,.clf-forma--rombo{display:none}.clf-forma--anillo{width:120px;height:120px;right:-50px}.clf-forma--puntos{width:90px;height:90px;top:2300px}}
@keyframes clf-flota{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-16px,0) rotate(7deg)}}

/* Brillo que sigue al puntero en tarjetas (más la inclinación 3D de tilt.js) */
.wc-block-product::before,.clf-cat::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(220px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.4),transparent 62%);opacity:0;transition:opacity .25s}
.wc-block-product.is-tilt::before,.clf-cat.is-tilt::before{opacity:1}

@media (prefers-reduced-motion:reduce){
	.clf-forma{animation:none!important}
	.clf-fondo__capa{transform:none!important}
}