/* ===================================================================
   Casa Mar — base styles
   Tailwind (CDN) handles utilities; this file holds the small set of
   repeating patterns (pills, form fields, accordion, brand mark, the
   scroll-reveal system) that are cleaner as real CSS than class soup.
=================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

::selection {
  background: #c99a76;
  color: #2a2a2a;
}

/* ---------- typography helpers ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  color: #c99a76;
}

.label-eyebrow {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #9a8a76;
}

/* ---------- pills / buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  /* `flex: none` + an explicit (non-auto) width is what stops a pill from
     being stretched full-width by a flex-column parent (e.g. the lead
     forms) — deliberately no align-self here, so a pill still centers
     correctly when its parent is a row flex container (e.g. the header). */
  flex: none;
  width: fit-content;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.pill--filled {
  background: #f0ece5;
  color: #2a2a2a;
  border: 1px solid #f0ece5;
}
.pill--filled:hover {
  background: #c99a76;
  border-color: #c99a76;
  transform: translateY(-2px);
}

.pill--outline {
  background: transparent;
  color: #e8e4de;
  border: 1px solid #8a5c44;
}
.pill--outline:hover {
  background: #8a5c44;
  transform: translateY(-2px);
}

.pill span {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}
.pill:hover span {
  transform: translateX(4px);
}

/* ---------- lead form ---------- */

.lead-form {
  display: flex;
  flex-direction: column;
  max-width: 490px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}
.field:first-child {
  margin-top: 0;
}

.field__label {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: #9a8a76;
}

.field__input {
  height: 41px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #e8e4de;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.field__input:focus {
  border-color: #c99a76;
  background: rgba(255, 255, 255, 0.03);
}
.field__input::placeholder {
  color: #6b6b6b;
}

/* ---------- accordion ---------- */

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

.accordion-num {
  font-weight: 300;
  font-size: 14px;
  color: #9a8a76;
  width: 32px;
  flex: none;
}

.accordion-title {
  flex: 1;
  font-weight: 300;
  font-size: 24px;
  color: #e8e4de;
  transition: color 0.3s ease;
}

.accordion-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 400;
  color: #9a8a76;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease;
}

.accordion-item[data-open="true"] .accordion-title {
  color: #c99a76;
}
.accordion-item[data-open="true"] .accordion-icon {
  color: #c99a76;
  transform: rotate(135deg);
}
.accordion-item:not([data-open="true"]) .accordion-trigger:hover .accordion-title {
  color: #c99a76;
}
.accordion-item:not([data-open="true"]) .accordion-trigger:hover .accordion-icon {
  color: #c99a76;
  transform: rotate(90deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.accordion-panel > p {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-item[data-open="true"] .accordion-panel {
  grid-template-rows: 1fr;
}
.accordion-item[data-open="true"] .accordion-panel > p {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease 0.12s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

/* ---------- stat rows (macroproyecto) ---------- */

.stat-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-num {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -1.2px;
  color: #c99a76;
  width: 96px;
  flex: none;
}
.stat-label {
  font-weight: 300;
  font-size: 22px;
  color: #e8e4de;
}
@media (min-width: 640px) {
  .stat-num { font-size: 48px; }
}

/* ---------- definition rows (grupo desarrollador) ---------- */

.def-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.def-row dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: none;
}
@media (min-width: 640px) {
  .def-row dt { gap: 20px; }
}
.def-num {
  font-weight: 300;
  font-size: 14px;
  color: #9a8a76;
}
.def-label {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: #9a8a76;
}
.def-value {
  font-weight: 300;
  font-size: 20px;
  color: #e8e4de;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
@media (min-width: 640px) {
  .def-value { font-size: 22px; }
}

/* ---------- brand mark (Aken Soul · Casa Mar logo lockup) ----------
   Reconstructed from the design's own relative geometry: a thin
   flourish rule beneath a six-glyph mark + wordmark. The percentage
   boxes below are exact insets from Figma, so the lockup scales
   cleanly at any width via the wrapper's aspect-ratio. */

.brand-mark {
  display: inline-block;
}
.brand-mark__box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 151.218 / 47.992;
}
.brand-mark__slot {
  position: absolute;
}
.brand-mark__part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- hamburger / close icon ---------- */

.hamburger {
  position: relative;
  display: inline-block;
  flex: none;
}
.hamburger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #c9c3ba;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, background-color 0.25s ease;
}
.hamburger__bar:nth-child(1) { top: 0; }
.hamburger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger__bar:nth-child(3) { bottom: 0; }

.group:hover .hamburger__bar {
  background: #e8e4de;
}

#menu-toggle[aria-expanded="true"] .hamburger__bar {
  background: #e8e4de;
}
#menu-toggle[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
#menu-toggle[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}
#menu-toggle[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ---------- nav ---------- */

.nav-link {
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
}
.nav-link:hover {
  color: #c99a76;
  transform: translateX(4px);
}

/* ---------- header scrolled state ---------- */

#site-header {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* ---------- scroll reveal ----------
   Elements start slightly lowered + transparent, then rise into place
   as they cross into view. Because the IntersectionObserver in main.js
   toggles the class both ways (not just once), leaving the section and
   scrolling back resets it, so it plays again on re-entry. */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1.is-visible { transition-delay: 0.12s; }
.reveal-delay-2.is-visible { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .accordion-panel {
    transition: none;
  }
}