/* ==========================================================================
   FIAPO — loja online
   Direção: streetwear urbano / concreto & muro, verde-fiapo sobre cinza cru
   ========================================================================== */

:root{
  color-scheme: light;

  --ink:        #16140f;
  --ink-soft:   #35322b;
  --paper:      #f4f0e6;
  --paper-dim:  #e8e2d3;

  --green:       #17a97a;
  --green-deep:  #0d6e4c;
  --green-light: #6be3b4;
  --green-glow:  rgba(23,169,122,.35);

  --concrete-1: #c7c4bb;
  --concrete-2: #a7a49a;
  --concrete-3: #86837a;
  --concrete-4: #625f57;

  --sand:  #cdbfa1;
  --black: #121110;

  --line: rgba(22,20,15,.12);
  --line-soft: rgba(244,240,230,.18);

  --radius: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --banner-image: none;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

button{ font-family: inherit; cursor: pointer; }

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

::selection{ background: var(--green); color: var(--paper); }

/* ---------- utility type ---------- */

.section{
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4rem);
  max-width: 1400px;
  margin: 0 auto;
  scroll-margin-top: 76px;
}

.section-head{ margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.section-title{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: -0.01em;
  margin: 0 0 .4rem;
}
.section-title span{ color: var(--green-deep); }

.section-sub{
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 46ch;
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(244,240,230,.92);
  backdrop-filter: blur(10px) saturate(1.2);
  border-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(0,0,0,.4);
}

.nav-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.1rem clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.brand-word{
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color .4s;
}
.hero .brand-word{ color: var(--paper); }
.brand-dots{ width: 34px; height: auto; }
.brand-dots circle{ fill: var(--green); }

.nav-links{
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 600;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nav-links a{
  position: relative;
  padding: .2rem 0;
  opacity: .85;
}
.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover{ opacity: 1; }
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-actions{ display: flex; align-items: center; gap: .9rem; }

.cart-btn{
  position: relative;
  background: none;
  border: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink);
  border-radius: 50%;
  transition: background .25s;
}
.cart-btn svg{ width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-btn:hover{ background: var(--line); }
.cart-count{
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  font-size: .62rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 3px;
  transition: transform .3s var(--ease);
}
.cart-count.bump{ animation: bump .4s var(--ease); }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

.menu-toggle{
  display: none;
  background: none; border: none;
  width: 40px; height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-toggle span{
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s;
}
.hero-in-view .menu-toggle span{ background: var(--paper); }
.nav.is-scrolled .menu-toggle span{ background: var(--ink); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-wall{
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--concrete-3);
  background-image:
    radial-gradient(ellipse 60% 45% at 18% 22%, rgba(0,0,0,.30), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 70% 85%, rgba(0,0,0,.28), transparent 60%),
    radial-gradient(ellipse 40% 35% at 8% 85%, rgba(255,255,255,.1), transparent 55%),
    repeating-linear-gradient(112deg, rgba(0,0,0,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(24deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px),
    linear-gradient(175deg, #b9b6ad 0%, #9c998f 45%, #85827a 78%, #706d66 100%);
}
.hero-wall::after{
  content: '';
  position: absolute; inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-wall::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05) 30%, rgba(0,0,0,.05) 65%, rgba(0,0,0,.4));
  z-index: 1;
}

.hero-crack{
  position: absolute;
  background: rgba(0,0,0,.22);
  filter: blur(.3px);
}
.hero-crack--a{
  width: 1px; height: 38%;
  top: 8%; left: 22%;
  transform: rotate(12deg);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35), transparent);
}
.hero-crack--b{
  width: 1px; height: 30%;
  bottom: 6%; right: 16%;
  transform: rotate(-18deg);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.3), transparent);
}

.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 900px;
}

.hero-kicker{
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-light);
  margin: 0 0 1.4rem;
  opacity: 0;
  animation: rise .8s var(--ease) .1s forwards;
}

.hero-word{
  margin: 0 0 1.6rem;
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(.4rem, 1.6vw, 1rem);
}
.hero-word-text{
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(3.6rem, 13vw, 9rem);
  line-height: .85;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-shadow: 0 6px 30px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(30px);
  animation: rise 1s var(--ease) .25s forwards;
}
.hero-dots{
  width: clamp(70px, 15vw, 130px);
  height: auto;
  margin-bottom: clamp(.5rem, 2vw, 1.2rem);
}
.hero-dots circle{ fill: var(--green); transform-origin: center; transform-box: fill-box; opacity: 0; }
.hero-dots .d1{ animation: pop .6s var(--ease) .7s forwards; }
.hero-dots .d2{ animation: pop .6s var(--ease) .82s forwards; }
.hero-dots .d3{ animation: pop .6s var(--ease) .94s forwards; }

.hero-tagline{
  margin: 0 0 2.4rem;
  color: var(--paper);
  opacity: .88;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
  text-wrap: balance;
  opacity: 0;
  animation: rise .8s var(--ease) .55s forwards;
}

.hero-cta{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise .8s var(--ease) .72s forwards;
}

@keyframes rise{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes pop{
  0%{ opacity: 0; transform: scale(.2); }
  65%{ opacity: 1; transform: scale(1.15); }
  100%{ opacity: 1; transform: scale(1); }
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn--solid{
  background: var(--green);
  color: var(--black);
  box-shadow: 0 10px 26px -12px var(--green-glow);
}
.btn--solid:hover{
  background: var(--green-light);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px var(--green-glow);
}
.btn--ghost{
  border-color: rgba(244,240,230,.5);
  color: var(--paper);
}
.btn--ghost:hover{
  border-color: var(--paper);
  background: rgba(244,240,230,.1);
  transform: translateY(-3px);
}

.hero-scroll{
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(244,240,230,.4);
  display: grid;
  place-items: center;
  animation: bob 2.2s ease-in-out infinite;
}
.hero-scroll svg{ width: 15px; height: 15px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bob{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   TICKER
   ========================================================================== */

.ticker{
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--green-deep);
  border-bottom: 1px solid var(--green-deep);
}
.ticker-track{
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: .8rem 0;
  animation: scroll-left 26s linear infinite;
  width: max-content;
}
.ticker-track span{
  font-family: 'Archivo Expanded', 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ticker-dot{ color: var(--green); font-size: .7rem; }
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   BENTO / DESTAQUES
   ========================================================================== */

.bento{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 1.1rem;
}

.bento-card{
  position: relative;
  grid-column: span 2;
  grid-row: span 1;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(28px);
  transition: transform .5s var(--ease), box-shadow .4s;
}
.bento-card.in-view{
  animation: rise .7s var(--ease) forwards;
  animation-delay: calc(var(--i) * .09s);
}
.bento-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -22px rgba(0,0,0,.35);
}
.bento-card--xl{ grid-column: span 2; grid-row: span 2; }
.bento-card--wide{ grid-column: span 2; }

.bento-card[data-tone="verde"]{ background: linear-gradient(155deg, var(--green-deep), var(--green) 120%); color: var(--paper); }
.bento-card[data-tone="preto"]{ background: linear-gradient(155deg, #26241f, var(--black) 120%); color: var(--paper); }
.bento-card[data-tone="areia"]{ background: linear-gradient(155deg, var(--sand), #b8a883 120%); color: var(--ink); }
.bento-card[data-tone="cinza"]{ background: linear-gradient(155deg, var(--concrete-2), var(--concrete-4) 120%); color: var(--paper); }

.bento-visual{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
}
.float-icon{
  width: 46%;
  height: auto;
  fill: currentColor;
  opacity: .22;
  animation: floaty 5s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.25));
}
.bento-card--xl .float-icon{ width: 54%; opacity: .28; }
.float-icon--ghost{
  position: absolute;
  width: 30%;
  right: 6%;
  top: 10%;
  opacity: .14;
  animation-delay: -2.4s;
}
.mini-dots{
  position: absolute;
  bottom: 1.3rem;
  right: 1.4rem;
  width: 54px;
  opacity: .5;
}
.mini-dots circle{ fill: currentColor; }

@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-14px) rotate(2deg); }
}

.tag{
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: auto;
}
.tag--new{ background: var(--green-light); color: var(--green-deep); }
.tag--hot{ background: var(--paper); color: var(--ink); }
.tag--low{ background: rgba(0,0,0,.35); color: var(--paper); }

.bento-info{ position: relative; z-index: 1; }
.bento-info h3{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 .15rem;
}
.bento-info .price{
  margin: 0;
  font-weight: 700;
  font-size: .92rem;
  opacity: .85;
}

/* ==========================================================================
   BANNER SLOT
   ========================================================================== */

.banner-slot{
  position: relative;
  margin: clamp(3rem, 6vw, 5rem) auto;
  max-width: 1400px;
  padding: clamp(1.25rem, 5vw, 2.5rem);
}
.banner-inner{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.5rem, 6vw, 3rem);
  text-align: center;
  background-image: var(--banner-image), linear-gradient(155deg, #2b2823, var(--ink) 60%, #05100b);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.banner-inner::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 50% 60% at 20% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 90%, var(--green-glow), transparent 60%);
  z-index: -1;
}
.banner-dots{
  width: clamp(90px, 16vw, 160px);
  margin: 0 auto 1.2rem;
  animation: floaty 6s ease-in-out infinite;
}
.banner-dots circle{ fill: var(--green); }
.banner-kicker{
  color: var(--green-light);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
  font-size: .75rem;
  margin: 0 0 .8rem;
}
.banner-title{
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  color: var(--paper);
  margin: 0 0 1rem;
  line-height: .95;
}
.banner-text{
  color: rgba(244,240,230,.75);
  max-width: 48ch;
  margin: 0 auto 2rem;
  font-size: 1rem;
}
.banner-text code{
  background: rgba(255,255,255,.12);
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .88em;
}

/* ==========================================================================
   FILTERS + PRODUCT GRID
   ========================================================================== */

.filters{
  display: flex;
  gap: .6rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}
.filter-btn{
  padding: .55rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.filter-btn:hover{ border-color: var(--green); color: var(--ink); }
.filter-btn.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
}

.product-card{
  position: relative;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .35s, filter .35s;
}
.product-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 44px -26px rgba(0,0,0,.28);
}
.product-card.is-hidden{
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.product-media{
  position: relative;
  aspect-ratio: 4/4.6;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pc-bg, var(--concrete-1));
  transition: background .4s var(--ease-soft);
}
.product-media::after{
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .25;
  mix-blend-mode: overlay;
}
.product-icon{
  width: 52%;
  fill: var(--pc-fg, var(--ink));
  transition: transform .5s var(--ease), fill .4s;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.18));
}
.product-icon .trim, .product-icon .seam{ stroke: rgba(0,0,0,.18); stroke-width: 1.4; fill: none; }
.product-icon .button{ fill: rgba(0,0,0,.18); }
.product-card:hover .product-icon{ transform: scale(1.08) rotate(-3deg); }

.product-tag{
  position: absolute;
  top: .8rem; left: .8rem;
  z-index: 1;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.product-tag[data-type="novo"]{ background: var(--green-light); color: var(--green-deep); }
.product-tag[data-type="destaque"]{ background: var(--ink); color: var(--paper); }
.product-tag[data-type="baixo"]{ background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

.quick-add{
  position: absolute;
  right: .8rem; bottom: .8rem;
  z-index: 1;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  border: none;
  transform: translateY(70px);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .3s, background .3s;
}
.quick-add svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.product-card:hover .quick-add{ transform: translateY(0); opacity: 1; }
.quick-add:hover{ background: var(--green); color: var(--black); }
.quick-add.added{ background: var(--green); color: var(--black); }

.product-body{ padding: 1.1rem 1.2rem 1.3rem; }
.product-body h3{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.08rem;
  margin: 0 0 .3rem;
}
.product-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.product-price{ font-weight: 800; font-size: .98rem; }

.swatches{ display: flex; gap: .4rem; }
.swatch{
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid var(--line);
  cursor: pointer;
  transition: transform .25s var(--ease), outline-color .25s;
  padding: 0;
}
.swatch:hover{ transform: scale(1.15); }
.swatch.is-active{ outline-color: var(--ink); transform: scale(1.15); }

/* ==========================================================================
   SOBRE / NEWSLETTER
   ========================================================================== */

.sobre-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.sobre-text p{
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 52ch;
}

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--green-deep);
  transition: gap .25s var(--ease);
}
.link-arrow:hover{ gap: .6rem; }

.newsletter{
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.newsletter label{
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}
.newsletter-row{ display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter-row input{
  flex: 1 1 200px;
  padding: .85rem 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(244,240,230,.25);
  background: rgba(244,240,230,.06);
  color: var(--paper);
  font-family: inherit;
  font-size: .92rem;
  outline: none;
  transition: border-color .25s;
}
.newsletter-row input::placeholder{ color: rgba(244,240,230,.4); }
.newsletter-row input:focus{ border-color: var(--green); }
.newsletter-msg{ min-height: 1.4em; margin: .8rem 0 0; font-size: .85rem; color: var(--green-light); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) 1.6rem;
}
.footer-top{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-soft);
}
.brand--footer .brand-word{ color: var(--paper); }
.footer-cols{
  display: flex;
  gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
}
.footer-cols h4{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--concrete-1);
  margin: 0 0 .9rem;
}
.footer-cols a{
  display: block;
  padding: .3rem 0;
  color: rgba(244,240,230,.8);
  font-size: .92rem;
  transition: color .2s;
}
.footer-cols a:hover{ color: var(--green-light); }

.footer-bottom{
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: .8rem;
  color: rgba(244,240,230,.5);
}

/* ==========================================================================
   PÁGINA INSTITUCIONAL (sobre.html)
   ========================================================================== */

.about-hero{
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem clamp(1.25rem, 5vw, 4rem) 3.5rem;
  isolation: isolate;
  overflow: hidden;
}
.about-hero .hero-wall{ z-index: -2; }
.about-hero-inner{ position: relative; z-index: 1; max-width: 900px; }
.about-kicker{
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-light);
  margin: 0 0 1rem;
}
.about-title{
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--paper);
  line-height: .95;
  margin: 0;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}

.about-body{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about-year{
  display: inline-flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}
.about-year strong{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--green-light);
}
.about-year span{ font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

.about-story p{
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 62ch;
  margin: 0 0 1.2rem;
}

.about-values{
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}
.about-value{
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
}
.about-value h3{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 .4rem;
  color: var(--green-deep);
}
.about-value p{ margin: 0; color: var(--ink-soft); font-size: .95rem; }

@media (max-width: 780px){
  .about-body{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   TOAST
   ========================================================================== */

.toast{
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding: .9rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: transform .4s var(--ease), opacity .4s;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.toast::before{
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-light);
}
.toast.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px){
  .nav-links{
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    background: var(--paper);
    padding: 1.2rem clamp(1.25rem, 5vw, 2.5rem) 1.6rem;
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s;
    gap: 1rem;
  }
  .nav-links.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .menu-toggle{ display: flex; }

  .bento{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
  .bento-card, .bento-card--wide{ grid-column: span 2; grid-row: span 1; }
  .bento-card--xl{ grid-column: span 2; grid-row: span 2; }

  .sobre-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .hero-word{ flex-direction: column; align-items: center; gap: .2rem; }
  .hero-cta{ flex-direction: column; width: 100%; }
  .hero-cta .btn{ width: 100%; }
  .brk{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}