/*
Theme Name: 19-81 Brewing
Theme URI: https://1981brewing.com
Author: 19-81 Brewing Co.
Author URI: https://1981brewing.com
Description: Tema a medida para 19-81 Brewing Co. Portado del diseño "island-brew-blueprint" (carpeta 1981). Hero de doble carrusel (izquierda→derecha / derecha→izquierda) con personas felices, manteniendo paleta navy/foam/coral/gold y tipografías Anton + Inter + JetBrains Mono.
Version: 2.1.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nineteen81
*/

/* ============================================================
   TOKENS  — paleta tropical inspirada en el mural
   (verde selva · amarillo toldo · rojo flor · crema · turquesa iguana)
   ============================================================ */
:root{
  --radius: 0.5rem;

  /* Paleta PATU */
  --navy:  #104E43;   /* verde teal profundo (color "oscuro"/texto) */
  --foam:  #FFE5B3;   /* crema (fondo claro) */
  --coral: #EC5E10;   /* naranja (acento principal / hero) */
  --gold:  #FAAA1F;   /* ámbar */
  --leaf:  #104e43;   /* verde teal (sin usar el lima) */
  --wood:  #0C3A32;   /* teal más oscuro (profundidad) */
  --teal:  #104E43;   /* alias teal para focus/acentos */

  --verde-oscuro: #061412;  /* verde casi negro (centro del hero) */
  --verde-claro:  #08453b;  /* verde junto a los carruseles */

  --secondary: #F6D79F;  /* crema cálida para placeholders */
  --border:    #ECD49A;  /* línea sobre crema */

  --font-display: 'Anton', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing: border-box; border-color: var(--border); }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }
body{
  background: #FAAA1F;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--coral); color:#fff; }

/* Barra de scroll a juego con la marca */
html{ scrollbar-color: var(--coral) var(--foam); scrollbar-width: thin; }
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--foam); }
::-webkit-scrollbar-thumb{
  background: var(--coral);
  border: 3px solid var(--foam);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: var(--navy); }
::-webkit-scrollbar-corner{ background: var(--foam); }

.upper{ text-transform: uppercase; }
.mono{ font-family: var(--font-mono); }
.italic{ font-style: italic; }

/* ============================================================
   NAV  (fija — el color se adapta al fondo de cada sección)
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; width:100%; z-index:50;
  color: var(--navy);
  padding: 14px 20px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
  /* Fondo "frosted" para que el menú sea legible sobre cualquier foto. */
  background: rgba(255,229,179,.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(16,78,67,.06);
}
/* Fondo claro detrás → barra crema + texto teal. */
.nav.nav--on-light{ color: var(--navy); background: rgba(255,229,179,.62); box-shadow: 0 1px 0 rgba(16,78,67,.07); }
/* Fondo oscuro detrás → barra teal + texto crema. */
.nav.nav--on-dark { color: var(--foam); background: rgba(16,78,67,.58); box-shadow: 0 1px 0 rgba(255,229,179,.10); }
/* En el tope (sobre el hero): transparente, sin blur, logo y texto BLANCOS.
   Va después de las reglas de tono para ganar por orden. */
.nav.nav--top{
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  color: #fff;
}

.nav__left{ display:flex; align-items:center; gap:8px; justify-self:start; }
.nav__right{ display:flex; align-items:center; justify-self:end; }
.nav__logo{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; gap:5px; position:relative; }
.nav__logo img{ height: clamp(41px, 5.55vw, 61px); width:auto; display:block; }
/* Máscara: recorta el barco bajo la línea para que "salga" de ella.
   display:flex + line-height:0 → mide exactamente el logo y lo recorta del todo. */
.logo-mask{ position:relative; display:flex; overflow:hidden; line-height:0; }
.logo-mask .logo-color,
.logo-mask .logo-white{ position:relative; z-index:1; }
/* Logo a color por defecto; blanco cuando el fondo es oscuro. */
.nav__logo .logo-white{ display:none; }
.nav--on-dark .nav__logo .logo-color{ display:none; }
.nav--on-dark .nav__logo .logo-white{ display:block; }
/* En el tope (header transparente sobre el hero) → logo BLANCO siempre visible.
   Mayor especificidad para ganar a las reglas anteriores en cualquier orden. */
.nav--top .nav__logo .logo-color{ display:none; }
.nav--top .nav__logo .logo-white{ display:block; }
/* Línea bajo el logo: eliminada por petición. */
.logo-line{ display:none; }
/* Barco: oculto bajo la línea; en hover sube y queda encima del logo. */
.logo-boat{
  position:absolute; left:50%; bottom:0; z-index:2;
  transform: translate(-50%, 110%);
  opacity:0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .15s ease;
  pointer-events:none;
}
.nav__logo:hover .logo-boat,
.nav__logo:focus-within .logo-boat{ transform: translate(-50%, 0); opacity:1; }

.nav__icon-btn{
  background:none; border:0; cursor:pointer; color:inherit;
  padding:8px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; transition: background .2s ease;
}
.nav__icon-btn:hover{ background: color-mix(in oklab, currentColor 14%, transparent); }
.nav__search-toggle svg{ width:21px; height:21px; }

.nav__burger{ width:40px; height:38px; flex-direction:column; gap:5px; }
.nav__burger span{ display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition: transform .3s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav__directions{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--coral); border:2px solid var(--coral); border-radius:999px;
  color:#fff;
  padding:9px 16px;
  font-family: var(--font-mono); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav__directions svg{ width:16px; height:16px; }
.nav__directions:hover{ background: transparent; border-color: currentColor; color: inherit; }
@media (max-width:520px){
  .nav__directions span{ display:none; }
  .nav__directions{ padding:9px; }
}

/* ===== Buscador desplegable ===== */
.nav-search{
  position: fixed; top:0; left:0; right:0; z-index:90;
  background: var(--foam); border-bottom: 4px solid var(--navy);
  padding: 16px 20px;
  transform: translateY(-100%); visibility:hidden;
  transition: transform .3s ease, visibility .3s ease;
}
.nav-search.is-open{ transform: translateY(0); visibility:visible; }
.nav-search form{ max-width:1100px; margin:0 auto; display:flex; gap:10px; }
.nav-search input{
  flex:1; border:2px solid var(--navy); background:#fff; color:var(--navy);
  padding:12px 16px; font:inherit;
}
.nav-search input:focus{ outline:none; border-color: var(--teal); box-shadow:0 0 0 3px rgba(16,78,67,.32); }
.nav-search .btn-search{
  background: var(--navy); color: var(--foam); border:0; cursor:pointer;
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  padding:0 22px;
}
.nav-search .btn-search:hover{ background: var(--coral); }
.nav-search__close{
  background:none; border:2px solid var(--navy); color: var(--navy);
  cursor:pointer; font-size:24px; line-height:1;
  width:48px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s ease, color .2s ease;
}
.nav-search__close:hover{ background: var(--navy); color: var(--foam); }

/* ===== Drawer / menú hamburguesa ===== */
.drawer{ position:fixed; inset:0; z-index:100; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__backdrop{
  position:absolute; inset:0; background: rgba(16,78,67,.55);
  opacity:0; transition: opacity .35s ease;
}
.drawer.is-open .drawer__backdrop{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; left:0; height:100%;
  width:min(88vw, 400px);
  background: var(--navy); color: var(--foam);
  display:flex; flex-direction:column;
  padding: 22px 28px 32px;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform: translateX(0); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 28px; }
.drawer__brand{ height:47px; width:auto; }
.drawer__close{
  background:none; border:0; cursor:pointer; color: var(--foam);
  font-size:38px; line-height:1; padding:0 6px;
}
.drawer__close:hover{ color: var(--coral); }
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{
  font-family: var(--font-display); text-transform:uppercase;
  font-size: clamp(26px, 4.4vw, 38px); line-height:1;
  color: var(--foam); padding:16px 0;
  border-bottom:1px solid rgba(255,229,179,.14);
  transition: color .2s ease, padding-left .2s ease;
}
.drawer__nav a:hover{ color: var(--coral); padding-left:10px; }
.drawer__directions{
  margin-top:28px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  background: var(--coral); color:#fff;
  font-family: var(--font-mono); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  padding:14px 22px; border-radius:999px;
  transition: background .2s ease;
}
.drawer__directions:hover{ background: var(--foam); color: var(--navy); }
body.drawer-open{ overflow:hidden; }

/* ============================================================
   HERO NUEVO  (doble carrusel + H1 + texto)
   ============================================================ */
.hero{
  background: linear-gradient(to right, var(--verde-claro) 0%, var(--verde-oscuro) 100%);
  color: var(--foam);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(96px, 12vh, 122px) 0 clamp(20px, 4vh, 40px);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 3vh, 36px);
}
.hero .hero-copy{
  text-align: center;
  padding: 0 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.hero h1{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 7.5vw, 104px);
  line-height: 0.85;
  letter-spacing: .01em;
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  color: var(--gold);
  text-wrap: balance;
}
.hero h1 .alt{ color: var(--foam); }
.hero .over{
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .18em; font-size: clamp(11px, 1.4vw, 13px);
  color: var(--navy); margin: 0 0 14px;
}
.hero .lead{
  max-width: 640px; margin: 0 auto;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 500; font-style: italic;
  line-height: 1.3;
  color: #FFE5B3;
}
.hero .cta{
  display: inline-block; margin-top: clamp(16px, 2.6vh, 30px);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(16px, 2vw, 20px);
  background: var(--navy); color: var(--foam);
  padding: 14px 32px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hero .cta:hover{ background: var(--gold); color: var(--navy); transform: translateY(-2px); }

/* carriles de imágenes (cuadradas, escaladas al alto de pantalla) */
.rail{
  display:flex; width:max-content;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 0 clamp(6px, .7vw, 10px);
  --sq: clamp(120px, 24vh, 260px);
}
.rail .slide{
  flex: 0 0 auto;
  width: var(--sq);
  height: var(--sq);
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border: none;
  background: var(--secondary);
}
.rail .slide img{
  width:100%; height:100%; object-fit: cover;
}

.marquee-mask{ overflow:hidden; width:100%; }
/* Ping-pong: avanza hasta el final y se devuelve (ida y vuelta). */
.rail.track-left{ animation: hero-pingpong 30s ease-in-out infinite alternate; will-change: transform; }
.rail.track-right{ animation: hero-pingpong 30s ease-in-out infinite alternate-reverse; will-change: transform; }
.marquee-mask:hover .track-left,
.marquee-mask:hover .track-right{ animation-play-state: paused; }

/* Recorre desde 0 hasta alinear su borde derecho con el viewport (el "final"). */
@keyframes hero-pingpong{
  from{ transform: translateX(0); }
  to  { transform: translateX(min(0px, calc(100vw - 100% - 16px))); }
}

@keyframes scroll-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes scroll-right{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* ============================================================
   MARQUEE de texto (banda coral con borde navy)
   ============================================================ */
.ticker{
  background: var(--coral); color:#fff;
  overflow:hidden;
  border-top: 1px solid var(--leaf);
  border-bottom: 1px solid var(--leaf);
}
.ticker .track{
  display:flex; width:max-content;
  white-space: nowrap;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 24px; text-transform: uppercase; letter-spacing:.06em;
  animation: scroll-left 40s linear infinite;
}
.ticker .track span{ padding: 0 24px; }

/* ============================================================
   SECCIÓN BIRRAS
   ============================================================ */
.beers{ background: var(--foam); padding: 80px 24px; }
@media (min-width:768px){ .beers{ padding: 96px 64px; } }
.beers .head{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom: 4px solid var(--navy); padding-bottom: 16px;
  margin-bottom: 48px;
}
.beers .head h2{
  font-family: var(--font-display); font-weight:400; text-transform:uppercase;
  font-size: clamp(36px, 6vw, 64px); line-height:1; margin:0;
}
.beers .head .idx{ font-family: var(--font-mono); font-size:14px; font-weight:700; margin-bottom:8px; }

/* Line-up — tarjetas: imagen · nombre · 2 botones (3 por fila) */
.product-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width:600px){ .product-list{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:900px){ .product-list{ grid-template-columns: repeat(3,1fr); } }

.product{
  background: var(--foam);
  border: 1px solid var(--border);
  display:flex; flex-direction:column;
  text-align:center;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(16,78,67,.4); }
.product .img{
  aspect-ratio: 3/4; overflow:hidden; position:relative;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.55), transparent 60%), var(--secondary);
}
.product .badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family: var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:5px 10px; border-radius:999px; color:#fff;
}
.product .badge-seasonal{ background: var(--coral); }
.product .badge-out{ background: rgba(16,78,67,.85); }
.badge-in{ background: #2e7d32; }

/* ============================================================
   SINGLE BEER (template individual)
   ============================================================ */
.single-beer{ background: var(--foam); padding: 120px 24px 80px; min-height: 70vh; }
@media (min-width:768px){ .single-beer{ padding: 140px 64px 96px; } }
.single-beer__back{
  display:inline-block; margin-bottom: 32px;
  font-family: var(--font-mono); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color: var(--navy);
}
.single-beer__back:hover{ color: var(--coral); }
.single-beer__grid{
  display:grid; grid-template-columns:1fr; gap: 40px;
  max-width: 1100px; margin: 0 auto;
}
@media (min-width:900px){ .single-beer__grid{ grid-template-columns: 1fr 1.1fr; gap: 64px; align-items:start; } }
.single-beer__media{ position:relative; }
.single-beer__img{
  width:100%; aspect-ratio: 3/4; object-fit: contain;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.55), transparent 60%), var(--secondary);
  border-radius: 14px; padding: 24px;
}
.single-beer__img--placeholder{ display:block; }
.single-beer__media .badge{
  position:absolute; top:16px; left:16px;
  font-family: var(--font-mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:6px 12px; border-radius:999px; color:#fff;
}
.single-beer__cat{
  display:inline-block; margin-bottom:14px;
  font-family: var(--font-mono); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color: var(--coral);
}
.single-beer__name{
  font-family: var(--font-display); font-weight:400; text-transform:uppercase;
  font-size: clamp(40px, 6vw, 72px); line-height:.95; margin:0 0 24px; color: var(--navy);
}
.single-beer__stats{
  display:flex; gap: 32px; list-style:none; padding:0; margin:0 0 28px;
  border-top:2px solid rgba(16,78,67,.15); border-bottom:2px solid rgba(16,78,67,.15);
  padding: 18px 0;
}
.single-beer__stats li{ display:flex; flex-direction:column; gap:4px; }
.single-beer__stats span{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; opacity:.6; color: var(--navy); }
.single-beer__stats strong{ font-family: var(--font-display); font-size: clamp(28px,3.5vw,40px); font-weight:400; color: var(--navy); line-height:1; }
.single-beer__copy{ font-size:17px; line-height:1.6; color: var(--navy); opacity:.85; margin-bottom: 32px; }
.single-beer__copy p{ margin: 0 0 16px; }

/* Sección Taproom con fondo verde oscuro. */
.beers--dark{ background: var(--verde-oscuro); color: var(--foam); }
.beers--dark .head h2{ color: var(--foam); }
.beers--dark .head .idx{ color: var(--coral); }

/* Carrusel de fotos del taproom (encima de las cards Taproom Exclusives). */
.taproom-carousel{ margin: 0 0 48px; }
.taproom-carousel .rail{
  --sq: clamp(140px, 22vh, 240px);
  animation: scroll-left 35s linear infinite;
}
.taproom-carousel:hover .rail{ animation-play-state: paused; }
.product .img img{
  width:100%; height:100%; object-fit: contain;
  padding: 18px;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.product:hover .img img{ transform: scale(1.05); }
.product .body{
  padding: 22px 18px 24px;
  display:flex; flex-direction:column; gap:14px; flex:1;
}
.product .pname{
  font-family: var(--font-display); font-weight:400; text-transform:uppercase;
  font-size: clamp(22px,2.6vw,30px); line-height:1; margin:0; color: var(--navy);
}
.product .pname a{ color: inherit; }
.product .pdesc{ margin:0; font-size:14px; line-height:1.4; color: var(--navy); opacity:.7; }
.product .stats{
  list-style:none; margin:0; padding:12px 0 0;
  display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:nowrap;
  border-top:1px solid var(--border);
}
.product .stats li{
  display:inline-flex; align-items:baseline; gap:6px;
  white-space:nowrap;
}
.product .stats li + li{ padding-left:10px; border-left:1px solid var(--border); }
.product .stats span{ font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
.product .stats strong{ font-family: var(--font-display); font-weight:400; font-size:18px; line-height:1; color: var(--coral); }
.product .btns{ display:flex; gap:10px; margin-top:auto; }
.product .btn{
  flex:1; text-align:center;
  font-family: var(--font-mono); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  padding:12px 10px; border:2px solid var(--navy); color: var(--navy);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.product .btn:hover{ background: var(--navy); color: var(--foam); }
.product .btn-red{ background: var(--coral); border-color: var(--coral); color:#fff; }
.product .btn-red:hover{ background: var(--navy); border-color: var(--navy); color:#fff; }

/* ============================================================
   GALERÍA "LA GUACHAFITA"
   ============================================================ */
.guacha{ background: var(--navy); color: var(--foam); padding: 80px 0; position:relative; }
@media (min-width:768px){ .guacha{ padding: 96px 0; } }
.guacha .intro{ padding: 0 24px; margin-bottom: 48px; }
@media (min-width:768px){ .guacha .intro{ padding: 0 64px; } }
.guacha h2{
  font-family: var(--font-display); font-weight:400; text-transform:uppercase;
  font-size: clamp(48px, 9vw, 96px); line-height:.8; margin:0;
}
.guacha h2 .alt{ color: var(--gold); }
.guacha .intro .sub{ font-family: var(--font-mono); margin-top:16px; font-size:12px; opacity:.6; text-transform:uppercase; }

.guacha .strip{
  display:flex; gap: 24px; padding: 0 24px 24px; overflow-x:auto;
  scrollbar-width:none;
}
.guacha .strip::-webkit-scrollbar{ display:none; }
@media (min-width:768px){ .guacha .strip{ padding: 0 64px 24px; } }
.guacha figure{
  flex: 0 0 auto; width: 280px; margin:0;
  transition: transform .5s ease;
}
@media (min-width:768px){ .guacha figure{ width: 320px; } }
.guacha figure:nth-child(1){ transform: rotate(-2deg); }
.guacha figure:nth-child(2){ transform: rotate(3deg); }
.guacha figure:nth-child(3){ transform: rotate(-1deg); }
.guacha figure:nth-child(4){ transform: rotate(2deg); }
.guacha figure:hover{ transform: rotate(0) scale(1.05); }
.guacha figure img{ width:100%; aspect-ratio:1/1; object-fit:cover; outline: 8px solid rgba(255,229,179,.07); }
.guacha figcaption{ margin-top:8px; font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; opacity:.7; }
.guacha .note{ margin: 48px 0 0; padding: 0 24px; max-width: 640px; font-style:italic; font-size:18px; color: rgba(255,229,179,.8); }
@media (min-width:768px){ .guacha .note{ padding: 0 64px; } }

/* ============================================================
   FOOTER / CTA
   ============================================================ */
.foot{ background: var(--foam); padding: 80px 24px 48px; }
@media (min-width:768px){ .foot{ padding: 96px 64px 48px; } }
.foot .top{
  display:grid; grid-template-columns:1fr; gap: 48px;
  border-top: 8px solid var(--navy); padding-top: 48px;
}
@media (min-width:768px){ .foot .top{ grid-template-columns: 1fr 1fr; } }
.foot h3{
  font-family: var(--font-display); font-weight:400; text-transform:uppercase; font-style:italic;
  font-size: clamp(40px,6vw,72px); line-height:1; margin:0 0 32px; color: var(--navy);
}
.foot .ctas{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:640px){ .foot .ctas{ flex-direction:row; } }
.foot .btn{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:-.01em;
  font-size: clamp(20px,3vw,24px); padding: 20px 40px; text-align:center;
  transition: background .2s ease, color .2s ease;
}
.foot .btn-coral{ background: var(--coral); color: var(--foam); }
.foot .btn-coral:hover{ background: var(--navy); }
.foot .btn-ghost{ border:4px solid var(--navy); color: var(--navy); }
.foot .btn-ghost:hover{ background: var(--navy); color: var(--foam); }

.foot .info{ display:grid; grid-template-columns:1fr; gap:32px; font-family: var(--font-mono); font-size:14px; }
@media (min-width:640px){ .foot .info{ grid-template-columns:1fr 1fr; } }
.foot .info h4{ font-weight:700; text-transform:uppercase; border-bottom:1px solid rgba(16,78,67,.2); padding-bottom:8px; margin:0 0 12px; }
.foot .info p{ margin:0 0 4px; line-height:1.5; }
.foot .info .hh{ color: var(--coral); font-weight:700; }

.foot .legal{
  margin-top: 96px; display:flex; flex-direction:column; gap:8px;
  justify-content:space-between; align-items:center;
  opacity:.4; font-family: var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.4em;
}
@media (min-width:768px){ .foot .legal{ flex-direction:row; } }