/* =========================================================
   CAFCER · Componentes
   ========================================================= */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: var(--r-pill);
  font: 600 16px/1 var(--display); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-ui) var(--ease-out), background-color var(--t-micro) var(--ease), box-shadow var(--t-ui) var(--ease), color var(--t-micro) var(--ease);
}
.btn svg { transition: transform var(--t-ui) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }

.btn--cta { background: var(--copper); color: #fff; box-shadow: var(--shadow-cta); }
.btn--cta:hover { background: var(--copper-dk); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(164, 104, 41, .34); }
.btn--cta:active { transform: scale(.98); box-shadow: var(--shadow-cta); }

.btn--glass {
  color: #fff; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }

/* ---------- Pill (etiquetas del proceso) ---------- */
.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--green); color: #fff;
  font: 600 18px/1 var(--display); letter-spacing: -.01em;
}
@media (min-width: 900px) { .pill { font-size: 20px; min-height: 44px; padding: 0 20px; } }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  color: #fff;
  transition: background-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
/* Velo verde superior: garantiza AA del texto blanco del header sobre el video */
.hdr::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: calc(100% + 56px);
  background: linear-gradient(180deg, rgba(11, 64, 34, .82) 0%, rgba(11, 64, 34, .72) 50%, rgba(11, 64, 34, 0) 100%);
  pointer-events: none; transition: opacity var(--t-ui) var(--ease);
}
.hdr.is-solid::before { opacity: 0; }
.hdr:not(.is-solid) :focus-visible { outline-color: var(--olive-lt); }
.hdr .nav__dd :focus-visible { outline-color: var(--olive); }
.hdr__in { display: flex; align-items: center; gap: var(--s3); height: var(--hdr-h); }
.hdr__logo { position: relative; display: block; width: 104px; height: 40px; flex: none; }
.hdr__logo img { position: absolute; inset: 0; width: auto; height: 40px; transition: opacity var(--t-ui) var(--ease); }
.hdr__logo-c { opacity: 0; }
.hdr.is-solid {
  color: var(--ink);
  background: rgba(250, 251, 247, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
.hdr.is-solid .hdr__logo-w { opacity: 0; }
.hdr.is-solid .hdr__logo-c { opacity: 1; }
@media (min-width: 1080px) {
  .hdr__logo { width: 115px; height: 44px; }
  .hdr__logo img { height: 44px; }
}

.hdr__tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hdr__cta { display: none; min-height: 46px; padding: 0 22px; font-size: 15px; }
.hdr__menu {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); color: inherit;
  transition: background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.hdr__menu:hover { background: rgba(255, 255, 255, .26); }
.hdr__menu:active { transform: scale(.96); }
.hdr.is-solid .hdr__menu { background: var(--tint); color: var(--green); }
.hdr.is-solid .hdr__menu:hover { background: var(--tint-2); }

/* Idioma */
.lang { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.hdr.is-solid .lang { box-shadow: inset 0 0 0 1px var(--line); }
.lang__btn {
  min-width: 40px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: transparent; cursor: pointer;
  font: 600 13px/1 var(--display); letter-spacing: .04em;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.lang__btn:hover { background: rgba(255, 255, 255, .16); }
.lang__btn[aria-pressed="true"] { background: #fff; color: var(--green); }
.hdr.is-solid .lang__btn:hover { background: var(--tint); }
.hdr.is-solid .lang__btn[aria-pressed="true"] { background: var(--green); color: #fff; }
.lang__btn:active { transform: scale(.96); }

/* Navegación de escritorio con desplegables */
.nav { display: none; }
.nav__list { display: flex; gap: 4px; }
.nav__group { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; cursor: pointer;
  font: 500 15px/1 var(--body);
  transition: background-color var(--t-micro) var(--ease);
}
.nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.hdr.is-solid .nav__trigger:hover, .hdr.is-solid .nav__trigger[aria-expanded="true"] { background: var(--tint); }
.nav__trigger:active { transform: scale(.98); }
.chev { transition: transform var(--t-ui) var(--ease-out); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

.nav__dd {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  padding: 8px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-hover);
  animation: dd-in var(--t-ui) var(--ease-out);
}
.nav__dd a {
  display: block; padding: 12px 16px; border-radius: 10px;
  font: 500 15px/1.2 var(--body); text-decoration: none;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.nav__dd a:hover { background: var(--tint); color: var(--green); }
.nav__dd a:active { transform: scale(.98); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1080px) {
  .nav { display: block; margin-left: var(--s3); }
  .hdr__cta { display: inline-flex; }
  .hdr__menu { display: none; }
}

/* ---------- Drawer móvil ---------- */
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: var(--z-drawer);
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: var(--s3);
  padding: 16px 24px 32px;
  background: var(--bg); color: var(--ink);
  box-shadow: -24px 0 64px rgba(11, 64, 34, .16);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform 500ms var(--ease-out), visibility 0s linear 500ms;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform 500ms var(--ease-out), visibility 0s; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.drawer__top img { width: auto; height: 40px; }
.drawer__close {
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--tint); color: var(--green);
  transition: background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.drawer__close:hover { background: var(--tint-2); }
.drawer__close:active { transform: scale(.96); }
.drawer__nav { display: flex; flex-direction: column; }
.acc { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 0 4px; border: 0; background: transparent; cursor: pointer; text-align: left;
  font: 600 24px/1.2 var(--display); letter-spacing: -.02em;
  transition: color var(--t-micro) var(--ease);
}
.acc__btn:hover, .acc__btn[aria-expanded="true"] { color: var(--green); }
.acc__panel { padding: 0 0 16px; display: grid; gap: 4px; }
.acc__panel:not([hidden]) { animation: dd-in var(--t-ui) var(--ease-out); }
.acc__panel a {
  display: block; padding: 12px 16px; border-radius: 12px;
  font: 500 18px/1.2 var(--body); text-decoration: none; color: var(--ink-2);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.acc__panel a:hover { background: var(--tint); color: var(--green); }
.drawer__cta { align-self: flex-start; margin-top: var(--s2); }
.drawer-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: rgba(15, 36, 24, .28);
  opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1080px) { .drawer, .drawer-scrim { display: none; } }

/* ---------- Control de video ---------- */
.vctl {
  position: absolute; right: var(--s3); bottom: var(--s3); z-index: 3;
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(11, 64, 34, .66); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.vctl:hover { background: rgba(11, 64, 34, .86); }
.vctl:active { transform: scale(.94); }
.vctl__play { display: none; }
.vctl[data-paused="true"] .vctl__play { display: block; }
.vctl[data-paused="true"] .vctl__pause { display: none; }

/* ---------- Copiar correo ---------- */
.copy {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tint); color: var(--green);
  font: 600 14px/1 var(--display);
  transition: background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.copy:hover { background: var(--tint-2); }
.copy:active { transform: scale(.97); }