/* YOLSEM MOTOS (D62, P88): el diseno de la maqueta YOLSEM_MOTOS.html sobre las piezas de la tienda (tienda.css, pedido.css y
   tienda-estructura.css, que se cargan antes). Aca van los colores, las letras y las partes propias: barra, cabecera, portada, lineas,
   cinta, promos, pie y el boton de ayuda. Las fuentes son Barlow y Barlow Condensed (OFL), guardadas en el sitio. */

@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/yolsem/fuentes/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/yolsem/fuentes/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/yolsem/fuentes/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/yolsem/fuentes/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/yolsem/fuentes/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/yolsem/fuentes/barlow-condensed-latin-700-normal.woff2) format('woff2')}

/* los colores de la tienda pasan a los de YOLSEM: el negro de la maqueta y el dorado en lugar del verde */
:root{--ink:#141414;--green:#c99b50;--oro:#c99b50;--oro-claro:#e2bb7b;--oro-texto:#8a6420;--crema:#f6f4f0;--linea:#e5e3e0;--gris:#6f6a63}
body{font-family:Barlow,Arial,sans-serif;font-size:15px;line-height:1.5;color:var(--ink);background:#fff}
h1,h2{font-family:'Barlow Condensed',Impact,Arial,sans-serif;font-weight:700;letter-spacing:-.5px}
em{color:var(--oro-claro)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.eyebrow{color:var(--oro-texto);letter-spacing:2.5px;font-weight:600;font-size:11px}
.button{border-radius:0;letter-spacing:1.2px;text-transform:uppercase;font-size:12px;font-weight:700}
.green{background:var(--oro);color:#171717}
.green:hover{background:var(--oro-claro)}
.black{background:#171717;color:var(--oro-claro)}
.text-link{border-bottom-color:var(--oro)}
.icono{width:22px;height:22px;vertical-align:middle}

/* barra de arriba */
.y-barra{background:var(--oro);color:#171717;font-size:10px;letter-spacing:1px;font-weight:600;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1190px)/2))}
.y-barra i{font-style:normal;opacity:.55;margin:0 8px}
.y-barra .icono{width:16px;height:16px;margin-right:6px}

/* cabecera: logo, buscador, carrito y menu */
header.y-cabecera{display:block;position:sticky;top:0;z-index:20;background:#fff;padding:0;border:0;box-shadow:0 1px 0 var(--linea)}
.y-cabecera-fila{height:96px;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100vw - 1190px)/2))}
.y-logo{margin-right:auto;display:block}
.y-logo img{width:156px;height:auto;display:block}
.y-buscar{width:420px;height:42px;border-bottom:1px solid #999;display:flex}
.y-buscar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;outline:none}
.y-buscar button{width:42px;border:0;background:none;cursor:pointer;color:inherit}
.y-carrito,.y-abrir-menu{position:relative;border:0;background:none;padding:6px;cursor:pointer;color:inherit;display:flex;align-items:center}
.y-carrito .contador{position:absolute;top:-6px;right:-8px;background:var(--oro);color:#171717;font-size:10px;min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0 4px}
.y-abrir-menu{display:none}
nav.y-menu{display:flex;align-items:center;gap:34px;height:48px;border-top:1px solid var(--linea);font-size:14px;font-weight:500;padding:0 max(24px,calc((100vw - 1190px)/2))}
nav.y-menu a{height:100%;display:flex;align-items:center;position:relative}
nav.y-menu a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--oro)}
nav.y-menu a:hover{text-decoration:none;color:var(--oro-texto)}
.y-lema{margin-left:auto;font-size:10px;letter-spacing:1.5px;color:#888}

/* portada con la moto */
.y-portada{position:relative;min-height:540px;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:40px max(24px,calc((100vw - 1190px)/2));background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.1) 70%),url(/assets/yolsem/img/portada-2000.webp) center/cover no-repeat #111}
.y-portada-texto{max-width:560px}
.y-portada .eyebrow{color:var(--oro-claro)}
.y-portada h1{font-size:clamp(52px,6.6vw,84px);line-height:.98;margin:0 0 22px;color:#fff}
.y-portada-texto>p:not(.eyebrow){color:#d6d6d6;font-size:17px;line-height:1.65;margin-bottom:26px}
.y-portada-pie{position:absolute;bottom:22px;font-size:10px;letter-spacing:2px;color:#aaa;margin:0}

/* las cuatro lineas de la portada */
.y-lineas{padding:56px max(24px,calc((100vw - 1190px)/2)) 60px;text-align:center}
.y-lineas h2{font-size:32px;margin:0 0 30px}
.y-lineas-grilla{max-width:860px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
a.category.y-linea{display:block;padding:0;border:0;min-height:0;background:none;text-align:center}
a.category.y-linea:hover{background:none}
.y-linea-foto{display:block;height:168px;width:138px;margin:0 auto 14px;border-radius:100px 100px 85px 85px;background:var(--crema);border:1px solid #eeebe5;overflow:hidden;transition:transform .3s,border-color .3s}
.y-linea-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:16px}
.y-linea:hover .y-linea-foto{transform:translateY(-5px);border-color:var(--oro)}
.y-linea b{display:block;font-size:16px;font-weight:600}
.y-linea small{display:block;font-size:11px;letter-spacing:.5px;color:var(--oro-texto);margin-top:4px}
.y-lineas .otras{justify-content:center;margin-top:28px}

/* cinta dorada que corre (se queda quieta si la persona pidio menos movimiento) */
.y-cinta{overflow:hidden;background:var(--oro);padding:16px 0;color:#171717}
.y-cinta>div{white-space:nowrap;font-weight:600;letter-spacing:2px;font-size:14px;width:max-content;animation:y-cinta 50s linear infinite}
.y-cinta span{margin:0 30px}
@keyframes y-cinta{to{transform:translateX(-38%)}}

.y-seccion .section-head h2{font-size:clamp(28px,3.4vw,44px)}

/* dos promos lado a lado */
.y-promos{display:grid;grid-template-columns:1fr 1fr}
.y-promo{min-height:300px;position:relative;overflow:hidden;display:flex;align-items:center;padding:40px max(32px,calc((100vw - 1190px)/2));padding-right:32px}
.y-promo>div{position:relative;z-index:1}
.y-promo h2{font-size:40px;line-height:1.05;margin:0 0 24px}
.y-promo-oscura{color:#fff;background:linear-gradient(90deg,#151515 5%,rgba(21,21,21,.45) 70%),url(/assets/yolsem/img/portada-900.webp) 70% center/cover no-repeat #151515}
.y-promo-oscura .eyebrow{color:var(--oro-claro)}
.y-promo-clara{background:#eeece7;color:#171717;padding-left:45px}
.y-promo-clara img{position:absolute;right:6%;top:10%;height:80%;width:auto;mix-blend-mode:multiply;transform:rotate(-8deg);transition:transform .3s}
.y-promo-clara:hover img{transform:rotate(-3deg) scale(1.04)}

/* cierre con la moto */
.y-banner{color:#fff;padding:72px max(24px,calc((100vw - 1190px)/2));background:linear-gradient(90deg,#0c0c0c 15%,rgba(0,0,0,.25)),url(/assets/yolsem/img/portada-2000.webp) right 60%/cover no-repeat #0c0c0c}
.y-banner .eyebrow{color:var(--oro-claro)}
.y-banner h2{font-size:clamp(40px,5vw,56px);line-height:1.02;margin:0 0 26px;color:#fff}

/* las tarjetas y el listado con los colores de YOLSEM */
.photo span{background:#171717;color:var(--oro-claro);border:0}
.photo.foto-pendiente span{color:var(--oro-claro)}
.precio-tarjeta strong,.precio-ficha strong{color:#171717}
.rebaja{background:#171717;color:var(--oro-claro)}
.agregar{border-radius:0;letter-spacing:1px;text-transform:uppercase;font-size:11px}
.agregar:hover{background:#171717;color:var(--oro-claro)}

/* pie oscuro */
footer.y-pie{display:block;background:#151515;color:#aaa;padding:50px max(24px,calc((100vw - 1190px)/2)) 0;font-size:13px}
.y-pie-grilla{display:grid;grid-template-columns:1.4fr .8fr 1.1fr 1fr;gap:35px;padding-bottom:40px}
.y-pie h2{font-family:Barlow,Arial,sans-serif;font-weight:600;letter-spacing:0;color:#eee;font-size:14px;margin:0 0 18px}
.y-pie a{display:block;margin-bottom:9px}
.y-pie a:hover{color:var(--oro-claro)}
.y-pie-marca img{width:150px;height:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.y-pie-marca p{color:var(--oro-claro);font-size:12px}
.y-etiquetas{display:flex;flex-wrap:wrap;gap:7px}
.y-etiquetas span{border:1px solid #4b453b;color:#c5b99e;padding:4px 8px;font-size:11px}
.y-pie-final{border-top:1px solid #303030;padding:20px 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:11px}
.y-legales{display:flex;flex-wrap:wrap;gap:6px 16px}
.y-legales a{display:inline;margin:0}
.y-pie .sello{color:#aaa}
.y-pie .sello strong{color:var(--oro-claro)}

/* boton de ayuda por WhatsApp (solo si YOLSEM tiene numero) */
.y-ayuda{position:fixed;bottom:24px;right:24px;z-index:25;background:var(--oro);color:#171717;border-radius:30px;box-shadow:0 3px 20px rgba(0,0,0,.18);display:flex;align-items:center;gap:9px;padding:12px 18px;font-size:12px;font-weight:600}

/* la ventana del pedido en dorado */
.pedido .button.green{background:var(--oro);color:#171717}
.pasos-pedido li[aria-current="step"],.pasos-pedido li.activo{border-color:var(--oro)}

@media(max-width:1000px){
  .y-buscar{width:320px}
  .y-lema{display:none}
  .y-pie-grilla{gap:22px}
  .y-lineas-grilla{gap:16px}
}
@media(max-width:700px){
  .y-barra{justify-content:center;font-size:9px;height:30px}
  .y-barra>span:first-child{display:none}
  .y-barra-extra{display:none}
  .y-cabecera-fila{height:78px;gap:12px;flex-wrap:wrap;position:relative;margin-bottom:44px}
  .y-logo img{width:118px}
  .y-buscar{position:absolute;left:16px;right:16px;top:78px;width:auto;border-color:var(--linea)}
  .y-abrir-menu{display:flex}
  nav.y-menu{display:none;height:auto;flex-direction:column;align-items:flex-start;gap:0;padding:8px 16px 14px}
  nav.y-menu.abierto{display:flex}
  nav.y-menu a{height:44px;width:100%}
  .y-portada{min-height:500px;justify-content:flex-start;padding-top:56px;background:linear-gradient(90deg,rgba(0,0,0,.82) 5%,rgba(0,0,0,.4) 65%,rgba(0,0,0,.15)),url(/assets/yolsem/img/portada-900.webp) 68% center/auto 100% no-repeat #111}
  .y-portada h1{font-size:56px}
  .y-portada-pie{display:none}
  .y-lineas{padding:36px 16px 40px}
  .y-lineas h2{font-size:26px}
  .y-lineas-grilla{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .y-linea-foto{height:130px;width:106px}
  .y-cinta>div{font-size:11px}
  .y-promos{grid-template-columns:1fr}
  .y-promo{min-height:250px;padding:30px 20px}
  .y-promo h2{font-size:34px}
  .y-promo-clara img{height:60%;right:4%;top:auto;bottom:8%}
  .y-banner{padding:50px 20px;background-position:65% center}
  .y-pie-grilla{grid-template-columns:1fr 1fr;gap:28px 18px;padding-bottom:28px}
  .y-pie-marca{grid-column:1/-1}
  .y-ayuda{bottom:16px;right:16px;padding:13px;border-radius:50%}
  .y-ayuda span{display:none}
}
@media(prefers-reduced-motion:reduce){.y-cinta>div{animation:none}.y-linea-foto,.y-promo-clara img{transition:none}}