:root{
    --black:#0f0d0e;
    --dark:#1c1719;
    --paper:#f9f8f6;
    --white:#ffffff;
    --lav:#ece4f0;
    --lav-2:#e0d4e8;
    --plum:#2a1f2b;
    --rose:#d4a5c3;
    --ink:#141213;
    --muted:#77717a;
    --line:#e6e1e6;
    --header-h:70px;
    --serif:'Cormorant Garamond', Georgia, serif;
    --sans:'Raleway', system-ui, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--paper);line-height:1.65;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .wrap{width:min(1760px,100% - 84px);margin-inline:auto}
  .eyebrow{display:block;font-size:.7rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
  .serif{font-family:var(--serif);font-weight:300}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:60;background:var(--black);color:var(--white);height:var(--header-h);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .logo{font-family:var(--serif);font-size:1.7rem;font-weight:400;letter-spacing:.38em;line-height:1}
  .logo em{font-weight:300;color:#b9b1bb}
  .menu{display:flex;gap:32px}
  .menu a{font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#d8d2d6;padding:6px 0;position:relative;transition:color .2s}
  .menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rose);transform:scaleX(0);transition:transform .3s}
  .menu a:hover,.menu a.active{color:var(--white)}
  .menu a.active::after,.menu a:hover::after{transform:scaleX(1)}
  .nav-right{display:flex;justify-content:flex-end;align-items:center;gap:22px}
  .ig{display:flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#d8d2d6}
  .ig:hover{color:var(--white)}
  .ig svg,.cart-btn svg,.burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
  .cart-btn{position:relative;display:flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#d8d2d6}
  .cart-btn:hover{color:var(--white)}
  .cart-count{background:var(--rose);color:var(--black);font-size:.65rem;font-weight:500;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;letter-spacing:0}
  .cart-count[data-n="0"]{display:none}
  .bump{animation:bump .4s}
  @keyframes bump{50%{transform:scale(1.25)}}
  .burger{display:none;color:var(--white)}

  /* ---------- Vistas ---------- */
  .view{display:none;animation:fadeIn .45s}
  .view.active{display:block}
  @keyframes fadeIn{from{opacity:0}}

  /* ---------- Botones ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 30px;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--black);transition:all .25s}
  .btn-dark{background:var(--black);color:var(--white)}
  .btn-dark:hover{background:var(--plum);border-color:var(--plum)}
  .btn-line{background:transparent;color:var(--ink)}
  .btn-line:hover{background:var(--black);color:var(--white)}
  .btn-light{border-color:rgba(255,255,255,.5);color:var(--white)}
  .btn-light:hover{background:var(--white);color:var(--black)}
  .btn[disabled]{opacity:.4;pointer-events:none}
  .btn-group{display:flex;flex-wrap:wrap}

  /* ---------- Home hero ---------- */
  .hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h))}
  .hero-text{background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:60px 42px}
  .hero-text h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,5.5vw,5rem);line-height:1.12;margin:44px 0 60px}
  .hero-text h1 em{font-style:italic}
  .hero-text p{color:var(--muted);font-size:.95rem;margin-bottom:78px;max-width:520px}
  .hero-text .btn-group{margin-left:13px}
  .hero-media{position:relative;background:var(--lav);overflow:hidden}
  .hero-media .art,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pill{position:absolute;top:37px;left:37px;z-index:2;background:var(--plum);color:var(--rose);font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;padding:6px 17px}

  /* ---------- Bloques home ---------- */
  .block{padding:110px 0}
  .block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:48px;flex-wrap:wrap}
  .block-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.05;margin-top:8px}
  .link-arrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
  .perks{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--paper);padding:44px 42px;border-bottom:1px solid var(--line)}
  .perk{text-align:center;font-size:.78rem;color:var(--muted);line-height:1.65;display:flex;flex-direction:column;align-items:center}
  .perk-icon{width:58px;height:58px;border-radius:50%;background:var(--lav);display:grid;place-items:center;margin-bottom:16px}
  .perk-icon svg{width:26px;height:26px;fill:none;stroke:var(--plum);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
  .perk b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--ink);margin-bottom:4px}
  .perk p{white-space:nowrap}
  .statements{display:grid;grid-template-columns:1fr 1fr}
  .statement{padding:110px 42px;display:flex;align-items:center}
  .statement-inner{max-width:620px}
  .statement h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.2vw,3rem);line-height:1.1;margin:14px 0 0}
  .statement h2 em{font-style:italic}
  .statement p{font-size:.95rem;max-width:520px}
  .statement-dark{background:var(--dark);color:var(--white)}
  .statement-dark .eyebrow{color:#b3a5dc}
  .statement-dark .rule{width:36px;height:1px;background:#5a4f5c;margin:38px 0 36px}
  .statement-dark p{color:#c9b9a6;margin-bottom:34px}
  .statement-dark .link-arrow{color:#d8d2d6;border-color:#5a4f5c}
  .statement-dark .link-arrow:hover{color:var(--white);border-color:var(--white)}
  .statement-light{background:#f1eeee}
  .statement-light .eyebrow{color:#a08a7e}
  .statement-light p{color:var(--muted);margin:14px 0 40px}
  .cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .cat-tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--lav);cursor:pointer}
  .cat-tile .art,.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
  .cat-tile:hover .art,.cat-tile:hover img{transform:scale(1.05)}
  .cat-tile::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(15,13,14,.55));pointer-events:none}
  .cat-tile .lbl{position:absolute;z-index:1;color:var(--white);left:22px;bottom:20px;right:22px;display:flex;justify-content:space-between;align-items:flex-end}
  .cat-tile h3{font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1}
  .cat-tile span{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}

  /* ---------- Catálogo ---------- */
  .page-hero{background:var(--black);color:var(--white);padding:150px 0 130px}
  .page-hero .eyebrow{color:#a79ba8}
  .page-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,7vw,5.6rem);line-height:1;margin:8px 0 18px}
  .page-hero p{color:#b8b0b8;font-size:.95rem;max-width:560px}
  .page-hero .rule{width:75px;height:1px;background:#7a4a5a;margin-top:36px}
  .subnav{position:sticky;top:var(--header-h);z-index:40;background:var(--dark);border-bottom:1px solid rgba(255,255,255,.05)}
  .subnav-inner{display:flex;justify-content:center;gap:36px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
  .subnav-inner::-webkit-scrollbar{display:none}
  .subnav button{flex:none;font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#8d8390;padding:24px 0 20px;border-bottom:1px solid transparent;transition:all .2s}
  .subnav button:hover{color:#e8e2e6}
  .subnav button.active{color:var(--rose);border-bottom-color:var(--white)}
  .cat-section{padding:100px 0 30px;scroll-margin-top:calc(var(--header-h) + 60px)}
  .cat-section:last-child{padding-bottom:120px}
  .cat-head{border-bottom:1px solid var(--line);padding-bottom:36px;margin-bottom:44px}
  .cat-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:1;margin:6px 0 6px}
  .cat-head p{font-size:.85rem;color:var(--muted)}
  .cat-head .eyebrow{font-size:.65rem}
  #view-catalogo{background:var(--white)}

  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 24px}
  .card{display:flex;flex-direction:column}
  .card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--lav);cursor:pointer}
  .card-media .art,.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
  .card:hover .card-media .art,.card:hover .card-media img{transform:scale(1.05)}
  .tag{position:absolute;top:16px;left:16px;background:var(--plum);color:var(--rose);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:5px 11px}
  .tag.light{background:var(--white);color:var(--ink)}
  .quick-add{position:absolute;left:0;right:0;bottom:0;background:var(--black);color:var(--white);padding:14px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;transform:translateY(100%);transition:transform .3s}
  .card:hover .quick-add{transform:none}
  .quick-add:hover{background:var(--plum)}
  .card-info{padding-top:18px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  .card-info h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.15;cursor:pointer}
  .card-info small{display:block;font-size:.72rem;color:var(--muted);margin-top:4px}
  .price{font-size:.9rem;font-weight:400;white-space:nowrap}
  .mobile-add{display:none;margin-top:12px;width:100%;padding:11px}

  /* ---------- Colecciones ---------- */
  .block-head h2 em{font-style:italic}
  .home-cols{background:var(--black);color:var(--white)}
  .home-cols .eyebrow{color:#a79ba8}
  .home-cols .link-arrow{border-color:var(--rose);color:var(--rose)}
  .home-col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .home-col{display:flex;flex-direction:column}
  .home-col-media{position:relative;aspect-ratio:4/5;overflow:hidden}
  .home-col-media .art,.home-col-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
  .home-col:hover .home-col-media .art,.home-col:hover .home-col-media img{transform:scale(1.05)}
  .home-col-info{padding:26px 4px 0}
  .home-col-info h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1.05;margin:8px 0 12px}
  .home-col-info p{color:#b8b0b8;font-size:.88rem;margin-bottom:20px;max-width:420px}
  .home-col-info .link-arrow{display:inline-block}
  .col-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:80px}
  .col-card{text-align:left;cursor:pointer}
  .col-card .col-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--lav);outline:1px solid transparent;outline-offset:6px;transition:outline-color .25s}
  .col-card .art{position:absolute;inset:0;width:100%;height:100%}
  .col-card.active .col-media{outline-color:var(--ink)}
  .col-card h3{font-family:var(--serif);font-weight:300;font-size:1.8rem;margin-top:16px;line-height:1.1}
  .col-card p{font-size:.8rem;color:var(--muted)}
  .col-detail{display:grid;grid-template-columns:1fr 2fr;gap:60px;border-top:1px solid var(--line);padding-top:60px}
  .col-detail h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.05;margin:8px 0 18px}
  .col-detail p{color:var(--muted)}
  .col-detail .grid{grid-template-columns:repeat(3,1fr)}

  /* ---------- Sobre Liora ---------- */
  .about-hero{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
  .about-hero .hero-text h1{margin:30px 0 30px}
  .about-hero .hero-text p{margin-bottom:18px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
  .materials{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .material{background:var(--lav);padding:34px 28px}
  .material h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.1;margin-bottom:10px}
  .material p{color:var(--muted);font-size:.88rem}
  .step{border-top:1px solid var(--ink);padding-top:22px}
  .step b{display:block;font-family:var(--serif);font-weight:300;font-size:2.4rem;line-height:1;margin-bottom:10px}
  .step h3{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
  .step p{color:var(--muted);font-size:.9rem}
  .faq{max-width:900px}
  .faq details{border-bottom:1px solid var(--line);padding:22px 0}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--serif);font-size:1.5rem;font-weight:400}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.4rem;color:var(--muted);transition:transform .3s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--muted);margin-top:10px;max-width:760px}

  /* ---------- Contacto ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px}
  .contact-info li{list-style:none;border-top:1px solid var(--line);padding:22px 0}
  .contact-info li:last-child{border-bottom:1px solid var(--line)}
  .contact-info span{display:block}
  .contact-info a{font-family:var(--serif);font-size:1.6rem;font-weight:400;word-break:break-word}
  .contact-info a:hover{color:var(--plum)}

  /* ---------- Formularios ---------- */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
  .field{display:flex;flex-direction:column;gap:8px}
  .field.full{grid-column:1/-1}
  .field label{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
  .field input,.field textarea{font-family:inherit;font-size:.95rem;font-weight:300;padding:13px 0;border:none;border-bottom:1px solid #cfc7cf;background:transparent;color:var(--ink);outline:none;border-radius:0;transition:border-color .2s}
  .field textarea{min-height:120px;resize:vertical}
  .field input:focus,.field textarea:focus{border-color:var(--ink)}
  .field input:user-invalid{border-color:#b04a5f}

  /* ---------- Footer ---------- */
  footer{background:var(--black);color:#a79ba8;padding:80px 0 30px;font-size:.85rem}
  .foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
  footer .logo{color:var(--white)}
  footer p{max-width:320px;margin-top:20px}
  footer h4{font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--white);margin-bottom:16px}
  footer li{list-style:none;margin-bottom:9px}
  footer a:hover{color:var(--white)}
  .copy{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.08em}

  /* ---------- Modales ---------- */
  .overlay{position:fixed;inset:0;background:rgba(15,13,14,.6);z-index:100;display:none;align-items:center;justify-content:center;padding:16px}
  .overlay.open{display:flex;animation:fadeIn .25s}
  .modal{background:var(--paper);width:100%;max-width:1000px;max-height:92vh;overflow:auto;position:relative;animation:rise .3s}
  @keyframes rise{from{transform:translateY(14px);opacity:0}}
  .modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;background:var(--white);font-size:1.1rem;z-index:3;display:grid;place-items:center}
  .product-modal{display:grid;grid-template-columns:1fr 1fr}
  .pm-media{position:relative;background:var(--lav);min-height:520px}
  .pm-media .art,.pm-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pm-body{padding:56px 44px}
  .pm-body h3{font-family:var(--serif);font-weight:300;font-size:2.8rem;line-height:1.05;margin:10px 0 10px}
  .pm-price{font-size:1.15rem;font-weight:400;margin-bottom:22px}
  .pm-body > p{color:var(--muted);margin-bottom:26px}
  .specs{border-top:1px solid var(--line);margin-bottom:28px}
  .specs div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.84rem}
  .specs span:first-child{color:var(--muted)}
  .specs span:last-child{text-align:right}
  .buy-row{display:flex;gap:12px}
  .buy-row .btn{flex:1}
  .qty{display:inline-flex;align-items:center;border:1px solid #cfc7cf}
  .qty button{width:38px;height:44px;font-size:1rem}
  .qty button:hover{background:var(--lav)}
  .qty span{min-width:28px;text-align:center;font-size:.9rem}
  .qty.sm button{width:30px;height:32px}
  .qty.sm span{min-width:22px;font-size:.82rem}

  /* ---------- Carrito ---------- */
  .scrim{position:fixed;inset:0;background:rgba(15,13,14,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--paper);z-index:95;transform:translateX(100%);transition:transform .38s ease;display:flex;flex-direction:column}
  .drawer.open{transform:none}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:0 26px;height:var(--header-h);background:var(--black);color:var(--white)}
  .drawer-head h3{font-family:var(--serif);font-weight:300;font-size:1.7rem;letter-spacing:.04em}
  .drawer-head button{color:var(--white);font-size:1.1rem;padding:8px}
  .drawer-list{flex:1;overflow:auto;padding:8px 26px}
  .line{display:grid;grid-template-columns:78px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
  .line-thumb{position:relative;width:78px;height:96px;overflow:hidden;background:var(--lav)}
  .line-thumb .art,.line-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .line h4{font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.15}
  .line small{display:block;color:var(--muted);font-size:.75rem;margin:2px 0 10px}
  .line-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;height:100%;gap:10px}
  .line-right .price{font-size:.88rem}
  .remove{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid currentColor}
  .remove:hover{color:var(--ink)}
  .drawer-empty{text-align:center;padding:70px 10px;color:var(--muted)}
  .drawer-empty .serif{font-size:1.8rem;color:var(--ink);display:block;margin-bottom:8px}
  .drawer-foot{padding:22px 26px 26px;border-top:1px solid var(--line);background:var(--white)}
  .total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
  .total span:first-child{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
  .total span:last-child{font-family:var(--serif);font-size:1.7rem}
  .drawer-foot small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:18px}
  .drawer-foot .btn{width:100%}

  /* ---------- Checkout ---------- */
  .checkout{display:grid;grid-template-columns:1.25fr 1fr}
  .co-main{padding:52px 44px}
  .co-main h3{font-family:var(--serif);font-weight:300;font-size:2.5rem;line-height:1.05;margin:8px 0 12px}
  .co-main > p{color:var(--muted);font-size:.9rem;margin-bottom:34px}
  .co-side{background:var(--lav);padding:52px 36px}
  .co-side h4{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
  .co-item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--lav-2);font-size:.88rem}
  .co-item b{font-weight:400}
  .co-item small{color:var(--muted)}
  .co-side .total{margin-top:18px}
  .co-actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
  .notice{font-size:.78rem;color:var(--muted);margin-top:16px;grid-column:1/-1}
  .mail-preview{background:var(--white);border:1px solid var(--line);padding:20px;font-family:var(--sans);font-size:.82rem;white-space:pre-wrap;max-height:240px;overflow:auto;margin-bottom:24px;color:var(--ink)}
  .steps-note{counter-reset:s;margin-bottom:26px}
  .steps-note li{list-style:none;counter-increment:s;display:flex;gap:14px;padding:8px 0;font-size:.9rem;color:var(--muted)}
  .steps-note li::before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:var(--black);color:var(--white);display:grid;place-items:center;font-size:.72rem}

  .toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,140px);background:var(--black);color:var(--white);padding:14px 26px;font-size:.78rem;letter-spacing:.06em;z-index:200;transition:transform .35s;display:flex;gap:18px;align-items:center;max-width:calc(100% - 32px)}
  .toast.show{transform:translate(-50%,0)}
  .toast button{color:var(--rose);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor}

  /* ---------- Responsive ---------- */
  @media (max-width:1200px){
    .grid{grid-template-columns:repeat(3,1fr)}
    .cat-tiles{grid-template-columns:repeat(2,1fr)}
    .col-detail{grid-template-columns:1fr;gap:34px}
  }
  @media (max-width:960px){
    .wrap{width:calc(100% - 40px)}
    .nav{grid-template-columns:auto 1fr auto;gap:14px}
    .burger{display:grid}
    .logo{font-size:1.45rem}
    .menu{position:fixed;top:var(--header-h);left:0;right:0;background:var(--black);flex-direction:column;gap:0;padding:10px 20px 24px;transform:translateY(-120%);transition:transform .35s;z-index:-1}
    .menu.open{transform:none}
    .menu a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.78rem}
    .menu a::after{display:none}
    .ig span{display:none}
    .hero,.about-hero{grid-template-columns:1fr;min-height:0}
    .hero-media{min-height:420px}
    .hero-text{padding:60px 20px}
    .hero-text h1{margin:26px 0 30px}
    .hero-text p{margin-bottom:40px}
    .hero-text .btn-group{margin-left:0}
    .perks{grid-template-columns:1fr 1fr;gap:34px 18px;padding:44px 20px}
    .perk p{white-space:normal;text-wrap:balance}
    .perk br{display:none}
    .statements{grid-template-columns:1fr}
    .statement{padding:80px 20px}
    .grid,.col-detail .grid{grid-template-columns:repeat(2,1fr);gap:36px 16px}
    .cat-tiles{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:1fr;gap:28px}
    .materials{grid-template-columns:1fr 1fr;gap:14px}
    .material{padding:24px 18px}
    .contact-grid{grid-template-columns:1fr;gap:50px}
    .foot{grid-template-columns:1fr 1fr}
    .product-modal,.checkout{grid-template-columns:1fr}
    .pm-media{min-height:340px}
    .pm-body,.co-main{padding:34px 22px}
    .co-side{padding:30px 22px}
    .subnav-inner{justify-content:flex-start;gap:28px}
    .page-hero{padding:90px 0 80px}
    .block{padding:80px 0}
    .cat-section{padding:70px 0 20px}
  }
  @media (max-width:600px){
    .cart-btn .cart-label{display:none}
    .card-info{flex-direction:column;gap:4px}
    .card-info h3{font-size:1.2rem}
    .quick-add{display:none}
    .mobile-add{display:flex}
    .form{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr}
    .col-list{grid-template-columns:repeat(3,1fr);gap:10px}
    .col-card h3{font-size:1.1rem}
    .col-card p{font-size:.7rem}
    .home-col-grid{grid-template-columns:1fr;gap:44px}
    .home-col-media{aspect-ratio:1}
    .btn-group .btn{flex:1;padding:14px 16px}
  }

/* =========================================================================
   AJUSTES PARA WORDPRESS
   Todo lo de arriba es el CSS del diseño original, sin tocar.
   Lo de abajo adapta ese diseño a páginas reales y a WooCommerce.
   ========================================================================= */

/* Las vistas ya no son una SPA: cada una es una página real */
.view{display:block;animation:none}

/* Accesibilidad: saltar al contenido */
.saltar{position:absolute;left:-9999px;top:0;z-index:999;background:var(--black);color:var(--white);padding:10px 16px;font-size:.8rem}
.saltar:focus{left:16px;top:16px}

/* Menú de Apariencia > Menús (WordPress genera ul/li) */
.menu ul{display:flex;gap:32px;list-style:none}
.menu li{list-style:none}
.menu .current-menu-item > a,.menu .current_page_item > a,.menu .current-menu-ancestor > a{color:var(--white)}
.menu .current-menu-item > a::after,.menu .current_page_item > a::after{transform:scaleX(1)}
@media (max-width:960px){
  .menu ul{flex-direction:column;gap:0}
}

/* Tarjeta: enlace invisible sobre la foto; etiqueta y botón por encima */
.card-link{position:absolute;inset:0;z-index:1}
.card-media .tag{z-index:2}
.quick-add{z-index:2;text-align:center}
.card-info h3 a{color:inherit}
.add_to_cart_button.loading{opacity:.6;pointer-events:none}
.added_to_cart{display:none!important}

/* Precios de WooCommerce (rebajas incluidas) */
.price del,.pm-price del{color:var(--muted);margin-right:8px;font-size:.9em}
.price ins,.pm-price ins{text-decoration:none}
.total strong{font-weight:inherit}

/* Colecciones: en el original las fotos no tenían recorte y dejaban
   una franja lila en la caja cuadrada. Mismo recorte que el resto. */
.col-card{display:block}
.col-card .col-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.col-detail[hidden]{display:none}

/* Subnavegación en páginas de categoría: enlaces en vez de botones */
.subnav a{flex:none;font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#8d8390;padding:24px 0 20px;border-bottom:1px solid transparent;transition:all .2s}
.subnav a:hover{color:#e8e2e6}
.subnav a.active{color:var(--rose);border-bottom-color:var(--white)}

/* Ficha de producto como página */
.producto-bloque{padding:60px 0 100px}
/* Mismo tamaño que el modal original (1000 px, foto de 520 px de alto mínimo) */
.producto-pagina{background:var(--paper);max-width:1000px;margin-inline:auto}
.pm-body .pm-titulo{font-family:var(--serif);font-weight:300;font-size:2.8rem;line-height:1.05;margin:10px 0 10px}
.pm-titulo a{color:inherit}
.pm-body .specs a{border-bottom:1px solid currentColor}
/* Campo editable con las medidas del <span> de 28 px del original */
.qty input{width:28px;height:44px;padding:0;text-align:center;border:none;background:transparent;font-family:inherit;font-size:.9rem;font-weight:300;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pm-galeria{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.pm-galeria button{width:56px;height:56px;padding:0;border:1px solid transparent;opacity:.75;transition:opacity .2s,border-color .2s;background:var(--white)}
.pm-galeria button.activa,.pm-galeria button:hover{opacity:1;border-color:var(--ink)}
.pm-galeria img{position:static!important;width:100%;height:100%;object-fit:cover}
.pm-agotado{color:var(--muted);font-size:.9rem}
.pm-agotado a{color:var(--ink)}
.migas{display:flex;flex-wrap:wrap;gap:10px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.migas a:hover{color:var(--ink)}
@media (max-width:960px){
  .producto-bloque{padding:30px 0 60px}
}

/* Carrito, solicitud y confirmación: la caja del modal original, en página */
.liora-flujo{background:var(--white);padding:70px 0 110px}
.liora-caja{max-height:none;overflow:visible;margin-inline:auto;animation:none}
.liora-caja--carrito{max-width:520px}
.liora-carrito{display:flex;flex-direction:column}
.liora-carrito .drawer-head{height:auto;padding:22px 26px}
.liora-carrito .drawer-list{overflow:visible}

/* Formulario de solicitud: los campos de WooCommerce con el aspecto .field */
.woocommerce-billing-fields > h3,.woocommerce-additional-fields > h3{display:none}
.woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.woocommerce-additional-fields{margin-top:22px}
.checkout .form-row{display:flex;flex-direction:column;gap:8px;margin:0}
.checkout .form-row-wide,.checkout .notes{grid-column:1/-1}
.checkout .form-row label{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.checkout .form-row .required{color:var(--plum);text-decoration:none;border:0}
.checkout .form-row .optional{text-transform:none;letter-spacing:0;font-weight:300;color:var(--muted)}
.checkout .input-text{width:100%;font-family:inherit;font-size:.95rem;font-weight:300;padding:13px 0;border:none;border-bottom:1px solid #cfc7cf;background:transparent;color:var(--ink);outline:none;border-radius:0;transition:border-color .2s}
.checkout textarea.input-text{min-height:110px;resize:vertical}
.checkout .input-text:focus{border-color:var(--ink)}
.checkout .woocommerce-invalid .input-text{border-color:#b04a5f}
.checkout > .woocommerce-NoticeGroup,.checkout > .woocommerce-error{grid-column:1/-1}
#payment{margin-top:30px}
#payment .wc_payment_methods{display:none}
#payment .place-order{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.woocommerce-privacy-policy-text{font-size:.78rem;color:var(--muted)}
.woocommerce-privacy-policy-text a{color:var(--ink);text-decoration:underline}
@media (max-width:600px){
  .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
  #payment .place-order .btn{width:100%}
}

/* Casilla de privacidad (solicitud y contacto) */
.liora-privacidad label,.checkout .form-row.liora-privacidad label{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;font-weight:300;letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
.liora-privacidad input{margin-top:3px;accent-color:var(--black)}
.liora-privacidad a{color:var(--ink);text-decoration:underline}
.liora-privacidad abbr{text-decoration:none;color:var(--plum)}

/* Avisos: propios y de WooCommerce, con la paleta del diseño */
.liora-aviso,.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;background:var(--lav);color:var(--ink);padding:16px 20px;font-size:.85rem;margin-bottom:24px;border-left:2px solid var(--plum)}
.liora-aviso-exito,.woocommerce-message{border-left-color:#5f8a6b}
.liora-aviso-error,.woocommerce-error{border-left-color:#b04a5f;background:#f6e9ec}
.woocommerce-error li{list-style:none}
.woocommerce-message .button,.woocommerce-info .button{float:right;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* Trampa antibots del formulario de contacto: invisible para personas */
.liora-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Páginas genéricas (aviso legal, privacidad, cookies...) */
.pagina-contenido{max-width:760px}
.pagina-contenido h2{font-family:var(--serif);font-weight:300;font-size:2rem;line-height:1.15;margin:44px 0 14px}
.pagina-contenido h3{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:30px 0 10px}
.pagina-contenido p,.pagina-contenido li{color:var(--muted);margin-bottom:14px}
.pagina-contenido ul,.pagina-contenido ol{padding-left:20px;margin-bottom:18px}
.pagina-contenido a{color:var(--ink);text-decoration:underline}

/* Pie: enlaces legales */
.copy-legal a{color:inherit}
.copy-legal a:hover{color:var(--white)}

/* El bloque "Detalles" del editor en las preguntas frecuentes */
.faq .wp-block-details{margin:0}
.faq details > :not(summary){color:var(--muted);margin-top:10px;max-width:760px}

/* El original es un <button>: el navegador le da peso 400. Aquí es un enlace. */
.cart-btn{font-weight:400}

/* Elementos que en el original eran <button> y aquí son enlaces <a>.
   El navegador da a los botones peso 400, interlineado normal y 13,33 px;
   un enlace hereda del body (300 y 1.65). Se replican esos valores para
   que midan y pesen exactamente igual que en el diseño. */
.quick-add,.mobile-add,.col-card,.subnav a,.drawer-foot .btn,.cart-btn{line-height:normal}
.quick-add,.col-card{font-weight:400}
.col-card{font-size:13.3333px}

/* El precio de WooCommerce dentro de .total viene envuelto en <span> anidados.
   Las reglas originales .total span:first-child (la palabra TOTAL, espaciada)
   y :last-child también alcanzarían a esos spans internos y espaciarían el
   importe. Que hereden del span que los contiene, como el texto plano original. */
.total span .woocommerce-Price-amount,.total span .woocommerce-Price-currencySymbol,.total span bdi{font:inherit;letter-spacing:inherit;text-transform:inherit}

/* Solicitud: el diseño original no marcaba con asterisco (todos los campos lo
   son). Se oculta solo el asterisco de obligatorio visual; los campos siguen
   llevando aria-required para lectores de pantalla. */
.checkout .form-row abbr.required{display:none}
#payment .place-order .co-actions{margin-top:0}
/* "Volver al carrito" es un enlace; en el original era un <button> de 42 px. */
#payment .co-actions .btn{line-height:normal}

/* =========================================================================
   ACCESIBILIDAD
   Nada de esto cambia el aspecto con ratón: solo el foco de teclado, los
   lectores de pantalla y la preferencia de "reducir movimiento".
   ========================================================================= */

/* Texto solo para lectores de pantalla (estándar de WordPress). Sin esta
   regla, los textos ocultos de WooCommerce (p. ej. "El precio original
   era…" en una rebaja) saldrían visibles en la página. */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--paper);clip:auto!important;clip-path:none;color:var(--ink);display:block;height:auto;left:8px;top:8px;padding:12px 16px;width:auto;z-index:100000}

/* El cajón y el menú móvil cerrados solo se apartaban de la vista: seguían
   recibiendo el foco del tabulador. visibility los saca, y el retraso deja
   terminar la animación de cierre original antes de ocultarlos. */
.drawer{visibility:hidden;transition:transform .38s ease,visibility 0s linear .38s}
.drawer.open{visibility:visible;transition:transform .38s ease,visibility 0s}
@media (max-width:960px){
  .menu{visibility:hidden;transition:transform .35s,visibility 0s linear .35s}
  .menu.open{visibility:visible;transition:transform .35s,visibility 0s}
}

/* Foco visible en las tarjetas: el enlace de la foto es invisible y el botón
   "Añadir" solo aparecía al pasar el ratón. Con teclado se ve igual. */
.card-link:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.card-link:focus-visible ~ .quick-add,.quick-add:focus-visible{transform:none}
.quick-add:focus-visible{outline:2px solid var(--rose);outline-offset:-4px}
.card-info h3 a:focus-visible,.cat-tile:focus-visible,.home-col:focus-visible,.col-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.home-cols .home-col:focus-visible{outline-color:var(--rose)}
.pm-galeria button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Sin scroll-padding global a propósito: sumado al scroll-margin de
   .cat-section del diseño original rompía la subnavegación del catálogo. */

/* Enlaces dentro de un párrafo: distinguibles sin depender del color. */
.notice a,.steps-note a{text-decoration:underline}

/* Quien pide al sistema menos movimiento: sin animaciones ni scroll suave. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
}

/* =========================================================================
   AVISO DE COOKIES Y PÁGINAS LEGALES
   ========================================================================= */
.liora-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:780px;margin-inline:auto;background:var(--black);color:#d8d2d6;padding:18px 22px;display:flex;gap:22px;align-items:center;justify-content:space-between;font-size:.8rem;line-height:1.55;box-shadow:0 10px 34px rgba(15,13,14,.28)}
.liora-cookies[hidden]{display:none}
.liora-cookies a{color:var(--rose);border-bottom:1px solid currentColor}
.liora-cookies a:hover{color:var(--white)}
.liora-cookies .btn{flex:none;padding:11px 24px}
.liora-cookies .btn:focus-visible,.liora-cookies a:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
/* Con el aviso a la vista, el aviso flotante del carrito sube para no taparse */
body.con-aviso-cookies .toast{bottom:126px}
body.con-aviso-cookies .toast:not(.show){transform:translate(-50%,calc(100% + 220px))}
@media (max-width:600px){
  .liora-cookies{flex-direction:column;align-items:stretch;gap:14px;left:12px;right:12px;bottom:12px;padding:16px 18px}
  .liora-cookies .btn{width:100%}
  body.con-aviso-cookies .toast{bottom:190px}
}

/* Tablas de las políticas (datos tratados, cookies) */
.pagina-contenido table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.84rem}
.pagina-contenido th{font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-align:left;color:var(--ink);padding:12px 14px 10px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.pagina-contenido td{color:var(--muted);padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pagina-contenido td:first-child{color:var(--ink)}
.pagina-contenido .tabla{overflow-x:auto;margin-bottom:8px}
.pagina-contenido .tabla table{min-width:620px}
.pagina-contenido strong{font-weight:500;color:var(--ink)}
.pagina-contenido .fecha{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* Ejemplos de prueba en los campos (placeholder). Un punto más oscuro que
   --muted (#77717a da 4,47:1 sobre --paper) para pasar el 4,5:1 de WCAG AA:
   4,74:1 sobre --paper y 5:1 sobre blanco. Opacidad 1 porque Firefox los
   aclara por defecto. Siguen claramente más claros que lo escrito (--ink). */
.field input::placeholder,.field textarea::placeholder,.checkout .input-text::placeholder{color:#736d76;opacity:1}