/* Marco visual de junio (web moderna, Task 5): cabecera, menú, pie, botones y revelado.
   Todo va bajo .cw-marco (clase de <body> que pone ceslan_web1_marco_nuevo()): sin ella esta hoja no cambia nada.
   El contenido de las páginas que aún son de WPBakery no se toca (web mezclada, D5): solo su marco. */

/* Cabecera */
.cw-marco #Header_wrapper{background:#fff}
.cw-marco #Top_bar{border-bottom:1px solid var(--line)}
.cw-marco .cw-cabecera.cw-pegada #Top_bar{box-shadow:0 8px 24px rgba(27,34,51,.08);background:rgba(255,255,255,.96)}
.cw-marco #menu > ul > li > a{font:600 15px/60px var(--cw-jakarta);color:var(--ink)}
.cw-marco #menu > ul > li > a > span{border-right:0;padding:0 16px;position:relative}
.cw-marco #menu > ul > li > a > span::after{content:"";position:absolute;left:16px;right:16px;bottom:14px;height:3px;border-radius:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.cw-marco #menu > ul > li > a:hover > span::after,.cw-marco #menu > ul > li.current-menu-item > a > span::after,.cw-marco #menu > ul > li.current-menu-ancestor > a > span::after{transform:scaleX(1)}
.cw-marco #menu a:hover,.cw-marco #menu li.current-menu-item > a,.cw-marco #menu li.current-menu-ancestor > a{color:var(--ink)}
.cw-marco #menu ul ul{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:6px 0}
.cw-marco #menu ul ul a{font:500 14.5px/24px var(--cw-jakarta);color:var(--ink);border-bottom:0;padding:9px 18px}
.cw-marco #menu ul ul a:hover{background:var(--bg2)}
.cw-marco .header-cart-count{background:var(--yellow);color:var(--ink);font-weight:700}
.cw-marco .header-cart-total{font-family:var(--cw-jakarta);color:var(--ink)}
.cw-marco .cw-trazo{stroke:var(--ink)}
.cw-marco .cw-menu-barras,.cw-marco .cw-menu-barras::before,.cw-marco .cw-menu-barras::after{background:var(--ink)}
.cw-marco .cw-buscador{border-top:1px solid var(--line)}
.cw-marco .cw-buscador input[type=search]{border:1px solid var(--line);border-radius:var(--r-btn);font-family:var(--cw-jakarta)}
.cw-marco .cw-buscador button{background:var(--yellow);color:var(--ink);border-radius:var(--r-btn);font-family:var(--cw-jakarta)}

@media (max-width:1239px){
	.cw-marco #Header_wrapper{background:#fff;padding-bottom:0}
	.cw-marco #menu > ul > li > a{font:600 15px/22px var(--cw-jakarta)}
	.cw-marco #menu > ul > li > a > span{padding:0}
	.cw-marco #menu > ul > li > a > span::after{display:none}
	.cw-marco #menu ul ul{border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}
	.cw-js .cw-marco #menu{background:var(--ink)}
	.cw-js .cw-marco #menu > ul > li > a,.cw-js .cw-marco #menu ul ul a{color:#E6E9F0}
	.cw-js .cw-marco #menu ul ul a:hover{background:rgba(255,255,255,.06)}
	.cw-js .cw-marco .cw-panel-iconos .cw-trazo{stroke:#fff}
}
/* Móvil: una sola fila de 64 px (logo a la izquierda; carrito y menú a la derecha) en lugar de logo centrado y
   carrito debajo (127 px). El importe del carrito se queda en el panel; aquí basta el número. */
@media (max-width:767px){
	.cw-marco #Top_bar{min-height:64px}
	.cw-marco #Top_bar .container{flex-direction:row;align-items:center;justify-content:space-between;padding:0 16px;min-height:64px}
	.cw-marco #Top_bar .logo{margin:0;width:auto;height:44px}
	.cw-marco #Top_bar .logo img{height:44px;width:auto}
	.cw-js .cw-marco .cw-menu-boton{right:10px;top:15px;width:34px;height:34px}
	.cw-marco .top_bar_right{width:auto;height:44px;margin:0 50px 0 0}
	.cw-marco .top_bar_right_wrapper{height:44px}
	.cw-marco .top_bar_right .header-cart-total{display:none}
}

/* Pie */
.cw-pie{background:var(--ink);color:#C9CEDA;font:400 15px/1.6 var(--cw-jakarta);padding:64px 0 28px}
.cw-pie a{color:#fff;text-decoration:none}
.cw-pie a:hover{color:var(--yellow);text-decoration:none}
.cw-pie__envoltura{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.cw-pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.cw-pie h2{font:700 16px/1.3 var(--cw-jakarta);color:#fff;margin:0 0 14px}
.cw-pie ul{list-style:none;margin:0;padding:0}
.cw-pie li{margin:0 0 8px}
.cw-pie p{margin:0 0 10px}
.cw-pie__tel{display:inline-flex;margin-top:6px;font-weight:700;font-size:18px}
.cw-pie__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:13.5px}
.cw-pie__arriba{display:inline-flex;align-items:center;gap:8px;color:#C9CEDA}
@media (max-width:767px){.cw-pie{padding-top:44px}.cw-pie__rejilla{grid-template-columns:1fr;gap:26px}}

/* Botones del sistema (fichas y bloques nuevos) */
.cw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--cw-jakarta);padding:15px 24px;border-radius:var(--r-btn);border:0;cursor:pointer;text-decoration:none;transition:transform .18s var(--ease),box-shadow .25s var(--ease)}
.cw-btn:hover{text-decoration:none}
.cw-btn--primario{background:var(--yellow);color:var(--ink);box-shadow:0 10px 24px rgba(252,184,20,.35)}
.cw-btn--primario:hover{transform:translateY(-2px);color:var(--ink)}
.cw-btn--tinta{background:var(--ink);color:#fff}
.cw-btn--borde{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.cw-marco :focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Revelado al hacer scroll: solo se oculta si hay JS (clase cw-js) y no se pide menos movimiento. Sin JS, todo visible. */
@media (prefers-reduced-motion:no-preference){
	.cw-js .cw-marco [data-revelar]:not(.es-visible){opacity:0;transform:translateY(24px)}
	.cw-js .cw-marco [data-revelar]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
}