/* ================================================
   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;
  --sombra: 0 8px 40px rgba(43,61,43,.08);
}

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

/* === TIPOGRAFÍA GLOBAL === */
.sec-tag {
  font-family: var(--fa);
  font-size: .65rem;
  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;
}
.sec { padding: 6rem 6rem; }

/* === 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;
  transition: background .3s, transform .2s;
}
.btn-p:hover { background: var(--v-medio); transform: translateY(-2px); }
.btn-p svg, .btn-s 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; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--v-salvia); border-radius: var(--radio);
  transition: all .3s;
}
.btn-s:hover { background: var(--v-salvia); color: #fff; }

.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: 1.1rem 5rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(247,245,240,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(43,61,43,.06);
  transition: padding .3s, box-shadow .3s;
}
#navbar.scrolled {
  padding: .75rem 5rem;
  box-shadow: 0 2px 28px rgba(43,61,43,.1);
}
.nav-logo { display:flex; align-items:center; gap:.7rem; }
.nav-iso { width:32px; height:32px; flex-shrink:0; 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; }
.nav-links a {
  font-family: var(--fb); font-size:.73rem; font-weight:400;
  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,
.nav-links a.activo::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; padding:4px;
}
.nav-toggle span {
  display:block; width:24px; height:1.5px;
  background:var(--v-oscuro); transition:all .3s;
}

/* === HERO INTERIOR (páginas internas) === */
.hero-int {
  padding: 9rem 6rem 5rem;
  background: var(--beige-claro);
  position: relative; overflow: hidden;
}
.hero-int::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 50%, rgba(122,155,122,.12) 0%, transparent 60%);
  pointer-events:none;
}
.hero-int-inner { position:relative; z-index:1; max-width:600px; }
.hero-int-tag {
  font-family:var(--fa); font-size:.64rem; letter-spacing:.28em;
  color:var(--marron); text-transform:uppercase;
  display:block; margin-bottom:1rem;
  opacity:0; animation:fadeUp .6s .1s forwards;
}
.hero-int-h1 {
  font-family:var(--fd); font-size:clamp(2.5rem,4.5vw,4.5rem);
  font-weight:300; line-height:.95; color:var(--v-oscuro);
  margin-bottom:1.4rem;
  opacity:0; animation:fadeUp .6s .3s forwards;
}
.hero-int-h1 em { font-style:italic; color:var(--v-salvia); display:block; }
.hero-int-p {
  font-family:var(--fb); font-size:.92rem; font-weight:300;
  line-height:1.9; color:var(--texto-s); max-width:420px;
  opacity:0; animation:fadeUp .6s .5s forwards;
}
.hero-int-deco {
  position:absolute; right:4rem; top:50%; transform:translateY(-50%);
  opacity:.08; z-index:0; pointer-events:none;
}

/* === BREADCRUMB === */
.breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--fb); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-s); margin-bottom:1.5rem;
  opacity:0; animation:fadeUp .6s .1s forwards;
}
.breadcrumb a { color:var(--marron); transition:color .3s; }
.breadcrumb a:hover { color:var(--v-oscuro); }
.breadcrumb svg { width:10px; height:10px; flex-shrink:0; }

/* === CARDS PRODUCTO === */
.pcard {
  background:var(--blanco); border:1px solid rgba(43,61,43,.07);
  border-radius:var(--radio); padding:2.2rem 1.8rem;
  position:relative; overflow:hidden;
  transition:transform .3s, box-shadow .3s, border-color .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); border-color:rgba(122,155,122,.22); }
.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.4rem; font-weight:400; color:var(--v-oscuro); margin-bottom:.6rem; line-height:1.2; }
.ptit em { font-style:italic; color:var(--marron); }
.ptxt { font-family:var(--fb); font-size:.83rem; font-weight:300; line-height:1.8; color:var(--texto-s); margin-bottom:1.5rem; }
.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; }

/* === GALERÍA === */
.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); 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); }
.gbg { position:absolute; inset:0; transition:transform .5s; }
.gitem:hover .gbg { transform:scale(1.06); }
/* colores placeholder galería */
.gc1{background:var(--v-oscuro)}.gc2{background:var(--v-medio)}.gc3{background:var(--marron)}.gc4{background:var(--v-salvia)}.gc5{background:#243224}.gc6{background:var(--v-claro)}.gc7{background:var(--marron-osc)}.gc8{background:var(--beige)}.gc9{background:#3a5435}.gc10{background:#8a7060}.gc11{background:var(--v-medio)}.gc12{background:var(--v-oscuro)}
.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:#25D366; color:#fff; padding:.38rem .78rem; border-radius:2px; font-family:var(--fb); font-size:.63rem; font-weight:500; width:fit-content; transition:background .2s; }
.gwa:hover { background:#1da851; }
.gwa svg { width:11px; height:11px; flex-shrink:0; }
/* imagen real galería */
.gitem img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* === FORMULARIO === */
.fcaja {
  background:#fff; border:1px solid rgba(43,61,43,.07);
  border-radius:var(--radio); padding:2.4rem;
  box-shadow:var(--sombra);
}
.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;
  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; }

/* === TALLERES LISTA === */
.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; }

/* === STATS === */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat { border-left:2px solid var(--v-salvia); padding-left:1rem; }
.stat-n { font-family:var(--fd); font-size:2rem; 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; }

/* === CONTACTO SECCIÓN === */
.cont-tag { font-family:var(--fa); font-size:.64rem; letter-spacing:.28em; color:var(--marron); text-transform:uppercase; display:block; margin-bottom:.9rem; }
.cont-h2 { font-family:var(--fd); font-size:clamp(1.9rem,3vw,2.9rem); font-weight:300; color:var(--blanco); margin-bottom:1.2rem; line-height:1.1; }
.cont-p { font-family:var(--fb); font-size:.9rem; font-weight:300; line-height:1.9; color:rgba(247,245,240,.45); margin-bottom:1rem; }
.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); }
.rtit { 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; }

/* === 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; gap:.7rem; }
.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, .ft-nav a.activo { 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; }

/* === REVEAL === */
.rv { opacity:0; transform:translateY(26px); transition:opacity .65s, transform .65s; }
.rv.vis { opacity:1; transform:translateY(0); }

/* === ANIMACIONES === */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* === RESPONSIVE === */
@media (max-width:1100px) {
  #navbar { padding:1rem 2.5rem; }
  #navbar.scrolled { padding:.75rem 2.5rem; }
  .sec { padding:5rem 3rem; }
  .hero-int { padding:7rem 3rem 4rem; }
  .ggrid { grid-template-columns:repeat(2,1fr); }
  .gitem.wide { grid-column:span 2; }
  .gitem.tall { grid-row:span 1; aspect-ratio:3/4; }
  .stats-row { grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  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:.75rem 1.4rem; }
  .nav-links {
    position:fixed; top:0; right:-100%; 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,.08); transition:right .4s; z-index:998;
  }
  .nav-links.open { right:0; }
  .nav-links a { font-size:.88rem; }
  .nav-toggle { display:flex; z-index:999; }
  .sec { padding:3.5rem 1.4rem; }
  .hero-int { padding:6rem 1.4rem 3rem; }
  .ggrid { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  footer { padding:1.5rem 1.4rem; }
}