:root{--navy:#17263B;--ivory:#F4EFE7;--wine:#5A3043;--sand:#D6C8B6;--copper:#B38A62;--text:#17263B;--line:#ded8ce}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--text);font:15px/1.55 Arial,Helvetica,sans-serif}
button,input,select{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
a{color:inherit}
.topbar{height:96px;background:var(--navy);color:var(--ivory);display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,24px);position:relative;z-index:5}
.header-logo{height:64px;max-width:min(45vw,330px);object-fit:contain}
.navicon{width:45px;height:45px;display:grid;place-items:center;border:1px solid #607086;border-radius:50%;background:transparent;color:var(--ivory)}
.navicon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.hamburger{display:flex;flex-direction:column;gap:5px}.hamburger i{width:19px;height:1.5px;background:currentColor}
.drawer{position:absolute;left:max(4vw,24px);top:76px;background:var(--ivory);color:var(--navy);padding:14px;border:1px solid var(--line);box-shadow:0 16px 45px #0a172a30;z-index:10;min-width:220px;display:none}
.drawer.open{display:grid;gap:2px}.drawer a{text-decoration:none;padding:12px}.drawer a:hover{background:#e5ddd2}
.hero{min-height:610px;display:grid;grid-template-columns:47% 53%;background:#16283d;color:var(--ivory);overflow:hidden}
.hero-copy{padding:clamp(60px,8vw,120px) 20px clamp(65px,7vw,105px) max(7vw,30px);background:linear-gradient(108deg,#102034,#20364b);position:relative;z-index:1}
.eyebrow{font-size:12px;letter-spacing:4px;text-transform:uppercase;font-weight:600}
.accent{width:56px;height:2px;background:var(--wine);margin:28px 0 30px}
.hero h1{font:normal clamp(45px,5.15vw,86px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-2px;margin:0 0 25px}
.hero h1 em{font-style:italic;font-weight:normal}.hero p{font-size:17px;max-width:440px;margin:0 0 32px}
.hero-cta{display:inline-flex;gap:26px;align-items:center;text-decoration:none;border:1px solid #bdc3c7;padding:15px 19px;transition:.2s}
.hero-cta:hover{background:var(--ivory);color:var(--navy)}
.hero-art{background-image:linear-gradient(90deg,#16283d 0%,transparent 23%),url('/hero-aprobado.webp');background-position:center;background-size:cover}
.section{max-width:1370px;margin:0 auto;padding:66px 30px 110px}
.section-top{display:flex;align-items:end;justify-content:space-between;gap:25px}
.smallcap{letter-spacing:3px;font-size:11px;text-transform:uppercase;color:#746a61}
.section h2{font:normal clamp(38px,4vw,58px)/1.1 Georgia,serif;margin:12px 0 0}
.subtitle{color:#706b66}.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin:29px 0 26px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:10px 21px;border:1px solid #d1c8bc;background:transparent;color:var(--navy);border-radius:30px}
.pill.active,.pill:hover{color:#fff;background:var(--wine);border-color:var(--wine)}
.controls{display:flex;gap:10px;align-items:center}
.controls input,.controls select{border:1px solid #cfc6bc;background:#fffdf9;border-radius:4px;padding:11px 13px;color:var(--navy);max-width:220px}
.count{font-size:13px;color:#766b61;margin:8px 0 20px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px}
.product{min-width:0}.photo{position:relative;aspect-ratio:4/5;background:#ebe4dc;overflow:hidden;border-radius:3px;display:flex;align-items:center;justify-content:center}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .32s ease}
.product:hover .photo img{transform:scale(1.025)}
.tag{position:absolute;left:12px;top:12px;background:#f4efe7e8;color:var(--navy);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding:6px 8px}
.product h3{font-size:16px;line-height:1.3;font-weight:600;margin:13px 0 3px}
.reference{font-size:12px;color:#776e67;margin:0}.price{font-weight:700;margin:7px 0 0;font-size:16px}
.details{width:100%;margin-top:10px;padding:10px;border:1px solid #c7bbae;color:var(--navy);background:transparent;font-size:13px}
.details:hover{background:#e7dfd4}.empty{padding:70px 0;text-align:center;color:#7c7167}
.footer{background:var(--navy);color:var(--ivory);padding:40px 30px;text-align:center}
.footer img{width:225px;max-width:75vw;display:block;margin:0 auto 17px}.footer small{color:#d1cbc2}
.modal{border:none;border-radius:10px;max-width:750px;width:calc(100% - 30px);padding:0;background:#faf7f1;color:var(--navy);box-shadow:0 22px 60px #1118;max-height:calc(100dvh - 30px)}
.modal::backdrop{background:#09182bbd}
.modal-inner{display:grid;grid-template-columns:48% 52%}
.modal-info{padding:36px 30px}.modal-info h3{font:normal 32px Georgia,serif;margin:8px 0}
.close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:var(--ivory);color:var(--navy);z-index:5}
.note{font-size:12px;color:#766f67;margin-top:23px}
.preview-label{font-size:12px;color:#6f665b;text-align:center;padding:9px;background:#ebe2d7}
/* Galería: integrada al modal sin cambiar el diseño general */
.product-gallery{position:relative;min-width:0;min-height:450px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;touch-action:pan-y}
.product-gallery #modalImage{display:block;width:100%;height:100%;max-height:530px;object-fit:contain;background:#fff;user-select:none;-webkit-user-drag:none}
.product-gallery #modalImage[hidden]{display:none}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:1px solid #e6e0d7;border-radius:50%;background:#fffffff0;color:var(--navy);font-size:28px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 12px #17263b1a}
.gallery-arrow:hover{background:var(--ivory)}
.gallery-prev{left:12px}.gallery-next{right:12px}
.gallery-dots{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 12px;border-radius:30px;background:#ffffffe8;z-index:3}
.gallery-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c6bfb6;transition:background .2s,transform .2s}
.gallery-dot.active{background:var(--navy);transform:scale(1.18)}
.gallery-arrow[hidden],.gallery-dots[hidden]{display:none!important}
@media(max-width:1020px){.grid{grid-template-columns:repeat(3,1fr)}.hero{min-height:530px}.hero-copy{padding-left:6vw}.hero h1{font-size:58px}}
@media(max-width:720px){
.topbar{height:76px;padding:0 18px}.header-logo{height:44px;max-width:58vw}.navicon{width:39px;height:39px}.drawer{top:66px;left:12px}
.hero{grid-template-columns:1fr;min-height:0;display:flex;flex-direction:column}.hero-art{order:-1;height:280px;background-image:url('/hero-aprobado.webp');background-position:center 44%}
.hero-copy{padding:36px 24px 46px}.hero h1{font-size:clamp(44px,10vw,64px);margin-bottom:18px}.hero p{font-size:15px}.eyebrow{font-size:10px;letter-spacing:2.5px}.accent{margin:18px 0 19px}
.section{padding:44px 17px 75px}.section-top{align-items:start}.section h2{font-size:42px}.toolbar{display:grid}.controls{display:grid;grid-template-columns:1fr 1fr}
.controls input,.controls select{max-width:none;width:100%;min-width:0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}.product h3{font-size:14px}.tag{font-size:9px;left:6px;top:6px}.details{font-size:12px}
.modal-inner{grid-template-columns:1fr}.product-gallery{min-height:0;height:min(54dvh,390px)}.product-gallery #modalImage{height:100%;max-height:none}.modal-info{padding:23px}.modal-info h3{font-size:26px}
.gallery-arrow{width:36px;height:36px;font-size:25px}.gallery-prev{left:9px}.gallery-next{right:9px}
}
@media(max-width:360px){.pill{padding:9px 13px}.header-logo{max-width:54vw}}

/* ========================================
   CASA MESURA
   ENCABEZADO DEL CATÁLOGO
======================================== */

.section-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.catalog-heading {
  flex: 1;
  min-width: 0;
}

.section-top .controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.section-top .controls input {
  width: 230px;
  max-width: none;
}

.section-top .controls select {
  width: 210px;
  max-width: none;
}

/* Categorías en una sección independiente */

.toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: 29px;
  margin-bottom: 26px;
}

/* TABLETS Y CELULARES */

@media (max-width: 900px) {

  .section-top {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .section-top .controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
  }

  .section-top .controls input,
  .section-top .controls select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

}

/* CELULARES PEQUEÑOS */

@media (max-width: 420px) {

  .section-top .controls {
    grid-template-columns: 1fr;
  }

}

/* =========================================
   CASA MESURA - PREGUNTAS FRECUENTES
========================================= */

/* Botones del hero */

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hero-actions .hero-cta {
  min-width: 260px;
  justify-content: space-between;
}

.faq-cta {
  color: var(--ivory);
  background: transparent;
  text-align: left;
}

.faq-cta:hover {
  background: var(--ivory);
  color: var(--navy);
}

/* Ventana emergente */

.faq-modal {
  width: min(650px, calc(100% - 32px));
  max-height: min(85vh, 850px);
  max-height: min(85dvh, 850px);
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #faf7f1;
  color: var(--navy);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
  overflow-y: auto;
}

.faq-modal::backdrop {
  background: rgba(9, 24, 43, .78);
}

.faq-container {
  position: relative;
  padding: 48px 45px;
}

.faq-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f0ebe3;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
}

.faq-close:hover {
  background: #e2d9ce;
}

.faq-container h2 {
  font: normal clamp(30px, 4vw, 44px)/1.15 Georgia, serif;
  margin: 14px 0;
}

.faq-intro {
  color: #746d65;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 30px;
}

/* Acordeón */

.faq-list {
  border-top: 1px solid #ded8ce;
}

.faq-item {
  border-bottom: 1px solid #ded8ce;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--wine);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  color: var(--wine);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}

.faq-item p {
  color: #706b66;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 22px;
  padding-right: 20px;
}

/* Responsive */

@media (max-width: 720px) {

  .hero-actions {
    width: 100%;
  }

  .hero-actions .hero-cta {
    min-width: 0;
    width: min(100%, 300px);
  }

  .faq-container {
    padding: 55px 24px 30px;
  }

  .faq-container h2 {
    font-size: 32px;
  }

  .faq-item summary {
    font-size: 14px;
    padding: 18px 0;
  }

  .faq-item p {
    font-size: 13px;
  }
}