:root{--bg:#F8F7F5;--fg:#111;--muted:#666;--border:#ddd;--wa:#25D366}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:20}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font-weight:700;letter-spacing:.25em;text-decoration:none;color:var(--fg)}
.nav{display:flex;gap:24px}
.nav a{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg);opacity:.9;position:relative}
.nav a.active{opacity:1;font-weight:700;color:#000}
.nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:4px;background:#000;border-radius:3px}
.nav a:hover{opacity:.6}
.socials{display:flex;gap:14px;align-items:center}.socials a:hover{opacity:.7}
.top-banner{width:100%;height:320px;background:#d9d9d9 url('assets/encabezado.jpg') center/cover no-repeat}
.hero{padding:56px 0 48px;background:#f0efec;border-bottom:1px solid var(--border)}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.hero__title{font-family:"Playfair Display",serif;font-size:2rem;margin:0}
.section{padding:64px 0}.section--alt{background:#faf9f7}
.section__title{font-family:"Playfair Display",serif;font-size:1.8rem;margin:0 0 18px;text-align:center}
.grid{display:grid;gap:20px}.grid--cards{grid-template-columns:repeat(3,1fr)}
.grid--about{grid-template-columns:1fr 1fr;align-items:center}
.grid--process{grid-template-columns:repeat(4,1fr)}
.grid--product{grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media(max-width:900px){.grid--cards{grid-template-columns:1fr}.grid--about{grid-template-columns:1fr}.grid--process{grid-template-columns:repeat(2,1fr)}.grid--product{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid transparent;border-radius:18px;overflow:hidden;box-shadow:none;transition:transform .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-3px);border-color:var(--border)}
.card__body{padding:16px;text-align:left}.card__title{margin:0 0 6px 0;font-weight:600}
.muted{color:#666}.lead{font-size:1.05rem;color:#444}
.form{max-width:640px;margin:20px auto 0;border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff}
.form__row{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.form input,.form textarea,.form select{border:1px solid var(--border);border-radius:10px;padding:12px 14px;font:inherit}
.checkbox{display:flex;align-items:flex-start;gap:10px}.checkbox input{margin-top:4px}
.btn-form{display:inline-flex;justify-content:center;align-items:center;padding:12px 22px;background:#111;color:#fff;border:none;border-radius:50px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .2s, transform .1s}
.btn-form:hover{background:#333;transform:translateY(-2px)}
.btn-whatsapp{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:12px 22px;border-radius:50px;font-weight:600;font-size:.95rem;text-decoration:none}
.footer{border-top:1px solid var(--border);padding:18px 0;margin-top:24px}.tiny{font-size:.85rem;text-align:center;color:#666}
/* Gallery */
.gallery{display:flex;flex-direction:column;gap:12px}.gallery-main{height:420px;border-radius:16px;border:1px solid var(--border);background:#d9d9d9;background-size:cover;background-position:center}
.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gallery-thumb{height:90px;border-radius:12px;border:1px solid var(--border);cursor:pointer;background-size:cover;background-position:center}
/* Specs */
.panel{border:1px solid var(--border);background:#fff;border-radius:14px;padding:16px;margin:16px 0}.price{font-size:1.5rem;font-weight:700}
.specs{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--border)}.specs li{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--border)}
/* Filters */
.filters{border:1px solid var(--border);background:#fff;border-radius:14px;padding:12px 14px;margin:0 0 18px;display:grid;gap:10px;grid-template-columns:repeat(6,1fr);align-items:end}
.filters .field{display:flex;flex-direction:column;gap:6px}
.filters label{font-size:.85rem;color:#444}
.filters select,.filters input[type="number"],.filters input[type="text"]{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;width:100%}
.filters .actions{display:flex;gap:10px}
.filters .actions button{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.filters__summary{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.badges{display:flex;gap:8px;flex-wrap:wrap}.badge{font-size:.8rem;border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:#fff}
@media(max-width:900px){.filters{grid-template-columns:1fr 1fr}.filters .actions{grid-column:1/-1}}
.grid--cards img{display:block;width:100%;height:240px;object-fit:cover}
.card[hidden]{display:none !important}
.results-empty{border:1px dashed var(--border);border-radius:12px;padding:18px;text-align:center;color:#666;background:#fff}
/* Standalone collection extras */
.collection-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0 12px}
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin:16px 0}
.page-btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}
.page-indicator{font-size:.9rem;color:#444}
.view-toggle{display:flex;gap:6px}
.view-toggle button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}
.grid--cards.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.grid--cards.cols-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid--cards.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid--cards.cols-4{grid-template-columns:1fr}}

/* Cookies RGPD */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:16px;display:none;z-index:100}
.cookie-title{font-weight:700;margin:0 0 6px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.btn--primary{background:#111;color:#fff;border-color:#111}
.btn--ghost{background:#fff;color:#111;border-color:#111}
.cookie-link{text-decoration:underline}
.cookie-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:101}
.cookie-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,92vw);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:18px;display:none;z-index:102}
.cookie-modal h3{margin:0 0 12px}
.cookie-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:10px 0}
.cookie-row small{color:var(--muted)}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ddd;transition:.2s;border-radius:24px}
.slider:before{position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:#111}
.switch input:checked + .slider:before{transform:translateX(20px)}
.cookie-modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}


/* Responsive header / mobile navigation */
.menu-toggle{display:none;width:42px;height:42px;padding:9px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:23px;height:2px;background:#111;border-radius:999px;transition:transform .2s ease,opacity .2s ease}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .container{width:100%;max-width:100%;padding-left:18px;padding-right:18px}

  /* Show the important part of the workshop image without creating horizontal overflow */
  .top-banner{
    width:100%;
    height:210px;
    background-size:cover;
    background-position:72% center;
    background-repeat:no-repeat;
  }

  .header__inner{
    min-height:62px;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
    padding-top:9px;
    padding-bottom:9px;
  }
  .logo{font-size:.95rem;white-space:nowrap}
  .menu-toggle{display:flex;margin-left:auto}

  .nav{
    display:none;
    order:3;
    flex:0 0 100%;
    width:100%;
    min-width:0;
    flex-direction:column;
    gap:0;
    padding:8px 0 4px;
    margin-top:8px;
    border-top:1px solid var(--border);
  }
  .nav.is-open{display:flex}
  .nav a{
    display:block;
    width:100%;
    padding:11px 2px;
    font-size:.82rem;
    line-height:1.3;
    letter-spacing:.07em;
    white-space:normal;
  }
  .nav a.active::after{left:2px;right:auto;bottom:5px;width:42px;height:3px}

  /* Social icons stay available inside the opened menu, but do not force the header wider */
  .header .socials{
    display:none;
    order:4;
    flex:0 0 100%;
    width:100%;
    justify-content:flex-start;
    padding:10px 0 4px;
    gap:18px;
  }
  .header.menu-open .socials{display:flex}

  .header.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .header.menu-open .menu-toggle span:nth-child(2){opacity:0}
  .header.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hero{padding:42px 0 38px}
  .hero__title{font-size:clamp(1.85rem,8vw,2.35rem);line-height:1.18}
  .lead{font-size:1rem}
}

@media(max-width:480px){
  .top-banner{height:185px;background-position:74% center}
}