/* Camophy · demo onepage
   Dirección: "taller de talabartería". Papel cálido, cuero oscuro, letra slab como el logotipo.
   Pensado para un público mayor: letra base de 18 px, botones altos, contraste alto, nada escondido en carruseles. */

:root {
  --cuero-900: #22160e;
  --cuero-800: #2e1e14;
  --cuero-600: #5a3420;
  --silla: #8a4421;
  --silla-osc: #6f3518;
  --papel: #f6f1e8;
  --papel-2: #ece3d3;
  --foto: #f3f0eb;
  --tinta: #1f1611;
  --tinta-2: #4f4239;
  --linea: rgba(34, 22, 14, .14);
  --musgo: #4f5d22;
  --whats: #1f7a4a;
  --radio: 6px;
  --ancho: 1240px;
  --display: "Zilla Slab", Georgia, serif;
  --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 112.5%; /* 18 px */
}
html.letra-grande { font-size: 131.25%; } /* 21 px */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--texto); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #d08a3c; outline-offset: 3px; }

.saltar { position: absolute; left: -999px; top: 8px; background: #fff; padding: .6rem 1rem; z-index: 100; }
.saltar:focus { left: 8px; }

.sobre {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--silla); margin-bottom: .6rem;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .7rem 1.4rem; border-radius: var(--radio);
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.3rem; height: 1.3rem; flex: none; }
.btn--primario { background: var(--silla); color: #fff; }
.btn--primario:hover { background: var(--silla-osc); }
.btn--borde { border-color: currentColor; color: var(--tinta); background: transparent; }
.btn--borde:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn--whats { background: var(--whats); color: #fff; }
.btn--whats:hover { background: #17623b; }
.btn--ancho { width: 100%; }

/* Franja superior */
.franja {
  background: var(--cuero-900); color: #e9dcc7; font-size: .8rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .45rem max(1.25rem, calc((100% - var(--ancho)) / 2));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.franja p { margin: 0; }
.franja a { color: #fff; font-weight: 600; text-decoration: none; }
.franja a:hover { text-decoration: underline; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--cuero-800); color: #f3e9da; }
.cabecera__in {
  max-width: var(--ancho); margin: 0 auto; padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: 2rem;
}
.marca img { width: 104px; height: auto; }
.menu { display: flex; gap: 1.75rem; margin-right: auto; }
.menu a { text-decoration: none; font-weight: 500; padding: .4rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a.activo { border-bottom-color: #d08a3c; }
.acciones { display: flex; align-items: center; gap: .6rem; }
.btn-letra, .btn-bolsa {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.8rem; padding: .4rem .9rem;
  border-radius: var(--radio); border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
}
.btn-letra:hover, .btn-bolsa:hover { background: rgba(255,255,255,.08); }
.btn-letra .mas { font-size: 1.3em; }
.btn-letra[aria-pressed="true"] { background: #f3e9da; color: var(--cuero-900); }
.btn-letra .txt { font-size: .85rem; }
.btn-bolsa { background: var(--silla); border-color: var(--silla); font-weight: 600; }
.btn-bolsa:hover { background: var(--silla-osc); }
.btn-bolsa svg { width: 1.35rem; height: 1.35rem; }
.btn-bolsa__num {
  min-width: 1.6rem; height: 1.6rem; border-radius: 99px; background: #fff; color: var(--silla);
  display: inline-grid; place-items: center; font-size: .85rem; padding: 0 .35rem;
}
.btn-bolsa.salta { animation: salta .45s; }
@keyframes salta { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } }

/* Portada: corta a propósito, para que los productos asomen sin bajar mucho */
.portada {
  max-width: var(--ancho); margin: 0 auto; padding: 2.25rem 1.25rem 2rem;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center;
}
.portada h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700; color: var(--cuero-900); max-width: 16ch; margin-bottom: 1rem; }
.portada__bajada { font-size: 1.12rem; color: var(--tinta-2); max-width: 36rem; }
.portada__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.portada__foto { position: relative; }
.portada__foto img { width: 100%; height: clamp(260px, 30vw, 360px); object-fit: cover; object-position: 50% 55%; border-radius: var(--radio); }
.portada__foto::after {
  content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(255,255,255,.55);
  border-radius: 3px; pointer-events: none;
}

/* Tienda */
.tienda { max-width: var(--ancho); margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.tienda__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem 0 1.25rem; border-top: 1px solid var(--linea);
}
.tienda h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--cuero-900); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro {
  min-height: 2.75rem; padding: .45rem 1rem; border-radius: 99px; border: 1.5px solid var(--linea);
  background: #fff; font-weight: 500; font-size: .92rem;
}
.filtro:hover { border-color: var(--tinta-2); }
.filtro[aria-selected="true"] { background: var(--cuero-900); color: #fff; border-color: var(--cuero-900); }
.filtro .n { opacity: .6; margin-left: .25rem; }

.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s;
}
.tarjeta:hover { box-shadow: 0 10px 28px -14px rgba(34,22,14,.35); transform: translateY(-2px); }
.tarjeta[hidden] { display: none; }
.tarjeta__foto {
  position: relative; aspect-ratio: 1 / 1; background: var(--foto); border: 0; padding: 0; width: 100%;
  overflow: hidden; cursor: zoom-in;
}
.tarjeta__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%;
  mix-blend-mode: multiply; transition: opacity .35s, transform .5s;
}
.tarjeta__foto .alt { opacity: 0; }
.tarjeta:hover .tarjeta__foto .alt { opacity: 1; }
.tarjeta:hover .tarjeta__foto .prim.con-alt { opacity: 0; }
@media (hover: none) { .tarjeta__foto .alt { display: none; } .tarjeta:hover .tarjeta__foto .prim.con-alt { opacity: 1; } }
.tarjeta__piel {
  position: absolute; left: .7rem; top: .7rem; background: rgba(255,255,255,.92); border: 1px solid var(--linea);
  font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 99px; color: var(--tinta-2);
}
.tarjeta__cuerpo { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.tarjeta h3 { font-size: 1.3rem; color: var(--cuero-900); }
.tarjeta__resumen { font-size: .9rem; color: var(--tinta-2); line-height: 1.45; margin: 0; flex: 1; }
.tarjeta__precio { font-size: 1.35rem; font-weight: 700; color: var(--tinta); margin: .35rem 0 .5rem; }
.tarjeta__precio small { font-size: .7rem; font-weight: 500; color: var(--tinta-2); margin-left: .2rem; }
.tarjeta__botones { display: grid; gap: .45rem; }
.tarjeta__botones .btn { min-height: 2.9rem; font-size: .95rem; }
.ver-detalle {
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--tinta-2);
  font-size: .9rem; padding: .35rem;
}
.ver-detalle:hover { color: var(--silla); }
.btn.agregado { background: var(--musgo); }

/* Tarjeta 8: a tu medida */
.tarjeta--medida {
  background: var(--cuero-800) url("../img/personalizado-6.webp?v=1") center 30% / cover; color: #fff; position: relative;
  justify-content: flex-end; min-height: 100%;
}
.tarjeta--medida::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,22,14,.25), rgba(34,22,14,.94) 55%); }
.tarjeta--medida > * { position: relative; }
.tarjeta--medida .tarjeta__cuerpo { flex: 0; }
.tarjeta--medida h3 { color: #fff; }
.tarjeta--medida p { color: #eadfcd; font-size: .92rem; }

/* Promesas */
.promesas {
  background: var(--cuero-800); color: #f3e9da;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  padding: 3.25rem max(1.25rem, calc((100% - var(--ancho)) / 2));
}
.promesa svg { width: 2.6rem; height: 2.6rem; color: #d08a3c; margin-bottom: .8rem; }
.promesa h3 { font-size: 1.25rem; margin-bottom: .45rem; color: #fff; }
.promesa p { font-size: .92rem; color: #d8c9b3; margin: 0; }

/* A tu medida */
.medida {
  max-width: var(--ancho); margin: 0 auto; padding: 5rem 1.25rem;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 3.5rem; align-items: center;
}
.medida h2, .nosotros h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--cuero-900); margin-bottom: 1rem; }
.medida__texto p:not(.sobre) { color: var(--tinta-2); }
.medida__texto .btn { margin-top: .6rem; }
.medida__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.medida__fotos img { width: 100%; aspect-ratio: 1200 / 650; object-fit: cover; border-radius: var(--radio); background: var(--foto); }
.medida__fotos .medida__grande { grid-column: 1 / -1; }

/* Nosotros */
.nosotros {
  background: var(--papel-2);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: center;
  padding: 4.5rem max(1.25rem, calc((100% - var(--ancho)) / 2));
}
.nosotros__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: var(--radio); }
.nosotros__texto p:not(.sobre) { color: var(--tinta-2); max-width: 36rem; }
.firma { width: 190px; margin-top: 1.25rem; mix-blend-mode: multiply; }

/* Pie */
.pie { background: var(--cuero-900); color: #e9dcc7; padding: 3.5rem 1.25rem 1.5rem; }
.pie__in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
.pie__marca img { width: 150px; }
.pie h2 { font-family: var(--texto); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #b9a588; margin: 0 0 .8rem; }
.pie__lista { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .35rem; }
.pie__lista a { text-decoration: none; color: #fff; }
.pie__lista a:hover { text-decoration: underline; }
.pie__legal { max-width: var(--ancho); margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: #a8957b; }
.demo-nota { color: #d08a3c; }

/* Cerrar */
.cerrar {
  position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 3rem; height: 3rem; border-radius: 99px;
  border: 1px solid var(--linea); background: #fff; font-size: 1.8rem; line-height: 1;
}
.cerrar:hover { background: var(--papel-2); }
.cerrar--plano { position: static; }

/* Detalle */
.detalle {
  width: min(1080px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0;
  border-radius: 10px; background: #fff; color: var(--tinta); overflow: auto;
}
.detalle::backdrop { background: rgba(20, 13, 8, .62); }
.detalle[open] { animation: aparece .22s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }
.detalle__in { display: grid; grid-template-columns: 1.05fr 1fr; }
.detalle__galeria { background: var(--foto); padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.detalle__principal { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.detalle__principal img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.detalle__minis { display: flex; gap: .5rem; flex-wrap: wrap; }
.detalle__minis button {
  width: 4.6rem; height: 4.6rem; padding: .25rem; border: 2px solid transparent; border-radius: var(--radio); background: #fff;
}
.detalle__minis button[aria-current="true"] { border-color: var(--silla); }
.detalle__minis img { width: 100%; height: 100%; object-fit: contain; }
.detalle__info { padding: 2.25rem 2.25rem 2rem; }
.detalle h2 { font-size: 2rem; color: var(--cuero-900); padding-right: 2.5rem; }
.detalle__precio { font-size: 1.7rem; font-weight: 700; margin: .5rem 0 .6rem; }
.detalle__precio small { font-size: .8rem; font-weight: 500; color: var(--tinta-2); }
.detalle__resumen { color: var(--tinta-2); }
.detalle__compra { display: flex; gap: .7rem; margin: 1.1rem 0 1.4rem; }
.cantidad { display: flex; align-items: center; border: 1.5px solid var(--linea); border-radius: var(--radio); }
.cantidad button { width: 2.9rem; height: 3rem; border: 0; background: none; font-size: 1.4rem; }
.cantidad button:hover { background: var(--papel); }
.cantidad output { min-width: 2rem; text-align: center; font-weight: 700; }
.ficha { margin: 0 0 1.2rem; border-top: 1px solid var(--linea); }
.ficha div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.ficha dt { font-weight: 600; font-size: .9rem; }
.ficha dd { margin: 0; font-size: .92rem; color: var(--tinta-2); }
.detalle__puntos { padding-left: 1.2rem; margin: 0 0 1rem; color: var(--tinta-2); font-size: .95rem; }
.detalle__puntos li { margin-bottom: .35rem; }
.detalle__puntos li::marker { color: var(--silla); }
.detalle__compat { background: var(--papel); border-radius: var(--radio); padding: .9rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.detalle__compat:empty { display: none; }
.detalle__compat strong { display: block; margin-bottom: .45rem; }
.detalle__compat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.detalle__compat li { background: #fff; border: 1px solid var(--linea); border-radius: 99px; padding: .15rem .65rem; }
.detalle__pregunta { color: var(--whats); font-weight: 600; font-size: .95rem; }

/* Bolsa */
.velo { position: fixed; inset: 0; background: rgba(20, 13, 8, .55); z-index: 60; }
.bolsa {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100%);
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .28s ease; box-shadow: -10px 0 40px rgba(0,0,0,.2);
}
.bolsa.abierta { transform: none; }
.bolsa__cabeza { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea); }
.bolsa__cabeza h2 { font-size: 1.6rem; }
.bolsa__lista { flex: 1; overflow: auto; padding: .5rem 1.25rem; }
.renglon { display: grid; grid-template-columns: 4.8rem 1fr; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.renglon img { width: 4.8rem; height: 4.8rem; object-fit: contain; background: var(--foto); border-radius: var(--radio); mix-blend-mode: multiply; padding: .2rem; }
.renglon h3 { font-family: var(--texto); font-size: 1rem; font-weight: 600; }
.renglon__precio { font-weight: 700; margin: .1rem 0 .45rem; }
.renglon__acciones { display: flex; align-items: center; gap: .8rem; }
.renglon .cantidad button { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
.quitar { background: none; border: 0; color: var(--tinta-2); text-decoration: underline; font-size: .85rem; padding: .3rem; }
.bolsa__vacia { text-align: center; padding: 3rem 1rem; color: var(--tinta-2); }
.bolsa__vacia .btn { margin-top: 1rem; }
.bolsa__pie { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--linea); display: grid; gap: .6rem; background: var(--papel); }
.bolsa__pie[hidden] { display: none; }
.bolsa__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; }
.bolsa__total strong { font-size: 1.5rem; }
.bolsa__demo { font-size: .85rem; background: #fff6e6; border: 1px solid #ecd2a6; border-radius: var(--radio); padding: .7rem .8rem; margin: 0; }

/* Barra móvil */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  background: var(--cuero-900); color: #fff; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 -6px 20px rgba(0,0,0,.25);
}

/* Aviso */
.aviso {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 70; transform: translate(-50%, 150%);
  background: var(--cuero-900); color: #fff; padding: .85rem 1.25rem; border-radius: var(--radio);
  font-weight: 500; transition: transform .25s, visibility .25s; visibility: hidden; max-width: calc(100% - 2rem); box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.aviso.visible { transform: translate(-50%, 0); visibility: visible; }
.aviso button { margin-left: .8rem; background: none; border: 0; color: #f0b26b; font-weight: 700; text-decoration: underline; }

/* Responsivo */
@media (max-width: 1080px) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promesas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .menu { display: none; }
  .cabecera__in { gap: 1rem; justify-content: space-between; }
  .portada { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.75rem; }
  .portada__foto { display: none; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .medida, .nosotros { grid-template-columns: 1fr; gap: 2rem; }
  .medida { padding: 3.5rem 1.25rem; }
  .nosotros__foto img { aspect-ratio: 4 / 3; }
  .pie__in { grid-template-columns: 1fr; gap: 1.5rem; }
  .detalle__in { grid-template-columns: 1fr; }
  .detalle__info { padding: 1.5rem 1.25rem 2rem; }
  .detalle__galeria { padding: 1rem; }
  .detalle__principal { aspect-ratio: 4 / 3; }
  .barra-movil:not([hidden]) { display: flex; }
  .barra-movil .btn { white-space: nowrap; min-height: 2.8rem; padding: .5rem 1rem; }
  .barra-movil span { font-size: .9rem; }
  body.con-barra { padding-bottom: 4.5rem; }
  .franja p { display: none; }
}
@media (max-width: 560px) {
  .tienda__cabeza { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .tienda__cabeza > * { min-width: 0; }
  .tarjeta__botones .largo { display: none; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem .3rem; scrollbar-width: none; }
  .filtro { flex: none; }
  .tarjeta__cuerpo { padding: .8rem .8rem .9rem; }
  .tarjeta h3 { font-size: 1.1rem; }
  .tarjeta__resumen { display: none; }
  .tarjeta__precio { font-size: 1.15rem; margin: .1rem 0 .4rem; }
  .tarjeta__piel { font-size: .68rem; left: .45rem; top: .45rem; }
  .btn-letra .txt, .btn-bolsa__txt { display: none; }
  .promesas { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem; }
  .detalle { width: 100%; max-height: 100dvh; height: 100dvh; max-width: none; margin: 0; border-radius: 0; }
  .detalle__compra { flex-direction: column; }
  .cantidad { align-self: flex-start; }
  .detalle .cerrar { position: fixed; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}