/* Tienda B2C de Dyxel. Hoja propia: dyxel-pages.css la comparten todas las
   paginas del sitio y tiene cache de 10 min sin hash, asi que no se toca. */

/* --- Cabecera compacta para las paginas transaccionales ---
   `.page-hero` de la hoja compartida es `min-height:100svh` centrado: correcto
   para la portada, desastroso para un checkout, que abria con una pantalla
   entera en blanco antes del formulario. Estas paginas usan esto en su lugar. */
.cab-pagina{padding:104px 0 26px}
.cab-pagina .crumb{margin-bottom:16px}
.cab-pagina h1{margin:0;font-family:'Manrope',sans-serif;font-size:clamp(27px,3.6vw,38px);line-height:1.12;letter-spacing:-.015em}
.cab-pagina p{margin:10px 0 0;max-width:560px;color:var(--muted);font-size:15.5px;line-height:1.6}
.cab-pagina + section{padding-top:0}

/* --- Cabecera de la tienda ---
   Compacta a proposito: una tienda tiene que abrir enseñando producto, no una
   portada. El objetivo es que la primera fila de la rejilla entre en pantalla. */
.tienda-cabecera{padding:96px 0 0}
.cab-fila{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;margin-bottom:16px}
.tienda-cabecera h1{margin:0;font-family:'Manrope',sans-serif;font-size:clamp(26px,3.2vw,34px);line-height:1;letter-spacing:-.02em}
.tienda-cabecera p{margin:0;flex:1 1 320px;color:var(--muted);font-size:14.5px;line-height:1.5}
.cab-datos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.cab-datos li{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.cab-datos b{font-family:'Manrope',sans-serif;font-size:14.5px;line-height:1}
.cab-datos span{font-size:11px;letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
.cab-pago{flex:0 0 auto;padding:12px 18px}
.tienda-rejilla{padding-top:0}
.tienda-cabecera .shop-tools{margin-bottom:14px}
.tienda-cabecera .shop-search input{padding:11px 15px 11px 38px}
.tienda-cabecera .chip{padding:7px 13px;font-size:13px}
.tienda-cabecera .shop-count{margin:12px 0 0}

/* --- Filtros y buscador --- */
.shop-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 26px}
.shop-search{flex:1 1 260px;position:relative}
.shop-search input{width:100%;padding:13px 15px 13px 40px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-size:15px}
.shop-search input:focus{outline:none;border-color:var(--blue)}
.shop-search:before{content:"⌕";position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:13.5px;cursor:pointer;transition:.2s;font-family:'Manrope',sans-serif;font-weight:600}
.chip:hover{color:var(--ink);border-color:rgba(151,174,255,.36)}
.chip[aria-pressed="true"]{background:linear-gradient(135deg,#6598ff,#7659ff);border-color:transparent;color:#fff}
.chip b{font-weight:600;opacity:.65;margin-left:5px}
.shop-count{color:var(--muted);font-size:13.5px;margin:0 0 18px}

/* --- Rejilla y tarjeta --- */
.shop-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.p-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(14,21,40,.9),rgba(8,12,24,.9));transition:.26s;position:relative}
.p-card:hover{transform:translateY(-3px);border-color:rgba(151,174,255,.34)}
.p-card.destacado{border-color:rgba(114,239,177,.3)}
.p-flag{position:absolute;top:-1px;right:16px;padding:4px 10px 5px;border-radius:0 0 8px 8px;background:var(--green);color:#04250f;font-family:'Manrope',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em}
.p-tag{font-family:'Manrope',sans-serif;font-size:10.5px;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.p-card h3{margin:0;font-family:'Manrope',sans-serif;font-size:19.5px;line-height:1.28}
.p-promesa{margin:0;color:var(--ink);font-size:14.5px;line-height:1.55;opacity:.9}
.p-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.p-meta span{padding:4px 9px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:11.5px}
.p-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px;border-top:1px solid var(--line)}
.p-price{font-family:'Manrope',sans-serif;font-size:25px;font-weight:700;line-height:1}
.p-price small{display:block;margin-top:4px;font-size:11.5px;font-weight:500;color:var(--muted)}
.p-price s{display:block;font-size:12.5px;font-weight:500;color:var(--muted);opacity:.75}
.p-actions{display:flex;gap:8px;align-items:center}
.p-add,.p-info{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;padding:11px 15px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:.22s;white-space:nowrap}
.p-add{background:linear-gradient(135deg,#6598ff,#7659ff);color:#fff}
.p-add:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(73,87,255,.32)}
.p-add.puesto{background:var(--green);color:#04250f}
.p-info{background:transparent;border:1px solid var(--line);color:var(--muted);padding:11px 13px}
.p-info:hover{color:var(--ink);border-color:var(--blue)}
.shop-empty{padding:44px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px}

/* --- Ficha en modal --- */
.modal{position:fixed;inset:0;z-index:60;display:none;padding:20px;overflow-y:auto;background:rgba(2,4,10,.82)}
.modal[open],.modal.abierto{display:block}
.modal-box{max-width:640px;margin:40px auto;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--panel);position:relative}
.modal-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:19px;cursor:pointer}
.modal-x:hover{color:var(--ink);border-color:var(--blue)}
.modal-box h2{margin:12px 0 8px;font-family:'Manrope',sans-serif;font-size:26px;line-height:1.25}
.modal-box .p-promesa{font-size:16px;margin-bottom:14px}
.modal-box p.desc{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 20px}
.modal-box h4{margin:22px 0 10px;font-family:'Manrope',sans-serif;font-size:13px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase}
.modal-box ul{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.85}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}

/* --- Carrito --- */
/* Abajo a la IZQUIERDA en pantallas anchas: los botones Ver/Anadir de las
   tarjetas van a su derecha, y flotando a la derecha el carrito tapaba el de la
   tarjeta inferior, dejandolo sin poder pulsar. */
.cart-btn{position:fixed;left:20px;bottom:20px;z-index:50;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:14px;padding:15px 20px;background:linear-gradient(135deg,#6598ff,#7659ff);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 16px 44px rgba(73,87,255,.4);transition:.24s}
.cart-btn:hover{transform:translateY(-2px)}
.cart-btn[hidden]{display:none}
.cart-btn i{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:rgba(4,7,17,.42);font-size:12.5px;font-style:normal}
.drawer{position:fixed;inset:0;z-index:70;display:none;background:rgba(2,4,10,.82)}
.drawer.abierto{display:block}
.drawer-box{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--line)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0;font-family:'Manrope',sans-serif;font-size:19px}
.drawer-list{flex:1;overflow-y:auto;padding:14px 22px}
.cart-row{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.cart-row b{display:block;font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;line-height:1.35;margin-bottom:5px}
.cart-row small{color:var(--muted);font-size:12.5px}
.cart-row .qty{display:flex;align-items:center;gap:7px;margin-top:9px}
.cart-row .qty button{width:27px;height:27px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);cursor:pointer;font-size:15px;line-height:1}
.cart-row .qty button:hover{border-color:var(--blue)}
.cart-row .qty span{min-width:22px;text-align:center;font-family:'Manrope',sans-serif;font-weight:600}
.cart-row .lin{margin-left:auto;text-align:right;font-family:'Manrope',sans-serif;font-weight:700;white-space:nowrap}
.cart-row .quitar{display:block;margin-top:7px;border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
.cart-row .quitar:hover{color:#ff8f9b}
.drawer-foot{padding:20px 22px;border-top:1px solid var(--line)}
.drawer-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.drawer-total b{font-family:'Manrope',sans-serif;font-size:27px}
.gift-amounts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.gift-amounts button{padding:9px 15px;border:1px solid var(--line);border-radius:10px;background:rgba(4,7,17,.5);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:600;cursor:pointer;transition:.2s}
.gift-amounts button:hover,.gift-amounts button[aria-pressed="true"]{border-color:var(--blue);color:#fff}

/* --- Checkout y pedido --- */
.form-grid{display:grid;gap:16px;max-width:520px}
.campo label{display:block;margin-bottom:7px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;color:var(--muted)}
.campo input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);font-size:15px}
.campo input:focus{outline:none;border-color:var(--blue)}
.campo .err{margin-top:6px;color:#ff8f9b;font-size:12.5px}
.rails{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rail{display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--panel);cursor:pointer;transition:.2s}
.rail:hover{border-color:rgba(151,174,255,.4)}
.rail[aria-pressed="true"]{border-color:var(--blue);background:linear-gradient(135deg,rgba(101,152,255,.14),rgba(118,89,255,.1))}
.rail b{font-family:'Manrope',sans-serif;font-size:15.5px}
.rail small{color:var(--muted);font-size:12.5px;line-height:1.5}
.resumen{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.resumen .fila{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14.5px;color:var(--muted)}
.resumen .fila.total{border-top:1px solid var(--line);margin-top:9px;padding-top:15px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:19px;font-weight:700}
.pago-caja{padding:26px;border:1px solid var(--line);border-left:2px solid var(--blue);border-radius:14px;background:var(--panel)}
.pago-dato{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:10px 0;border:1px solid var(--line);border-radius:11px;background:rgba(4,7,17,.5)}
.pago-dato span{color:var(--muted);font-size:12.5px;display:block;margin-bottom:4px}
.pago-dato b{font-family:'Manrope',sans-serif;font-size:17px;word-break:break-all}
.pago-dato .memo{color:var(--green)}
.copiar{border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);padding:8px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.copiar:hover{color:var(--ink);border-color:var(--blue)}
.pasos{counter-reset:p;list-style:none;padding:0;margin:20px 0 0}
.pasos li{counter-increment:p;position:relative;padding-left:38px;margin-bottom:14px;color:var(--muted);font-size:14.5px;line-height:1.6}
.pasos li:before{content:counter(p);position:absolute;left:0;top:-1px;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,#6598ff,#7659ff);color:#fff;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700}
.aviso{margin-top:18px;padding:14px 16px;border:1px solid rgba(255,190,90,.3);border-radius:11px;background:rgba(255,190,90,.07);color:#ffcf8a;font-size:13.5px;line-height:1.6}
.aviso.rojo{border-color:rgba(255,120,140,.32);background:rgba(255,120,140,.07);color:#ffa3b0}
.aviso.verde{border-color:rgba(114,239,177,.32);background:rgba(114,239,177,.07);color:#8ff0c2}
.estado-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600}
.estado-pill i{width:7px;height:7px;border-radius:50%;display:inline-block}
.estado-pill.pendiente{background:rgba(255,190,90,.12);color:#ffcf8a}
.estado-pill.pendiente i{background:#ffbe5a}
.estado-pill.entregado,.estado-pill.pagado{background:rgba(114,239,177,.12);color:#8ff0c2}
.estado-pill.entregado i,.estado-pill.pagado i{background:var(--green)}
.entrega-item{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:14px}
.entrega-item h4{margin:0 0 10px;font-family:'Manrope',sans-serif;font-size:17px;color:var(--ink);letter-spacing:0;text-transform:none}
.cargando{padding:44px;text-align:center;color:var(--muted)}

@media(max-width:620px){
  .p-foot{flex-direction:column;align-items:stretch}
  .p-actions{width:100%}
  .p-add{flex:1;justify-content:center}
  .modal-box{padding:24px 20px;margin:20px auto}
  .cart-btn{left:20px;right:20px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .p-card,.p-add,.chip,.cart-btn,.rail{transition:none}
  .p-card:hover,.p-add:hover,.cart-btn:hover{transform:none}
}