/* ================================================
   TALLITOS GREEN — CSS Global
   Paleta cromática oficial del branding
   ================================================ */
:root {
  --v-oscuro:    #2B3D2B;
  --v-medio:     #4A6741;
  --v-salvia:    #7A9B7A;
  --v-claro:     #B5CCAF;
  --beige:       #C4B5A0;
  --beige-claro: #EDE7DC;
  --marron:      #9B6B52;
  --marron-osc:  #7a5240;
  --blanco:      #F7F5F0;
  --texto:       #2B2B29;
  --texto-s:     #666660;
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Jost', sans-serif;
  --fa: 'Nixie One', monospace;
  --radio: 3px;
}

/* RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--blanco); color: var(--texto); overflow-x: hidden; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* TIPOGRAFÍA */
.sec-tag { font-family: var(--fa); font-size: .64rem; letter-spacing: .28em; color: var(--marron); text-transform: uppercase; display: block; margin-bottom: .9rem; }
.sec-h2 { font-family: var(--fd); font-size: clamp(1.9rem, 3vw, 2.9rem); font-weight: 300; line-height: 1.1; color: var(--v-oscuro); margin-bottom: 1.2rem; }
.sec-h2 em { font-style: italic; color: var(--marron); }
.sec-p { font-family: var(--fb); font-size: .92rem; font-weight: 300; line-height: 1.9; color: var(--texto-s); margin-bottom: 1rem; }

/* BOTONES */
.btn-p { display: inline-flex; align-items: center; gap: .55rem; background: var(--v-oscuro); color: var(--blanco); padding: .85rem 1.8rem; font-family: var(--fb); font-size: .74rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; border-radius: var(--radio); border: none; cursor: pointer; transition: background .3s, transform .2s; }
.btn-p:hover { background: var(--v-medio); transform: translateY(-2px); }
.btn-p svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-s { display: inline-flex; align-items: center; gap: .55rem; background: transparent; color: var(--v-oscuro); padding: .85rem 1.8rem; font-family: var(--fb); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; border: 1px solid var(--v-salvia); border-radius: var(--radio); cursor: pointer; transition: all .3s; }
.btn-s:hover { background: var(--v-salvia); color: #fff; }
.btn-s svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-wa { display: inline-flex; align-items: center; gap: .7rem; background: #25D366; color: #fff; padding: .88rem 1.7rem; font-family: var(--fb); font-size: .82rem; font-weight: 500; border-radius: var(--radio); transition: background .3s, transform .2s; }
.btn-wa:hover { background: #1da851; transform: translateY(-2px); }
.btn-wa svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== NAVBAR ===== */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  padding: 1rem 5rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(247, 245, 240, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(43, 61, 43, .08);
  transition: padding .3s, box-shadow .3s;
}
#navbar.scrolled { padding: .7rem 5rem; box-shadow: 0 2px 28px rgba(43, 61, 43, .12); }
.nav-logo { display:flex; align-items:center; }
.nav-logo-img { height: 42px; width: auto; object-fit: contain; }
.nav-iso { width: 32px; height: 32px; object-fit: contain; }
.nav-nombre { font-family: var(--fd); font-size: .98rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--v-oscuro); }
.nav-links { display: flex; align-items: center; gap: 1.8rem; list-style: none; }
.nav-links a { font-family: var(--fb); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--v-oscuro); position: relative; transition: color .3s; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--marron); transition: width .3s; }
.nav-links a:hover::after { width: 100%; }
.nav-wa { background: var(--v-oscuro) !important; color: var(--blanco) !important; padding: .5rem 1.2rem !important; border-radius: var(--radio); }
.nav-wa:hover { background: var(--v-medio) !important; }
.nav-wa::after { display: none !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--v-oscuro); transition: all .3s; }

/* ===== HERO ===== */
#hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.hero-l { display: flex; flex-direction: column; justify-content: center; padding: 8rem 4rem 4rem 6rem; background: var(--beige-claro); position: relative; overflow: hidden; }
.hero-l::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 90%, rgba(122,155,122,.1) 0%, transparent 60%); pointer-events: none; }
.htag { font-family: var(--fa); font-size: .65rem; letter-spacing: .28em; color: var(--marron); text-transform: uppercase; margin-bottom: 1.8rem; }
.hh1 { font-family: var(--fd); font-size: clamp(3rem, 5vw, 5rem); font-weight: 300; line-height: .95; color: var(--v-oscuro); margin-bottom: 1.8rem; }
.hh1 em { font-style: italic; color: var(--v-salvia); display: block; }
.hsub { font-family: var(--fb); font-size: .92rem; font-weight: 300; line-height: 1.9; color: var(--texto-s); max-width: 360px; margin-bottom: 2.5rem; }
.hbtns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-r { position: relative; overflow: hidden; }
.hero-r img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-badge { position: absolute; bottom: 2.5rem; right: 2.5rem; background: rgba(247,245,240,.15); border: 1px solid rgba(247,245,240,.3); backdrop-filter: blur(8px); padding: 1rem 1.4rem; border-radius: var(--radio); text-align: center; z-index: 2; }
.hbn { font-family: var(--fd); font-size: 2rem; font-weight: 300; color: #fff; display: block; line-height: 1; }
.hbt { font-family: var(--fb); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .2rem; }

/* ===== NOSOTROS ===== */
#nosotros { padding: 7rem 6rem; background: var(--blanco); }
.nos-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; }
.nos-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 200px; gap: .9rem; }
.ibox { border-radius: var(--radio); overflow: hidden; position: relative; }
.ibox img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ibox:hover img { transform: scale(1.04); }
.ibox-lbl { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); background: rgba(247,245,240,.95); padding: .35rem 1rem; border-radius: 30px; font-family: var(--fb); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--v-oscuro); font-weight: 500; z-index: 2; white-space: nowrap; }
.ib1 { grid-column: 1; grid-row: 1 / 3; }
.ib2 { grid-column: 2; grid-row: 1; }
.ib3 { grid-column: 2; grid-row: 2; }
.nos-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
.stat { border-left: 2px solid var(--v-salvia); padding-left: .9rem; }
.stat-n { font-family: var(--fd); font-size: 1.9rem; font-weight: 300; color: var(--v-oscuro); display: block; line-height: 1.1; }
.stat-l { font-family: var(--fb); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-s); margin-top: .15rem; }

/* ===== PRODUCTOS ===== */
#productos { padding: 7rem 6rem; background: var(--beige-claro); }
.prod-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-bottom: 4rem; }
.prod-img { border-radius: var(--radio); overflow: hidden; height: 480px; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pcard { background: var(--blanco); border: 1px solid rgba(43,61,43,.07); border-radius: var(--radio); padding: 2rem 1.6rem; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.pcard::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--v-salvia); transition: width .4s; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(43,61,43,.1); }
.pcard:hover::after { width: 100%; }
.pnum { font-family: var(--fd); font-size: 3rem; font-weight: 300; color: rgba(43,61,43,.04); position: absolute; top: .8rem; right: 1.2rem; line-height: 1; user-select: none; }
.pico { width: 40px; height: 40px; margin-bottom: 1.2rem; color: var(--v-salvia); }
.pico svg { width: 40px; height: 40px; }
.ptit { font-family: var(--fd); font-size: 1.35rem; font-weight: 400; color: var(--v-oscuro); margin-bottom: .5rem; line-height: 1.2; }
.ptit em { font-style: italic; color: var(--marron); }
.ptxt { font-family: var(--fb); font-size: .82rem; font-weight: 300; line-height: 1.8; color: var(--texto-s); margin-bottom: 1.3rem; }
.plink { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--fb); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--marron); transition: gap .3s; }
.plink:hover { gap: .8rem; }
.plink svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ===== TALLERES ===== */
#talleres { padding: 7rem 6rem; background: var(--blanco); }
.tall-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: start; }
.tall-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 2rem 0; }
.timg { border-radius: var(--radio); overflow: hidden; }
.timg img { width: 100%; object-fit: cover; display: block; transition: transform .5s; }
.timg:hover img { transform: scale(1.04); }
.timg.grande img { height: 420px; }
.timg.pequena img { height: 200px; }
.tlist { display: flex; flex-direction: column; }
.titem { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.6rem 0; border-bottom: 1px solid rgba(43,61,43,.08); transition: padding-left .3s; }
.titem:first-child { border-top: 1px solid rgba(43,61,43,.08); }
.titem:hover { padding-left: 6px; }
.tico { width: 40px; height: 40px; min-width: 40px; background: var(--beige-claro); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--v-oscuro); transition: background .3s; flex-shrink: 0; }
.tico svg { width: 17px; height: 17px; }
.titem:hover .tico { background: var(--v-salvia); color: #fff; }
.tnom { font-family: var(--fd); font-size: 1.15rem; font-weight: 400; color: var(--v-oscuro); margin-bottom: .22rem; }
.tdesc { font-family: var(--fb); font-size: .81rem; font-weight: 300; color: var(--texto-s); line-height: 1.7; margin-bottom: .5rem; }
.tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.tag { background: rgba(43,61,43,.06); color: var(--v-oscuro); font-family: var(--fb); font-size: .59rem; letter-spacing: .09em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 20px; }

/* FORMULARIO */
.fcaja { background: #fff; border: 1px solid rgba(43,61,43,.07); border-radius: var(--radio); padding: 2.4rem; box-shadow: 0 8px 40px rgba(43,61,43,.06); position: sticky; top: 6rem; }
.ftit { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; color: var(--v-oscuro); margin-bottom: .3rem; }
.fsub { font-family: var(--fb); font-size: .78rem; color: var(--texto-s); margin-bottom: 1.6rem; line-height: 1.6; }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-family: var(--fb); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v-oscuro); font-weight: 500; margin-bottom: .38rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .78rem .9rem; background: var(--beige-claro); border: 1.5px solid transparent; border-radius: var(--radio); font-family: var(--fb); font-size: 1rem; color: var(--texto); transition: border-color .3s, background .3s; outline: none; -webkit-appearance: none; appearance: none; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--v-salvia); background: #fff; }
.campo textarea { resize: vertical; min-height: 85px; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232B3D2B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-color: var(--beige-claro); padding-right: 2.2rem; cursor: pointer; }
.btnform { width: 100%; padding: .92rem; background: var(--v-oscuro); color: var(--blanco); border: none; border-radius: var(--radio); font-family: var(--fb); font-size: .74rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; cursor: pointer; transition: background .3s, transform .2s; margin-top: .3rem; }
.btnform:hover { background: var(--v-medio); transform: translateY(-1px); }
.fnota { font-family: var(--fb); font-size: .66rem; color: #bbb; text-align: center; margin-top: .8rem; line-height: 1.6; }

/* ===== GALERÍA ===== */
#galeria { padding: 7rem 6rem; background: var(--beige-claro); }
.ghead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.2rem; }
.gfiltros { display: flex; gap: .4rem; flex-wrap: wrap; }
.filtro { padding: .4rem 1.1rem; background: transparent; border: 1px solid rgba(43,61,43,.18); border-radius: 30px; font-family: var(--fb); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-s); cursor: pointer; transition: all .3s; }
.filtro.on, .filtro:hover { background: var(--v-oscuro); border-color: var(--v-oscuro); color: #fff; }
.ggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.gitem { position: relative; overflow: hidden; border-radius: var(--radio); cursor: pointer; aspect-ratio: 3/4; transition: opacity .4s, transform .4s; }
.gitem.wide { grid-column: span 2; aspect-ratio: 16/9; }
.gitem.tall { grid-row: span 2; aspect-ratio: auto; }
.gitem.dim { opacity: .18; transform: scale(.97); }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; position: absolute; inset: 0; }
.gitem:hover img { transform: scale(1.06); }
.gover { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,61,43,.88) 0%, transparent 55%); opacity: 0; transition: opacity .4s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; z-index: 2; }
.gitem:hover .gover { opacity: 1; }
.gnom { font-family: var(--fd); font-size: 1rem; font-weight: 400; color: #fff; margin-bottom: .14rem; }
.gcat { font-family: var(--fb); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .8rem; }
.gwa { display: inline-flex; align-items: center; gap: .35rem; background: transparent; color: rgba(255,255,255,.9); padding: .38rem 0; border-bottom: 1px solid rgba(255,255,255,.4); font-family: var(--fb); font-size: .68rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; width: fit-content; transition: color .2s, border-color .2s; }
.gwa:hover { color: #fff; border-color: #fff; }
.gwa svg { display: none; }

/* ===== CONTACTO ===== */
#contacto { padding: 7rem 6rem; background: var(--v-oscuro); position: relative; overflow: hidden; }
#contacto::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.cont-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; position: relative; z-index: 1; }
.clista { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.citem { display: flex; align-items: center; gap: 1.1rem; }
.cico { width: 40px; height: 40px; min-width: 40px; background: rgba(247,245,240,.05); border: 1px solid rgba(247,245,240,.09); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--v-salvia); flex-shrink: 0; }
.cico svg { width: 16px; height: 16px; }
.cdato strong { display: block; font-family: var(--fb); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(247,245,240,.35); margin-bottom: .14rem; font-weight: 400; }
.cdato a, .cdato span { font-family: var(--fb); font-size: .87rem; color: rgba(247,245,240,.75); transition: color .3s; }
.cdato a:hover { color: var(--v-salvia); }
.redes-tit { font-family: var(--fa); font-size: .59rem; letter-spacing: .27em; text-transform: uppercase; color: rgba(247,245,240,.25); margin-top: 2rem; margin-bottom: .75rem; }
.redes { display: flex; gap: .65rem; }
.red { width: 36px; height: 36px; border: 1px solid rgba(247,245,240,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(247,245,240,.35); transition: all .3s; }
.red:hover { border-color: var(--v-salvia); color: var(--v-salvia); }
.red svg { width: 14px; height: 14px; }
.mapa-caja { border-radius: var(--radio); overflow: hidden; height: 380px; }
.mapa-caja iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== FOOTER ===== */
footer { background: #111; padding: 2rem 5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.2rem; border-top: 1px solid rgba(247,245,240,.05); }
.ft-logo { display: flex; align-items: center; }
.ft-logo-img { height: 28px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .4; }
.ft-iso { width: 24px; height: 24px; filter: brightness(0) invert(1); opacity: .35; }
.ft-nom { font-family: var(--fd); font-size: .88rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: rgba(247,245,240,.28); }
.ft-copy { font-family: var(--fb); font-size: .67rem; color: rgba(247,245,240,.18); }
.ft-nav { display: flex; gap: 1.6rem; }
.ft-nav a { font-family: var(--fb); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(247,245,240,.22); transition: color .3s; }
.ft-nav a:hover { color: var(--v-salvia); }

/* BOTÓN TEXTO ELEGANTE — reemplaza btn-wa */
.btn-txt {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v-oscuro);
  border-bottom: 1px solid var(--v-salvia);
  padding-bottom: .2rem;
  transition: color .3s, border-color .3s;
  cursor: pointer;
}
.btn-txt:hover { color: var(--marron); border-color: var(--marron); }

/* versión clara para fondo oscuro (contacto) */
.btn-txt-claro {
  color: rgba(247,245,240,.8);
  border-bottom-color: rgba(247,245,240,.3);
}
.btn-txt-claro:hover { color: var(--v-salvia); border-color: var(--v-salvia); }

/* ===== MAPA ELEGANTE ===== */
.mapa-estilo {
  background: rgba(247,245,240,.05);
  border: 1px solid rgba(247,245,240,.1);
  border-radius: var(--radio);
  overflow: hidden;
}
.mapa-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid rgba(247,245,240,.08);
}
.mapa-header svg {
  width: 20px;
  height: 20px;
  color: var(--v-salvia);
  flex-shrink: 0;
}
.mapa-titulo {
  display: block;
  font-family: var(--fa);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,245,240,.35);
  margin-bottom: .2rem;
}
.mapa-dir {
  display: block;
  font-family: var(--fb);
  font-size: .85rem;
  color: rgba(247,245,240,.75);
}
.mapa-frame { line-height: 0; }
.mapa-link {
  display: block;
  text-align: center;
  padding: 1rem;
  font-family: var(--fb);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,245,240,.35);
  border-top: 1px solid rgba(247,245,240,.08);
  transition: color .3s;
}
.mapa-link:hover { color: var(--v-salvia); }

/* TOAST */
.toast { position: fixed; bottom: 1.8rem; right: 1.8rem; background: var(--v-oscuro); color: var(--blanco); padding: .85rem 1.3rem; border-radius: var(--radio); font-family: var(--fb); font-size: .8rem; display: flex; align-items: center; gap: .65rem; z-index: 9999; transform: translateY(110px); opacity: 0; transition: all .4s cubic-bezier(.16,1,.3,1); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.toast.on { transform: translateY(0); opacity: 1; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  #navbar { padding: 1rem 2.5rem; }
  #navbar.scrolled { padding: .7rem 2.5rem; }
  #hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-l { padding: 7rem 3rem 3rem; }
  .hero-r { height: 55vw; min-height: 260px; }
  #nosotros, #productos, #talleres, #galeria, #contacto { padding: 5rem 3rem; }
  .nos-grid, .cont-layout { grid-template-columns: 1fr; gap: 3rem; }
  .prod-layout { grid-template-columns: 1fr; gap: 2rem; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .tall-layout { grid-template-columns: 1fr; gap: 3rem; }
  .fcaja { position: static; }
  .ggrid { grid-template-columns: repeat(2, 1fr); }
  .gitem.wide { grid-column: span 2; }
  .gitem.tall { grid-row: span 1; aspect-ratio: 3/4; }
  footer { flex-direction: column; text-align: center; padding: 1.8rem 2rem; }
  .ft-nav { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 768px) {
  #navbar { padding: .9rem 1.4rem; }
  #navbar.scrolled { padding: .7rem 1.4rem; }
  /* NAV logo móvil */
  .nav-logo-img { height: 34px; }
  #navbar { padding: .9rem 1.4rem; }
  #navbar.scrolled { padding: .7rem 1.4rem; }
  .nav-links {
    position: fixed; top: 0; right: -100%; width: 75vw; max-width: 280px; height: 100vh;
    background: var(--blanco); flex-direction: column; justify-content: center;
    gap: 2rem; padding: 3rem 2rem;
    box-shadow: -4px 0 30px rgba(0,0,0,.1); transition: right .4s; z-index: 998;
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: .9rem; }
  .nav-toggle { display: flex; z-index: 999; }

  /* HERO MÓVIL — imagen más grande, tag debajo */
  #hero { grid-template-columns: 1fr; min-height: auto; display: flex; flex-direction: column; }
  .hero-l { padding: 5rem 1.4rem 2rem; order: 2; }
  .hero-r { height: 65vh; min-height: 380px; order: 1; }
  .htag { margin-bottom: 1.2rem; }
  .hero-badge { bottom: 1rem; right: 1rem; padding: .7rem 1rem; }
  .hbn { font-size: 1.5rem; }

  /* NOSOTROS MÓVIL */
  #nosotros, #productos, #talleres, #galeria, #contacto { padding: 3.5rem 1.4rem; }
  .nos-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .nos-imgs { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 160px; gap: .7rem; }
  .ib1 { grid-column: 1; grid-row: 1; }
  .ib2 { grid-column: 2; grid-row: 1; }
  .ib3 { grid-column: 1 / 3; grid-row: 2; }

  /* ETIQUETAS NOSOTROS — más elegantes */
  .ibox-lbl {
    font-size: .55rem;
    padding: .28rem .65rem;
    letter-spacing: .1em;
    background: rgba(247,245,240,.88);
    border: 1px solid rgba(43,61,43,.1);
  }

  /* PRODUCTOS MÓVIL */
  .prod-layout { grid-template-columns: 1fr; gap: 2rem; }
  .prod-img { height: 260px; }
  .prod-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* TALLERES MÓVIL */
  .tall-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .tall-imgs { grid-template-columns: 1fr; gap: .7rem; }
  .timg.grande img { height: 260px; }
  .timg.pequena img { height: 200px; }
  .fcaja { padding: 1.8rem 1.4rem; }

  /* GALERÍA MÓVIL */
  .ghead { flex-direction: column; align-items: flex-start; }
  .ggrid { grid-template-columns: 1fr 1fr; gap: .6rem; }

  /* CONTACTO MÓVIL */
  .cont-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .mapa-frame iframe { height: 200px; }
  .btn-wa { width: 100%; justify-content: center; }

  /* FOOTER MÓVIL */
  footer { padding: 1.5rem 1.4rem; flex-direction: column; text-align: center; gap: 1rem; }
  .ft-nav { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

@media (max-width: 400px) {
  .prod-grid { grid-template-columns: 1fr; }
  .ggrid { grid-template-columns: 1fr 1fr; }
}