:root {
  --crema: #f3e7d2;
  --crema-claro: #fff9ed;
  --cafe: #4e2b13;
  --cafe-claro: #8a633e;
  --dorado: #b08a59;
  --sombra: rgba(63, 34, 15, 0.2);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  color: var(--cafe);
  background:
    radial-gradient(circle at top, var(--crema-claro), transparent 55%),
    var(--crema);
  font-family: "Montserrat", sans-serif;
}

.tarjeta-principal {
  width: min(100%, 430px);
  overflow: hidden;
  background: rgba(255, 249, 237, 0.78);
  border: 1px solid var(--dorado);
  border-radius: 28px;
  box-shadow: 0 20px 55px var(--sombra);
}

.presentacion {
  padding: 42px 26px 24px;
  text-align: center;
}

.logo-musical {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-family: "Cormorant Garamond", serif;
  font-size: 58px;
  border: 1px solid var(--dorado);
  border-radius: 50%;
  background: var(--crema);
}

h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 13vw, 62px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}

.nombre-secundario {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.42em;
}

.descripcion {
  max-width: 330px;
  margin: 20px auto 0;
  color: var(--cafe-claro);
  font-size: 14px;
  line-height: 1.6;
}

.enlaces {
  display: grid;
  gap: 13px;
  padding: 8px 22px 30px;
}

.boton {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 17px;
  color: var(--cafe);
  text-decoration: none;
  background: var(--crema-claro);
  border: 1px solid rgba(176, 138, 89, 0.65);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px var(--sombra);
}

.boton:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
}

.boton-catalogo {
  color: var(--crema-claro);
  background: var(--cafe);
  border-color: var(--cafe);
}

.icono {
  width: 28px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 600;
}

.flecha {
  margin-left: auto;
  font-size: 24px;
}

footer {
  padding: 24px 20px 28px;
  text-align: center;
  border-top: 1px solid rgba(176, 138, 89, 0.45);
}

.frase {
  font-family: "Cormorant Garamond", serif;
  font-size: 25px;
  font-style: italic;
}

.categorias {
  margin-top: 8px;
  color: var(--cafe-claro);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 380px) {
  body { padding: 10px; }
  .tarjeta-principal { border-radius: 20px; }
  .presentacion { padding-top: 32px; }
  .enlaces { padding-inline: 15px; }
}

/* Catálogo de productos */
.pagina-catalogo { display:block; padding:0; background:#f7efe1; }
.cabecera-catalogo { position:sticky; z-index:10; top:0; min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:10px clamp(20px,6vw,86px); background:rgba(255,249,237,.94); border-bottom:1px solid rgba(78,43,19,.16); backdrop-filter:blur(12px); }
.marca img { width:132px; height:64px; display:block; object-fit:cover; object-position:center 71%; }
.menu-catalogo { display:flex; align-items:center; gap:clamp(18px,4vw,48px); }
.menu-catalogo a { color:var(--cafe); font-size:14px; font-weight:500; text-decoration:none; }
.menu-catalogo a::after { content:""; width:0; height:1px; display:block; margin-top:6px; background:var(--cafe); transition:width .2s ease; }
.menu-catalogo a:hover::after,.menu-catalogo a.activo::after { width:100%; }
.portada-catalogo { min-height:520px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:70px clamp(24px,8vw,120px); background:linear-gradient(90deg,rgba(246,235,217,.98) 0%,rgba(246,235,217,.84) 55%,rgba(246,235,217,.55) 100%),url("logo-sonares.png") right 10% center/min(56vw,680px) auto no-repeat; border-bottom:1px solid rgba(78,43,19,.18); }
.sobrelinea { color:var(--cafe-claro); font-size:12px; font-weight:600; letter-spacing:.27em; }
.portada-catalogo h1 { max-width:720px; margin-top:14px; font-size:clamp(48px,7vw,86px); letter-spacing:.01em; line-height:.92; }
.portada-catalogo>p:not(.sobrelinea) { max-width:590px; margin-top:24px; color:var(--cafe-claro); font-size:16px; line-height:1.8; }
.accion-principal { margin-top:30px; padding:15px 25px; color:var(--crema-claro); background:var(--cafe); border:1px solid var(--cafe); text-decoration:none; transition:.2s ease; }
.accion-principal:hover { color:var(--cafe); background:transparent; }
.seccion-categorias,.seccion-productos { padding:80px clamp(20px,6vw,86px); }
.encabezado-seccion { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.encabezado-seccion h2,.barra-productos h2,.contacto-catalogo h2 { margin-top:8px; font-family:"Cormorant Garamond",serif; font-size:clamp(38px,5vw,58px); font-weight:500; }
.encabezado-seccion>p { max-width:390px; color:var(--cafe-claro); line-height:1.7; }
.categorias-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:38px; }
.categoria { min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--cafe); background:rgba(255,249,237,.72); border:1px solid rgba(176,138,89,.55); cursor:pointer; font:500 14px "Montserrat",sans-serif; transition:.2s ease; }
.categoria span { font:30px "Cormorant Garamond",serif; }
.categoria:hover,.categoria.activa { color:var(--crema-claro); background:var(--cafe); transform:translateY(-3px); }
.seccion-productos { background:rgba(255,249,237,.64); }
.barra-productos { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.buscador { width:min(100%,360px); display:flex; align-items:center; gap:10px; padding:0 15px; background:#fffaf0; border:1px solid rgba(176,138,89,.6); }
.buscador input { width:100%; height:48px; color:var(--cafe); background:transparent; border:0; outline:0; font:14px "Montserrat",sans-serif; }
.aviso-boceto { margin-top:28px; padding:13px 16px; color:var(--cafe-claro); background:#efe1cb; border-left:3px solid var(--dorado); font-size:13px; line-height:1.6; }
.aviso-compra { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px 18px; margin-top:28px; padding:18px 20px; color:#c9c1b7; background:#12100d; border:1px solid rgba(183,138,69,.38); border-left:3px solid var(--dorado); font-size:14px; line-height:1.65; }
.aviso-compra strong { color:var(--dorado); font:600 20px "Cormorant Garamond",serif; }
.aviso-compra p { margin:0; }
.productos-listado { display:grid; gap:58px; margin-top:42px; }
.grupo-productos { min-width:0; }
.grupo-productos-encabezado { display:flex; align-items:end; gap:18px; padding-bottom:14px; border-bottom:1px solid rgba(183,138,69,.3); }
.grupo-productos-encabezado .sobrelinea { margin-right:auto; }
.grupo-productos-encabezado h3 { color:#f1ede6; font:500 clamp(30px,4vw,42px)/1 "Cormorant Garamond",serif; }
.grupo-productos-encabezado span { color:#8f8981; font-size:12px; }
.productos-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.producto { overflow:hidden; background:#fffaf0; border:1px solid rgba(176,138,89,.48); box-shadow:0 14px 30px rgba(63,34,15,.07); }
.foto-provisional { aspect-ratio:4/3; display:grid; place-items:center; color:rgba(78,43,19,.55); background:linear-gradient(135deg,#ead8bd,#f8eddc); text-align:center; font-size:12px; letter-spacing:.18em; line-height:1.8; }
.producto-contenido { padding:22px; }
.tipo { color:var(--cafe-claro); font-size:11px; font-weight:600; letter-spacing:.2em; }
.producto h3 { margin-top:7px; font:600 27px "Cormorant Garamond",serif; }
.resumen { margin-top:10px; min-height:66px; color:var(--cafe-claro); font-size:13px; line-height:1.65; }
.producto-pie { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:17px; border-top:1px solid rgba(176,138,89,.35); }
.producto-pie strong,.producto-pie a { font-size:13px; }
.producto-pie a { color:var(--cafe); font-weight:600; }
.sin-resultados { margin:35px 0; text-align:center; }
.catalogo-vacio { max-width:680px; margin:55px auto 10px; padding:58px 28px; text-align:center; border:1px solid rgba(183,138,69,.3); background:#0f0f0f; }
.catalogo-vacio[hidden] { display:none; }
.catalogo-vacio span { color:var(--dorado); font:52px "Cormorant Garamond",serif; }
.catalogo-vacio h3 { margin-top:12px; font:500 clamp(32px,5vw,46px) "Cormorant Garamond",serif; }
.catalogo-vacio p { max-width:520px; margin:13px auto 25px; color:#aaa39a; line-height:1.75; }
.catalogo-vacio a { display:inline-block; padding:13px 19px; color:#080808; background:var(--dorado); text-decoration:none; font-weight:600; }
.seccion-categorias[hidden] { display:none; }
.foto-provisional img { width:100%; height:100%; object-fit:cover; }
.producto[hidden] { display:none; }
.contacto-catalogo { padding:80px 20px; color:var(--crema-claro); background:var(--cafe); text-align:center; }
.contacto-catalogo .sobrelinea { color:#d6b98d; }
.contacto-catalogo p:not(.sobrelinea) { margin:12px auto 28px; max-width:560px; color:#ead9c1; line-height:1.7; }
.contacto-catalogo a { display:inline-block; padding:14px 22px; color:var(--cafe); background:var(--crema-claro); text-decoration:none; }
.pie-catalogo { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:35px clamp(20px,6vw,86px); background:#24150c; color:#ead9c1; }
.pie-catalogo>p:first-child { display:flex; flex-direction:column; }
.pie-catalogo strong { font:30px "Cormorant Garamond",serif; letter-spacing:.13em; }
.pie-catalogo span { font-size:9px; letter-spacing:.35em; }
.pie-catalogo>p:nth-child(2) { font:italic 20px "Cormorant Garamond",serif; }
.pie-catalogo div { display:flex; gap:18px; }
.pie-catalogo a { color:#ead9c1; font-size:13px; }
.oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

@media (max-width:920px) { .categorias-grid{grid-template-columns:repeat(3,1fr)} .productos-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px) {
  .cabecera-catalogo{min-height:72px;padding:8px 16px}.marca img{width:88px;height:52px}.menu-catalogo{gap:14px}.menu-catalogo a{font-size:12px}
  .portada-catalogo{min-height:470px;padding:60px 22px;background-position:center bottom;background-size:auto,520px auto}.portada-catalogo h1{font-size:clamp(44px,15vw,62px)}
  .seccion-categorias{padding:34px 0 24px}.seccion-categorias .encabezado-seccion{padding:0 16px}.seccion-productos{padding:42px 12px 60px}.encabezado-seccion,.barra-productos{align-items:stretch;flex-direction:column}
  .categorias-grid{display:flex;gap:9px;overflow-x:auto;margin-top:22px;padding:0 16px 10px;scrollbar-width:none;scroll-snap-type:x proximity}.categorias-grid::-webkit-scrollbar{display:none}.categoria{flex:0 0 auto;min-height:44px;padding:10px 16px;scroll-snap-align:start}.categoria span{display:none}
  .buscador{width:100%}.productos-listado{gap:42px;margin-top:34px}.grupo-productos-encabezado{align-items:center;gap:10px}.grupo-productos-encabezado .sobrelinea{display:none}.grupo-productos-encabezado h3{margin-right:auto}.productos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px;margin-top:20px}.producto{border:0;background:transparent;box-shadow:none;cursor:pointer}.producto:hover{transform:none}.foto-provisional{aspect-ratio:1/1;background:#151515;border:1px solid rgba(183,138,69,.2)}.foto-provisional img{object-fit:cover}
  .producto-contenido{display:flex;flex-direction:column;padding:12px 2px 0}.producto-pie{order:1;margin:0;padding:0;border:0}.producto-pie strong{font-size:16px;line-height:1.25}.producto-pie .ver-producto{display:none}.producto h3{order:2;margin-top:8px;font:500 19px/1.15 "Cormorant Garamond",serif}.producto .tipo{order:3;margin-top:8px;color:#8e8983;font-size:11px;letter-spacing:.1em}.producto .resumen{display:none}.pie-catalogo{flex-direction:column;text-align:center}
}

/* Tema oscuro Sonares */
:root { --crema:#101010; --crema-claro:#f1ede6; --cafe:#f1ede6; --cafe-claro:#aaa39a; --dorado:#b78a45; --sombra:rgba(0,0,0,.48); }
body { color:var(--crema-claro); background:radial-gradient(circle at top,#25201a,transparent 48%),#080808; }
.tarjeta-principal { background:rgba(15,15,15,.94); border-color:rgba(183,138,69,.62); }
.logo-musical { color:var(--dorado); background:#151515; }
.boton { color:var(--crema-claro); background:#171717; border-color:rgba(183,138,69,.48); }
.boton-catalogo { color:#090909; background:var(--dorado); border-color:var(--dorado); }

.pagina-catalogo { color:#f1ede6; background:#080808; }
.cabecera-catalogo { background:rgba(7,7,7,.96); border-color:rgba(183,138,69,.28); }
.marca img { filter:brightness(.9) contrast(1.12); }
.marca-texto { display:flex; flex-direction:column; align-items:center; color:#f1ede6; text-decoration:none; }
.marca-texto strong { font:500 29px/1 "Cormorant Garamond",serif; letter-spacing:.16em; }
.marca-texto span { margin-top:4px; color:var(--dorado); font-size:8px; letter-spacing:.38em; }
.menu-catalogo a { color:#f1ede6; }
.menu-catalogo a::after { background:var(--dorado); }
.portada-catalogo { background:linear-gradient(90deg,rgba(5,5,5,.99) 0%,rgba(5,5,5,.93) 52%,rgba(5,5,5,.65) 100%),url("logo-sonares.png") right 7% center/min(55vw,680px) auto no-repeat; border-color:rgba(183,138,69,.28); }
.portada-catalogo h1 { color:#f4efe7; }
.sobrelinea,.tipo { color:#c49752; }
.portada-catalogo>p:not(.sobrelinea),.encabezado-seccion>p,.resumen { color:#aaa39a; }
.accion-principal { color:#0a0a0a; background:var(--dorado); border-color:var(--dorado); }
.accion-principal:hover { color:var(--dorado); background:transparent; }
.seccion-categorias { background:#0c0c0c; }
.categoria { color:#eee8df; background:#121212; border-color:rgba(183,138,69,.32); }
.categoria:hover,.categoria.activa { color:#090909; background:var(--dorado); }
.seccion-productos { background:#070707; }
.buscador { color:#f1ede6; background:#141414; border-color:rgba(183,138,69,.42); }
.buscador input { color:#f1ede6; }
.buscador input::placeholder { color:#85817c; }
.aviso-boceto { color:#bdb5ab; background:#17130e; border-color:var(--dorado); }
.producto { background:#111; border-color:rgba(183,138,69,.28); box-shadow:0 15px 38px rgba(0,0,0,.35); transition:transform .2s ease,border-color .2s ease; }
.producto:hover { transform:translateY(-5px); border-color:rgba(183,138,69,.7); }
.foto-provisional { color:#8c8378; background:linear-gradient(135deg,#111,#24201b); }
.producto-pie { border-color:rgba(183,138,69,.22); }
.ver-producto { padding:10px 14px; color:#0a0a0a; background:var(--dorado); border:1px solid var(--dorado); font-weight:600; cursor:pointer; transition:.2s ease; }
.ver-producto:hover { color:var(--dorado); background:transparent; }
.contacto-catalogo { color:#f1ede6; background:#12100d; border-top:1px solid rgba(183,138,69,.35); }
.contacto-catalogo a { color:#080808; background:var(--dorado); }
.pie-catalogo { color:#c8c0b6; background:#040404; border-top:1px solid rgba(183,138,69,.2); }
.pie-catalogo a { color:#c8c0b6; }

.sin-scroll { overflow:hidden; }
.modal-fondo { position:fixed; z-index:1000; inset:0; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(0,0,0,.84); backdrop-filter:blur(7px); }
.modal-fondo.visible { display:flex; }
.modal-producto { position:relative; width:min(1080px,100%); max-height:92vh; overflow:auto; display:grid; grid-template-columns:1.1fr .9fr; color:#f1ede6; background:#101010; border:1px solid rgba(183,138,69,.38); box-shadow:0 30px 90px #000; }
.modal-cerrar { position:absolute; z-index:2; top:14px; right:14px; width:42px; height:42px; color:#f1ede6; background:#101010; border:1px solid rgba(183,138,69,.48); border-radius:50%; font-size:25px; cursor:pointer; }
.modal-galeria { padding:28px; background:#080808; }
.modal-imagen { aspect-ratio:1/1; display:grid; place-items:center; color:#81786e; background:linear-gradient(135deg,#141414,#28231d); text-align:center; font-size:12px; letter-spacing:.16em; line-height:1.8; }
.modal-imagen img { width:100%; height:100%; object-fit:contain; }
.miniaturas { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.miniatura { aspect-ratio:1; color:#aaa39a; background:#171717; border:1px solid #35302b; cursor:pointer; }
.miniatura img { width:100%; height:100%; display:block; object-fit:cover; }
.miniatura.activa { color:var(--dorado); border-color:var(--dorado); }
.modal-info { display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,60px); }
.modal-info h2 { margin-top:8px; font:600 clamp(38px,5vw,56px)/1 "Cormorant Garamond",serif; }
.modal-precio { margin-top:18px; font-weight:600; }
.disponibilidad { margin-top:9px; color:#78a782; font-size:13px; }
.modal-info>p:nth-of-type(4) { margin-top:24px; color:#aaa39a; line-height:1.8; }
.aviso-compra-producto { grid-template-columns:1fr; gap:4px; margin-top:22px; padding:15px 17px; font-size:13px; }
.modal-info h3 { margin-top:25px; font:500 25px "Cormorant Garamond",serif; }
.modal-info ul { margin:10px 0 0 20px; color:#aaa39a; font-size:14px; line-height:1.9; }
.modal-whatsapp { margin-top:28px; padding:15px 18px; color:#fff; background:#285f3d; text-align:center; text-decoration:none; font-weight:600; }
.modal-navegacion { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.modal-navegacion button { min-height:46px; padding:12px 14px; color:#d9d1c6; background:#171717; border:1px solid rgba(183,138,69,.45); font:600 13px/1.2 inherit; letter-spacing:.04em; cursor:pointer; }
.modal-navegacion button:last-child { color:#080808; background:var(--dorado); border-color:var(--dorado); }
.modal-navegacion button:hover { border-color:var(--dorado); }

@media (max-width:800px) { .modal-producto{grid-template-columns:1fr}.modal-galeria{padding:18px}.modal-imagen{aspect-ratio:4/3} }
@media (max-width:620px) { .modal-fondo{align-items:stretch;padding:0;background:#101010}.modal-producto{width:100vw;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0}.modal-cerrar{top:max(14px,env(safe-area-inset-top))}.modal-info{padding:28px 20px max(36px,env(safe-area-inset-bottom))}.modal-imagen{aspect-ratio:1/1}.modal-navegacion{grid-template-columns:1fr}.aviso-compra{grid-template-columns:1fr;gap:4px} }