/* =====================================================================================
   TIENDA · propuesta D
   Se carga después de d.css y landing.css, y reutiliza lo que ya existe: las tarjetas
   y las pastillas del listado de tratamientos (.dt-*), los botones y el cristal.
   Aquí solo está lo propio del comercio: el carrito, la ficha de producto, el checkout,
   el pago y la cuenta de cliente. Prefijo .dts-.
   ===================================================================================== */

.dts-body { background: var(--k); }
/* Con el cajón del carrito abierto, la página de detrás no se mueve */
html.dts-quieto, html.dts-quieto body { overflow: hidden; }

/* =====================================================================================
   PÁGINAS CON CABECERA SIMPLE (carrito, checkout, pago, gracias, cuenta)
   ===================================================================================== */
.dts-pag { padding: calc(var(--hdr) + clamp(40px, 7vh, 90px)) 0 clamp(60px, 10vh, 130px); background: var(--k); }
.dts-pag__t {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; font-size: clamp(30px, 5vw, 68px); line-height: 1; letter-spacing: -.012em;
    color: var(--w); margin: 0 0 clamp(24px, 4vh, 44px);
}
.dts-hueco { display: grid; justify-items: start; gap: 20px; color: var(--mut2); padding: clamp(24px, 4vh, 44px) 0; }
.dts-hueco p { margin: 0; font-size: 16px; }
.dts-volver { display: inline-block; margin-top: 18px; color: var(--mut); text-decoration: none; }
.dts-volver:hover { color: var(--w); }

/* Dos columnas: contenido y resumen pegado */
.dts-dos { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 900px) {
    .dts-dos { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
    .dts-dos--iguales { grid-template-columns: 1fr 1fr; }
    .dts-resumen { position: sticky; top: calc(var(--hdr) + 20px); }
}

.dts-resumen {
    padding: clamp(22px, 2.6vw, 30px); border-radius: 18px;
    background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .14); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dts-resumen--suelto { position: static; max-width: 620px; margin: clamp(26px, 4vh, 44px) auto; text-align: left; }
.dts-resumen__t {
    font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
    text-transform: uppercase; font-size: 15px; letter-spacing: .04em; color: var(--w); margin: 0 0 18px;
}
.dts-resumen__items { display: grid; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dts-seguro { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; color: var(--t4); }
.dts-seguro .material-symbols-outlined { font-size: 15px; }

/* =====================================================================================
   CATÁLOGO Y FICHA
   ===================================================================================== */
/* Las fotos de producto vienen sobre fondo claro de estudio: sobre el negro quedan como
   una vitrina iluminada, que es justo lo que se busca. No se apagan como las demás. */
/* La tienda tiene cuatro productos: en una rejilla que se estira a cinco o seis columnas
   todo se iba a la izquierda y sobraba media pantalla. Las columnas se quedan en 280 px y
   la fila se centra, como el bloque de «tambien te puede interesar». */
.dts-rejilla { grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); justify-content: center; }
.dt-cab--centro .dt-cab__in { text-align: center; }
.dt-cab--centro .dt-cab__p { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .dts-filtros--centro { justify-content: center; } }

.dts-card__im { aspect-ratio: 1 / 1; background: #0d0d10; }
.dts-rejilla .dt-card__im img { filter: none; }
.dts-rejilla .dt-card:hover .dt-card__im img { filter: none; }
.dts-card__cat { display: block; color: var(--champ); font-family: var(--f-m); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.dts-sello {
    position: absolute; left: 10px; top: 10px; z-index: 2; padding: 6px 10px; border-radius: 999px;
    font-size: 9px; letter-spacing: .14em; color: var(--w);
    background: rgba(5, 5, 5, .72); border: 1px solid rgba(243, 244, 245, .3);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dts-card__add {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #0a0a0c;
    background: var(--w); border: 1px solid var(--w); transition: transform .3s var(--e-expo);
}
.dts-card__add:hover { transform: scale(1.08); }
.dts-card__add .material-symbols-outlined { font-size: 20px; }
.dts-vacio { grid-column: 1 / -1; color: var(--mut); }
.dts-paginacion { padding-top: clamp(26px, 4vh, 44px); }
.dts-paginacion .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.dts-paginacion .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
    border-radius: 999px; color: var(--mut2); text-decoration: none; font-family: var(--f-m); font-size: 11px; border: 1px solid var(--line); }
/* La pagina en la que estas, con el mismo trato que la pastilla de filtro elegida y el
   boton de la barra de movil: cristal teñido de champan y filo encendido, nada macizo. */
.dts-paginacion .active .page-link {
    color: var(--w); border-color: rgba(216, 185, 142, .7);
    background:
        linear-gradient(170deg, rgba(216, 185, 142, .20) 0%, rgba(216, 185, 142, .07) 42%, rgba(216, 185, 142, .05) 62%, rgba(216, 185, 142, .17) 100%),
        rgba(12, 13, 15, .3);
    box-shadow: var(--vidrio-relieve), inset 0 0 0 1px rgba(216, 185, 142, .12);
}
.dts-paginacion .disabled .page-link { opacity: .35; }

/* ---------- ficha ---------- */
.dts-prod { padding: calc(var(--hdr) + clamp(30px, 5vh, 60px)) 0 clamp(40px, 7vh, 90px); background: var(--k); }
.dts-prod__in { max-width: 1400px; }
.dts-prod__grid { display: grid; gap: clamp(26px, 4vw, 70px); align-items: start; margin-top: clamp(18px, 3vh, 30px); }
@media (min-width: 900px) { .dts-prod__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.dts-galeria__gran { position: relative; border-radius: 20px; overflow: hidden; background: #0d0d10; border: 1px solid var(--line); aspect-ratio: 1 / 1; }
.dts-galeria__gran img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dts-galeria__sin { display: block; width: 100%; height: 100%; }
.dts-galeria__minis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dts-mini { width: 74px; height: 74px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
            background: #0d0d10; border: 1px solid var(--line); transition: border-color .3s var(--e-expo); }
.dts-mini img { width: 100%; height: 100%; object-fit: cover; }
.dts-mini.es-activa { border-color: var(--champ); }

.dts-prod__n {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -.012em;
    color: var(--w); margin: 4px 0 18px;
}
.dts-prod__precio { margin: 0; color: var(--w); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
.dts-prod__iva { margin: 4px 0 0; color: var(--t4); }
.dts-prod__desc { margin-top: clamp(20px, 3vh, 30px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line); }
.dts-prod__compra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(24px, 3.4vh, 34px); }
.dts-prod__stock { margin: 12px 0 0; color: var(--champ); }
.dts-prod__agotado { margin: clamp(24px, 3.4vh, 34px) 0 0; color: #ff8b7a; }
.dts-rel { padding-top: clamp(40px, 7vh, 90px); border-top: 1px solid var(--line); }

/* ---------- selector de cantidad ---------- */
.dts-cant { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; border: 1px solid var(--line2); overflow: hidden; }
.dts-cant button { width: 34px; height: 34px; background: none; border: 0; color: var(--w); font-size: 16px; line-height: 1; cursor: pointer; }
.dts-cant button:disabled { opacity: .3; cursor: default; }
.dts-cant__n { min-width: 28px; text-align: center; font-family: var(--f-m); font-size: 12px; color: var(--w); }
.dts-cant--lg { height: 52px; }
.dts-cant--lg button { width: 46px; height: 50px; font-size: 19px; }
.dts-cant--lg .dts-cant__n { min-width: 34px; font-size: 14px; }

/* =====================================================================================
   CARRITO: cajón, botón flotante y líneas
   ===================================================================================== */
.dts-fab {
    position: fixed; right: 20px; bottom: 98px; z-index: 880; width: 54px; height: 54px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--w);
    background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .34); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dts-fab__n {
    position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--w); color: #0a0a0c; font-family: var(--f-m); font-size: 10px;
}
.dts-velo { position: fixed; inset: 0; z-index: 1190; background: rgba(4, 4, 5, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dts-cajon {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 1200; width: min(420px, 100vw);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    background: #0b0b0d; border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .5s var(--e-expo);
}
.dts-cajon.es-abierto { transform: none; }
.dts-cajon__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.dts-cajon__t { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
                text-transform: uppercase; font-size: 16px; margin: 0; color: var(--w); }
.dts-cajon__x { position: relative; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 50%; background: none; cursor: pointer; }
.dts-cajon__x::before, .dts-cajon__x::after { content: ""; position: absolute; left: 11px; top: 17px; width: 13px; height: 1.4px; background: var(--w); }
.dts-cajon__x::before { transform: rotate(45deg); }
.dts-cajon__x::after { transform: rotate(-45deg); }
.dts-cajon__cuerpo { overflow-y: auto; padding: 18px 22px; display: grid; gap: 16px; align-content: start; }
.dts-cajon__vacio { color: var(--mut); margin: 0; }
.dts-cajon__pie { padding: 20px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.dts-cajon__pie .dts-btn { margin-top: 14px; }
.dts-cajon__ver { display: block; text-align: center; margin-top: 12px; color: var(--mut); text-decoration: none; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

.dts-linea { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.dts-linea__im { display: block; width: 68px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #141418; }
.dts-linea__im img { width: 100%; height: 100%; object-fit: cover; }
.dts-linea__info { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.dts-linea__n { color: var(--w); text-decoration: none; font-size: 14px; line-height: 1.3; }
.dts-linea__n:hover { color: var(--champ); }
.dts-linea__ud { color: var(--t4); }
.dts-linea__p { display: grid; gap: 6px; justify-items: end; color: var(--w); font-size: 13px; }
.dts-linea__x { background: none; border: 0; padding: 0; cursor: pointer; color: var(--t4); font-size: 11px; text-decoration: underline; }
.dts-linea__x:hover { color: var(--w); }
.dts-linea--pag { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); grid-template-columns: 92px minmax(0, 1fr) auto; }
.dts-linea--pag .dts-linea__im { width: 92px; }
.dts-linea--pedido { grid-template-columns: 54px minmax(0, 1fr) auto; }
.dts-linea--pedido .dts-linea__im { width: 54px; }

.dts-mini-linea { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.dts-mini-linea__im { position: relative; width: 46px; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: #141418; }
.dts-mini-linea__im img { width: 100%; height: 100%; object-fit: cover; }
.dts-mini-linea__n { position: absolute; right: -6px; top: -6px; min-width: 19px; height: 19px; border-radius: 999px;
                     display: inline-flex; align-items: center; justify-content: center; background: var(--w); color: #0a0a0c; font-size: 9.5px; }
.dts-mini-linea__t { color: var(--mut2); font-size: 13px; line-height: 1.3; }
.dts-mini-linea__p { color: var(--w); font-size: 12px; }

/* =====================================================================================
   FORMULARIOS (checkout, cuenta, gracias)
   ===================================================================================== */

.dts-envios { display: grid; gap: 10px; }
.dts-form label.dts-envio, .dts-envio {
    display: grid; margin-bottom: 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0;
    padding: 15px 17px; border-radius: 14px; cursor: pointer;
    background: rgba(243, 244, 245, .03); border: 1px solid var(--line); transition: border-color .3s var(--e-expo);
}
.dts-envio.es-activo { border-color: rgba(216, 185, 142, .7); background: rgba(216, 185, 142, .06); }
.dts-form label.dts-envio input, .dts-envio input { width: auto; margin: 0; accent-color: var(--champ); }
.dts-envio__n { color: var(--w); font-size: 14.5px; }
.dts-envio__p { color: var(--t4); }

/* =====================================================================================
   PAGO
   ===================================================================================== */
.dts-pago__in { max-width: 560px; }
.dts-pago__pedido { color: var(--mut); margin: -18px 0 26px; }
.dts-pago__pedido b { color: var(--w); }
.dts-pago__express { margin-bottom: 22px; }
.dts-pago__o { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--t4); font-family: var(--f-m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.dts-pago__o::before, .dts-pago__o::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dts-pago__form .dts-btn { margin-top: 22px; }
.dts-spinner { width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(10, 10, 12, .3); border-top-color: #0a0a0c; animation: dts-gira .7s linear infinite; }
@keyframes dts-gira { to { transform: rotate(360deg); } }

/* =====================================================================================
   GRACIAS
   ===================================================================================== */
.dts-gracias__in { max-width: 680px; text-align: center; }
.dts-gracias .dts-pag__t { margin-bottom: 16px; }
.dts-gracias__marca { position: relative; display: block; width: 62px; height: 62px; margin: 0 auto 24px; border-radius: 50%; border: 1px solid rgba(216, 185, 142, .6); }
.dts-gracias__marca::before { content: ""; position: absolute; left: 21px; top: 29px; width: 10px; height: 19px; border-right: 2px solid var(--champ); border-bottom: 2px solid var(--champ); transform: rotate(45deg); }
.dts-gracias__marca--espera::before { left: 50%; top: 50%; width: 14px; height: 14px; border: 2px solid var(--champ); border-top-color: transparent; border-radius: 50%; transform: translate(-50%, -50%); animation: dts-gira 1.1s linear infinite; }
.dts-gracias__lead { margin: 0 auto; max-width: 48ch; color: var(--mut2); font-size: 16px; line-height: 1.6; }
.dts-gracias__lead b { color: var(--w); }
.dts-gracias .dts-form--caja { text-align: left; margin-bottom: 26px; }

/* =====================================================================================
   CUENTA
   ===================================================================================== */
.dts-cuenta__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.dts-cuenta__cab .dts-pag__t { margin-bottom: 8px; }
.dts-cuenta__hola { margin: 0; color: var(--mut); font-size: 14px; }
.dts-cuenta__tabs { position: static; background: none; padding-left: 0; padding-right: 0; margin-bottom: clamp(24px, 4vh, 40px); }

.dts-pedidos { display: grid; gap: 12px; }
.dts-pedido { border-radius: 16px; overflow: hidden; background: var(--vidrio); border: 1px solid var(--line); box-shadow: var(--vidrio-relieve); }
.dts-pedido__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center;
                   padding: 16px 18px; cursor: pointer; list-style: none; }
.dts-pedido__cab::-webkit-details-marker { display: none; }
.dts-pedido__id { display: grid; gap: 5px; }
.dts-pedido__num { color: var(--w); font-size: 12px; }
.dts-pedido__fecha { color: var(--t4); font-size: 10px; }
.dts-pedido__fotos { display: flex; gap: 5px; }
.dts-pedido__foto { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: #141418; display: inline-flex; align-items: center; justify-content: center; }
.dts-pedido__foto img { width: 100%; height: 100%; object-fit: cover; }
.dts-pedido__foto--sin, .dts-pedido__foto--mas { color: var(--t4); font-family: var(--f-m); font-size: 11px; }
.dts-pedido__meta { display: flex; align-items: center; gap: 14px; }
.dts-pedido__total { color: var(--w); font-size: 14px; font-weight: 600; }
.dts-pedido__mas { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.dts-pedido__mas::before, .dts-pedido__mas::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--mut); transition: transform .35s var(--e-expo); }
.dts-pedido__mas::before { width: 13px; height: 1.3px; margin: -.65px 0 0 -6.5px; }
.dts-pedido__mas::after { width: 1.3px; height: 13px; margin: -6.5px 0 0 -.65px; }
.dts-pedido[open] .dts-pedido__mas::after { transform: rotate(90deg); }
.dts-pedido__det { padding: 4px 18px 20px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
.dts-pedido__cuentas { padding-top: 14px; border-top: 1px solid var(--line); }
.dts-pedido__dir { margin: 0; color: var(--mut2); font-size: 13.5px; line-height: 1.5; }
.dts-pedido__dir span { display: block; color: var(--t4); margin-bottom: 4px; }
.dts-estado { padding: 5px 10px; border-radius: 999px; font-size: 9px; border: 1px solid var(--line2); color: var(--mut2); }
.dts-estado--pagado { color: #9ff0c4; border-color: rgba(60, 200, 130, .5); }
.dts-estado--pendiente_pago { color: var(--champ); border-color: rgba(216, 185, 142, .5); }
.dts-estado--cancelado { color: #ff8b7a; border-color: rgba(255, 92, 66, .45); }

/* ---------- entrar, registro, contraseñas ---------- */
.dts-auth { display: grid; place-items: center; }
.dts-auth__caja {
    width: min(440px, 100%); padding: clamp(26px, 3.4vw, 40px); border-radius: 20px;
    background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .14); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dts-auth__caja--ancha { width: min(640px, 100%); }
.dts-auth__t {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; font-size: clamp(24px, 3vw, 36px); line-height: 1.04; color: var(--w); margin: 6px 0 24px;
}
.dts-auth__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.dts-auth__olvido { color: var(--mut); font-size: 13px; text-decoration: none; }
.dts-auth__olvido:hover { color: var(--w); }
.dts-auth__alt { margin: 20px 0 0; text-align: center; color: var(--mut); font-size: 14px; }
.dts-auth__alt a { color: var(--champ); }

/* =====================================================================================
   MÓVIL
   ===================================================================================== */
@media (max-width: 767px) {
    .dts-fab { bottom: 20px; right: 16px; }
    .dts-cuenta__cab { align-items: flex-start; }
    .dts-linea--pag { grid-template-columns: 72px minmax(0, 1fr); }
    .dts-linea--pag .dts-linea__im { width: 72px; }
    .dts-linea--pag .dts-linea__p { grid-column: 2; justify-items: start; }
    .dts-pedido__cab { grid-template-columns: minmax(0, 1fr) auto; }
    .dts-pedido__fotos { display: none; }
}
@media (max-width: 620px) {
    .dts-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dts-campos { grid-template-columns: 1fr; }
}