/* ========================================================= Jardín de Oración – Liquid Glass (Apple-like) - Vidrio real: backdrop-filter + capas + brillos + borde glow - Profundidad: sombras suaves + inner highlights - Accesibilidad: focus-visible + reduce motion + dark mode - SCOPED: no tocamos (safe para wp-admin y temas) ========================================================= */ /* ------------------------------- TOKENS (Light + Dark) -------------------------------- */ :root{ /* Brand */ --verde-principal:#2f7d4a; --verde-oscuro:#25683e; /* Text */ --texto: rgba(255,255,255,.92); --texto-2: rgba(255,255,255,.62); /* Glass system */ --glass-blur: 22px; --glass-sat: 180%; --glass-bg: rgba(24,26,28,.55); --glass-bg-strong: rgba(24,26,28,.68); --glass-border-soft: rgba(255,255,255,.10); --glass-shadow: 0 18px 60px rgba(0,0,0,.45); --glass-shadow-tight: 0 10px 28px rgba(0,0,0,.40); --glass-inner: inset 0 1px 0 rgba(255,255,255,.12); --glass-inner-2: inset 0 -1px 0 rgba(0,0,0,.35); /* Radii */ --radio-lg:22px; --radio-md:16px; /* Motion */ --trans: all .24s ease; /* Canvas (solo dentro del bloque Jardín) */ --canvas-1: rgba(47,125,74,.22); --canvas-2: rgba(37,104,62,.18); --canvas-3: rgba(47,125,74,.16); --canvas-bg-a: rgba(14,17,17,.88); --canvas-bg-b: rgba(11,13,15,.88); --canvas-bg-c: rgba(15,20,20,.88); /* Inputs */ --field-bg: rgba(18,20,22,.55); --field-border: rgba(255,255,255,.14); } /* ------------------------------- WRAPPER / CANVAS -------------------------------- */ .jardin-wrapper{ max-width:1100px; margin:0 auto; padding:24px 16px; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--texto); position:relative; z-index:0; /* asegura que el "canvas" (pseudo-elements) quede detrás del contenido */ } /* Fondo "ambient" solo dentro del bloque Jardín */ .jardin-wrapper::before{ content:""; position:absolute; inset:-22px -18px; border-radius: calc(var(--radio-lg) + 10px); background: radial-gradient(circle at 12% 12%, var(--canvas-1), transparent 38%), radial-gradient(circle at 82% 28%, var(--canvas-2), transparent 44%), radial-gradient(circle at 40% 100%, var(--canvas-3), transparent 45%), linear-gradient(120deg, var(--canvas-bg-a) 0%, var(--canvas-bg-b) 55%, var(--canvas-bg-c) 100%); filter: saturate(1.05); opacity:.90; z-index:-2; pointer-events:none; } /* Noise sutil dentro del wrapper */ .jardin-wrapper::after{ content:""; position:absolute; inset:-22px -18px; border-radius: calc(var(--radio-lg) + 10px); pointer-events:none; z-index:-1; opacity:.10; mix-blend-mode: soft-light; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.22), rgba(255,255,255,.22) 1px, transparent 1px, transparent 2px); } .jardin-wrapper-hero{ padding:0; } /* En el hero full-width, evitamos el canvas del wrapper para no recortar el fondo */ .jardin-wrapper-hero::before, .jardin-wrapper-hero::after{ display:none; } .jardin-muted{ color:var(--texto-2); opacity:.95; } /* -------------------------------- GLASS PANELS (mixin-like) --------------------------------- */ :where(.jardin-tree,.jardin-form,.jardin-wall,.jardin-admin-card,.jardin-stat-card,.jardin-tree-caption,.jardin-card,.jardin-tree-media){ background: var(--glass-bg); border: 1px solid var(--glass-border-soft); border-radius: var(--radio-lg); box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); position:relative; overflow:hidden; } /* Borde luminoso */ :where(.jardin-tree,.jardin-form,.jardin-wall,.jardin-admin-card,.jardin-stat-card,.jardin-tree-caption,.jardin-card)::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.08), rgba(255,255,255,.18)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.48; pointer-events:none; } /* Sheen líquido */ :where(.jardin-tree,.jardin-form,.jardin-wall,.jardin-admin-card,.jardin-stat-card,.jardin-tree-caption,.jardin-card)::after{ content:""; position:absolute; inset:-40% -60%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 35%), radial-gradient(circle at 70% 55%, rgba(255,255,255,.12), transparent 45%), linear-gradient(120deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%); transform: rotate(8deg); opacity:.65; animation: jardinGlassSheen 10s ease-in-out infinite alternate; pointer-events:none; } @keyframes jardinGlassSheen{ from{ transform: translate3d(-2%, -1%, 0) rotate(8deg); } to{ transform: translate3d(2%, 1%, 0) rotate(8deg); } } /* Fallback si no hay backdrop-filter */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){ :where(.jardin-tree,.jardin-form,.jardin-wall,.jardin-admin-card,.jardin-stat-card,.jardin-tree-caption,.jardin-card){ background: var(--glass-bg-strong); } } /* =============================== Admin little cards ================================ */ .jardin-admin-card{ border-radius:14px; padding:14px 16px; min-width:220px; box-shadow: var(--glass-shadow-tight); } .jardin-admin-card-title{ color:var(--texto-2); font-weight:800; } .jardin-admin-card-big{ font-size:28px; font-weight:900; margin-top:6px; } /* Resumen de cifras */ .jardin-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:18px 0; } .jardin-stat-card{ padding:16px 18px; border-radius:14px; box-shadow: var(--glass-shadow-tight); display:flex; gap:4px; background: linear-gradient(145deg, rgba(47,125,74,.18), rgba(47,125,74,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16); } .jardin-stats-compact{ margin:12px 0 0; gap:10px; } .jardin-stats-compact .jardin-stat-card{ padding:12px 14px; box-shadow:none; } .jardin-stat-label{ color:var(--texto-2); font-weight:800; font-size:.95rem; margin-bottom:4px; } .jardin-stat-number{ font-size:32px; font-weight:900; color:#fff; letter-spacing:-0.02em; } /* WP Admin: image picker (solo en settings) */ .jardin-image-picker{ display:flex; gap:12px; align-items:center; } .jardin-thumb{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; border-radius:16px; border:1px solid var(--glass-border-soft); background: rgba(255,255,255,.22); box-shadow: var(--glass-shadow-tight); overflow:hidden; } .jardin-thumb img{ max-width:100%; height:auto; display:block; border-radius:14px; } /* =============================== Árbol (Hero) ================================ */ .jardin-tree{ padding:18px; margin: 18px 0 28px; } /* Full-width hero solo si el shortcode trae .jardin-wrapper-hero */ .jardin-wrapper-hero .jardin-tree{ margin:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; border:none; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; background: transparent; padding:clamp(18px, 3vw, 36px) 0; overflow:visible; } .jardin-wrapper-hero .jardin-tree::before, .jardin-wrapper-hero .jardin-tree::after{ display:none; } .jardin-tree-inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:center; } .jardin-wrapper-hero .jardin-tree-inner{ position:relative; display:block; max-width:min(1100px, 94vw); margin:0 auto; padding:0 clamp(10px, 3vw, 26px); } /* Media "glass frame" */ .jardin-tree-media{ position:relative; overflow:hidden; border-radius: var(--radio-lg); transform-origin:50% 95%; animation:none; transform:none; box-shadow: 0 28px 70px rgba(0,0,0,.18); background: var(--glass-bg); border:1px solid var(--glass-border-soft); backdrop-filter: blur(calc(var(--glass-blur) * .75)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .75)) saturate(var(--glass-sat)); } .jardin-tree[data-parallax="1"] .jardin-tree-media{ animation: jardinSway 14s ease-in-out infinite alternate; transform-origin:50% 90%; } .jardin-tree[data-parallax="1"] .jardin-tree-img{ transform-origin:50% 85%; transition: transform .35s ease; } .jardin-wrapper-hero .jardin-tree-media{ width:100%; min-height:420px; aspect-ratio:21 / 9; border-radius:clamp(var(--radio-md), 2vw, 30px); } .jardin-wrapper-hero .jardin-tree-media::before, .jardin-wrapper-hero .jardin-tree-media::after{ display:none; } .jardin-wrapper-hero .jardin-tree-media .hoja{ display:none; } .jardin-wrapper-hero .jardin-tree-media img{ height:100%; object-fit:cover; z-index:1; } .jardin-tree-media img{ width:100%; height:auto; display:block; border-radius: inherit; position:relative; z-index:1; will-change: transform; transform-style: flat; transform:none; filter: saturate(1.05) contrast(1.02); } .jardin-wrapper-hero .jardin-tree-media img{ height:100%; object-fit:cover; } /* Brillos especulares + viñeta suave */ .jardin-tree-media::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 22% 18%, rgba(255,255,255,.30), transparent 38%), radial-gradient(ellipse at 78% 35%, rgba(255,255,255,.18), transparent 46%), radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.14), transparent 55%); opacity:.75; mix-blend-mode: screen; pointer-events:none; z-index:2; animation: jardinLuzSuave 12s ease-in-out infinite alternate; } /* Partículas (hojas/luz) */ .jardin-tree-media .hoja{ position:absolute; width:12px; height:12px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0)); opacity:.40; filter: blur(.5px); animation: jardinHojaCaer calc(8s + 4s * var(--i, 0)) linear infinite; pointer-events:none; z-index:3; } @keyframes jardinSway{ 0%{transform: rotate(-0.55deg) scale(1.01);} 50%{transform: rotate(0.55deg) scale(1.02);} 100%{transform: rotate(-0.55deg) scale(1.01);} } @keyframes jardinHojaCaer{ 0%{transform: translate3d(-10%, -10%,0) rotate(0deg); opacity:0;} 10%{opacity:.40;} 100%{transform: translate3d(110%, 120%,0) rotate(90deg); opacity:0;} } @keyframes jardinLuzSuave{ from{transform: translate3d(-3%, -2%, 0);} to{transform: translate3d(3%, 2%, 0);} } .jardin-wrapper-hero .jardin-tree-caption{ position:relative; left:auto; bottom:auto; transform:none; width:100%; margin-top:14px; background: var(--glass-bg); border:1px solid var(--glass-border-soft); border-radius:clamp(var(--radio-md), 1.6vw, var(--radio-lg)); box-shadow: var(--glass-shadow); padding:clamp(18px, 2.6vw, 28px); z-index:5; color:#fff; } .jardin-tree-caption h2{ margin:0 0 8px; font-size: clamp(1.35rem, 1.3vw + 1rem, 1.8rem); letter-spacing:-0.02em; color:#fff; } .jardin-tree-day{ margin-top:10px; font-weight:900; color: #e4ffe9; text-shadow: 0 6px 18px rgba(47,125,74,.18); } .jardin-tree-placeholder{ padding:14px; border:1px dashed rgba(255,255,255,.35); border-radius:var(--radio-lg); background: rgba(255,255,255,.20); } /* Compat: clases legacy del img */ .arbol-vivo{ border-radius: inherit; } .versiculo{ color: var(--texto-2); font-style: italic; } /* =============================== Formulario ================================ */ .jardin-form{ padding:22px; margin:18px 0 28px; color:#fff; background: var(--glass-bg); border:1px solid var(--glass-border-soft); border-radius:clamp(var(--radio-md), 1.6vw, var(--radio-lg)); box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } .jardin-form h3{ margin:0 0 6px; font-size: clamp(1.15rem, 0.7vw + 1rem, 1.5rem); letter-spacing:-0.015em; color:#fff; } .jardin-form p, .jardin-form .jardin-muted{ color:rgba(255,255,255,.86); } .jardin-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .jardin-field label{ display:block; font-weight:900; margin-bottom:8px; letter-spacing:-0.01em; color:#fff; } /* Inputs "glass" */ .jardin-field input[type="text"], .jardin-field textarea{ width:100%; border-radius: var(--radio-md); padding: 11px 12px; font-size: 1rem; color: #fff !important; caret-color: #fff; background: var(--field-bg); border: 1px solid var(--field-border); box-shadow: var(--glass-inner), var(--glass-inner-2); backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-sat)); transition: var(--trans); } .jardin-field input[type="text"]::placeholder, .jardin-field textarea::placeholder{ color: rgba(255,255,255,.80); } .jardin-field input[type="text"]:focus, .jardin-field textarea:focus{ color:#fff !important; caret-color:#fff; } .jardin-field textarea{ min-height:120px; resize:vertical; } .jardin-field input[type="text"]:focus, .jardin-field textarea:focus{ outline:none; border-color: rgba(47,125,74,.55); box-shadow: 0 0 0 4px rgba(47,125,74,.18), var(--glass-inner), var(--glass-inner-2); } .jardin-inline{ display:flex; align-items:center; padding-top:28px; } .jardin-full{ grid-column:1 / -1; } /* Visual picker */ .jardin-type-picker{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px; } .jardin-type-card{ display:block; cursor:pointer; } .jardin-type-card input{ display:none; } .jardin-type-card-inner{ background: rgba(255,255,255,.30); border: 1px solid var(--glass-border-soft); border-radius: var(--radio-md); padding: 16px 14px; text-align:center; box-shadow: var(--glass-shadow-tight); backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); transition: var(--trans); position:relative; overflow:hidden; } .jardin-type-card-inner::after{ content:""; position:absolute; inset:-30% -40%; background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.18) 55%, transparent 65%); transform: rotate(12deg); opacity:.6; pointer-events:none; transition: var(--trans); } .jardin-type-card-inner:hover{ transform:translateY(-5px); box-shadow: 0 18px 45px rgba(0,0,0,.14); } .jardin-type-card-inner:hover::after{ opacity:.85; } .jardin-type-emoji{ font-size:2rem; line-height:1; } .jardin-type-title{ margin-top:8px; font-weight:900; font-size:1.05rem; letter-spacing:-0.015em; } .jardin-type-desc{ margin-top:6px; color: var(--texto-2); font-size:.92rem; line-height:1.25; } .jardin-type-card input:checked + .jardin-type-card-inner{ background: rgba(47,125,74,.14); border: 1px solid rgba(47,125,74,.45); box-shadow: 0 0 0 4px rgba(47,125,74,.16), var(--glass-shadow-tight); } .jardin-type-tip{ margin-top:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--glass-border-soft); background: rgba(255,255,255,.28); box-shadow: var(--glass-shadow-tight); backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); display:flex; gap:10px; align-items:flex-start; } .jardin-tip-emoji{ font-size:1.2rem; line-height:1.2; } .jardin-tip-text{ color:var(--texto-2); font-weight:800; } /* Buttons + alerts */ .jardin-btn{ border:none; border-radius:999px; padding: 12px 18px; font-weight:900; cursor:pointer; margin-top: 12px; color:#fff; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 35%), linear-gradient(180deg, rgba(47,125,74,1) 0%, rgba(37,104,62,1) 100%); box-shadow: 0 16px 34px rgba(47,125,74,.25), 0 10px 22px rgba(0,0,0,.12); transition: var(--trans); position:relative; overflow:hidden; } .jardin-btn::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.28) 55%, transparent 65%); transform: rotate(12deg); opacity:.65; transition: var(--trans); pointer-events:none; } .jardin-btn:hover{ transform: translateY(-1px); box-shadow: 0 20px 44px rgba(47,125,74,.28), 0 12px 26px rgba(0,0,0,.16); } .jardin-btn:hover::after{ opacity:.95; transform: translate3d(2%, 0, 0) rotate(12deg); } .jardin-btn:active{ transform: translateY(0); } .jardin-btn-secondary{ border-radius:999px; padding:9px 12px; cursor:pointer; font-weight:900; color: var(--texto); background: rgba(255,255,255,.28); border:1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-tight); backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); transition: var(--trans); } .jardin-btn-secondary:hover{ transform: translateY(-1px); box-shadow: 0 18px 45px rgba(0,0,0,.14); } .jardin-btn-secondary.is-done{ background: rgba(47,125,74,.16); color: var(--verde-principal); cursor:default; opacity:.95; box-shadow: 0 12px 28px rgba(47,125,74,.14); } .jardin-alert{ margin-top:12px; padding:12px 14px; border-radius:14px; font-weight:900; background: rgba(255,255,255,.25); border: 1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-tight); backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); } .jardin-alert-ok{ border-color: rgba(47,125,74,.25); } .jardin-alert-error{ border-color: rgba(200,0,0,.18); } .jardin-toast{ position:fixed; left:50%; bottom:22px; transform: translateX(-50%); padding:12px 16px; border-radius:14px; font-weight:900; background: rgba(255,255,255,.25); border:1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-tight); backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-sat)); color:#fff; z-index:9999; opacity:0; transition: opacity .2s ease, transform .2s ease; } .jardin-toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); } .jardin-toast-error{ border-color: rgba(200,0,0,.25); } /* =============================== Modal (datos al orar) ================================ */ .jardin-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; z-index:9999; opacity:0; pointer-events:none; transition: var(--trans); } .jardin-modal.is-open{ opacity:1; pointer-events:auto; } .jardin-modal-backdrop{ position:absolute; inset:0; background: rgba(12,16,14,.55); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); } .jardin-modal-card{ position:relative; width:min(520px, 96vw); padding:20px 18px 18px; background: var(--glass-bg); border: 1px solid var(--glass-border-soft); border-radius:clamp(var(--radio-md), 1.2vw, var(--radio-lg)); box-shadow: 0 28px 70px rgba(0,0,0,.32); backdrop-filter: blur(calc(var(--glass-blur) * .8)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .8)) saturate(var(--glass-sat)); z-index:1; transform: translateY(12px); transition: var(--trans); } .jardin-modal.is-open .jardin-modal-card{ transform: translateY(0); } .jardin-modal h3{ margin:0 0 6px; color:#fff; } .jardin-modal-text{ margin:0 0 8px; color:rgba(255,255,255,.86); font-weight:800; } .jardin-modal-field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; font-weight:900; color:#fff; } .jardin-modal-field input{ border-radius: var(--radio-md); padding: 11px 12px; font-size: 1rem; color:#fff; background: var(--field-bg); border: 1px solid var(--field-border); box-shadow: var(--glass-inner), var(--glass-inner-2); backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-sat)); } .jardin-modal-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; } .jardin-modal-close{ position:absolute; top:10px; right:10px; padding:6px 10px; border-radius:999px; border:1px solid var(--glass-border-soft); background: rgba(255,255,255,.20); color:#fff; font-weight:800; cursor:pointer; box-shadow: var(--glass-shadow-tight); } .jardin-modal-alert{ min-height:18px; margin-top:10px; color:#ffe0e0; font-weight:900; } @media (max-width: 640px){ .jardin-modal{ align-items:center; justify-content:center; padding:12px; min-height:100vh; overflow-y:auto; } .jardin-modal-card{ width:100%; padding:16px 14px; border-radius: var(--radio-md); margin:0; } .jardin-modal h3{ font-size:1.08rem; } .jardin-modal-text{ font-size:.96rem; } .jardin-modal-actions{ flex-direction:column; align-items:stretch; } .jardin-modal-actions .jardin-btn, .jardin-modal-actions .jardin-btn-secondary{ width:100%; text-align:center; } } /* =============================== Muro ================================ */ .jardin-wall{ padding:22px; margin:18px 0 28px; color:#fff; background: var(--glass-bg); border:1px solid var(--glass-border-soft); border-radius:clamp(var(--radio-md), 1.6vw, var(--radio-lg)); box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } .jardin-wall-header h3{ margin:0 0 6px; color:#fff; font-size: clamp(1.4rem, 4vw, 1.9rem); line-height:1.2; } .jardin-wall-header p{ color:rgba(255,255,255,.86); } .jardin-cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .jardin-card{ border-radius: var(--radio-md); padding:16px; background: var(--glass-bg); border: 1px solid var(--glass-border-soft); border-radius:clamp(var(--radio-md), 1vw, var(--radio-lg)); box-shadow: var(--glass-shadow); backdrop-filter: blur(calc(var(--glass-blur) * .7)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .7)) saturate(var(--glass-sat)); animation: jardinGrowIn .6s ease both; color:#fff; } @keyframes jardinGrowIn{ from{ transform: scale(.985); opacity:0; } to{ transform: scale(1); opacity:1; } } .jardin-card-top{ display:flex; gap:10px; align-items:center; margin-bottom:10px; } .jardin-icon{ font-size:1.8rem; filter: drop-shadow(0 10px 18px rgba(0,0,0,.12)); } .jardin-name{ font-weight:900; letter-spacing:-0.01em; color:#fff; } .jardin-date{ color:rgba(255,255,255,.78); font-size:.92rem; font-weight:900; } .jardin-content{ font-size:.98rem; line-height:1.42; color:#fff; } .jardin-actions{ margin-top:12px; display:flex; gap:10px; align-items:center; justify-content:space-between; } .jardin-count{ color:rgba(255,255,255,.78); font-size:.92rem; font-weight:900; } .jardin-prayed-badge{ display:none; padding:6px 10px; border-radius:999px; background: rgba(47,125,74,.18); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.86); font-weight:800; font-size:.9rem; } .jardin-card.is-prayed-by-user{ border-color: rgba(255,255,255,.18); box-shadow: var(--glass-shadow-tight); opacity:.94; } .jardin-card.is-prayed-by-user .jardin-prayed-badge{ display:inline-flex; align-items:center; gap:6px; } .jardin-card.is-prayed-by-user .jardin-pray-btn{ opacity:.82; } .jardin-pagination{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .jardin-page-link{ text-decoration:none; font-weight:900; color:#fff; padding:8px 12px; border-radius:999px; background: var(--glass-bg); border:1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-tight); transition: var(--trans); } .jardin-page-link:hover{ transform: translateY(-1px); box-shadow: 0 18px 45px rgba(0,0,0,.14); } .jardin-page-info{ color:rgba(255,255,255,.78); font-weight:900; } .jardin-empty{ padding:12px 14px; border:1px dashed rgba(255,255,255,.35); border-radius:14px; background: rgba(255,255,255,.18); box-shadow: var(--glass-shadow-tight); } /* =============================== Accesibilidad + Motion ================================ */ :where(.jardin-wrapper button, .jardin-wrapper a, .jardin-wrapper input, .jardin-wrapper textarea):focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(47,125,74,.22); border-radius: 12px; } @media (prefers-reduced-motion: reduce){ .jardin-tree-media, .jardin-wrapper::after, :where(.jardin-tree,.jardin-form,.jardin-wall,.jardin-admin-card,.jardin-tree-caption,.jardin-card)::after, .jardin-card{ animation:none !important; } *{ transition:none !important; scroll-behavior:auto !important; } } /* =============================== Responsive ================================ */ @media (max-width: 900px){ .jardin-wrapper-hero{ padding:0 12px; } .jardin-wrapper-hero .jardin-tree{ width:100%; margin:0; border-radius:var(--radio-lg); padding:16px 0; } .jardin-wrapper-hero .jardin-tree-inner{ padding:0 6px; gap:12px; } .jardin-wrapper-hero .jardin-tree-media{ min-height:260px; aspect-ratio: 4 / 3; } .jardin-wrapper-hero .jardin-tree-caption{ position:relative; left:auto; bottom:auto; transform:none; width:100%; margin-top:8px; box-shadow: var(--glass-shadow); } .jardin-tree-inner{ grid-template-columns:1fr; } .jardin-grid{ grid-template-columns:1fr; } .jardin-inline{ padding-top:0; } .jardin-type-picker{ grid-template-columns:1fr 1fr; } .jardin-cards{ grid-template-columns:1fr; } .jardin-wall{ padding:16px; } .jardin-wall-header h3{ font-size:1.25rem; } } @media (max-width: 420px){ .jardin-type-picker{ grid-template-columns:1fr; } }