/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1784014844
Updated: 2026-07-14 07:40:44

*/

/* Sistema tipográfico global: estas son las únicas familias del sitio. */
@font-face {
    font-family: "FuturaHandwritten";
    src: url("../../uploads/2026/05/FuturaHandwritten.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body,
button,
input,
select,
textarea {
    font-family: "Montserrat", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
label,
table,
blockquote {
    font-family: "Montserrat", sans-serif;
}

.Montserrat,
.Montserrat * {
    font-family: "Montserrat", sans-serif !important;
}

.Cormorant,
.Cormorant * {
    font-family: "Cormorant", serif !important;
}

.futurahand,
.futurahand * {
    font-family: "FuturaHandwritten", sans-serif !important;
}

/*
 * Paleta global Pipp & Co.
 * Mantener todos los colores de interfaz dentro de estos siete valores.
 */
:root {
    --pipp-rose: #D0B3A8;
    --pipp-white: #FFFFFF;
    --pipp-sage: #B8C1B0;
    --pipp-cream: #F4F1EA;
    --pipp-stone: #CBC5BC;
    --pipp-text: #7E7E7E;
    --pipp-soft-white: #F5F5F5;
    --pipp-transparent: transparent;

    /* Tokens semánticos: los componentes deben consumir estos nombres. */
    --pipp-color-page: var(--pipp-cream);
    --pipp-color-surface: var(--pipp-white);
    --pipp-color-surface-soft: var(--pipp-soft-white);
    --pipp-color-copy: var(--pipp-text);
    --pipp-color-border: var(--pipp-stone);
    --pipp-color-primary: var(--pipp-rose);
    --pipp-color-secondary: var(--pipp-sage);
    --pipp-color-on-primary: var(--pipp-white);
    --pipp-font-body: "Montserrat", sans-serif;
    --pipp-font-display: "Cormorant", serif;
    --pipp-font-handwritten: "FuturaHandwritten", sans-serif;
    --pipp-radius-control: 0;
    --pipp-control-height: 48px;
    --pipp-transition: .2s ease;
    --pipp-shadow-color: rgb(126 126 126 / 18%);
    --pipp-overlay-color: rgb(126 126 126 / 25%);

    /* Sustituye también los colores globales generados por Elementor. */
    --e-global-color-primary: #D0B3A8;
    --e-global-color-secondary: #B8C1B0;
    --e-global-color-text: #7E7E7E;
    --e-global-color-accent: #D0B3A8;
}

.pipp-whatsapp-float {
    position: fixed;
    z-index: 9999;
    right: 28px;
    bottom: 28px;
    display: block;
    width: clamp(64px, 5.75vw, 110px);
    height: clamp(64px, 5.75vw, 110px);
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
    line-height: 0;
    transition: transform 180ms ease, filter 180ms ease;
    filter: drop-shadow(0 5px 10px rgb(0 0 0 / 22%));
}

.pipp-whatsapp-float:hover,
.pipp-whatsapp-float:focus-visible {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 7px 14px rgb(0 0 0 / 28%));
}

.pipp-whatsapp-float:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

.pipp-whatsapp-float img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 600px) {
    .pipp-whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 54px;
        height: 54px;
    }
}

html,
body {
    background-color: var(--pipp-color-page);
    color: var(--pipp-color-copy);
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

body,
body p,
body li,
body label,
body input,
body select,
body textarea,
body table,
body td,
body th {
    color: var(--pipp-color-copy);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a {
    color: var(--pipp-color-copy);
}

/* Evita que WooCommerce, Elementor o el tema padre reintroduzcan negro. */
body strong,
body b,
body .amount,
body .price,
body .woocommerce-Price-amount,
body .woocommerce-Price-currencySymbol,
body .woocommerce-order-overview strong,
body .cart_totals strong,
body .order-total,
body .order-total th,
body .order-total td,
body .product_meta,
body .woocommerce-breadcrumb,
body .woocommerce-result-count {
    color: var(--pipp-color-copy);
}

body .pipp-home-page svg,
body .pipp-product-page svg,
body .pipp-letter-builder-page svg {
    color: inherit;
}

body a:hover,
body a:focus,
body a:active {
    color: var(--pipp-color-primary);
}

body ::selection {
    background-color: var(--pipp-color-primary);
    color: var(--pipp-color-on-primary);
}

/*
 * Botones/enlaces globales.
 * Un CTA de navegación siempre debe ser <a>; los <button> quedan reservados
 * para acciones reales (menú, acordeón, cantidad, carrito, galería).
 */
.pipp-button,
.pipp-solid-button,
.pipp-light-button,
.pipp-playmat-details {
    min-height: var(--pipp-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 1px solid var(--pipp-color-primary);
    border-radius: var(--pipp-radius-control);
    background: var(--pipp-color-primary);
    color: var(--pipp-color-on-primary) !important;
    font-family: var(--pipp-font-display) !important;
    font-size: 15px;
    font-style: italic;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition: background-color var(--pipp-transition), border-color var(--pipp-transition), color var(--pipp-transition);
}

.pipp-button:hover,
.pipp-button:focus-visible,
.pipp-solid-button:hover,
.pipp-solid-button:focus-visible,
.pipp-light-button:hover,
.pipp-light-button:focus-visible,
.pipp-playmat-details:hover,
.pipp-playmat-details:focus-visible {
    border-color: var(--pipp-color-primary);
    background: var(--pipp-color-surface);
    color: var(--pipp-color-primary) !important;
}

.pipp-button--outline,
.pipp-outline-button {
    border-color: var(--pipp-color-on-primary);
    background: var(--pipp-transparent);
    color: var(--pipp-color-on-primary) !important;
}

.pipp-button--outline:hover,
.pipp-button--outline:focus-visible,
.pipp-outline-button:hover,
.pipp-outline-button:focus-visible {
    border-color: var(--pipp-color-on-primary);
    background: var(--pipp-color-on-primary);
    color: var(--pipp-color-copy) !important;
}

body button,
body input[type="button"],
body input[type="reset"],
body input[type="submit"],
body .button,
body .elementor-button,
body .wp-element-button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button {
    border-color: #D0B3A8 !important;
    background-color: #D0B3A8 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

body button:hover,
body button:focus,
body input[type="button"]:hover,
body input[type="button"]:focus,
body input[type="reset"]:hover,
body input[type="reset"]:focus,
body input[type="submit"]:hover,
body input[type="submit"]:focus,
body .button:hover,
body .button:focus,
body .elementor-button:hover,
body .elementor-button:focus,
body .wp-element-button:hover,
body .wp-element-button:focus,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover {
    border-color: #D0B3A8 !important;
    background-color: #FFFFFF !important;
    color: #D0B3A8 !important;
}

body input:not([type="button"]):not([type="reset"]):not([type="submit"]),
body select,
body textarea {
    border-color: #CBC5BC !important;
    background-color: #FFFFFF !important;
    color: #7E7E7E !important;
    box-shadow: none !important;
}

body input:focus,
body select:focus,
body textarea:focus {
    border-color: #D0B3A8 !important;
    outline-color: #D0B3A8 !important;
}

body hr,
body table,
body td,
body th,
body fieldset,
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
    border-color: #CBC5BC !important;
}

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .site-header,
body .site-footer,
body .elementor-widget-container,
body .elementor-menu-cart__main,
body .dialog-widget-content {
    color: #7E7E7E;
}

body .woocommerce span.onsale,
body .elementor-menu-cart__toggle .elementor-button-icon-qty {
    background-color: #D0B3A8 !important;
    color: #FFFFFF !important;
}

body .woocommerce-pagination .page-numbers.current,
body .woocommerce-pagination a.page-numbers:hover {
    background-color: #B8C1B0 !important;
    color: #FFFFFF !important;
}

body svg:not([fill="none"]),
body svg:not([fill="none"]) path {
    fill: currentColor;
}

body svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}