/* ============================================================
   COMPONENTES REUTILIZABLES  (eyebrow · contenedor · botón)
   Patrones que se repiten en varias secciones, unificados aquí.
   ============================================================ */

/* --- Eyebrow: rótulo con rayita ---
   Default: 12px, color acento, rayita de 32px.
   Modificadores para las variantes sobre fondo oscuro y la grande. */
.ak-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ak-text-accent);
}
.ak-eyebrow__rule {
  width: 32px;
  height: 1px;
  background: var(--ak-brass);
}
.ak-eyebrow--honey { color: var(--ak-honey); }        /* hero (sobre oscuro) */
.ak-eyebrow--soft  { color: var(--ak-brass-soft); }   /* proceso (sobre oscuro) */
.ak-eyebrow--lg { font-size: 13px; }                  /* hero: rótulo más grande */
.ak-eyebrow--lg .ak-eyebrow__rule { width: 42px; }

/* El espacio bajo el eyebrow es propio de cada sección */
.ak-hero .ak-eyebrow      { margin-bottom: 32px; }
.ak-pilares .ak-eyebrow   { margin-bottom: 56px; }
.ak-estudio .ak-eyebrow   { margin-bottom: 30px; }
.ak-proyectos .ak-eyebrow { margin-bottom: 26px; }
.ak-proceso .ak-eyebrow   { margin-bottom: 28px; }
.ak-contacto .ak-eyebrow  { margin-bottom: 30px; }

/* --- Contenedor centrado con ancho máximo --- */
.ak-container {
  max-width: var(--ak-container);
  margin: 0 auto;
}

/* --- Botón: tipografía compartida por las llamadas a la acción ---
   Cada variante (--primary, --ghost, --solid…) añade color, fondo,
   padding y borde dentro de su sección. */
.ak-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ============================================================
   HERO  (bloque: ak-hero)
   ============================================================ */
.ak-hero {
  position: relative;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  background: var(--ak-neutral-950);
  overflow: hidden;
}

/* Imagen de fondo */
.ak-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
}

/* Degradados sobre la imagen (scrims) */
.ak-hero__scrim { position: absolute; inset: 0; }
.ak-hero__scrim--horizontal {
  background: linear-gradient(90deg, rgba(20,14,9,.82) 0%, rgba(20,14,9,.5) 45%, rgba(20,14,9,.15) 100%);
}
.ak-hero__scrim--vertical {
  background: linear-gradient(180deg, rgba(20,14,9,.55) 0%, rgba(20,14,9,0) 22%, rgba(20,14,9,0) 60%, rgba(20,14,9,.6) 100%);
}

/* --- Barra de navegación --- */
.ak-hero__nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(20px, 5vw, 56px);
}

.ak-hero__logo { width: 138px; height: auto; }

.ak-hero__nav-links {
  display: flex;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
}

.ak-hero__nav-link {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(252,250,245,.82);
}
.ak-hero__nav-link:hover { color: #fff; }

.ak-hero__nav-cta {
  padding: 12px 26px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--ak-radius-xs);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ak-hero__nav-cta:hover {
  background: var(--ak-neutral-50);
  color: var(--ak-neutral-950);
  border-color: var(--ak-neutral-50);
}

/* --- Contenido principal (abajo a la izquierda) --- */
.ak-hero__content {
  position: relative;
  z-index: 4;
  margin-top: auto;
  padding: 0 clamp(20px, 5vw, 56px) clamp(56px, 10vw, 104px);
  max-width: 1040px;
}

.ak-hero__title {
  font-family: var(--ak-font-display);
  font-weight: 300;
  font-size: clamp(40px, 7.5vw, 88px);
  line-height: .98;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 30px;
}
.ak-hero__title-accent {
  font-style: italic;
  color: var(--ak-honey);
}

.ak-hero__lead {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin: 0 0 42px;
}

.ak-hero__actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.ak-hero__cta--primary {
  padding: 17px 36px;
  background: var(--ak-neutral-50);
  color: var(--ak-neutral-950);
  border-radius: var(--ak-radius-xs);
}
/* color fijo en hover: evita que la regla global `a:hover` lo cambie */
.ak-hero__cta--primary:hover { background: var(--ak-honey); color: var(--ak-neutral-950); }

.ak-hero__cta--ghost {
  padding: 17px 6px;
  color: #fff;
  border-bottom: 1px solid var(--ak-brass);
}
.ak-hero__cta--ghost:hover { color: var(--ak-honey); }

/* --- Responsivo --- */
@media (max-width: 980px) {
  /* En móvil se ocultan los enlaces de texto; queda solo el botón CTA */
  .ak-hero__nav-link { display: none; }
}

/* ============================================================
   PILARES  (bloque: ak-pilares — sección #cocinas)
   ============================================================ */
.ak-pilares {
  background: var(--ak-bg-page);
  padding: clamp(64px, 10vw, 112px) clamp(20px, 5vw, 56px);
}

/* El grid usa gap de 1px sobre un fondo de línea: así las
   separaciones entre celdas quedan como hairlines finas. */
.ak-pilares__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ak-line);
}

.ak-pilares__item {
  background: var(--ak-bg-page);
  padding: 8px 36px;
}
/* Primera y última celda van a ras del borde del contenedor */
.ak-pilares__item:first-child { padding-left: 0; }
.ak-pilares__item:last-child { padding-right: 0; }

.ak-pilares__num {
  font-family: var(--ak-font-display);
  font-size: 30px;
  color: var(--ak-brass-deep);
  margin-bottom: 22px;
}

.ak-pilares__title {
  font-family: var(--ak-font-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

.ak-pilares__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ak-text-secondary);
  margin: 0;
}

/* --- Responsivo --- */
@media (max-width: 980px) {
  .ak-pilares__grid { grid-template-columns: 1fr 1fr; }
  .ak-pilares__grid > .ak-pilares__item { padding: 8px 24px; }
}
@media (max-width: 640px) {
  .ak-pilares__grid { grid-template-columns: 1fr; }
  .ak-pilares__grid > .ak-pilares__item { padding: 8px 0; }
}

/* ============================================================
   ESTUDIO / FILOSOFÍA  (bloque: ak-estudio — sección #estudio)
   ============================================================ */
.ak-estudio {
  background: var(--ak-neutral-100);
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 56px);
}

.ak-estudio__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: center;
}

.ak-estudio__title {
  font-family: var(--ak-font-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 28px;
}

.ak-estudio__text {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ak-text-secondary);
  max-width: 480px;
  margin: 0 0 22px;
}
.ak-estudio__text--last { margin-bottom: 40px; }

.ak-estudio__link {
  padding: 16px 4px;
  color: var(--ak-text-primary);
  border-bottom: 1px solid var(--ak-brass);
}
.ak-estudio__link:hover { color: var(--ak-brass-deep); }

.ak-estudio__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--ak-radius-sm);
  overflow: hidden;
  box-shadow: var(--ak-shadow-lg);
}
.ak-estudio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ak-estudio__caption {
  position: absolute;
  left: 28px;
  bottom: 26px;
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* --- Responsivo --- */
@media (max-width: 980px) {
  .ak-estudio__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   PROYECTOS  (bloque: ak-proyectos — sección #proyectos)
   ============================================================ */
.ak-proyectos {
  background: var(--ak-bg-page);
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 56px);
}

.ak-proyectos__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  gap: 40px;
  flex-wrap: wrap;
}

.ak-proyectos__title {
  font-family: var(--ak-font-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 640px;
}

.ak-proyectos__intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ak-text-secondary);
  max-width: 320px;
  margin: 0;
}

.ak-proyectos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 32px;
}

/* --- Responsivo --- */
@media (max-width: 980px) {
  .ak-proyectos__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ak-proyectos__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Tarjeta de proyecto  (bloque reutilizable: ak-project-card)
   Se repite 6 veces con la misma estructura.
   Nota: el título (h3) no fija color a propósito — hereda el de
   la regla global `a` (brass-deep) y vira a brass en :hover,
   igual que el mockup original.
   ------------------------------------------------------------ */
.ak-project-card {
  display: block;
  background: var(--ak-surface-raised);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius-sm);
  overflow: hidden;
  box-shadow: var(--ak-shadow-xs);
}
.ak-project-card:hover { box-shadow: var(--ak-shadow-md); }

.ak-project-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ak-neutral-200);
}
.ak-project-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ak-project-card__body { padding: 22px 24px 28px; }

.ak-project-card__kicker {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ak-text-accent);
  margin-bottom: 12px;
}

.ak-project-card__title {
  font-family: var(--ak-font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

.ak-project-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ak-text-secondary);
  margin: 0 0 20px;
}

.ak-project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ak-project-card__tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ak-text-secondary);
  border: 1px solid var(--ak-line-strong);
  border-radius: var(--ak-radius-pill);
  padding: 4px 11px;
}

/* ------------------------------------------------------------
   GALERÍA BENTO + LIGHTBOX  (sección #galeria)
   Grilla de imágenes sueltas de tamaños variados; cada una abre
   un lightbox propio (JS en el partial, sin librería).
   ------------------------------------------------------------ */
.ak-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(190px, 25vw, 300px);
  grid-auto-flow: row dense;
  gap: 12px;
}
.ak-bento__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--ak-radius-sm);
  background: var(--ak-neutral-200);
  cursor: pointer;
}

/* Ritmo automático del bento: sin configurar nada, cada tantas fotos hay una
   destacada. :where() deja la especificidad en cero para que un tamaño
   elegido a mano en el panel (reglas de abajo) siempre gane. Pensado y
   verificado para ~18 fotos en 3 columnas; grid-auto-flow: dense rellena. */
.ak-bento__item:where(:nth-child(6n + 1)) { grid-column: span 2; grid-row: span 2; }
.ak-bento__item:where(:nth-child(6n + 4)) { grid-column: span 2; }
.ak-bento__item:where(:nth-child(8n + 6)) { grid-row: span 2; }

/* Override manual: gana por ir después con la misma especificidad. */
.ak-bento__item--normal { grid-column: auto;   grid-row: auto; }
.ak-bento__item--ancho  { grid-column: span 2; grid-row: auto; }
.ak-bento__item--alto   { grid-column: auto;   grid-row: span 2; }
.ak-bento__item--grande { grid-column: span 2; grid-row: span 2; }

.ak-bento__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ak-dur-fast) var(--ak-ease);
}
.ak-bento__item:hover .ak-bento__img { transform: scale(1.045); }
.ak-bento__item:focus-visible { outline: 2px solid var(--ak-brass); outline-offset: 3px; }

@media (max-width: 900px) {
  .ak-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ak-bento { grid-template-columns: 1fr; }
}

/* --- Lightbox --- */
.ak-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 3vw, 28px);
  padding: clamp(16px, 4vw, 48px);
  background: rgba(11, 9, 7, .93);
}
.ak-lightbox[hidden] { display: none; }

.ak-lightbox__stage {
  margin: 0;
  max-width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ak-lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--ak-radius-sm);
  box-shadow: var(--ak-shadow-lg);
}
.ak-lightbox__caption {
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, .8);
}
.ak-lightbox__caption[hidden] { display: none; }

.ak-lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.ak-lightbox__close:hover { color: var(--ak-honey); }

.ak-lightbox__nav {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ak-dur-fast) var(--ak-ease), border-color var(--ak-dur-fast) var(--ak-ease);
}
.ak-lightbox__nav:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.ak-lightbox__close:focus-visible,
.ak-lightbox__nav:focus-visible { outline: 2px solid var(--ak-honey); outline-offset: 2px; }

@media (max-width: 560px) {
  .ak-lightbox__nav { width: 44px; height: 44px; font-size: 24px; }
}

/* ------------------------------------------------------------
   SECCIÓN SOBRE FOTO  (modificador reutilizable: ak-photo-bg)
   Se aplica junto a la clase de la sección. La foto va a sangre
   reusando ak-hero__bg, con overlay plano (--ak-neutral-950) y el
   texto en los mismos claros del hero. Lo usan #responsable e
   #incluye. Sin tokens de marca nuevos.
   ------------------------------------------------------------ */
.ak-photo-bg { position: relative; overflow: hidden; }
.ak-photo-bg > .ak-container { position: relative; z-index: 2; }
.ak-photo-bg .ak-hero__bg { opacity: 1; }
.ak-photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ak-neutral-950);
  opacity: .72; /* contraste ajustable */
}

/* Texto claro sobre la foto — mismos valores que el hero */
.ak-photo-bg .ak-proyectos__title,
.ak-photo-bg .ak-incluye__title,
.ak-photo-bg .ak-pilares__title { color: #fff; }
.ak-photo-bg .ak-estudio__text,
.ak-photo-bg .ak-pilares__text,
.ak-photo-bg .ak-incluye__lead,
.ak-photo-bg .ak-incluye__item,
.ak-photo-bg .ak-incluye__cierre { color: rgba(255, 255, 255, .82); }
/* El check y la línea del cierre, legibles sobre oscuro */
.ak-photo-bg .ak-incluye__item::before { color: var(--ak-honey); }
.ak-photo-bg .ak-incluye__cierre { border-top-color: rgba(255, 255, 255, .22); }

/* --- Responsable: contenido recogido en un panel a la derecha.
   Se sueltan los topes de medida para que ocupen el panel completo;
   si no, el texto queda envuelto a 480px y la sección se alarga. --- */
.ak-photo-bg__panel { width: 60%; margin-left: auto; }
.ak-photo-bg__panel .ak-proyectos__title,
.ak-photo-bg__panel .ak-estudio__text { max-width: none; }
@media (max-width: 980px) {
  .ak-photo-bg__panel { width: 100%; }
}

/* Los 3 puntos de Responsable, en una fila. Se sobrescribe el sizing
   porque el minmax(260px) original se desborda dentro del panel. */
#responsable .ak-proyectos__grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
}
@media (max-width: 640px) {
  #responsable .ak-proyectos__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PROCESO  (bloque: ak-proceso — sección #proceso, sobre oscuro)
   ============================================================ */
.ak-proceso {
  background: var(--ak-neutral-950);
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}

/* Brillo cálido radial detrás del contenido */
.ak-proceso__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 85% 10%, rgba(176, 141, 87, .14), transparent 60%);
}

.ak-proceso__inner {
  position: relative;
}

.ak-proceso__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.ak-proceso__title {
  font-family: var(--ak-font-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ak-neutral-50);
  margin: 0;
  max-width: 640px;
}

.ak-proceso__cta {
  padding: 16px 34px;
  background: var(--ak-neutral-50);
  color: var(--ak-neutral-950);
  border-radius: var(--ak-radius-xs);
  white-space: nowrap;
}
.ak-proceso__cta:hover { background: var(--ak-honey); color: var(--ak-neutral-950); }

.ak-proceso__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ak-line-on-dark);
}

.ak-proceso__step {
  padding: 34px 30px;
  border-right: 1px solid var(--ak-line-on-dark);
}
/* Primera y última columna van a ras del borde (sin línea sobrante) */
.ak-proceso__step:first-child { padding-left: 0; padding-bottom: 0; }
.ak-proceso__step:last-child {
  padding-right: 0;
  padding-bottom: 0;
  border-right: none;
}

.ak-proceso__num {
  font-family: var(--ak-font-display);
  font-size: 26px;
  color: var(--ak-honey);
  margin-bottom: 20px;
}

.ak-proceso__step-title {
  font-family: var(--ak-font-display);
  font-weight: 500;
  font-size: 23px;
  color: var(--ak-neutral-50);
  margin: 0 0 12px;
}

.ak-proceso__step-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ak-text-on-dark-mut);
  margin: 0;
}

/* --- Responsivo ---
   En 2 columnas solo debe quedar un divisor central por fila.
   Sin este ajuste, el borde derecho del 2.º paso quedaría suelto
   contra el borde exterior (así se veía en el mockup original). */
@media (max-width: 980px) {
  .ak-proceso__grid { grid-template-columns: 1fr 1fr; }
  .ak-proceso__grid > .ak-proceso__step { padding-top: 34px; padding-bottom: 34px; }
  /* Columna izquierda: pegada al borde, divisor a la derecha */
  .ak-proceso__grid > .ak-proceso__step:nth-child(2n+1) { padding-left: 0; padding-right: 30px; }
  /* Columna derecha: pegada al borde exterior, sin borde sobrante */
  .ak-proceso__grid > .ak-proceso__step:nth-child(2n) { padding-left: 30px; padding-right: 0; border-right: none; }
}
/* En 1 columna no hay divisores verticales */
@media (max-width: 640px) {
  .ak-proceso__grid { grid-template-columns: 1fr; }
  .ak-proceso__grid > .ak-proceso__step,
  .ak-proceso__grid > .ak-proceso__step:nth-child(2n),
  .ak-proceso__grid > .ak-proceso__step:nth-child(2n+1) {
    border-right: none;
    padding: 28px 0;
  }
}

/* ============================================================
   CONTACTO  (bloque: ak-contacto — sección #contacto)
   ============================================================ */
.ak-contacto {
  background: var(--ak-neutral-100);
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 56px);
}

.ak-contacto__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 88px;
  align-items: start;
}

.ak-contacto__title {
  font-family: var(--ak-font-display);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 58px);
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 0 0 26px;
}

.ak-contacto__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ak-text-secondary);
  max-width: 440px;
  margin: 0 0 48px;
}

/* --- Formulario --- */
.ak-contacto__form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 460px;
}

.ak-contacto__field { display: block; }

.ak-contacto__field-label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ak-text-muted);
  margin-bottom: 8px;
}

.ak-contacto__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ak-line-strong);
  background: transparent;
  padding: 10px 0;
  font-family: var(--ak-font-sans);
  font-size: 16px;
  color: var(--ak-text-primary);
  outline: none;
}
/* Antes en data-focus: la línea inferior se vuelve brass al enfocar */
.ak-contacto__input:focus { border-bottom-color: var(--ak-brass); }
.ak-contacto__input--area { resize: vertical; }

.ak-contacto__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Botones de la sección: variantes sobre la base .ak-btn */
.ak-contacto__cta--solid {
  padding: 16px 34px;
  background: var(--ak-neutral-950);
  color: var(--ak-neutral-50);
  border-radius: var(--ak-radius-xs);
}
/* color fijo en hover: evita que la regla global `a:hover` lo cambie */
.ak-contacto__cta--solid:hover { background: var(--ak-walnut-deep); color: var(--ak-neutral-50); }

.ak-contacto__cta--ghost {
  padding: 16px 6px;
  color: var(--ak-text-primary);
  border-bottom: 1px solid var(--ak-brass);
}
.ak-contacto__cta--ghost:hover { color: var(--ak-brass-deep); }

/* --- Panel lateral de datos --- */
.ak-contacto__aside {
  border-left: 1px solid var(--ak-line);
  padding-left: 56px;
}

.ak-contacto__block { margin-bottom: 44px; }

.ak-contacto__block-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ak-text-muted);
  margin-bottom: 12px;
}
.ak-contacto__block-label--accent { color: var(--ak-text-accent); }

.ak-contacto__phone {
  font-family: var(--ak-font-display);
  font-size: 26px;
  color: var(--ak-text-primary);
}

.ak-contacto__block-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ak-text-secondary);
}

.ak-contacto__socials {
  display: flex;
  gap: 20px;
}
.ak-contacto__social {
  font-size: 15px;
  color: var(--ak-text-primary);
  border-bottom: 1px solid var(--ak-line-strong);
}
.ak-contacto__social:hover {
  color: var(--ak-brass-deep);
  border-bottom-color: var(--ak-brass);
}

/* Bloque de garantía: sin margen inferior, separado por línea superior */
.ak-contacto__block--guarantee {
  margin-bottom: 0;
  border-top: 1px solid var(--ak-line);
  padding-top: 28px;
}
.ak-contacto__guarantee-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ak-text-secondary);
  margin: 0;
}

/* --- Responsivo --- */
@media (max-width: 980px) {
  .ak-contacto__grid { grid-template-columns: 1fr; gap: 48px; }
  .ak-contacto__aside { border-left: none; padding-left: 0; }
}

/* ============================================================
   FOOTER  (bloque: ak-footer — sobre oscuro; refluye con flex-wrap)
   ============================================================ */
.ak-footer {
  background: var(--ak-neutral-950);
  padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 56px) 44px;
}

.ak-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ak-line-on-dark);
}

.ak-footer__brand { max-width: 320px; }

.ak-footer__logo {
  width: 150px;
  height: auto;
  margin-bottom: 22px;
}

.ak-footer__tagline {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ak-text-on-dark-mut);
  margin: 0 0 14px;
}

.ak-footer__address {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ak-text-on-dark-mut);
  margin: 0;
}

.ak-footer__cols {
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}

.ak-footer__col-title {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ak-brass-soft);
  margin-bottom: 18px;
}

.ak-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ak-footer__link {
  font-size: 14px;
  color: rgba(236, 228, 214, .72);
}
.ak-footer__link:hover { color: #fff; }

.ak-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
}

.ak-footer__copy {
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(236, 228, 214, .5);
}

.ak-footer__meta {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(236, 228, 214, .4);
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP  (bloque: ak-whatsapp)
   ============================================================ */
.ak-whatsapp {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  background: var(--ak-neutral-950);
  color: var(--ak-neutral-50);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: var(--ak-radius-pill);
  box-shadow: var(--ak-shadow-lg);
}
/* color fijo en hover: evita que la regla global `a:hover` lo cambie */
.ak-whatsapp:hover { background: var(--ak-walnut-deep); color: var(--ak-neutral-50); }

.ak-whatsapp__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ak-honey);
}

/* ============================================================
   INCLUYE  (bloque: ak-incluye — sección #incluye, §2)
   ============================================================ */
.ak-incluye {
  background: var(--ak-bg-page);
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 56px);
}

.ak-incluye__title {
  font-family: var(--ak-font-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ak-text-primary);
  margin: 22px 0 20px;
  max-width: 720px;
}

.ak-incluye__lead {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ak-text-secondary);
  max-width: 620px;
  margin: 0 0 44px;
}

.ak-incluye__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 48px;
  max-width: 900px;
}

.ak-incluye__item {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ak-text-primary);
}
.ak-incluye__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ak-brass);
  font-weight: var(--ak-w-bold);
}

.ak-incluye__cierre {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ak-text-secondary);
  max-width: 620px;
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--ak-line);
}

@media (max-width: 640px) {
  .ak-incluye__list { grid-template-columns: 1fr; }
}

/* Grupos lado a lado: la grilla de grupos reparte el ancho (se reusa
   ak-proyectos__grid) y la lista de cada grupo va a una sola columna. */
#incluye .ak-proyectos__grid .ak-incluye__list {
  grid-template-columns: 1fr;
  max-width: none;
}

/* ============================================================
   FAQ  (bloque: ak-faq — sección #faq, §8)
   ============================================================ */
.ak-faq {
  background: var(--ak-bg-page);
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 56px);
}
/* Bloque centrado: el rótulo al medio y la lista en una columna centrada.
   Las preguntas quedan alineadas a la izquierda, que es lo legible. */
.ak-faq .ak-eyebrow { justify-content: center; margin-bottom: 40px; }

.ak-faq__list {
  max-width: 760px;
  margin: 0 auto;
}

.ak-faq__item {
  border-top: 1px solid var(--ak-line);
}
.ak-faq__item:last-child {
  border-bottom: 1px solid var(--ak-line);
}

/* La pregunta es el <summary>: hace de botón del acordeón.
   Se oculta el marcador nativo y se usa +/− a la derecha. */
.ak-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ak-font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ak-text-primary);
  transition: color var(--ak-dur-fast) var(--ak-ease);
}
.ak-faq__q::-webkit-details-marker { display: none; }
.ak-faq__q:hover { color: var(--ak-brass-deep); }
.ak-faq__q:focus-visible { outline: 2px solid var(--ak-brass); outline-offset: 4px; }

.ak-faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--ak-font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  color: var(--ak-brass);
}
.ak-faq__item[open] .ak-faq__q::after { content: "−"; }

.ak-faq__a {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ak-text-secondary);
  margin: 0;
  padding-bottom: 28px;
}

/* Nota bajo los botones del hero */
.ak-hero__note {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ak-text-on-dark-mut);
}

/* ============================================================
   FORMULARIO CALIFICADOR (§7) — bloque ak-form
   ============================================================ */
.ak-form-head { max-width: 620px; margin-bottom: 40px; }

/* Cuatro columnas: los datos de contacto + comuna entran en una fila y los
   grupos de opciones ocupan el ancho completo. */
.ak-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
  max-width: 980px;
}
.ak-form__field { grid-column: 1 / -1; }
.ak-form__field--col { grid-column: span 1; }

.ak-form__label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ak-text-muted);
  margin-bottom: 12px;
}

.ak-form__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ak-line-strong);
  background: transparent;
  padding: 10px 0;
  font-family: var(--ak-font-sans);
  font-size: 16px;
  color: var(--ak-text-primary);
  outline: none;
}
.ak-form__input:focus { border-bottom-color: var(--ak-brass); }
.ak-form__input--area { min-height: 92px; line-height: 1.6; resize: vertical; }

.ak-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.ak-choice { position: relative; }
.ak-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.ak-choice span {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--ak-line-strong);
  border-radius: var(--ak-radius-pill);
  font-size: 14px;
  color: var(--ak-text-secondary);
  cursor: pointer;
  transition: color var(--ak-dur-fast) var(--ak-ease), border-color var(--ak-dur-fast) var(--ak-ease), background var(--ak-dur-fast) var(--ak-ease);
}
.ak-choice span:hover { border-color: var(--ak-brass); color: var(--ak-text-primary); }
.ak-choice input:checked + span {
  background: var(--ak-neutral-950);
  color: var(--ak-neutral-50);
  border-color: var(--ak-neutral-950);
}
.ak-choice input:focus-visible + span { outline: 2px solid var(--ak-brass); outline-offset: 2px; }

.ak-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ak-form__submit {
  padding: 16px 34px;
  background: var(--ak-neutral-950);
  color: var(--ak-neutral-50);
  border: none;
  border-radius: var(--ak-radius-xs);
  cursor: pointer;
}
.ak-form__submit:hover { background: var(--ak-walnut-deep); color: var(--ak-neutral-50); }
.ak-form__nota { font-size: 13px; color: var(--ak-text-muted); margin: 0; }

/* Pantallas medianas: los campos de contacto pasan a dos por fila. */
@media (max-width: 980px) {
  .ak-form__field--col { grid-column: span 2; }
}
@media (max-width: 640px) {
  .ak-form { grid-template-columns: 1fr; }
  .ak-form__field--col { grid-column: 1 / -1; }
}

/* Honeypot anti-spam: oculto para personas, presente para bots */
.ak-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}