/* ============================================================ TiendaPocket Theme — Main CSS Compatible con el plugin Backend Personalizado de TiendaPocket. Los colores se inyectan como variables CSS desde PHP (customizer.php). ============================================================ */ /* ── Variables base ────────────────────────────────────────────────────────── */ :root { /* Colores (sobreescritos por el customizer/plugin en ) */ --color-primary: #0f172a; --color-accent: #6366f1; --color-accent-hover: #4f46e5; --color-success: #10b981; --color-danger: #ef4444; --color-text: #1e293b; --color-text-muted: #64748b; --color-bg: #ffffff; --color-surface: #f8fafc; --color-border: #e2e8f0; /* Tipografía */ --font-heading: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Espaciado */ --container-width: min(90vw, 1600px); --container-pad: clamp(1.25rem, 2vw, 2.5rem); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06); --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08); --shadow-xl: 0 20px 60px rgba(0,0,0,.16); /* Transiciones */ --transition: .2s cubic-bezier(.4,0,.2,1); --transition-slow: .35s cubic-bezier(.4,0,.2,1); /* Z-index */ --z-topbar: 100; --z-header: 200; --z-overlay: 1050; --z-offcanvas:1100; --z-toast: 1200; } /* ── Reset y base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; overflow-y: visible; overscroll-behavior-x: none; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-y: visible; overscroll-behavior-x: none; } /* overflow-x: hidden en un ancestro fuerza overflow-y a "auto" (spec CSS: si un eje es "hidden" y el otro se declaró "visible", el "visible" se computa como "auto"), lo que rompe "position: sticky" en los hijos. overflow-x: clip no tiene ese efecto y logra el mismo recorte horizontal, por eso se usa acá para no romper el sticky de la galería en single-product (layouts 1, 2, 6, 7). overscroll-behavior-x: none evita que un swipe horizontal dentro de un carrusel (overflow-x: scroll) haga "bounce" a nivel documento en iOS Safari, que es lo que dejaba visibles elementos con position: fixed (ej. widgets de chat) fuera de su lugar durante el gesto. */ #page, .site-wrapper, #main, .site-main { overflow-x: clip; overflow-y: visible; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--color-accent); } ul, ol { list-style: none; } button { cursor: pointer; font: inherit; border: none; background: none; } input, textarea, select { font: inherit; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: 1.2; color: var(--color-primary); } /* ── Container ─────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-pad); } /* Pantallas muy anchas: header más alto y mayor padding lateral */ @media (min-width: 1600px) { .site-header__inner { height: 88px; } .site-logo__img { max-height: 58px; } } /* ── Skip link ─────────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -999px; left: 1rem; background: var(--color-accent); color: #fff; padding: .5rem 1rem; border-radius: var(--radius-sm); z-index: 9999; font-size: .875rem; font-weight: 600; } .skip-link:focus { top: 1rem; } /* ══════════════════════════════════════════════════════════════════════════════ TOP BAR ═══════════════════════════════════════════════════════════════════════════════ */ .tp-topbar { position: relative; background: var(--color-primary); color: #fff; font-size: .8125rem; font-weight: 500; overflow: hidden; height: 36px; display: flex; align-items: center; z-index: var(--z-topbar); transform: translateZ(0); -webkit-transform: translateZ(0); } .tp-topbar__track { display: flex; align-items: center; gap: 4rem; white-space: nowrap; animation: tp-marquee 20s linear infinite; padding-inline: 2rem; } .tp-topbar--paused .tp-topbar__track { animation-play-state: paused; } .tp-topbar__item { flex-shrink: 0; } .tp-topbar__close { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.7); padding: .25rem; border-radius: var(--radius-sm); transition: color var(--transition); z-index: 2; } .tp-topbar__close:hover { color: #fff; } @keyframes tp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════════════════════ */ .site-header { position: relative; background: var(--header-bg, var(--color-bg)); border-bottom: 1px solid var(--color-border); z-index: var(--z-header); transition: box-shadow var(--transition), background var(--transition); } .site-header--sticky { position: sticky; top: 0; } .site-header.scrolled { box-shadow: var(--shadow-md); } .has-transparent-header .site-header:not(.scrolled) { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; } .has-transparent-header .site-header:not(.scrolled) * { color: #fff; } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 80px; } .site-header__logo { flex-shrink: 0; } .site-logo { display: flex; align-items: center; } .site-logo__img { max-height: 52px; width: auto; } @media (max-width: 640px) { .site-logo__img { max-height: 36px; max-width: clamp(80px, 38vw, 150px); /* no superar el 38% del ancho — evita solapar carrito/hamburguesa */ } } .site-logo--text { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--color-primary); } .site-header__nav { flex: 1; display: flex; justify-content: center; } @media (max-width: 1023px) { .site-header__nav { display: none; } } /* Nav menu */ .nav-menu { display: flex; align-items: center; gap: .25rem; } .nav-menu > li { position: relative; } .nav-menu > li > a { display: flex; align-items: center; gap: .25rem; padding: .5rem clamp(.5rem, .75vw, .875rem); font-size: clamp(.8125rem, .9vw, .9375rem); font-weight: 500; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-menu > li > a:hover, .nav-menu > li.current-menu-item > a { color: var(--color-accent); } /* Dropdown */ .nav-menu .sub-menu { position: absolute; top: calc(100% + .5rem); left: 0; min-width: 220px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .5rem; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition); z-index: 10; } .nav-menu > li:hover > .sub-menu, .nav-menu > li:focus-within > .sub-menu { opacity: 1; pointer-events: auto; transform: none; } .nav-menu .sub-menu a { display: block; padding: .5rem .75rem; font-size: .9rem; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .nav-menu .sub-menu a:hover { background: var(--color-surface); color: var(--color-accent); } /* Ítem de menú destacado (clase "tp-mega-special" asignada desde Apariencia → Menús). Selector genérico "li.tp-mega-special > a" para cubrir CUALQUIER menú desktop (nav-menu y los menús propios de header-6/header-7), + las clases explícitas que arman los walkers custom (mega menú de header-6, drawer mobile). */ li.tp-mega-special > a, .tp-h6-nav-menu__link--special, .tp-h6-mega__link--special, .tp-h6-mobile__direct-link--special, .tp-h6-acc__link--special, .tp-mobile-menu__link--special { color: var(--color-accent) !important; font-weight: 700; } /* ── Mega Menu Panel ───────────────────────────────────────────────────────── */ .tp-mega { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); z-index: calc(var(--z-header) + 10); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition); } .tp-mega[aria-hidden="false"], .tp-mega.is-open { opacity: 1; pointer-events: auto; transform: none; } .tp-mega__inner { display: grid; grid-template-columns: minmax(max-content, clamp(220px, 16vw, 280px)) 1fr auto; gap: 0; min-height: 280px; padding-block: 1.5rem; } /* Columna izquierda: lista de categorías */ .tp-mega__cats { border-right: 1px solid var(--color-border); padding-right: 1rem; } .tp-mega__cat-list { display: flex; flex-direction: column; gap: .125rem; } .tp-mega__cat-item { list-style: none; } .tp-mega__cat-link { display: flex; align-items: center; gap: .5rem; padding: .5rem clamp(.5rem, .75vw, .875rem); border-radius: var(--radius-sm); font-size: clamp(.8rem, .85vw, .9375rem); font-weight: 500; color: var(--color-text); transition: background var(--transition), color var(--transition); white-space: nowrap; } .tp-mega__cat-link:hover, .tp-mega__cat-item--active .tp-mega__cat-link { background: var(--color-surface); color: var(--color-accent); } .tp-mega__chevron { margin-left: auto; flex-shrink: 0; opacity: .4; transition: opacity var(--transition); } .tp-mega__cat-item--active .tp-mega__chevron { opacity: 1; } .tp-mega__cat-icon { flex-shrink: 0; } /* Columna central: subcategorías */ .tp-mega__subs { padding-inline: 1.5rem; position: relative; } .tp-mega__sub-panel { display: none; flex-direction: column; gap: .25rem; } .tp-mega__sub-panel.is-active { display: flex; } .tp-mega__sub-title { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .5rem; } .tp-mega__sub-list { display: flex; flex-direction: column; gap: .125rem; } .tp-mega__sub-link { display: block; padding: .375rem .625rem; border-radius: var(--radius-sm); font-size: clamp(.8rem, .85vw, .9375rem); color: var(--color-text); transition: background var(--transition), color var(--transition); } .tp-mega__sub-link:hover { background: var(--color-surface); color: var(--color-accent); } .tp-mega__sub-link--all { font-weight: 600; color: var(--color-accent); margin-bottom: .25rem; } .tp-mega__sub-link--all:hover { background: var(--color-surface); } /* Columna derecha: novedades / carrusel */ .tp-mega__products { border-left: 1px solid var(--color-border); padding-left: 1.5rem; width: clamp(240px, 20vw, 340px); display: flex; flex-direction: column; gap: .75rem; } .tp-mega__products-title { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .tp-mega__carousel { position: relative; } .tp-mega__carousel-track { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .tp-mega__product-card { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: var(--color-text); border-radius: var(--radius-md); padding: .5rem; transition: background var(--transition); } .tp-mega__product-card:hover { background: var(--color-surface); color: var(--color-text); } .tp-mega__product-card img { border-radius: var(--radius-sm); width: 100%; aspect-ratio: 1; object-fit: contain; } .tp-mega__product-name { font-size: .78rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-mega__product-price { font-size: .78rem; color: var(--color-text-muted); } .tp-mega__carousel-btn { display: none; /* Se muestra solo cuando hay > 2 productos via JS */ position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; align-items: center; justify-content: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: background var(--transition); } .tp-mega__carousel-btn:hover { background: var(--color-surface); } .tp-mega__carousel-btn--prev { left: -14px; } .tp-mega__carousel-btn--next { right: -14px; } /* Header actions */ .site-header__actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; } .tp-btn-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); transition: background var(--transition), color var(--transition); color: var(--color-text); } .tp-btn-icon:hover { background: var(--color-surface); color: var(--color-accent); } /* Cart badge */ .tp-cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-accent); color: #fff; font-size: .65rem; font-weight: 700; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity var(--transition), transform var(--transition); } .tp-cart-badge--visible { opacity: 1; transform: scale(1); } /* Mobile toggle - visible solo en mobile */ .tp-mobile-toggle { display: none; } @media (max-width: 1023px) { .tp-mobile-toggle { display: flex; } } /* Timer de logística: ocultar en el header en mobile, mostrar en el drawer */ @media (max-width: 1023px) { .site-header__actions .header-shipping-timer { display: none; } } .tp-mobile-nav__logistica { padding: .75rem 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } /* Search bar */ .tp-search-bar { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: .75rem 0; } .tp-search-bar[hidden] { display: none; } .tp-search-bar[aria-hidden="false"] { display: block; } /* Search bar — en mobile se despliega en el flujo normal, debajo del header */ @media (max-width: 1023px) { .tp-search-bar[hidden] { display: none !important; } .tp-search-bar:not([hidden]) { display: grid; grid-template-rows: 0fr; padding-top: 0; padding-bottom: 0; border-top: 0; overflow: hidden; transition: grid-template-rows var(--transition), padding var(--transition); } .tp-search-bar:not([hidden]) .container { min-height: 0; overflow: hidden; } .tp-search-bar.is-open { grid-template-rows: 1fr; padding-top: .75rem; padding-bottom: .75rem; border-top: 1px solid var(--color-border); } } .tp-search-form { display: flex; align-items: center; gap: .5rem; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: .375rem .375rem .375rem 1rem; transition: border-color var(--transition); position: relative; } .tp-search-form:focus-within { border-color: var(--color-accent); } .tp-search-form__input { flex: 1; border: none; background: none; outline: none; font-size: .9375rem; } .tp-search-form__btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-accent); color: #fff; border-radius: var(--radius-full); flex-shrink: 0; transition: background var(--transition); } .tp-search-form__btn:hover { background: var(--color-accent-hover); } /* ── Header 2: contenedor nav + search inline ──────────────────────────────── */ .site-header__nav-full-inner { display: flex; align-items: center; gap: 1.25rem; } /* Búsqueda inline en header-2 (desktop) */ .tp-header-search-inline { display: flex; align-items: center; gap: 0; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: .25rem .25rem .25rem .875rem; flex-shrink: 0; width: 220px; transition: border-color var(--transition), box-shadow var(--transition); position: relative; } .tp-header-search-inline:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent); } .tp-header-search-inline__input { flex: 1; border: none; background: none; outline: none; font-size: .875rem; min-width: 0; color: var(--color-text); } .tp-header-search-inline__input::placeholder { color: var(--color-text-muted); } .tp-header-search-inline__btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--color-accent); color: #fff; border-radius: var(--radius-full); flex-shrink: 0; transition: background var(--transition); } .tp-header-search-inline__btn:hover { background: var(--color-accent-hover); } /* Dropdown AJAX de búsqueda */ .tp-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; width: max(100%, 320px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown, 200); overflow: hidden; } .tp-search-dropdown__empty { padding: .875rem 1rem; font-size: .875rem; color: var(--color-text-muted); text-align: center; } .tp-search-dropdown__item { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; text-decoration: none; color: var(--color-text); transition: background var(--transition); } .tp-search-dropdown__item:hover, .tp-search-dropdown__item--active { background: var(--color-surface); } .tp-search-dropdown__thumb { width: 50px; height: 50px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--color-border); flex-shrink: 0; background: var(--color-surface); } .tp-search-dropdown__info { display: flex; flex-direction: column; gap: .125rem; min-width: 0; } .tp-search-dropdown__title { font-size: .875rem; font-weight: 500; white-space: normal; line-height: 1.4; } .tp-search-dropdown__price { font-size: .8125rem; color: var(--color-accent); font-weight: 600; } /* Ocultar en mobile — ya existe el toggle de ícono en la fila 1 */ @media (max-width: 1023px) { .tp-header-search-inline { display: none; } } /* ── Mobile nav ─────────────────────────────────────────────────────────────── */ .tp-mobile-nav { position: fixed; inset: 0 auto 0 0; width: min(340px, 88vw); background: var(--color-bg); z-index: var(--z-offcanvas); display: flex; overflow: hidden; transform: translateX(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-xl); } .tp-mobile-nav[aria-hidden="false"] { transform: none; } .tp-mobile-nav[hidden] { display: flex; } /* Paneles principal y secundario */ .tp-mobile-nav__panel { flex: 0 0 100%; display: flex; flex-direction: column; width: 100%; } .tp-mobile-nav__panel--sub { position: absolute; inset: 0; transform: translateX(100%); background: var(--color-bg); z-index: 1; transition: transform .3s cubic-bezier(.4,0,.2,1); } .tp-mobile-nav__panel--sub.is-open { transform: translateX(0); } /* Header del drawer */ .tp-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-mobile-nav__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); color: var(--color-text-muted); background: var(--color-surface); flex-shrink: 0; margin-left: auto; cursor: pointer; transition: background var(--transition), color var(--transition); } .tp-mobile-nav__close:hover { background: var(--color-border); color: var(--color-text); } /* Link de cuenta arriba del menú */ .tp-mobile-nav__account { padding: .625rem 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-mobile-nav__account-link { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--color-text-muted); transition: color var(--transition); } .tp-mobile-nav__account-link:hover { color: var(--color-accent); } /* Búsqueda dentro del drawer */ .tp-mobile-nav__search-wrap { padding: .75rem 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-mobile-nav__search { display: flex; align-items: center; gap: .375rem; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: .375rem .375rem .375rem .875rem; transition: border-color var(--transition); } .tp-mobile-nav__search:focus-within { border-color: var(--color-accent); } .tp-mobile-nav__search-input { flex: 1; border: none; background: none; outline: none; font-size: .9rem; color: var(--color-text); } .tp-mobile-nav__search-input::placeholder { color: var(--color-text-muted); } .tp-mobile-nav__search-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; background: var(--color-accent); color: #fff; border-radius: var(--radius-full); transition: background var(--transition); } .tp-mobile-nav__search-btn:hover { background: var(--color-accent-hover); } /* Tabs: Categorías / Menú */ .tp-mobile-nav__tabs { display: flex; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-mobile-nav__tab { flex: 1; padding: .75rem; font-size: .875rem; font-weight: 600; color: var(--color-text-muted); text-align: center; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .tp-mobile-nav__tab--active, .tp-mobile-nav__tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); } /* Cuerpo scrolleable */ .tp-mobile-nav__body { flex: 1; overflow-y: auto; min-height: 0; } /* Tab panels */ .tp-mobile-nav__tab-panel { display: block; } .tp-mobile-nav__tab-panel[hidden] { display: none; } /* Lista del menú */ .tp-mobile-menu { list-style: none; margin: 0; padding: .5rem 0; } .tp-mobile-menu__item { border-bottom: 1px solid var(--color-border); } .tp-mobile-menu__link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 1.25rem; font-size: .9375rem; font-weight: 500; color: var(--color-text); text-align: left; transition: background var(--transition); } .tp-mobile-menu__link:hover, .tp-mobile-menu__link:focus-visible { background: var(--color-surface); } .tp-mobile-menu__link--child { padding: .875rem 1.25rem; font-size: .9rem; font-weight: 400; } .tp-mobile-menu__arrow { color: var(--color-text-muted); flex-shrink: 0; } .tp-mobile-submenu { display: none; } /* oculto, lo usa el JS */ /* Panel secundario */ .tp-mobile-nav__sub-header { display: flex; align-items: center; gap: .5rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-mobile-nav__back { display: flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 500; color: var(--color-text-muted); transition: color var(--transition); flex-shrink: 0; } .tp-mobile-nav__back:hover { color: var(--color-accent); } .tp-mobile-nav__sub-title { flex: 1; font-size: .9375rem; font-weight: 600; text-align: center; padding-right: 3.5rem; /* compensar botón back */ } .tp-mobile-nav__sub-body { flex: 1; overflow-y: auto; } .tp-mobile-nav__sub-body ul { list-style: none; margin: 0; padding: .5rem 0; } .tp-mobile-nav__sub-body li { border-bottom: 1px solid var(--color-border); } .tp-mobile-nav__sub-body a { display: block; padding: 1rem 1.25rem; font-size: .9375rem; font-weight: 400; color: var(--color-text); transition: background var(--transition); } .tp-mobile-nav__sub-body a:hover { background: var(--color-surface); } /* Pie: CTA + redes */ .tp-mobile-nav__footer { padding: 1.25rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; } .tp-mobile-nav__buttons { display: flex; flex-direction: column; gap: .5rem; } .tp-mobile-nav__cta { text-align: center; } .tp-mobile-nav__socials { display: flex; align-items: center; justify-content: center; gap: 1.25rem; } .tp-mobile-nav__social-link { color: var(--color-text-muted); transition: color var(--transition); } .tp-mobile-nav__social-link:hover { color: var(--color-accent); } /* Overlay */ .tp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition-slow); } .tp-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ══════════════════════════════════════════════════════════════════════════════ HERO SLIDER ═══════════════════════════════════════════════════════════════════════════════ */ .tp-hero { position: relative; overflow: hidden; background: var(--color-surface); user-select: none; } .tp-hero__slider { display: flex; align-items: flex-start; width: 100%; min-width: 0; transition: transform .5s cubic-bezier(.77,0,.175,1); will-change: transform; } .tp-hero__slide { flex: 0 0 100%; position: relative; overflow: hidden; } .tp-hero__link { display: block; } .tp-hero__img { width: 100%; height: auto; display: block; } /* El alto lo define la imagen — height: auto en todos los breakpoints */ .tp-hero__img--mobile { display: none; } @media (max-width: 640px) { /* Solo ocultar desktop si el slide tiene imagen mobile separada */ .tp-hero__slide:has(.tp-hero__img--mobile) .tp-hero__img--desktop { display: none; } .tp-hero__img--mobile { display: block; } } /* Botones prev/next */ .tp-hero__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255,255,255,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: background var(--transition), transform var(--transition); z-index: 10; color: var(--color-primary); } .tp-hero__btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .tp-hero__btn--prev { left: 1rem; } .tp-hero__btn--next { right: 1rem; } @media (max-width: 640px) { .tp-hero__btn { width: 36px; height: 36px; } .tp-hero__btn--prev { left: .5rem; } .tp-hero__btn--next { right: .5rem; } } /* Dots */ .tp-hero__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 10; } .tp-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background var(--transition), width var(--transition); } .tp-hero__dot--active { background: #fff; width: 24px; border-radius: var(--radius-full); } /* Dot con ícono de video */ .tp-hero__dot--video { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .tp-hero__dot--video svg { display: block; } /* Slide de video YouTube — aspect-ratio fijo porque el iframe no da altura */ .tp-hero__slide--video { background: #000; width: 100%; aspect-ratio: 16 / 9; } /* Slide con video local — la altura la define el video igual que una imagen */ .tp-hero__slide--video:has(.tp-hero__video--local) { aspect-ratio: unset; } /* Wrap de video YouTube: absoluto para cubrir el slide */ .tp-hero__video-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; touch-action: none; } /* Wrap de video local: fluye en el documento para dar altura al slide */ .tp-hero__video-wrap:has(.tp-hero__video--local) { position: relative; inset: unset; overflow: hidden; } /* iframe YouTube: cover con cálculo overscan */ .tp-hero__video { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: none; pointer-events: none; } /* Video local: fluye como imagen, width 100% altura auto */ .tp-hero__video--local { position: static; width: 100%; height: auto; max-height: 100svh; display: block; object-fit: cover; transform: none; } /* Video desktop/mobile condicionales */ .tp-hero__video-wrap--mobile { display: none; } @media (max-width: 640px) { .tp-hero__video-wrap--desktop { display: none; } .tp-hero__video-wrap--mobile { display: block; } /* Short vertical YouTube: el slide cambia a 9:16 */ .tp-hero__slide--video:has(.tp-hero__video-wrap--short) { aspect-ratio: 9 / 16; } } /* ══════════════════════════════════════════════════════════════════════════════ SECCIONES HOMEPAGE ═══════════════════════════════════════════════════════════════════════════════ */ .tp-section { padding-block: 3rem; overflow: hidden; } .tp-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; } .tp-section__header--centered { justify-content: center; } .tp-section__heading-group { display: flex; flex-direction: column; min-width: 0; } .tp-section__header--centered .tp-section__heading-group { align-items: center; text-align: center; } .tp-section__title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--color-primary); } .tp-section__seo-text { max-width: 60ch; margin: .5rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--color-text-muted, #6b7280); } /* ── Features strip ─────────────────────────────────────────────────────────── */ .tp-features { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: 1.5rem; } .tp-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 2rem; } .tp-feature-item { display: flex; align-items: center; gap: .875rem; } .tp-feature-item__icon { flex-shrink: 0; width: var(--tp-feature-icon-size, 40px); height: var(--tp-feature-icon-size, 40px); color: var(--color-accent); } .tp-feature-item__icon svg { width: 100%; height: 100%; } .tp-feature-item__icon img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 782px) { .tp-feature-item__icon { width: var(--tp-feature-icon-size-mobile, 40px); height: var(--tp-feature-icon-size-mobile, 40px); } } .tp-feature-item__icon-char { font-size: 1.75rem; line-height: 1; display: block; } .tp-feature-item__title { display: block; font-weight: 600; font-size: .9rem; color: var(--color-primary); } .tp-feature-item__title-link { color: inherit; text-decoration: none; } .tp-feature-item__title-link:hover { color: var(--color-accent); text-decoration: underline; } .tp-feature-item__desc { font-size: .8rem; color: var(--color-text-muted); margin-top: .125rem; } /* ── Features: estilo tarjetas ──────────────────────────────────────────────── */ .tp-features--cards { background: transparent; border-top: none; border-bottom: none; padding-block: 2.5rem; } .tp-features--cards .tp-features__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } .tp-features--cards .tp-feature-item { flex-direction: column; align-items: center; text-align: center; gap: .75rem; background: #fff; border-radius: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.07); padding: 2rem 1.5rem; } .tp-features--cards .tp-feature-item__icon { width: var(--tp-feature-icon-size, 52px); height: var(--tp-feature-icon-size, 52px); color: var(--color-accent); } .tp-features--cards .tp-feature-item__icon-char { font-size: 2.25rem; } .tp-features--cards .tp-feature-item__title { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; } .tp-features--cards .tp-feature-item__desc { font-size: .85rem; color: var(--color-text-muted); margin-top: .25rem; line-height: 1.4; } .tp-feature-item__btn { display: inline-block; margin-top: .875rem; padding: .45rem 1.1rem; border: 2px solid var(--color-accent); border-radius: 2rem; font-size: .8rem; font-weight: 600; color: var(--color-accent); text-decoration: none; transition: background .18s, color .18s; } .tp-feature-item__btn:hover { background: var(--color-accent); color: #fff; } /* ── Categorías slider ──────────────────────────────────────────────────────── */ .tp-section--categories { padding-bottom: 2rem; } .tp-categories-slider { display: flex; gap: 1rem; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: .5rem; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; } .tp-categories-slider::-webkit-scrollbar { display: none; } .tp-category-slide { flex: 0 0 calc(25% - .75rem); scroll-snap-align: start; } @media (max-width: 1024px) { .tp-category-slide { flex: 0 0 calc(33.33% - .67rem); } } @media (max-width: 768px) { .tp-category-slide { flex: 0 0 calc(50% - .5rem); } } @media (max-width: 480px) { .tp-category-slide { flex: 0 0 calc(60% - .4rem); } } .tp-category-card { display: block; border-radius: var(--radius-lg); overflow: hidden; position: relative; text-decoration: none; background: var(--color-surface); } .tp-category-card__img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; } .tp-category-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .tp-category-card:hover .tp-category-card__img { transform: scale(1.05); } .tp-category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%); } .tp-category-card__placeholder { width: 100%; height: 100%; background: var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } .tp-category-card__placeholder svg { width: 40px; height: 40px; } .tp-category-card__name { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem .875rem .875rem; color: #fff; font-weight: 600; font-size: .9375rem; text-align: center; } /* ══════════════════════════════════════════════════════════════════════════════ CARRUSEL DE PRODUCTOS ═══════════════════════════════════════════════════════════════════════════════ */ .tp-product-carousel { display: flex; gap: 1rem; overflow-x: scroll; overflow-y: hidden; width: 100%; min-width: 0; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: .75rem; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-padding-left: var(--container-pad); } /* En secciones con carrusel de productos: el container contiene el overflow */ .tp-section--carousel > .container { overflow: hidden; padding-inline: 0; } .tp-section--carousel > .container > .tp-section__header { padding-inline: var(--container-pad); } .tp-section > .container > .tp-product-carousel { padding-inline: var(--container-pad); width: 100%; box-sizing: border-box; } .tp-product-carousel::-webkit-scrollbar { display: none; } /* ── Layout editorial (foto izq + productos der) ───────────────────────────── */ .tp-editorial-carousel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0; align-items: stretch; min-height: clamp(360px, 55vw, 680px); } @media (max-width: 768px) { .tp-editorial-carousel { grid-template-columns: 1fr; min-height: auto; } } /* Foto */ .tp-editorial-carousel__media { position: relative; overflow: hidden; background: var(--color-surface, #f0f0f0); } .tp-editorial-carousel__img-link { display: block; width: 100%; height: 100%; } .tp-editorial-carousel__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .6s ease; } .tp-editorial-carousel__media:hover .tp-editorial-carousel__img { transform: scale(1.03); } @media (max-width: 768px) { .tp-editorial-carousel__media { aspect-ratio: 4 / 3; height: auto; } .tp-editorial-carousel__img { height: 100%; } } /* Zona de productos */ .tp-editorial-carousel__products { display: flex; flex-direction: column; overflow: hidden; padding-left: 1.5rem; } @media (max-width: 768px) { .tp-editorial-carousel__products { padding-left: 0; padding-top: 1.25rem; } } /* Header dentro del editorial */ .tp-editorial-carousel__header { margin-bottom: 1rem; flex-shrink: 0; } /* Track: scroll horizontal de productos, 2 visibles a la vez */ .tp-editorial-carousel__track { flex: 1; min-height: 0; } .tp-editorial-carousel__track .tp-product-card, .tp-editorial-carousel__track .tp-card7, .tp-editorial-carousel__track .tp-card8 { flex: 0 0 calc(50% - .5rem) !important; } @media (max-width: 500px) { .tp-editorial-carousel__track .tp-product-card, .tp-editorial-carousel__track .tp-card7, .tp-editorial-carousel__track .tp-card8 { flex: 0 0 calc(75% - .5rem) !important; } } /* ── Botones nav del carrusel ─────────────────────────────────────────────── */ .tp-carousel-nav { display: flex; gap: .5rem; align-items: center; } .tp-carousel-nav__btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text); background: var(--color-bg); transition: border-color var(--transition), background var(--transition), color var(--transition); } .tp-carousel-nav__btn:hover { border-color: var(--color-accent); background: var(--color-accent); color: #fff; } .tp-carousel-nav__btn:disabled { opacity: .35; pointer-events: none; } /* ── CTA "Ver todos" al pie del carrusel ──────────────────────────────── */ .tp-section__footer-cta { display: flex; justify-content: center; margin-top: 1.75rem; } /* ── Product card ─────────────────────────────────────────────────────────── */ .tp-product-card { flex: 0 0 calc(25% - .75rem); scroll-snap-align: start; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; } .tp-product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } @media (max-width: 1024px) { .tp-product-card { flex: 0 0 calc(33.33% - .67rem); } } @media (max-width: 768px) { .tp-product-card { flex: 0 0 calc(50% - .5rem); } } @media (max-width: 480px) { .tp-product-card { flex: 0 0 calc(72% - .3rem); } } .tp-product-card__img-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface); } .tp-product-card__img-link { display: block; width: 100%; height: 100%; } /* WooCommerce a veces inyecta height inline — lo sobreescribimos */ .tp-product-card__img-wrap img, .tp-product-card__img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; object-position: center; transition: transform .4s ease; } .tp-product-card:hover .tp-product-card__img { transform: scale(1.04); } .tp-products-grid .tp-product-card__img, .tp-product-carousel .tp-product-card__img { object-fit: contain !important; } /* Badges */ .tp-product-card__badges { position: absolute; top: .625rem; left: .625rem; display: flex; flex-direction: column; gap: .35rem; } .tp-badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: var(--radius-full); font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1; } .tp-badge--sale { background: var(--color-sale-badge, var(--color-danger)); color: #fff; } .tp-badge--stock { background: var(--color-text-muted); color: #fff; } .tp-badge--new { background: var(--color-new-badge, var(--color-success)); color: #fff; } /* Quick add button */ .tp-product-card__quick-add { position: absolute; right: .625rem; bottom: .625rem; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; transform: scale(.7) translateY(4px); transition: opacity var(--transition), transform var(--transition); } .tp-product-card:hover .tp-product-card__quick-add { opacity: 1; transform: scale(1) translateY(0); } .tp-product-card__quick-add:hover { background: var(--color-accent-hover); } /* Card body */ .tp-product-card__body { padding: .875rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; } .tp-product-card__rating { display: flex; align-items: center; } .tp-product-card__name { font-size: .9375rem; font-weight: 600; color: var(--color-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-product-card__name a { color: inherit; } .tp-product-card__name a:hover { color: var(--color-accent); } .tp-product-card__price { font-size: 1.0625rem; font-weight: 700; color: var(--color-primary); } .tp-product-card__price del { color: var(--color-text-muted); font-size: .85em; font-weight: 400; } .tp-product-card__price ins { text-decoration: none; color: var(--color-sale-price, var(--color-danger)); } .tp-product-card__promo { font-size: .78rem; color: var(--color-text-muted); } .tp-product-card__promo--transfer { color: var(--color-success); font-weight: 500; } .tp-product-card__promo--cuotas { color: var(--color-accent); font-weight: 500; } .tp-product-card__cta { margin-top: auto; width: 100%; } .tp-pack-notice { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--color-accent, #6c47ff); background: color-mix(in srgb, var(--color-accent, #6c47ff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent, #6c47ff) 25%, transparent); border-radius: 20px; padding: .2rem .65rem; margin: .4rem 0 .6rem; line-height: 1.4; } .tp-pack-notice--card { font-size: .72rem; padding: .15rem .5rem; } /* ── Categoría en tarjeta ───────────────────────────────────────────────────── */ .tp-product-card__category { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: .25rem; } /* ── Badge de promo del plugin ──────────────────────────────────────────────── */ .tp-badge--promo { background: #111; color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .5rem; border-radius: 2px; text-transform: uppercase; } .tp-badge--combo { background: #ff4757; color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 2px; text-transform: uppercase; } .tp-badge--free-ship { background: #00a550; color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 2px; text-transform: uppercase; } /* ── Color swatches ─────────────────────────────────────────────────────────── */ .tp-swatches { display: flex; gap: .3rem; align-items: center; margin: .4rem 0; flex-wrap: wrap; } .tp-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; outline: 1.5px solid rgba(0,0,0,.12); cursor: pointer; transition: outline-color .2s, transform .2s; display: inline-block; } .tp-swatch:hover { outline-color: var(--color-primary); transform: scale(1.15); } .tp-swatch--active { outline-color: var(--color-primary); border-color: #fff; transform: scale(1.1); } .tp-swatch-chip--no-color { opacity: .6; font-style: italic; } .tp-swatch--more { background: var(--color-bg-alt); color: var(--color-text-muted); font-size: .65rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-border); } /* ── Barra de stock ─────────────────────────────────────────────────────────── */ .tp-stock-bar { background: var(--color-border); border-radius: 2px; height: 4px; overflow: hidden; margin: .5rem 0 .2rem; } .tp-stock-bar__fill { height: 100%; background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%); border-radius: 2px; transition: width .4s ease; } .tp-stock-bar__label { display: block; font-size: .68rem; color: var(--color-text-muted); margin-bottom: .35rem; } /* ── Quick view button ──────────────────────────────────────────────────────── */ .tp-product-card__quick-view { display: block; width: 100%; margin-top: .4rem; padding: .45rem; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .78rem; color: var(--color-text-muted); cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, border-color .2s, color .2s; } .tp-product-card:hover .tp-product-card__quick-view { opacity: 1; transform: translateY(0); } .tp-product-card__quick-view:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg-alt); } /* "Desde:" label en productos variables */ .tp-price-from { font-size: .75em; font-weight: 500; color: var(--color-text-muted); letter-spacing: .01em; } /* ── Stars ─────────────────────────────────────────────────────────────────── */ .tp-stars { display: inline-flex; align-items: center; gap: .15rem; } .tp-stars__star--full { color: #f59e0b; } .tp-stars__star--half { color: #f59e0b; opacity: .6; } .tp-stars__star--empty { color: var(--color-border); } .tp-stars__count { font-size: .75rem; color: var(--color-text-muted); margin-left: .3rem; } /* ══════════════════════════════════════════════════════════════════════════════ CARRITO OFFCANVAS ═══════════════════════════════════════════════════════════════════════════════ */ .tp-offcanvas-cart { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); background: var(--color-bg); z-index: var(--z-offcanvas); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--transition-slow); } .tp-offcanvas-cart[aria-hidden="false"] { transform: none; } .tp-offcanvas-cart[hidden] { display: flex; } .tp-offcanvas-cart__header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-offcanvas-cart__title { font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; } .tp-offcanvas-cart__count { font-weight: 400; color: var(--color-text-muted); font-size: 1rem; } .tp-offcanvas-cart__close { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: background var(--transition), color var(--transition); } .tp-offcanvas-cart__close:hover { background: var(--color-surface); color: var(--color-text); } /* ── Shipping bar ─────────────────────────────────────────────────────────── */ .tp-shipping-bar { padding: .75rem 1.25rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .tp-shipping-bar__msg { font-size: .8125rem; font-weight: 500; color: var(--color-text); margin-bottom: .5rem; display: flex; align-items: center; gap: .375rem; } .tp-shipping-bar__icon { font-size: 1rem; } .tp-shipping-bar__track { height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .tp-shipping-bar__fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); transition: width .5s cubic-bezier(.4,0,.2,1); min-width: 4px; } .tp-shipping-bar--achieved .tp-shipping-bar__msg { color: var(--color-success); } .tp-shipping-bar--achieved .tp-shipping-bar__fill { background: var(--color-success); } .tp-shipping-bar--always-free { border-bottom: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface)); } .tp-shipping-bar--always-free .tp-shipping-bar__msg { color: var(--color-success); margin-bottom: 0; } /* Fila de envío gratis en totales del carrito */ .tp-cart-totals__row--shipping-free { color: var(--color-success); font-weight: 600; } .tp-cart-free-shipping-label { color: var(--color-success); font-weight: 700; } /* ── Cart body ──────────────────────────────────────────────────────────────── */ .tp-offcanvas-cart__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; } .tp-cart-items { display: flex; flex-direction: column; gap: 1rem; } /* Cart item */ .tp-cart-item { display: flex; gap: .875rem; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .tp-cart-item:last-child { border-bottom: none; padding-bottom: 0; } .tp-cart-item__img-wrap { flex-shrink: 0; } .tp-cart-item__img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .tp-cart-item__info { flex: 1; min-width: 0; } .tp-cart-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .tp-cart-item__name { font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--color-primary); } .tp-cart-item__name a { color: inherit; } .tp-cart-item__name a:hover { color: var(--color-accent); } .tp-cart-item__variation { font-size: .78rem; color: var(--color-text-muted); margin-top: .125rem; } .tp-cart-item__remove { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: background var(--transition), color var(--transition); } .tp-cart-item__remove:hover { background: #fee2e2; color: var(--color-danger); } .tp-cart-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .tp-cart-item__subtotal { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-size: .9375rem; } .tp-cart-item__unit-price { font-size: .75rem; font-weight: 400; color: var(--color-text-muted); line-height: 1.2; } .tp-cart-item__regular-price { font-size: .75rem; font-weight: 400; color: var(--color-text-muted); text-decoration: line-through; line-height: 1.2; } .tp-cart-item__sale-price { color: var(--color-primary); } /* Quantity control */ .tp-qty-control { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .tp-qty-control__btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; color: var(--color-text-muted); transition: background var(--transition), color var(--transition); } .tp-qty-control__btn:hover { background: var(--color-surface); color: var(--color-text); } .tp-qty-control__val { min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .875rem; font-weight: 600; line-height: 1; } /* Cart empty */ .tp-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1rem; text-align: center; color: var(--color-text-muted); } .tp-cart-empty svg { stroke: var(--color-border); } .tp-cart-empty__msg { font-size: .9375rem; } /* ── Cart footer ─────────────────────────────────────────────────────────── */ .tp-offcanvas-cart__footer { border-top: 1px solid var(--color-border); padding: 1rem 1.25rem; flex-shrink: 0; display: flex; flex-direction: column; gap: .875rem; } .tp-cart-upsells__title { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .625rem; } .tp-cart-upsells__list { display: flex; flex-direction: column; gap: .625rem; } .tp-cart-upsell-item { display: flex; align-items: center; gap: .75rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition); } .tp-cart-upsell-item:hover { border-color: var(--color-accent); } .tp-cart-upsell-item img { border-radius: var(--radius-sm); object-fit: cover; } .tp-cart-upsell-item__info { flex: 1; min-width: 0; } .tp-cart-upsell-item__name { display: block; font-size: .8125rem; font-weight: 500; } .tp-cart-upsell-item__price { font-size: .8125rem; color: var(--color-text-muted); } .tp-cart-totals__row { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 600; } .tp-cart-actions { display: flex; flex-direction: column; gap: .5rem; } /* ── Carrito diseño 2 ───────────────────────────────────────────────────────── */ /* Header: número como superíndice */ .tp-offcanvas-cart--v2 .tp-offcanvas-cart__count { font-size: .75rem; font-weight: 700; vertical-align: super; line-height: 1; } /* Items v2: precio arriba a la derecha, qty + remove abajo */ .tp-cart-item--v2 { align-items: flex-start; gap: .875rem; } .tp-cart-item--v2 .tp-cart-item__img-wrap { width: 80px; height: 80px; min-width: 80px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .tp-cart-item--v2 .tp-cart-item__img { width: 100%; height: 100%; object-fit: cover; } .tp-cart-item--v2 .tp-cart-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; } .tp-cart-item--v2 .tp-cart-item__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; } .tp-cart-item--v2 .tp-cart-item__meta { flex: 1; min-width: 0; } .tp-cart-item--v2 .tp-cart-item__name { font-size: .9rem; font-weight: 600; margin: 0; } .tp-cart-item--v2 .tp-cart-item__name a { color: inherit; text-decoration: none; } .tp-cart-item--v2 .tp-cart-item__variation { font-size: .8rem; color: var(--color-text-muted); margin: .15rem 0 0; } .tp-cart-item--v2 .tp-cart-item__subtotal { display: flex; flex-direction: column; align-items: flex-end; font-size: .9rem; font-weight: 700; } .tp-cart-item--v2 .tp-cart-item__bottom { display: flex; align-items: center; gap: .75rem; } /* Qty pill */ .tp-qty-control--pill { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; height: 32px; } .tp-qty-control--pill .tp-qty-control__btn { background: none; border: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--color-primary); transition: background .15s; } .tp-qty-control--pill .tp-qty-control__btn:hover { background: var(--color-surface); } .tp-qty-control--pill .tp-qty-control__val { min-width: 24px; text-align: center; font-size: .875rem; font-weight: 600; } /* Remove como link de texto */ .tp-cart-item__remove--link { background: none; border: none; padding: 0; cursor: pointer; font-size: .8rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; transition: color .15s; } .tp-cart-item__remove--link:hover { color: var(--color-danger); } /* Upsells v2 */ .tp-cart-upsells--v2 { border-top: 1px solid var(--color-border); padding: 1rem 1.25rem; } .tp-cart-upsells__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; } .tp-cart-upsells--v2 .tp-cart-upsells__title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0; } .tp-cart-upsells__nav { display: flex; gap: .25rem; } .tp-cart-upsells__nav-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--color-border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; } .tp-cart-upsells__nav-btn:hover { border-color: var(--color-primary); background: var(--color-surface); } .tp-cart-upsells__track { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .tp-cart-upsells__track::-webkit-scrollbar { display: none; } .tp-cart-upsell-item--v2 { display: flex; flex-direction: column; gap: .4rem; min-width: 130px; max-width: 130px; scroll-snap-align: start; flex-shrink: 0; background: var(--color-surface, #f5f5f5); border-radius: var(--radius); padding: .625rem; } .tp-cart-upsell-item--v2 img { width: 100%; height: 80px; object-fit: cover; border-radius: calc(var(--radius) - 2px); } .tp-cart-upsell-item--v2 .tp-cart-upsell-item__info { display: flex; flex-direction: column; gap: .1rem; } .tp-cart-upsell-item--v2 .tp-cart-upsell-item__name { font-size: .75rem; font-weight: 600; color: var(--color-primary); line-height: 1.2; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-cart-upsell-item--v2 .tp-cart-upsell-item__price { font-size: .75rem; color: var(--color-text-muted); } .tp-cart-upsell-item__atc-btn { align-self: flex-start; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .18s, transform .18s; margin-top: auto; } .tp-cart-upsell-item__atc-btn:hover { background: var(--color-accent); transform: scale(1.08); } /* Footer oscuro v2 */ .tp-offcanvas-cart__footer--dark { background: #111; color: #fff; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; border-top: none; } .tp-cart-totals--v2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .tp-cart-totals--v2 .tp-cart-totals__row { display: flex; flex-direction: column; gap: .15rem; } .tp-cart-totals__label { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.7); } .tp-cart-totals__sublabel { font-size: .7rem; color: rgba(255,255,255,.45); line-height: 1.3; max-width: 180px; } .tp-cart-totals__sublabel--free-shipping { color: #4ade80; font-weight: 600; } .tp-cart-totals__amount { font-size: 1.75rem; font-weight: 800; color: #fff; white-space: nowrap; } .tp-offcanvas-cart__footer--dark .tp-cart-subtotal { color: #fff; } .tp-cart-actions--v2 { display: flex; gap: .625rem; } .tp-btn--pill { border-radius: var(--radius-full) !important; } .tp-btn--ghost-dark { background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; } .tp-btn--ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); } .tp-btn--light { background: #fff; color: #111; border: 2px solid #fff; font-weight: 700; } .tp-btn--light:hover { background: #f0f0f0; border-color: #f0f0f0; } /* ══════════════════════════════════════════════════════════════════════════════ BOTONES ═══════════════════════════════════════════════════════════════════════════════ */ .tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: var(--radius-md); font-size: .9375rem; font-weight: 600; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); cursor: pointer; white-space: nowrap; border: 1.5px solid transparent; text-decoration: none; } .tp-btn:active { transform: scale(.98); } .tp-btn--primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .tp-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,.35); } .tp-btn--outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .tp-btn--outline:hover { background: var(--color-accent); color: #fff; } .tp-btn--ghost { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .tp-btn--ghost:hover { background: var(--color-border); } .tp-btn--full { width: 100%; } .tp-btn--lg { padding: .875rem 1.5rem; font-size: 1rem; } .tp-btn--xs { padding: .25rem .6rem; font-size: .75rem; } .tp-btn--disabled { opacity: .5; pointer-events: none; } /* ══════════════════════════════════════════════════════════════════════════════ SECCIÓN INSTITUCIONAL ═══════════════════════════════════════════════════════════════════════════════ */ .tp-institucional-grid { display: flex; flex-direction: column; gap: 3rem; } .tp-institucional-block { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .tp-institucional-block--reverse { direction: rtl; } .tp-institucional-block--reverse > * { direction: ltr; } @media (max-width: 768px) { .tp-institucional-block { grid-template-columns: 1fr; gap: 1.5rem; } .tp-institucional-block--reverse { direction: ltr; } } .tp-institucional-block__img-wrap { border-radius: var(--radius-xl); overflow: hidden; } .tp-institucional-block__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .tp-institucional-block__title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; margin-bottom: 1rem; } .tp-institucional-block__text { color: var(--color-text-muted); line-height: 1.7; } .tp-institucional-block__text p { margin-bottom: .875rem; } .tp-institucional-block__text p:last-child { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════════════════════════════════════════ */ .tp-toast-container { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: .625rem; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 2rem)); } /* Toast base */ .tp-toast { display: flex; align-items: center; gap: .875rem; background: #1a1a1a; color: #fff; padding: .875rem 1.125rem; border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12); font-size: .875rem; font-weight: 500; pointer-events: auto; animation: tp-toast-in .35s cubic-bezier(.34,1.56,.64,1) forwards; width: 100%; border-left: 4px solid transparent; } .tp-toast--success { border-left-color: #22a85e; } .tp-toast--error { border-left-color: #e53e3e; background: #1a1a1a; } .tp-toast--info { border-left-color: var(--color-accent); } .tp-toast--exit { animation: tp-toast-out .25s ease forwards; } /* Ícono del toast */ .tp-toast__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; } .tp-toast--success .tp-toast__icon { background: rgba(34,168,94,.2); color: #22a85e; } .tp-toast--error .tp-toast__icon { background: rgba(229,62,62,.2); color: #e53e3e; } .tp-toast--info .tp-toast__icon { background: rgba(var(--color-accent-rgb, 59,130,246),.2); color: var(--color-accent); } /* Cuerpo del toast */ .tp-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; } .tp-toast__title { display: block; font-size: .8125rem; font-weight: 700; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .125rem; } .tp-toast__msg { display: block; font-size: .9rem; font-weight: 500; color: #fff; white-space: normal; line-height: 1.4; } /* Toast ATC — con imagen del producto */ .tp-toast--atc { padding: .75rem 1rem; gap: .75rem; } .tp-toast--atc .tp-toast__img { width: 48px; height: 48px; border-radius: var(--radius-sm, 6px); object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.12); } .tp-toast--atc .tp-toast__body { gap: .125rem; display: flex; flex-direction: column; } .tp-toast--atc .tp-toast__name { font-size: .875rem; font-weight: 600; color: #fff; white-space: normal; line-height: 1.4; } .tp-toast--atc .tp-toast__sub { font-size: .775rem; color: rgba(255,255,255,.55); font-weight: 400; } .tp-toast--atc .tp-toast__cta { font-size: .775rem; font-weight: 700; color: #22a85e; white-space: nowrap; text-decoration: none; flex-shrink: 0; padding: .375rem .625rem; border-radius: var(--radius-sm, 6px); background: rgba(34,168,94,.12); transition: background .15s; } .tp-toast--atc .tp-toast__cta:hover { background: rgba(34,168,94,.22); } /* Botón cerrar */ .tp-toast__close { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0; border-radius: 4px; transition: color .15s; margin-left: auto; } .tp-toast__close:hover { color: rgba(255,255,255,.85); } @keyframes tp-toast-in { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } } @keyframes tp-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.96); } } /* ══════════════════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════════════════ */ .site-footer { background: var(--footer-bg, var(--color-primary)); color: var(--footer-text-dim, rgba(255,255,255,.8)); margin-top: auto; } .site-footer__top { display: flex; flex-wrap: wrap; gap: 2rem 3rem; padding-block: 3rem; } .site-footer__brand { flex: 2 1 220px; min-width: 0; } .site-footer__menu { flex: 1 1 130px; min-width: 0; } .site-footer__col { flex: 1 1 130px; min-width: 0; } .site-footer__col--newsletter { flex: 1 1 200px; min-width: 0; } .site-footer__col--legal { flex: 1 1 150px; min-width: 0; } .site-footer__col--fiscal { flex: 0 0 auto; align-self: flex-start; } @media (max-width: 640px) { .site-footer__top { padding-block: 2rem; gap: 1.5rem 2rem; } .site-footer__brand { flex-basis: 100%; } } .footer-logo .site-logo__img { filter: brightness(0) invert(1); max-height: 44px; } .footer-logo.site-logo--text { color: #fff; } .site-footer__tagline { margin-top: .75rem; font-size: .875rem; line-height: 1.6; } .footer-social { display: flex; gap: .625rem; margin-top: 1rem; flex-wrap: wrap; } .footer-social__link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--footer-icon-bg, rgba(255,255,255,.1)); color: var(--footer-text-dim, rgba(255,255,255,.7)); transition: background var(--transition), color var(--transition); } .footer-social__link:hover { background: var(--color-accent); color: #fff; } .footer-social__link svg { width: 16px; height: 16px; } .site-footer__menu-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--footer-text, #fff); margin-bottom: .875rem; } .footer-menu li + li { margin-top: .375rem; } .footer-menu a { font-size: .875rem; transition: color var(--transition); } .footer-menu a:hover { color: var(--footer-text, #fff); } .site-footer__bottom { border-top: 1px solid var(--footer-border, rgba(255,255,255,.1)); padding-block: 1.25rem; } .site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-footer__copyright { font-size: .8125rem; } .site-footer__payment-icons { display: flex; align-items: center; gap: .5rem; } .payment-icon { width: 38px; height: 24px; } .site-footer__fiscal { display: flex; align-items: center; } .site-footer__fiscal-img { display: block; max-height: 6.25rem; /* 100px */ width: auto; object-fit: contain; } /* imagen custom de medios de pago en footer-bottom */ .site-footer__payment-custom-img { max-height: 32px; width: auto; object-fit: contain; } /* columnas legal y fiscal en footer-1 / footer-3 */ .site-footer__col--legal { display: flex; flex-direction: column; } .site-footer__col--fiscal { display: flex; align-items: flex-start; } .site-footer__col--fiscal .site-footer__fiscal-img { max-width: 80px; height: auto; } /* ── Footer 2 — Centrado ─────────────────────────────────────────────────── */ .site-footer--centered { text-align: center; } .site-footer__centered-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-block: 2.5rem; } .footer-logo--centered { justify-content: center; } .footer-menu--horizontal { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; } .footer-social--centered { justify-content: center; } .site-footer__copyright--centered { font-size: .8125rem; } /* ── Footer 3 — 4 columnas iguales ─────────────────────────────────────────── */ .site-footer--four-col .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-block: 3rem; } @media (max-width: 1024px) { .site-footer--four-col .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 640px) { .site-footer--four-col .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem; } } .site-footer__col--brand { display: flex; flex-direction: column; } .site-footer__col--newsletter { display: flex; flex-direction: column; gap: .5rem; } /* ── Footer 4 — Split ────────────────────────────────────────────────────── */ .site-footer--split .site-footer__split-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 4rem; padding-block: 3rem; } @media (max-width: 768px) { .site-footer--split .site-footer__split-grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem; } } .site-footer__split-left { display: flex; flex-direction: column; gap: .75rem; } .site-footer__split-right { display: flex; flex-direction: column; gap: 1.5rem; } .site-footer__contact-phone { font-size: .875rem; } .site-footer__contact-phone a { display: inline-flex; align-items: center; gap: .375rem; color: inherit; transition: color var(--transition); } .site-footer__contact-phone a:hover { color: #fff; } .site-footer__menus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 480px) { .site-footer__menus-grid { grid-template-columns: 1fr; gap: 1rem; } } .site-footer__newsletter { display: flex; flex-direction: column; gap: .5rem; } .site-footer__newsletter-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: .25rem; } .site-footer__newsletter-subtitle { font-size: .875rem; line-height: 1.6; } /* ── Footer 5 — Minimal ─────────────────────────────────────────────────── */ .site-footer--minimal { padding-block: 1.25rem; } .site-footer__minimal-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-social--minimal { margin-top: 0; } /* ── Newsletter form (compartido footers 1, 3, 4) ───────────────────────── */ .tp-newsletter-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; } .tp-newsletter-form__input { width: 100%; padding: .625rem .875rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); background: rgba(255,255,255,.08); color: #fff; font-size: .875rem; outline: none; transition: border-color var(--transition); } .tp-newsletter-form__input::placeholder { color: rgba(255,255,255,.45); } .tp-newsletter-form__input:focus { border-color: rgba(255,255,255,.5); } .tp-newsletter-form__btn { align-self: flex-start; padding: .55rem 1.25rem; background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background var(--transition); } .tp-newsletter-form__btn:hover { background: var(--color-accent-hover); } /* ══════════════════════════════════════════════════════════════════════════════ FOOTER 6 — EME Studios Style ═══════════════════════════════════════════════════════════════════════════════ */ .tp-f6 { background: var(--footer-bg, #ede8e3); color: var(--footer-text, #1a1a1a); --f6-muted: rgba(var(--footer-text-rgb, 26,26,26), .5); --f6-border: rgba(var(--footer-text-rgb, 26,26,26), .12); overflow: hidden; font-family: var(--font-body, inherit); font-size: 1rem; line-height: 1.5; } /* Forzar fuente, color y estilo unificado en todos los hijos */ .tp-f6 *, .tp-f6 a, .tp-f6 p, .tp-f6 span, .tp-f6 li, .tp-f6 button, .tp-f6 input, .tp-f6 label { font-family: var(--font-body, inherit); } /* Resetear colores de links — sobreescribe legal, nav, widgets */ .tp-f6 a { color: var(--f6-muted) !important; text-decoration: none !important; font-weight: 400 !important; font-size: .8rem !important; transition: color .18s ease; } .tp-f6 a:hover { color: var(--footer-text, #1a1a1a) !important; } /* Títulos de columna mantienen su peso y tamaño */ .tp-f6__col-title { color: var(--footer-text, #1a1a1a) !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; } /* El título del newsletter no es link, no se toca */ .tp-f6__nl-title { font-size: clamp(1rem, 2vw, 1.4rem) !important; font-weight: 700 !important; color: var(--footer-text, #1a1a1a) !important; } /* ── Zona principal ── */ .tp-f6__main { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem clamp(1.5rem, 5vw, 5rem) 3rem; max-width: var(--container-width); margin: 0 auto; } @media (max-width: 860px) { .tp-f6__main { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.5rem 2rem; } } /* ── Newsletter ── */ .tp-f6__nl-title { font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 .35rem; color: var(--footer-text, #1a1a1a); } .tp-f6__nl-sub { font-size: .82rem; color: var(--f6-muted); margin: 0 0 1.5rem; } .tp-f6__nl-form { display: flex; flex-direction: column; gap: .75rem; max-width: 360px; } .tp-f6__nl-field { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--footer-text, #1a1a1a); } .tp-f6__nl-input { flex: 1; background: transparent; border: none; outline: none; font-size: .82rem; color: var(--footer-text, #1a1a1a); padding: .5rem 0; letter-spacing: .06em; text-transform: uppercase; } .tp-f6__nl-input::placeholder { color: var(--f6-muted); } .tp-f6__nl-btn { background: none; border: none; cursor: pointer; color: var(--footer-text, #1a1a1a); display: flex; align-items: center; padding: .25rem; flex-shrink: 0; transition: transform .2s ease; } .tp-f6__nl-btn:hover { transform: translateX(3px); } .tp-f6__nl-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .74rem; color: var(--f6-muted); cursor: pointer; line-height: 1.4; } .tp-f6__nl-check input[type="checkbox"] { margin-top: .15em; flex-shrink: 0; } /* ── Columnas de menú ── */ .tp-f6__menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 600px) { .tp-f6__menus { grid-template-columns: 1fr 1fr; } } .tp-f6__col-title { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--footer-text, #1a1a1a); margin: 0 0 .85rem; } .tp-f6__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .tp-f6__nav li a { font-size: .8rem; color: var(--f6-muted); text-decoration: none; letter-spacing: .02em; transition: color .18s ease; } .tp-f6__nav li a:hover { color: var(--footer-text, #1a1a1a); } /* QR Fiscal — mismo tamaño que otras columnas */ .tp-f6__col--fiscal .site-footer__fiscal { background: none; padding: 0; } .tp-f6__col--fiscal .site-footer__fiscal-img { max-width: 80px; } /* ── Copyright ── */ .tp-f6__bottom { border-top: 1px solid var(--f6-border); padding: 1.25rem clamp(1.5rem, 5vw, 5rem); text-align: center; max-width: var(--container-width); margin: 0 auto; } .tp-f6__copyright { font-size: .75rem; color: var(--f6-muted); letter-spacing: .04em; } /* ── Wordmark — logo con 30% opacidad ── */ .tp-f6__wordmark { display: flex; align-items: flex-end; justify-content: center; width: 100%; overflow: hidden; line-height: 1; /* fallback texto si no hay logo */ font-size: clamp(4rem, 18vw, 18rem); font-weight: 800; letter-spacing: -.03em; color: var(--footer-text, #1a1a1a); opacity: .08; user-select: none; pointer-events: none; white-space: nowrap; } .tp-f6__wordmark-img { display: block; width: 100%; max-width: 100%; height: auto; max-height: clamp(6rem, 20vw, 22rem); object-fit: contain; object-position: center bottom; opacity: .30; /* 30% de opacidad */ filter: grayscale(1); } /* ══════════════════════════════════════════════════════════════════════════════ FOOTER 7 — Con características y widget de contacto ═══════════════════════════════════════════════════════════════════════════════ */ .tp-f7 { background: var(--footer-bg, var(--color-primary)); color: var(--footer-text-dim, rgba(255,255,255,.8)); } /* ── Franja de características ── */ .tp-f7__features { border-bottom: 1px solid var(--footer-border, rgba(255,255,255,.1)); padding-block: 1rem; } .tp-f7__features-grid { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; } .tp-f7__feature-item { display: flex; align-items: center; gap: .6rem; flex: 1 1 160px; } .tp-f7__feature-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; color: var(--footer-text, #fff); } .tp-f7__feature-icon svg { width: 22px; height: 22px; } .tp-f7__feature-icon img { width: 24px; height: 24px; object-fit: contain; } .tp-f7__feature-icon-char { font-size: 1.25rem; line-height: 1; } .tp-f7__feature-title { font-size: .8rem; font-weight: 600; color: var(--footer-text, #fff); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; } @media (max-width: 640px) { .tp-f7__features-grid { gap: .75rem 1.25rem; } .tp-f7__feature-item { flex-basis: 45%; } } /* ── Zona principal ── */ .tp-f7__main { display: flex; flex-wrap: wrap; gap: 2rem 3rem; padding-block: 3rem; } /* Columna marca */ .tp-f7__brand { flex: 2 1 220px; min-width: 0; } .tp-f7__brand .footer-logo .site-logo__img { filter: brightness(0) invert(1); max-height: 44px; } .tp-f7__brand .footer-logo.site-logo--text { color: #fff; } .tp-f7__tagline { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--footer-text-dim, rgba(255,255,255,.75)); } /* Redes sociales */ .tp-f7__social { margin-top: 1.25rem; } /* Columnas nav y contacto */ .tp-f7__col { flex: 1 1 130px; min-width: 0; } .tp-f7__col--contact { flex: 1 1 200px; } .tp-f7__col--fiscal { flex: 0 0 auto; align-self: flex-start; } .tp-f7__col-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--footer-text, #fff); margin-bottom: .875rem; } .tp-f7__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .tp-f7__nav li a { font-size: .875rem; color: var(--footer-text-dim, rgba(255,255,255,.75)); text-decoration: none; transition: color var(--transition); } .tp-f7__nav li a:hover { color: var(--footer-text, #fff); } @media (max-width: 640px) { .tp-f7__main { padding-block: 2rem; gap: 1.75rem; } .tp-f7__brand { flex-basis: 100%; } .tp-f7__col, .tp-f7__col--contact { flex-basis: 45%; } } /* ── Widget TP Info de Contacto ── */ .tp-contact-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .tp-contact-info__item { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; line-height: 1.5; } .tp-contact-info__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: .15em; color: var(--footer-text, #fff); } .tp-contact-info__icon svg { width: 18px; height: 18px; } .tp-contact-info__text { color: var(--footer-text-dim, rgba(255,255,255,.75)); text-decoration: none; transition: color var(--transition); } a.tp-contact-info__text:hover { color: var(--footer-text, #fff); } /* Dentro del sidebar footer-contact los títulos heredan el estilo tp-f7 */ .tp-f7__col--contact .footer-widget__title, .tp-f7__col--contact .tp-f7__col-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--footer-text, #fff); margin-bottom: .875rem; } /* ══════════════════════════════════════════════════════════════════════════════ GRIDS (shop / shortcodes) ═══════════════════════════════════════════════════════════════════════════════ */ .tp-products-grid { display: grid; gap: 1.25rem; } .tp-products-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .tp-products-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .tp-products-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .tp-products-grid--cols-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .tp-products-grid--cols-3, .tp-products-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .tp-products-grid--cols-2, .tp-products-grid--cols-3, .tp-products-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } } /* Product card en grid (no flex) */ .tp-products-grid .tp-product-card { flex: none; } /* ── Product Card 7 — imagen full + barra ATC inferior + lupa ──────────────── */ .tp-card7 { /* Mismo sizing que .tp-product-card para encajar en carrusel y grid */ flex: 0 0 calc(25% - .75rem); scroll-snap-align: start; background: #fff; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease; } @media (max-width: 1024px) { .tp-card7 { flex: 0 0 calc(33.33% - .67rem); } } @media (max-width: 768px) { .tp-card7 { flex: 0 0 calc(50% - .5rem); } } @media (max-width: 480px) { .tp-card7 { flex: 0 0 calc(72% - .3rem); } } .tp-products-grid .tp-card7 { flex: none; } .tp-card7:hover { box-shadow: 0 8px 28px rgba(0,0,0,.11); transform: translateY(-3px); } /* Zona de imagen */ .tp-card7__media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-surface, #f5f5f5); } .tp-card7__img-link { display: block; width: 100%; height: 100%; } .tp-card7__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .tp-card7:hover .tp-card7__img { transform: scale(1.05); } /* Badges */ .tp-card7__badges { position: absolute; top: .625rem; left: .625rem; display: flex; flex-direction: column; gap: .3rem; z-index: 2; pointer-events: none; } /* Botón de lupa (quick view) */ .tp-card7__qv-btn { position: absolute; top: .625rem; right: .625rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.14); opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease, background .15s; z-index: 2; } .tp-card7:hover .tp-card7__qv-btn { opacity: 1; transform: scale(1); } .tp-card7__qv-btn:hover { background: var(--color-surface, #f0f0f0); } /* Barra ATC */ .tp-card7__atc-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3.125rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: space-between; padding: 0 .875rem; gap: .5rem; transform: translateY(100%); transition: transform .22s ease; z-index: 3; } .tp-card7:hover .tp-card7__atc-bar { transform: translateY(0); } .tp-card7__atc-label { font-size: .875rem; font-weight: 700; color: var(--color-primary, #111); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; } .tp-card7__atc-label--disabled { color: var(--color-text-muted, #999); font-weight: 500; } .tp-card7__atc-circle { width: 2.25rem; height: 2.25rem; min-width: 2.25rem; border-radius: 50%; background: var(--color-primary, #111); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .18s ease, transform .18s ease; flex-shrink: 0; } .tp-card7__atc-circle:hover { background: var(--color-accent, #555); transform: scale(1.1); } .tp-card7__atc-circle.is-loading { opacity: .6; pointer-events: none; } .tp-card7__atc-circle.is-success { background: var(--color-success, #22c55e); } .tp-card7__atc-circle.is-error { background: var(--color-danger, #ef4444); } /* Info */ .tp-card7__body { padding: .75rem .875rem .875rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; } .tp-card7__rating { display: flex; align-items: center; } .tp-card7__name { font-size: .9375rem; font-weight: 600; line-height: 1.3; margin: 0; } .tp-card7__name a { color: inherit; text-decoration: none; } .tp-card7__name a:hover { color: var(--color-accent, #555); } .tp-card7__price { font-size: 1.0625rem; font-weight: 700; color: var(--color-primary, #111); display: block; } .tp-card7__price del { color: var(--color-text-muted, #999); font-size: .85em; font-weight: 400; } .tp-card7__price ins { text-decoration: none; color: var(--color-sale-price, var(--color-danger, #ef4444)); } .tp-card7__body .tp-swatches { margin-top: .35rem; } /* En touch la barra y lupa siempre visibles */ @media (hover: none) { .tp-card7__atc-bar { transform: translateY(0); } .tp-card7__qv-btn { opacity: 1; transform: scale(1); } } /* ══════════════════════════════════════════════════════════════════════════════ PRODUCT CARD 8 — EME Studios Style ═══════════════════════════════════════════════════════════════════════════════ */ .tp-card8 { flex: 0 0 calc(25% - .75rem); scroll-snap-align: start; background: transparent; border-radius: 0; overflow: visible; display: flex; flex-direction: column; } @media (max-width: 1024px) { .tp-card8 { flex: 0 0 calc(33.33% - .67rem); } } @media (max-width: 768px) { .tp-card8 { flex: 0 0 calc(50% - .5rem); } } @media (max-width: 480px) { .tp-card8 { flex: 0 0 calc(72% - .3rem); } } .tp-products-grid .tp-card8 { flex: none; } .tp-card8__media { position: relative; aspect-ratio: 3 / 4; overflow: visible; background: var(--color-surface, #eee); } .tp-card8__img-link { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .tp-card8__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .tp-card8__img--primary { opacity: 1; transition: opacity .45s ease, transform .5s ease; z-index: 1; } .tp-card8__img--secondary { opacity: 0; transition: opacity .45s ease; z-index: 2; } .tp-card8:hover .tp-card8__img--primary { transform: scale(1.04); } .tp-card8__badges { position: absolute; top: .625rem; left: .625rem; display: flex; flex-direction: column; gap: .3rem; z-index: 5; pointer-events: none; } .tp-card8__body { padding: .55rem 0 0; display: flex; flex-direction: column; gap: .15rem; } .tp-card8__name { font-size: .9rem; font-weight: 400; line-height: 1.35; margin: 0; } .tp-card8__name a { color: var(--color-text, #111); text-decoration: none; } .tp-card8__name a:hover { text-decoration: underline; } .tp-card8__price { font-size: .9rem; font-weight: 400; color: var(--color-text, #111); } .tp-card8__price del { color: var(--color-text-muted, #999); font-size: .9em; } .tp-card8__price ins { text-decoration: none; } /* Card 10: fila de talles disponibles (agotados tachados) */ .tp-card10__sizes { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; padding: 0; list-style: none; } .tp-card10__size { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; font-size: .7rem; font-weight: 500; line-height: 1; color: var(--color-text, #111); border: 1px solid var(--color-border, #ddd); border-radius: 3px; white-space: nowrap; } .tp-card10__size.is-disabled { color: var(--color-text-muted, #999); border-color: var(--color-border, #eee); text-decoration: line-through; opacity: .55; } /* ══════════════════════════════════════════════════════════════════════════════ FULLWIDTH CATEGORY CAROUSEL (.tp-cat-fw) ═══════════════════════════════════════════════════════════════════════════════ */ :root { --cat-fw-gap: 8px; --cat-fw-visible: 4; } .tp-cat-fw { position: relative; width: 100%; overflow: hidden; background: transparent; /* Altura = ancho de 1 slide × (16/9) → formato historia 9:16 Con 4 slides visibles + gaps: slide-width ≈ (100vw - 3×gap) / 4 Usamos aspect-ratio en el slide y dejamos que el contenedor se adapte */ height: clamp(600px, 97vh, 1200px); } .tp-cat-fw__track { display: flex; height: 100%; gap: var(--cat-fw-gap); will-change: transform; transition: transform .5s cubic-bezier(.45,.05,.35,.95); min-width: 0; } .tp-cat-fw__slide { flex: 0 0 calc((100% - var(--cat-fw-gap) * (var(--cat-fw-visible) - 1)) / var(--cat-fw-visible)); height: 100%; position: relative; } .tp-cat-fw__card { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-decoration: none; } .tp-cat-fw__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .7s ease; } .tp-cat-fw__card:hover .tp-cat-fw__img { transform: scale(1.04); } .tp-cat-fw__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg,#1a1a2e,#16213e); } .tp-cat-fw__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.78) 100%); pointer-events: none; } .tp-cat-fw__name { position: absolute; bottom: clamp(1.5rem, 4vh, 2.5rem); left: 0; right: 0; padding: 0 .75rem; text-align: center; color: #fff; font-family: var(--font-heading, inherit); font-size: clamp(.85rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6); } .tp-cat-fw__sub { display: block; font-size: .5em; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-top: .35em; } .tp-cat-fw__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease; } .tp-cat-fw__btn:hover { background: rgba(255,255,255,.30); transform: translateY(-50%) scale(1.08); } .tp-cat-fw__btn:disabled { opacity: .3; pointer-events: none; } .tp-cat-fw__btn--prev { left: clamp(.5rem, 1.5vw, 1.25rem); } .tp-cat-fw__btn--next { right: clamp(.5rem, 1.5vw, 1.25rem); } .tp-cat-fw__dots { position: absolute; bottom: clamp(.5rem, 1.8vh, 1rem); left: 50%; transform: translateX(-50%); display: flex; gap: .45rem; z-index: 10; } .tp-cat-fw__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: background .25s ease, width .25s ease; padding: 0; } .tp-cat-fw__dot--active { background: #fff; width: 20px; border-radius: 3px; } @media (max-width: 680px) { :root { --cat-fw-visible: 2; --cat-fw-gap: 6px; } .tp-cat-fw { height: clamp(340px, 68vh, 560px); } .tp-cat-fw__btn { width: 36px; height: 36px; } .tp-cat-fw__name { font-size: clamp(1rem, 4.5vw, 1.4rem); bottom: clamp(1rem, 3vh, 1.75rem); } } /* ══════════════════════════════════════════════════════════════════════════════ REVEAL ANIMATIONS ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { .tp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; } .tp-reveal.is-visible { opacity: 1; transform: none; } .tp-reveal--delay-1 { transition-delay: .1s; } .tp-reveal--delay-2 { transition-delay: .2s; } .tp-reveal--delay-3 { transition-delay: .3s; } } /* ══════════════════════════════════════════════════════════════════════════════ CARRUSEL DE MARCAS ═══════════════════════════════════════════════════════════════════════════════ */ .tp-section--brands { padding-block: 3rem 2.5rem; overflow: hidden; } .tp-brands__title { text-align: center; margin-bottom: 2rem; } /* Track: scroll horizontal sin scrollbar visible */ .tp-brands-track-wrap { position: relative; overflow: hidden; } .tp-brands-track-wrap::before, .tp-brands-track-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3rem; z-index: 1; pointer-events: none; } .tp-brands-track-wrap::before { left: 0; background: linear-gradient(to right, var(--color-bg), transparent); } .tp-brands-track-wrap::after { right: 0; background: linear-gradient(to left, var(--color-bg), transparent); } .tp-brands-track { display: flex; align-items: center; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline-start: max(var(--container-pad), calc((100% - var(--container-width)) / 2 + var(--container-pad))); padding-inline-end: var(--container-pad); padding-block: 0.5rem; } .tp-brands-track::-webkit-scrollbar { display: none; } .tp-brands-track--continuous { scroll-snap-type: none; } .tp-brands-track--continuous .tp-brand-item { scroll-snap-align: none; } /* Item */ .tp-brand-item { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: var(--color-text-muted); border-radius: var(--radius-md); padding: .75rem 1rem; border: 1.5px solid var(--color-border); background: var(--color-bg); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); min-width: 120px; max-width: 160px; } .tp-brand-item:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--color-text); } .tp-brand-item:active { transform: scale(.97); } /* Logo */ .tp-brand-item__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--tp-brand-logo-size, 56px); } .tp-brand-item__logo img { max-width: calc(var(--tp-brand-logo-size, 56px) * 2.14); max-height: var(--tp-brand-logo-size, 56px); width: auto; height: auto; object-fit: contain; display: block; transition: filter var(--transition), opacity var(--transition); } /* Gris → color al hover */ .tp-brand-item--grayscale .tp-brand-item__logo img { filter: grayscale(1); opacity: .6; } .tp-brand-item--grayscale:hover .tp-brand-item__logo img { filter: grayscale(0); opacity: 1; } /* Fallback sin logo: recuadro con texto */ .tp-brand-item__logo--text { background: var(--color-surface); border-radius: var(--radius-sm); width: 100%; } .tp-brand-item__logo--text span { font-size: .9rem; font-weight: 700; color: var(--color-text-muted); padding-inline: .5rem; text-align: center; line-height: 1.2; } /* Nombre */ .tp-brand-item__name { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); text-align: center; line-height: 1.2; transition: color var(--transition); } .tp-brand-item:hover .tp-brand-item__name { color: var(--color-accent); } /* Responsivo */ @media (max-width: 640px) { .tp-brands-track { gap: 1rem; } .tp-brand-item { min-width: 96px; padding: .625rem .75rem; } .tp-brand-item__logo { height: var(--tp-brand-logo-size-mobile, 44px); } .tp-brand-item__logo img { max-width: calc(var(--tp-brand-logo-size-mobile, 44px) * 2.14); max-height: var(--tp-brand-logo-size-mobile, 44px); } } /* ══════════════════════════════════════════════════════════════════════════════ QUICK VIEW MODAL ═══════════════════════════════════════════════════════════════════════════════ */ .tp-modal__box--quick-view { width: min(900px, 96vw); max-height: 92vh; overflow-y: auto; border-radius: var(--radius-lg); padding: 0; position: relative; } .tp-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 400px; } @media (max-width: 640px) { .tp-qv { grid-template-columns: 1fr; } } /* Galería */ .tp-qv__gallery { background: var(--color-bg-alt); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } @media (max-width: 640px) { .tp-qv__gallery { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } .tp-qv__main-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius); } .tp-qv__thumbs { display: flex; gap: .4rem; flex-wrap: wrap; } .tp-qv__thumb { width: 56px; height: 56px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; padding: 0; background: #fff; transition: border-color .2s; } .tp-qv__thumb img { width: 100%; height: 100%; object-fit: cover; } .tp-qv__thumb.is-active, .tp-qv__thumb:hover { border-color: var(--color-primary); } /* Info */ .tp-qv__info { padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: .5rem; } .tp-qv__name { font-size: 1.25rem; font-weight: 700; color: var(--color-heading); line-height: 1.3; margin: 0; } .tp-qv__price { font-size: 1.35rem; font-weight: 700; color: var(--color-primary); } .tp-qv__price del { font-size: .9em; color: var(--color-text-muted); font-weight: 400; } .tp-qv__price ins { text-decoration: none; color: var(--color-sale-price, var(--color-danger)); } .tp-qv__badges { display: flex; gap: .4rem; flex-wrap: wrap; } .tp-qv__desc { font-size: .875rem; color: var(--color-text-muted); line-height: 1.6; margin: .25rem 0; } .tp-qv__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: .75rem; } .tp-qv__actions .tp-btn { width: 100%; justify-content: center; } .tp-qv__atc-row { display: flex; gap: .5rem; align-items: center; } .tp-qv__atc-row .tp-qty-control { flex-shrink: 0; } .tp-qv__atc-row .tp-qty-control__val { width: 2.5rem; border: none; background: transparent; -moz-appearance: textfield; } .tp-qv__atc-row .tp-qty-control__val::-webkit-inner-spin-button, .tp-qv__atc-row .tp-qty-control__val::-webkit-outer-spin-button { -webkit-appearance: none; } .tp-qv__atc-row .tp-btn { flex: 1; } .tp-qv__full-link { font-size: .8rem; color: var(--color-text-muted); text-align: center; text-decoration: underline; } .tp-qv__full-link:hover { color: var(--color-primary); } /* Loading spinner */ .tp-quick-view__loading { display: flex; align-items: center; justify-content: center; min-height: 300px; } .tp-spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: tp-spin .7s linear infinite; display: inline-block; } /* ══════════════════════════════════════════════════════════════════════════════ PÁGINAS DE CONTACTO ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Botón WhatsApp ─────────────────────────────────────────────────────────── */ .tp-btn--whatsapp { display: inline-flex; align-items: center; gap: .5rem; background: #25D366; color: #fff; border: none; border-radius: var(--radius-md, 8px); padding: .8rem 1.5rem; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, transform .15s; } .tp-btn--whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-1px); } .tp-btn--whatsapp svg { flex-shrink: 0; } .tp-btn--whatsapp.tp-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; } .tp-btn--whatsapp.tp-btn--full { width: 100%; justify-content: center; } /* ── Mapa embebido ──────────────────────────────────────────────────────────── */ .tp-contact-map { width: 100%; line-height: 0; } .tp-contact-map iframe { width: 100%; height: 420px; border: none; display: block; } .tp-contact-map--top { height: 420px; overflow: hidden; } .tp-contact-map--top iframe { height: 100%; } .tp-contact-map--inline { border-radius: var(--radius-md, 8px); overflow: hidden; margin-top: 2rem; } .tp-contact-map--inline iframe { height: 300px; } /* ── Tarjetas de contacto (contact-1 y contact-3) ──────────────────────────── */ .tp-contact-cards { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; } .tp-contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; background: #fff; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: var(--radius-lg, 12px); padding: 1.5rem 1.75rem; flex: 1 1 200px; max-width: 260px; text-decoration: none; color: var(--color-text); transition: border-color .2s, box-shadow .2s, transform .15s; } .tp-contact-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); color: var(--color-text); } .tp-contact-card--vertical { align-items: center; text-align: center; max-width: 220px; } .tp-contact-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-surface, #f5f5f5); border-radius: 50%; color: var(--color-primary); flex-shrink: 0; } .tp-contact-card__icon--whatsapp { background: #e8faf0; color: #25D366; } .tp-contact-card__icon--lg { width: 60px; height: 60px; } .tp-contact-card__icon--lg svg { width: 28px; height: 28px; } .tp-contact-card__label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted, #6b7280); margin: 0; } .tp-contact-card__value { font-size: .95rem; color: var(--color-heading); font-weight: 500; margin: 0; } .tp-contact-card__cta { font-size: .82rem; color: var(--color-primary); font-weight: 600; margin-top: .25rem; } /* ── Lista de contacto (contact-2 y contact-4) ──────────────────────────────── */ .tp-contact-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .tp-contact-list--minimal .tp-contact-list__item { padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .tp-contact-list--minimal .tp-contact-list__item:last-child { border-bottom: none; } .tp-contact-list__item { display: flex; align-items: flex-start; gap: 1rem; } .tp-contact-list__icon { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-surface, #f5f5f5); border-radius: 50%; color: var(--color-primary); } .tp-contact-list__icon--whatsapp { background: #e8faf0; color: #25D366; } .tp-contact-list__body { display: flex; flex-direction: column; gap: .15rem; padding-top: .1rem; } .tp-contact-list__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted, #6b7280); } .tp-contact-list__value { font-size: .95rem; color: var(--color-heading); font-weight: 500; text-decoration: none; transition: color .15s; } a.tp-contact-list__value:hover { color: var(--color-primary); } /* ════════════════════════════════════════════════════════════════════════ CONTACTO 1 — Hero + datos horizontales ═════════════════════════════════════════════════════════════════════════ */ .tp-contact-hero { position: relative; min-height: 460px; display: flex; align-items: center; background: var(--color-primary); background-size: cover; background-position: center; } .tp-contact-hero--has-img .tp-contact-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 100%); } .tp-contact-hero:not(.tp-contact-hero--has-img) .tp-contact-hero__overlay { display: none; } .tp-contact-hero__content { position: relative; z-index: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; color: #fff; } .tp-contact-hero--has-img .tp-contact-hero__content { color: #fff; } .tp-contact-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0 0 1rem; color: inherit; } .tp-contact-hero__text { font-size: 1.1rem; line-height: 1.6; margin: 0 0 1.75rem; opacity: .9; } .tp-contact-data--row { padding: 3rem 0; } .tp-contact-cards { justify-content: center; } /* ════════════════════════════════════════════════════════════════════════ CONTACTO 2 — Imagen izquierda + datos derecha ═════════════════════════════════════════════════════════════════════════ */ .tp-contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .tp-contact-split__img { position: sticky; top: 0; height: 100vh; background: var(--color-surface, #f3f3f3); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tp-contact-split__img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-muted); } .tp-contact-split__content { padding: 4rem 2rem; overflow-y: auto; } .tp-contact-split__inner { max-width: 500px; margin: 0 auto; } .tp-contact-split__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; margin: 0 0 1rem; line-height: 1.2; } .tp-contact-split__text { font-size: 1rem; line-height: 1.7; color: var(--color-muted); margin: 0 0 2rem; } /* ════════════════════════════════════════════════════════════════════════ CONTACTO 3 — Mapa arriba + tarjetas abajo ═════════════════════════════════════════════════════════════════════════ */ .tp-contact-header-section { padding: 3rem 0 2rem; text-align: center; } .tp-contact-header-section__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; margin: 0 0 .75rem; } .tp-contact-header-section__text { font-size: 1rem; color: var(--color-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; } .tp-contact-data--centered { padding: 1.5rem 0 3.5rem; } .tp-contact-cards--centered { justify-content: center; flex-wrap: wrap; gap: 1.5rem; } .tp-contact-cards--centered .tp-contact-card--vertical { flex: 0 1 200px; } /* ════════════════════════════════════════════════════════════════════════ CONTACTO 4 — Minimalista con fondo de marca ═════════════════════════════════════════════════════════════════════════ */ .tp-contact-brand-header { background: var(--color-primary); color: #fff; padding: 3.5rem 0; } .tp-contact-brand-header__inner { text-align: center; max-width: 640px; } .tp-contact-brand-header__title { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; color: #fff; margin: 0 0 .75rem; } .tp-contact-brand-header__text { font-size: 1.05rem; line-height: 1.7; opacity: .88; } .tp-contact-minimal { padding: 3.5rem 0; } .tp-contact-minimal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .tp-contact-minimal__col { /* left column — contact list */ } .tp-contact-minimal__right { display: flex; flex-direction: column; gap: 1.75rem; } .tp-contact-minimal__map { border-radius: var(--radius-lg, 12px); overflow: hidden; } .tp-contact-minimal__map iframe { height: 380px; width: 100%; border: none; display: block; } .tp-contact-minimal__map--below-form iframe { height: 240px; } /* ── Formulario de contacto ─────────────────────────────────────────────────── */ .tp-contact-form-section { padding: 3.5rem 0; background: var(--color-surface, #f9f9f9); } .tp-contact-form-wrap { max-width: 680px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg, 12px); padding: 2.5rem 2rem; box-shadow: 0 2px 16px rgba(0,0,0,.06); } /* En contact-2: sin card, fluye dentro de la columna derecha */ .tp-contact-form-wrap--split { max-width: 100%; padding: 0; background: transparent; border-radius: 0; box-shadow: none; margin: 1.5rem 0 0; } /* En contact-4: sin card, dentro de la columna del grid */ .tp-contact-form-wrap--minimal { max-width: 100%; padding: 0; background: transparent; border-radius: 0; box-shadow: none; margin: 0; } /* Normalize inputs de formularios externos (CF7, WPForms, GF) */ .tp-contact-form-wrap input[type="text"], .tp-contact-form-wrap input[type="email"], .tp-contact-form-wrap input[type="tel"], .tp-contact-form-wrap input[type="number"], .tp-contact-form-wrap textarea, .tp-contact-form-wrap select { width: 100%; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: var(--radius-sm, 6px); padding: .7rem 1rem; font-size: .95rem; font-family: inherit; color: var(--color-text); background: #fff; transition: border-color .2s; box-sizing: border-box; } .tp-contact-form-wrap input[type="text"]:focus, .tp-contact-form-wrap input[type="email"]:focus, .tp-contact-form-wrap input[type="tel"]:focus, .tp-contact-form-wrap textarea:focus, .tp-contact-form-wrap select:focus { outline: none; border-color: var(--color-primary); } .tp-contact-form-wrap textarea { min-height: 120px; resize: vertical; } .tp-contact-form-wrap label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: var(--color-heading); } /* Submit button */ .tp-contact-form-wrap input[type="submit"], .tp-contact-form-wrap button[type="submit"] { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-md, 8px) !important; padding: .85rem 2rem !important; font-size: 1rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background .2s, transform .15s !important; width: auto !important; } .tp-contact-form-wrap input[type="submit"]:hover, .tp-contact-form-wrap button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); } /* CF7 - limpiar wrappers */ .tp-contact-form-wrap .wpcf7-form-control-wrap { display: block; } .tp-contact-form-wrap .wpcf7-not-valid-tip { font-size: .8rem; color: #dc2626; margin-top: .25rem; } .tp-contact-form-wrap .wpcf7-response-output { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--radius-sm, 6px); font-size: .9rem; border: 1.5px solid; } .tp-contact-form-wrap .wpcf7-mail-sent-ok { border-color: #16a34a; color: #15803d; background: #f0fdf4; } .tp-contact-form-wrap .wpcf7-validation-errors, .tp-contact-form-wrap .wpcf7-spam-blocked { border-color: #dc2626; color: #b91c1c; background: #fef2f2; } /* WPForms - básicos */ .tp-contact-form-wrap .wpforms-field { margin-bottom: 1rem; } .tp-contact-form-wrap .wpforms-field-label { font-size: .85rem; font-weight: 600; } /* ── Responsive: contacto ───────────────────────────────────────────────────── */ @media (max-width: 900px) { /* contact-2: stack on mobile */ .tp-contact-split { grid-template-columns: 1fr; } .tp-contact-split__img { position: relative; height: 280px; } .tp-contact-split__content { padding: 2.5rem 1.5rem; } /* contact-4: stack col derecha debajo de la lista */ .tp-contact-minimal__grid { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 640px) { .tp-contact-hero { min-height: 360px; } .tp-contact-hero__content { padding: 2.5rem 1.25rem; } .tp-contact-card { flex: 1 1 160px; max-width: 100%; } .tp-contact-card--vertical { max-width: 100%; width: 100%; } .tp-contact-cards--centered { flex-direction: column; align-items: center; } .tp-contact-data--row { padding: 2rem 0; } .tp-contact-minimal { padding: 2rem 0; } .tp-contact-brand-header { padding: 2.5rem 0; } .tp-contact-map--top { height: 260px; } .tp-contact-map iframe { height: 280px; } .tp-contact-minimal__map iframe { height: 250px; } .tp-contact-header-section { padding: 2rem 0 1.5rem; } .tp-contact-form-section { padding: 2.5rem 0; } .tp-contact-form-wrap { padding: 1.75rem 1.25rem; } } /* ── Página: Botón de arrepentimiento ───────────────────────────────────────── */ .tp-arrepentimiento { padding: 3rem 0 4rem; } .tp-arrepentimiento__container { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; } .tp-arrepentimiento__header { margin-bottom: 1.75rem; } .tp-arrepentimiento__title { font-size: 1.75rem; font-weight: 700; color: var(--color-heading); margin: 0; } .tp-arrepentimiento__aviso { display: flex; gap: 1rem; align-items: flex-start; background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: var(--radius-md, 8px); padding: 1.25rem 1.5rem; margin-bottom: 2rem; } .tp-arrepentimiento__aviso-icon { color: #d97706; flex-shrink: 0; margin-top: .1rem; } .tp-arrepentimiento__aviso-text { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--color-text); } .tp-arrepentimiento__content { margin-bottom: 2rem; } .tp-arrepentimiento__error { color: #b91c1c; font-size: .9rem; } /* Formulario CF7 dentro de la página de arrepentimiento */ .tp-arrepentimiento__form { background: #fff; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: var(--radius-lg, 12px); padding: 2.5rem 2rem; box-shadow: 0 2px 16px rgba(0,0,0,.06); } .tp-arrepentimiento__form input[type="text"], .tp-arrepentimiento__form input[type="email"], .tp-arrepentimiento__form input[type="tel"], .tp-arrepentimiento__form input[type="number"], .tp-arrepentimiento__form textarea, .tp-arrepentimiento__form select { width: 100%; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: var(--radius-sm, 6px); padding: .7rem 1rem; font-size: .95rem; font-family: inherit; color: var(--color-text); background: #fff; transition: border-color .2s; box-sizing: border-box; } .tp-arrepentimiento__form input[type="text"]:focus, .tp-arrepentimiento__form input[type="email"]:focus, .tp-arrepentimiento__form input[type="tel"]:focus, .tp-arrepentimiento__form textarea:focus, .tp-arrepentimiento__form select:focus { outline: none; border-color: var(--color-primary); } .tp-arrepentimiento__form textarea { min-height: 120px; resize: vertical; } .tp-arrepentimiento__form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: var(--color-heading); } .tp-arrepentimiento__form input[type="submit"], .tp-arrepentimiento__form button[type="submit"] { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: var(--radius-md, 8px) !important; padding: .85rem 2rem !important; font-size: 1rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background .2s, transform .15s !important; width: auto !important; } .tp-arrepentimiento__form input[type="submit"]:hover, .tp-arrepentimiento__form button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); } .tp-arrepentimiento__form .wpcf7-form-control-wrap { display: block; } .tp-arrepentimiento__form .wpcf7-not-valid-tip { font-size: .8rem; color: #dc2626; margin-top: .25rem; } .tp-arrepentimiento__form .wpcf7-response-output { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--radius-sm, 6px); font-size: .9rem; border: 1.5px solid; } .tp-arrepentimiento__form .wpcf7-mail-sent-ok { border-color: #16a34a; color: #15803d; background: #f0fdf4; } .tp-arrepentimiento__form .wpcf7-validation-errors, .tp-arrepentimiento__form .wpcf7-spam-blocked { border-color: #dc2626; color: #b91c1c; background: #fef2f2; } @media (max-width: 600px) { .tp-arrepentimiento { padding: 2rem 0 3rem; } .tp-arrepentimiento__title { font-size: 1.4rem; } .tp-arrepentimiento__aviso { flex-direction: column; gap: .75rem; padding: 1rem; } .tp-arrepentimiento__form { padding: 1.5rem 1.1rem; } } /* ══════════════════════════════════════════════════════════════════════════════ UTILIDADES ═══════════════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .is-loading { pointer-events: none; opacity: .6; } .spin { animation: tp-spin .8s linear infinite; } @keyframes tp-spin { to { transform: rotate(360deg); } } /* ============================================================================= FAQ ACCORDION ============================================================================= */ /* ── Wrapper del acordión ─────────────────────────────────────────────────── */ .tp-faq-accordion { display: flex; flex-direction: column; gap: 0; } /* ── Ítem individual ──────────────────────────────────────────────────────── */ .tp-faq-accordion__item { border-bottom: 1px solid rgba(0,0,0,.1); } .tp-faq-accordion__item:first-child { border-top: 1px solid rgba(0,0,0,.1); } /* ── Botón trigger ────────────────────────────────────────────────────────── */ .tp-faq-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.125rem 0; background: none; border: none; cursor: pointer; text-align: left; color: inherit; font: inherit; } .tp-faq-accordion__trigger:hover .tp-faq-accordion__question { color: var(--color-accent, #6366f1); } .tp-faq-accordion__question { font-size: 1rem; font-weight: 600; line-height: 1.4; transition: color .15s ease; } /* ── Ícono chevron ────────────────────────────────────────────────────────── */ .tp-faq-accordion__icon { flex-shrink: 0; display: flex; align-items: center; color: var(--color-accent, #6366f1); transition: transform .25s ease; } .tp-faq-accordion__trigger[aria-expanded="true"] .tp-faq-accordion__icon { transform: rotate(180deg); } /* ── Panel de respuesta ───────────────────────────────────────────────────── */ .tp-faq-accordion__panel { overflow: hidden; max-height: 0; transition: max-height .3s ease, padding .3s ease; } .tp-faq-accordion__panel:not([hidden]) { max-height: 1000px; } .tp-faq-accordion__panel[hidden] { display: block !important; /* override native hidden so CSS can animate */ max-height: 0; padding: 0; } .tp-faq-accordion__answer { padding-bottom: 1.25rem; color: var(--tp-text-muted, #64748b); line-height: 1.65; } .tp-faq-accordion__answer p { margin: 0 0 .75rem; } .tp-faq-accordion__answer p:last-child { margin-bottom: 0; } /* ── Sección FAQ en homepage ──────────────────────────────────────────────── */ .tp-faq-section { padding: 4rem 0; } .tp-faq-section__title { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 2.5rem; } .tp-faq-section__title:has(+ .tp-section__seo-text--centered) { margin-bottom: 1rem; } .tp-faq-accordion__subtitle { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent, #6366f1); padding: 2rem 0 .5rem; border-bottom: 2px solid var(--color-accent, #6366f1); margin-bottom: .25rem; } .tp-faq-accordion__subtitle:first-child { padding-top: 0; } /* ── Sección FAQ en página de Contacto ───────────────────────────────────── */ .tp-contact-faq { padding: 3.5rem 0 4rem; background: var(--tp-bg, #ffffff); } .tp-contact-faq__title { text-align: center; font-size: clamp(1.4rem, 2.5vw, 1.875rem); font-weight: 700; margin-bottom: 2rem; } /* ── Página dedicada FAQ ──────────────────────────────────────────────────── */ .tp-faq-page__header { padding: 3rem 0 2rem; text-align: center; background: var(--tp-bg-alt, #f8fafc); border-bottom: 1px solid rgba(0,0,0,.06); } .tp-faq-page__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin: 0 0 .75rem; } .tp-faq-page__intro { max-width: 640px; margin: 0 auto; color: var(--tp-text-muted, #64748b); line-height: 1.65; } .tp-faq-page__body { padding: 3rem 0 5rem; } .tp-faq-page__empty { text-align: center; color: var(--tp-text-muted, #64748b); padding: 2rem 0; } /* ── Container narrow (FAQ usa un ancho más cómodo para leer) ─────────────── */ .tp-container--narrow { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .tp-faq-section { padding: 2.5rem 0; } .tp-contact-faq { padding: 2.5rem 0 3rem; } .tp-faq-page__body { padding: 2rem 0 3.5rem; } } /* ========================================================================= Sección Testimonios de Google ========================================================================= */ .tp-google-reviews-section { padding: 4rem 0; } .tp-google-reviews-section__title { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 2rem; } .tp-google-reviews-section__title:has(+ .tp-section__seo-text--centered) { margin-bottom: 1rem; } .tp-section__seo-text--centered { text-align: center; margin-inline: auto; margin-bottom: 2rem; } .tp-google-reviews-section__widget { width: 100%; } @media (max-width: 768px) { .tp-google-reviews-section { padding: 2.5rem 0; } } /* ============================================================================= BLOG — Carrusel, Tarjetas (A/B/C), Single, Archive ============================================================================= */ /* ── Sección carrusel blog (homepage) ─────────────────────────────────────── */ .tp-section--blog-carousel { padding: var(--section-gap, 4rem) 0; } .tp-section__header-right { display: flex; align-items: center; gap: 1rem; } .tp-section__link { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 500; color: var(--color-accent); text-decoration: none; white-space: nowrap; transition: opacity .2s; } .tp-section__link:hover { opacity: .75; } /* ── Blog carousel track ──────────────────────────────────────────────────── */ .tp-blog-carousel { display: flex; gap: 1.25rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; overscroll-behavior: contain; touch-action: pan-x pan-y; } .tp-blog-carousel::-webkit-scrollbar { display: none; } .tp-blog-carousel .tp-blog-card { scroll-snap-align: start; flex-shrink: 0; } /* card-a: vertical — ancho fijo por card */ .tp-blog-carousel--card-a .tp-blog-card { width: clamp(240px, 30%, 320px); } /* card-b: horizontal — más ancha */ .tp-blog-carousel--card-b .tp-blog-card { width: clamp(300px, 45%, 480px); } /* card-c: overlay — cuadradas */ .tp-blog-carousel--card-c .tp-blog-card { width: clamp(220px, 28%, 300px); } /* ── Tarjeta base ─────────────────────────────────────────────────────────── */ .tp-blog-card { background: var(--color-bg, #fff); border-radius: var(--radius-lg, .75rem); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .25s, transform .25s; text-decoration: none; color: inherit; } .tp-blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-2px); } /* ── Imagen compartida ───────────────────────────────────────────────────── */ .tp-blog-card__img-wrap { display: block; position: relative; overflow: hidden; text-decoration: none; background: var(--color-surface, #f1f5f9); } .tp-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .tp-blog-card:hover .tp-blog-card__img { transform: scale(1.04); } .tp-blog-card__img-placeholder { width: 100%; height: 100%; min-height: 180px; background: linear-gradient(135deg, var(--color-surface, #f1f5f9) 0%, var(--color-border, #e2e8f0) 100%); } /* ── Badge de categoría ───────────────────────────────────────────────────── */ .tp-blog-card__cat, .tp-blog-cat-badge { display: inline-block; padding: .2em .65em; border-radius: 999px; background: var(--color-accent, #6366f1); color: #fff; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; line-height: 1.4; } .tp-blog-cat-badge { margin-bottom: .75rem; } .tp-blog-cat-badge--sm { font-size: .65rem; } .tp-blog-cat-badge--minimal { background: transparent; color: var(--color-accent, #6366f1); border: 1.5px solid var(--color-accent, #6366f1); padding: .15em .6em; } /* ── Pill de filtro en archive ────────────────────────────────────────────── */ .tp-blog-cat-pill { display: inline-block; padding: .35em 1em; border-radius: 999px; border: 1.5px solid var(--color-border, #e2e8f0); background: transparent; color: var(--color-text-muted, #64748b); font-size: .8rem; font-weight: 500; text-decoration: none; transition: border-color .2s, color .2s, background .2s; } .tp-blog-cat-pill:hover, .tp-blog-cat-pill.is-active { border-color: var(--color-accent, #6366f1); color: var(--color-accent, #6366f1); background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent); } /* ── Meta (fecha + readtime) ─────────────────────────────────────────────── */ .tp-blog-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--color-text-muted, #64748b); margin-bottom: .4rem; flex-wrap: wrap; } .tp-blog-card__meta-sep { opacity: .4; } /* ── Título de tarjeta ───────────────────────────────────────────────────── */ .tp-blog-card__title { font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0 0 .5rem; color: var(--color-text, #1e293b); } .tp-blog-card__title a { color: inherit; text-decoration: none; } .tp-blog-card__title a:hover { color: var(--color-accent, #6366f1); } /* ── Extracto ────────────────────────────────────────────────────────────── */ .tp-blog-card__excerpt { font-size: .875rem; color: var(--color-text-muted, #64748b); line-height: 1.6; margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── CTA inline ──────────────────────────────────────────────────────────── */ .tp-blog-card__cta { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--color-accent, #6366f1); text-decoration: none; } .tp-blog-card__cta:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════ CARD A — Vertical clásica ═══════════════════════════════════════════════════════ */ .tp-blog-card--card-a .tp-blog-card__img-wrap { aspect-ratio: 16 / 10; } .tp-blog-card--card-a .tp-blog-card__cat { position: absolute; top: .75rem; left: .75rem; } .tp-blog-card--card-a .tp-blog-card__body { padding: 1rem 1.1rem 1.2rem; } /* ═══════════════════════════════════════════════════════ CARD B — Horizontal ═══════════════════════════════════════════════════════ */ .tp-blog-card--card-b { display: flex; flex-direction: row; min-height: 130px; } .tp-blog-card--card-b .tp-blog-card__img-wrap { flex-shrink: 0; width: 160px; min-height: 130px; } .tp-blog-card--card-b .tp-blog-card__img-placeholder { min-height: 130px; } .tp-blog-card--card-b .tp-blog-card__cat { display: inline-block; position: static; margin-bottom: .4rem; } .tp-blog-card--card-b .tp-blog-card__body { padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: center; } .tp-blog-card--card-b .tp-blog-card__title { font-size: .9rem; } .tp-blog-card--card-b .tp-blog-card__excerpt { -webkit-line-clamp: 2; font-size: .8rem; } /* ═══════════════════════════════════════════════════════ CARD C — Overlay ═══════════════════════════════════════════════════════ */ .tp-blog-card--card-c .tp-blog-card__img-wrap { display: block; aspect-ratio: 4 / 5; position: relative; text-decoration: none; overflow: hidden; } .tp-blog-card--card-c .tp-blog-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; color: #fff; transition: background .3s; } .tp-blog-card--card-c:hover .tp-blog-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, transparent 100%); } .tp-blog-card--card-c .tp-blog-card__cat { background: rgba(255,255,255,.2); backdrop-filter: blur(4px); margin-bottom: .4rem; align-self: flex-start; } .tp-blog-card--card-c .tp-blog-card__title { color: #fff; font-size: .95rem; margin-bottom: .35rem; } .tp-blog-card--card-c .tp-blog-card__title a { color: #fff; } .tp-blog-card--card-c .tp-blog-card__meta { color: rgba(255,255,255,.75); margin: 0; } /* ═══════════════════════════════════════════════════════ SINGLE — Estilos compartidos ═══════════════════════════════════════════════════════ */ .tp-single-blog { padding-bottom: 4rem; } .tp-single-blog__title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: .5rem 0 .75rem; color: var(--color-text, #1e293b); } .tp-single-blog__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .825rem; color: var(--color-text-muted, #64748b); margin-bottom: 1rem; } .tp-single-blog__meta-sep { opacity: .35; } /* ── Layout 1: Clásico ────────────────────────────────────────────────────── */ .tp-single-blog--layout-1 .tp-single-blog__hero { position: relative; max-height: 520px; overflow: hidden; margin-bottom: 0; } .tp-single-blog--layout-1 .tp-single-blog__hero-img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; } .tp-single-blog--layout-1 .tp-single-blog__hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 5%; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%); color: #fff; } .tp-single-blog--layout-1 .tp-single-blog__hero-overlay .tp-single-blog__title { color: #fff; } .tp-single-blog--layout-1 .tp-single-blog__hero-overlay .tp-single-blog__meta { color: rgba(255,255,255,.8); } .tp-single-blog--layout-1 .tp-single-blog__header-plain { padding-top: 2rem; padding-bottom: 1.5rem; } .tp-single-blog--layout-1 .tp-single-blog__body { display: grid; grid-template-columns: 1fr 260px; gap: 3rem; padding-top: 2.5rem; align-items: start; } @media (max-width: 900px) { .tp-single-blog--layout-1 .tp-single-blog__body { grid-template-columns: 1fr; } .tp-single-blog__sidebar { display: none; } } /* ── Layout 2: Magazine ───────────────────────────────────────────────────── */ .tp-single-blog--layout-2 .tp-single-blog__magazine { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; padding-top: 2.5rem; padding-bottom: 2rem; align-items: start; } .tp-single-blog--layout-2 .tp-single-blog__mag-aside { position: sticky; top: calc(var(--header-height, 70px) + 1.5rem); } .tp-single-blog--layout-2 .tp-single-blog__mag-thumb { border-radius: var(--radius-lg, .75rem); overflow: hidden; margin-bottom: 1.25rem; aspect-ratio: 4/3; } .tp-single-blog--layout-2 .tp-single-blog__mag-img { width: 100%; height: 100%; object-fit: cover; display: block; } .tp-single-blog--layout-2 .tp-single-blog__mag-info { display: flex; flex-direction: column; gap: .85rem; } .tp-single-blog--layout-2 .tp-single-blog__meta--col { flex-direction: column; align-items: flex-start; gap: .3rem; } .tp-single-blog__avatar { width: 32px !important; height: 32px !important; border-radius: 50%; vertical-align: middle; margin-right: .4rem; } .tp-single-blog--layout-2 .tp-single-blog__mag-main .tp-blog-cat-badge { margin-bottom: .6rem; } @media (max-width: 900px) { .tp-single-blog--layout-2 .tp-single-blog__magazine { grid-template-columns: 1fr; } .tp-single-blog--layout-2 .tp-single-blog__mag-aside { position: static; display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; } .tp-single-blog--layout-2 .tp-single-blog__mag-thumb { margin: 0; flex: 0 0 120px; } } /* ── Layout 3: Minimal ────────────────────────────────────────────────────── */ .tp-single-blog--layout-3 .tp-single-blog__minimal { max-width: 720px; margin: 0 auto; padding-top: 3rem; } .tp-single-blog--layout-3 .tp-single-blog__min-header { margin-bottom: 2rem; } .tp-single-blog--layout-3 .tp-single-blog__title { font-size: clamp(1.75rem, 5vw, 2.75rem); } .tp-single-blog__min-divider { height: 3px; width: 48px; background: var(--color-accent, #6366f1); border-radius: 2px; margin-top: 1.5rem; } .tp-single-blog__min-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border, #e2e8f0); display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; } /* ── Contenido del artículo (tp-prose) ───────────────────────────────────── */ .tp-prose { font-size: 1rem; line-height: 1.8; color: var(--color-text, #1e293b); max-width: 72ch; } .tp-prose--minimal { max-width: 100%; } .tp-prose h2, .tp-prose h3, .tp-prose h4 { font-weight: 700; line-height: 1.3; margin: 2em 0 .6em; color: var(--color-text, #1e293b); } .tp-prose h2 { font-size: 1.45rem; } .tp-prose h3 { font-size: 1.2rem; } .tp-prose h4 { font-size: 1.05rem; } .tp-prose p { margin: 0 0 1.25em; } .tp-prose ul, .tp-prose ol { padding-left: 1.5em; margin: 0 0 1.25em; } .tp-prose li { margin-bottom: .4em; } .tp-prose a { color: var(--color-accent, #6366f1); text-decoration: underline; } .tp-prose blockquote { border-left: 4px solid var(--color-accent, #6366f1); margin: 1.5em 0; padding: .75em 1.25em; background: color-mix(in srgb, var(--color-accent, #6366f1) 6%, transparent); border-radius: 0 var(--radius-md, .5rem) var(--radius-md, .5rem) 0; font-style: italic; color: var(--color-text-muted, #64748b); } .tp-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md, .5rem); margin: 1em 0; } .tp-prose figure { margin: 1.5em 0; } .tp-prose figcaption { font-size: .8rem; color: var(--color-text-muted, #64748b); text-align: center; margin-top: .4em; } .tp-prose pre { background: var(--color-surface, #f1f5f9); border-radius: var(--radius-md, .5rem); padding: 1em 1.25em; overflow-x: auto; font-size: .875rem; margin: 1.25em 0; } .tp-prose code { font-size: .85em; background: var(--color-surface, #f1f5f9); padding: .1em .35em; border-radius: 4px; } .tp-prose pre code { background: none; padding: 0; font-size: inherit; } /* ── Tags ────────────────────────────────────────────────────────────────── */ .tp-single-blog__tags, .tp-blog-sidebar__recent { display: flex; flex-wrap: wrap; gap: .4rem; } .tp-blog-tag { display: inline-block; padding: .25em .7em; border-radius: var(--radius-sm, .25rem); background: var(--color-surface, #f1f5f9); color: var(--color-text-muted, #64748b); font-size: .75rem; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; } .tp-blog-tag:hover { background: color-mix(in srgb, var(--color-accent, #6366f1) 12%, transparent); color: var(--color-accent, #6366f1); } /* ── Compartir ───────────────────────────────────────────────────────────── */ .tp-single-blog__share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .tp-single-blog__share-label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted, #64748b); margin-right: .25rem; } .tp-share-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4em .85em; border-radius: var(--radius-sm, .25rem); font-size: .78rem; font-weight: 600; text-decoration: none; transition: opacity .2s; } .tp-share-btn:hover { opacity: .8; } .tp-share-btn--fb { background: #1877f2; color: #fff; } .tp-share-btn--tw { background: #000; color: #fff; } .tp-share-btn--wa { background: #25d366; color: #fff; } /* ── Sidebar (layout-1) ──────────────────────────────────────────────────── */ .tp-blog-sidebar { display: flex; flex-direction: column; gap: 1.75rem; } .tp-blog-sidebar__widget {} .tp-blog-sidebar__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted, #64748b); margin: 0 0 .75rem; } .tp-blog-sidebar__recent { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: .75rem; } .tp-blog-sidebar__recent-item { display: flex; align-items: center; gap: .65rem; } .tp-blog-sidebar__recent-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md, .5rem); display: block; } .tp-blog-sidebar__recent-info { display: flex; flex-direction: column; gap: .15rem; } .tp-blog-sidebar__recent-title { font-size: .825rem; font-weight: 600; color: var(--color-text, #1e293b); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .tp-blog-sidebar__recent-title:hover { color: var(--color-accent, #6366f1); } .tp-blog-sidebar__recent-date { font-size: .7rem; color: var(--color-text-muted, #64748b); } .tp-blog-sidebar__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; } .tp-blog-sidebar__cat-link { display: flex; justify-content: space-between; align-items: center; padding: .4rem .5rem; border-radius: var(--radius-sm, .25rem); text-decoration: none; font-size: .875rem; color: var(--color-text, #1e293b); transition: background .2s, color .2s; } .tp-blog-sidebar__cat-link:hover { background: var(--color-surface, #f1f5f9); color: var(--color-accent, #6366f1); } .tp-blog-sidebar__cat-count { font-size: .75rem; color: var(--color-text-muted, #64748b); background: var(--color-surface, #f1f5f9); padding: .1em .5em; border-radius: 999px; } /* ── Posts relacionados ──────────────────────────────────────────────────── */ .tp-related-posts { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border, #e2e8f0); } .tp-related-posts__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1.25rem; color: var(--color-text, #1e293b); } .tp-related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .tp-related-post { border-radius: var(--radius-lg, .75rem); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.07); transition: box-shadow .25s, transform .25s; background: var(--color-bg, #fff); } .tp-related-post:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); } .tp-related-post__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; } .tp-related-post__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .tp-related-post:hover .tp-related-post__img { transform: scale(1.05); } .tp-related-post__body { padding: .85rem 1rem 1rem; } .tp-related-post__title { font-size: .875rem; font-weight: 600; line-height: 1.35; margin: .35rem 0 .3rem; } .tp-related-post__title a { color: var(--color-text, #1e293b); text-decoration: none; } .tp-related-post__title a:hover { color: var(--color-accent, #6366f1); } .tp-related-post__date { font-size: .72rem; color: var(--color-text-muted, #64748b); } @media (max-width: 768px) { .tp-related-posts__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .tp-related-posts__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ ARCHIVE — Página listado blog ═══════════════════════════════════════════════════════ */ .tp-blog-archive { padding-bottom: 4rem; } /* Hero del archive */ .tp-blog-archive__hero { padding: 3rem 0 2rem; border-bottom: 1px solid var(--color-border, #e2e8f0); margin-bottom: 2.5rem; background: var(--color-surface, #f8fafc); } .tp-blog-archive__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin: .5rem 0 .5rem; color: var(--color-text, #1e293b); } .tp-blog-archive__desc { font-size: 1rem; color: var(--color-text-muted, #64748b); max-width: 600px; margin: 0 0 1.25rem; } .tp-blog-archive__empty { padding: 3rem 0; text-align: center; color: var(--color-text-muted, #64748b); } /* Filtros de categoría */ .tp-blog-archive__cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } /* Grid layouts */ .tp-blog-grid { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; } .tp-blog-grid--grid { grid-template-columns: repeat(3, 1fr); } .tp-blog-grid--list { grid-template-columns: 1fr; } .tp-blog-grid--masonry { grid-template-columns: repeat(3, 1fr); align-items: start; } /* Card-b en list mode: ancho pleno */ .tp-blog-grid--list .tp-blog-card--card-b { width: 100%; } @media (max-width: 900px) { .tp-blog-grid--grid, .tp-blog-grid--masonry { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tp-blog-grid--grid, .tp-blog-grid--masonry { grid-template-columns: 1fr; } .tp-blog-card--card-b { flex-direction: column; } .tp-blog-card--card-b .tp-blog-card__img-wrap { width: 100%; min-height: 180px; aspect-ratio: 16/9; } } /* Paginación */ .tp-blog-pagination { display: flex; justify-content: center; margin-top: 1rem; } .tp-blog-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; align-items: center; } .tp-blog-pagination .page-numbers li { margin: 0; } .tp-blog-pagination .page-numbers a, .tp-blog-pagination .page-numbers span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border-radius: var(--radius-md, .5rem); border: 1.5px solid var(--color-border, #e2e8f0); font-size: .875rem; color: var(--color-text, #1e293b); text-decoration: none; transition: border-color .2s, color .2s, background .2s; } .tp-blog-pagination .page-numbers a:hover { border-color: var(--color-accent, #6366f1); color: var(--color-accent, #6366f1); } .tp-blog-pagination .page-numbers .current { background: var(--color-accent, #6366f1); border-color: var(--color-accent, #6366f1); color: #fff; } .tp-blog-pagination .page-numbers .dots { border-color: transparent; } /* ── Página Mis Favoritos ──────────────────────────────────────────────────── */ .tp-wishlist-page__header { padding: 3rem 0 2rem; border-bottom: 1px solid rgba(0,0,0,.06); } .tp-wishlist-page__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin: 0; } .tp-wishlist-page__body { padding: 3rem 0 5rem; } .tp-wishlist-page__count { font-size: .875rem; color: var(--tp-text-muted, #64748b); margin: 0 0 1.5rem; } .tp-wishlist-page__empty { text-align: center; padding: 4rem 1rem; color: var(--tp-text-muted, #64748b); } .tp-wishlist-page__empty svg { display: block; margin: 0 auto 1.25rem; opacity: .3; } .tp-wishlist-page__empty p { font-size: 1.125rem; margin: 0 0 1.5rem; } @media (max-width: 768px) { .tp-wishlist-page__header { padding: 2rem 0 1.5rem; } .tp-wishlist-page__body { padding: 2rem 0 3.5rem; } } .tp-wishlist-page__header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .tp-wishlist-page__share-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.25rem; background: transparent; border: 2px solid var(--color-accent, #6366f1); color: var(--color-accent, #6366f1); border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; } .tp-wishlist-page__share-btn:hover { background: var(--color-accent, #6366f1); color: #fff; } /* ── Página genérica (page.php) ─────────────────────────────────────────────── Template por defecto de WordPress: lo usan Términos, Privacidad, Devoluciones y cualquier página sin template propio. Sin estas reglas el título queda pegado al header y el cuerpo no tiene ritmo vertical. */ .tp-page-content { max-width: 820px; padding-block: clamp(2rem, 5vw, 3.5rem); } .tp-page-title { font-family: var(--font-heading, inherit); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; color: var(--color-primary, #0f172a); margin: 0 0 1.5rem; } .tp-page-body { line-height: 1.7; color: var(--color-text, #1e293b); } .tp-page-body > *:first-child { margin-top: 0; } .tp-page-body p { margin: 0 0 1.25rem; } .tp-page-body h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-primary, #0f172a); margin: 2.5rem 0 1rem; } .tp-page-body h3 { font-size: 1.2rem; font-weight: 600; color: var(--color-primary, #0f172a); margin: 2rem 0 .75rem; } .tp-page-body ul, .tp-page-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; } .tp-page-body li { margin-bottom: .5rem; } .tp-page-body a { color: var(--color-accent, #6366f1); text-decoration: underline; } .tp-page-body a:hover { color: var(--color-accent-hover, #4f46e5); } .tp-page-body img { max-width: 100%; height: auto; border-radius: var(--radius-md, 10px); } /* ── Newsletter del footer: mensaje de suscripción ──────────────────────────── Feedback del formulario de newsletter del footer (éxito/error), tanto en el flujo AJAX como en el fallback sin JS. */ .tp-nl-form-msg { margin: .75rem 0 0; font-size: .875rem; line-height: 1.4; } .tp-nl-form-msg--error { color: var(--color-danger, #ef4444); } .tp-nl-form-msg--success { color: var(--color-success, #10b981); font-weight: 600; }