/* ============================================================
   TRIGALI — Sitio web público · estilo premium minimalista
   ============================================================ */
:root {
  --bg:      #ffffff;
  --cream:   #f6f2ec;
  --ink:     #2b1a14;
  --brown:   #3c241d;
  --brown-d: #2b1712;
  --muted:   #8a827a;
  --line:    #eae5de;
  --accent:  #d8902f;
  --wa:      #25d366;
  --serif:   "Fraunces", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }   /* evita cualquier franja blanca a la derecha */
body { font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.sec__title { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 4vw, 40px); color: var(--brown); letter-spacing: -.01em; }
.sec__title--center { text-align: center; }
.sec__sub { color: var(--muted); font-size: 16px; margin-top: 6px; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,8,.55) 0%, rgba(20,12,8,.35) 40%, rgba(20,12,8,.78) 100%); }
.hero__nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 5vw, 60px); }
.hero__brandmini { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.hero__navcta { border: 1.5px solid rgba(255,255,255,.6); padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.hero__navcta:hover { background: #fff; color: var(--brown); }
.hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px clamp(20px, 5vw, 60px) 60px; gap: 14px; }
.hero__logo { width: min(340px, 74vw); filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
.hero__eslogan { font-family: var(--serif); font-size: clamp(18px, 3vw, 26px); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .95; }
.hero__welcome { font-size: clamp(16px, 2.2vw, 20px); max-width: 620px; opacity: .92; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 14px; }
.hero__scroll { margin-top: 26px; font-size: 34px; line-height: 1; opacity: .8; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(8px);} }

/* ---------- BOTONES GRANDES ---------- */
.bigbtn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px; font-size: 17px; font-weight: 700; transition: transform .15s, box-shadow .2s, filter .2s; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.bigbtn__ic { font-size: 20px; }
.bigbtn:active { transform: scale(.97); }
.bigbtn--map { background: #fff; color: var(--brown); }
.bigbtn--wa { background: var(--wa); color: #fff; }
.bigbtn--ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff; }
.bigbtn--map:hover, .bigbtn--wa:hover, .bigbtn--ig:hover { filter: brightness(1.05); box-shadow: 0 14px 38px rgba(0,0,0,.24); }

/* ---------- QUIÉNES SOMOS ---------- */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; max-width: 1150px; margin: 0 auto; padding: clamp(50px, 9vw, 110px) clamp(20px, 5vw, 60px); }
.about__text p { color: #5a534c; font-size: clamp(16px, 1.8vw, 19px); margin-top: 16px; max-width: 40ch; }
.about__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about__photo { aspect-ratio: 3/4; border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 14px 40px rgba(40,26,18,.14); }
.about__photo:nth-child(2) { margin-top: 30px; }

/* ---------- CATÁLOGO ---------- */
.catalog { background: #fff; padding: clamp(50px, 8vw, 90px) 0; }
.catalog__head { text-align: center; padding: 0 20px; }
/* En celular: una sola fila compacta que se desliza. En iPad/computadora: centrada y en varias filas. */
.catnav { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 16px clamp(16px, 5vw, 40px); margin: 24px 0 10px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
@media (min-width: 700px) { .catnav { flex-wrap: wrap; justify-content: center; overflow-x: visible; } }
.catnav::-webkit-scrollbar { display: none; }
.catnav__pill { flex-shrink: 0; padding: 9px 18px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; }
.catnav__pill.is-active { background: var(--brown); color: #fff; border-color: var(--brown); }

.catsec { max-width: 1150px; margin: 0 auto; padding: 34px clamp(16px, 5vw, 40px) 0; scroll-margin-top: 70px; }
.catsec__title { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--brown); margin-bottom: 20px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 16px; }
/* Producto "flotante" (como en el menú): sin recuadro ni sombra */
.pcard { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px; transition: transform .15s ease; }
.pcard:hover { transform: translateY(-4px); }
/* Foto completa que flota sobre el fondo (sin contorno) */
.pcard__img { width: 100%; aspect-ratio: 1/1; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; }
.pcard__img--none { display: grid; place-items: center; font-size: 52px; opacity: .4; }
.pcard__body { padding: 12px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pcard__top { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pcard__name { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.pcard__price { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--accent); }
.pcard__desc { color: var(--muted); font-size: 13px; margin-top: 2px; max-width: 24ch; line-height: 1.35; }

/* ---------- COLLAGES INTERCALADOS ---------- */
.collage { display: grid; gap: 12px; max-width: 1150px; margin: 46px auto; padding: 0 clamp(16px, 5vw, 40px); height: clamp(240px, 40vw, 430px); }
.collage--2 { grid-template-columns: 1fr 1fr; }
.collage--3 { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; }
.collage--3 .colcell:first-child { grid-row: 1 / span 2; }
.collage--4 { grid-template-columns: repeat(4, 1fr); }
.colcell { background-size: cover; background-position: center; border-radius: 16px; box-shadow: 0 12px 34px rgba(40,26,18,.14); transition: transform .25s; }
.colcell:hover { transform: scale(1.015); }

@media (max-width: 760px) {
  .collage { height: auto; }
  .collage--3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .collage--3 .colcell:first-child { grid-row: auto; grid-column: 1 / -1; }
  .collage--4 { grid-template-columns: 1fr 1fr; }
  .colcell { aspect-ratio: 1; }
  .collage--3 .colcell:first-child { aspect-ratio: 16/10; }
}

/* ---------- CUADRÍCULA DE FOTOS (solo celular): 2 por fila, 6 por bloque ---------- */
.gridmovil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 700px; margin: 34px auto; padding: 0 16px; }
.gmcell { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 14px; box-shadow: 0 8px 22px rgba(40,26,18,.12); }

/* ---------- GALERÍA (sin uso; se dejó por compatibilidad) ---------- */
.gallery { padding: clamp(50px, 8vw, 90px) clamp(16px, 5vw, 40px); max-width: 1250px; margin: 0 auto; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; }
.gcell { aspect-ratio: 1; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 8px 24px rgba(40,26,18,.10); transition: transform .2s; }
.gcell:hover { transform: scale(1.02); }
.gcell:nth-child(1), .gcell:nth-child(6) { grid-row: span 2; aspect-ratio: 1/2; }

/* ---------- FOOTER ---------- */
.foot { background: var(--brown-d); color: #f3ede6; text-align: center; padding: clamp(48px, 8vw, 80px) 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.foot__brand { display: flex; flex-direction: column; }
.foot__name { font-family: var(--serif); font-size: 32px; font-weight: 600; }
.foot__tag { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; opacity: .7; margin-top: 2px; }
.foot__info { opacity: .9; font-size: 16px; line-height: 1.9; }
.foot__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.foot__copy { opacity: .55; font-size: 13px; margin-top: 20px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .about__photos { max-width: 420px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gcell:nth-child(1), .gcell:nth-child(6) { grid-row: auto; aspect-ratio: 1; }
  .bigbtn { padding: 15px 26px; font-size: 16px; }
}

/* Celular: catálogo en 2 columnas (imágenes más chicas) */
@media (max-width: 600px) {
  .pgrid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .pcard { padding: 2px; }
  .pcard__img { aspect-ratio: 1/1; }
  .pcard__name { font-size: 15px; }
  .pcard__desc { font-size: 12px; max-width: 100%; }
  .catsec { padding-left: 16px; padding-right: 16px; }

  /* Botones apilados a todo lo ancho (portada y footer) — sin que se salgan */
  .hero__btns, .foot__btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; gap: 12px; }
  .hero__btns .bigbtn, .foot__btns .bigbtn { width: 100%; justify-content: center; }
  .hero__inner { padding-left: 22px; padding-right: 22px; }
}