/** Shopify CDN: Minification failed Line 56:0 All "@import" rules must come first **/ /* ========================================================= ELUNEA RITUALS — Sistema de diseño v3 (blush/malva de marca) Blanco + blush + malva (acento) — paleta extraída del logo Theme-agnostic. Todo scoped bajo .elunea / prefijo el-. Cargalo desde theme.liquid: {{ 'elunea.css' | asset_url | stylesheet_tag }} ========================================================= */ /* ---------- Tokens ---------- */ :root { /* Base — BLANCO dominante con toque blush */ --el-blanco: #FFFFFF; /* fondo principal (dominante) */ --el-blanco-roto: #FDF8F6; /* fondos secundarios / cards */ --el-crema: #F7ECE7; /* apoyo suave, úsalo poco */ --el-rosa-suave: #F3E0DB; /* bloques beauty / ritual */ --el-rosa-suave-2: #EFD5CD; /* alterna en bloques beauty */ --el-nude: #E9D3C9; /* detalles, bordes cálidos */ /* Acento — malva/rosa oscuro del logo ELUNEA RITUALS */ --el-oro: #A9646B; /* acento PREMIUM / CTA */ --el-oro-oscuro: #8B4E54; /* hover del acento */ /* Texto */ --el-tinta: #3A2E2C; /* texto principal */ --el-tinta-80: #4A3B38; /* texto fuerte alternativo */ --el-gris: #7A6E68; /* texto secundario */ /* Líneas / estados */ --el-linea: #EAD9D2; /* hairlines sobre blanco */ --el-linea-suave: #F2E5DF; --el-exito: #5E7A63; /* Forma */ --el-radio: 18px; /* cards */ --el-radio-s: 12px; /* botones, inputs, badges grandes */ --el-radio-pill: 999px; /* pills, badges pequeños */ --el-sombra: 0 18px 48px -28px rgba(47,41,37,.28); --el-sombra-card: 0 8px 28px -20px rgba(47,41,37,.22); --el-trans: .35s cubic-bezier(.22,.61,.36,1); --el-maxw: 1200px; /* Tipografía */ --el-serif: "Cormorant Garamond", Georgia, serif; /* SOLO display */ --el-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* todo lo demás */ /* Aliases compat v1 → v2 (no romper secciones existentes) */ --el-nude-claro: #FDF8F6; --el-tinta-suave: #7A6E68; --el-rosa: #F3E0DB; --el-salvia: #AEB7A4; --el-sombra-suave: 0 8px 28px -20px rgba(47,41,37,.22); } /* ---------- Carga de tipografías (si el tema no las trae) ---------- */ /* Si tu tema ya carga Inter / Cormorant, puedes borrar este @import. */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600;700&display=swap"); /* ---------- Base scoped (no pisamos el del tema) ---------- */ .elunea { font-family: var(--el-sans); color: var(--el-tinta); background: var(--el-blanco); font-size: 16px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .elunea *, .elunea *::before, .elunea *::after { box-sizing: border-box; } .elunea img { max-width: 100%; display: block; } .elunea a { color: inherit; text-decoration: none; } .elunea button { font-family: inherit; cursor: pointer; } /* Display SOLO en serif; el resto (incl. h3/h4 de card) en Inter */ .elunea h1, .elunea h2 { font-family: var(--el-serif); font-weight: 600; line-height: 1.1; letter-spacing: 0.2px; margin: 0 0 0.4em; color: var(--el-tinta); } .elunea h3, .elunea h4 { font-family: var(--el-sans); font-weight: 600; line-height: 1.25; margin: 0 0 0.4em; color: var(--el-tinta); } .elunea h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); } .elunea h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); } .elunea h3 { font-size: 1.02rem; } .elunea p { margin: 0 0 1em; } /* Utilidad accesible: solo lectores de pantalla */ .el-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Foco visible consistente (acento malva) */ .elunea a:focus-visible, .elunea button:focus-visible, .elunea input:focus-visible, .elunea summary:focus-visible { outline: 2px solid var(--el-oro); outline-offset: 2px; } @media (forced-colors: active) { .elunea a:focus-visible, .elunea button:focus-visible { outline: 3px solid LinkText; } } /* ---------- Utilidades ---------- */ .el-contenedor { width: 100%; max-width: var(--el-maxw); margin-inline: auto; padding-inline: 20px; } .el-seccion { padding-block: clamp(56px, 8vw, 110px); } .el-seccion--crema { background: var(--el-crema); } .el-seccion--rosa { background: var(--el-rosa-suave); } .el-centro { text-align: center; } .el-eyebrow { font-family: var(--el-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--el-oro-oscuro); font-weight: 600; margin: 0 0 0.9rem; display: block; } .el-lead { font-size: 1.05rem; color: var(--el-gris); max-width: 60ch; } .el-centro .el-lead { margin-inline: auto; } .el-cabecera { max-width: 640px; margin: 0 auto clamp(40px, 5vw, 64px); } /* ---------- Botones (CRO — alto contraste sobre blanco) ---------- */ .el-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.85em 1.8em; border-radius: var(--el-radio-pill); font-family: var(--el-sans); font-size: 0.9rem; letter-spacing: 0.02em; font-weight: 600; border: 1.5px solid transparent; background: none; color: var(--el-tinta); transition: transform var(--el-trans), background var(--el-trans), color var(--el-trans), box-shadow var(--el-trans), border-color var(--el-trans); cursor: pointer; line-height: 1.2; text-align: center; } /* Primario — malva oscuro de marca, el CTA que más convierte sobre blanco */ .el-btn--solid { background: var(--el-oro); color: var(--el-blanco); border-color: var(--el-oro); } .el-btn--solid:hover { background: var(--el-oro-oscuro); transform: translateY(-2px); box-shadow: var(--el-sombra-card); } /* Secundario — línea */ .el-btn--linea { background: transparent; color: var(--el-tinta); border-color: var(--el-tinta); } .el-btn--linea:hover { background: var(--el-tinta); color: var(--el-blanco); transform: translateY(-2px); } /* Acento premium (sets / regalo) */ .el-btn--oro { background: var(--el-oro); color: var(--el-blanco); border-color: var(--el-oro); } .el-btn--oro:hover { background: var(--el-oro-oscuro); border-color: var(--el-oro-oscuro); transform: translateY(-2px); box-shadow: var(--el-sombra-card); } /* Texto/enlace con filete malva */ .el-btn-texto { display: inline-flex; align-items: center; gap: 0.4em; min-height: 0; padding: 0 0 2px; border-radius: 0; letter-spacing: 0.01em; color: var(--el-oro-oscuro); border: 0; border-bottom: 1px solid var(--el-oro); background: none; } .el-btn-texto:hover { color: var(--el-tinta); border-color: var(--el-tinta); } /* Estados */ .el-btn[disabled], .el-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* --- Compat v1: .el-btn-oro / .el-btn-linea (usados por secciones existentes) --- */ .el-btn-oro { background: var(--el-oro); color: var(--el-blanco); border-color: var(--el-oro); } .el-btn-oro:hover { background: var(--el-oro-oscuro); transform: translateY(-2px); box-shadow: var(--el-sombra-card); } .el-btn-linea { background: transparent; color: var(--el-tinta); border-color: var(--el-tinta); } .el-btn-linea:hover { background: var(--el-tinta); color: var(--el-blanco); transform: translateY(-2px); } /* ========================================================= BADGES (snippet badge-elunea) — pills sutiles ========================================================= */ .el-badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4em 0.7em; border-radius: var(--el-radio-pill); font-family: var(--el-sans); font-size: 0.62rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; border: 1px solid transparent; background: var(--el-blanco-roto); color: var(--el-tinta); white-space: nowrap; } .el-badge--bestseller { background: var(--el-tinta); color: var(--el-blanco); border-color: var(--el-tinta); } .el-badge--nuevo { background: var(--el-nude); color: var(--el-tinta); border-color: var(--el-nude); } .el-badge--ritual-favorito{ background: var(--el-blanco); color: var(--el-oro-oscuro); border-color: var(--el-oro); } .el-badge--add-on { background: var(--el-blanco); color: var(--el-gris); border-color: var(--el-gris); } .el-badge--premium { background: var(--el-oro); color: var(--el-blanco); border-color: var(--el-oro); } .el-badge--agotado { background: var(--el-linea); color: var(--el-gris); border-color: var(--el-linea); } .el-badge--ahorro { background: var(--el-rosa-suave-2); color: var(--el-tinta); border-color: var(--el-rosa-suave-2); } .el-badge--esencial { background: var(--el-crema); color: var(--el-tinta-80); border-color: var(--el-linea); } .el-badge--viral { background: var(--el-rosa-suave); color: var(--el-tinta); border-color: var(--el-rosa-suave-2); } /* ========================================================= MEDIA PLACEHOLDER (snippet media-placeholder-elunea) ========================================================= */ .el-mph { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 18px; text-align: center; overflow: hidden; background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.7), transparent 55%), linear-gradient(150deg, var(--el-blanco-roto) 0%, var(--el-rosa-suave) 100%); border: 1px solid var(--el-linea); border-radius: var(--el-radio); color: var(--el-gris); } .el-mph__icono { width: 30px; height: 30px; color: var(--el-oro); opacity: 0.85; } .el-mph__icono svg { width: 100%; height: 100%; } .el-mph__label { font-family: var(--el-sans); font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--el-gris); max-width: 26ch; } /* Placeholder simple heredado (.el-ph) — repintado a blanco */ .el-ph { background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.7), transparent 55%), linear-gradient(150deg, var(--el-blanco-roto) 0%, var(--el-rosa-suave) 100%); display: flex; align-items: center; justify-content: center; color: var(--el-gris); font-family: var(--el-sans); font-size: 0.82rem; letter-spacing: 0.04em; text-align: center; padding: 16px; width: 100%; height: 100%; } .el-ph svg { width: 44px; height: 44px; opacity: 0.6; } /* ========================================================= PRECIO (snippet price-elunea) ========================================================= */ .el-precios { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .el-precio { font-family: var(--el-sans); font-weight: 600; font-size: 1.05rem; color: var(--el-tinta); } .el-precio--oferta { color: var(--el-tinta); } .el-precio-comparado { font-size: 0.92rem; color: var(--el-gris); text-decoration: line-through; } .el-precio-ahorro { font-size: 0.7rem; color: var(--el-tinta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--el-rosa-suave-2); padding: 0.3em 0.6em; border-radius: var(--el-radio-pill); } .el-precio-agotado { color: var(--el-gris); font-weight: 600; } /* ---------- Hero ---------- */ .el-hero { position: relative; background: var(--el-blanco); overflow: hidden; } .el-hero--media { background: var(--el-tinta); } .el-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 8vw, 96px); } .el-hero h1 { margin-bottom: 0.3em; } .el-hero .el-lead { font-size: 1.15rem; margin-bottom: 1.8rem; } .el-hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; } .el-hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--el-radio); overflow: hidden; box-shadow: var(--el-sombra); background: var(--el-blanco-roto); } .el-hero-visual img, .el-hero-visual video { width: 100%; height: 100%; object-fit: cover; } .el-hero-sello { position: absolute; inset-block-end: 18px; inset-inline-start: -14px; background: var(--el-blanco); border: 1px solid var(--el-linea); border-radius: var(--el-radio-pill); padding: 10px 18px; box-shadow: var(--el-sombra-card); font-size: 0.78rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--el-tinta); } .el-hero-sello .el-estrellas { color: var(--el-oro); letter-spacing: 1px; } .el-hero--fondo .el-hero-inner { grid-template-columns: 1fr; max-width: 720px; text-align: center; position: relative; z-index: 2; } .el-hero--fondo .el-hero-acciones { justify-content: center; } .el-hero--fondo .el-lead { margin-inline: auto; } .el-hero-fondo-media { position: absolute; inset: 0; z-index: 0; } .el-hero-fondo-media img, .el-hero-fondo-media video { width: 100%; height: 100%; object-fit: cover; } .el-hero-fondo-velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(47,41,37,0.5), rgba(47,41,37,0.3)); } .el-hero--fondo h1, .el-hero--fondo .el-lead { color: var(--el-blanco); } .el-hero--fondo .el-eyebrow { color: var(--el-oro); } /* ---------- Barra de confianza ---------- */ .el-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .el-trust-item { text-align: center; padding: 8px; } .el-trust-icono { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--el-oro-oscuro); } .el-trust-icono svg { width: 100%; height: 100%; } .el-trust-item strong { display: block; font-family: var(--el-sans); font-weight: 600; font-size: 1rem; margin-bottom: 2px; } .el-trust-item p { color: var(--el-gris); font-size: 0.9rem; margin: 0; } /* ---------- Propuestas de valor / beneficios ---------- */ .el-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .el-valor { text-align: center; padding: 12px; } .el-valor-icono { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--el-oro-oscuro); } .el-valor-icono svg { width: 100%; height: 100%; } .el-valor h3 { font-size: 1.15rem; } .el-valor p { color: var(--el-gris); font-size: 0.96rem; margin: 0; } .el-beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; list-style: none; margin: 0; padding: 0; } .el-beneficio { display: flex; gap: 14px; align-items: flex-start; } .el-beneficio-icono { flex-shrink: 0; width: 28px; height: 28px; color: var(--el-oro-oscuro); } .el-beneficio-icono svg { width: 100%; height: 100%; } .el-beneficio h3 { font-size: 1.02rem; margin: 0 0 4px; } .el-beneficio p { font-size: 0.92rem; color: var(--el-gris); margin: 0; } /* ---------- Grid categorías ---------- */ .el-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .el-cat { position: relative; aspect-ratio: 3 / 4; border-radius: var(--el-radio); overflow: hidden; display: flex; align-items: flex-end; box-shadow: var(--el-sombra-card); transition: transform var(--el-trans), box-shadow var(--el-trans); } .el-cat:hover { transform: translateY(-4px); box-shadow: var(--el-sombra); } .el-cat-img { position: absolute; inset: 0; } .el-cat-img img { width: 100%; height: 100%; object-fit: cover; } .el-cat-cuerpo { position: relative; z-index: 2; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(47,41,37,0.78), transparent); color: var(--el-blanco); } .el-cat-cuerpo h3 { color: var(--el-blanco); margin-bottom: 0.2em; font-size: 1.15rem; } .el-cat-cuerpo span { font-size: 0.8rem; letter-spacing: 0.04em; opacity: 0.92; } /* ========================================================= TARJETA DE PRODUCTO (snippet product-card-elunea) — blanca ========================================================= */ .el-productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .el-producto { position: relative; background: var(--el-blanco); border-radius: var(--el-radio); overflow: hidden; border: 1px solid var(--el-linea); display: flex; flex-direction: column; isolation: isolate; transition: transform var(--el-trans), box-shadow var(--el-trans), border-color var(--el-trans); } .el-producto:hover { transform: translateY(-4px); box-shadow: var(--el-sombra-card); border-color: var(--el-linea-suave); } .el-producto-img { aspect-ratio: 1 / 1; background: var(--el-blanco-roto); position: relative; display: block; } .el-producto-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-producto-img .el-ph, .el-producto-img .el-mph { position: absolute; inset: 0; border: 0; border-radius: 0; } /* Badges sobre la imagen (arriba-izquierda), apilados */ .el-producto-badges { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .el-producto-cuerpo { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .el-producto-cat { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-oro-oscuro); font-weight: 600; } .el-producto h3 { font-size: 1.02rem; margin: 0; } .el-producto h3 a { color: var(--el-tinta); } .el-producto-desc { font-size: 0.88rem; color: var(--el-gris); margin: 0; line-height: 1.45; overflow-wrap: break-word; } .el-producto .el-precios { margin-block: 4px 4px; } .el-producto-nuevo { font-size: 0.7rem; color: var(--el-gris); display: inline-flex; align-items: center; gap: 0.35em; } .el-producto-nuevo .el-badge { font-size: 0.6rem; } .el-producto-cta { margin-top: auto; padding-top: 6px; } .el-producto-cta .el-btn { width: 100%; } .el-producto-form { margin: 0; } /* ---------- Rituales / categorías de ritual ---------- */ .el-rituales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .el-ritual { background: var(--el-blanco); border: 1px solid var(--el-linea); border-radius: var(--el-radio); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--el-trans), border-color var(--el-trans), box-shadow var(--el-trans); } .el-ritual:hover { transform: translateY(-4px); border-color: var(--el-oro); box-shadow: var(--el-sombra-card); } .el-ritual-img { aspect-ratio: 4 / 3; background: var(--el-blanco-roto); position: relative; } .el-ritual-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-ritual-img .el-ph, .el-ritual-img .el-mph { position: absolute; inset: 0; border: 0; border-radius: 0; } .el-ritual-cuerpo { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; } .el-ritual h3 { font-size: 1.15rem; margin-bottom: 6px; } .el-ritual p { font-size: 0.9rem; color: var(--el-gris); margin: 0 0 16px; flex: 1; } /* ---------- Bundle highlight ---------- */ .el-bundle { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; background: var(--el-rosa-suave); border-radius: var(--el-radio); overflow: hidden; } .el-bundle--invertido .el-bundle-texto { order: 2; } .el-bundle-visual { aspect-ratio: 5 / 4; position: relative; background: var(--el-blanco-roto); min-height: 100%; } .el-bundle-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-bundle-visual .el-ph, .el-bundle-visual .el-mph { position: absolute; inset: 0; border: 0; border-radius: 0; } .el-bundle-texto { padding: clamp(28px, 4vw, 56px); } .el-bundle-incluye { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .el-bundle-incluye li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--el-gris); } .el-bundle-incluye li::before { content: "✦"; color: var(--el-oro); flex-shrink: 0; } .el-bundle-precios { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .el-bundle-precio { font-family: var(--el-sans); font-weight: 700; font-size: 1.8rem; color: var(--el-tinta); line-height: 1; } .el-bundle-comparado { font-size: 1.05rem; color: var(--el-gris); text-decoration: line-through; } .el-bundle-ahorro { background: var(--el-rosa-suave-2); color: var(--el-tinta); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--el-radio-pill); font-weight: 600; } /* ---------- Editorial / split ---------- */ .el-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .el-split--invertido .el-split-texto { order: 2; } .el-split-visual { aspect-ratio: 5 / 4; border-radius: var(--el-radio); overflow: hidden; box-shadow: var(--el-sombra-card); position: relative; background: var(--el-blanco-roto); } .el-split-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-split-visual .el-ph, .el-split-visual .el-mph { position: absolute; inset: 0; border: 0; border-radius: 0; } .el-split-texto h2 { margin-bottom: 0.4em; } /* ---------- Bloque de confianza (oscuro) ---------- */ .el-confianza { background: var(--el-tinta); color: var(--el-crema); } .el-confianza .el-eyebrow { color: var(--el-oro); } .el-confianza h2 { color: var(--el-crema); } .el-confianza .el-lead { color: rgba(247,236,231,0.8); } .el-confianza-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px; } .el-confianza-item { text-align: center; } .el-confianza-item .el-num { font-family: var(--el-serif); font-size: 2.4rem; color: var(--el-oro); display: block; line-height: 1; margin-bottom: 8px; } .el-confianza-item p { font-size: 0.9rem; color: rgba(247,236,231,0.8); margin: 0; } /* ---------- Pasos "cómo usar" ---------- */ .el-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .el-paso { background: var(--el-blanco); border: 1px solid var(--el-linea); border-radius: var(--el-radio-s); padding: 26px 22px; position: relative; } .el-paso-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--el-rosa-suave); color: var(--el-oro-oscuro); font-family: var(--el-serif); font-weight: 600; font-size: 1.25rem; margin-bottom: 14px; } .el-paso h3 { font-size: 1.05rem; margin-bottom: 6px; } .el-paso p { font-size: 0.92rem; color: var(--el-gris); margin: 0; } /* ---------- Blog ---------- */ .el-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .el-post { background: var(--el-blanco); border-radius: var(--el-radio); overflow: hidden; border: 1px solid var(--el-linea); display: flex; flex-direction: column; transition: transform var(--el-trans), box-shadow var(--el-trans); } .el-post:hover { transform: translateY(-4px); box-shadow: var(--el-sombra-card); } .el-post-img { aspect-ratio: 16 / 10; background: var(--el-blanco-roto); position: relative; } .el-post-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-post-img .el-ph, .el-post-img .el-mph { position: absolute; inset: 0; border: 0; border-radius: 0; } .el-post-cuerpo { padding: 20px; display: flex; flex-direction: column; flex: 1; } .el-post-meta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--el-oro-oscuro); font-weight: 600; margin-bottom: 10px; } .el-post h3 { font-size: 1.15rem; margin-bottom: 10px; } .el-post p { font-size: 0.92rem; color: var(--el-gris); flex: 1; margin: 0; } /* ---------- FAQ acordeón (con

) ---------- */ .el-faq { max-width: 760px; margin-inline: auto; } .el-faq-item { border-bottom: 1px solid var(--el-linea); } .el-faq-item > summary { width: 100%; text-align: start; background: none; border: none; padding: 20px 0; font-family: var(--el-sans); font-weight: 600; font-size: 1.05rem; color: var(--el-tinta); display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; } .el-faq-item > summary::-webkit-details-marker { display: none; } .el-faq-item .el-signo { color: var(--el-oro); font-size: 1.4rem; transition: transform var(--el-trans); flex-shrink: 0; } .el-faq-item[open] .el-signo { transform: rotate(45deg); } .el-faq-a { color: var(--el-gris); padding: 0 0 20px; } .el-faq-a p { margin: 0 0 0.8em; } .el-faq-a p:last-child { margin-bottom: 0; } /* ---------- Newsletter ---------- */ .el-newsletter { background: var(--el-rosa-suave); } .el-newsletter-card { max-width: 720px; margin-inline: auto; text-align: center; } .el-newsletter-form { display: flex; gap: 12px; max-width: 480px; margin: 28px auto 14px; } .el-newsletter-form input { flex: 1; min-width: 0; padding: 0.9em 1.3em; border-radius: var(--el-radio-pill); border: 1px solid var(--el-linea); background: var(--el-blanco); font-family: var(--el-sans); font-size: 0.95rem; color: var(--el-tinta); } .el-newsletter-nota { font-size: 0.8rem; color: var(--el-gris); } .el-newsletter-ok { color: var(--el-exito); font-weight: 600; } /* ========================================================= MEGA MENÚ (sección mega-menu-elunea) — panel sobre blanco ========================================================= */ .el-mega { position: relative; } .el-mega-panel { background: var(--el-blanco); border: 1px solid var(--el-linea); border-radius: var(--el-radio); box-shadow: var(--el-sombra); padding: clamp(20px, 3vw, 32px); } .el-mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(20px, 3vw, 40px); } .el-mega-col h4 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-oro-oscuro); font-weight: 600; margin: 0 0 12px; } .el-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .el-mega-col a { font-size: 0.92rem; color: var(--el-tinta); display: inline-flex; align-items: center; gap: 6px; transition: color var(--el-trans); } .el-mega-col a:hover { color: var(--el-oro-oscuro); } .el-mega-destacado { background: var(--el-rosa-suave); border-radius: var(--el-radio-s); padding: 18px; } .el-mega-destacado .el-eyebrow { margin-bottom: 6px; } .el-mega-destacado h4 { color: var(--el-tinta); font-family: var(--el-sans); font-size: 1.02rem; letter-spacing: 0; text-transform: none; margin-bottom: 4px; } /* ========================================================= BARRA DE ENVÍO GRATIS (snippet free-shipping-bar) ========================================================= */ .el-envio { display: flex; flex-direction: column; gap: 10px; } .el-envio-barra { margin-bottom: 8px; } .el-envio-texto { font-size: 0.92rem; color: var(--el-gris); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .el-envio-texto strong { color: var(--el-tinta); } .el-envio-ok { color: var(--el-exito); font-weight: 600; } .el-envio-ok-icono { color: var(--el-exito); width: 18px; height: 18px; } .el-envio-ok-icono svg { width: 100%; height: 100%; } .el-envio-track { height: 8px; background: var(--el-linea); border-radius: var(--el-radio-pill); overflow: hidden; } .el-envio-fill { height: 100%; background: linear-gradient(90deg, var(--el-oro), var(--el-oro-oscuro)); border-radius: var(--el-radio-pill); transition: width var(--el-trans); } .el-envio-fill--full { background: var(--el-exito); } /* ========================================================= STICKY ADD TO CART (snippet sticky-add-to-cart) — solo móvil ========================================================= */ .el-sticky-atc { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--el-blanco); border-top: 1px solid var(--el-linea); box-shadow: 0 -10px 30px -22px rgba(47,41,37,0.4); } .el-sticky-atc__img { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--el-radio-s); overflow: hidden; background: var(--el-blanco-roto); position: relative; } .el-sticky-atc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-sticky-atc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .el-sticky-atc__title { font-size: 0.82rem; font-weight: 600; color: var(--el-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-sticky-atc__price { font-size: 0.82rem; color: var(--el-gris); } .el-sticky-atc__price .el-precios { gap: 6px; } .el-sticky-atc__price .el-precio { font-size: 0.85rem; } .el-sticky-atc__price .el-precio-comparado { font-size: 0.75rem; } .el-sticky-atc__price .el-precio-ahorro { display: none; } .el-sticky-atc__form { flex-shrink: 0; margin: 0; } .el-sticky-atc__form .el-btn { min-height: 44px; padding-inline: 1.2em; white-space: nowrap; } @media (min-width: 750px) { .el-sticky-atc { display: none; } } /* ---------- Upsell / cross-sell de carrito ---------- */ .el-upsell { background: var(--el-blanco); border: 1px solid var(--el-linea); border-radius: var(--el-radio); padding: 20px 22px; } .el-upsell-prod { display: flex; gap: 16px; align-items: center; margin-top: 18px; } .el-upsell-prod-img { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--el-radio-s); overflow: hidden; background: var(--el-blanco-roto); position: relative; } .el-upsell-prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .el-upsell-prod-info { flex: 1; min-width: 0; } .el-upsell-prod-info .el-eyebrow { margin-bottom: 4px; } .el-upsell-prod-info h4 { font-family: var(--el-sans); font-weight: 600; font-size: 1.02rem; margin: 0 0 4px; } .el-upsell-prod-info .el-precio { font-size: 0.95rem; } .el-upsell-form { flex-shrink: 0; } /* ---------- Iconos ---------- */ .el-icono { display: inline-block; vertical-align: middle; } /* ---------- Animaciones reveal ---------- */ .el-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1); } .el-reveal.el-visible { opacity: 1; transform: none; } /* ---------- Responsive (mobile-first ajustes) ---------- */ @media (max-width: 980px) { .el-hero-inner { grid-template-columns: 1fr; text-align: center; } .el-hero .el-lead { margin-inline: auto; } .el-hero-acciones { justify-content: center; } .el-hero-visual { max-width: 440px; margin-inline: auto; aspect-ratio: 4 / 5; } .el-cats, .el-rituales { grid-template-columns: repeat(2, 1fr); } .el-trust { grid-template-columns: repeat(2, 1fr); } .el-confianza-grid { grid-template-columns: repeat(2, 1fr); } .el-posts { grid-template-columns: 1fr; } .el-split, .el-bundle { grid-template-columns: 1fr; } .el-split--invertido .el-split-texto, .el-bundle--invertido .el-bundle-texto { order: 0; } .el-beneficios { grid-template-columns: 1fr; } } /* Producto en 2 columnas en móvil (decisión v2) */ @media (max-width: 980px) { .el-productos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .el-valores { grid-template-columns: 1fr; } .el-valor { padding: 0; } } @media (max-width: 520px) { .el-cats, .el-rituales, .el-trust, .el-confianza-grid { grid-template-columns: 1fr; } .el-newsletter-form { flex-direction: column; } .el-newsletter-form .el-btn { width: 100%; } .el-upsell-prod { flex-wrap: wrap; } .el-upsell-form, .el-upsell-form .el-btn { width: 100%; } } /* Producto: mantiene 2-col hasta muy estrecho; 1-col solo en pantallas mínimas */ @media (max-width: 360px) { .el-productos { grid-template-columns: 1fr; } } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { .elunea *, .elunea *::before, .elunea *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .el-reveal { opacity: 1; transform: none; } }