/* Grupo IO — sitio completo. Un solo stylesheet para todas las páginas.
   Estructura:
     1. Tokens y base
     2. Componentes compartidos (header, botones, hero, cards, CTA, footer)
     3. index.html — home
     4. proyecto-amanda.html — landing del proyecto
   Antes de agregar una clase nueva, revisá si ya existe algo parecido en
   la sección 2 y reusalo en vez de duplicarlo.

   Sistema tipográfico: Fraunces (serif, --font-display) para títulos —
   toma la misma familia que ya usa el isotipo real de la marca (el
   degradé dorado de "IO", el lockup de Proyecto Amanda) — y Archivo
   (grotesk, --font-heading / --font-body) para texto de cuerpo y
   componentes de interfaz (botones, nav, labels). No mezclar: los
   elementos chico/uppercase/tracked son siempre --font-heading, los
   títulos editoriales son siempre --font-display.

   Paleta: dorado (--gold-*) es la identidad de Grupo IO — la empresa,
   confianza, cifras. Salvia (--sage) es la identidad de Proyecto
   Amanda — el hogar, el jardín — tomada del isotipo del proyecto.
   Se usan para diferenciar cuándo el contenido habla de la empresa vs.
   del desarrollo específico. */

/* ══════════════════════════════════════════════════════════════════════
   1. Tokens y base
   ══════════════════════════════════════════════════════════════════ */

:root {
  --ink: #241f18;
  --ink-soft: #665d51;
  --ink-softer: #857b6c;
  --gold-deep: #523b09;
  --gold-mid: #6d4f0c;
  --gold-dark: #3b2a06;
  --gold-bright: #c9962e;
  --sage: #56684a;
  --bg: #f4efe2;
  --surface: #fffcf5;
  --line: rgba(82, 59, 9, 0.10);
  --line-soft: rgba(82, 59, 9, 0.12);
  --shadow-card: 0 10px 30px rgba(82, 59, 9, 0.07);
  --shadow-btn: 0 8px 22px rgba(82, 59, 9, 0.20);
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-heading: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --radius-card: 22px;
  --radius-pill: 999px;
  --wrap: 1280px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(120% 90% at 88% -15%, rgba(82, 59, 9, 0.08), rgba(82, 59, 9, 0) 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(86, 104, 74, 0.05), rgba(86, 104, 74, 0) 60%);
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

a { color: var(--gold-deep); }
a:hover { color: var(--gold-mid); }

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

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
::selection { background: rgba(201, 150, 46, 0.3); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* — Eyebrow: marcador de sección — */
/* Antes usaba numeración (01/02/03) tipo "paso a paso", pero las
   secciones no son una secuencia real — son temas independientes.
   El marcador es un trazo de techo a dos aguas: la misma línea que
   dibuja la casita del isotipo de Proyecto Amanda, reusada como
   ícono de "esto es Grupo IO construyendo algo". */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.eyebrow-mark { display: inline-flex; color: var(--gold-deep); flex: none; }
.eyebrow-mark svg { width: 15px; height: 12px; display: block; }
.eyebrow-line { width: 34px; height: 2px; background: var(--gold-deep); opacity: 0.35; }
.eyebrow h6 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow--end { justify-content: flex-end; }
.eyebrow--inverse .eyebrow-mark,
.eyebrow--inverse h6 { color: currentColor; opacity: 0.85; }
.eyebrow--inverse .eyebrow-line { background: currentColor; opacity: 0.4; }

.hr { height: 1px; background: var(--line-soft); margin: 32px 0; border: 0; }

.h2 { font-size: clamp(30px, 4.4vw, 58px); margin-bottom: 12px; max-width: 22ch; text-wrap: balance; }

.hero-copy.left h2 { clamp(28px, 4.0vw, 58px); max-width: 30ch; text-wrap: balance; }

.lede { font-size: 16px; max-width: 60ch; color: var(--ink-soft); text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════════
   2. Componentes compartidos
   ══════════════════════════════════════════════════════════════════ */

/* — Botones — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn-primary { background: var(--gold-deep); color: var(--bg); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--gold-mid); box-shadow: 0 12px 28px rgba(82, 59, 9, 0.26); transform: translateY(-1px); color: var(--bg); }
.btn-primary:active { background: var(--gold-dark); transform: translateY(0); }
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-soft);
  box-shadow: 0 3px 12px rgba(82, 59, 9, 0.07);
}
.btn-secondary:hover { box-shadow: 0 8px 20px rgba(82, 59, 9, 0.12); transform: translateY(-1px); color: var(--ink); }
.btn-inverse { background: var(--bg); color: var(--ink); min-height: 52px; padding: 14px 26px; }
.btn-inverse:hover { background: #ece4d2; color: var(--ink); }

.btn-tab {
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(82, 59, 9, 0.07);
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn-tab[aria-pressed="true"] {
  background: var(--gold-deep);
  color: var(--bg);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-btn);
}

/* — Header — */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 239, 226, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 22px rgba(82, 59, 9, 0.05);
}
.site-header .wrap {
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 16px;
  mix-blend-mode: multiply;
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.brand-name small { display: block; font-weight: 500; opacity: 0.6; letter-spacing: 0.1em; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; }
.site-nav a:not(.btn) {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
}
.site-nav a:not(.btn):hover { background: rgba(82, 59, 9, 0.06); color: var(--ink); }
.site-nav .btn { margin-left: 4px; }

/* — Botón hamburguesa (solo mobile, ver media query más abajo) — */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* El nav completo (links + logos + botón) no entra en una sola línea
   por debajo de ~860px — a partir de ahí se colapsa detrás del botón
   hamburguesa en vez de partirse en 2-3 líneas dentro del header. */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { justify-content: center; }
  .site-nav .btn { margin-left: 0; margin-top: 6px; justify-content: center; }
}

/* — Secciones — */
.section { border-bottom: 1px solid var(--line); }
.section-pad { padding-block: clamp(40px, 6vw, 84px); }

/* — Hero — */
.hero { border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: stretch; }
.hero-copy {
  padding: clamp(36px, 6vw, 88px) clamp(20px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
  text-align: right;
  /* Sin esto, los hijos de un flex column con align-items != stretch se
     dimensionan a su ancho de contenido (min-width:auto por default) y
     pueden desbordar la columna del grid — es lo que cortaba el título
     en anchos intermedios como 1024px u 800px. */
  min-width: 0;
}
.hero-copy.left { align-items: flex-start; text-align: left; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep);
}
.hero-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-deep);
  margin-right: 9px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  /* 6.8vw asumía que el título tiene todo el ancho de la ventana, pero
     en el layout de 2 columnas solo tiene la mitad — un multiplicador
     más chico evita que crezca más de lo que la columna puede mostrar. */
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 1.03;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow-wrap: break-word;
}
.hero-title-accent {
  color: var(--gold-dark);
  background: linear-gradient(100deg, var(--gold-dark) 10%, var(--gold-bright) 50%, var(--gold-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-logo { width: min(420px, 100%); border-radius: 20px; mix-blend-mode: multiply; }
.hero-copy p { font-size: clamp(16px, 1.6vw, 19px); max-width: 46ch; color: var(--ink-soft); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.hero-media {
  position: relative;
  min-height: 440px;
  padding: clamp(0px, 2.2vw, 30px);
  overflow: hidden;
}
.hero-media img, .section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--line);
  transition: transform 0.6s ease;
}
.hero-media:hover img { transform: scale(1.035); }

.hero-badge {
  position: absolute;
  left: clamp(16px, 3vw, 46px);
  bottom: clamp(16px, 3vw, 46px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 28px);
  max-width: calc(100% - clamp(32px, 6vw, 92px));
  background: rgba(255, 252, 245, 0.92);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px clamp(16px, 2.4vw, 22px);
  box-shadow: var(--shadow-card);
}
.hero-badge-item { display: flex; flex-direction: column; gap: 2px; }
.hero-badge-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--gold-deep);
}
.hero-badge-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* — Cards — */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--shadow-card);
}
.card-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }

/* — Media placeholder (usado donde falta un asset final) — */
.media {
  position: relative;
  background: #eae4d6;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-placeholder {
  border: 1.5px dashed var(--line-soft);
  color: var(--ink-softer);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 24px;
}
.media-tall { min-height: 400px; }

/* — Banda CTA — */
/* Siempre que aparece, es para promocionar Proyecto Amanda (el hogar,
   el jardín) — por eso usa salvia en vez del dorado corporativo:
   distingue visualmente "el proyecto" de "la empresa", igual que sus
   propios isotipos usan paletas distintas. */
.cta-band {
  background: var(--sage);
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, rgba(255,255,255,0) 2px 15px);
  color: var(--bg);
  border-radius: 28px;
  margin: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px);
  box-shadow: 0 20px 50px rgba(38, 46, 30, 0.24);
}
.cta-grid {
  padding: clamp(44px, 7vw, 96px) clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.cta-grid h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.cta-copy p { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; margin-bottom: 26px; }
.cta-address { font-size: 14px; margin-top: 22px; opacity: 0.9; line-height: 1.6; }

/* — Footer — */
.site-footer .wrap {
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
}
.footer-back {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.footer-note { font-size: 12px; color: var(--ink-soft); }

.footer-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-social { display: flex; align-items: center; gap: 8px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color 0.15s ease, background 0.15s ease;
}
.footer-social a:hover { color: var(--gold-deep); background: rgba(82, 59, 9, 0.08); }
.footer-social svg { width: 16px; height: 16px; display: block; }

/* — Fila de botones (WhatsApp + email, etc.) — */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { margin-top: 0; }

/* — Link a Google Maps (junto a una dirección) — */
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
}
.map-link svg { width: 14px; height: 14px; flex: none; }
.map-link:hover { color: var(--gold-mid); text-decoration: underline; }
/* Variante para usar sobre fondos oscuros (cta-band) */
.map-link--inverse { color: currentColor; opacity: 0.85; }
.map-link--inverse:hover { color: currentColor; opacity: 1; }

/* — Lightbox: popup de fotos (ver js/gallery.js) — */
.photo-thumb {
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  font: inherit;
}
.photo-thumb:hover img,
.photo-thumb:focus-visible img { transform: scale(1.045); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(20, 16, 10, 0.86); }
.lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 1100px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close svg,
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-close { top: -56px; right: 0; }
.lightbox-prev { left: clamp(-56px, -6vw, -12px); }
.lightbox-next { right: clamp(-56px, -6vw, -12px); }
.lightbox-count {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 720px) {
  .lightbox-close { top: 0; right: 0; }
  .lightbox-prev { left: 0; }
  .lightbox-next { right: 0; }
}

/* Utilidad: alinea a la derecha dentro de una columna auto-fit en
   pantallas anchas, sin forzarlo cuando la columna se apila en angosto */
@media (max-width: 640px) {
  .eyebrow--end {
    text-align: left;
    justify-content: flex-start;
    align-self: stretch;
  }
  /* El hero pasa de alineado a la derecha (para quedar pegado a la
     imagen, en desktop) a centrado (para leerse como un bloque único
     apilado sobre la foto, en mobile). */
  .hero-copy {
    text-align: center;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }
  
  .hero-actions { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   3. index.html — home
   ══════════════════════════════════════════════════════════════════ */

/* Quiénes somos */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.about-grid h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 22px; text-wrap: balance; }
.about-logo { width: 180px; mix-blend-mode: multiply; }
.about-copy { display: flex; flex-direction: column; gap: 4px; }
.about-copy p { font-size: 16px; line-height: 1.6; text-wrap: pretty; margin-bottom: 16px; }
.about-copy p:last-of-type { margin-bottom: 0; }

.about-tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.about-tags li {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 2px solid var(--gold-deep);
  padding-top: 12px;
}

/* Misión y Visión */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mv-col { padding-block: clamp(36px, 5vw, 72px); }
.mv-col--left { padding-right: clamp(0px, 4vw, 56px); }
.mv-col--right { padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid var(--line); }
.mv-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* Promo de Proyecto Amanda (reusa .cta-band / .cta-grid) */
.promo-copy p { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; text-wrap: pretty; margin-bottom: 26px; }

/* Contacto */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.contact-grid h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 24px; }
.contact-grid > div:first-child p { max-width: 40ch; }
.contact-grid .btn { margin-top: 10px; min-height: 52px; padding: 14px 26px; font-size: 15px; }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--shadow-card);
}
.contact-block-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.contact-block-value { font-size: 17px; line-height: 1.5; }

.footer-company { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   4. proyecto-amanda.html — landing del proyecto
   ══════════════════════════════════════════════════════════════════ */

/* "Las casas": la sección tiene fondo --surface (blanco) puesto inline en
   el HTML, y .card por defecto también es --surface — quedaban del mismo
   color y las tarjetas se perdían contra el fondo. Acá sí conviene un
   override scopeado a esta sección en vez de tocar .card global, que en
   otras secciones (ej. Transporte) sigue sobre fondo --bg y ahí sí
   contrasta bien tal cual está. */
#casas .card { background: var(--bg); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat {
  padding: clamp(26px, 3.5vw, 44px) clamp(16px, 2.5vw, 36px);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1;
  color: var(--gold-dark);
}
.stat-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
  display: flex;
  /* flex-start en vez de center: con label de una sola línea no se nota,
     pero si el texto envuelve a 2 líneas (frecuente en mobile) el punto
     queda centrado contra el bloque entero en vez de pegado a la
     primera línea, y flota como suelto. */
  align-items: flex-start;
}
.stat-label::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  background: var(--gold-deep);
  margin-right: 9px;
}
.card .stat-label { margin-top: 0; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }

/* Precio */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }
.price-card {
  background: var(--gold-deep);
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, rgba(255,255,255,0) 2px 15px);
  color: var(--bg);
  padding: clamp(26px, 3.5vw, 44px);
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(82, 59, 9, 0.22);
}
.price-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.price-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.price-main { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5vw, 62px); line-height: 1; }
.price-sub { font-size: 18px; margin-top: 10px; opacity: 0.92; }
.price-hr { height: 1px; background: rgba(255, 255, 255, 0.35); margin: 24px 0; }
.price-note { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.price-comercial { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; }

.finance-block { display: flex; flex-direction: column; gap: 26px; }
.finance-block h3 { font-size: 20px; margin-bottom: 8px; }
.finance-block p { font-size: 16px; color: var(--ink-soft); text-wrap: pretty; }
.finance-block .btn { align-self: flex-start; }

/* Ubicación */
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.location-copy { padding: clamp(40px, 6vw, 84px) clamp(20px, 5vw, 56px); }
.location-h2 { font-size: clamp(28px, 3.6vw, 46px); margin-bottom: 22px; text-wrap: balance; text-align: right; }
.location-list { display: flex; flex-direction: column; gap: 16px; font-size: 16px; }
.location-row {
  display: grid;
  grid-template-columns: 330px 1fr;
  align-self: flex-end;
  gap: 16px;
  align-items: start;

}
.location-row dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
  text-align: right;
}
.location-row dd {
  margin: 0;
  text-align: left;
  width: min(200px, 100%);
  justify-self: end;
}
.location-media {
  position: relative;
  padding: clamp(0px, 2.2vw, 30px);
}
/* El mapa embebido de Ubicación (ver amanda.html + js/proyecto-amanda.js) */
.location-media .media iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Capa transparente que se saca con un clic: mientras está, el scroll
   pasa de largo (scrollea la página, no el mapa); al sacarla, el iframe
   queda libre para arrastrar y moverse. Ver js/proyecto-amanda.js. */
.map-activate {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  background: rgba(20, 16, 10, 0.1);
  cursor: pointer;
}
.map-activate span {
  background: rgba(20, 16, 10, 0.78);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}
.map-zoom {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(82, 59, 9, 0.18);
  transition: background 0.15s ease;
}
.map-zoom button:hover { background: #efe9da; }
.map-zoom button svg { width: 16px; height: 16px; }


/* Transporte */
.transport-copy { max-width: 60ch; margin-top: 12px; }

/* Planos */
.plano-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.plano-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.plano-media { border: 1px solid var(--line-soft); }
.plano-copy h3 { font-size: 22px; margin-bottom: 10px; }
.plano-copy p { font-size: 16px; color: var(--ink-soft); text-wrap: pretty; }
.plano-copy .btn { margin-top: 8px; }

/* Club house */
/* Mismo inset horizontal que .cta-band, para que la imagen quede
   alineada con el banner verde de contacto que sigue debajo. */
.clubhouse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-inline: clamp(16px, 4vw, 24px);
}
.clubhouse-copy { padding: clamp(40px, 6vw, 84px) clamp(20px, 5vw, 56px); }
.clubhouse-copy h2 { font-size: clamp(28px, 3.6vw, 46px); margin-bottom: 18px; text-wrap: balance; }
.clubhouse-copy p { font-size: 16px; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.clubhouse-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  /* Los 4 stats están pensados como una sola fila con divisores
     verticales; al apilarse en 2 columnas el borde izquierdo del tercer
     stat queda como una línea corta y suelta (no hay borde horizontal
     que la acompañe). Mejor una sola columna con divisor horizontal. */
  .stats { grid-template-columns: 1fr; }
  .stat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
  .stat:first-child { border-top: 0; }

  .location-copy,
  .location-h2,
  .location-row,
  .location-row dt,
  .location-row dd {
    text-align: left;
  }
  .location-row dd { justify-self: start; width: auto; }
}

/* index.html — ajustes mobile (van al final para ganar la cascada sobre
   las reglas base de la sección 3, que están definidas más arriba) */
@media (max-width: 640px) {
  /* El logo decorativo de "Quiénes somos" solo tiene sentido junto al
     título en el layout de 2 columnas de escritorio: apilado, corta la
     lectura entre el título y el texto y ya está repetido en el header. */
  .about-logo { display: none; }

  .about-tags { grid-template-columns: 1fr; gap: 14px; }

  /* El borde que separa Misión/Visión en columnas se vuelve una línea
     suelta al apilarse: la cambiamos por un borde superior. */
  .mv-col--right {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: clamp(28px, 6vw, 40px);
  }
  .mv-col--left { padding-right: 0; padding-bottom: 0; }
}