/* ========================================================================== Pifarré 2026 — sistema de diseño ========================================================================== */ @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --pf-cream: #fbf6ee; --pf-paper: #ffffff; --pf-sand: #f2e9da; --pf-ink: #1d2f4a; --pf-ink-soft: #52627a; --pf-brand: #5a82b0; --pf-brand-deep: #3f6593; --pf-pink: #f0607f; --pf-pink-soft: #fde4ea; --pf-yellow: #f6c445; --pf-line: #e8dfcf; /* Paleta de la marca (Canva): rosa, lila, azul claro, confeti */ --pf-lilac: #9976b3; --pf-rose: #f3b7d3; --pf-sky: #c5e5ec; --pf-sprinkle: #e9b949; --pf-serif: "Fraunces", Georgia, "Times New Roman", serif; --pf-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pf-radius: 20px; --pf-radius-sm: 12px; --pf-shadow: 0 1px 2px rgba(29, 47, 74, .06), 0 12px 32px -12px rgba(29, 47, 74, .18); --pf-gutter: 16px; --pf-max: 1240px; } @media (min-width: 850px) { :root { --pf-gutter: 32px; } } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } html body { background: var(--pf-cream); color: var(--pf-ink); font-family: var(--pf-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } html body h1, html body h2, html body h3, html body h4, html body .pf-serif { font-family: var(--pf-serif); font-weight: 600; color: var(--pf-ink); letter-spacing: -.01em; text-transform: none; } a { color: var(--pf-brand-deep); } a:hover { color: var(--pf-pink); } ::selection { background: var(--pf-yellow); color: var(--pf-ink); } :focus-visible { outline: 3px solid var(--pf-brand); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Utilidades ---------- */ .pf-wrap { width: 100%; max-width: var(--pf-max); margin: 0 auto; padding-left: var(--pf-gutter); padding-right: var(--pf-gutter); } .pf-icon { width: 1.25em; height: 1.25em; flex: none; } .pf-eyebrow { font: 600 .78rem/1 var(--pf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pf-brand-deep); margin: 0 0 1rem; } .pf-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--pf-ink-soft); max-width: 34em; margin: 0 0 2rem; } .pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 1.6em; min-height: 48px; border-radius: 999px; font: 600 .95rem/1 var(--pf-sans); letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .pf-btn:hover { transform: translateY(-2px); } .pf-btn--primary { background: var(--pf-ink); color: #fff; } .pf-btn--primary:hover { background: var(--pf-pink); color: #fff; } .pf-btn--ghost { background: transparent; color: var(--pf-ink); border-color: var(--pf-ink); } .pf-btn--ghost:hover { background: var(--pf-ink); color: #fff; } .pf-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; text-decoration: none; color: var(--pf-ink); border-bottom: 2px solid var(--pf-yellow); padding-bottom: 2px; } .pf-link:hover { color: var(--pf-pink); border-color: var(--pf-pink); } .pf-section { padding: clamp(44px, 6vw, 84px) 0; } .pf-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 44px); } .pf-head h2, .pf-story h2, .pf-newsletter h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; margin: 0; } .pf-head h2 { max-width: 14em; } /* ========================================================================== Cabecera y barra superior (Flatsome) ========================================================================== */ #header .header-top, .header-top { background: var(--pf-ink); color: #fff; min-height: 0; } #header .header-top a, #header .header-top .nav > li > a, .header-top .html_topbar_left, .header-top .html_topbar_right { color: rgba(255,255,255,.86); font-size: .78rem; letter-spacing: .04em; text-transform: none; } #header .header-top .nav > li > a:hover { color: var(--pf-yellow); } #masthead, .header-main, .header-bg-color, .header-wrapper:not(.stuck) .header-main { background: rgba(251, 246, 238, .94); } .header-wrapper.stuck .header-main, .stuck .header-main { background: rgba(251, 246, 238, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--pf-line); } .header-main { border-bottom: 1px solid var(--pf-line); } #header .nav > li > a, .header-main .nav > li > a, .nav-dark .nav > li > a { font: 600 .82rem/1 var(--pf-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink); } #header .nav > li > a:hover, .nav > li.active > a, .nav > li.current-menu-item > a { color: var(--pf-pink); } .header-main .cart-item .header-cart-title, .header-main .account-item a { color: var(--pf-ink); font-weight: 600; } .header-main .cart-icon strong { border-color: var(--pf-ink); color: var(--pf-ink); border-radius: 8px; } .header-main .cart-icon strong:after { border-color: var(--pf-ink); } .header-main .nav > li > a i { color: var(--pf-ink); } .nav-dropdown { border-radius: var(--pf-radius-sm); border: 1px solid var(--pf-line); box-shadow: var(--pf-shadow); padding: 10px 0; overflow: hidden; background: var(--pf-paper); } .nav-dropdown > li > a { font-family: var(--pf-sans); text-transform: none; font-size: .92rem; letter-spacing: 0; color: var(--pf-ink); } .nav-dropdown > li > a:hover { color: var(--pf-pink); background: var(--pf-cream); } /* ========================================================================== Portada ========================================================================== */ .pf-home { background: var(--pf-cream); overflow-x: clip; } /* Hero */ .pf-hero { position: relative; padding: clamp(28px, 5vw, 72px) 0 0; isolation: isolate; } /* Manchas orgánicas y confeti, como en las piezas de redes */ .pf-hero::before, .pf-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .pf-hero::before { width: min(70vw, 620px); aspect-ratio: 1; right: -18%; top: -14%; background: var(--pf-rose); opacity: .55; border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%; } .pf-hero::after { width: min(48vw, 420px); aspect-ratio: 1; left: -16%; bottom: 8%; background: var(--pf-sky); border-radius: 45% 55% 38% 62% / 55% 42% 58% 45%; } .pf-hero__media::before { content: ""; position: absolute; z-index: -1; right: -22px; top: -26px; width: 120px; height: 120px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23e9b949' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M12 30l6 14M40 12l6 14M70 26l6 14M98 10l6 14M26 66l6 14M56 56l6 14M86 70l6 14M16 102l6 14M48 96l6 14M100 104l6 14'/%3E%3C/svg%3E") center / contain no-repeat; } .pf-hero__grid { display: grid; gap: 2.2rem; align-items: center; } .pf-home .pf-hero__title { font-size: clamp(2.5rem, 7.2vw, 5rem); line-height: 1.02; margin: 0 0 1.4rem; font-weight: 500; } .pf-hero__title em, .pf-story h2 em { font-style: italic; color: var(--pf-brand-deep); font-weight: 500; } .pf-actions { display: flex; flex-wrap: wrap; gap: .8rem; } .pf-hero__media { position: relative; } .pf-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 160px 160px var(--pf-radius) var(--pf-radius); box-shadow: var(--pf-shadow); } .pf-seal { position: absolute; left: -6px; bottom: -22px; width: 108px; height: 108px; border-radius: 50%; background: var(--pf-rose); color: var(--pf-ink); display: grid; place-content: center; text-align: center; transform: rotate(-9deg); box-shadow: 0 8px 20px -8px rgba(29,47,74,.35); } .pf-seal span { font: 600 .66rem/1 var(--pf-sans); letter-spacing: .18em; text-transform: uppercase; } .pf-seal strong { font: 600 1.9rem/1.05 var(--pf-serif); } .pf-trust { list-style: none; display: grid; gap: .9rem; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: 1.4rem; padding-bottom: 1.4rem; border-top: 1px solid var(--pf-line); } .pf-trust li { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: .92rem; color: var(--pf-ink-soft); } .pf-trust strong { color: var(--pf-ink); font-weight: 600; } .pf-trust .pf-icon { color: var(--pf-brand-deep); width: 28px; height: 28px; } @media (min-width: 850px) { .pf-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; } .pf-trust { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .pf-seal { left: -28px; width: 128px; height: 128px; } .pf-seal strong { font-size: 2.3rem; } } /* Categorías (bento) */ .pf-bento { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } .pf-tile { position: relative; display: block; border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-sand); aspect-ratio: 1 / 1.1; isolation: isolate; text-decoration: none; } .pf-tile--caramelos { grid-column: span 2; aspect-ratio: 2 / 1.05; } .pf-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); z-index: -1; } .pf-tile:hover img { transform: scale(1.06); } .pf-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(29,47,74,.78), rgba(29,47,74,0) 62%); z-index: -1; } .pf-tile__label { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; display: flex; flex-direction: column; gap: 2px; } .pf-tile__label strong { font: 600 clamp(1.05rem, 2.4vw, 1.5rem)/1.15 var(--pf-serif); } .pf-tile__label small { font-size: .78rem; opacity: .85; } .pf-tile--turron img { object-fit: contain; padding: 8% 8% 26%; background: var(--pf-sand); } .pf-tile--turron::after { display: none; } .pf-tile--turron .pf-tile__label { color: var(--pf-ink); } @media (min-width: 850px) { .pf-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 16px; } .pf-tile { aspect-ratio: auto; } .pf-tile--caramelos { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .pf-tile--caramelos .pf-tile__label strong { font-size: 2.2rem; } .pf-tile__label { left: 22px; bottom: 20px; } } /* Productos (carril) */ .pf-products { background: var(--pf-paper); } .pf-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; margin-right: calc(var(--pf-gutter) * -1); padding-right: var(--pf-gutter); scrollbar-width: thin; } .pf-rail > * { scroll-snap-align: start; } @media (min-width: 600px) { .pf-rail { grid-auto-columns: 38%; } } @media (min-width: 850px) { .pf-rail { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; gap: 28px 20px; overflow: visible; margin-right: 0; padding-right: 0; } } .pf-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--pf-ink); } .pf-card__img { position: relative; display: block; aspect-ratio: 1 / 1.1; border-radius: var(--pf-radius); background: var(--pf-cream); overflow: hidden; margin-bottom: 10px; } .pf-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .pf-card:hover .pf-card__img img { transform: scale(1.06); } .pf-card__cat { font: 600 .68rem/1.2 var(--pf-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-brand-deep); } .pf-card__title { font: 600 1.02rem/1.3 var(--pf-serif); } .pf-card:hover .pf-card__title { color: var(--pf-pink); } .pf-card__price { font-weight: 600; font-size: .95rem; color: var(--pf-ink-soft); } .pf-card__price del { opacity: .55; margin-right: .4em; } .pf-card__price ins { text-decoration: none; color: var(--pf-pink); } .pf-badge { position: absolute; top: 12px; left: 12px; background: var(--pf-pink); color: #fff; font: 700 .7rem/1 var(--pf-sans); letter-spacing: .08em; text-transform: uppercase; padding: .5em .8em; border-radius: 999px; } /* Historia */ .pf-story .pf-wrap { display: grid; gap: 2.4rem; } .pf-story__intro p:not(.pf-eyebrow) { color: var(--pf-ink-soft); max-width: 34em; margin: 1.2rem 0 1.6rem; } .pf-story__cards { display: grid; gap: 12px; } .pf-pillar { position: relative; margin: 0; border-radius: var(--pf-radius); overflow: hidden; aspect-ratio: 16 / 10; isolation: isolate; } .pf-pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .pf-pillar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(29,47,74,.7), rgba(29,47,74,0) 60%); z-index: -1; } .pf-pillar figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; display: flex; flex-direction: column; } .pf-pillar strong { font: 600 1.4rem/1.1 var(--pf-serif); } .pf-pillar span { font-size: .85rem; opacity: .9; } @media (min-width: 850px) { .pf-story .pf-wrap { grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items: center; } .pf-story__cards { grid-template-columns: repeat(3, 1fr); gap: 14px; } .pf-pillar { aspect-ratio: 3 / 4.4; } .pf-pillar:nth-child(2) { transform: translateY(28px); } } /* Newsletter */ .pf-newsletter { position: relative; overflow: hidden; background: var(--pf-rose); padding: clamp(44px, 7vw, 88px) 0; } .pf-newsletter::before { content: ""; position: absolute; right: -8%; bottom: -40%; width: min(60vw, 520px); aspect-ratio: 1; background: var(--pf-lilac); opacity: .9; border-radius: 55% 45% 40% 60% / 50% 55% 45% 50%; pointer-events: none; } .pf-newsletter .pf-wrap { position: relative; } .pf-newsletter__mascot { display: none; } .pf-newsletter h2 { color: var(--pf-ink); } .pf-newsletter p { color: var(--pf-ink); } .pf-newsletter__grid { display: grid; gap: 1.6rem; align-items: center; } .pf-newsletter p { margin: .8rem 0 0; } .pf-newsletter form, .pf-newsletter__form .sib_signup_form form { display: flex; flex-direction: column; gap: .7rem; margin: 0; } .pf-newsletter input[type="email"], .pf-newsletter input[type="text"] { height: 52px; margin: 0; border-radius: 999px; border: 2px solid var(--pf-ink); background: #fff; padding: 0 1.4em; font: 500 1rem var(--pf-sans); box-shadow: none; } .pf-newsletter input[type="submit"], .pf-newsletter button[type="submit"] { height: 52px; border-radius: 999px; margin: 0; background: var(--pf-ink); color: #fff; border: 2px solid var(--pf-ink); font: 600 .95rem var(--pf-sans); text-transform: none; letter-spacing: 0; padding: 0 1.8em; } .pf-newsletter input[type="submit"]:hover, .pf-newsletter button[type="submit"]:hover { background: var(--pf-pink); border-color: var(--pf-pink); } @media (min-width: 850px) { .pf-newsletter__grid { grid-template-columns: 170px 1fr 1fr; gap: 3rem; } .pf-newsletter__mascot { display: block; width: 170px; position: relative; } .pf-newsletter__mascot::before { content: ""; position: absolute; inset: 14% -14% -2% -14%; z-index: 0; background: var(--pf-sky); border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%; } .pf-newsletter__mascot img { position: relative; z-index: 1; display: block; width: 100%; height: auto; } .pf-newsletter form { flex-direction: row; } .pf-newsletter form input[type="email"] { flex: 1; } } /* ========================================================================== Tienda y producto (WooCommerce / Flatsome) ========================================================================== */ .page-title-inner, .shop-page-title { background: transparent; } .woocommerce-breadcrumb, .breadcrumbs { font-size: .8rem; color: var(--pf-ink-soft); text-transform: none; letter-spacing: 0; } .shop-page-title .page-title-inner { padding-top: 12px; padding-bottom: 12px; } .category-page-title .page-title-inner h1, .woocommerce-products-header h1, .page-title h1 { font-family: var(--pf-serif); } .product-small .col-inner { padding: 0; } .product-small .box { background: transparent; } .product-small .box-image { border-radius: var(--pf-radius); background: var(--pf-paper); overflow: hidden; } .product-small .box-image img { mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .product-small:hover .box-image img { transform: scale(1.05); } .product-small .box-text { padding: 12px 4px 4px; } .product-small .category.uppercase, .product-small .box-text .category { font: 600 .66rem/1.2 var(--pf-sans); letter-spacing: .12em; color: var(--pf-brand-deep); opacity: 1; } .product-small .name.product-title, .product-small .name.product-title a { font: 600 1.02rem/1.3 var(--pf-serif); color: var(--pf-ink); text-transform: none; } .product-small .name.product-title a:hover { color: var(--pf-pink); } .price, .woocommerce-Price-amount { font-family: var(--pf-sans); font-weight: 600; color: var(--pf-ink); } .price del { opacity: .5; } .price ins { text-decoration: none; color: var(--pf-pink); } .badge-container .badge-inner { background: var(--pf-pink); border-radius: 999px; padding: 0 .9em; font: 700 .7rem/1 var(--pf-sans); letter-spacing: .08em; text-transform: uppercase; } .badge-container .badge-inner.out-of-stock-label, .out-of-stock-label { background: var(--pf-ink); color: #fff; border: 0; border-radius: 999px; font: 600 .72rem var(--pf-sans); } /* Botones globales de Flatsome */ .button, button, input[type="submit"], .added_to_cart, .checkout-button { font-family: var(--pf-sans); font-weight: 600; text-transform: none; letter-spacing: .01em; border-radius: 999px; box-shadow: none; transition: transform .2s ease, background-color .2s ease; } .button.primary, .button.alt, .single_add_to_cart_button, .checkout-button, #place_order { background: var(--pf-ink); color: #fff; border: 0; } .button.primary:hover, .button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover { background: var(--pf-pink); color: #fff; box-shadow: none; transform: translateY(-1px); } .button.is-outline { border-width: 2px; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea { border-radius: var(--pf-radius-sm); border-color: var(--pf-line); background: #fff; box-shadow: none; font-family: var(--pf-sans); } input:focus, select:focus, textarea:focus { border-color: var(--pf-brand); box-shadow: 0 0 0 3px rgba(90,130,176,.2); } /* Ficha de producto */ .product-main { padding-top: 24px; } .product-info h1.product-title { font: 500 clamp(1.8rem, 4vw, 2.7rem)/1.1 var(--pf-serif); text-transform: none; } .product-info .price-wrapper .price { font-size: 1.5rem; } .product-gallery .woocommerce-product-gallery__image img, .product-images img { border-radius: var(--pf-radius); } .product-gallery .flickity-slider, .product-images .flickity-viewport { border-radius: var(--pf-radius); background: var(--pf-paper); } .product-thumbnails img { border-radius: var(--pf-radius-sm); } .product-footer .woocommerce-tabs ul.tabs > li > a { font: 600 .82rem var(--pf-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pf-ink-soft); } .product-footer .woocommerce-tabs ul.tabs > li.active > a { color: var(--pf-ink); border-color: var(--pf-pink); } .quantity .minus, .quantity .plus, .quantity input.qty { border-radius: 999px; } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--pf-radius-sm); background: var(--pf-paper); border-color: var(--pf-line); } /* Carrito y checkout */ .cart-container, .woocommerce-checkout .large-7, .woocommerce-checkout .large-5 { font-family: var(--pf-sans); } .cart_totals, .checkout-sidebar .is-well, .woocommerce-checkout-review-order { background: var(--pf-paper); border-radius: var(--pf-radius); border: 1px solid var(--pf-line); } table.shop_table, table.cart { border-radius: var(--pf-radius-sm); overflow: hidden; } .shop_table th { font: 600 .75rem var(--pf-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink-soft); } /* ========================================================================== Páginas interiores (0.4.0) ========================================================================== */ #main, #content, .page-wrapper, .shop-container { background: var(--pf-cream); } .page-title, .page-title-bg { background: var(--pf-cream); } .page-title { border-bottom: 1px solid var(--pf-line); } .page-title .page-title-inner { padding-top: 30px; padding-bottom: 26px; } .page-title h1, .page-title .title-wrapper h1 { font: 500 clamp(1.9rem, 4.4vw, 3rem)/1.1 var(--pf-serif); text-transform: none; letter-spacing: -.01em; } .page-title .breadcrumbs, .checkout-breadcrumbs { font: 600 .78rem var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; } .page-title-inner .is-divider, .page-title .is-divider { display: none; } .page-wrapper { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 80px); } .page-wrapper .entry-content p, .page-wrapper .entry-content li { max-width: 46em; } /* Categorías en la tienda: foto limpia y nombre debajo, sin velo */ .product-category .box-image { border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-sand); } .product-category .box-image img { mix-blend-mode: normal; } .product-category .box-text { position: static; background: none; padding: 12px 4px 4px; } .product-category .box-text-inner h5 { font: 600 1.15rem/1.2 var(--pf-serif); letter-spacing: 0; text-transform: none; color: var(--pf-ink); margin: 0; } .product-category .box-text-inner .count { font: 600 .68rem/1.2 var(--pf-sans); letter-spacing: .12em; color: var(--pf-brand-deep); opacity: 1; margin: 4px 0 0; } .product-category:hover .box-text-inner h5 { color: var(--pf-pink); } .shop-container .widget-title, .widget .widget-title { font: 600 .78rem/1 var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-ink); } .widget_product_categories a { color: var(--pf-ink); } .widget_product_categories a:hover, .widget_product_categories .current-cat > a { color: var(--pf-pink); } .woocommerce-result-count, .woocommerce-ordering select { font: 500 .88rem var(--pf-sans); color: var(--pf-ink-soft); } .woocommerce-pagination .page-number, .page-numbers li .page-number { border-radius: 50%; border-color: var(--pf-ink); color: var(--pf-ink); } .page-numbers li .page-number.current { background: var(--pf-ink); border-color: var(--pf-ink); color: #fff; } /* Mi cuenta, acceso y formularios en tarjeta */ .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-EditAccountForm, .wpcf7 { background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: clamp(20px, 3vw, 36px); box-shadow: var(--pf-shadow); } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .7em 1em; border-radius: var(--pf-radius-sm); font-weight: 600; color: var(--pf-ink); text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--pf-rose); color: var(--pf-ink); } .woocommerce-account h2, .woocommerce-checkout h3, .cart_totals h2, .cross-sells h2 { font: 500 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--pf-serif); text-transform: none; letter-spacing: -.01em; } label, .woocommerce form .form-row label { font: 600 .86rem var(--pf-sans); color: var(--pf-ink); text-transform: none; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea { min-height: 48px; } /* Carrito y checkout */ .cart-container .cart-wrapper, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields { background: transparent; } .cart_totals, .woocommerce-checkout-review-order, .checkout-sidebar .is-well { padding: clamp(18px, 2.4vw, 30px); box-shadow: var(--pf-shadow); } .woocommerce-cart-form .product-name a { font: 600 1rem var(--pf-serif); color: var(--pf-ink); text-decoration: none; } .woocommerce-cart-form .product-thumbnail img { border-radius: var(--pf-radius-sm); } .checkout-breadcrumbs a.current { color: var(--pf-ink); } .checkout-breadcrumbs a { color: var(--pf-ink-soft); } #payment { background: var(--pf-paper); border-radius: var(--pf-radius-sm); } #payment .payment_box { background: var(--pf-sand); border-radius: var(--pf-radius-sm); } .cart-empty, .woocommerce-info.cart-empty { font: 500 1.4rem var(--pf-serif); text-align: center; } .return-to-shop { text-align: center; } /* Avisos de WooCommerce: la banda exterior de Flatsome queda transparente y el aviso es una tarjeta contenida, sin barra de color */ .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: 0; margin: 0 0 14px; border: 0; background: none; color: var(--pf-ink); font-size: .94rem; line-height: 1.5; text-align: left; list-style: none; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } .woocommerce-message .message-container, .woocommerce-info .message-container, .woocommerce-error .message-container, .woocommerce-error > li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; box-sizing: border-box; width: calc(100% - 2 * var(--pf-gutter)); max-width: 1220px; margin: 14px auto 0; padding: 12px 16px; border: 0; border-radius: var(--pf-radius-sm); background: var(--pf-sand); text-align: left; } .woocommerce-message .message-container { background: rgba(197, 229, 236, .6); } .woocommerce-error .message-container, .woocommerce-error > li { background: var(--pf-pink-soft); } .woocommerce-message .message-container i { color: #2f7a4f; font-size: 1.1em; margin: 0; } .woocommerce-message .message-container .button, .woocommerce-message .message-container a.wc-forward { order: 2; margin: 0 0 0 auto; min-height: 36px; padding: 0 1.1rem; display: inline-flex; align-items: center; background: var(--pf-ink); color: #fff; border: 0; border-radius: 999px; font: 600 .82rem var(--pf-sans); } .woocommerce-message .message-container .button:hover { background: var(--pf-pink); } .woocommerce-info a, .woocommerce-message a:not(.button), .woocommerce-error a { color: var(--pf-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .woocommerce-info a:hover, .woocommerce-message a:not(.button):hover { color: var(--pf-pink); } .cart-container .woocommerce-message .message-container, .cart-container .woocommerce-info .message-container, .cart-container .woocommerce-error .message-container, .woocommerce-checkout .woocommerce-info .message-container, .woocommerce-account .message-container { width: auto; max-width: none; margin: 0; } form.checkout_coupon, .woocommerce-form-login { border-radius: var(--pf-radius); } .col-inner.has-border { border: 0; background: transparent; padding: 0; } .review-form-inner.has-border { border: 0; background: transparent; padding: 1rem 0 0; margin: 0; } @media (max-width: 849px) { .review-form-inner.has-border { padding: 1rem 15px 0; } } /* Checkout: un solo panel (sin marco azul doble) y etiquetas flotantes contenidas */ .checkout-sidebar.is-well, .is-well { background: transparent; border: 0; padding: 0; } .woocommerce-checkout-review-order { margin-top: 0; } #order_review_heading, .woocommerce-checkout #order_review_heading { margin-top: 0; } .form-row label.fl-label, label.fl-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .woocommerce-checkout .form-row { margin-bottom: 14px; } .woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--pf-line); } /* Carrito: cupón dentro de su propio bloque */ .cart-collaterals .cart_totals { margin-bottom: 20px; } .cart-sidebar .coupon-title, .cart-sidebar .widget-title { font: 600 .78rem var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; } .cart-sidebar .woocommerce-cart-form__coupon, .cart-sidebar form.checkout_coupon, .cart-sidebar .coupon { padding: 0; } .cart-sidebar .button, .cart-sidebar input[name="apply_coupon"] { width: 100%; } .woocommerce-cart-form .button[name="update_cart"] { background: var(--pf-sand); color: var(--pf-ink); border: 0; } .woocommerce-cart-form .button[name="update_cart"]:not([disabled]):hover { background: var(--pf-ink); color: #fff; } /* Páginas de contenido (UX Builder): banners sin hueco azul y texto legible */ .banner { background-color: var(--pf-sand); } .banner .banner-bg[data-parallax] { transform: none !important; top: 0 !important; height: 100% !important; } .banner .banner-bg img.bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transform: none !important; } body.page:not(.woocommerce-page) #content .col-inner p, body.page:not(.woocommerce-page) #content .col-inner li { font-size: 1.04rem; line-height: 1.75; color: var(--pf-ink); } body.page:not(.woocommerce-page) #content .col-inner p.is-small, body.page:not(.woocommerce-page) #content .col-inner .is-small { font-size: .95rem; } body.page:not(.woocommerce-page) #content .col-inner h2, body.page:not(.woocommerce-page) #content .col-inner h3 { font-family: var(--pf-serif); font-weight: 500; text-transform: none; letter-spacing: -.01em; } body.page:not(.woocommerce-page) #content .img-inner { border-radius: var(--pf-radius); } body.page:not(.woocommerce-page) #content .col-inner[style*="255,255,255"] { background-color: transparent !important; } body.page:not(.woocommerce-page) #content section.section { background-color: transparent !important; } /* Mapa de contacto: la dirección como tarjeta, a todo el ancho en móvil */ .google-map { border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-sky); margin-bottom: clamp(24px, 4vw, 48px); } .google-map .map-inner, #content .google-map .map-inner { background: var(--pf-paper) !important; border-radius: var(--pf-radius-sm); padding: 18px 22px; box-shadow: var(--pf-shadow); max-width: 340px !important; } .google-map .map-inner h3 { font: 600 1.15rem/1.25 var(--pf-serif); text-transform: none; margin: 0 0 .4rem; } .google-map .map-inner p { margin: 0; font-size: .95rem; line-height: 1.5; } @media (max-width: 549px) { .google-map .map-height { height: 260px !important; } .google-map .map-inner, #content .google-map .map-inner { left: 12px !important; right: 12px !important; bottom: 12px !important; top: auto !important; transform: none !important; max-width: none !important; } } /* ========================================================================== Carrito (0.5.0) ========================================================================== */ .woocommerce-cart .checkout-page-title { padding: 0; } .woocommerce-cart .checkout-page-title .page-title-inner { min-height: 0; padding-top: 26px; padding-bottom: 22px; } .woocommerce-cart .cart-container { padding-top: 28px; } /* Barra de envío gratis */ .pf-ship { margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm); } .pf-ship p { margin: 0 0 .65rem; font-size: .92rem; color: var(--pf-ink); } .pf-ship__bar { height: 8px; border-radius: 999px; background: var(--pf-sand); overflow: hidden; } .pf-ship__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pf-rose), var(--pf-lilac)); transition: width .4s ease; } .pf-ship.is-done .pf-ship__bar span { background: #3f9a6b; } .pf-ship.is-done p { color: #2f7a4f; } .widget_shopping_cart .pf-ship { margin: 0 0 .75rem; padding: .75rem 1rem; } .pf-cart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1.25rem; } .pf-cart-head p { margin: 0; color: var(--pf-ink-soft); font-size: .92rem; } .pf-cart-head a { font: 600 .78rem var(--pf-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink); text-decoration: none; border-bottom: 2px solid var(--pf-yellow); padding-bottom: 2px; } .pf-cart-head a:hover { color: var(--pf-pink); border-color: var(--pf-pink); } /* Líneas del carrito como tarjetas */ .woocommerce-cart .cart-wrapper { overflow: visible; } .woocommerce-cart table.cart { border: 0; background: none; border-radius: 0; overflow: visible; } .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody { display: block; } .woocommerce-cart table.cart tr.cart_item { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "img name sub" "img qty remove"; gap: .35rem 1.1rem; align-items: start; padding: 14px; margin: 0 0 14px; background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: 0 1px 2px rgba(29,47,74,.04); } .woocommerce-cart table.cart tr.cart_item td { display: block; padding: 0; border: 0; background: none; text-align: left; width: auto; } .woocommerce-cart table.cart tr.cart_item td::before { display: none !important; } .woocommerce-cart table.cart td.product-thumbnail { grid-area: img; width: 104px; } .woocommerce-cart table.cart td.product-thumbnail img { width: 104px; height: 124px; object-fit: cover; border-radius: var(--pf-radius-sm); background: var(--pf-sand); } .woocommerce-cart table.cart td.product-name { grid-area: name; align-self: start; } .woocommerce-cart table.cart td.product-name a { font: 600 1.08rem/1.3 var(--pf-serif); color: var(--pf-ink); text-decoration: none; } .woocommerce-cart table.cart td.product-name a:hover { color: var(--pf-pink); } .woocommerce-cart table.cart td.product-name .mobile-product-price { margin-top: .3rem; color: var(--pf-ink-soft); font-size: .88rem; } .woocommerce-cart table.cart td.product-price { display: none !important; } .woocommerce-cart table.cart td.product-subtotal { grid-area: sub; text-align: right; font: 600 1.08rem var(--pf-sans); color: var(--pf-ink); } .woocommerce-cart table.cart td.product-quantity { grid-area: qty; align-self: end; } .woocommerce-cart table.cart td.product-remove { grid-area: remove; align-self: end; justify-self: end; position: static !important; inset: auto !important; width: auto !important; } .woocommerce-cart table.cart td.product-remove a.remove { position: static !important; inset: auto !important; width: auto; height: auto; white-space: nowrap; line-height: 1.2; background: none; border: 0; border-bottom: 1px solid var(--pf-ink-soft); border-radius: 0; font-size: 0 !important; color: var(--pf-ink-soft) !important; padding: 0 0 1px; } .woocommerce-cart table.cart td.product-remove a.remove::after { content: "Eliminar"; font: 500 .82rem var(--pf-sans); } .woocommerce-cart table.cart td.product-remove a.remove:hover { color: var(--pf-pink) !important; border-color: var(--pf-pink); background: none; } .woocommerce-cart .ux-quantity { display: inline-flex; margin: 0; border: 1px solid var(--pf-line); border-radius: 999px; overflow: hidden; background: var(--pf-cream); } .woocommerce-cart .ux-quantity .ux-quantity__button { width: 40px; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--pf-ink); font-size: 1.1rem; box-shadow: none; } .woocommerce-cart .ux-quantity .ux-quantity__button:hover { background: var(--pf-rose); } .woocommerce-cart .ux-quantity input.qty { width: 44px; min-height: 40px; margin: 0; border: 0; background: transparent; text-align: center; font-weight: 600; box-shadow: none; } /* La fila de acciones queda para el JS (actualiza solo) */ .woocommerce-cart table.cart tr:not(.cart_item) { display: block; } .woocommerce-cart table.cart td.actions { display: block; padding: 0; border: 0; } .woocommerce-cart table.cart td.actions .continue-shopping, .woocommerce-cart table.cart td.actions [name="update_cart"] { display: none !important; } /* Resumen */ .woocommerce-cart .cart-collaterals .cart-sidebar { position: sticky; top: 110px; } .woocommerce-cart .cart_totals { padding: 1.6rem !important; } .woocommerce-cart .cart_totals > table:first-of-type { display: none; } .woocommerce-cart .cart_totals h2 { display: block; margin: 0 0 1rem; font: 500 1.5rem/1.15 var(--pf-serif); text-transform: none; } .woocommerce-cart .cart_totals th { font: 600 .74rem var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-soft); } .woocommerce-cart .cart_totals .order-total td > strong .amount { font: 600 1.45rem var(--pf-sans); } .woocommerce-cart .cart_totals .order-total small.includes_tax { display: block; margin-top: .15rem; font-size: .8rem; color: var(--pf-ink-soft); } .woocommerce-cart .cart_totals .order-total small.includes_tax .amount { font: 600 .8rem var(--pf-sans); } .woocommerce-cart .cart_totals .shipping-calculator-button { font-size: .82rem; } .woocommerce-cart .wc-proceed-to-checkout { padding: 1rem 0 0; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; margin: 0; min-height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .pf-cart-trust { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--pf-line); display: grid; gap: .5rem; font-size: .85rem; color: var(--pf-ink-soft); } .pf-cart-trust li { margin: 0; display: flex; gap: .55rem; align-items: baseline; } .pf-cart-trust li::before { content: "✓"; color: var(--pf-brand-deep); font-weight: 700; } /* Cupón en una fila */ .woocommerce-cart .ux-cart-coupon { margin-top: 16px; padding: 1.1rem 1.25rem; background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); } .woocommerce-cart .ux-cart-coupon .widget-title { grid-column: 1 / -1; display: block; width: auto; margin: 0 0 .1rem; border: 0; font: 600 .78rem var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; } .woocommerce-cart .ux-cart-coupon .widget-title i { margin-right: .4rem; } .woocommerce-cart .ux-cart-coupon .is-divider { display: none; } .woocommerce-cart .ux-cart-coupon .coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; } .woocommerce-cart .ux-cart-coupon .coupon input.input-text { margin: 0; min-height: 46px; width: 100%; } .woocommerce-cart .ux-cart-coupon .coupon .button { float: none; width: auto !important; min-width: max-content; margin: 0; min-height: 46px; padding: 0 1.3rem !important; font-size: .88rem; line-height: 1; letter-spacing: 0; background: var(--pf-ink); color: #fff; border: 0; white-space: nowrap; } .woocommerce-cart .ux-cart-coupon .coupon .button:hover { background: var(--pf-pink); } /* Sugerencias */ .pf-suggest { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--pf-line); } .pf-suggest h2 { font: 500 clamp(1.5rem, 3vw, 2rem)/1.15 var(--pf-serif); text-align: center; margin: 0 0 1.6rem; } .pf-suggest__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } @media (min-width: 850px) { .pf-suggest__grid { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; } } /* Carrito vacío */ .woocommerce-cart .cart-empty, .woocommerce-cart .wc-empty-cart-message .woocommerce-info { text-align: center; max-width: 560px; margin: 0 auto; padding: 1rem 0 .5rem; font: 500 1.5rem/1.2 var(--pf-serif); background: none; border: 0; box-shadow: none; } .woocommerce-cart .wc-empty-cart-message .message-container { padding: 0; text-align: center; } .woocommerce-cart .cart-empty::before, .woocommerce-cart .wc-empty-cart-message .woocommerce-info::before { content: ""; position: static; display: block; width: 76px; height: 76px; margin: 0 auto 1.1rem; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; font-size: 0; line-height: 0; } .woocommerce-cart .return-to-shop, .woocommerce-cart .wc-empty-cart-message + .return-to-shop { text-align: center; margin: 1rem 0 0; } .woocommerce-cart .return-to-shop .button { min-height: 52px; padding: 0 2rem; display: inline-flex; align-items: center; background: var(--pf-ink); color: #fff; border: 0; } .woocommerce-cart .return-to-shop .button:hover { background: var(--pf-pink); } /* Si el carrito se vacía sin recargar, solo un bloque de sugerencias */ .woocommerce-cart .cart-container:has(.pf-cart-empty__more) .pf-suggest:not(.pf-cart-empty__more .pf-suggest) { display: none; } /* Barra de pago fija en móvil */ .pf-cart-bar { display: none; } @media (max-width: 849px) { .pf-cart-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--pf-paper); border-top: 1px solid var(--pf-line); box-shadow: 0 -8px 24px rgba(29,47,74,.1); transition: transform .25s; } .pf-cart-bar.is-hidden { transform: translateY(110%); } .pf-cart-bar small { display: block; font: 600 .68rem var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-soft); } .pf-cart-bar strong { font: 600 1.2rem var(--pf-sans); } .pf-cart-bar .button { flex: 0 0 auto; min-height: 52px; margin: 0; padding: 0 1.8rem; display: inline-flex; align-items: center; background: var(--pf-ink); color: #fff !important; border: 0; } .woocommerce-cart .cart-container { padding-bottom: 5.5rem; } .woocommerce-cart .cart-collaterals .cart-sidebar { position: static; } .woocommerce-cart table.cart tr.cart_item { grid-template-columns: 82px minmax(0, 1fr) auto; gap: .3rem .85rem; padding: 12px; } .woocommerce-cart table.cart td.product-thumbnail, .woocommerce-cart table.cart td.product-thumbnail img { width: 82px; } .woocommerce-cart table.cart td.product-thumbnail img { height: 104px; } .woocommerce-cart table.cart td.product-name a { font-size: 1rem; } .woocommerce-cart .cart_totals { padding: 1.2rem !important; } } /* ========================================================================== Checkout (0.6.0) ========================================================================== */ /* Cabecera y pie mínimos: sin distracciones mientras se paga */ body.woocommerce-checkout:not(.woocommerce-order-received) .header-top, body.woocommerce-checkout:not(.woocommerce-order-received) #masthead .header-inner > .flex-col:not(.logo) { display: none !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #masthead .header-inner { justify-content: center; } body.woocommerce-checkout:not(.woocommerce-order-received) #masthead .logo { margin: 0 auto; } body.woocommerce-checkout:not(.woocommerce-order-received) .pf-footer__grid { display: none; } body.woocommerce-checkout:not(.woocommerce-order-received) .pf-footer__bar { border-top: 0; } /* Aviso de acceso: una línea, no una tarjeta */ .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { display: block; width: 100%; box-sizing: border-box; padding: 0; background: none; font-size: .92rem; color: var(--pf-ink-soft); text-align: center; } .woocommerce-form-login-toggle .woocommerce-info a { color: var(--pf-ink); } .woocommerce-form-login-toggle { margin: 0 0 6px; } .woocommerce-checkout .page-title + .page-wrapper, .woocommerce-checkout .cart-container { padding-top: 22px; } /* Datos: campos más compactos y redondeados a juego */ .woocommerce-checkout form.checkout h3 { font: 500 1.45rem/1.15 var(--pf-serif); text-transform: none; letter-spacing: -.01em; margin: 0 0 1rem; } .woocommerce-checkout .form-row { margin-bottom: 12px; } .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-checkout .select2-container--default .select2-selection--single { min-height: 52px; border-radius: var(--pf-radius-sm); border-color: var(--pf-line); } .woocommerce-checkout .woocommerce-additional-fields h3 { margin-top: 1.6rem; } /* Resumen: una sola tarjeta */ .woocommerce-checkout .checkout-sidebar { background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--pf-shadow); } .woocommerce-checkout .checkout-sidebar #order_review_heading { margin: 0 0 1rem; } .woocommerce-checkout .woocommerce-checkout-review-order { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table { margin: 0 0 1rem; border: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; } .woocommerce-checkout .woocommerce-checkout-review-order-table th, .woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: .7rem 0; border: 0; border-bottom: 1px solid var(--pf-line); background: none; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td { vertical-align: middle; padding: .9rem 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item .pf-rv { margin: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total { text-align: right; white-space: nowrap; font-weight: 600; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { font: 600 .74rem var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-soft); } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { border-bottom: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td > strong .amount { font: 600 1.45rem var(--pf-sans); } .woocommerce-checkout .woocommerce-checkout-review-order-table small.includes_tax { display: block; font-size: .8rem; color: var(--pf-ink-soft); } .pf-rv { display: flex; gap: .85rem; align-items: center; } .pf-rv__img img { display: block; width: 60px; height: 74px; object-fit: cover; border-radius: var(--pf-radius-sm); background: var(--pf-sand); } .pf-rv__name { display: flex; flex-direction: column; font: 600 1rem/1.3 var(--pf-serif); color: var(--pf-ink); } .pf-rv__qty { font: 400 .84rem var(--pf-sans); color: var(--pf-ink-soft); margin-top: .15rem; } /* Cupón dentro del resumen */ .pf-coupon { margin: 0 0 1.1rem; } .pf-coupon__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; } .pf-coupon__input { margin: 0; min-height: 48px; width: 100%; } .pf-coupon__btn { margin: 0; min-height: 48px; padding: 0 1.4rem; min-width: max-content; border: 2px solid var(--pf-ink); border-radius: 999px; background: transparent; color: var(--pf-ink); font: 600 .9rem var(--pf-sans); cursor: pointer; transition: background-color .2s, color .2s; } .pf-coupon__btn:hover { background: var(--pf-ink); color: #fff; } .pf-coupon__msg { margin: .5rem 0 0; font-size: .86rem; color: #2f7a4f; } .pf-coupon__msg.is-error { color: #b3261e; } /* Métodos de pago como tarjetas seleccionables */ .woocommerce-checkout #payment { background: none; border: 0; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; border: 0; } .woocommerce-checkout #payment ul.payment_methods > li { margin: 0 0 .6rem; padding: 0; border: 1px solid #d3c6ae; border-radius: var(--pf-radius-sm); background: var(--pf-paper); overflow: hidden; transition: border-color .2s, box-shadow .2s; } /* Aro exterior (no interior): el fondo de la caja de descripción no puede taparlo */ .woocommerce-checkout #payment ul.payment_methods > li:has(input[type="radio"]:checked) { border-color: var(--pf-ink); box-shadow: 0 0 0 1px var(--pf-ink); } .woocommerce-checkout #payment ul.payment_methods > li > label { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 1rem 1.1rem; font: 600 .98rem var(--pf-sans); color: var(--pf-ink); cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .woocommerce-checkout #payment ul.payment_methods > li > label::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c9bb9f; background: var(--pf-paper); box-sizing: border-box; } .woocommerce-checkout #payment ul.payment_methods > li:has(input[type="radio"]:checked) > label::before { border-color: var(--pf-ink); background: radial-gradient(circle, var(--pf-ink) 0 45%, var(--pf-paper) 50%); } .woocommerce-checkout #payment ul.payment_methods > li > label img { margin: 0 0 0 auto; max-height: 26px; width: auto; } .woocommerce-checkout #payment div.payment_box { margin: 0; padding: .9rem 1.1rem 1rem; background: var(--pf-cream); border: 0; border-top: 1px solid var(--pf-line); border-radius: 0; color: var(--pf-ink-soft); font-size: .9rem; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #payment div.payment_box p { margin: 0; } .woocommerce-checkout #payment div.payment_box { padding: .8rem 1.1rem; } .woocommerce-checkout #payment div.payment_box > * { margin-top: 0; margin-bottom: 0; } /* El icono de Redsys del plugin es un SVG sin color (sale negro): se tiñe con su naranja */ .woocommerce-checkout #payment ul.payment_methods > li > label img[src*="redsys-icon"] { width: 26px; height: 26px; object-fit: none; object-position: -999px 0; background: #ee7d1a; -webkit-mask: url("/wp-content/plugins/woocommerce-gateway-redsys/assets/images/redsys-icon.svg") center / contain no-repeat; mask: url("/wp-content/plugins/woocommerce-gateway-redsys/assets/images/redsys-icon.svg") center / contain no-repeat; } .woocommerce-checkout #payment ul.payment_methods > li > .woocommerce-info { margin: 0; } .woocommerce-checkout #payment .place-order { padding: 0; } .woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text { font-size: .82rem; color: var(--pf-ink-soft); } .woocommerce-checkout .woocommerce-privacy-policy-text { margin: 0 0 .8rem; } .woocommerce-checkout #place_order { float: none; width: 100%; min-height: 58px; margin: 0; padding: 0 1.4rem; font-size: 1.02rem; } .pf-secure { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; margin: 1rem 0 0; padding: 0; font-size: .8rem; color: var(--pf-ink-soft); } .pf-secure li { margin: 0; } .pf-secure li::before { content: "✓ "; color: var(--pf-brand-deep); font-weight: 700; } /* ========================================================================== Checkout: campos, logo y bandas (0.6.2) ========================================================================== */ /* Logo más pequeño y cabecera baja mientras se paga */ body.woocommerce-checkout:not(.woocommerce-order-received) #masthead, body.woocommerce-checkout:not(.woocommerce-order-received) #masthead .header-main { height: 64px !important; min-height: 0; } body.woocommerce-checkout:not(.woocommerce-order-received) #masthead .header-inner { height: 100%; align-items: center; } body.woocommerce-checkout:not(.woocommerce-order-received) #logo { width: auto !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #logo img { width: auto; max-height: 44px !important; } /* Banda "Detalles del pago": menos aire */ .woocommerce-checkout .checkout-page-title .page-title-inner { min-height: 0; padding-top: 14px; padding-bottom: 12px; } .woocommerce-checkout .checkout-breadcrumbs { font-size: .74rem; } .woocommerce-checkout .cart-container { padding-top: 18px; } /* Campos: borde que separa, padding de 16 px, texto de 16 px centrado y color de marca */ .woocommerce-checkout form.checkout input.input-text, .woocommerce-checkout form.checkout select, .woocommerce-checkout form.checkout textarea, .woocommerce-checkout form.checkout .select2-container--default .select2-selection--single { box-sizing: border-box; width: 100%; min-height: 52px; height: 52px; margin: 0; padding: 0 16px; border: 1px solid #d3c6ae; border-radius: var(--pf-radius-sm); background-color: #fff; box-shadow: none; font: 400 16px/1.3 var(--pf-sans); color: var(--pf-ink); } .woocommerce-checkout form.checkout input.input-text::placeholder, .woocommerce-checkout form.checkout textarea::placeholder { color: #7d8797; opacity: 1; } .woocommerce-checkout form.checkout input.input-text:hover, .woocommerce-checkout form.checkout select:hover, .woocommerce-checkout form.checkout textarea:hover { border-color: #b9aa8d; } .woocommerce-checkout form.checkout input.input-text:focus, .woocommerce-checkout form.checkout select:focus, .woocommerce-checkout form.checkout textarea:focus, .woocommerce-checkout form.checkout .select2-container--open .select2-selection--single, .woocommerce-checkout form.checkout .select2-container--focus .select2-selection--single { border-color: var(--pf-ink); box-shadow: 0 0 0 3px rgba(29, 47, 74, .12); outline: 0; } .woocommerce-checkout form.checkout textarea { height: auto; min-height: 104px; padding: 14px 16px; resize: vertical; } .woocommerce-checkout form.checkout select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%231d2f4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px; } /* Select2 (provincia): mismo molde */ .woocommerce-checkout form.checkout .select2-container { width: 100% !important; } .woocommerce-checkout form.checkout .select2-container--default .select2-selection--single { display: flex; align-items: center; } .woocommerce-checkout form.checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 !important; margin: 0; line-height: 50px !important; height: 50px; color: var(--pf-ink); } .woocommerce-checkout form.checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 12px; height: 100%; width: 20px; } /* Etiqueta flotante (Flatsome) cuando el campo tiene valor: alineada con el texto y con aire arriba */ .woocommerce-checkout form.checkout .form-row { position: relative; } .woocommerce-checkout form.checkout .form-row label.fl-label { left: 17px !important; top: 8px !important; max-width: calc(100% - 56px); font: 500 11.5px/1 var(--pf-sans) !important; letter-spacing: .01em; color: var(--pf-ink-soft) !important; pointer-events: none; } .woocommerce-checkout form.checkout input.input-text:not(:placeholder-shown) { padding-top: 21px; } .woocommerce-checkout form.checkout select.country_to_state, .woocommerce-checkout form.checkout .form-row select.fl-select:not(:has(option[value=""]:checked)) { padding-top: 21px; } .woocommerce-checkout form.checkout .form-row select.fl-select:has(option[value=""]:checked) { padding-top: 0; } .woocommerce-checkout form.checkout textarea:not(:placeholder-shown) { padding-top: 26px; } .woocommerce-checkout form.checkout .woocommerce-invalid input.input-text, .woocommerce-checkout form.checkout .woocommerce-invalid select { border-color: #b3261e; } .woocommerce-checkout form.checkout .form-row { margin-bottom: 12px; } /* Casillas: mismo tamaño, peso y alineación */ .woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox, .woocommerce-checkout form.checkout #ship-to-different-address label, .woocommerce-checkout form.checkout .create-account label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 500 14px/1.35 var(--pf-sans); color: var(--pf-ink); } .woocommerce-checkout form.checkout input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--pf-ink); } .woocommerce-checkout form.checkout #ship-to-different-address { margin: 0 0 8px; } .woocommerce-checkout form.checkout #ship-to-different-address label span { font: inherit; } .woocommerce-checkout .woocommerce-form-login-toggle + .is-divider, .woocommerce-checkout .woocommerce-form-login-toggle ~ .is-divider { display: none; } .woocommerce-checkout .woocommerce-form-login-toggle { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--pf-line); } .woocommerce-checkout #terms_field, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { font: 500 .88rem/1.4 var(--pf-sans); } /* Sin la segunda línea de Flatsome sobre "Tus datos"; asterisco de términos junto al texto */ .woocommerce-checkout .woocommerce-billing-fields { border-top: 0; padding-top: 0; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper span.required { display: none; } .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text::after { content: " *"; color: #b3261e; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 .8rem; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { margin-top: 2px; } /* Casilla de newsletter del plugin (label.checkbox con texto suelto): misma tipografía y alineación que las demás */ .woocommerce-checkout form.checkout label.checkbox:has(#ws_opt_in) { display: block; position: relative; margin: 0 0 8px; padding-left: 28px; font: 500 14px/1.4 var(--pf-sans); color: var(--pf-ink); } .woocommerce-checkout form.checkout label.checkbox:has(#ws_opt_in) input[type="checkbox"] { position: absolute; left: 0; top: 1px; } .woocommerce-checkout form.checkout label.checkbox:has(#ws_opt_in) .optional { font-weight: 400; color: var(--pf-ink-soft); } /* ========================================================================== 0.7.0: Sin existencias, logo con aire, ayudas y contacto ========================================================================== */ /* "Sin existencias": etiqueta pequeña en la esquina, no una banda sobre la foto */ .box-image .out-of-stock-label, .product-small .box-image .out-of-stock-label, .out-of-stock-label { position: absolute; top: 12px; bottom: auto; left: 12px; right: auto; width: auto; height: auto; margin: 0; padding: .55em .95em; transform: none; opacity: 1; z-index: 2; background: var(--pf-ink); color: #fff; border: 0; border-radius: 999px; box-shadow: none; text-align: center; font: 700 .66rem/1 var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; } .product-small.out-of-stock .box-image img, .product.out-of-stock .box-image img { filter: grayscale(.3); opacity: .78; } /* Barra pegajosa de añadir al carrito: opaca, sin transparentar el pie */ .sticky-add-to-cart, .sticky-add-to-cart.sticky-add-to-cart--active { background-color: var(--pf-paper); border-top: 1px solid var(--pf-line); box-shadow: 0 -8px 24px rgba(29,47,74,.1); } .sticky-add-to-cart .button { border-radius: 999px; } /* Cabecera: logo más pequeño y con aire arriba y abajo */ #masthead .header-main { height: 96px; } #masthead #logo { width: auto !important; } #masthead #logo img, #masthead .header-logo img { width: auto; max-height: 54px !important; } #masthead .stuck .header-main, #masthead.stuck .header-main, .header-wrapper.stuck #masthead .header-main { height: 72px; } .stuck #logo img { max-height: 42px !important; } @media (max-width: 849px) { #masthead .header-main { height: 72px; } #masthead #logo img, #masthead .header-logo img { max-height: 44px !important; } } /* Ayudas y financiación: sección pequeña y discreta al final de la portada */ .pf-aid { background: var(--pf-cream); padding: clamp(22px, 3vw, 32px) 0; border-top: 1px solid var(--pf-line); } .pf-aid__grid { display: grid; gap: 1rem; align-items: center; } .pf-aid .pf-eyebrow { margin: 0 0 .5rem; font-size: .66rem; } .pf-aid h2 { font: 500 1.05rem/1.2 var(--pf-serif); margin: 0 0 .5rem; } .pf-aid p { max-width: 46em; margin: 0 0 .5rem; font-size: .76rem; line-height: 1.5; color: var(--pf-ink-soft); } .pf-aid .pf-aid__title { margin: .6rem 0 .1rem; font-size: .68rem; letter-spacing: .06em; color: var(--pf-ink); } .pf-aid__logo { margin: 0; max-width: 170px; } .pf-aid__logo img { display: block; width: 100%; height: auto; border-radius: 8px; } .pf-aid__pac { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--pf-line); } .pf-aid__pac p { margin-bottom: .4rem; } .pf-aid__pac img { display: block; width: 100%; max-width: 300px; height: auto; } @media (min-width: 850px) { .pf-aid__grid { grid-template-columns: 1fr auto; gap: 2rem; } .pf-aid__logo { justify-self: end; } } /* Contacto */ .pf-contact { background: var(--pf-cream); padding-bottom: clamp(40px, 6vw, 80px); } .pf-contact__hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(24px, 4vw, 44px); isolation: isolate; } .pf-contact__hero::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -60%; width: min(60vw, 480px); aspect-ratio: 1; background: var(--pf-rose); opacity: .5; border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%; } .pf-contact__hero h1 { font: 500 clamp(2.2rem, 6vw, 3.8rem)/1.05 var(--pf-serif); margin: 0 0 1rem; } .pf-contact__grid { display: grid; gap: 22px; align-items: start; } .pf-contact__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pf-contact__cards li { margin: 0; display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); } .pf-contact__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pf-sky); color: var(--pf-ink); } .pf-contact__icon .pf-icon { width: 22px; height: 22px; } .pf-contact__cards h2 { font: 600 .74rem/1 var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-ink-soft); margin: .2rem 0 .5rem; } .pf-contact__cards p { margin: 0 0 .5rem; line-height: 1.5; } .pf-contact__cards a:not(.pf-link) { color: var(--pf-ink); font-weight: 600; text-decoration: none; } .pf-contact__cards a:not(.pf-link):hover { color: var(--pf-pink); } .pf-contact__form { padding: clamp(20px, 3vw, 34px); background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); } .pf-contact__form h2 { font: 500 1.6rem/1.15 var(--pf-serif); margin: 0 0 1.1rem; } .pf-contact__form .wpcf7 { padding: 0; border: 0; box-shadow: none; background: none; } .pf-contact__form .wpcf7 p { margin: 0 0 12px; } .pf-contact__form input[type="text"], .pf-contact__form input[type="email"], .pf-contact__form input[type="tel"], .pf-contact__form textarea { box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 0 16px; border: 1px solid #d3c6ae; border-radius: var(--pf-radius-sm); background: #fff; box-shadow: none; font: 400 16px/1.3 var(--pf-sans); color: var(--pf-ink); } .pf-contact__form textarea { min-height: 140px; padding: 14px 16px; } .pf-contact__form input:focus, .pf-contact__form textarea:focus { border-color: var(--pf-ink); box-shadow: 0 0 0 3px rgba(29,47,74,.12); outline: 0; } .pf-contact__form input::placeholder, .pf-contact__form textarea::placeholder { color: #7d8797; opacity: 1; } .pf-contact__form .wpcf7-acceptance, .pf-contact__form .wpcf7-list-item { margin: 0; font-size: .88rem; } .pf-contact__form .wpcf7-submit { min-height: 52px; padding: 0 2.2rem; background: var(--pf-ink); color: #fff; border: 0; border-radius: 999px; font: 600 1rem var(--pf-sans); cursor: pointer; } .pf-contact__form .wpcf7-submit:hover { background: var(--pf-pink); } .pf-contact__form .wpcf7-not-valid-tip { color: #b3261e; font-size: .84rem; } .pf-contact__form .wpcf7-response-output { margin: 14px 0 0; padding: 12px 16px; border: 0; border-radius: var(--pf-radius-sm); background: var(--pf-sand); } .pf-contact__map { margin-top: clamp(22px, 3vw, 36px); } .pf-contact__map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 440px); border: 0; border-radius: var(--pf-radius); background: var(--pf-sky); box-shadow: var(--pf-shadow); } @media (min-width: 850px) { .pf-contact__grid { grid-template-columns: .85fr 1.15fr; gap: 28px; } } /* Categorías en el listado: el hover de Flatsome (hover-dark) pinta la caja del texto de azul; aquí solo cambia el color del nombre y se acerca la foto */ .product-category .box, .product-category .box:hover { background: none; } .product-category .box .box-text, .product-category .box:hover .box-text, .product-category .box.hover-dark:hover .box-text { background: none !important; } .product-category .box .box-text-inner h5, .product-category .box .box-text-inner .count { transition: color .2s; } .product-category .box:hover .box-text-inner h5 { color: var(--pf-pink); } .product-category .box:hover .box-text-inner .count { color: var(--pf-brand-deep); } .product-category .box-image { transition: box-shadow .25s ease, transform .25s ease; } .product-category .box:hover .box-image { box-shadow: var(--pf-shadow); transform: translateY(-3px); } .product-category .box-image img { transition: transform .5s cubic-bezier(.2,.7,.2,1); } .product-category .box:hover .box-image img { transform: scale(1.05); opacity: 1; } /* Hover de las tarjetas de producto: la segunda foto sustituye a la primera (sin superponerse) y "Vista rápida" es una pastilla */ .product-small .box-image { position: relative; background: var(--pf-paper); } .product-small .box-image > a, .product-small .box-image .image-zoom, .product-small .box-image .image-fade_in_back { display: block; } .product-small .box-image img { object-fit: cover; width: 100%; } .product-small .box-image img.back-image, .product-small .box-image img.show-on-hover { background-color: var(--pf-paper); object-fit: cover; transition: opacity .35s ease; } .product-small .box:hover .box-image img.back-image { opacity: 1; } .product-small .box-image:has(img.back-image):hover > a > img:first-child, .product-small .box-image:has(img.back-image):hover .image-fade_in_back > a > img:first-child { opacity: 0; transition: opacity .35s ease; } .product-small .box-image .image-tools.bottom, .product-small .box-image .image-tools.hide-for-small.bottom { left: 0; right: 0; bottom: 12px; padding: 0; background: none; text-align: center; pointer-events: none; } .product-small .box-image .quick-view, .product-small .box-image a.quick-view { position: static; display: inline-flex; align-items: center; width: auto; margin: 0 auto; padding: .65em 1.2em; pointer-events: auto; background: rgba(255, 255, 255, .94); color: var(--pf-ink); border-radius: 999px; box-shadow: 0 4px 14px rgba(29, 47, 74, .18); font: 600 .7rem/1 var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s, color .2s; } .product-small .box-image .quick-view:hover { background: var(--pf-ink); color: #fff; } /* Miniaturas de la ficha: sin el fondo del visor, cada una con su propio fondo y radio */ .product-gallery .product-thumbnails .flickity-viewport, .product-gallery .product-thumbnails .flickity-slider, .product-thumbnails .flickity-viewport { background: none; border-radius: 0; } .product-thumbnails .col a { display: block; border-radius: var(--pf-radius-sm); overflow: hidden; background: var(--pf-paper); border: 2px solid transparent; transition: border-color .2s; } .product-thumbnails .col.is-nav-selected a, .product-thumbnails .col a:hover { border-color: var(--pf-ink); } .product-thumbnails .col a img { display: block; border-radius: 0; } /* Miniaturas de la ficha: bordes y recorte uniformes */ .product-thumbnails img, .product-thumbnails .col a img { border-radius: var(--pf-radius-sm); object-fit: cover; width: 100%; aspect-ratio: 1; } /* Buscador de la cabecera: una sola pastilla (campo + botón) con el estilo de la marca */ #ux-search-dropdown.nav-dropdown { padding: 12px; min-width: 340px; border-radius: var(--pf-radius); } #ux-search-dropdown .searchform-wrapper { margin: 0; } #ux-search-dropdown .searchform .flex-row { align-items: center; gap: 0; flex-wrap: nowrap; background: #fff; border: 1px solid #d3c6ae; border-radius: 999px; overflow: hidden; transition: border-color .2s, box-shadow .2s; } #ux-search-dropdown .searchform .flex-row:focus-within { border-color: var(--pf-ink); box-shadow: 0 0 0 3px rgba(29, 47, 74, .12); } #ux-search-dropdown .searchform .flex-col { padding: 0; } #ux-search-dropdown input.search-field { box-sizing: border-box; width: 100%; height: 46px; min-height: 0; margin: 0; padding: 0 8px 0 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: 400 16px/1 var(--pf-sans); color: var(--pf-ink); } #ux-search-dropdown input.search-field:focus { border: 0; box-shadow: none; outline: 0; } #ux-search-dropdown input.search-field::placeholder { color: #7d8797; opacity: 1; } #ux-search-dropdown .ux-search-submit { display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0 999px 999px 0; background: var(--pf-ink); color: #fff; box-shadow: none; transition: background-color .2s; } #ux-search-dropdown .ux-search-submit:hover { background: var(--pf-pink); } #ux-search-dropdown .ux-search-submit i { font-size: 1.05rem; margin: 0; } @media (max-width: 849px) { #ux-search-dropdown.nav-dropdown { min-width: 0; } } /* Relacionados: flechas circulares sobre la foto, solo en escritorio */ .related .flickity-prev-next-button, .product-section .flickity-prev-next-button, .ds-suggest .flickity-prev-next-button { top: 122px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--pf-paper); box-shadow: 0 4px 14px rgba(29, 47, 74, .2); opacity: 1; transform: none; transition: background-color .2s, box-shadow .2s; } .related .flickity-prev-next-button.previous { left: 4px; } .related .flickity-prev-next-button.next { right: 4px; } .related .flickity-prev-next-button .arrow, .related .flickity-prev-next-button svg { fill: var(--pf-ink); width: 18px; height: 18px; } .related .flickity-prev-next-button:hover .arrow, .related .flickity-prev-next-button:hover svg { fill: #fff; } .related .flickity-prev-next-button:disabled { opacity: 0; pointer-events: none; } @media (max-width: 849px) { .related .flickity-prev-next-button { display: none; } } .product-small .box-image img.back-image, .product-small .box-image .image-fade_in_back img { transition-duration: .2s; } /* Menú lateral y buscador del móvil con la tipografía de la marca */ .mobile-sidebar, #main-menu.mobile-sidebar { background: var(--pf-cream); } .mobile-sidebar .nav > li > a, .mobile-sidebar .nav-sidebar > li > a { font: 600 .9rem/1.2 var(--pf-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink); } .mobile-sidebar .nav > li > a:hover, .mobile-sidebar .nav > li.active > a { color: var(--pf-pink); } .mobile-sidebar .nav > li { border-color: var(--pf-line); } .mobile-sidebar .searchform .flex-row { align-items: center; flex-wrap: nowrap; gap: 0; background: #fff; border: 1px solid #d3c6ae; border-radius: 999px; overflow: hidden; } .mobile-sidebar .searchform .flex-row:focus-within { border-color: var(--pf-ink); box-shadow: 0 0 0 3px rgba(29, 47, 74, .12); } .mobile-sidebar .searchform .flex-col { padding: 0; } .mobile-sidebar input.search-field { box-sizing: border-box; width: 100%; height: 46px; min-height: 0; margin: 0; padding: 0 8px 0 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: 400 16px/1 var(--pf-sans); color: var(--pf-ink); } .mobile-sidebar input.search-field:focus { border: 0; box-shadow: none; outline: 0; } .mobile-sidebar .ux-search-submit { display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0 999px 999px 0; background: var(--pf-ink); color: #fff; box-shadow: none; } /* Mini carrito (desplegable de escritorio y panel lateral del móvil) */ .header-cart-link .cart-icon strong, .cart-item .cart-icon strong { border-color: var(--pf-ink); color: var(--pf-ink); background: none; border-radius: 8px; } .cart-item .nav-dropdown { width: 360px; max-width: 92vw; padding: 0; border-radius: var(--pf-radius); border: 1px solid var(--pf-line); box-shadow: var(--pf-shadow); background: var(--pf-paper); margin-top: 4px; } .cart-item .nav-dropdown > li.widget_shopping_cart { padding: 0; margin: 0; } .widget_shopping_cart_content { font-family: var(--pf-sans); color: var(--pf-ink); } .widget_shopping_cart_content .pf-ship { margin: 14px 14px 4px; padding: .7rem .9rem; border-radius: var(--pf-radius-sm); } .widget_shopping_cart_content .pf-ship p { font-size: .84rem; margin-bottom: .5rem; } ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 6px 14px; max-height: 340px; overflow-y: auto; } ul.woocommerce-mini-cart li.mini_cart_item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 12px; align-items: start; margin: 0; padding: 12px 28px 12px 0; border: 0; border-bottom: 1px solid var(--pf-line); min-height: 0; } ul.woocommerce-mini-cart li.mini_cart_item:last-child { border-bottom: 0; } ul.woocommerce-mini-cart li.mini_cart_item > a:not(.remove) { display: contents; font: 600 .98rem/1.3 var(--pf-serif); color: var(--pf-ink); text-decoration: none; } ul.woocommerce-mini-cart li.mini_cart_item img { grid-row: 1 / span 2; position: static; width: 64px; height: 76px; margin: 0; object-fit: cover; border-radius: var(--pf-radius-sm); background: var(--pf-sand); } ul.woocommerce-mini-cart li.mini_cart_item .ux-mini-cart-qty, ul.woocommerce-mini-cart li.mini_cart_item .quantity { grid-column: 2; font: 400 .86rem var(--pf-sans); color: var(--pf-ink-soft); padding: 0; margin: 0; } ul.woocommerce-mini-cart li.mini_cart_item .quantity .amount { font-weight: 600; color: var(--pf-ink); } ul.woocommerce-mini-cart li.mini_cart_item a.remove { position: absolute; top: 10px; right: 0; left: auto; width: 24px; height: 24px; display: grid; place-items: center; margin: 0; border: 0; border-radius: 50%; background: var(--pf-sand); color: var(--pf-ink-soft) !important; font-size: 1rem; line-height: 1; } ul.woocommerce-mini-cart li.mini_cart_item a.remove:hover { background: var(--pf-pink); color: #fff !important; } .ux-mini-cart-footer { padding: 4px 14px 14px; border-top: 1px solid var(--pf-line); } .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0; padding: 0; border: 0; font: 600 .74rem var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-soft); } .woocommerce-mini-cart__total .amount { font: 600 1.25rem var(--pf-sans); letter-spacing: 0; color: var(--pf-ink); } .woocommerce-mini-cart__total strong { font-weight: 600; } .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; } .woocommerce-mini-cart__buttons .button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 0 1.2rem; border-radius: 999px; font: 600 .95rem var(--pf-sans); letter-spacing: 0; text-transform: none; } .woocommerce-mini-cart__buttons .button:not(.checkout) { background: transparent; color: var(--pf-ink); border: 2px solid var(--pf-ink); } .woocommerce-mini-cart__buttons .button:not(.checkout):hover { background: var(--pf-ink); color: #fff; } .woocommerce-mini-cart__buttons .button.checkout { background: var(--pf-ink); color: #fff; border: 2px solid var(--pf-ink); } .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--pf-pink); border-color: var(--pf-pink); } .woocommerce-mini-cart__empty-message { padding: 1.4rem 14px; text-align: center; color: var(--pf-ink-soft); } ul.woocommerce-mini-cart li.mini_cart_item:last-child, .cart-item .nav-dropdown ul.woocommerce-mini-cart li.mini_cart_item:last-child { border-bottom: 0 !important; box-shadow: none !important; } /* Mini carrito: ajustes finos (margen de la foto, sin líneas sobrantes, panel móvil opaco) */ .cart-item .nav-dropdown ul.woocommerce-mini-cart { margin: 0 !important; padding: 6px 16px !important; } .cart-item .nav-dropdown ul.woocommerce-mini-cart li.mini_cart_item { margin: 0 !important; padding-left: 0 !important; } .widget_shopping_cart_content .ux-mini-cart-footer, .widget_shopping_cart_content .ux-mini-cart-footer .woocommerce-mini-cart__total { border-left: 0; border-right: 0; } .widget_shopping_cart_content .ux-mini-cart-footer .woocommerce-mini-cart__total, .widget_shopping_cart_content p.total { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; padding: 6px 0 0 !important; } .widget_shopping_cart_content .ux-mini-cart-footer > *::before, .widget_shopping_cart_content .ux-mini-cart-footer > *::after { display: none; } .off-canvas .mfp-content, .off-canvas-right .mfp-content, .off-canvas .sidebar-menu, .mobile-sidebar { background: var(--pf-paper) !important; opacity: 1 !important; } .off-canvas .mfp-content .widget-title, .off-canvas .mfp-content .sidebar-menu h3, .off-canvas-right .mfp-content .cart-title { font: 600 .8rem var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-ink); } .cart-item:hover .cart-icon strong, .header-cart-link:hover .cart-icon strong { background: var(--pf-ink); color: #fff; border-color: var(--pf-ink); } /* Aviso "añadido": el contenedor de Flatsome es blanco; que no forme una banda detrás de la tarjeta */ div:has(> .message-wrapper), .woocommerce-notices-wrapper { background: transparent !important; } .related .flickity-prev-next-button .flickity-button-icon { display: none; } .related .flickity-prev-next-button { background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } .related .flickity-prev-next-button.previous { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2f4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); } .related .flickity-prev-next-button.next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2f4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); } .related .flickity-prev-next-button.previous:hover { background-color: var(--pf-pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); } .related .flickity-prev-next-button.next:hover { background-color: var(--pf-pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); } /* Aviso del carrito ("Carrito actualizado"): compacto, icono alineado y aparece/desaparece suave */ .woocommerce-message .message-container i, .woocommerce-message .message-container [class*="icon-"] { position: static !important; transform: none !important; margin: 0 !important; padding: 0; flex: none; line-height: 1; } .woocommerce-cart .woocommerce-message { margin: 0 0 14px; transition: opacity .4s ease, max-height .4s ease, margin .4s ease; max-height: 120px; overflow: hidden; } .woocommerce-cart .woocommerce-message .message-container { padding: 10px 16px; font-size: .9rem; } .woocommerce-cart .woocommerce-message.pf-leaving { opacity: 0; max-height: 0; margin-bottom: 0; } /* "¿Ya tienes cuenta?": tarjeta del ancho del contenedor, texto centrado */ .woocommerce-checkout .woocommerce-form-login-toggle { width: 100%; padding-bottom: 0; border-bottom: 0; margin: 0 0 18px; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info .message-container { display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; margin: 0; padding: 14px 16px; text-align: center; background: var(--pf-sand); border-radius: var(--pf-radius-sm); } /* Resumen: la fila de envío es una tabla anidada; la celda exterior no suma relleno ni borde, así todas las filas miden igual y solo hay una línea entre ellas */ .shop_table td.shipping__inner { padding: 0 !important; border: 0 !important; background: none; } .shop_table .shipping__table { width: 100%; margin: 0; border: 0; table-layout: auto; } .shop_table .shipping__table tr, .shop_table .shipping__table tbody { border: 0; background: none; } .shop_table .shipping__table th, .shop_table .shipping__table td { padding: .7rem 0; vertical-align: middle; } .woocommerce-checkout .shop_table .shipping__table th, .woocommerce-checkout .shop_table .shipping__table td { border-bottom: 1px solid var(--pf-line); } .woocommerce-checkout .shop_table .shipping__table td, .woocommerce-checkout .shop_table tfoot tr.cart-subtotal td { text-align: right; } .woocommerce-checkout .shop_table .shipping__table th, .woocommerce-checkout .shop_table tfoot tr.cart-subtotal th { width: 7rem; text-align: left; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td { padding-top: .9rem; } /* Totales: la tabla no recorta ni dibuja sombra propia (dejaba una franja gris bajo el total) */ .cart_totals table.shop_table, .woocommerce-checkout-review-order-table { border-radius: 0; overflow: visible; box-shadow: none; border-bottom: 0; } .cart_totals table.shop_table tr.order-total th, .cart_totals table.shop_table tr.order-total td { border-bottom: 0; box-shadow: none; } /* Resumen del checkout: el nombre ocupa casi toda la línea y la miniatura no se aplasta; el precio solo lo que necesita */ .woocommerce-checkout .woocommerce-checkout-review-order-table { table-layout: auto; width: 100%; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td.product-name { width: 100%; padding-right: 12px; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td.product-total { width: 1%; white-space: nowrap; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { width: 6.5rem; } .pf-rv { min-width: 0; } .pf-rv__img { flex: 0 0 60px; width: 60px; } .pf-rv__img img { width: 60px; min-width: 60px; max-width: none; height: 74px; } .pf-rv__name { flex: 1 1 auto; min-width: 0; } /* Resumen del checkout sin columnas de tabla compartidas: cada producto es una fila de rejilla (nombre + precio) y el pie tiene su propia rejilla. Así los nombres ocupan todo el ancho y la nota del IVA cabe en una línea. */ .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: center; border-bottom: 1px solid var(--pf-line); } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td { display: block; width: auto; border: 0; padding: .9rem 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td.product-total { white-space: nowrap; text-align: right; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { width: auto; text-align: left; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals { display: block; } .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; width: 100%; } .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table tbody, .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table tr { display: contents; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot small.includes_tax { display: block; white-space: nowrap; } @media (max-width: 360px) { .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot small.includes_tax { white-space: normal; } } /* Mini carrito: separador solo ENTRE productos (nunca línea tras el último; el pie ya trae la suya) */ ul.woocommerce-mini-cart li.mini_cart_item, .cart-item .nav-dropdown ul.woocommerce-mini-cart li.mini_cart_item { border-bottom: 0 !important; border-top: 0; } ul.woocommerce-mini-cart li.mini_cart_item + li.mini_cart_item, .cart-item .nav-dropdown ul.woocommerce-mini-cart li.mini_cart_item + li.mini_cart_item { border-top: 1px solid var(--pf-line) !important; } /* Resumen del checkout: una línea por fila (en la fila, no en cada celda) para que no queden tramos cortados */ .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td, .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table th, .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table td { border: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals { border-bottom: 1px solid var(--pf-line); } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal { border-top: 1px solid var(--pf-line); } .woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item:last-of-type { border-bottom: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table th, .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping__table td { padding: .8rem 0; } /* Ficha de producto en móvil: la imagen primero; migas integradas sobre el título */ .pf-crumbs-m { display: none; } @media (max-width: 849px) { .single-product .product-page-title { display: none; } .single-product .product-main { padding-top: 14px; } .pf-crumbs-m { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; margin: 0 0 .7rem; font: 600 .68rem/1.4 var(--pf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-soft); } .pf-crumbs-m a { color: var(--pf-ink-soft); text-decoration: none; } .pf-crumbs-m a:hover { color: var(--pf-pink); } .pf-crumbs-m__sep { color: var(--pf-line); } .single-product .product-info h1.product-title { margin-top: 0; } } /* Preguntas frecuentes (Sobre nosotros) */ .pf-faq { max-width: 46em; margin: clamp(32px, 5vw, 56px) auto 0; padding: 0 var(--pf-gutter); } .pf-faq h2 { font: 500 clamp(1.5rem, 3vw, 2rem)/1.15 var(--pf-serif); margin: 0 0 1rem; text-transform: none; } .pf-faq details { border-top: 1px solid var(--pf-line); padding: .9rem 0; } .pf-faq details:last-of-type { border-bottom: 1px solid var(--pf-line); } .pf-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font: 600 1rem/1.4 var(--pf-sans); color: var(--pf-ink); } .pf-faq summary::-webkit-details-marker { display: none; } .pf-faq summary::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--pf-brand-deep); } .pf-faq details[open] summary::after { content: "−"; } .pf-faq details p { margin: .6rem 0 0; color: var(--pf-ink-soft); line-height: 1.65; } /* Ficha de producto en móvil: sin barra de pestañas; descripción primero y el resto como secciones; sin la categoría repetida de las migas */ @media (max-width: 849px) { .single-product .product_meta .posted_in { display: none; } .single-product .woocommerce-tabs ul.tabs, .single-product .woocommerce-tabs .nav-tabs { display: none; } .single-product .woocommerce-tabs .tab-panels .panel, .single-product .woocommerce-tabs .woocommerce-Tabs-panel { display: block !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; padding: 0; margin: 0 0 1.6rem; position: static; } .single-product .woocommerce-tabs { padding-top: 1.2rem; border-top: 1px solid var(--pf-line); margin-top: 1.4rem; } .single-product .woocommerce-tabs .panel > h2:first-child { display: none; } .single-product .woocommerce-tabs #tab-additional_information::before { display: block; margin: 0 0 .6rem; font: 600 .74rem/1 var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-ink-soft); } .single-product .woocommerce-tabs #tab-additional_information::before { content: "Información adicional"; } .single-product .woocommerce-tabs #tab-reviews h2, .single-product .woocommerce-tabs #tab-reviews .woocommerce-Reviews-title { font: 600 .74rem/1 var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-ink-soft); margin: 0 0 .8rem; } .single-product #review_form_wrapper, .single-product #review_form { border: 0; padding: 0; background: none; } .single-product #review_form .comment-reply-title { font: 500 1.2rem/1.3 var(--pf-serif); text-transform: none; } .single-product .woocommerce-tabs #tab-description p { font-size: 1rem; line-height: 1.7; } } /* Redes: una sola copia por pantalla (escritorio en la columna de información, móvil al final) y sin el hueco antes de la descripción */ .pf-share-end { display: none; } @media (max-width: 849px) { .single-product .product-info .share-icons { display: none; } .single-product .pf-share-end { display: block; padding: 0 0 1.6rem; } .single-product .pf-share-end .share-icons { margin: 0; padding: 1.6rem 0 0; text-align: left; } .single-product .pf-share-end .share-icons .social-icons { margin: 0; } .single-product .product-main { padding-bottom: 6px; } .single-product .product-info { padding-bottom: 6px; } .single-product .product-info .product_meta { margin-bottom: 0; } .single-product .woocommerce-tabs { margin-top: .6rem; padding-top: 1rem; } } /* Redes de la ficha: título para que se entienda que sirven para compartir */ .single-product .share-icons { position: relative; padding-top: 1.6rem; } .single-product .share-icons::before { content: "Compartir"; position: absolute; top: 0; left: 0; white-space: nowrap; font: 600 .74rem/1 var(--pf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-ink-soft); } .single-product .share-icons .social-icons, .single-product .share-icons .button { margin-top: 0; } /* Botones con texto nítido: Flatsome les añade text-shadow, que los emborrona */ .button, button, input[type="submit"], .ux-cart-coupon .button, .checkout-button, #place_order, .single_add_to_cart_button, .pf-btn { text-shadow: none !important; -webkit-font-smoothing: antialiased; } /* Contacto (Contact Form 7) */ .wpcf7 input[type="submit"] { background: var(--pf-ink); color: #fff; border: 0; padding: 0 2em; min-height: 48px; cursor: pointer; } .wpcf7 input[type="submit"]:hover { background: var(--pf-pink); } /* ========================================================================== Pie ========================================================================== */ .pf-footer { background: var(--pf-ink); color: rgba(255,255,255,.78); } .pf-footer a { color: rgba(255,255,255,.82); text-decoration: none; } .pf-footer a:hover { color: var(--pf-rose); } .pf-footer__grid { display: grid; gap: 2.2rem 1.5rem; grid-template-columns: 1fr 1fr; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(32px, 5vw, 56px); } .pf-footer__brand { grid-column: 1 / -1; } .pf-footer__logo { display: block; width: 200px; margin: 0 0 1rem; color: #fff; } .pf-footer__logo:hover { color: var(--pf-rose); } .pf-footer__logo svg { display: block; width: 100%; height: auto; } .pf-footer__tag { max-width: 24em; margin: 0 0 1.3rem; color: rgba(255,255,255,.7); } .pf-footer__social { list-style: none; display: flex; gap: .6rem; margin: 0; padding: 0; } .pf-footer__social li { margin: 0; } .pf-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); } .pf-footer__social a:hover { background: var(--pf-rose); border-color: var(--pf-rose); color: var(--pf-ink); } .pf-footer .pf-icon { width: 20px; height: 20px; flex: none; } .pf-footer__col h2 { font: 600 .74rem/1 var(--pf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pf-rose); margin: 0 0 1rem; } .pf-footer__col ul { list-style: none; margin: 0; padding: 0; } .pf-footer__col li { margin: 0 0 .55rem; font-size: .95rem; } .pf-footer__col address { font-style: normal; font-size: .95rem; } .pf-footer__col:last-child { grid-column: 1 / -1; } .pf-footer__col address p { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 .8rem; } .pf-footer__col address .pf-icon { margin-top: .12em; color: var(--pf-rose); } .pf-footer__bar { border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(255,255,255,.58); } .pf-footer__bar-inner { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.2rem; padding-bottom: 1.4rem; } .pf-footer__bar p { margin: 0; } .pf-footer__bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; } .pf-footer__bar li { margin: 0; } .pf-footer__bar a { color: rgba(255,255,255,.75); } .pf-footer__pay { display: inline-flex; align-items: center; gap: .45rem; } .pf-footer__pay .pf-icon { width: 16px; height: 16px; } @media (min-width: 850px) { .pf-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem; } .pf-footer__brand { grid-column: auto; } .pf-footer__col:last-child { grid-column: auto; } .pf-footer__bar-inner { flex-direction: row; justify-content: space-between; align-items: center; } } /* Aviso de cookies (CookieYes) un poco más cuidado */ .cky-consent-container .cky-consent-bar { border-radius: var(--pf-radius-sm) !important; font-family: var(--pf-sans); }