/* ============================================================ VitalMaster — Catálogo Digital Fondo blanco, color vivo por categoría, fotografía real, animaciones suaves. Pensado para adultos mayores: texto grande, alto contraste, botones amplios, navegación guiada. ============================================================ */ :root{ /* --- Color (tema claro, por defecto) — blanco cálido + color vivo, botánico --- */ --bg: #FFFEFA; --bg-soft: #F6F5EC; --surface: #FFFFFF; --surface-alt: #F1F3E4; --surface-alt-2: #E6EAD3; --ink: #1B1B14; --ink-strong: #10120C; --ink-soft: #5C5F4D; --ink-faint: #8E9179; --brand: #0E9A54; --brand-strong: #096B3A; --brand-bright: #22D98A; --brand-soft: #DEF5E5; --leaf: #22D98A; --accent: #E2643B; --accent-strong: #C24A24; --accent-ink: #6B2A0F; --accent-soft: #FBE2D5; --gold: #D9A441; --gold-strong: #B7822A; --gold-soft: #FBEECB; --coral: #F2683C; --coral-soft: #FDE3D6; --sky: #2D8FE0; --sky-soft: #DFEEFC; --line: #ECE9DA; --line-strong: #D9D4BE; --danger: #E0475A; --danger-soft: #FDE3E7; --shadow: 0 2px 8px rgba(30,25,10,.06), 0 12px 28px -14px rgba(30,25,10,.16); --shadow-lift: 0 22px 44px -16px rgba(30,25,10,.28); --hero-grad: linear-gradient(120deg, #096B3A 0%, #0E9A54 45%, #D9A441 130%); --radius-sm: 12px; --radius: 20px; --radius-lg: 30px; --fs-body: 1.28rem; --fs-small: 1.08rem; --fs-tiny: 0.94rem; --fs-lg: 1.55rem; --fs-xl: 2rem; --fs-2xl: 2.7rem; --fs-hero: clamp(2.7rem, 6.2vw, 4.3rem); --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif; --tap: 56px; --ease-bounce: cubic-bezier(.34,1.56,.64,1); color-scheme: light; } /* El catálogo NUNCA cambia a tema oscuro — ni por el sistema operativo del visitante, ni por ningún atributo que una plataforma de visualización externa pudiera aplicar sobre . El negocio pidió explícitamente fondos claros en todas partes, siempre, sin excepción — por eso este archivo no define ningún bloque de colores oscuros en absoluto. */ :root{color-scheme: light only;} *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; width:100%;} body{ margin:0; overflow-x:hidden; width:100%; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.55; padding-inline:0; } img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;} h1,h2,h3,h4{font-family:var(--font-display); text-wrap:balance; margin:0; color:var(--ink);} p{margin:0;} :focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:6px;} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .shell{max-width:1220px; margin-inline:auto; padding-inline:22px;} /* ---------------- Top bar ---------------- */ .topbar{ position:sticky; top:0; z-index:40; background:rgba(255,254,250,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:3px solid var(--brand-soft); } .topbar-inner{ max-width:1220px; margin-inline:auto; padding:16px 22px; display:flex; align-items:center; gap:18px; justify-content:space-between; } .brand-mark{display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:none; padding:4px; border-radius:var(--radius-sm); transition:transform .2s var(--ease-bounce);} .brand-mark:hover{transform:scale(1.03) rotate(-1deg);} .brand-mark svg{width:50px; height:50px; flex:none;} .brand-mark .brand-logo-img{width:50px; height:50px; flex:none; object-fit:contain;} .brand-mark .brand-text{display:flex; flex-direction:column; text-align:left; line-height:1.12;} .brand-mark .brand-name{font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--ink-strong);} .brand-mark .brand-tag{font-size:.86rem; font-style:italic; color:var(--brand-strong); font-weight:600;} .topbar-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;} @media (max-width:980px){ .topbar-inner{gap:10px; padding-block:12px;} .brand-mark .brand-tag{display:none;} .topbar-actions{gap:8px;} .icon-btn{padding-inline:12px; font-size:.95rem;} .icon-btn .icon-btn-label{display:none;} } @media (max-width:560px){ .brand-mark .brand-name{font-size:1.25rem;} .brand-mark svg, .brand-mark .brand-logo-img{width:38px; height:38px;} .icon-btn{min-width:44px; min-height:44px; padding-inline:10px;} } .icon-btn{ min-height:var(--tap); min-width:var(--tap); display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; border:2px solid var(--line-strong); background:var(--surface); font-size:1.05rem; font-weight:800; color:var(--ink); cursor:pointer; padding-inline:18px; transition:transform .15s var(--ease-bounce), background .15s ease, border-color .15s ease, box-shadow .15s ease; } .icon-btn svg{width:22px; height:22px; flex:none;} .icon-btn:hover{background:var(--brand-soft); transform:translateY(-2px) scale(1.02); border-color:var(--brand); box-shadow:var(--shadow);} .cart-btn{ background:var(--brand); color:#fff; border-color:var(--brand); position:relative; box-shadow:0 10px 22px -8px color-mix(in srgb, var(--brand) 75%, transparent); } .cart-btn:hover{background:var(--brand-strong); border-color:var(--brand-strong);} .cart-count{ position:absolute; top:-9px; right:-9px; background:var(--accent); color:#fff; font-size:.82rem; font-weight:800; min-width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:2.5px solid var(--surface); animation:popIn .35s var(--ease-bounce); } .theme-toggle{padding-inline:12px;} .header-search{position:relative;} .header-search-panel{ position:absolute; top:calc(100% + 10px); right:0; z-index:50; width:min(340px, 90vw); background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:10px; display:flex; gap:8px; opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none; transition:opacity .2s var(--ease-bounce), transform .2s var(--ease-bounce); } .header-search-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;} .header-search-panel input{ flex:1; min-height:44px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:0 14px; font-size:var(--fs-small); background:var(--surface-alt); color:var(--ink); } .header-search-panel input:focus{outline:none; border-color:var(--brand);} .header-search-panel button{ min-width:44px; min-height:44px; border-radius:var(--radius-sm); border:none; background:var(--brand); color:#fff; font-size:1.2rem; font-weight:800; cursor:pointer; } .header-search-panel button:hover{background:var(--brand-strong);} /* ---------------- Menú principal: cápsulas de color por categoría ---------------- */ .main-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 22px; max-width:1220px; margin-inline:auto; } .nav-pill{ flex:none; display:inline-flex; align-items:center; gap:9px; padding:9px 18px 9px 9px; font-size:var(--fs-small); font-weight:800; color:var(--ink); text-decoration:none; white-space:nowrap; border-radius:999px; background:var(--surface-alt); border:1.5px solid transparent; transition:transform .18s var(--ease-bounce), background .18s ease, box-shadow .18s ease, color .18s ease; } .nav-pill:hover{transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow);} .nav-pill.is-home{padding-inline:18px; background:var(--ink); color:#fff;} .nav-pill.is-home svg{width:17px; height:17px;} .nav-pill.is-home:hover{background:var(--ink-strong);} .nav-pill-icon{ width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--cat-color); color:#fff; flex:none; box-shadow:0 4px 10px -4px color-mix(in srgb, var(--cat-color) 70%, transparent); } .nav-pill-icon svg{width:17px; height:17px;} .nav-pill:not(.is-home):not(.nav-pill-outline):hover{background:color-mix(in srgb, var(--cat-color) 16%, white);} .nav-pill-outline{background:transparent; border-color:var(--line-strong); color:var(--ink-soft);} .nav-pill-outline svg{width:17px; height:17px; color:var(--ink-faint);} .nav-pill-outline:hover{border-color:var(--ink); color:var(--ink-strong); background:var(--surface-alt);} /* ---------------- Guided steps rail ---------------- */ .steps{ display:flex; align-items:center; justify-content:center; gap:6px; background:var(--bg-soft); padding:10px 14px; font-size:var(--fs-small); color:var(--ink-soft); border-bottom:1px solid var(--line); flex-wrap:wrap; } .steps b{color:var(--ink-strong);} .steps .sep{color:var(--line-strong);} /* ---------------- Hero: manchas de color animadas + fotografía ---------------- */ .hero{ padding-block:44px 70px; position:relative; overflow:hidden; isolation:isolate; } .hero-blobs{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;} .hero-blobs span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.4; animation:blobDrift 16s ease-in-out infinite;} .hero-blobs span:nth-child(1){width:420px; height:420px; background:var(--brand); top:-160px; right:-100px; animation-delay:0s;} .hero-blobs span:nth-child(2){width:320px; height:320px; background:var(--accent); bottom:-140px; left:-80px; animation-delay:-5s;} .hero-blobs span:nth-child(3){width:260px; height:260px; background:var(--coral); top:40%; right:20%; opacity:.22; animation-delay:-9s;} @keyframes blobDrift{ 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(24px,-18px) scale(1.08);} 66%{transform:translate(-18px,14px) scale(.95);} } .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; padding:8px 18px; border-radius:999px; font-size:var(--fs-tiny); font-weight:800; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 10px 22px -10px color-mix(in srgb, var(--brand) 70%, transparent); animation:popIn .5s var(--ease-bounce); } .hero-eyebrow svg{width:16px; height:16px;} .hero-inner{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; position:relative;} @media (max-width:820px){ .hero-inner{grid-template-columns:1fr;} } .hero h1{font-size:var(--fs-hero); font-weight:600; color:var(--ink-strong); margin-top:16px; line-height:1.12;} .hero h1 em{font-style:italic; color:var(--coral); position:relative; display:inline;} .hero .lede{margin-top:14px; font-size:var(--fs-lg); color:var(--ink-soft); max-width:52ch; min-height:3.4em;} .hero h1{min-height:2.3em;} .hero-art{display:flex; align-items:center; justify-content:center; position:relative;} .hero-art svg{width:min(300px,85%); height:auto; filter:drop-shadow(0 20px 34px rgba(30,86,49,.22));} @keyframes heroFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-12px) rotate(var(--r,0deg));}} .hero-photo-grid{position:relative; width:min(460px,100%); aspect-ratio:1/1;} .hero-photo-grid .hp-main{ position:absolute; width:66%; aspect-ratio:1/1; top:4%; left:0; border-radius:26px; overflow:hidden; box-shadow:0 26px 50px -16px rgba(20,30,15,.3); border:6px solid var(--surface); transform:rotate(-4deg); animation:heroFloat 6s ease-in-out infinite; --r:-4deg; } .hero-photo-grid .hp-main img{width:100%; height:100%; object-fit:cover;} .hp-clickable{cursor:pointer; transition:transform .2s var(--ease-bounce);} .hp-clickable:hover{transform:scale(1.04);} .hero-photo-grid .hp-side{ position:absolute; width:48%; aspect-ratio:1/1; bottom:2%; right:0; border-radius:22px; overflow:hidden; box-shadow:0 20px 40px -14px rgba(20,30,15,.28); border:6px solid var(--surface); z-index:2; transform:rotate(5deg); animation:heroFloat 7s ease-in-out infinite 1s; --r:5deg; } .hero-photo-grid .hp-side img{width:100%; height:100%; object-fit:cover;} .hero-photo-grid .hp-deco{position:absolute; width:32%; top:-8%; right:10%; z-index:3; filter:drop-shadow(0 10px 16px rgba(30,24,12,.2)); animation:heroFloat 5s ease-in-out infinite; --r:8deg;} .hero-photo-grid .hp-ring{position:absolute; inset:-8%; border-radius:50%; border:3px dashed var(--line-strong); z-index:0; animation:spin 40s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .hero-photo-grid .hp-badge{ position:absolute; left:-6%; bottom:14%; z-index:4; background:var(--accent); color:var(--accent-ink); width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:.78rem; line-height:1.15; box-shadow:0 14px 26px -10px rgba(0,0,0,.3); border:4px solid var(--surface); animation:spin 22s linear infinite; } .hero-photo-grid .hp-badge span{display:block; animation:spin 22s linear infinite reverse;} .hero-cta{margin-top:20px;} #heroTextSlide, #heroArtSlide{animation:none; opacity:1;} #heroTextSlide.slide-in{animation:heroTextIn .5s var(--ease-bounce);} #heroArtSlide.slide-in{animation:heroArtIn .55s var(--ease-bounce);} @keyframes heroTextIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}} @keyframes heroArtIn{from{opacity:0; transform:scale(.94) translateY(8px);} to{opacity:1; transform:scale(1) translateY(0);}} .hero-dots{display:flex; gap:8px; justify-content:center; margin-top:26px; position:relative; z-index:2;} .hero-dot{width:10px; height:10px; border-radius:999px; border:none; background:var(--line-strong); cursor:pointer; padding:0; transition:all .25s var(--ease-bounce);} .hero-dot:hover{background:var(--accent);} .hero-dot.active{width:28px; background:var(--brand);} .hero-badges{display:flex; gap:22px; margin-top:22px; flex-wrap:wrap;} .hero-badge{display:flex; align-items:center; gap:8px; font-size:var(--fs-tiny); font-weight:700; color:var(--ink-soft);} .hero-badge .hb-icon{width:30px; height:30px; border-radius:999px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--brand); flex:none; box-shadow:var(--shadow);} .hero-badge .hb-icon svg{width:16px; height:16px;} .stat-row{display:flex; gap:32px; margin-top:28px; flex-wrap:wrap;} .stat-item .stat-num{font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700; color:var(--ink-strong); font-variant-numeric:tabular-nums; line-height:1;} .stat-item .stat-label{font-size:var(--fs-tiny); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-top:4px;} /* ---------------- Search: the guided entry point ---------------- */ .search-card{ margin-top:34px; position:relative; z-index:2; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:0 28px 56px -22px rgba(20,30,15,.22); } .search-card label{display:block; font-weight:800; font-size:var(--fs-lg); color:var(--ink-strong); margin-bottom:10px;} .search-row{display:flex; gap:10px; flex-wrap:wrap;} .search-row input{ flex:1 1 240px; min-height:var(--tap); border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); padding:0 18px; font-size:var(--fs-lg); background:var(--surface); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; } .search-row input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);} .search-row input::placeholder{color:var(--ink-faint);} .search-row button{ min-height:var(--tap); background:var(--brand); color:#fff; border:none; border-radius:var(--radius-sm); font-size:var(--fs-lg); font-weight:800; padding-inline:26px; cursor:pointer; transition:transform .15s var(--ease-bounce), background .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:9px; box-shadow:0 10px 20px -10px color-mix(in srgb, var(--brand) 70%, transparent); } .search-row button svg{width:22px; height:22px;} .search-row button:hover{background:var(--brand-strong); transform:translateY(-2px) scale(1.02);} .search-hints{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink-soft); align-items:center;} .chip-hint{ border:1.5px solid var(--line-strong); background:var(--surface-alt); border-radius:999px; padding:8px 16px; cursor:pointer; color:var(--ink); font-size:var(--fs-small); font-weight:700; transition:transform .15s var(--ease-bounce), border-color .12s ease, color .12s ease, background .12s ease; } .chip-hint:hover{border-color:var(--brand); color:var(--brand-strong); background:var(--brand-soft); transform:translateY(-2px) scale(1.03);} /* ---------------- Mode tabs: paquetes / productos / buscar ---------------- */ .mode-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px;} @media (max-width:640px){ .mode-tabs{grid-template-columns:1fr;} } .mode-tab{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px 16px; text-align:left; cursor:pointer; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); transition:transform .18s var(--ease-bounce), box-shadow .18s ease, border-color .18s ease; } .mode-tab:hover{transform:translateY(-4px) scale(1.015); box-shadow:var(--shadow-lift); border-color:var(--brand);} .mode-tab .mt-icon{flex:none; width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease-bounce);} .mode-tab:hover .mt-icon{transform:rotate(-8deg) scale(1.08);} .mode-tab .mt-icon svg{width:29px; height:29px;} .mode-tab.pkg .mt-icon{background:var(--brand); color:#fff;} .mode-tab.prod .mt-icon{background:var(--accent); color:var(--accent-ink);} .mode-tab.search .mt-icon{background:var(--sky); color:#fff;} .mode-tab .mt-title{font-weight:800; font-size:var(--fs-body); color:var(--ink);} .mode-tab .mt-sub{font-size:var(--fs-tiny); color:var(--ink-faint);} /* ---------------- Section headings ---------------- */ .section{padding-block:40px;} .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;} .section-head h2{font-size:var(--fs-2xl); color:var(--ink-strong); font-weight:600;} .icon-h2{display:flex; align-items:center; gap:10px;} .icon-h2 svg{width:1em; height:1em; flex:none;} .section-head .eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-tiny); letter-spacing:.06em; text-transform:uppercase; color:var(--brand-strong); font-weight:800; margin-bottom:6px; background:var(--brand-soft); padding:4px 12px; border-radius:999px;} .section-sub{color:var(--ink-soft); font-size:var(--fs-small); max-width:60ch;} .see-all{font-weight:800; color:var(--accent-strong); white-space:nowrap; text-decoration:none; border-bottom:2px solid var(--accent-soft); transition:border-color .15s ease, transform .15s ease; display:inline-block;} .see-all:hover{border-color:var(--accent); transform:translateX(3px);} /* ---------------- Package cards (priority) ---------------- */ .pkg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;} .pkg-card{ --cat-color: var(--brand); background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-lg); padding:0; display:flex; flex-direction:column; box-shadow:var(--shadow); overflow:hidden; cursor:pointer; text-align:left; transition:transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease; } .pkg-card:hover{box-shadow:var(--shadow-lift); transform:translateY(-6px); border-color:var(--cat-color);} .pkg-media{aspect-ratio:16/10; width:100%; display:flex; overflow:hidden; background:color-mix(in srgb, var(--cat-color) 14%, var(--surface-alt)); position:relative;} .pkg-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;} .pkg-card:hover .pkg-media img{transform:scale(1.06);} .pkg-media-2 img{width:50%; border-right:3px solid var(--surface);} .pkg-media-0{align-items:center; justify-content:center;} .pkg-media-0 .ph-icon{width:34%; height:34%; color:var(--cat-color); opacity:.85;} .pkg-media-0 .ph-icon svg{width:100%; height:100%;} .pkg-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; border-top:5px solid var(--cat-color);} .pkg-card .pkg-icon{ width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--cat-color); color:#fff; margin-top:-44px; position:relative; z-index:1; box-shadow:0 8px 18px -6px rgba(0,0,0,.32); border:3px solid var(--surface); } .pkg-card .pkg-icon svg{width:25px; height:25px;} .pkg-card h3{font-size:var(--fs-lg); font-weight:700; color:var(--ink-strong);} .pkg-card .pkg-condition{color:var(--cat-color); font-weight:800; font-size:var(--fs-small);} .pkg-disease-tags{display:flex; flex-wrap:wrap; gap:6px;} .mini-tag{background:color-mix(in srgb, var(--cat-color) 14%, white); color:color-mix(in srgb, var(--cat-color) 75%, black); font-weight:700; font-size:.78rem; padding:3px 10px; border-radius:999px;} .mini-tag-more{background:var(--surface-alt-2); color:var(--ink-soft);} .pkg-card .pkg-desc{color:var(--ink); font-size:var(--fs-small); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} .pkg-card .pkg-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;} .price-tag{background:var(--accent-soft); color:var(--accent-ink); font-weight:800; font-size:var(--fs-lg); padding:6px 14px; border-radius:999px; font-variant-numeric:tabular-nums;} .pkg-card .badge-cancer{background:var(--danger-soft); color:var(--danger); font-weight:800; font-size:var(--fs-tiny); padding:4px 10px; border-radius:999px; align-self:flex-start;} .pkg-card .btn-primary{background:var(--cat-color);} .pkg-card .btn-primary:hover{background:color-mix(in srgb, var(--cat-color) 80%, black);} /* ---------------- Macro-categorías: tiles grandes tipo "bento" ---------------- */ .macro-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px;} .macro-card{ --cat-color:#13A455; background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); position:relative; overflow:hidden; min-height:260px; transition:transform .3s var(--ease-bounce), box-shadow .3s ease, border-color .3s ease; } .macro-card::before{ content:""; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:color-mix(in srgb, var(--cat-color) 16%, transparent); transition:transform .4s ease; } .macro-card:hover::before{transform:scale(1.15);} .macro-card-art{ position:absolute; right:-14px; bottom:-14px; width:150px; height:150px; object-fit:contain; opacity:.4; pointer-events:none; z-index:0; filter:drop-shadow(0 8px 14px rgba(0,0,0,.14)); transition:transform .35s var(--ease-bounce), opacity .3s ease; } .macro-card:hover .macro-card-art{opacity:.65;} .macro-card:hover .macro-card-art{transform:scale(1.1) rotate(-4deg) translateY(-4px);} .macro-card:hover{transform:translateY(-8px) rotate(-.4deg); box-shadow:var(--shadow-lift); border-color:var(--cat-color);} .macro-icon{ width:72px; height:72px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:var(--cat-color); color:#fff; position:relative; z-index:1; box-shadow:0 12px 24px -8px color-mix(in srgb, var(--cat-color) 70%, transparent); transition:transform .3s var(--ease-bounce); } .macro-card:hover .macro-icon{transform:rotate(-10deg) scale(1.08);} .macro-icon svg{width:34px; height:34px;} .macro-name{font-family:var(--font-display); font-weight:700; font-size:var(--fs-xl); color:var(--ink-strong); position:relative; z-index:1;} .macro-sub{font-size:var(--fs-tiny); color:var(--cat-color); font-weight:800; position:relative; z-index:1;} .macro-count{font-size:var(--fs-tiny); color:var(--ink-faint); margin-top:auto; padding-top:8px; position:relative; z-index:1; font-weight:700;} /* ---------------- Category grid — círculos "Shop by Nature" ---------------- */ .cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:24px 14px;} .cat-card{ --cat-color:#13A455; background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; transition:transform .2s var(--ease-bounce); } .cat-card:hover{transform:translateY(-5px) scale(1.04);} .cat-card:hover .cat-icon{box-shadow:0 16px 28px -10px color-mix(in srgb, var(--cat-color) 70%, transparent);} .cat-card .cat-icon{ background:var(--cat-color); width:80px; height:80px; border-radius:999px; border:4px solid var(--surface); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--shadow); transition:box-shadow .2s ease, transform .3s var(--ease-bounce); } .cat-card:hover .cat-icon{transform:rotate(-8deg);} .cat-card .cat-icon svg{width:32px; height:32px;} .cat-card .cat-name{font-weight:800; font-size:var(--fs-small); color:var(--ink); line-height:1.2;} .cat-card .cat-count{font-size:var(--fs-tiny); color:var(--ink-faint);} /* ---------------- Product grid & cards ---------------- */ .prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;} .prod-card{ --cat-color: var(--brand); background:var(--surface); border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; text-align:left; box-shadow:var(--shadow); transition:transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease; } .prod-card:hover{box-shadow:var(--shadow-lift); transform:translateY(-6px); border-color:var(--cat-color);} .prod-media{aspect-ratio:1/1; width:100%; background:color-mix(in srgb, var(--cat-color) 14%, var(--surface-alt)); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;} .prod-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;} .prod-card:hover .prod-media img{transform:scale(1.08);} .prod-media .ph-icon{width:44%; height:44%; color:var(--cat-color); opacity:.85;} .prod-media .ph-icon svg{width:100%; height:100%;} .new-flag{position:absolute; top:10px; left:10px; background:var(--coral); color:#fff; font-weight:800; font-size:var(--fs-tiny); padding:4px 10px; border-radius:999px; box-shadow:0 6px 14px -6px rgba(0,0,0,.3);} .prod-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; border-top:4px solid var(--cat-color);} .prod-body h3{font-size:var(--fs-body); font-weight:800;} .prod-body .prod-cat{font-size:var(--fs-tiny); color:var(--cat-color); text-transform:uppercase; letter-spacing:.04em; font-weight:800;} .prod-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;} .prod-card .btn-ghost{background:color-mix(in srgb, var(--cat-color) 12%, white); color:color-mix(in srgb, var(--cat-color) 75%, black); border-color:transparent;} .prod-card .btn-ghost:hover{background:var(--cat-color); color:#fff;} /* ---------------- Carrusel interactivo (home: productos destacados) ---------------- */ .carousel-wrap{position:relative; display:flex; align-items:center; gap:10px;} .carousel-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-block:4px 12px; flex:1; min-width:0; } .carousel-track::-webkit-scrollbar{height:8px;} .carousel-track::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px;} .carousel-track .prod-card{flex:0 0 240px; scroll-snap-align:start;} .carousel-arrow{ flex:none; width:44px; height:44px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:background .15s ease, color .15s ease, transform .15s ease; } .carousel-arrow svg{width:20px; height:20px;} .carousel-arrow:hover:not(:disabled){background:var(--brand); color:#fff; transform:scale(1.06);} .carousel-arrow:disabled{opacity:.35; cursor:default;} @media (max-width:700px){ .carousel-arrow{display:none;} } /* ---------------- Home: banda "busca por tu condición" ---------------- */ .condition-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;} .condition-card{ --cond-color:#13A455; display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface); border:2px solid var(--line); border-radius:var(--radius); cursor:pointer; text-align:left; box-shadow:var(--shadow); transition:transform .2s var(--ease-bounce), box-shadow .2s ease, border-color .2s ease; border-left:5px solid var(--cond-color); } .condition-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--cond-color);} .condition-card .cc-icon{ flex:none; width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--cond-color) 16%, white); color:var(--cond-color); } .condition-card .cc-icon svg{width:24px; height:24px;} .condition-card .cc-text{display:flex; flex-direction:column; gap:2px;} .condition-card .cc-label{font-weight:800; color:var(--ink-strong);} .condition-card .cc-sub{font-size:var(--fs-tiny); color:var(--ink-soft);} /* ---------------- Hojas/PNG grandes con parallax, de fondo en TODA la página ---------------- */ .mega-leaf-host{position:relative; overflow:hidden;} .mega-leaf{ position:absolute; z-index:0; pointer-events:none; will-change:transform; opacity:.8; filter:drop-shadow(0 20px 30px rgba(20,40,15,.12)); } .mega-leaf-host > *:not(.mega-leaf){position:relative; z-index:1;} .mega-leaf-a{width:420px; top:-60px; right:-90px;} .mega-leaf-b{width:380px; top:10%; left:-100px;} .mega-leaf-c{width:400px; bottom:-80px; right:-110px;} @media (max-width:860px){ .mega-leaf{opacity:.55;} .mega-leaf-a{width:260px; top:-30px; right:-90px;} .mega-leaf-b{width:240px; left:-90px;} .mega-leaf-c{width:240px; bottom:-40px; right:-90px;} } @media (prefers-reduced-motion: reduce){ .mega-leaf{display:none;} } /* ---------------- Banners grandes de tratamientos (estilo hero, al final de listados) ---------------- */ .tmt-banner-col{display:flex; flex-direction:column; gap:22px;} .tmt-banner{ display:grid; grid-template-columns:1.3fr 1fr; align-items:stretch; min-height:220px; background:linear-gradient(120deg, color-mix(in srgb, var(--cat-color) 16%, white) 0%, var(--surface) 60%); border:2px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease; } .tmt-banner:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--cat-color);} .tmt-banner-flip{grid-template-columns:1fr 1.3fr;} .tmt-banner-flip .tmt-banner-media{order:-1;} .tmt-banner-text{display:flex; flex-direction:column; justify-content:center; gap:12px; padding:32px 34px;} .tmt-eyebrow{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--cat-color); color:#fff; font-weight:800; font-size:var(--fs-tiny); padding:6px 14px; border-radius:999px; } .tmt-eyebrow svg{width:15px; height:15px;} .tmt-banner-text h3{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--ink-strong); line-height:1.15;} .tmt-banner-text p{color:var(--ink-soft); font-size:var(--fs-small); max-width:46ch;} .tmt-banner-text .btn{align-self:flex-start; margin-top:4px;} .tmt-banner-media{position:relative; min-height:180px; background:color-mix(in srgb, var(--cat-color) 10%, var(--surface-alt));} .tmt-banner-media img{width:100%; height:100%; object-fit:cover;} .tmt-banner-media-ph{display:flex; align-items:center; justify-content:center;} .tmt-banner-media-ph .ph-icon{width:34%; height:34%; color:var(--cat-color); opacity:.85;} .tmt-banner-media-ph .ph-icon svg{width:100%; height:100%;} @media (max-width:760px){ .tmt-banner, .tmt-banner-flip{grid-template-columns:1fr;} .tmt-banner-flip .tmt-banner-media{order:0;} .tmt-banner-media{min-height:160px;} } /* ---------------- Cross-sell row ---------------- */ .xsell-row{display:flex; gap:14px; overflow-x:auto; padding-block:4px 10px; scroll-snap-type:x proximity;} .xsell-row::-webkit-scrollbar{height:8px;} .xsell-row::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px;} .xsell-card{ --cat-color: var(--brand); flex:0 0 190px; scroll-snap-align:start; background:var(--surface); border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform .2s var(--ease-bounce), box-shadow .2s ease, border-color .2s ease; } .xsell-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--cat-color);} .xsell-card .xs-media{aspect-ratio:1/1; background:color-mix(in srgb, var(--cat-color) 14%, var(--surface-alt)); display:flex; align-items:center; justify-content:center; overflow:hidden;} .xsell-card .xs-media img{width:100%; height:100%; object-fit:cover;} .xsell-card .xs-media .ph-icon{width:38%; height:38%; color:var(--cat-color); opacity:.85;} .xsell-card .xs-media .ph-icon svg{width:100%; height:100%;} .xsell-card .xs-body{padding:10px 12px 12px; border-top:4px solid var(--cat-color);} .xsell-card .xs-name{font-weight:800; font-size:var(--fs-small); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;} .xsell-card .xs-price{color:var(--accent-ink); font-weight:800; font-size:var(--fs-small); margin-top:4px; font-variant-numeric:tabular-nums;} /* ---------------- Buttons ---------------- */ .btn{ min-height:var(--tap); border-radius:var(--radius-sm); border:none; cursor:pointer; font-weight:800; font-size:var(--fs-body); padding-inline:20px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s var(--ease-bounce), background .15s ease, box-shadow .15s ease; } .btn:active{transform:scale(.97);} .btn-primary{background:var(--brand); color:#fff; box-shadow:0 12px 24px -10px color-mix(in srgb, var(--brand) 75%, transparent);} .btn-primary:hover{background:var(--brand-strong); transform:translateY(-3px) scale(1.02); box-shadow:0 16px 30px -10px color-mix(in srgb, var(--brand) 75%, transparent);} .btn-accent{background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 20px -10px color-mix(in srgb, var(--accent) 60%, transparent);} .btn-accent:hover{background:var(--accent-strong); transform:translateY(-2px);} .btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--ink);} .btn-outline:hover{background:var(--ink); color:var(--surface);} .btn-ghost{background:var(--surface-alt); color:var(--ink); border:1.5px solid var(--line-strong);} .btn-ghost:hover{background:var(--surface-alt-2);} .btn-block{width:100%;} .btn-lg{min-height:64px; font-size:var(--fs-lg); border-radius:var(--radius); padding-inline:26px;} .btn:disabled{opacity:.5; cursor:not-allowed; transform:none;} /* ---------------- Breadcrumb / back ---------------- */ .back-row{display:flex; align-items:center; gap:14px; padding-block:18px 6px; flex-wrap:wrap;} .back-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--surface-alt); border:1.5px solid var(--line-strong); border-radius:999px; padding:10px 18px; font-weight:800; cursor:pointer; color:var(--ink); min-height:48px; transition:transform .15s var(--ease-bounce), background .15s ease; } .back-btn:hover{background:var(--surface-alt-2); transform:translateX(-3px);} .crumbs{color:var(--ink-faint); font-size:var(--fs-small);} /* ---------------- Detail view ---------------- */ .detail-wrap{position:relative; overflow:visible;} .product-blobs{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; border-radius:var(--radius-lg);} .product-blobs span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.28; background:var(--cat-color, var(--brand)); animation:blobDrift 18s ease-in-out infinite;} .product-blobs span:nth-child(1){width:360px; height:360px; top:-140px; left:-100px;} .product-blobs span:nth-child(2){width:300px; height:300px; bottom:-120px; right:-80px; animation-delay:-7s; opacity:.2;} .ingredient-showcase{margin-top:0;} .ingredient-carousel-wrap{display:flex; align-items:center; gap:12px; margin-top:6px;} .ingredient-row{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-block:6px 14px; flex:1; min-width:0; } .ingredient-row::-webkit-scrollbar{height:8px;} .ingredient-row::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px;} .ingredient-chip{display:flex; flex-direction:column; align-items:center; gap:10px; width:168px; flex:0 0 168px; text-align:center; scroll-snap-align:start;} .ingredient-chip-img{ width:168px; height:168px; border-radius:50%; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:20px; box-shadow:var(--shadow); border:3px solid var(--line); transition:transform .25s var(--ease-bounce); } .ingredient-chip:hover .ingredient-chip-img{transform:scale(1.08) rotate(-4deg); border-color:var(--cat-color, var(--brand));} .ingredient-chip-img img{width:100%; height:100%; object-fit:contain;} .ingredient-chip span{font-weight:800; font-size:var(--fs-body); color:var(--ink);} .detail-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; padding-block:14px 40px;} @media (max-width:860px){ .detail-grid{grid-template-columns:1fr;} } .detail-media{ background:color-mix(in srgb, var(--cat-color, var(--brand)) 14%, var(--surface-alt)); border-radius:var(--radius-lg); aspect-ratio:1/1; max-height:520px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:sticky; top:150px; border:2px solid var(--line); box-shadow:var(--shadow); } @media (max-width:860px){ .detail-media{position:static; max-height:none;} } .detail-media img{width:100%; height:100%; object-fit:cover;} .media-carousel{width:100%; height:100%; position:relative;} .media-carousel #mediaMain{width:100%; height:100%; object-fit:cover;} .media-dots{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:2; background:rgba(0,0,0,.28); padding:8px 12px; border-radius:999px; backdrop-filter:blur(2px);} .media-dot{width:14px; height:14px; border-radius:999px; border:2px solid #fff; background:rgba(255,255,255,.5); cursor:pointer; padding:0; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:all .2s var(--ease-bounce);} .media-dot.active{background:#fff; width:34px; border-radius:999px;} .media-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:999px; border:none; background:rgba(0,0,0,.42); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease, transform .15s var(--ease-bounce); } .media-arrow svg{width:22px; height:22px;} .media-arrow:hover{background:rgba(0,0,0,.62); transform:translateY(-50%) scale(1.08);} .media-arrow-prev{left:14px;} .media-arrow-next{right:14px;} .media-count-badge{ position:absolute; top:16px; right:16px; z-index:2; background:rgba(0,0,0,.55); color:#fff; font-weight:800; font-size:var(--fs-tiny); padding:6px 14px; border-radius:999px; display:flex; align-items:center; gap:6px; } .media-count-badge svg{width:16px; height:16px;} .detail-media .ph-icon{width:38%; height:38%; color:var(--cat-color, var(--brand)); opacity:.85;} .detail-media .ph-icon svg{width:100%; height:100%;} .detail-media-gallery{display:grid; gap:4px; padding:4px;} .detail-media-gallery.gallery-1{grid-template-columns:1fr;} .detail-media-gallery.gallery-2{grid-template-columns:1fr 1fr;} .detail-media-gallery.gallery-3{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;} .detail-media-gallery.gallery-3 img:first-child{grid-row:span 2;} .detail-media-gallery.gallery-4{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;} .detail-media-gallery img{width:100%; height:100%; object-fit:cover; border-radius:calc(var(--radius-lg) - 8px); cursor:zoom-in;} .included-thumb{width:34px; height:34px; border-radius:9px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); flex:none; color:var(--cat-color, var(--brand));} .included-thumb img{width:100%; height:100%; object-fit:cover;} .included-thumb svg{width:20px; height:20px;} .detail-cat-pill{display:inline-flex; align-items:center; gap:8px; background:var(--cat-color, var(--brand)); color:#fff; font-weight:800; font-size:var(--fs-small); padding:6px 14px; border-radius:999px;} .detail-cat-pill svg{width:18px; height:18px; flex:none;} .detail-title{font-size:var(--fs-2xl); margin-top:14px; font-weight:600; color:var(--ink-strong);} .detail-phrase{font-style:italic; color:var(--accent-strong); font-size:var(--fs-lg); margin-top:6px;} .detail-price{font-size:var(--fs-2xl); color:var(--accent-ink); background:var(--accent-soft); display:inline-block; padding:8px 20px; border-radius:var(--radius-sm); font-weight:800; margin-top:16px; font-variant-numeric:tabular-nums;} .detail-price-note{font-size:var(--fs-tiny); color:var(--danger); margin-top:6px; max-width:60ch;} .detail-sections{position:relative; z-index:1; padding-block:0 50px; display:flex; flex-direction:column; gap:8px;} .detail-cols-2{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;} @media (max-width:860px){ .detail-cols-2{grid-template-columns:1fr;} } .detail-block{ margin-top:26px; position:relative; background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-lg); padding:24px 26px; box-shadow:var(--shadow); } .detail-block h4{font-size:var(--fs-xl); color:var(--ink-strong); font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:10px; position:relative; z-index:1;} .detail-block h4 svg{width:1em; height:1em; flex:none; color:var(--cat-color, var(--brand));} .detail-block p{color:var(--ink-soft); max-width:none; position:relative; z-index:1; font-size:var(--fs-body);} .detail-format{margin-top:10px; font-size:var(--fs-small);} .detail-format strong{color:var(--ink-strong);} .empathy-note{ display:flex; gap:14px; align-items:flex-start; background:var(--brand-soft); border-radius:var(--radius); padding:16px 18px; margin-top:20px; border:1.5px solid color-mix(in srgb, var(--brand) 25%, transparent); } .empathy-note .en-icon{flex:none; width:34px; height:34px; border-radius:999px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;} .empathy-note .en-icon svg{width:18px; height:18px;} .empathy-note p{color:var(--brand-strong); font-weight:700; font-size:var(--fs-small); font-style:italic; margin:0;} .benefit-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .benefit-list li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-body);} .benefit-list .tick{color:var(--brand); flex:none; width:22px; height:22px; margin-top:2px;} .benefit-list .tick svg{width:100%; height:100%;} .tag-list{display:flex; flex-wrap:wrap; gap:8px;} .tag{background:var(--surface-alt); border:1px solid var(--line); color:var(--ink); font-size:var(--fs-small); padding:7px 14px; border-radius:999px;} .tag.cancer{background:var(--danger-soft); color:var(--danger); border-color:transparent; font-weight:700;} .included-list{display:flex; flex-direction:column; gap:10px;} .included-card{background:var(--surface-alt); border-radius:var(--radius-sm); border:1.5px solid transparent; transition:border-color .15s ease;} .included-card.open{border-color:var(--cat-color, var(--brand)); background:var(--surface);} .included-item{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:none; border-radius:var(--radius-sm); padding:12px 16px; cursor:pointer; transition:transform .15s var(--ease-bounce), background .15s ease; font-family:inherit; text-align:left; } .included-card:not(.open):hover .included-item{background:var(--surface-alt-2);} .included-item .name{font-weight:700; display:flex; align-items:center; gap:10px; color:var(--ink);} .included-item .name svg{width:20px; height:20px; color:var(--cat-color, var(--brand)); flex:none;} .included-toggle svg{width:14px; height:14px; margin-left:4px; transition:transform .2s ease;} .included-card.open .included-toggle svg{transform:rotate(180deg);} .included-panel{padding:0 18px 18px; display:flex; flex-direction:column; gap:10px;} .included-panel .ip-phrase{font-style:italic; color:var(--accent-strong); font-size:var(--fs-small);} .included-panel .ip-desc{color:var(--ink-soft); font-size:var(--fs-small);} .included-panel .ip-benefits{gap:6px;} .included-panel .ip-benefits li{font-size:var(--fs-small);} .included-panel .ip-price{font-weight:800; color:var(--accent-ink); font-size:var(--fs-lg);} .qty-row{display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap;} .quick-order-btn{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; width:100%; background:#25D366; border:none; cursor:pointer; color:#fff; min-height:52px; font-weight:800; font-size:var(--fs-small); padding:10px 18px; border-radius:var(--radius); box-shadow:0 10px 20px -10px rgba(37,211,102,.6); transition:transform .15s var(--ease-bounce), background .15s ease, box-shadow .15s ease; } .quick-order-btn svg{width:20px; height:20px; flex:none;} .quick-order-btn:hover{background:#1FB855; transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(37,211,102,.65);} .quick-order-btn:active{transform:scale(.97);} .qty-stepper{display:flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:999px; overflow:hidden;} .qty-stepper button{width:48px; height:48px; background:var(--surface-alt); border:none; font-size:1.4rem; font-weight:800; cursor:pointer; color:var(--ink); transition:background .15s ease;} .qty-stepper button:hover{background:var(--brand-soft); color:var(--brand-strong);} .qty-stepper .qty-val{width:46px; text-align:center; font-weight:800; font-size:var(--fs-lg); font-variant-numeric:tabular-nums;} .add-row{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;} .added-note{margin-top:12px; color:var(--brand-strong); font-weight:800; display:none; align-items:center; gap:8px; animation:popIn .3s var(--ease-bounce);} .added-note svg{color:var(--brand);} .added-note.show{display:flex;} /* ---------------- Cart drawer ---------------- */ .overlay{position:fixed; inset:0; background:rgba(10,15,8,.45); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease;} .overlay.open{opacity:1; pointer-events:auto;} .cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(440px,100%); background:var(--surface); z-index:61; box-shadow:-10px 0 30px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .3s var(--ease-bounce); display:flex; flex-direction:column; } .cart-drawer.open{transform:translateX(0);} .cart-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);} .cart-head h2{font-size:var(--fs-xl); color:var(--ink-strong);} .cart-close{width:44px; height:44px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface-alt); font-size:1.3rem; cursor:pointer; transition:transform .15s var(--ease-bounce), background .15s ease;} .cart-close:hover{background:var(--danger-soft); color:var(--danger); transform:rotate(90deg);} .cart-items{flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:14px;} .cart-empty{color:var(--ink-faint); text-align:center; padding-block:60px; font-size:var(--fs-lg);} .cart-empty svg{width:100%; height:100%;} .cart-item{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:14px;} .cart-item .ci-icon{width:52px; height:52px; background:var(--surface-alt); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--brand); flex:none;} .cart-item .ci-icon svg{width:26px; height:26px;} .cart-item .ci-icon img{width:100%; height:100%; object-fit:cover;} .cart-item .ci-name{font-weight:800; font-size:var(--fs-small);} .cart-item .ci-type{font-size:var(--fs-tiny); color:var(--ink-faint);} .cart-item .ci-price{font-size:var(--fs-tiny); color:var(--ink-soft); font-variant-numeric:tabular-nums;} .cart-item .ci-actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px;} .cart-item .qty-stepper button{width:38px; height:38px; font-size:1.1rem;} .cart-item .qty-stepper .qty-val{width:34px; font-size:var(--fs-small);} .remove-link{font-size:var(--fs-tiny); color:var(--danger); background:none; border:none; cursor:pointer; font-weight:700; text-decoration:underline;} .cart-foot{border-top:1px solid var(--line); padding:18px 20px 22px; display:flex; flex-direction:column; gap:12px;} .cart-total-row{display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-xl); font-weight:800;} .cart-total-row span:last-child{font-variant-numeric:tabular-nums; color:var(--accent-ink);} /* ---------------- Footer ---------------- */ footer{ background:linear-gradient(175deg, var(--brand-soft) 0%, var(--bg-soft) 55%); color:var(--ink); margin-top:50px; position:relative; overflow:hidden; border-top:5px solid var(--brand); } .footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; padding-block:44px; position:relative; z-index:1;} .footer-col h4{font-size:var(--fs-lg); color:var(--ink-strong); font-weight:800; margin-bottom:12px;} .footer-logo{display:block; height:60px; width:auto; margin-bottom:14px;} .footer-visit-btn{ display:flex; align-items:center; gap:8px; margin-top:14px; background:var(--brand); color:#fff; font-weight:800; font-size:var(--fs-small); line-height:1.3; padding:12px 18px; border-radius:var(--radius-sm); text-decoration:none; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); transition:transform .15s var(--ease-bounce), background .15s ease; width:fit-content; max-width:100%; } .footer-visit-btn:hover{background:var(--brand-strong); transform:translateY(-2px);} .footer-col p, .footer-col a{color:var(--ink-soft); font-size:var(--fs-body); text-decoration:none; display:block; margin-bottom:8px;} .footer-col a:hover{color:var(--brand-strong); text-decoration:underline;} .placeholder-box{ border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm); padding:12px 14px; font-size:var(--fs-small); color:var(--ink-faint); background:var(--surface); } .footer-bottom{border-top:1.5px solid var(--line-strong); text-align:center; padding:18px; font-size:var(--fs-small); color:var(--ink-soft); position:relative; z-index:1;} /* ---------------- Empty / results states ---------------- */ .empty-state{text-align:center; padding-block:60px; color:var(--ink-soft);} .empty-state .big{font-size:3rem; margin-bottom:12px;} .empty-state .big svg{width:100%; height:100%;} .result-count{color:var(--ink-soft); font-size:var(--fs-small); margin-bottom:14px;} /* ---------------- Banda de confianza (clara, con iconos de color) ---------------- */ .trust-wrap{position:relative; margin-top:8px;} .trust-band{background:var(--brand-soft); padding-block:38px 46px; border-block:2px solid var(--line);} .trust-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px;} .trust-item{display:flex; align-items:center; gap:14px; color:var(--ink);} .trust-item .ti-icon{width:58px; height:58px; border-radius:999px; background:var(--surface); box-shadow:var(--shadow); color:var(--brand-strong); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .3s var(--ease-bounce);} .trust-item:hover .ti-icon{transform:scale(1.1) rotate(-6deg);} .trust-item .ti-icon svg{width:28px; height:28px;} .trust-item .ti-title{font-weight:800; font-size:var(--fs-body); color:var(--ink-strong);} .trust-item .ti-sub{font-size:var(--fs-small); color:var(--ink-soft);} /* ---------------- Barra de filtros (catálogo de productos) ---------------- */ .filter-bar{ background:var(--surface); border:2px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:22px; box-shadow:var(--shadow); } .filter-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;} .filter-search{ flex:1 1 260px; display:flex; align-items:center; gap:10px; background:var(--surface-alt); border:1.5px solid var(--line); border-radius:999px; padding:0 16px; min-height:48px; transition:border-color .15s ease; } .filter-search:focus-within{border-color:var(--brand);} .filter-search svg{width:19px; height:19px; color:var(--ink-faint); flex:none;} .filter-search input{flex:1; border:none; background:none; font-size:var(--fs-small); color:var(--ink); min-height:44px;} .filter-search input:focus{outline:none;} .filter-sort{display:flex; align-items:center; gap:8px;} .filter-sort select{ border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); padding:10px 14px; font-size:var(--fs-small); font-weight:700; color:var(--ink); min-height:48px; cursor:pointer; } .filter-chips{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px;} .filter-chip{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line-strong); background:var(--surface); border-radius:999px; padding:8px 15px; font-size:var(--fs-tiny); font-weight:700; color:var(--ink-soft); cursor:pointer; transition:transform .15s var(--ease-bounce), background .12s ease, color .12s ease, border-color .12s ease; } .filter-chip svg{width:15px; height:15px;} .filter-chip:hover{transform:translateY(-2px) scale(1.03);} .filter-chip.active{background:var(--cat-color, var(--brand)); border-color:var(--cat-color, var(--brand)); color:#fff;} .filter-chip.clear{color:var(--danger); border-style:dashed;} .filter-count{font-size:var(--fs-tiny); color:var(--ink-faint); margin-top:12px;} /* ---------------- Pop-up de bienvenida ---------------- */ .welcome-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.94); z-index:71; width:min(480px, calc(100vw - 32px)); background:var(--surface); border-radius:var(--radius-lg); padding:32px 28px 28px; box-shadow:0 30px 70px -20px rgba(0,0,0,.4); text-align:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease-bounce), transform .3s var(--ease-bounce); } .welcome-modal.open{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;} .welcome-leaf{width:76px; height:76px; margin:0 auto 14px; border-radius:999px; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent);} .welcome-leaf svg{width:32px; height:32px; color:var(--brand);} .welcome-leaf img{width:50px; height:50px; object-fit:contain;} .welcome-modal h2{font-size:var(--fs-xl); color:var(--ink-strong);} .welcome-modal p{margin-top:10px; color:var(--ink-soft); font-size:var(--fs-small);} .welcome-search-row{display:flex; gap:8px; margin-top:16px;} .welcome-search-row input{ flex:1; min-height:52px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); padding:0 16px; font-size:var(--fs-small); background:var(--surface-alt); color:var(--ink); } .welcome-search-row input:focus{outline:none; border-color:var(--brand);} .welcome-search-row button{ min-width:52px; min-height:52px; border-radius:var(--radius-sm); border:none; background:var(--brand); color:#fff; font-size:1.3rem; font-weight:800; cursor:pointer; } .welcome-search-row button:hover{background:var(--brand-strong);} .welcome-options{display:flex; flex-direction:column; gap:10px; margin-top:18px;} .welcome-opt{ display:flex; align-items:center; gap:14px; text-align:left; border:1.5px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--surface-alt); cursor:pointer; transition:transform .18s var(--ease-bounce), border-color .15s ease, background .15s ease; } .welcome-opt:hover{transform:translateY(-3px) scale(1.015); border-color:var(--brand); background:var(--brand-soft);} .welcome-opt .wo-icon{width:44px; height:44px; border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; flex:none; color:var(--brand);} .welcome-opt .wo-icon svg{width:22px; height:22px;} .welcome-opt .wo-title{font-weight:800; font-size:var(--fs-small);} .welcome-opt .wo-sub{font-size:var(--fs-tiny); color:var(--ink-faint);} .welcome-skip{margin-top:16px; background:none; border:none; color:var(--ink-faint); font-size:var(--fs-tiny); text-decoration:underline; cursor:pointer;} @media (max-width:480px){ .welcome-modal{padding:26px 20px 22px;} } /* ---------------- Capa de hojas cayendo, fija en toda la página ---------------- */ main#app, footer{position:relative; z-index:2;} /* Franja de color de contexto: cambia según la categoría que se esté viendo */ .context-bar{height:6px; border-radius:999px; background:var(--cat-color, var(--brand)); margin-bottom:18px; max-width:120px;} /* ---------------- Lightbox: ver foto ampliada ---------------- */ .lightbox{ position:fixed; inset:0; z-index:80; background:rgba(10,15,8,.9); display:flex; align-items:center; justify-content:center; padding:30px; opacity:0; pointer-events:none; transition:opacity .25s ease; } .lightbox.open{opacity:1; pointer-events:auto;} .lightbox img{max-width:min(90vw,900px); max-height:85vh; width:auto; height:auto; border-radius:var(--radius); box-shadow:0 30px 70px -20px rgba(0,0,0,.6); object-fit:contain;} .lightbox-close{ position:absolute; top:20px; right:20px; width:48px; height:48px; border-radius:999px; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.3); color:#fff; font-size:1.3rem; cursor:pointer; transition:transform .15s var(--ease-bounce), background .15s ease; } .lightbox-close:hover{background:rgba(255,255,255,.25); transform:rotate(90deg);} /* ---------------- Botones flotantes: buscar y categorías (izquierda) ---------------- */ .fab-stack-left{position:fixed; left:20px; bottom:20px; z-index:45; display:flex; flex-direction:column; gap:12px;} .fab-round{ position:relative; width:58px; height:58px; border-radius:999px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -6px rgba(0,0,0,.35); border:none; cursor:pointer; transition:transform .2s var(--ease-bounce), background .15s ease; } .fab-round:hover{transform:scale(1.08); background:var(--ink-strong);} .fab-round svg{width:26px; height:26px;} #fabSearch{background:var(--brand);} #fabSearch:hover{background:var(--brand-strong);} .fab-big{width:70px; height:70px;} .fab-big svg{width:32px; height:32px;} .fab-cat-panel{ position:absolute; bottom:0; left:calc(100% + 14px); background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:8px; display:flex; flex-direction:column; gap:4px; width:230px; opacity:0; transform:translateX(-10px) scale(.96); pointer-events:none; transition:opacity .2s var(--ease-bounce), transform .2s var(--ease-bounce); } .fab-cat-panel.open{opacity:1; transform:translateX(0) scale(1); pointer-events:auto;} .fab-cat-panel a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); font-weight:700; font-size:var(--fs-small); } .fab-cat-panel a:hover{background:var(--surface-alt);} .fab-cat-panel .fcp-dot{width:12px; height:12px; border-radius:999px; background:var(--dot-color); flex:none;} @media (max-width:640px){ .fab-stack-left{left:14px; bottom:14px; gap:10px;} .fab-round{width:52px; height:52px;} .fab-round svg{width:22px; height:22px;} .fab-big{width:62px; height:62px;} .fab-big svg{width:28px; height:28px;} .fab-cat-panel{width:200px;} } /* ---------------- Scroll reveal ---------------- */ .reveal{opacity:0; transform:translateY(22px) scale(.98); transition:opacity .55s var(--ease-bounce), transform .55s var(--ease-bounce);} .reveal.in-view{opacity:1; transform:translateY(0) scale(1);} /* micro pop animation (badges, confirmations) */ @keyframes popIn{ 0%{transform:scale(.6); opacity:0;} 60%{transform:scale(1.08); opacity:1;} 100%{transform:scale(1);} } /* ---------------- Utility ---------------- */ .stack{display:flex; flex-direction:column; gap:8px;} .hidden{display:none !important;} @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} .reveal{opacity:1; transform:none;} } /* ---------------- Modo texto grande / gigante (accesibilidad) ---------------- */ body.text-grande{ --fs-body: 1.55rem; --fs-small: 1.3rem; --fs-tiny: 1.1rem; --fs-lg: 1.85rem; --fs-xl: 2.35rem; --fs-2xl: 3.1rem; --tap: 60px; } body.text-gigante{ --fs-body: 1.85rem; --fs-small: 1.55rem; --fs-tiny: 1.3rem; --fs-lg: 2.2rem; --fs-xl: 2.75rem; --fs-2xl: 3.6rem; --tap: 66px; } body.text-grande .pkg-card .pkg-desc, body.text-gigante .pkg-card .pkg-desc{-webkit-line-clamp:4;} body.text-gigante .hero h1{font-size:clamp(2.3rem, 6.4vw, 3.9rem);} body.text-gigante .nav-pill{padding-block:10px;} body.text-gigante .macro-name{font-size:var(--fs-2xl);} /* ---------------- Selector de tamaño de texto ---------------- */ .text-size-panel{ position:absolute; top:calc(100% + 10px); right:0; z-index:50; width:220px; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:8px; display:flex; flex-direction:column; gap:4px; opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none; transition:opacity .2s var(--ease-bounce), transform .2s var(--ease-bounce); } .text-size-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;} .text-size-opt{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-sm); border:none; background:none; cursor:pointer; font-weight:700; color:var(--ink); text-align:left; width:100%; } .text-size-opt:hover{background:var(--surface-alt);} .text-size-opt.active{background:var(--brand-soft); color:var(--brand-strong);} .text-size-opt .tso-a{flex:none; width:28px; text-align:center; font-weight:800; font-family:var(--font-display); line-height:1;} .text-size-opt span:nth-child(2){flex:1;} .text-size-opt .tso-check{width:16px; height:16px; flex:none; color:var(--brand); visibility:hidden;} .text-size-opt.active .tso-check{visibility:visible;} /* Ícono "Aa" del botón disparador: una A pequeña junto a una A grande */ .text-size-trigger{padding-inline:14px;} .ts-aa{display:inline-flex; align-items:baseline; gap:2px; font-family:var(--font-display); font-weight:800; line-height:1;} .ts-a-sm{font-size:13px;} .ts-a-lg{font-size:22px;} /* Botones "Tratamientos" / "Productos" fijos en la barra superior */ .topbar-link{text-decoration:none;}