*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --g: #135D52; --t1: #1a1714; --t2: #6b6560; --t3: #a8a09a;
    --bg: #f9f7f4; --white: #ffffff; --border: rgba(26,23,20,0.10);
  }
  body { font-family:'Host Grotesk',sans-serif; background:var(--bg); color:var(--t1); -webkit-font-smoothing:antialiased; min-height:100vh; }

  nav { background:var(--white); border-bottom:0.5px solid var(--border); height:100px; display:flex; align-items:center; justify-content:center; position:sticky; top:0; z-index:100; }
  /* CARRITO NAV */
  .nav-cart { position:absolute; right:28px; background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:7px; font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--t2); padding:8px; }
  .nav-cart:hover { color:var(--t1); }
  .cart-badge { background:var(--g); color:#fff; border-radius:50%; width:16px; height:16px; font-size:9px; display:none; align-items:center; justify-content:center; font-weight:600; }
  .cart-badge.visible { display:flex; }

  /* BOTONES PRODUCTO */
  .cta-row { display:flex; gap:8px; margin-top:14px; align-items:stretch; }
  .cta-btn-sec { flex:1; display:block; padding:15px; background:none; color:var(--g); border:1px solid var(--g); font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .2s, color .2s; }
  .cta-btn-sec:hover { background:var(--g); color:#fff; }
  .cta-btn { flex:1; margin-top:0 !important; }

  /* VISTA CARRITO */
  .cart-wrap { max-width:640px; margin:0 auto; padding:40px 24px 80px; }
  .cart-header { display:flex; align-items:center; gap:16px; margin-bottom:32px; border-bottom:0.5px solid var(--border); padding-bottom:20px; }
  .cart-back { background:none; border:none; cursor:pointer; font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); padding:0; }
  .cart-back:hover { color:var(--t1); }
  .cart-title { font-size:22px; font-weight:300; letter-spacing:-0.5px; text-align: center;}
  .cart-empty { text-align:center; color:var(--t3); font-size:14px; padding:60px 0; }
  .cart-item { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:0.5px solid var(--border); }
  .cart-item-svg { width:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .cart-item-info { flex:1; }
  .cart-item-name { font-size:14px; font-weight:500; margin-bottom:4px; }
  .cart-item-specs { font-size:11px; color:var(--t3); line-height:1.8; }
  .cart-item-price { font-size:13px; font-weight:500; white-space:nowrap; }
  .cart-item-remove { background:none; border:none; cursor:pointer; color:var(--t3); font-size:16px; padding:0 0 0 12px; line-height:1; }
  .cart-item-remove:hover { color:var(--t1); }
  .cart-total-row { display:flex; justify-content:space-between; font-size:15px; font-weight:500; padding:20px 0 0; }
  .cart-actions { margin-top:24px; display:flex; flex-direction:column; gap:10px; }
  .cart-copy-confirm { text-align:center; font-size:11px; color:var(--g); opacity:0; transition:opacity .4s; margin-top:4px; }
  .logo { display:flex; align-items:center; gap:10px; cursor:pointer; }
  .logomark { width:32px; height:32px; background:var(--g); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .logomark span { color:#fff; font-size:9.5px; font-weight:600; letter-spacing:-.3px; line-height:1.15; text-align:center; pointer-events:none; }
  .brandname { font-size:16px; font-weight:500; letter-spacing:-.2px; color:var(--t1); }
  .logo-svg { display: block; height: 60px; /* o el tamaño que necesites */ width: auto;}

  .view { display:none; }
  .view.active { display:block; }

  /* CATALOG */
  .catalog-wrap { max-width:1100px; margin:0 auto; padding:0px; }

  /* HERO */
  .hero { position:relative; width:100%; height:50vh; overflow:hidden; background:var(--beige); }
  .hero::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}
  .hero img { width:100%; height:100%; object-fit:cover; display:block; }
  .hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; font-size:42px; font-weight:600; color:var(--white); z-index:1;}
  .page-header { padding:52px 0 36px; border-bottom:0.5px solid var(--border); background:var(--white); }
  .page-eyebrow { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--t3); margin-bottom:10px; }
  .page-title { font-size:40px; font-weight:300; letter-spacing:-1px; line-height:1; }
  .page-title em { font-style:italic; color:var(--t3); }
  .catalog { padding:48px 0 80px; }
  .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; }
  .card { background:var(--white); cursor:pointer; overflow:hidden; margin: 8px; }
  .card-img { aspect-ratio:3/4; overflow:hidden; background:#e0dbd5; }
  .card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .card:hover .card-img img { transform:scale(1.04); }
  .card-body { padding:14px 18px 18px; border-top:0.5px solid var(--border); display:flex; justify-content:space-between; align-items:baseline; }
  .card-name { font-size:14px; font-weight:400; color:var(--t1); }
  .card-price { font-size:13px; font-weight:300; color:var(--t2); }
  footer { border-top:0.5px solid var(--border); padding:20px 40px; margin:0 auto; background:var(--white); display:flex; justify-content:space-evenly; align-items:center; }
  .foot-copy { font-size:11px; color:var(--t3); }
  .foot-mail { font-size:11px; color:var(--t3); }
  .foot-mail a { color:var(--g); text-decoration:none; }

  /* PRODUCT */
  a { color: inherit;}
  .product-wrap { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 100px); align-items:start; max-width: 1200px; margin: 0px auto; }

  .product-left { position:sticky; top:100px; height:calc(100vh - 100px); background:#eeebe5; overflow:hidden; display:flex; flex-direction:column; }

  .gallery-area { flex:1; position:relative; overflow:hidden; }
  .gallery-photo { position:absolute; inset:0; opacity:1; transition:opacity .35s ease; background:#e0dbd5; display:flex; align-items:center; justify-content:center; }
  .gallery-photo img {  width:100%; height:100%; object-fit:cover ; display:block; }
  .gallery-photo.hidden { opacity:0; pointer-events:none; }

  /* SVG overlay */
  .svg-overlay {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .4s ease; pointer-events:none;
    background:#eeebe5;
  }
  .svg-overlay.visible { opacity:1; pointer-events:auto; }


  /* view toggle */
  .view-toggle { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:1px; z-index:5; }
  .toggle-btn {
    font-family:inherit; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
    padding:7px 16px; border:none; cursor:pointer;
    background:rgba(255,255,255,0.85); color:var(--t2);
    transition:background .15s, color .15s; backdrop-filter:blur(4px);
  }
  .toggle-btn.active { background:var(--t1); color:#fff; }

  /* light toggle button */
  .light-toggle {
    position:absolute; top:16px; right:16px; z-index:6;
    width:36px; height:36px; border-radius:50%;
    border:0.5px solid rgba(255,255,255,0.5);
    background:rgba(255,255,255,0.7); color:var(--t2);
    cursor:pointer; transition:all .35s; backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center;
    padding:0;
  }
  .light-toggle svg { display:block; transition:color .35s; }
  .light-toggle.on { background:rgba(255,220,80,0.25); border-color:rgba(220,170,40,0.5); color:#b8860b; }
  .light-toggle.show { display:flex; }

  /* Dark bg when lit */
  .svg-overlay { transition:opacity .4s ease, background .6s ease; }
  .svg-overlay.lit { background: radial-gradient(ellipse at 50% 52%, #3d2e00 0%, #1e1600 50%, #0d0d0d 100%) !important; }

  .gallery-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,0.82); border:none;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:16px; color:var(--t1);
    opacity:0; transition:opacity .2s; z-index:4; backdrop-filter:blur(4px);
  }
  .gallery-area:hover .gallery-arrow { opacity:1; }
  .gallery-arrow.prev { left:14px; }
  .gallery-arrow.next { right:14px; }

  .gallery-thumbs { display:flex; gap:1px; background:var(--border); height:82px; flex-shrink:0; }
  .thumb { flex:1; overflow:hidden; cursor:pointer; opacity:.45; transition:opacity .2s; background:#d6d0c8; }
  .thumb.active { opacity:1; }
  .thumb:hover { opacity:.8; }
  .thumb img { width:100%; height:100%; object-fit:cover; display:block; }

  /* RIGHT panel */
  .product-panel { position:sticky; top:100px; height:calc(100vh - 100px); overflow-y:auto; background:var(--white); border-left:0.5px solid var(--border); padding:40px 36px 36px; display:flex; flex-direction:column; }
  .product-panel::-webkit-scrollbar { width:3px; }
  .product-panel::-webkit-scrollbar-thumb { background:var(--border); }

  .back-btn { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); cursor:pointer; margin-bottom:28px; border:none; background:none; padding:0; font-family:inherit; transition:color .2s; }
  .back-btn:hover { color:var(--t1); }
  .back-btn::before { content:'←'; font-size:14px; }

  /* SVG above name */
  .p-svg-top { margin-bottom:16px; line-height:0; }

  .p-eyebrow { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--t3); margin-bottom:6px; }
  .p-name { font-size:28px; font-weight:300; letter-spacing:-.6px; line-height:1.05; margin-bottom:6px; }
  .p-desc { font-size:13px; font-weight:300; color:var(--t2); line-height:1.75; margin-bottom:20px; }

  .p-price-row { display:flex; align-items:baseline; gap:10px; padding:14px 0; border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); margin-bottom:24px; }
  .p-price { font-size:22px; font-weight:300; color:var(--t1); transition:color .2s; }
  .p-price-note { font-size:11px; color:var(--t3); }

  .config-section { margin-bottom:20px; }
  .config-label { font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--t3); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .config-label-text { flex-shrink:0; }
  .config-label-right { display:flex; align-items:center; gap:6px; }
  .config-selected { font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--t1); }
  .config-extra { font-size:11px; font-weight:500; color:var(--g); letter-spacing:0; text-transform:none; }

  .swatches { display:flex; gap:8px; flex-wrap:wrap; }
  .swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s; }
  .swatch:hover { transform:scale(1.1); }
  .swatch.active { box-shadow:0 0 0 2px var(--white), 0 0 0 3.5px var(--t1); }
  .swatch.disabled {
  opacity: 0.5;
  position: relative;
  overflow: hidden;
}
.swatch.disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    red calc(50% - 1px),
    red calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

  .pills { display:flex; gap:6px; flex-wrap:wrap; }
  .pill { padding:7px 14px; border:0.5px solid var(--border); font-family:inherit; font-size:12px; font-weight:400; color:var(--t2); background:transparent; cursor:pointer; transition:all .15s; }
  .pill:hover { border-color:var(--t2); color:var(--t1); }
  .pill.active { background:var(--t1); color:var(--white); border-color:var(--t1); }
  .pill.disabled { opacity: 0.4; cursor: not-allowed; position: relative; overflow: hidden; }
  .pill.disabled::after { content:''; position:absolute; inset:0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px)); }

  .config-divider { height:0.5px; background:var(--border); margin:4px 0 20px; }

  /* DETALLE */
  .details-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:none; border-top:0.5px solid var(--border); padding:14px 0; cursor:pointer; font-family:inherit; margin-top:auto; }
  .details-toggle-label { font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--t3); }
  .details-chevron { color:var(--t3); transition:transform .25s ease; flex-shrink:0; }
  .details-toggle[aria-expanded="true"] .details-chevron { transform:rotate(180deg); }
  .details-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
  .details-body > * { overflow:hidden; }
  .details-body.open { grid-template-rows:1fr; }
  .details-table { width:100%; border-collapse:collapse; margin-bottom:4px; }
  .details-table tr { border-bottom:0.5px solid var(--border); }
  .details-table tr:last-child { border-bottom:none; }
  .details-table td { padding:8px 0; font-size:12px; line-height:1.5; vertical-align:top; }
  .details-table td:first-child { color:var(--t3); width:42%; padding-right:12px; }
  .details-table td:last-child { color:var(--t1); font-weight:300; }

  .price-breakdown { padding-top:18px; border-top:0.5px solid var(--border); }

  /* BANNERS */
  .banner-product { display:block; width:100%; margin-bottom:20px; border-radius:4px;}
  .banner-product img { width:100%; display:block; object-fit:cover; }
  .banner-home { display:block; border-radius:4px;}
  .banner-home img { width:100%; height:100%; display:block; object-fit:cover; }
  .page-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; }
  .page-header-banner { flex:0 0 320px; height:60px; }
  .breakdown-row { display:flex; justify-content:space-between; font-size:12px; color:var(--t3); padding:4px 0; }
  .breakdown-row.total { font-size:14px; font-weight:500; color:var(--t1); border-top:0.5px solid var(--border); margin-top:6px; padding-top:10px; }
  .cta-btn { display:block; width:100%; padding:15px; background:var(--g); color:#fff; border:none; font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; margin-top:14px; transition:background .2s; }
  .cta-btn:hover { background:#0d3e36; }
  .copy-confirm { font-size:11px; color:var(--g); letter-spacing:.06em; text-align:center; margin-top:8px; opacity:0; transition:opacity .3s; min-height:16px; }

@media (max-width: 1440px) {
  .product-wrap {
    max-width: 920px;
  }
}


  @media (max-width:900px) {
    .catalog-wrap { padding-left:0px; padding-right:0px; }
    .grid { grid-template-columns:repeat(2,1fr);}
    .page-title { font-size:28px; text-align: center; }
    .product-wrap { grid-template-columns:1fr; }
    .product-left { position:relative; top:0; height:150vw; }
    .product-panel { position:relative; top:0; height:auto; }
  }
  @media (max-width:560px) { 
    .grid { grid-template-columns:0,1fr; } 
    }