/* El Baúl de los Deseos — capa de marca compartida (portada + catálogo).
   Vive aparte de styles.css y luxury.css porque la cabecera y el dock de
   contacto son los mismos en las dos páginas y antes estaban duplicados. */

/* ---------------------------------------------------------------
   1. Lockup de marca
   El logo original es CUADRADO: el baúl arriba y el nombre debajo.
   Antes se metía a la fuerza en una caja apaisada de 188x74, así que
   o se recortaba el nombre (object-fit:cover) o quedaba una miniatura
   de 74px con una barra negra al lado (object-fit:contain).
   Aquí se separa: el baúl se recorta como sello y el nombre se compone
   en texto, que además escala nítido en cualquier pantalla.
   --------------------------------------------------------------- */
.brand,
.catalog-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.brand__mark {
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius:var(--r-md);
    background: var(--c-tinta);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-salvia) 38%, transparent), 0 8px 22px color-mix(in srgb, var(--c-tinta) 45%, transparent);
}

/* El centro del baúl dentro del PNG está en (50.1%, 35.9%). Al anclar la
   imagen en el centro de la caja y desplazarla justo ese tanto, el sello
   queda encuadrado sin depender de recortes a ojo. */
.brand__mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 242%;
    max-width: none;
    height: auto;
    transform: translate(-50.1%, -35.9%);
}

.brand__word {
    display: grid;
    gap: 4px;
    line-height:var(--i-apretado);
}

/* El logotipo iba pintado con un degradado recortado al texto. Era un degradado
   de un solo color, así que no aportaba nada y sí escondía el color real de una
   comprobación de contraste: el valor de `color` era un descarte y lo que se veía
   salía de `background`. Ahora es color plano y tinta, no salvia: el verde de
   este sistema significa «estás a salvo» y no puede ser también la marca. */
.brand__word strong {
    font: var(--p-display-fuerte) var(--f-lg)/1 var(--f-display);
    letter-spacing: var(--tr-titular);
    color: var(--c-tinta);
}

.brand__word small {
    color: var(--c-granada);
    font-size:var(--f-xs);
    font-weight:var(--p-fuerte);
    letter-spacing: .26em;
    text-transform: uppercase;
}

.brand:hover .brand__mark,
.catalog-brand:hover .brand__mark {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-salvia) 75%, transparent), 0 10px 26px color-mix(in srgb, var(--c-tinta) 50%, transparent);
}

/* El pie y la puerta de edad sí usan el logo entero: ahí la caja es
   cuadrada y no hay nada que recortar. */
.brand__logo,
.age-gate__logo,
.catalog-footer img,
.catalog-assistance > img {
    object-fit: contain !important;
    object-position: center !important;
    background: var(--c-tinta);
}

/* ---------------------------------------------------------------
   2. Dock de contacto
   Antes había DOS burbujas flotantes compitiendo: una pastilla propia
   abajo a la izquierda y el globo de Chatwoot abajo a la derecha, sin
   relación visual entre ellas y sin ningún acceso directo a WhatsApp,
   que es el canal por el que de verdad se vende.
   Ahora es un solo punto de entrada que abre los dos canales.
   --------------------------------------------------------------- */
.dock {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: var(--z-flotante);
    display: grid;
    justify-items: end;
    gap: 12px;
}

.dock__panel {
    display: grid;
    gap: 9px;
    transform-origin: bottom right;
    animation: dock-in var(--m-medio) cubic-bezier(.2, .9, .3, 1.2);
}

.dock__panel[hidden] { display: none; }

@keyframes dock-in {
    from { opacity: 0; transform: translateY(10px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

.dock__option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 258px;
    padding: 11px 15px;
    color: var(--c-papel);
    text-align: left;
    background: color-mix(in srgb, var(--c-tinta) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-salvia) 34%, transparent);
    border-radius:var(--r-md);
    box-shadow: 0 18px 46px color-mix(in srgb, var(--c-tinta) 55%, transparent);
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition: transform var(--m-rapido) ease, border-color var(--m-rapido) ease;
}

.dock__option:hover {
    transform: translateX(-3px);
    border-color: color-mix(in srgb, var(--c-salvia) 80%, transparent);
}

.dock__option > i {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius:var(--r-md);
    font-size:var(--f-lg);
}

.dock__option--wa > i { color: var(--c-salvia-alt); background: linear-gradient(145deg, var(--c-salvia), var(--c-salvia-alt)); }
.dock__option--ia > i { color: var(--c-tinta); background: linear-gradient(145deg, var(--c-salvia), var(--c-salvia-alt)); }

.dock__option span { display: grid; gap: 3px; }
.dock__option strong { font-size:var(--f-sm); font-weight:var(--p-fuerte); }
.dock__option small { color: var(--c-granada); font-size:var(--f-xs); line-height:var(--i-medio); }

.dock__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 22px 0 18px;
    color: var(--c-tinta);
    background: linear-gradient(135deg, var(--c-salvia), var(--c-salvia-alt) 58%, var(--c-salvia-alt));
    border: 1px solid color-mix(in srgb, var(--c-salvia-piel) 90%, transparent);
    border-radius:var(--r-redondo);
    box-shadow: 0 16px 44px color-mix(in srgb, var(--c-tinta) 55%, transparent), 0 0 30px color-mix(in srgb, var(--c-salvia-alt) 30%, transparent);
    font-size:var(--f-sm);
    font-weight:var(--p-fuerte);
    cursor: pointer;
    transition: transform var(--m-rapido) ease, box-shadow var(--m-rapido) ease;
}

.dock__trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 54px color-mix(in srgb, var(--c-tinta) 60%, transparent), 0 0 38px color-mix(in srgb, var(--c-salvia) 38%, transparent);
}

.dock__trigger > i { font-size:var(--f-lg); }

/* El icono cambia a una equis cuando el panel está abierto. */
.dock__trigger[aria-expanded="true"] .dock__icon-open { display: none; }
.dock__trigger:not([aria-expanded="true"]) .dock__icon-close { display: none; }

/* La burbuja de Chatwoot sobra: al chat se entra por el dock. Se esconde aquí
   y NO con hideMessageBubble, porque esa opción deja el SDK a medio arrancar y
   la ventana del chat se queda en 0x0.
   Se usa visibility/opacity en vez de display:none para no alterar el cálculo
   de posiciones que hace el propio SDK, y pointer-events:none para que la
   burbuja invisible no robe los clics del dock, que vive en la misma esquina. */
.woot-widget-bubble,
.woot--bubble-holder {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* La ventana del chat sí se deja visible, solo se ordena por debajo del
   dock para que el botón siga siendo alcanzable. */
.woot-widget-holder { z-index: var(--z-flotante) !important; }

@media (max-width: 640px) {
    /* El tamaño móvil del lockup vive aquí y no en luxury.css: brand.css se
       carga después, así que allí quedaba pisado y no se aplicaba nunca. */
    .brand__mark { width: 40px; height: 40px; border-radius:var(--r-md); }
    .brand__word strong { font-size:var(--f-md); }
    .brand__word small { font-size:var(--f-xs); letter-spacing: .2em; }

    .dock { right: 14px; bottom: 14px; gap: 10px; }
    .dock__option { width: min(272px, calc(100vw - 40px)); }
    .dock__label { display: none; }
    .dock__trigger {
        width: 52px;
        min-height: 52px;
        padding: 0;
        justify-content: center;
    }
}