/* MP360 · Jacarandá — CTA (componente único)
 *
 * Fuente literal: el botón aprobado de la entrada ("Comenzar experiencia" /
 * "Ingresar al barrio"), que a su vez es el port de
 *   WEB1-CGMWTAUGUST2025-LISTO/terrene/src/components/AnimatedButton/
 *
 * Antes esta definición estaba duplicada en mp360-intro.css y en
 * mp360-navbar.css. Ahora vive acá una sola vez y la usan todos los CTA.
 * Cada anfitrión sólo aporta color, texto, ícono y acción.
 *
 * ANFITRIONES REGISTRADOS: #mp360-intro, #mp360-nav, .mp360-backhome,
 * .mp360-lot__footer (ficha de lote).
 * Un CTA nuevo tiene que sumar su scope a estos selectores; si no, hereda
 * cero estilos del componente y aparece como una caja sin forma.
 *
 * Geometría del bloque del ícono: es un RECTÁNGULO REDONDEADO, no un círculo.
 * En reposo usa el radio anidado del Design System y al expandirse en hover
 * llega al borde del control con el radio exterior. Nunca hay píldora ni óvalo.
 */

#mp360-intro .btn,
#mp360-nav .btn,
.mp360-backhome .btn,
.mp360-lot__footer .btn,
.mp360-cuota__pie .btn {
  /* Geometría del control en un solo lugar: el bloque del ícono y su glifo
     derivan de estos tres valores. */
  --btn-pad: 0.15rem;
  --btn-circle: 3rem;
  --btn-icon: 1.5rem;
  --btn-gap: 1.25rem;      /* aire a cada lado del rótulo */
  /* Compensación óptica del bloque del ícono. Un bloque CLARO sobre superficie
     de color se percibe mayor que uno oscuro sobre superficie clara, aunque
     midan lo mismo (irradiación). Las variantes de bloque claro lo achican
     ~1px por lado para que los tres CTA se lean del mismo tamaño.
     La caja del control no cambia: su alto sale de --btn-circle, no del bloque. */
  --btn-block-inset: 0px;

  position: relative;
  /* La referencia fija un ancho (12rem) porque su rótulo va en posición
     absoluta y no aporta ancho. Acá el rótulo participa del flujo, así que
     el control mide según su propio texto: no hay anchos mágicos ni espacio
     muerto a la derecha. */
  display: inline-flex;
  align-items: center;
  height: calc(var(--btn-circle) + var(--btn-pad) * 2);
  padding: var(--btn-pad);
  padding-right: var(--btn-gap);
  /* el contenedor recorta la capa animada contra su propia esquina */
  overflow: hidden;
  outline: none;
  border: none;
  /* DESIGN.md §5: escala 12/14/16/20/24/32/40. 0.9rem = 14.4px no está en ella. */
  font-size: 0.875rem;
  border-radius: var(--radius-control);
  cursor: pointer;
  transform: scale(0);
}

/* Bloque del ícono. Rectángulo redondeado con el radio anidado del Design
   System (--radius-control menos el aire del padding, con el mínimo del
   sistema). En hover crece a lo ancho DENTRO del padding: como en el
   componente original, queda un anillo fino y uniforme de la superficie del
   botón alrededor de la capa. El radio no cambia: la forma es la misma en
   todo el recorrido. */
#mp360-intro .btn .circle,
#mp360-nav .btn .circle,
.mp360-backhome .btn .circle,
.mp360-lot__footer .btn .circle,
.mp360-cuota__pie .btn .circle {
  position: absolute;
  top: calc(var(--btn-pad) + var(--btn-block-inset));
  left: calc(var(--btn-pad) + var(--btn-block-inset));
  display: block;
  margin: 0;
  width: calc(var(--btn-circle) - var(--btn-block-inset) * 2);
  height: calc(var(--btn-circle) - var(--btn-block-inset) * 2);
  border-radius: var(--radius-control-inner);
  font-size: 1.5rem;
  transform: scale(0);
  overflow: hidden;
  transition: width 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

/* La referencia fijaba top: 0.775rem / left: 0.95rem a mano y eso dejaba el
   glifo 2 px arriba y 0.8 px a la derecha del centro. Se calcula: borde del
   control + la mitad del aire que sobra dentro del bloque. */
#mp360-intro .btn .icon,
#mp360-nav .btn .icon,
.mp360-backhome .btn .icon,
.mp360-lot__footer .btn .icon,
.mp360-cuota__pie .btn .icon {
  position: absolute;
  top: calc(var(--btn-pad) + (var(--btn-circle) - var(--btn-icon)) / 2);
  left: calc(var(--btn-pad) + (var(--btn-circle) - var(--btn-icon)) / 2);
  width: var(--btn-icon);
  height: var(--btn-icon);
  font-size: var(--btn-icon);
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.65, 0, 0.076, 1);
  will-change: transform;
}

/* No se fuerza `fill` acá: cada SVG declara el suyo. El de Nucleo `arrow-right`
   es outline (`stroke="currentColor"`, `fill="none"`) y el de WhatsApp es glyph
   con `fill="currentColor"`. Ambos heredan el `color` del bloque. */
#mp360-intro .btn .icon svg,
#mp360-nav .btn .icon svg,
.mp360-backhome .btn .icon svg,
.mp360-lot__footer .btn .icon svg,
.mp360-cuota__pie .btn .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* En flujo y por encima de la capa animada. El margen izquierdo lo aparta del
   bloque del ícono; el padding derecho del control cierra el aire simétrico. */
#mp360-intro .btn .button-text,
#mp360-nav .btn .button-text,
.mp360-backhome .btn .button-text,
.mp360-lot__footer .btn .button-text,
.mp360-cuota__pie .btn .button-text {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0 0 0 calc(var(--btn-circle) + var(--btn-gap));
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

/* --------------------------------------------------------------------------
   Rótulo con máscara en hover

   Misma animación que los ítems del menú (mp360-navbar.css): el texto sube un
   renglón y una copia idéntica entra desde abajo, con el easing del componente.

   Sólo el navbar y "Volver a lotes". El CTA de la entrada queda fuera a
   propósito: ese componente está aprobado tal como está.

   La altura de la máscara sale de medir el renglón real, no de copiarla: con
   1em y con 1.15em el recorte cortaba la tilde de "Proyectá" arriba y la cola
   de la "y" abajo. A 14px el renglón de Manrope mide 19px, o sea 1.36em; se
   usa 1.4em para no quedar al filo. El botón tiene alto fijo y centra por
   flex, así que un rótulo más alto no mueve nada.
   -------------------------------------------------------------------------- */

#mp360-nav .btn .btn-swap,
.mp360-backhome .btn .btn-swap,
.mp360-lot__footer .btn .btn-swap,
.mp360-cuota__pie .btn .btn-swap {
  position: relative;
  display: block;
  overflow: hidden;          /* la máscara: el rótulo no sale de su renglón */
  height: 1.4em;
  line-height: 1.4;
}

#mp360-nav .btn .btn-swap__layer,
.mp360-backhome .btn .btn-swap__layer,
.mp360-lot__footer .btn .btn-swap__layer,
.mp360-cuota__pie .btn .btn-swap__layer {
  display: block;
  line-height: 1.4;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

/* la copia espera exactamente un renglón por debajo */
#mp360-nav .btn .btn-swap__layer--in,
.mp360-backhome .btn .btn-swap__layer--in,
.mp360-lot__footer .btn .btn-swap__layer--in,
.mp360-cuota__pie .btn .btn-swap__layer--in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
}

#mp360-nav .btn:focus-visible .btn-swap__layer--out,
.mp360-backhome .btn:focus-visible .btn-swap__layer--out,
.mp360-lot__footer .btn:focus-visible .btn-swap__layer--out,
.mp360-cuota__pie .btn:focus-visible .btn-swap__layer--out {
  transform: translateY(-100%);
}

@media (hover: hover) and (pointer: fine) {
  #mp360-nav .btn:hover .btn-swap__layer--out,
  .mp360-backhome .btn:hover .btn-swap__layer--out,
  .mp360-lot__footer .btn:hover .btn-swap__layer--out,
  .mp360-cuota__pie .btn:hover .btn-swap__layer--out {
    transform: translateY(-100%);
  }
}

#mp360-nav .btn:focus-visible .btn-swap__layer--in,
.mp360-backhome .btn:focus-visible .btn-swap__layer--in,
.mp360-lot__footer .btn:focus-visible .btn-swap__layer--in,
.mp360-cuota__pie .btn:focus-visible .btn-swap__layer--in {
  transform: translateY(0%);
}

@media (hover: hover) and (pointer: fine) {
  #mp360-nav .btn:hover .btn-swap__layer--in,
  .mp360-backhome .btn:hover .btn-swap__layer--in,
  .mp360-lot__footer .btn:hover .btn-swap__layer--in,
  .mp360-cuota__pie .btn:hover .btn-swap__layer--in {
    transform: translateY(0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mp360-nav .btn .btn-swap__layer,
  .mp360-backhome .btn .btn-swap__layer,
  .mp360-lot__footer .btn .btn-swap__layer { transition: none !important; }
}

#mp360-intro .btn .line,
#mp360-nav .btn .line,
.mp360-backhome .btn .line,
.mp360-lot__footer .btn .line,
.mp360-cuota__pie .btn .line {
  position: relative;
  transform: translateY(100%);
  will-change: transform;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

#mp360-intro .btn:focus-visible .circle,
#mp360-nav .btn:focus-visible .circle,
.mp360-backhome .btn:focus-visible .circle,
.mp360-lot__footer .btn:focus-visible .circle,
.mp360-cuota__pie .btn:focus-visible .circle {
  /* ancho del área de contenido: deja el anillo del padding a la vista, igual
     que el componente fuente. No llega al borde exterior del control. */
  width: calc(100% - (var(--btn-pad) + var(--btn-block-inset)) * 2);
}

@media (hover: hover) and (pointer: fine) {
  #mp360-intro .btn:hover .circle,
  #mp360-nav .btn:hover .circle,
  .mp360-backhome .btn:hover .circle,
  .mp360-lot__footer .btn:hover .circle,
  .mp360-cuota__pie .btn:hover .circle {
    /* ancho del área de contenido: deja el anillo del padding a la vista, igual
       que el componente fuente. No llega al borde exterior del control. */
    width: calc(100% - (var(--btn-pad) + var(--btn-block-inset)) * 2);
  }
}

#mp360-intro .btn:focus-visible .icon,
#mp360-nav .btn:focus-visible .icon,
.mp360-backhome .btn:focus-visible .icon,
.mp360-lot__footer .btn:focus-visible .icon,
.mp360-cuota__pie .btn:focus-visible .icon {
  transform: translate(0.75rem);
}

@media (hover: hover) and (pointer: fine) {
  #mp360-intro .btn:hover .icon,
  #mp360-nav .btn:hover .icon,
  .mp360-backhome .btn:hover .icon,
  .mp360-lot__footer .btn:hover .icon,
  .mp360-cuota__pie .btn:hover .icon {
    transform: translate(0.75rem);
  }
}

/* --------------------------------------------------------------------------
   Hover acotado a punteros que hacen hover

   En tactil el `:hover` queda PEGADO despues de tocar: el control tocado se
   queda con su estado de hover hasta que se toca otra cosa. En
   `btn--primary-solid` eso deja la capa blanca expandida sobre todo el control
   y el rotulo en violeta, o sea el boton se ve como si siguiera presionado.
   Se veia en `Continuar` del proyector y afectaba a cualquier CTA.

   `:focus-visible` queda FUERA de la guarda: ese estado tiene que existir en
   todos los punteros, porque es el del teclado.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Variantes del componente

   Viven acá, no en cada anfitrión: la forma, el color, el radio, el ícono, la
   expansión y el motion pertenecen al componente. Un anfitrión sólo decide
   dónde va el botón y cuánto ancho ocupa.
   ========================================================================== */

/* --- primaria: superficie blanca, bloque violeta adentro ---
   Es la referencia visual del proyecto ("Proyectá tu cuota"). En reposo el
   bloque violeta queda a la izquierda con el glifo blanco y el rótulo en
   violeta; en hover el bloque se expande a lo ancho y el rótulo pasa a blanco.
   El glifo no cambia: ya era blanco. */
#mp360-intro .btn--primary,
#mp360-nav .btn--primary,
.mp360-backhome .btn--primary,
.mp360-lot__footer .btn--primary,
.mp360-cuota__pie .btn--primary,
.mp360-cuota__pie .btn--primary { background: var(--white); }

#mp360-intro .btn--primary .circle,
#mp360-nav .btn--primary .circle,
.mp360-backhome .btn--primary .circle,
.mp360-lot__footer .btn--primary .circle,
.mp360-cuota__pie .btn--primary .circle,
.mp360-cuota__pie .btn--primary .circle { background: var(--primary-700); }

#mp360-intro .btn--primary .icon,
#mp360-nav .btn--primary .icon,
.mp360-backhome .btn--primary .icon,
.mp360-lot__footer .btn--primary .icon,
.mp360-cuota__pie .btn--primary .icon,
.mp360-cuota__pie .btn--primary .icon { color: var(--white); }

#mp360-intro .btn--primary .button-text,
#mp360-nav .btn--primary .button-text,
.mp360-backhome .btn--primary .button-text,
.mp360-lot__footer .btn--primary .button-text,
.mp360-cuota__pie .btn--primary .button-text,
.mp360-cuota__pie .btn--primary .button-text { color: var(--primary-700); }

#mp360-intro .btn--primary:focus-visible .button-text,
#mp360-nav .btn--primary:focus-visible .button-text,
.mp360-backhome .btn--primary:focus-visible .button-text,
.mp360-lot__footer .btn--primary:focus-visible .button-text,
.mp360-cuota__pie .btn--primary:focus-visible .button-text,
.mp360-cuota__pie .btn--primary:focus-visible .button-text { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  #mp360-intro .btn--primary:hover .button-text,
  #mp360-nav .btn--primary:hover .button-text,
  .mp360-backhome .btn--primary:hover .button-text,
  .mp360-lot__footer .btn--primary:hover .button-text,
  .mp360-cuota__pie .btn--primary:hover .button-text { color: var(--white); }
}

/* --- primaria invertida: superficie violeta, bloque claro adentro ---
   Para superficies claras, donde la primaria de fondo blanco desaparecería.
   Es la misma inversión que ya usa la secundaria de la barra —superficie de
   color, bloque blanco, glifo del color de la superficie—, con el violeta
   primario. En hover el bloque blanco se expande y cubre el control, así que
   el rótulo pasa a violeta; el glifo ya era violeta y no cambia. */
#mp360-intro .btn--primary-solid,
#mp360-nav .btn--primary-solid,
.mp360-backhome .btn--primary-solid,
.mp360-lot__footer .btn--primary-solid,
.mp360-cuota__pie .btn--primary-solid {
  background: var(--primary-700);
  --btn-block-inset: 1px;      /* compensación óptica: el bloque es el claro */
}

#mp360-intro .btn--primary-solid .circle,
#mp360-nav .btn--primary-solid .circle,
.mp360-backhome .btn--primary-solid .circle,
.mp360-lot__footer .btn--primary-solid .circle,
.mp360-cuota__pie .btn--primary-solid .circle,
.mp360-cuota__pie .btn--primary-solid .circle { background: var(--white); }

#mp360-intro .btn--primary-solid .icon,
#mp360-nav .btn--primary-solid .icon,
.mp360-backhome .btn--primary-solid .icon,
.mp360-lot__footer .btn--primary-solid .icon,
.mp360-cuota__pie .btn--primary-solid .icon,
.mp360-cuota__pie .btn--primary-solid .icon { color: var(--primary-700); }

#mp360-intro .btn--primary-solid .button-text,
#mp360-nav .btn--primary-solid .button-text,
.mp360-backhome .btn--primary-solid .button-text,
.mp360-lot__footer .btn--primary-solid .button-text,
.mp360-cuota__pie .btn--primary-solid .button-text,
.mp360-cuota__pie .btn--primary-solid .button-text { color: var(--white); }

#mp360-intro .btn--primary-solid:focus-visible .button-text,
#mp360-nav .btn--primary-solid:focus-visible .button-text,
.mp360-backhome .btn--primary-solid:focus-visible .button-text,
.mp360-lot__footer .btn--primary-solid:focus-visible .button-text,
.mp360-cuota__pie .btn--primary-solid:focus-visible .button-text,
.mp360-cuota__pie .btn--primary-solid:focus-visible .button-text { color: var(--primary-700); }

@media (hover: hover) and (pointer: fine) {
  #mp360-intro .btn--primary-solid:hover .button-text,
  #mp360-nav .btn--primary-solid:hover .button-text,
  .mp360-backhome .btn--primary-solid:hover .button-text,
  .mp360-lot__footer .btn--primary-solid:hover .button-text,
  .mp360-cuota__pie .btn--primary-solid:hover .button-text { color: var(--primary-700); }
}

/* --- secundaria: color secundario exacto del Design System ---
   Superficie --secondary-600 y bloque del ícono en blanco, con el glifo en el
   propio secundario. Es la misma inversión que usa `btn--primary-solid`:
   bloque claro sobre superficie de color.
   Contraste del glifo #A16455 sobre blanco: 4.70:1, por encima del 3:1 que
   DESIGN.md §6 pide para elementos gráficos.

   Vivía en mp360-navbar.css, acotada a `#mp360-nav`. Se mudó acá porque la
   usan ahora la barra y el pie del proyector, y porque el color, la forma y
   el motion de una variante pertenecen al componente, no a un anfitrión. */
#mp360-intro .btn--secondary,
#mp360-nav .btn--secondary,
.mp360-backhome .btn--secondary,
.mp360-lot__footer .btn--secondary,
.mp360-cuota__pie .btn--secondary {
  background: var(--secondary-600);
  --btn-block-inset: 1px;      /* compensación óptica: bloque claro */
}

#mp360-intro .btn--secondary .circle,
#mp360-nav .btn--secondary .circle,
.mp360-backhome .btn--secondary .circle,
.mp360-lot__footer .btn--secondary .circle,
.mp360-cuota__pie .btn--secondary .circle { background: var(--white); }

#mp360-intro .btn--secondary .icon,
#mp360-nav .btn--secondary .icon,
.mp360-backhome .btn--secondary .icon,
.mp360-lot__footer .btn--secondary .icon,
.mp360-cuota__pie .btn--secondary .icon { color: var(--secondary-600); }

#mp360-intro .btn--secondary .button-text,
#mp360-nav .btn--secondary .button-text,
.mp360-backhome .btn--secondary .button-text,
.mp360-lot__footer .btn--secondary .button-text,
.mp360-cuota__pie .btn--secondary .button-text { color: var(--white); }

/* en hover la capa blanca cubre el control: el rótulo pasa al secundario */
#mp360-intro .btn--secondary:focus-visible .button-text,
#mp360-nav .btn--secondary:focus-visible .button-text,
.mp360-backhome .btn--secondary:focus-visible .button-text,
.mp360-lot__footer .btn--secondary:focus-visible .button-text,
.mp360-cuota__pie .btn--secondary:focus-visible .button-text { color: var(--secondary-600); }

@media (hover: hover) and (pointer: fine) {
  #mp360-intro .btn--secondary:hover .button-text,
  #mp360-nav .btn--secondary:hover .button-text,
  .mp360-backhome .btn--secondary:hover .button-text,
  .mp360-lot__footer .btn--secondary:hover .button-text,
  .mp360-cuota__pie .btn--secondary:hover .button-text { color: var(--secondary-600); }
}

/* El contorno de foco del componente es blanco y esta variante expande un
   bloque blanco: pasa al secundario, que sí contrasta. Mismo criterio y
   mismo motivo que `btn--primary-solid`. */
#mp360-intro .btn--secondary:focus-visible,
#mp360-nav .btn--secondary:focus-visible,
.mp360-backhome .btn--secondary:focus-visible,
.mp360-lot__footer .btn--secondary:focus-visible,
.mp360-cuota__pie .btn--secondary:focus-visible { outline-color: var(--secondary-700); }

/* --- de ancho completo ---
   El botón toma todo el ancho del contenedor. El rótulo deja de colgar del
   bloque del ícono y se centra sobre el ancho TOTAL del control: se posiciona
   absoluto de borde a borde, así el bloque de la izquierda no le corre el eje.
   No se agrega ningún elemento a la derecha para compensar. */
#mp360-intro .btn--block,
#mp360-nav .btn--block,
.mp360-backhome .btn--block,
.mp360-lot__footer .btn--block,
.mp360-cuota__pie .btn--block {
  width: 100%;
  padding-right: var(--btn-pad);   /* ya no hay rótulo en flujo que cerrar */
}

#mp360-intro .btn--block .button-text,
#mp360-nav .btn--block .button-text,
.mp360-backhome .btn--block .button-text,
.mp360-lot__footer .btn--block .button-text,
.mp360-cuota__pie .btn--block .button-text {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: 0;
  text-align: center;
  /* El bloque del ícono ocupa la izquierda: el rótulo no puede solaparlo
     cuando el texto es largo. */
  padding-inline: calc(var(--btn-circle) + var(--btn-pad));
}

/* Foco visible por teclado: el control es un <button> real. */
#mp360-intro .btn:focus-visible,
#mp360-nav .btn:focus-visible,
.mp360-backhome .btn:focus-visible,
.mp360-lot__footer .btn:focus-visible,
.mp360-cuota__pie .btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Contorno de foco de la variante invertida

   Va al FINAL a propósito: la regla de foco del componente usa el shorthand
   `outline`, que reescribe el color. Declarado antes, este ajuste perdía por
   orden de cascada aunque el selector fuera más específico.

   El contorno del componente es blanco, pensado para anfitriones oscuros. En
   esta variante `:focus-visible` expande el bloque BLANCO hasta cubrir el
   control, así que un contorno blanco desaparecería justo cuando más se lo
   necesita. Pasa al violeta primario, que contrasta con el bloque.
   -------------------------------------------------------------------------- */
#mp360-intro .btn--primary-solid:focus-visible,
#mp360-nav .btn--primary-solid:focus-visible,
.mp360-backhome .btn--primary-solid:focus-visible,
.mp360-lot__footer .btn--primary-solid:focus-visible,
.mp360-cuota__pie .btn--primary-solid:focus-visible {
  outline-color: var(--primary-700);
}