/* ShapeTotal — Forest / Champagne. Efectos por clases, sin estilos inline. */
:root { color:#23372f; background:#f8f7f2; --forest:#122e26; --gold:#d3b888; --ink:#23372f; --paper:#f8f7f2; }
body { background:radial-gradient(ellipse at 90% 0%,#e9e4d75c,transparent 42%),var(--paper); }
::selection { background:#d8c49f; color:#142d25; }
.header { background:#f8f7f2ed; border-bottom:1px solid #d6d0c04d; padding-top:23px; padding-bottom:23px; box-shadow:0 4px 30px #172e2304; }
.brand { letter-spacing:-1.7px; color:var(--forest); }
.header-actions .button { border-color:transparent; font-size:12px; letter-spacing:.4px; }
.header-actions .button:last-child { background:var(--forest); border-color:var(--forest); color:#f6efdf; padding-inline:24px; }
.wrap { max-width:1480px; padding-top:28px; }
.button { position:relative; border-radius:6px; border-color:#c9c5b4; padding:14px 24px; font-size:13px; letter-spacing:.3px; transition:transform .3s,box-shadow .3s,background .3s,border-color .3s; }
.button:hover { background:#e9e5d9; box-shadow:0 5px 16px #172e230a; transform:translateY(-2px); }
.button:active { transform:translateY(0); }
.primary { color:#fbf6e9; background:linear-gradient(120deg,#254c3f,#122e26); border-color:#244638; box-shadow:0 7px 19px #163d2820; }
.primary:hover { background:#244d3e; border-color:#b99e6b; box-shadow:0 8px 24px #163d2830; }
.hero { position:relative; isolation:isolate; grid-template-columns:1.08fr 1fr; min-height:535px; border-radius:14px; background:#102e25; color:#f6f0e3; border:1px solid #385344; box-shadow:0 20px 55px #1b392519; }
.hero::before { content:''; position:absolute; inset:16px; border:1px solid #d3b88830; pointer-events:none; z-index:3; }
.hero::after { content:''; position:absolute; width:46%; height:150%; top:-30%; left:-80%; background:linear-gradient(90deg,transparent,#f3dfac0c,transparent); transform:rotate(25deg); animation:hero-glint 14s ease-in-out infinite; pointer-events:none; z-index:2; }
.hero-content { padding:65px 42px 65px 58px; align-self:center; }
.hero .eyebrow { color:#d8bd8e; font-size:10px; letter-spacing:4px; display:flex; align-items:center; gap:15px; }
.hero .eyebrow::before { content:''; display:block; height:1px; width:35px; background:#d8bd8e; }
.hero h1 { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(38px,4.2vw,66px); letter-spacing:-2.8px; line-height:1.09; margin:29px 0 24px; text-wrap:balance; }
.hero p { color:#d4dfd3; font-size:15px; line-height:1.9; max-width:370px; }
.hero .primary { color:#24372c; background:linear-gradient(110deg,#e3cfaa,#c8ab79); border-color:#d8bc8c; margin-top:25px; padding:17px 26px; box-shadow:0 8px 24px #0002; }
.hero .primary:hover { background:#ead7b5; box-shadow:0 10px 28px #0003; }
.hero-art { min-height:100%; background:radial-gradient(ellipse at 60% 40%,#54765a,#14372a 75%); }
.hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#102e25 0%,#102e251a 30%,transparent 70%),linear-gradient(0deg,#102e257a,transparent 40%); pointer-events:none; z-index:1; }
.hero-image { filter:saturate(.7) contrast(1.04); object-position:center; animation:hero-breathe 18s ease-in-out infinite alternate; }
.hero-word { color:#dfceac99; bottom:48px; right:40px; }
.orb { background:radial-gradient(circle at 30% 20%,#f8e6be,#cdb688 30%,#627254 65%,#152e22); box-shadow:25px 45px 65px #051b1770,inset -10px -20px 30px #112c2455; }
.service-strip { display:flex; justify-content:center; gap:0; padding:24px 0; border-bottom:1px solid #d9d6c7; margin-bottom:15px; color:#566153; }
.service-item { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.service-item + .service-item { border-left:1px solid #d9d6c7; }
.service-mark { color:#9b8050; font-size:16px; }
.section-heading { margin-top:49px; margin-bottom:10px; }
.section-heading h2 { font-weight:500; font-size:31px; letter-spacing:-1.2px; }
.live { padding:7px 11px; background:#e8eee3; border:1px solid #d8e1d1; border-radius:30px; font-size:10px; }
.searchbar { border-color:#d7d1c1; border-radius:9px; box-shadow:0 8px 28px #24332605; padding:9px; background:#fffefa; }
.searchbar:focus-within { border-color:#a58b59; box-shadow:0 0 0 3px #d8c49f26; }
.searchbar input { font-size:14px; }
.searchbar .primary { background:#183b2f; }
.filters { padding:23px 0 26px; }
select { background:transparent; border-color:#d6d0c0; border-radius:6px; font-size:12px; padding:11px 14px; }
.muted { color:#7b8071; font-size:11px; letter-spacing:.3px; }
.grid { gap:25px; }
.card { position:relative; border:1px solid #e4e0d5; border-radius:10px; background:#fffefa; box-shadow:0 4px 14px #27392303; transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s; }
.card:hover { transform:translateY(-7px); border-color:#c1ac83; box-shadow:0 20px 45px #223c2912; }
.card:focus-within { border-color:#b49a6c; box-shadow:0 12px 34px #24392313; }
.card:focus-within .product-image { transform:scale(1.035); }
.community-card { transition:box-shadow .4s,border-color .4s; }
.community-card:hover { border-color:#c5b28c; box-shadow:0 15px 38px #24392310; }
.image-button { position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#fffef9,#eeeae0); padding:32px; }
.image-button::after { content:''; position:absolute; height:150%; width:35%; left:-65%; top:-20%; transform:rotate(22deg); background:linear-gradient(90deg,transparent,#ffffff80,transparent); transition:left .8s ease; pointer-events:none; }
.card:hover .image-button::after { left:135%; }
.product-image { height:260px; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.card:hover .product-image { transform:scale(1.065); }
.card-body { padding:25px; }
.card .eyebrow { color:#887044; font-size:9px; letter-spacing:1.8px; }
.product-name { color:#253b2f; font-weight:500; font-size:15px; line-height:1.6; min-height:74px; }
.card-bottom { padding-top:18px; border-top:1px solid #e8e4d9; margin-top:8px; }
.price { font-size:23px; letter-spacing:-.7px; font-weight:500; font-variant-numeric:tabular-nums; }
.small { border-radius:5px; background:#f0eee5; border-color:#e2dccb; padding:10px 13px; font-size:11px; }
.small:hover { background:#193d2e; color:#fff6e5; border-color:#193d2e; }
.more { padding:40px 0 50px; }
.more .button { min-width:220px; }
.notice:not(:empty) { border-left:2px solid #ad9565; background:#ece8dc; padding:13px 18px; font-size:12px; border-radius:0 5px 5px 0; }
.assistant { background:#e9ece0; border-color:#c7ceb6; border-radius:9px; font-size:14px; }
.post { background:#efede3; border:1px solid #ded8c8; border-radius:10px; padding:26px; }
.post h3 { font-family:'Space Grotesk',sans-serif; font-weight:500; line-height:1.4; }
.post p { color:#6b7264; }
.footer { background:#132e25; color:#c2c9b7; border-top:1px solid #c2a974; padding:42px 24px; font-size:11px; letter-spacing:1px; line-height:2; }
.dialog { background:#fcfbf6; border:1px solid #cbbd9d; border-radius:13px; box-shadow:0 30px 130px #081e1880; padding:30px; }
.dialog[open] { animation:dialog-enter .32s cubic-bezier(.2,.7,.2,1) both; }
.dialog::backdrop { background:#061d19b3; backdrop-filter:blur(8px); }
.dialog-head { border-bottom:1px solid #e3dccd; padding-bottom:13px; margin-bottom:20px; }
.dialog-head h2 { font-weight:500; font-size:24px; }
.dialog-head .button { padding:9px 12px; font-size:11px; border-color:transparent; }
.field input,textarea { background:white; border-color:#dcd4c3; border-radius:5px; padding:13px; }
.field input:focus { border-color:#a58c5e; outline:2px solid #d8c49f44; outline-offset:1px; }
.field span { font-size:11px; letter-spacing:.3px; color:#606956; }
.auth-intro { margin:4px 0 24px; }
.auth-intro .eyebrow { color:#907343; letter-spacing:3px; }
.auth-intro h3 { font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:500; letter-spacing:-1px; margin:14px 0 10px; }
.auth-intro p { color:#6a7364; font-size:13px; margin:0; }
.google-host { display:flex; justify-content:center; align-items:center; min-height:44px; width:100%; margin:18px 0 8px; }
.google-status { color:#6d705f; font-size:12px; text-align:center; }
.auth-divider { display:flex; align-items:center; gap:15px; margin:23px 0; font-size:10px; color:#868777; letter-spacing:1px; }
.auth-divider::before,.auth-divider::after { content:''; height:1px; flex:1; background:#e0dacb; }
.auth-form > .primary { width:100%; margin-right:0; margin-top:18px; }
.auth-form > .button:last-child { display:block; margin:14px auto 0; border:0; font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.reveal-pending { opacity:0; transform:translateY(20px); }
.reveal-visible { opacity:1; transform:translateY(0); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
@keyframes hero-glint { 0%,55% { left:-80%; } 85%,100% { left:150%; } }
@keyframes hero-breathe { from { transform:scale(1); } to { transform:scale(1.055); } }
@keyframes dialog-enter { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(min-width:1500px) { .hero { min-height:590px; } .hero-content { padding-left:70px; } }
@media(max-width:900px) { .hero { min-height:460px; } .hero-content { padding:44px 30px; } .hero h1 { font-size:43px; } .product-image { height:225px; } .card-body { padding:21px; } .service-item { font-size:9px; letter-spacing:.6px; } }
@media(max-width:600px) {
  .header { padding:17px 16px; } .header-actions .button { padding:9px 8px; font-size:10px; } .header-actions .button:last-child { padding-inline:12px; }
  .wrap { padding:18px 16px; } .hero { min-height:0; border-radius:10px; } .hero::before { inset:10px; } .hero-content { padding:37px 27px 32px; }
  .hero h1 { font-size:40px; letter-spacing:-1.7px; margin:23px 0 19px; } .hero p { font-size:13px; line-height:1.8; } .hero .eyebrow { font-size:9px; letter-spacing:3px; }
  .hero .primary { padding:14px 20px; margin-top:13px; font-size:12px; } .hero-art { min-height:235px; } .hero-art::after { background:linear-gradient(180deg,#102e25,transparent 35%,#102e2540); }
  .service-strip { padding:20px 0; margin-bottom:0; } .service-item { flex-direction:column; gap:7px; text-align:center; font-size:8px; letter-spacing:.6px; line-height:1.6; padding:0 8px; }
  .service-mark { font-size:15px; } .section-heading { margin-top:29px; } .section-heading h2 { font-size:26px; } .live { display:inline-block; margin-top:5px; margin-bottom:15px; font-size:9px; }
  .searchbar { padding:7px; } .searchbar input { font-size:13px; padding:13px 9px; } .searchbar .button { font-size:12px; }
  .filters { padding:18px 0; } select { padding:10px 9px; font-size:11px; } .grid { gap:11px; } .card { border-radius:7px; } .image-button { padding:16px; } .product-image { height:162px; }
  .card-body { padding:13px; } .card .eyebrow { font-size:8px; letter-spacing:.7px; overflow-wrap:anywhere; } .product-name { font-size:12px; min-height:80px; line-height:1.5; }
  .card-bottom { padding-top:12px; gap:12px; } .price { font-size:19px; } .small { padding:9px; font-size:10px; } .dialog { padding:20px; } .auth-intro h3 { font-size:27px; }
  .footer { padding:29px 20px; font-size:9px; } .more { padding:30px 0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .reveal-pending { opacity:1; transform:none; } }
